/* Neutral course player, white label. Palette from ESTANDAR-CURSOS.md section 7.2. */
/* Atkinson Hyperlegible (Braille Institute), SIL Open Font License 1.1: see fonts/LICENSE-Atkinson-Hyperlegible-OFL.txt */
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --tinta: #22313A; --suave: #4C5A63; --petroleo: #1F5F7A; --petroleo-claro: #EAF2F6;
  --ambar: #E8962A; --ambar-claro: #FBF0DE; --verde: #2E8B62; --rojo: #C8412F;
  --linea: #D2DBE0; --fondo: #F4F7F9; --blanco: #FFFFFF;
  --verde-claro: #E3F3EB; --rojo-claro: #FBE9E6;
  --fuente: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fuente); font-size: 1.125rem; line-height: 1.55;
  min-height: 100vh; display: flex; flex-direction: column;
}
.salto {
  position: absolute; left: .5rem; top: -4rem; background: var(--tinta); color: var(--blanco);
  padding: .6rem 1rem; border-radius: 8px; z-index: 20;
}
.salto:focus { top: .5rem; }
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Header */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; max-width: 1040px; margin: 0 auto; }
.unidad-titulo { margin: 0; flex: 1; font-size: .95rem; font-weight: 700; color: var(--suave); min-width: 0; }
.contador { margin: 0; font-size: .9rem; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.progreso { height: 6px; background: var(--linea); }
.progreso span { display: block; height: 100%; width: 0; background: var(--petroleo); transition: width .3s ease; }
.banda-prototipo {
  background: var(--ambar-claro); color: var(--tinta); text-align: center; font-size: .85rem;
  padding: .3rem 1rem; border-bottom: 1px solid var(--ambar);
}

/* Buttons */
button, select { font: inherit; color: inherit; }
.boton {
  min-height: 44px; padding: .55rem 1.1rem; border-radius: 10px; border: 2px solid var(--petroleo);
  background: var(--blanco); color: var(--petroleo); font-weight: 700; cursor: pointer;
}
.boton:hover:not(:disabled) { background: var(--petroleo-claro); }
.boton.principal { background: var(--petroleo); color: var(--blanco); }
.boton.principal:hover:not(:disabled) { background: #174A5F; }
.boton:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; }

/* Index */
.indice { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.indice[hidden] { display: none; }
.indice ol { max-width: 1040px; margin: 0 auto; padding: .6rem 1rem 1rem 2.4rem; display: grid; gap: .15rem; }
.indice button {
  background: none; border: 0; padding: .35rem .4rem; cursor: pointer; text-align: left; border-radius: 6px; width: 100%;
}
.indice button:hover { background: var(--petroleo-claro); }
.indice button[aria-current="step"] { font-weight: 700; color: var(--petroleo); }
.indice .visto::after { content: " ✓"; color: var(--verde); font-weight: 700; }

/* Screens */
main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 1.25rem 1rem 1rem; }
main:focus { outline: none; }
.pantalla[hidden] { display: none; }
.kicker { margin: 0 0 .25rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--petroleo); }
h1 { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.2; }
h1:focus { outline: none; }
.cuerpo { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
@media (min-width: 860px) {
  .cuerpo.con-visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.texto p { margin: 0 0 .85rem; }
.texto ul { padding-left: 1.2rem; margin: 0 0 .85rem; }
.texto li { margin-bottom: .4rem; }
.texto ul.numerada { list-style: none; padding-left: 0; }
figure.visual { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: .5rem; }
figure.visual svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.llamada { border-left: 6px solid var(--petroleo); background: var(--petroleo-claro); border-radius: 0 10px 10px 0; padding: .7rem 1rem; margin-top: 1rem; }
.llamada.ojo { border-color: var(--ambar); background: var(--ambar-claro); }
.llamada.recuerda { border-color: var(--verde); background: var(--verde-claro); }
.llamada strong { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.objetivos { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: .8rem 1.1rem; }
.objetivos h2 { font-size: 1rem; margin: 0 0 .4rem; }
.duracion { color: var(--suave); font-size: .95rem; }
.glosario-lista { color: var(--suave); font-size: .95rem; }

/* Interactions */
.instruccion { font-weight: 700; margin: 0 0 .8rem; }
.tarjetas { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tarjeta {
  width: 100%; text-align: left; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 14px;
  padding: .8rem; cursor: pointer; min-height: 11rem; display: flex; flex-direction: column; gap: .5rem;
}
.tarjeta:hover { background: var(--petroleo-claro); }
.tarjeta[aria-expanded="true"] { background: var(--ambar-claro); }
.tarjeta .icono { width: 64px; height: 64px; flex: none; }
.tarjeta .titulo { font-weight: 700; font-size: 1.1rem; }
.tarjeta .dorso { font-size: .98rem; }
.tarjeta .dorso[hidden] { display: none; }
.tarjeta .pista { font-size: .85rem; color: var(--suave); }
.casos { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.caso { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: .8rem 1rem; }
.caso p { margin: 0 0 .5rem; }
.caso label { font-weight: 700; display: block; margin-bottom: .25rem; font-size: .95rem; }
select { min-height: 44px; border: 2px solid var(--tinta); border-radius: 10px; padding: .4rem .6rem; background: var(--blanco); width: 100%; max-width: 22rem; }
.caso.bien { border-color: var(--verde); background: var(--verde-claro); }
.caso.mal { border-color: var(--rojo); background: var(--rojo-claro); }
.fb { margin: .5rem 0 0; font-size: .98rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; align-items: center; }
.estado-inter { font-weight: 700; }
.opciones { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.opcion {
  width: 100%; text-align: left; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px;
  padding: .7rem 1rem; cursor: pointer; min-height: 44px;
}
.opcion:hover { background: var(--petroleo-claro); }
.opcion[aria-pressed="true"] { background: var(--petroleo-claro); border-color: var(--petroleo); }
.resultado-esc { border-radius: 12px; padding: .8rem 1rem; border: 2px solid var(--linea); background: var(--blanco); }
.resultado-esc.bien { border-color: var(--verde); background: var(--verde-claro); }
.resultado-esc.parcial { border-color: var(--ambar); background: var(--ambar-claro); }
.resultado-esc.mal { border-color: var(--rojo); background: var(--rojo-claro); }
.resultado-esc strong { display: block; }
fieldset.pregunta { border: 0; padding: 0; margin: 0; }
fieldset.pregunta legend { font-size: 1.25rem; font-weight: 700; margin-bottom: .8rem; padding: 0; }
.radio { display: flex; gap: .7rem; align-items: flex-start; background: var(--blanco); border: 2px solid var(--linea); border-radius: 12px; padding: .65rem .9rem; margin-bottom: .55rem; cursor: pointer; }
.radio input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--petroleo); flex: none; }
.radio.bien { border-color: var(--verde); background: var(--verde-claro); }
.radio.mal { border-color: var(--rojo); background: var(--rojo-claro); }
.nota-grande { font-size: 2.4rem; font-weight: 700; margin: .2rem 0; }
.resultado-final.supera { border-left: 6px solid var(--verde); }
.resultado-final.no-supera { border-left: 6px solid var(--rojo); }
.resultado-final { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 1rem 1.2rem; }

/* More interactions */
.acordeon { display: grid; gap: .5rem; }
.ac-titulo { margin: 0; font-size: 1rem; }
.ac-boton {
  width: 100%; text-align: left; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px;
  padding: .7rem 1rem; cursor: pointer; font-weight: 700; min-height: 44px; display: flex; justify-content: space-between; gap: .5rem;
}
.ac-boton::after { content: "+"; font-size: 1.3rem; line-height: 1; }
.ac-boton[aria-expanded="true"] { background: var(--petroleo-claro); border-color: var(--petroleo); }
.ac-boton[aria-expanded="true"]::after { content: "–"; }
.ac-region { border-left: 6px solid var(--petroleo); background: var(--blanco); padding: .6rem 1rem; margin: 0 0 .3rem; border-radius: 0 10px 10px 0; }
.ac-region[hidden], .panel-pestana[hidden] { display: none; }
.pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.pestana { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 10px; padding: .5rem 1rem; cursor: pointer; font-weight: 700; min-height: 44px; }
.pestana[aria-selected="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--blanco); }
.panel-pestana { background: var(--blanco); border: 2px solid var(--petroleo); border-radius: 12px; padding: .8rem 1rem; }
fieldset.vf { border: 1px solid var(--linea); }
fieldset.vf legend { font-weight: 700; padding: 0 .3rem; }
fieldset.vf.bien { border-color: var(--verde); background: var(--verde-claro); }
fieldset.vf.mal { border-color: var(--rojo); background: var(--rojo-claro); }
.orden { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 .6rem; display: grid; gap: .5rem; }
.orden li {
  counter-increment: paso; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  background: var(--blanco); border: 2px solid var(--linea); border-radius: 12px; padding: .5rem .8rem;
}
.orden li::before { content: counter(paso); font-weight: 700; color: var(--petroleo); min-width: 1.4rem; }
.orden-texto { flex: 1; }
.orden-botones { display: flex; gap: .3rem; }
.boton.mini { min-width: 44px; padding: .3rem .5rem; }
.hueco { min-height: 40px; border: 2px solid var(--tinta); border-radius: 8px; padding: .2rem .5rem; font: inherit; background: var(--blanco); }
.caso.bien .hueco { border-color: var(--verde); }
.caso.mal .hueco { border-color: var(--rojo); }

/* Footer navigation */
.pie { background: var(--blanco); border-top: 1px solid var(--linea); position: sticky; bottom: 0; }
.pie-fila { display: flex; justify-content: space-between; gap: .75rem; max-width: 1040px; margin: 0 auto; padding: .6rem 1rem; }

@media (max-width: 520px) {
  body { font-size: 1.0625rem; }
  h1 { font-size: 1.45rem; }
  .unidad-titulo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}