/* Loro — sistema visual «Warm Encouragement».
   Los valores salen tal cual del diseño de Stitch. La regla que lo gobierna
   todo: la misma pantalla la tiene que poder usar una niña de 6 años y una
   persona de 60 con poca mano para la electrónica. De ahí vienen las tres
   decisiones duras:

     · nada de texto por debajo de 16px, ni un dato secundario;
     · nada que se pueda tocar mide menos de 56px, y siempre con 16px de aire
       alrededor, para que un dedo torpe o un pulso tembloroso no falle;
     · la profundidad se hace con un escalón sólido debajo del botón, no con
       sombras difuminadas: un borde blando no se ve con la vista cansada.

   No hay gestos ocultos, ni deslizar, ni menús escondidos. Todo lo que se
   puede hacer está a la vista y se toca. */

/* ---------------------------------------------------------------
   Fichas del sistema
   --------------------------------------------------------------- */

:root {
  /* Lienzo */
  --fondo:            #f9f9ff;
  --lienzo-bajo:      #f0f3ff;
  --lienzo:           #e7eeff;
  --lienzo-alto:      #dee8ff;
  --tarjeta:          #ffffff;

  /* Tinta */
  --tinta:            #111c2d;
  --tinta-suave:      #3d4a42;
  --contorno:         #6d7a72;
  --contorno-claro:   #bccac0;

  /* Verde: lo que crece y lo que está bien */
  --verde:            #006948;
  --verde-vivo:       #00855d;
  --verde-hondo:      #005137;   /* el escalón de debajo del botón */
  --verde-claro:      #85f8c4;
  --verde-papel:      #ecfdf5;
  --sobre-verde:      #ffffff;

  /* Ámbar: lo que anima, lo que hay que pulir */
  --ambar:            #fe932c;
  --ambar-hondo:      #904d00;
  --ambar-papel:      #ffdcc3;
  --sobre-ambar:      #663500;

  /* Coral: celebrar y grabar. Nunca regañar. */
  --coral:            #e21e49;
  --coral-hondo:      #ba0035;
  --coral-papel:      #ffdada;

  /* Azul: la tercera persona de la casa (verde la primera, ámbar la segunda) */
  --azul:             #1f5fd1;
  --azul-hondo:       #143f8f;
  --azul-papel:       #e3ecff;

  --radio:            1rem;
  --radio-md:         1.5rem;
  --radio-lg:         2rem;
  --pastilla:         9999px;

  --toque:            3.5rem;    /* nada tocable por debajo de esto */
  --toque-comodo:     4rem;
  --ancho:            34rem;

  --relieve:          0 4px 12px -2px rgba(30, 41, 59, .08);
  --letra: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* Cualquier `display` que pongamos por clase le gana al [hidden] del
   navegador, y entonces un botón «oculto» se sigue viendo. Esto lo zanja de
   una vez para toda la app: si algo lleva hidden, no se ve. */
[hidden] { display: none !important; }

html, body {
  min-height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input { font: inherit; color: inherit; font-family: var(--letra); }
::-webkit-scrollbar { display: none; }

/* Los iconos son de Material Symbols. Si la fuente no llega a cargar se ve el
   nombre del icono en texto, que es feo pero no deja a nadie sin saber qué
   hace el botón. */
.ico {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; user-select: none;
  font-size: 24px; flex: none;
}
.ico.relleno { font-variation-settings: 'FILL' 1, 'wght' 600; }
.ico.grande  { font-size: 32px; }

/* ---------------------------------------------------------------
   Armazón de pantalla
   --------------------------------------------------------------- */

.pantalla { min-height: 100dvh; display: flex; flex-direction: column; }
.pantalla[hidden] { display: none; }

.tira {
  flex: 1; width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.tira.centrada { justify-content: center; }

/* Dentro de cada pantalla el contenido va en un <main>, y ahí las tarjetas,
   botones y textos se pegaban unos a otros (Óscar lo vio en Mi cuenta,
   06/09/2026): el hueco de la tira no llega a los hijos del main. Aire igual
   en todas las pantallas: una columna con separación. */
.tira > main { display: flex; flex-direction: column; gap: 1rem; }
.tira > main > .pista { margin-top: -.25rem; }
/* Lo que va pegado al retrato del Loro sigue pegado: el pico del bocadillo
   apunta al pájaro y la pastilla de estado se le monta encima. */
.tira > main > .loro-retrato + .bocadillo { margin-top: -.5rem; }
.tira > main > .loro-retrato + .loro-estado { margin-top: -2.4rem; }

/* Cabecera con la marca y el estado. Siempre igual, en todas las pantallas:
   quien se pierde, mira arriba y sabe dónde está. */
.barra-arriba {
  position: sticky; top: 0; z-index: 20;
  background: var(--fondo);
  padding: max(env(safe-area-inset-top), .75rem) 1.25rem .75rem;
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--lienzo-alto);
}
.barra-arriba .marca { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.barra-arriba .marca img { width: 40px; height: 40px; border-radius: var(--pastilla); }
.barra-arriba .marca b { font-size: 22px; font-weight: 800; color: var(--verde); line-height: 1.1; display: block; }
.barra-arriba .marca span { font-size: 16px; color: var(--tinta-suave); font-weight: 600; }

/* Botón redondo de cabecera: sonido, atrás, perfil. */
.redondo {
  width: var(--toque); height: var(--toque); min-width: var(--toque);
  border-radius: var(--pastilla); border: 0; cursor: pointer;
  background: var(--lienzo); color: var(--verde);
  display: grid; place-items: center;
}
.redondo:active { transform: translateY(1px); }
.redondo.apagado { color: var(--contorno); }

/* ---------------------------------------------------------------
   Tarjetas y bocadillos
   --------------------------------------------------------------- */

.tarjeta {
  background: var(--tarjeta); border-radius: var(--radio-md);
  padding: 1.5rem; box-shadow: var(--relieve);
}
.tarjeta.lienzo { background: var(--lienzo-bajo); box-shadow: none; }

/* El bocadillo del Loro: lo que dice el profesor va SIEMPRE aquí dentro, con
   el pico apuntando al pájaro. Así se distingue de un vistazo lo que dice él
   de lo que tiene que hacer quien aprende. */
.bocadillo {
  position: relative; background: var(--lienzo-bajo);
  border-radius: var(--radio-md); padding: 1.5rem;
}
.bocadillo::after {
  content: ''; position: absolute; top: -10px; left: 2.5rem;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-bottom: 12px solid var(--lienzo-bajo);
}
.bocadillo .quien {
  display: inline-block; background: var(--verde-claro); color: #002114;
  font-size: 16px; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .75rem; border-radius: var(--pastilla); margin-bottom: .75rem;
}
.bocadillo .dice { font-size: 22px; font-weight: 700; line-height: 1.4; }
.bocadillo .apunte { font-size: 17px; color: var(--tinta-suave); margin-top: .5rem; }

.loro-retrato {
  width: 104px; height: 104px; border-radius: var(--pastilla);
  background: var(--tarjeta); display: block; margin: 0 auto .25rem;
  box-shadow: 0 0 0 6px var(--lienzo-bajo);
}
.loro-estado {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--tarjeta); border-radius: var(--pastilla);
  padding: .5rem 1rem; margin: -1.4rem auto .5rem; width: fit-content;
  box-shadow: var(--relieve); font-size: 16px; font-weight: 700; position: relative;
}
.loro-estado .punto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-vivo); }
.loro-estado.escuchando .punto { background: var(--coral); animation: latido 1.1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .3; } }

/* ---------------------------------------------------------------
   Botones
   --------------------------------------------------------------- */

/* El escalón sólido de debajo es lo que hace que un botón parezca pulsable
   sin tener que explicarlo. Al pulsar baja 3px y el escalón mengua: se nota. */
.boton {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  width: 100%; min-height: var(--toque-comodo);
  background: var(--verde); color: var(--sobre-verde);
  border: 0; border-radius: var(--pastilla);
  padding: 1rem 1.5rem; font-size: 19px; font-weight: 800; cursor: pointer;
  box-shadow: 0 5px 0 var(--verde-hondo);
  text-align: left;
}
.boton:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--verde-hondo); }
.boton:focus-visible { outline: 4px solid var(--ambar); outline-offset: 3px; }
.boton:disabled { background: var(--contorno-claro); color: var(--tinta-suave); box-shadow: 0 5px 0 #a9b6ac; cursor: default; }
.boton .sub { display: block; font-size: 16px; font-weight: 600; opacity: .9; }

.boton.suave {
  background: var(--tarjeta); color: var(--tinta);
  box-shadow: 0 4px 0 var(--contorno-claro), inset 0 0 0 2px var(--lienzo-alto);
}
.boton.suave:active:not(:disabled) { box-shadow: 0 1px 0 var(--contorno-claro), inset 0 0 0 2px var(--lienzo-alto); }
.boton.ambar { background: var(--ambar); color: var(--sobre-ambar); box-shadow: 0 5px 0 var(--ambar-hondo); }
.boton.ambar:active:not(:disabled) { box-shadow: 0 2px 0 var(--ambar-hondo); }

/* Enlace de escape: «descansar un momento», «salir». Discreto pero grande. */
.escape {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: none; border: 0; cursor: pointer;
  min-height: var(--toque); color: var(--tinta-suave); font-size: 17px; font-weight: 700;
}

/* El botón de hablar: el más grande de la app, redondo y en el centro. */
.microfono {
  width: 116px; height: 116px; border-radius: 50%;
  background: var(--verde); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; margin: 0 auto;
  box-shadow: 0 6px 0 var(--verde-hondo);
}
.microfono .ico { font-size: 48px; }
.microfono:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--verde-hondo); }
.microfono:disabled { background: var(--contorno-claro); box-shadow: 0 6px 0 #a9b6ac; }
/* Grabando: el botón se pone rojo y sigue siendo tocable, porque tocarlo es
   lo que para. Un botón grande y muerto es lo que hace que la gente empiece a
   tocar todo lo demás. */
.microfono.grabando {
  background: var(--coral); box-shadow: 0 6px 0 var(--coral-hondo);
  animation: aro 1.4s ease-out infinite;
}
.microfono.grabando:disabled { animation: none; opacity: .8; }
@keyframes aro {
  0%   { box-shadow: 0 6px 0 var(--coral-hondo), 0 0 0 0 var(--coral-papel); }
  100% { box-shadow: 0 6px 0 var(--coral-hondo), 0 0 0 28px rgba(255,218,218,0); }
}

/* Botón de altavoz, para volver a oír. Redondo y ámbar en toda la app. */
.altavoz {
  width: 68px; height: 68px; min-width: 68px; border-radius: 50%;
  background: var(--ambar-papel); color: var(--ambar-hondo);
  border: 2px solid var(--ambar); cursor: pointer; display: grid; place-items: center;
}
.altavoz:active { transform: translateY(2px); }
.altavoz .ico { font-size: 32px; }
.altavoz.sonando { background: var(--ambar); color: #fff; }

/* ---------------------------------------------------------------
   Formulario de alta
   --------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: .6rem; border: 0; }
.campo > .rotulo { font-size: 20px; font-weight: 700; }
.campo .pista { font-size: 16px; color: var(--tinta-suave); }

/* Un botón que es solo texto (Cambiar edad, Ver la suscripción): sin fondo,
   verde, y con altura tocable igualmente. Antes no existía y salía el botón
   gris del navegador (auditoría v3, M4). */
button.texto {
  background: none; border: 0; color: var(--verde); font: inherit; font-size: 17px;
  font-weight: 700; min-height: var(--toque); padding: 0 .5rem; cursor: pointer;
}

/* Correo y contraseña incluidos: sin ellos salían con el estilo del navegador,
   30 px de alto y borde gris, en Entrar y en el registro (auditoría v3, A1). */
input[type=text], input[type=number], input[type=email], input[type=password] {
  background: var(--tarjeta); border: 2px solid var(--contorno-claro);
  border-radius: var(--radio); padding: 0 1.25rem; height: var(--toque-comodo);
  font-size: 20px; font-weight: 600; width: 100%;
}
input:focus { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }

.eleccion { display: flex; flex-direction: column; gap: 1rem; }
.eleccion button {
  display: flex; align-items: center; gap: 1rem; text-align: left;
  min-height: var(--toque-comodo); padding: 1rem 1.25rem;
  background: var(--tarjeta); border: 2px solid var(--contorno-claro);
  border-radius: var(--radio); cursor: pointer; font-size: 19px; font-weight: 600;
  box-shadow: 0 4px 0 var(--lienzo-alto);
}
.eleccion button[aria-pressed=true] {
  border: 3px solid var(--verde); background: var(--verde-papel); font-weight: 800;
  box-shadow: 0 8px 20px -4px rgba(5,150,105,.18);
}
.eleccion button:disabled { opacity: .45; box-shadow: none; cursor: default; }

/* Cada persona de la casa tiene su color (Óscar, 06/09/2026): la primera
   verde, la segunda ámbar, la tercera azul. Se ve en «¿Quién va a hablar
   hoy?» y la app se tiñe con él mientras esa persona está dentro. */
.eleccion button.persona .ico.grande {
  width: 3.25rem; height: 3.25rem; border-radius: var(--pastilla);
  display: grid; place-items: center; color: #fff; font-size: 30px;
  background: var(--persona, var(--verde));
}
.eleccion button.persona { border-color: var(--persona, var(--verde)); background: var(--persona-papel, var(--verde-papel)); }
.eleccion button.persona-1 { --persona: var(--verde); --persona-hondo: var(--verde-hondo); --persona-papel: var(--verde-papel); }
.eleccion button.persona-2 { --persona: var(--ambar);  --persona-hondo: var(--ambar-hondo); --persona-papel: var(--ambar-papel); }
.eleccion button.persona-3 { --persona: var(--azul);   --persona-hondo: var(--azul-hondo);  --persona-papel: var(--azul-papel); }
.eleccion button.persona-2 .ico.grande { color: var(--sobre-ambar); }

/* El color de quien está dentro tiñe la app: el botón de cambiar de persona,
   el saludo de Inicio y la cinta del tema en clase. */
html[data-persona] #cambiarPersona { background: var(--persona); color: var(--persona-tinta, #fff); }
html[data-persona] .saludo-dia { background: var(--persona-papel); }
html[data-persona] .saludo-dia > .ico.grande { color: var(--persona-hondo) !important; }
html[data-persona] .cinta-tema { background: var(--persona-papel); }
html[data-persona="1"] { --persona: var(--verde); --persona-hondo: var(--verde-hondo); --persona-papel: var(--verde-papel); }
html[data-persona="2"] { --persona: var(--ambar); --persona-hondo: var(--ambar-hondo); --persona-papel: var(--ambar-papel); --persona-tinta: var(--sobre-ambar); }
html[data-persona="3"] { --persona: var(--azul);  --persona-hondo: var(--azul-hondo);  --persona-papel: var(--azul-papel); }
.eleccion button .marca-sel { margin-left: auto; color: var(--verde); opacity: 0; }
.eleccion button[aria-pressed=true] .marca-sel { opacity: 1; }

/* ---------------------------------------------------------------
   Inicio
   --------------------------------------------------------------- */

.saludo-dia {
  display: flex; align-items: center; gap: 1rem;
  background: var(--lienzo); border-radius: var(--radio-md); padding: 1rem 1.25rem;
}
.saludo-dia .texto b { display: block; font-size: 19px; font-weight: 800; }
.saludo-dia .texto span { font-size: 16px; color: var(--tinta-suave); }
.saludo-dia .dia {
  margin-left: auto; text-align: center; background: var(--lienzo-alto);
  border-radius: var(--radio); padding: .5rem .9rem; min-width: 68px;
}
.saludo-dia .dia b { display: block; font-size: 20px; font-weight: 800; color: var(--ambar-hondo); }
.saludo-dia .dia span { font-size: 16px; color: var(--ambar-hondo); font-weight: 700; }

.semana { display: flex; gap: .5rem; justify-content: space-between; }
.semana div {
  flex: 1; text-align: center; padding: .6rem .2rem;
  border-radius: var(--radio); background: var(--lienzo-bajo);
  border: 2px solid transparent;
}
.semana div .ico { font-size: 26px; color: var(--contorno-claro); }
.semana div span { display: block; font-size: 16px; font-weight: 700; color: var(--tinta-suave); }
.semana div.hecho { background: var(--verde-papel); }
.semana div.hecho .ico { color: var(--verde); }
.semana div.hoy { background: var(--ambar-papel); border-color: var(--ambar); }
.semana div.hoy .ico, .semana div.hoy span { color: var(--ambar-hondo); }

.titulo-seccion { font-size: 24px; font-weight: 700; margin-top: .5rem; }

.tema-fila {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  background: var(--tarjeta); border: 0; border-radius: var(--radio-md);
  padding: 1rem; cursor: pointer; box-shadow: var(--relieve); min-height: var(--toque-comodo);
}
.tema-fila .cuadro {
  width: 56px; height: 56px; min-width: 56px; border-radius: var(--radio);
  display: grid; place-items: center; background: var(--ambar-papel); color: var(--ambar-hondo);
}
.tema-fila b { display: block; font-size: 19px; font-weight: 700; }
.tema-fila small { font-size: 16px; color: var(--tinta-suave); }
.tema-fila .sello {
  font-size: 16px; font-weight: 700; padding: .2rem .7rem; border-radius: var(--pastilla);
  background: var(--verde-claro); color: #002114; white-space: nowrap;
}
.tema-fila[disabled] { opacity: 1; cursor: default; background: var(--lienzo-bajo); color: var(--tinta-suave); box-shadow: none; }

/* ---------------------------------------------------------------
   Clase
   --------------------------------------------------------------- */

.cinta-tema {
  display: flex; align-items: center; gap: .75rem;
  background: var(--lienzo); border-radius: var(--radio-md); padding: .85rem 1rem;
}
.cinta-tema .ico { color: var(--ambar-hondo); }
.cinta-tema b { font-size: 19px; font-weight: 700; }
.cinta-tema small { display: block; font-size: 16px; color: var(--tinta-suave); }
.cinta-tema .velocidad {
  margin-left: auto; display: flex; align-items: center; gap: .35rem;
  background: var(--lienzo-alto); border: 0; border-radius: var(--pastilla);
  padding: .5rem .9rem; min-height: var(--toque); font-size: 16px; font-weight: 700;
  color: var(--verde); cursor: pointer;
}

.progreso { height: 10px; background: var(--lienzo-alto); border-radius: var(--pastilla); overflow: hidden; }
.progreso div { height: 100%; width: 0; background: var(--verde); border-radius: var(--pastilla); transition: width .4s ease; }

.rotulo-mini {
  font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde); margin-bottom: .5rem;
}

.frase-objetivo { font-size: 30px; font-weight: 800; line-height: 1.35; }
.frase-objetivo .emoji { display: block; font-size: 64px; line-height: 1; margin-bottom: .5rem; }
.traduccion {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--lienzo-bajo); border-radius: var(--radio); padding: .85rem 1rem; margin-top: 1rem;
  font-size: 17px; color: var(--tinta-suave);
}
.traduccion .ico { color: var(--verde); font-size: 22px; }

/* La guía fácil: cómo suena escrito como lo leería alguien en español.
   Es lo que permite que una persona de 60 que no ha dado inglés en su vida
   se atreva a decir la frase en voz alta. */
.guia { margin-top: 1.25rem; }
.guia .rotulo { font-size: 17px; font-weight: 700; margin-bottom: .5rem; }
.silabas { display: flex; flex-wrap: wrap; gap: .5rem; }
.silabas button {
  min-height: 48px; padding: .5rem 1rem; border-radius: var(--radio);
  background: var(--tarjeta); border: 2px solid var(--contorno-claro); cursor: pointer;
  font-size: 20px; font-weight: 600; letter-spacing: .04em;
}
.silabas button:active, .silabas button.sonando { background: var(--ambar-papel); border-color: var(--ambar); }

.onda { display: flex; align-items: center; justify-content: center; gap: 5px; height: 48px; }
.onda i { width: 7px; border-radius: var(--pastilla); background: var(--contorno-claro); height: 12px; }
.onda i:nth-child(3n+1) { height: 22px; }
.onda i:nth-child(4n+2) { height: 32px; }
.onda i:nth-child(5n)   { height: 18px; }
.onda.viva i { background: var(--verde-vivo); animation: onda .9s ease-in-out infinite; }
.onda.viva i:nth-child(2n) { animation-delay: .15s; background: var(--coral); }
.onda.viva i:nth-child(3n) { animation-delay: .3s; }
@keyframes onda { 50% { height: 44px; } }

/* ---------------------------------------------------------------
   Corrección
   --------------------------------------------------------------- */

.animo {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--lienzo-bajo); border-radius: var(--radio-md); padding: 1.25rem;
}
.animo img { width: 64px; height: 64px; border-radius: var(--pastilla); background: var(--tarjeta); }
.animo .cabecilla { font-size: 17px; font-weight: 700; color: var(--ambar-hondo); }
.animo h2 { font-size: 24px; font-weight: 800; line-height: 1.3; }
.animo p { font-size: 17px; color: var(--tinta-suave); margin-top: .25rem; }

/* Cada palabra con su sello. Verde «¡Bien!» o ámbar «Pulir»: nunca rojo de
   error. Quien falla tiene que ver una tarea, no un suspenso. */
.palabras { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.palabra {
  flex: 1 1 auto; min-width: 84px; text-align: center;
  border-radius: var(--radio); padding: .85rem .6rem .6rem;
  background: var(--lienzo-bajo); border: 2px solid transparent;
}
.palabra b { display: block; font-size: 22px; font-weight: 800; word-break: break-word; }
.palabra .sello {
  display: inline-flex; align-items: center; gap: .2rem; margin-top: .5rem;
  font-size: 16px; font-weight: 700; padding: .15rem .6rem; border-radius: var(--pastilla);
}
.palabra.bien   { background: var(--verde-papel); }
.palabra.bien .sello { background: var(--verde); color: #fff; }
.palabra.regular { background: var(--ambar-papel); border-color: var(--ambar); }
.palabra.regular .sello { background: var(--ambar); color: var(--sobre-ambar); }
.palabra.mal    { background: var(--ambar-papel); border-color: var(--ambar); }
.palabra.mal .sello { background: var(--ambar); color: var(--sobre-ambar); }
.palabra.falta  { background: var(--lienzo-alto); }
.palabra.falta .sello { background: var(--contorno); color: #fff; }

.comparar { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.comparar button {
  display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%;
  background: var(--lienzo-bajo); border: 0; border-radius: var(--radio-md);
  padding: .85rem 1rem; cursor: pointer; min-height: var(--toque-comodo);
}
.comparar .bolo {
  width: 56px; height: 56px; min-width: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--verde);
}
.comparar .tuya .bolo { background: var(--ambar); color: var(--sobre-ambar); }
.comparar small { display: block; font-size: 16px; color: var(--tinta-suave); }
.comparar b { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.comparar .tuya b { color: var(--ambar-hondo); }
.comparar button:disabled { opacity: .5; cursor: default; }

.truco {
  background: var(--lienzo); border-radius: var(--radio-md); padding: 1.25rem; margin-top: 1rem;
}
.truco h3 { font-size: 18px; font-weight: 800; color: var(--verde); margin-bottom: .4rem; }
.truco p { font-size: 17px; line-height: 1.6; }

/* ---------------------------------------------------------------
   Construir la frase
   --------------------------------------------------------------- */

.renglon {
  min-height: 5rem; background: var(--tarjeta); border: 3px dashed var(--contorno-claro);
  border-radius: var(--radio-md); padding: .75rem; display: flex; flex-wrap: wrap; gap: .6rem;
  align-items: center; justify-content: center;
}
.renglon.bien { border-style: solid; border-color: var(--verde); background: var(--verde-papel); }
.renglon.mal  { border-style: solid; border-color: var(--ambar); background: var(--ambar-papel); }
.piezas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.pieza {
  min-height: 60px; padding: .75rem 1.1rem; border-radius: var(--radio);
  background: var(--tarjeta); border: 2px solid var(--contorno-claro);
  font-size: 20px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 0 var(--lienzo-alto);
}
.pieza:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lienzo-alto); }
.pieza.puesta { opacity: .3; pointer-events: none; }

/* ---------------------------------------------------------------
   Conversación
   --------------------------------------------------------------- */

.charla { display: flex; flex-direction: column; gap: .75rem; }
.turno { padding: 1rem 1.25rem; border-radius: var(--radio-md); max-width: 90%; font-size: 19px; line-height: 1.45; }
.turno.profe { background: var(--tarjeta); box-shadow: var(--relieve); align-self: flex-start; }
.turno.tuyo  { background: var(--verde-papel); align-self: flex-end; font-weight: 600; }
.turno .enmienda {
  display: block; margin-top: .6rem; padding-top: .6rem;
  border-top: 2px solid var(--lienzo-alto); font-size: 17px; color: var(--tinta-suave);
}
.metas { display: flex; flex-wrap: wrap; gap: .5rem; }
.metas span {
  font-size: 16px; font-weight: 700; padding: .35rem .8rem; border-radius: var(--pastilla);
  background: var(--lienzo-alto); color: var(--tinta-suave);
}
.metas span.hecha { background: var(--verde); color: #fff; }

/* ---------------------------------------------------------------
   Pie de acción y navegación
   --------------------------------------------------------------- */

.pie-accion {
  position: sticky; bottom: 0; z-index: 15;
  background: linear-gradient(to top, var(--fondo) 72%, transparent);
  padding: 1rem 1.25rem max(env(safe-area-inset-bottom), 1rem);
  display: flex; flex-direction: column; gap: .75rem;
  width: 100%; max-width: var(--ancho); margin: 0 auto;
}

.navegador {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; background: var(--tarjeta); border-top: 1px solid var(--lienzo-alto);
  padding: .5rem .5rem max(env(safe-area-inset-bottom), .5rem);
}
.navegador button {
  flex: 1; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  min-height: var(--toque); padding: .4rem; color: var(--tinta-suave);
  font-size: 16px; font-weight: 700;
}
.navegador button .ico { font-size: 28px; }
.navegador button[aria-current=page] { color: var(--verde); }
.navegador button[aria-current=page] .ico {
  background: var(--verde); color: #fff; border-radius: var(--pastilla);
  padding: .25rem 1rem; font-variation-settings: 'FILL' 1;
}

/* ---------------------------------------------------------------
   Final de clase
   --------------------------------------------------------------- */

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cifras div { background: var(--tarjeta); border-radius: var(--radio-md); padding: 1rem .5rem; text-align: center; box-shadow: var(--relieve); }
.cifras b { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; }
.cifras span { font-size: 16px; color: var(--tinta-suave); font-weight: 600; }

/* La tarjeta de cierre. Regla de Óscar: «jamás un texto sin contraste, con
   letra pequeña, sin sangría. Todo lo que decimos es bien visible y atractivo
   de leer». Letra grande, tinta oscura sobre blanco, aire alrededor, y una
   franja de color que la señale. */
.cierre-grande {
  background: var(--tarjeta); border-radius: var(--radio-md);
  border-left: 8px solid var(--verde); padding: 1.5rem 1.5rem 1.5rem 1.35rem;
  box-shadow: var(--relieve);
}
.cierre-grande .titulo { font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--tinta); }
.cierre-grande p { font-size: 20px; line-height: 1.6; color: var(--tinta); margin-top: .75rem; }
.cierre-grande p b { color: var(--verde); }
.cierre-grande.aliento { border-left-color: var(--ambar); }
.cierre-grande.aliento .titulo { color: var(--ambar-hondo); font-size: 22px; }

.aviso-suave {
  background: var(--lienzo); border-radius: var(--radio-md); padding: 1.25rem;
  text-align: center; font-size: 17px; color: var(--tinta-suave); line-height: 1.6;
}

/* ---------------------------------------------------------------
   El pie «Grupo Saneas» de la primera pantalla
   --------------------------------------------------------------- */
/* Igual que en las demás casas: botón de TEXTO en dos filas, sin fondo ni
   sombra, en Quicksand y en el teal del grupo. Aquí la segunda fila va a 13px
   (en Acumula va a 11): en Loro nada baja de 13, es la regla nº1. */
.pie-grupo {
  width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 1.5rem 1.25rem max(env(safe-area-inset-bottom), 1.5rem);
  border-top: 1px solid var(--lienzo-alto);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.gs-boton {
  background: none; border: 0; padding: .25rem 0; cursor: pointer;
  font-family: "Quicksand", var(--letra); text-align: left;
  display: flex; flex-direction: column; gap: 2px; min-height: var(--toque);
  justify-content: center;
}
.gs-boton .gs-txt { font-size: 15px; font-weight: 700; color: #2f7c8e; letter-spacing: .01em; }
.gs-boton .gs-txt b { color: #2f7c8e; font-weight: 700; }
.gs-boton .gs-sub { font-size: 13px; font-weight: 700; color: #6d7a72; }
#grupoPie { width: 100%; }

/* ---------------------------------------------------------------
   La pregunta propia (en vez de confirm/alert)
   --------------------------------------------------------------- */
.pregunta {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem;
}
.pregunta-caja {
  width: 100%; max-width: var(--ancho);
  background: var(--tarjeta); border-radius: var(--radio-md); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--relieve);
}
.pregunta-caja p { font-size: 21px; font-weight: 700; line-height: 1.4; margin-bottom: .5rem; }

/* «Esta la dejo»: la salida digna cuando alguien se queda en blanco. Al lado
   del micro, siempre. Sin ella, la única alternativa a hablar era abandonar. */
.dejar { margin-top: .5rem; }

/* ---------------------------------------------------------------
   Ruta, Cofre y plumas
   --------------------------------------------------------------- */
.estacion {
  display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
  background: var(--tarjeta); border: 0; border-radius: var(--radio-md);
  padding: 1rem; cursor: pointer; box-shadow: var(--relieve); min-height: var(--toque-comodo);
}
.estacion .cuadro {
  width: 56px; height: 56px; min-width: 56px; border-radius: var(--radio);
  display: grid; place-items: center; font-size: 30px; background: var(--lienzo);
}
.estacion.hecha .cuadro { background: var(--verde-papel); }
.estacion.actual { box-shadow: 0 8px 20px -4px rgba(5,150,105,.18), 0 0 0 3px var(--verde); }
.estacion.actual .cuadro { background: var(--ambar-papel); }
.estacion b { display: block; font-size: 19px; font-weight: 700; }
.estacion small { font-size: 16px; color: var(--tinta-suave); }
.estacion .sello { margin-left: auto; font-size: 16px; font-weight: 700; padding: .25rem .7rem; border-radius: var(--pastilla); white-space: nowrap; }
.estacion.hecha .sello { background: var(--verde-claro); color: #002114; }
.estacion.actual .sello { background: var(--ambar); color: var(--sobre-ambar); }
.estacion.futura .sello { background: var(--lienzo-alto); color: var(--tinta-suave); }

.palabra-cofre {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  background: var(--tarjeta); border: 0; border-radius: var(--radio); padding: .85rem 1rem;
  cursor: pointer; box-shadow: var(--relieve); min-height: var(--toque);
}
.palabra-cofre b { font-size: 20px; font-weight: 800; }
.palabra-cofre small { font-size: 16px; color: var(--tinta-suave); margin-left: .5rem; }
.palabra-cofre .ico { margin-left: auto; color: var(--ambar-hondo); }

/* Las plumas del Loro: una por bloque terminado. El horizonte de un niño de
   siete años es de cinco minutos, no de treinta. */
.plumas { display: flex; gap: .35rem; align-items: center; }
.plumas span { font-size: 18px; opacity: .25; }
.plumas span.ganada { opacity: 1; }
.pluma-grande { text-align: center; padding: 2rem 0; }
.pluma-grande .emoji { font-size: 72px; line-height: 1; }
.pluma-grande .titulo { font-size: 24px; font-weight: 800; margin-top: .75rem; }

/* Pantallas anchas: el contenido no se estira, se queda en su columna. */
@media (min-width: 640px) {
  .tira { padding: 2rem; }
  .frase-objetivo { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ---------------------------------------------------------------
   Bloque «Escucha»: el diálogo de dos voces y «señala lo que oyes»
   --------------------------------------------------------------- */
.dialogo { display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
.dialogo .turno {
  display: flex; flex-direction: column; gap: .15rem;
  max-width: 88%; padding: .7rem .9rem; border-radius: 1rem;
  background: var(--lienzo); font-size: 18px; font-weight: 600; line-height: 1.4;
}
.dialogo .turno.b { align-self: flex-end; background: var(--azul-papel); }
.dialogo .turno .quien-turno { font-size: 16px; letter-spacing: .08em; font-weight: 800; color: var(--tinta-suave); }
.dialogo .turno.b .quien-turno { color: var(--azul-hondo); }
.dialogo .turno .es { font-size: 16px; font-weight: 500; color: var(--tinta-suave); }
.dialogo .turno.suena { outline: 3px solid var(--verde); }
.dialogo .turno.callado { opacity: .35; }
.eleccion.senala { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.eleccion.senala button {
  flex: 1 1 7rem; min-height: 7rem; flex-direction: column; justify-content: center; gap: .25rem;
}
.eleccion.senala .emoji { font-size: 3.2rem; line-height: 1; }
.eleccion.senala .es { font-size: 16px; color: var(--tinta-suave); }


/* «El día se cierra» (Sico): un anillo que se completa al terminar la clase.
   Con «reducir movimiento» aparece ya cerrado. */
.dia-cerrado { position: relative; width: 9rem; height: 9rem; margin: 0 auto; }
.dia-cerrado .anillo { width: 100%; height: 100%; transform: rotate(-90deg); }
.dia-cerrado .anillo circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.dia-cerrado .anillo .fondo { stroke: var(--lienzo-alto); }
.dia-cerrado .anillo .traza {
  stroke: var(--verde); stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  animation: cerrar-dia 1.4s cubic-bezier(.2, .7, .2, 1) .3s forwards;
}
.dia-cerrado .dentro {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
}
.dia-cerrado .dentro b { font-size: 2.6rem; line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums; }
.dia-cerrado .dentro span { font-size: 16px; font-weight: 700; color: var(--tinta-suave); }
@keyframes cerrar-dia { to { stroke-dashoffset: 0; } }
.tarjeta.manana { border: 2px solid var(--verde-claro); background: var(--verde-papel); }
@media (prefers-reduced-motion: reduce) {
  .dia-cerrado .anillo .traza { animation: none; stroke-dashoffset: 0; }
}


/* ---------------------------------------------------------------
   Progreso (semana 7): gráfico de semanas, cifras y situaciones
   --------------------------------------------------------------- */
.grafico-semanas { display: flex; gap: .4rem; align-items: flex-end; height: 9rem; margin-top: .75rem; }
.grafico-semanas .barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; min-width: 0; }
.grafico-semanas .palo { width: 100%; max-width: 2.2rem; background: var(--verde-claro); border-radius: .5rem .5rem 0 0; min-height: 3px; }
.grafico-semanas .actual .palo { background: var(--verde); }
.grafico-semanas .valor { font-size: 16px; font-weight: 800; color: var(--verde); font-variant-numeric: tabular-nums; min-height: 1.1em; }
.grafico-semanas .eje { font-size: 16px; line-height: 1.1; font-weight: 700; color: var(--tinta-suave); white-space: normal; text-align: center; }
.cifras-progreso { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .5rem; }
.cifras-progreso div { text-align: center; }
.cifras-progreso b { display: block; font-size: 2rem; line-height: 1.1; color: var(--verde); font-variant-numeric: tabular-nums; }
.cifras-progreso span { font-size: 16px; font-weight: 600; color: var(--tinta-suave); }
ul.situaciones { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
ul.situaciones li { display: flex; align-items: center; gap: .6rem; font-size: 18px; font-weight: 600; color: var(--tinta-suave); }
ul.situaciones li.hecha { color: var(--tinta); } ul.situaciones li.hecha .ico { color: var(--verde); }
ul.situaciones li.actual { color: var(--tinta); } ul.situaciones li.actual .ico { color: var(--ambar); }
.mensaje-leer { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.mensaje-leer p { background: var(--lienzo); border-radius: 1rem; padding: .7rem .9rem; font-size: 19px; font-weight: 600; line-height: 1.45; max-width: 90%; cursor: pointer; }
.mensaje-leer p.b { align-self: flex-end; background: var(--azul-papel); }


/* El certificado (semana 8) */
.certificado { padding: .25rem; }
.certificado .marco {
  border: 4px double var(--verde); border-radius: 1.25rem; padding: 1.75rem 1.25rem; text-align: center;
  background: var(--tarjeta); display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.certificado img { width: 4.5rem; height: 4.5rem; object-fit: contain; }
.certificado .rot { font-size: 16px; letter-spacing: .12em; font-weight: 800; color: var(--tinta-suave); }
.certificado h2 { font-size: 2rem; margin: 0; }
.certificado .escalon { font-size: 19px; font-weight: 800; color: var(--verde); }
.certificado .que { font-size: 17px; line-height: 1.5; max-width: 32rem; }
.certificado .datos { font-size: 16px; font-weight: 700; color: var(--tinta-suave); }
@media print { .barra-arriba, #bajarPdf, .pista, .navegador { display: none !important; } .certificado .marco { border-color: #006948; } }


/* La bienvenida: tres mensajes según quién mira */
.eleccion.quien-bien { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.eleccion.quien-bien button { flex: 1 1 9rem; min-height: var(--toque); padding: .6rem .8rem; font-size: 16px; justify-content: center; text-align: center; }

/* Los dos botones de «¿niño o niña?»: en fila, que es una sola pregunta */
.eleccion.sexo { flex-direction: row; gap: .75rem; }
.eleccion.sexo button { flex: 1; justify-content: center; gap: .5rem; }


/* ---------------------------------------------------------------
   El botón de hablar, fijo abajo (Óscar, 13/09/2026)
   Vive en el pie de la pantalla, el mismo sitio que «Seguir»: nunca hay que
   bajar a buscarlo. Texto a la izquierda, micro a la derecha, a mano del
   pulgar. Compacto para no tapar la conversación.
   --------------------------------------------------------------- */
.pie-accion .dock-micro {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .5rem 1rem; margin: 0; padding: .85rem 1rem .85rem 1.1rem;
  background: var(--tarjeta); box-shadow: 0 -2px 18px rgba(17, 28, 45, .12);
}
.dock-micro .dock-texto { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.dock-micro .dock-texto p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.dock-micro .onda { height: 40px; justify-content: flex-start; }
.dock-micro .onda:not(.viva) { display: none; }
.dock-micro .dejar { justify-content: flex-start; padding: 0; }
.dock-micro .microfono { width: 96px; height: 96px; margin: 0; }
.dock-micro .microfono .ico { font-size: 42px; }
@media (max-width: 360px) {
  .dock-micro .microfono { width: 84px; height: 84px; }
  .dock-micro .dock-texto p { font-size: 17px; }
}

/* Leer, escribir y escuchar de verdad desde el B1 (13/09/2026). Texto largo
   a 19px con aire: legible a los 60 años sin gafas de cerca. */
.lectura-larga .titulo-lectura { font-size: 23px; font-weight: 800; line-height: 1.25; margin: .5rem 0 .25rem; }
.texto-largo { display: flex; flex-direction: column; gap: .9rem; margin-top: .75rem; }
.texto-largo p { font-size: 19px; line-height: 1.7; font-weight: 500; color: var(--tinta); cursor: pointer; max-width: 38rem; }
details.glosario, details.volver-texto { margin-top: 1rem; background: var(--lienzo); border-radius: 1rem; padding: .75rem 1rem; }
details.glosario summary, details.volver-texto summary { font-size: 17px; font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
details.glosario ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
details.glosario li { font-size: 17px; }
details.glosario li span { color: var(--tinta-suave); }
details.volver-texto .texto-largo p { font-size: 17px; }
.puntos-tarea { margin: .75rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.puntos-tarea li { font-size: 17px; line-height: 1.5; }
.escrito-largo { width: 100%; margin-top: .9rem; font: inherit; font-size: 19px; line-height: 1.55; padding: .9rem; border: 2px solid var(--contorno-claro); border-radius: 1rem; background: var(--fondo); color: var(--tinta); resize: vertical; min-height: 14rem; }
.contador { margin-top: .5rem; font-size: 17px; font-weight: 700; color: var(--tinta-suave); }
.contador[data-estado="corto"] { color: var(--ambar-hondo); }
.contador[data-estado="bien"] { color: var(--verde); }
ul.mejoras { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
ul.mejoras li { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: 18px; line-height: 1.45; background: var(--fondo); border-radius: .9rem; padding: .7rem .85rem; }
ul.mejoras s { color: var(--tinta-suave); }
ul.mejoras b { color: var(--verde); }
ul.mejoras span { flex-basis: 100%; font-size: 17px; color: var(--tinta); }
details.tarjeta > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.progreso-oir { height: 10px; border-radius: 9999px; background: var(--lienzo); margin-top: .9rem; overflow: hidden; }
.progreso-oir span { display: block; height: 100%; background: var(--verde); border-radius: inherit; }

/* ¿Hasta dónde llego con Loro? En la bienvenida, plegado y legible. */
details.hasta-donde { width: 100%; background: var(--tarjeta); border: 2px solid var(--lienzo); border-radius: var(--radio, 1.25rem); padding: .25rem 1rem; text-align: left; }
details.hasta-donde summary { list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 52px; font-size: 18px; font-weight: 700; cursor: pointer; }
details.hasta-donde summary::-webkit-details-marker { display: none; }
details.hasta-donde summary .flecha { margin-left: auto; transition: transform .2s; }
details.hasta-donde[open] summary .flecha { transform: rotate(180deg); }
details.hasta-donde ul { list-style: none; margin: .25rem 0 .9rem; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
details.hasta-donde li { font-size: 17px; line-height: 1.55; color: var(--tinta); }

/* Segunda acción que también importa (p. ej. «Probar 7 días gratis» junto a
   «Activar la suscripción»): verde por dentro del borde, sin competir en peso. */
.boton.secundario { background: var(--tarjeta); color: var(--verde); box-shadow: 0 4px 0 var(--verde-hondo), inset 0 0 0 3px var(--verde); }
.boton.secundario:active:not(:disabled) { box-shadow: 0 1px 0 var(--verde-hondo), inset 0 0 0 3px var(--verde); }

/* ---------- Sonidos difíciles, Mis apuntes y simulacros (15/09/2026) ---------- */
.eleccion.sonidos button, .eleccion.par-minimo button { gap: .9rem; }
.sonido-emoji { font-size: 30px; line-height: 1; min-width: 2.2rem; text-align: center; }
.sonido-texto { display: flex; flex-direction: column; gap: .15rem; }
.sonido-texto b { font-size: 20px; }
.sonido-texto small { font-size: 16px; font-weight: 600; color: var(--tinta-suave); }
.te-cuesta { color: var(--ambar-hondo); font-weight: 800; }
.eleccion.par-minimo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.eleccion.par-minimo button { flex-direction: column; justify-content: center; text-align: center; min-height: 7rem; }
.eleccion.par-minimo .sonido-texto b { font-size: 24px; }

.buscar-apuntes { display: flex; align-items: center; gap: .5rem; background: var(--tarjeta); border: 2px solid var(--contorno-claro); border-radius: var(--radio); padding: 0 1rem; min-height: var(--toque-comodo); }
.buscar-apuntes input { border: 0; outline: 0; background: none; font: inherit; font-size: 20px; font-weight: 600; width: 100%; min-height: var(--toque); color: var(--tinta); }
.buscar-apuntes:focus-within { border-color: var(--verde); outline: 3px solid var(--verde); outline-offset: 1px; }
.apuntes-etapa { font-size: 24px; font-weight: 800; margin-top: 1rem; color: var(--verde); }
.apunte-tema summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: 19px; list-style: none; min-height: var(--toque); }
.apunte-tema summary::-webkit-details-marker { display: none; }
.apunte-tema summary small { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--tinta-suave); }
.apunte-tema summary .emoji { font-size: 24px; }
.apunte-item { border-top: 1px solid var(--contorno-claro); padding: .9rem 0 .4rem; }
.apunte-es { font-size: 17px; color: var(--tinta-suave); font-weight: 600; }
.apunte-en { display: flex; align-items: center; gap: .4rem; background: none; border: 0; padding: .25rem 0; font: inherit; font-size: 21px; font-weight: 800; color: var(--verde); cursor: pointer; text-align: left; min-height: var(--toque); }
.apunte-explica { font-size: 18px; line-height: 1.55; margin-top: .2rem; }
.apunte-item small { font-size: 15px; font-weight: 700; color: var(--tinta-suave); }

.simulacro .partes-simulacro { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.partes-simulacro button { display: flex; align-items: center; gap: .75rem; text-align: left; background: var(--fondo); border: 2px solid var(--contorno-claro); border-radius: var(--radio); padding: .7rem 1rem; min-height: var(--toque-comodo); font: inherit; cursor: pointer; color: var(--tinta); }
.parte-texto { display: flex; flex-direction: column; flex: 1; }
.parte-texto b { font-size: 18px; }
.parte-texto small { font-size: 16px; font-weight: 600; color: var(--tinta-suave); }
.nota-simulacro { display: inline-block; font-size: 17px; font-weight: 800; padding: .15rem .6rem; border-radius: var(--pastilla); font-variant-numeric: tabular-nums; }
.nota-bien { background: var(--verde-papel); color: var(--verde); }
.nota-cerca { background: var(--ambar-papel); color: var(--ambar-hondo); }
.nota-floja { background: var(--lienzo); color: var(--tinta); }
.texto-huecos p { line-height: 2.3; }
.texto-huecos select.hueco, .texto-huecos input.hueco {
  font: inherit; font-size: 18px; font-weight: 700; color: var(--verde);
  background: var(--verde-papel); border: 2px solid var(--verde); border-radius: .6rem;
  padding: .15rem .4rem; min-height: 40px; max-width: 100%;
}
.texto-huecos input.hueco { width: 8.5em; height: auto; }
.hueco-libre { display: inline-flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.hueco-libre small { font-size: 14px; font-weight: 800; color: var(--ambar-hondo); letter-spacing: .03em; }
.correccion-huecos { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.correccion-huecos li { font-size: 18px; line-height: 1.45; padding-left: .8rem; border-left: 4px solid var(--contorno-claro); }
.correccion-huecos li.ok { border-color: var(--verde); }
.correccion-huecos li.mal { border-color: var(--ambar); }
.correccion-huecos li small { display: block; font-size: 16px; color: var(--tinta-suave); margin-top: .15rem; }

/* «Una empresa del Grupo Saneas» en la bienvenida (17/09/2026). */
.de-grupo { margin: -.25rem 0 .75rem; font-size: 16px; font-weight: 600; color: var(--tinta-suave); text-align: center; letter-spacing: .01em; }
.de-grupo b { color: var(--verde); font-weight: 800; }

/* Descargar la app de la tienda, en la bienvenida (03/10/2026). Letra grande y
   contraste alto: esto lo lee gente de sesenta años en la calle. */
.descargas { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 2px solid var(--contorno-claro); text-align: center; }
.descargas > p { margin: 0 0 .7rem; font-size: 18px; font-weight: 700; color: var(--tinta); }
/* Dos tiendas (08/10/2026: Google Play ya está viva). En el móvil una
   debajo de otra y del mismo ancho, para que ninguna parezca la buena. */
.descargas .tiendas { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
@media (min-width: 560px) { .descargas .tiendas { flex-direction: row; justify-content: center; } }
/* Insignias oficiales de las tiendas (08/10/2026). No se tocan: ni color, ni
   recorte, ni texto encima; las dos tiendas lo prohíben en sus normas.
   La de Apple llena su caja; la de Google trae 29 px de relleno transparente
   arriba y abajo (insignia de 192 dentro de una imagen de 250). Por eso la de
   Google lleva MÁS altura de imagen: así la parte visible mide lo mismo que la
   de Apple, y Google exige que su insignia no sea más pequeña que las demás.
   El `padding` del enlace garantiza el espacio libre alrededor y, de paso, un
   área de toque cómoda en el móvil. */
.descargas .tienda {
  display: flex; align-items: center; justify-content: center;
  padding: .35rem; text-decoration: none; border-radius: 12px;
}
.descargas .tienda img { display: block; width: auto; }
.descargas .tienda.apple img { height: 54px; }
.descargas .tienda.google img { height: 70px; }   /* 54 / 0,768 = 70 */
.descargas .tienda:active { transform: translateY(1px); }
.descargas .tienda:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.descargas .luego { margin: .7rem 0 0; font-size: 16px; font-weight: 600; color: var(--tinta-suave); }