/* =====================================================================
   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. */
    --d-font-sans: 'Inter', 'Custom', 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;

    /* Escala tipografica de la grilla. 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:  12.5px;   /* el texto de una celda */
    --d-fs-cab:    10.5px;   /* la cabecera de columna */
    --d-fs-titulo: 12.5px;   /* el nombre de la fila */
    --d-fs-sub:    10.5px;   /* la linea secundaria, bajo el nombre */
    --d-fs-chip:   10px;     /* chip neutro y pildora de estado */
    --d-fs-vacio:  11.5px;   /* el aviso de que la lista esta vacia */
    --d-fs-folio:  10.5px;   /* 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: underline; text-underline-offset: 2px; }

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);
    z-index: 100;
}

.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);
    font-family: var(--d-font);
}

/* 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-crumbs {
    flex: 1;
    font-size: 12.5px;
    color: var(--d-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.d-crumbs__sep { color: var(--d-text-faint); }
.d-crumbs__last { color: var(--d-text); font-weight: 600; }

.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);
}
.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); }
@media (max-width: 640px) {
    .d-usermenu__info { display: none; }
    .d-usermenu__chev { display: none; }
    .d-usermenu__btn { padding: 3px; }
}

/* 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; }
.d-usermenu__item:hover {
    background: rgba(59,130,246,0.12); color: #ffffff; text-decoration: none;
}
.d-usermenu__item:hover i { color: var(--d-accent); }
.d-usermenu__item--danger { color: #f87171; }
.d-usermenu__item--danger i { color: #f87171; }
.d-usermenu__item--danger:hover { background: rgba(239,68,68,0.14); color: #fca5a5; }
.d-usermenu__item--danger:hover i { color: #fca5a5; }

/* ---------- 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`.
       Sin `border-radius`: es un bloque recto. 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;
    padding: 16px 18px;
}
.d-pageheader__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.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 ---------- */
.d-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: var(--d-fs-chip);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-radius: 4px;
    background: var(--d-bg-panel-muted);
    color: var(--d-text-muted);
    line-height: 1.5;
}
.d-badge--alta   { background: var(--d-bg-danger); color: var(--d-danger); }
.d-badge--media  { background: var(--d-bg-warn);   color: var(--d-warn); }
.d-badge--baja   { background: var(--d-bg-ok);     color: var(--d-ok); }
.d-badge--accent { background: var(--d-accent-soft); color: var(--d-accent-dark); }
/* 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--ok     { background: var(--d-bg-ok);     color: var(--d-ok); }
.d-badge--warn   { background: var(--d-bg-warn);   color: var(--d-warn); }
.d-badge--danger { background: var(--d-bg-danger); color: var(--d-danger); }

/* ---------- 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 .spinner-border { width: 2.5rem; height: 2.5rem; 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: 90;
    }
    .d-topbar__menu { display: inline-flex !important; }
}
.d-topbar__menu { display: none; }

/* ===== 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; }
@media (max-width: 700px) { .tareas-chip__label { display: none; } }

/* ===== 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: underline; }
/* 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 */
#dRtToasts {
    position: fixed; top: 16px; right: 16px; z-index: 11000;
    display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.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; }
}
@keyframes dRtIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes dRtOut { to { transform: translateX(20px); opacity: 0; } }

/* ============================================================
   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); }
}

/* En pantallas estrechas se quedan solo los numeros, y por debajo de
   tablet desaparecen: la cabecera ya va justa de sitio. */
@media (max-width: 1200px) {
    .d-hkpi__lbl { display: none; }
}
@media (max-width: 900px) {
    .d-hkpis { display: none; }
}

@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; }
}