/* =====================================================================
   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.
       ============================================================ */

    /* Superficies */
    --d-bg-app:        #0b1220;   /* fondo principal (navy casi negro) */
    --d-bg-panel:      #111a2e;   /* panels / cards */
    --d-bg-panel-muted:#16213a;   /* hover / muted */
    --d-bg-dark:       #06101f;   /* sidebar fondo */
    --d-bg-dark-2:     #0a172c;
    --d-bg-dark-3:     #0d1f3a;
    --d-border-dark:   rgba(255,255,255,0.06);
    --d-border-dark-2: rgba(255,255,255,0.10);

    /* Texto */
    --d-text:          #e6edf7;
    --d-text-muted:    #94a3b8;
    --d-text-faint:    #64748b;
    --d-text-dark-faint:#475569;
    --d-text-on-dark:  #ffffff;
    --d-text-on-dark-muted:#94a3b8;

    /* Bordes */
    --d-border:        rgba(255,255,255,0.07);
    --d-border-soft:   rgba(255,255,255,0.04);

    /* 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;

    /* 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 0 rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.18);
}

/* ---------- 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-bg-dark);
    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: var(--d-bg-panel);
    border-bottom: 1px solid var(--d-border);
    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;
}

/* ----- Page header ----- */
.d-pageheader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.d-pageheader__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--d-text);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.d-pageheader__sub {
    font-size: 12px;
    color: var(--d-text-muted);
}
.d-pageheader__sub .d-mono { color: var(--d-text); }
.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: 12.5px;
}
.d-table thead th {
    position: sticky;
    top: 0;
    background: var(--d-bg-panel-muted);
    border-bottom: 1px solid var(--d-border);
    font-size: 10.5px;
    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-weight: 500;
}

/* ---------- 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: 10.5px;
    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); }

/* ---------- 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: dark;
}
/* 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);
}
.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: #0d2236;
    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 {
    font-size: 11.5px; font-weight: 700; color: #e2e8f0; margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
    text-transform: uppercase; letter-spacing: .08em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.30);
}
.ca-card__title::before {
    content: ''; width: 3px; height: 14px;
    background: var(--ca-head-accent, #475569); border-radius: 2px;
}
.ca-card__title i { color: var(--ca-head-icon, var(--ca-head-accent, #94a3b8)); font-size: 14px; }
.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: #e2e8f0; font-weight: 700;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
    padding: 2px 9px; border-radius: 999px;
}
.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(255,255,255,0.14); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.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 */
    overflow-y: auto;
    max-height: calc(100vh - 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); }
}

.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);
    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; }
}

/* ===== 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: #fecaca;
}
.sos-panel__title i { font-size: 18px; }
.sos-panel__title strong { color: #fff; }
.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-muted, #0d1628);
    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: #fca5a5; 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.18); color: #fca5a5;
    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, #e2e8f0);
    background: rgba(255,255,255,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.16); color: #93c5fd; border-color: rgba(59,130,246,0.4); }
.sos-btn--map:hover { background: rgba(59,130,246,0.28); }
.sos-btn--ok { background: rgba(16,185,129,0.16); color: #6ee7b7; border-color: rgba(16,185,129,0.4); }
.sos-btn--ok:hover { background: rgba(16,185,129,0.28); }
.sos-btn--ghost { background: transparent; color: var(--d-text-muted, #94a3b8); border-color: rgba(255,255,255,0.14); }
.sos-btn--ghost:hover { background: rgba(255,255,255,0.06); color: var(--d-text, #e2e8f0); }
.sos-btn:disabled { opacity: .55; cursor: default; transform: none; }
.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);
    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) ===== */
.climap-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-bottom: 1px solid var(--d-border);
}
.climap-head__title { font-size: 13px; font-weight: 700; color: var(--d-text); display: inline-flex; align-items: center; gap: 7px; }
.climap-head__title i { font-size: 17px; color: var(--d-accent, #3b82f6); }
.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: #0e1a28; }
.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(13, 34, 54, 0.92);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 14px rgba(0,0,0,0.30);
    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(0,0,0,0.30); }
.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);
    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: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    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: #fcd34d !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: 11px; 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.16); color: #fca5a5; border-color: rgba(239,68,68,0.40); }
.sos-badge--resuelta { background: rgba(16,185,129,0.16); color: #6ee7b7; border-color: rgba(16,185,129,0.40); }
.sos-badge--falsa    { background: rgba(148,163,184,0.16); color: #cbd5e1; border-color: rgba(148,163,184,0.35); }
.sos-origen-badge {
    display: inline-block;
    font-size: 11px; 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;
}

/* 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; }
@keyframes dRtIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes dRtOut { to { transform: translateX(20px); opacity: 0; } }