/* ==========================================================================
   SABER 11 PRO · Sistema visual «Selva Eléctrica» (1/11/2026, elegido por el responsable)
   Se carga AL FINAL: reemplaza la paleta heredada (UDENAR) por la propia del curso, fija una escala de 7 tamaños
   de letra, objetivos táctiles de 44 px y la nueva organización: riel (computador) y barra inferior (celular)
   con 5 destinos: Hoy · Ruta · Practicar · Clases · Yo. Contraste verificado WCAG 2.2 AA.
   Ver diseno/auditoria/premium_2026-11-01/PRD_SABER11_PRO_PREMIUM.md
   ========================================================================== */
:root {
  /* Marca Selva Eléctrica */
  --s11-violeta: #5B34F2;      /* principal · texto blanco 6,6:1 */
  --s11-violeta-2: #4521D6;    /* hover / foco */
  --s11-indigo: #24106B;       /* fondo profundo de la misión */
  --s11-cian: #00B8D9;         /* acento · siempre con texto oscuro */
  --s11-lima: #A3E635;         /* logros y racha · con texto oscuro */
  --s11-exito: #15803D;        /* completado · 5,0:1 sobre blanco */

  /* Tokens heredados reasignados (los componentes existentes los usan) */
  --fondo: #F4F4FF;
  --superficie: #FFFFFF;
  --superficie-2: #EFEDFF;
  --linea: #DCD9F5;
  --linea-2: #ECEAFB;
  --tinta: #0F1222;
  --tinta-2: #3F4363;
  --tinta-3: #565A7C;
  --verde: var(--s11-violeta);
  --verde-accion: var(--s11-violeta);
  --verde-hover: var(--s11-violeta-2);
  --verde-claro: #EDE8FF;
  --verde-claro-2: #DCD2FF;
  --foco: var(--s11-violeta);
  --cian: var(--s11-cian);
  --cian-claro: #DDF7FC;
  --naranja: #FB7A1E;
  --naranja-claro: #FFF0E3;
  --naranja-texto: #8A3A06;
  --amarillo-claro: #FFF6D6;
  --amarillo-texto: #5E4500;
  --lateral: var(--superficie);
  --franja-lateral: linear-gradient(90deg, var(--s11-violeta), var(--s11-cian));
  --franja-bienvenida: linear-gradient(180deg, var(--s11-violeta), var(--s11-cian));
  --franja-separador: linear-gradient(90deg, var(--s11-violeta), var(--s11-cian));
  --r: 20px; --r-sm: 14px; --r-xs: 10px;
  --sombra: 0 18px 40px -24px rgba(48, 24, 150, .35);
  --sombra-2: 0 2px 6px rgba(30, 20, 90, .06), 0 12px 28px -18px rgba(48, 24, 150, .30);

  /* Escala tipográfica (7 tamaños) */
  --t-display: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --t-h1: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  --t-h2: clamp(1.3rem, 1.1rem + .7vw, 1.6rem);
  --t-h3: 1.125rem;
  --t-body: 1rem;
  --t-small: .875rem;
  --t-caption: .75rem;
}

/* ------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--fondo); color: var(--tinta); font-size: var(--t-body); line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.015em; color: var(--tinta); }
.titulo-vista h1, .sem-hero h1, .bienvenida h1 { font-size: var(--t-h1); line-height: 1.12; }
.subtitulo { font-size: var(--t-h2); }
.subtitulo::after { background: var(--franja-separador) !important; height: 3px !important; border-radius: 3px; }
.h3-t, .item h4 { font-size: var(--t-h3); }
small, .nota-chica, .item small, .chip, .kicker + p small { font-size: var(--t-small); }
.nota-chica { color: var(--tinta-3); }
.kicker { font-size: var(--t-caption); color: var(--s11-violeta); letter-spacing: .14em; }
a { color: var(--s11-violeta); }
:focus-visible { outline: 3px solid var(--s11-violeta) !important; outline-offset: 2px !important; border-radius: 6px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ controles (44 px) */
.btn { min-height: 48px; border-radius: 999px; font-weight: 700; }
.btn-sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; }
.btn-primario { background: var(--s11-violeta); color: #fff; box-shadow: 0 10px 22px -12px rgba(91, 52, 242, .7); }
.btn-primario:hover { background: var(--s11-violeta-2); }
.btn-secundario { background: var(--superficie); color: var(--tinta); border: 1.5px solid var(--linea); }
.btn-secundario:hover { border-color: var(--s11-violeta); color: var(--s11-violeta-2); }
.btn-acento { background: var(--s11-cian); color: #04121A; }
input[type=text], input:not([type]), input[type=password], select, textarea { min-height: 48px; border-radius: 14px !important; font-size: 1rem !important; }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; min-width: 24px; flex: none; accent-color: var(--s11-violeta); }
.opcion-chip { min-height: 48px; padding: .6rem .9rem !important; border-radius: 14px !important; gap: .6rem; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; }
.chip { font-weight: 700; padding: .3rem .75rem; min-height: 28px; }
a.chip { min-height: 44px; padding: .5rem 1rem; }
.chip-verde { background: var(--verde-claro); color: #3A1BB8; }
.chip-ok { background: #DCFCE7; color: #14532D; }
.chip-warn { background: var(--amarillo-claro); color: var(--amarillo-texto); }
/* Etiquetas de área: texto del color de área (variante oscura) sobre su tinte · ≥ 4,5:1 */
.chip-prueba { color: var(--pc) !important; background: color-mix(in srgb, var(--pc) 11%, #fff) !important; border: 1px solid color-mix(in srgb, var(--pc) 30%, #fff) !important; font-size: var(--t-small) !important; }
.tarjeta { border-radius: var(--r); border-color: var(--linea); box-shadow: var(--sombra-2); }
.item { border-radius: 18px; min-height: 64px; box-shadow: 0 1px 2px rgba(30, 20, 90, .04); }
.item:hover { border-color: color-mix(in srgb, var(--s11-violeta) 45%, var(--linea)); }
.item .estado.ok { background: var(--s11-exito); border-color: var(--s11-exito); }
.aviso-info { background: #F0EEFF; border-color: #D8D0FF; color: #2A1A7A; }

/* ------------------------------------------------------------ marco: riel (computador) + barra inferior (celular) */
.app { grid-template-columns: 104px minmax(0, 1fr); }
.app-lado.riel { background: var(--superficie); color: var(--tinta); border-right: 1px solid var(--linea); padding: 18px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100vh; position: sticky; top: 0; overflow: visible; }
.riel-marca { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(140deg, var(--s11-violeta), var(--s11-indigo)); margin-bottom: 14px; box-shadow: 0 12px 24px -12px rgba(91, 52, 242, .8); }
.riel-marca img { width: 34px; height: 34px; filter: brightness(0) invert(1); }
/* Prefijo .app-lado.riel: gana a las reglas heredadas de aula.css (.app-lado nav a { color:#fff } …) */
.app-lado.riel .riel-nav { display: flex; flex-direction: column; gap: 6px; width: 100%; flex: 1; }
.app-lado.riel .riel-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 66px; padding: 6px 4px; border-radius: 18px; color: var(--tinta-3); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .01em; background: transparent; box-shadow: none; transition: background .15s, color .15s; }
.app-lado.riel .riel-nav a::before { display: none; }
.app-lado.riel .riel-nav a svg { width: 24px; height: 24px; }
.app-lado.riel .riel-nav a:hover { background: var(--superficie-2); color: var(--tinta); box-shadow: none; }
.app-lado.riel .riel-nav a.activo { background: var(--verde-claro); color: #2C1590; font-weight: 800; }
.app-lado.riel .riel-nav a.activo svg { color: var(--s11-violeta); }
.app-lado.riel .riel-nav .riel-yo { margin-top: auto; }
.app-lado.riel :focus-visible { outline-color: var(--s11-violeta) !important; }
.app-top { background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea-2); min-height: 64px; }
.app-top { flex-wrap: nowrap !important; }
.app-top .miga { font-size: var(--t-small); color: var(--tinta-3); flex: 1; min-width: 0; order: 0; width: auto !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-top .miga b { color: var(--tinta); }
.top-yo { display: inline-flex; align-items: center; gap: .6rem; margin-left: auto; text-decoration: none; color: var(--tinta); font-weight: 700; min-height: 44px; padding: 4px 6px 4px 4px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--superficie); }
.top-yo .ini { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--s11-violeta), var(--s11-cian)); color: #fff; font-weight: 800; font-size: .9rem; }
.top-yo .nom { padding-right: 8px; }
#vista { padding-bottom: 40px; }
.cinta { font-size: var(--t-small); }
.recurso-reproductor video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0F1222; border-radius: 18px; object-fit: contain; }
.cinta a { color: inherit !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .app-lado.riel { position: fixed; inset: auto 0 0 0; top: auto; height: calc(70px + env(safe-area-inset-bottom)); width: 100%; transform: none !important; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--linea); z-index: 60; background: color-mix(in srgb, var(--superficie) 94%, transparent); backdrop-filter: blur(14px); }
  .riel-marca { display: none; }
  .app-lado.riel .riel-nav { flex-direction: row; gap: 2px; }
  .app-lado.riel .riel-nav a { flex: 1; min-height: 56px; font-size: .72rem; border-radius: 16px; }
  .app-lado.riel .riel-nav .riel-yo { margin-top: 0; }
  #vista { padding-bottom: 104px; }
  .top-yo .nom { display: none; }
  .velo, .menu-movil { display: none !important; }
}

/* ------------------------------------------------------------ HOY */
.hoy { display: grid; gap: 18px; max-width: 1120px; }
.hoy-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hoy-cab h1 { font-size: var(--t-display); line-height: 1.02; margin: .2rem 0 0; font-weight: 800; letter-spacing: -.03em; }
.racha { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--tinta-2); font-size: var(--t-small); background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 999px; padding: .45rem .9rem; min-height: 40px; }
.racha svg { width: 18px; height: 18px; color: #4D7C0F; }
.hoy-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hoy-col { display: grid; gap: 18px; }
@media (max-width: 899px) { .hoy-grid { grid-template-columns: 1fr; } }

.mision { position: relative; overflow: hidden; border-radius: 28px; padding: 26px 24px 24px; color: #fff; min-height: 240px;
  background: radial-gradient(110% 90% at 100% 0%, rgba(0, 184, 217, .55) 0%, transparent 55%), linear-gradient(150deg, #5B34F2 0%, #24106B 100%);
  box-shadow: 0 26px 50px -28px rgba(60, 30, 160, .75); isolation: isolate; }
.mision .etq { font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #E6E0FF; }
.mision h2 { color: #fff; font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); line-height: 1.1; margin: .55rem 0 .7rem; max-width: 17ch; font-weight: 800; }
.mision .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .4rem; }
.mision .pill { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: .3rem .75rem; font-size: var(--t-small); font-weight: 700; color: #fff; }
.mision .porque { font-size: 1rem; color: #F1EEFF; margin: .6rem 0 1.1rem; max-width: 36ch; }
.mision .btn { background: #fff; color: #1B0F55; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .55); }
.mision .btn:hover { background: #F1EEFF; }
.mision .ilus { position: absolute; right: -4px; bottom: -6px; width: min(46%, 300px); height: auto; z-index: -1; opacity: .95; pointer-events: none; }
.mision .sec { color: #fff; font-weight: 700; margin-left: .8rem; text-decoration: underline; text-underline-offset: 3px; }

.s11-card { background: var(--superficie); border: 1px solid var(--linea); border-radius: 22px; padding: 18px; box-shadow: var(--sombra-2); }
.s11-card > h2, .s11-card .cab h2 { font-size: var(--t-h3); margin: 0; }
.s11-card .cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.semana-hoy { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.anillo-s11 { width: 64px; height: 64px; flex: none; }
.semana-hoy h2 { font-size: var(--t-h3); margin: 0; }
.semana-hoy p { margin: 2px 0 0; color: var(--tinta-2); font-size: var(--t-small); }
.pasos-hoy { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pasos-hoy a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 14px; color: var(--tinta); text-decoration: none; font-weight: 600; }
.pasos-hoy a:hover { background: var(--superficie-2); }
.pasos-hoy .punto { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; flex: none; color: #fff; }
.pasos-hoy .punto svg { width: 15px; height: 15px; stroke-width: 3; }
.pasos-hoy li.hecho a { color: var(--tinta-3); }
.pasos-hoy li.hecho .punto { background: var(--s11-exito); border-color: var(--s11-exito); }
.pasos-hoy li.actual a { background: var(--superficie-2); }
.pasos-hoy li.actual .punto { border-color: var(--s11-violeta); background: var(--verde-claro); }
.pasos-hoy .txt { flex: 1; min-width: 0; }
.pasos-hoy .ir { color: var(--tinta-3); width: 18px; height: 18px; }
.ver-mas { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-weight: 700; text-decoration: none; }

.clase-hoy .cuando { margin: 2px 0 0; color: var(--tinta-2); font-weight: 600; font-size: var(--t-small); }
.clase-hoy h3 { font-size: var(--t-h3); margin: .35rem 0 0; }
.cuenta { display: flex; gap: 6px; margin: 12px 0; }
.cuenta span { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 12px; padding: .4rem .65rem; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--display); font-size: 1.1rem; }
.cuenta small { font-weight: 600; color: var(--tinta-3); font-size: .75rem; margin-left: 2px; }
.rapida { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta); }
.rapida .caja-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(140deg, var(--s11-lima), #65D65E); color: #10240A; flex: none; }
.rapida .caja-ico svg { width: 24px; height: 24px; }
.rapida h3 { font-size: var(--t-h3); margin: 0; }
.rapida p { margin: 2px 0 0; color: var(--tinta-2); font-size: var(--t-small); }
.rapida .flecha { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-2); color: var(--s11-violeta); flex: none; }
.areas-hoy { display: flex; flex-wrap: wrap; gap: 8px; }
.areas-hoy a { min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; border-radius: 999px; padding: .45rem .9rem; font-weight: 700; font-size: var(--t-small); color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, #fff); border: 1px solid color-mix(in srgb, var(--pc) 28%, #fff); }
.areas-hoy a svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ RUTA (12 estaciones) */
.ruta-cab { margin-bottom: 18px; }
.ruta-cab h1 { font-size: var(--t-display); margin: .2rem 0 .3rem; font-weight: 800; letter-spacing: -.03em; }
.ruta-cab p { color: var(--tinta-2); margin: 0; max-width: 60ch; }
.ruta-mapa { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 760px; }
.ruta-mapa li { position: relative; }
.ruta-mapa li::before { content: ""; position: absolute; left: 39px; top: -6px; bottom: -6px; width: 4px; border-radius: 4px; background: var(--linea); z-index: 0; }
.ruta-mapa li:first-child::before { top: 40px; }
.ruta-mapa li:last-child::before { bottom: 40px; }
.ruta-mapa li.hecha::before { background: var(--s11-exito); }
.ruta-mapa a { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 8px 14px 8px 4px; border-radius: 22px; text-decoration: none; color: var(--tinta); }
.ruta-mapa a:hover { background: var(--superficie); box-shadow: var(--sombra-2); }
.ruta-mapa .ilu { width: 80px; height: 80px; border-radius: 26px; background: var(--superficie); border: 2px solid var(--linea); display: grid; place-items: center; flex: none; box-shadow: var(--sombra-2); }
.ruta-mapa .ilu svg { width: 58px; height: 58px; }
.ruta-mapa li.hecha .ilu { border-color: var(--s11-exito); }
.ruta-mapa li.actual .ilu { border-color: var(--s11-violeta); box-shadow: 0 0 0 6px color-mix(in srgb, var(--s11-violeta) 20%, transparent), var(--sombra-2); }
.ruta-mapa .txt { flex: 1; min-width: 0; }
.ruta-mapa .lugar { font-size: var(--t-caption); letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--s11-violeta); }
.ruta-mapa h2 { font-size: var(--t-h3); margin: .15rem 0 .2rem; }
.ruta-mapa .sub { color: var(--tinta-2); font-size: var(--t-small); }
.ruta-mapa .marca-est { flex: none; font-size: var(--t-small); font-weight: 800; border-radius: 999px; padding: .35rem .8rem; }
.ruta-mapa li.hecha .marca-est { background: #DCFCE7; color: #14532D; }
.ruta-mapa li.actual .marca-est { background: var(--verde-claro); color: #2C1590; }
.ruta-mapa li.prox .marca-est { background: var(--linea-2); color: var(--tinta-2); }
.barra-mini { height: 6px; border-radius: 6px; background: var(--linea-2); overflow: hidden; margin-top: 8px; max-width: 220px; }
.barra-mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--s11-violeta), var(--s11-cian)); border-radius: 6px; }

/* ------------------------------------------------------------ SEMANA */
.sem-cab { position: relative; overflow: hidden; border-radius: 28px; padding: 24px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(120% 100% at 100% 0%, rgba(0, 184, 217, .5) 0%, transparent 55%), linear-gradient(150deg, #5B34F2 0%, #24106B 100%); isolation: isolate; }
.sem-cab .lugar { font-size: var(--t-caption); letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: #E6E0FF; }
.sem-cab h1 { color: #fff; font-size: var(--t-h1); margin: .3rem 0 .4rem; max-width: 22ch; font-weight: 800; }
.sem-cab p { color: #F1EEFF; margin: 0; max-width: 56ch; }
.sem-cab .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sem-cab .pill { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: .3rem .8rem; font-size: var(--t-small); font-weight: 700; }
.sem-cab .ilus { position: absolute; right: 8px; bottom: -4px; width: 180px; z-index: -1; opacity: .9; }
@media (max-width: 599px) { .sem-cab .ilus { width: 120px; opacity: .5; } }
.paso-sem { margin: 0 0 22px; }
.paso-sem > h2 { display: flex; align-items: center; gap: .6rem; font-size: var(--t-h2); margin: 0 0 12px; }
.paso-sem > h2 .num { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem; color: #fff; background: var(--s11-violeta); flex: none; }
.tabs-area { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: thin; }
.tabs-area button { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .45rem 1rem; font: inherit; font-weight: 700; font-size: var(--t-small); cursor: pointer;
  color: var(--pc); background: color-mix(in srgb, var(--pc) 9%, #fff); border: 1.5px solid color-mix(in srgb, var(--pc) 28%, #fff); }
.tabs-area button svg { width: 18px; height: 18px; }
.tabs-area button[aria-selected="true"] { background: var(--pc); color: #fff; border-color: var(--pc); }
.panel-area[hidden] { display: none; }
.panel-area .obj { color: var(--tinta-2); margin: 0 0 10px; }
.sem-cols { gap: 22px; }
details.plegable { background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; padding: 0; box-shadow: var(--sombra-2); margin-bottom: 12px; }
details.plegable > summary { cursor: pointer; list-style: none; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-weight: 700; font-family: var(--display); font-size: var(--t-h3); }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2.5px solid var(--tinta-3); border-bottom: 2.5px solid var(--tinta-3); transform: rotate(45deg); transition: transform .2s; flex: none; }
details.plegable[open] > summary::after { transform: rotate(-135deg); }
details.plegable > .cuerpo { padding: 0 18px 18px; }
details.plegable .bolita { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-2); color: var(--s11-violeta); font-size: .95rem; flex: none; }
details.plegable.actual > summary .bolita { background: var(--s11-violeta); color: #fff; }
details.plegable summary small { font-family: var(--sans); font-weight: 600; color: var(--tinta-3); font-size: var(--t-small); }

/* ------------------------------------------------------------ YO */
.yo-cab { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.yo-cab .ini { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: #fff; background: linear-gradient(140deg, var(--s11-violeta), var(--s11-cian)); flex: none; }
.yo-cab h1 { font-size: var(--t-h1); margin: 0; }
.yo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1120px; }
.lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lista-enlaces a, .lista-enlaces button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 14px; color: var(--tinta); text-decoration: none; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; }
.lista-enlaces a:hover, .lista-enlaces button:hover { background: var(--superficie-2); }
.lista-enlaces svg { width: 22px; height: 22px; color: var(--s11-violeta); flex: none; }
.lista-enlaces .der { margin-left: auto; color: var(--tinta-3); font-size: var(--t-small); }
.dominio { display: grid; gap: 10px; }
.dominio .fila { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 10px; align-items: center; }
.dominio .nom { font-weight: 700; color: var(--pc); font-size: var(--t-small); }
.dominio .barra { height: 10px; border-radius: 10px; background: var(--linea-2); overflow: hidden; }
.dominio .barra i { display: block; height: 100%; border-radius: 10px; background: var(--pc); }
.dominio .niv { font-size: var(--t-small); font-weight: 700; color: var(--tinta-2); min-width: 6.5rem; text-align: right; }
@media (max-width: 520px) { .dominio .fila { grid-template-columns: 1fr auto; } .dominio .barra { grid-column: 1 / -1; grid-row: 2; } }
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.letra-ctl { display: inline-flex; gap: 6px; }
.letra-ctl button { min-width: 48px; min-height: 44px; border-radius: 12px; border: 1.5px solid var(--linea); background: var(--superficie); font: inherit; font-weight: 800; cursor: pointer; }

/* ------------------------------------------------------------ subnavegación (Practicar, Clases) */
.subnav { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 18px; padding-bottom: 4px; }
#vista > .subnav { max-width: 1180px; margin: 0 auto; padding: clamp(14px, 2.4vw, 26px) var(--pad) 0; }
#vista > .subnav + .vista { padding-top: 16px; }
.vista { padding-bottom: 40px; }
.subnav a { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: var(--t-small); color: var(--tinta-2); background: var(--superficie); border: 1.5px solid var(--linea); }
.subnav a[aria-current="page"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ------------------------------------------------------------ CLASES */
.clase-dest { border: 2px solid color-mix(in srgb, var(--s11-violeta) 40%, var(--linea)); }

/* ------------------------------------------------------------ INGRESO (blanco + marca de agua, regla vigente) */
.ingreso h1.ing-titulo { font-family: var(--display); font-size: 1.9rem; line-height: 1.08; margin: .2rem 0 .3rem; letter-spacing: -.02em; color: var(--tinta); }
.ingreso .btn-primario { min-height: 54px; border-radius: 16px; font-size: 1.05rem; }
.ing-otros { margin: 14px 0 0; text-align: center; }
.ing-otros > button { background: none; border: 0; font: inherit; font-weight: 700; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; cursor: pointer; }
.ingreso-pie a { display: inline-flex; align-items: center; min-height: 44px; }
.ing-pie2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
.ing-roles[hidden] { display: none !important; }

/* ------------------------------------------------------------ experiencias: sin insignias internas */
.ovx-demo { display: none !important; }
/* Colores de área de las experiencias = los del aula (texto ≥ 4,5:1 sobre su tinte; blanco sobre el acento ≥ 5,2:1) */
.ovx[data-area="MAT"] { --acento: #B83C0A; --acento-texto: #8A2D07; --acento-claro: #FFEDE3; --acento-medio: #FBC9AE; }
.ovx[data-area="LC"]  { --acento: #1D4ED8; --acento-texto: #1A3FA8; --acento-claro: #E6EDFF; --acento-medio: #BCCCF7; }
.ovx[data-area="SC"]  { --acento: #BE123C; --acento-texto: #9F1239; --acento-claro: #FFE4EA; --acento-medio: #F8B8C7; }
.ovx[data-area="CN"]  { --acento: #047857; --acento-texto: #065F46; --acento-claro: #DDF6EC; --acento-medio: #A7E3CB; }
.ovx[data-area="ING"] { --acento: #A21CAF; --acento-texto: #86198F; --acento-claro: #FBE8FD; --acento-medio: #EDB9F2; }
.ovx .ovx-boton[data-comenzar] { background: var(--acento) !important; color: #fff !important; }
.ovx button.ir { min-height: 32px; min-width: 48px; }
/* Grabaciones compactas */
.grab-card h3 { font-size: var(--t-h3); margin: .5rem 0 .3rem; }
.grab-card details { margin: .4rem 0 .6rem; }
.grab-card details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--s11-violeta); }

/* ------------------------------------------------------------ movimiento reducido */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }