/* ============ tokens · Manual de Marca Matías Londoño ============
Negro y grises dominan; el rojo #EB0100 entra en menor proporción,
como acento, placas y progreso. Base blanca. */
:root{
--bg:#F7F7F7;
--panel:#FFFFFF;
--panel-2:#FBFBFB;
--ink:#000000;
--ink-2:#232226; /* gris oscuro del manual */
/* Era #77777D: 4,15:1 sobre el fondo, debajo del 4,5 que pide un texto.
#6E6E73 es el mismo gris neutro un paso más oscuro —ya era --wait-ink—:
4,73:1 sobre --bg y 5,07:1 sobre blanco. */
--muted:#6E6E73;
--line:#EDEDED; /* gris light del manual */
--line-2:#E1E1E1;
--brand:#EB0100; /* rojo ML Life Secrets */
--brand-600:#C4211C; /* rojo profundo · hover */
--brand-soft:#FFF2F1;
--brand-soft-line:#FFD6D3;
--ok-bg:#FFF2F1; --ok-ink:#C4211C;
--wait-bg:#F3F3F4; --wait-ink:#6E6E73;
/* --lock-ink era #9A9AA0: 2,52:1 sobre --lock-bg, ilegible en «Bloqueado».
Ahora 4,57:1. Lo que dice «cerrado» es la placa gris y el candado, no
una tinta tan pálida que no se lee. */
--lock-bg:#F3F3F4; --lock-ink:#6E6E73;
--shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px -14px rgba(0,0,0,.18);
--shadow-lg:0 22px 56px -24px rgba(0,0,0,.35);
--r:12px; --r-sm:8px;
--side-w:248px;
--sans:'Outfit',-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
/* Negro y punto. El fondo, las tarjetas y los paneles comparten el mismo
negro: lo que separa una cosa de otra es la línea, no un gris apenas más
claro. Antes había tres grises —#050506 el fondo, #111112 las tarjetas,
#161617 los paneles— y en una pantalla buena se veían como manchas. */
--bg:#000000;
--panel:#000000;
--panel-2:#000000;
--ink:#FFFFFF;
--ink-2:#D6D6D8;
--muted:#8A8A90;
--line:#232226; /* gris oscuro del manual */
--line-2:#2E2D31;
--brand:#EB0100;
--brand-600:#FF3B33;
--brand-soft:#25100F;
--brand-soft-line:#4A1210;
--ok-bg:#25100F; --ok-ink:#FF6B63;
--wait-bg:#1A1A1C; --wait-ink:#9A9AA0;
--lock-bg:#161617; --lock-ink:#8A8A90; /* era #77777D: 4,06:1 → 5,27:1 */
--shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 26px -14px rgba(0,0,0,.9);
--shadow-lg:0 26px 64px -22px rgba(0,0,0,.95);
}
*{box-sizing:border-box}
/* El navegador oculta lo que lleva `hidden` con `display:none`, pero esa regla
vive en su hoja por defecto y CUALQUIER `display` que pongamos nosotros le
gana. Ya pasó dos veces: el formulario de entrada seguía visible después de
enviarlo, y el ítem «Administración» se le mostraba a un consultor porque
`.side-item` es `display:flex`. Se corta de raíz acá. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
background:var(--bg); color:var(--ink);
font:15px/1.55 var(--sans);
-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.22}
/* ============ shell ============
Sidebar ancho con nombres, al modo de Notion/OneFactor: la navegación se lee,
no se adivina por un icono. Bajo 900px se vuelve cajón deslizable. */
.shell{display:flex;min-height:100vh}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:29;backdrop-filter:blur(2px)}
.side{
width:var(--side-w);flex:0 0 var(--side-w);background:var(--panel-2);
border-right:1px solid var(--line);display:flex;flex-direction:column;
position:sticky;top:0;height:100vh;z-index:30;
}
.side-top{display:flex;align-items:center;gap:6px;padding:12px 10px 8px 12px}
.ws{
flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:6px 7px;border:0;border-radius:9px;
background:transparent;cursor:pointer;text-align:left;transition:.15s;
}
.ws:hover{background:var(--line)}
/* El logo de Life Secrets Systematic Consulting en la esquina de arriba.
Está armado con texto y no con una imagen: el archivo del logo no está en el
repositorio —el `logo-ml-life-secrets.svg` que había es otro lockup, el de
«ML | LIFE SECRETS»— y con texto además queda nítido en cualquier pantalla y
pesa cero. Si aparece el original, esto se reemplaza por un y ocupa lo que ocupaba. */
.me-link{
display:flex;align-items:center;gap:9px;flex:1;min-width:0;
margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;
text-align:left;cursor:pointer;border-radius:7px;
}
.me-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.me-txt{flex:1;min-width:0;line-height:1.2}
.me-name{display:block;font-size:12.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-sub{display:block;font-size:11px;color:var(--muted)}
.me-theme{
width:28px;height:28px;flex:0 0 28px;border:0;border-radius:7px;background:transparent;color:var(--muted);
display:grid;place-items:center;cursor:pointer;transition:.15s;
}
.me-theme:hover{background:var(--line);color:var(--ink)}
.side-open{
width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);
display:none;place-items:center;cursor:pointer;margin-right:-4px;
}
.side-open:hover{background:var(--line)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:0 26px;border-bottom:1px solid var(--line);background:var(--panel);
position:sticky;top:0;z-index:15;
}
.crumbs{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);min-width:0;overflow:hidden}
.crumbs a{color:var(--muted);text-decoration:none;white-space:nowrap;cursor:pointer}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-chip{
display:flex;align-items:center;gap:9px;
font-size:12.5px;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line);
padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.gc-p{font-weight:700;font-variant-numeric:tabular-nums}
.gc-bar{width:74px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.gc-bar i{display:block;height:100%;border-radius:999px;background:var(--brand);transition:width .3s ease}
.view{padding:28px 26px 90px;max-width:1180px;width:100%;margin:0 auto;flex:1}
/* ============ generic ============ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.page-h{margin-bottom:22px}
.page-h h1{font-size:25px;margin-bottom:6px}
.page-h p{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}
.btn{
border:1px solid transparent;border-radius:9px;padding:9px 16px;font-size:13.5px;font-weight:600;
cursor:pointer;background:var(--brand);color:#fff;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--brand-600)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn.ghost:hover{background:var(--panel-2);color:var(--ink)}
.btn.sm{padding:7px 13px;font-size:12.5px}
/* Un botón que además es un enlace —«Entrar», «Agendar»— sigue siendo un
botón: el subrayado del navegador lo hacía ver como otra cosa. */
a.btn{text-decoration:none;display:inline-block;line-height:1.25}
.pill{
display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;
padding:4px 10px;border-radius:999px;letter-spacing:.01em;
}
.pill.ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill.todo{background:var(--wait-bg);color:var(--wait-ink)}
.pill.lock{background:var(--lock-bg);color:var(--lock-ink)}
.pill.part{background:var(--brand-soft);color:var(--brand-600);border:0}
.pill.step{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
/* Una parte que sólo se lee: ni verde de «hecho» ni rojo de «te falta». */
.pill.lectura{background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.pill.lectura .dot{background:var(--muted);opacity:.55}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
/* ============ dashboard ============ */
.hero{
background:#000;border:1px solid #000;border-radius:var(--r);color:#fff;
padding:22px 24px;display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px;
position:relative;overflow:hidden;
}
.hero::before{
content:"";position:absolute;right:-90px;top:-120px;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,rgba(235,1,0,.20),transparent 68%);pointer-events:none;
}
.hero h2{font-size:17px;margin-bottom:4px;color:#fff}
.hero p{margin:0;font-size:13.5px;color:#B4B4B8;max-width:62ch}
.hero .bar{background:rgba(255,255,255,.16)}
.hero-stat{display:flex;gap:26px;align-items:center}
.hero-stat .n{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.hero-stat .n.accent{color:var(--brand)}
.hero-stat .l{font-size:11px;color:#8A8A90;text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
.sec-title{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px}
.sec-title h3{font-size:15px}
.sec-title span{font-size:12.5px;color:var(--muted)}
.grid-sys{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.sys-card{
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;
cursor:pointer;transition:.18s;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;position:relative;
}
.sys-card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.sys-card.locked{cursor:not-allowed;opacity:.62}
.sys-card.locked:hover{transform:none;box-shadow:var(--shadow)}
.sys-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sys-icon{
width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
display:grid;place-items:center;font-weight:700;font-size:13px;border:0;
}
.sys-card h4{font-size:15px;margin:0}
.sys-card .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.sys-card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.sys-card .foot.lockhint{font-size:11.5px;font-style:italic}
.sys-card .foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ============ step cards ============ */
.steps{display:flex;flex-direction:column;gap:12px}
.step{
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--shadow);overflow:hidden;transition:.18s;
}
.step.open{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.step.locked{opacity:.62}
.step-head{
display:flex;align-items:flex-start;gap:14px;padding:16px 18px;cursor:pointer;
}
.step.locked .step-head{cursor:not-allowed}
/* La cabecera se alcanza con Tab (ver `cabeceraDesplegable`): sin un anillo
visible, el foco de teclado sería invisible justo ahí. */
.step-head:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:var(--r)}
.step-head .grow{flex:1;min-width:0}
.step-titleline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:3px}
.step-titleline h4{font-size:14.5px}
.step-desc{font-size:13px;color:var(--muted);margin:0;line-height:1.5}
.step-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.chev{color:var(--muted);transition:transform .2s;flex-shrink:0;margin-top:2px}
.step.open .chev{transform:rotate(180deg)}
.step-body{border-top:1px solid var(--line);padding:18px;display:none;background:var(--panel-2)}
.step.open .step-body{display:block}
/* ============ module content ============ */
.mod-head{margin-bottom:18px}
.mod-head h1{font-size:24px;margin-bottom:5px}
.mod-head .sub{color:var(--muted);font-size:14px}
.mod-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.reading{font-size:14px;color:var(--ink-2);line-height:1.65}
.reading h2,.reading h3,.reading h4{color:var(--ink);margin:18px 0 7px;font-size:14.5px}
.reading h2:first-child,.reading h3:first-child{margin-top:0}
.reading p{margin:0 0 10px;white-space:pre-line}
.reading ul{margin:0 0 12px;padding-left:20px}
.reading li{margin:3px 0}
.reading table{border-collapse:collapse;width:100%;font-size:12.5px;margin:8px 0 14px}
.reading th,.reading td{border:1px solid var(--line-2);padding:7px 9px;text-align:left;vertical-align:top}
.reading th{background:var(--panel-2);font-weight:650}
.field{margin:0 0 14px}
.field > label{display:block;font-size:13.5px;font-weight:550;color:var(--ink);margin-bottom:6px;white-space:pre-line}
textarea.inp,input.inp{
width:100%;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;
transition:.15s;
}
textarea.inp{min-height:74px;line-height:1.55}
textarea.inp:focus,input.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea.inp::placeholder,input.inp::placeholder{color:var(--muted);opacity:.72;font-style:italic}
.checks{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.chk{
display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-sm);
cursor:pointer;transition:.12s;font-size:13.5px;line-height:1.5;
}
.chk:hover{background:var(--brand-soft)}
.chk input{
appearance:none;width:17px;height:17px;border:1.5px solid var(--line-2);border-radius:5px;
background:var(--panel);cursor:pointer;flex-shrink:0;margin:1px 0 0;position:relative;transition:.15s;
}
.chk input:checked{background:var(--brand);border-color:var(--brand)}
.chk input:checked::after{
content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.chk.on{color:var(--ink)}
/* «☐ Otro: ______»: la raya del papel es una casilla de texto, en la misma
línea que la opción. Se usa el mismo renglón que los bloques `fill`. */
.chk-tx{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.grid-wrap{
overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-sm);margin:0 0 16px;background:var(--panel);
}
table.grid{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;font-size:13px}
table.grid th{
background:var(--panel-2);text-align:left;font-weight:650;font-size:12px;color:var(--ink-2);
padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:pre-line;vertical-align:bottom;
}
table.grid td{border-bottom:1px solid var(--line);padding:0;vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid td.lab{
padding:11px 12px;font-weight:550;color:var(--ink);background:var(--panel-2);
border-right:1px solid var(--line);min-width:130px;white-space:pre-line;
}
table.grid td.chk-cell{text-align:center;padding:10px}
table.grid textarea{
width:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;
padding:10px 12px;resize:none;min-height:44px;line-height:1.5;display:block;
}
table.grid textarea:focus{outline:none;background:var(--brand-soft);box-shadow:inset 0 0 0 1.5px var(--brand)}
table.grid textarea::placeholder{color:var(--muted);opacity:.6;font-style:italic}
/* La guía que la celda hereda de su columna: se ve, pero un punto por debajo
del ejemplo que el documento sí escribió en esa celda. Es una pista, no una
frase que alguien redactó para esa fila. */
table.grid td.guia-heredada textarea::placeholder{opacity:.42}
table.grid input[type=checkbox]{
appearance:none;width:17px;height:17px;border:1.5px solid var(--line-2);border-radius:5px;
background:var(--panel);cursor:pointer;position:relative;transition:.15s;
}
table.grid input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)}
table.grid input[type=checkbox]:checked::after{
content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.sec-h{font-size:14px;font-weight:650;margin:20px 0 8px;color:var(--ink)}
.sec-h:first-child{margin-top:0}
.sec-sub{font-size:13.5px;color:var(--ink-2);margin:0 0 10px;white-space:pre-line}
.note{
background:var(--brand-soft);border:0;border-radius:var(--r-sm);
padding:11px 13px;font-size:13px;color:var(--ink-2);margin:0 0 16px;
}
.step-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.step-foot .status{font-size:12.5px;color:var(--muted)}
/* Donde estaba el botón de guardar. No es un botón: es la respuesta a la
pregunta que el botón dejaba abierta —«¿y esto se guardó?»— y por eso vive
en su lugar, al pie de la parte. */
.step-foot .autosave{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.step-foot .autosave::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-ink);flex:none;
}
/* --- renglones para completar -------------------------------------------
«Yo soy una persona que valora ______.» El texto corre y la casilla ocupa
el hueco, como en el papel. La casilla crece con la fila y nunca es más
angosta que un par de palabras, así que la frase se sigue leyendo. */
.fill{margin:0 0 14px;display:flex;flex-direction:column;gap:9px}
.fill-l{
display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;
font-size:13.5px;line-height:2;color:var(--ink);
}
.fill-t{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
input.fill-in{
flex:1 1 160px;min-width:120px;border:0;border-bottom:1.5px solid var(--line-2);
background:transparent;color:var(--ink);font:inherit;font-size:13.5px;
padding:2px 4px;border-radius:2px 2px 0 0;transition:.15s;
}
input.fill-in:focus{outline:none;border-bottom-color:var(--brand);background:var(--brand-soft)}
.fill-hueco{flex:1 1 160px;min-width:120px;border-bottom:1.5px dashed var(--line-2);height:1.2em}
.finish{
margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow);
}
.finish h4{font-size:14.5px;margin-bottom:3px}
.finish p{margin:0;font-size:13px;color:var(--muted)}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.spinner{
width:22px;height:22px;border:2.5px solid var(--line-2);border-top-color:var(--brand);
border-radius:50%;animation:spin .7s linear infinite;margin:40px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ============ toast + modal ============ */
.toast{
position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:550;
z-index:60;transition:.25s;box-shadow:var(--shadow-lg);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-backdrop{
position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
display:grid;place-items:center;z-index:50;padding:20px;animation:fade .2s;
}
.modal-backdrop[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.modal{
background:var(--panel);border:1px solid var(--line-2);border-radius:16px;max-width:440px;width:100%;
padding:30px 28px;text-align:center;box-shadow:var(--shadow-lg);animation:pop .35s cubic-bezier(.2,1.2,.3,1);
}
:root[data-theme="dark"] .modal{background:#1A1A1C}
@keyframes pop{from{transform:scale(.92) translateY(10px);opacity:0}}
.modal .ic{
width:60px;height:60px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
display:grid;place-items:center;margin:0 auto 16px;animation:ring .6s ease-out;
}
@keyframes ring{0%{box-shadow:0 0 0 0 var(--brand-soft)}100%{box-shadow:0 0 0 22px transparent}}
.modal h3{font-size:19px;margin-bottom:8px}
.modal p{margin:0 0 20px;color:var(--muted);font-size:14px}
.modal .unlocked{
background:var(--brand-soft);border:0;border-radius:var(--r-sm);
padding:12px;margin-bottom:18px;font-size:13.5px;
}
.modal .unlocked b{display:block;color:var(--brand);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.modal-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
/* ============ responsive ============ */
@media (max-width:900px){
/* el sidebar pasa a cajón: fuera del flujo, sobre el contenido */
.side{
position:fixed;left:0;top:0;bottom:0;height:100dvh;
transform:translateX(-100%);transition:transform .22s cubic-bezier(.32,.72,0,1);
box-shadow:var(--shadow-lg);
}
body.side-open .side{transform:none}
.side-collapse{display:grid}
.side-open{display:grid}
}
@media (min-width:901px){ .scrim{display:none} }
@media (max-width:820px){
.view{padding:20px 15px 80px}
.topbar{padding:0 15px}
.crumbs{font-size:12.5px}
.global-chip{display:none}
.hero{flex-direction:column;align-items:flex-start;gap:14px}
.grid-sys{grid-template-columns:1fr}
.step-head{flex-wrap:wrap}
.mod-head h1{font-size:20px}
}
/* ============ chip de guardado ============ */
.topbar-right{display:flex;align-items:center;gap:9px}
.save-chip{
font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap;
background:var(--wait-bg);color:var(--muted);transition:.2s;
}
.save-chip.saved{background:var(--ok-bg);color:var(--ok-ink)}
.save-chip.error{background:var(--brand);color:#fff}
/* ============ buscador ============ */
.searchbox{
display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line-2);
border-radius:var(--r);padding:0 14px;box-shadow:var(--shadow);margin-bottom:22px;color:var(--muted);
}
.searchbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search-input{
flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;
padding:14px 0;outline:none;
}
.search-input::-webkit-search-cancel-button{filter:grayscale(1)}
mark{background:var(--brand-soft);color:var(--brand-600);padding:1px 2px;border-radius:3px;font-weight:600}
/* ============ mis respuestas ============ */
.qa-q{font-weight:600;color:var(--ink);margin:14px 0 4px!important}
.qa-a{
margin:0 0 10px!important;padding:9px 12px;background:var(--panel-2);
border-radius:var(--r-sm);white-space:pre-line;
}
/* marca del mínimo de cierre en la barra */
.bar-need{position:relative;overflow:visible}
.bar-need > i{position:relative;z-index:1}
.bar-need > b{
position:absolute;top:-3px;width:2px;height:11px;background:var(--ink);opacity:.45;border-radius:2px;z-index:2;
}
/* ============ tablas apiladas en móvil ============ */
@media (max-width:720px){
.grid-wrap{border:0;background:transparent;overflow:visible}
table.grid{min-width:0;display:block}
table.grid thead{display:none}
table.grid tbody{display:block}
table.grid tr{
display:block;background:var(--panel);border:1px solid var(--line-2);
border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden;
}
table.grid td{display:block;border-bottom:1px solid var(--line);padding:0}
table.grid td:last-child{border-bottom:0}
table.grid td::before{
content:attr(data-h);display:block;font-size:11px;font-weight:650;color:var(--muted);
text-transform:uppercase;letter-spacing:.04em;padding:9px 12px 0;
}
table.grid td[data-h=""]::before{display:none}
table.grid td.lab{
border-right:0;background:var(--brand-soft);color:var(--ink);font-weight:650;padding:10px 12px;
}
table.grid td.lab::before{display:none}
table.grid td.chk-cell{display:flex;align-items:center;gap:10px;padding:10px 12px}
table.grid td.chk-cell::before{padding:0;flex:1;text-transform:none;font-size:13px;letter-spacing:0}
table.grid textarea{padding:4px 12px 10px}
}
/* ============ documento de impresión ============ */
#printRoot{display:none}
.pr-loading{padding:40px;text-align:center;color:var(--muted)}
@media screen{ body.printing .shell{filter:blur(2px);pointer-events:none} }
@media print{
.shell,.toast,.modal-backdrop,.side,.topbar{display:none!important}
body.printing #printRoot{display:block}
body{background:#fff;color:#000}
@page{margin:16mm 14mm}
}
#printRoot{color:#000;font-size:11pt;line-height:1.45}
#printRoot .pr-cover{text-align:center;padding:30mm 0 18mm;page-break-after:always}
/* En la portada del PDF el logo va en tinta: negro sobre papel blanco, con la
bajada en el rojo profundo. Los colores van fijos y no por variable porque
el documento se imprime igual esté el campus en claro o en oscuro. */
#printRoot .pr-logo{margin-bottom:22px;align-items:flex-start}
#printRoot .marca-n{color:#000;font-size:26px}
#printRoot .marca-s{color:#C4211C}
#printRoot .pr-cover h1{font-size:22pt;margin-bottom:8px}
#printRoot .pr-date{color:#666;font-size:10pt}
#printRoot .pr-sys{
font-size:15pt;margin:0 0 10pt;padding-bottom:5pt;border-bottom:2px solid #EB0100;page-break-before:always;
}
#printRoot .pr-mod{page-break-before:always;page-break-inside:auto}
#printRoot .pr-cover + .pr-mod,#printRoot .pr-sys + .pr-mod{page-break-before:avoid}
#printRoot .pr-modhead{border-left:3px solid #EB0100;padding-left:10px;margin:0 0 14pt}
#printRoot .pr-kicker{font-size:8.5pt;text-transform:uppercase;letter-spacing:.08em;color:#EB0100;font-weight:700}
#printRoot .pr-modhead h2{font-size:16pt;margin:3pt 0}
#printRoot .pr-sub{color:#555;font-size:10pt}
#printRoot .pr-sec{margin-bottom:12pt;page-break-inside:avoid}
#printRoot .pr-sec h3{font-size:12pt;margin:14pt 0 6pt;padding-bottom:3pt;border-bottom:1px solid #ddd}
#printRoot .pr-sec h4,#printRoot .pr-sec h5{font-size:10.5pt;margin:9pt 0 3pt}
#printRoot .pr-note{color:#555;font-size:9.5pt;margin:0 0 6pt}
#printRoot .pr-q{font-weight:700;margin:9pt 0 3pt}
#printRoot .pr-fill{margin:3pt 0;line-height:1.7}
#printRoot .pr-a{
border-left:2px solid #EB0100;padding:5pt 9pt;background:#FAFAFA;white-space:pre-line;
min-height:22pt;margin-bottom:7pt;
}
#printRoot .pr-a.empty{border-left-color:#ccc;background:transparent;border-bottom:1px solid #ddd;min-height:26pt}
#printRoot .pr-check{list-style:none;padding:0;margin:0 0 8pt}
#printRoot .pr-check li{margin:2pt 0}
#printRoot .pr-check li.on{font-weight:600}
#printRoot .pr-table{border-collapse:collapse;width:100%;margin:6pt 0 10pt;font-size:9pt;page-break-inside:avoid}
#printRoot .pr-table th,#printRoot .pr-table td{border:1px solid #bbb;padding:4pt 6pt;text-align:left;vertical-align:top}
#printRoot .pr-table th{background:#f2f2f2;font-size:8.5pt}
#printRoot .pr-table td.lab{background:#FAFAFA;font-weight:600}
/* ============ galería del currículum ============
Tarjeta al modo OneFactor: el nombre del sistema grande sobre placa negra,
y debajo una franja clara con el número, el progreso y el estado. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.gcard{
background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
cursor:pointer;transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s,border-color .18s;
box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:left;padding:0;
}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.gcard:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* La portada de cada sistema. Es lo primero que ve alguien que pagó lo que
cuesta el programa, así que se comporta como la tapa de un libro y no como
un botón: el ícono en un rombo de línea fina, el número del sistema en
versalitas, el nombre en la serif de la marca y una regla roja debajo.
El rombo y la serif salen del mismo lugar que el logo —es la tipografía de
Life Secrets— y son lo que separa esto de una grilla de tarjetas de curso. */
.gcard-art{
aspect-ratio:4/3;background:radial-gradient(125% 120% at 50% -10%,#170A0B,#000 62%);
color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:22px 20px;position:relative;isolation:isolate;
}
.gcard-art::after{
content:"";position:absolute;inset:0;z-index:-1;
background:radial-gradient(120% 90% at 50% 118%,rgba(235,1,0,.32),transparent 60%);
}
/* Filo de luz en el borde de arriba: es lo que hace que la tarjeta se vea
impresa y no plana. */
.gcard-art::before{
content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
/* El rombo no crece: la portada tiene alto fijo y agrandarlo empuja el nombre
del sistema fuera de la tarjeta. Se probó a 104 px para que se vieran los
surcos de la huella digital y el resultado fue nombres cortados. */
.gcard-rombo{
width:62px;height:62px;flex:0 0 62px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.22);transform:rotate(45deg);margin-bottom:20px;
transition:border-color .22s ease;
}
.gcard-rombo svg,.gcard-rombo .ico-img{transform:rotate(-45deg);color:var(--brand)}
/* Los íconos de archivo se pintan como máscara: el PNG sólo aporta la forma y
el color sale de `currentColor`. Un mismo archivo sirve rojo en la tarjeta
abierta y blanco en la bloqueada, sin exportar dos versiones. */
.ico-img{
display:block;background-color:currentColor;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
}
.gcard:hover .gcard-rombo{border-color:rgba(235,1,0,.75)}
.gcard-rule{width:32px;height:1px;margin-top:13px;
background:linear-gradient(90deg,transparent,var(--brand),transparent)}
/* El ícono manda sobre el nombre: se ve antes de leer, que es como se elige
una tarjeta en una grilla de diez. Va en el rojo de marca —es lo único con
color de la tarjeta— y el nombre queda en blanco. */
.gcard-art{grid-auto-flow:row;align-content:center;gap:0}
.gcard.locked .gcard-rombo svg,
.gcard.locked .gcard-rombo .ico-img{color:#fff;opacity:.7}
/* El sistema bloqueado deja de teñirse de gris entero: si no, el ícono blanco
que se pidió para ese estado se apagaba igual que todo lo demás. */
.gcard.locked .gcard-art{filter:none}
.gcard.locked .gcard-name{color:rgba(255,255,255,.62)}
.gcard.locked .gcard-rule{opacity:.35}
.gcard-name{
font:500 25px/1.15 "Playfair Display",Georgia,"Times New Roman",serif;
letter-spacing:-.005em;text-align:center;text-wrap:balance;
}
/* El mismo ícono encabeza la página del sistema. */
.sis-h1{display:flex;align-items:center;gap:11px}
.sis-ico{display:flex;color:var(--brand);flex:0 0 auto}
.gcard-art .tm{font-size:.62em;vertical-align:super;opacity:.8}
.gcard-foot{padding:11px 13px 12px;display:flex;flex-direction:column;gap:8px}
.gcard-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-width:0}
.gcard-n{
font-size:11px;font-weight:700;color:var(--ink-2);background:var(--line);
border-radius:5px;padding:1px 6px;flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.gcard-line .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard.locked{opacity:.66}
.gcard.locked:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}
.gcard-lock{
position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;
background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;
}
.gcard-badge{
position:absolute;top:9px;left:9px;font-size:10px;font-weight:650;letter-spacing:.06em;
text-transform:uppercase;background:var(--brand);color:#fff;border-radius:5px;padding:2.5px 6px;
}
.gcard.start .gcard-art{background:radial-gradient(125% 120% at 50% -10%,#1A1A1C,#000 65%)}
/* La tarjeta 1:1 con Matías. Misma placa que los sistemas, pero en vez del
rombo lleva su foto: el «1:1» y su nombre en la serif de la marca, como la
de OneFactor, para que se lea como una persona y no como un módulo más. */
a.gcard{color:inherit;text-decoration:none}
.uno-fila{display:flex;align-items:center;gap:10px}
.uno-num{font:500 46px/1 "Playfair Display",Georgia,serif;letter-spacing:-.01em}
.uno-con{font:italic 400 21px/1 "Playfair Display",Georgia,serif;color:rgba(255,255,255,.72)}
.uno-foto{
width:76px;height:76px;border-radius:50%;object-fit:cover;flex:0 0 auto;margin-left:4px;
border:1px solid rgba(255,255,255,.22);box-shadow:0 0 0 4px #000,0 0 0 5px rgba(235,1,0,.55);
transition:box-shadow .22s ease;
}
.gcard.uno:hover .uno-foto{box-shadow:0 0 0 4px #000,0 0 0 5px rgba(235,1,0,.95)}
.uno-firma{font:italic 400 21px/1.15 "Playfair Display",Georgia,serif;margin-top:16px;text-align:center}
.uno-ir{flex:0 0 auto;font-size:13px;color:var(--muted);transition:color .18s}
.gcard.uno:hover .uno-ir{color:var(--brand)}
/* La 1:1 con el consultor: no es una persona en particular, así que el
círculo de la foto lleva una silueta de línea. Blanca y no roja: el rojo de
marca no se lee como trazo fino sobre el negro. Debajo, con quién es. */
.uno-silueta{display:grid;place-items:center;background:#0B0B0C;color:rgba(255,255,255,.82)}
.uno-nota{margin:0;font-size:11.5px;line-height:1.4;color:var(--muted)}
/* ============ lección: video ============ */
.lesson-video{
position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
border:1px solid var(--line);margin-bottom:14px;
}
.lesson-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lesson-video.empty{
display:grid;place-items:center;background:var(--panel-2);border-style:dashed;border-color:var(--line-2);
}
.lesson-video.empty .msg{text-align:center;color:var(--muted);font-size:13px;padding:20px;max-width:44ch}
.lesson-video.empty .msg strong{display:block;color:var(--ink-2);font-size:14px;font-weight:600;margin-bottom:4px}
.lesson-sum{
font-size:13.5px;color:var(--ink-2);font-style:italic;line-height:1.6;
margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.lesson-sum b{font-style:normal;font-weight:600;color:var(--ink)}
.vid-dur{font-variant-numeric:tabular-nums}
/* ============ tarjetas de sección genéricas ============ */
.panel{
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:18px 20px;box-shadow:var(--shadow);
}
.panel + .panel{margin-top:14px}
.panel h3{font-size:14.5px;margin-bottom:4px}
.panel p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.panel p + p{margin-top:9px}
.panel .muted{color:var(--muted)}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.kv{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv:first-of-type{border-top:0}
.kv dt{flex:0 0 132px;color:var(--muted)}
.kv dd{margin:0;color:var(--ink-2)}
/* ============ calendario ============ */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cal-head h3{font-size:15px}
.cal-nav{display:flex;gap:6px}
.cal{
display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);
border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--shadow);
}
.cal-dow{
padding:9px 10px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--line);text-align:left;
}
.cal-cell{
min-height:96px;padding:7px 8px;border-top:1px solid var(--line);border-left:1px solid var(--line);
display:flex;flex-direction:column;gap:4px;
}
.cal-cell:nth-child(7n+1){border-left:0}
.cal-cell.off{background:var(--panel-2)}
.cal-cell.off .cal-num{opacity:.38}
.cal-num{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;align-self:flex-end}
.cal-cell.today .cal-num{
background:var(--brand);color:#fff;border-radius:50%;width:20px;height:20px;
display:grid;place-items:center;font-weight:600;
}
.cal-ev{
font-size:11.5px;line-height:1.3;padding:4px 6px;border-radius:6px;
background:var(--brand-soft);border:0;color:var(--ink-2);
text-decoration:none;display:block;
}
.cal-ev:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.cal-ev .h{display:block;font-weight:600;font-variant-numeric:tabular-nums}
/* Las llamadas a las que invitaron a esta persona. Sin color nuevo: la marca
es rojo y neutros, así que se distinguen por el fondo neutro y la raya. */
.cal-ev.tuya{background:var(--wait-bg);box-shadow:inset 3px 0 0 var(--brand);padding-left:8px}
.cal-ley{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.cal-ley span{display:inline-flex;align-items:center;gap:6px}
.cal-ley-m{width:11px;height:11px;border-radius:3px;background:var(--brand-soft);border:1px solid var(--brand-soft-line)}
.cal-ley-m.tuya{background:var(--wait-bg);border-color:var(--line);box-shadow:inset 3px 0 0 var(--brand)}
/* Las próximas llamadas, con el botón de entrar y el de agendar. La tabla del
mes se lee de un vistazo pero se toca mal: el enlace de una llamada, en una
celda de 11px, no es un botón. */
.cal-prox{margin-top:16px}
.cal-prox-fila{
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:11px 0;border-top:1px solid var(--line);
}
.cal-prox-fila:first-of-type{margin-top:6px}
.cal-prox-info{min-width:0}
.cal-prox-cuando{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cal-prox-t{font-size:14px;font-weight:600;color:var(--ink-2);margin-top:2px}
.cal-prox-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cal-agendar{margin-top:12px}
/* El estado del enlace con Google, en el panel. Sin color de alarma cuando no
está conectado: no estarlo es una configuración que falta, no una falla. */
.cal-sync{
border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r-sm);
background:var(--panel-2);padding:11px 13px;margin:0 0 18px;
}
.cal-sync.on{border-left-color:var(--brand);background:var(--brand-soft)}
.cal-sync-t{margin:0;font-size:13px;font-weight:700;color:var(--ink-2)}
.cal-sync-d{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
/* ============ herramientas ============ */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{
font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);
background:var(--panel);color:var(--ink-2);cursor:pointer;transition:.14s;
}
.chip:hover{border-color:var(--line-2)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:550}
.tool-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.tool-row{
display:flex;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line);
cursor:pointer;transition:.13s;text-align:left;background:transparent;border-left:0;border-right:0;border-bottom:0;
}
.tool-row:first-child{border-top:0}
.tool-row:hover{background:var(--panel-2)}
.tool-code{
font-size:11px;font-weight:700;color:var(--brand);background:var(--brand-soft);
border:0;border-radius:5px;padding:2px 6px;flex:0 0 auto;
font-variant-numeric:tabular-nums;min-width:52px;text-align:center;
}
.tool-txt{flex:1;min-width:0}
.tool-name{display:block;font-size:13.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-sys{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ============ anuncios ============ */
.ann{padding-left:0;margin-bottom:22px}
.ann-date{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ann h4{font-size:14.5px;margin:3px 0 6px}
.ann p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap}
@media (max-width:720px){
.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.gcard-name{font-size:17px}
.uno-fila{gap:6px}
.uno-num{font-size:30px}
.uno-con{font-size:15px}
.uno-foto{width:46px;height:46px;margin-left:2px}
.uno-silueta svg{width:22px;height:22px}
.uno-firma{font-size:15px;margin-top:11px}
.cal{display:block;border:0;box-shadow:none;background:transparent}
.cal-dow{display:none}
.cal-cell{
min-height:0;border:1px solid var(--line);border-radius:10px;margin-bottom:7px;
flex-direction:row;align-items:center;gap:10px;padding:9px 11px;background:var(--panel);
}
.cal-cell.off{display:none}
.cal-num{align-self:auto;order:-1;flex:0 0 26px}
.kv{flex-direction:column;gap:2px}
.kv dt{flex:none}
}
/* La Big Promise del sistema, textual de la oferta: es lo que el alumno
compró. Va como cita, no como recuadro de alerta — el fondo de color la
hacía leer como una advertencia. */
.promesa{
margin:16px 0 0;padding:0 0 0 18px;max-width:66ch;
border-left:1px solid var(--line-2);
}
.promesa-lbl{
display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.promesa p{
margin:0;font-size:16.5px;line-height:1.55;letter-spacing:-.011em;
color:var(--ink);font-weight:350;text-wrap:pretty;
}
@media (max-width:720px){ .promesa p{font-size:15px} }
/* El rojo puro de marca (#EB0100) no llega al contraste mínimo como TEXTO
sobre ninguno de los dos fondos suaves: da 4,24:1 en claro y menos en
oscuro, y el piso AA para 13px es 4,5:1. Como texto se usa el rojo
profundo en claro (5,37:1) y el aclarado en oscuro (6,50:1). El #EB0100
sigue siendo el rojo de la marca donde va como FONDO o placa, que es
como lo define el manual. */
.side-item.active,
.side-item.active .side-meta,
.tool-code{color:var(--brand-600)}
:root[data-theme="dark"] .side-item.active{color:var(--ok-ink)}
:root[data-theme="dark"] .side-item.active .side-meta{color:var(--ok-ink)}
:root[data-theme="dark"] .tool-code{color:var(--ok-ink)}
:root[data-theme="dark"] .gcard-badge{background:var(--brand-600);color:#12100F}
/* Comunidad sale del campus: el ítem lleva la flechita de enlace externo,
para que nadie espere una pestaña interna que no existe. */
.side-ext{flex:0 0 12px;opacity:.45}
.side-item:hover .side-ext{opacity:.8}
.side-item.pendiente{opacity:.55}
/* ============ acceso a la herramienta, debajo del video ============
El paso siguiente a ver la clase es hacer la herramienta. Que esté ahí,
con nombre propio y a un clic, es lo que separa el campus de una playlist. */
.tool-cta{
width:100%;display:flex;align-items:center;gap:13px;padding:13px 15px;margin:0 0 18px;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
cursor:pointer;text-align:left;transition:.16s;font:inherit;color:inherit;
}
.tool-cta:hover{border-color:var(--line-2);background:var(--panel-2)}
.tool-cta:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.tool-cta-ico{
width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;
background:var(--brand-soft);color:var(--brand-600);
}
.tool-cta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tool-cta-lbl{
font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.tool-cta-nom{
font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tool-cta-go{font-size:12.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.tool-cta:hover .tool-cta-go{color:var(--ink-2)}
:root[data-theme="dark"] .tool-cta-ico{color:var(--ok-ink)}
@media (max-width:560px){
.tool-cta-go{display:none}
}
/* Acceso al currículum desde Inicio. La galería de sistemas vive sólo
dentro de Currículum; acá queda la puerta, no una segunda copia. */
.ir-curriculum{
width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:17px 18px;margin-top:8px;cursor:pointer;text-align:left;
font:inherit;color:inherit;transition:.16s;
}
.ir-curriculum:hover{border-color:var(--line-2);background:var(--panel-2)}
.ir-curriculum:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ir-curriculum h4{font-size:15px}
.ir-curriculum .muted{font-size:12.5px;margin-top:2px}
.ir-flecha{font-size:17px;color:var(--muted);flex:0 0 auto}
.ir-curriculum:hover .ir-flecha{color:var(--ink)}
/* ============ entrada ============
La pantalla de login. Es lo primero que ve un alumno que pagó, así que se
sostiene sola: panel centrado, marca arriba y una sola cosa que hacer.
Con `sin-sesion` puesto en el body, el sidebar y la barra superior se
esconden — mostrarlos vacíos, o peor, con el progreso de quien haya usado
antes este navegador, sería mentir sobre quién está adentro. */
body.sin-sesion .side,
body.sin-sesion .topbar,
body.sin-sesion .side-open{display:none}
body.sin-sesion .main{width:100%}
body.sin-sesion .view{padding:0;max-width:none}
.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 18px;background:var(--bg)}
.entrada-caja{
width:100%;max-width:404px;background:var(--panel);
border:1px solid var(--line);border-radius:16px;
padding:32px 30px 26px;box-shadow:var(--shadow);
}
/* En la puerta no hay nada más que competir con el logo, así que va grande y
centrado. Es el mismo logo de texto del sidebar —"Life Secrets" en Playfair
con la bajada roja debajo—, sólo que a otra escala: una sola marca en todo
el campus, no una placa distinta por pantalla. */
.entrada-marca{display:flex;justify-content:center;margin-bottom:28px}
.entrada-logo{align-items:center;gap:9px}
.entrada-logo .marca-n{font-size:36px}
.entrada-logo .marca-s{font-size:10px;letter-spacing:.22em}
/* El encabezado va centrado bajo el logo; el formulario sigue alineado a la
izquierda, que es donde se lee una etiqueta y su campo. */
.entrada-tit{font-size:23px;font-weight:700;margin-bottom:8px;text-align:center}
/* En la puerta el título va solo: sin bajada que lo explique, se lleva el aire
que ocupaba ella. Un campus de este precio no pide perdón por existir. */
.entrada-tit.sola{margin-bottom:24px}
.entrada-baja{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55;text-align:center}
/* Elegir el horario con el consultor: la misma caja de la entrada, más ancha,
porque adentro va la agenda de Google y a 404px no entra una semana. */
.entrada-caja.horario-caja{max-width:760px}
.horario-quien{display:flex;align-items:center;justify-content:center;gap:12px;margin:-6px 0 18px;
font-size:15px;font-weight:600;color:var(--ink-2)}
.horario-quien small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:1px}
.horario-quien .horario-av{width:44px;height:44px;flex:0 0 44px;font-size:15px}
.horario-correo{margin:-10px 0 18px;color:var(--muted);font-size:13px;line-height:1.55;text-align:center}
.horario-correo strong{color:var(--ink-2)}
/* La página de Google es blanca en los dos temas: el borde la separa del
negro en vez de dejarla flotando. */
.horario-agenda{display:block;width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-sm);
background:#fff;margin:0 0 18px}
.cal-horario{margin-top:16px}
.cal-horario .horario-agenda{margin:14px 0 0}
/* El aviso usa el rojo como filo y fondo suave, nunca como color de texto:
el rojo de marca sobre fondo oscuro no se lee. */
.entrada-aviso{
margin:0 0 18px;padding:11px 13px;border-radius:var(--r-sm);
background:var(--brand-soft);border:1px solid var(--brand-soft-line);
color:var(--ink-2);font-size:13.5px;line-height:1.5;
}
.entrada-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.entrada-input{
width:100%;padding:12px 14px;font:15px/1.4 var(--sans);
color:var(--ink);background:var(--panel-2);
border:1px solid var(--line-2);border-radius:var(--r-sm);
transition:border-color .14s ease, box-shadow .14s ease;
}
.entrada-input::placeholder{color:var(--muted);opacity:.7}
.entrada-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.entrada-btn{
width:100%;margin-top:14px;padding:13px 16px;
background:var(--brand);color:#fff;border:0;border-radius:var(--r-sm);
font-size:15px;font-weight:700;cursor:pointer;
transition:background .14s ease;
}
.entrada-btn:hover{background:var(--brand-600)}
.entrada-btn:disabled{opacity:.6;cursor:default}
.entrada-msg{margin-top:16px;padding:11px 13px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.5}
.entrada-msg.ok{background:var(--ok-bg);border:1px solid var(--brand-soft-line);color:var(--ink-2)}
.entrada-msg.mal{background:var(--wait-bg);border:1px solid var(--line-2);color:var(--ink-2)}
.entrada-pie{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);
color:var(--muted);font-size:12.5px;line-height:1.5}
/* La salida hacia la pagina de ventas. En gris con subrayado y no en rojo de
marca: sobre el negro del tema oscuro el rojo del manual no se lee como
texto, y ademas esto no compite con «Enviarme el enlace», que es lo que
viene a hacer el alumno. */
.entrada-salida{color:var(--ink-2);font-weight:600;text-decoration:underline;
text-underline-offset:2px;transition:opacity .14s ease}
.entrada-salida:hover{opacity:.7}
/* «Soporte» sin sesión: los casos que traen a la gente acá, uno debajo del
otro y separados por un filete, como la lista de Soporte de adentro. */
.entrada-ayuda{list-style:none;margin:0 0 22px;padding:0}
.entrada-ayuda li{padding:14px 0;border-top:1px solid var(--line);
color:var(--muted);font-size:13.5px;line-height:1.55}
.entrada-ayuda li:first-child{border-top:0;padding-top:0}
.entrada-ayuda b{display:block;margin-bottom:3px;color:var(--ink-2);font-size:14px}
a.entrada-btn{display:block;text-align:center;text-decoration:none}
.entrada-correo{margin:10px 0 0;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5}
/* La bienvenida vive dentro de la caja de la entrada: es la misma puerta, un
paso después. El avatar va centrado y es el propio botón de elegir foto —el
círculo grande es lo que la gente toca, no el botón de al lado. */
.bienv-foto{display:flex;flex-direction:column;align-items:center;gap:10px;
padding:4px 0 22px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.bienv-av{width:88px;height:88px;flex:0 0 88px;border:0;cursor:pointer;padding:0;
font-size:27px;transition:opacity .14s ease}
.bienv-av:hover{opacity:.86}
.bienv-luego{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.bienv-luego:hover{color:var(--ink-2)}
@media (max-width:480px){
.entrada-caja{padding:26px 22px 22px;border-radius:14px}
.entrada-tit{font-size:21px}
.entrada-logo .marca-n{font-size:30px}
}
/* ============ progreso por herramienta ============
La barra de cada fila de la lista de las 110. Se llena sola con lo que el
alumno escribió: no hay ningún "marcar como hecho" que apretar.
El número exacto va al lado del porcentaje a propósito — 40% de 6 ejercicios
y 40% de 900 son trabajos muy distintos, y la barra sola no lo dice. */
.tool-prog{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto;padding-left:14px}
.tool-bar{width:74px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;flex:0 0 74px}
.tool-bar i{display:block;height:100%;background:var(--brand);border-radius:3px;
transition:width .35s cubic-bezier(.4,0,.2,1)}
.tool-pct{font-size:11.5px;font-weight:600;color:var(--muted);
font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.tool-prog.cero .tool-bar i{background:var(--line-2)}
.tool-prog.full .tool-pct{color:var(--brand-600)}
@media (max-width:620px){
/* Ahora que es sólo un porcentaje entra en el celular: son tres caracteres,
no el «1/56» de antes que no daba el ancho. */
.tool-bar{width:46px;flex:0 0 46px}
.tool-prog{gap:7px;padding-left:10px}
}
/* ============ Mi avance ============ */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px}
.stat-n{font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.stat-s{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.sys-stats{display:flex;flex-direction:column;gap:8px}
.sys-stat{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:14px 16px;cursor:pointer;font:inherit;color:inherit;
transition:border-color .14s ease, transform .14s ease}
.sys-stat:hover{border-color:var(--line-2);transform:translateY(-1px)}
.sys-stat.lock{opacity:.55}
.ss-n{flex:0 0 26px;width:26px;height:26px;border-radius:7px;background:var(--wait-bg);color:var(--wait-ink);
display:grid;place-items:center;font-size:12px;font-weight:700}
.ss-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.ss-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-sub{font-size:12px;color:var(--muted)}
.ss-bar{flex:0 0 96px;width:96px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ss-bar i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.ss-pct{flex:0 0 40px;text-align:right;font-size:12.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (max-width:620px){
.stat-row{grid-template-columns:1fr;gap:8px}
.stat{padding:15px 16px 13px}
.stat-n{font-size:25px}
.ss-bar{flex:0 0 60px;width:60px}
}
/* ============ Mi cuenta ============ */
.cuenta{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px;max-width:520px}
.cuenta-foto{display:flex;align-items:center;gap:18px;padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.cf-av{width:74px;height:74px;flex:0 0 74px;border-radius:50%;background:var(--ink) center/cover no-repeat;
color:var(--panel);display:grid;place-items:center;font-size:23px;font-weight:700;letter-spacing:-.02em}
.cf-acc{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cf-nota{width:100%;margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.cuenta-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.cuenta-input{width:100%;padding:11px 13px;font:15px/1.4 var(--sans);color:var(--ink);
background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-sm);margin-bottom:6px;
transition:border-color .14s ease, box-shadow .14s ease}
.cuenta-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.cuenta-input:disabled{color:var(--muted);background:var(--wait-bg);cursor:not-allowed}
.cuenta-lbl + .cuenta-input{margin-bottom:16px}
.cuenta-pie{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.cuenta-msg{font-size:13px;color:var(--muted)}
.cuenta-msg.ok{color:var(--brand-600);font-weight:600}
.cuenta-msg.mal{color:var(--ink-2)}
.cuenta-sep{height:1px;background:var(--line);margin:24px 0 20px}
.cuenta-fila{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cuenta-ft{font-size:14px;font-weight:600}
.cuenta-fs{font-size:12.5px;color:var(--muted);margin-top:2px}
/* El avatar del sidebar, cuando hay foto: la imagen tapa las iniciales. */
.me-av.con-foto{background-size:cover;background-position:center;color:transparent}
@media (max-width:620px){
.cuenta{padding:20px 18px 18px}
.cuenta-foto{gap:14px}
.cf-av{width:60px;height:60px;flex:0 0 60px;font-size:19px}
}
.btn.ghost.danger{color:var(--muted)}
.btn.ghost.danger:hover{color:var(--brand-600);border-color:var(--brand-soft-line);background:var(--brand-soft)}
/* ============ compartir con el consultor ============ */
.compartir{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.compartir-b.on{border-color:var(--brand-soft-line);background:var(--brand-soft);color:var(--brand-600)}
.compartir-n{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1;min-width:200px}
/* ============ panel del consultor ============ */
.cli-list{display:flex;flex-direction:column;gap:8px}
.cli-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:13px 16px;cursor:pointer;font:inherit;color:inherit;
transition:border-color .14s ease, transform .14s ease}
.cli-row:hover{border-color:var(--line-2);transform:translateY(-1px)}
.cli-av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--ink) center/cover no-repeat;
color:var(--panel);display:grid;place-items:center;font-size:12.5px;font-weight:700}
.cli-av.big{width:58px;height:58px;flex:0 0 58px;font-size:19px}
.cli-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.cli-txt .rango{align-self:flex-start}
.cli-name{font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Diez barritas, una por sistema: el recorrido entero de un vistazo. */
.cli-mini{display:flex;align-items:flex-end;gap:2px;height:22px;flex:0 0 auto}
.cli-mini i{width:5px;border-radius:1.5px;background:var(--line-2);display:block}
.cli-mini i.on{background:var(--brand)}
.cli-pct{flex:0 0 40px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.cli-rit{flex:0 0 auto}
.cli-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.cli-head-txt h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
.cli-head-txt p{margin:5px 0 0;font-size:13px;color:var(--muted)}
.cli-sys{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.cli-sys-h{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.cli-sys-name{flex:1;min-width:0;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-mods{padding:6px 0}
.cli-mod{display:flex;align-items:center;gap:11px;padding:7px 16px}
.cli-mod.done .cm-name{color:var(--muted)}
.cm-code{flex:0 0 30px;font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.cm-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-share{flex:0 0 auto}
.cm-bar{flex:0 0 70px;width:70px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.cm-bar i{display:block;height:100%;background:var(--brand);border-radius:2px}
.cm-pct{flex:0 0 38px;text-align:right;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cm-leer{margin-left:8px}
/* ============ lo que escribió el cliente ============
El consultor abre una herramienta y lee el trabajo sin salir de la lista.
Va sangrado y sobre otro fondo para que se lea como una cita —esto lo
escribió otra persona— y no como una pantalla más del campus. */
.cli-lee{margin:2px 16px 12px 46px;padding:4px 16px 14px;
border-left:2px solid var(--brand-soft-line);background:var(--panel-2);
border-radius:0 var(--r-sm) var(--r-sm) 0}
.cli-lee h3{font-size:12px;margin:16px 0 2px;color:var(--muted);
text-transform:uppercase;letter-spacing:.04em}
.cli-lee h3:first-child{margin-top:10px}
.cli-lee .qa-q{font-size:13px}
/* Sobre el fondo sangrado, la respuesta necesita el contraste al revés: si
queda del mismo color que la caja, lo escrito se pierde entre las preguntas. */
.cli-lee .qa-a{font-size:13.5px;background:var(--panel);border:1px solid var(--line)}
.cli-lee th{background:var(--panel)!important}
@media (max-width:720px){ .cli-lee{margin-left:16px} }
@media (max-width:720px){
.cli-mini,.cli-rit{display:none}
.cm-bar{flex:0 0 44px;width:44px}
.cm-pct{flex:0 0 34px}
}
/* ============ las dos versiones de una herramienta ============
Cada herramienta viene del documento con las matrices ya rellenas de
ejemplo. Al volverlas interactivas ese texto quedó como placeholder, y el
placeholder se borra al escribir: el alumno perdía el ejemplo justo cuando
empezaba a entender la pregunta. «Ver el original» lo devuelve. */
.versiones{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ver-op{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
padding:10px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--panel);color:var(--ink-2);cursor:pointer;font:inherit;text-align:left;
transition:border-color .14s ease, background .14s ease}
.ver-op:hover{border-color:var(--muted)}
.ver-op.on{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.ver-t{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.ver-s{font-size:11.5px;color:var(--muted)}
.ver-op.on .ver-s{color:var(--brand-600)}
.versiones-nota{flex:1 1 100%;margin-top:2px;padding:11px 13px;border-radius:var(--r-sm);
background:var(--wait-bg);color:var(--ink-2);font-size:12.5px;line-height:1.55}
/* La celda de ejemplo: se lee como texto del documento, no como un campo
vacío. En itálica y en gris, para que nadie la confunda con su respuesta. */
.grid td.base-cell{font-size:13px;line-height:1.5;color:var(--ink-2);font-style:italic;
padding:9px 11px;vertical-align:top;white-space:pre-wrap}
.grid td.base-cell.vacia{color:var(--lock-ink);font-style:normal;text-align:center}
/* La tabla «Ejemplo» del documento, en «Trabajar»: se lee, no se completa.
Borde punteado y una línea arriba que lo dice, sin gritar. */
.grid-wrap.grid-ejemplo{border-style:dashed}
.grid-ej-tag{position:sticky;left:0;padding:7px 12px;font-size:11.5px;font-style:italic;color:var(--muted);
background:var(--panel-2);border-bottom:1px dashed var(--line-2)}
.base-hueco{margin-top:6px;padding:14px 13px;border:1px dashed var(--line-2);border-radius:var(--r-sm);
color:var(--muted);font-size:12.5px;font-style:italic}
.chk.base{opacity:.7;cursor:default}
/* ============ nada de barras de scroll dentro de los campos ============
Los textarea crecen con su contenido, así que una barra ahí adentro no
sirve para nada: sólo tapa texto y mete un rectángulo blanco en una tabla
oscura. Se apagan, y la altura la resuelve autogrow(). */
table.grid textarea,
textarea.inp{overflow-y:hidden}
/* Las barras que sí hacen falta —el scroll horizontal de una tabla ancha, el
de la página— pintadas con los colores del tema. La barra del sistema es
blanca y sobre el campus en oscuro se ve como un parche. */
.grid-wrap{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.grid-wrap::-webkit-scrollbar{height:9px;width:9px}
.grid-wrap::-webkit-scrollbar-track{background:transparent}
.grid-wrap::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
.grid-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* ============ modo edición (admin) ============
El admin corrige donde está: doble clic en el texto torcido. Los controles
sólo se dibujan con el modo encendido, para que el campus siga viéndose como
el campus el resto del tiempo. */
.ed-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;
padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-sm)}
.ed-barra.on{border-color:var(--brand);background:var(--brand-soft)}
.ed-nota{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1;min-width:220px}
.ed-txt{position:relative;outline:1px dashed transparent;outline-offset:3px;
border-radius:3px;transition:outline-color .14s ease, background .14s ease}
.ed-txt:hover{outline-color:var(--brand);background:var(--brand-soft)}
.ed-lapiz{border:0;background:transparent;color:var(--brand);cursor:pointer;
font-size:12px;line-height:1;padding:2px 4px;margin-left:6px;opacity:0;transition:opacity .14s ease}
.ed-txt:hover .ed-lapiz{opacity:1}
/* En pantalla táctil no hay hover: el lápiz se queda a la vista. */
@media (hover:none){ .ed-lapiz{opacity:.75} }
.ed-borrar{border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
cursor:pointer;font-size:11px;line-height:1;padding:4px 7px;border-radius:5px;margin-left:8px;
transition:.14s}
.ed-borrar:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-600)}
.btn.ghost.danger{color:var(--muted)}
.btn.ghost.danger:hover{color:var(--brand-600);border-color:var(--brand-soft-line);background:var(--brand-soft)}
/* ============ panel de administración ============ */
.adm-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.adm-lista{display:flex;flex-direction:column;gap:8px}
.adm-fila{display:flex;align-items:center;gap:12px;background:var(--panel);
border:1px solid var(--line);border-radius:var(--r);padding:12px 15px}
.adm-txt{flex:1;min-width:0}
.adm-n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-s{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-acc{display:flex;gap:6px;flex-wrap:wrap}
/* Cobros: el enlace recién generado y la lista. La dirección es larga y no
puede empujar la página de costado en el teléfono: se corta donde haga falta. */
.cobro-enlace{margin-top:18px;padding:14px 15px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.cobro-enlace .cuenta-lbl{margin-top:0}
.cobro-enlace-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 8px}
.cobro-url{flex:1 1 260px;min-width:0;overflow-wrap:anywhere;font-size:12.5px;padding:8px 10px;
border:1px solid var(--line);border-radius:8px;background:var(--panel);user-select:all}
.cobro-aviso{margin:8px 0 0;font-size:12.5px;color:var(--ink-2);font-weight:600}
.cobro-fila .adm-n,.cobro-fila .adm-s{display:block}
@media (max-width:620px){
.cobro-fila{flex-wrap:wrap}
.cobro-fila .adm-txt{flex-basis:100%}
}
/* Tarjetas para clientes (assets/tarjetas.js). Los datos a la izquierda y la
tarjeta a la derecha, quieta mientras se escribe. La tarjeta es una imagen
oscura en los dos temas: es lo que le llega al cliente. */
.tj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:28px;align-items:start}
.tj-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.tj .cuenta{max-width:none}
.tj-grupos{display:flex;flex-wrap:wrap;gap:14px 28px}
.tj-grupo{min-width:0}
.tj-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.tj-form .tj-chips{margin-bottom:0}
.tj-fila-lbl{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.tj-fila-lbl .cuenta-lbl{margin:0}
.tj-link{background:none;border:0;padding:0;font:600 12.5px/1 var(--sans);color:var(--brand-600);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tj-texto{min-height:112px;resize:vertical;line-height:1.5;margin-bottom:16px}
.tj-ref{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px 14px;margin:0 0 18px;min-width:0}
.tj-ref legend{padding:0 6px;margin:0 0 0 -6px}
.tj-check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);cursor:pointer}
.tj-check input{width:17px;height:17px;margin:0;accent-color:var(--brand);flex:none}
.tj-mensaje{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.6;color:var(--ink-2);
padding:14px 15px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2)}
.tj-vista{position:sticky;top:70px;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.tj-vista canvas{display:block;width:100%;height:auto;max-width:360px;border-radius:12px;border:1px solid var(--line);background:#050506}
.tj-vista.historia canvas{max-width:270px}
@media (max-width:1180px){
.tj{grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:22px}
.tj-vista.historia canvas{max-width:220px}
}
@media (max-width:900px){
.tj{grid-template-columns:minmax(0,1fr)}
.tj-vista{position:static;order:-1}
.tj-vista canvas{max-width:340px}
.tj-vista.historia canvas{max-width:250px}
}
/* ============ El cierre de «Empieza aquí» ============
Va en negro de marca y ocupa el ancho entero: después de cuatro tarjetas
claras, un bloque oscuro cierra la lectura en vez de dejarla desvanecerse.
El rojo aparece sólo como fondo del botón, nunca como texto sobre el negro
—ahí no se lee—. */
.cierre{
margin-top:36px;padding:40px 34px;border-radius:16px;
background:#0B0B0C;color:#fff;text-align:center;
}
.cierre-t{
font:500 30px/1.15 "Playfair Display",Georgia,"Times New Roman",serif;
color:#fff;margin:0 0 12px;letter-spacing:-.01em;
}
.cierre-d{
margin:0 auto 26px;max-width:56ch;
color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;
}
.cierre-btn{padding:13px 26px;font-size:15px}
@media (max-width:560px){
.cierre{padding:30px 22px;border-radius:14px}
.cierre-t{font-size:25px}
.cierre-btn{width:100%}
}
/* ============ Rangos ============
Aprendiz, Plata, Oro y Platino: bronce, plata, oro y platino. Cada uno con
su color de metal, pero apagado en el distintivo: una chapita dorada
saturada al lado del nombre de un alumno se lee como un anuncio, y esto va
en listas que se recorren de a veinte.
El color se define entero en cada tema en vez de teñir con opacidad: sobre
el negro del campus, un dorado con alpha se apaga hasta parecer gris. */
.rango{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;
font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
border:1px solid currentColor;white-space:nowrap;
}
.rango-sm{padding:2px 8px;font-size:10.5px;gap:5px}
.rango-aprendiz{color:#8A5A34;background:#F7EFE8}
.rango-plata{color:#5F6670;background:#F0F1F3}
.rango-oro{color:#8A6D12;background:#FAF3DC}
.rango-platino{color:#3F6272;background:#EAF1F5}
:root[data-theme="dark"] .rango-aprendiz{color:#D09A6B;background:#2A1F16}
:root[data-theme="dark"] .rango-plata{color:#B6BCC5;background:#1F2124}
:root[data-theme="dark"] .rango-oro{color:#E0BB4A;background:#2A2412}
:root[data-theme="dark"] .rango-platino{color:#C4DBE7;background:#16222A}
/* Cada metal, en sus tonos: el fondo profundo, el medio del degradé, el color
del metal en sí y el aro de la foto, que sobre el blanco va un paso más
oscuro (la plata y el platino claros se pierden contra el fondo). Se
declaran como variables para que la tarjeta, la insignia, las barras y el
aro tomen todo del mismo lugar: si mañana el oro cambia, cambia en una
línea. */
.rg-aprendiz{--m1:#1B1109;--m2:#3E2716;--metal:#D49A63;--linea:rgba(212,154,99,.38);--anillo:#B07A45}
.rg-plata {--m1:#101215;--m2:#2C3138;--metal:#C6CDD6;--linea:rgba(198,205,214,.34);--anillo:#959EA9}
.rg-oro {--m1:#17120A;--m2:#3D3013;--metal:#DDB748;--linea:rgba(221,183,72,.40);--anillo:#C9A23A}
.rg-platino {--m1:#0B1217;--m2:#24343F;--metal:#D3E3EC;--linea:rgba(211,227,236,.36);--anillo:#8FB1C2}
:root[data-theme="dark"] [class*="rg-"]{--anillo:var(--metal)}
/* El aro del rango en la foto. Va con dos sombras: el metal y, por fuera, un
hilo del fondo, que es lo que evita que el aro se pegue a lo que tenga
detrás y parezca un error de recorte. */
.av-rango{box-shadow:0 0 0 3px var(--anillo), 0 0 0 5px var(--panel)}
.me-av.av-rango{box-shadow:0 0 0 2px var(--panel-2), 0 0 0 3.5px var(--anillo)}
.rango-ico{flex:0 0 auto;display:block}
/* La insignia: el SVG trae el metal; acá sólo la sombra que la despega. */
.insignia{display:inline-block;flex:0 0 auto;line-height:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.insignia svg{display:block}
/* ============ Calendario desde Administración ============
Una llamada es una fila y no una tarjeta: son seis campos cortos que se
miran juntos —día, hora, duración— y apilarlos en tarjetas obligaba a
recorrer la pantalla para comparar dos horarios. */
.adm-sub{font-size:15px;font-weight:700;margin:28px 0 6px}
.adm-sub:first-child{margin-top:0}
.cal-adm{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.cal-adm-fila{
display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
}
.cal-adm-suelta{align-items:center;justify-content:space-between}
.cal-suelta-t{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.cal-campo{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.cal-campo-ancho{flex:1 1 220px;min-width:180px}
.cal-campo-t{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cal-in{padding:7px 10px;font-size:13.5px;width:100%;min-width:96px;flex:none}
.cal-crece{flex:1 1 200px;min-width:160px}
.cal-alta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
/* Las fechas canceladas son etiquetas y no filas: son un dato de una línea, y
una lista de filas para siete feriados ocupa media pantalla sin decir más. */
.cal-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.cal-chip{
display:inline-flex;align-items:center;gap:7px;
padding:5px 8px 5px 11px;border-radius:999px;
background:var(--panel-2);border:1px solid var(--line-2);
font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.cal-chip-x{
border:0;background:transparent;color:var(--muted);cursor:pointer;
font-size:15px;line-height:1;padding:0 2px;
}
.cal-chip-x:hover{color:var(--ink)}
/* El selector de rol de cada fila de Administración. Va con el alto de los
botones fantasma de al lado: en una fila de acciones, un control más bajo
que los demás se lee como un error de la página y no como un control. */
.adm-rol{
padding:6px 10px;font:600 12.5px/1.2 var(--sans);
color:var(--ink-2);background:var(--panel-2);
border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;
}
.adm-rol:hover{border-color:var(--muted)}
.adm-rol:disabled{opacity:.5;cursor:default}
.adm-cambio{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
color:var(--ink-2);word-break:break-all}
/* ============ dispositivos conectados ============ */
.disp-lista{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.disp{display:flex;align-items:center;gap:12px;padding:11px 13px;
background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.disp.esta{border-color:var(--brand-soft-line);background:var(--brand-soft)}
.disp-txt{flex:1;min-width:0}
.disp-n{display:block;font-size:13.5px;font-weight:600}
/* Cuál de los dos tiene el turno. Sin esta marca, la lista muestra dos
dispositivos iguales y no explica por qué el otro está esperando. */
.disp-turno{margin-left:7px;vertical-align:middle;font-size:11px}
.disp-s{display:block;font-size:12px;color:var(--muted);margin-top:2px}
/* ============ marca de agua ============
Sólo en el PDF exportado. La que iba encima del reproductor se sacó: no
impedía grabar —nada lo impide— y molestaba mirando el video. Estorbar al
alumno que pagó, a cambio de una disuasión que igual no frena a quien está
decidido, es un mal negocio.
/* En el PDF: en diagonal por toda la hoja y repetida. Recortar una marca es
fácil; recortar cuarenta deja el documento inservible. */
#printRoot .pr-agua{display:none}
@media print{
#printRoot{position:relative}
#printRoot .pr-agua{
display:block;position:fixed;inset:0;z-index:9999;pointer-events:none;
transform:rotate(-32deg);transform-origin:center;
overflow:hidden;line-height:5.2em;
}
#printRoot .pr-agua span{
display:inline-block;padding:0 2.6em;
font-size:10pt;color:rgba(0,0,0,.09);white-space:nowrap;
}
}
/* ============ barra total ============ */
.tot-barra{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:16px 18px;margin-bottom:20px}
.tot-linea{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.tot-t{font-size:13.5px;font-weight:600}
.tot-p{font-size:20px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tot-s{font-size:12px;color:var(--muted);margin-top:8px}
/* ============ árbol: sistema › módulo › lección ============
El programa está pensado en tres niveles y la pantalla lo muestra así. La
lista plana de 110 filas obligaba a buscar con el ojo. */
.arbol{display:flex;flex-direction:column;gap:8px}
.arbol-sis{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.arbol-sis.lock{opacity:.6}
.arbol-h{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;
background:transparent;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.arbol-h:hover{background:var(--panel-2)}
.arbol-n{flex:0 0 26px;width:26px;height:26px;border-radius:7px;background:var(--wait-bg);
color:var(--wait-ink);display:grid;place-items:center;font-size:12px;font-weight:700}
.arbol-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.arbol-name{font-size:14.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arbol-sub{font-size:11.5px;color:var(--muted)}
.arbol-chev{display:flex;color:var(--muted);transition:transform .18s ease}
.arbol-sis.on > .arbol-h .arbol-chev,
.arbol-mod.on > .arbol-mh .arbol-chev{transform:rotate(180deg)}
.arbol-cuerpo,.arbol-lecs{display:none}
.arbol-sis.on > .arbol-cuerpo,.arbol-mod.on > .arbol-lecs{display:block}
.arbol-mod{border-top:1px solid var(--line)}
.arbol-mh{display:flex;align-items:center;gap:11px;width:100%;padding:11px 16px 11px 24px;
background:var(--panel-2);border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.arbol-mh:hover{background:var(--wait-bg)}
.arbol-mn{flex:1;font-size:13px;font-weight:600;color:var(--ink-2)}
.arbol-lec{display:flex;align-items:center;gap:11px;width:100%;padding:10px 16px 10px 34px;
background:transparent;border:0;border-top:1px solid var(--line);cursor:pointer;font:inherit;color:inherit;text-align:left}
.arbol-lec:hover{background:var(--panel-2)}
.arbol-lec.lock{opacity:.5;cursor:default}
.lec-code{flex:0 0 34px;font-size:11.5px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.arbol-lec.lock .lec-code{color:var(--muted)}
.lec-txt{flex:1;min-width:0}
.lec-name{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lec-p{flex:0 0 auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lec-p b{font-weight:600;color:var(--lock-ink);margin-right:3px}
.lec-lock{display:flex;color:var(--muted)}
.ss-bar.sm{flex:0 0 64px;width:64px;height:5px}
@media (max-width:720px){
.arbol-h .ss-bar,.arbol-mh .ss-bar{display:none}
.lec-p b{display:none}
.arbol-lec{padding-left:22px;gap:8px}
}
/* Los módulos sueltos —la vista de un sistema, donde no hay un sistema que los
contenga— llevan su propio marco: si no, el desplegable queda flotando sin
borde y no se lee como una unidad. */
.arbol-solo .arbol-mod{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.arbol-solo .arbol-mh{padding-left:16px}
/* Mis respuestas y la vista de un sistema meten tarjetas enteras dentro del
desplegable del módulo, no filas de una línea: necesitan aire propio para no
pegarse al borde. */
.arbol-lecs.resp{padding:10px 14px 14px;display:none}
.arbol-mod.on > .arbol-lecs.resp{display:flex;flex-direction:column;gap:8px}
.arbol-mnum{flex:0 0 20px;width:20px;height:20px;border-radius:6px;background:var(--line);
color:var(--muted);display:grid;place-items:center;font-size:10.5px;font-weight:700}
.arbol-lec.intro{background:var(--panel-2)}
.arbol-lec.intro .lec-code{color:var(--muted);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
/* ============ pantalla del capítulo ============ */
/* Dos columnas: el índice del sistema y la lección. La lección dejó de ser una
página suelta —se llegaba, se trabajaba y había que volver al sistema para
seguir— y pasó a verse dentro de su sistema, con lo que viene después a la
vista. */
.lec{display:grid;grid-template-columns:290px minmax(0,1fr);gap:22px;align-items:start}
.lec-main{min-width:0}
.lec-rail{position:sticky;top:70px;max-height:calc(100vh - 92px);overflow-y:auto;
display:flex;flex-direction:column;gap:10px;padding-right:2px}
.lec-prog{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.lec-prog-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px;
font-size:12.5px;color:var(--muted)}
.lec-prog-h b{font-size:15px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.lec-prog-s{margin-top:8px;font-size:11.5px;color:var(--muted)}
.lec-lista{display:flex;flex-direction:column;gap:7px}
.lec-mod{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lec-mh{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;
background:transparent;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.lec-mh:hover{background:var(--panel-2)}
.lec-mn{flex:1;font-size:13px;font-weight:600;letter-spacing:-.01em}
.lec-mp{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lec-lecs{display:none}
.lec-mod.on .lec-lecs{display:block}
.lec-mod.on > .lec-mh .arbol-chev{transform:rotate(180deg)}
.lec-item{display:flex;align-items:flex-start;gap:9px;width:100%;padding:9px 13px;
background:transparent;border:0;border-top:1px solid var(--line);cursor:pointer;
font:inherit;color:inherit;text-align:left}
.lec-item:hover{background:var(--panel-2)}
.lec-item.on{background:var(--brand-soft)}
.lec-item.on .lec-i-t{color:var(--brand-600);font-weight:600}
:root[data-theme="dark"] .lec-item.on .lec-i-t{color:var(--ok-ink)}
.lec-item.lock{opacity:.5;cursor:default}
.lec-i-n{flex:0 0 26px;font-size:11px;font-weight:700;color:var(--muted);
font-variant-numeric:tabular-nums;padding-top:2px}
.lec-item.on .lec-i-n{color:var(--brand-600)}
.lec-i-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lec-i-t{font-size:12.5px;line-height:1.35}
.lec-i-m{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* La lista de arriba de la lección: volver a la izquierda, el paso a paso a la
derecha, que es donde la mano ya está cuando termina el video. */
.lec-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
flex-wrap:wrap;margin-bottom:14px}
.lec-paso{display:flex;gap:8px}
.lec-paso .btn.lock{opacity:.55}
.mod-kicker{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);margin-bottom:7px}
/* El resumen, apenas debajo del reproductor. */
.lec-resumen{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:15px 17px;margin:12px 0 14px}
.lec-resumen-t{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin-bottom:6px}
.lec-resumen p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
@media (max-width:980px){
/* El índice pasa abajo: en un teléfono lo primero es el video, no la lista. */
.lec{grid-template-columns:1fr;gap:18px}
.lec-rail{position:static;max-height:none;order:2}
.lec-main{order:1}
}
/* ============ Soporte ============ */
/* Los dos canales, uno al lado del otro: la pregunta del alumno es «¿a quién le
escribo?» y la respuesta tiene que verse de una mirada, no leerse. */
.sop-canales{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:18px}
.sop-canal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 20px}
.sop-tag{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin-bottom:8px}
.sop-canal h4{font-size:15px;margin:0 0 6px}
.sop-canal p{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--muted)}
.sop-canal .btn{word-break:break-all}
.sop-pend{font-size:12.5px;color:var(--muted);font-style:italic}
/* La bajada de una pantalla cuando se dibuja aparte del pageH, para que el
admin pueda editarla como cualquier otro texto. */
.page-bajada{margin:-10px 0 22px;font-size:14px;line-height:1.6;color:var(--muted);max-width:74ch}
.panel-bajada{font-size:13px;margin:0 0 14px;line-height:1.6}
/* La fila de botones «+ Agregar». Sólo la ve el admin en modo edición. */
.ed-fila{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.ed-agregar{border-style:dashed}
/* ============ Empieza aquí ============ */
.seccion-t{font:500 21px/1.2 "Playfair Display",Georgia,serif;letter-spacing:-.005em;margin:34px 0 4px}
.seccion-s{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--muted);max-width:70ch}
/* Las normas, en tarjetas. El número va en la serif y en grande: es lo que da
el tono de documento fundacional en vez de lista de preguntas frecuentes. */
.normas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.norma{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:20px 20px 22px;position:relative;overflow:hidden}
.norma-n{font:500 30px/1 "Playfair Display",Georgia,serif;color:var(--brand);margin-bottom:12px}
.norma-t{font-size:14.5px;font-weight:650;letter-spacing:-.01em;margin-bottom:6px;line-height:1.35}
.norma-d{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
/* ============ mapa del programa (Empieza aquí) ============ */
.mapa-sis{border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.mapa-h{display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;
background:var(--panel-2);border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.mapa-h:hover{background:var(--wait-bg)}
.mapa-name{flex:1;font:500 17px/1.25 "Playfair Display",Georgia,serif;letter-spacing:-.005em}
.mapa-ico{display:flex;color:var(--brand);flex:0 0 auto}
.mapa-n{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
letter-spacing:.06em}
.mapa-cuerpo{display:none;padding:4px 13px 12px}
.mapa-sis.on .mapa-cuerpo{display:block}
.mapa-sis.on .arbol-chev{transform:rotate(180deg)}
.mapa-mod{padding:11px 0;border-top:1px solid var(--line)}
.mapa-mt{font-size:13.5px;font-weight:600;margin-bottom:5px}
.mapa-mn{color:var(--brand);font-weight:700;margin-right:5px}
.mapa-mr{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:3px}
.mapa-mr b{color:var(--ink-2);font-weight:600}
/* ============ objetivo del módulo, dentro de la lección ============ */
.guia{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);
border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 16px;margin:0 0 16px}
.guia-t{font-size:13px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.guia p{margin:0 0 4px;font-size:13px;line-height:1.6;color:var(--muted)}
.guia p b{color:var(--ink-2);font-weight:600}
/* ============ modo edición · mover ============
El tercer control, junto al lápiz y la ✕. Los dos glifos van pegados y
comparten borde: son una sola cosa —el orden— y separados se leen como dos
acciones distintas. A 22 px, el área de toque la da el padding, no el
dibujo. */
.ed-mover{display:inline-flex;vertical-align:middle;margin:0 4px}
.ed-mv{
border:1px solid var(--line-2);background:var(--panel);color:var(--muted);
cursor:pointer;font-size:12px;line-height:1;padding:4px 7px;
}
.ed-mv:first-child{border-radius:6px 0 0 6px}
.ed-mv:last-child{border-radius:0 6px 6px 0;border-left:0}
.ed-mv:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft);color:var(--brand-600)}
.ed-mv:disabled{opacity:.3;cursor:default}
.ed-cap{display:inline-flex;align-items:center;gap:6px}
/* Los controles de una fila de tabla viven DENTRO de su primera celda: una
columna aparte correría todos los encabezados y la tabla dejaría de
coincidir con la del documento. */
.ed-fila-ctl{display:inline-flex;align-items:center;gap:4px;margin-left:6px;white-space:nowrap}
/* ============ panel de administración · resumen ============ */
.stat-row-4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.stat-mal .stat-n{color:var(--brand)}
.adm-bloque{margin:30px 0 0}
.adm-dos{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media (max-width:760px){.adm-dos{grid-template-columns:1fr;gap:0}}
/* Barras horizontales: se usan cuando lo que importa es comparar categorías
entre sí y las etiquetas son palabras. En vertical, «Sin empezar» no entra
debajo de una columna. */
.bh{display:flex;flex-direction:column;gap:7px}
.bh-fila{display:grid;grid-template-columns:150px 1fr 42px;align-items:center;gap:12px}
.bh-lbl{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-pista{height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.bh-pista i{display:block;height:100%;border-radius:5px;background:var(--ink-2);transition:width .35s ease}
.bh-n{font-size:12.5px;font-weight:650;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.bh-bien .bh-pista i{background:var(--brand)}
.bh-mal .bh-pista i{background:var(--lock-ink)}
.bh-clic{cursor:pointer}
.bh-clic:hover .bh-lbl{color:var(--brand-600)}
@media (max-width:560px){.bh-fila{grid-template-columns:110px 1fr 36px;gap:8px}}
/* Columnas por mes. Acá el eje sí es el tiempo y en vertical se lee la forma
—dos meses flojos, un pico—, que es lo que se viene a ver. Los meses vacíos
se dibujan igual: sin ellos, dos meses sin ventas quedan pegados y parece
que no hubo pausa. */
.cols{
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;
align-items:end;height:132px;padding:10px 0 0;
border-bottom:1px solid var(--line);
}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;position:relative}
.col-barra{width:100%;max-width:34px;background:var(--ink-2);border-radius:4px 4px 0 0;transition:height .35s ease}
.col-cero .col-barra{background:var(--line-2)}
.col-lbl{font-size:10.5px;color:var(--muted);margin-top:6px;position:absolute;bottom:-19px}
.col-n{
font-size:10.5px;font-weight:650;color:var(--ink);
position:absolute;top:-4px;white-space:nowrap;
}
.cols{margin-bottom:26px}
/* Un renglón por sistema: dónde se traba el programa. */
.sis-stats{display:flex;flex-direction:column;gap:8px}
.sis-stat{
display:grid;grid-template-columns:26px minmax(0,1fr) 90px 44px;
align-items:center;gap:10px;background:var(--panel);
border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;
}
.sis-stat-s{grid-column:2 / -1;font-size:11.5px;color:var(--muted);margin-top:-2px}
@media (max-width:560px){
.sis-stat{grid-template-columns:24px minmax(0,1fr) 42px}
.sis-stat .ss-bar{display:none}
}
/* ============ personas · buscador y estados ============ */
.adm-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.adm-busca{flex:1 1 240px;min-width:180px;margin:0}
/* Quien está de baja se ve, pero apagado: sigue existiendo y no tiene acceso.
Sacarlo de la lista fue el estado anterior, y hacía creer que no existía. */
.adm-baja{opacity:.62}
.adm-baja:hover{opacity:1}
/* ============ productos ============ */
.prod{
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
padding:16px 18px;margin-bottom:14px;
}
.prod-off{opacity:.65;border-style:dashed}
.prod-off:hover{opacity:1}
.prod-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.prod-nom{flex:1 1 220px;min-width:160px;margin:0;font-weight:650}
.prod-id{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
color:var(--muted);background:var(--wait-bg);border-radius:5px;padding:3px 7px;
}
.prod-act{margin:0;white-space:nowrap}
.prod-fila{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:flex-end}
.prod-lbl{
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);margin:16px 0 8px;
}
.prod-sis{display:flex;flex-wrap:wrap;gap:8px}
.prod-chk{
margin:0;border:1px solid var(--line-2);border-radius:20px;padding:5px 12px 5px 9px;
font-size:12.5px;background:var(--panel);gap:7px;
}
.prod-chk.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-600)}
.prod-chk-off{opacity:.55}
.prod-nota{font-size:10.5px;color:var(--muted);margin-left:4px;font-style:italic}
.prod-nuevo{border-style:dashed;background:var(--panel-2)}
/* La chapita de la lista de personas: cuántos productos tiene. Sólo aparece
con más de uno en el catálogo — repetir «Programa» en cuarenta filas no
informa nada. */
.prod-chip{
display:inline-block;margin-top:5px;font-size:10.5px;font-weight:650;
letter-spacing:.03em;text-transform:uppercase;color:var(--brand-600);
background:var(--brand-soft);border:1px solid var(--brand-soft-line);
border-radius:20px;padding:2px 8px;
}
.prod-chip-cero{color:var(--lock-ink);background:var(--lock-bg);border-color:var(--line-2)}
/* ============ la ficha de un cliente, desde administración ============ */
.cli-adm{
background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
padding:4px 20px 20px;margin:0 0 26px;
}
.cli-adm-sec{margin-top:22px}
.cli-adm-sec textarea{margin-top:10px}
.cli-adm-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* Un sistema que esta persona no tiene contratado: su 0% no es que no
trabajó, es que no lo compró, y son dos conversaciones distintas. */
.cli-sys-off{opacity:.55}
.cli-sys-off:hover{opacity:1}
.cm-cerrar{margin-left:8px}
/* Un sistema fuera del programa contratado no se dibuja como bloqueado por
ritmo: el candado del ritmo se abre trabajando, este se abre comprando. */
.gcard.sin-acceso{opacity:.5}
.gcard.sin-acceso:hover{opacity:.72}
/* ============ Customer Level: «Tu rango» ============
Todos tienen rango —se entra como Aprendiz—, así que la tarjeta va siempre
en el metal del propio, oscura en los dos temas: sobre el blanco del
campus, una tarjeta profunda es lo que separa esto de una fila más de
datos. El brillo diagonal es lo que hace que el metal parezca metal y no un
color plano. Lo importante no es el nombre sino las barras: qué falta. */
.rg-tarjeta{
position:relative;overflow:hidden;isolation:isolate;
padding:22px 24px 20px;margin:0 0 22px;border-radius:18px;
border:1px solid var(--linea);color:#fff;
background:
radial-gradient(110% 80% at 100% 0%, color-mix(in srgb, var(--metal) 15%, transparent) 0%, transparent 60%),
linear-gradient(135deg, var(--m1) 0%, var(--m2) 55%, var(--m1) 100%);
box-shadow:0 22px 48px -30px rgba(0,0,0,.65);
}
.rg-tarjeta::after,.rg-nivel::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
background:linear-gradient(104deg, transparent 30%, rgba(255,255,255,.06) 46%, transparent 60%);
}
.rg-cab{display:flex;align-items:center;gap:18px}
.rg-cab-txt{min-width:0}
.rg-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.rg-nombre,.rg-nivel-n{
background:linear-gradient(180deg, #fff 8%, var(--metal) 92%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.rg-nombre{font-size:32px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:3px 0 4px}
.rg-desde{font-size:13px;color:rgba(255,255,255,.6)}
.rg-ver{
margin-left:auto;align-self:flex-start;flex:0 0 auto;
padding:7px 13px;border-radius:999px;border:1px solid var(--linea);
color:#fff;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;
transition:background .15s;
}
.rg-ver:hover{background:rgba(255,255,255,.08)}
/* La escalera en chico: un punto por rango, unidos por una línea que se
enciende con el metal de cada uno hasta el propio. */
.rg-escalita{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:22px 0 0;padding:0}
.rg-escalon{
position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.38);
}
.rg-escalon::before{
content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;
background:rgba(255,255,255,.12);
}
.rg-escalon:first-child::before{display:none}
/* El icono va por encima de la línea, que sale del escalón siguiente y la
pintaría encima. */
.rg-escalon .rango-ico{
position:relative;z-index:1;width:28px;height:28px;padding:7px;border-radius:50%;box-sizing:border-box;
background:#0E0E10;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.32);
}
.rg-escalon.hecho,.rg-escalon.actual{color:rgba(255,255,255,.82)}
.rg-escalon.hecho::before,.rg-escalon.actual::before{background:var(--metal)}
.rg-escalon.hecho .rango-ico{color:var(--metal);border-color:var(--linea);background:color-mix(in srgb, var(--metal) 20%, #0E0E10)}
.rg-escalon.actual .rango-ico{
color:var(--m1);background:var(--metal);border-color:var(--metal);
box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 0 18px var(--linea);
}
/* Camino al siguiente: las barras van en el metal del rango al que se va. */
.rg-prog{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.rg-prog-t{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:14px}
.rg-req{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rg-req li{display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:baseline;font-size:14px}
.rg-req-t{display:flex;align-items:center}
.rg-req-n{font-weight:600;font-variant-numeric:tabular-nums}
.rg-req-n i{font-style:normal;font-weight:400;opacity:.55}
.rg-barra{grid-column:1/-1;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rg-barra i{
display:block;height:100%;min-width:6px;border-radius:inherit;
background:linear-gradient(90deg, color-mix(in srgb, var(--metal) 55%, transparent), var(--metal));
}
.rg-check-ok{
display:inline-grid;place-items:center;width:16px;height:16px;margin-right:8px;border-radius:50%;
background:var(--metal);color:var(--m1);font-size:10px;font-weight:800;
}
.rg-nota{font-size:12.5px;line-height:1.55;opacity:.78;margin:6px 0 0}
.rg-cima{margin-top:18px;font-size:14px;opacity:.9}
.rg-desbloquea{
margin-top:18px;padding:13px 15px;border-radius:12px;
background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
}
.rg-desbloquea-t{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.rg-desbloquea ul,.rg-nivel-b{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px;font-size:13.5px;line-height:1.45}
.rg-desbloquea li,.rg-nivel-b li{position:relative;padding-left:16px}
.rg-desbloquea li::before,.rg-nivel-b li::before{
content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;
transform:rotate(45deg);background:var(--metal);
}
.rg-msj{margin-top:16px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.07)}
.rg-msj-t{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.65}
.rg-msj p{margin:4px 0 0;font-size:13.5px;line-height:1.55}
.rg-anuncio{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;font-size:13px;color:rgba(255,255,255,.78)}
.rg-anuncio select{
width:auto;padding:6px 9px;font-size:13px;
background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18);
}
.rg-anuncio option{color:#000;background:#fff}
/* ============ la página de los rangos ============
La escalera como cuatro tarjetas en fila, cada una en su metal: es lo que
el cliente tiene por delante. Las que ya pasó llevan «Logrado», la suya
brilla, y las que faltan apagan la insignia pero no el texto: lo que
desbloquean es justamente lo que tiene que poder leer. */
.rg-h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:34px 0 14px}
.rg-escalera{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.rg-nivel{
position:relative;overflow:hidden;isolation:isolate;
padding:18px 18px 20px;border-radius:16px;color:#fff;
border:1px solid var(--linea);
background:linear-gradient(160deg, var(--m2) 0%, var(--m1) 64%);
transition:transform .2s, box-shadow .2s;
}
.rg-nivel.actual{box-shadow:0 0 0 1.5px var(--metal), 0 22px 44px -22px var(--linea);transform:translateY(-3px)}
.rg-nivel.futuro .insignia{filter:grayscale(.9) brightness(.75)}
.rg-nivel-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rg-nivel-tag{
font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.1);color:var(--metal);
}
.rg-nivel.actual .rg-nivel-tag{background:var(--metal);color:var(--m1)}
.rg-nivel-n{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:14px 0 2px}
.rg-nivel-tiempo{font-size:12.5px;color:rgba(255,255,255,.6)}
.rg-nivel-sub{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:18px 0 6px}
.rg-nivel-p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.rg-nivel-mas{margin:0;font-size:12.5px;color:rgba(255,255,255,.6)}
.rg-reglas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rg-reglas li{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--panel)}
.rg-regla-n{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--brand-600)}
.rg-reglas p{margin:8px 0 0;font-size:14px;line-height:1.5}
@media (max-width:980px){
.rg-escalera{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.rg-tarjeta{padding:18px 16px 16px}
.rg-cab{flex-wrap:wrap;gap:14px}
.rg-ver{margin-left:0;order:3}
.rg-nombre{font-size:26px}
.rg-escalon{font-size:9.5px;letter-spacing:.04em}
.rg-escalera,.rg-reglas{grid-template-columns:1fr}
.rg-nivel.actual{transform:none}
}
/* En la lista del consultor: quién espera su firma. */
/* En la ficha del cliente, para el consultor. Las barras son las mismas que
ve el cliente, en tinta: acá no hay metal de fondo. */
.rg-panel{margin:18px 0}
.rg-pcab{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.rg-pcab-txt{min-width:0}
.rg-linea{margin:0 0 4px;font-size:13.5px}
.rg-sub{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 10px}
.rg-panel .rg-req li{font-size:13.5px}
.rg-panel .rg-barra{background:var(--line)}
.rg-panel .rg-barra i{background:var(--ink-2);opacity:.55}
.rg-panel .rg-req li.ok .rg-barra i{opacity:1}
.rg-panel .rg-check-ok{background:var(--ink);color:var(--panel)}
.rg-ascenso{margin:16px 0;padding:14px;border:1px solid var(--ink);border-radius:12px;display:grid;gap:8px}
.rg-asc-t{font-weight:700;font-size:14px}
.rg-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;cursor:pointer}
.rg-check input{margin-top:3px;flex:0 0 auto}
.rg-wins-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rg-wins-n{width:76px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.rg-wins-b{min-width:36px;font-size:16px;line-height:1}
.rg-wins-reg{margin-left:6px;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.rg-pie{margin-top:16px}
.rg-adm{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rg-vuelta{margin-top:16px;display:grid;gap:10px}
.rg-vuelta p{margin:0}
/* Lo que pasó al firmar un ascenso, arriba del bloque: si salió el anuncio,
si salió el correo. Lo que le toca hacer a mano al consultor va en tinta. */
.rg-avisos{margin:0 0 14px;padding:12px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--panel-2);color:var(--ink-2);font-size:13.5px;line-height:1.5;display:grid;gap:4px}
.rg-avisos p{margin:0}
.rg-avisos .rg-a-mano{color:var(--ink);font-weight:600}
/* «Ascensos recientes», en Inicio: quién, a qué rango y cuándo. Sin metal ni
medallas: es una lista, no un podio. */
.rg-recientes{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 20px;background:var(--panel)}
.rg-recientes-t{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.rg-recientes ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rg-recientes li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;line-height:1.45}
.rg-reciente-f{flex:0 0 auto;font-size:12.5px;color:var(--muted)}
/* ============ aviso de vencimiento (Inicio) ============
Discreto a propósito: es información, no una alarma. Sin rojo de fondo ni
como texto: el rojo de marca no se lee como tinta sobre negro. */
.aviso-vence{
margin:0 0 14px;padding:12px 15px;border:1px solid var(--line-2);border-radius:var(--r-sm);
background:var(--panel-2);color:var(--ink-2);font-size:13.5px;line-height:1.5;
}
.aviso-vence b{color:var(--ink);font-weight:600}
.aviso-vence a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* ============ menos movimiento ============
Para quien pidió al sistema que las cosas no se muevan (mareo, vértigo,
distracción). Se apagan las animaciones y transiciones de adorno; lo que
comunica estado —el giro del «cargando»— queda, más lento, porque sin él
la pantalla parece colgada. */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important;
}
.spinner{animation-duration:1.6s !important;animation-iteration-count:infinite !important}
}