/* ═══════════ PALMYTHO — registro amplio (opción B) ═══════════
   Capa que se carga DESPUÉS de estilos.css y reasienta el sistema:
   azul noche como superficie protagonista, violeta y amarillo de acento,
   sans redondeada en los títulos, todo en píldora y con radios grandes.

   Para volver al registro editorial: sacá el <link> de este archivo.
   El diseño original está intacto en estilos-editorial.css.            */

:root{
  /* La "arena" deja de ser un beige claro y pasa a ser el azul noche:
     es el mismo rol —la superficie del hero y de las bandas— con otro peso. */
  --arena:#1E2A5E; --arena-2:#141E46; --arena-cl:#2C3B78;
  --tinta:#141E46; --tinta-2:#1E2A5E;
  --crema:#FFF8E6; --crema-2:#FFFCF3;
  --blanco:#FFFFFF;
  --durazno:#FF7A59;
  --oro:#FFC93C;
  /* --bronce es el color de rótulos y numerales sobre fondo claro:
     el violeta da 6,7:1 sobre blanco, igual que el bronce daba 6,4:1. */
  --bronce:#5B3FD9;
  --azul:#5B3FD9; --azul-2:#4A31B8;
  --celeste:#A78BFA; --celeste-cl:#DED5FC;
  --texto:#1F2937; --texto-suave:#5B6478;
  /* Antes era texto oscuro sobre arena clara; ahora la arena es oscura. */
  --texto-arena:#E7E9F7;
  --error:#C0342B;

  --serif:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --sans:'Karla','Helvetica Neue',system-ui,sans-serif;

  --r-chico:14px; --r-medio:20px; --r-grande:28px;
}

/* El grano es del registro editorial: en B la superficie es lisa y luminosa */
body::after{display:none}
body{font-size:1.125rem;line-height:1.65}

/* ── Tipografía: la sans redondeada reemplaza al serif en versales ── */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:700;line-height:1.12;
  letter-spacing:0;text-transform:none}
h1{font-size:clamp(2.2rem,7vw,4.6rem)}
h2{font-size:clamp(1.7rem,4.4vw,3rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:0}
@media(max-width:520px){h1,h2{letter-spacing:0}}
p{max-width:60ch}

/* Los rótulos dejan el tracking de versalita editorial */
.rotulo{font-size:.82rem;letter-spacing:.14em;font-weight:700}
.rotulo--bronce{color:var(--bronce)}
.rotulo--oro{color:var(--oro)}

/* ── Botones: píldora, y el primario en amarillo con texto noche (10,5:1) ── */
.btn{border-radius:999px;font-family:var(--serif);font-size:1.05rem;font-weight:600;
  letter-spacing:0;text-transform:none;min-height:56px;padding:0 2rem;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s}
.btn--solido{background:var(--amarillo,#FFC93C);background:var(--oro);color:var(--tinta)}
.btn--solido:hover{background:var(--azul);color:#fff;letter-spacing:0;transform:translateY(-2px)}
.btn--filo{box-shadow:inset 0 0 0 2px currentColor;color:var(--azul-2)}
.btn--filo:hover{background:var(--azul);color:#fff;letter-spacing:0;transform:translateY(-2px)}
.btn--nav{min-height:46px;padding:0 1.3rem;font-size:.95rem;letter-spacing:0}
.btn--nav:hover{letter-spacing:0}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:4px}

/* ── Cabecera ── */
/* ── El encabezado, con los colores de la banda: violeta y oro ──
   La lavanda clara no sirve de fondo para el oro —da 1,35:1, se borra—,
   así que el degradado arranca en lila y baja a violeta, que es donde el
   oro se sostiene. El lila vuelve abajo, de filete, que es lo que separa
   la barra del cielo oscuro del hero. */
header.top{background:linear-gradient(180deg,#9578F2,#6B4AE0 46%,#5231C4);
  border-bottom:2px solid var(--celeste);
  box-shadow:0 12px 34px rgba(20,30,70,.22)}
.marca{font-family:var(--serif);font-weight:800;font-size:1.6rem;
  letter-spacing:-.01em;text-transform:none;color:var(--crema)}
.marca .punto{color:var(--oro)}
.top nav a{font-family:var(--serif);font-size:1rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--crema);
  border-bottom:2px solid transparent}
/* La página actual y el hover se marcan con el filete dorado y no con la
   letra: el oro a 16px sobre el violeta da 3,76 y hace falta 4,5. El
   subrayado no es texto, así que ahí el oro sí puede brillar. */
.top nav a:hover{border-color:var(--oro)}
.top nav a[aria-current="page"]{border-color:var(--oro);color:var(--crema)}
/* Sobre el violeta, el botón sólido no puede virar a violeta al pasar el
   mouse —desaparecería—: se aclara el oro. */
.top nav a.btn--solido,.top nav a.btn--solido:hover{color:var(--tinta)}
.top nav a.btn--solido:hover{background:#FFDA6B}
/* El botón de contorno lleva la letra en crema y el filete en oro: en oro
   sobre violeta el texto da 3,76 y a 15px hace falta 4,5. El acento dorado
   queda igual, en el borde, que no tiene que leerse. */
.top nav a.btn--filo{color:var(--crema);box-shadow:inset 0 0 0 2px var(--oro)}
.top nav a.btn--filo:hover{background:var(--oro);color:var(--tinta)}
@media(max-width:560px){.marca{font-size:1.25rem;letter-spacing:-.01em}}

/* ── Hero: la superficie protagonista pasa a azul noche ── */
.hero{background:radial-gradient(120% 90% at 50% 14%,var(--arena-cl),var(--arena) 52%,var(--arena-2));
  color:var(--crema)}
.hero .lema span{color:var(--oro);opacity:1}
.hero--pagina{background:radial-gradient(120% 90% at 50% 14%,var(--arena-cl),var(--arena) 52%,var(--arena-2))}
.volver{color:var(--celeste)}
.volver:hover{color:var(--oro)}

/* El lema del hero venía con tracking de versalita editorial */
.hero .lema{font-family:var(--serif);font-weight:600;letter-spacing:.02em;
  text-transform:none;font-size:clamp(1.05rem,2.6vw,1.6rem);gap:.4em .7em}
.hero .lema span{color:var(--oro);letter-spacing:0}

/* ── Radios: nada con esquina en punta ── */
.puerta,.instructivo,.pilar,.razon,.hito,.ficha,.ficha-mito,.bloque,.tablero,
.panel-paso,.nota-muestra,.pendiente,.codigo-listo,.tabla-wrap,.epoca,.h-fila,
.acceso-btn,.paso-btn,.campo input,.campo select,.formulario,.aula,.aula-viz,
.metrica,.cuenta,.nivel,.grupo,.fila{border-radius:var(--r-medio)}
.campo input,.campo select{border-radius:999px;min-height:52px}
.tabla-wrap,.formulario,.tablero{border-radius:var(--r-grande);overflow:hidden}

/* ── La frase de propósito, separada de la descripción ──
   Van dos oraciones seguidas que no dicen lo mismo: una describe de qué son
   los relatos y la otra es para qué sirven acá. En gris y al mismo cuerpo se
   leían como una sola. Esta va en el violeta de acento, con el filete dorado
   y en la sans redondeada de los títulos, para que se vea que cambia de voz. */
.lema-seccion{font-family:var(--serif);font-weight:600;color:var(--bronce);
  font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.3;max-width:34ch;
  margin-top:var(--s-3);padding-left:1rem;border-left:3px solid var(--oro)}
/* Sobre fondo oscuro el violeta de acento se apaga (1,5:1 contra el azul
   noche): ahí el mismo papel lo hace el oro, que da 9:1. */
.hero .lema-seccion,.leyendas .lema-seccion,.cierre .lema-seccion{color:var(--oro)}

/* ── Buscador de mitologías ──
   El campo va en el ancho de una tarjeta y no en el de la sección: un input
   de 1180px de largo para escribir "griega" se lee como un error. */
.campo--buscar{max-width:26rem;margin-top:var(--s-4)}
.conteo-mito{margin-top:var(--s-3);font-size:.95rem;color:var(--texto-suave)}
.mito[hidden]{display:none}

/* En el registro editorial los pilares iban pegados, con 2px de junta; con
   esquinas redondeadas esa junta se ve rota, así que pasan a tener aire. */
.pilares{gap:20px}

/* ══ Las tarjetas de temáticas ══
   Antes eran un fondo liso con un ícono chico arriba. Ahora cada campo
   trae su propia escena, dibujada a sangre y ocupando toda la tarjeta:
   monedas para economía, gente abrazada para sociedad, un valle con su río
   para medio ambiente. Son ilustraciones y no fotos —el sitio entero está
   dibujado— pero con volumen, luz y profundidad, para que se lean como una
   escena y no como un pictograma.

   El velo de abajo no es decorativo: sin él el título cae encima del dibujo
   y deja de leerse. Arranca transparente y termina en el violeta profundo
   justo donde apoya el texto, así el dibujo se ve entero arriba y el
   título tiene fondo firme abajo. */
/* Ojo con el nombre. Estas tarjetas se llamaron primero «.campo» y después
   «.tema», y las dos veces pisaron algo que ya existía: «.campo» es el
   envoltorio de un campo de formulario —lo usan el buscador de relatos y
   los tres accesos— y «.tema» es la píldora de las tablas de los paneles.
   De ahí el nombre largo: antes de inventar una clase en este archivo,
   buscarla en estilos.css y en el resto de las páginas. */
.tarjetas-campo{display:grid;gap:20px;margin-top:0;max-width:900px;
  margin-inline:auto}
@media(min-width:700px){.tarjetas-campo{grid-template-columns:repeat(2,1fr)}}
.tarjeta-campo{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  aspect-ratio:4/3;min-height:250px;padding:var(--s-3);border-radius:var(--r-grande);
  background:var(--azul-2);color:var(--crema);
  transition:transform .35s ease,box-shadow .35s ease}
/* La proporción de la tarjeta es la misma que la del dibujo (4:3), así que
   el recorte de «slice» no llega a comerse nada: la escena entra entera. */
.tarjeta-campo__fondo{position:absolute;inset:0;width:100%;height:100%;display:block}
.tarjeta-campo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(transparent,rgba(20,14,55,.22) 40%,rgba(20,14,55,.82))}
.tarjeta-campo h3{position:relative;z-index:2;margin:0;color:var(--crema);
  font-size:clamp(1.35rem,3vw,1.8rem);text-shadow:0 2px 14px rgba(20,14,55,.6)}
.tarjeta-campo:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(20,30,70,.28)}
@media(prefers-reduced-motion:reduce){
  .tarjeta-campo{transition:none}.tarjeta-campo:hover{transform:none}}

/* ── Las puertas dejan de ser filetes y pasan a tarjetas ── */
.puertas{gap:20px;border-top:0;margin-top:var(--s-4)}
.puerta{border-bottom:0;background:var(--crema-2);padding:var(--s-3);
  box-shadow:inset 0 0 0 2px rgba(91,63,217,.16);transition:transform .3s,box-shadow .3s}
.puerta+.puerta{border-left:0}
.puerta:hover{background:var(--crema-2);transform:translateY(-4px);
  box-shadow:inset 0 0 0 2px var(--azul),0 10px 28px rgba(20,30,70,.12)}
.puerta .ir{border-radius:999px;min-height:52px;box-shadow:none;
  background:var(--oro);color:var(--tinta);font-family:var(--serif);
  font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none}
.puerta:hover .ir{background:var(--azul);color:#fff;letter-spacing:0}
@media(min-width:820px){.puerta+.puerta{border-left:0}}

/* ── La banda PALMYTHO ── */
/* El título gigante se apoya al 62% de la escena: el degradado tiene que estar
   ya en violeta a esa altura, o el oro se pierde sobre la lavanda (1,5:1). */
.banda{background:linear-gradient(#BCA9F6,var(--celeste) 22%,var(--azul) 52%,var(--azul-2))}
/* El título gigante es la misma marca que la del encabezado: mismo par de
   colores —crema con el "Pal" en oro— y misma caja baja. Si acá va todo en
   oro y en versales, se lee como otro logo y no como el mismo. */
.banda .titulo{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;
  color:var(--crema);text-transform:none;
  text-shadow:0 6px 30px rgba(20,30,70,.55),0 2px 6px rgba(20,30,70,.35)}
.banda .titulo .punto{color:var(--oro)}
.banda .pie{background:var(--azul-2)}

/* Los rótulos de las puntas ahora son frases enteras. Al ser absolutos con
   left:50%, el ancho de ajuste les quedaba en la mitad del rombo y "aprender
   de las enseñanzas" se partía en tres renglones: con max-content miden lo
   que mide el texto y el <br> es el único que corta. */
.rombo .v-arriba,.rombo .v-abajo{width:max-content;max-width:min(32rem,86%)}

/* ── Leyendas y cierre: los momentos oscuros ── */
.leyendas{background:linear-gradient(165deg,var(--azul-2),var(--tinta) 62%)}
.cierre{background:var(--tinta);color:var(--crema)}

/* ── Discos: se quedan, son lo único del registro anterior que sigue sirviendo ── */
.disco::after{box-shadow:inset 0 0 0 1px rgba(255,201,60,.5),inset 0 -20px 38px rgba(10,14,34,.4)}
.mito:hover .disco::after{box-shadow:inset 0 0 0 1px var(--oro),0 0 26px rgba(255,201,60,.35)}
.mito .nombre{font-family:var(--serif);font-weight:600;font-size:1.15rem;
  letter-spacing:0;text-transform:none}
.mito .region{letter-spacing:.12em;font-size:.7rem;color:var(--bronce)}

/* ── Números y métricas ── */
/* El original separaba con filetes; con radio, un borde suelto se ve roto.
   En B cada métrica es una tarjeta y la separación la da el gap. */
.metricas{border-bottom:0;gap:14px}
.metrica{background:var(--blanco);padding:var(--s-3);
  box-shadow:inset 0 0 0 1px rgba(91,63,217,.14)}
.metrica+.metrica{border-left:0;padding-left:var(--s-3)}
.metrica .barra{border-radius:999px;overflow:hidden}
.metrica .barra i{border-radius:999px}
.metrica .n,.cuenta .n,.mas b,.nivel .r,.ficha__puntos{font-family:var(--serif);font-weight:700;letter-spacing:0}
.metrica .barra i{background:var(--oro)}
.metrica .q,.cuenta .q{letter-spacing:.12em}

/* ── Paneles de alumno y guía ── */
.app-cab{background:linear-gradient(165deg,var(--azul-2),var(--tinta) 70%)}
.app-cab h1{font-family:var(--serif);letter-spacing:0;text-transform:none}

/* ── Tablas: la única zona que se mantiene densa y sobria ── */
.tabla th{letter-spacing:.1em}
/* .tema usaba --texto-arena, que en B es claro: sobre la tabla blanca no se leía */
.tema{border-radius:999px;color:var(--azul-2);background:rgba(91,63,217,.09);
  box-shadow:inset 0 0 0 1px rgba(91,63,217,.32);letter-spacing:.1em;padding:.25rem .7rem}

/* ── Instructivos y pilares ── */
.instructivo{background:var(--crema-2);box-shadow:inset 0 0 0 2px rgba(91,63,217,.16);padding:var(--s-3)}
.instructivo:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--azul),0 10px 28px rgba(20,30,70,.12)}
.instructivo .ir{border-radius:999px;background:var(--oro);color:var(--tinta);
  font-family:var(--serif);font-weight:600;letter-spacing:0;text-transform:none;box-shadow:none}
.instructivo:hover .ir{background:var(--azul);color:#fff}

/* Sobre las superficies oscuras el filo violeta desaparece (1,9:1): va en oro */
.cierre .btn--filo,.leyendas .btn--filo,.banda .btn--filo,
.hero .btn--filo,.app-cab .btn--filo{color:var(--oro)}
.cierre .btn--filo:hover,.leyendas .btn--filo:hover,.banda .btn--filo:hover,
.hero .btn--filo:hover,.app-cab .btn--filo:hover{background:var(--oro);color:var(--tinta)}
/* El botón del sol vive sobre su propio halo blanco: se queda oscuro */
.sol .btn{color:var(--tinta)}
.sol .btn:hover{letter-spacing:0;background:transparent;color:var(--azul-2);transform:none}

/* ── Grilla de accesos: la arena ahora es oscura, el texto tiene que invertirse ── */
.accesos{gap:16px;border-top:0;margin-top:var(--s-4)}
.acceso-btn{color:var(--crema);border-bottom:0;border-radius:var(--r-medio);
  transition:background .3s ease,color .3s ease,transform .3s ease}
.acceso-btn .t{font-family:var(--serif);font-weight:700;font-size:1.4rem;
  letter-spacing:0;text-transform:none}
.acceso-btn .d{color:var(--celeste-cl)}
.acceso-btn:hover{background:var(--arena-cl);transform:translateY(-3px)}
.acceso-btn[aria-selected="true"]{background:var(--azul);color:#fff}
.acceso-btn[aria-selected="true"] .d{color:var(--celeste-cl)}
@media(min-width:720px){.acceso-btn+.acceso-btn{border-left:0}}

/* ── La puerta que todavía no está ──
   Se muestra apagada y sin el envión del hover, pero sigue recibiendo foco:
   así el lector de pantalla la nombra y lee su «Próximamente» en vez de
   saltearla como si no existiera. El «no-drop» avisa con el cursor que el
   clic no va a llevar a ninguna parte. */
.acceso-btn--pronto{opacity:.5;cursor:not-allowed}
.acceso-btn--pronto:hover{background:transparent;transform:none}
/* El aviso es lo único que queda en oro: es lo que hay que leer de la tarjeta. */
.acceso-btn--pronto .d{color:var(--oro);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}

/* El code general quedó claro sobre oscuro; el de aviso-proto invierte el fondo */
.aviso-proto code{background:var(--blanco);color:var(--tinta)}
.aviso-proto{border-radius:999px;letter-spacing:.12em}

/* ── El juego: juego.css trae sus propias piezas, también en punta ── */
.palabra,.veredicto,.ayuda,.pantalla,.nota-muestra,.escribir textarea,
.panel-paso,.relato{border-radius:var(--r-medio)}
.salto,.mando,.btn--oro,.btn--fantasma{border-radius:999px}
.btn--oro{box-shadow:0 6px 0 -2px rgba(74,49,184,.5)}
/* El control segmentado de opciones deja de estar pegado y pasa a píldoras */
.opciones{gap:10px}
.opciones button{border-radius:999px;font-family:var(--serif);font-weight:600;
  letter-spacing:0;box-shadow:inset 0 0 0 2px rgba(91,63,217,.3)}
.opciones button+button{margin-left:0}
.opciones button:hover{background:rgba(91,63,217,.12)}
.opciones button[aria-pressed="true"],
.opciones button[aria-pressed="true"]:hover{background:var(--azul);color:#fff}

/* ── Pie ── */
footer{background:var(--tinta);color:var(--crema)}
.pie-nav a{font-family:var(--serif);font-weight:600;letter-spacing:0;text-transform:none}

/* ── Foco visible, en violeta ── */
:focus-visible{outline-color:var(--azul)}

@media(prefers-reduced-motion:reduce){
  .btn,.puerta,.instructivo{transition:none}
  .btn--solido:hover,.btn--filo:hover,.puerta:hover,.instructivo:hover{transform:none}
}

/* ── El buscador de mitologías, en registro amplio ── */
.buscador__campo{border-radius:999px}
.buscador__chips button{border-radius:999px;font-family:var(--serif);font-size:.95rem;
  font-weight:600;letter-spacing:0;text-transform:none;
  box-shadow:inset 0 0 0 2px rgba(91,63,217,.3)}
.buscador__chips button:hover{background:rgba(91,63,217,.12)}
.buscador__chips button[aria-pressed="true"]{background:var(--azul);color:#fff}
.buscador__cuenta{letter-spacing:.12em;color:var(--azul-2)}
.buscador__mas{border-radius:999px;font-family:var(--serif);font-size:1.05rem;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--azul-2);
  box-shadow:inset 0 0 0 2px currentColor}
.buscador__mas:hover{background:var(--azul);color:#fff;letter-spacing:0}


/* ── Los dos canales, uno al lado del otro ──
   Sigue al hero, así que mantiene el azul noche y se separa con un filete
   de oro arriba. Las dos columnas se dividen con una línea vertical; en
   pantalla angosta se apilan y la línea pasa a ser horizontal. */
.canales-par{background:var(--tinta);color:var(--crema);
  padding:var(--s-4) 0;border-top:2px solid rgba(255,201,60,.35)}
.canales-par__grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.canal-caja{padding:0 var(--s-3)}
.canal-caja:first-child{padding-left:0}
.canal-caja:last-child{padding-right:0;border-left:1px solid rgba(255,248,230,.3)}
.canal-caja__frase{font-family:var(--serif);font-weight:700;line-height:1.15;
  font-size:clamp(1.35rem,2.8vw,2.05rem);color:var(--crema);margin:0;max-width:18ch}
.canal-caja .rotulo{display:block;margin-top:.9rem}
@media(max-width:760px){
  .canales-par__grid{grid-template-columns:1fr}
  .canal-caja{padding:var(--s-3) 0}
  .canal-caja:first-child{padding-top:0}
  .canal-caja:last-child{border-left:0;border-top:1px solid rgba(255,248,230,.3)}
}

/* ── El paso a paso ──
   Cuatro pasos en columna, unidos por una línea: se lee el orden sin
   tener que numerar con palabras. El numeral va en violeta pleno
   (#4A31B8 sobre blanco, 8.9:1); en gris claro no se leía. */
.escalera{list-style:none;margin:var(--s-4) 0 0;padding:0;counter-reset:paso;
  display:grid;gap:var(--s-3);max-width:44rem}
.escalera li{position:relative;counter-increment:paso;padding-left:4.6rem;
  font-family:var(--serif);font-weight:600;line-height:1.25;color:var(--tinta);
  font-size:clamp(1.1rem,2.1vw,1.5rem)}
.escalera li::before{content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:-.1em;width:3rem;
  font-size:1.9rem;font-weight:800;line-height:1;color:var(--azul-2)}
/* El hilo que baja de un paso al siguiente; el último no lleva. */
.escalera li::after{content:'';position:absolute;left:1.35rem;top:2.4rem;
  bottom:calc(-1 * var(--s-3));width:2px;background:rgba(91,63,217,.25)}
.escalera li:last-child::after{display:none}
@media(max-width:600px){
  .escalera li{padding-left:3.4rem}
  .escalera li::before{font-size:1.5rem;width:2.4rem}
  .escalera li::after{left:.95rem;top:2rem}
}

/* ── La rueda: cuatro momentos que vuelven a empezar ──
   El aro es un SVG cuadrado de fondo y los cuatro nombres son texto de
   verdad apoyado encima, en los cuatro puntos cardinales. Los de los
   costados se anclan al borde (no al centro) para que en pantalla
   angosta no se salgan de la caja. */
.rueda{position:relative;width:min(30rem,100%);aspect-ratio:1;
  margin:var(--s-4) auto 0}
.rueda__aro{position:absolute;inset:0;width:100%;height:100%;
  color:var(--azul);opacity:.55}
.rueda__paso{position:absolute;z-index:2;white-space:nowrap;
  background:var(--blanco);color:var(--tinta);
  font-family:var(--serif);font-weight:700;
  font-size:clamp(.95rem,2.6vw,1.15rem);line-height:1;
  padding:.7em 1.1em;border-radius:999px;
  box-shadow:inset 0 0 0 2px var(--azul),0 4px 14px rgba(20,30,70,.12)}
.rueda__paso--n{left:50%;top:0;transform:translateX(-50%)}
.rueda__paso--s{left:50%;bottom:0;transform:translateX(-50%)}
.rueda__paso--e{right:0;top:50%;transform:translateY(-50%)}
.rueda__paso--o{left:0;top:50%;transform:translateY(-50%)}

/* ── Lo que hace cada rol, dentro de su tarjeta ──
   Viñeta de oro dibujada aparte: la del navegador no se puede colorear
   sin perder la sangría del texto cuando la línea se parte en dos. */
.lista-rol{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.7rem}
.lista-rol li{position:relative;padding-left:1.35rem;
  color:#DCE9F5;font-size:1rem;line-height:1.4}
.lista-rol li::before{content:'';position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--oro)}

/* ── La palabra que se resalta dentro de un título de tarjeta ──
   Oro #FFC93C sobre el violeta de la tarjeta (#4A31B8): 5.5:1. */
.pilar h3 .resalte{color:var(--oro)}

/* ── El enlace que sale de una tarjeta de rol ──
   Va en oro y no en crema para que se lea como algo que se toca y no como
   un renglón más de la lista. La flecha se separa un poco al pasar por
   encima: es el único movimiento que necesita para avisar que lleva a
   otra página. Alto mínimo de 44px, que es lo que mide un dedo. */
.pilar__mas{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  margin-top:1.2rem;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--oro);
  border-bottom:1px solid rgba(255,201,60,.5)}
.pilar__mas span{transition:transform .25s ease}
.pilar__mas:hover{color:var(--crema);border-bottom-color:currentColor}
.pilar__mas:hover span{transform:translateX(4px)}
.pilar__mas:focus-visible{outline:3px solid var(--oro);outline-offset:4px}

/* ── Cuatro tarjetas, no tres: en 2×2 quedan del mismo alto y con aire ── */
@media(min-width:760px){.pilares--cuatro{grid-template-columns:repeat(2,1fr)}}
/* La quinta tarjeta quedaría sola y a media caja en la última fila:
   se lleva el ancho entero y la grilla vuelve a cerrar pareja. */
@media(min-width:760px){.pilares--impar > .pilar:last-child{grid-column:1 / -1}}
/* Con cuatro campos y poco texto, el dibujo puede ser el que manda. */
#campos .pilar svg{width:88px;height:88px;margin-bottom:1.2rem}

/* ── Lo que ve el guía: subtítulos y listas sobre fondo claro ── */
.sub-guia{margin-top:var(--s-4);color:var(--tinta)}
.sub-guia:first-of-type{margin-top:var(--s-3)}
.lista-clara{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.75rem;
  max-width:46rem}
.lista-clara li{position:relative;padding-left:1.6rem;color:var(--texto);
  line-height:1.45}
.lista-clara li::before{content:'';position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;background:var(--azul)}

/* ── La marca metida adentro de un título ──
   Mismo corte que la del encabezado: Baloo 2, 800, sin versalita ni tracking.
   Arriba el par es oro sobre violeta; acá el fondo es crema y el oro daría
   1.6:1, así que el par pasa a violeta + tinta: mismo gesto, legible. */
.marca-titulo{font-family:var(--serif);font-weight:800;letter-spacing:-.01em;
  text-transform:none;color:var(--tinta)}
.marca-titulo .punto{color:var(--azul-2)}

/* ── Las cuatro ventajas, compactas ──
   Son títulos sueltos, sin párrafo: con el alto de tarjeta normal había que
   scrollear para ver las cuatro. Menos aire, ícono chico, y entran de una. */
#beneficios{padding:var(--s-4) 0}
#beneficios .pilares{margin-top:var(--s-4)}
#beneficios .pilar{padding:1.35rem 1.5rem}
#beneficios .pilar svg{width:38px;height:38px;margin-bottom:.6rem}
#beneficios .pilar h3{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.25;
  letter-spacing:0;margin-bottom:0}

/* ══ Corrección uno por uno ═══════════════════════════════════════════
   Patrón de libreta: la lista del curso a la izquierda, lo que escribió
   el seleccionado a la derecha. Se corrige sin perder de vista quién
   falta. En pantalla angosta la lista pasa arriba y el detalle abajo. */
.correccion{display:grid;gap:var(--s-3);margin-top:var(--s-3)}
@media(min-width:860px){.correccion{grid-template-columns:17rem 1fr;gap:var(--s-4)}}

.correccion__lista{display:grid;gap:8px;align-content:start}
.alum{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;
  text-align:left;padding:.85rem 1rem;border:0;cursor:pointer;
  background:var(--blanco);border-radius:var(--r-chico);
  box-shadow:inset 0 0 0 1px rgba(20,30,70,.14);
  font-family:var(--sans);transition:box-shadow .2s,background .2s}
.alum:hover{box-shadow:inset 0 0 0 2px var(--celeste)}
.alum[aria-selected="true"]{background:var(--azul-2);color:var(--crema);
  box-shadow:inset 0 0 0 2px var(--azul-2)}
.alum__nom{font-family:var(--serif);font-weight:700;font-size:1.15rem;line-height:1.1}
.alum__pts{font-weight:700;font-size:1.05rem;text-align:right}
.alum__pts small{font-weight:400;opacity:.6}
.alum__estado{grid-column:1/-1;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave)}
.alum[aria-selected="true"] .alum__estado{color:#CFC4F5}
/* El bronce (#5B3FD9 en B) sobre blanco da 6.4:1; el oro no llegaba a 2:1 */
.alum__estado--ojo{color:var(--error)}
.alum__estado--listo{color:var(--azul-2)}
.alum[aria-selected="true"] .alum__estado--ojo{color:#FFC1B4}
.alum[aria-selected="true"] .alum__estado--listo{color:var(--oro)}

.entrega{background:var(--blanco);border-radius:var(--r-medio);
  padding:var(--s-3);box-shadow:inset 0 0 0 1px rgba(20,30,70,.14)}
.entrega__cab{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.entrega__cab h3{margin:0;font-size:1.5rem}
.entrega dl{margin:var(--s-3) 0 0}
.entrega dt{font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronce);margin-top:1.2rem}
.entrega dd{margin:.45rem 0 0;color:var(--texto);line-height:1.5}

.poner-nota{margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid rgba(20,30,70,.14)}
.notas{display:flex;flex-wrap:wrap;gap:6px;margin:.8rem 0 1rem}
.nota-btn{width:2.6rem;height:2.6rem;border:0;cursor:pointer;border-radius:999px;
  background:var(--crema);color:var(--tinta);font-family:var(--serif);
  font-weight:700;font-size:1.05rem;
  box-shadow:inset 0 0 0 1px rgba(20,30,70,.18);transition:background .15s}
.nota-btn:hover{box-shadow:inset 0 0 0 2px var(--azul)}
.nota-btn[aria-pressed="true"]{background:var(--azul-2);color:var(--crema);
  box-shadow:inset 0 0 0 2px var(--azul-2)}
.guardado{margin-top:.8rem;font-size:.95rem;color:var(--azul-2);font-weight:700}

.reco{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:.7rem;
  max-width:60rem}
.reco li{position:relative;padding-left:1.6rem;line-height:1.45}
.reco li::before{content:'';position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;background:var(--azul)}
.reco .reco--curso{color:var(--texto-suave)}
.reco .reco--curso::before{background:var(--oro)}

/* ── Solapas para elegir por dónde mirar las entregas ── */
.vistas{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3)}
.vista{border:0;cursor:pointer;padding:.7rem 1.4rem;border-radius:999px;
  background:var(--crema);color:var(--azul-2);
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  box-shadow:inset 0 0 0 2px rgba(91,63,217,.35);transition:background .15s}
.vista:hover{background:rgba(91,63,217,.12)}
.vista[aria-selected="true"]{background:var(--azul-2);color:var(--crema);
  box-shadow:inset 0 0 0 2px var(--azul-2)}

/* ── La fila de chips: qué proyecto, o qué alumno ── */
.filtro{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3)}
.chip{border:0;cursor:pointer;padding:.5rem 1rem;border-radius:999px;
  background:var(--blanco);color:var(--tinta);font-family:var(--sans);
  font-size:.95rem;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(20,30,70,.2);transition:box-shadow .15s}
.chip:hover{box-shadow:inset 0 0 0 2px var(--celeste)}
.chip[aria-pressed="true"]{background:var(--oro);color:var(--tinta);
  font-weight:700;box-shadow:inset 0 0 0 2px var(--oro)}
.filtro .tabla-hint{margin:0;align-self:center}

/* De qué proyecto es la entrega que se está mirando */
.entrega__pro{margin:.9rem 0 0;font-family:var(--serif);font-weight:600;
  font-size:1.05rem;color:var(--azul-2)}
.entrega__pro .suave{font-family:var(--sans);font-weight:400;font-size:.9rem;
  color:var(--texto-suave)}

/* Tres cursos en fila; con dos puertas se quedan en las dos columnas base */
@media(min-width:820px){.puertas--tres{grid-template-columns:repeat(3,1fr)}}
/* El rótulo va en versalita, pero «3.º B» en mayúscula queda «3.O B» */
.rotulo [data-curso]{text-transform:none}

/* El compromiso con las comunidades sale del gris del aviso: para una
   escuela —y más todavía para un lector australiano, donde los relatos
   de los pueblos originarios tienen protocolo propio— no es letra chica. */
.nota-muestra__clave{background:#F3EEFF;border-left:3px solid #FFC93C;
  border-radius:0 12px 12px 0;padding:.8rem 1rem;margin-top:.9rem !important;
  color:#141E46 !important}
.nota-muestra__clave b{color:#141E46}

/* Una advertencia dentro de la letra chica, para que no pase de largo. */
.aclara__ojo{display:block;margin-top:.6rem;color:var(--tinta)}
/* El display:block de arriba le gana al [hidden] del navegador, así que
   un aviso que se apaga por JS se seguía viendo. */
.aclara__ojo[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════
   ARMAR UN PROYECTO · la pantalla del guía

   Tres pestañas —armar el grupo, elegir el contenido, abrir el proyecto—
   montadas sobre el borde de abajo de la cabecera oscura. La abierta es
   del color del papel de la hoja que está mostrando, sin línea que las
   separe: la pestaña y la hoja se leen como una sola cosa, que es todo lo
   que tiene que hacer una pestaña para explicarse.
   ═══════════════════════════════════════════════════════════════════ */

.app-cab--pestanas{padding-bottom:0}
.pestanas{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-4)}
.pestana{border:0;cursor:pointer;font-family:var(--serif);font-weight:600;
  font-size:1.02rem;padding:.85rem 1.4rem;border-radius:14px 14px 0 0;
  background:rgba(251,241,220,.14);color:var(--crema);
  transition:background .2s,color .2s}
.pestana:hover{background:rgba(251,241,220,.26)}
.pestana[aria-selected="true"]{background:var(--blanco);color:var(--tinta)}
/* El foco va por dentro: la pestaña está pegada al borde de la sección y
   un contorno por fuera queda cortado a la mitad. */
.pestana:focus-visible{outline:2px solid var(--oro);outline-offset:-4px}
@media(max-width:560px){.pestana{flex:1 1 100%;border-radius:14px 14px 0 0}}

/* El botón que lleva a la pestaña siguiente, al pie de cada hoja. */
.pasar{margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px solid rgba(20,30,70,.12);display:flex;justify-content:flex-end}

/* ── De a cuántos: diez opciones ──
   En una sola fila, diez botones quedan de treinta píxeles y el número no
   entra. Van en dos filas de cinco, y ahí el margen negativo que unía los
   bordes ya no sirve: se separan con una junta pareja. */
.opciones--diez{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.opciones--diez button+button{margin-left:0}
.opciones--diez button{min-height:46px;font-size:1.25rem;border-radius:10px}

/* ── Los grupos, uno por fila ──
   El campo del nombre y los puntos de cuánta gente tiene van juntos: son
   la misma cosa mirada de dos maneras. */
.grupos-lista{display:grid;gap:8px;margin-top:.7rem}
.grupo-fila{display:flex;align-items:center;gap:.7rem}
.grupo-fila input{flex:1;min-width:0;min-height:44px;border-radius:999px;
  border:0;box-shadow:inset 0 0 0 1px rgba(20,30,70,.24);
  padding:0 1rem;font-family:var(--sans);font-size:.98rem;color:var(--texto);
  background:var(--blanco)}
.grupo-fila input:focus-visible{outline:2px solid var(--azul);outline-offset:1px}
.grupo-fila .grupo{flex:none;box-shadow:none;padding:0}
.grupo-fila__n{flex:none;width:1.6rem;text-align:right;font-family:var(--serif);
  font-size:1.1rem;color:var(--bronce)}

/* ── El filtro de etiquetas ──
   Una sola lista plana: la mitología, la temática, la cátedra y las
   palabras del desarrollo sostenible se filtran todas igual. Agrupadas por
   familia habría que decidir el cajón de cada etiqueta nueva antes de
   poder escribirla. */
.filtro-etiquetas{margin-top:var(--s-3)}
.filtro-etiquetas>.rotulo{display:block;color:var(--bronce)}
.filtro-etiquetas .filtro{margin-top:.5rem}
.filtro-etiquetas .btn{margin-top:.7rem}
/* .btn trae su propio display, que le gana al [hidden] del navegador: sin
   esto un botón apagado por JS se sigue viendo. Pasó dos veces —el de
   limpiar el filtro y el de volver a sortear—, así que va para todos. */
.btn[hidden]{display:none}
/* Una etiqueta que dejaría la lista vacía se muestra apagada: ver por
   dónde no ir es más rápido que probar y volver. */
.chip:disabled{cursor:default;opacity:.4;box-shadow:inset 0 0 0 1px rgba(20,30,70,.14)}
.chip:disabled:hover{box-shadow:inset 0 0 0 1px rgba(20,30,70,.14)}
.filtro+.buscador__cuenta,.filtro-etiquetas+.buscador__cuenta{margin-top:var(--s-3)}

/* ── Las tarjetas del catálogo ──
   Sin título: las etiquetas dicen de qué es y las dos descripciones dicen
   qué pasa. Un título arriba de eso era una tercera manera de decir lo
   mismo. Se elige tocando la tarjeta entera, que es un <button
   aria-pressed>: anda con teclado y el lector de pantalla dice si está
   elegida. */
.catalogo{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
@media(min-width:900px){.catalogo{grid-template-columns:1fr 1fr}}

.unidad{display:block;width:100%;text-align:left;cursor:pointer;border:0;
  font-family:var(--sans);color:var(--texto);
  background:var(--blanco);border-radius:var(--r-grande);padding:var(--s-3);
  box-shadow:inset 0 0 0 1px rgba(20,30,70,.16);
  transition:box-shadow .15s,transform .15s}
.unidad:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--azul),
  0 10px 28px rgba(20,30,70,.12)}
.unidad:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* Elegida: el oro es el color de «esto queda», el mismo del juego. */
.unidad[aria-pressed="true"]{background:#FFFCF2;
  box-shadow:inset 0 0 0 3px var(--oro),0 10px 28px rgba(20,30,70,.1)}

.etiqs{display:flex;flex-wrap:wrap;gap:.35rem}
.etiq{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.02em;
  padding:.2rem .6rem;border-radius:999px;
  color:var(--azul-2);background:rgba(91,63,217,.09);
  box-shadow:inset 0 0 0 1px rgba(91,63,217,.28)}

/* Las dos piezas, separadas por una línea: la manera más barata de decir
   que son dos y no un párrafo largo. */
.unidad__pieza{margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(20,30,70,.12)}
.unidad__que{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronce)}
.unidad__pieza p{margin:.4rem 0 0;font-size:.97rem;line-height:1.55;color:var(--texto-suave)}

/* En preparación: se ve, se filtra, no se elige. Mostrarla apagada dice
   más que esconderla, porque el catálogo que crece es parte de lo que se
   está ofreciendo. */
.unidad--pronto{cursor:default;background:var(--crema-2);opacity:.72}
.unidad--pronto:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(20,30,70,.16)}
.unidad__pronto{display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bronce);
  padding:.2rem .6rem;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(122,90,22,.4)}

.catalogo__vacio{margin-top:var(--s-3);color:var(--texto-suave)}

/* ── El resumen de lo que se va a abrir ──
   Antes de tocar el botón el guía tiene que poder leer en una línea qué
   está por crear. Es la única defensa contra abrir el proyecto quinto sin
   haberse dado cuenta de que el contenido quedó sin elegir. */
.resumen{background:var(--crema-2);border-radius:var(--r-grande);
  padding:var(--s-3);margin-top:var(--s-4);
  box-shadow:inset 0 0 0 1px rgba(91,63,217,.16)}
.resumen dl{margin:0;display:grid;gap:.7rem var(--s-3)}
@media(min-width:700px){.resumen dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.resumen dt{font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronce)}
.resumen dd{margin:.2rem 0 0;font-family:var(--serif);font-size:1.1rem;color:var(--tinta)}
.resumen dd.falta{font-family:var(--sans);font-size:.95rem;color:#8A3E10}
/* En la vista por alumno, cada píldora lleva colgado el grupo del chico:
   dos alumnos pueden llamarse igual y el guía tiene que distinguirlos. */
.chip__grupo{margin-left:.45rem;font-size:.8rem;font-weight:400;color:var(--texto-suave)}
.chip[aria-pressed="true"] .chip__grupo{color:var(--tinta)}

/* El listado del curso: un nombre por renglón. El área de texto sigue la
   forma de los otros campos, pero con esquinas de caja —un rectángulo de
   doce renglones con borde de píldora se ve deformado. */
.campo textarea{width:100%;border:0;border-radius:var(--r-medio);
  box-shadow:inset 0 0 0 1px rgba(20,30,70,.24);background:var(--blanco);
  padding:.9rem 1rem;font-family:var(--sans);font-size:1rem;line-height:1.7;
  color:var(--texto);resize:vertical}
.campo textarea:focus-visible{outline:2px solid var(--azul);outline-offset:1px}

/* La franja del curso también se usa como navegación: ahí las pestañas son
   enlaces y la marcada es la página en la que estás. */
.pestanas a.pestana{text-decoration:none;display:inline-block}
.pestana[aria-current="page"]{background:var(--blanco);color:var(--tinta)}

/* ── Los grupos que armó el sistema ──
   Cada caja es un grupo: arriba el nombre que le pone el guía, abajo
   quiénes le tocaron. Los nombres van en una sola línea separados por
   puntos y no en una lista: son tres o cuatro palabras y una lista con
   viñetas ocuparía cuatro renglones para decir lo mismo. */
.grupos-cab{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);margin-top:var(--s-3)}
.grupos-cab .rotulo{color:var(--bronce)}
.grupos-cab .btn{min-height:42px;font-size:.95rem;padding:0 1.1rem}

.grupo-caja{background:var(--crema-2);border-radius:var(--r-medio);padding:.6rem .7rem;
  box-shadow:inset 0 0 0 1px rgba(20,30,70,.12)}
.grupo-caja .grupo-fila{gap:.6rem}
.grupo-gente{margin:.5rem 0 .1rem;padding-left:.2rem;font-size:.92rem;
  line-height:1.5;color:var(--texto-suave)}

/* ── La huella de escritura, en la corrección ──
   Dice cómo apareció el texto en la pantalla del alumno: a mano, pegado o
   mezcla. Es un hecho observado, no una acusación, y por eso «Pegado» va en
   el bronce de los avisos y NO en rojo: quien interpreta es el guía, que
   conoce al grupo. En rojo la pantalla ya estaría diciendo «hizo trampa». */
.huella{display:inline-block;margin-left:.5rem;font-family:var(--sans);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.15rem .55rem;border-radius:999px;
  color:var(--azul-2);background:rgba(91,63,217,.09);
  box-shadow:inset 0 0 0 1px rgba(91,63,217,.28)}
.huella--pegado,.huella--mezcla{color:var(--bronce);background:rgba(122,90,22,.09);
  box-shadow:inset 0 0 0 1px rgba(122,90,22,.32)}
.huella__dice{display:block;margin-top:.4rem;font-size:.85rem;color:var(--texto-suave)}

/* Dos entregas del mismo grupo al mismo proyecto son dos renglones
   idénticos sin la fecha. */
.alum__cuando{display:block;margin-top:.2rem;font-size:.78rem;font-weight:400;
  color:var(--texto-suave)}

/* ── Pestañas sobre papel claro ──
   Las de la cabecera se apoyan en el azul noche y funcionan por contraste
   con él. Adentro de una hoja blanca ese mismo tratamiento desaparece, así
   que acá van como píldoras llenas: la abierta en violeta y las otras en su
   tinte más suave. Sigue siendo la misma forma y el mismo lugar. */
.pestanas--claras{margin:var(--s-3) 0 0;gap:8px}
.pestanas--claras .pestana{border-radius:999px;padding:.7rem 1.2rem;font-size:.98rem;
  background:rgba(91,63,217,.09);color:var(--azul-2);
  box-shadow:inset 0 0 0 1px rgba(91,63,217,.22)}
.pestanas--claras .pestana:hover{background:rgba(91,63,217,.16)}
.pestanas--claras .pestana[aria-selected="true"]{background:var(--azul);color:#fff;
  box-shadow:none}
.pestanas--claras .pestana:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* El «/26» al lado del promedio: es la escala, no el número. */
.metrica .n small{font-family:var(--sans);font-size:.9rem;font-weight:500;
  letter-spacing:0;color:var(--texto-suave)}

/* .der quita el padding derecho para que la última columna quede al ras del
   borde. En una columna del medio eso pega el número con lo que sigue: «16»
   y «4 pegado o mezcla» se leían como un solo dato. */
.tabla th.der:not(:last-child),.tabla td.der:not(:last-child){padding-right:1.2rem}

/* La tira de píldoras de «Armar un proyecto» es una sección aparte porque
   abajo van tres hojas distintas y no una sola. Se le saca el aire de abajo
   y a la hoja que sigue el de arriba: si no, las pestañas quedan flotando
   lejos de lo que abren y no se leen como parte de la misma cosa. */
.tira-vistas{padding-top:var(--s-3);padding-bottom:0}
.tira-vistas + .seccion.blanca{padding-top:var(--s-3)}
.tira-vistas .pestanas--claras{margin-top:0}

/* ── Corregir las dos preguntas escritas ──
   Cada una es un bloque cerrado: la consigna que se le dio, lo que
   escribió el grupo y la escala. Puestas una abajo de la otra sin
   separación se leían como un texto largo con números sueltos al final. */
.corregir{margin-top:var(--s-3);padding:1.2rem 1.3rem;border-radius:16px;
  background:rgba(91,63,217,.045);box-shadow:inset 0 0 0 1px rgba(15,18,45,.07)}
.corregir__cab h4{margin:.3rem 0 0;font-family:var(--serif);font-size:1.18rem;
  font-weight:700;color:var(--tinta)}
.corregir__pide{margin:.35rem 0 0;font-size:.92rem;color:var(--texto-suave)}
.corregir__texto{margin:.9rem 0 1.1rem;padding:.9rem 1rem;border-radius:12px;
  background:var(--blanco);border-left:3px solid var(--oro);
  font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--texto)}
.corregir .notas{margin:.6rem 0 0}
.corregir__total{margin:0 0 1rem;font-family:var(--serif);font-weight:600;
  font-size:1.05rem;color:var(--tinta)}
.corregir__total .falta{color:var(--texto-suave);font-weight:400}

/* ── Los resultados de las preguntas que corrige el sistema ──
   Los enunciados van una vez, arriba y numerados; en la tabla queda el
   número. Adentro de cada celda, repetidos, la tabla se vuelve un texto. */
.preguntas-lista{margin:var(--s-3) 0 var(--s-3);padding-left:1.4rem;
  color:var(--texto-suave);font-size:.95rem;line-height:1.55}
.preguntas-lista li{margin:.25rem 0}
.tabla--resultados td small.fila__pie{display:block;margin-top:.15rem;
  font-size:.82rem;color:var(--texto-suave);font-weight:400}
.tabla--resultados .marca{display:inline-flex;align-items:center;justify-content:center;
  width:1.7rem;height:1.7rem;border-radius:999px;font-weight:700;font-size:.95rem}
.marca--si{background:rgba(46,125,90,.14);color:#2e7d5a}
.marca--no{background:rgba(176,58,58,.12);color:#b03a3a}
.tabla .fila--curso td{border-top:2px solid rgba(15,18,45,.14);
  font-family:var(--serif);font-weight:700;color:var(--tinta)}

/* ══ EVALUAR · un proyecto abajo del otro ══
   Cada proyecto es una tarjeta y sus grupos, desplegables. Cerrados se ve
   de una cuánto falta; abierto, se corrige uno sin que los otros veintinueve
   textos estén compitiendo por la pantalla. */
.proyectos{display:grid;gap:var(--s-3);margin-top:var(--s-3)}
.proyecto{border-radius:20px;background:var(--blanco);
  box-shadow:0 1px 0 rgba(15,18,45,.06),0 10px 30px -22px rgba(15,18,45,.5);
  overflow:hidden}
.proyecto__cab{padding:1.2rem 1.4rem;background:rgba(91,63,217,.05);
  border-bottom:1px solid rgba(15,18,45,.07)}
.proyecto__cab h3{margin:0;font-family:var(--serif);font-size:1.3rem;
  font-weight:700;color:var(--tinta)}
.proyecto__meta{margin:.25rem 0 0;font-size:.92rem;color:var(--texto-suave)}
.proyecto__grupos{display:grid}

/* El ejemplo se ve en claro y lo dice. Nunca se puede tocar: sus botones
   están deshabilitados, así que no hay manera de puntuar algo que no pasó. */
.proyecto--ejemplo{opacity:.62;box-shadow:inset 0 0 0 2px rgba(15,18,45,.09)}
.proyecto__ej{display:inline-block;margin-bottom:.5rem;font-family:var(--sans);
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--azul-2)}

.grupo-eva{border-top:1px solid rgba(15,18,45,.07)}
.grupo-eva:first-child{border-top:0}
.grupo-eva>summary{display:flex;align-items:center;gap:1rem;cursor:pointer;
  padding:1rem 1.4rem;list-style:none;font-family:var(--serif)}
.grupo-eva>summary::-webkit-details-marker{display:none}
.grupo-eva>summary::before{content:'▸';font-family:var(--sans);color:var(--azul);
  transition:transform .15s ease}
.grupo-eva[open]>summary::before{transform:rotate(90deg)}
.grupo-eva>summary:hover{background:rgba(91,63,217,.04)}
.grupo-eva__nom{font-weight:700;font-size:1.08rem;color:var(--tinta)}
.grupo-eva__cuando{font-family:var(--sans);font-size:.86rem;color:var(--texto-suave)}
.grupo-eva__estado{margin-left:auto;font-family:var(--sans);font-size:.9rem;
  font-weight:700;color:var(--azul-2);background:rgba(91,63,217,.1);
  padding:.3rem .75rem;border-radius:999px}
.grupo-eva__estado small{font-weight:400;opacity:.7}
.grupo-eva__cuerpo{padding:.2rem 1.4rem 1.6rem}
.grupo-eva .corregir:first-child{margin-top:0}
.corregir__puesta{margin:.6rem 0 0;display:flex;align-items:center;gap:.6rem}
.corregir__puesta b{font-family:var(--serif);font-size:1.4rem;color:var(--tinta)}
.nota-btn[disabled]{cursor:default;opacity:.7}


/* ══ MÉTRICAS · los proyectos, uno abajo del otro ══
   Una sola tarjeta con renglones separados por una línea fina, al modo de
   un listado impreso: numeral chico a la izquierda, el nombre y su rótulo
   al medio, y las cifras alineadas a la derecha en columnas fijas.

   Los renglones del proyecto son <summary>: se abren y aparecen los grupos
   con las mismas cuatro columnas, indentados. Cerrado se compara proyecto
   contra proyecto; abierto, grupo contra grupo dentro de uno.

   No se llama .proyectos ni .proyecto: esos dos ya son de «Evaluar» y
   estilos-b.css se carga última, así que repetirlos rompía aquella hoja. */
.listado{margin-top:var(--s-3);background:var(--blanco);border-radius:var(--r-grande);
  box-shadow:0 1px 0 rgba(15,18,45,.06),0 10px 30px -22px rgba(15,18,45,.5);
  overflow:hidden}
.listado__proy{border-top:1px solid rgba(15,18,45,.09)}
.listado__proy:first-child{border-top:0}

.reng{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;
  align-items:center;gap:0 1rem;padding:1.15rem 1.5rem}
.reng__n{font-family:var(--serif);font-size:.95rem;font-weight:700;
  color:var(--texto-suave);opacity:.75;font-variant-numeric:tabular-nums}
.reng__nom{font-family:var(--serif);font-size:1.16rem;font-weight:700;
  color:var(--tinta);line-height:1.25}
.reng__pie{display:block;margin-top:.15rem;font-family:var(--sans);
  font-size:.88rem;font-weight:400;color:var(--texto-suave)}
/* La píldora de la temática. `.tema` ya existe y es de las tablas de los
   paneles: acá va la propia para no arrastrar aquel tamaño. */
.reng__tema{display:inline-block;margin-left:.45rem;padding:.12rem .6rem;
  border-radius:999px;background:rgba(91,63,217,.12);color:var(--azul-2);
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.02em}

/* Las cuatro cifras. Ancho fijo por columna para que un renglón con «8» y
   otro con «124» no corran los rótulos de lugar. */
.cifras{display:flex;gap:1.7rem;text-align:right}
.cifra{min-width:4.6rem}
.cifra b{display:block;font-family:var(--serif);font-size:1.42rem;font-weight:700;
  line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums}
.cifra b small{font-family:var(--sans);font-size:.78rem;font-weight:500;
  color:var(--texto-suave)}
.cifra span{display:block;margin-top:.1rem;font-family:var(--sans);font-size:.7rem;
  font-weight:700;letter-spacing:.09em;color:var(--texto-suave)}
/* Los errores en rojo, y el rótulo también: si solo se pinta el número, en
   una columna de cifras oscuras el rojo se lee como un adorno. */
.cifra--mal b,.cifra--mal span{color:#B03A3A}
.cifra--nada b{color:var(--texto-suave);opacity:.6}

/* El renglón del proyecto abre; el del grupo no. */
.listado__proy>summary{list-style:none;cursor:pointer}
.listado__proy>summary::-webkit-details-marker{display:none}
.listado__proy>summary:hover{background:rgba(91,63,217,.045)}
.listado__proy>summary .reng__n::after{content:'▸';display:inline-block;
  margin-left:.35rem;color:var(--azul);transition:transform .15s ease}
.listado__proy[open]>summary .reng__n::after{transform:rotate(90deg)}
.listado__proy[open]>summary{background:rgba(91,63,217,.06)}

.listado__grupos{background:rgba(15,18,45,.025);
  box-shadow:inset 0 1px 0 rgba(15,18,45,.09)}
.listado__grupos .reng{padding:.85rem 1.5rem .85rem 3rem;
  border-top:1px solid rgba(15,18,45,.06)}
.listado__grupos .reng:first-child{border-top:0}
.listado__grupos .reng__nom{font-size:1rem}
.listado__grupos .cifra b{font-size:1.2rem}

@media(max-width:820px){
  .reng{grid-template-columns:2.2rem minmax(0,1fr);row-gap:.8rem}
  .cifras{grid-column:1 / -1;justify-content:space-between;gap:.8rem}
  .cifra{min-width:0}
  .listado__grupos .reng{padding-left:2rem}
}

/* ══ MÉTRICAS · el «próximamente» de los gráficos ══
   No es un error ni una pantalla vacía: es una parte anunciada. Se ve como
   una tarjeta más del panel —mismo blanco, misma sombra— con el rótulo
   arriba, para que se lea como «esto viene» y no como «esto se rompió». */
.proximamente{background:var(--blanco);border-radius:var(--r-grande);
  padding:var(--s-4);margin-top:var(--s-3);max-width:62ch;
  box-shadow:0 1px 0 rgba(15,18,45,.06),0 10px 30px -22px rgba(15,18,45,.5)}
.proximamente__rot{margin:0 0 .5rem;font-family:var(--sans);font-size:.76rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--azul-2)}
.proximamente h2{margin:0}
.proximamente p{margin:.7rem 0 0;color:var(--texto-suave)}
/* Un botón que se lee como enlace: lleva a la otra pestaña de esta misma
   pantalla, y un <a href> mentiría diciendo que hay otra página. */
.enlace-vista{background:none;border:0;padding:0;font:inherit;color:var(--azul-2);
  font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.enlace-vista:hover{color:var(--tinta)}

/* El ejemplo del listado se ve en claro y lo dice, igual que el de
   «Evaluar»: mismo velo y mismo filo, para que las dos pantallas del guía
   avisen «esto todavía no pasó» de la misma manera. El rótulo reusa
   .proyecto__ej, que ya existe y no está atado a ningún padre. */
.listado--ejemplo{opacity:.62;box-shadow:inset 0 0 0 2px rgba(15,18,45,.09)}
/* El de «Evaluar» es de tres palabras y va en versales; éste es una frase y
   en versales no se leería. Modificador, no override: si se pisa la clase
   entera cambia también aquél, que nadie pidió tocar. */
.proyecto__ej--largo{max-width:64ch;line-height:1.5;text-transform:none;
  letter-spacing:.02em;font-size:.86rem}
/* La trampa de siempre: display:inline-block le gana a [hidden]{display:none}
   del navegador, así que sin esta línea el rótulo del ejemplo se ve también
   cuando hay entregas de verdad. */
.proyecto__ej[hidden]{display:none}

/* ══════════ Métricas · los gráficos ══════════
   Los colores de las barras del problema y de la solución son los mismos
   del caminito del juego: lo que el alumno vio en verde, amarillo o rojo
   es lo que la maestra ve acá. */
.filtro-proy{display:flex;gap:var(--s-3);align-items:end;flex-wrap:wrap;
  margin-bottom:var(--s-3)}
.filtro-proy label{display:block;margin-bottom:6px;font-weight:700;font-size:.9rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.filtro-proy select{padding:10px 12px;border-radius:12px;border:2px solid #E4DEF5;
  font:inherit;background:var(--blanco);min-width:min(340px,100%);max-width:100%}
.filtro-proy__ficha{margin:0 0 10px;font-size:.92rem;opacity:.7}

.grafico svg{display:block;width:100%;height:auto;margin-top:var(--s-2);overflow:visible}
.grafico + .grafico{margin-top:var(--s-3)}
.g-eje{stroke:#E9E5F5}
.g-base{stroke:#C9C2E3}
.g-m{fill:var(--azul-2)}
.g-barra:hover .g-m{opacity:.85}
.g-val{font-size:15px;font-weight:700;fill:var(--tinta)}
.g-cant{font-size:12px;fill:#6B6391}
.g-cat{font-size:13px;fill:#44405E}

/* ══════════ Evaluar · los escalones de la 6 y la 7 ══════════
   Una lista que sube: cada peldaño incluye los de abajo, así que tocar el
   tercero prende también el primero y el segundo. La nota es hasta dónde
   llegó, y por eso se lee de arriba hacia abajo como una escalera. */
.casilleros{display:flex;flex-direction:column;gap:6px;margin:.4rem 0 0}
.casillero{display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:10px 12px;border:2px solid #E4DEF5;border-radius:12px;
  background:var(--blanco);font:inherit;text-align:left;color:var(--tinta);
  cursor:pointer;line-height:1.35}
.casillero:hover:not(:disabled){border-color:var(--azul)}
.casillero__n{flex:none;width:1.5rem;height:1.5rem;border-radius:999px;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;
  background:#EFEBFA;color:var(--azul-2)}
.casillero[aria-pressed="true"]{border-color:var(--azul-2);background:#F4F1FE}
.casillero[aria-pressed="true"] .casillero__n{background:var(--azul-2);color:var(--blanco)}
.casillero:disabled{opacity:.55;cursor:default}
.casilleros__cuenta{margin:.45rem 0 0;font-weight:700;font-size:.92rem}