@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 {
    --palmeiras-ink: #0f1f1a;
    --palmeiras-forest: #1d5b38;
    --palmeiras-canopy: #2f9e55;
    --palmeiras-fern: #7ccf98;
    --palmeiras-leaf: #cdeedd;
    --palmeiras-sand: #eef2eb;
    --palmeiras-foam: #f9fbf8;
    --palmeiras-earth: #633d1e;
    --palmeiras-mist: #e2ebdc;
}

body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at 18% 20%, rgba(205, 238, 221, 0.4), transparent 32%), radial-gradient(circle at 82% 4%, rgba(124, 207, 152, 0.22), transparent 36%), var(--palmeiras-foam);
    color: var(--palmeiras-ink);
}

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

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

.badge-brand {
    background: linear-gradient(120deg, rgba(47, 158, 85, 0.16), rgba(124, 207, 152, 0.4));
    color: var(--palmeiras-forest);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0.6px;
    border: 1px solid rgba(47, 158, 85, 0.25);
}

.sidebar {
    height: 100vh;
    background: linear-gradient(180deg, #ffffff 0%, var(--palmeiras-sand) 100%);
    color: var(--palmeiras-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(15,31,26,0.06);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar h4 {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    color: var(--palmeiras-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(15,31,26,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(47,158,85,0.08);
    color: var(--palmeiras-forest);
    border-left-color: var(--palmeiras-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(15,31,26,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(15,31,26,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(15,31,26,0.06);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(238,242,235,0.35), #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(124,207,152,0.2), #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(47,158,85,0.25), #ffffff);
    border-left-color: #2f9e55;
}

.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(--palmeiras-sand);
}

#chartsContainer h5 {
    display: inline-block;
    color: #1d5b38;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(47, 158, 85, 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(--palmeiras-forest);
    letter-spacing: 0.3px;
}

.btn-brand {
    background: linear-gradient(120deg, #ffffff, rgba(47,158,85,0.12));
    color: var(--palmeiras-forest);
    border: 1px solid rgba(47,158,85,0.35);
    font-weight: 700;
}

.btn-brand:hover {
    background: linear-gradient(120deg, rgba(47,158,85,0.18), rgba(124,207,152,0.24));
    color: var(--palmeiras-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(99,61,30,0.12);
    color: var(--palmeiras-ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 600;
    border: 1px solid rgba(99,61,30,0.32);
}

.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(15,31,26,0.06), transparent 40%), radial-gradient(circle at 12% 24%, rgba(124,207,152,0.25), transparent 36%), var(--palmeiras-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(15,31,26,0.08);
}

.brand-card::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(124,207,152,0.24), transparent 60%);
    top: -40px;
    right: -60px;
}

.presentismo-board {
    border: 1px solid rgba(15,31,26,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, #9be27e, #7ccf98);
    color: #0f1f1a;
    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(15,31,26,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(15,31,26,0.18);
    padding: 6px 8px;
    vertical-align: middle;
}

.presentismo-table tbody tr.presentismo-gestion-start td {
    border-top: 3px solid rgba(15,31,26,0.55);
}

.presentismo-table tbody tr.presentismo-gestion-end td {
    border-bottom: 3px solid rgba(15,31,26,0.55);
}

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

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

.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: #e8cf99;
    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: #f2ddb1;
}

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

.presentismo-head--metric {
    background: #9be27e;
    color: #0f1f1a;
    font-weight: 700;
}

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

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

.presentismo-head--percent {
    background: #9be27e;
    color: #0f1f1a;
    font-weight: 700;
}

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

.presentismo-gestion.alt {
    background: #c8b07b;
    color: #2a1a0c;
}

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

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

.presentismo-subproceso.alt {
    background: #cdb386;
    color: #2a1a0c;
}

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

.presentismo-expected {
    background: #cbb287;
    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: #2f6f3c;
    color: #f0fff0;
}

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

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

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

.presentismo-good {
    background: #2f6f3c;
    color: #f0fff0;
}

.presentismo-over {
    background: #c7e61a;
    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: #1d5b38;
    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: #2f9e55;
}

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

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

.ausentismo-board {
    border: 1px solid rgba(15,31,26,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, #9be27e, #7ccf98);
    color: #0f1f1a;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(15,31,26,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(15,31,26,0.18);
    border-color: rgba(15,31,26,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;
}