/* =====================================================================
   Defensur · Sistema de diseño
   Dashboard de seguridad denso, modo claro, chrome oscuro tipo Linear.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* ============================================================
       Paleta dark navy estilo Supabase / Linear / Vercel.
       Toda la app vive en superficies oscuras con texto claro.
       ============================================================ */

    /* ============================================================
       Tema CLARO estilo Datadog: lienzo gris plomo claro, paneles
       blancos, texto slate oscuro. El chrome del sidebar se mantiene
       OSCURO (azul marino) con su propia familia de tokens --d-*-dark.
       ============================================================ */

    /* Superficies de CONTENIDO — claras */
    --d-bg-app:        #f3f5f8;   /* lienzo principal (gris plomo claro) */
    --d-bg-panel:      #ffffff;   /* panels / cards — blancos sobre el lienzo */
    --d-bg-panel-muted:#eef1f5;   /* hover / muted / cabeceras de tabla */

    /* Superficies del SIDEBAR — azul oscuro */
    --d-bg-dark:       #0f2447;   /* azul marino base (lo usan otros componentes) */
    --d-sidebar-bg:    #041633;   /* fondo del menu lateral */
    --d-bg-dark-2:     #12294f;   /* hover suave dentro del sidebar */
    --d-bg-dark-3:     #17325e;   /* item activo / workspace */
    --d-border-dark:   rgba(255,255,255,0.09);
    --d-border-dark-2: rgba(255,255,255,0.16);

    /* Texto — sobre superficies claras: slate oscuro */
    --d-text:          #1f2733;
    --d-text-muted:    #5b6a7a;
    --d-text-faint:    #8996a5;
    /* Texto tenue DENTRO del sidebar oscuro (debe ser claro) */
    --d-text-dark-faint:#7089ad;
    --d-text-on-dark:  #ffffff;
    --d-text-on-dark-muted:#a9bcd8;

    /* Bordes — sutiles sobre claro */
    --d-border:        rgba(15,23,42,0.12);
    --d-border-soft:   rgba(15,23,42,0.07);

    /* Acentos — blue corporate navy con un toque más vivo para active */
    --d-accent:        #3b82f6;     /* blue-500 */
    --d-accent-dark:   #2563eb;     /* blue-600 */
    --d-accent-soft:   rgba(59,130,246,0.16);

    /* Estados (tonos saturados pero adecuados al fondo dark) */
    --d-ok:            #10b981;   /* emerald-500 */
    --d-warn:          #f59e0b;   /* amber-500 */
    --d-danger:        #ef4444;   /* red-500 */

    /* Badges criticidad (bg semitransparentes para dark) */
    --d-bg-danger:     rgba(239,68,68,0.14);
    --d-bg-warn:       rgba(245,158,11,0.14);
    --d-bg-ok:         rgba(16,185,129,0.14);

    /* Tipografía — stack estilo Supabase / Linear: Inter para UI,
       JetBrains Mono / SFMono para código. */
    /* Google Sans en TODO el panel (24-10-2026, a pedido del usuario: las
       pantallas «estilo Google» y el resto con la misma letra). Antes era
       Space Grotesk (3-10-2026). Autohospedada como las demás, ver
       wwwroot/vendor/fuentes/fuentes.css. Inter queda de respaldo: si el
       woff2 no cargara, aparece una tipografia del sistema y no una al azar.
       La escala de abajo se subio un punto por la altura de x de Space
       Grotesk (0,49); Google Sans tiene mas, asi que el texto se ve algo mas
       grande que antes y no mas chico. */
    --d-font-sans: 'Google Sans', 'Inter', ui-sans-serif, system-ui, -apple-system,
                   BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --d-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
                   'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* Tipografia de MARCA. Space Grotesk es una display face derivada de
       Space Mono: va en titulares y superficies de marca, NUNCA en la
       grilla. Medido: su altura de x es 0,49 contra 0,55 de Inter, o sea un
       11% menos, asi que a 12,5px (--d-fs-celda) habria que subirla a 14 y
       eso ensancha la tabla de /Novedades un 12,3% — de 1206px minimos a
       ~1354, que es empezar a scrollear en un portatil de 1280. */
    /* Se conserva aunque ahora apunte a lo mismo: marca el sitio donde la
       tipografia es una decision de marca y no de interfaz. Si algun dia se
       vuelve a separar, lo que hay que tocar es esto y no doce pantallas. */
    --d-font-display: var(--d-font-sans);

    /* Escala tipografica de la grilla.
   Subida un punto al pasar todo el panel a Space Grotesk (3-10-2026). Su
   altura de x es 0,49 contra 0,55 de Inter —MEDIDO, con una familia inventada
   de control—, asi que a igual tamano el texto se lee un 11% mas chico.
   Igualarla del todo pedia 14px y eso ensancha la tabla de /Novedades un 9%,
   de 1206 a 1315: por encima de 1280, o sea scroll horizontal en un portatil.
   Un punto cuesta 3,2% —1206 a 1245, que sigue cabiendo— y recupera un tercio
   de la diferencia. Historia: 12,5/10,5/12,5/10,5/10/11,5/10,5 -> esto.
   Sale de `/Central/Eventos`, que es
       donde se afino, y vive aqui porque el mismo rol se estaba escribiendo
       a mano en cada pantalla con cinco numeros distintos: la linea
       secundaria de una celda era 10.5 en Eventos, 11 en Sos, 11.5 en
       PuntosControl y 12 en Tareas. Nadie lo lee como una escala; se lee
       como que cada pantalla la hizo otra persona.

       Los cuatro roles de una celda son: el nombre de la fila, la linea
       secundaria de debajo, el chip neutro y la pildora de estado. Si hace
       falta un tamano nuevo, se agrega aqui — no en el <style> de una
       pantalla, que es como se llego a esto. */
    --d-fs-celda: 13px;   /* el texto de una celda */
    --d-fs-cab: 11px;   /* la cabecera de columna */
    --d-fs-titulo: 13px;   /* el nombre de la fila */
    --d-fs-sub: 11px;   /* la linea secundaria, bajo el nombre */
    --d-fs-chip: 10.5px;     /* chip neutro y pildora de estado */
    --d-fs-vacio: 12px;   /* el aviso de que la lista esta vacia */
    --d-fs-folio: 11px;   /* el folio: EVNT-2026-000022 */

    /* Layout */
    --d-sidebar-w: 232px;
    --d-topbar-h:  48px;
    --d-footer-h:  34px;

    /* Radios y sombras (Supabase usa radios chicos y sombras sutiles) */
    --d-radius:     8px;
    --d-radius-sm:  6px;
    --d-radius-lg:  12px;
    --d-shadow-panel: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.10);
}

/* ---------- Reset + base estilo Supabase ---------- */
html, body {
    background-color: var(--d-bg-app);
    color: var(--d-text);
    font-family: var(--d-font-sans);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Supabase emplea features 'ss01' (alt 1) y 'cv11' para los dígitos.
       Activar tabular-nums hace que las tablas con números queden alineadas. */
    font-feature-settings: 'cv11' 1, 'ss01' 1;
}

body { margin: 0; }

a { color: #60a5fa; text-decoration: none; transition: color .12s ease; }
a:hover { color: #93c5fd; text-decoration: none; }   /* sin subrayado al pasar el puntero, en todo el panel (24-10-2026, a pedido) */

code, kbd, pre, .d-mono {
    font-family: var(--d-font-mono);
    font-feature-settings: 'tnum' 1, 'cv11' 1;
    font-variant-ligatures: none;
}

/* Scrollbar fina (estilo Supabase) */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: content-box; }

/* Selección de texto */

::selection { background: rgba(59,130,246,0.30); color: #ffffff; }

/* ---------- Shell: sidebar + topbar + contenido ---------- */
.d-app {
    display: grid;
    grid-template-columns: var(--d-sidebar-w) 1fr;
    min-height: 100vh;
}

.d-sidebar {
    background: var(--d-sidebar-bg);
    color: var(--d-text-on-dark);
    border-right: 1px solid var(--d-border-dark);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;          /* full-height del viewport, como antes */
    width: var(--d-sidebar-w);
    /* Sobre los controles flotantes de los mapas (Leaflet 1000, chips de 640):
       si no, tapan el panel de notificaciones. Bajo los modales (1050+), toasts y banners de SOS. */
    z-index: 1040;
}

.d-main {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;          /* asegura que el footer llegue al borde inferior en páginas cortas */
}
/* Nota: .d-content tiene su propio flex: 1 más abajo (línea ~625).
   El footer se ancla al fondo con margin-top: auto. */

/* ============================================== */
/*  Footer global de la aplicación                 */
/* ============================================== */
.d-footer {
    /* Fixed al fondo del viewport, pero solo ocupa la columna principal:
       inicia donde termina el sidebar (var(--d-sidebar-w) desde el borde
       izquierdo) y se extiende hasta el borde derecho del viewport. */
    position: fixed !important;
    left: var(--d-sidebar-w) !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: var(--d-footer-h, 34px);
    background: var(--d-bg-panel);
    border-top: 1px solid var(--d-border);
    padding: 0 22px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--d-text-muted);
    z-index: 90;        /* debajo del sidebar (100) — el sidebar queda visible hasta el fondo */
    margin: 0 !important;
}

/* En vistas móviles / con sidebar oculto (≤1100px) el footer va full-width */
@media (max-width: 1100px) {
    .d-footer {
        left: 0 !important;
    }
}
.d-footer__col {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.d-footer__col--right { flex-shrink: 0; }
.d-footer__col--left  { overflow: hidden; min-width: 0; }
.d-footer__col--left > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-footer__brand {
    font-weight: 600;
    color: var(--d-text);
}
.d-footer__tag {
    font-family: var(--d-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--d-text-faint);
}
.d-footer__sep {
    color: var(--d-text-faint);
    user-select: none;
}
.d-footer__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--d-ok, #16a34a);
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--d-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
}
.d-footer__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--d-ok, #16a34a);
    box-shadow: 0 0 5px var(--d-ok, #16a34a);
    animation: d-footer-pulse 2s ease-in-out infinite;
}
@keyframes d-footer-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}
.d-footer__version {
    font-family: var(--d-font-mono);
    color: var(--d-text-faint);
    font-size: 10px;
    letter-spacing: .04em;
}

@media (max-width: 768px) {
    .d-footer { padding: 8px 14px; }
    .d-footer__tag { display: none; }
}
@media (max-width: 480px) {
    .d-footer {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .d-footer__col--right { width: 100%; justify-content: flex-start; }
}

/* ----- Sidebar: logo ----- */
.d-sidebar__logo {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-border-dark);
    display: flex;
    align-items: center;
}
.d-sidebar__logo img {
    height: 28px;
    width: auto;
    /* logo a blanco */
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* ----- Sidebar: cuenta de usuario (workspace dropdown) ----- */
.d-workspace {
    margin: 12px;
    background: var(--d-bg-dark-3);
    border-radius: var(--d-radius);
    border: 1px solid transparent;
    transition: border-color .12s ease;
    user-select: none;
}
.d-workspace:hover { border-color: var(--d-border-dark-2); }
.d-workspace__btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-size: 12.5px;
    border-radius: var(--d-radius);
}
.d-workspace__btn:focus { outline: none; }
.d-workspace__badge {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--d-accent);
    color: #001018;
    font-weight: 700;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--d-font-mono);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.d-workspace__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.d-workspace__name {
    color: var(--d-text-on-dark);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-workspace__role {
    color: var(--d-text-on-dark-muted);
    font-size: 10.5px;
    line-height: 1.15;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-workspace__chev {
    color: var(--d-text-on-dark-muted);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.d-workspace.show .d-workspace__chev { transform: rotate(180deg); }
.d-workspace .dropdown-menu {
    margin-top: 6px;
    min-width: 220px;
    font-size: 12.5px;
}

/* ----- Sidebar: search ----- */
.d-sb-search {
    margin: 0 12px 10px;
    background: var(--d-bg-dark-2);
    border: 1px solid var(--d-border-dark);
    border-radius: var(--d-radius);
    display: flex;
    align-items: center;
    padding: 6px 9px;
    gap: 7px;
}
.d-sb-search input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--d-text-on-dark);
    font-size: 12.5px;
    outline: none;
    font-family: inherit;
}
.d-sb-search input::placeholder { color: var(--d-text-dark-faint); }
.d-sb-search__icon { color: var(--d-text-dark-faint); font-size: 13px; }
.d-sb-search__kbd {
    font-family: var(--d-font-mono);
    font-size: 10.5px;
    color: var(--d-text-dark-faint);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--d-border-dark-2);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ----- Sidebar: nav ----- */
.d-sb-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--d-border-dark-2) transparent;
}
.d-sb-nav::-webkit-scrollbar { width: 6px; }
.d-sb-nav::-webkit-scrollbar-thumb { background: var(--d-border-dark-2); border-radius: 3px; }

.d-sb-section {
    padding: 14px 8px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d-text-dark-faint);
}

.d-sb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border-radius: var(--d-radius-sm);
    color: var(--d-text-on-dark-muted);
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 1px;
}
.d-sb-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--d-text-on-dark);
}
.d-sb-item.is-active {
    /* Active estilo Supabase: surface lift + barra lateral accent */
    background: rgba(59,130,246,0.12);
    color: #ffffff;
    box-shadow: inset 2px 0 0 var(--d-accent);
}
.d-sb-item.is-active .d-sb-item__dot {
    background: var(--d-accent);
    box-shadow: 0 0 6px rgba(59,130,246,0.55);
}

/* Iconos de los items del sidebar (reemplazan a los dots para que el modo
   colapsado sea legible). */
.d-sb-item__ic {
    width: 18px;
    flex-shrink: 0;
    font-size: 17px;
    text-align: center;
    color: var(--d-text-on-dark-muted);
    transition: color .12s ease;
}
.d-sb-item:hover .d-sb-item__ic,
.d-sb-group > summary:hover .d-sb-item__ic { color: var(--d-text-on-dark); }
.d-sb-item.is-active .d-sb-item__ic,
.d-sb-group[open] > summary .d-sb-item__ic { color: var(--d-accent); }
/* Indicador "live" — un puntito verde sobre el icono */
.d-sb-item__ic--live { position: relative; }
.d-sb-item__ic--live::after {
    content: '';
    position: absolute; top: -1px; right: -1px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--d-ok);
    box-shadow: 0 0 5px var(--d-ok);
}

.d-sb-item__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    flex-shrink: 0;
}
.d-sb-item.is-active .d-sb-item__dot,
.d-sb-item__dot--accent {
    background: var(--d-accent);
    box-shadow: 0 0 6px var(--d-accent);
}
.d-sb-item__dot--live {
    background: var(--d-ok);
    box-shadow: 0 0 6px var(--d-ok);
}
.d-sb-item__label { flex: 1; }
.d-sb-item__count {
    font-family: var(--d-font-mono);
    font-size: 11px;
    color: var(--d-text-dark-faint);
}
.d-sb-item.is-active .d-sb-item__count { color: var(--d-text-on-dark-muted); }

/* Estado "Próximamente" — visualmente atenuado, no clickeable */
.d-sb-item--soon {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: auto; /* permitimos hover para tooltip pero el href es # */
}
.d-sb-item--soon:hover { background: transparent; opacity: .7; }
.d-sb-item--soon .d-sb-item__count {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: var(--d-text-on-dark-muted);
    /* Pedia una variable de fuente que NO existe en ninguna hoja —la del
       token sin sufijo—: la propiedad se descartaba y el elemento heredaba,
       sin dar ningun error. Por el contexto (un chip en versalitas sobre
       fondo oscuro) lo que queria decir es la monoespaciada. */
    font-family: var(--d-font-mono);
}

/* Grupo colapsable (uses <details>) */
.d-sb-group { margin-bottom: 1px; }
.d-sb-group > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border-radius: var(--d-radius-sm);
    color: var(--d-text-on-dark-muted);
    font-size: 12.5px;
    line-height: 1.3;
    user-select: none;
    transition: background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.d-sb-group > summary::-webkit-details-marker { display: none; }
.d-sb-group > summary::marker { content: ''; }
.d-sb-group > summary:hover {
    background: rgba(255,255,255,0.04);
    color: var(--d-text-on-dark);
}
.d-sb-group[open] > summary {
    color: var(--d-text-on-dark);
    background: rgba(255,255,255,0.025);
}
.d-sb-group[open] > summary .d-sb-item__dot {
    background: var(--d-accent);
    box-shadow: 0 0 6px var(--d-accent);
}
.d-sb-group__chev {
    margin-left: auto;
    color: var(--d-text-dark-faint);
    font-size: 14px;
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), color .15s ease;
    line-height: 1;
}
.d-sb-group > summary:hover .d-sb-group__chev { color: var(--d-text-on-dark-muted); }
.d-sb-group[open] > summary .d-sb-group__chev {
    transform: rotate(90deg);
    color: var(--d-accent);
}

/* Sub-items dentro del grupo */
.d-sb-group__items {
    margin: 3px 0 6px 14px;
    padding: 2px 0 2px 12px;
    border-left: 1px solid var(--d-border-dark);
    overflow: hidden;
}
.d-sb-group[open] > .d-sb-group__items {
    animation: dSbExpand 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dSbExpand {
    from {
        opacity: 0;
        transform: translateY(-4px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 240px;
    }
}

.d-sb-subitem {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    border-radius: var(--d-radius-sm);
    color: var(--d-text-dark-faint) !important;
    font-size: 11.5px;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1.3;
    margin-bottom: 1px;
    position: relative;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.d-sb-group[open] > .d-sb-group__items > .d-sb-subitem {
    animation: dSbItemIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.d-sb-group[open] > .d-sb-group__items > .d-sb-subitem:nth-child(1) { animation-delay: 0.02s; }
.d-sb-group[open] > .d-sb-group__items > .d-sb-subitem:nth-child(2) { animation-delay: 0.05s; }
.d-sb-group[open] > .d-sb-group__items > .d-sb-subitem:nth-child(3) { animation-delay: 0.08s; }
.d-sb-group[open] > .d-sb-group__items > .d-sb-subitem:nth-child(4) { animation-delay: 0.11s; }
.d-sb-group[open] > .d-sb-group__items > .d-sb-subitem:nth-child(5) { animation-delay: 0.14s; }
@keyframes dSbItemIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.d-sb-subitem__arrow {
    color: var(--d-text-dark-faint);
    font-family: var(--d-font-mono);
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    width: 12px;
    transition: color .15s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.d-sb-subitem:hover {
    background: rgba(255,255,255,0.04);
    color: var(--d-text-on-dark) !important;
    transform: translateX(1px);
}
.d-sb-subitem:hover .d-sb-subitem__arrow {
    color: var(--d-accent);
    transform: translateX(2px);
}
.d-sb-subitem.is-active {
    color: var(--d-text-on-dark) !important;
    background: var(--d-bg-dark-3);
}
.d-sb-subitem.is-active .d-sb-subitem__arrow {
    color: var(--d-accent);
}
.d-sb-subitem__label { flex: 1; }

/* ============================================================
   Botón "colapsar / expandir" del sidebar (desktop)
   ============================================================ */
.d-sidebar__collapse {
    margin: 8px;
    display: flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1px solid var(--d-border-dark);
    border-radius: var(--d-radius-sm);
    color: var(--d-text-on-dark-muted);
    padding: 7px 10px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.d-sidebar__collapse:hover {
    background: rgba(255,255,255,0.05);
    color: var(--d-text-on-dark);
    border-color: var(--d-border-dark-2);
}
.d-sidebar__collapse-icon { font-size: 16px; }
.d-sidebar__collapse-label { flex: 1; text-align: left; }

/* ============================================================
   Modo colapsado del sidebar — sólo iconos / dots, 56px de ancho.
   El botón al pie cambia el ícono a "chevrons-right" y se centra.
   ============================================================ */
html.d-sidebar-collapsed { --d-sidebar-w: 56px; }
html.d-sidebar-collapsed .d-sidebar { width: 56px; }

/* Ocultar todo lo que sea texto / labels / chevrones internos */
html.d-sidebar-collapsed .d-sb-item__label,
html.d-sidebar-collapsed .d-sb-item__count,
html.d-sidebar-collapsed .d-sb-subitem__label,
html.d-sidebar-collapsed .d-sb-section,
html.d-sidebar-collapsed .d-sb-search,
html.d-sidebar-collapsed .d-workspace__info,
html.d-sidebar-collapsed .d-workspace__chev,
html.d-sidebar-collapsed .d-sb-group__chev,
html.d-sidebar-collapsed .d-sidebar__collapse-label {
    display: none !important;
}

/* Logo se reduce y se centra */
html.d-sidebar-collapsed .d-sidebar__logo { padding: 12px 8px; justify-content: center; }
html.d-sidebar-collapsed .d-sidebar__logo img { height: 24px; width: auto; }

/* Workspace: sólo avatar */
html.d-sidebar-collapsed .d-workspace { padding: 8px; }
html.d-sidebar-collapsed .d-workspace__btn {
    justify-content: center;
    padding: 4px;
    gap: 0;
}
html.d-sidebar-collapsed .d-workspace__badge { margin: 0 auto; }

/* Items: cuadrados centrados con sólo el icono */
html.d-sidebar-collapsed .d-sb-nav { padding: 4px 6px 8px; }
html.d-sidebar-collapsed .d-sb-item,
html.d-sidebar-collapsed .d-sb-group > summary {
    justify-content: center;
    padding: 9px 0;
    gap: 0;
}
html.d-sidebar-collapsed .d-sb-item__ic {
    font-size: 19px;
    width: auto;
}
html.d-sidebar-collapsed .d-sb-item__dot {
    width: 8px; height: 8px;
}
/* En colapsado el bg de active queda muy chico — extendemos el indicador con
   una franja sutil a la izquierda y un fondo full-width */
html.d-sidebar-collapsed .d-sb-item.is-active,
html.d-sidebar-collapsed .d-sb-group[open] > summary {
    border-radius: var(--d-radius-sm);
}

/* Grupos: cerrar contenido en colapsado (los subitems no caben) */
html.d-sidebar-collapsed .d-sb-group > .d-sb-group__items {
    display: none !important;
}

/* Botón collapse: cuadrado centrado */
html.d-sidebar-collapsed .d-sidebar__collapse {
    justify-content: center;
    padding: 8px;
    margin: 8px 6px;
}

/* Tooltip nativo via title se ve solo; agregamos un cursor pointer */
html.d-sidebar-collapsed .d-sb-item,
html.d-sidebar-collapsed .d-sb-group > summary { cursor: pointer; }

/* Ajuste del footer global cuando el sidebar está colapsado */
html.d-sidebar-collapsed .d-footer { left: 56px !important; }

/* Transición suave al colapsar/expandir */
.d-sidebar { transition: width .18s ease; }
.d-footer { transition: left .18s ease; }
.d-app { transition: grid-template-columns .18s ease; }

/* En mobile (sidebar overlay) ignoramos el modo colapsado */
@media (max-width: 900px) {
    html.d-sidebar-collapsed { --d-sidebar-w: 0px; }
    html.d-sidebar-collapsed .d-sidebar { width: 240px; }
    html.d-sidebar-collapsed .d-sb-item__label,
    html.d-sidebar-collapsed .d-sb-section,
    html.d-sidebar-collapsed .d-sb-search,
    html.d-sidebar-collapsed .d-workspace__info,
    html.d-sidebar-collapsed .d-sidebar__collapse-label,
    html.d-sidebar-collapsed .d-sb-group__chev {
        display: revert !important;
    }
    html.d-sidebar-collapsed .d-sidebar__collapse { display: none; }
    html.d-sidebar-collapsed .d-footer { left: 0 !important; }
}

/* ----- Sidebar: footer (user) ----- */
.d-sb-foot {
    border-top: 1px solid var(--d-border-dark);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.d-sb-foot__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2a2a2e, #1a1a1c);
    color: var(--d-text-on-dark);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 11px;
    flex-shrink: 0;
}
.d-sb-foot__info { flex: 1; min-width: 0; }
.d-sb-foot__name {
    font-size: 12px;
    color: var(--d-text-on-dark);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-sb-foot__role {
    font-size: 10.5px;
    color: var(--d-text-dark-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.d-sb-foot__menu {
    color: var(--d-text-dark-faint);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}
.d-sb-foot__menu:hover { background: rgba(255,255,255,0.05); color: var(--d-text-on-dark); }

/* ---------- Topbar ---------- */
.d-topbar {
    height: var(--d-topbar-h);
    background: #e7ebf1;                 /* header plomo claro */
    border-bottom: 1px solid rgba(15,23,42,0.12);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.d-topbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--d-text-muted);
}
.d-sync {
    display: flex; align-items: center; gap: 6px;
}
.d-sync__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--d-ok);
    box-shadow: 0 0 6px var(--d-ok);
}
/* Degradado. AMBAR y nunca rojo: en esta app el rojo es el boton de panico, y
   gastarlo aqui lo devalua. Lo que distingue «sin respuesta» de «sin conexion»
   es la palabra, que la escribe el reloj de `_Layout`. */
.d-sync.is-viejo .d-sync__dot { background: var(--d-warn); box-shadow: 0 0 6px var(--d-warn); }
.d-sync.is-viejo { color: var(--d-warn); }
.d-topbar__divider { width: 1px; height: 18px; background: var(--d-border); }
.d-topbar__btn {
    background: none;
    border: 0;
    padding: 4px 6px;
    color: var(--d-text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    position: relative;
}
.d-topbar__btn:hover { background: var(--d-bg-panel-muted); color: var(--d-text); }
.d-topbar__badge {
    position: absolute;
    top: -2px; right: -2px;
    background: var(--d-danger);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 5px;
    font-family: var(--d-font-mono);
    min-width: 16px;
    text-align: center;
    line-height: 1.2;
}

/* ---------- Menú de usuario en el header (derecha) ---------- */
.d-usermenu { flex-shrink: 0; }
.d-usermenu__btn {
    display: flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 10px 3px 3px;
    cursor: pointer;
    color: var(--d-text);
    transition: background .14s ease, border-color .14s ease;
}
.d-usermenu__btn:hover { background: var(--d-bg-panel-muted); border-color: var(--d-border); }
.d-usermenu.show > .d-usermenu__btn { background: var(--d-bg-panel-muted); border-color: var(--d-border); }
.d-usermenu__badge {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--d-accent) 0%, #6366f1 100%);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11.5px;
    font-family: var(--d-font-mono);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
}
.d-usermenu__info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.d-usermenu__name { font-size: 12.5px; font-weight: 600; color: var(--d-text); white-space: nowrap; }
.d-usermenu__role {
    font-size: 10px; color: var(--d-text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.d-usermenu__chev { font-size: 16px; color: var(--d-text-muted); transition: transform .15s ease; }
.d-usermenu.show .d-usermenu__chev { transform: rotate(180deg); }

/* Dropdown rediseñado */
.d-usermenu__menu {
    min-width: 252px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--d-border);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    margin-top: 8px;
}
.d-usermenu__card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(59,130,246,0.14) 0%, transparent 55%),
        var(--d-bg-panel-muted);
    border-bottom: 1px solid var(--d-border);
}
.d-usermenu__card-badge {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--d-accent) 0%, #6366f1 100%);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
    font-family: var(--d-font-mono);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
}
.d-usermenu__card-info { min-width: 0; }
.d-usermenu__card-name {
    font-size: 14px; font-weight: 700; color: var(--d-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.d-usermenu__card-role {
    font-size: 11px; color: var(--d-text-muted);
    margin-top: 2px; display: inline-flex; align-items: center; gap: 4px;
}
.d-usermenu__card-role i { font-size: 13px; color: var(--d-accent); }
.d-usermenu__items { padding: 6px; }
.d-usermenu__sep { height: 1px; background: var(--d-border); margin: 0 6px; }
.d-usermenu__item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; margin: 4px 6px;
    border-radius: var(--d-radius-sm);
    color: var(--d-text); font-size: 12.5px; font-weight: 500;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.d-usermenu__item i { font-size: 18px; color: var(--d-text-muted); transition: color .12s ease; width: 20px; text-align: center; }

/* OJO: este bloque se escribio para un menu OSCURO y el menu es CLARO.
   El hover pedia `color: #ffffff` sobre un azul al 12% encima de un panel
   blanco —o sea blanco sobre #e7f0fe— y el texto DESAPARECIA al pasar por
   encima. Medido: contraste 1,15 contra el 4,5 que pide WCAG AA. Lo mismo
   `--danger`, que no lo habia reportado nadie porque un rojo claro sobre
   rosa se intuye: 1,58 en hover y 2,9 en reposo.
   Misma familia que `.btn-close`, invertida para cabeceras oscuras y
   invisible sobre fondo claro: una regla que sobrevivio al cambio de tema.
   Los numeros de ahora estan medidos en el navegador, no supuestos. */
.d-usermenu__item:hover {
    /* El fondo NO cambia: el azul al 12% ya estaba y se ve bien. Lo unico
       que estaba mal era el texto. 13,11 de contraste. */
    background: rgba(59,130,246,0.12);
    color: var(--d-text);
    text-decoration: none;
}
/* El icono SI vira a azul —es la senal de que la fila esta activa— pero al
   tono oscuro: 4,51 contra los 3,21 del `--d-accent` claro. */
.d-usermenu__item:hover i { color: var(--d-accent-dark); }

/* Rojo oscuro y no `--d-danger` (#ef4444), que sobre blanco da 3,3 y no
   llega a AA. Va literal, como el navy de la cabecera: inventar un
   `--d-danger-dark` para un solo uso acaba en dos tokens que dicen casi lo
   mismo. Reposo 5,94 · hover 5,53. */
.d-usermenu__item--danger { color: #b91c1c; }
.d-usermenu__item--danger i { color: #b91c1c; }
.d-usermenu__item--danger:hover { background: rgba(239,68,68,0.12); color: #991b1b; }
.d-usermenu__item--danger:hover i { color: #991b1b; }

/* ---------- Dropdown de notificaciones (campana) ---------- */
.d-notif-menu { padding: 0; overflow: hidden; }
.d-notif-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d-border);
    font-size: 12.5px; font-weight: 600; color: var(--d-text);
    background: var(--d-bg-panel-muted);
}
.d-notif-markall {
    background: transparent; border: 0;
    color: var(--d-accent); cursor: pointer;
    font-size: 11px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 4px; border-radius: 4px;
}
.d-notif-markall:hover { background: rgba(59,130,246,0.12); }
.d-notif-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 360px; overflow-y: auto;
}
.d-notif-empty {
    padding: 24px 14px; text-align: center;
    color: var(--d-text-faint); font-size: 12px;
}
.d-notif-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d-border-soft);
}
.d-notif-item--unread { background: rgba(59,130,246,0.06); }
.d-notif-item__ic {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.d-notif-sev--INFO    { background: rgba(59,130,246,0.14); color: #60a5fa; }
.d-notif-sev--SUCCESS { background: rgba(16,185,129,0.14); color: #34d399; }
.d-notif-sev--WARNING { background: rgba(245,158,11,0.14); color: #fbbf24; }
.d-notif-sev--ERROR   { background: rgba(239,68,68,0.14);  color: #f87171; }
.d-notif-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.d-notif-item__title { font-size: 12.5px; font-weight: 600; color: var(--d-text); }
.d-notif-item__desc {
    font-size: 11.5px; color: var(--d-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.d-notif-item__time { font-size: 10px; color: var(--d-text-faint); margin-top: 2px; }
.d-notif-item__mark {
    flex-shrink: 0; align-self: center;
    width: 26px; height: 26px;
    border: 1px solid var(--d-border);
    background: transparent; color: var(--d-text-muted);
    border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.d-notif-item__mark:hover {
    background: rgba(16,185,129,0.14); color: #10b981; border-color: rgba(16,185,129,0.35);
}
.d-notif-menu__foot {
    display: block; text-align: center;
    padding: 9px; font-size: 12px; color: var(--d-accent);
    border-top: 1px solid var(--d-border); text-decoration: none;
    background: var(--d-bg-panel-muted);
}
.d-notif-menu__foot:hover { background: var(--d-bg-dark-3); text-decoration: none; }

/* ---------- Page content ---------- */
.d-content {
    /* padding-bottom incluye espacio para el footer fixed (var(--d-footer-h))
       más un margen visual de 14px. */
    padding: 18px 22px calc(var(--d-footer-h, 34px) + 14px);
    flex: 1;
    min-width: 0;
}

/* Pantalla a sangre completa: la pide la vista con
   ViewData["ContenidoSinPadding"] = true. Hoy solo /Central, donde el mapa ES
   la pantalla y 22px de margen a cada lado son 44px de mapa que no se ven.

   OJO: el footer sigue siendo `position: fixed` y ya no hay padding que le
   reserve sitio, así que **el contenido tiene que dejarle su alto**
   (var(--d-footer-h)) o queda tapado por él. */
.d-content--full { padding: 0; }

/* ----- Page header ----- */
.d-pageheader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    /* La cabecera de TODO el panel va sobre banda azul marino. `#0c1b36` es un
       literal a proposito: cae entre los dos navys del sistema —`--d-bg-dark`
       #0f2447 y `--d-sidebar-bg` #041633— y ninguno daba el tono pedido. Si
       algun dia hace falta en otro sitio, ahi si toca subirlo a `:root`.
       Bordes redondeados de 16px, como las tarjetas y los mapas de debajo.
       Queda separada de los bordes del lienzo por el padding de `.d-content`
       (18/22); para pegarla a sangre completa haria falta `ContenidoSinPadding`,
       que es otra bandera. */
    background: #0c1b36;
    border-radius: 16px;
    padding: 16px 18px;
}
/* Cifras TABULARES donde los numeros se leen en columna o cambian solos.
   Hace falta pedirlo: ninguna de las dos familias lo trae por defecto, asi
   que hoy un folio sobre otro no alinea y un contador que se refresca cada
   15 s cambia de ancho al pasar de 9 a 10. */
.d-table,
.d-kpi__value, .ca-kpi__value, .d-hkpi__num {
    font-variant-numeric: tabular-nums;
}

.d-pageheader__title {
    font-family: var(--d-font-display);
    font-size: 22px;
    /* 600 y no 700: Space Grotesk pesa mas de lo que marca el numero y a
       700 sobre el navy se empasta. El tracking se cierra mas que con
       Inter porque esta familia va suelta de serie. */
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.025em;
}
.d-pageheader__sub {
    font-size: 12px;
}
/* El icono y el texto van juntos en un solo hijo del flex de cabecera:
   `.d-pageheader` reparte con space-between y solo admite dos. */
.d-pageheader__id {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.d-pageheader__ic {
    width: 42px; height: 42px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 23px;
    background: var(--d-accent-soft); color: var(--d-accent);
}
/* El tono lo elige la vista: verde cuando lo que se mira esta operativo,
   ambar cuando no. Un cuadro siempre del mismo color seria decoracion. */
.d-pageheader__ic--ok   { background: rgba(22,163,74,.12);  color: #16a34a; }
.d-pageheader__ic--warn { background: rgba(245,158,11,.14); color: #b45309; }
.d-pageheader__ic--mute { background: var(--d-bg-panel-muted); color: var(--d-text-muted); }

/* ---------- Lo que va ENCIMA de la banda ----------
   Todo lo de aqui existe porque el fondo es oscuro. */
.d-pageheader__title { color: var(--d-text-on-dark); }
.d-pageheader__sub   { color: var(--d-text-on-dark-muted); }
/* La regla general pinta el mono del subtitulo con `--d-text`, que es el
   slate oscuro del lienzo claro: sobre el navy desaparece. */
.d-pageheader__sub .d-mono { color: var(--d-text-on-dark); }

/* Los tonos del cuadro estan calculados sobre fondo BLANCO: un 12% de verde
   sobre blanco se ve, sobre #0f2447 no queda nada. Se sube la trama y se
   aclara el glifo, conservando lo que el tono significa (verde operativo,
   ambar en taller, gris sin dato). El generico va primero: los tres
   modificadores tienen su misma especificidad y gana el ultimo. */
.d-pageheader__ic       { background: rgba(255,255,255,.10); color: var(--d-text-on-dark); }
.d-pageheader__ic--ok   { background: rgba(16,185,129,.20);  color: #6ee7b7; }
.d-pageheader__ic--warn { background: rgba(245,158,11,.22);  color: #fcd34d; }
.d-pageheader__ic--mute { background: rgba(255,255,255,.10); color: var(--d-text-on-dark-muted); }

.d-pageheader__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Range picker pills */
.d-pills {
    display: inline-flex;
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    padding: 2px;
}
.d-pills__item {
    padding: 4px 10px;
    font-size: 11.5px;
    color: var(--d-text-muted);
    border-radius: 5px;
    cursor: pointer;
    border: 0;
    background: transparent;
    font-family: inherit;
}
.d-pills__item:hover { color: var(--d-text); }
.d-pills__item.is-active {
    background: var(--d-bg-dark);
    color: var(--d-text-on-dark);
}

/* ---------- Botones ---------- */
.d-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--d-radius);
    border: 1px solid var(--d-border);
    background: var(--d-bg-panel);
    color: var(--d-text);
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: background .12s ease, border-color .12s ease;
    text-decoration: none;
}
.d-btn:hover { background: var(--d-bg-panel-muted); color: var(--d-text); }

.d-btn--primary {
    background: var(--d-accent);
    color: #ffffff;
    border-color: var(--d-accent);
}
.d-btn--primary:hover { background: var(--d-accent-dark); color: #ffffff; border-color: var(--d-accent-dark); }
.d-btn--primary .d-btn__plus { color: #ffffff; font-weight: 700; }

.d-btn--accent {
    background: var(--d-accent);
    color: #ffffff;
    border-color: var(--d-accent);
}
.d-btn--accent:hover { background: var(--d-accent-dark); border-color: var(--d-accent-dark); color: #ffffff; }

.d-btn--ghost { background: transparent; border-color: transparent; color: var(--d-text-muted); }
.d-btn--ghost:hover { background: var(--d-bg-panel-muted); }

.d-btn--icon {
    width: 28px; height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 15px;
    color: var(--d-text-muted);
}
.d-btn--icon:hover { color: var(--d-text); }
.d-btn--icon + .d-btn--icon { margin-left: 4px; }

/* ---------- KPI strip ---------- */
.d-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 1200px) { .d-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .d-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ===== Garantía responsiva de KPIs (transversal) =====
   Varias páginas fijan grid-template-columns con el atributo style (repeat 4/5/6).
   Un estilo inline gana por especificidad a cualquier media query normal, así que
   en tablet/móvil quedaban apretados. Con !important forzamos el colapso a nivel
   de sistema, anulando esos overrides inline en .d-kpis y .ca-kpis por igual.
   Orden 1100 -> 760 -> 460 (de mayor a menor) para que gane el más específico. */
@media (max-width: 1100px) {
    .d-kpis, .ca-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
    .d-kpis, .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
    .d-kpis, .ca-kpis { grid-template-columns: 1fr !important; }
}

.d-kpi {
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    padding: 11px 13px;
    box-shadow: var(--d-shadow-panel);
}
.d-kpi__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.d-kpi__value {
    font-size: 22px;
    font-weight: 700;
    color: var(--d-text);
    font-family: var(--d-font-mono);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.d-kpi__value--ok      { color: var(--d-ok); }
.d-kpi__value--warn    { color: var(--d-warn); }
.d-kpi__value--danger  { color: var(--d-danger); }
.d-kpi__value--accent  { color: var(--d-accent-dark); }
.d-kpi__row {
    margin-top: 6px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px;
    color: var(--d-text-muted);
}
.d-kpi__spark {
    width: 50px; height: 18px; flex-shrink: 0;
}

/* ---------- Panel / card genérico ---------- */
.d-panel {
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    box-shadow: var(--d-shadow-panel);
    overflow: hidden;
}
.d-panel__head {
    background: var(--d-bg-panel-muted);
    border-bottom: 1px solid var(--d-border);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--d-text);
}
.d-panel__head .text-muted,
.d-panel__head small,
.d-panel__head .small {
    color: var(--d-text-muted) !important;
}
.d-panel__title {
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
    color: var(--d-text);
    letter-spacing: -0.01em;
}
.d-panel__foot {
    background: var(--d-bg-panel-muted);
    border-top: 1px solid var(--d-border);
    padding: 8px 13px;
    font-size: 11.5px;
    color: var(--d-text-muted);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Toolbar de tabla (header de pantallas de listado) ----------
   Estilo Supabase: surface levemente más clara que el body, borde sutil
   inferior, controles con fondo translúcido. */
.d-toolbar {
    background: var(--d-bg-panel-muted);
    border-bottom: 1px solid var(--d-border);
    color: var(--d-text);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.d-toolbar .d-search {
    background: var(--d-bg-panel);
    border-color: var(--d-border);
}
.d-toolbar .d-search input { color: var(--d-text); }
.d-toolbar .d-search input::placeholder { color: var(--d-text-faint); }
.d-toolbar .d-search__icon { color: var(--d-text-muted); }
.d-toolbar .d-filter {
    background: var(--d-bg-panel);
    border-color: var(--d-border);
    color: var(--d-text);
}
.d-toolbar .d-filter:hover {
    background: var(--d-bg-panel-muted);
    border-color: var(--d-border-dark-2);
}
.d-toolbar .d-filter__key { color: var(--d-text-faint); }
.d-toolbar .d-filter__val { color: var(--d-text); }
.d-toolbar .d-toolbar__spacer { flex: 1; }
.d-search {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius-sm);
    padding: 4px 9px;
    width: 280px;
    max-width: 100%;
}
.d-search input {
    flex: 1;
    border: 0; background: transparent; outline: none;
    font-size: 12px;
    font-family: inherit;
    color: var(--d-text);
}
.d-search input::placeholder { color: var(--d-text-faint); }
.d-search__icon { color: var(--d-text-faint); font-size: 12px; }

.d-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius-sm);
    padding: 3px 9px;
    font-size: 11.5px;
    color: var(--d-text-muted);
    cursor: pointer;
}
.d-filter__key { color: var(--d-text-muted); }
.d-filter__val { color: var(--d-text); font-weight: 500; }

.d-toolbar__spacer { flex: 1; }

.d-counter {
    font-family: var(--d-font-mono);
    font-size: 11.5px;
    color: var(--d-text-muted);
}

/* Segmented (vista) */
.d-seg {
    display: inline-flex;
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius-sm);
    padding: 2px;
}
.d-seg__item {
    padding: 3px 8px;
    font-size: 12px;
    color: var(--d-text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
}
.d-seg__item.is-active {
    background: var(--d-bg-dark);
    color: var(--d-text-on-dark);
}

/* ---------- Tabla densa ---------- */
.d-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--d-fs-celda);
}
.d-table thead th {
    position: sticky;
    top: 0;
    background: var(--d-bg-panel-muted);
    border-bottom: 1px solid var(--d-border);
    font-size: var(--d-fs-cab);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--d-text-muted);
    font-weight: 600;
    padding: 7px 13px;
    text-align: left;
    white-space: nowrap;
}
.d-table tbody td {
    padding: 8px 13px;
    border-bottom: 1px solid var(--d-border-soft);
    vertical-align: middle;
}
.d-table tbody tr:last-child td { border-bottom: 0; }
.d-table tbody tr:hover td { background: var(--d-bg-panel-muted); }

.d-table .d-mono { font-family: var(--d-font-mono); font-size: 11px; color: var(--d-text-muted); }
.d-table__check { width: 13px; }
.d-table__check input { width: 13px; height: 13px; cursor: pointer; }

.d-table__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--d-text);
    font-size: var(--d-fs-titulo);
    font-weight: 600;
}
/* La linea secundaria de una celda: el RUT bajo el nombre, la direccion
   bajo el titulo, quien aviso bajo el evento. Estaba escrita en linea en
   veintiun sitios de la grilla y con cuatro tamanos distintos. */
.d-sub {
    font-size: var(--d-fs-sub);
    color: var(--d-text-muted);
}
.d-sub--faint { color: var(--d-text-faint); }

/* «Aqui no hay nada». En `/Central/Eventos` va en 11.5 y en el resto iba
   en 14, que es tamano de parrafo: el aviso de que una lista esta vacia
   pesaba mas que las filas cuando la lista tenia algo. */
.d-vacio {
    font-size: var(--d-fs-vacio);
    color: var(--d-text-muted);
}

/* El folio publico del incidente. Va en mono para que no se confundan el 0
   y la O al dictarlo por radio, y en color de acento porque es lo que se
   cita en un oficio: es un identificador, no un dato de apoyo.

   OJO: se lleva la familia mono ENCIMA. Antes esto se escribia
   `class="mi-folio d-mono"`, y dentro de una grilla `.d-table .d-mono`
   —dos clases— le ganaba a la clase suelta y lo devolvia a 11px gris. El
   sintoma era que el mismo folio salia de un color en la tabla y de otro
   en el cajon de al lado, sin ningun error. Con la familia aqui dentro no
   hace falta `d-mono` en el markup y no hay empate que perder. */
.d-folio {
    font-family: var(--d-font-mono);
    font-size: var(--d-fs-folio);
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--d-accent);
    white-space: nowrap;
}

/* ---------- Dots y estados ---------- */
.d-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--d-text-faint);
    flex-shrink: 0;
}
.d-dot--sm { width: 5px; height: 5px; }
.d-dot--ok     { background: var(--d-ok); }
.d-dot--warn   { background: var(--d-warn); }
.d-dot--danger { background: var(--d-danger); }
.d-dot--live   { box-shadow: 0 0 6px currentColor; }

.d-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--d-text);
}
.d-state--ok     { color: var(--d-ok); }
.d-state--warn   { color: var(--d-warn); }
.d-state--danger { color: var(--d-danger); }

/* ---------- Badges criticidad ---------- */
/* Etiqueta sobria: contorno fino, texto normal, sin relleno pastel ni
   MAYUSCULAS. El color va solo en el texto y el borde, con un punto delante en
   las que dicen un estado; las neutras (tipo, categoria) quedan en gris.
   Tonos -700: los -500 de --d-ok/--d-warn no se leen como texto sobre blanco. */
.d-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid var(--d-border);
    background: transparent;
    color: var(--d-text-muted);
    line-height: 1.6;
    white-space: nowrap;
}
.d-badge--alta,  .d-badge--danger { color: #b91c1c; border-color: rgba(185,28,28,.35); font-weight: 600; }
.d-badge--media, .d-badge--warn   { color: #b45309; border-color: rgba(180,83,9,.35); font-weight: 600; }
.d-badge--baja,  .d-badge--ok     { color: #047857; border-color: rgba(4,120,87,.35); }
/* El acento era el tipo de evento: un dato, no un estado. Neutro. */
.d-badge--accent { color: var(--d-text); }
/* Estado, no prioridad: --alta/--media/--baja nombran una escala de urgencia y
   se leen mal cuando lo que se dice es "esto esta bien" o "esto falta". */
.d-badge--alta::before, .d-badge--media::before, .d-badge--baja::before,
.d-badge--ok::before, .d-badge--warn::before, .d-badge--danger::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; flex: none;
}

/* ---------- Sparkline inline ---------- */
.d-spark { display: inline-block; vertical-align: middle; }
.d-spark--row { width: 88px; height: 22px; }

/* ---------- Paginación ---------- */
.d-pager {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.d-pager__btn {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--d-text-muted);
    font-size: 11.5px;
    font-family: var(--d-font-mono);
    cursor: pointer;
}
.d-pager__btn:hover { background: var(--d-bg-panel); border-color: var(--d-border); color: var(--d-text); }
.d-pager__btn.is-active {
    background: var(--d-bg-dark);
    color: var(--d-text-on-dark);
    border-color: var(--d-bg-dark);
}

/* ---------- Inputs ---------- */
.d-input,
input.d-input,
select.d-input,
textarea.d-input {
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius-sm);
    padding: 6px 10px;
    font-size: 12.5px;
    color: var(--d-text);
    font-family: inherit;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.d-input:focus {
    border-color: var(--d-accent-dark);
    box-shadow: 0 0 0 3px var(--d-accent-soft);
}

/* ---------- Iconos nativos de inputs (date/time/number/search/select) ----------
   En el tema oscuro el navegador dibuja los indicadores nativos (icono de
   calendario, reloj, flechas de spinner, la X de búsqueda y la flecha del
   select) en NEGRO, lo que los hace casi invisibles sobre el panel oscuro.
   Basta declarar color-scheme: dark sobre el control: el navegador renderiza
   esos widgets nativos en su variante CLARA (icono blanco) y pinta también el
   desplegable del calendario/hora en oscuro. NO usar filter: invert aquí,
   porque invertiría el icono ya-claro de vuelta a negro.                      */
.d-input,
input.d-input,
select.d-input,
textarea.d-input,
.form-control,
.form-select,
input.form-control,
select.form-select,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"],
input[type="search"] {
    color-scheme: light;
}
/* Cursor de mano sobre el picker de fecha/hora */
.d-input::-webkit-calendar-picker-indicator,
.form-control::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .85;
}
.d-input::-webkit-calendar-picker-indicator:hover,
.form-control::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ---------- Compatibilidad mínima con Bootstrap ---------- */
/* Botones de Bootstrap → reestilizados al sistema dark navy */
.btn { font-family: var(--d-font-sans); border-radius: var(--d-radius); font-size: 12px; }
.btn-primary {
    background: var(--d-accent) !important;
    border-color: var(--d-accent) !important;
    color: #ffffff !important;
}
.btn-primary:hover { background: var(--d-accent-dark) !important; border-color: var(--d-accent-dark) !important; }
.btn-secondary {
    background: var(--d-bg-panel-muted) !important;
    border-color: var(--d-border) !important;
    color: var(--d-text) !important;
}
.btn-secondary:hover {
    background: var(--d-bg-dark-3) !important;
    border-color: var(--d-border-dark-2) !important;
}
.btn-outline-secondary {
    background: transparent !important;
    border-color: var(--d-border) !important;
    color: var(--d-text-muted) !important;
}
.btn-outline-secondary:hover {
    background: var(--d-bg-panel-muted) !important;
    color: var(--d-text) !important;
}
.btn-danger { background: var(--d-danger) !important; border-color: var(--d-danger) !important; color: #fff !important; }
.btn-success { background: var(--d-ok) !important; border-color: var(--d-ok) !important; color: #fff !important; }
.btn-warning { background: var(--d-warn) !important; border-color: var(--d-warn) !important; color: #fff !important; }

.form-control, .form-select {
    border-radius: var(--d-radius-sm);
    background: var(--d-bg-panel);
    border-color: var(--d-border);
    color: var(--d-text);
    font-size: 12.5px;
}
.form-control::placeholder { color: var(--d-text-faint); }
.form-control:focus, .form-select:focus {
    background: var(--d-bg-panel);
    color: var(--d-text);
    border-color: var(--d-accent);
    box-shadow: 0 0 0 3px var(--d-accent-soft);
}
.form-control:disabled, .form-control[readonly] {
    background: var(--d-bg-panel-muted);
    color: var(--d-text-muted);
}
.form-select option { background: var(--d-bg-panel); color: var(--d-text); }
.input-group-text {
    background: var(--d-bg-panel-muted);
    border-color: var(--d-border);
    color: var(--d-text-muted);
}
.form-check-input {
    background-color: var(--d-bg-panel);
    border-color: var(--d-border-dark-2);
}
.form-check-input:checked {
    background-color: var(--d-accent);
    border-color: var(--d-accent);
}
.form-check-label { color: var(--d-text); }

.card {
    background: var(--d-bg-panel);
    border-color: var(--d-border);
    border-radius: var(--d-radius);
    box-shadow: var(--d-shadow-panel);
    color: var(--d-text);
}
.card-header {
    background: var(--d-bg-panel-muted);
    border-bottom-color: var(--d-border);
    color: var(--d-text);
    font-weight: 600;
    font-size: 12.5px;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    color: var(--d-text);
}
.card-header .text-muted,
.card-header small {
    color: var(--d-text-muted) !important;
}

.table { font-size: 12.5px; color: var(--d-text); }
.table > :not(caption) > * > * { padding: 8px 13px; }
.table thead th {
    background: var(--d-bg-panel-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
    color: var(--d-text-muted);
    border-bottom-color: var(--d-border);
}

.modal-content {
    background: var(--d-bg-panel);
    color: var(--d-text);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius-lg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.50);
}
.modal-header {
    border-bottom-color: var(--d-border);
    background: var(--d-bg-panel-muted);
    color: var(--d-text);
}
.modal-footer {
    border-top-color: var(--d-border);
    background: var(--d-bg-panel-muted);
}
.modal-body { color: var(--d-text); }
.modal-title { color: var(--d-text); }
.btn-close {
    filter: invert(1) opacity(.70);
}

/* ---------- Giro del spinner ----------
   Boxicons traia `.ph-spin` con su propio @keyframes. Phosphor NO trae
   ninguna animacion —comprobado sobre su hoja: cero `@keyframes`— asi que
   la clase hay que ponerla aqui. Sin esto, `ph-spinner` sale quieto y
   parece que la pantalla se colgo, que es justo lo contrario de lo que
   un spinner tiene que decir. Mismos 2s lineales que el original. */
@keyframes phSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ph-spin { animation: phSpin 2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ph-spin { animation-duration: 6s; } }
.btn-close:hover { filter: invert(1) opacity(1); }

.dropdown-menu {
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    box-shadow: 0 12px 32px rgba(0,0,0,0.40);
    color: var(--d-text);
    padding: 4px;
}
.dropdown-item { color: var(--d-text); border-radius: var(--d-radius-sm); padding: 6px 10px; font-size: 12.5px; }
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(255,255,255,0.05);
    color: var(--d-text);
}
.dropdown-item.text-danger { color: #f87171 !important; }
.dropdown-divider { border-top-color: var(--d-border); }
.dropdown-header { color: var(--d-text-muted); font-size: 11px; }

/* ============================================================
   Card "ca-card" con header coloreado por variante. Global.
   ============================================================ */
.ca-card {
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    box-shadow: var(--d-shadow-panel);
    overflow: hidden; height: 100%;
    display: flex; flex-direction: column;
}
.ca-card__head {
    padding: 11px 14px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; row-gap: 6px;
    background: var(--d-bg-panel-muted);
    border-bottom: 1px solid var(--ca-head-border, var(--d-border));
    position: relative;
}
.ca-card__head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--ca-head-accent, #475569); opacity: .35; pointer-events: none;
}
.ca-card__title {
    /* El acento lo lleva el ícono; antes había además una barrita vertical
       antes del texto que competía con él y desalineaba el título. */
    font-size: 11.5px; font-weight: 700; color: var(--d-text); margin: 0;
    display: inline-flex; align-items: center; gap: 9px;
    text-transform: uppercase; letter-spacing: .07em;
}
.ca-card__title i { color: var(--ca-head-icon, var(--ca-head-accent, #94a3b8)); font-size: 16px; }
.ca-card__body { padding: 12px 14px; flex: 1; min-height: 0; }
.ca-card__count {
    font-family: var(--d-font-mono); font-size: 11.5px; color: var(--d-text-muted); font-weight: 700;
    background: rgba(15,23,42,0.05); border: 1px solid var(--d-border);
    padding: 2px 9px; border-radius: 999px;
}

/* ============================================================
   Cabecera de card en dos niveles
   ------------------------------------------------------------
   .ca-hd__top     fila 1: ícono + título a la izquierda, acciones a la derecha
   .ca-hd__metric  fila 2: la cifra del card como dato principal, con su
                   etiqueta y una línea de contexto en vez de una píldora suelta

   Ambas se declaran como fila completa dentro del flex del header, de modo
   que los headers antiguos (título + contador sin envoltorio) siguen igual.
   ============================================================ */
.ca-hd__top {
    flex: 1 1 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; row-gap: 8px;
}
.ca-hd__act { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ca-hd__metric {
    flex: 1 1 100%;
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px;
}
.ca-hd__n {
    font-size: 30px; font-weight: 800; line-height: .95;
    color: var(--ca-head-icon, var(--ca-head-accent, #64748b));
    font-variant-numeric: tabular-nums;
}
.ca-hd__lb { min-width: 0; }
.ca-hd__l1 { font-size: 14.5px; font-weight: 700; color: var(--d-text); line-height: 1.2; }
.ca-hd__l2 { font-size: 11px; color: var(--d-text-muted); margin-top: 2px; }

/* Bajada para los cards de gráfico, que no tienen una cifra que destacar */
.ca-hd__sub {
    flex: 1 1 100%;
    font-size: 11px; color: var(--d-text-muted); line-height: 1.35;
    margin-top: 6px;
}

/* Botón de acción de la cabecera: píldora de contorno */
.ca-hd__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: 999px;
    background: transparent;
    border: 1px solid var(--d-border);
    color: var(--d-text); font-size: 11.5px; font-weight: 600;
    line-height: 1.3; white-space: nowrap; cursor: pointer;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.ca-hd__btn i { font-size: 14px; }
.ca-hd__btn:hover { background: rgba(15,23,42,0.05); border-color: var(--d-text-faint); color: var(--d-text); }
.ca-card--ops   { --ca-head-accent: #0d9488; --ca-head-border: rgba(15,118,110,0.30); --ca-head-icon: #2dd4bf; }
.ca-card--team  { --ca-head-accent: #475569; --ca-head-border: rgba(71,85,105,0.40);  --ca-head-icon: #94a3b8; }
.ca-card--alert { --ca-head-accent: #b45309; --ca-head-border: rgba(180,83,9,0.32);   --ca-head-icon: #f59e0b; }
.ca-card--visit { --ca-head-accent: #1e3a8a; --ca-head-border: rgba(30,64,175,0.36);  --ca-head-icon: #60a5fa; }
.ca-card--docs  { --ca-head-accent: #334155; --ca-head-border: rgba(51,65,85,0.46);   --ca-head-icon: #94a3b8; }
.ca-card--stats { --ca-head-accent: #4338ca; --ca-head-border: rgba(67,56,202,0.30);  --ca-head-icon: #818cf8; }

/* ============================================================
   KPIs "ca-kpi" — tarjeta con ícono + valor + barra de acento.
   Global para Tareas, Aseo, Cliente Dashboard, etc.
   ============================================================ */
.ca-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1200px) { .ca-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px)  { .ca-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ca-kpi {
    position: relative; display: flex; gap: 10px; align-items: center;
    padding: 12px 12px 12px 14px;
    background: var(--d-bg-panel); border: 1px solid var(--d-border); border-radius: var(--d-radius);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ca-kpi:hover { transform: translateY(-1px); border-color: rgba(15,23,42,0.16); box-shadow: 0 4px 14px rgba(16,24,40,.10); }
.ca-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--d-border); }
.ca-kpi__icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--d-bg-panel-muted); color: var(--d-text-muted); font-size: 20px;
}
.ca-kpi__body { min-width: 0; flex: 1; }
.ca-kpi__label {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--d-text-muted); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-kpi__value {
    font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
    color: var(--d-text); margin-top: 2px;
    display: inline-flex; align-items: center; gap: 8px;
}
.ca-kpi__hint {
    font-size: 10.5px; color: var(--d-text-muted); margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-kpi__pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--d-ok);
    box-shadow: 0 0 0 0 rgba(76,175,80,.6); animation: caKpiPulse 1.6s ease-out infinite;
}
@keyframes caKpiPulse {
    0% { box-shadow: 0 0 0 0 rgba(76,175,80,.55); }
    70% { box-shadow: 0 0 0 8px rgba(76,175,80,0); }
    100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
.ca-kpi--ok::before     { background: var(--d-ok, #10b981); }
.ca-kpi--ok .ca-kpi__icon     { background: rgba(16,185,129,.12);  color: var(--d-ok, #10b981); }
.ca-kpi--ok .ca-kpi__value    { color: var(--d-ok, #10b981); }
.ca-kpi--warn::before   { background: var(--d-warn, #f59e0b); }
.ca-kpi--warn .ca-kpi__icon   { background: rgba(245,158,11,.14); color: var(--d-warn, #f59e0b); }
.ca-kpi--warn .ca-kpi__value  { color: var(--d-warn, #f59e0b); }
.ca-kpi--danger::before { background: var(--d-danger, #ef4444); }
.ca-kpi--danger .ca-kpi__icon { background: rgba(239,68,68,.14); color: var(--d-danger, #ef4444); }
.ca-kpi--danger .ca-kpi__value{ color: var(--d-danger, #ef4444); }
.ca-kpi--accent::before { background: var(--d-accent, #3b82f6); }
.ca-kpi--accent .ca-kpi__icon { background: rgba(59,130,246,.14); color: var(--d-accent, #3b82f6); }
.ca-kpi--accent .ca-kpi__value{ color: var(--d-accent, #3b82f6); }
.ca-kpi--info::before   { background: #6c8cff; }
.ca-kpi--info .ca-kpi__icon   { background: rgba(108,140,255,.14); color: #6c8cff; }
.ca-kpi--mute::before   { background: var(--d-border); }

/* ============================================================
   Modal genérico "ca-doc-modal" — usado por Tareas, Aseo (Planes,
   Insumos, Cumplimiento), Cliente Dashboard, etc. Definido global
   para que funcione en todas las páginas (antes vivía sólo en el
   <style> del Cliente Dashboard).
   ============================================================ */
.ca-doc-modal .modal-dialog { max-width: min(1100px, 96vw); }
.ca-doc-modal__content {
    background: var(--d-bg-panel);
    color: var(--d-text);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius-lg);
    overflow: hidden;
}
.ca-doc-modal__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--d-bg-panel-muted) 0%, var(--d-bg-panel) 100%);
    border-bottom: 1px solid var(--d-border);
    position: relative;
}
.ca-doc-modal__icon {
    width: 52px; height: 52px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(59,130,246,0.14);
    color: var(--d-accent, #3b82f6);
    border-radius: 12px;
    font-size: 28px;
    overflow: hidden;
}
/* Garantizar que cualquier <img> (logo) dentro del icono se ajuste a la caja */
.ca-doc-modal__icon img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain; display: block;
}
.ca-doc-modal__title-block { flex: 1; min-width: 0; padding-right: 34px; }
.ca-doc-modal__eyebrow {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--d-text-muted); font-weight: 600; margin-bottom: 2px;
}
.ca-doc-modal__title {
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
    margin: 0 0 8px; color: var(--d-text); line-height: 1.25; word-break: break-word;
}
.ca-doc-modal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ca-doc-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; padding: 3px 9px; border-radius: 999px;
    background: var(--d-bg-panel-muted); color: var(--d-text-muted);
    border: 1px solid var(--d-border); white-space: nowrap;
}
.ca-doc-chip i { font-size: 12px; }
.ca-doc-chip--status { font-weight: 600; }
.ca-doc-chip--ok     { background: rgba(16,185,129,.14); color: var(--d-ok, #10b981);    border-color: rgba(16,185,129,.30); }
.ca-doc-chip--warn   { background: rgba(245,158,11,.14); color: var(--d-warn, #f59e0b);  border-color: rgba(245,158,11,.30); }
.ca-doc-chip--danger { background: rgba(239,68,68,.14);  color: var(--d-danger, #ef4444); border-color: rgba(239,68,68,.30); }
.ca-doc-modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px;
    border: 1px solid var(--d-border);
    background: var(--d-bg-panel);
    color: var(--d-text-muted);
    border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; z-index: 2;
    transition: background .12s ease, color .12s ease;
}
.ca-doc-modal__close:hover { background: var(--d-bg-panel-muted); color: var(--d-text); }
.ca-doc-modal__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 8px 18px;
    background: var(--d-bg-panel);
    border-bottom: 1px solid var(--d-border);
}
.ca-doc-modal__filename {
    font-size: 11px; color: var(--d-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-doc-modal__toolbar-right { display: flex; gap: 6px; align-items: center; }
.ca-doc-modal__body {
    padding: 16px 18px;
    background: var(--d-bg-panel);
    /* Scroll garantizado en formularios largos.
       En iOS, 100vh mide la ventana con las barras de Safari ocultas, así que
       el modal se extendía por debajo de lo visible. dvh usa la altura real;
       la línea con vh queda como respaldo para navegadores sin soporte. */
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    max-height: calc(100dvh - 240px);
}
.ca-doc-modal__footer {
    background: var(--d-bg-panel);
    border-top: 1px solid var(--d-border);
    padding: 10px 18px;
}
/* Preview area (modal de documentos) */
.ca-doc-preview {
    background: #0e1218; border: 1px solid var(--d-border); border-radius: var(--d-radius-sm);
    min-height: 460px; display: flex; align-items: stretch; justify-content: stretch;
    overflow: hidden; position: relative;
}
.ca-doc-preview iframe, .ca-doc-preview img { display: block; width: 100%; }
.ca-doc-preview img { max-height: 70vh; object-fit: contain; margin: 0 auto; }
.ca-doc-preview__empty, .ca-doc-preview__error {
    margin: auto; text-align: center; color: var(--d-text-muted); font-size: 13px; padding: 32px;
}
.ca-doc-preview__empty i, .ca-doc-preview__error i {
    font-size: 36px; display: block; margin-bottom: 10px; opacity: .7;
}
.ca-doc-preview__error { color: var(--d-danger, #ef4444); }
.ca-doc-preview__fallback { margin: auto; text-align: center; padding: 40px 24px; }
.ca-doc-preview__fallback .pf-icon {
    width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(59,130,246,0.14); color: var(--d-accent, #3b82f6); font-size: 36px;
}
.ca-doc-preview__fallback .pf-title { font-weight: 600; font-size: 14px; color: var(--d-text); margin-bottom: 4px; }
.ca-doc-preview__fallback .pf-sub { font-size: 12px; color: var(--d-text-muted); margin-bottom: 14px; }
/* Inputs y labels reutilizados por los forms de estos modales */
.alerta-label, .tar-label {
    display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--d-text-muted); font-weight: 700; margin-bottom: 4px;
}
.alerta-error {
    margin-top: 10px; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.30);
    color: #f87171; padding: 8px 12px; border-radius: var(--d-radius-sm); font-size: 12px;
}

/* Secciones de detalle reutilizadas en modales (ingresos, tareas, aseo) */
.ingreso-section { margin-bottom: 14px; }
.ingreso-section h6 {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--d-text-muted); font-weight: 700; margin: 0 0 8px;
    display: inline-flex; align-items: center; gap: 6px;
}
.ingreso-section h6 i { color: var(--d-accent, #3b82f6); }
.ingreso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ingreso-field {
    background: var(--d-bg-panel-muted); border: 1px solid var(--d-border);
    border-radius: var(--d-radius-sm); padding: 8px 10px;
}
.ingreso-field__label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--d-text-faint); font-weight: 700; }
.ingreso-field__value { font-size: 12.5px; color: var(--d-text); margin-top: 2px; word-break: break-word; }
.ingreso-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ingreso-foto {
    position: relative; aspect-ratio: 1 / 1; background: #0e1218;
    border: 1px solid var(--d-border); border-radius: var(--d-radius-sm); overflow: hidden; cursor: pointer;
}
.ingreso-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ingreso-foto__tag {
    position: absolute; left: 5px; bottom: 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em;
    padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,0.55); color: #fff; text-transform: uppercase;
}
.ingreso-acomp {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    background: var(--d-bg-panel-muted); border: 1px solid var(--d-border);
    border-radius: var(--d-radius-sm); margin-bottom: 6px;
}
.ingreso-acomp__num {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    background: var(--d-bg-panel); color: var(--d-text-muted);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px;
}
@media (max-width: 768px) {
    .ca-doc-modal .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); }
    .ca-doc-modal__body {
        max-height: calc(100vh - 180px);
        max-height: calc(100dvh - 180px);
    }
}

.badge.bg-success { background: var(--d-ok) !important; }
.badge.bg-danger  { background: var(--d-danger) !important; }
.badge.bg-warning { background: var(--d-warn) !important; color: #fff !important; }
.badge.bg-info    { background: var(--d-accent-dark) !important; }
.badge.bg-secondary { background: var(--d-text-muted) !important; }

/* Loading overlay */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(11,18,32,0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
}
.loading-overlay { color: var(--d-accent); }

/* ---------- Indicador de carga propio ----------
   Sustituye al `.spinner-border` de Bootstrap, que es un borde con un trozo
   transparente y se ve igual en cualquier producto.

   Se valoro Lottie y se descarto por el peso: su build mas liviana son
   **164 KB**, mas que Leaflet (144) — seria el segundo script del panel, para
   dibujar un circulo. Esto son ~1 KB y es el mismo recurso que ya usan el halo
   del SOS y el rebote de los pines: SVG y keyframes.

   Dos animaciones a la vez, que es lo que lo hace parecer vivo: el SVG entero
   gira a velocidad constante y el arco **respira** —crece y se encoge— con su
   propio ritmo. Con solo el giro queda un arco rigido dando vueltas.

   `currentColor` en las dos lineas: asi la clase se puede soltar en cualquier
   sitio y toma el color de donde cae. El velo lo fija en el acento. */
.d-cargando {
    display: block; width: 44px; height: 44px;
    animation: dCargandoGirar 1.9s linear infinite;
}
.d-cargando circle {
    fill: none; stroke-width: 3.5; stroke-linecap: round;
    stroke: currentColor;
}
.d-cargando__pista { opacity: .18; }
.d-cargando__arco  { animation: dCargandoArco 1.5s ease-in-out infinite; }

@keyframes dCargandoGirar { to { transform: rotate(360deg); } }
/* Los numeros son PORCENTAJES del contorno, no pixeles: el `pathLength="100"`
   del SVG reescala el trazo discontinuo. Sin eso habria que calcular 2*PI*r a
   mano y cualquier cambio de radio descuadraria el hueco en silencio. */
@keyframes dCargandoArco {
    0%   { stroke-dasharray: 3 97;  stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 70 30; stroke-dashoffset: -12; }
    100% { stroke-dasharray: 3 97;  stroke-dashoffset: -100; }
}

/* Aqui NO se apaga del todo, al reves que las tarjetas: en un spinner el
   movimiento ES la informacion, y uno quieto se lee como que la pantalla se
   colgo. Se deja girando mas lento y sin el latido del arco. */
@media (prefers-reduced-motion: reduce) {
    .d-cargando { animation-duration: 3.2s; }
    .d-cargando__arco { animation: none; stroke-dasharray: 25 75; }
}

/* Tamanos. El `viewBox` es fijo, asi que el trazo escala solo y no hay que
   tocar `stroke-width`… salvo en el chico: a 15px un trazo de 3,5 sobre 44
   queda en 1,2 reales y se ve anemico al lado del texto de un boton. */
.d-cargando--sm { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
.d-cargando--sm circle { stroke-width: 5; }
.d-cargando--md { width: 28px; height: 28px; }
.d-cargando--lg { width: 48px; height: 48px; }

/* El color sale de `currentColor`, que es lo correcto DENTRO de un boton —ahi
   tiene que seguir al texto, blanco sobre el primario y oscuro sobre el
   secundario—. Suelto en una pagina no hereda nada util, y para eso esta este
   modificador. */
.d-cargando--acento { color: var(--d-accent); }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    :root { --d-sidebar-w: 0px; }
    .d-app { grid-template-columns: 1fr; }
    .d-sidebar {
        transform: translateX(-100%);
        width: 240px;
        transition: transform .2s ease;
    }
    html.d-sidebar-open .d-sidebar { transform: translateX(0); width: 240px; }
    html.d-sidebar-open .d-sb-overlay { display: block; }
    .d-sb-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1035;
    }
}

/* ===== Banner global de alerta SOS (pánico) ===== */
.sos-banner {
    position: fixed;
    left: 50%;
    top: -120px;
    transform: translateX(-50%);
    z-index: 4000;
    width: min(720px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 60%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 18px 50px rgba(220, 38, 38, 0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
    opacity: 0;
    pointer-events: none;
    transition: top .35s cubic-bezier(.2,.9,.3,1.4), opacity .25s ease;
}
.sos-banner.is-visible {
    top: 14px;
    opacity: 1;
    pointer-events: auto;
}
.sos-banner.shake { animation: sosShake .5s ease; }
@keyframes sosShake {
    0%,100% { transform: translateX(-50%); }
    20%     { transform: translateX(calc(-50% - 7px)); }
    40%     { transform: translateX(calc(-50% + 7px)); }
    60%     { transform: translateX(calc(-50% - 5px)); }
    80%     { transform: translateX(calc(-50% + 5px)); }
}
/* Mientras la alarma suena/vibra: resplandor pulsante + cursor que invita a tocar */
.sos-banner.is-visible.sos-banner--alarming {
    cursor: pointer;
    animation: sosGlow 1.1s ease-in-out infinite;
}
@keyframes sosGlow {
    0%, 100% { box-shadow: 0 18px 50px rgba(220, 38, 38, 0.45), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 0 0 rgba(239,68,68,0.55); }
    50%      { box-shadow: 0 18px 60px rgba(220, 38, 38, 0.75), 0 0 0 1px rgba(255,255,255,0.20) inset, 0 0 0 12px rgba(239,68,68,0.0); }
}
.sos-banner--alarming .sos-banner__hint { display: inline; }
.sos-banner__hint {
    display: none;
    font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
}
.sos-banner__pulse {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18);
    font-size: 24px;
    position: relative;
}
.sos-banner__pulse::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.7);
    animation: sosPulse 1.4s ease-out infinite;
}
@keyframes sosPulse {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.9); opacity: 0; }
}
.sos-banner__body { flex: 1 1 auto; min-width: 0; }
.sos-banner__title {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .2px;
    line-height: 1.1;
}
.sos-banner__title #sosBannerCount {
    display: inline-block;
    min-width: 22px;
    padding: 0 6px;
    margin-right: 2px;
    border-radius: 7px;
    background: #fff;
    color: #b91c1c;
    text-align: center;
}
.sos-banner__detail {
    margin-top: 3px;
    font-size: 13px;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sos-banner__detail strong { font-weight: 700; }
.sos-banner__meta { opacity: .8; }
.sos-banner__more { opacity: .9; font-weight: 600; }
.sos-banner__btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: #fff;
    color: #b91c1c;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.sos-banner__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    color: #991b1b;
}
.sos-banner__close {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border: none;
    border-radius: 9px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.sos-banner__close:hover { background: rgba(255,255,255,0.3); }
@media (max-width: 640px) {
    .sos-banner { flex-wrap: wrap; gap: 10px; }
    .sos-banner__detail { white-space: normal; }
    .sos-banner__btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== Banner global de seguimiento intensivo =====
   Calcado del de SOS, con DOS diferencias deliberadas:

   1. NARANJA, no rojo. El rojo esta reservado al boton de panico en toda la
      app (ver .ct-mk--sos en /Central). Si un seguimiento se pintara igual,
      el rojo dejaria de significar "emergencia".
   2. SIN alarma en bucle. La alarma tambien es del panico. Aqui suena un
      aviso corto una vez por episodio y basta: alguien avisando de que hay
      que saber donde esta no es lo mismo que alguien pidiendo auxilio.

   Es un ESTADO, no un suceso: se queda mientras el episodio siga abierto. */
.seg-banner {
    position: fixed;
    left: 50%;
    top: -120px;
    transform: translateX(-50%);
    z-index: 3900;   /* por debajo del de SOS (4000): el panico manda */
    width: min(720px, calc(100vw - 24px));
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 60%, #f97316 100%);
    color: #fff;
    box-shadow: 0 16px 44px rgba(234, 88, 12, 0.40), 0 0 0 1px rgba(255,255,255,0.08) inset;
    opacity: 0;
    pointer-events: none;
    transition: top .35s cubic-bezier(.2,.9,.3,1.4), opacity .25s ease;
}
.seg-banner.is-visible { top: 14px; opacity: 1; pointer-events: auto; }

/* Cuando el panico tambien esta en pantalla, este baja y lo deja arriba.
   Va por selector de hermano y no por JavaScript: asi no hay dos sitios que
   puedan desincronizarse, y el orden lo decide el DOM. Exige que #segBanner
   vaya DESPUES de #sosBanner, que es como estan escritos en _Layout. */
#sosBanner.is-visible ~ .seg-banner.is-visible { top: 104px; }

.seg-banner__ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.16); font-size: 20px; }
/* Late despacio: dice "esto sigue pasando" sin llamar como una emergencia. */
.seg-banner__ic i { animation: segLatido 2.4s ease-in-out infinite; }
@keyframes segLatido { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.seg-banner__body { flex: 1 1 auto; min-width: 0; }
.seg-banner__title { font-weight: 800; font-size: 14px; line-height: 1.2; }
.seg-banner__detail { font-size: 12.5px; opacity: .95; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-banner__detail strong { font-weight: 700; }
.seg-banner__meta { opacity: .8; }
.seg-banner__more { opacity: .9; font-weight: 600; }

.seg-banner__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 10px; background: #fff; color: #c2410c;
    font-weight: 700; font-size: 13px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease; }
.seg-banner__btn:hover { transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25); color: #9a3412; }

.seg-banner__close { flex: 0 0 auto; width: 30px; height: 30px; border: none;
    border-radius: 9px; background: rgba(255,255,255,0.15); color: #fff;
    font-size: 19px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease; }
.seg-banner__close:hover { background: rgba(255,255,255,0.3); }

@media (max-width: 640px) {
    .seg-banner { flex-wrap: wrap; gap: 10px; }
    .seg-banner__detail { white-space: normal; }
    .seg-banner__btn { flex: 1 1 auto; justify-content: center; }
    /* Apilado, el de SOS ocupa mas alto. */
    #sosBanner.is-visible ~ .seg-banner.is-visible { top: 150px; }
}

/* ===== Panel de alertas SOS activas (pantalla /Turnos) ===== */
.sos-panel {
    margin-bottom: 14px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 14px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(220,38,38,0.18) 0%, rgba(220,38,38,0) 55%),
        var(--d-bg-panel, #111a2e);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.10) inset, 0 10px 30px rgba(0,0,0,0.25);
    overflow: hidden;
}
.sos-panel__head {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(239,68,68,0.22);
    background: linear-gradient(90deg, rgba(220,38,38,0.18), rgba(220,38,38,0.02));
}
.sos-panel__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 800; color: #b91c1c;
}
.sos-panel__title i { font-size: 18px; color: #dc2626; }
.sos-panel__title strong { color: #7f1d1d; }
.sos-panel__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
    animation: sosDot 1.4s ease-out infinite;
}
@keyframes sosDot {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
    100% { box-shadow: 0 0 0 9px rgba(239,68,68,0); }
}
.sos-panel__hint { font-size: 12px; color: var(--d-text-muted, #94a3b8); }
.sos-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}
.sos-card {
    border: 1px solid rgba(239,68,68,0.30);
    border-radius: 12px;
    background: var(--d-bg-panel, #ffffff);
    padding: 12px;
    display: flex; flex-direction: column; gap: 9px;
}
.sos-card__top { display: flex; align-items: center; gap: 10px; }
.sos-card__avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    overflow: hidden;
    background: rgba(239,68,68,0.15);
    border: 2px solid rgba(239,68,68,0.5);
    display: flex; align-items: center; justify-content: center;
    color: #dc2626; font-size: 22px;
}
.sos-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sos-card__id { flex: 1 1 auto; min-width: 0; }
.sos-card__name {
    font-weight: 700; font-size: 14px; color: var(--d-text, #e2e8f0);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sos-card__rut { font-size: 11.5px; color: var(--d-text-muted, #94a3b8); font-variant-numeric: tabular-nums; }
.sos-card__origen {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(239,68,68,0.14); color: #dc2626;
    border: 1px solid rgba(239,68,68,0.35);
    white-space: nowrap;
}
.sos-card__meta {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: 12px; color: var(--d-text-muted, #94a3b8);
}
.sos-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.sos-card__meta i { font-size: 14px; opacity: .85; }
.sos-card__desc {
    font-size: 12.5px; color: var(--d-text, #1f2733);
    background: rgba(15,23,42,0.04);
    border-left: 3px solid rgba(239,68,68,0.6);
    padding: 6px 9px; border-radius: 6px;
    font-style: italic;
}
.sos-card__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.sos-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    padding: 6px 11px; border-radius: 8px;
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s ease, transform .12s ease, border-color .15s ease;
}
.sos-btn:hover { transform: translateY(-1px); }
.sos-btn--map { background: rgba(59,130,246,0.12); color: #2563eb; border-color: rgba(59,130,246,0.4); }
.sos-btn--map:hover { background: rgba(59,130,246,0.20); }
.sos-btn--ok { background: rgba(16,185,129,0.14); color: #059669; border-color: rgba(16,185,129,0.4); }
.sos-btn--ok:hover { background: rgba(16,185,129,0.22); }
.sos-btn--ghost { background: transparent; color: var(--d-text-muted); border-color: var(--d-border); }
.sos-btn--ghost:hover { background: rgba(15,23,42,0.06); color: var(--d-text); }
.sos-btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ============================================================
   Transmisión en vivo desde una alerta SOS
   El guardia inicia el video desde la app móvil y la alerta pasa a
   mostrar el botón para verlo sin salir de la pantalla de Turnos.
   ============================================================ */
.sos-btn--live {
    background: #dc2626; color: #fff; border-color: #b91c1c;
    box-shadow: 0 0 0 0 rgba(220,38,38,.55);
    animation: sosLivePulse 2s ease-out infinite;
}
.sos-btn--live:hover { background: #b91c1c; color: #fff; }
@keyframes sosLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
/* Punto rojo que late, para que se lea como "al aire" */
.sos-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
    animation: sosLiveBlink 1.2s ease-in-out infinite;
}
@keyframes sosLiveBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* La tarjeta con transmisión activa se destaca del resto */
.sos-card.is-live { border-color: rgba(220,38,38,.55); }

/* ── Visor ── */
.sos-live-modal { background: #0b1220; color: #e2e8f0; border: 1px solid #1e3a5c; }
.sos-live-modal__head {
    border-bottom: 1px solid #1e3a5c; padding: 12px 16px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.sos-live-modal__title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #fca5a5;
    text-transform: uppercase; letter-spacing: .06em;
}
.sos-live-modal__sub { font-size: 13.5px; color: #e2e8f0; margin-top: 3px; font-weight: 600; }
.sos-live-modal__body { padding: 0; }
.sos-live-stage {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #000; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.sos-live-stage video {
    width: 100%; height: 100%; object-fit: contain; background: #000;
}
.sos-live-estado {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #94a3b8; font-size: 13px; text-align: center; padding: 20px;
}
.sos-live-estado i { font-size: 30px; }
.sos-live-audio {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,.92); color: #0f172a;
    border: 0; font-size: 12px; font-weight: 700;
}
.sos-card__nocoord {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--d-text-muted, #94a3b8); opacity: .75;
}
.sos-card.is-resolving { opacity: .5; pointer-events: none; }
/* Marker SOS rojo en el mapa Leaflet */
.tlm-sosmarker {
    width: 36px; height: 36px; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #dc2626;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(220,38,38,0.6);
    display: flex; align-items: center; justify-content: center;
}
.tlm-sosmarker i { transform: rotate(45deg); color: #fff; font-size: 19px; }

/* ===== Recorrido del guardia (traza de movimiento en /Turnos) ===== */
.tlm-trail-arrow {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    color: #bfdbfe;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.tlm-trail-arrow i { font-size: 18px; line-height: 1; }
.tlm-trail-info {
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex; align-items: center; gap: 12px;
    max-width: calc(100% - 24px);
    padding: 9px 12px;
    border-radius: 11px;
    background: rgba(13, 34, 54, 0.94);
    border: 1px solid rgba(59,130,246,0.45);
    box-shadow: 0 6px 22px rgba(0,0,0,0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--d-text, #e2e8f0);
}
.tlm-trail-info__main { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tlm-trail-info__main i { font-size: 16px; color: #60a5fa; }
.tlm-trail-info__main strong { color: #fff; }
.tlm-trail-info__meta { font-size: 11.5px; color: var(--d-text-muted, #94a3b8); white-space: nowrap; }
.tlm-trail-info__close {
    border: none; background: rgba(255,255,255,0.10); color: var(--d-text-muted, #94a3b8);
    width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
    transition: background .15s ease, color .15s ease;
}
.tlm-trail-info__close:hover { background: rgba(255,255,255,0.2); color: #fff; }
@media (max-width: 560px) {
    .tlm-trail-info { flex-wrap: wrap; gap: 6px 10px; }
    .tlm-trail-info__main, .tlm-trail-info__meta { white-space: normal; }
}

/* ===== Mapa "personal en turno" del cliente (Dashboard) ===== */
/* Header del mapa del cliente: mismo navy institucional que .ca-card__head */
.climap-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; row-gap: 6px;
    padding: 12px 14px;
    background: #0d2236;
    border-bottom: 1px solid #1e3a5c;
    /* Acento del mapa: azul, igual que el pin de ubicación */
    --ca-head-icon: #60a5fa;
}
.climap-head__title {
    font-size: 11.5px; font-weight: 700; color: #e2e8f0;
    display: inline-flex; align-items: center; gap: 9px;
    text-transform: uppercase; letter-spacing: .07em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.30);
}
.climap-head__title i { font-size: 16px; color: var(--ca-head-icon, #60a5fa); }
.climap-head__meta { display: inline-flex; align-items: center; gap: 10px; }
.climap-badge {
    font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
    background: rgba(59,130,246,0.16); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); white-space: nowrap;
}
.climap-sync { font-size: 11px; color: var(--d-text-muted); white-space: nowrap; }
.climap-panel { display: flex; flex-direction: column; height: 100%; }
.climap-wrap { position: relative; flex: 1 1 auto; min-height: 360px; background: #e5e9ee; }
.climap-canvas { position: absolute; inset: 0; z-index: 1; }
.climap-empty {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: var(--d-text-muted); text-align: center; padding: 20px; font-size: 13px;
}
.climap-empty i { font-size: 34px; opacity: .5; }
.climap-pin-wrap { position: relative; width: 34px; height: 34px; }
.climap-pin {
    position: relative; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
    border: 2px solid #3b82f6; background: #0d2236;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; font-weight: 700; font-size: 13px;
}
.climap-pin img { width: 100%; height: 100%; object-fit: cover; }
.climap-pin-pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(59,130,246,0.7);
    animation: climapPulse 1.8s ease-out infinite;
}
@keyframes climapPulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 700px) { .climap-wrap { min-height: 300px; } }

/* Tarjetas flotantes de turnos en curso (sobre el mapa del cliente) */
.climap-cards {
    position: absolute; top: 10px; left: 10px; z-index: 4;
    display: flex; flex-direction: column; gap: 7px;
    width: 232px; max-width: 62%;
    max-height: calc(100% - 20px); overflow-y: auto;
    padding-right: 2px;
}
.climap-card {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 4px 14px rgba(16,24,40,0.16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease;
}
.climap-card:hover { border-color: rgba(59,130,246,0.5); transform: translateY(-1px); }
.climap-card.is-active { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6, 0 4px 14px rgba(16,24,40,0.20); }
.climap-card__ava {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: #0d2236; border: 1px solid rgba(59,130,246,0.4);
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; font-weight: 700; font-size: 12px;
}
.climap-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.climap-card__body { flex: 1 1 auto; min-width: 0; }
.climap-card__name { font-size: 12px; font-weight: 600; color: var(--d-text, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.climap-card__meta { font-size: 10.5px; color: var(--d-text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.climap-card__meta i { font-size: 12px; }
.climap-card__rondas {
    flex: 0 0 auto; border: none; cursor: pointer;
    width: 26px; height: 26px; border-radius: 7px;
    background: rgba(59,130,246,0.16); color: #93c5fd;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    transition: background .15s ease;
}
.climap-card__rondas:hover { background: rgba(59,130,246,0.3); }
@media (max-width: 700px) { .climap-cards { width: 178px; } }
.climap-card__hint { flex: 0 0 auto; color: var(--d-text-muted); font-size: 15px; opacity: .8; }
.climap-card:hover .climap-card__hint { color: #93c5fd; opacity: 1; }

/* Panel flotante de rondas dentro del mapa del cliente */
.climap-rondas {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
    width: 300px; max-width: 86%;
    background: rgba(13, 34, 54, 0.97);
    border-left: 1px solid rgba(255,255,255,0.10);
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column;
}
.climap-rondas.is-open { transform: translateX(0); }
.climap-rondas__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.climap-rondas__title { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--d-text); }
.climap-rondas__title small { display: block; font-weight: 400; font-size: 10.5px; color: var(--d-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.climap-rondas__close { flex: 0 0 auto; border: none; background: rgba(255,255,255,0.1); color: var(--d-text-muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.climap-rondas__close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.climap-rondas__body { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px; }
/* Detalle de checkpoints dentro de cada ronda (cuáles marcó y a qué hora) */
.climap-rondas .rip-cks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.climap-rondas .rip-ck {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; padding: 4px 0;
    border-top: 1px dashed rgba(255,255,255,0.07);
}
.climap-rondas .rip-ck:first-child { border-top: 0; }
.climap-rondas .rip-ck__num {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 700;
    background: var(--d-bg-panel-muted); color: var(--d-text-muted);
}
.climap-rondas .rip-ck__name { flex: 1 1 auto; min-width: 0; color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.climap-rondas .rip-ck__name i { font-size: 12px; color: var(--d-warn, #f59e0b); }
.climap-rondas .rip-ck__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--d-text-muted); font-size: 10.5px; }
.climap-rondas .rip-ck--ok .rip-ck__num { background: rgba(76,175,80,.22); color: #4caf50; }
.climap-rondas .rip-ck--ok .rip-ck__time { color: #4caf50; }
.climap-rondas .rip-ck--miss .rip-ck__num { background: rgba(239,68,68,.20); color: #f87171; }
.climap-rondas .rip-ck--miss .rip-ck__time { color: #f87171; }
.climap-rondas .rip-ck--pend { opacity: .7; }

/* Contacto del supervisor (WhatsApp) en "Equipo asignado" */
.ca-team-contact { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 4px; border-top: 1px solid var(--d-border); margin-top: 8px; }
.ca-team-contact__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ca-team-contact__name { font-size: 12px; color: var(--d-text); display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-team-contact__name i { color: var(--d-accent, #3b82f6); font-size: 14px; flex: 0 0 auto; }
.ca-team-contact__nophone { font-size: 11px; color: var(--d-text-faint); flex: 0 0 auto; }
.ca-wa-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; text-decoration: none;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(37,211,102,0.16); color: #25d366; border: 1px solid rgba(37,211,102,0.4);
    transition: background .15s ease, transform .12s ease;
}
.ca-wa-btn:hover { background: rgba(37,211,102,0.28); color: #25d366; transform: translateY(-1px); }
.ca-wa-btn i { font-size: 15px; }

/* ===== Animaciones de entrada (KPIs y cards del dashboard) ===== */
@keyframes caFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.anim-in { animation: caFadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .anim-in { animation: none !important; } }

/* ===== Ajustes móviles del Dashboard del cliente (mapa + tarjetas + rondas) ===== */
@media (max-width: 640px) {
    /* Header del mapa: que pueda envolver y no desborde */
    .climap-head { flex-wrap: wrap; gap: 6px 8px; padding: 9px 11px; }
    .climap-head__title { font-size: 12.5px; }
    .climap-head__meta { gap: 7px; flex-wrap: wrap; }
    .climap-sync { width: 100%; order: 3; }

    /* Tarjetas flotantes: más compactas para no tapar el mapa */
    .climap-cards { width: 158px; max-width: 56%; gap: 6px; top: 8px; left: 8px; }
    .climap-card { padding: 6px 7px; gap: 7px; }
    .climap-card__ava { width: 26px; height: 26px; font-size: 11px; }
    .climap-card__name { font-size: 11.5px; }
    .climap-card__meta { font-size: 10px; }

    /* Panel de rondas: casi a pantalla completa sobre el mapa */
    .climap-rondas { width: 340px; max-width: 92%; }

    /* Contacto del supervisor: el botón no se aprieta */
    .ca-team-contact__name { font-size: 11.5px; }
    .ca-wa-btn { padding: 5px 9px; }
}
@media (max-width: 380px) {
    .climap-cards { width: 138px; max-width: 52%; }
    .climap-card__meta { display: none; } /* en pantallas muy chicas, solo nombre */
}
/* KPIs del cliente: 2 columnas en teléfonos (en vez de 1) para que sea más compacto.
   Va después de la cascada global, así que gana sobre el "1fr" de ≤460px. */
@media (max-width: 460px) {
    .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ===== Chip "tareas en curso" en el header ===== */
.tareas-chip {
    display: inline-flex; align-items: center; gap: 5px;
    text-decoration: none;
    color: #b45309 !important;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.45);
    padding: 4px 10px !important;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    width: auto !important; height: auto !important;
    font-variant-numeric: tabular-nums;
    transition: background .15s ease;
}
.tareas-chip:hover { background: rgba(245, 158, 11, 0.26); color: #92400e !important; }
.tareas-chip i { font-size: 15px; }
.tareas-chip__label { font-weight: 600; opacity: .9; }

/* ===== Historial de alertas SOS (/Sos) ===== */
.sos-ava {
    flex: 0 0 auto;
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,0.16); color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.35);
    font-size: 13px; font-weight: 700;
}
.sos-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--d-fs-chip); font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid transparent; white-space: nowrap;
}
.sos-badge--activa   { background: rgba(239,68,68,0.14); color: #dc2626; border-color: rgba(239,68,68,0.40); }
.sos-badge--resuelta { background: rgba(16,185,129,0.14); color: #059669; border-color: rgba(16,185,129,0.40); }
.sos-badge--falsa    { background: rgba(148,163,184,0.16); color: #64748b; border-color: rgba(148,163,184,0.35); }
.sos-origen-badge {
    display: inline-block;
    font-size: var(--d-fs-chip); font-weight: 600;
    padding: 2px 8px; border-radius: 6px;
    background: var(--d-bg-panel-muted); color: var(--d-text-muted);
    border: 1px solid var(--d-border); white-space: nowrap;
}
.sos-maplink {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--d-accent, #3b82f6);
    text-decoration: none; white-space: nowrap;
}
.sos-maplink:hover { text-decoration: none; opacity: .85; }
/* Badge de conteo SOS en el menú lateral */
.d-sb-item__count--sos {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
.d-sb-item__count--alert {
    background: #dc2626 !important;
    color: #fff !important;
    border: 1px solid #dc2626 !important;
    border-radius: 999px;
    padding: 1px 7px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

/* Badge de WhatsApp (handoffs esperando) — ámbar y con pulso */
.d-sb-item__count--wa {
    background: #f59e0b !important;
    color: #1f1300 !important;
    border: 1px solid #f59e0b !important;
    border-radius: 999px;
    padding: 1px 7px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    animation: sbWaBadge 1.2s ease-in-out infinite;
}
/* Cuando hay handoffs esperando, el item y su ícono laten para llamar la atención */
.d-sb-item.is-wa-pending .d-sb-item__ic {
    color: #f59e0b;
    animation: sbWaIcon 1.5s ease-in-out infinite;
}
@keyframes sbWaBadge {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,158,11,.5); }
    50%       { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}
@keyframes sbWaIcon {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.15); opacity: .8; }
}

/* Toggle de sonido silenciado */
.d-topbar__btn.is-muted { color: var(--d-text-faint); opacity: .7; }

/* Toasts de notificaciones en tiempo real.
   Abajo a la derecha (8-10-2026, a pedido): arriba tapaban el buscador y los
   KPI de la central, que es justo donde se mira. El hueco de abajo descuenta
   el pie, que es `position: fixed`. El más nuevo queda abajo, junto al borde. */
#dRtToasts {
    position: fixed; right: 16px; bottom: calc(var(--d-footer-h, 34px) + 14px); z-index: 11000;
    display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px));
}
.d-rt-toast {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-left: 4px solid #dc2626;
    border-radius: 10px; padding: 12px 30px 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
    animation: dRtIn .28s ease; position: relative;
}
.d-rt-toast.is-out { animation: dRtOut .35s ease forwards; }
.d-rt-toast > i { font-size: 20px; color: #f87171; margin-top: 1px; }
.d-rt-toast__t { font-size: 13px; font-weight: 700; }
.d-rt-toast__d { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.d-rt-toast__x { position: absolute; top: 6px; right: 8px; background: none; border: none; color: #64748b; font-size: 16px; cursor: pointer; line-height: 1; }
.d-rt-toast__x:hover { color: #e2e8f0; }
/* El aviso de «la lista que miras quedo vieja». Mismo toast, otro oficio:
   azul y no rojo —el rojo en esta app es el boton de panico, y una lista
   desactualizada no es una emergencia— y con el icono girando para que se
   note que aparecio sin tener que estar mirando. */
.d-rt-toast--lista { border-left-color: var(--d-accent); }
.d-rt-toast--lista > i { color: #60a5fa; animation: dRtGira 1.1s ease .15s 2; }
@keyframes dRtGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    /* El giro es decoracion: el toast ya esta ahi con su color y su numero. */
    .d-rt-toast--lista > i { animation: none; }
}
/* Novedad reportada desde terreno: verde azulado, el color de la capa
   «Novedades» del mapa, con el ícono latiendo al llegar y una llamada a la
   acción abajo. */
.d-rt-toast--novedad { border-left-color: #14b8a6; }
.d-rt-toast--novedad > i {
    color: #2dd4bf; border-radius: 50%;
    animation: dRtLatido 1.2s ease-out .2s 3;
}
.d-rt-toast__a { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: #5eead4;
                 display: inline-flex; align-items: center; gap: 4px; }
.d-rt-toast--novedad:hover { border-color: #14b8a6; }
@keyframes dRtLatido {
    0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, .55); }
    100% { box-shadow: 0 0 0 12px rgba(45, 212, 191, 0); }
}

/* Entra subiendo desde el borde de abajo, que es de donde sale. */
@keyframes dRtIn { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dRtOut { to { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .d-rt-toast, .d-rt-toast.is-out, .d-rt-toast--novedad > i { animation: none; }
}

/* ============================================================
   Zona de arrastre para subir documentos (.dz)
   Se usa en Guardias/Documentos y Clientes/Documentos.
   ============================================================ */
.dz {
    margin: 8px 13px;
    padding: 18px 16px;
    border: 2px dashed var(--d-border-dark-2, rgba(15,23,42,0.22));
    border-radius: var(--d-radius);
    background: var(--d-bg-panel-muted);
    text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
    cursor: pointer;
}
.dz:hover { border-color: #3b82f6; background: rgba(59,130,246,.05); }
/* Estado mientras se arrastra un archivo encima */
.dz.is-over {
    border-color: #2563eb;
    background: rgba(59,130,246,.12);
    transform: scale(1.01);
}
.dz.is-over .dz__ic { transform: translateY(-2px); color: #2563eb; }
.dz__ic { font-size: 30px; color: var(--d-text-faint); display: block; margin-bottom: 4px; transition: transform .15s ease, color .15s ease; }
.dz__t { font-size: 13px; font-weight: 600; color: var(--d-text); }
.dz__d { font-size: 11px; color: var(--d-text-muted); margin-top: 2px; }
.dz__link {
    background: none; border: 0; padding: 0;
    color: #2563eb; font-size: 11px; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
/* Ficha del archivo ya adjunto dentro del modal */
.dz-file {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; margin-top: 8px;
    background: var(--d-bg-panel-muted); border: 1px solid var(--d-border);
    border-left: 3px solid #059669; border-radius: var(--d-radius);
}
.dz-file__ic { font-size: 22px; color: #059669; flex: 0 0 auto; }
.dz-file__n { font-size: 12.5px; font-weight: 600; color: var(--d-text); word-break: break-all; }
.dz-file__m { font-size: 11px; color: var(--d-text-muted); }


/* ═══════════════════════════════════════════════════════════════
   Iconos del menu lateral: animacion al pasar el puntero
   ───────────────────────────────────────────────────────────────
   Boxicons es una fuente, no imagenes, asi que esto se anima por CSS:
   pesa cero, hereda el color del tema y se ve nitido en cualquier
   pantalla. Un GIF por icono habria sumado peso, no seguiria el color
   del item activo y se veria borroso en pantallas HiDPI.

   Cada icono se mueve como se moveria la cosa que representa: el reloj
   gira, la campana repica, la patrulla avanza, el candado forcejea.
   La regla generica de abajo da un realce a cualquier icono que no
   tenga animacion propia, y las reglas especificas la sustituyen (misma
   especificidad, ganan por ir despues).
   ═══════════════════════════════════════════════════════════════ */

.d-sb-item__ic {
    /* La animacion mueve el glifo dentro de su caja; sin esto el layout
       del item se recalcularia en cada fotograma. */
    display: inline-block;
    will-change: transform;
}

.d-sb-item:hover .d-sb-item__ic,
.d-sb-group > summary:hover .d-sb-item__ic {
    animation: d-ic-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Operaciones ─────────────────────────────────────────────── */
.d-sb-item:hover .ph-squares-four,
.d-sb-group > summary:hover .ph-squares-four { animation: d-ic-grid .55s ease; }

.d-sb-item:hover .ph-clock,
.d-sb-group > summary:hover .ph-clock { animation: d-ic-reloj .9s cubic-bezier(.4, 0, .2, 1); }

.d-sb-item:hover .ph-article,
.d-sb-group > summary:hover .ph-article { animation: d-ic-hoja .5s ease; }

.d-sb-item:hover .ph-person-simple-walk,
.d-sb-group > summary:hover .ph-person-simple-walk { animation: d-ic-caminar .6s ease-in-out; }

.d-sb-item:hover .ph-check-square,
.d-sb-group > summary:hover .ph-check-square { animation: d-ic-tarea .45s ease; }

.d-sb-item:hover .ph-broadcast,
.d-sb-group > summary:hover .ph-broadcast { animation: d-ic-sos .7s ease-out; }

/* ── Dotacion ────────────────────────────────────────────────── */
.d-sb-item:hover .ph-shield,
.d-sb-group > summary:hover .ph-shield { animation: d-ic-escudo .6s ease; }

.d-sb-item:hover .ph-car,
.d-sb-group > summary:hover .ph-car { animation: d-ic-patrulla .6s cubic-bezier(.4, 0, .2, 1); }

/* ── Territorio ──────────────────────────────────────────────── */
.d-sb-item:hover .ph-map-pin,
.d-sb-group > summary:hover .ph-map-pin { animation: d-ic-chincheta .55s cubic-bezier(.34, 1.56, .64, 1); }

.d-sb-item:hover .ph-qr-code,
.d-sb-group > summary:hover .ph-qr-code { animation: d-ic-escaneo .8s ease-in-out; }

/* ── Analisis ────────────────────────────────────────────────── */
.d-sb-item:hover .ph-bell,
.d-sb-group > summary:hover .ph-bell {
    transform-origin: 50% 2px;   /* repica colgada del badajo, no del centro */
    animation: d-ic-campana .7s ease-in-out;
}

.d-sb-item:hover .ph-chart-bar,
.d-sb-group > summary:hover .ph-chart-bar {
    transform-origin: 50% 100%;  /* las barras crecen desde la base */
    animation: d-ic-barras .5s cubic-bezier(.34, 1.56, .64, 1);
}

.d-sb-item:hover .ph-magnifying-glass,
.d-sb-group > summary:hover .ph-magnifying-glass { animation: d-ic-lupa .7s ease-in-out; }

/* ── Configuracion ───────────────────────────────────────────── */
.d-sb-item:hover .ph-buildings,
.d-sb-group > summary:hover .ph-buildings { animation: d-ic-edificio .5s cubic-bezier(.34, 1.56, .64, 1); }

.d-sb-item:hover .ph-user-plus,
.d-sb-group > summary:hover .ph-user-plus { animation: d-ic-alta .55s cubic-bezier(.34, 1.56, .64, 1); }

.d-sb-item:hover .ph-lock,
.d-sb-group > summary:hover .ph-lock { animation: d-ic-candado .5s ease-in-out; }

.d-sb-item:hover .ph-device-mobile,
.d-sb-group > summary:hover .ph-device-mobile { animation: d-ic-vibrar .5s ease-in-out; }

/* ── Fotogramas ──────────────────────────────────────────────── */
@keyframes d-ic-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
@keyframes d-ic-grid {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.15) rotate(-8deg); }
    70%  { transform: scale(1.15) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes d-ic-reloj {
    0%   { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
@keyframes d-ic-hoja {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-3px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes d-ic-caminar {
    0%   { transform: translateX(0) translateY(0); }
    25%  { transform: translateX(-2px) translateY(-1px); }
    50%  { transform: translateX(2px) translateY(0); }
    75%  { transform: translateX(-1px) translateY(-1px); }
    100% { transform: translateX(0) translateY(0); }
}
@keyframes d-ic-tarea {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.18) rotate(-10deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes d-ic-sos {
    0%   { transform: scale(1); opacity: 1; }
    30%  { transform: scale(1.28); opacity: .75; }
    60%  { transform: scale(1.05); opacity: 1; }
    80%  { transform: scale(1.18); opacity: .85; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes d-ic-escudo {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.2); }
    50%  { transform: scale(1.08); }
    70%  { transform: scale(1.16); }
    100% { transform: scale(1); }
}
@keyframes d-ic-patrulla {
    0%   { transform: translateX(0); }
    30%  { transform: translateX(4px); }
    45%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}
@keyframes d-ic-chincheta {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-5px) scale(1.1); }
    60%  { transform: translateY(1px) scale(.96); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes d-ic-escaneo {
    0%   { transform: scale(1); opacity: 1; }
    25%  { transform: scale(1.14); opacity: .55; }
    50%  { transform: scale(1.14); opacity: 1; }
    75%  { transform: scale(1.14); opacity: .55; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes d-ic-campana {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-12deg); }
    45%  { transform: rotate(9deg); }
    60%  { transform: rotate(-6deg); }
    75%  { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}
@keyframes d-ic-barras {
    0%   { transform: scaleY(1); }
    45%  { transform: scaleY(1.3); }
    100% { transform: scaleY(1); }
}
@keyframes d-ic-lupa {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-2px, -2px) scale(1.12); }
    50%  { transform: translate(2px, -1px) scale(1.12); }
    75%  { transform: translate(0, 1px) scale(1.12); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes d-ic-edificio {
    0%   { transform: translateY(0) scale(1); }
    45%  { transform: translateY(-4px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes d-ic-alta {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.2) rotate(-6deg); }
    70%  { transform: scale(1.08) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes d-ic-candado {
    0%   { transform: rotate(0) scale(1); }
    20%  { transform: rotate(-9deg) scale(1.1); }
    40%  { transform: rotate(9deg) scale(1.1); }
    60%  { transform: rotate(-5deg) scale(1.08); }
    80%  { transform: rotate(4deg) scale(1.04); }
    100% { transform: rotate(0) scale(1); }
}
@keyframes d-ic-vibrar {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-1.5px) rotate(-4deg); }
    40%  { transform: translateX(1.5px) rotate(4deg); }
    60%  { transform: translateX(-1.5px) rotate(-3deg); }
    80%  { transform: translateX(1.5px) rotate(3deg); }
    100% { transform: translateX(0); }
}

/* Quien pide menos movimiento en su sistema no recibe ninguno: la
   animacion es decorativa y nada depende de ella. */
@media (prefers-reduced-motion: reduce) {
    .d-sb-item:hover .d-sb-item__ic,
    .d-sb-group > summary:hover .d-sb-item__ic {
        animation: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   Piezas que varias pantallas ya usaban sin que existieran
   ───────────────────────────────────────────────────────────────
   .d-card, .d-chip y .req aparecen en Municipios, Inspectores y
   PuntosControl desde antes, pero no estaban definidas en ninguna
   hoja: los bloques se veian planos, sin fondo ni borde, y el
   asterisco de campo obligatorio salia del color del texto normal.
   ═══════════════════════════════════════════════════════════════ */

.d-card {
    background: var(--d-bg-panel);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
}

/* Etiqueta compacta para un valor de un conjunto pequeno (un rol, un
   estado). No es un boton: no reacciona al puntero. */
.d-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--d-border);
    background: var(--d-bg-panel);
    color: var(--d-text-muted);
    font-size: var(--d-fs-chip);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.d-chip--accent {
    border-color: color-mix(in srgb, var(--d-accent) 45%, transparent);
    background: color-mix(in srgb, var(--d-accent) 12%, transparent);
    color: var(--d-accent);
}

/* Asterisco de campo obligatorio. */
.req {
    color: var(--d-danger, #dc2626);
    margin-left: 2px;
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   Cifras del dia en la cabecera
   ───────────────────────────────────────────────────────────────
   Tres numeros que interesan estando en cualquier pantalla: cuantas
   novedades van hoy, cuanta gente hay en turno y cuantos SOS hubo.
   Cada uno lleva a su pantalla.
   ═══════════════════════════════════════════════════════════════ */

.d-hkpis {
    display: flex;
    align-items: center;
    gap: 4px;
}

.d-hkpi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--d-radius);
    border: 1px solid transparent;
    color: var(--d-text-muted);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.d-hkpi:hover {
    background: rgba(15, 23, 42, .05);
    border-color: rgba(15, 23, 42, .10);
    color: var(--d-text);
}
.d-hkpi i { font-size: 15px; opacity: .75; }

.d-hkpi__num {
    font-family: var(--d-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--d-text);
}
.d-hkpi__lbl { opacity: .85; }

/* Solo el SOS se enciende, y solo si hay alguno. Si todo pidiera
   atencion, nada la pediria. */
.d-hkpi.is-alerta {
    border-color: color-mix(in srgb, var(--d-danger, #dc2626) 40%, transparent);
    background: color-mix(in srgb, var(--d-danger, #dc2626) 10%, transparent);
}
.d-hkpi.is-alerta i,
.d-hkpi.is-alerta .d-hkpi__num { color: var(--d-danger, #dc2626); opacity: 1; }

/* Parpadeo breve cuando el numero cambia. */
.d-hkpi__num.is-cambio { animation: d-hkpi-cambio .9s ease; }
@keyframes d-hkpi-cambio {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); color: var(--d-accent); }
    100% { transform: scale(1); }
}

/* Los cortes por ancho que tenian estos KPI —rotulos fuera bajo 1400, el
   bloque entero fuera bajo 900— se BORRARON al mover la cabecera al lateral:
   alli el ancho es fijo (232px) y no hay nada que negociar. Sin quitarlos, los
   tres salian sin rotulo y por debajo de 900 desaparecian del lateral, que es
   justo donde mas sitio hay. Historia del numero: 1200 · 1400 · (ninguno). */

@media (prefers-reduced-motion: reduce) {
    .d-hkpi__num.is-cambio { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Avisos (SweetAlert2) con la tipografia y los colores del panel
   ───────────────────────────────────────────────────────────────
   La libreria trae su propio aspecto, bastante distinto del resto de
   la aplicacion. Aqui solo se reajusta lo justo para que un aviso no
   parezca venir de otro producto.
   ═══════════════════════════════════════════════════════════════ */

.d-swal {
    font-family: var(--d-font-sans, inherit);
    border-radius: var(--d-radius);
    border: 1px solid var(--d-border);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.d-swal .swal2-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--d-text);
}
.d-swal .swal2-html-container {
    font-size: 13.5px;
    color: var(--d-text-muted);
    margin-top: 6px;
}
.d-swal .swal2-actions { gap: 8px; margin-top: 18px; }

/* Botón destructivo: el rojo solo aparece cuando algo se pierde. */
.d-btn--peligro {
    background: var(--d-danger, #dc2626);
    border-color: var(--d-danger, #dc2626);
    color: #fff;
}
.d-btn--peligro:hover { filter: brightness(.93); }

/* El aviso breve, más compacto que el modal. */
.d-swal--toast {
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
.d-swal--toast .swal2-title { font-size: 13.5px; font-weight: 600; }

/* Los iconos de la librería usan sus propios verdes y rojos; se alinean
   con los del panel para que un acierto sea siempre el mismo verde. */
.d-swal .swal2-success-ring { border-color: color-mix(in srgb, var(--d-ok, #10b981) 35%, transparent); }
.d-swal .swal2-success [class^='swal2-success-line'] { background-color: var(--d-ok, #10b981); }
.d-swal .swal2-error [class^='swal2-x-mark-line'] { background-color: var(--d-danger, #dc2626); }

@media (prefers-reduced-motion: reduce) {
    .d-swal, .d-swal * { animation: none !important; transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   TARJETAS CON MOVIMIENTO
   ══════════════════════════════════════════════════════════════════════
   Dos clases, independientes, para poder pedir una sin la otra.

   Lo que NO esta aqui es el reordenamiento: cuando una tarjeta cambia de
   sitio, se anade o se quita, el navegador la mueve de golpe y el CSS no
   puede animar eso. De eso se encarga auto-animate — ver
   `wwwroot/js/animaciones.js` y el atributo `data-animar`.
   ────────────────────────────────────────────────────────────────────── */

/* 1 · Elevacion al pasar por encima.
   `translateY` y sombra, nunca `scale`: escalar una tarjeta reescala tambien
   su texto y su foto, y a 12,5px eso se ve como un salto de nitidez. Los
   140 ms son los de un hover —tiene que ir por delante del raton, no
   acompanarlo—. `border-color` entra en la transicion porque varias
   pantallas ya lo cambian en :hover y si no, cambia seco mientras el resto
   se desliza. */
.d-card-anim {
    transition: transform .14s ease-out,
                box-shadow .14s ease-out,
                border-color .14s ease-out;
}
.d-card-anim:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
}
/* Mientras se arrastra NO se levanta: ya hay un fantasma siguiendo al raton
   y dos cosas moviendose a la vez confunden sobre cual se esta moviendo. */
.d-card-anim:active { transform: none; box-shadow: none; }

/* 2 · Entrada.
   Escalonada y CON TOPE: en la primera carga todo es nuevo, y veinte
   tarjetas entrando a la vez se leen como un fallo de render — es la misma
   leccion del rebote de los pines del mapa. A partir de la decima entran ya
   colocadas, asi que la animacion entera dura 350 ms como mucho.
   `backwards` en el fill-mode no es decoracion: es lo que mantiene a la
   tarjeta invisible durante su retardo en vez de parpadear en su sitio. */
@keyframes dCardEntra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.d-card-entra {
    animation: dCardEntra .22s ease-out backwards;
}
.d-card-entra:nth-child(1) { animation-delay: 0ms; }
.d-card-entra:nth-child(2) { animation-delay: 25ms; }
.d-card-entra:nth-child(3) { animation-delay: 50ms; }
.d-card-entra:nth-child(4) { animation-delay: 75ms; }
.d-card-entra:nth-child(5) { animation-delay: 100ms; }
.d-card-entra:nth-child(6) { animation-delay: 125ms; }
.d-card-entra:nth-child(7) { animation-delay: 150ms; }
.d-card-entra:nth-child(8) { animation-delay: 175ms; }
.d-card-entra:nth-child(9) { animation-delay: 200ms; }
.d-card-entra:nth-child(n+10) { animation-delay: 225ms; }

/* Se apaga ENTERO. Aqui no hay nada que preservar: una tarjeta que entra o
   que se levanta no comunica ninguna urgencia — al reves que el halo del
   boton de panico, que bajo esta preferencia solo se deja quieto. */
@media (prefers-reduced-motion: reduce) {
    .d-card-anim { transition: none; }
    .d-card-anim:hover { transform: none; box-shadow: none; }
    .d-card-entra { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   EL LATERAL ACOGE LO QUE VIVIA EN LA BARRA SUPERIOR (3-10-2026)
   ══════════════════════════════════════════════════════════════════════
   La barra superior se quito entera. Era un flex de alto fijo (48px) en el
   que no cabian la miga de pan, tres KPI, el indicador, el chip de tareas,
   cuatro botones y el nombre de quien entro: medido, con todo puesto
   necesitaba 1422px, y por debajo los textos partian de linea y se salian
   de la caja. Una escalera de seis cortes lo sujetaba, pero el problema de
   fondo es que esa fila no tenia sitio.
   En un lateral el ancho es FIJO (232px) y el espacio que sobra es
   vertical, asi que nada compite con nada.

   Lo que se fue y donde esta ahora:
     campana, silenciar, colapsar ... cabecera del lateral
     KPI del dia, chip de tareas,
     indicador, cuenta ............. pie del lateral
     hamburguesa ................... flotante, solo bajo 900px
     miga de pan ................... BORRADA: repetia el titulo de la pagina,
                                     que ya esta en `.d-pageheader`
     boton de ayuda ................ BORRADO: no tenia ningun handler
   ────────────────────────────────────────────────────────────────────── */

/* ---------- Cabecera: marca + acciones ---------- */
.d-sidebar__logo { justify-content: space-between; gap: 8px; }
.d-sb-acciones { display: flex; align-items: center; gap: 2px; }
.d-sb-acciones .d-topbar__btn,
.d-sb-acciones .d-sidebar__collapse {
    color: var(--d-text-on-dark-muted);
    margin: 0; padding: 5px; border: 0; background: transparent;
    border-radius: var(--d-radius-sm);
}
.d-sb-acciones .d-topbar__btn:hover,
.d-sb-acciones .d-sidebar__collapse:hover {
    background: rgba(255,255,255,.08); color: var(--d-text-on-dark);
}
/* El boton de colapsar conserva su `<span>` de etiqueta porque el JS le
   escribe «Colapsar»/«Expandir»; aqui no se pinta. */
.d-sb-acciones .d-sidebar__collapse-label { display: none; }
.d-sb-acciones .d-topbar__badge {
    position: absolute; transform: translate(6px, -8px);
}

/* ---------- Pie ---------- */
.d-sb-pie {
    flex: 0 0 auto;
    /* Fondo propio: con el mismo azul del menu, las cifras y la cuenta se leian
       como otro item mas. Un tono mas claro y una sombra hacia arriba lo separan. */
    background: #0b2350;
    border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 -10px 18px -10px rgba(0,0,0,.55);
    padding: 8px 6px 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.d-sb-pie .d-hkpis { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
                     border-radius: 10px; padding: 3px; margin-bottom: 4px; }

/* Los KPI pasan de tres pastillas en fila a tres RENGLONES, que es lo que
   se lee en una columna de 232px: icono, rotulo y el numero a la derecha.
   El numero va el ultimo con `order`, sin tocar el markup. */
.d-sb-pie .d-hkpis { display: flex; flex-direction: column; gap: 0; }
.d-sb-pie .d-hkpi {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 8px; border-radius: var(--d-radius-sm);
    color: var(--d-text-on-dark-muted); font-size: 11.5px;
    text-decoration: none;
}
.d-sb-pie .d-hkpi:hover { background: rgba(255,255,255,.06); color: var(--d-text-on-dark); }
.d-sb-pie .d-hkpi i { font-size: 15px; width: 18px; text-align: center; flex: none; }
.d-sb-pie .d-hkpi__lbl { flex: 1 1 auto; opacity: .9; white-space: nowrap;
                         overflow: hidden; text-overflow: ellipsis; }
.d-sb-pie .d-hkpi__num { order: 3; margin-left: auto; font-weight: 700;
                         color: var(--d-text-on-dark); font-variant-numeric: tabular-nums; }
.d-sb-pie .d-hkpi.is-alerta .d-hkpi__num { color: #fca5a5; }

/* El chip de tareas deja de ser una pastilla ambar flotante y pasa a ser
   otro renglon, pero conserva el ambar en el icono y el numero: es trabajo
   en curso, no una alerta. */
.d-sb-pie .tareas-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 8px; border-radius: var(--d-radius-sm);
    background: transparent; color: var(--d-text-on-dark-muted) !important;
    font-size: 11.5px; text-decoration: none;
}
.d-sb-pie .tareas-chip:hover { background: rgba(255,255,255,.06); color: var(--d-text-on-dark) !important; }
.d-sb-pie .tareas-chip i { font-size: 15px; width: 18px; text-align: center; flex: none; color: #fbbf24; }
.d-sb-pie .tareas-chip__label { order: 2; flex: 1 1 auto; font-weight: 500; opacity: .9; }
.d-sb-pie .tareas-chip > span:not(.tareas-chip__label) {
    order: 3; margin-left: auto; font-weight: 700; color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

/* El indicador: mismo renglon, sin fondo. */
.d-sb-pie .d-sync {
    padding: 5px 8px; gap: 10px; font-size: 11px;
    color: var(--d-text-dark-faint);
}
.d-sb-pie .d-sync__dot { margin-left: 4px; flex: none; }
.d-sb-pie .d-sync.is-viejo { color: var(--d-warn); }

/* ---------- La cuenta, al fondo ---------- */
.d-sb-pie .d-usermenu { margin-top: 4px; }
.d-sb-pie .d-usermenu__btn {
    width: 100%; justify-content: flex-start;
    border-color: var(--d-border-dark);
    color: var(--d-text-on-dark);
}
.d-sb-pie .d-usermenu__btn:hover { background: rgba(255,255,255,.06); }
.d-sb-pie .d-usermenu__info { max-width: none; min-width: 0; flex: 1 1 auto; }
.d-sb-pie .d-usermenu__name,
.d-sb-pie .d-usermenu__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-sb-pie .d-usermenu__name { color: var(--d-text-on-dark); }
.d-sb-pie .d-usermenu__role { color: var(--d-text-on-dark-muted); }
.d-sb-pie .d-usermenu__chev { margin-left: auto; color: var(--d-text-on-dark-muted); }
/* Se abre hacia arriba y pegado al borde izquierdo; el lateral mide 232 y el
   menu 294, asi que sin esto Popper lo saca por la derecha sobre el mapa. */
.d-sb-pie .d-usermenu__menu { min-width: 260px; }

/* ---------- Lateral colapsado (56px) ---------- */
html.d-sidebar-collapsed .d-sidebar__logo { flex-direction: column; gap: 6px; }
/* El logotipo es un escudo con la palabra al lado: a 56px la palabra no cabe y
   se veia cortada por la mitad. Se recorta al escudo en vez de encogerlo, que
   lo dejaria ilegible. */
html.d-sidebar-collapsed .d-sidebar__logo img {
    height: 24px; width: 34px; max-width: none;
    object-fit: cover; object-position: left center;
}
html.d-sidebar-collapsed .d-sb-acciones { flex-direction: column; }

/* El escudo de la municipalidad en la cabecera del menú. A todo color: NO
   lleva el `brightness(0) invert(1)` del logo de Defensur, que lo dejaría
   como una mancha blanca. Alto fijo y ancho libre, con tope, porque cada
   comuna lo sube con otra proporción. Plegado, entero y más chico: no se
   recorta como el logotipo de Defensur, que es escudo + palabra. */
.d-sidebar__logo img.d-sidebar__escudo {
    height: 44px; width: auto; max-width: 60px; object-fit: contain; filter: none; flex: none;
}
html.d-sidebar-collapsed .d-sidebar__logo img.d-sidebar__escudo {
    height: 34px; width: 34px; max-width: none; object-fit: contain; object-position: center;
}
.d-sidebar__marca { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; }
.d-sidebar__marca-t { min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: #fff;
                      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.d-sidebar-collapsed .d-sidebar__marca-t { display: none; }
html.d-sidebar-collapsed .d-sb-pie { padding: 6px 4px; }
html.d-sidebar-collapsed .d-sb-pie .d-hkpi,
html.d-sidebar-collapsed .d-sb-pie .tareas-chip,
html.d-sidebar-collapsed .d-sb-pie .d-sync { justify-content: center; padding: 6px 0; gap: 0; }
html.d-sidebar-collapsed .d-sb-pie .d-hkpi__lbl,
html.d-sidebar-collapsed .d-sb-pie .tareas-chip__label,
html.d-sidebar-collapsed .d-sb-pie .d-sync > span:not(.d-sync__dot),
html.d-sidebar-collapsed .d-sb-pie .d-usermenu__info,
html.d-sidebar-collapsed .d-sb-pie .d-usermenu__chev { display: none; }
html.d-sidebar-collapsed .d-sb-pie .d-hkpi__num { margin-left: 4px; }
html.d-sidebar-collapsed .d-sb-pie .d-usermenu__btn { justify-content: center; padding: 4px; }

/* ---------- El hamburguesa, flotante ---------- */
/* Vivia en la barra superior. Fijo y SOLO bajo 900px, que es donde el lateral
   se vuelve un cajon; por encima no hay nada que abrir. */
.d-sb-flotante {
    display: none;
    position: fixed; top: 10px; left: 10px; z-index: 1045;
    width: 36px; height: 36px; padding: 0;
    align-items: center; justify-content: center;
    background: var(--d-bg-panel); color: var(--d-text);
    border: 1px solid var(--d-border); border-radius: var(--d-radius-sm);
    box-shadow: 0 2px 10px rgba(15,23,42,.14);
}
.d-sb-flotante i { font-size: 19px; }
@media (max-width: 900px) {
    .d-sb-flotante { display: inline-flex; }
    /* El zoom de Leaflet vive en la esquina de arriba a la izquierda del mapa,
       justo donde cae el hamburguesa. Se le aparta en TODAS las pantallas con
       mapa, no solo en /Central. */
    .leaflet-top.leaflet-left { margin-top: 42px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Barra superior y cabecera de pagina, estilo Defensur (30-10-2026)
   ──────────────────────────────────────────────────────────────────────
   A pedido del usuario: lo que vivia en el pie del lateral (cifras del dia,
   tarea en curso, indicador, campana, sonido y cuenta) vuelve ARRIBA, y la
   cabecera de cada pagina deja la banda azul marino: titulo oscuro sobre el
   lienzo, como en el proyecto hermano.

   Lo que obligo a bajarlo en octubre fue que la fila no cabia (1422px). Aqui
   se resuelve cediendo, no desbordando: bajo 1500px las cifras pierden el
   rotulo (queda icono + numero, con el rotulo en el title), bajo 1100 el
   indicador pierde el texto y la cuenta el nombre.

   Va al final del archivo para pisar las reglas de `.d-sb-pie` y de la
   banda, que quedan sin uso pero no estorban.
   ══════════════════════════════════════════════════════════════════════ */

.d-topbar {
    background: #eef1f5;
    border-bottom: 1px solid rgba(15,23,42,0.08);
    padding: 0 20px;
    /* Sobre los mapas (Leaflet llega a 1000) al hacer scroll, bajo el lateral
       (1040) y los modales (1050+). */
    z-index: 1030;
}
/* Doble clase: `.d-topbar__btn`, que va despues, lo pondria en inline-flex. */
.d-topbar .d-topbar__menu { display: none; font-size: 20px; }
.d-crumbs { display: flex; align-items: center; gap: 8px; min-width: 120px; flex: 1 1 auto; font-size: 13.5px; color: var(--d-text-muted); }
.d-crumbs__sec { white-space: nowrap; }
.d-crumbs__sep { color: var(--d-text-faint); }
.d-crumbs__last { color: var(--d-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-topbar__right { margin-left: auto; flex-wrap: nowrap; min-width: 0; }
.d-topbar__btn { font-size: 18px; width: 34px; height: 34px; padding: 0; border-radius: 50%;
                 display: inline-flex; align-items: center; justify-content: center; }
.d-topbar .d-topbar__badge { top: 1px; right: 1px; }

/* Las tres cifras del dia, en pastilla */
.d-topbar .d-hkpis { gap: 2px; }
.d-topbar .d-hkpi { height: 32px; padding: 0 10px; border-radius: 16px; }
.d-topbar .d-hkpi:hover { background: rgba(15,23,42,.06); border-color: transparent; }

/* El chip de tareas recupera su forma de pastilla ambar (en el lateral era
   un renglon). Tamaño propio: hereda el circulo de .d-topbar__btn. */
.d-topbar .tareas-chip { width: auto; height: 32px; padding: 0 12px; border-radius: 16px; gap: 6px;
                         font-size: 12.5px; display: inline-flex; align-items: center; white-space: nowrap; flex: none; }
.d-topbar .tareas-chip[style*="display:none"], .d-topbar .tareas-chip[style*="display: none"] { display: none !important; }

.d-topbar .d-sync { white-space: nowrap; }
.d-topbar .d-usermenu__btn { padding: 3px 10px 3px 3px; }
.d-topbar .d-usermenu__info { max-width: 180px; }
.d-topbar .d-usermenu__name { overflow: hidden; text-overflow: ellipsis; }

/* Novedades sin atender: ambar cuando hay alguna (el rojo es del SOS). */
.d-hkpi.is-pendiente { background: rgba(245,158,11,.14); border-color: transparent; }
.d-hkpi.is-pendiente i, .d-hkpi.is-pendiente .d-hkpi__num { color: #b45309; opacity: 1; }
.d-hkpi.is-pendiente .d-hkpi__lbl { color: #92400e; }

@media (max-width: 1500px) {
    .d-topbar .d-hkpi__lbl { display: none; }
    .d-topbar .d-hkpi { padding: 0 8px; }
}
/* Entre 1100 y 1400 la fila aun no cabe entera: el chip de tareas y el
   indicador se quedan con el numero y el punto (el texto sigue en el title). */
@media (max-width: 1400px) {
    .d-topbar .tareas-chip__label,
    .d-topbar .d-sync > span:not(.d-sync__dot) { display: none; }
}
@media (max-width: 1100px) {
    .d-topbar .d-sync > span:not(.d-sync__dot),
    .d-topbar .tareas-chip__label,
    .d-topbar .d-usermenu__info,
    .d-topbar .d-crumbs__sec, .d-topbar .d-crumbs__sep { display: none; }
}
@media (max-width: 900px) {
    .d-topbar { padding: 0 10px; gap: 8px; }
    .d-topbar .d-topbar__menu { display: inline-flex; }
    .d-topbar .d-hkpis, .d-topbar__divider--kpis { display: none; }
    /* El hamburguesa ahora va en la barra, ya no flota sobre el mapa. */
    .leaflet-top.leaflet-left { margin-top: 0; }
}

/* ---------- Cabecera de pagina sin banda ----------
   Titulo grande y oscuro sobre el lienzo, subtitulo gris, acciones a la
   derecha. Se deshacen los colores «sobre navy» de arriba. */
.d-pageheader {
    background: transparent;
    border-radius: 0;
    padding: 4px 2px 0;
    margin-bottom: 18px;
}
.d-pageheader__title { color: var(--d-text); font-size: 26px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.02em; }
.d-pageheader__sub   { color: var(--d-text-muted); font-size: 13px; }
.d-pageheader__sub .d-mono { color: var(--d-text); }
.d-pageheader__ic       { background: var(--d-accent-soft); color: var(--d-accent); }
.d-pageheader__ic--ok   { background: rgba(22,163,74,.12);  color: #16a34a; }
.d-pageheader__ic--warn { background: rgba(245,158,11,.14); color: #b45309; }
.d-pageheader__ic--mute { background: var(--d-bg-panel-muted); color: var(--d-text-muted); }