/* ==========================================================================
   COMPONENTES — solo leen tokens. Nombres en español, prefijo por familia.
   ========================================================================== */

/* ---------- Marcas de la plataforma (provisorias) ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-titulo); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--tinta); }
.logo:hover { text-decoration: none; }
.logo__marca { width: 26px; height: 26px; border-radius: 8px; background: var(--acento); position: relative; flex: none; }
.logo__marca::before, .logo__marca::after { content: ""; position: absolute; border-radius: 50%; background: var(--sobre-acento); }
.logo__marca::before { width: 8px; height: 8px; left: 6px; top: 6px; }
.logo__marca::after { width: 8px; height: 8px; right: 6px; bottom: 6px; opacity: .55; }
.escuela-marca { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: none; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-2); border: 1px solid transparent; font-weight: 600; font-size: var(--t-chico); line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--curva), border-color var(--dur), color var(--dur); text-decoration: none !important; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primario { background: var(--acento); color: var(--sobre-acento); }
.btn--primario:hover { background: var(--acento-hover); }
.btn--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--hilo-fuerte); }
.btn--secundario:hover { border-color: var(--tinta-3); }
.btn--fantasma { background: transparent; color: var(--tinta-2); }
.btn--fantasma:hover { background: var(--lienzo); color: var(--tinta); }
.btn--suave { background: var(--acento-suave); color: var(--acento-tinta); }
.btn--peligro { background: var(--superficie); color: var(--riesgo); border-color: var(--hilo-fuerte); }
.btn--peligro:hover { border-color: var(--riesgo); }
.btn--vivo { background: var(--vivo); color: #fff; }
.btn--grande { min-height: 52px; padding: 0 22px; font-size: var(--t-cuerpo); border-radius: var(--r-3); }
.btn--chico { min-height: 32px; padding: 0 12px; font-size: var(--t-micro); border-radius: var(--r-1); }
.btn--bloque { width: 100%; }
.btn[disabled], .btn--deshabilitado { opacity: .45; pointer-events: none; }
.btn-icono { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-2); border: 0; background: transparent; color: var(--tinta-2); cursor: pointer; position: relative; }
.btn-icono:hover { background: var(--lienzo); color: var(--tinta); }
.btn-icono svg { width: 20px; height: 20px; }
.punto-aviso { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); border: 2px solid var(--superficie); }

/* ---------- Íconos ---------- */
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--16 { width: 16px; height: 16px; } .ico--24 { width: 24px; height: 24px; } .ico--32 { width: 32px; height: 32px; stroke-width: 1.5; }

/* ---------- Superficies ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--hilo); border-radius: var(--r-3); padding: var(--e-5); }
.tarjeta--plana { box-shadow: none; }
.tarjeta--sombra { border-color: transparent; box-shadow: var(--sombra-2); }
.tarjeta--compacta { padding: var(--e-4); }
.tarjeta--sin-padding { padding: 0; overflow: hidden; }
.tarjeta__cabeza { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.tarjeta__cabeza h2, .tarjeta__cabeza h3 { font-size: var(--t-h3); line-height: var(--lh-h3); }
.tarjeta__pie { border-top: 1px solid var(--hilo); margin: var(--e-5) calc(var(--e-5) * -1) calc(var(--e-5) * -1); padding: var(--e-3) var(--e-5); display: flex; align-items: center; gap: var(--e-3); }
.tarjeta--link { display: block; color: inherit; transition: border-color var(--dur), box-shadow var(--dur); }
.tarjeta--link:hover { text-decoration: none; border-color: var(--hilo-fuerte); box-shadow: var(--sombra-1); }
.panel-lienzo { background: var(--lienzo); border-radius: var(--r-2); padding: var(--e-4); }

/* ---------- Chips y etiquetas ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; background: var(--lienzo); color: var(--tinta-2); white-space: nowrap; }
.chip svg { width: 14px; height: 14px; }
.chip--acento { background: var(--acento-suave); color: var(--acento-tinta); }
.chip--ok { background: var(--ok-suave); color: var(--ok); }
.chip--alerta { background: var(--alerta-suave); color: var(--alerta); }
.chip--riesgo { background: var(--riesgo-suave); color: var(--riesgo); }
.chip--info { background: var(--info-suave); color: var(--info); }
.chip--vivo { background: var(--vivo); color: #fff; }
.chip--vivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: latido 1.4s infinite; }
.chip--borde { background: transparent; border: 1px solid var(--hilo-fuerte); }
@keyframes latido { 50% { opacity: .35; } }
.semaforo { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.semaforo--verde { background: var(--ok); } .semaforo--amarillo { background: var(--alerta); } .semaforo--rojo { background: var(--riesgo); } .semaforo--gris { background: var(--hilo-fuerte); }

/* ---------- Avatares ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 650; color: #fff; flex: none; background: var(--tinta-3); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--20 { width: 20px; height: 20px; font-size: 9px; } .avatar--28 { width: 28px; height: 28px; font-size: 11px; }
.avatar--48 { width: 48px; height: 48px; font-size: 16px; } .avatar--72 { width: 72px; height: 72px; font-size: 24px; }
.avatares { display: flex; } .avatares .avatar { border: 2px solid var(--superficie); margin-left: -8px; } .avatares .avatar:first-child { margin-left: 0; }
.a1 { background: #5b6ee1; } .a2 { background: #c2410c; } .a3 { background: #0f766e; } .a4 { background: #9d174d; } .a5 { background: #6d28d9; } .a6 { background: #475569; } .a7 { background: #b45309; } .a8 { background: #15803d; }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .campo__label { font-size: var(--t-chico); font-weight: 600; color: var(--tinta); }
.campo__ayuda { font-size: var(--t-micro); color: var(--tinta-3); line-height: var(--lh-micro); }
.campo__error { font-size: var(--t-micro); color: var(--riesgo); font-weight: 600; }
.entrada, select.entrada, textarea.entrada { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hilo-fuerte); border-radius: var(--r-2); background: var(--superficie); font-size: 16px; line-height: 1.4; transition: border-color var(--dur), box-shadow var(--dur); }
textarea.entrada { min-height: 104px; resize: vertical; }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.entrada--error { border-color: var(--riesgo); }
.entrada-grupo { display: flex; align-items: center; border: 1px solid var(--hilo-fuerte); border-radius: var(--r-2); background: var(--superficie); padding: 0 12px; gap: 8px; min-height: 44px; }
.entrada-grupo input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: 16px; height: 42px; }
.entrada-grupo svg { color: var(--tinta-3); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-chico); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acento); flex: none; }
.interruptor { position: relative; width: 40px; height: 24px; flex: none; }
.interruptor input { opacity: 0; width: 0; height: 0; position: absolute; }
.interruptor span { position: absolute; inset: 0; border-radius: 99px; background: var(--hilo-fuerte); transition: background var(--dur); cursor: pointer; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform var(--dur) var(--curva); }
.interruptor input:checked + span { background: var(--acento); }
.interruptor input:checked + span::after { transform: translateX(16px); }
/* Tiles de elección (formularios de pocos pasos) */
.tiles { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--e-4) var(--e-4) var(--e-4) var(--e-4); border: 1px solid var(--hilo-fuerte); border-radius: var(--r-3); background: var(--superficie); cursor: pointer; min-height: 96px; transition: border-color var(--dur), background var(--dur); }
.tile:hover { border-color: var(--tinta-3); }
.tile input { position: absolute; opacity: 0; }
.tile__titulo { font-weight: 650; }
.tile__detalle { font-size: var(--t-chico); color: var(--tinta-2); }
.tile--activo, .tile:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }

/* ---------- Pestañas, segmentos, migas ---------- */
.pestanas { display: flex; gap: var(--e-5); border-bottom: 1px solid var(--hilo); overflow-x: auto; scrollbar-width: none; }
.pestanas a, .pestanas button { padding: 10px 0 12px; border: 0; background: none; color: var(--tinta-3); font-weight: 600; font-size: var(--t-chico); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; text-decoration: none; }
.pestanas .activa, .pestanas [aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.segmento { display: inline-flex; padding: 3px; gap: 2px; background: var(--lienzo); border: 1px solid var(--hilo); border-radius: var(--r-2); }
.segmento button, .segmento a { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-2); cursor: pointer; text-decoration: none; }
.segmento .activa { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-1); }
.migas { display: flex; gap: 6px; align-items: center; font-size: var(--t-chico); color: var(--tinta-3); flex-wrap: wrap; }
.migas a { color: var(--tinta-2); }
.migas span[aria-hidden] { color: var(--hilo-fuerte); }

/* ---------- Pasos (stepper) ---------- */
.pasos { display: flex; gap: var(--e-2); align-items: center; list-style: none; padding: 0; margin: 0; }
.pasos li { display: flex; align-items: center; gap: 8px; font-size: var(--t-chico); color: var(--tinta-3); font-weight: 600; }
.pasos li::after { content: ""; width: 28px; height: 1px; background: var(--hilo-fuerte); margin-left: 4px; }
.pasos li:last-child::after { display: none; }
.pasos b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--hilo-fuerte); font-size: 12px; }
.pasos .hecho { color: var(--tinta-2); } .pasos .hecho b { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.pasos .actual { color: var(--tinta); } .pasos .actual b { border-color: var(--acento); color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
@media (max-width: 720px) { .pasos li span { display: none; } .pasos .actual span { display: inline; } }

/* ---------- Progreso ---------- */
.barra { height: 6px; border-radius: 99px; background: var(--hilo); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--acento); border-radius: inherit; }
.barra--ok > i { background: var(--ok); }
.anillo { --p: 60; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--acento) calc(var(--p) * 1%), var(--hilo) 0); display: grid; place-items: center; flex: none; }
.anillo::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--superficie); grid-area: 1/1; }
.anillo span { grid-area: 1/1; font-size: 11px; font-weight: 700; z-index: 1; font-variant-numeric: tabular-nums; }

/* Riel del programa: la secuencia real de semanas (firma visual de la plataforma) */
.riel { display: grid; grid-template-columns: repeat(var(--n, 13), minmax(0, 1fr)); gap: 3px; align-items: end; }
.riel i { height: 8px; border-radius: 3px; background: var(--hilo); }
.riel i.hecha { background: var(--tinta); }
.riel i.actual { height: 16px; background: var(--acento); }
.riel i.cierre { background: var(--hilo-fuerte); }
.riel i.cierre.hecha { background: var(--tinta); }
.riel-leyenda { display: flex; justify-content: space-between; font-size: var(--t-micro); color: var(--tinta-3); margin-top: 6px; }

/* ---------- Encuentro: la próxima sesión en vivo (pieza central) ---------- */
.encuentro { display: grid; grid-template-columns: auto 1fr; gap: var(--e-5); align-items: center; padding: var(--e-5); border-radius: var(--r-3); background: var(--superficie); border: 1px solid var(--hilo); position: relative; overflow: hidden; }
.encuentro::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acento); }
.encuentro__hora { text-align: left; padding-right: var(--e-5); border-right: 1px solid var(--hilo); }
.encuentro__dia { font-size: var(--t-micro); font-weight: 700; color: var(--acento); letter-spacing: .03em; }
.encuentro__num { font-family: var(--font-titulo); font-size: 2.5rem; line-height: .95; font-weight: 650; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.encuentro__mes { font-size: var(--t-chico); color: var(--tinta-2); font-weight: 600; }
.encuentro--vivo::before { background: var(--vivo); }
.encuentro--vivo .encuentro__dia { color: var(--vivo); }
@media (max-width: 560px) { .encuentro { grid-template-columns: 1fr; gap: var(--e-4); } .encuentro__hora { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--hilo); padding-bottom: var(--e-3); display: flex; align-items: baseline; gap: 10px; } .encuentro__num { font-size: 2rem; } }

/* ---------- Listas de filas ---------- */
.lista { border: 1px solid var(--hilo); border-radius: var(--r-3); background: var(--superficie); overflow: hidden; }
.lista > li, .lista > a, .lista > div, .lista > label { display: flex; align-items: center; gap: var(--e-3); padding: 14px var(--e-4); border-top: 1px solid var(--hilo); color: inherit; text-decoration: none; }
.lista > :first-child { border-top: 0; }
.lista > a:hover { background: var(--superficie-2); }
.lista--sin-borde { border: 0; border-radius: 0; background: transparent; }
.lista--sin-borde > * { padding-left: 0; padding-right: 0; }
.fila-meta { font-size: var(--t-chico); color: var(--tinta-3); }

/* Lección en temario */
.leccion { display: flex; align-items: center; gap: var(--e-3); }
.leccion__estado { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid var(--hilo-fuerte); color: var(--tinta-3); }
.leccion__estado svg { width: 15px; height: 15px; }
.leccion--hecha .leccion__estado { background: var(--ok); border-color: var(--ok); color: #fff; }
.leccion--actual .leccion__estado { border-color: var(--acento); color: var(--acento); }
.leccion--bloqueada { opacity: .55; }

/* ---------- Tablas ---------- */
.tabla-caja { border: 1px solid var(--hilo); border-radius: var(--r-3); background: var(--superficie); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-chico); }
.tabla th { text-align: left; font-weight: 600; color: var(--tinta-3); font-size: var(--t-micro); padding: 10px var(--e-4); border-bottom: 1px solid var(--hilo); white-space: nowrap; background: var(--superficie-2); }
.tabla td { padding: 12px var(--e-4); border-bottom: 1px solid var(--hilo); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--superficie-2); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-herramientas { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--hilo); flex-wrap: wrap; }

/* ---------- KPIs ---------- */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi__valor { font-family: var(--font-titulo); font-size: 1.75rem; line-height: 1.05; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi__rotulo { font-size: var(--t-chico); color: var(--tinta-2); }
.kpi__delta { font-size: var(--t-micro); font-weight: 600; }
.kpi__delta--sube { color: var(--ok); } .kpi__delta--baja { color: var(--riesgo); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--hilo); border-radius: var(--r-3); background: var(--superficie); }
.kpis > .kpi { padding: var(--e-4) var(--e-5); border-left: 1px solid var(--hilo); }
.kpis > .kpi:first-child { border-left: 0; }
@media (max-width: 720px) { .kpis { grid-template-columns: 1fr 1fr; } .kpis > .kpi:nth-child(odd) { border-left: 0; } .kpis > .kpi:nth-child(n+3) { border-top: 1px solid var(--hilo); } }

/* ---------- Avisos, toasts, vacíos ---------- */
.aviso { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-2); background: var(--info-suave); color: var(--tinta); font-size: var(--t-chico); align-items: flex-start; }
.aviso svg { color: var(--info); margin-top: 1px; }
.aviso--ok { background: var(--ok-suave); } .aviso--ok svg { color: var(--ok); }
.aviso--alerta { background: var(--alerta-suave); } .aviso--alerta svg { color: var(--alerta); }
.aviso--riesgo { background: var(--riesgo-suave); } .aviso--riesgo svg { color: var(--riesgo); }
.aviso--neutro { background: var(--lienzo); } .aviso--neutro svg { color: var(--tinta-3); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinta); color: var(--superficie); padding: 12px 16px; border-radius: var(--r-2); box-shadow: var(--sombra-3); display: flex; gap: 12px; align-items: center; font-size: var(--t-chico); z-index: 90; }
.vacio { text-align: center; padding: var(--e-7) var(--e-5); display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.vacio__ico { width: 56px; height: 56px; border-radius: 16px; background: var(--lienzo); display: grid; place-items: center; color: var(--tinta-3); }
.vacio p { max-width: 42ch; color: var(--tinta-2); }

/* ---------- Modal y cajón ---------- */
.velo { position: fixed; inset: 0; background: rgba(15, 17, 21, .45); z-index: 70; display: grid; place-items: center; padding: var(--e-4); }
.modal { background: var(--superficie); border-radius: var(--r-3); box-shadow: var(--sombra-3); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.modal__cabeza { padding: var(--e-5) var(--e-5) 0; display: flex; gap: var(--e-3); align-items: flex-start; }
.modal__cuerpo { padding: var(--e-4) var(--e-5); }
.modal__pie { padding: var(--e-4) var(--e-5); border-top: 1px solid var(--hilo); display: flex; gap: var(--e-3); justify-content: flex-end; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100%); background: var(--superficie); box-shadow: var(--sombra-3); z-index: 80; display: flex; flex-direction: column; }

/* ---------- Mensajes / hilos ---------- */
.msg { display: flex; gap: var(--e-3); align-items: flex-start; }
.msg__burbuja { background: var(--lienzo); padding: 10px 14px; border-radius: 4px 14px 14px 14px; max-width: 62ch; }
.msg--mio { flex-direction: row-reverse; }
.msg--mio .msg__burbuja { background: var(--acento-suave); border-radius: 14px 4px 14px 14px; }
.msg__meta { font-size: var(--t-micro); color: var(--tinta-3); margin-bottom: 3px; }
.respuesta-oficial { border: 1px solid var(--ok); background: var(--ok-suave); border-radius: var(--r-3); padding: var(--e-4); }

/* ---------- Reproductor ---------- */
.reproductor { border-radius: var(--r-3); overflow: hidden; background: #0d0f13; aspect-ratio: 16 / 9; position: relative; color: #fff; }
.reproductor__imagen { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, #2b3346 0%, #12151c 70%); }
.reproductor__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; color: #111; }
.reproductor__barra { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(transparent, rgba(0,0,0,.7)); display: flex; align-items: center; gap: 12px; font-size: 13px; }
.reproductor__linea { flex: 1; height: 4px; background: rgba(255,255,255,.3); border-radius: 99px; position: relative; }
.reproductor__linea i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: inherit; }
.reproductor__capitulos { position: absolute; left: 0; right: 0; top: -1px; height: 6px; }
.transcripcion p { padding: 6px 10px; border-radius: 8px; margin: 0; display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: var(--t-chico); cursor: pointer; }
.transcripcion p:hover { background: var(--lienzo); }
.transcripcion p b { color: var(--acento); font-weight: 600; font-variant-numeric: tabular-nums; }
.transcripcion p.actual { background: var(--acento-suave); }

/* ---------- Agenda / calendario ---------- */
.agenda { display: grid; grid-template-columns: 56px repeat(var(--dias, 5), minmax(0, 1fr)); border: 1px solid var(--hilo); border-radius: var(--r-3); background: var(--superficie); overflow: hidden; }
.agenda__cab { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--hilo); border-left: 1px solid var(--hilo); font-size: var(--t-micro); color: var(--tinta-3); font-weight: 600; }
.agenda__cab b { display: block; font-size: 1.125rem; color: var(--tinta); font-weight: 650; }
.agenda__cab--hoy b { color: var(--acento); }
.agenda__hora { font-size: 11px; color: var(--tinta-3); text-align: right; padding: 4px 8px 0 0; height: 56px; border-top: 1px solid var(--hilo); font-variant-numeric: tabular-nums; }
.agenda__celda { height: 56px; border-left: 1px solid var(--hilo); border-top: 1px solid var(--hilo); position: relative; }
.agenda__celda--libre { background: repeating-linear-gradient(0deg, transparent, transparent 27px, color-mix(in srgb, var(--hilo) 60%, transparent) 27px, color-mix(in srgb, var(--hilo) 60%, transparent) 28px); }
.agenda__celda--bloq { background: var(--lienzo); }
.evento { position: absolute; left: 3px; right: 3px; top: 3px; border-radius: 6px; padding: 5px 7px; font-size: 11.5px; line-height: 1.25; background: var(--acento-suave); color: var(--acento-tinta); border-left: 3px solid var(--acento); overflow: hidden; z-index: 1; }
.evento b { display: block; font-size: 12px; }
.evento--grupo { background: var(--info-suave); color: var(--info); border-left-color: var(--info); }
.evento--propio { background: var(--lienzo); color: var(--tinta-2); border-left-color: var(--tinta-3); }
.horarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--e-2); }
.horario { height: 44px; border: 1px solid var(--hilo-fuerte); border-radius: var(--r-2); display: grid; place-items: center; font-weight: 600; font-size: var(--t-chico); background: var(--superficie); cursor: pointer; font-variant-numeric: tabular-nums; }
.horario:hover { border-color: var(--acento); color: var(--acento); }
.horario--activo { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: var(--t-chico); }
.mes span { padding: 6px 0; color: var(--tinta-3); font-size: var(--t-micro); font-weight: 600; }
.mes button { aspect-ratio: 1; border: 0; background: transparent; border-radius: 50%; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--tinta-3); }
.mes button.disp { color: var(--tinta); font-weight: 650; background: var(--acento-suave); }
.mes button.sel { background: var(--acento); color: var(--sobre-acento); }

/* ---------- Línea de tiempo ---------- */
.linea { list-style: none; margin: 0; padding: 0; position: relative; }
.linea li { position: relative; padding: 0 0 var(--e-4) 28px; }
.linea li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 1px; background: var(--hilo-fuerte); }
.linea li:last-child::before { display: none; }
.linea li::after { content: ""; position: absolute; left: 2px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--hilo-fuerte); }
.linea li.hecho::after { background: var(--tinta); border-color: var(--tinta); }
.linea li.actual::after { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

/* ---------- Menú contextual y buscador ---------- */
.menu { background: var(--superficie); border: 1px solid var(--hilo); border-radius: var(--r-2); box-shadow: var(--sombra-2); padding: 6px; min-width: 200px; }
.menu a, .menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 6px; border: 0; background: none; color: var(--tinta); font-size: var(--t-chico); text-align: left; cursor: pointer; text-decoration: none; }
.menu a:hover, .menu button:hover { background: var(--lienzo); }

/* ---------- Cuadro de IA (siempre con fuente y aprobación humana) ---------- */
.ia { border: 1px solid var(--hilo); border-radius: var(--r-3); background: var(--superficie); }
.ia__cabeza { display: flex; align-items: center; gap: 8px; padding: 12px var(--e-4); border-bottom: 1px solid var(--hilo); font-size: var(--t-chico); font-weight: 600; }
.ia__marca { width: 22px; height: 22px; border-radius: 6px; background: var(--tinta); color: var(--superficie); display: grid; place-items: center; }
.ia__marca svg { width: 13px; height: 13px; }
.ia__cuerpo { padding: var(--e-4); }
.cita { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-micro); font-weight: 600; color: var(--acento-tinta); background: var(--acento-suave); padding: 3px 8px; border-radius: 6px; }
.borrador { border: 1px dashed var(--hilo-fuerte); border-radius: var(--r-2); padding: var(--e-4); background: var(--superficie-2); }

.leccion a { color: var(--tinta); }
.leccion a:hover { color: var(--acento); }

/* Pestañas deslizables: degradado que avisa que hay más */
.pestanas { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }
/* Tablas: primera columna sin quiebres raros; en celular cada fila pasa a tarjeta */
.tabla td:first-child { min-width: 180px; }
@media (max-width: 720px) {
  .tabla--apila thead { display: none; }
  .tabla--apila, .tabla--apila tbody, .tabla--apila tr, .tabla--apila td { display: block; width: 100%; }
  .tabla--apila tr { padding: 12px 16px; border-bottom: 1px solid var(--hilo); }
  .tabla--apila tr:last-child { border-bottom: 0; }
  .tabla--apila td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; min-width: 0; }
  .tabla--apila td::before { content: attr(data-rotulo); color: var(--tinta-3); font-size: var(--t-micro); font-weight: 600; text-align: left; flex: none; }
  .tabla--apila td:first-child { display: block; text-align: left; padding-bottom: 6px; }
  .tabla--apila td:first-child::before { display: none; }
  .tabla--apila td:empty { display: none; }
  .tabla--apila .num { text-align: right; }
}
/* Leyenda del riel alineada con sus columnas reales */
.riel-leyenda { display: grid; grid-template-columns: repeat(var(--n, 13), minmax(0, 1fr)); gap: 3px; }
.riel-leyenda span { white-space: nowrap; }
/* Semáforo con leyenda visible */
.leyenda { display: flex; gap: var(--e-4); flex-wrap: wrap; font-size: var(--t-micro); color: var(--tinta-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
/* Respuesta de la IA con contenedor propio */
.msg--ia .msg__burbuja { background: var(--superficie); border: 1px solid var(--hilo); border-radius: 4px 14px 14px 14px; }
.msg--mio .msg__burbuja { background: var(--lienzo); }
/* Mini gráfico de barras con rótulos */
.barras { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 6px; align-items: end; height: 72px; }
.barras i { display: block; border-radius: 4px; background: var(--hilo-fuerte); }
.barras-rotulos { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 6px; text-align: center; font-size: 11px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }