/* Plataforma de suscriptores individuales — variante CELESTE.
   Misma técnica que la variante Premium de los portales cliente (client-premium.css): se activa
   solo mientras el área agrega body.zenti-individual-active, y repinta la MISMA composición
   —sidebar con gradientes radiales, hero, botones, superficies— en otro tono. Admin queda azul,
   las empresas verde petróleo y los individuos celeste: el color dice al instante dónde estás.
   Antes esto eran 8 tokens de acento violeta; se amplió al tratamiento completo el 2026-07-18.

   A diferencia de Premium, acá SÍ se redefinen las ternas RGB: sin eso, todo componente que use
   rgba(var(--accent-rgb), a) seguiría tirando el azul del Admin dentro del área celeste. */

body.zenti-individual-active {
    color-scheme: light;
    --bg: #f3f7f9;
    --bg-deep: #eaf1f5;
    --bg2: #f8fbfc;
    --panel: #ffffff;
    --panel-soft: #f8fbfc;
    --overlay: #ffffff;
    --chip: #eaf1f5;
    --line: #d9e3e9;
    --line-strong: #c5d3db;
    --text: #17222a;
    --muted: #667783;
    --faint: #8896a1;

    --blue: #0f86ad;
    --cyan: #2f9cbe;
    --green: #1f7a4d;
    --red: #b13f3f;
    --yellow: #a76312;
    --orange: #a95f2f;
    --purple: #6555a5;

    --surface: #ffffff;
    --surface-2: #f8fbfc;
    --surface-3: #eaf1f5;
    --accent: #0f86ad;
    --accent-2: #0b6c8f;
    --accent-soft: #e0f2f9;
    --accent-strong: #08536e;
    --cyan-bright: #56bfdd;
    --violet: #6555a5;

    --accent-rgb: 15, 134, 173;
    --faint-rgb: 136, 150, 161;
    --shadow-rgb: 16, 30, 40;

    --success: #1f7a4d;
    --success-soft: #e4f3ea;
    --warning: #a76312;
    --warning-soft: #fbefdc;
    --danger: #b13f3f;
    --danger-soft: #f9e7e7;
    --info: #0f86ad;
    --info-soft: #e0f2f9;
    --purple-soft: #eeeafa;

    --card-bg: #ffffff;
    --text-muted: #667783;
    --bg-mid: #f8fbfc;
    --sidebar: #0c1a21;
    --sidebar-2: #11242d;
    --sidebar-text: #f1f6f8;
    --sidebar-muted: #90a3ac;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 12px 34px rgba(23, 40, 50, .08);
    --shadow-lg: 0 24px 60px rgba(15, 32, 40, .18);
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
}

html[data-theme="negro"] body.zenti-individual-active {
    color-scheme: dark;
    --bg: #0e1519;
    --bg-deep: #0a1115;
    --bg2: #17242a;
    --panel: #141d23;
    --panel-soft: #17242a;
    --overlay: #16222a;
    --chip: #1e2b33;
    --line: #26353d;
    --line-strong: #384a53;
    --text: #edf3f5;
    --muted: #a1afb6;
    --faint: #74858e;

    --blue: #4bb4d4;
    --cyan: #63c2de;
    --green: #5fbd88;
    --red: #e07878;
    --yellow: #d9a34d;
    --orange: #dc9460;
    --purple: #9d8cd6;

    --surface: #141d23;
    --surface-2: #17242a;
    --surface-3: #1e2b33;
    --accent: #4bb4d4;
    --accent-2: #63c2de;
    --accent-soft: #14384a;
    --accent-strong: #b9e6f4;
    --cyan-bright: #63c2de;
    --violet: #9d8cd6;

    --accent-rgb: 75, 180, 212;
    --faint-rgb: 116, 133, 142;
    --shadow-rgb: 0, 0, 0;

    --success: #5fbd88;
    --success-soft: #183729;
    --warning: #d9a34d;
    --warning-soft: #3a2a17;
    --danger: #e07878;
    --danger-soft: #3e2020;
    --info: #4bb4d4;
    --info-soft: #14384a;
    --purple-soft: #2a2541;

    --card-bg: #141d23;
    --text-muted: #a1afb6;
    --bg-mid: #17242a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .24);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, .22);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .38);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .24);
}

/* ── Sidebar celeste profundo: misma composición de gradientes que el Premium verde ── */
body.zenti-individual-active .zsidebar {
    background:
        radial-gradient(circle at 12% 8%, rgba(86, 191, 221, .16), transparent 24%),
        radial-gradient(circle at 88% 52%, rgba(75, 180, 212, .10), transparent 33%),
        linear-gradient(180deg, #0c1a21 0%, #0b1d25 58%, #081318 100%);
    border-right-color: rgba(144, 163, 172, .22);
    box-shadow: 12px 0 40px rgba(15, 32, 40, .17);
}

body.zenti-individual-active .brand-mark {
    background: #0c1a21;
    border-color: rgba(86, 191, 221, .24);
    box-shadow: 0 0 0 1px rgba(15, 134, 173, .10),
        0 10px 28px rgba(15, 134, 173, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.zenti-individual-active .brand-z {
    background-image: linear-gradient(135deg, #63c2de, #0f86ad);
}

body.zenti-individual-active .brand-copy span,
body.zenti-individual-active .workspace-copy small,
body.zenti-individual-active .profile-copy span,
body.zenti-individual-active .profile-logout,
body.zenti-individual-active .snav-caret { color: #90a3ac; }

body.zenti-individual-active .workspace-switcher {
    border-color: rgba(86, 191, 221, .16);
    background: linear-gradient(135deg, rgba(86, 191, 221, .07), rgba(15, 134, 173, .08)),
        rgba(255, 255, 255, .028);
}

body.zenti-individual-active .workspace-switcher:not(:disabled):hover {
    border-color: rgba(86, 191, 221, .34);
    background: linear-gradient(135deg, rgba(86, 191, 221, .12), rgba(15, 134, 173, .13)),
        rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 10px 28px rgba(15, 134, 173, .13);
}

body.zenti-individual-active .workspace-logo,
body.zenti-individual-active .profile .avatar {
    color: #0a2029;
    background: linear-gradient(135deg, #63c2de, #0f86ad);
    box-shadow: 0 8px 18px rgba(15, 134, 173, .24);
}

body.zenti-individual-active .nav-label { color: #647884; }
body.zenti-individual-active .snav-item,
body.zenti-individual-active .snav-subitem,
body.zenti-individual-active .sidebar-back,
body.zenti-individual-active .security-card { color: #a1b2ba; }

body.zenti-individual-active .snav-item:hover {
    background: linear-gradient(90deg, rgba(86, 191, 221, .07), rgba(15, 134, 173, .10));
    box-shadow: inset 0 0 0 1px rgba(86, 191, 221, .06);
}

body.zenti-individual-active .snav-item.active {
    background: linear-gradient(90deg, rgba(86, 191, 221, .16), rgba(15, 134, 173, .23) 72%, rgba(101, 85, 165, .09));
    box-shadow: inset 0 0 0 1px rgba(86, 191, 221, .15), 0 9px 24px rgba(15, 134, 173, .15);
}

body.zenti-individual-active .snav-item.active::before {
    background: linear-gradient(180deg, #63c2de, #0f86ad);
    box-shadow: 0 0 12px rgba(99, 194, 222, .70);
}

body.zenti-individual-active .snav-item.active .snav-icon {
    color: #63c2de;
    filter: drop-shadow(0 0 5px rgba(99, 194, 222, .20));
}

body.zenti-individual-active .snav-badge {
    color: #c7e9f4;
    background: linear-gradient(135deg, rgba(86, 191, 221, .18), rgba(15, 134, 173, .27));
    border-color: rgba(86, 191, 221, .15);
}

body.zenti-individual-active .snav-subitem.on {
    background: linear-gradient(90deg, rgba(86, 191, 221, .12), rgba(15, 134, 173, .16));
}

body.zenti-individual-active .sidebar-back:hover {
    border-color: rgba(86, 191, 221, .34);
    background: rgba(86, 191, 221, .08);
}

body.zenti-individual-active .security-card {
    border-color: rgba(86, 191, 221, .13);
    background: linear-gradient(135deg, rgba(86, 191, 221, .05), rgba(15, 134, 173, .07)),
        rgba(255, 255, 255, .025);
}

body.zenti-individual-active .security-dot {
    background: #63c2de;
    box-shadow: 0 0 0 4px rgba(99, 194, 222, .11), 0 0 14px rgba(99, 194, 222, .58);
}

body.zenti-individual-active .profile:hover {
    border-color: rgba(86, 191, 221, .10);
}

/* ── Área derecha: el fondo acompaña el celeste, igual que el verde en los portales ── */
body.zenti-individual-active .hero {
    background: radial-gradient(circle at 87% 9%, rgba(86, 191, 221, .12), transparent 25%),
        radial-gradient(circle at 73% 95%, rgba(101, 85, 165, .055), transparent 27%),
        linear-gradient(120deg, var(--surface) 0%, var(--surface) 58%, #eef7fa 100%);
}

/* Mismo plano que en Premium: el halo de .hero se pinta después del contenido en el CSS base. */
body.zenti-individual-active .hero > * { position: relative; z-index: 1; }

html[data-theme="negro"] body.zenti-individual-active .hero {
    background: radial-gradient(circle at 87% 9%, rgba(99, 194, 222, .10), transparent 25%),
        radial-gradient(circle at 73% 95%, rgba(157, 140, 214, .08), transparent 27%),
        linear-gradient(120deg, #141d23 0%, #16242b 58%, #122026 100%);
}

html[data-theme="negro"] body.zenti-individual-active .zeyebrow { color: #63c2de; }

body.zenti-individual-active .eyebrow-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(86, 191, 221, .14), 0 0 12px rgba(15, 134, 173, .34);
}

body.zenti-individual-active .hero-status {
    color: #eef6f9;
    background: radial-gradient(circle at 84% 10%, rgba(99, 194, 222, .16), transparent 25%),
        radial-gradient(circle at 10% 95%, rgba(75, 180, 212, .11), transparent 29%),
        linear-gradient(145deg, #102429, #142f38);
    border-color: rgba(86, 191, 221, .15);
}

body.zenti-individual-active .hero-status small { color: #91a8b2; }
body.zenti-individual-active .health-chip { color: #bde4f0; }
body.zenti-individual-active .health-chip::before {
    background: #63c2de;
    box-shadow: 0 0 0 4px rgba(99, 194, 222, .11), 0 0 12px rgba(99, 194, 222, .58);
}
body.zenti-individual-active .hero-meta { color: #a6b9c1; }
body.zenti-individual-active .hero-meta strong { color: #edf5f8; }

body.zenti-individual-active .client-logo {
    color: #08536e;
    background: linear-gradient(135deg, #e1f2f8, #d6e9f0);
}

html[data-theme="negro"] body.zenti-individual-active .client-logo {
    color: #c7e9f4;
    background: linear-gradient(135deg, #173540, #193c4a);
}

body.zenti-individual-active .day.active {
    background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000));
    box-shadow: 0 8px 18px rgba(15, 134, 173, .25);
}

body.zenti-individual-active .schedule-line {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
}

body.zenti-individual-active .zenti-logo .ti {
    background-image: linear-gradient(90deg, #63c2de, #0f86ad);
}
body.zenti-individual-active .zenti-logo .dot { background: #63c2de; }

/* ── Encabezado de sección ─────────────────────────────────────────────────── */
.individual-area .ind-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 2px 2px 18px;
}
.individual-area .ind-head h1 {
    margin: 10px 0 6px;
    font-size: clamp(24px, 2.6vw, 33px);
    letter-spacing: -0.04em;
}
.individual-area .ind-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
}

/* ── Filtros y buscador ────────────────────────────────────────────────────── */
.individual-area .ind-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.individual-area .ind-toolbar > input[type="search"] {
    flex: 1 1 240px;
    max-width: 380px;
}
.individual-area .ind-filtros { margin-bottom: 18px; }
.individual-area .ind-toolbar .ind-filtros { margin-bottom: 0; }

/* ── Grilla de tarjetas ────────────────────────────────────────────────────── */
.individual-area .ind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 14px;
}

.individual-area .ind-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 17px 18px 15px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .12s;
}
.individual-area .ind-card:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.individual-area .ind-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.individual-area .ind-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}
.individual-area .ind-card h3 {
    margin: 0;
    font-size: 15px;
    letter-spacing: -0.02em;
}
.individual-area .ind-card > p {
    margin: 0;
    flex: 1;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}
.individual-area .ind-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    color: var(--muted);
    font-size: 11px;
}
.individual-area .ind-card > footer strong { color: var(--accent); font-size: 12px; }
.individual-area .ind-card-tag {
    color: var(--faint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* ── Barra de avance del curso ─────────────────────────────────────────────── */
.individual-area .ind-progress {
    height: 6px;
    border-radius: 99px;
    background: var(--surface-3);
    overflow: hidden;
}
.individual-area .ind-progress > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .28s ease;
}

/* ── Detalle (lecciones / lectura) ─────────────────────────────────────────── */
.individual-area .ind-detalle { margin-top: 18px; }

.individual-area .ind-lecciones {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}
.individual-area .ind-leccion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background .15s;
}
.individual-area .ind-leccion:last-child { border-bottom: 0; }
.individual-area .ind-leccion:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.individual-area .ind-leccion > input {
    width: 19px;
    height: 19px;
    min-height: 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}
.individual-area .ind-leccion strong { display: block; font-size: 13px; font-weight: 650; }
.individual-area .ind-leccion small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.individual-area .ind-leccion.hecha strong { color: var(--muted); text-decoration: line-through; }

.individual-area .ind-lectura { padding: 4px 18px 18px; max-width: 68ch; }
.individual-area .ind-lectura p {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.75;
}

/* ── Soporte: mapa de equipos + lista ──────────────────────────────────────── */
/* El canvas del mapa 3D es un viewport oscuro a propósito (es el motor, no el tema), igual que
   en los portales de empresa: los tonos claros harían ilegibles los equipos. */
.individual-area .ind-mapa {
    position: relative;
    height: 300px;
    margin: 0 0 4px;
    border-radius: 14px;
    background: #080a12;
    overflow: hidden;
}
.individual-area .ind-mapa > canvas { display: block; width: 100%; height: 100%; }

.individual-area .ind-equipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    padding: 12px 0 2px;
}
.individual-area .ind-equipo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}
.individual-area .ind-equipo-copy { flex: 1; min-width: 0; }
.individual-area .ind-equipo-copy strong {
    display: block;
    font-size: 13px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.individual-area .ind-equipo-copy small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }

/* El punto usa el mismo semáforo que la escena 3D y las píldoras (tokens --sev-* de base.css). */
.individual-area .ind-equipo-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sev-ok, var(--success));
}
.individual-area .ind-equipo-dot.sev-critical  { background: var(--sev-critical); }
.individual-area .ind-equipo-dot.sev-normal    { background: var(--sev-normal); }
.individual-area .ind-equipo-dot.sev-monitoring{ background: var(--sev-monitoring); }

/* ── Móvil: solo pantallas chicas; escritorio no cambia ────────────────────── */
@media (max-width: 760px) {
    .individual-area .ind-mapa { height: 220px; }
    .individual-area .ind-equipos { grid-template-columns: 1fr; }
    .individual-area .ind-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .individual-area .ind-grid { grid-template-columns: 1fr; }
    .individual-area .ind-toolbar > input[type="search"] { max-width: none; flex-basis: 100%; }
    .individual-area .ind-filtros { width: 100%; overflow-x: auto; }
    .individual-area .ind-leccion { padding: 14px 14px; }
    .individual-area .ind-lectura { padding: 4px 14px 16px; }
}

/* ── Dashboard: el avance de la escuela ────────────────────────────────────────
   Solo lo que el sistema global no cubre. Las métricas de arriba son las .metric-card
   de siempre y la barra de avance es la misma .ind-progress de las tarjetas de curso. */
.individual-area .ind-dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin-top: 18px;
}

/* Bloque "seguí donde quedaste": dos fichas apiladas + el botón al pie. */
.individual-area .ind-dash-foco {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 18px 18px;
}
.individual-area .ind-dash-foco-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
}
.individual-area .ind-dash-foco-label {
    color: var(--faint);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.individual-area .ind-dash-foco-item strong { font-size: 14px; letter-spacing: -0.02em; }
.individual-area .ind-dash-foco-item small { color: var(--muted); font-size: 11.5px; }
.individual-area .ind-dash-foco-item em {
    margin-top: 3px;
    color: var(--faint);
    font-size: 11px;
    font-style: normal;
    line-height: 1.5;
}

.individual-area .ind-dash-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.individual-area .ind-dash-vacio { padding: 8px 18px 20px; }
.individual-area .ind-dash-vacio .ind-dash-acciones { justify-content: center; }

/* Lista de cursos empezados: título + %, y debajo la barra a todo el ancho de la fila. */
.individual-area .ind-dash-lista {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}
.individual-area .ind-dash-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background .15s;
}
.individual-area .ind-dash-fila:last-child { border-bottom: 0; }
.individual-area .ind-dash-fila:hover { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.individual-area .ind-dash-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.individual-area .ind-dash-fila > strong { font-size: 13px; font-weight: 650; }
.individual-area .ind-dash-pct { color: var(--accent); font-size: 12px; font-weight: 700; }
.individual-area .ind-dash-fila > .ind-progress { grid-column: 1 / -1; }
.individual-area .ind-dash-fila > small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
    .individual-area .ind-dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .individual-area .ind-dash-foco { padding: 4px 14px 16px; }
    .individual-area .ind-dash-fila { padding: 13px 14px; }
}