/* =============================================================================
   SISTEMA CENTRO REGULADOR SAMU CHILE - TEMA INSTITUCIONAL ASISTENCIAL CLARO
   ============================================================================= */

@import url('/assets/fuentes/fuentes.css');

:root {
    /* Paleta Institucional Asistencial Clara */
    --bg-principal: #f8fafc;         /* Fondo General Hospitalario */
    --bg-secundario: #f1f5f9;
    --bg-tarjeta: #ffffff;           /* Superficies y Tarjetas Blancas */
    --bg-tarjeta-elevada: #ffffff;
    
    --borde-color: #e2e8f0;          /* Bordes Suaves y Limpios */
    --borde-sutil: #edf2f7;
    --borde-activo: #38bdf8;

    --texto-principal: #0f172a;      /* Texto de Alto Contraste */
    --texto-secundario: #475569;    /* Subtítulos y Metadatos */
    --texto-apagado: #64748b;       /* Placeholders y Leyendas (v1.120.0: #94a3b8 no llegaba a 4,5:1) */

    --primario-samu: #1e3a8a;        /* Azul Marino Institucional */
    --primario-samu-hover: #172554;
    --acento-samu: #0284c7;          /* Azul Sanitario / Cielo */
    --acento-samu-hover: #0369a1;
    --acento-suave: #e0f2fe;

    /* Semáforo Operacional Sanitario */
    /* v1.120.0: los tonos de texto suben un paso (antes #059669, #d97706, #dc2626 y #0284c7) porque
       sobre su propio fondo no llegaban a 4,5:1. Donde se usan como relleno, tema.css conserva el original. */
    --color-exito: #047857;          /* Verde Operativo */
    --color-exito-bg: #ecfdf5;
    --color-exito-borde: #a7f3d0;

    --color-alerta: #b45309;         /* Ámbar Alerta */
    --color-alerta-bg: #fffbeb;
    --color-alerta-borde: #fde68a;

    --color-peligro: #b91c1c;        /* Rojo Emergencia 131 */
    --color-peligro-bg: #fef2f2;
    --color-peligro-borde: #fecaca;

    --color-info: #0369a1;
    --color-info-bg: #f0f9ff;
    --color-info-borde: #bae6fd;

    /* Badges de Turnos - Alto Contraste en Fondo Claro */
    --turno-diurno-bg: #dcfce7;
    --turno-diurno-texto: #14532d;
    --turno-diurno-borde: #86efac;

    --turno-noche-bg: #f3e8ff;
    --turno-noche-texto: #581c87;
    --turno-noche-borde: #d8b4fe;

    --turno-largo-bg: #e0f2fe;
    --turno-largo-texto: #0369a1;
    --turno-largo-borde: #7dd3fc;

    --turno-24h-bg: #fef3c7;
    --turno-24h-texto: #92400e;
    --turno-24h-borde: #fcd34d;

    --turno-libre-bg: #f1f5f9;
    --turno-libre-texto: #475569;
    --turno-libre-borde: #cbd5e1;

    --turno-licencia-bg: #fee2e2;
    --turno-licencia-texto: #991b1b;
    --turno-licencia-borde: #fca5a5;

    /* Tipografía */
    --fuente-titulos: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --fuente-cuerpo: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fuente-mono: 'JetBrains Mono', monospace;

    /* Sombras Asistenciales */
    --sombra-suave: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --sombra-tarjeta: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --sombra-elevada: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --sombra-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

    --radio-sm: 6px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-xl: 16px;
    --radio-full: 9999px;

    --transicion-rapida: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   RESET Y BASE
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-cuerpo);
    background-color: var(--bg-principal);
    color: var(--texto-principal);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar Claro */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
}
::-webkit-scrollbar-thumb {
    background: var(--tema-bg-cbd5e1, #cbd5e1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tema-bg-94a3b8, #94a3b8);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    color: var(--texto-principal);
    letter-spacing: -0.02em;
}

a {
    color: var(--acento-samu);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}
a:hover {
    color: var(--primario-samu);
}

/* =============================================================================
   CABECERA PRINCIPAL Y BARRA DE NAVEGACION (2 NIVELES)
   ============================================================================= */
.barra-navegacion {
    background: var(--tema-bg-ffffff, #ffffff);
    border-bottom: 1px solid var(--borde-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    padding: 0;
}

/* Fila 1: Cabecera Superior (Logo a la izquierda; Base y Usuario a la derecha) */
.barra-cabecera-superior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.75rem;
    background: var(--tema-bg-ffffff, #ffffff);
    border-bottom: 1px solid var(--tema-bd-f1f5f9, #f1f5f9);
}

/* Fila 2: Barra de Menú (Debajo de la cabecera) */
.barra-cabecera-inferior {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1.5rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-top: 1px solid var(--tema-bd-eef2f6, #eef2f6);
}

.marca-samu {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--fuente-titulos);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primario-samu);
    letter-spacing: -0.02em;
}

.icono-cruz-samu {
    background: linear-gradient(135deg, var(--tema-bg-dc2626, #dc2626) 0%, var(--tema-bg-b91c1c, #b91c1c) 100%);
    color: var(--tema-tx-ffffff, white);
    width: 38px;
    height: 38px;
    border-radius: var(--radio-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);
}

.enlaces-navegacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: 100%;
}

.enlace-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radio-md);
    color: var(--texto-secundario);
    font-weight: 600;
    font-size: 0.8125rem;
    transition: all var(--transicion-normal);
    white-space: nowrap;
    border: 1px solid transparent;
    text-decoration: none;
}

.enlace-nav:hover {
    color: var(--primario-samu);
    background: var(--tema-bg-ffffff, #ffffff);
    border-color: var(--tema-bd-cbd5e1, #cbd5e1);
    box-shadow: var(--sombra-suave);
}

.enlace-nav.activo {
    background: var(--tema-bg-ffffff, #ffffff);
    color: var(--primario-samu);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
}

.nav-flecha-dropdown {
    font-size: 0.6rem;
    opacity: 0.65;
    margin-left: 2px;
    transition: transform var(--transicion-rapida);
}

/* Dropdowns de Navegacion */
.dropdown-nav {
    position: relative;
    display: inline-block;
}

.dropdown-nav.abierto .nav-flecha-dropdown,
.dropdown-nav:hover .nav-flecha-dropdown {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--tema-bg-ffffff, #ffffff);
    min-width: 230px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    padding: 0.5rem 0;
    z-index: 1050;
    margin-top: 4px;
}

.dropdown-menu-amplio {
    min-width: 600px;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    padding: 0.85rem;
    left: auto;
    right: 0;
}

.dropdown-menu-amplio.menu-4-columnas {
    min-width: 820px;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .dropdown-menu-amplio.menu-4-columnas {
        min-width: 600px;
        grid-template-columns: repeat(2, 1fr);
    }
}

.dropdown-columna {
    display: flex;
    flex-direction: column;
}

.dropdown-columna .dropdown-item {
    padding: 0.4rem 0.6rem;
    font-size: 0.785rem;
    border-radius: 6px;
}

.dropdown-seccion-titulo {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primario-samu);
    letter-spacing: 0.05em;
    padding: 0.35rem 0.6rem 0.25rem 0.6rem;
    border-bottom: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Puente invisible para evitar perder el hover al mover el cursor al submenu */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

.dropdown-nav:hover .dropdown-menu,
.dropdown-nav.abierto .dropdown-menu {
    display: block;
}

.dropdown-nav:hover .dropdown-menu-amplio,
.dropdown-nav.abierto .dropdown-menu-amplio {
    display: grid;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem;
    color: var(--texto-secundario);
    font-weight: 500;
    transition: all var(--transicion-rapida);
}

.dropdown-item:hover {
    background: var(--tema-bg-f8fafc, #f8fafc);
    color: var(--primario-samu);
    padding-left: 1.15rem;
}

.dropdown-item.activo {
    color: var(--primario-samu);
    font-weight: 700;
    background: var(--acento-suave);
}

.usuario-sesion {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.chip-establecimiento {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    border: 1px solid var(--borde-color);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radio-full);
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--primario-samu);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* =============================================================================
   CONTENEDOR Y PANELES BLANCOS
   ============================================================================= */
.contenedor-principal {
    flex: 1;
    padding: 1.75rem 2rem;
    max-width: 1700px;
    margin: 0 auto;
    width: 100%;
}

.panel-card {
    background: var(--bg-tarjeta);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-tarjeta);
    overflow: hidden;
    margin-bottom: 1.75rem;
}

.panel-encabezado {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--borde-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--tema-bg-fafafa, #fafafa);
}

.panel-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primario-samu);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.panel-cuerpo {
    padding: 1.5rem;
}

/* =============================================================================
   BARRA DE FILTROS ASISTENCIAL
   ============================================================================= */
.barra-filtros {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    align-items: flex-end;
    margin-bottom: 1.75rem;
    box-shadow: var(--sombra-suave);
}

.grupo-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.grupo-control label {
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.control-input, .control-select, .control-textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    color: var(--texto-principal);
    font-family: var(--fuente-cuerpo);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transicion-rapida);
}

.control-input:focus, .control-select:focus, .control-textarea:focus {
    outline: none;
    border-color: var(--acento-samu);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* =============================================================================
   BOTONES INSTITUCIONALES
   ============================================================================= */
.btn,
.btn-primario,
.btn-secundario,
.btn-peligro,
.btn-exito,
.modal-pie button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-family: var(--fuente-titulos, inherit);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all var(--transicion-normal, 0.18s ease);
    user-select: none;
    white-space: nowrap;
    line-height: 1.25;
    box-sizing: border-box;
}

.btn-primario {
    background: linear-gradient(135deg, var(--tema-bg-0284c7, #0284c7) 0%, var(--tema-bg-0369a1, #0369a1) 100%);
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--tema-bd-0284c7, #0284c7);
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}
.btn-primario:hover {
    background: linear-gradient(135deg, var(--tema-bg-0369a1, #0369a1) 0%, var(--tema-bg-075985, #075985) 100%);
    border-color: var(--tema-bd-0369a1, #0369a1);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
}

.btn-exito {
    background: linear-gradient(135deg, var(--tema-bg-059669, #059669) 0%, var(--tema-bg-047857, #047857) 100%);
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--tema-bd-059669, #059669);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.25);
}
.btn-exito:hover {
    background: linear-gradient(135deg, var(--tema-bg-047857, #047857) 0%, var(--tema-bg-065f46, #065f46) 100%);
    border-color: var(--tema-bd-047857, #047857);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
}

.btn-secundario {
    background: var(--tema-bg-ffffff, #ffffff);
    border-color: var(--tema-bd-cbd5e1, #cbd5e1);
    color: var(--tema-tx-475569, #475569);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-secundario:hover {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    border-color: var(--tema-bd-94a3b8, #94a3b8);
    color: var(--tema-tx-0f172a, #0f172a);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn-peligro {
    background: linear-gradient(135deg, var(--tema-bg-dc2626, #dc2626) 0%, var(--tema-bg-b91c1c, #b91c1c) 100%);
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--tema-bd-dc2626, #dc2626);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);
}
.btn-peligro:hover {
    background: linear-gradient(135deg, var(--tema-bg-b91c1c, #b91c1c) 0%, var(--tema-bg-991b1b, #991b1b) 100%);
    border-color: var(--tema-bd-b91c1c, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.35);
}

.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* =============================================================================
   GRILLA DE TURNOS Y TABLAS CLARAS
   ============================================================================= */
.contenedor-grilla-turnos {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    background: var(--tema-bg-ffffff, #ffffff);
    max-height: 72vh;
}

.tabla-malla, .tabla-datos {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.tabla-malla th, .tabla-malla td, .tabla-datos th, .tabla-datos td {
    padding: 0.65rem 0.55rem;
    border-bottom: 1px solid var(--borde-color);
    border-right: 1px solid var(--borde-sutil);
    text-align: center;
}

.tabla-malla th, .tabla-datos th {
    background: var(--tema-bg-f8fafc, #f8fafc);
    color: var(--texto-secundario);
    font-family: var(--fuente-titulos);
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--borde-color);
}

.col-fija-funcionario {
    position: sticky;
    left: 0;
    background: var(--tema-bg-ffffff, #ffffff) !important;
    z-index: 10;
    text-align: left !important;
    min-width: 220px;
    max-width: 260px;
    font-weight: 600;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04);
    border-right: 1px solid var(--borde-color) !important;
}

.tabla-malla th.col-fija-funcionario {
    z-index: 30;
    background: var(--tema-bg-f8fafc, #f8fafc) !important;
}

.dia-fin-semana {
    background: var(--tema-bg-fffbeb, #fffbeb) !important;
}
th.dia-fin-semana {
    color: var(--tema-tx-92400e, #92400e) !important;
    background: var(--tema-bg-fef3c7, #fef3c7) !important;
}

.tabla-malla tr:hover td, .tabla-datos tr:hover td {
    background-color: var(--tema-bg-f0f9ff, #f0f9ff);
}

/* =============================================================================
   BADGES DE TURNOS CLAROS DE ALTO CONTRASTE
   ============================================================================= */
.badge-turno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 4px;
    border-radius: 6px;
    font-family: var(--fuente-mono);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
    user-select: none;
    line-height: 1;
    letter-spacing: -0.2px;
}

.badge-turno:hover {
    transform: scale(1.18);
    z-index: 5;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.turno-diurno {
    background: var(--turno-diurno-bg);
    color: var(--turno-diurno-texto);
    border-color: var(--turno-diurno-borde);
}

.turno-noche {
    background: var(--turno-noche-bg);
    color: var(--turno-noche-texto);
    border-color: var(--turno-noche-borde);
}

.turno-largo {
    background: var(--turno-largo-bg);
    color: var(--turno-largo-texto);
    border-color: var(--turno-largo-borde);
}

.turno-24h {
    background: var(--turno-24h-bg);
    color: var(--turno-24h-texto);
    border-color: var(--turno-24h-borde);
}

.turno-tarde {
    background: var(--tema-bg-fef3c7, #fef3c7);
    color: var(--tema-tx-92400e, #92400e);
    border-color: var(--tema-bd-fcd34d, #fcd34d);
}

.turno-madrugada {
    background: var(--tema-bg-f3e8ff, #f3e8ff);
    color: var(--tema-tx-6b21a8, #6b21a8);
    border-color: var(--tema-bd-d8b4fe, #d8b4fe);
}

.turno-manana {
    background: var(--tema-bg-e0f2fe, #e0f2fe);
    color: var(--tema-tx-0369a1, #0369a1);
    border-color: var(--tema-bd-7dd3fc, #7dd3fc);
}

.turno-desfasado-dia {
    background: var(--tema-bg-dbeafe, #dbeafe);
    color: var(--tema-tx-1e40af, #1e40af);
    border-color: var(--tema-bd-93c5fd, #93c5fd);
}

.turno-desfasado-noche {
    background: var(--tema-bg-e0e7ff, #e0e7ff);
    color: var(--tema-tx-3730a3, #3730a3);
    border-color: var(--tema-bd-a5b4fc, #a5b4fc);
}

.turno-libre {
    background: var(--turno-libre-bg);
    color: var(--turno-libre-texto);
    border-color: var(--turno-libre-borde);
}

.turno-licencia {
    background: var(--turno-licencia-bg);
    color: var(--turno-licencia-texto);
    border-color: var(--turno-licencia-borde);
}

/* =============================================================================
   DISTINTIVOS Y NOMENCLATURA DE COBERTURA EXTRAORDINARIA Y MANUAL (v1.11.2)
   ============================================================================= */
.badge-turno.turno-horas-extras {
    background: var(--tema-bg-f5f3ff, #f5f3ff) !important;
    color: var(--tema-tx-6d28d9, #6d28d9) !important;
    border: 2px solid var(--tema-bd-7c3aed, #7c3aed) !important;
    box-shadow: 0 0 5px rgba(124, 58, 237, 0.4);
    font-weight: 800;
}

.badge-turno.turno-reemplazo {
    background: var(--tema-bg-f0f9ff, #f0f9ff) !important;
    color: var(--tema-tx-0369a1, #0369a1) !important;
    border: 2px solid var(--tema-bd-0284c7, #0284c7) !important;
    box-shadow: 0 0 5px rgba(2, 132, 199, 0.35);
    font-weight: 800;
}

/* Funcionario del pool de reemplazo de su cargo (v2.35.0): mismo color que sus turnos /R. */
.chip-pool-reemplazo {
    display: inline-block;
    background: var(--tema-bg-f0f9ff, #f0f9ff);
    color: var(--tema-tx-0369a1, #0369a1);
    border: 1px solid var(--tema-bd-0284c7, #0284c7);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge-turno.turno-refuerzo {
    background: var(--tema-bg-f0fdf4, #f0fdf4) !important;
    color: var(--tema-tx-047857, #047857) !important;
    border: 2px solid var(--tema-bd-059669, #059669) !important;
    box-shadow: 0 0 5px rgba(5, 150, 105, 0.35);
    font-weight: 800;
}

.badge-turno.turno-modificado-manual {
    outline: 2px solid var(--tema-bd-ea580c, #ea580c) !important;
    outline-offset: 1px;
    position: relative;
}

.badge-turno.turno-modificado-manual::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 7px;
    height: 7px;
    background: var(--tema-bg-ea580c, #ea580c);
    border-radius: 50%;
    border: 1px solid var(--tema-bd-ffffff, #ffffff);
}

/* =============================================================================
   PESTAÑAS Y MANTENEDORES
   ============================================================================= */
.pestanas-mantenedor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--borde-color);
}

.pestana-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--borde-color);
    background: var(--tema-bg-ffffff, #ffffff);
    font-family: var(--fuente-titulos);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: all var(--transicion-rapida);
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.pestana-btn:hover {
    color: var(--primario-samu);
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-color: var(--tema-bd-cbd5e1, #cbd5e1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pestana-btn.activo {
    color: var(--tema-tx-ffffff, #ffffff);
    background: var(--tema-bg-1e3a8a, var(--primario-samu));
    border-color: var(--primario-samu);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.25);
}

.pestana-btn.activo i {
    color: var(--tema-tx-ffffff, #ffffff);
}

/* Pestañas de Estamentos en Malla */
.pestanas-estamentos-contenedor {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--borde-color);
}

.pestanas-estamentos-contenedor .pestana-btn {
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 6px 6px 0 0;
    font-size: 0.8125rem;
    background: transparent;
    box-shadow: none;
    color: var(--texto-secundario);
}

.pestanas-estamentos-contenedor .pestana-btn:hover {
    background: rgba(30, 58, 138, 0.04);
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.pestanas-estamentos-contenedor .pestana-btn.activo {
    background: var(--tema-bg-ffffff, #ffffff);
    color: var(--primario-samu);
    border-color: var(--borde-color) var(--borde-color) transparent var(--borde-color);
    border-bottom: 3px solid var(--primario-samu);
    box-shadow: none;
}

.pestanas-estamentos-contenedor .pestana-btn.activo i {
    color: var(--primario-samu);
}

/* Filas de Balance y Déficit en la Grilla */
#fila-balance-cobertura th,
#fila-balance-cobertura td {
    background: var(--tema-bg-f8fafc, #f8fafc) !important;
    border-top: 2px solid var(--tema-bd-cbd5e1, #cbd5e1) !important;
}

#fila-turnos-deficit th,
#fila-turnos-deficit td {
    background: var(--tema-bg-fffbeb, #fffbeb) !important;
    border-top: 1px solid var(--tema-bd-fde68a, #fde68a) !important;
}

.btn-asignar-deficit-dia {
    padding: 2px 5px;
    font-size: 0.65rem;
    background: var(--tema-bg-dc2626, #dc2626);
    color: var(--tema-tx-ffffff, #ffffff);
    border: none;
    border-radius: 4px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
    transition: all 0.15s ease-in-out;
}

.btn-asignar-deficit-dia:hover {
    background: var(--tema-bg-b91c1c, #b91c1c);
    transform: scale(1.06);
}

.pestana-contenido {
    display: none;
}
.pestana-contenido.activo {
    display: block;
}

/* =============================================================================
   CONSOLA DE DESPACHO CLARA
   ============================================================================= */
.barra-estado-global {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    box-shadow: var(--sombra-tarjeta);
}

.reloj-digital {
    font-family: var(--fuente-mono);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primario-samu);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    letter-spacing: -0.03em;
}

.metricas-resumen-red {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.tarjeta-metrica-rapida {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radio-md);
    border: 1px solid var(--borde-color);
}

.icono-metrica {
    width: 46px;
    height: 46px;
    border-radius: var(--radio-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.metrica-personal .icono-metrica {
    background: var(--acento-suave);
    color: var(--acento-samu);
}

.metrica-flota .icono-metrica {
    background: var(--color-exito-bg);
    color: var(--color-exito);
}

.valor-metrica {
    font-family: var(--fuente-titulos);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.etiqueta-metrica {
    font-size: 0.725rem;
    color: var(--texto-secundario);
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.2rem;
}

.grilla-bases-regional {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.5rem;
}

.tarjeta-base-samu {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
    transition: transform var(--transicion-normal), box-shadow var(--transicion-normal);
}

.tarjeta-base-samu:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-elevada);
}

.encabezado-base {
    background: var(--tema-bg-f8fafc, #f8fafc);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--borde-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.base-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primario-samu);
}

.seccion-dotacion-base, .seccion-flota-base {
    padding: 1.2rem;
    border-bottom: 1px solid var(--borde-sutil);
}
.seccion-flota-base:last-child {
    border-bottom: none;
}

.item-funcionario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
}

.card-movil {
    background: var(--tema-bg-f8fafc, #f8fafc);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    overflow: hidden;
}

.card-movil::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--tema-bg-059669, var(--color-exito));
}

.chip-estado-movil {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radio-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
}

.chip-operativo {
    background: var(--color-exito-bg);
    color: var(--color-exito);
    border: 1px solid var(--color-exito-borde);
}

/* =============================================================================
   MODAL Y TOASTS
   ============================================================================= */
.overlay-modal,
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicion-normal);
}

.overlay-modal.activo,
.overlay-modal.mostrar,
.modal-overlay.mostrar,
.modal-overlay.activo {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.caja-modal,
.modal-contenedor {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    width: 100%;
    max-width: 560px;
    box-shadow: var(--sombra-modal);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform var(--transicion-normal);
}

.overlay-modal.activo .caja-modal,
.overlay-modal.mostrar .caja-modal,
.modal-overlay.mostrar .modal-contenedor {
    transform: scale(1);
}

.caja-modal-lg {
    max-width: 840px;
}

.overlay-modal.activo .caja-modal {
    transform: scale(1);
}

.modal-encabezado {
    padding: 1.25rem 1.5rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-bottom: 1px solid var(--borde-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-cuerpo {
    padding: 1.5rem;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-pie {
    padding: 1rem 1.5rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-top: 1px solid var(--borde-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.caja-modal-sm {
    max-width: 440px;
}

.caja-modal-md {
    max-width: 600px;
}

/* Modal de Confirmacion Peligro / Advertencia */
.modal-confirmacion-contenido {
    text-align: center;
    padding: 1rem 0.5rem;
}

.modal-icono-peligro {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tema-bg-fef2f2, #fef2f2);
    border: 2px solid var(--tema-bd-fecaca, #fecaca);
    color: var(--tema-tx-dc2626, #dc2626);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
}

.modal-icono-advertencia {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tema-bg-fffbeb, #fffbeb);
    border: 2px solid var(--tema-bd-fde68a, #fde68a);
    color: var(--tema-tx-d97706, #d97706);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.btn-peligro {
    background: var(--tema-bg-dc2626, #dc2626);
    color: var(--tema-tx-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-b91c1c, #b91c1c);
}

.btn-peligro:hover {
    background: var(--tema-bg-b91c1c, #b91c1c);
    color: var(--tema-tx-ffffff, #ffffff);
}

.contenedor-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    /* Un toast avisa algo que paso: tiene que verse aunque haya un modal abierto encima. En 200
       quedaba detras de cualquier overlay del sistema (.modal-backdrop-samu usa 99999), asi que un
       aviso mientras un modal esta abierto se veia atenuado por el fondo oscuro del overlay, casi
       ilegible. Mismo criterio que .contenedor-toasts-samu (v2.17.1). */
    z-index: 1000000;
}

.toast {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    padding: 0.85rem 1.25rem;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-elevada);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* =============================================================================
   CHIPS Y BADGES DE TABLAS Y PRIORIDADES MEDICAS
   ============================================================================= */
.chip-estado-movil {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.chip-operativo {
    background: var(--tema-bg-dcfce7, #dcfce7) !important;
    color: var(--tema-tx-15803d, #15803d) !important;
    border: 1px solid var(--tema-bd-86efac, #86efac) !important;
}

.chip-fuera {
    background: var(--tema-bg-fee2e2, #fee2e2) !important;
    color: var(--tema-tx-b91c1c, #b91c1c) !important;
    border: 1px solid var(--tema-bd-fca5a5, #fca5a5) !important;
}

.chip-taller {
    background: var(--tema-bg-fef3c7, #fef3c7) !important;
    color: var(--tema-tx-b45309, #b45309) !important;
    border: 1px solid var(--tema-bd-fde68a, #fde68a) !important;
}

.chip-estamento {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--tema-bg-e0e7ff, #e0e7ff);
    color: var(--tema-tx-3730a3, #3730a3);
    border: 1px solid var(--tema-bd-c7d2fe, #c7d2fe);
}

/* Badges de Prioridad Medica Institucional SAMU */
.badge-prioridad {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.775rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.badge-prioridad-r1 {
    background: var(--tema-bg-fee2e2, #fee2e2) !important;
    color: var(--tema-tx-991b1b, #991b1b) !important;
    border: 1px solid var(--tema-bd-f87171, #f87171) !important;
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.1);
}

.badge-prioridad-r2 {
    background: var(--tema-bg-ffedd5, #ffedd5) !important;
    color: var(--tema-tx-9a3412, #9a3412) !important;
    border: 1px solid var(--tema-bd-fb923c, #fb923c) !important;
    box-shadow: 0 1px 2px rgba(234, 88, 12, 0.1);
}

.badge-prioridad-r3 {
    background: var(--tema-bg-dbeafe, #dbeafe) !important;
    color: var(--tema-tx-1e40af, #1e40af) !important;
    border: 1px solid var(--tema-bd-60a5fa, #60a5fa) !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
}

.badge-prioridad-r4 {
    background: var(--tema-bg-dcfce7, #dcfce7) !important;
    color: var(--tema-tx-166534, #166534) !important;
    border: 1px solid var(--tema-bd-4ade80, #4ade80) !important;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.1);
}

.badge-prioridad-normal {
    background: var(--tema-bg-f1f5f9, #f1f5f9) !important;
    color: var(--tema-tx-334155, #334155) !important;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1) !important;
}

/* =============================================================================
   ASISTENTE DE COORDINACION DE HORAS EXTRAS Y COBERTURA (v1.9.0)
   ============================================================================= */
.btn-tab-cobertura {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
    background: var(--tema-bg-f8fafc, #f8fafc);
    color: var(--tema-tx-475569, #475569);
    border-radius: var(--radio-md);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--trans-rapida);
}

.btn-tab-cobertura:hover {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--primario-samu);
    border-color: var(--tema-bd-94a3b8, #94a3b8);
}

.btn-tab-cobertura.activo {
    background: var(--tema-bg-eff6ff, #eff6ff);
    color: var(--tema-tx-1d4ed8, #1d4ed8);
    border-color: var(--tema-bd-3b82f6, #3b82f6);
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}

.tarjeta-opcion-cobertura {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-radius: var(--radio-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: all var(--trans-rapida);
}

.tarjeta-opcion-cobertura:hover {
    border-color: var(--tema-bd-93c5fd, #93c5fd);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    background: var(--tema-bg-fafcff, #fafcff);
}

.chip-he-mes {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--tema-tx-334155, #334155);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
}

.chip-he-mes.con-recargo {
    background: var(--tema-bg-fef3c7, #fef3c7);
    color: var(--tema-tx-92400e, #92400e);
    border-color: var(--tema-bd-fde68a, #fde68a);
}

.chip-he-semana-verde {
    background: var(--tema-bg-f0fdf4, #f0fdf4);
    color: var(--tema-tx-166534, #166534);
    border-color: var(--tema-bd-bbf7d0, #bbf7d0);
}

.chip-he-semana-amarillo {
    background: var(--tema-bg-fefce8, #fefce8);
    color: var(--tema-tx-854d0e, #854d0e);
    border-color: var(--tema-bd-fef08a, #fef08a);
}

.chip-he-semana-rojo {
    background: var(--tema-bg-fef2f2, #fef2f2);
    color: var(--tema-tx-991b1b, #991b1b);
    border-color: var(--tema-bd-fecaca, #fecaca);
    font-weight: 700;
}

/* ==========================================================================
   FILTROS EN CABECERA DE TABLAS MANTENEDORES (SAMU CHILE)
   ========================================================================== */

.fila-filtros-mantenedor {
    background-color: var(--tema-bg-f8fafc, #f8fafc);
    border-bottom: 2px solid var(--tema-bd-cbd5e1, #cbd5e1) !important;
}

.fila-filtros-mantenedor th {
    padding: 0.4rem 0.45rem !important;
    background-color: var(--tema-bg-f1f5f9, #f1f5f9) !important;
    vertical-align: middle;
    font-weight: normal;
}

.control-filtro-tabla {
    width: 100%;
    height: 32px;
    padding: 0.2rem 0.45rem;
    font-size: 0.775rem;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
    border-radius: 4px;
    background-color: var(--tema-bg-ffffff, #ffffff);
    color: var(--texto-principal);
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
    font-family: var(--fuente-principal);
}

.control-filtro-tabla:focus {
    outline: none;
    border-color: var(--primario-samu);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    background-color: var(--tema-bg-ffffff, #ffffff);
}

.control-filtro-tabla::placeholder {
    color: var(--tema-tx-94a3b8, #94a3b8);
    font-size: 0.75rem;
}

.badge-contador-filtros {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: var(--tema-bg-e2e8f0, #e2e8f0);
    color: var(--tema-tx-475569, #475569);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-size: 0.725rem;
    font-weight: 700;
    font-family: var(--fuente-mono);
    min-width: 45px;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
}

/* =============================================================================
   MÓDULO ESTADO DE FLOTA Y GESTIÓN DE AMBULANCIAS (v1.18.0)
   ============================================================================= */

/* Grilla de KPIs Estadísticos */
.grilla-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tarjeta-kpi {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--sombra-suave);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: all var(--transicion-normal);
}

.tarjeta-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-elevada);
    border-color: var(--tema-bd-cbd5e1, #cbd5e1);
}

.tarjeta-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tema-bg-1e3a8a, var(--primario-samu));
    opacity: 0.8;
}

.tarjeta-kpi.kpi-operativo::before { background: var(--tema-bg-059669, var(--color-exito)); }
.tarjeta-kpi.kpi-procedimiento::before { background: var(--tema-bg-0284c7, var(--color-info)); }
.tarjeta-kpi.kpi-peligro::before { background: var(--tema-bg-dc2626, var(--color-peligro)); }
.tarjeta-kpi.kpi-alerta::before { background: var(--tema-bg-d97706, var(--color-alerta)); }

.kpi-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.kpi-etiqueta {
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi-icono {
    width: 38px;
    height: 38px;
    border-radius: var(--radio-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.kpi-valor {
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    font-weight: 900;
    color: var(--texto-principal);
    line-height: 1.1;
    margin: 0.25rem 0;
}

.kpi-detalle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--texto-secundario);
    padding-top: 0.5rem;
    border-top: 1px dashed var(--tema-bd-f1f5f9, #f1f5f9);
}

/* Barra de Filtros y Búsqueda de Flota */
.barra-filtros-flota {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-lg);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    box-shadow: var(--sombra-suave);
}

.pildoras-estado-flota {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pildora-filtro {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radio-full);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--texto-secundario);
    border: 1px solid transparent;
    transition: all var(--transicion-rapida);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pildora-filtro:hover {
    background: var(--tema-bg-e2e8f0, #e2e8f0);
    color: var(--texto-principal);
}

.pildora-filtro.activa {
    background: var(--tema-bg-1e3a8a, var(--primario-samu));
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--primario-samu);
    box-shadow: 0 2px 4px rgba(30, 58, 138, 0.2);
}

.pildora-filtro.activa-operativo {
    background: var(--tema-bg-059669, var(--color-exito));
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--color-exito);
}

.pildora-filtro.activa-procedimiento {
    background: var(--tema-bg-2563eb, #2563eb);
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--tema-bd-2563eb, #2563eb);
}

.pildora-filtro.activa-peligro {
    background: var(--tema-bg-dc2626, var(--color-peligro));
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--color-peligro);
}

/* Tarjeta de Ambulancia Asistencial Avanzada */
.card-movil-flota {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color);
    border-radius: var(--radio-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    cursor: pointer;
    transition: all var(--transicion-rapida);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-movil-flota:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-elevada);
    border-color: var(--tema-bd-94a3b8, #94a3b8);
}

.card-movil-flota::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
    background: var(--tema-bg-059669, var(--color-exito));
}

.card-movil-flota.estado-operativo::before { background: var(--tema-bg-059669, var(--color-exito)); }
.card-movil-flota.estado-procedimiento::before { background: var(--tema-bg-2563eb, #2563eb); }
.card-movil-flota.estado-peligro::before { background: var(--tema-bg-dc2626, var(--color-peligro)); }
.card-movil-flota.estado-alerta::before { background: var(--tema-bg-d97706, var(--color-alerta)); }

.badge-tipo-movil {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-tipo-m1 { background: var(--tema-bg-e0f2fe, #e0f2fe); color: var(--tema-tx-0369a1, #0369a1); border: 1px solid var(--tema-bd-bae6fd, #bae6fd); }
.badge-tipo-m2 { background: var(--tema-bg-fef3c7, #fef3c7); color: var(--tema-tx-b45309, #b45309); border: 1px solid var(--tema-bd-fde68a, #fde68a); }
.badge-tipo-m3 { background: var(--tema-bg-fee2e2, #fee2e2); color: var(--tema-tx-b91c1c, #b91c1c); border: 1px solid var(--tema-bd-fca5a5, #fca5a5); }
.badge-tipo-vir { background: var(--tema-bg-f3e8ff, #f3e8ff); color: var(--tema-tx-7e22ce, #7e22ce); border: 1px solid var(--tema-bd-e9d5ff, #e9d5ff); }

/* Barra de Odómetro y Mantención */
.barra-odometro-contenedor {
    margin-top: 0.2rem;
}

.barra-odometro {
    width: 100%;
    height: 5px;
    background: var(--tema-bg-e2e8f0, #e2e8f0);
    border-radius: 9999px;
    overflow: hidden;
}

.barra-odometro-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Sidebar Alertas y Pestañas */
.tabs-alertas-flota {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--borde-color);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.alerta-tab-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.55rem;
    font-size: 0.725rem;
    font-weight: 700;
    color: var(--texto-secundario);
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transicion-rapida);
}

.alerta-tab-btn:hover {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--texto-principal);
}

.alerta-tab-btn.activo {
    background: var(--tema-bg-eff6ff, #eff6ff);
    color: var(--primario-samu);
}

/* =============================================================================
   MÓDULO DIMENSIONAMIENTO Y DIAGNÓSTICO DE DOTACIÓN 24/7 (v1.19.0)
   ============================================================================= */

/* Badges Diagnósticos de Dotación */
.badge-diagnostico {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radio-full);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    width: fit-content;
    white-space: nowrap;
}

.badge-diagnostico-deficit {
    background: var(--tema-bg-fee2e2, #fee2e2);
    color: var(--tema-tx-b91c1c, #b91c1c);
    border: 1px solid var(--tema-bd-fca5a5, #fca5a5);
}

.badge-diagnostico-optimo {
    background: var(--tema-bg-ecfdf5, #ecfdf5);
    color: var(--tema-tx-047857, #047857);
    border: 1px solid var(--tema-bd-a7f3d0, #a7f3d0);
}

/* Naranja / Ámbar Intenso para Superávit / Sobrecontratación */
.badge-diagnostico-superavit {
    background: var(--tema-bg-ffedd5, #ffedd5);
    color: var(--tema-tx-c2410c, #c2410c);
    border: 1px solid var(--tema-bd-fed7aa, #fed7aa);
}

/* Simulador de Cobertura */
.contenedor-simulador-dotacion {
    background: linear-gradient(135deg, var(--tema-bg-f8fafc, #f8fafc) 0%, var(--tema-bg-eff6ff, #eff6ff) 100%);
    border: 1px solid var(--tema-bd-bfdbfe, #bfdbfe);
    border-radius: var(--radio-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--sombra-suave);
}

.simulador-controles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
    margin-top: 0.85rem;
}

.simulador-resultado-box {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-93c5fd, #93c5fd);
    border-radius: var(--radio-md);
    padding: 0.85rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

/* Fila Desplegable de Nómina */
.fila-nomina-desplegable {
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-bottom: 2px solid var(--tema-bd-e2e8f0, #e2e8f0);
}

.tabla-nomina-interna {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.775rem;
    margin: 0.5rem 0;
    background: var(--tema-bg-ffffff, #ffffff);
    border-radius: var(--radio-sm);
    overflow: hidden;
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
}

.tabla-nomina-interna th {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    padding: 0.4rem 0.6rem;
    color: var(--texto-secundario);
    font-weight: 700;
    text-align: left;
}

.tabla-nomina-interna td {
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--tema-bd-f1f5f9, #f1f5f9);
    color: var(--texto-principal);
}

/* =============================================================================
   ANIMACIONES DE SPINNER Y PROGRESO SOLVER OR-TOOLS (v1.24.0)
   ============================================================================= */
@keyframes rotarSpinnerSamu {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotarSpinnerReverso {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes animarGradienteSamu {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.spinner-cargando {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--tema-bd-ffffff, #ffffff);
    border-radius: 50%;
    animation: rotarSpinnerSamu 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* =============================================================================
   DISTINTIVOS VISUALES DE AUSENCIAS Y NO DISPONIBILIDAD EN MALLA (v1.25.0)
   ============================================================================= */
.badge-ausencia {
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    border-radius: var(--radio-sm);
}

.badge-ausencia:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    z-index: 10;
}

/* Licencia Médica (Rojo/Granate Alerta) */
.badge-ausencia-lm {
    background: var(--tema-bg-fee2e2, #fee2e2) !important;
    color: var(--tema-tx-991b1b, #991b1b) !important;
    border: 1.5px solid var(--tema-bd-f87171, #f87171) !important;
}

/* Feriado Legal / Vacaciones (Teal / Turquesa Asistencial) */
.badge-ausencia-fer,
.badge-ausencia-vac {
    background: var(--tema-bg-ccfbf1, #ccfbf1) !important;
    color: var(--tema-tx-0f766e, #0f766e) !important;
    border: 1.5px solid var(--tema-bd-2dd4bf, #2dd4bf) !important;
}

/* Permiso Administrativo (Púrpura / Violeta Institucional) */
.badge-ausencia-pa {
    background: var(--tema-bg-f3e8ff, #f3e8ff) !important;
    color: var(--tema-tx-6b21a8, #6b21a8) !important;
    border: 1.5px solid var(--tema-bd-c084fc, #c084fc) !important;
}

/* Capacitación Oficial (Azul / Índigo) */
.badge-ausencia-cap {
    background: var(--tema-bg-dbeafe, #dbeafe) !important;
    color: var(--tema-tx-1e40af, #1e40af) !important;
    border: 1.5px solid var(--tema-bd-60a5fa, #60a5fa) !important;
}

/* Otras Ausencias Justificadas (Naranja / Ámbar) */
.badge-ausencia-aus {
    background: var(--tema-bg-ffedd5, #ffedd5) !important;
    color: var(--tema-tx-9a3412, #9a3412) !important;
    border: 1.5px solid var(--tema-bd-fb923c, #fb923c) !important;
}

/* Devolución / Recuperación de Horas Extras (Ámbar / Marrón Cálido) */
.badge-ausencia-dev {
    background: var(--tema-bg-fef3c7, #fef3c7) !important;
    color: var(--tema-tx-92400e, #92400e) !important;
    border: 1.5px solid var(--tema-bd-f59e0b, #f59e0b) !important;
}

/* =========================================================================
   SINCRONIZACIÓN REACTIVA MULTIRROL Y PRESENCIA EN TIEMPO REAL (v1.46.0)
   ========================================================================= */

/* Halo visual pulsante para campos actualizados por otros usuarios */
.campo-actualizado-externo {
    animation: pulseCambioExterno 2.5s ease-out forwards;
}

@keyframes pulseCambioExterno {
    0% {
        background-color: var(--tema-bg-dbeafe, #dbeafe) !important;
        border-color: var(--tema-bd-2563eb, #2563eb) !important;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25) !important;
    }
    60% {
        background-color: var(--tema-bg-eff6ff, #eff6ff) !important;
        border-color: var(--tema-bd-3b82f6, #3b82f6) !important;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
    }
    100% {
        background-color: inherit;
        border-color: inherit;
        box-shadow: none;
    }
}

/* Badge de Estado de Sincronización en Cabecera */
.badge-sincronizacion-131 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.725rem;
    font-weight: 700;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    cursor: default;
}

.badge-sincronizacion-131.sincronizado {
    background: var(--tema-bg-ecfdf5, #ecfdf5);
    color: var(--tema-tx-065f46, #065f46);
    border-color: var(--tema-bd-a7f3d0, #a7f3d0);
}

.badge-sincronizacion-131.sincronizado::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--tema-bg-10b981, #10b981);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

.badge-sincronizacion-131.actualizado {
    background: var(--tema-bg-eff6ff, #eff6ff);
    color: var(--tema-tx-1e40af, #1e40af);
    border-color: var(--tema-bd-bfdbfe, #bfdbfe);
}

.badge-sincronizacion-131.actualizado::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--tema-bg-2563eb, #2563eb);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
    flex-shrink: 0;
}

.badge-sincronizacion-131.reconectando {
    background: var(--tema-bg-fffbeb, #fffbeb);
    color: var(--tema-tx-92400e, #92400e);
    border-color: var(--tema-bd-fde68a, #fde68a);
}

.badge-sincronizacion-131.reconectando::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--tema-bg-f59e0b, #f59e0b);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Chips de Colaboradores Conectados en Cabecera */
.contenedor-colaboradores-presencia {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.colaboradores-vacio {
    font-size: 0.725rem;
    color: var(--tema-tx-64748b, #64748b);
    font-weight: 600;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    padding: 0.15rem 0.4rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-radius: 12px;
}

.colaboradores-vacio i {
    color: var(--tema-tx-0284c7, #0284c7);
    font-size: 0.75rem;
}

.chip-colaborador-presencia {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 14px;
    font-size: 0.725rem;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.chip-colaborador-presencia.en-primer-plano {
    background: var(--tema-bg-f0fdf4, #f0fdf4);
    color: var(--tema-tx-166534, #166534);
    border-color: var(--tema-bd-bbf7d0, #bbf7d0);
}

.chip-colaborador-presencia.en-primer-plano i {
    color: var(--tema-tx-22c55e, #22c55e);
    font-size: 0.55rem;
    animation: pulseDot 2s infinite;
}

.chip-colaborador-presencia.en-segundo-plano {
    background: var(--tema-bg-f8fafc, #f8fafc);
    color: var(--tema-tx-64748b, #64748b);
    border-color: var(--tema-bd-cbd5e1, #cbd5e1);
    opacity: 0.85;
}

.chip-colaborador-presencia.en-segundo-plano i {
    color: var(--tema-tx-94a3b8, #94a3b8);
    font-size: 0.7rem;
}

.chip-colaborador-presencia .nombre-chip {
    font-weight: 700;
}

.chip-colaborador-presencia .rol-chip {
    font-weight: 500;
    opacity: 0.8;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* Leyenda Inferior de Concurrencia en Campos Enfocados */
.leyenda-concurrencia-campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.75rem;
    background: var(--tema-bg-fffbeb, #fffbeb);
    border: 1px solid var(--tema-bd-fde68a, #fde68a);
    border-left: 4px solid var(--tema-bd-d97706, #d97706);
    border-radius: 6px;
    font-size: 0.775rem;
    color: var(--tema-tx-92400e, #92400e);
    animation: fadeInLeyenda 0.25s ease-out;
}

.leyenda-concurrencia-contenido {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    line-height: 1.3;
}

.leyenda-concurrencia-contenido i {
    color: var(--tema-tx-d97706, #d97706);
    font-size: 0.9rem;
}

.leyenda-concurrencia-acciones {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-leyenda-accion {
    border: none;
    border-radius: 4px;
    padding: 0.2rem 0.55rem;
    font-size: 0.725rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-leyenda-mantener {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--tema-tx-334155, #334155);
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
}

.btn-leyenda-mantener:hover {
    background: var(--tema-bg-e2e8f0, #e2e8f0);
}

.btn-leyenda-aplicar {
    background: var(--tema-bg-0284c7, #0284c7);
    color: var(--tema-tx-ffffff, #ffffff);
}

.btn-leyenda-aplicar:hover {
    background: var(--tema-bg-0369a1, #0369a1);
}

@keyframes fadeInLeyenda {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   MATRIZ DE PERMISOS POR SECCIONES FORMULARIO 131 (v1.47.0)
   ========================================================================= */

.panel-matriz-secciones-131 {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1rem;
}

.barra-presets-131 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.btn-preset-131 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.775rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-preset-operador {
    background: var(--tema-bg-eff6ff, #eff6ff);
    color: var(--tema-tx-1d4ed8, #1d4ed8);
    border-color: var(--tema-bd-bfdbfe, #bfdbfe);
}
.btn-preset-operador:hover {
    background: var(--tema-bg-dbeafe, #dbeafe);
}

.btn-preset-medico {
    background: var(--tema-bg-faf5ff, #faf5ff);
    color: var(--tema-tx-7e22ce, #7e22ce);
    border-color: var(--tema-bd-e9d5ff, #e9d5ff);
}
.btn-preset-medico:hover {
    background: var(--tema-bg-f3e8ff, #f3e8ff);
}

.btn-preset-despachador {
    background: var(--tema-bg-f0fdf4, #f0fdf4);
    color: var(--tema-tx-15803d, #15803d);
    border-color: var(--tema-bd-bbf7d0, #bbf7d0);
}
.btn-preset-despachador:hover {
    background: var(--tema-bg-dcfce7, #dcfce7);
}

.btn-preset-admin {
    background: var(--tema-bg-fef2f2, #fef2f2);
    color: var(--tema-tx-b91c1c, #b91c1c);
    border-color: var(--tema-bd-fecaca, #fecaca);
}
.btn-preset-admin:hover {
    background: var(--tema-bg-fee2e2, #fee2e2);
}

.btn-preset-readonly {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--tema-tx-475569, #475569);
    border-color: var(--tema-bd-cbd5e1, #cbd5e1);
}
.btn-preset-readonly:hover {
    background: var(--tema-bg-e2e8f0, #e2e8f0);
}

.grilla-secciones-131-permisos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}

@media (max-width: 900px) {
    .grilla-secciones-131-permisos {
        grid-template-columns: 1fr;
    }
}

.tarjeta-seccion-permiso {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-left: 4px solid var(--tema-bd-94a3b8, #94a3b8);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.tarjeta-seccion-permiso.estado-editable {
    border-left-color: var(--tema-bd-16a34a, #16a34a);
    background: var(--tema-bg-ffffff, #ffffff);
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.06);
}

.tarjeta-seccion-permiso.estado-solo-lectura {
    border-left-color: var(--tema-bd-0284c7, #0284c7);
    background: var(--tema-bg-fafbfc, #fafbfc);
}

.tarjeta-seccion-permiso.estado-oculto {
    border-left-color: var(--tema-bd-ef4444, #ef4444);
    background: var(--tema-bg-fef2f2, #fef2f2);
    opacity: 0.85;
}

.tarjeta-seccion-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.tarjeta-seccion-titulo {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--tema-tx-1e293b, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.tarjeta-seccion-desc {
    font-size: 0.75rem;
    color: var(--tema-tx-64748b, #64748b);
    margin-top: 0.2rem;
    line-height: 1.3;
}

.selector-tri-estado-permiso {
    display: flex;
    align-items: center;
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    width: 100%;
}

.btn-tri-opcion {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.35rem 0.4rem;
    border-radius: 5px;
    font-size: 0.725rem;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--tema-tx-64748b, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-tri-opcion:hover {
    color: var(--tema-tx-1e293b, #1e293b);
}

.btn-tri-opcion.activo-editable {
    background: var(--tema-bg-16a34a, #16a34a);
    color: var(--tema-tx-ffffff, #ffffff);
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3);
}

.btn-tri-opcion.activo-lectura {
    background: var(--tema-bg-0284c7, #0284c7);
    color: var(--tema-tx-ffffff, #ffffff);
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.3);
}

.btn-tri-opcion.activo-oculto {
    background: var(--tema-bg-dc2626, #dc2626);
    color: var(--tema-tx-ffffff, #ffffff);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.3);
}

/* ==========================================================================
   SUITE DE REPORTES OFICIALES MINSAL Y CONSOLIDADO 131
   ========================================================================== */

.categoria-minsal-hub {
    background: linear-gradient(135deg, var(--tema-bg-f8fafc, #f8fafc) 0%, var(--tema-bg-eff6ff, #eff6ff) 100%);
    border: 1px solid var(--tema-bd-bfdbfe, #bfdbfe) !important;
    border-radius: var(--radio-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.05);
}

.card-minsal-activa {
    border-left: 4px solid var(--tema-bd-1e3a8a, #1e3a8a) !important;
    transition: all 0.2s ease-in-out;
}

.card-minsal-activa:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.12);
    border-color: var(--tema-bd-1e3a8a, #1e3a8a) !important;
}

.contenedor-minsal-consolidado {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.minsal-header-tarjeta {
    background: linear-gradient(135deg, var(--tema-bg-1e3a8a, #1e3a8a) 0%, var(--tema-bg-0f172a, #0f172a) 100%);
    color: var(--tema-tx-ffffff, #ffffff);
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    flex-wrap: wrap;
    gap: 1rem;
}

.minsal-icono-bandera {
    background: var(--tema-bg-ffffff, #ffffff);
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.minsal-titulo-reporte {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--tema-tx-f8fafc, #f8fafc);
}

.minsal-subtitulo-reporte {
    font-size: 0.8125rem;
    color: var(--tema-tx-cbd5e1, #cbd5e1);
    margin-top: 0.2rem;
}

.btn-copiar-md-action {
    background: var(--tema-bg-38bdf8, #38bdf8);
    color: var(--tema-fijo-0f172a, #0f172a);
    font-weight: 700;
    font-size: 0.8125rem;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
}

.btn-copiar-md-action:hover {
    background: var(--tema-bg-7dd3fc, #7dd3fc);
    transform: scale(1.02);
}

.minsal-seccion-bloque {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.minsal-seccion-titulo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tema-tx-0f172a, #0f172a);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--tema-bd-f1f5f9, #f1f5f9);
    padding-bottom: 0.5rem;
}

.minsal-num-seccion {
    background: var(--tema-bg-1e3a8a, #1e3a8a);
    color: var(--tema-tx-ffffff, #ffffff);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
}

.minsal-subtitulo-tabla {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tema-tx-334155, #334155);
    margin-bottom: 0.4rem;
}

.badge-ambito-minsal {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-ambito-regional {
    background: var(--tema-bg-e0f2fe, #e0f2fe);
    color: var(--tema-tx-0369a1, #0369a1);
    border: 1px solid var(--tema-bd-bae6fd, #bae6fd);
}

.badge-ambito-samu {
    background: var(--tema-bg-fee2e2, #fee2e2);
    color: var(--tema-tx-b91c1c, #b91c1c);
    border: 1px solid var(--tema-bd-fecaca, #fecaca);
}

.badge-ambito-aps {
    background: var(--tema-bg-fef3c7, #fef3c7);
    color: var(--tema-tx-92400e, #92400e);
    border: 1px solid var(--tema-bd-fde68a, #fde68a);
}

.tabla-minsal-oficial {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.tabla-minsal-oficial thead th {
    background: var(--tema-bg-f8fafc, #f8fafc);
    color: var(--tema-tx-475569, #475569);
    font-weight: 700;
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.tabla-minsal-oficial tbody td {
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    padding: 0.55rem 0.75rem;
    color: var(--tema-tx-1e293b, #1e293b);
}

.tabla-minsal-oficial tbody tr:hover {
    background: var(--tema-bg-f8fafc, #f8fafc);
}

.fila-minsal-destacada {
    background: var(--tema-bg-eff6ff, #eff6ff) !important;
}

.fila-minsal-subtotal {
    background: var(--tema-bg-f8fafc, #f8fafc);
}

.fila-minsal-vacias td {
    background: var(--tema-bg-fafafa, #fafafa);
}

.tabla-matriz-admin-minsal th,
.tabla-matriz-admin-minsal td {
    padding: 0.5rem 0.65rem;
    font-size: 0.775rem;
}

.tabla-matriz-admin-minsal thead th:first-child,
.tabla-matriz-admin-minsal tbody td:first-child {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

.minsal-markdown-pre {
    background: var(--tema-bg-090d16, #090d16);
    color: var(--tema-tx-38bdf8, #38bdf8);
    padding: 1rem;
    border-radius: 8px;
    font-family: var(--fuente-mono, monospace);
    font-size: 0.8rem;
    line-height: 1.4;
    overflow-x: auto;
    max-height: 380px;
    white-space: pre;
    border: 1px solid var(--tema-bd-1e293b, #1e293b);
}

.badge-sp-minsal {
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    color: var(--tema-tx-94a3b8, #94a3b8);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
}

/* =============================================================================
   MODAL MI CUENTA Y SEGURIDAD (v1.56.0)
   ============================================================================= */
.btn-config-usuario {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
    color: var(--tema-tx-334155, #334155);
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all var(--transicion-rapida);
    font-family: inherit;
}

.btn-config-usuario:hover {
    background: var(--tema-bg-eff6ff, #eff6ff);
    border-color: var(--tema-bd-3b82f6, #3b82f6);
    color: var(--tema-tx-1d4ed8, #1d4ed8);
}

.btn-config-usuario:hover i {
    transform: rotate(45deg);
}

.btn-config-usuario i {
    color: var(--tema-tx-2563eb, #2563eb);
    font-size: 0.95rem;
    transition: transform 0.25s ease;
}

.modal-backdrop-samu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.2s ease;
}

.modal-dialog-cuenta {
    background: var(--tema-bg-ffffff, #ffffff);
    width: 100%;
    max-width: 640px;
    border-radius: 16px;
    box-shadow: var(--sombra-modal);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-cabecera-cuenta {
    background: var(--tema-bg-f8fafc, #f8fafc);
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-tabs-cuenta {
    display: flex;
    background: var(--tema-bg-f1f5f9, #f1f5f9);
    padding: 0.35rem;
    gap: 0.25rem;
    border-bottom: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    overflow-x: auto;
}

.tab-btn-cuenta {
    flex: 1;
    min-width: 120px;
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tema-tx-64748b, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.tab-btn-cuenta:hover {
    color: var(--tema-tx-1e293b, #1e293b);
    background: var(--tema-bg-rgba-255-255-255-060, rgba(255, 255, 255, 0.6));
}

.tab-btn-cuenta.activo {
    background: var(--tema-bg-ffffff, #ffffff);
    color: var(--tema-tx-1d4ed8, #1d4ed8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.modal-cuerpo-cuenta {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.box-info-readonly {
    background: var(--tema-bg-f8fafc, #f8fafc);
    border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* =============================================================================
   ESTILOS TELEMETRÍA GPS SATELITAL FLOTA SAMU (v1.58.0)
   ============================================================================= */

.btn-gps-general {
    background: linear-gradient(135deg, var(--tema-bg-0284c7, #0284c7) 0%, var(--tema-bg-0369a1, #0369a1) 100%);
    color: var(--tema-tx-ffffff, #ffffff) !important;
    border: 1px solid var(--tema-bd-0284c7, #0284c7);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--radio-md);
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    transition: all var(--transicion-rapida);
    text-decoration: none;
}

.btn-gps-general:hover {
    background: linear-gradient(135deg, var(--tema-bg-0369a1, #0369a1) 0%, var(--tema-bg-075985, #075985) 100%);
    box-shadow: 0 4px 8px rgba(2, 132, 199, 0.35);
    transform: translateY(-1px);
}

.btn-gps-movil-card {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--tema-bg-eff6ff, #eff6ff);
    color: var(--tema-tx-0284c7, #0284c7);
    border: 1px solid var(--tema-bd-bae6fd, #bae6fd);
    padding: 0.125rem 0.45rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    text-decoration: none;
    transition: all var(--transicion-rapida);
}

.btn-gps-movil-card:hover {
    background: var(--tema-bg-0284c7, #0284c7);
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--tema-bd-0284c7, #0284c7);
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
    transform: scale(1.04);
}

.btn-gps-modal {
    background: linear-gradient(135deg, var(--tema-bg-0284c7, #0284c7) 0%, var(--tema-bg-0369a1, #0369a1) 100%);
    color: var(--tema-tx-ffffff, #ffffff) !important;
    border: none;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radio-md);
    box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25);
    transition: all var(--transicion-rapida);
}

.btn-gps-modal:hover {
    background: linear-gradient(135deg, var(--tema-bg-0369a1, #0369a1) 0%, var(--tema-bg-075985, #075985) 100%);
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35);
    transform: translateY(-1px);
}

.badge-gps-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--tema-bg-f0f9ff, #f0f9ff);
    color: var(--tema-tx-0284c7, #0284c7);
    border: 1px solid var(--tema-bd-bae6fd, #bae6fd);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.725rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transicion-rapida);
}

.badge-gps-link:hover {
    background: var(--tema-bg-0284c7, #0284c7);
    color: var(--tema-tx-ffffff, #ffffff);
    border-color: var(--tema-bd-0284c7, #0284c7);
}

/* ==========================================================================
   SISTEMA DE MODALES ESTANDARIZADO (SAMU CHILE)
   ========================================================================== */

.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1050 !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

.modal-contenido {
    background: var(--tema-bg-ffffff, #ffffff);
    border: 1px solid var(--borde-color, var(--tema-bd-e2e8f0, #e2e8f0));
    border-radius: 14px;
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalEntradaSuave 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalEntradaSuave {
    from {
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.modal-cabecera h3,
.modal-cabecera h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.3;
}

.modal-boton-cerrar {
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.8;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    padding: 0;
    margin-left: 1rem;
}

.modal-boton-cerrar:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}

.modal-cuerpo {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 120px);
    -webkit-overflow-scrolling: touch;
}

.modal-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-top: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    flex-shrink: 0;
}


/* =============================================================================
   CAPA DE CARGA Y FILAS DE ESQUELETO PARA TABLAS DE HISTORIAL (v1.86.0)
   ============================================================================= */

/* Contenedor de referencia para la capa de carga: se aplica sobre la tarjeta que
   envuelve la tabla, nunca sobre el .tabla-responsiva, para que la capa no se
   desplace con el scroll horizontal. */
.contenedor-con-carga {
    position: relative;
}

/* Reserva altura mientras se consulta, para que la capa no se centre sobre una
   tabla ya vaciada y el bloque no salte de tamano al llegar los registros. */
.contenedor-con-carga.cargando {
    min-height: 280px;
}

.capa-cargando {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    background: var(--tema-bg-rgba-248-250-252-086, rgba(248, 250, 252, 0.86));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 20;
}

.capa-cargando.visible {
    display: flex;
}

.capa-cargando-anillo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid var(--tema-bd-dbeafe, #dbeafe);
    border-top-color: var(--tema-bd-0284c7, #0284c7);
    animation: rotarSpinnerSamu 0.75s linear infinite;
}

.capa-cargando-titulo {
    font-size: 0.825rem;
    font-weight: 800;
    color: var(--tema-tx-0f172a, #0f172a);
    letter-spacing: 0.01em;
}

.capa-cargando-detalle {
    font-size: 0.75rem;
    color: var(--tema-tx-64748b, #64748b);
    font-weight: 600;
}

/* Filas de esqueleto: sostienen la altura de la tabla mientras llega la consulta,
   para que la capa de carga no se centre sobre un contenedor colapsado. */
.celda-esqueleto {
    padding: 0.85rem 0.75rem !important;
}

.celda-esqueleto span {
    display: block;
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--tema-bg-eef2f7, #eef2f7) 25%, var(--tema-bg-dfe6ee, #dfe6ee) 37%, var(--tema-bg-eef2f7, #eef2f7) 63%);
    background-size: 400% 100%;
    animation: animarGradienteSamu 1.4s ease infinite;
}

/* Aviso de acotacion del rango de fechas del historial */
.aviso-rango-fechas {
    display: none;
    width: 100%;
    align-items: center;
    gap: 0.45rem;
    background: var(--tema-bg-fffbeb, #fffbeb);
    border: 1px solid var(--tema-bd-fde68a, #fde68a);
    color: var(--tema-tx-92400e, #92400e);
    border-radius: var(--radio-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.775rem;
    font-weight: 600;
}

.aviso-rango-fechas.visible {
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .capa-cargando-anillo,
    .celda-esqueleto span {
        animation: none;
    }
}

/* =============================================================================
   PIE DE PAGINACION Y DISTINTIVO DE ALCANCE DEL HISTORIAL (v1.87.0)
   ============================================================================= */
.pie-paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--tema-bg-f8fafc, #f8fafc);
    border-top: 1px solid var(--tema-bd-e2e8f0, #e2e8f0);
    font-size: 0.8rem;
    color: var(--tema-tx-475569, #475569);
}

.pie-paginacion-resumen b {
    color: var(--tema-tx-0f172a, #0f172a);
    font-weight: 800;
}

.pie-paginacion-controles {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pie-paginacion-controles select {
    height: 30px;
    padding: 0 0.4rem;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
    border-radius: var(--radio-sm);
    background: var(--tema-bg-ffffff, #ffffff);
    color: var(--tema-tx-0f172a, #0f172a);
    font-size: 0.775rem;
    font-weight: 600;
}

.btn-paginacion {
    min-width: 32px;
    height: 30px;
    padding: 0 0.5rem;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
    border-radius: var(--radio-sm);
    background: var(--tema-bg-ffffff, #ffffff);
    color: var(--tema-tx-334155, #334155);
    font-size: 0.775rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-paginacion:hover:not(:disabled) {
    background: var(--tema-bg-eff6ff, #eff6ff);
    border-color: var(--tema-bd-93c5fd, #93c5fd);
    color: var(--tema-tx-1d4ed8, #1d4ed8);
}

.btn-paginacion:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pie-paginacion-posicion {
    padding: 0 0.5rem;
    font-weight: 700;
    color: var(--tema-tx-0f172a, #0f172a);
    white-space: nowrap;
}

/* Distintivo del alcance: deja explicito si se ve una base o el sistema completo */
.distintivo-alcance {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.725rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.distintivo-alcance-global {
    background: var(--tema-bg-eef2ff, #eef2ff);
    color: var(--tema-tx-4338ca, #4338ca);
    border-color: var(--tema-bd-c7d2fe, #c7d2fe);
}

.distintivo-alcance-base {
    background: var(--tema-bg-ecfdf5, #ecfdf5);
    color: var(--tema-tx-15803d, #15803d);
    border-color: var(--tema-bd-a7f3d0, #a7f3d0);
}

/* «QTR n» con el nombre completo al pasar el cursor, al enfocar o al tocar (v2.82.0). El texto lo trae el mantenedor. */
.qtr-corto {
    position: relative;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.qtr-corto[data-nombre]:hover::after,
.qtr-corto[data-nombre]:focus::after {
    content: attr(data-nombre);
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 50;
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: var(--tema-bg-0f172a, #0f172a);
    color: var(--tema-tx-ffffff, #ffffff);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.qtr-corto:focus-visible {
    outline: 2px solid var(--tema-bd-2563eb, #2563eb);
    outline-offset: 2px;
}

/* =============================================================================
   Mantenedores dinamicos de formularios (131, 131 movil y 131 secundario): las secciones van en una columna a la izquierda
   y los campos a la derecha. Antes eran pestañas en una fila con desplazamiento horizontal, que dejaba secciones fuera de
   la pantalla y obligaba a arrastrar. En pantallas angostas la columna pasa a una rejilla que se pliega sobre los campos.
   ============================================================================= */
.layout-secciones-mantenedor {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.layout-secciones-mantenedor > .tabs-secciones {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: auto;
    gap: 0.35rem;
    margin-bottom: 0;
    padding: 0.6rem;
    border: 1px solid var(--tema-bd-cbd5e1, #cbd5e1);
    border-radius: var(--radio-lg);
    background: var(--tema-bg-ffffff, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
}
.layout-secciones-mantenedor > .tabs-secciones::before {
    content: 'Secciones';
    padding: 0.25rem 0.5rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tema-tx-64748b, #64748b);
}
.layout-secciones-mantenedor > .tabs-secciones .btn-tab-seccion {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    white-space: normal;
    line-height: 1.3;
}
.layout-secciones-mantenedor > .tabs-secciones .btn-tab-seccion i {
    margin-top: 0.1rem;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .layout-secciones-mantenedor { grid-template-columns: minmax(0, 1fr); }
    .layout-secciones-mantenedor > .tabs-secciones {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .layout-secciones-mantenedor > .tabs-secciones::before { flex-basis: 100%; }
    .layout-secciones-mantenedor > .tabs-secciones .btn-tab-seccion { width: auto; }
}

/* =============================================================================
   Esqueletos de carga (v2.88.18). Reservan el espacio del contenido mientras llega la consulta, con el mismo brillo que las
   filas de esqueleto del historial. Respetan prefers-reduced-motion. El contenedor lleva aria-busy mientras carga.
   ============================================================================= */
.esqueleto {
    display: block;
    min-height: 1rem;
    border-radius: var(--radio-sm);
    background: linear-gradient(90deg, var(--tema-bg-eef2f7, #eef2f7) 25%, var(--tema-bg-dfe6ee, #dfe6ee) 37%, var(--tema-bg-eef2f7, #eef2f7) 63%);
    background-size: 400% 100%;
    animation: animarGradienteSamu 1.4s ease infinite;
}
.esqueleto-tarjeta { height: 132px; border-radius: var(--radio-lg); }
.esqueleto-fila { height: 64px; border-radius: var(--radio-lg); }
.esqueleto-tab { height: 44px; width: 100%; }
.rejilla-esqueleto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.lista-esqueleto { display: flex; flex-direction: column; gap: 1rem; }
/* Tarjetas de KPI del dashboard: antes de la primera respuesta no se muestra un 0 falso, sino la barra de carga. */
[data-cargando="true"] .kpi-valor-mando,
[data-cargando="true"] .kpi-desglose-mando strong {
    display: block;
    width: 55%;
    max-width: 8rem;
    min-height: 1.1em;
    color: transparent !important;
    user-select: none;
    border-radius: var(--radio-sm);
    background: linear-gradient(90deg, var(--tema-bg-eef2f7, #eef2f7) 25%, var(--tema-bg-dfe6ee, #dfe6ee) 37%, var(--tema-bg-eef2f7, #eef2f7) 63%);
    background-size: 400% 100%;
    animation: animarGradienteSamu 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
    .esqueleto,
    [data-cargando="true"] .kpi-valor-mando,
    [data-cargando="true"] .kpi-desglose-mando strong { animation: none; }
}

/* =============================================================================
   Dashboard v2, fase A: bloques de alertas y embudos. Solo tokens; las barras llevan el número escrito al lado.
   ============================================================================= */
.bloque-dashboard { margin-bottom: 1.5rem; }
.grilla-embudos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2.25rem; }
.grilla-embudos > .bloque-dashboard { margin-bottom: 0; }
.bloque-error, .bloque-vacio { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.85rem; color: var(--tema-tx-475569, #475569); }
.bloque-error i { color: var(--tema-tx-dc2626, #dc2626); }
.bloque-vacio i { color: var(--tema-tx-10b981, #10b981); }
.bloque-error .btn { min-height: 44px; }
.lista-alertas-bloque, .embudo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
/* Las alertas son tarjetas de ancho fijo en rejilla: con pocas alertas no se estiran a todo el ancho de la pantalla. */
.lista-alertas-bloque { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 420px)); gap: 0.75rem; }
.lista-alertas-bloque .tarjeta-alerta-item { align-items: center; }
.alerta-texto { flex: 1; min-width: 0; font-size: 0.8125rem; }
.alerta-severidad { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.alerta-cantidad { font-size: 1.35rem; font-weight: 800; flex-shrink: 0; }
.alerta-enlace {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.85rem;
    border-radius: 8px; font-size: 0.8125rem; font-weight: 800; text-decoration: underline; color: inherit; flex-shrink: 0;
    border: 1px solid currentColor;
}
.embudo-fila { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 3rem; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--tema-tx-1e293b, #1e293b); }
.embudo-fila-simple { grid-template-columns: 1fr 3rem; }
.embudo-pista { height: 0.9rem; border-radius: 9999px; background: var(--tema-bg-f1f5f9, #f1f5f9); overflow: hidden; }
.embudo-relleno { display: block; height: 100%; min-width: 2px; border-radius: 9999px; background: var(--tema-bg-3b82f6, #3b82f6); transition: width 0.4s ease; }
.embudo-numero { text-align: right; font-family: var(--fuente-titulos); font-size: 1rem; }
.embudo-subtitulo { margin: 1.1rem 0 0.5rem; font-size: 0.8125rem; font-weight: 800; color: var(--tema-tx-475569, #475569); }
.embudo-subtitulo span { font-weight: 600; color: var(--tema-tx-64748b, #64748b); }
.tiempos-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tiempo-chip { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.7rem; border-radius: 8px; font-size: 0.75rem; background: var(--tema-bg-f8fafc, #f8fafc); border: 1px solid var(--tema-bd-e2e8f0, #e2e8f0); color: var(--tema-tx-475569, #475569); }
.tiempo-chip strong { font-size: 0.875rem; color: var(--tema-tx-0f172a, #0f172a); }
.por-hora { display: flex; align-items: flex-end; gap: 2px; height: 3.5rem; }
.por-hora-barra { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--tema-bg-3b82f6, #3b82f6); }
@media (prefers-reduced-motion: reduce) {
    .embudo-relleno { transition: none; }
}
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Enlace de salto del menú global: fuera de pantalla hasta recibir el foco con Tab. */
.saltar-al-contenido {
    position: absolute; left: 1rem; top: -4rem; z-index: 10000; box-sizing: border-box; min-height: 44px;
    display: inline-flex; align-items: center; padding: 0 1.1rem; border-radius: 0 0 8px 8px;
    background: var(--tema-bg-1e3a8a, #1e3a8a); color: var(--tema-tx-ffffff, #ffffff); font-weight: 700; text-decoration: none;
    transition: top 0.15s;
}
.saltar-al-contenido:focus { top: 0; outline: 3px solid var(--tema-bd-f59e0b, #f59e0b); outline-offset: 2px; }
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .saltar-al-contenido { transition: none; } }