@font-face {
    font-family: "Area Normal";
    src: url("/fonts/area-normal/AreaNormal-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Area Normal";
    src: url("/fonts/area-normal/AreaNormal-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Area Normal";
    src: url("/fonts/area-normal/AreaNormal-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Area Normal";
    src: url("/fonts/area-normal/AreaNormal-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arista Pro";
    src: url("/fonts/arista-pro/AristaPro-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Arista Pro";
    src: url("/fonts/arista-pro/AristaPro-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==============================
   Reset / Base
============================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Area Normal", "Segoe UI", "Roboto", sans-serif;
    line-height: 1.6;
    background: var(--body-gradient);
    background-color: var(--body-bg);
    color: var(--body-color);
    transition: background 0.35s ease, color 0.35s ease;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .page-title, .section-title, .card-title, .modal-title {
    font-family: var(--font-family-heading);
    font-weight: 400;
    letter-spacing: 0.015em;
}

h1, .h1, .display-1, .display-2, .page-title {
    font-weight: 300;
    letter-spacing: 0.02em;
}

strong, b {
    font-weight: 600;
}



.cc-icon {
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    text-align: center;
    vertical-align: middle;
    flex-shrink: 0;
}


.cc-icon-inline {
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Indicador flotante del cálculo de novedades */
.calculo-indicator {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--body-bg);
    color: var(--body-color);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    z-index: 1080;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dark-theme .calculo-indicator {
    border-color: rgba(255, 255, 255, 0.14);
    background: #1f2a35;
    color: #f3f4f6;
}

.calculo-indicator:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.65rem 1.5rem rgba(0, 0, 0, 0.18);
}

.calculo-indicator .indicator-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #23c6dd;
    color: #ffffff;
}

.calculo-indicator .indicator-icon i {
    animation: calculo-indicator-spin 1.4s linear infinite;
}

.calculo-indicator .indicator-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.calculo-indicator .indicator-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.calculo-indicator .indicator-subtitle {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.65);
}

.dark-theme .calculo-indicator .indicator-subtitle {
    color: rgba(255, 255, 255, 0.75);
}

@keyframes calculo-indicator-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Oculta el mensaje de reconexión de Blazor para evitar mostrar
   "Attempt 1 of 8" cuando la conexión se pierde temporalmente */
#components-reconnect-modal {
    display: none !important;
}

/* ==============================
   Variables de color (Brand Theme)
============================== */
:root {
    --font-family-base: "Area Normal", "Segoe UI", "Roboto", sans-serif;
    --font-family-heading: "Arista Pro", "Area Normal", "Segoe UI", "Roboto", sans-serif;
    --bs-body-font-family: var(--font-family-base);
    --bs-font-sans-serif: var(--font-family-base);
    --primary-theme: #00bcc4;
    --primary-theme-strong: #007e8b;
    --danger-theme: #ef4444;
    --neutral-theme: #6b7280;
    --success-theme: #22c55e;
    --topbar-height: 52px;
    --body-bg: #eef2f3;
    --body-gradient: linear-gradient(180deg, #ffffff 0%, #dcdedd 52%, #eef2f3 100%);
    --body-color: #122749;
    --sidebar-bg: linear-gradient(195deg, #00bcc4 0%, #01b6bf 58%, #007e8b 100%);
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --topbar-bg: linear-gradient(135deg, #00bcc4 0%, #01b6bf 62%, #007e8b 100%);
    --topbar-border: rgba(255, 255, 255, 0.18);
    --topbar-color: #f8fafc;
    --table-bg: #f7f9f9;
    --table-row-alt: rgba(0, 188, 196, 0.06);
    --surface-bg: color-mix(in srgb, #ffffff 84%, #dcdedd 16%);
    --surface-shadow: 0 16px 40px rgba(18, 39, 73, 0.12);
    --surface-shadow-hover: 0 22px 52px rgba(18, 39, 73, 0.18);
    --surface-border: color-mix(in srgb, #007e8b 22%, #ffffff);
    --content-pane-bg: linear-gradient(165deg, #ffffff 0%, #dcdedd 72%, #bababa 100%);
    --veil-bg: rgba(255,255,255,.7); /* velo claro por defecto */
}

.dark-theme {
    --primary-theme: #00bcc4;
    --primary-theme-strong: #00bcc4;
    --danger-theme: #f28b82;
    --neutral-theme: #9aa0a6;
    --success-theme: #81c995;
    --body-bg: #0d172b;
    --body-gradient: radial-gradient(circle at top right, rgba(0, 188, 196, 0.12), transparent 45%), linear-gradient(180deg, #122749 0%, #0d172b 100%);
    --body-color: #f9fafb;
    --sidebar-bg: linear-gradient(180deg, #122749 0%, #007e8b 100%);
    --sidebar-border: rgba(148, 163, 184, 0.16);
    --topbar-bg: linear-gradient(90deg, #122749 0%, #007e8b 100%);
    --topbar-border: rgba(255, 255, 255, 0.12);
    --topbar-color: #e5edf6;
    --table-bg: #142038;
    --table-row-alt: rgba(0, 188, 196, 0.16);
    --surface-bg: color-mix(in srgb, #122749 88%, #0d172b 12%);
    --surface-shadow: 0 20px 45px rgba(2, 6, 23, 0.55);
    --surface-shadow-hover: 0 24px 60px rgba(0, 0, 0, 0.68);
    --surface-border: color-mix(in srgb, #00bcc4 24%, #122749);
    --content-pane-bg: linear-gradient(165deg, #122749 0%, #0d172b 76%, #0a1222 100%);
    --veil-bg: rgba(0,0,0,.55); /* velo oscuro en dark */
}

.dark-theme #reporteScroll,
.dark-theme #reporteLegajos {
    color: white;
}

/* ==============================
   Utilidades
============================== */
.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 0.25rem;
}

.turno-cantidad-input {
    width: 3.6rem;
    min-width: 3.6rem;
    max-width: 3.6rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.spinner-border,
.spinner-grow {
    display: none !important;
}

.cargando-overlay {
    --table-overlay-surface: color-mix(in srgb, var(--surface-bg) 82%, transparent);
    --table-overlay-border: color-mix(in srgb, var(--border-color) 56%, transparent);
    --table-overlay-glow: color-mix(in srgb, var(--primary-theme) 28%, transparent);
    --table-loader-color: color-mix(in srgb, var(--primary-theme) 78%, #ffffff 22%);
    --table-loader-track: color-mix(in srgb, var(--primary-theme) 16%, transparent);
    position: absolute;
    inset: 0;
    width: var(--scroll-width, 100%);
    min-width: 100%;
    height: var(--scroll-height, 100%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    z-index: 12;
    cursor: wait;
    pointer-events: all;
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
    background:
        radial-gradient(85% 65% at 50% 45%, color-mix(in srgb, var(--primary-theme) 12%, transparent), transparent 72%),
        var(--table-overlay-surface);
    border: 1px solid var(--table-overlay-border);
    border-radius: inherit;
    animation: table-overlay-fade-in 180ms ease-out;
}

.dark-theme .cargando-overlay {
    --table-overlay-surface: color-mix(in srgb, var(--surface-bg) 72%, transparent);
    --table-overlay-border: color-mix(in srgb, #ffffff 24%, transparent);
    --table-loader-color: color-mix(in srgb, #8ab4ff 82%, #ffffff 18%);
    --table-loader-track: color-mix(in srgb, #8ab4ff 18%, transparent);
}

@keyframes table-overlay-fade-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cfg-notif-label {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Mostrar cursor de espera en toda la ventana mientras exista un overlay */
body:has(.cargando-overlay),
body:has(.cargando-overlay) * {
    cursor: wait !important;
}

/* ==============================
   Botones
============================== */
.btn {
    border-radius: 0.75rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}


.btn .cc-icon {
    font-size: 1.2em;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-0.08em);
}

.nav-menu .nav-link .cc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.12);
    filter: brightness(1.03);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.btn.btn-theme {
    background-color: var(--primary-theme) !important;
    color: white !important;
    border: none !important;
}

    .btn.btn-theme:hover {
        background-color: var(--primary-theme-strong) !important;
    }

.btn.btn-success {
    background-color: var(--success-theme) !important;
    color: white !important;
    border: none !important;
}

    .btn.btn-success:hover {
        background-color: #179944 !important;
    }

.btn.btn-neutral {
    background-color: rgba(75, 85, 99, 1) !important;
    color: white !important;
    border: none !important;
}

    .btn.btn-neutral:hover {
        background-color: rgba(55, 65, 81, 1) !important;
    }

.btn.btn-danger {
    background-color: var(--danger-theme) !important;
    color: white !important;
    border: none !important;
}

    .btn.btn-danger:hover {
        background-color: #d13636 !important;
    }

.btn-report {
    border-radius: 999px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-weight: 500;
}

.legajo-split .btn-main {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.legajo-split .btn-caret {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dark-theme .legajo-split .btn {
    background-color: rgba(17, 25, 40, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}

.dark-theme .legajo-split .btn:hover,
.dark-theme .legajo-split .btn:focus-visible {
    background-color: rgba(37, 66, 118, 0.75) !important;
}

.dark-theme .btn {
    color: #fff !important;
}

.dark-theme .legajo-restore-btn {
    background-color: rgba(17, 25, 40, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #fff !important;
}

.dark-theme .legajo-restore-btn:hover,
.dark-theme .legajo-restore-btn:focus-visible {
    background-color: rgba(37, 66, 118, 0.75) !important;
}

/* Alinea el texto a la izquierda y el triangulo a la derecha en botones de dropdown */



/* ==============================
   Cards
============================== */
.card-theme {
    border: 1px solid var(--surface-border);
    background: linear-gradient(170deg, color-mix(in srgb, var(--surface-bg) 96%, #ffffff 4%), var(--surface-bg));
    border-radius: 16px;
    box-shadow: var(--surface-shadow);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.dark-theme .card-theme {
    background-color: var(--surface-bg);
    color: var(--body-color);
    border-color: var(--surface-border);
}

.card-theme:hover {
    box-shadow: var(--surface-shadow-hover);
    transform: translateY(-2px);
}

.hero-card {
    background: linear-gradient(140deg, rgba(0, 188, 196, 0.12) 0%, rgba(255, 255, 255, 0.96) 34%, rgba(220, 222, 221, 0.72) 100%);
    border-radius: 24px;
    border: 1px solid rgba(0, 126, 139, 0.18);
    box-shadow: var(--surface-shadow);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}

.dark-theme .hero-card {
    background: linear-gradient(140deg, rgba(0, 126, 139, 0.34) 0%, rgba(18, 39, 73, 0.92) 44%, rgba(13, 23, 43, 0.9) 100%);
    border-color: rgba(0, 188, 196, 0.28);
    box-shadow: var(--surface-shadow);
}

.hero-card:hover {
    box-shadow: var(--surface-shadow-hover);
    transform: translateY(-4px);
}

.dark-theme .hero-card h1,
.dark-theme .hero-card p,
.dark-theme .hero-card li {
    color: #e5e7eb !important;
}

.dark-theme .hero-card .text-muted {
    color: rgba(209, 213, 219, 0.8) !important;
}

.dark-theme .hero-card .text-primary {
    color: #38bdf8 !important;
}

.calculo-novedades-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.calculo-hero {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    position: relative;
    overflow: hidden;
}

.calculo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(27, 184, 194, 0.25), transparent 55%);
    pointer-events: none;
}

.dark-theme .calculo-hero::after {
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.25), transparent 60%);
}

.calculo-hero h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
    font-size: clamp(1.75rem, 2.2vw, 2.25rem);
}

.calculo-hero p.lead {
    max-width: 52ch;
    margin-bottom: 0;
    opacity: 0.85;
    font-size: clamp(1rem, 1rem + 0.15vw, 1.1rem);
}

.calculo-content {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 1200px) {
    .calculo-content {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
        align-items: start;
    }
}

.calculo-step-card .card-body,
.calculo-side-card .card-body {
    padding: clamp(1.25rem, 1.75vw, 1.85rem);
}

.calculo-step-card h5 {
    font-weight: 600;
    color: var(--primary-theme-strong);
    margin-bottom: 0.75rem;
}

.calculo-step-card p,
.calculo-side-card p {
    color: rgba(15, 23, 42, 0.75);
    margin-bottom: 0.75rem;
}

.dark-theme .calculo-step-card p,
.dark-theme .calculo-side-card p {
    color: rgba(226, 232, 240, 0.85);
}

.calculo-step-card .form-check-label,
.calculo-step-card .form-label {
    font-weight: 500;
}

.calculo-side-card h6 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 0.5rem;
}

.dark-theme .calculo-side-card h6 {
    color: rgba(226, 232, 240, 0.6);
}

.calculo-step-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.calculo-step-timeline li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.55rem 0.65rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.calculo-step-timeline li .step-indicator {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background: rgba(27, 184, 194, 0.12);
    color: var(--primary-theme-strong);
}

.calculo-step-timeline li.active {
    border-color: rgba(27, 184, 194, 0.35);
    background: rgba(27, 184, 194, 0.08);
}

.calculo-step-timeline li.completed .step-indicator {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-theme);
}

.calculo-step-timeline li.completed span {
    color: var(--success-theme);
    font-weight: 600;
}

.dark-theme .calculo-step-timeline li {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.4);
}

.dark-theme .calculo-step-timeline li.active {
    border-color: rgba(56, 189, 248, 0.25);
    background: rgba(56, 189, 248, 0.12);
}

.dark-theme .calculo-step-timeline li .step-indicator {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

.calculo-summary dt {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(15, 23, 42, 0.55);
}

.calculo-summary dd {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.75);
}

.dark-theme .calculo-summary dt {
    color: rgba(226, 232, 240, 0.6);
}

.dark-theme .calculo-summary dd {
    color: rgba(226, 232, 240, 0.85);
}

.calculo-result-item {
    border-radius: 12px;
    border: 1px solid rgba(27, 184, 194, 0.15);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    background: rgba(27, 184, 194, 0.06);
}

.calculo-result-item.success {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
}

.calculo-result-item.error {
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
}

.dark-theme .calculo-result-item {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.2);
}

.dark-theme .calculo-result-item.success {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.25);
}

.dark-theme .calculo-result-item.error {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.25);
}

.recalculo-modal .form-check-input {
    width: 2.5rem;
    height: 1.3rem;
}

.recalculo-modal .form-text {
    font-size: 0.75rem;
    color: rgba(15, 23, 42, 0.6);
}

.dark-theme .recalculo-modal .form-text {
    color: rgba(226, 232, 240, 0.65);
}

/* ==============================
   Modal content
============================== */
.modal-content.card-theme {
    border-radius: 18px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--surface-shadow);
    background-color: var(--surface-bg);
    backdrop-filter: blur(6px);
    transition: box-shadow 0.25s ease;
}
.dark-theme .modal-content.card-theme {
    background-color: var(--surface-bg);
}
.dark-theme .modal-content.card-theme .modal-body {
    color: #fff;
}

.modal-content.card-danger {
    border-radius: 18px;
    border: 1px solid #dc2626;
    box-shadow: var(--surface-shadow);
    background-color: #ffffff;
}

.modal-content.card-danger .modal-footer {
    border-top: 1px solid rgba(220, 38, 38, 0.2);
    background-color: transparent;
}

.dark-theme .modal-content.card-danger {
    background-color: var(--surface-bg);
    border-color: #7f1d1d;
    color: inherit;
}

.dark-theme .modal-content.card-danger .modal-footer {
    border-top-color: rgba(248, 113, 113, 0.3);
}

/* ==============================
   Modal Header Lavanda
============================== */
.modal-header.theme-header,
.card-header.theme-header {
    background: linear-gradient(135deg, var(--primary-theme) 0%, var(--primary-theme-strong) 100%);
    color: white;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 0.75rem 1rem;
}

.modal-header.danger-header {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
    color: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.75rem 1rem;
}

.dark-theme .modal-header.danger-header {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.25);
}



/* ==============================
   Inputs
============================== */
.form-control:focus {
    border-color: var(--primary-theme);
    box-shadow: 0 0 0 0.25rem rgba(27, 184, 194, 0.2);
}

.form-select:focus,
.form-check-input:focus {
    border-color: var(--primary-theme);
    box-shadow: 0 0 0 0.2rem rgba(27, 184, 194, 0.18);
}

.form-check-input:checked {
    background-color: var(--primary-theme);
    border-color: var(--primary-theme);
}

.form-control,
.form-select,
.form-check-input {
    border-radius: 0.75rem;
    border-color: rgba(15, 23, 42, 0.12);
    background-color: rgba(255, 255, 255, 0.92);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.dark-theme .form-control,
.dark-theme .form-select,
.dark-theme .form-check-input {
    background-color: rgba(15, 23, 42, 0.75);
    border-color: rgba(148, 163, 184, 0.25);
    color: #fff;
}

.dark-theme .form-control::placeholder,
.dark-theme .form-select::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

.dark-theme label,
.dark-theme .form-label,
.dark-theme .form-check-label,
.dark-theme .form-text,
.dark-theme .form-select option,
.dark-theme .form-control,
.dark-theme .form-select {
    color: #fff !important;
}

.dark-theme input[type="date"]::-webkit-calendar-picker-indicator,
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.85;
}

.dark-theme input[type="time"]::-webkit-inner-spin-button,
.dark-theme input[type="time"]::-webkit-clear-button {
    filter: invert(1);
}

.dark-theme input[type="date"]::-webkit-calendar-picker-indicator:hover,
.dark-theme input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ==============================
   Tablas
============================== */
.table-theme {
    --table-divider-color: rgba(15, 23, 42, 0.1);
    --table-outline-color: color-mix(in srgb, var(--surface-border) 72%, rgba(15, 23, 42, 0.18));
    --table-header-bg: var(--primary-theme);
    --table-header-color: #ffffff;
    --table-row-bg: color-mix(in srgb, var(--surface-bg) 90%, #ffffff 10%);
    --table-row-alt-bg: var(--table-row-alt);
    --table-row-hover-bg: rgba(27, 184, 194, 0.12);
    --table-row-selected-bg: color-mix(in srgb, var(--primary-theme) 16%, var(--surface-bg) 84%);
    --table-sticky-shadow: 6px 0 10px -10px rgba(15, 23, 42, 0.85);
}

.dark-theme .table-theme {
    --table-divider-color: rgba(148, 163, 184, 0.18);
    --table-outline-color: color-mix(in srgb, var(--surface-border) 78%, rgba(148, 163, 184, 0.26));
    --table-row-bg: color-mix(in srgb, var(--surface-bg) 88%, #0d172b 12%);
    --table-row-alt-bg: rgba(15, 23, 42, 0.65);
    --table-row-hover-bg: rgba(56, 189, 248, 0.18);
    --table-row-selected-bg: color-mix(in srgb, var(--primary-theme) 18%, #1f2937 82%);
    --table-sticky-shadow: 6px 0 10px -10px rgba(2, 6, 23, 0.95);
}

.table-theme th {
    background-color: var(--table-header-bg);
    color: var(--table-header-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table-theme th,
.table-theme td {
    border-color: var(--table-divider-color) !important;
}

/* Fondo de tablas en ambos temas */
table {
    background-color: var(--table-bg);
}

.table.table-theme {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    border: 1px solid var(--table-outline-color);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.08);
    background-color: var(--surface-bg);
}

.table.table-theme > :not(caption) > * > * {
    background-clip: padding-box;
}

.table-selection-summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 0.5rem;
    padding: 0;
    color: var(--body-color, inherit);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
}

.dark-theme .table-selection-summary {
    color: rgba(255, 255, 255, 0.88);
}

.table-theme tbody tr {
    background-color: var(--table-row-bg);
}

.table-theme tbody tr:nth-child(even) {
    background-color: var(--table-row-alt-bg);
}

.table-theme tbody tr:hover {
    background-color: var(--table-row-hover-bg);
    color: inherit;
}

.table-theme tbody tr.table-active,
.table-theme tbody tr:has(td input[type="checkbox"]:checked) {
    background-color: var(--table-row-selected-bg) !important;
    color: inherit;
}

.table-theme tbody tr.table-active:hover,
.table-theme tbody tr:has(td input[type="checkbox"]:checked):hover {
    background-color: var(--table-row-selected-bg) !important;
}

#reporteScroll table th,
#reporteScroll table td,
#reporteLegajos table th,
#reporteLegajos table td {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

/* Columnas limitadas por desbordes */
.limit-columns th,
.limit-columns td {
    max-width: var(--max-ch, 50ch);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==============================
   Badges
============================== */
.badge-status {
    font-size: 0.85rem;
    padding: 0.4em 0.6em;
    border-radius: 0.5rem;
    background: rgba(27, 184, 194, 0.12);
    color: var(--primary-theme-strong);
    border: 1px solid rgba(27, 184, 194, 0.2);
}

.dark-theme .badge-status {
    background: rgba(56, 189, 248, 0.18);
    color: #bae6fd;
    border-color: rgba(56, 189, 248, 0.28);
}

/* ==============================
   Modal fondo para Blazor
============================== */
.modal-backdrop.show {
    opacity: 0.5;
}

.modal.show.d-block {
    display: block;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: translate(0, 0);
    opacity: 1;
}

/* Evitar que los modales queden ocultos bajo el topbar fijo */
.modal,
.modal.fade,
.modal.show {
    padding-top: var(--topbar-height);
}

.modal-dialog,
.modal-dialog-centered,
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - var(--topbar-height) - 1.5rem);
}

.modal-dialog-centered {
    align-items: flex-start;
}

/* ==============================
   Área (arbol y radios)
============================== */
.area-tree input[type="radio"]:checked {
    accent-color: var(--primary-theme);
}

.area-tree {
    background-color: var(--table-bg);
}

.area-item.selected {
    font-weight: bold;
    color: inherit;
}

/* ==============================
   Botón cerrar blanco fuerte
============================== */
.modal-header.theme-header .btn-close {
    filter: invert(1) grayscale(1) brightness(5);
    opacity: 1 !important;
}


/* Sidebar con color claro */
.sidebar {
    background: var(--sidebar-bg);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 45px rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(12px);
}

.sidebar .nav-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
}
.sidebar .nav-menu > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.sidebar {
    overflow-x: hidden;
}
.sidebar .nav-menu::-webkit-scrollbar {
    width: 6px;
}
.sidebar .nav-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* Navegación dentro del sidebar */
.nav-menu {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-menu-content {
    margin-top: 0.5rem;
}

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-menu li + li {
    margin-top: 0.5rem;
}

.nav-menu a {
    text-decoration: none;
    color: inherit;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    position: relative;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.nav-menu .nav-link img.nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.25));
}

.nav-menu .nav-badge {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.35);
}

.nav-menu .nav-badge-corner {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
}

.nav-menu .nav-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #e11d48;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.2);
    display: inline-block;
    margin-left: 0.35rem;
    margin-top: 0.1rem;
}

.legajo-pending-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: #e11d48;
    box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.2);
    vertical-align: middle;
}

.toast-stack {
    position: relative;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12), 12px 12px 0 rgba(0, 0, 0, 0.08);
}

.toast-stack::after {
    content: "";
    position: absolute;
    inset: 6px -6px -6px 6px;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: -1;
}

.toast-solicitud {
    background-color: #e11d48;
    color: #fff;
    min-width: 35rem;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.toast-solicitud .toast-header {
    background-color: #be123c;
    color: #fff;
    font-size: 1.2rem;
}

.toast-smartphone {
    background-color: #2563eb;
    color: #fff;
    min-width: 35rem;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.toast-smartphone .toast-header {
    background-color: #1d4ed8;
    color: #fff;
    font-size: 1.2rem;
}


.toast-portal-aprobada {
    background-color: #198754;
    color: #fff;
    min-width: 35rem;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.toast-portal-aprobada .toast-header {
    background-color: #157347;
    color: #fff;
    font-size: 1.2rem;
}

.toast-portal-rechazada {
    background-color: #ff1f3d;
    color: #fff;
    min-width: 35rem;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.toast-portal-rechazada .toast-header {
    background-color: #d10024;
    color: #fff;
    font-size: 1.2rem;
}

.toast-portal-visita {
    background-color: #2563eb;
    color: #fff;
    min-width: 35rem;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.toast-portal-visita .toast-header {
    background-color: #1d4ed8;
    color: #fff;
    font-size: 1.2rem;
}

.toast-portal-notificacion {
    background-color: #f59e0b;
    color: #111827;
    min-width: 35rem;
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

.toast-portal-notificacion .toast-header {
    background-color: #d97706;
    color: #111827;
    font-size: 1.2rem;
}

.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 1.15rem;
    background: var(--topbar-bg);
    color: var(--topbar-color);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid var(--topbar-border);
    z-index: 1200;
    backdrop-filter: blur(10px);
}

.dark-theme .app-topbar {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.nav-menu-tabbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--topbar-bg) 26%, transparent);
    padding: 0.25rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--topbar-border) 70%, transparent);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
    flex: 1 1 auto;
}

.dark-theme .nav-menu-tabbar {
    background: color-mix(in srgb, var(--topbar-bg) 32%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-top-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.topbar-action {
    border: 1px solid color-mix(in srgb, var(--topbar-border) 85%, transparent);
    background: color-mix(in srgb, var(--topbar-bg) 35%, transparent);
    color: inherit;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.topbar-action:hover,
.topbar-action:focus-visible,
.topbar-action:active {
    background: rgba(255, 255, 255, 0.16);
    color: var(--topbar-color);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
    border-color: color-mix(in srgb, var(--topbar-border) 100%, transparent);
}

 .topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.95rem;
    max-width: min(38vw, 380px);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--topbar-color);
    margin-right: 0.25rem;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.topbar-user .cc-icon {
    font-size: 1.2em;
    transform: translateY(0.03em);
}


.tab-chip {
    border: none;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    transition: all 0.2s ease;
    font-weight: 600;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tab-chip:hover, .tab-chip:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tab-chip.active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.tab-chip .chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.05rem;
}

.tab-chip .chip-icon .cc-icon {
    font-size: 1.2rem;
}


.tab-chip .tab-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.22);
    color: inherit;
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.nav-menu .active,
.nav-menu .nav-link.active,
.nav-menu li.active > a {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

/* Pie del sidebar */
.sidebar-footer {
    text-align: center;
    margin-top: auto;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-footer {
    max-width: 100%;
    width: 190px;
    margin: 0;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

.texto-empresa {
    color: rgba(255, 255, 255, 0.88);
    font-family: "Area Normal", "Segoe UI", "Roboto", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.18rem;
    text-transform: uppercase;
}

.scrollable-content {
    /* Keep vertical scrolling inside main content while letting overlays escape horizontally */
    overflow-y: auto;
    overflow-x: visible;
    height: 100%;
}

.area-tree-node {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: calc(var(--tree-depth, 0) * 20px);
    padding: 2px 0;
}

.area-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    line-height: 1;
    user-select: none;
    cursor: pointer;
}

.area-tree-toggle-placeholder {
    cursor: default;
}

.area-tree-checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0 !important;
    flex: 0 0 auto;
}

.area-tree-label {
    line-height: 1.2;
}

label {
    white-space: nowrap;
}

/* Solo afecta a la tabla de Legajos */
.tabla-legajos-wrapper {
    position: relative;
    width: max-content;
    max-width: 100%;
}

.no-caret::after {
    display: none !important;
}

.tabla-menu-calendario-wrapper {
    position: relative;
    width: max-content;
    max-width: 100%;
}

.tabla-legajos td, .tabla-legajos th {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

.tabla-legajos {
    width: max-content;
    min-width: max-content;
    table-layout: fixed;
}

    .tabla-legajos td {
        white-space: nowrap;
    }

    .tabla-legajos .col-apynom {
        /* ancho libre, se limitará via JS si es necesario */
    }

.tabla-menu-calendario {
    width: max-content;
    min-width: max-content;
}

    .tabla-menu-calendario td,
    .tabla-menu-calendario th {
        white-space: nowrap;
    }

/* === Tabla de Relojes === */
.tabla-relojes {
    width: max-content;
    min-width: max-content;
    table-layout: auto;
    font-size: 0.85rem;
}

    .tabla-relojes th,
    .tabla-relojes td {
        padding: 0.3rem 0.4rem;
        white-space: nowrap;
        height: 36px;
        vertical-align: middle;
    }

/* Asegura que los menús de operaciones se muestren siempre por delante de la tabla */
#contenedorRelojes,
#contenedorRelojes .tabla-relojes,
#contenedorRelojes .tabla-relojes td,
#contenedorRelojes .tabla-relojes .btn-group {
    overflow: visible;
}

#contenedorRelojes .tabla-relojes td,
#contenedorRelojes .tabla-relojes .btn-group {
    position: relative;
}

#contenedorRelojes .tabla-relojes .dropdown-menu {
    z-index: 2000;
}

/* Opcional: limitar altura total de la tabla con scroll si hay muchos relojes */
.contenedor-tabla-relojes {
    max-height: 250px;
    overflow-y: auto;
}

/* === Tabla de Fichadas === */
.tabla-fichadas-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

[data-table-scroll] {
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
    background: transparent;
}

[id^="contenedor"] {
    min-height: 0;
}

[id^="contenedor"]:has(> [data-table-scroll]) {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    overscroll-behavior: contain;
    background: transparent;
    min-height: 0;
}

[id^="contenedor"]:has(> [data-table-scroll]) > [data-table-scroll] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: transparent;
}

[data-table-scroll] table.sticky-header thead {
    position: static;
}

[data-table-scroll] table.sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--primary-theme);
    color: #fff;
}

[data-table-scroll] table.sticky-checkbox-column thead th:first-child,
[data-table-scroll] table.sticky-checkbox-column tbody td:first-child,
.table-responsive table.sticky-checkbox-column thead th:first-child,
.table-responsive table.sticky-checkbox-column tbody td:first-child {
    position: sticky;
    left: 0;
    background-clip: border-box;
}

[data-table-scroll] table.sticky-checkbox-column,
.table-responsive table.sticky-checkbox-column {
    --sticky-checkbox-divider-color: var(--table-divider-color, rgba(15, 23, 42, 0.1));
}

[data-table-scroll] table.sticky-checkbox-column tbody td:first-child,
.table-responsive table.sticky-checkbox-column tbody td:first-child {
    z-index: 3;
    isolation: isolate;
    background-color: var(--sticky-checkbox-cell-bg, var(--sticky-checkbox-base-bg, var(--table-row-bg, transparent)));
    box-shadow: inset -1px 0 0 var(--sticky-checkbox-divider-color);
}

[data-table-scroll] table.sticky-checkbox-column tbody td:first-child::before,
.table-responsive table.sticky-checkbox-column tbody td:first-child::before {
    content: "";
    position: absolute;
    inset: -1px -1px -1px -2px;
    background-color: var(--sticky-checkbox-base-bg, var(--table-row-bg, var(--table-bg, var(--bs-body-bg, #fff))));
    box-shadow: inset -1px 0 0 var(--sticky-checkbox-divider-color);
    z-index: -1;
}

[data-table-scroll] table.sticky-checkbox-column thead th:first-child::before,
.table-responsive table.sticky-checkbox-column thead th:first-child::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -2px;
    bottom: -1px;
    width: 1px;
    background-color: var(--sticky-checkbox-divider-color);
    pointer-events: none;
}

[data-table-scroll] table.sticky-checkbox-column thead th:first-child::after,
[data-table-scroll] table.sticky-checkbox-column tbody td:first-child::after,
.table-responsive table.sticky-checkbox-column thead th:first-child::after,
.table-responsive table.sticky-checkbox-column tbody td:first-child::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    bottom: -1px;
    width: 1px;
    background-color: var(--sticky-checkbox-divider-color);
    pointer-events: none;
}

[data-table-scroll] table.sticky-checkbox-column thead th:first-child,
.table-responsive table.sticky-checkbox-column thead th:first-child {
    z-index: 6;
    background-color: var(--table-header-bg, var(--primary-theme));
    color: #fff;
    box-shadow: inset -1px 0 0 var(--sticky-checkbox-divider-color);
}
    [data-table-scroll] table.sticky-checkbox-column tbody tr,
    .table-responsive table.sticky-checkbox-column tbody tr {
        --sticky-checkbox-base-bg: var(--table-row-bg, var(--table-bg, var(--bs-body-bg, #fff)));
        --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
    }

        [data-table-scroll] table.sticky-checkbox-column tbody tr:nth-child(even),
        .table-responsive table.sticky-checkbox-column tbody tr:nth-child(even) {
            --sticky-checkbox-base-bg: var(--table-row-alt-bg, var(--table-row-bg, var(--table-bg, var(--bs-body-bg, #fff))));
            --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
        }

[data-table-scroll] table.table-hover.sticky-checkbox-column tbody tr:hover,
.table-responsive table.table-hover.sticky-checkbox-column tbody tr:hover {
    --sticky-checkbox-base-bg: var(--table-row-hover-bg, color-mix(in srgb, var(--primary-theme) 14%, var(--sticky-checkbox-base-bg) 86%));
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

[data-table-scroll] table.sticky-checkbox-column tbody tr.table-active,
.table-responsive table.sticky-checkbox-column tbody tr.table-active,
[data-table-scroll] table.sticky-checkbox-column tbody tr:has(td input[type="checkbox"]:checked),
.table-responsive table.sticky-checkbox-column tbody tr:has(td input[type="checkbox"]:checked) {
    --sticky-checkbox-base-bg: var(--table-row-selected-bg, color-mix(in srgb, #122749 10%, var(--sticky-checkbox-base-bg) 90%));
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

.dark-theme [data-table-scroll] table.sticky-checkbox-column tbody tr:nth-child(even),
.dark-theme .table-responsive table.sticky-checkbox-column tbody tr:nth-child(even) {
    --sticky-checkbox-base-bg: var(--table-bg, var(--bs-body-bg, #fff));
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

.dark-theme [data-table-scroll] table.table-hover.sticky-checkbox-column tbody tr:hover,
.dark-theme .table-responsive table.table-hover.sticky-checkbox-column tbody tr:hover {
    --sticky-checkbox-base-bg: var(--table-row-hover-bg, rgba(56, 189, 248, 0.18));
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

.dark-theme [data-table-scroll] table.sticky-checkbox-column tbody tr.table-active,
.dark-theme .table-responsive table.sticky-checkbox-column tbody tr.table-active,
.dark-theme [data-table-scroll] table.sticky-checkbox-column tbody tr:has(td input[type="checkbox"]:checked),
.dark-theme .table-responsive table.sticky-checkbox-column tbody tr:has(td input[type="checkbox"]:checked) {
    --sticky-checkbox-base-bg: var(--table-row-selected-bg, #6c757d);
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

.dark-theme [data-table-scroll] table.sticky-checkbox-column thead th:first-child::after,
.dark-theme [data-table-scroll] table.sticky-checkbox-column tbody td:first-child::after,
.dark-theme .table-responsive table.sticky-checkbox-column thead th:first-child::after,
.dark-theme .table-responsive table.sticky-checkbox-column tbody td:first-child::after {
    background-color: rgba(148, 163, 184, 0.18);
}

.dark-theme [data-table-scroll] table.sticky-checkbox-column,
.dark-theme .table-responsive table.sticky-checkbox-column {
    --sticky-checkbox-divider-color: rgba(148, 163, 184, 0.18);
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]),
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) {
    --sticky-checkbox-divider-color: var(--table-divider-color, rgba(15, 23, 42, 0.1));
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) thead th:first-child,
[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) thead th:first-child,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child {
    position: sticky;
    left: 0;
    background-clip: border-box;
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) thead th:first-child,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) thead th:first-child {
    z-index: 6;
    background-color: var(--table-header-bg, var(--primary-theme));
    color: #fff;
    box-shadow: inset -1px 0 0 var(--sticky-checkbox-divider-color);
}

    [data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr,
    .table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr {
        --sticky-checkbox-base-bg: var(--table-bg, var(--bs-body-bg, #fff));
        --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
    }

        [data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr:nth-child(even),
        .table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr:nth-child(even) {
            --sticky-checkbox-base-bg: var(--table-bg, var(--bs-body-bg, #fff));
            --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
        }

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr:hover,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr:hover {
    --sticky-checkbox-base-bg: var(--table-row-hover-bg, color-mix(in srgb, var(--primary-theme) 14%, var(--sticky-checkbox-base-bg) 86%));
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr.table-active,
[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr:has(td input[type="checkbox"]:checked),
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr.table-active,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr:has(td input[type="checkbox"]:checked) {
    --sticky-checkbox-base-bg: var(--table-row-selected-bg, color-mix(in srgb, #122749 10%, var(--sticky-checkbox-base-bg) 90%));
    --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child {
    z-index: 3;
    isolation: isolate;
    background-color: var(--sticky-checkbox-cell-bg, var(--sticky-checkbox-base-bg));
    box-shadow: inset -1px 0 0 var(--sticky-checkbox-divider-color);
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child::before,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child::before {
    content: "";
    position: absolute;
    inset: -1px -1px -1px -2px;
    background-color: var(--sticky-checkbox-base-bg, var(--table-row-bg, var(--table-bg, var(--bs-body-bg, #fff))));
    box-shadow: inset -1px 0 0 var(--sticky-checkbox-divider-color);
    z-index: -1;
}

[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) thead th:first-child::after,
[data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child::after,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) thead th:first-child::after,
.table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody td:first-child::after {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    bottom: -1px;
    width: 1px;
    background-color: var(--sticky-checkbox-divider-color);
    pointer-events: none;
}

.dark-theme [data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]),
.dark-theme .table-responsive table:has(tbody td:first-child input[type="checkbox"]) {
    --sticky-checkbox-divider-color: rgba(148, 163, 184, 0.18);
}

    .dark-theme [data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr,
    .dark-theme .table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr,
    .dark-theme [data-table-scroll] table:has(tbody td:first-child input[type="checkbox"]) tbody tr:nth-child(even),
    .dark-theme .table-responsive table:has(tbody td:first-child input[type="checkbox"]) tbody tr:nth-child(even) {
        --sticky-checkbox-base-bg: var(--table-bg, var(--bs-body-bg, #fff));
        --sticky-checkbox-cell-bg: var(--sticky-checkbox-base-bg);
    }

.result-panel {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.result-panel > [data-table-scroll] {
    flex: 1 1 auto;
    min-height: 0;
}

.table-selection-summary {
    flex: 0 0 auto;
    min-height: 1rem;
    margin-top: 0.2rem;
    padding: 0 0.1rem;
    font-size: 0.68rem;
    line-height: 1;
    text-align: left;
    color: var(--bs-secondary-color, #6c757d);
    opacity: 1;
}

.table-selection-summary[data-selection-count="0"] {
    opacity: 0;
}
.tabla-fichadas {
    width: max-content;
    min-width: max-content;
    table-layout: fixed;
    font-size: 0.85rem;
}

    .tabla-fichadas th,
    .tabla-fichadas td {
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }

.tabla-intervalos-scroll {
    max-height: 18rem;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
}

    .tabla-intervalos-scroll table {
        margin-bottom: 0;
        min-width: 100%;
    }

.tabla-intervalos-turno {
    font-size: 0.8rem;
}

    .tabla-intervalos-turno th,
    .tabla-intervalos-turno td {
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }

.turno-linea-modal {
    min-height: 70vh;
}

.turno-linea-modal .modal-body {
    height: 100%;
    max-height: none;
}

.turno-linea-modal .turno-linea-container {
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: var(--surface-bg);
    width: 100%;
    max-width: none;
}

.turno-linea-scroll {
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 0.5rem;
    max-height: 70vh;
}

/* el ancho base lo dan las CSS vars + zoomFactor */
.turno-linea-track {
    position: relative;
    min-width: calc(var(--turno-linea-dia-ancho, 18rem) * var(--turno-linea-dias, 7));
}

.turno-linea-eje {
    display: flex;
    width: 100%;
}

.turno-linea-eje-dia {
    flex: 0 0 var(--turno-linea-dia-ancho, 18rem);
    max-width: var(--turno-linea-dia-ancho, 18rem);
    text-align: center;
    border-left: 1px dashed #e9ecef;
    padding: 0 0 0.35rem; /* ❌ sin padding a los lados, solo abajo */
}

    /* Le devolvemos el “aire” al texto del día con margen,
   pero NO tocamos el ancho útil de la línea de horas */
    .turno-linea-eje-dia .fw-semibold {
        margin: 0 0.35rem 0.15rem;
    }


    .turno-linea-eje-dia:first-child {
        border-left: none;
    }

.turno-linea-horas {
    position: relative;
    height: 1rem;
    width: 100%; /* ocupa todo el ancho real del día */
}

    .turno-linea-horas span {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: #6c757d;
    }


.turno-linea-cuerpo {
    position: relative;
    margin-top: 0.75rem;
    /* líneas verticales de hora más marcadas */
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.16) 1px, transparent 1px);
    background-size: calc(100% / var(--turno-linea-segmentos, 28)) 100%;
    border: 1px dashed #ced4da;
    border-radius: 0.75rem;
    overflow: visible;
    padding: 0.5rem 0.75rem 1rem;
    width: 100%;
}

.dark-theme .turno-linea-cuerpo {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
}

.turno-linea-intervalo {
    position: absolute;
    border-radius: 0.75rem;
    padding: 0.25rem 0.45rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.15;
    box-sizing: border-box;
    border-width: 3px; /* ⬅ grosor único para todas */
    border-style: solid;
    border-color: var(--bs-secondary);
    font-size: 0.85rem;
    color: var(--bs-body-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    background-clip: padding-box;
    max-width: 100%;
    overflow: hidden;
}

.turno-linea-corte {
    position: absolute;
    top: -2.25rem;
    bottom: 0.5rem;
    width: 0;
    border-left: 2px dashed #dc3545;
    color: #dc3545;
    font-weight: 600;
    display: flex;
    justify-content: flex-start;
}

.turno-linea-corte span {
    position: absolute;
    top: -1.4rem;
    left: -0.35rem;
    background-color: var(--surface-bg, #fff);
    color: #dc3545;
    font-size: 0.72rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    border: 1px solid #dc3545;
    white-space: nowrap;
}

.turno-linea-intervalo.comedor {
    border-style: solid;
    border-color: #ffc107;
}


/* Línea 1 – Descripción */
.turno-linea-intervalo .titulo {
    font-weight: 600;
    font-size: 0.78rem;
    line-height: 1.15em;
    max-height: 1.15em; /* 1 renglón */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* no salta de línea */
}

/* Línea 2 – Horario */
.turno-linea-intervalo .detalle {
    font-size: 0.70rem;
    line-height: 1.15em;
    max-height: 1.15em; /* 1 renglón */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* no salta de línea */
}

.turno-linea-leyenda .badge {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.badge-obligatorio {
    background-color: var(--bs-success);
    color: #fff;
}

.badge-opcional {
    background-color: var(--bs-secondary);
    color: #fff;
}

.badge-comedor {
    background-color: var(--bs-warning);
    color: #212529;
}

.badge-principal {
    background-color: var(--bs-primary);
    color: #fff;
}

.turno-linea-etiquetas .badge {
    font-size: 0.72rem;
}

.badge-adicional {
    background-color: #fd7e14; /* fondo naranja sólido */
    color: #fff; /* texto claro para contraste */
    border: 1px solid #fd7e14;
}

/* ============================
   Turnos FIJOS
   ============================ */

/* Jornada obligatoria: borde VERDE grueso */
.turno-fijo .turno-linea-intervalo.obligatorio {
    border-width: 3px;
    border-style: solid;
    border-color: var(--bs-success);
}

/* Jornada opcional: borde GRIS punteado, mismo grosor */
.turno-fijo .turno-linea-intervalo.no-obligatorio {
    border-width: 3px;
    border-style: dashed;
    border-color: var(--bs-secondary);
}

/* Comedor en turnos fijos: borde AMARILLO siempre sólido */
.turno-fijo .turno-linea-intervalo.comedor {
    border-style: solid;
    border-color: #ffc107;
}


/* ============================
   Turnos FLEXIBLES
   ============================ */

/* Jornada principal: borde AZUL, mismo grosor que obligatoria */
.turno-flexible .turno-linea-intervalo.principal {
    border-width: 3px;
    border-style: solid;
    border-color: var(--bs-primary);
}

/* Jornada adicional: borde NARANJA, mismo grosor */
.turno-flexible .turno-linea-intervalo.adicional {
    border-width: 3px;
    border-style: solid;
    border-color: #fd7e14; /* naranja tipo Bootstrap */
}

/* Comidas: borde AMARILLO, mismo grosor */
.turno-flexible .turno-linea-intervalo.comedor {
    border-width: 3px;
    border-style: solid;
    border-color: #ffc107; /* amarillo tipo Bootstrap warning */
}

.turno-ajustes-modal .modal-content {
    border-radius: 1rem;
}

.turno-ajustes-modal .modal-body {
    background-color: var(--surface-bg);
}

.ajustes-subchecks .form-check {
    margin-bottom: 0.35rem;
}

.ajustes-subchecks .form-check-label {
    font-size: 0.85rem;
}

.ajustes-seccion {
    margin-top: 1.5rem;
}

.ajustes-seccion-titulo {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.turno-ajustes-modal .form-check-label {
    cursor: pointer;
}

.turno-ajustes-modal .form-check-input:disabled + .form-check-label {
    opacity: 0.65;
}

/* === Tabla de Solicitudes de Justificaciones === */
#contenedorSolicitudesJustificaciones {
    position: relative;
}

.tabla-solicitudes-table {
    width: max-content;
    min-width: max-content;
    table-layout: auto;
    font-size: 0.85rem;
}

    .tabla-solicitudes-table th,
    .tabla-solicitudes-table td {
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }

    .tabla-solicitudes-table .col-empleado {
        min-width: 14rem;
    }

    .tabla-solicitudes-table .col-notas {
        width: max-content;
        white-space: normal;
        text-align: center;
    }

/* === Tablas de Usuarios y Grupos === */
.tabla-usuarios,
.tabla-grupos {
    font-size: 0.85rem;
}

    .tabla-usuarios th,
    .tabla-usuarios td,
    .tabla-grupos th,
    .tabla-grupos td {
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }

/* === Tabla de Justificaciones === */
.tabla-justificaciones table {
    width: max-content;
    min-width: max-content;
    table-layout: fixed;
}

.tabla-justificaciones table,
.tabla-justificaciones th,
.tabla-justificaciones td {
    font-size: 0.85rem !important;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

/* === Tabla de Conceptos de Horas === */
.tabla-conceptos {
    position: relative;
    width: 100%;
    min-width: 0;
}

.tabla-conceptos table {
    width: max-content;
    min-width: max-content;
    table-layout: fixed;
}

.tabla-conceptos table,
.tabla-conceptos th,
.tabla-conceptos td {
    font-size: 0.85rem !important;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

#contenedorFeriados.table.table-theme,
#contenedorConceptos.table.table-theme,
#contenedorJustificaciones.table.table-theme,
#contenedorFeriados > table.table-theme,
#contenedorConceptos > table.table-theme,
#contenedorJustificaciones > table.table-theme,
#contenedorFeriados .table.table-theme,
#contenedorConceptos .table.table-theme,
#contenedorJustificaciones .table.table-theme {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

#contenedorAutorizaciones,
#contenedorConceptos,
#contenedorHorarios,
#contenedorLegajos,
#contenedorFichadas,
#contenedorJustificaciones,
#contenedorRelojes,
#contenedorResumenHoras {
    position: relative;
}

#contenedorLegajos .fade-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(var(--bs-body-bg, #fff), rgba(255,255,255,0));
}


/* Ocultar flechas en Chrome, Edge, Safari */
input.no-spinner::-webkit-outer-spin-button,
input.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ocultar flechas en Firefox */
input.no-spinner[type=number] {
    -moz-appearance: textfield;
}

.finger {
    fill: white;
    stroke: #000;
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.2s ease-in-out;
}

    .finger.selected {
        fill: #28a745;
    }

    .finger.active {
        fill: #1e7e34;
    }

.finger-label {
    font-size: 20px;
    text-anchor: middle;
    fill: #000;
}

.mano-svg {
    max-width: 400px;
    max-height: 250px;
    width: 100%;
    height: auto;
}

.video-container {
    position: relative;
    width: 300px; /* mismo ancho que el canvas de captura */
    height: 300px; /* misma altura que el canvas de captura */
    background: #000; /* por si tarda un poco en inicializar la cámara */
    margin: auto;
    overflow: hidden;
}

/* Rectángulo guía donde debe ubicarse la cara */
.face-guide {
    position: absolute;
    top: 60px; /* centrado vertical para 300x300 */
    left: 70px; /* centrado horizontal para 300x300 */
    width: 160px; /* ancho del área de rostro */
    height: 180px; /* alto del área de rostro */
    border: 2px solid rgba( 0, 255, 0, 0.7 ); /* borde semitransparente verde */
    box-sizing: border-box;
    pointer-events: none; /* no molesta clicks ni interacción */
}

    /* Opcional: esquineros decorativos más pequeños */
    /* Si prefieres esquinas en L en lugar de un borde completo */
    .face-guide::before,
    .face-guide::after {
        content: "";
        position: absolute;
        background: rgba(0, 255, 0, 0.7);
    }
    /* línea superior izquierda */
    .face-guide::before {
        top: -2px;
        left: -2px;
        width: 20px;
        height: 2px;
        /* línea vertical de esa misma esquina */
        box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.7);
    }
    /* línea inferior derecha */
    .face-guide::after {
        bottom: -2px;
        right: -2px;
        width: 20px;
        height: 2px;
        transform: rotate(180deg);
        box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.7);
    }

.scroll-horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 8px;
    height: 100%;
}

.scroll-both {
    overflow: auto;
    white-space: nowrap;
    padding-bottom: 8px;
    height: 100%;
}

.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
    height: 100%;
}

/* Asegura que checkbox y radio se vean correctamente dentro del dropdown */
.dropdown-menu .form-check-input {
    /* tamaño y espaciado */
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    /* fuerza la apariencia nativa */
    appearance: auto;
    -webkit-appearance: auto;
}

/* Si necesitas un poco más de contraste, puedes añadir esto: */
.dropdown-menu .form-check-input[type="checkbox"] {
    border: 1px solid #adb5bd;
    background-color: #fff;
}

.dropdown-menu .form-check-input[type="radio"] {
    border: 1px solid #adb5bd;
    background-color: #fff;
    border-radius: 50%;
}

.dark-theme .dropdown-menu {
    background-color: rgba(17, 25, 40, 0.96);
    color: #fff;
    border-color: rgba(148, 163, 184, 0.22);
}

.dark-theme .dropdown-menu .dropdown-item,
.dark-theme .dropdown-menu .form-check-label {
    color: #fff !important;
}

.dark-theme .dropdown-menu .form-check-input[type="checkbox"],
.dark-theme .dropdown-menu .form-check-input[type="radio"] {
    border: 1px solid rgba(148, 163, 184, 0.4);
    background-color: transparent;
}



/* En particular cuando el checkbox/radio está disabled */
.dropdown-menu .form-check-input:disabled + .form-check-label {
    color: #000 !important;
    opacity: 1 !important;
}

.dark-theme .dropdown-menu .form-check-input:disabled + .form-check-label {
    color: rgba(255, 255, 255, 0.65) !important;
}

.dark-theme .dropdown-menu .dropdown-item.disabled {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Asegura también que el texto “-- Seleccione --” salga en negro */
.dropdown-menu .dropdown-item.disabled {
    color: #000 !important;
}

/* Ensure dropdown buttons styled with form-select span full width */
.dropdown > .form-select {
    width: 100%;
}

/* Keep option text dark even when select shows placeholder in gray */
.form-select.text-muted option {
    color: #212529;
}

.dark-theme .form-select.text-muted option {
    color: #fff;
}

/* Ajustes para listas desplegables de legajos */
.legajos-dropdown {
    border: 1px solid var(--surface-border, rgba(15, 23, 42, 0.1));
    border-radius: 0.9rem;
    background: var(--surface-bg, #fff);
    box-shadow: var(--surface-shadow, 0 16px 40px rgba(18, 39, 73, 0.12));
}

.legajos-dropdown .dropdown-item {
    font-size: 0.875rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-radius: 0.65rem;
}
.legajos-dropdown .form-check-label {
    font-size: 0.875rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.legajos-dropdown .dropdown-item:focus,
.legajos-dropdown .dropdown-item:hover {
    background-color: color-mix(in srgb, var(--primary-theme, #00bcc4) 12%, transparent);
    color: inherit;
    outline: none;
}

.legajos-dropdown .dropdown-item:focus label,
.legajos-dropdown .dropdown-item:hover label {
    color: inherit;
}

.cc-legajos-dropdown .form-control {
    border-radius: 0.7rem;
}

/* Mantiene el alto de los botones de legajos aun sin opciones */
#ddLegajoForm,
#ddLegajoJustForm {
    min-height: calc(1.5em + .5rem + 2px);
}

/* Quita el “caret” y usa la flecha de form-select en los formularios de legajos */
#ddLegajoForm.dropdown-toggle::after,
#ddLegajoJustForm.dropdown-toggle::after {
    display: none !important;
}

/* Quita el “caret” que genera dropdown-toggle en nuestro botón de turnos */
#ddTurnos.dropdown-toggle::after {
    display: none !important;
}

/* Quita el “caret” que genera dropdown-toggle en nuestro botón de turnos */
#ddAreasagregar.dropdown-toggle::after {
    display: none !important;
}

/* Quita el “caret” que genera dropdown-toggle en nuestro botón de turnos */
#ddAreaseditar.dropdown-toggle::after {
    display: none !important;
}

/* Quita el “caret” que genera dropdown-toggle en nuestro botón de turnos */
#ddTurnosMasivo.dropdown-toggle::after {
    display: none !important;
}

/* Quita el “caret” que genera dropdown-toggle en nuestro botón de turnos */
#ddAreasMasivo.dropdown-toggle::after {
    display: none !important;
}

/* Ajuste de espaciado en la vista de VerLegajo */
#modalVerLegajo dl.row > dt,
#modalVerLegajo dl.row > dd {
    margin-bottom: 0.35rem;
}

/* Estilos básicos para reportes */
.page-break {
    page-break-after: always;
}

mark.search-highlight {
    background-color: #ffef5a;
    padding: 0 2px;
    border-radius: 3px;
}

/* Validación de Reporte PDF */
.reporte-validacion-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.reporte-validacion-dropzone {
    border: 1px dashed rgba(13, 110, 253, 0.35);
    border-radius: 12px;
    padding: 1.25rem;
    background: rgba(13, 110, 253, 0.04);
}

.reporte-validacion-help {
    border-left: 3px solid rgba(13, 110, 253, 0.4);
    padding-left: 0.75rem;
}

.reporte-validacion-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(13, 110, 253, 0.08);
    color: #1b4fbf;
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
}

.reporte-validacion-result {
    border-radius: 12px;
    padding: 0.9rem 1rem;
    border: 1px solid transparent;
}

.reporte-validacion-result.reporte-validacion-success {
    background-color: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.35);
    color: #0f5132;
}

.reporte-validacion-result.reporte-validacion-warning {
    background-color: rgba(255, 193, 7, 0.18);
    border-color: rgba(255, 193, 7, 0.35);
    color: #664d03;
}

.reporte-validacion-result.reporte-validacion-error {
    background-color: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
    color: #842029;
}

/* Página con tamaño A4 vertical */
.a4-page {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background-color: white;
    position: relative;
    font-size: 0.85rem;
}

/* Variante horizontal */
.a4-page.landscape {
    width: 297mm;
    height: 210mm;
}

.a4-page + .a4-page {
    margin-top: 10mm;
}

/* cuando la página necesita barras de desplazamiento en pantalla */
.a4-page.scroll-both {
    overflow: hidden;
}

.page-content {
    box-sizing: border-box;
    padding: 10mm;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 20mm;
}

.report-header h1 {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}
.report-header small {
    font-size: 0.9rem;
}

.report-footer {
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 10mm;
    right: 10mm;
    bottom: 10mm;
}

/* tabla del reporte de fichadas */
.fichadas-table {
    width: max-content;
    min-width: max-content;
    table-layout: auto;
}
.fichadas-table {
    font-size: 0.85rem;
}
.fichadas-table th,
.fichadas-table td {
    width: 45px;
    text-align: center;
    overflow: hidden;
}
.cronologico-table th,
.cronologico-table td {
    width: auto;
    white-space: nowrap;
}
.ausencias-table {
    font-size: 0.85rem;
}

.ausencias-table td,
.ausencias-table th {
    vertical-align: middle;
}

.reporte-compact-table {
    font-size: 0.85rem;
}

.reporte-compact-table td,
.reporte-compact-table th {
    vertical-align: middle;
}
.fichadas-table th.dia-col,
.fichadas-table td.dia-col {
    width: 75px;
}
.fichadas-table th.fecha-col,
.fichadas-table td.fecha-col {
    width: 80px;
}
.fichadas-table th.asterisco-col,
.fichadas-table td.asterisco-col {
    width: 35px;
}

/* remove border between Entrada and Salida columns */
.fichadas-table th.entrada,
.fichadas-table td.entrada {
    border-right: none !important;
}
.fichadas-table th.salida,
.fichadas-table td.salida {
    border-left: none !important;
}

@media print {
    @page {
        margin: 0;
        size: A4;
    }
    body {
        margin: 0;
    }
    .a4-page {
        margin: 0 auto;
        page-break-after: always;
        border: none;
    }
    .a4-page:last-child,
    .a4-page:last-of-type {
        page-break-after: auto;
    }
    /* remove vertical spacing between printed pages */
    .a4-page + .a4-page {
        margin-top: 0;
    }
    /* ensure scrolling containers expand fully when printed */
    .scroll-both,
    .scroll-horizontal,
    .page-content {
        overflow: visible !important;
        height: auto !important;
    }
    /* hide interface icons on paper */
    i.bi {
        display: none !important;
    }
    /* hide in-page navigation when printing */
    .report-nav {
        display: none !important;
    }
    .scrollable-content,
    .main-content {
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important;
    }
    .app-container {
        display: block !important;
        height: auto !important;
    }
    .cargando-overlay {
        display: none !important;
    }
}
@media screen {
    /* 1) Que la “hoja” se ajuste a su contenido, no al viewport */
    #reporteLegajos .a4-page {
        display: inline-block;
        width: fit-content !important;
        min-width: 0 !important;
        overflow-x: auto !important; /* scroll si queda más ancho que el viewport */
        white-space: nowrap; /* evita que salte a dos líneas */
    }

    /* 2) El contenido interior no se estire */
    #reporteLegajos .page-content {
        width: auto !important;
        max-width: none !important;
        overflow-x: visible !important;
    }

    /* 3) Las tablas comparten el mismo ancho de columnas */
    #reporteLegajos .tabla-legajos:not(.limit-columns) {
        width: auto !important;
        min-width: unset !important;
        table-layout: fixed !important;
    }
    /* Y deja fuera el reset de celdas si tienen .limit-columns */
    #reporteLegajos .tabla-legajos:not(.limit-columns) th,
    #reporteLegajos .tabla-legajos:not(.limit-columns) td {
        width: auto !important;
        max-width: none !important;
    }

    /* Aplicar mismo comportamiento a las tablas principales */
    #contenedorFichadas,
    #contenedorSolicitudesJustificaciones,
    #contenedorJustificaciones,
    #contenedorConceptos,
    #contenedorFeriados,
    #contenedorLegajos,
    #contenedorUsuarios,
    #contenedorResumenHoras {
        overflow: auto !important;
    }

    /* Evita que las tablas cambien de ancho al hacer zoom */
        #contenedorFichadas table,
        #contenedorSolicitudesJustificaciones table,
        #contenedorJustificaciones table,
        #contenedorConceptos table,
        #contenedorFeriados table,
        #contenedorLegajos table,
        #contenedorRelojes table,
        #contenedorEmpresas table,
        #contenedorGerencias table,
        #contenedorDepartamentos table,
        #contenedorSectores table,
        #contenedorGrupos table,
        #contenedorUsuarios table,
        #contenedorGE1 table,
        #contenedorGE2 table,
        #contenedorGE3 table,
        #contenedorGE4 table,
        #contenedorGE5 table,
        #contenedorGE6 table,
        #contenedorResumenHoras table {
            width: max-content !important;
            min-width: max-content !important;
            table-layout: auto !important;
        }

    #contenedorResumenHoras .table-theme tbody tr,
    #contenedorResumenHoras .table-theme tbody tr:nth-child(even) {
        background-color: transparent;
    }

    .resumen-group-0 {
        background-color: var(--surface-bg) !important;
    }

    .resumen-group-1 {
        background-color: var(--table-row-alt) !important;
    }

    .dark-theme .resumen-group-0 {
        background-color: var(--surface-bg) !important;
    }

    .dark-theme .resumen-group-1 {
        background-color: var(--table-row-alt) !important;
    }

    #contenedorFichadas th,
    #contenedorFichadas td,
    #contenedorSolicitudesJustificaciones th,
    #contenedorSolicitudesJustificaciones td,
    #contenedorJustificaciones th,
    #contenedorJustificaciones td,
    #contenedorConceptos th,
    #contenedorConceptos td,
    #contenedorFeriados th,
    #contenedorFeriados td,
    #contenedorLegajos th,
    #contenedorLegajos td,
    #contenedorRelojes th,
    #contenedorRelojes td,
    #contenedorEmpresas th,
    #contenedorEmpresas td,
    #contenedorGerencias th,
    #contenedorGerencias td,
    #contenedorDepartamentos th,
    #contenedorDepartamentos td,
    #contenedorSectores th,
    #contenedorSectores td,
    #contenedorGrupos th,
    #contenedorGrupos td,
    #contenedorUsuarios th,
    #contenedorUsuarios td,
    #contenedorGE1 th,
    #contenedorGE1 td,
    #contenedorGE2 th,
    #contenedorGE2 td,
    #contenedorGE3 th,
    #contenedorGE3 td,
    #contenedorGE4 th,
    #contenedorGE4 td,
    #contenedorGE5 th,
    #contenedorGE5 td,
    #contenedorGE6 th,
    #contenedorGE6 td,
    #contenedorResumenHoras th,
    #contenedorResumenHoras td {
        width: auto !important;
        white-space: nowrap !important;
    }

    /* Reporte en modo tabla: sin encabezado ni pie y sin bordes de página */
    #reporteScroll.table-report .report-header,
    #reporteScroll.table-report .report-footer,
    #reporteLegajos.table-report .report-header,
    #reporteLegajos.table-report .report-footer {
        display: none !important;
    }

    #reporteScroll.table-report .a4-page,
    #reporteLegajos.table-report .a4-page {
        width: auto !important;
        height: auto !important;
        border: none !important;
        background: none !important;
        margin: 0 !important;
        overflow: visible !important;
        /* keep inline display so pagination works */
    }

    #reporteScroll.table-report .page-content,
    #reporteLegajos.table-report .page-content {
        display: contents;
        padding: 0;
        height: auto;
        overflow: visible;
    }

    #reporteScroll {
        width: 100%;
    }

    #reporteScroll .scroll-both {
        width: 100%;
    }

    /* Ajustes de desplazamiento en el reporte de legajos */
    #reporteLegajos {
        --controls-h: 3rem;
    }

    /* Contenedor para filtros y búsqueda fijo al inicio */
    #reporteLegajos .report-controls {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: var(--bs-body-bg, #fff);
    }



    /* Cabeceras de tabla fijas durante el scroll */
    table.sticky-header thead {
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
    }

    table.sticky-header thead th {
        position: static;
        background-color: var(--primary-theme);
        color: #fff;
    }

    table.sticky-header thead tr + tr th {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* El reporte debe mantener scroll vertical externo y horizontal por tabla */
    #reporteLegajos .scroll-horizontal {
        overflow-x: auto !important;
        overflow-y: visible !important;
        overscroll-behavior-x: contain;
        max-width: 100%;
    }

    #reporteLegajos {
        /* Altura dinámica calculada por adjustFullHeight */
        overflow: auto !important; /* Esto habilita el scroll vertical */
        position: relative;
        background: transparent !important; /* sin contenedor blanco */
    }

    #reporteScroll {
        overflow: auto !important;
        position: relative;
        background: transparent !important;
    }

    .reporte-legajos-scroll,
    .a4-page,
    .page-content {
        /* Quitamos scrolls internos innecesarios */
        max-height: unset !important;
        overflow: visible !important;
        background: transparent !important;
    }

    #reporteLegajos .tabla-legajos {
        width: max-content;
        min-width: max-content;
    }

.tabla-legajos.sticky-header thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 10;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
        background-color: var(--primary-theme);
        color: #fff;
}
}

/* Tablas con texto blanco en modo oscuro */
.dark-theme table {
    color: white;
    background-color: var(--table-bg);
}

/* Menú de configuración en modo oscuro */
.dark-theme .config-menu {
    background-color: color-mix(in srgb, var(--table-bg) 88%, #0f172a 12%);
}

.dark-theme .config-menu .list-group-item {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--body-color);
}

.dark-theme .config-menu .list-group-item.active {
    background: linear-gradient(135deg, var(--primary-theme) 0%, var(--primary-theme-strong) 100%);
    border-color: color-mix(in srgb, var(--primary-theme-strong) 72%, #ffffff 28%);
    color: #ffffff;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
}

.config-menu {
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-bg, #ffffff) 92%, #dcdedd 8%) 0%, color-mix(in srgb, var(--surface-bg, #ffffff) 80%, #dcdedd 20%) 100%);
    border: 1px solid color-mix(in srgb, var(--surface-border, rgba(0, 126, 139, 0.2)) 72%, transparent 28%);
    box-shadow: 0 0.9rem 2rem rgba(18, 39, 73, 0.08);
}

.config-menu .list-group-item {
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border, rgba(0, 126, 139, 0.2)) 42%, transparent 58%);
    cursor: pointer;
    padding: 0.95rem 1.25rem;
    background: transparent;
    color: var(--body-color);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.config-menu .list-group-item:last-child {
    border-bottom: none;
}

.config-menu .list-group-item:hover:not(.active):not(.disabled),
.config-menu .list-group-item:focus-visible:not(.active):not(.disabled) {
    background-color: color-mix(in srgb, var(--primary-theme) 10%, transparent);
    color: var(--primary-theme-strong);
}

.config-menu .list-group-item.active {
    background: linear-gradient(135deg, var(--primary-theme) 0%, var(--primary-theme-strong) 100%);
    border-color: color-mix(in srgb, var(--primary-theme-strong) 72%, #ffffff 28%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0.85rem 1.8rem rgba(0, 126, 139, 0.24);
}

.config-menu .list-group-item.disabled {
    cursor: not-allowed;
    color: color-mix(in srgb, var(--body-color) 62%, #94a3b8 38%);
    background: color-mix(in srgb, var(--surface-bg, #ffffff) 84%, #cbd5e1 16%);
}

.dark-theme .config-menu {
    background: linear-gradient(180deg, color-mix(in srgb, var(--table-bg) 92%, #0f172a 8%) 0%, color-mix(in srgb, var(--table-bg) 78%, #0f172a 22%) 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1rem 2.3rem rgba(2, 8, 23, 0.34);
}

.dark-theme .config-menu .list-group-item {
    color: var(--body-color);
}

.dark-theme .config-menu .list-group-item:hover:not(.active):not(.disabled),
.dark-theme .config-menu .list-group-item:focus-visible:not(.active):not(.disabled) {
    background-color: color-mix(in srgb, var(--primary-theme) 16%, transparent);
    color: #ffffff;
}

.dark-theme .config-menu .list-group-item.disabled {
    color: color-mix(in srgb, var(--body-color) 58%, #64748b 42%);
    background: color-mix(in srgb, var(--table-bg) 88%, #0f172a 12%);
}

/* Fondo de tablas de reportes en modo oscuro */
.dark-theme .a4-page table {
    background-color: var(--table-bg);
}

/* Fila seleccionada en modo oscuro */
.dark-theme .table-active {
    background-color: #6c757d !important;
    color: #fff;
}

/* Fila hover en modo oscuro */
.dark-theme .table-hover tbody tr:hover {
    color: #dee2e6;
}

/* Import mapping tables */
.import-mapping{min-width:22rem;margin:0 0 1rem 0;}
.import-mapping th,.import-mapping td{padding:0.25rem 0.5rem;white-space:nowrap;}
.import-mapping input{max-width:4rem;}

/* Ajustes para smartphones */
@media (max-width:640px){
    [id^="dd"].dropdown-toggle{max-width:110px!important;width:110px!important;}
    [aria-labelledby^="dd"]{max-width:110px!important;width:110px!important;}
}

/* 1) Fijá el ancho del control (no varía con el texto) */
.legajo-fixed {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
}

/* 2) Split sin gaps y ocupando todo el ancho fijo */
.legajo-split {
    display: flex;
    width: 100%;
    gap: 0 !important;
}

    /* 3) El botón principal siempre llena el espacio disponible (elipsis si es largo) */
    .legajo-split .btn-main {
        flex: 1 1 auto;
        min-width: 0; /* permite elipsis sin ensanchar el grupo */
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        white-space: nowrap; /* (extra) */
        overflow: hidden; /* (extra) */
        text-overflow: ellipsis; /* (extra) */
    }

    /* 4) Caret de ancho constante (solo el triángulo), centrado */
    .legajo-split .btn-caret {
        flex: 0 0 2rem; /* ancho fijo del caret */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0; /* sin padding extra */
        line-height: 1;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0; /* evita “costura” entre botones */
    }

        /* Mantener caret blanco en todos los estados */
        .legajo-split .btn-caret,
        .legajo-split .btn-caret:hover,
        .legajo-split .btn-caret:active,
        .legajo-split .btn-caret:focus,
        .legajo-split .btn-caret.show {
            background-color: #fff !important;
            color: #212529 !important;
        }

        .dark-theme .legajo-split .btn-caret,
        .dark-theme .legajo-split .btn-caret:hover,
        .dark-theme .legajo-split .btn-caret:active,
        .dark-theme .legajo-split .btn-caret:focus,
        .dark-theme .legajo-split .btn-caret.show {
            background-color: rgba(17, 25, 40, 0.85) !important;
            color: #fff !important;
        }

/* 5) Si preferís la técnica del margen negativo, dejá esta y quitá border-left:0 arriba
.legajo-split .btn + .btn { margin-left: -1px !important; }
*/

.legajo-restore-btn {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Loader en flujo (NO overlay), centrado bajo el título ===== */
.menu-loader {
    /* en flujo, no tapa el título */
    position: static;
    background: transparent;
    z-index: auto;
    /* toma el alto del panel bajo el título
     (ajustá --panel-offset si querés afinar sin tocar el CSS) */
    width: 100%;
    height: calc(100vh - var(--panel-offset, 140px));
    /* centrado perfecto */
    display: grid;
    place-items: center;
    place-content: center;
    /* 🎛️ Parámetros visuales y de animación */
    --orbit-size: 220px; /* tamaño del cuadro de la órbita */
    --logo-size: 96px; /* logo grande (NO gira) */
    --sat-radius: 56px; /* distancia de los puntos al logo */
    --sat-size: 10px; /* tamaño de cada punto */
    --gap: 12deg; /* separación angular del “gusano” */
    --text-gap: 0.1rem; /* ✅ texto muy cerca del logo */
    --orbit-speed: 0.9s; /* ✅ más rápido (menor = más veloz) */
}
.menu-loader.overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 1200;
}

.menu-loader .loader-text {
    margin-top: var(--text-gap, 0.5rem);
    font-size: 0.9rem;
    color: #6c757d;
    text-align: center;
    letter-spacing: 0.02em;
}

.form-spinner {
    display: block !important;
    margin: 1rem auto;
}

    /* Stack central: logo estático + pista que rota */
    .menu-loader .orbit-wrap {
        position: relative;
        width: var(--orbit-size);
        height: var(--orbit-size);
    }

    /* Logo centrado exacto y estático (no gira) */
    .menu-loader .orbit-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--logo-size);
        height: var(--logo-size);
        object-fit: contain;
        pointer-events: none;
        display: block;
    }

    /* Pista que rota con los satélites */
    .menu-loader .orbit-track {
        position: absolute;
        inset: 0;
        animation: orbit-spin var(--orbit-speed, 1.4s) linear infinite;
    }

    /* Satélites (puntos) en “gusano” */
    .menu-loader .sat {
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--sat-size);
        height: var(--sat-size);
        margin: calc(var(--sat-size) / -2);
        border-radius: 50%;
        background: var(--primary-theme, #00bcc4);
        transform: rotate(var(--a)) translate(var(--sat-radius)) rotate(calc(-1 * var(--a)));
    }

    /* 5 puntos seguidos: 0°, +gap, +2*gap, ... */
    .menu-loader .s1 {
        --a: 0deg;
    }

    .menu-loader .s2 {
        --a: calc(var(--gap) * 1);
        opacity: .9;
    }

    .menu-loader .s3 {
        --a: calc(var(--gap) * 2);
        opacity: .8;
    }

    .menu-loader .s4 {
        --a: calc(var(--gap) * 3);
        opacity: .7;
    }

    .menu-loader .s5 {
        --a: calc(var(--gap) * 4);
        opacity: .6;
    }

@keyframes orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Respeto por reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .menu-loader .orbit-track {
        animation-duration: 3s;
    }
}
/* Overlay de freeze sin afectar visualmente el sidebar */
.page-freeze-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;
    overflow: hidden;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
    cursor: progress;
}

.page-freeze-overlay * {
    pointer-events: none !important;
}

.page-freeze-main {
    position: fixed;
    overflow: hidden;
    background: transparent;
}

/* Evita scroll de fondo durante la navegación */
body.freezing {
    overflow: hidden;
}

/* (Recomendado) asegura que tu raíz ocupe alto completo */
.app-container {
    min-height: calc(100vh - var(--topbar-height));
}

/* ===== Spinner centrado ===== */
#pf-spinwrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2147483647;
    pointer-events: none;
}

.pf-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(0,0,0,0.15);
    border-top-color: var(--primary-theme, #1bb8c2);
    border-radius: 50%;
    animation: pf-spin .8s linear infinite;
}

@keyframes pf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- OrbitLoader dentro del snapshot (page-freeze) + velo en main ---- */

/* Contexto y referencia para el velo */
.page-freeze-main {
    isolation: isolate;
}

    /* Velo blanco (transparente) SOLO sobre el panel derecho */
    .page-freeze-main::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.7); /* ajustá opacidad a gusto */
        pointer-events: none;
        z-index: 9500; /* debajo del loader */
    }

/* Contenedor del OrbitLoader centrado en el main */
.page-freeze-main .pf-orbit-holder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 10000; /* arriba del velo y headers sticky */
    pointer-events: none;
}

    /* Asegurá que el OrbitLoader se vea y con el tamaño deseado */
    .page-freeze-main .pf-orbit-holder .menu-loader {
        display: grid !important; /* tu Orbit usa grid */
        background: transparent !important; /* sin fondo */
        height: auto; /* que no tome 100vh */
        /* tamaño del OrbitLoader durante el freezer */
        --orbit-size: 200px;
        --logo-size: 88px;
        --sat-radius: 52px;
    }

/* Color de texto para domingos según tema */
.dia-domingo {
    color: #000;
}

.dark-theme .dia-domingo {
    color: #fff;
}

table.perm-no-visualizar tbody {
    display: none;
}

.perm-no-visualizar-msg {
    font-size: 0.95rem;
}
/* Tabla del formulario de Conversión de horas (mismo tamaño que las demás) */
.tabla-conversiones table {
    font-size: 0.85rem;
}

    .tabla-conversiones table th,
    .tabla-conversiones table td {
        padding: 0.3rem 0.5rem;
        white-space: nowrap;
    }
/* Tabla del formulario Agregar/Editar conversión de horas */
.tabla-conversion-detalle table,
.tabla-conversion-detalle {
    font-size: 0.85rem;
}

    .tabla-conversion-detalle th,
    .tabla-conversion-detalle td {
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }
.turno-acciones-seccion {
    /* por si no lo tenés ya */
    border-radius: .5rem;
}
/* Alinear todas las casillas de la fila turno-flexible-config */
.turno-flexible-config .turno-campo-label {
    display: block;
    height: 3.8rem; /* probá con 3.2 / 3.4 / 3.6 rem hasta que cuadre */
}
/* =========================================================
   Tabla Franjas Horarias
   -> MISMO comportamiento que .tabla-fichadas global
   (width:max-content + table-layout:fixed + nowrap)
   Solo achicamos checkbox y número.
========================================================= */

.tabla-fichadas.tabla-franjas {
    /* NO tocamos width ni table-layout -> hereda fichadas */
}

    /* Checkbox finito */
    .tabla-fichadas.tabla-franjas .col-check {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        text-align: center !important;
        white-space: nowrap !important;
        padding-left: .35rem !important;
        padding-right: .35rem !important;
    }

    /* Número: que quede lo más chico posible, pero respetando fichadas */
    .tabla-fichadas.tabla-franjas .col-num {
        width: 1% !important; /* truco para “shrink-to-fit” en fixed */
        white-space: nowrap !important;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    /* Descripción queda igual que fichadas */
    .tabla-fichadas.tabla-franjas .col-desc {
        width: auto !important;
    }

/* Monitoreo en tiempo real */
.live-connection-state {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-weight: 600;
    color: #fff;
}

.live-connection-state .punto {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: #eab308;
    box-shadow: 0 0 0 6px rgba(234, 179, 8, 0.15);
}

.live-connection-state.activo .punto {
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2);
}

.live-monitor-shell {
    height: calc(100vh - var(--topbar-height) - 12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.live-monitor-shell--expanded {
    height: calc(115vh - var(--topbar-height) - 12px);
}

.live-monitor-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--body-gradient);
    color: var(--body-color);
    padding: 16px;
    border-radius: 18px;
    overflow: hidden;
    min-height: 0;
}

.live-hero {
    background: var(--surface-bg);
    color: var(--body-color);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: var(--surface-shadow);
    border: 1px solid var(--surface-border);
}

.live-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.hero-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.pill-lite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--surface-bg) 70%, var(--body-bg));
    border: 1px solid var(--surface-border);
    font-weight: 600;
}

.pill-lite.muted {
    color: var(--neutral-theme);
    font-weight: 600;
}

.live-hero__filters {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
}

.live-hero .subtitle {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--neutral-theme);
    margin-bottom: 2px;
}

.live-hero .title {
    font-size: 24px;
    font-weight: 700;
    color: var(--body-color);
    margin-bottom: 6px;
}

.live-hero .text {
    max-width: 720px;
    color: var(--body-color);
}

.live-hero .badges {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.chip {
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid var(--surface-border);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    color: var(--body-color);
}

.chip.secondary {
    background: rgba(27, 184, 194, 0.14);
    border-color: var(--surface-border);
}

.live-hero__status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    min-width: 280px;
}

.live-card-header {
    background: transparent;
    color: var(--body-color);
    border-bottom: 1px solid var(--surface-border);
}

.live-soft-pill {
    background: rgba(148, 163, 184, 0.18);
    color: var(--body-color);
    border: 1px solid var(--surface-border);
}

.status-card {
    background: var(--surface-bg);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--surface-shadow);
}

.status-card .label {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--neutral-theme);
}

.status-card .value {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--body-color);
}

.status-card .muted {
    color: var(--body-color);
    margin-top: 6px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.06);
}

.status-dot.online {
    background: #22c55e;
}

.status-dot.offline {
    background: #f43f5e;
}

.modern-group .btn {
    color: var(--body-color);
    border-color: var(--surface-border);
    background: var(--surface-bg);
    box-shadow: none;
}

.modern-group .btn:hover,
.modern-group .btn:focus {
    background: color-mix(in srgb, var(--primary-theme) 12%, var(--surface-bg));
    color: var(--body-color);
    border-color: var(--primary-theme);
}

.modern-group .btn-check:checked + .btn {
    background: linear-gradient(135deg, var(--primary-theme), var(--primary-theme-strong));
    border-color: var(--primary-theme-strong);
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.filter-select select {
    min-width: 220px;
    border-radius: 12px;
    border: 1px solid var(--surface-border);
    background: var(--surface-bg);
    color: var(--body-color);
    box-shadow: var(--surface-shadow);
}

.live-monitor-card {
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: var(--surface-shadow);
    background: var(--surface-bg);
    color: var(--body-color);
}

.live-monitor-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.live-field {
    display: flex;
    flex-direction: column;
    padding: .65rem .8rem;
    border: 1px solid var(--surface-border);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--surface-bg) 92%, var(--body-bg));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.dark-theme .live-field {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.live-field .label {
    font-size: .8rem;
    color: var(--neutral-theme);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .25rem;
}

.live-field .value {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--body-color);
}

.live-field.wide {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .live-field.wide {
        grid-column: span 1;
    }
}

.live-table-wrapper {
    max-height: 320px;
    overflow-y: auto;
}

.live-table tr.active {
    background: color-mix(in srgb, var(--primary-theme) 10%, var(--surface-bg));
}

.live-table th,
.live-table td {
    vertical-align: middle;
    color: var(--body-color);
}

.live-table-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.live-table-card .card-body {
    flex: 1;
    min-height: 0;
}

.live-last-card .live-avatar {
    width: 140px;
    height: 140px;
}

.live-avatar.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--table-bg);
    color: var(--neutral-theme);
    font-size: 32px;
}
#reporteEstadoActualPersonal {
    overflow: auto !important; /* scroll vertical acá */
    min-height: 0;
}

    /* No hace falta que el inner tenga overflow auto; evitás scroll doble */
    #reporteEstadoActualPersonal #reporteScroll {
        overflow: visible !important;
        height: auto !important;
    }

    /* Evita scroll anidado y mantiene headers sticky dentro del contenedor */
    #reporteEstadoActualPersonal .scroll-both {
        overflow: visible;
        height: auto;
    }
    #reporteEstadoActualPersonal table.sticky-header thead th {
        position: sticky !important; /* pisa el static global */
        top: 0 !important;
        z-index: 50 !important;
        background: var(--primary-theme) !important;
        color: #fff !important;
    }

/* --- Análisis de Ausencias/Retrasos: estilos consistentes en claro/oscuro --- */
.analisis-ausencias-modal .modal-content {
    background: var(--surface-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
}

.analisis-ausencias-modal .nav-tabs .nav-link {
    color: var(--text-main);
}

.analisis-ausencias-modal .nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--primary-theme);
    border-color: var(--primary-theme);
}

.analisis-kpi-card {
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-theme) 10%, var(--surface-bg));
}

.analisis-kpi-card .text-muted.small {
    color: var(--text-muted) !important;
}

.analisis-kpi-card .fw-semibold {
    color: var(--primary-theme-strong);
}

.analisis-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.analisis-tabla-scroll {
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: auto;
}

.analisis-tabla-scroll .analisis-table {
    margin-bottom: 0;
}

.dark-theme .analisis-ausencias-modal .modal-content {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
    border-radius: 18px;
}

.dark-theme .analisis-ausencias-modal .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.15);
}

.dark-theme .analisis-ausencias-modal .nav-tabs .nav-link {
    border-color: rgba(255,255,255,0.1);
}

.dark-theme .analisis-ausencias-modal .nav-tabs .nav-link.active {
    color: #0b1e22;
    background-color: var(--primary-theme);
    border-color: var(--primary-theme);
}

.analisis-mode-btn.btn-secondary {
    background-color: var(--primary-theme) !important;
    border-color: var(--primary-theme) !important;
    color: #fff !important;
}

.analisis-mode-btn.btn-outline-secondary {
    color: var(--primary-theme-strong) !important;
    border-color: var(--primary-theme) !important;
}


.analisis-mode-btn.btn-outline-secondary:hover {
    background-color: color-mix(in srgb, var(--primary-theme) 18%, transparent);
}

.analisis-zoom-btn.btn-outline-secondary {
    color: var(--primary-theme-strong) !important;
    border-color: var(--primary-theme) !important;
}

.analisis-zoom-btn.btn-outline-secondary:hover,
.analisis-zoom-btn.btn-outline-secondary:focus,
.analisis-zoom-btn.btn-outline-secondary:active {
    color: #fff !important;
    background-color: var(--primary-theme) !important;
    border-color: var(--primary-theme) !important;
}

.analisis-fichadas-chart {
    min-width: 1280px;
}

.analisis-fichadas-chart .axis-line {
    stroke: var(--text-main);
    stroke-width: 2;
    shape-rendering: crispEdges;
}

.analisis-fichadas-chart .grid-line {
    stroke: color-mix(in srgb, var(--text-main) 12%, transparent);
    stroke-width: 1;
}

.analisis-fichadas-chart .axis-tick {
    stroke: var(--text-main);
    stroke-width: 1.6;
    shape-rendering: crispEdges;
}

.analisis-fichadas-chart .axis-label {
    fill: var(--text-muted);
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.1;
}

.analisis-fichadas-chart .y-label {
    text-align: right;
}

.analisis-fichadas-chart .x-label {
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

.analisis-fichadas-chart .hour-bar {
    fill: color-mix(in srgb, var(--primary-theme) 55%, transparent);
}

.analisis-fichadas-chart .trend-line {
    stroke: #dc3545;
    stroke-width: 2;
}

.analisis-fichadas-chart .trend-point {
    fill: #dc3545;
}

.analisis-fichadas-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
}

.analisis-fichadas-xlabels {
    min-width: 1280px;
}

.analisis-fichadas-xlabels .x-label {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.1;
}

.dark-theme .analisis-fichadas-chart .trend-line,
.dark-theme .analisis-fichadas-chart .trend-point {
    stroke: #ff6b6b;
    fill: #ff6b6b;
}


.analisis-grafico-legend-label {
    font-weight: 500;
}

/* Modo oscuro: adaptar formularios de gráficos de análisis (ausencias, fichadas y resumen diario) */
.dark-theme .analisis-ausencias-modal .card.shadow-sm {
    background: color-mix(in srgb, var(--surface-bg) 92%, #000 8%);
    border: 1px solid rgba(255,255,255,0.10);
    color: #e5e7eb;
}

.dark-theme .analisis-ausencias-modal .card.shadow-sm .card-body,
.dark-theme .analisis-ausencias-modal .card.shadow-sm h6,
.dark-theme .analisis-ausencias-modal .card.shadow-sm .fw-semibold,
.dark-theme .analisis-ausencias-modal .card.shadow-sm .small,
.dark-theme .analisis-ausencias-modal .card.shadow-sm .small span {
    color: #e5e7eb;
}

.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] rect[fill="white"] {
    fill: color-mix(in srgb, var(--surface-bg) 94%, #000 6%) !important;
}

.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] rect[fill="#ffffff"],
.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] circle[fill="#ffffff"] {
    fill: color-mix(in srgb, var(--surface-bg) 94%, #000 6%) !important;
}

.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] line[stroke="#adb5bd"],
.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] path[stroke="#adb5bd"] {
    stroke: rgba(255,255,255,0.40) !important;
}

.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] line[stroke="#f1f3f5"],
.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] path[stroke="#f1f3f5"] {
    stroke: rgba(255,255,255,0.14) !important;
}

.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] foreignObject div,
.dark-theme .analisis-ausencias-modal svg[id^="analisis-"] text {
    color: #cbd5e1 !important;
    fill: #cbd5e1 !important;
}

.dark-theme .analisis-ausencias-modal .small.text-muted,
.dark-theme .analisis-ausencias-modal .text-muted.small {
    color: #94a3b8 !important;
}

.dark-theme .analisis-ausencias-modal .analisis-grafico-legend-label {
    color: #e5e7eb !important;
}

/* Estado actual - mapa ubicaciones */
#estadoActualMapaContainer {
    height: 68vh;
    min-height: 420px;
}

.estado-map-div-icon {
    background: transparent;
    border: 0;
}

.estado-map-pin-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.estado-map-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
    object-fit: cover;
    background: #d9d9d9;
}

.estado-map-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5a5a5a;
    font-size: 16px;
}

.estado-map-name {
    background: linear-gradient(135deg, var(--primary-theme) 0%, var(--primary-theme-strong) 100%);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.22);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estado-map-cluster-icon {
    background: transparent;
    border: 0;
}

.estado-map-cluster-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-theme) 0%, var(--primary-theme-strong) 100%);
    border: 2px solid #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.estado-map-popup ul {
    margin: 6px 0 0;
    padding-left: 18px;
    max-height: 180px;
    overflow: auto;
}


.estado-map-popup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.estado-map-popup-item:last-child {
    margin-bottom: 0;
}

.estado-map-popup-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #fff;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    background: #d9d9d9;
}

.estado-map-top-list {
    max-height: 180px;
    overflow: auto;
}


.estado-map-overlay-list {
    position: absolute;
    top: 10px;
    right: 10px;
    width: min(420px, calc(100% - 20px));
    max-height: calc(100% - 20px);
    overflow: hidden;
    z-index: 2000;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
    background: #fff;
}

.estado-map-overlay-list .card-body {
    max-height: min(320px, calc(100vh - 260px));
    overflow: auto;
}


.estado-map-overlay-list .btn-close.btn-close-sm {
    transform: scale(.8);
    opacity: .85;
}

.estado-map-overlay-list .btn-close.btn-close-sm:hover {
    opacity: 1;
}


.dark-theme .estado-map-overlay-list .btn-close.btn-close-sm {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .92;
}

.dark-theme .estado-map-overlay-list .btn-close.btn-close-sm:hover {
    opacity: 1;
}


.btn.btn-ubicacion-mapa {
    background-color: #ec4899 !important;
    color: #fff !important;
    border: none !important;
}

.btn.btn-ubicacion-mapa:hover,
.btn.btn-ubicacion-mapa:focus-visible {
    background-color: #db2777 !important;
    color: #fff !important;
}

.btn.btn-ubicacion-mapa:disabled,
.btn.btn-ubicacion-mapa.disabled {
    background-color: #f9a8d4 !important;
    color: #fff !important;
    opacity: .8;
}


.dark-theme .estado-map-overlay-list {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.dark-theme .estado-map-overlay-list .card-body {
    color: #e5e7eb;
}

.dark-theme .estado-map-overlay-list .text-muted {
    color: #94a3b8 !important;
}

.dark-theme .estado-map-popup,
.dark-theme .leaflet-popup-content-wrapper {
    background: #0f172a;
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.dark-theme .leaflet-popup-tip {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.dark-theme .estado-map-popup ul {
    color: #e5e7eb;
}

.dark-theme .estado-map-popup-item strong {
    color: #f8fafc;
}

.dark-theme .balance-inner-circle{background:rgba(17,25,40,.95)!important;color:#fff!important;}