/* Los colores salen de las diapositivas de Cindy: la banda de menta de cada
   lámina, el verde pizarra de sus títulos y el círculo dorado del nivel. */
:root{
  --menta:#B5EEE3;
  --menta-honda:#8AD5C6;
  --menta-palida:#E6F6F3;
  --pizarra:#27403B;
  --pizarra-suave:#5E7A73;
  --oro:#F3C818;
  --oro-tinta:#3D3000;
  --cielo:#BFDFEA;
  --azul:#2F6FBF;
  --rojo:#CF2B22;
  --papel:#FFFFFF;
  --nube:#F4FAF8;
  --borde:#CFE4DF;
  --radio:10px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--nube);
  color:var(--pizarra);
  font:16px/1.6 Karla, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap.estrecho{max-width:600px}
div.hueco{height:90px}
a{color:var(--azul)}

/* encabezado: la misma banda de menta que abre cada lámina */
header{background:var(--menta);box-shadow:inset 0 -3px 0 var(--menta-honda)}
.barra{display:flex;align-items:baseline;gap:18px;padding:18px 28px}
.marca{font-family:Fraunces,serif;font-size:23px;font-weight:600;letter-spacing:-.01em;color:var(--pizarra);text-decoration:none}
.marca span{font-style:italic;font-weight:400;color:#3F615A}
nav{margin-left:auto;display:flex;align-items:baseline;gap:22px}
nav a{color:#33544D;text-decoration:none;padding-bottom:3px;font-weight:500}
nav a:hover{color:var(--pizarra);box-shadow:0 2px 0 var(--pizarra)}
nav a[aria-current]{color:var(--pizarra);box-shadow:0 2px 0 var(--oro)}
nav form{margin:0}
.enlace{border:0;background:none;font:500 16px Karla,sans-serif;color:#33544D;cursor:pointer;padding:0}
.enlace:hover{color:var(--rojo)}

/* títulos */
.titulo{padding:54px 0 32px;max-width:62ch}
.titulo.compacto{padding:36px 0 20px}
h1{font-family:Fraunces,serif;font-weight:600;font-size:clamp(34px,5.2vw,56px);line-height:1.05;margin:0 0 14px;letter-spacing:-.022em}
h1 em{font-style:italic;font-weight:400;color:#35635A}
.titulo p{margin:0;color:var(--pizarra-suave);max-width:54ch}

/* el círculo dorado del nivel: la marca que Cindy usa en sus portadas */
.nivel{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--pizarra-suave);white-space:nowrap}
.nivel b{
  display:grid;place-items:center;flex:none;
  width:31px;height:31px;border-radius:50%;
  background:var(--oro);color:var(--oro-tinta);
  font:700 13px/1 Karla,sans-serif;
}
.nivel.suelto{font-size:15px}
/* Los datos de la lección van separados por aire, no encadenados con puntos. */
.ficha-leccion{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.ficha-leccion > span{color:var(--pizarra-suave);font-size:14px}

/* formulario de entrada */
.tarjeta{border:1px solid var(--borde);background:var(--papel);border-radius:var(--radio);padding:32px;box-shadow:0 1px 0 var(--borde)}
.tarjeta .btn{width:100%;margin-top:10px}
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo.grande{margin-bottom:20px}
.campo > span{font-size:13px;color:var(--pizarra-suave);font-weight:500}
.campo input, .campo select{
  font:400 15px/1.4 Karla,sans-serif;color:var(--pizarra);
  border:1px solid var(--borde);background:var(--papel);
  padding:10px 12px;border-radius:7px;width:100%;
}
.campo.grande input{font-size:17px}
.campo input:hover, .campo select:hover{border-color:var(--menta-honda)}
.campo input:focus, .campo select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(47,111,191,.16)}
.pista{font-size:14px;color:var(--pizarra-suave);margin:20px 0 0;padding:14px 16px;background:var(--menta-palida);border-radius:8px}
.pista strong{color:var(--pizarra)}
.error{color:var(--rojo);margin:0 0 18px;padding:12px 14px;background:#FDECEA;border-radius:8px;font-size:15px}

/* botones */
.btn{
  font:600 15px/1 Karla,sans-serif;
  border:1px solid var(--pizarra);background:var(--pizarra);color:#fff;
  padding:13px 22px;border-radius:8px;cursor:pointer;
}
.btn:hover{background:#16302B;border-color:#16302B}
.btn:disabled{opacity:.5;cursor:progress}
.btn.hueco{background:transparent;color:var(--pizarra)}
.btn.hueco:hover{background:var(--menta-palida);color:var(--pizarra);border-color:var(--pizarra)}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible{outline:3px solid var(--azul);outline-offset:2px}

/* zona de carga */
.carga{border:2px dashed var(--menta-honda);border-radius:14px;background:var(--papel);padding:50px 32px;text-align:center;transition:background .15s ease,border-color .15s ease}
.carga.sobre{background:var(--menta-palida);border-color:var(--pizarra);border-style:solid}
.carga h2{font-family:Fraunces,serif;font-weight:600;font-size:27px;margin:0 0 6px}
.carga p{margin:0 0 22px;color:var(--pizarra-suave)}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* listas */
.fila-titulo{display:flex;align-items:baseline;gap:14px;margin:46px 0 14px}
.fila-titulo h2{font-family:Fraunces,serif;font-weight:600;font-size:24px;margin:0}
.cuenta{color:var(--pizarra-suave);font-size:14px}
.ficha{
  display:grid;grid-template-columns:1.6fr .9fr .9fr .7fr auto;gap:18px;align-items:end;
  padding:20px;background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);margin-bottom:10px;
}
.ficha.guardada{align-items:center;border-left:5px solid var(--menta)}
.ficha form{margin:0}
.nombre{font-family:Fraunces,serif;font-weight:600;font-size:19px;color:var(--pizarra);text-decoration:none}
.nombre:hover{color:var(--azul)}
.dato{color:var(--pizarra-suave);font-size:14px}
.estado{display:inline-block;font-size:13px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--menta);color:#1F4F44}
.estado.borrador{background:#EFEFEA;color:#6B6656}
.archivo{font-size:13px;color:var(--pizarra-suave);margin:6px 0 0}
.quitar{border:0;background:transparent;color:var(--pizarra-suave);font:500 14px Karla,sans-serif;cursor:pointer;padding:8px 0;text-decoration:underline}
.quitar:hover{color:var(--rojo)}
.nueva{animation:entra .32s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vacio{background:var(--menta-palida);border:1px dashed var(--menta-honda);border-radius:var(--radio);padding:30px;color:var(--pizarra-suave)}
.pie-accion{display:flex;align-items:center;gap:16px;margin:26px 0 0;flex-wrap:wrap}
.pie-accion p{margin:0;color:var(--pizarra-suave);font-size:14px}

/* panel del alumno: cada lección repite la lámina de Cindy, banda arriba */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.leccion{
  background:var(--papel);border:1px solid var(--borde);border-radius:var(--radio);
  text-decoration:none;color:var(--pizarra);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .15s ease,transform .15s ease;
}
.leccion:hover{border-color:var(--menta-honda);transform:translateY(-2px)}
.leccion .cinta{background:var(--menta);padding:11px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.leccion .cinta .nivel{color:#2A544B}
.leccion .cuerpo{padding:18px 20px 20px}
.leccion h2{font-family:Fraunces,serif;font-weight:600;font-size:21px;margin:0 0 6px;line-height:1.22}
.leccion p{margin:0 0 14px;color:var(--pizarra-suave)}
.leccion .archivo{margin:0}

/* visor */
body.visor{background:var(--menta-palida)}
/* Una sola franja para todo el cromo del visor: título, nivel y controles en la
   misma fila. Antes el h1 de 56px, su bloque .titulo y una barra aparte se
   comían ~380px de alto (42% de una pantalla de 900) antes de la primera hoja. */
.visor-cabecera{
  position:sticky;top:0;z-index:5;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;
  padding:10px 0;margin-bottom:16px;
  background:var(--menta-palida);box-shadow:0 1px 0 var(--borde);
}
.visor-id{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;min-width:0}
body.visor h1{
  font-size:20px;line-height:1.25;margin:0;letter-spacing:-.012em;
  max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.visor-barra{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-left:auto}
.visor-barra[hidden]{display:none}
.modos{display:inline-flex;border:1px solid var(--borde);border-radius:8px;background:var(--papel);overflow:hidden}
.modo{border:0;background:transparent;font:600 14px Karla,sans-serif;color:var(--pizarra-suave);padding:9px 15px;cursor:pointer}
.modo + .modo{border-left:1px solid var(--borde)}
.modo:hover{color:var(--pizarra)}
.modo[aria-pressed=true]{background:var(--pizarra);color:#fff}
.paso{display:flex;align-items:center;gap:12px;margin-left:auto}
.paso[hidden]{display:none}
.posicion{color:var(--pizarra-suave);font-size:14px;min-width:13ch;text-align:center}
.btn.chico{padding:9px 15px;font-size:14px;background:var(--papel);color:var(--pizarra);border-color:var(--borde)}
.btn.chico:hover{background:var(--pizarra);color:#fff;border-color:var(--pizarra)}
.btn.chico:disabled{cursor:default;background:var(--papel);color:var(--pizarra-suave);border-color:var(--borde)}
#paginas{display:flex;flex-direction:column;align-items:center;gap:20px}
.hoja{scroll-margin-top:68px}
#paginas.por-pagina .hoja{display:none}
#paginas.por-pagina .hoja.activa{display:block}
/* El visor no es una columna de texto: la hoja manda, así que se le da más
   ancho que al resto del portal. */
body.visor .wrap{max-width:1400px}

#paginas canvas{
  background:#fff;
  border:1px solid var(--borde);border-radius:6px;
  box-shadow:0 2px 10px rgba(39,64,59,.09);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
/* Todo seguido: la hoja llena el ancho y se lee bajando. */
#paginas canvas{width:var(--ancho-hoja,100%);max-width:100%;height:auto}
/* Página a página: la hoja entera cabe en pantalla, sin scroll. Es lo que
   distingue este modo del otro; antes los dos dibujaban al mismo tamaño. */
#paginas.por-pagina canvas{
  width:auto;height:auto;
  max-width:100%;max-height:calc(100vh - 96px);
}
.cargando{color:var(--pizarra-suave)}
@media print{ body.visor main{display:none} }

/* avisos */
.aviso{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);background:var(--pizarra);color:#fff;padding:13px 20px;border-radius:8px;box-shadow:0 6px 20px rgba(39,64,59,.22);opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;max-width:min(560px,88vw)}
.aviso.visible{opacity:1;transform:translate(-50%,0)}

@media (max-width:820px){
  .ficha{grid-template-columns:1fr 1fr;align-items:start}
  .ficha .campo:first-child, .ficha.guardada > div:first-child{grid-column:1 / -1}
  nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }

/* ---------- progreso de lectura ---------- */
/* <progress> en vez de un div con el ancho en línea: la CSP no permite estilo
   suelto en el HTML, y de paso el lector de pantalla lo anuncia solo. */
progress{
  appearance:none;-webkit-appearance:none;
  width:100%;height:7px;border:0;display:block;
  background:var(--menta-palida);border-radius:999px;overflow:hidden;
}
progress::-webkit-progress-bar{background:var(--menta-palida)}
progress::-webkit-progress-value{background:var(--menta-honda);border-radius:999px}
progress::-moz-progress-bar{background:var(--menta-honda)}
.avance{display:flex;flex-direction:column;gap:7px}
.leccion .avance .archivo{margin:0}
.listo{
  margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.02em;
  background:var(--oro);color:var(--oro-tinta);padding:3px 10px;border-radius:999px;
}

/* quién ha leído qué, en el panel de Cindy */
.lectores{margin:8px 0 0;font-size:14px}
.lectores summary{cursor:pointer;color:var(--pizarra-suave);width:fit-content}
.lectores summary:hover{color:var(--pizarra)}
.lectores ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;max-width:520px}
.lectores li{display:grid;grid-template-columns:1fr 90px auto;align-items:center;gap:12px}
.lectores li b{font-weight:500;color:var(--pizarra-suave);font-size:13px;white-space:nowrap}
.lectores li b.sin{color:#A8827F}
.lectores progress{height:6px}

/* ---------- alumnos y seguridad ---------- */
.rejilla-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.rejilla-campos .campo{margin:0}
.ficha.alumno{
  display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr auto auto;
  gap:14px;align-items:end;
}
.ficha.alumno .campo{margin:0}
.ficha.alumno .campo span{font-size:12px}
.ficha.alumno .nombre{font-weight:700}
select{
  font:16px Karla,sans-serif;color:var(--pizarra);background:var(--papel);
  border:1px solid var(--borde);padding:10px 12px;border-radius:7px;width:100%;
}
.clave-totp{margin:16px 0}
.clave-totp code{
  display:block;font:700 21px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-align:center;word-break:break-all;
  background:var(--menta-palida);border:1px dashed var(--menta-honda);
  border-radius:var(--radio);padding:16px;
}
code.uri{word-break:break-all;font-size:12px;color:var(--pizarra-suave)}
.codigos{
  list-style:none;margin:18px 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
}
.codigos code{
  display:block;text-align:center;font:600 16px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;background:var(--nube);border:1px solid var(--borde);
  border-radius:8px;padding:11px 8px;
}
.tarjeta h2{font-family:Fraunces,serif;font-weight:600;font-size:23px;margin:0 0 12px}

@media (max-width:760px){
  .ficha.alumno{grid-template-columns:1fr 1fr}
  .lectores li{grid-template-columns:1fr auto}
  .lectores li progress{display:none}
}

/* ---------- portada pública ---------- */
/* Lo que ve quien llega sin cuenta. Misma paleta y mismas fuentes que el
   portal; lo único nuevo es la escalera de niveles del hero, sacada del
   círculo dorado de las portadas de Cindy. */
body.portada{background:var(--papel)}
.hero{background:var(--papel);border-bottom:1px solid var(--borde);overflow-x:clip}
.hero-cuerpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:72px 28px 64px}
.hero-texto h1{font-size:clamp(40px,6.4vw,76px);margin-bottom:22px;max-width:11ch}
.hero-texto p{margin:0;color:var(--pizarra-suave);font-size:19px;max-width:40ch}
.hero-texto p.hero-en{font-size:15px;margin-top:12px;color:#7A9089}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.acciones .btn{text-decoration:none;display:inline-block}

/* La escalera: cinco círculos que suben y crecen de A1 a C1. */
.escalera{list-style:none;margin:0;padding:0 0 28px;display:flex;align-items:flex-end;justify-content:flex-end;gap:clamp(8px,2vw,22px)}
.escalon{display:flex;flex-direction:column;align-items:center;gap:10px;animation:sube .6s cubic-bezier(.2,.7,.2,1) backwards}
.escalon b{
  display:grid;place-items:center;border-radius:50%;
  background:var(--oro);color:var(--oro-tinta);
  font:700 var(--letra,15px)/1 Karla,sans-serif;
  width:var(--tamano);height:var(--tamano);
  box-shadow:inset 0 -3px 0 rgba(61,48,0,.14);
}
.escalon span{font-size:13px;color:var(--pizarra-suave)}
.escalon:nth-child(1){--tamano:46px;--letra:14px;animation-delay:.05s}
.escalon:nth-child(2){--tamano:60px;--letra:16px;animation-delay:.15s;padding-bottom:18px}
.escalon:nth-child(3){--tamano:76px;--letra:19px;animation-delay:.25s;padding-bottom:36px}
.escalon:nth-child(4){--tamano:96px;--letra:23px;animation-delay:.35s;padding-bottom:54px}
.escalon:nth-child(5){--tamano:120px;--letra:28px;animation-delay:.45s;padding-bottom:72px}
@keyframes sube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* secciones */
.bloque{padding:64px 28px}
.bloque > h2, .material h2{font-family:Fraunces,serif;font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.018em;margin:0 0 14px}
.bloque .intro{margin:0 0 30px;color:var(--pizarra-suave);max-width:54ch}
.bloque h3{font-family:Fraunces,serif;font-weight:600;font-size:22px;margin:0 0 8px;line-height:1.2}
.bloque p{margin:0;color:var(--pizarra-suave)}
.tres{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.tres li{padding-top:18px;border-top:3px solid var(--menta)}

.niveles{list-style:none;margin:0;padding:0;max-width:640px}
.niveles li{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--borde)}
.niveles li:first-child{border-top:1px solid var(--borde)}
.niveles .nivel{font-size:15px;font-weight:500;color:var(--pizarra)}
.niveles p{margin:0}

.franja{background:var(--menta-palida)}
.material{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:56px;align-items:center}
.material p{max-width:48ch}
.material p + p{margin-top:16px}
.leccion.muestra{box-shadow:0 10px 30px rgba(39,64,59,.10);transform:rotate(-1.2deg)}
.leccion.muestra:hover{transform:rotate(-1.2deg)}

.pasos{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px;max-width:640px}
.pasos li{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.pasos b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pizarra);color:#fff;font:700 17px/1 Karla,sans-serif}
.pasos h3{font-size:20px;margin-bottom:4px}

.pie{border-top:1px solid var(--borde);padding:28px 0;margin-top:20px}
.pie .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.pie .marca{font-size:19px}
.pie a{color:var(--pizarra-suave)}

@media (max-width:860px){
  .hero-cuerpo{grid-template-columns:1fr;padding:48px 28px 40px;gap:28px}
  .escalera{justify-content:flex-start;padding-bottom:0;gap:10px}
  .escalon span{font-size:12px}
  .escalon:nth-child(1){--tamano:34px;--letra:12px}
  .escalon:nth-child(2){--tamano:44px;--letra:13px;padding-bottom:10px}
  .escalon:nth-child(3){--tamano:54px;--letra:15px;padding-bottom:20px}
  .escalon:nth-child(4){--tamano:66px;--letra:18px;padding-bottom:30px}
  .escalon:nth-child(5){--tamano:80px;--letra:21px;padding-bottom:40px}
  .tres{grid-template-columns:1fr;gap:22px}
  .material{grid-template-columns:1fr;gap:32px}
  .leccion.muestra{max-width:360px}
  .niveles li{grid-template-columns:1fr;gap:6px}
  .bloque{padding:44px 28px}
}
/* En pantallas estrechas la palabra de cada nivel no cabe bajo el círculo;
   la lista de niveles de abajo ya la dice. */
@media (max-width:480px){
  .escalon span{display:none}
  .escalon{gap:0}
  header .marca span{display:none}
}