@charset "UTF-8";
/* =============================================================================
   TCL | NFL — Capa de pulido del panel Admin
   Rediseño 09-ago-2026 (skills: /impeccable + /emil-design-eng)
   -----------------------------------------------------------------------------
   Esta hoja se carga SIEMPRE al final (después de bootstrap y del tema Dore),
   por lo que actúa como capa de diseño sobre la plantilla sin tocar la lógica.
   Sistema basado en tokens: cambia una variable y se propaga a todo el panel.

   Estrategia de color (restraint, registro producto):
     · Azul estructural  -> elementos interactivos (botones, enlaces, tabs).
     · Rojo de marca (--brand) -> acento: estado activo del menú, foco, login,
       énfasis puntual. NO se usa como "primary" global para no colisionar con
       el rojo semántico de "rechazado/peligro".
     · Verde / ámbar / rojo -> significado (aprobado / pendiente / rechazado).
   ============================================================================= */

/* ============================ 1. TOKENS ==================================== */
:root {
    /* Marca */
    --brand:        #e11b22;   /* TCL / NFL rojo */
    --brand-strong: #b3141a;
    --brand-ink:    #7d0e13;
    --brand-tint:   rgba(225, 27, 34, .08);

    /* Primario interactivo (azul estructural, armoniza con el tema Dore) */
    --primary:        #0b4f9e;
    --primary-strong: #073b77;
    --primary-tint:   rgba(11, 79, 158, .09);

    /* Neutros */
    --bg:            #f3f5f9;   /* fondo de la app */
    --surface:       #ffffff;   /* tarjetas, topbar */
    --surface-2:     #f8fafc;   /* zonas sutiles (thead, cajas de detalle) */
    --border:        #e5e9f0;
    --border-strong: #d5dce6;

    /* Tinta / texto (contraste verificado ≥ 4.5:1 sobre superficie clara) */
    --ink:      #1b2733;
    --ink-2:    #3b4757;
    --muted:    #5b6675;
    --muted-2:  #67717e;   /* contraste AA en placeholders (4.95:1 s/ blanco) */

    /* Semánticos + tintes para chips (texto verificado AA sobre su tinte) */
    --success:      #157347;  --success-tint: rgba(21, 115, 71, .12);
    --warning:      #855c00;  --warning-tint: rgba(133, 92, 0, .14);
    --danger:       #c62828;  --danger-tint:  rgba(198, 40, 40, .11);
    --info:         #0b6980;  --info-tint:    rgba(11, 105, 128, .12);

    /* Radios */
    --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;

    /* Sombras (suaves, frías) */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --shadow:    0 4px 16px rgba(16, 24, 40, .07);
    --shadow-lg: 0 12px 30px rgba(16, 24, 40, .12);

    /* Movimiento (emil): curvas fuertes, duraciones cortas para dashboard crisp */
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);
    --dur-press: 140ms;
    --dur-fast:  180ms;
    --dur-base:  220ms;

    /* Escala z-index semántica (sin números mágicos) */
    --z-sticky:   1020;
    --z-dropdown: 1030;
    --z-fixed:    1040;
    --z-modal:    1060;
    --z-toast:    1080;
}

/* ============================ 2. BASE ====================================== */
body,
#app-container {
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main { color: var(--ink); }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* El tema Dore fuerza p a "Nunito"; lo hacemos heredar la fuente base (Montserrat). */
p {
    font-family: inherit;
}

main > .container-fluid > .row h1,
main .container-fluid h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

/* Título de sección (agrupador de tarjetas) */
h2.card-title-group,
.card-title-group {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

/* Separador: hairline en vez de línea dura del tema */
.separator {
    border-top: 1px solid var(--border);
    opacity: 1;
}

a { color: var(--primary); }
a:hover { color: var(--primary-strong); }

.text-muted { color: var(--muted) !important; }

/* Selección de texto con tinte de marca */
::selection { background: var(--brand-tint); color: var(--brand-ink); }

/* ==================== 3. FOCO VISIBLE (accesibilidad) ====================== */
/* Anillo de marca; no remover sin reemplazo equivalente. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
/* Quita el resplandor azul por defecto de Bootstrap: usamos el outline anterior */
.btn:focus, .form-control:focus, .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

/* ============================ 4. TOPBAR ==================================== */
.navbar.fixed-top {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-fixed);
}

.navbar .navbar-logo img { transition: opacity var(--dur-fast) ease; }
.navbar .navbar-logo:hover img { opacity: .9; }

/* Botón hamburguesa: área táctil y color coherentes */
.navbar .menu-button svg .main,
.navbar .menu-button svg .sub,
.navbar .menu-button-mobile svg { fill: var(--ink-2); }
.navbar .menu-button:hover svg .main,
.navbar .menu-button:hover svg .sub { fill: var(--brand); }

/* Usuario / avatar */
.navbar .user .name {
    color: var(--ink);
    font-weight: 600;
    font-size: .85rem;
}
.navbar .user img {
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px;
}
.header-icon i { color: var(--ink-2); }
.header-icon:hover i { color: var(--brand); }

/* ============================ 5. MENÚ LATERAL ============================== */
.menu {
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: none;
}
.menu .main-menu {
    background: var(--surface);
    box-shadow: none;
    border: 0;
}

.menu .main-menu ul li {
    border-bottom: 0;
    position: relative;
}

.menu .main-menu ul li a {
    color: var(--ink-2);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 1.35rem .5rem;
    border-radius: 0;
    transition: color var(--dur-fast) ease,
                background-color var(--dur-fast) ease;
}

.menu .main-menu ul li a i {
    font-size: 30px;
    color: var(--muted-2);
    transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-strong);
    margin-bottom: .35rem;
    display: block;
}

/* Hover: tinte sutil + íconos a color de marca */
.menu .main-menu ul li:hover a,
.menu .main-menu ul li a:hover {
    color: var(--ink);
    background: var(--brand-tint);
}
.menu .main-menu ul li:hover a i {
    color: var(--brand);
}

/* Estado activo: barra de acento de marca + íono/label resaltados */
.menu .main-menu ul li.active a { color: var(--ink); font-weight: 700; }
.menu .main-menu ul li.active a i { color: var(--brand); }
.menu .main-menu ul li.active::before {
    content: "";
    position: absolute;
    left: 0; top: 12%;
    height: 76%;
    width: 3px;
    background: var(--brand);
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
}

/* ============================ 6. TARJETAS ================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
}
.card .card-body { padding: 1.5rem; }

.card-title {
    color: var(--ink);
    font-weight: 700;
    font-size: 1rem;
}
.card-title > i[class^="iconsminds-"],
.card-title > i[class*=" iconsminds-"],
.card-title > i[class^="simple-icon-"],
.card-title > i[class*=" simple-icon-"] {
    margin-right: .4rem;
    vertical-align: middle;
    opacity: .85;
}

/* --- Tarjetas métricas del dashboard: número protagonista --------------- */
/* El ícono se convierte en una "ficha" en círculo tintado, discreto; el
   número domina la jerarquía y el label queda como apoyo en mayúsculas. */
.card-global-db .card-body,
.card-tickets .card-body,
.card-participantes .card-body {
    padding: 1.5rem 1.25rem;
}

.card-global-db .card-body i[class^="iconsminds-"],
.card-tickets .card-body i[class^="iconsminds-"],
.card-participantes .card-body i[class^="iconsminds-"] {
    font-size: 26px !important;   /* domar los 45px inline: el número manda */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin: 0 auto .85rem;
    border-radius: var(--r-pill);
    background: var(--primary-tint);
    color: var(--primary);
    line-height: 1;
}

/* La etiqueta pequeña arriba del número */
.card-global-db .card-text,
.card-tickets .card-text,
.card-participantes .card-text {
    order: 3;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .35rem !important;
}

/* El número: hero */
.card-global-db .lead,
.card-tickets .lead,
.card-participantes .lead {
    font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.65rem);
    font-weight: 800;
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: -0.03em;
    margin-bottom: 0;
    overflow-wrap: normal;
    word-break: keep-all;
}
.card-global-db .card-body,
.card-tickets .card-body,
.card-participantes .card-body {
    display: flex;
    flex-direction: column;
}
/* reordena label bajo el número visualmente sin tocar el HTML */
.card-global-db .card-body i,
.card-tickets .card-body i,
.card-participantes .card-body i { order: 1; }
.card-global-db .card-text,
.card-tickets .card-text,
.card-participantes .card-text { order: 2; }
.card-global-db .lead,
.card-tickets .lead,
.card-participantes .lead { order: 3; }

/* Sub-monto (Tickets en el dashboard) */
.monto-small {
    display: block;
    font-size: .78rem;
    margin-top: .4rem;
    font-weight: 600;
}
.monto-aprobado, .text-approved { color: var(--success); }
.monto-rechazado, .text-rejected { color: var(--danger); }
.monto-pendiente { color: var(--warning); }
.monto-total     { color: var(--primary); }

/* Tono del ícono por tipo de tarjeta de tickets (mantiene significado) */
.card-tickets:nth-of-type(1) .card-body i,
.card-tickets .iconsminds-receipt-4 { background: var(--primary-tint); color: var(--primary); }
.card-tickets .iconsminds-check[style*="1e7e34"],
.card-tickets .iconsminds-check.text-success { background: var(--success-tint) !important; color: var(--success) !important; }
.card-tickets .iconsminds-close { background: var(--danger-tint) !important; color: var(--danger) !important; }

/* Cajas de detalle por marca */
.brand-detail-box {
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: .85rem;
    margin-top: 1rem;
    font-size: .85rem;
    border: 1px solid var(--border);
}
.detail-label { font-weight: 700; display: block; margin-bottom: .15rem; font-size: .7rem; letter-spacing: .04em; }
.detail-value { font-size: 1.05rem; font-weight: 800; }

/* Tarjetas resumen de la vista de tickets */
.card-summary-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 0; }
.card-summary-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.card-money { font-size: 1rem; font-weight: 700; margin-top: .35rem; }
.text-money-total    { color: var(--primary); }
.text-money-approved { color: var(--success); }
.text-money-pending  { color: var(--warning); }
.text-money-rejected { color: var(--danger); }

/* ==================== 6b. ENCABEZADO DE PÁGINA ============================ */
.page-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.6rem;
}
.page-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 20px;
}
.page-head h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}
.page-head__pill {
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: .3rem .8rem;
    box-shadow: var(--shadow-sm);
}
.page-head__sub {
    font-size: .85rem;
    color: var(--muted);
    font-weight: 500;
}

/* ---- Encabezado de página con migaja + título + subtítulo ---- */
.page-header {
    margin-bottom: 1.8rem;
}
.page-header__crumb {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: .55rem;
}
.page-header__crumb a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast, .15s) ease;
}
.page-header__crumb a:hover {
    color: var(--brand);
}
.page-header__crumb .sep {
    color: var(--muted);
    font-weight: 600;
}
.page-header__crumb .current {
    color: var(--brand);
}
.page-header__title {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 .35rem;
    color: var(--ink);
}
.page-header__sub {
    font-size: .95rem;
    color: var(--muted);
    font-weight: 500;
    margin: 0;
    max-width: 60ch;
}
@media (max-width: 575.98px) {
    .page-header__title { font-size: 1.6rem; }
}

/* ==================== 6c. TILES DE KPI ==================================== */
.stat-tile {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: 1.4rem 1.45rem;
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out-strong),
                box-shadow var(--dur-base) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
    .stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* Barra de acento a la izquierda (tarjetas destacadas) */
.stat-tile--red::before,
.stat-tile--amber::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.stat-tile--red::before   { background: var(--brand); }
.stat-tile--amber::before { background: var(--warning); }

/* Ficha de ícono (cuadro redondeado) */
.stat-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: var(--r-sm);
    background: #eef1f6;
    color: var(--ink-2);
    font-size: 22px;
    margin-bottom: 1rem;
    line-height: 1;
}
.stat-tile__icon--red   { background: var(--brand-tint);   color: var(--brand); }
.stat-tile__icon--green { background: var(--success-tint); color: var(--success); }
.stat-tile__icon--amber { background: var(--warning-tint); color: var(--warning); }

.stat-tile__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .35rem;
}
.stat-tile__value {
    font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.95rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    word-break: keep-all;
}
.stat-tile__sub {
    font-size: .8rem;
    color: var(--muted);
    margin-top: .45rem;
    font-weight: 500;
}
.stat-tile__sub.is-up {
    color: var(--success);
    font-weight: 700;
}
.stat-tile__sub.is-up::before {
    content: "↗";
    margin-right: .25rem;
}

.text-brand   { color: var(--brand) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }

/* ==================== 6d. STAT-STRIP (fila compacta de estados) =========== */
.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.stat-chip {
    position: relative;
    flex: 1 1 150px;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    padding: .95rem 1.1rem;
    transition: transform var(--dur-base) var(--ease-out-strong),
                box-shadow var(--dur-base) var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
    .stat-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* Variante oscura (Todas) */
.stat-chip--dark {
    background: var(--ink);
    border-color: var(--ink);
}
.stat-chip--dark .stat-chip__value { color: #fff; }
.stat-chip--dark .stat-chip__label { color: rgba(255, 255, 255, .72); }
.stat-chip--dark .stat-chip__icon  { background: rgba(255, 255, 255, .14); color: #fff; }

/* Variante con acento (barra izquierda de marca/primario) */
.stat-chip--accent { border-color: rgba(11, 79, 158, .35); }
.stat-chip--accent::before {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 4px;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    background: var(--primary);
}

.stat-chip__icon {
    flex: 0 0 40px;
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1f6;
    color: var(--ink-2);
    font-size: 19px;
    line-height: 1;
}
.stat-chip__icon--amber { background: var(--warning-tint); color: var(--warning); }
.stat-chip__icon--green { background: var(--success-tint); color: var(--success); }
.stat-chip__icon--red   { background: var(--danger-tint);  color: var(--danger); }
.stat-chip__icon--blue  { background: var(--primary-tint); color: var(--primary); }

.stat-chip__body { display: flex; flex-direction: column; min-width: 0; }
.stat-chip__value {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.stat-chip__label {
    font-size: .74rem;
    font-weight: 600;
    color: var(--muted);
    margin-top: .1rem;
}
.text-accent-blue { color: var(--primary) !important; }

/* ==================== 6e. FILTRO DE PERIODO (select quincena) ============= */
.filtro-periodo {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: 280px;
}
.filtro-periodo__icon {
    position: absolute;
    left: .8rem;
    color: var(--muted);
    font-size: 15px;
    pointer-events: none;
}
.filtro-periodo select.form-control {
    padding-left: 2.3rem;
    padding-right: 2rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    background-color: var(--surface);
}
.filtro-periodo select.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}

/* ============================ 7. BOTONES =================================== */
.btn {
    border-radius: var(--r-sm);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .5rem 1.05rem;
    transition: transform var(--dur-press) var(--ease-out-strong),
                box-shadow var(--dur-fast) var(--ease-out-strong),
                background-color var(--dur-fast) ease,
                border-color var(--dur-fast) ease,
                color var(--dur-fast) ease;
}
.btn:active { transform: scale(0.97); }        /* feedback al presionar (emil) */

.btn-lg { padding: .7rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; }
.btn-xs { padding: .2rem .55rem; font-size: .72rem; border-radius: var(--r-xs); }

/* .btn-primary = rojo sólido (CTA principal y estado ACTIVO de pestañas). */
.btn-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--brand-strong) !important;
    border-color: var(--brand-strong) !important;
    box-shadow: 0 4px 12px rgba(225, 27, 34, .25);
    color: #fff !important;
}

/* ===== Botones de acción neutrales: outline rojo -> hover relleno rojo, texto blanco.
   (Detalle, Ver, Cancelar, Editar, etc.) Se respetan .btn-success (verde) y
   .btn-danger (rojo sólido) por su significado. ===== */
.btn-secondary,
.btn-info,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-danger {
    background-color: #fff !important;
    border: 1px solid var(--brand) !important;
    color: var(--brand) !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-info:hover, .btn-outline-info:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(225, 27, 34, .22) !important;
}

/* Botón de exportar a Excel (verde Excel) */
.btn-excel,
.btn-excel:focus {
    background-color: #217346 !important;
    border: 1px solid #217346 !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-excel:hover,
.btn-excel:not(:disabled):not(.disabled):active {
    background-color: #1a5c38 !important;
    border-color: #1a5c38 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(33, 115, 70, .25) !important;
}

/* Botón de énfasis de marca (por si se necesita explícito) */
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; box-shadow: 0 4px 12px rgba(225,27,34,.28); }

.btn-shadow { box-shadow: var(--shadow); }

/* ============================ 8. TABLAS ==================================== */
/* Menos peso: sin bordes de cuadrícula, reglas horizontales y hover de fila. */
.table {
    color: var(--ink);
    border-color: var(--border);
}
.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td { border: 0; }
.table thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-strong);
    border-top: 0;
    padding: .8rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    padding: .8rem 1rem;
    vertical-align: middle;
    font-size: .9rem;
    font-weight: 500;
}
.table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table tbody tr { transition: background-color var(--dur-fast) ease; }
@media (hover: hover) and (pointer: fine) {
    .table tbody tr:hover { background: var(--primary-tint); }
}
.table td .text-muted, .table td small { color: var(--muted); }

/* ============================ 9. BADGES / CHIPS ============================ */
.badge {
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .4em .7em;
    border-radius: var(--r-pill);
}
.badge-success   { background: var(--success-tint); color: var(--success); }
.badge-danger    { background: var(--danger-tint);  color: var(--danger); }
.badge-warning   { background: var(--warning-tint); color: var(--warning); }
.badge-info      { background: var(--info-tint);    color: var(--info); }
.badge-secondary { background: #e9edf3;             color: var(--ink-2); }
.badge-light     { background: #f1f4f8;             color: var(--muted); }

/* Chip de estado con punto (utilidad opcional para las tablas) */
.status-chip {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .3em .7em; border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 700;
}
.status-chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.status-chip.is-approved { background: var(--success-tint); color: var(--success); }
.status-chip.is-pending  { background: var(--warning-tint); color: var(--warning); }
.status-chip.is-rejected { background: var(--danger-tint);  color: var(--danger); }

/* ============================ 10. TABS ===================================== */
.nav-tabs {
    border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
    color: var(--muted);
    font-weight: 600;
    font-size: .88rem;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: .85rem 1rem;
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.nav-tabs .nav-link:hover { color: var(--ink); }
.nav-tabs .nav-link.active {
    color: var(--brand);
    background: transparent;
    border-bottom-color: var(--brand);
}
.nav-tabs .nav-link i { margin-right: .35rem; }
.card-header-tabs { margin: 0; }
.card .card-header { background: var(--surface); border-bottom: 1px solid var(--border); }

/* ==================== 11. DATATABLES (buscador, paginación) =============== */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    padding: .45rem .75rem;
    margin-left: .5rem;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-tint);
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label { color: var(--muted); font-size: .85rem; }

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink-2) !important;
    padding: .35rem .7rem !important;
    margin: 0 .15rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover {
    background: var(--primary-tint) !important;
    border-color: var(--border-strong) !important;
    color: var(--primary) !important;
}
/* En bootstrap4 el li (.paginate_button.page-item) NO debe tener recuadro:
   el pill/círculo lo dibuja únicamente .page-link. */
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---- Paginación bootstrap4 (.pagination > .page-item > .page-link) ---- */
.dataTables_wrapper .dataTables_paginate { padding-top: .9rem; }
.dataTables_wrapper .pagination { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.dataTables_wrapper .pagination .page-item .page-link {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--brand);
    background: var(--surface);
    font-weight: 600;
    min-width: 42px;
    text-align: center;
    padding: .5rem .95rem;
    line-height: 1.1;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.dataTables_wrapper .pagination .page-item .page-link:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-strong);
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--muted);
    cursor: not-allowed;
}
.dataTables_wrapper .pagination .page-link:focus {
    box-shadow: 0 0 0 3px var(--brand-tint);
    outline: none;
}
/* Refuerzo variante "default" con color de marca (por si --primary no existe) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* ============================ 12. FORMULARIOS ============================== */
.form-control {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--ink);
    padding: .55rem .8rem;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-control::placeholder { color: var(--muted-2); }
.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
.has-float-label > span,
.has-float-label label { color: var(--muted); font-weight: 600; }
.has-float-label .form-control:focus ~ span { color: var(--brand); }

.custom-control-label { color: var(--ink-2); }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
}

/* ============================ 13. LOGIN ==================================== */
.auth-card {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.auth-card .image-side {
    background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 70%, var(--brand-ink) 100%) !important;
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.auth-card .image-side .h2 {
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-wrap: balance;
    margin-bottom: .6rem;
}
.auth-card .image-side .white,
.auth-card .image-side p.white { color: rgba(255,255,255,.88) !important; }
.auth-card .form-side { padding: 2.5rem 2.25rem; }
.acceso { font-size: 38px; }

/* ==================== 13b. GRÁFICAS (Chart.js) ============================ */
.card.h-100 { height: 100%; }

.chart-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.chart-card-title .chart-sub {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .2rem .55rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.chart-holder {
    position: relative;
    height: 280px;
    width: 100%;
}
/* La dona usa relación de aspecto fija (JS): su alto se deriva del ancho y NO
   puede crecer sola. Contenedor con alto automático y ancho acotado para que
   Chart.js lea un ancho estable. */
.donut-holder {
    height: auto;
    min-height: 0;
    max-width: 340px;
    margin: 0 auto;
}
/* Ancla el <canvas> de la LÍNEA al contenedor de alto fijo (evita el bucle de
   resize de Chart.js con maintainAspectRatio:false). Se excluye la dona. */
.chart-holder:not(.donut-holder) > canvas {
    position: absolute !important;
    top: 0;
    left: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
}
/* La dona: canvas centrado, sin forzar alto (lo gobierna aspectRatio). */
.donut-holder > canvas {
    display: block;
    margin: 0 auto;
}

/* Total al centro de la dona (overlay, robusto ante cualquier versión) */
.donut-center {
    position: absolute;
    top: 43%;
    left: 0; right: 0;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
}
.donut-center .donut-total {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.03em;
}
.donut-center .donut-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-top: .25rem;
}

/* ============================ 14. FOOTER =================================== */
#footer .col-12 {
    background: var(--ink) !important;
    border-radius: var(--r) var(--r) 0 0;
}
#footer p { color: rgba(255,255,255,.75) !important; font-size: .82rem; }

/* Alertas coherentes */
.alert-danger { background: var(--danger-tint); color: var(--danger); border: 1px solid rgba(198,40,40,.25); border-radius: var(--r-sm); }

/* ==================== 15. MOVIMIENTO (emil-design-eng) ===================== */
/* Menú de usuario: entra desde su origen (arriba-derecha), no del centro. */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
    padding: .35rem;
}
.dropdown-menu .dropdown-item { border-radius: var(--r-xs); font-weight: 600; color: var(--ink-2); padding: .5rem .75rem; }
.dropdown-menu .dropdown-item:hover { background: var(--brand-tint); color: var(--brand-strong); }
.dropdown-menu.show {
    transform-origin: top right;
    animation: dm-in 150ms var(--ease-out-strong);
}
@keyframes dm-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* Enlaces / navegación: transición de color suave */
a, .dropdown-item, .nav-link {
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

/* Tarjetas realmente interactivas (envueltas en <a>) elevan sutil al hover */
@media (hover: hover) and (pointer: fine) {
    a .card { transition: transform var(--dur-base) var(--ease-out-strong), box-shadow var(--dur-base) var(--ease-out-strong); }
    a:hover .card { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* Entrada escalonada de tarjetas al cargar.
   IMPORTANTE (emil/impeccable): NUNCA ocultamos el contenido. La animación es
   solo-transform (un desplazamiento de 6px que se resuelve a 0); si no se
   ejecuta (pestaña en segundo plano, motor sin animación), la tarjeta ya está
   visible en su estado en reposo. Sin opacity:0 de base = jamás pantalla en
   blanco. */
@media (hover: hover) and (pointer: fine) {
    .row .card { animation: card-in var(--dur-base) var(--ease-out-strong) backwards; }
    .row > [class*="col-"]:nth-child(1) .card { animation-delay: 0ms; }
    .row > [class*="col-"]:nth-child(2) .card { animation-delay: 40ms; }
    .row > [class*="col-"]:nth-child(3) .card { animation-delay: 80ms; }
    .row > [class*="col-"]:nth-child(4) .card { animation-delay: 120ms; }
}
@keyframes card-in {
    from { transform: translateY(6px); }
    to   { transform: translateY(0); }
}

/* ==================== 16. REDUCED MOTION (no opcional) ==================== */
@media (prefers-reduced-motion: reduce) {
    .btn:active { transform: none; }
    a:hover .card { transform: none; }
    .row .card { animation: none; }
    .dropdown-menu.show { animation: dm-fade 150ms ease; }
    @keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } }
    * { scroll-behavior: auto !important; }
}