/* ═══════════════════════════════════════════════════════════════════════════
   Shell de Zenti — sidebar oscuro + topbar, calcado del sistema visual
   aprobado ("zenti web futura/zenti_demo_paleta_completa_sidebar.html").
   El sidebar es SIEMPRE oscuro (paleta zenti.ar: negro profundo + cian/azul/
   violeta); el área derecha respeta el tema activo (claro default / oscuro).
   ═══════════════════════════════════════════════════════════════════════════ */

.zshell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.zsidebar {
    position: sticky;
    top: 0;
    /* 100vh en Safari iOS mide el viewport SIN la barra de direcciones, así que el pie
       del sidebar (perfil + cerrar sesión) quedaba debajo del fold y sin forma de scrollear.
       dvh usa el alto realmente visible. En escritorio ambos valores son idénticos: la
       declaración de 100vh queda como fallback para navegadores sin soporte de dvh. */
    height: 100vh;
    height: 100dvh;
    padding: 22px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--sidebar-text);
    background:
        radial-gradient(circle at 12% 8%, rgba(0, 229, 255, .14), transparent 23%),
        radial-gradient(circle at 88% 52%, rgba(102, 51, 238, .13), transparent 32%),
        linear-gradient(180deg, #07070d 0%, #090b14 58%, #05050a 100%);
    border-right: 1px solid rgba(139, 147, 167, .20);
    box-shadow: 12px 0 40px rgba(7, 7, 13, .14);
    z-index: 40;
    overflow: hidden;
}

/* Trama técnica discreta */
.zsidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 46px,
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px) 0 0 / 46px 100%;
    opacity: .38;
    mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 96%);
}

.zsidebar > * {
    position: relative;
    z-index: 1;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 0 8px;
    flex: 0 0 auto;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: #07070d;
    border: 1px solid rgba(0, 229, 255, .18);
    box-shadow:
        0 0 0 1px rgba(0, 85, 255, .08),
        0 10px 28px rgba(0, 85, 255, .22),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.brand-z {
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
    background: linear-gradient(135deg, #00e5ff, #0055ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-copy strong {
    display: block;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: -0.03em;
}

.brand-copy span {
    display: block;
    margin-top: 1px;
    color: #8b93a7;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* Selector de espacio/empresa */
.workspace-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 9px 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 229, 255, .13);
    border-radius: 12px;
    color: #eef1f6;
    background:
        linear-gradient(135deg, rgba(0, 229, 255, .055), rgba(0, 85, 255, .065)),
        rgba(255, 255, 255, .028);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    text-align: left;
    transition: .18s ease;
}

.workspace-switcher:not(:disabled):hover {
    border-color: rgba(0, 229, 255, .28);
    background:
        linear-gradient(135deg, rgba(0, 229, 255, .09), rgba(0, 85, 255, .10)),
        rgba(255, 255, 255, .035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 10px 28px rgba(0, 85, 255, .10);
}

.workspace-switcher:disabled { opacity: 1; }

.workspace-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #07070d;
    background: linear-gradient(135deg, #00e5ff, #5f83ff);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .10),
        0 8px 18px rgba(0, 85, 255, .22);
    font-weight: 800;
    font-size: 13px;
}

.workspace-copy { min-width: 0; flex: 1; }

.workspace-copy small {
    display: block;
    color: #8b93a7;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.workspace-copy strong {
    display: block;
    margin-top: 2px;
    color: #eef1f6;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navegación agrupada (scrollea si no entra) */
.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 14px;
    align-content: start;
    margin: 0 -4px;
    padding: 0 4px;
    scrollbar-color: rgba(139, 147, 167, .35) transparent;
}

.nav-group { display: grid; gap: 4px; }

.nav-label {
    padding: 0 10px;
    margin: 4px 0 3px;
    color: #626a80;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.snav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 40px;
    padding: 0 11px;
    color: #a7aec0;
    background: transparent;
    border: 0;
    text-align: left;
    text-decoration: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: .18s ease;
}

.snav-item:hover {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(0, 229, 255, .055), rgba(0, 85, 255, .075));
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .045);
}

.snav-item.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(0, 229, 255, .13), rgba(0, 85, 255, .18) 70%, rgba(102, 51, 238, .12));
    box-shadow:
        inset 0 0 0 1px rgba(0, 229, 255, .12),
        0 9px 24px rgba(0, 85, 255, .12);
}

.snav-item.active::before {
    content: "";
    position: absolute;
    left: -4px;
    width: 2px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #00e5ff, #0055ff);
    box-shadow: 0 0 12px rgba(0, 229, 255, .78);
}

.snav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: currentColor;
    opacity: .9;
}

.snav-icon svg { width: 18px; height: 18px; display: block; }

.snav-item.active .snav-icon {
    color: #00e5ff;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, .18));
}

.snav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snav-badge {
    margin-left: auto;
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 99px;
    color: #dffbff;
    background: linear-gradient(135deg, rgba(0, 229, 255, .16), rgba(0, 85, 255, .24));
    border: 1px solid rgba(0, 229, 255, .12);
    font-size: 10px;
    font-weight: 800;
}

.snav-caret {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #8b93a7;
    transition: transform .18s ease;
}

.snav-caret svg { width: 16px; height: 16px; display: block; }
.snav-caret.open { transform: rotate(180deg); }

/* Submenú desplegable (ej. Apps) */
.snav-submenu {
    display: none;
    margin: 2px 0 4px 26px;
    padding-left: 10px;
    border-left: 1px solid rgba(139, 147, 167, .22);
}

.snav-submenu.open { display: grid; gap: 2px; }

.snav-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0 9px;
    color: #a7aec0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    transition: .15s ease;
}

.snav-subitem:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .05);
}

.snav-subitem.on {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(0, 229, 255, .10), rgba(0, 85, 255, .13));
}

/* Pie del sidebar */
.sidebar-footer {
    margin-top: auto;
    flex: 0 0 auto;
    display: grid;
    gap: 9px;
}

.sidebar-back {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    color: #a7aec0;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(139, 147, 167, .18);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    transition: .18s ease;
}

.sidebar-back:hover {
    color: #ffffff;
    border-color: rgba(0, 229, 255, .28);
    background: rgba(0, 229, 255, .06);
}

.security-card {
    padding: 12px;
    border-radius: 12px;
    color: #a7aec0;
    border: 1px solid rgba(0, 229, 255, .10);
    background:
        linear-gradient(135deg, rgba(0, 229, 255, .035), rgba(0, 85, 255, .05)),
        rgba(255, 255, 255, .025);
    font-size: 11px;
    line-height: 1.5;
}

.security-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.security-dot {
    margin-top: 4px;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow:
        0 0 0 4px rgba(0, 229, 255, .10),
        0 0 14px rgba(0, 229, 255, .58);
}

.security-card strong {
    display: block;
    margin-bottom: 2px;
    color: #eef1f6;
    font-size: 11px;
}

.profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.profile:hover {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(0, 229, 255, .075);
}

.profile .avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    color: #07070d;
    background: linear-gradient(135deg, #00e5ff, #0055ff);
    box-shadow: 0 8px 18px rgba(0, 85, 255, .20);
    font-size: 12px;
    font-weight: 800;
}

.profile .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-copy { min-width: 0; flex: 1; }

.profile-copy strong {
    display: block;
    color: #eef1f6;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-copy span {
    display: block;
    margin-top: 2px;
    color: #8b93a7;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-logout {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #8b93a7;
    background: transparent;
    transition: .15s ease;
}

.profile-logout svg { width: 16px; height: 16px; }

.profile-logout:hover {
    color: #ff9db1;
    border-color: rgba(228, 119, 135, .3);
    background: rgba(228, 119, 135, .08);
}

/* ── Área principal ──────────────────────────────────────────────────────── */

.zmain {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ztopbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 8px 26px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}

.zmobile-menu {
    display: none;
    width: 39px;
    height: 39px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
}

.zmobile-menu svg { width: 19px; height: 19px; }

.zpage-context {
    min-width: 0;
    flex: 0 1 auto;
}

.zpage-context small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.zpage-context strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ztop-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ztop-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

/* Botón-ícono del topbar (exacto de la referencia) */
.icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: var(--surface);
    transition: .18s ease;
}

.icon-btn:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
    transform: translateY(-1px);
}

.icon-btn svg { width: 18px; height: 18px; }

/* Buscador global + centro de alertas del topbar. Comparten tokens para que
   Admin use la paleta azul y los portales hereden la variante Premium. */
.topbar-search,
.topbar-notifications {
    position: relative;
    flex: 0 0 auto;
}

.topbar-search {
    width: min(320px, 28vw);
}

.topbar-search .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.topbar-search > svg {
    position: absolute;
    z-index: 2;
    left: 13px;
    top: 50%;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.topbar-search > input {
    width: 100%;
    height: 40px;
    padding: 0 58px 0 38px;
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: none;
    color: var(--text);
    background: var(--surface-2);
    font: inherit;
    font-size: 12px;
    transition: .18s ease;
}

.topbar-search > input::placeholder { color: var(--muted-2); }
.topbar-search > input:focus {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: var(--surface);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-soft) 70%, transparent);
}

.topbar-search > kbd {
    position: absolute;
    right: 9px;
    top: 50%;
    padding: 2px 5px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--muted);
    background: var(--surface);
    font: 600 9px/1.35 'JetBrains Mono', monospace;
    transform: translateY(-50%);
    pointer-events: none;
}

.topbar-search-popover,
.notification-popover {
    position: absolute;
    z-index: 950;
    top: calc(100% + 10px);
    right: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.topbar-search-popover {
    width: min(430px, 86vw);
    max-height: min(520px, 70vh);
    padding: 7px;
    overflow-y: auto;
}

.topbar-search.open .topbar-search-popover,
.topbar-notifications.open .notification-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.topbar-search-result {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    color: var(--text);
    background: transparent;
    text-align: left;
}

.topbar-search-result:hover,
.topbar-search-result.active {
    color: var(--accent-strong);
    background: var(--accent-soft);
}

.topbar-result-icon {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--accent-strong);
    background: var(--surface-2);
    font-size: 14px;
}

.topbar-result-copy { min-width: 0; flex: 1; }
.topbar-result-copy strong,
.topbar-result-copy small { display: block; }
.topbar-result-copy strong { font-size: 12px; }
.topbar-result-copy small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.topbar-result-enter { color: var(--muted-2); font-size: 12px; }
.topbar-search-empty { padding: 26px 14px; color: var(--muted); font-size: 11px; text-align: center; }

.topbar-bell .notification-dot {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--red);
    box-sizing: content-box;
}

.notification-popover { width: min(370px, 90vw); }
.notification-popover > header {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}
.notification-popover > header strong,
.notification-popover > header small { display: block; }
.notification-popover > header strong { font-size: 13px; }
.notification-popover > header small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.notification-total {
    min-width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    color: #fff;
    background: var(--red);
    font-size: 9px;
    font-weight: 800;
}
.notification-list { max-height: min(380px, 56vh); overflow-y: auto; }
.notification-item {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    background: transparent;
    text-align: left;
}
.notification-item:hover { background: var(--surface-2); }
.notification-item-mark {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.notification-item > span:nth-child(2) { min-width: 0; flex: 1; }
.notification-item strong,
.notification-item small { display: block; }
.notification-item strong { font-size: 11px; }
.notification-item small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.notification-item > span:last-child { color: var(--muted-2); font-size: 17px; }
.notification-empty {
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 22px;
    color: var(--muted);
    text-align: center;
}
.notification-empty > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    margin-bottom: 3px;
    border-radius: 50%;
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.notification-empty strong { color: var(--text); font-size: 12px; }
.notification-empty small { font-size: 9px; }
.notification-push-status {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    color: var(--muted);
    background: var(--surface-2);
    font-size: 9px;
}
.notification-push-status button {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    color: var(--accent-strong);
    background: transparent;
    font: inherit;
    font-weight: 700;
}
.push-state { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--muted-2); }
.push-state.on { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }
.push-state.blocked { background: var(--red); }

.zcontent {
    width: min(1540px, 100%);
    margin: 0 auto;
    padding: 26px;
    flex: 1;
}

/* Overlay del drawer mobile */
.zshell-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    background: rgba(7, 14, 16, .45);
    backdrop-filter: blur(3px);
}

.zshell-backdrop.open { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES DE LA MAQUETA (copiados 1:1 del archivo de referencia, sobre
   tokens): hero, tarjeta de estado, metric-cards, panels, tabla de cobranza,
   prioridades, semana operativa, Zenia. Reutilizables por cualquier módulo.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(310px, .75fr);
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 87% 9%, rgba(0, 229, 255, .11), transparent 25%),
        radial-gradient(circle at 73% 95%, rgba(102, 51, 238, .07), transparent 27%),
        linear-gradient(120deg, var(--surface) 0%, var(--surface) 58%, #f4f7ff 100%);
    box-shadow: var(--shadow-sm);
}

html[data-theme="negro"] .hero {
    background:
        radial-gradient(circle at 87% 9%, rgba(0, 229, 255, .10), transparent 25%),
        radial-gradient(circle at 73% 95%, rgba(102, 51, 238, .10), transparent 27%),
        linear-gradient(120deg, #0e1018 0%, #101421 58%, #0d1020 100%);
}

.hero::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 67%);
    pointer-events: none;
}

.zeyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

html[data-theme="negro"] .zeyebrow { color: #6f96ff; }

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow:
        0 0 0 4px rgba(0, 229, 255, .13),
        0 0 12px rgba(0, 85, 255, .32);
}

.hero h1 {
    max-width: 700px;
    margin: 12px 0 10px;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.hero > div > p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-status {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    align-content: center;
    min-height: 180px;
    padding: 19px;
    border-radius: 15px;
    color: #eef1f6;
    background:
        radial-gradient(circle at 84% 10%, rgba(0, 229, 255, .15), transparent 25%),
        radial-gradient(circle at 10% 95%, rgba(102, 51, 238, .17), transparent 28%),
        linear-gradient(145deg, #07070d, #11172e);
    border: 1px solid rgba(0, 229, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 38px rgba(7, 28, 25, .14);
}

.hero-status-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.hero-status small {
    color: #8b93a7;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.health-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c7f9ff;
    font-size: 10px;
    font-weight: 750;
}

.health-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow:
        0 0 0 4px rgba(0, 229, 255, .10),
        0 0 12px rgba(0, 229, 255, .58);
}

.hero-number {
    margin-top: 2px;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #a7aec0;
    font-size: 11px;
}

.hero-meta strong { color: #ffffff; }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.metric-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: .2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
}

.metric-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.metric-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.metric-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--accent);
    background: var(--accent-soft);
}

.metric-icon.warning { color: var(--warning); background: var(--warning-soft); }
.metric-icon.purple { color: var(--purple); background: var(--purple-soft); }
.metric-icon.info { color: var(--info); background: var(--info-soft); }
.metric-icon.success { color: var(--success); background: var(--success-soft); }
.metric-icon.danger { color: var(--danger); background: var(--danger-soft); }
.metric-icon svg { width: 17px; height: 17px; }

.metric-value {
    margin-top: 13px;
    font-size: 25px;
    line-height: 1;
    font-weight: 780;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.metric-foot {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 10px;
}

.trend-up { color: var(--success); font-weight: 800; }
.trend-down { color: var(--danger); font-weight: 800; }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, .78fr);
    gap: 18px;
    margin-top: 18px;
}

.stack {
    display: grid;
    gap: 18px;
    align-content: start;
    min-width: 0;
}

.panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.panel-head {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 19px;
    border-bottom: 1px solid var(--line);
}

.panel-title h2 {
    margin: 0;
    font-size: 14px;
    letter-spacing: -0.02em;
}

.panel-title p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 10px;
}

.segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    background: var(--surface-3);
}

.segmented button {
    min-width: 54px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    color: var(--muted);
    background: transparent;
    font-size: 10px;
    font-weight: 750;
}

.segmented button.active {
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.chart-body { padding: 19px 19px 14px; }

.chart-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.chart-summary strong {
    display: block;
    font-size: 24px;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.chart-summary span {
    color: var(--muted);
    font-size: 10px;
}

.zlegend {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--muted);
    font-size: 10px;
}

.zlegend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zlegend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.zlegend-dot.out { background: #8b93a7; }

.chart-wrap {
    position: relative;
    height: 265px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%;
}

.chart-wrap svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 8px;
    color: var(--faint);
    font-size: 9px;
    text-align: center;
}

.client-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
}

.client-logo {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #0035bd;
    background: linear-gradient(135deg, #e4fbff, #eaf0ff);
    font-size: 10px;
    font-weight: 850;
}

html[data-theme="negro"] .client-logo {
    color: #dffaff;
    background: linear-gradient(135deg, #12313c, #17244a);
}

.client-cell strong {
    display: block;
    font-size: 11px;
}

.client-cell span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.amount {
    font-weight: 780;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.zdate {
    color: var(--muted);
    white-space: nowrap;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 99px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status.success { color: var(--success); background: var(--success-soft); }
.status.warning { color: var(--warning); background: var(--warning-soft); }
.status.danger { color: var(--danger); background: var(--danger-soft); }
.status.info { color: var(--info); background: var(--info-soft); }
.status.neutral { color: var(--muted); background: var(--surface-3); }
/* Estado de monitoreo del semáforo de severidad (ver --sev-* en base.css): el violeta
   no existía como píldora y los tickets de monitoreo caían en el gris "neutral". */
.status.monitoring { color: var(--sev-monitoring); background: var(--sev-monitoring-soft); }

.row-action {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
}

.row-action:hover {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-2);
}

.row-action svg { width: 16px; height: 16px; }

.priority-list { display: grid; gap: 0; }

.priority-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    transition: .18s ease;
}

.priority-item:last-child { border-bottom: 0; }
.priority-item:hover { background: var(--surface-2); }

.priority-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--warning);
    background: var(--warning-soft);
}

.priority-icon.danger { color: var(--danger); background: var(--danger-soft); }
.priority-icon.info { color: var(--info); background: var(--info-soft); }
.priority-icon svg { width: 16px; height: 16px; }

.priority-copy { min-width: 0; }

.priority-copy strong {
    display: block;
    font-size: 11px;
    line-height: 1.35;
}

.priority-copy p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.priority-time {
    color: var(--faint);
    font-size: 9px;
    white-space: nowrap;
}

.weekly { padding: 15px 16px 17px; }

.week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
}

.day {
    min-width: 0;
    padding: 9px 6px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-align: center;
    background: var(--surface-2);
}

.day.active {
    color: #fff;
    background: linear-gradient(145deg, #0045f5, #0055ff);
    border-color: var(--accent);
    box-shadow: 0 8px 18px rgba(0, 85, 255, .24);
}

.day span {
    display: block;
    color: inherit;
    opacity: .68;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.day strong {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.day-dot {
    width: 5px;
    height: 5px;
    margin: 6px auto 0;
    border-radius: 50%;
    background: var(--warning);
    display: block;
}

.day.active .day-dot { background: #d5f4ec; }

.schedule {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.schedule-item {
    display: grid;
    grid-template-columns: 44px 4px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.schedule-time {
    padding-top: 3px;
    color: var(--muted);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.schedule-line {
    border-radius: 4px;
    background: linear-gradient(180deg, #00e5ff, #0055ff);
}

.schedule-line.purple { background: var(--purple); }
.schedule-line.warning { background: var(--warning); }

.schedule-copy strong {
    display: block;
    font-size: 10px;
}

.schedule-copy span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

/* Panel Zenia (violeta, para cuando un módulo presente al asistente) */
.zenia {
    padding: 18px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--purple-soft) 58%, var(--surface)), var(--surface));
}

.zenia-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.zenia-logo {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, #6633ee, #0055ff);
    box-shadow: 0 9px 20px rgba(99, 82, 164, .2);
}

.zenia-logo svg { width: 18px; height: 18px; }

.zenia-head strong { display: block; font-size: 12px; }

.zenia-head span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
}

.zenia-message {
    margin-top: 15px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--line));
    border-radius: 12px;
    color: var(--text);
    background: color-mix(in srgb, var(--purple-soft) 58%, var(--surface));
    font-size: 10px;
    line-height: 1.55;
}

.footer-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding: 2px 4px 18px;
    color: var(--faint);
    font-size: 9px;
}

.footer-note span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-note svg { width: 12px; height: 12px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    :root { --sidebar-w: 228px; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-grid > .stack:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .topbar-search { width: min(255px, 32vw); }
    .topbar-search > kbd { display: none; }
    .topbar-search > input { padding-right: 12px; }
}

@media (max-width: 900px) {
    .zshell { grid-template-columns: 1fr; }
    .zsidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(290px, 88vw);
        transform: translateX(-104%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-lg);
        z-index: 100;
    }
    .zsidebar.open { transform: translateX(0); }
    /* `overflow:hidden` no alcanza en Safari iOS: hay que fijar el body. La posición
       se guarda y restaura en app-shell.js (openDrawer/closeDrawer). */
    body.zshell-drawer-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }
    .zmobile-menu { display: inline-flex; }
    .ztopbar { padding: 8px 14px; }
    .ztop-center { order: 5; flex-basis: 100%; justify-content: flex-start; }
    .zcontent { padding: 18px 14px 28px; }
    /* Red de seguridad del drawer: si aun con dvh el contenido no entra (pantalla muy baja
       o en horizontal), que el sidebar entero scrollee en vez de recortar el pie. */
    .zsidebar { overflow-y: auto; }
    /* El título no se recortaba (nowrap sin ellipsis), así que imponía su ancho completo
       como mínimo y empujaba los íconos y el buscador a filas nuevas: el topbar sticky
       pasaba a ~150px. En escritorio el título entra de sobra y esta regla nunca actúa. */
    .zpage-context strong {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 690px) {
    :root { --topbar-h: 66px; }
    /* El backdrop-filter del topbar crea un containing block que atrapa los popovers
       position:fixed del buscador/campana en móvil (los anclaba al topbar en vez del
       viewport). Se desactiva solo en este breakpoint. Al quitar el blur, el fondo 92%
       dejaba pasar el 8% del texto de la lista al scrollear (se veía "fantasma" detrás de
       los íconos en Notas) → acá va 100% opaco. */
    .ztopbar { backdrop-filter: none; background: var(--surface); }
    .zpage-context small { display: none; }
    .zcontent { padding: 14px 10px 26px; }
    .ztop-actions { gap: 6px; }
    .topbar-search { width: 40px; }
    .topbar-search > input {
        padding: 0;
        color: transparent;
        caret-color: transparent;
        cursor: pointer;
    }
    .topbar-search > input::placeholder { color: transparent; }
    .topbar-search > svg { left: 12px; }
    .topbar-search.open {
        position: fixed;
        z-index: 1200;
        top: 10px;
        left: 10px;
        right: 10px;
        width: auto;
    }
    .topbar-search.open > input {
        padding: 0 14px 0 38px;
        color: var(--text);
        caret-color: auto;
        cursor: text;
    }
    .topbar-search.open > input::placeholder { color: var(--muted-2); }
    /* Los popovers se anclaban a un top fijo de 59px, calculado para un topbar de una sola
       fila. Cuando el topbar crecía, el panel de alertas se dibujaba POR ENCIMA del botón
       que lo abría. Ahora siguen la altura real de la barra. */
    .topbar-search-popover {
        position: fixed;
        top: calc(var(--topbar-h) - 7px);
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100dvh - var(--topbar-h) - 16px);
    }
    .notification-popover {
        position: fixed;
        top: calc(var(--topbar-h) - 7px);
        left: 10px;
        right: 10px;
        width: auto;
        max-height: calc(100dvh - var(--topbar-h) - 16px);
        overflow-y: auto;
    }
    /* La barra de "conectados" ocupaba hasta dos filas del topbar sticky con avatares y
       roles. En una pantalla de 360px eso es carísimo y es dato secundario: se oculta solo
       acá. Sigue visible en tablet y escritorio.
       !important necesario: presence-bar.js inyecta su propio <style> con `.presence-bar
       { display:flex }` en document.head DESPUÉS de este link (misma especificidad, gana
       por orden de aparición) → sin !important esta regla queda pisada y la barra vuelve
       a mostrarse en mobile, empujando y solapando el resto del topbar. */
    .presence-bar { display: none !important; }
    /* Estas dos bajaban a 2 columnas en 1180px y nunca volvían a 1: a 360px quedaban
       tarjetas de ~127px con números de 25px que se salían de la caja. */
    .metrics,
    .dashboard-grid > .stack:last-child { grid-template-columns: 1fr; }
}