@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --datanova-ink: #0C1622;
    --datanova-forest: #0A9CAB;
    --datanova-canopy: #11BBCD;
    --datanova-fern: #7EDFE8;
    --datanova-leaf: #D7F4F7;
    --datanova-sand: #F8FBFD;
    --datanova-foam: #FFFFFF;
    --datanova-earth: #2D3741;
    --datanova-mist: #E6ECF0;
}

body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at 18% 20%, rgba(17, 187, 205, 0.12), transparent 32%), radial-gradient(circle at 82% 4%, rgba(17, 187, 205, 0.16), transparent 36%), var(--datanova-foam);
    color: var(--datanova-ink);
}

h1, h2, h3, h4, h5 {
    font-family: 'Space Grotesk', 'Manrope', 'Segoe UI', sans-serif;
    color: var(--datanova-ink);
    letter-spacing: 0.4px;
}

#dashboardSubtitle {
    white-space: pre-line;
}

.badge-brand {
    background: linear-gradient(120deg, rgba(17, 187, 205, 0.14), rgba(17, 187, 205, 0.24));
    color: var(--datanova-forest);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.6px;
    border: 1px solid rgba(17, 187, 205, 0.26);
}

.sidebar {
    height: 100vh;
    background: linear-gradient(180deg, #ffffff 0%, var(--datanova-sand) 100%);
    color: var(--datanova-ink);
    padding-top: 20px;
    position: fixed;
    width: 16.66667%; /* col-md-2 */
    box-shadow: 2px 0 12px rgba(0,0,0,0.06);
    border-right: 1px solid rgba(12,22,34,0.06);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar h4 {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    color: var(--datanova-ink);
}

.sidebar h3, .sidebar h4,
.sidebar-mobile h3, .sidebar-mobile h4 {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}

.sidebar img,
.sidebar-mobile img {
    width: 120px;
    height: auto;
}

.sidebar a,
.sidebar-mobile a {
    color: rgba(12,22,34,0.82);
    text-decoration: none;
    padding: 12px 20px;
    display: block;
    transition: all 0.25s;
    border-left: 3px solid transparent;
    font-weight: 700;
}

.sidebar a:hover, .sidebar a.active,
.sidebar-mobile a:hover, .sidebar-mobile a.active {
    background: rgba(17,187,205,0.12);
    color: var(--datanova-forest);
    border-left-color: var(--datanova-canopy);
}

.sidebar a i,
.sidebar-mobile a i {
    color: inherit;
}

.main-content {
    margin-left: 16.66667%; /* col-md-2 */
    padding: 28px;
    background-color: #fff;
    min-height: 100vh;
}

.mobile-nav {
    position: sticky;
    top: 0;
    z-index: 1025;
}

.offcanvas-header {
    border-bottom: 1px solid rgba(12,22,34,0.08);
}

.sidebar-mobile {
    padding-top: 8px;
}

@media (max-width: 767.98px) {
    .offcanvas {
        --bs-offcanvas-width: min(86vw, 320px);
    }

    .sidebar-mobile {
        padding-top: 0;
    }

    .sidebar-mobile img {
        width: 72px;
        margin: 0 auto;
        display: block;
    }

    .sidebar-mobile h4 {
        font-size: 0.95rem;
        letter-spacing: 0.6px;
        text-align: center;
    }

    .sidebar-mobile a {
        padding: 12px 14px;
        font-size: 0.9rem;
        border-left: none;
        border-bottom: 1px solid rgba(12,22,34,0.08);
    }

    .sidebar-mobile a:last-of-type {
        border-bottom: none;
    }

    .sidebar-mobile hr {
        margin: 12px 0;
    }

    .offcanvas-header {
        padding: 12px 16px;
    }

    .offcanvas-body {
        padding: 0 0 12px;
    }

    .main-content {
        margin-left: 0;
        padding: 20px;
    }

    #chartsContainer .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }
}

.card {
    border: 1px solid rgba(12,22,34,0.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(230,236,240,0.4), #ffffff);
}

.card-metric {
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    background: linear-gradient(160deg, rgba(17,187,205,0.16), #ffffff);
}

.card-metric:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.alert-card {
    border-left: 6px solid transparent;
}

.alert-card--green {
    background: linear-gradient(160deg, rgba(17,187,205,0.22), #ffffff);
    border-left-color: #11BBCD;
}

.alert-card--yellow {
    background: linear-gradient(160deg, rgba(244,183,64,0.3), #ffffff);
    border-left-color: #f4b740;
}

.alert-card--orange {
    background: linear-gradient(160deg, rgba(242,153,74,0.3), #ffffff);
    border-left-color: #f2994a;
}

.alert-card--amber {
    background: linear-gradient(160deg, rgba(242,201,76,0.3), #ffffff);
    border-left-color: #f2c94c;
}

.alert-card--red {
    background: linear-gradient(160deg, rgba(214,69,65,0.25), #ffffff);
    border-left-color: #d64541;
}

.table thead {
    background: var(--datanova-sand);
}

#chartsContainer h5 {
    display: inline-block;
    color: #0A9CAB;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(17, 187, 205, 0.12);
    text-align: center;
}

#chartsContainer h5,
#chartsContainer .small.text-muted,
#chartsContainer .subchart-title {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
}

#chartsContainer .subchart-title {
    font-size: 1rem;
    color: var(--datanova-forest);
    letter-spacing: 0.3px;
}

.btn-brand {
    background: linear-gradient(120deg, #ffffff, rgba(17,187,205,0.12));
    color: var(--datanova-forest);
    border: 1px solid rgba(17,187,205,0.34);
    font-weight: 700;
}

.btn-brand:hover {
    background: linear-gradient(120deg, rgba(17,187,205,0.18), rgba(17,187,205,0.2));
    color: var(--datanova-ink);
}

.presentismo-controls .btn,
.presentismo-controls .btn-group .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.presentismo-controls .btn-group {
    align-self: flex-end;
}

.pill {
    background: rgba(45,55,65,0.12);
    color: var(--datanova-ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 600;
    border: 1px solid rgba(45,55,65,0.24);
}

.surface {
    background: #fff;
    border: 1px solid rgba(0,29,35,0.08);
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.login-hero {
    background: radial-gradient(circle at 80% 10%, rgba(12,22,34,0.06), transparent 40%), radial-gradient(circle at 12% 24%, rgba(17,187,205,0.16), transparent 36%), var(--datanova-foam);
    min-height: 100vh;
}

.brand-shadow {
    position: absolute;
    inset: 12px;
    background: radial-gradient(ellipse at center, rgba(0,29,35,0.12), transparent 65%);
    filter: blur(18px);
    z-index: 0;
}

.brand-card {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(12,22,34,0.08);
}

.brand-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(17,187,205,0.2), transparent 60%);
    top: -40px;
    right: -60px;
}

.presentismo-board {
    border: 1px solid rgba(12,22,34,0.1);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.presentismo-title {
    background: linear-gradient(120deg, #11BBCD, #7EDFE8);
    color: #0C1622;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    padding: 12px 16px;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(12,22,34,0.15);
}

.presentismo-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}

.presentismo-table th,
.presentismo-table td {
    border: 1px solid rgba(12,22,34,0.18);
    padding: 6px 8px;
    vertical-align: middle;
}

.presentismo-table tbody tr.presentismo-gestion-start td {
    border-top: 3px solid rgba(12,22,34,0.5);
}

.presentismo-table tbody tr.presentismo-gestion-end td {
    border-bottom: 3px solid rgba(12,22,34,0.5);
}

.presentismo-table tbody tr.presentismo-gestion-band-a td:not(.presentismo-bad):not(.presentismo-warn):not(.presentismo-good):not(.presentismo-over) {
    background: #eaf2ff;
    color: #0C1622;
}

.presentismo-table tbody tr.presentismo-gestion-band-b td:not(.presentismo-bad):not(.presentismo-warn):not(.presentismo-good):not(.presentismo-over) {
    background: #F7FAFC;
    color: #2D3741;
}

.presentismo-table tbody tr.presentismo-gestion-band-a td.presentismo-gestion,
.presentismo-table tbody tr.presentismo-gestion-band-a td.presentismo-gestion-count {
    background: #cfe0ff;
    font-weight: 700;
}

.presentismo-table tbody tr.presentismo-gestion-band-a td.presentismo-subproceso,
.presentismo-table tbody tr.presentismo-gestion-band-a td.presentismo-subproceso-count,
.presentismo-table tbody tr.presentismo-gestion-band-a td.presentismo-expected {
    background: #dde9ff;
}

.presentismo-table tbody tr.presentismo-gestion-band-b td.presentismo-gestion,
.presentismo-table tbody tr.presentismo-gestion-band-b td.presentismo-gestion-count {
    background: #D8E2EA;
    font-weight: 700;
}

.presentismo-table tbody tr.presentismo-gestion-band-b td.presentismo-subproceso,
.presentismo-table tbody tr.presentismo-gestion-band-b td.presentismo-subproceso-count,
.presentismo-table tbody tr.presentismo-gestion-band-b td.presentismo-expected {
    background: #E8EFF4;
}

.presentismo-head--gestion {
    background: #2D3741;
    color: #fff;
    text-transform: uppercase;
}

.presentismo-head--metric {
    background: #11BBCD;
    color: #0C1622;
    font-weight: 700;
}

.presentismo-head--subproceso {
    background: #D8E2EA;
    color: #2D3741;
    text-transform: uppercase;
}

.presentismo-head--expected,
.presentismo-head--actual {
    background: #E6ECF0;
    color: #2D3741;
    font-weight: 700;
}

.presentismo-head--percent {
    background: #11BBCD;
    color: #0C1622;
    font-weight: 700;
}

.presentismo-gestion {
    background: #6f98d7;
    color: #0C1622;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    min-width: 160px;
}

.presentismo-gestion.alt {
    background: #D5DEE6;
    color: #2D3741;
}

.presentismo-gestion-count {
    background: #ddf3cf;
    font-weight: 700;
    text-align: center;
    min-width: 110px;
}

.presentismo-subproceso {
    background: #78a4e6;
    color: #0C1622;
    min-width: 200px;
}

.presentismo-subproceso.alt {
    background: #E3EAF0;
    color: #2D3741;
}

.presentismo-subproceso-count {
    background: #e3f7d6;
    text-align: center;
    font-weight: 600;
    min-width: 90px;
}

.presentismo-expected {
    background: #E6ECF0;
    text-align: right;
    font-weight: 700;
    min-width: 140px;
}

.presentismo-actual,
.presentismo-percent {
    text-align: right;
    font-weight: 700;
}

.presentismo-actual.presentismo-bad,
.presentismo-percent.presentismo-bad {
    background: rgba(201, 88, 88, 0.75);
    color: #fff;
}

.presentismo-actual.presentismo-warn,
.presentismo-percent.presentismo-warn {
    background: #f4a62a;
    color: #1b1b1b;
}

.presentismo-actual.presentismo-good,
.presentismo-percent.presentismo-good {
    background: #0A9CAB;
    color: #f0fff0;
}

.presentismo-actual.presentismo-over,
.presentismo-percent.presentismo-over {
    background: #D7F4F7;
    color: #7a1b1b;
}

.presentismo-bad {
    background: rgba(201, 88, 88, 0.75);
    color: #fff;
}

.presentismo-warn {
    background: #f4a62a;
    color: #1b1b1b;
}

.presentismo-good {
    background: #0A9CAB;
    color: #f0fff0;
}

.presentismo-over {
    background: #7EDFE8;
    color: #7a1b1b;
}

.presentismo-scroll {
    max-height: 620px;
    overflow: auto;
}

.presentismo-carousel {
    border-radius: 16px;
    overflow: hidden;
    background: #f6f7f5;
}

.presentismo-carousel .carousel-control-prev,
.presentismo-carousel .carousel-control-next {
    width: 12%;
    opacity: 1;
}

.presentismo-carousel .carousel-control-prev-icon,
.presentismo-carousel .carousel-control-next-icon {
    width: 2.6rem;
    height: 2.6rem;
    background-size: 1.2rem 1.2rem;
    background-color: #0A9CAB;
    border-radius: 999px;
    border: 2px solid #f6f7f5;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
}

.presentismo-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.presentismo-carousel .carousel-control-next:hover .carousel-control-next-icon {
    background-color: #11BBCD;
}

.presentismo-carousel .carousel-item {
    background: #f6f7f5;
}

.presentismo-slide {
    height: clamp(240px, 60vw, 520px);
    object-fit: contain;
    background: #f6f7f5;
}

.ausentismo-board {
    border: 1px solid rgba(12,22,34,0.18);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.ausentismo-title {
    background: linear-gradient(120deg, #11BBCD, #7EDFE8);
    color: #0C1622;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(12,22,34,0.15);
}

.ausentismo-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.74rem;
}

.ausentismo-table th,
.ausentismo-table td {
    border: 1px solid rgba(12,22,34,0.18);
    border-color: rgba(12,22,34,0.18) !important;
    padding: 6px 6px;
    vertical-align: middle;
    background: #fff;
}

.aus-head-place {
    font-weight: 700;
    text-transform: uppercase;
}

.aus-head-incap {
    font-weight: 700;
}

.aus-head-lic {
    font-weight: 700;
}

.aus-head-nopaga {
    font-weight: 700;
}

.aus-head-incap-sub {
    font-weight: 700;
}

.aus-head-lic-sub {
}

.aus-head-nopaga-sub {
}

.aus-head-col {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.68rem;
}

.aus-place {
    font-weight: 700;
}

.aus-cell-incap {
}

.aus-cell-arl {
}

.aus-cell-lic {
}

.aus-cell-nopaga {
}

.aus-total {
    font-weight: 700;
}

.aus-total-label {
    text-align: right;
    font-weight: 700;
}

.aus-total-cell {
    font-weight: 700;
}

.ausentismo-scroll {
    max-height: 620px;
    overflow: auto;
}