/* Aspecto de app iOS · 14.09.2026
   Solo vale dentro de la app guardada en la pantalla de inicio. El script en línea del
   <head> pone la clase «es-app» en <html> cuando la página arranca en modo standalone
   (o con ?app=1 para probarla en Safari). Todos los selectores empiezan por html.es-app:
   en Safari normal y en escritorio esta hoja no cambia nada. El guard lo comprueba.
   Aurora y niebla solo son color de texto dentro de una superficie oscura, en reglas cuyo
   selector lleva .app-oscura; sobre claro, nunca (ver ESTILO.md). El guard lo comprueba.
   Cristal de iOS 26 (15.09.2026): lo que flota sobre contenido que se desplaza (pestañas, título
   compacto, barras superiores del lector y del detalle, velo de la barra inferior del lector y panel
   de corrección) es cristal translúcido con desenfoque real, en su propia sección. Los botones de la
   barra del lector y los del flujo son cristal sin desenfoque: relleno translúcido, brillo arriba y
   filete de 0,5 px. El desenfoque se escribe siempre con su valor literal y con el prefijo -webkit-
   delante: WebKit tiene abierto un fallo que ignora var() dentro de -webkit-backdrop-filter. El guard
   lo comprueba. Tokens --cc-* justo debajo, receta común en «Cristal de los controles» y reservas
   opacas al final. */

/* ---------- Tokens de la app: derivados de los de marca, sin colores nuevos ---------- */
html.es-app{
  --app-fondo:var(--nieve);
  --app-separador:rgba(14,27,38,.10);
  --app-glifo-suave:rgba(14,27,38,.34);
  --app-glifo-estado:rgba(14,27,38,.5);
  --app-tinte-fiordo:rgba(44,90,114,.10);
  --app-tinte-aurora:rgba(63,203,148,.22);
  --app-aurora-pasado:rgba(63,203,148,.42);
  --app-tinte-alerta:rgba(143,90,15,.10);
  --app-radio-control:14px;
  --app-radio-grupo:18px;
  --app-radio-azulejo:20px;
  --app-radio-tarjeta:24px;
  --app-radio-hoja:36px;
  --app-sombra-celda:0 0 0 .5px rgba(14,27,38,.05),0 6px 18px rgba(14,27,38,.04);
  --app-sombra-azulejo:0 0 0 .5px rgba(14,27,38,.05),0 8px 22px rgba(14,27,38,.06);
  --app-alto-min:44px;
  --app-alto-fila:52px;
  --app-alto-boton:50px;
  /* La barra de pestañas va a lo ancho, pegada al borde inferior y por encima del área segura, como
     en PASS (30.09.2026). */
  --app-pestanas-bajo:env(safe-area-inset-bottom,0px);
  --app-alto-pestanas:calc(68px + var(--app-pestanas-bajo));
  --app-seguro-arriba:env(safe-area-inset-top,0px);
  /* Lector (fase 3): barra superior fija y barra inferior Anterior · N de M · Continuar. */
  --app-alto-cab-lector:calc(var(--app-seguro-arriba) + 62px);
  --app-lector-bajo:max(10px,calc(env(safe-area-inset-bottom,0px) + 2px));
  --app-alto-lector:calc(64px + var(--app-lector-bajo));
  /* Práctica (fase 4): alto del panel de la corrección; app-ios.js lo pone mientras se ve. */
  --app-alto-correccion:0px;
  --app-radio-ejercicio:22px;
  --app-radio-ficha:12px;
  /* Marca de acierto (noche) y cruz de error (blanca) de las insignias de la práctica. */
  --app-i-bien:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%230E1B26' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --app-i-mal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --app-i-campo-bien:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%233FCB94'/%3E%3Cpath d='m7.2 12.4 3.2 3.2 6.4-6.6' fill='none' stroke='%230E1B26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --app-i-campo-mal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%238F5A0F'/%3E%3Cpath d='M8.3 8.3l7.4 7.4M15.7 8.3l-7.4 7.4' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Tamaño del texto de iOS: app-ios.js pone aquí la proporción respecto al ajuste de serie (1).
     Escala el texto de lectura, de la práctica, de las listas, de Larsito y del acceso, y lo que
     la web mide en rem. Las barras, los títulos grandes y los botones siguen en px. */
  --app-t:1;
  font-size:calc(100% * var(--app-t));
  background:var(--app-fondo);
  /* Toques y giro como en una app: sin el rectángulo gris de Safari al tocar (cada control ya
     tiene su :active) y sin que Safari agrande el texto al girar el iPhone, porque las barras
     tienen alturas fijas. */
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* Al moverse con el teclado, el elemento con el foco se coloca fuera de las barras fijas: la
     barra compacta arriba (también fuera de su borde que se desvanece) y las pestañas (con su
     degradado) abajo. Va en html porque es la raíz la que se desplaza. En una pieza, en una
     pantalla de detalle y con la corrección a la vista mandan las reglas de más abajo. */
  scroll-padding-top:calc(var(--app-seguro-arriba) + 66px);
  scroll-padding-bottom:calc(var(--app-alto-pestanas) + 24px);
}
/* ---------- Tokens de cristal (15.09.2026) ----------
   Solo blanco, los tokens de marca y sus transparencias. Las reservas del final los redefinen
   opacos para «Aumentar contraste», «Reducir transparencia» y los navegadores sin desenfoque. */
html.es-app{
  /* Claro en el flujo */
  --cc-claro:linear-gradient(180deg,rgba(255,255,255,.76) 0%,rgba(255,255,255,.6) 100%);
  --cc-claro-base:rgba(14,27,38,.035);
  --cc-claro-sombra:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -8px 12px -10px rgba(14,27,38,.07),0 0 0 .5px rgba(14,27,38,.15),0 1px 2px rgba(14,27,38,.05);
  /* Brillo especular sobre superficies teñidas */
  --cc-brillo:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 48%,rgba(255,255,255,0) 72%);
  /* Principal aurora: sin halo verde, sombra neutra suave */
  --cc-aurora-base:rgba(63,203,148,.92);
  --cc-aurora-sombra:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,255,255,.3),0 0 0 .5px rgba(14,27,38,.10),0 1px 2px rgba(14,27,38,.08),0 6px 14px -6px rgba(14,27,38,.16);
  /* Humo */
  --cc-brillo-humo:linear-gradient(180deg,rgba(243,245,244,.18) 0%,rgba(243,245,244,.04) 50%,rgba(243,245,244,0) 100%);
  --cc-humo-base:rgba(14,27,38,.92);
  --cc-humo-sombra:inset 0 1px 0 rgba(243,245,244,.26),inset 0 0 0 .5px rgba(243,245,244,.2),inset 0 -10px 16px -12px rgba(63,203,148,.45),0 0 0 .5px rgba(14,27,38,.2),0 2px 4px rgba(14,27,38,.10),0 8px 18px -8px rgba(14,27,38,.35);
  /* Controles sobre superficies noche (tarjeta del Inicio, cuaderno, «Marcar como hecha») */
  --cc-noche:linear-gradient(180deg,rgba(243,245,244,.2) 0%,rgba(243,245,244,.08) 100%);
  --cc-noche-sombra:inset 0 1px 0 rgba(243,245,244,.3),inset 0 -1px 0 rgba(243,245,244,.06),inset 0 0 0 1px rgba(243,245,244,.12),0 6px 16px -6px rgba(14,27,38,.6);
  /* Tinte fiordo de iconos y botones redondos de escucha */
  --cc-fiordo:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.12) 100%),rgba(44,90,114,.12);
  --cc-fiordo-sombra:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 .5px rgba(44,90,114,.2);
  /* Flotantes */
  --cc-v-barra:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.62) 100%);
  --cc-v-nieve:rgba(243,245,244,.84);
  --cc-v-panel:rgba(255,255,255,.94);
  --cc-v-boton:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.66) 100%);
  --cc-v-aurora:rgba(63,203,148,.88);
  --cc-v-humo:rgba(14,27,38,.88);
  --cc-sombra-flota:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 0 0 .5px rgba(255,255,255,.6),inset 0 -14px 22px -18px rgba(63,203,148,.45),0 0 0 .5px rgba(14,27,38,.10),0 12px 32px -8px rgba(14,27,38,.24);
  --cc-humo-flota:inset 0 1px 0 rgba(243,245,244,.24),inset 0 0 0 .5px rgba(243,245,244,.28),inset 0 -12px 18px -14px rgba(63,203,148,.5),0 12px 30px -8px rgba(14,27,38,.4);
  --cc-aurora-flota:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -1px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,255,255,.3),0 0 0 .5px rgba(14,27,38,.08),0 2px 4px rgba(14,27,38,.06),0 12px 28px -10px rgba(14,27,38,.28);
  /* Hoja inferior: cristal espeso sin desenfoque */
  --cc-hoja:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 140px);
  /* Borde de luz del cristal líquido (anillo de 1 px) */
  --cc-luz:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.25) 28%,rgba(255,255,255,0) 50%,rgba(255,255,255,.2) 74%,rgba(255,255,255,.8) 100%);
  --cc-luz-humo:linear-gradient(135deg,rgba(243,245,244,.5) 0%,rgba(243,245,244,.1) 30%,rgba(243,245,244,0) 52%,rgba(63,203,148,.6) 100%);
  /* Respuesta al toque: cada familia pone la suya y una sola regla :active la aplica, nunca en lo
     que lleva backdrop-filter. */
  --cc-toque-claro:brightness(.96);
  --cc-toque-pri:brightness(1.07) saturate(1.06);
  --cc-toque-osc:brightness(1.35);
  /* Foco: anillo doble que se ve sobre claro y sobre noche */
  --cc-foco:0 0 0 2px var(--nieve),0 0 0 4px var(--fiordo);
  --cc-foco-noche:0 0 0 2px var(--noche),0 0 0 4px var(--nieve);
  --cc-foco-flota:0 0 0 2px var(--nieve),0 0 0 4px var(--noche);
  /* Tarjetas pulsables, grupos de lista, fichas, opciones y campos: cristal sin desenfoque. Blanco
     translúcido con brillo arriba y un filete de 0,5 px; las fichas y las opciones van sobre un
     velo noche muy tenue, para que se lean como piezas que se tocan. */
  --cc-tarjeta:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.64) 100%);
  --cc-tarjeta-sombra:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 .5px rgba(14,27,38,.07),0 10px 26px -10px rgba(14,27,38,.16);
  --cc-grupo:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.76) 100%);
  --cc-grupo-sombra:inset 0 1px 0 #fff,0 0 0 .5px rgba(14,27,38,.07),0 10px 26px -12px rgba(14,27,38,.14);
  --cc-ficha:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.7) 100%),rgba(14,27,38,.05);
  --cc-ficha-sombra:inset 0 1px 0 #fff,0 1px 1.5px rgba(14,27,38,.08),0 4px 10px -3px rgba(14,27,38,.12);
  --cc-opcion:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 100%),rgba(14,27,38,.04);
  --cc-opcion-sombra:inset 0 1px 0 #fff,0 1px 1.5px rgba(14,27,38,.06),0 6px 14px -6px rgba(14,27,38,.12);
  --cc-campo:rgba(255,255,255,.92);
  /* Superficies noche (tarjeta del Inicio, cuaderno, bloque de «Marcar como hecha», kit oral):
     borde de luz tenue y sombra que las despega del fondo. */
  --cc-noche-tarjeta:inset 0 1px 0 rgba(243,245,244,.1),inset 0 0 0 .5px rgba(243,245,244,.08),0 18px 40px -12px rgba(14,27,38,.4);
  --cc-toque-noche:brightness(1.12);
  /* Casillas de la lista de comprobación: perla con borde noche al 50 %; marcada, aurora con brillo. */
  --cc-casilla:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 100%),rgba(14,27,38,.04);
  --cc-casilla-sombra:inset 0 1px 0 #fff,inset 0 0 0 1.5px rgba(14,27,38,.5),0 1px 2px rgba(14,27,38,.08);
  --cc-casilla-si-sombra:inset 0 1px 0 rgba(255,255,255,.66),inset 0 0 0 .5px rgba(255,255,255,.3),0 0 0 .5px rgba(14,27,38,.18),0 2px 5px -2px rgba(14,27,38,.22);
  /* Tinte ámbar de los iconos de fila que borran algo (la fila «Borrar progreso» de Larsito). */
  --cc-alerta:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.12) 100%),rgba(143,90,15,.12);
  --cc-alerta-sombra:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 .5px rgba(143,90,15,.24);
}
/* :has() dentro de :where(): la especificidad queda como la de html.es-app y manda el orden. Un
   Safari sin :has() descarta solo estas reglas y se queda con la general. */
html.es-app:where(:has(> body.modo-lector)){scroll-padding-top:calc(var(--app-alto-cab-lector) + 26px);scroll-padding-bottom:calc(var(--app-alto-lector) + 30px)}
html.es-app:where(:has(> body.app-detalle)){scroll-padding-top:calc(var(--app-seguro-arriba) + 80px)}
html.es-app:where(:has(> body.app-detalle-sin-pestanas)){scroll-padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
/* Las capas decorativas de la web (el degradado que se mueve y el ruido en multiply) quedan
   debajo de las barras translúcidas: Safari rehacía el desenfoque en cada fotograma, también
   con la app quieta. En la app el degradado se queda quieto y el ruido no se pinta, como en la
   propuesta. El lector ya las retiraba (lector.css). */
html.es-app body::before{animation:none}
html.es-app body::after{display:none}
/* En iOS el :hover se queda pegado tras tocar. En la app los botones ghost son cristal con el borde
   transparente, así que el :hover de la web no puede pintar un filete que antes del toque no estaba.
   Las tarjetas y opciones de la web que se desplazan con :hover tampoco se quedan movidas. */
@media (hover:none){
  html.es-app .btn.ghost:hover,
  html.es-app .marcar .btn.ghost:hover,
  html.es-app .ejercicio .btn.ghost:hover,
  html.es-app .resumen-practica .btn.ghost:hover,
  html.es-app .seccion-bloques .voz-bloque:hover,
  html.es-app .pronunciacion .pronunciacion-modelo:hover{border-color:transparent}
  html.es-app .nav-pieza .nav-card:hover,
  html.es-app .practica-llamada:hover,
  html.es-app .opcion-mc:hover,
  html.es-app .ficha:hover,
  html.es-app .tarjeta:hover{transform:none}
}

/* ---------- Sin cabecera ni pie de web ----------
   La navegación de tres enlaces se sustituye por las pestañas. Queda una fila con la
   marca y el estado (Muestra o Completo), que se desplaza con el contenido. */
html.es-app body > header{position:relative;top:auto;background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.es-app body > header .head-nav{display:none}
html.es-app body > header .head-inner,
html.es-app body > header .wrap{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:calc(var(--app-seguro-arriba) + 4px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
html.es-app body > header .wrap{width:auto;margin:0}
html.es-app body > header .head-der{width:auto}
html.es-app body > header .marca,
html.es-app body > header .brand{margin:0;min-height:44px}
html.es-app body > header .marca span{display:inline;font-size:.9rem}
/* La pastilla de estado (Muestra o Completo) con la medida de .app-pastilla. */
html.es-app body > header .estado{font-size:11px;line-height:14px;letter-spacing:.12em;padding:6px 10px}
html.es-app body > footer{display:none}
/* «Saltar al contenido» solo aparece con el teclado. En la app es una cápsula de cristal humo de 44 px
   por debajo del área segura, con el texto nieve y el anillo de foco sumado a su sombra. La web decide
   cuándo se ve (opacidad y recorte con :focus); aquí solo cambia su aspecto. */
html.es-app .skip{top:calc(var(--app-seguro-arriba) + 8px);left:max(12px,env(safe-area-inset-left,0px));display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--cc-brillo-humo),var(--cc-humo-base);box-shadow:var(--cc-humo-sombra);color:var(--nieve);text-decoration:none;-webkit-tap-highlight-color:transparent}
html.es-app .skip:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px;box-shadow:var(--cc-foco),var(--cc-humo-sombra)}

/* En una pieza la fila de marca se retira: la cabecera fija solo lleva la barra superior del
   lector (atrás, título y avance). Ver «Lector por apartados» más abajo. */
html.es-app body.modo-lector > header.site-header{position:fixed;top:0;left:0;right:0;height:auto;padding-top:var(--app-seguro-arriba);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html.es-app body.modo-lector > header.site-header .head-inner{display:none}
/* Barras superiores del lector y de las pantallas de detalle: la cabecera queda transparente y el
   esmerilado va en su ::before, que baja 18 px más y se desvanece con una máscara, como el borde de
   desplazamiento de iOS 26. Así el botón atrás y el título no quedan dentro de un elemento con
   desenfoque. El degradado empieza en nieve maciza y llega al esmerilado 10 px por debajo del área
   segura: con apple-mobile-web-app-status-bar-style «default» la franja de la barra de estado es
   opaca, y un bloque noche que pasara por debajo marcaría una línea recta justo bajo ella. */
html.es-app body.modo-lector > header.site-header::before,
html.es-app body.app-detalle > header::before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:-18px;pointer-events:none;background:linear-gradient(to bottom,var(--nieve) 0,var(--cc-v-nieve) calc(var(--app-seguro-arriba) + 10px),var(--cc-v-nieve) calc(100% - 28px),rgba(243,245,244,0) 100%);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent)}

/* ---------- Compensación: nada queda debajo de las pestañas ---------- */
html.es-app #app,
html.es-app #contenido{padding-bottom:calc(var(--app-alto-pestanas) + 40px)}
/* Los márgenes se suman al scroll-padding de html (arriba): el total es de las pestañas más 90 px
   abajo y de 124 px (114 en la pronunciación) arriba, los 110 (100) de la web más el borde que se
   desvanece de la barra compacta. */
html.es-app .ejercicio,
html.es-app .practica-pieza,
html.es-app .resumen-practica,
html.es-app .pronunciacion{scroll-margin-bottom:66px}
html.es-app .ejercicio,
html.es-app .practica-pieza,
html.es-app .resumen-practica{scroll-margin-top:58px}
html.es-app .pronunciacion{scroll-margin-top:48px}
/* La corrección de un ejercicio y su «Continuar», también en el repaso, que lleva pestañas:
   practica.js desplaza la corrección a la vista y le da el foco al botón. Sin margen, una
   corrección corta al pie de la pantalla no se movía y «Continuar» quedaba bajo las pestañas.
   El scroll-padding de html ya reserva las pestañas y 24 px. En el lector manda la regla de su
   barra (más abajo). */
html.es-app .feedback,
html.es-app .feedback .btn{scroll-margin-bottom:0}

/* ---------- Barra de pestañas ---------- */
html.es-app .app-barra-inferior{position:fixed;left:0;right:0;bottom:0;z-index:90;height:var(--app-alto-pestanas);pointer-events:none}
/* La barra ya es opaca casi del todo: no necesita velo debajo. */
html.es-app .app-barra-inferior::before{content:none}
/* Barra de pestañas común a curso, Larsito y acceso (30.09.2026): una banda nieve a lo ancho,
   casi opaca y con desenfoque, con un filete fino arriba. El icono de la pestaña activa va sobre una
   pastilla aurora, como en PASS. */
html.es-app .app-pestanas{position:absolute;left:0;right:0;bottom:0;margin:0;width:auto;height:var(--app-alto-pestanas);border-radius:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:4px;padding:6px max(12px,env(safe-area-inset-right,0px)) var(--app-pestanas-bajo) max(12px,env(safe-area-inset-left,0px));pointer-events:auto;isolation:isolate;background:rgba(243,245,244,.94);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-top:1px solid rgba(14,27,38,.08);box-shadow:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Borde de luz del cristal líquido: un anillo de 1 px, más brillante arriba a la izquierda y abajo a
   la derecha, con máscara en ::after y z-index -1 dentro del control. Lo llevan la cápsula de
   pestañas y los tres botones de la barra del lector. Si un navegador no combinara las máscaras, el
   degradado quedaría por debajo del texto, nunca encima. */
html.es-app .app-lector-barra .lector-continuar-interior > button::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;padding:1px;border-radius:inherit;background:var(--cc-luz);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
html.es-app .app-pestana{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:56px;border-radius:16px;color:var(--tinta-suave);font-family:var(--sg);font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.01em;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
html.es-app .app-pestana span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app .app-pestana svg{box-sizing:border-box;width:58px;height:32px;padding:4px 17px;border-radius:999px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:background-color .2s var(--ease)}
html.es-app .app-pestana[aria-current="page"]{color:var(--noche);font-weight:700}
html.es-app .app-pestana[aria-current="page"] svg{stroke-width:2.1;background:rgba(63,203,148,.26)}
/* Al tocar se oscurece un poco la pastilla del icono; es un cambio de fondo, no un movimiento. */
html.es-app .app-pestana:active svg{background:rgba(14,27,38,.07)}
html.es-app .app-pestana[aria-current="page"]:active svg{background:rgba(63,203,148,.38)}
html.es-app .app-pestana:focus-visible{outline:2px solid var(--fiordo);outline-offset:-2px;box-shadow:none}
/* Una pieza abierta es una pantalla de detalle, como en iOS: las pestañas se retiran y la
   barra del lector ocupa su sitio. Se vuelve con el botón atrás de la barra superior. */
html.es-app body.modo-lector .app-barra-inferior{display:none}
/* Con el teclado abierto las barras inferiores se retiran para no tapar el campo. */
html.es-app.app-teclado .app-barra-inferior,
html.es-app body.lector-teclado .app-barra-inferior{display:none}

/* ---------- Título grande que se compacta al desplazar ----------
   La barra compacta es esmerilado nieve con el borde inferior desvanecido por una máscara en el
   mismo elemento, así su transición de opacidad sigue funcionando. Crece 18 px por abajo y el título
   queda centrado en sus 44 px de siempre. Arriba empieza en nieve maciza, como las barras del lector. */
html.es-app .app-titulo-grande{font-family:var(--sg);font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.03em;color:var(--noche)}
html.es-app .app-barra-compacta{position:fixed;top:0;left:0;right:0;z-index:85;height:calc(62px + var(--app-seguro-arriba));padding:var(--app-seguro-arriba) 48px 18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,var(--nieve) 0,var(--cc-v-nieve) calc(var(--app-seguro-arriba) + 10px),var(--cc-v-nieve) calc(100% - 28px),rgba(243,245,244,.2) 100%);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s linear .2s}
html.es-app .app-barra-compacta.visible{opacity:1;visibility:visible;transition:opacity .2s var(--ease)}
html.es-app .app-barra-compacta b{font-family:var(--sg);font-size:17px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--noche);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app body.modo-lector .app-barra-compacta{display:none}

/* ---------- Controles y listas agrupadas (piezas comunes para las pantallas) ----------
   La forma de los botones va aquí; su cristal, en «Cristal de los controles», al final. */
html.es-app .btn{min-height:var(--app-alto-min)}
html.es-app .app-boton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--app-alto-boton);padding:0 18px;border:0;font-family:var(--sg);font-size:17px;font-weight:700;letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),filter .18s}
html.es-app .app-boton:active{transform:scale(.97)}
html.es-app .app-circulo{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
html.es-app .app-circulo:active{transform:scale(.92)}
html.es-app .app-circulo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-pastilla{display:inline-block;font-family:var(--sg);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fiordo);background:var(--app-tinte-fiordo);border-radius:999px;padding:6px 10px;white-space:nowrap}
html.es-app .app-grupo-cab{margin:22px 4px 7px;font-family:var(--sg);font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-grupo{background:var(--cc-grupo);border-radius:var(--app-radio-grupo);overflow:hidden;box-shadow:var(--cc-grupo-sombra)}
html.es-app .app-pie-grupo{margin:7px 4px 0;font-family:var(--sg);font-size:calc(13px * var(--app-t));line-height:calc(18px * var(--app-t));font-weight:500;color:var(--tinta-suave)}
html.es-app .app-fila{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:var(--app-alto-fila);padding:8px 14px 8px 12px;border:0;background:transparent;color:var(--noche);font-family:var(--sg);font-size:calc(16.5px * var(--app-t));line-height:calc(21px * var(--app-t));font-weight:500;letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
html.es-app .app-fila + .app-fila::before{content:"";position:absolute;top:0;left:var(--app-sangria,60px);right:0;height:.5px;background:var(--app-separador)}
html.es-app .app-fila:active{background:rgba(14,27,38,.06)}
/* El anillo de foco de una fila va 4 px hacia dentro con esquinas de 12 px: en la primera y la última
   fila de un grupo sigue la curva del grupo en lugar de quedar recortado en diagonal. */
html.es-app .app-fila:focus-visible{outline:2px solid var(--fiordo);outline-offset:-4px;border-radius:12px}
html.es-app .app-fila-icono{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--cc-fiordo);box-shadow:var(--cc-fiordo-sombra);color:var(--fiordo);font-size:11.5px;font-weight:700;letter-spacing:.02em}
html.es-app .app-fila-icono svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-fila-txt{flex:1;min-width:0}
html.es-app .app-fila-titulo{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app .app-fila-sub{display:block;margin-top:1px;font-size:calc(13.5px * var(--app-t));line-height:calc(18px * var(--app-t));color:var(--tinta-suave);white-space:normal}
html.es-app .app-fila.cerrada .app-fila-titulo{color:var(--tinta-suave)}
html.es-app .app-fila[aria-current="step"],
html.es-app .app-fila.actual{background:var(--app-tinte-aurora)}
html.es-app .app-fila.actual::before,
html.es-app .app-fila.actual + .app-fila::before,
html.es-app .app-fila[aria-current="step"]::before,
html.es-app .app-fila[aria-current="step"] + .app-fila::before{display:none}
html.es-app .app-fila-nota{flex:none;font-size:13px;font-weight:700;color:var(--fiordo)}
html.es-app .app-chevron,
html.es-app .app-candado{flex:none;color:var(--app-glifo-suave);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-chevron{width:9px;height:15px;stroke-width:2.2}
/* El candado indica un estado: sobre blanco pasa de 3:1 (WCAG 1.4.11). La flecha sigue suave. */
html.es-app .app-candado{width:16px;height:16px;stroke-width:2.1;color:var(--app-glifo-estado)}

/* ---------- Hoja inferior (<dialog> modal) ----------
   Cristal espeso sin desenfoque: brillo blanco arriba sobre nieve maciza, con canto y filete de
   0,5 px. Va sobre un velo oscuro, donde el desenfoque no aporta nada, y así se evita en WebKit la
   combinación de desenfoque, overflow:hidden, radio de 36 px y animación con transform. */
html.es-app .app-hoja{position:fixed;z-index:100;top:auto;right:8px;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 26px));left:8px;width:auto;max-width:560px;max-height:calc(100% - var(--app-seguro-arriba) - 40px);margin:0 auto;padding:0;border:0;border-radius:var(--app-radio-hoja);background:var(--cc-hoja),var(--nieve);color:var(--noche);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(255,255,255,.7),0 0 0 .5px rgba(14,27,38,.08),0 -10px 40px rgba(14,27,38,.2);overflow:hidden;overscroll-behavior:contain}
html.es-app .app-hoja:not([open]){display:none}
/* Abierta, la hoja es una columna: la cabecera no se mueve y solo el cuerpo se desplaza
   cuando el contenido no cabe en la altura máxima. */
html.es-app .app-hoja[open]{display:flex;flex-direction:column;animation:app-hoja-sube .42s cubic-bezier(0.16,1,0.3,1)}
/* La entrada corre una sola vez por apertura: después «asentada» la retira, y tocar o
   arrastrar la cabecera ya no la vuelve a lanzar. «cerrando» va detrás para ganar. */
html.es-app .app-hoja.asentada{animation:none}
html.es-app .app-hoja.cerrando{animation:app-hoja-baja .24s ease-in forwards}
html.es-app .app-hoja.arrastrando{transition:none}
html.es-app .app-hoja.soltando{transition:transform .28s cubic-bezier(0.16,1,0.3,1)}
html.es-app .app-hoja::backdrop{background:rgba(14,27,38,.34)}
html.es-app .app-hoja[open]::backdrop{animation:app-velo-aparece .3s ease-out}
html.es-app .app-hoja.asentada::backdrop{animation:none}
html.es-app .app-hoja.cerrando::backdrop,
html.es-app .app-hoja.descartando::backdrop{animation:app-velo-desaparece .24s ease-in forwards}
html.es-app .app-hoja-velo{position:fixed;inset:0;z-index:99;background:rgba(14,27,38,.34)}
html.es-app .app-hoja-marco{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:7px 0 max(6px,calc(env(safe-area-inset-bottom,0px) - 20px))}
html.es-app .app-hoja-agarre{flex:none;touch-action:none;cursor:grab}
html.es-app .app-hoja-asa{width:38px;height:5px;border-radius:3px;background:rgba(14,27,38,.22);margin:0 auto}
html.es-app .app-hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 0 22px}
html.es-app .app-hoja-textos{min-width:0}
html.es-app .app-hoja-cab h2{margin:0;font-family:var(--sg);font-size:20px;line-height:25px;font-weight:700;letter-spacing:-.02em;color:var(--noche)}
html.es-app .app-hoja-cab h2:focus{outline:none}
html.es-app .app-hoja-cab p{margin:1px 0 0;font-family:var(--sg);font-size:13.5px;line-height:18px;font-weight:500;color:var(--tinta-suave)}
html.es-app .app-hoja-cerrar{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:rgba(14,27,38,.78);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.es-app .app-hoja-cerrar span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-claro-sombra),0 2px 6px -2px rgba(14,27,38,.12)}
html.es-app .app-hoja-cerrar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
html.es-app .app-hoja-cerrar:focus-visible{outline:2px solid var(--fiordo);outline-offset:-2px;border-radius:50%}
html.es-app .app-hoja.sin-anillo .app-hoja-cerrar:focus-visible{outline:none}
/* Cuando la lista no cabe, el cuerpo se desvanece arriba y abajo al desplazarse, como el resto del
   cromo (las barras y el cuerpo del panel de corrección), en lugar de cortar filas en seco bajo la
   cabecera. Las dos franjas caen en el relleno del cuerpo (14 px arriba y 12 px abajo, que salen del
   relleno inferior del marco), así que en reposo no cambia nada. */
html.es-app .app-hoja-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 12px 12px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 12px),transparent)}
html.es-app .app-hoja-cuerpo .app-grupo{background:rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 .5px rgba(14,27,38,.06)}
html.es-app.app-hoja-abierta,
html.es-app.app-hoja-abierta body{overflow:hidden}


/* «Apariencia» en la hoja «Más» (13.10.2026): título de fila y, debajo, el control segmentado de los
   tipos de ejercicio con Automático, Claro y Oscuro. */
html.es-app .app-apariencia{padding:12px 14px 12px}
html.es-app .app-apariencia-titulo{margin:0;font-family:var(--sg);font-size:calc(16.5px * var(--app-t));line-height:calc(21px * var(--app-t));font-weight:500;letter-spacing:-.01em;color:var(--noche)}
html.es-app .app-apariencia-sub{margin:2px 0 0;font-family:var(--sg);font-size:calc(13.5px * var(--app-t));line-height:calc(18px * var(--app-t));color:var(--tinta-suave)}

/* ---------- Inicio y Biblioteca (fase 2) ----------
   app.js pinta estas dos pantallas con su propio DOM dentro de #app. El margen negativo
   deja el canal de 16 px de la propuesta sin tocar el de 24 px del lector. */
html.es-app .app-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.es-app .app-pantalla{margin:0 -8px;padding:2px 0 0;font-family:var(--sg);color:var(--noche);line-height:1.35}
html.es-app .app-pantalla .app-titulo-grande{margin:0}
html.es-app .app-subtitulo{margin:1px 0 0;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(20px * var(--app-t));font-weight:400;color:var(--tinta-suave)}
html.es-app .app-lista .app-fila-titulo{white-space:normal}
html.es-app div.app-fila{cursor:default}
html.es-app div.app-fila:active{background:transparent}
html.es-app a.app-fila{color:var(--noche)}
html.es-app .app-fila-icono.destacada{background:var(--cc-brillo),var(--aurora);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 .5px rgba(255,255,255,.3);color:var(--noche)}
html.es-app .app-fila-icono.doble{flex-direction:column;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:12px;letter-spacing:0}
html.es-app .app-fila-bajar{flex:none;width:20px;height:20px;color:var(--fiordo);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Control segmentado entre los dos cursos. Cada enlace ocupa los 44 px de alto del control; la
   pastilla del segmento activo va en ::before, 3 px hacia dentro del borde del control, así que se
   ve igual que con un relleno de 3 px en el contenedor. El carril hundido y la pastilla de cristal
   van en «Cristal de los controles». */
html.es-app .app-segmentado{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:10px;padding:0;border-radius:999px}
html.es-app .app-segmentado a{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:999px;font-family:var(--sg);font-size:14.5px;line-height:1.15;font-weight:500;color:var(--tinta-suave);text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .2s}
html.es-app .app-segmentado a::before{content:"";position:absolute;z-index:-1;top:3px;right:3px;bottom:3px;left:3px;border-radius:999px;background:transparent;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
html.es-app .app-segmentado a:first-of-type{padding-left:12px}
html.es-app .app-segmentado a:last-of-type{padding-right:12px}
html.es-app .app-segmentado a[aria-current="page"]{color:var(--noche);font-weight:700}
html.es-app .app-segmentado a:focus-visible{outline:2px solid var(--fiordo);outline-offset:-2px}
html.es-app .app-objetivo{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin:8px 4px 0}
html.es-app .app-enlace{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--sg);font-size:15px;line-height:1.25;font-weight:700;letter-spacing:-.005em;color:var(--fiordo);text-decoration:none;-webkit-tap-highlight-color:transparent}
html.es-app .app-enlace .app-chevron{width:8px;height:13px;color:var(--fiordo)}
html.es-app .app-objetivo .app-enlace{font-size:14px}

/* Tarjeta oscura del siguiente paso: la única superficie oscura del Inicio. */
html.es-app .app-hoy{margin-top:14px;border-radius:var(--app-radio-tarjeta);overflow:hidden;background:var(--noche);color:var(--nieve);box-shadow:var(--cc-noche-tarjeta)}
html.es-app .app-hoy-media{position:relative;height:104px;overflow:hidden;background:var(--blanco)}
html.es-app .app-hoy-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--aurora)}
html.es-app .app-hoy-media img{position:absolute;left:50%;top:-10px;width:200px;max-width:none;height:auto;transform:translateX(-50%);pointer-events:none}
html.es-app .app-hoy-cuerpo{padding:15px 18px 16px}
html.es-app .app-oscura .app-hoy-eti{margin:0;font-family:var(--sg);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--aurora)}
html.es-app .app-hoy h2{margin:6px 0 0;font-family:var(--sg);font-size:23px;line-height:27px;font-weight:700;letter-spacing:-.025em;color:var(--nieve)}
html.es-app .app-oscura .app-hoy-meta{margin:6px 0 0;font-family:var(--sg);font-size:13px;line-height:17px;font-weight:500;letter-spacing:.01em;color:var(--niebla)}
html.es-app .app-avance{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px}
html.es-app .app-segs{flex:1 1 110px;display:flex;gap:4px}
html.es-app .app-segs i{flex:1;height:5px;border-radius:3px;background:rgba(243,245,244,.16)}
html.es-app .app-segs i.pasado{background:var(--app-aurora-pasado)}
html.es-app .app-segs i.aqui{background:var(--aurora)}
html.es-app .app-oscura .app-avance-txt{margin:0;max-width:100%;font-size:13.5px;line-height:18px;font-weight:400;color:var(--niebla)}
html.es-app .app-oscura .app-hoy-cuerpo > .app-avance-txt{margin-top:14px}
html.es-app .app-hoy .app-avance-txt b{font-weight:700;color:var(--nieve)}
html.es-app .app-hoy .app-boton{--cc-s:var(--cc-aurora-sombra);margin-top:14px;box-shadow:var(--cc-s)}
html.es-app .app-boton-flecha{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-repaso{margin-top:14px}
html.es-app .app-progreso{margin-top:10px}

/* Botón «Más» al final del Inicio (desde el 13.10.2026, redondo y solo con los tres puntos) y su hoja,
   con los enlaces que salen del curso plegados en grupos que se abren de uno en uno. */
html.es-app .app-mas{margin-top:28px;display:flex;justify-content:center}
html.es-app .app-mas-boton{width:44px;height:44px;background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra);color:var(--fiordo)}
html.es-app .app-plegables{--app-sangria:16px}
html.es-app .app-plegable > summary{list-style:none}
html.es-app .app-plegable > summary::-webkit-details-marker{display:none}
html.es-app .app-plegable + .app-plegable > summary::before,
html.es-app .app-plegable-cuerpo > .app-fila:first-child::before{content:"";position:absolute;top:0;left:var(--app-sangria);right:0;height:.5px;background:var(--app-separador)}
html.es-app .app-plegable-flecha{transition:transform .2s var(--ease)}
html.es-app .app-plegable[open] .app-plegable-flecha{transform:rotate(90deg)}
html.es-app .app-plegable-cuerpo{background:rgba(14,27,38,.03)}
html.es-app .app-plegable-cuerpo .app-fila{padding-left:28px}
@media (prefers-reduced-motion:reduce){html.es-app .app-plegable-flecha{transition:none}}
html.es-app .app-fila-fuera{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;color:var(--fiordo)}
html.es-app .app-mas-hoja .app-pie-grupo{margin-top:12px;max-width:none}

/* Lecciones (#biblioteca): un grupo blanco por sección, como las listas de PASS (30.09.2026). El código
   va en una pastilla con tinte fiordo; lo cerrado lleva el candado. Hasta el 22.09.2026 estas reglas
   vivían en curso/teoria.css. */
html.es-app .app-biblioteca .app-grupo-cab{margin:28px 4px 8px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-biblioteca .app-fila{align-items:center;padding:12px 14px 12px 12px;gap:12px}
html.es-app .app-biblioteca .app-fila+.app-fila::before{left:70px}
html.es-app .app-biblioteca .app-fila-icono{width:auto;min-width:46px;height:30px;padding:0 8px;border-radius:999px;background:var(--app-tinte-fiordo);box-shadow:none;font-size:12px;font-weight:700}
html.es-app .app-biblioteca .app-fila-icono.doble{height:auto;min-height:30px;padding:4px 8px;border-radius:12px;gap:1px}
html.es-app .app-biblioteca .app-fila-titulo{font-weight:500;line-height:1.35}
html.es-app .app-biblioteca .app-pie-grupo{margin-left:4px;margin-right:4px}
html.es-app .app-biblioteca .app-fila-sub{margin-top:3px;font-size:12.5px}
/* Lección hecha (13.10.2026): la pastilla del número pasa a aurora, como la casilla hecha de «Hoy». */
html.es-app .app-biblioteca .app-fila-icono.hecha{background:var(--aurora);color:var(--noche)}
/* Cabecera de Lecciones (13.10.2026): el título a la izquierda y, a la derecha, Ejercicios y Larsito,
   que hasta entonces eran pestañas. Dos botones secundarios apilados, con su icono de pestaña. */
html.es-app .app-biblioteca-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
html.es-app .app-biblioteca-textos{flex:1;min-width:0}
html.es-app .app-biblioteca-accesos{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:none;margin-top:2px}
html.es-app .app-acceso.nx-sec{justify-content:flex-start;gap:8px;min-height:44px;padding:8px 16px 8px 12px;font-size:calc(14px * var(--app-t));font-weight:600}
html.es-app .app-acceso svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--fiordo);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

html.es-app .app-kicker-mini{display:block;margin-top:8px;font-size:10.5px;line-height:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-candado-circulo{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cc-fiordo);box-shadow:var(--cc-fiordo-sombra);color:var(--fiordo)}
html.es-app .app-candado-circulo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* Estado de la muestra al final del Inicio. */
html.es-app .app-estado{margin:14px 4px 0}
html.es-app .app-estado-linea{margin:0;font-family:var(--sg);font-size:calc(13.5px * var(--app-t));line-height:calc(19px * var(--app-t));font-weight:400;color:var(--tinta-suave)}
html.es-app .app-estado-linea b{font-weight:700;color:var(--alerta)}
/* «Reintentar»: la app de la pantalla de inicio no tiene botón de recargar ni el gesto de tirar hacia abajo. */
html.es-app .app-estado .app-boton{margin-top:10px}

/* Cuaderno en PDF, arriba de la Biblioteca. */
html.es-app .app-cuaderno-bloque{margin-top:16px}
html.es-app .app-cuaderno{--cc-toque:var(--cc-toque-noche);display:flex;align-items:center;gap:14px;width:100%;padding:14px;border:0;border-radius:var(--app-radio-azulejo);background:var(--noche);color:var(--nieve);box-shadow:var(--cc-noche-tarjeta);font-family:var(--sg);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
html.es-app div.app-cuaderno{cursor:default}
html.es-app a.app-cuaderno:active,
html.es-app button.app-cuaderno:active{transform:scale(.98)}
html.es-app a.app-cuaderno:focus-visible,
html.es-app button.app-cuaderno:focus-visible{outline:2px solid var(--fiordo);outline-offset:3px}
html.es-app .app-cuaderno-doc{flex:none;position:relative;width:44px;height:54px;padding-bottom:8px;border-radius:6px 14px 6px 6px;background:var(--nieve);display:grid;place-items:end center}
html.es-app .app-cuaderno-doc::before{content:"";position:absolute;left:8px;right:12px;top:12px;height:2px;background:rgba(14,27,38,.22);box-shadow:0 6px 0 rgba(14,27,38,.22),0 12px 0 rgba(14,27,38,.22)}
html.es-app .app-cuaderno-doc b{padding:1px 5px;border-radius:4px;background:var(--aurora);font-size:10px;line-height:14px;font-weight:700;letter-spacing:.08em;color:var(--noche)}
html.es-app .app-cuaderno-txt{flex:1;min-width:0}
html.es-app .app-oscura .app-cuaderno-k{display:block;font-size:11px;line-height:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--aurora)}
html.es-app .app-cuaderno-t{display:block;margin-top:2px;font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.015em;color:var(--nieve)}
html.es-app .app-oscura .app-cuaderno-s{display:block;margin-top:2px;font-size:13.5px;line-height:18px;font-weight:400;color:var(--niebla)}
html.es-app .app-cuaderno-accion{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--cc-brillo),var(--aurora);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 .5px rgba(255,255,255,.3),0 4px 10px -4px rgba(14,27,38,.4);color:var(--noche)}
html.es-app .app-cuaderno-accion svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-cuaderno-accion.suave{background:var(--cc-noche);box-shadow:var(--cc-noche-sombra);color:var(--nieve)}
html.es-app .app-cuaderno-accion.suave svg{width:9px;height:15px}
html.es-app .app-cuaderno-hoja{padding-bottom:4px}
html.es-app .app-cuaderno-hoja .app-pie-grupo{margin:9px 10px 4px}
html.es-app .app-cuaderno-hoja .app-boton{width:calc(100% - 20px);margin:8px 10px 6px}
/* Si la lista de tomos no carga, «Reintentar» es la única acción de la hoja: va como principal aurora.
   En el Inicio sigue en cristal claro, porque la muestra funciona igual sin él. */
html.es-app .app-cuaderno-hoja .app-boton.gris{--cc-s:var(--cc-aurora-sombra);--cc-toque:var(--cc-toque-pri);background:var(--cc-brillo),var(--cc-aurora-base);box-shadow:var(--cc-s)}
html.es-app .app-candado-circulo.oscuro{flex:none;width:38px;height:38px;background:var(--cc-noche);box-shadow:var(--cc-noche-sombra);color:var(--nieve)}

/* ---------- Lector por apartados (fase 3) ----------
   Una pieza abierta tiene arriba una barra fija (dentro de la cabecera de la página) con el
   botón atrás, el título, el código con su sección y los segmentos de avance; abajo, la barra
   Anterior · N de M · Continuar. Las dos son de cristal: arriba, esmerilado nieve con el borde que
   se desvanece; abajo, tres botones de cristal sobre un velo corto. El <select> de la web no se
   monta en la app: «N de M» abre una hoja con los apartados. */
html.es-app .app-lector-cab{padding:0 max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px))}
html.es-app .app-lector-fila{display:flex;align-items:center;gap:4px;height:44px;max-width:620px;margin:0 auto}
html.es-app .app-lector-atras{flex:none;width:44px;height:44px;display:grid;place-items:center;margin-left:-2px;padding:0;border:0;background:transparent;color:var(--noche);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.es-app .app-lector-atras span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--cc-claro),rgba(255,255,255,.35);box-shadow:var(--cc-claro-sombra),0 2px 8px -2px rgba(14,27,38,.12);transition:transform .18s var(--ease)}
html.es-app .app-lector-atras:active span{transform:scale(.92);background:linear-gradient(#fff,#fff);box-shadow:inset 0 0 0 .5px rgba(14,27,38,.14),0 2px 10px -2px rgba(14,27,38,.2)}
html.es-app .app-lector-atras svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-lector-atras:focus-visible{outline:none}
html.es-app .app-lector-atras:focus-visible span{outline:2px solid var(--fiordo);outline-offset:2px}
html.es-app .app-lector-centro{flex:1;min-width:0;text-align:center;font-family:var(--sg)}
html.es-app .app-lector-centro b{display:block;font-size:15.5px;line-height:19px;font-weight:700;letter-spacing:-.01em;color:var(--noche);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app .app-lector-centro span{display:block;margin-top:1px;font-size:12px;line-height:15px;font-weight:500;color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app .app-lector-hueco{flex:none;width:42px}
/* Segmentos: los apartados anteriores en aurora suave, el actual en aurora plena y los
   pendientes en gris. No dicen «leído»: la app no guarda qué apartados se han leído. */
html.es-app .app-lector-avance{display:flex;gap:4px;max-width:620px;margin:6px auto 0;padding:0 2px}
html.es-app .app-lector-avance:empty{display:none}
html.es-app .app-lector-avance i{flex:1;height:4px;border-radius:2px;background:rgba(14,27,38,.10)}
html.es-app .app-lector-avance i.pasado{background:var(--app-aurora-pasado)}
html.es-app .app-lector-avance i.aqui{background:var(--aurora)}
/* Con segmentos, la línea de lectura de la web sobra; en la lección completa y en las piezas
   sin apartados sigue al pie de la barra. */
html.es-app body.lector-por-pasos .reading-progress{display:none}

/* Hueco para las dos barras fijas. */
html.es-app body.modo-lector #app{padding-top:var(--app-alto-cab-lector);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
html.es-app body.app-lector-con-barra #app{padding-bottom:calc(var(--app-alto-lector) + 36px)}
/* El botón de la corrección también lleva el margen: practica.js desplaza la corrección con
   una animación y, a los 50 ms, le da el foco a «Continuar». Si el botón aún está bajo el borde,
   el desplazamiento del foco corta la animación y solo respeta el margen del botón. Sin él,
   «Continuar» quedaba pegado al borde, detrás de «N de M» y «Volver al curso». */
html.es-app body.modo-lector .ejercicio,
html.es-app body.modo-lector .practica-pieza,
html.es-app body.modo-lector .resumen-practica,
html.es-app body.modo-lector .pronunciacion,
html.es-app body.modo-lector .feedback,
html.es-app body.modo-lector .feedback .btn{scroll-margin-bottom:8px}
/* Con el scroll-padding de html en una pieza (la barra superior más 26 px, la del lector más 30
   px), el total queda en la barra del lector más 38 px abajo y 124 px (114) arriba: lo de antes
   más los bordes que se desvanecen. */
html.es-app body.modo-lector .ejercicio,
html.es-app body.modo-lector .practica-pieza,
html.es-app body.modo-lector .resumen-practica{scroll-margin-top:36px}
html.es-app body.modo-lector .pronunciacion{scroll-margin-top:26px}
/* La corrección se desplaza a la vista en cuanto aparece (practica.js). Con «Reducir
   movimiento», la regla general de index.html da una transición mínima a todas las
   propiedades, y el relleno de la corrección empieza en 0: la cuenta sale 32 px corta y
   «Continuar» queda bajo la barra. Sin transiciones en la corrección, la medida es la final. */
html.es-app .feedback{transition-property:none}
html.es-app body.modo-lector .lesson,
html.es-app body.modo-lector .carga-leccion{padding-top:18px}
/* El «← Volver» de la web lo sustituye el botón atrás de la barra superior. */
html.es-app body.modo-lector .lesson-bar,
html.es-app body.modo-lector .carga-leccion > .back{display:none}
html.es-app body.modo-lector .carga-leccion h1{margin-top:0}

/* Cada apartado es una pantalla: «Apartado N de M» y su título en grande. Fuera del primero,
   la cabecera de la pieza y la sala del oral se retiran (el título ya está arriba). */
html.es-app .app-lector-kicker{display:none}
html.es-app body.lector-por-pasos .app-lector-kicker{display:block;margin:0;font-family:var(--sg);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-lector-dentro > .oral-ilustracion{display:none}
/* La cabecera se retira de la vista, pero su h1 sigue ahí para los lectores de pantalla:
   cada pantalla conserva su título principal aunque el visible sea el de la barra. */
html.es-app body.lector-por-pasos .app-lector-dentro > .lesson-hero{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.es-app body.lector-por-pasos .app-lector-dentro > .lesson-hero > :not(h1){display:none}
html.es-app body.lector-por-pasos .lector-apartados{margin:0}
/* «Alguna grabación de esta lección no está disponible…» ocupa dos líneas: en la app va solo
   en el primer apartado, debajo de la cabecera de la pieza, y en la lección completa. Así no
   empuja hacia abajo «Apartado N de M» en cada pantalla. La carga y los fallos sí se ven. */
html.es-app .app-lector-dentro .estado-carga-audio.app-audio-solo-aviso{display:none}
html.es-app body.lector-por-pasos .lesson-hero{padding-bottom:8px;border-bottom:0}
html.es-app body.lector-por-pasos .lesson-hero > .kicker{display:none}
html.es-app body.lector-por-pasos .lesson-hero h1{max-width:none;margin:4px 0 14px;font-size:32px;line-height:38px;letter-spacing:-.03em}
html.es-app body.lector-por-pasos .lector-seccion{padding-top:0;border-bottom:0}
html.es-app body.lector-por-pasos .lector-seccion > h2{margin:4px 0 14px;font-size:32px;line-height:38px;letter-spacing:-.03em}
html.es-app body.lector-por-pasos .lector-seccion.pronunciacion{margin-top:0;border-top:0}
/* Al elegir una actuación del kit oral, app.js lleva el foco al título de la jornada, que no se pulsa:
   sin el contorno del navegador, como los títulos de Larsito y del lector por pasos. */
html.es-app .lector-seccion h2[tabindex="-1"]:focus{outline:none}
/* La práctica como apartado: sin la línea y el margen que la separan del texto en la web, y
   sin su rótulo propio («Ponlo a prueba», o «Practica» bajo el título «Practica» en las
   lecciones desde cero), porque encima ya va «Apartado N de M». */
html.es-app body.lector-por-pasos .lector > .practica-pieza{margin-top:0;padding-top:0;border-top:0}
html.es-app body.lector-por-pasos .lector > .practica-pieza > .practica-cab > .kicker,
html.es-app body.lector-por-pasos .lector-seccion.seccion-practica > .practica-pieza > .practica-cab > .kicker{display:none}
html.es-app body.lector-por-pasos .lector > .practica-pieza > .practica-cab > h2{margin:4px 0 14px;font-size:32px;line-height:38px;letter-spacing:-.03em}
/* La sesión de pasos de una lección desde cero (Responde y Practica) como apartado: sin su propio
   título ni su párrafo («Ahora te toca a ti», «8 pasos en orden…»), que repetían lo que ya dicen el
   título del apartado, los segmentos y la tarjeta, y empujaban el primer ejercicio bajo la barra.
   «Repasar la teoría» va después de los pasos (app.js), como un enlace tranquilo. */
html.es-app body.lector-por-pasos .lector-seccion > .sesion-esencial{margin-top:8px}
html.es-app body.lector-por-pasos .lector-seccion.seccion-practica > .sesion-esencial{margin-top:0}
html.es-app body.lector-por-pasos .lector-seccion > .sesion-esencial > .practica-cab{display:none}
html.es-app body.lector-por-pasos .lector-seccion > .sesion-esencial > .practica-barra{margin-top:2px}
html.es-app body.lector-por-pasos .seccion-practica > .leccion-teoria{margin:18px 0 0}
/* Lectura en Source Serif a 18 px y las frases en noruego como etiquetas en Space Grotesk. */
html.es-app .seccion-cuerpo > p{font-size:calc(18px * var(--app-t));line-height:calc(28px * var(--app-t));margin-bottom:16px}
html.es-app .seccion-cuerpo > ul > li,
html.es-app .seccion-cuerpo > ol > li{font-size:calc(17px * var(--app-t));line-height:calc(27px * var(--app-t))}
html.es-app .seccion-cuerpo p code,
html.es-app .seccion-cuerpo li code{font-size:.9em;background:var(--app-tinte-fiordo);border-bottom:0;border-radius:5px;padding:.02em .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Las frases que se tocan para oírlas conservan lo que ya tienen en la web: el hueco a la
   derecha para el triángulo (va en ::after con posición absoluta) y el fondo más oscuro
   mientras suenan o tienen el foco. El fondo al pasar el ratón solo cuenta con un puntero de
   verdad: en iOS el :hover se queda pegado tras tocar y parecería que la frase sigue sonando.
   Por eso esta regla fija el fondo de reposo de todas las frases, también las de las tablas
   (Repara, Bloques, saltos y puente): con más peso que el :hover de la web, que no va dentro de
   ninguna media query, el fondo vuelve a su tono en cuanto la frase deja de sonar. */
html.es-app .seccion-cuerpo .oir-frase code{padding-right:1.15em;border-bottom:0;border-radius:5px;background:var(--app-tinte-fiordo);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(44,90,114,.18)}
/* En una celda estrecha, el hueco del triángulo bajaba solo a una segunda línea y dejaba una
   etiqueta vacía debajo de la frase. Como bloque en línea, la frase parte su texto por dentro y el
   triángulo se queda con ella. */
html.es-app .seccion-cuerpo td .oir-frase code{display:inline-block;max-width:100%;padding-top:.2em;padding-bottom:.2em;line-height:1.35;vertical-align:middle}
/* El triángulo de «tócala para oírla» es el mismo icono de escucha que el resto de la app (máscara
   --app-i-oir en fiordo), no el carácter ▸ de la web, que en la etiqueta de cristal se veía como una
   mota caída hacia la línea base. Sonando, el cuadrado de parar. En una celda se centra en la etiqueta. */
html.es-app .seccion-cuerpo .oir-frase code::after{content:"";width:.68em;height:.68em;top:.44em;background-color:var(--fiordo);-webkit-mask:var(--app-i-oir) center/contain no-repeat;mask:var(--app-i-oir) center/contain no-repeat}
html.es-app .seccion-cuerpo .oir-frase.sonando code::after{content:"";-webkit-mask-image:var(--app-i-parar);mask-image:var(--app-i-parar)}
html.es-app .seccion-cuerpo td .oir-frase code::after{top:0;bottom:0;margin:auto 0}
/* Cristal: la etiqueta lleva un brillo arriba y un filete fiordo de 0,5 px, y al tocarla se oscurece
   como mientras suena, que es lo que empieza a pasar. */
html.es-app .seccion-cuerpo .oir-frase.sonando code,
html.es-app .seccion-cuerpo .oir-frase:active code,
html.es-app .seccion-cuerpo .oir-frase:focus-visible code{background:rgba(44,90,114,.16)}
@media (hover:hover){html.es-app .seccion-cuerpo .oir-frase:hover code{background:rgba(44,90,114,.16)}}

/* Barra inferior: Anterior (flecha), «N de M» (abre la hoja) y Continuar con su destino. Sin franja:
   debajo va un borde de desplazamiento, un velo nieve con un desenfoque suave que se desvanece hacia
   arriba, corto y ligero para que un bloque noche no quede gris. En la franja de los botones el velo
   llega al 80 %, para que el texto que pasa entre ellos no llegue a leerse. Encima, Anterior en cristal claro,
   «N de M» en humo y Continuar en aurora. Los tres se apoyan en el velo y no llevan desenfoque
   propio: su relleno es casi opaco y lo que tienen detrás ya llega desenfocado, así que un segundo
   desenfoque no se veía y costaba en cada fotograma del desplazamiento. */
html.es-app .lector-continuar.app-lector-barra{padding:10px max(16px,env(safe-area-inset-right,0px)) var(--app-lector-bajo) max(16px,env(safe-area-inset-left,0px));border-top:0;background:transparent;box-shadow:none}
html.es-app .lector-continuar.app-lector-barra::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;top:-20px;pointer-events:none;background:linear-gradient(to top,rgba(243,245,244,.88) 0,rgba(243,245,244,.8) 34px,rgba(243,245,244,.34) 74px,rgba(243,245,244,0) 100%);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);-webkit-mask-image:linear-gradient(to top,#000 60%,transparent);mask-image:linear-gradient(to top,#000 60%,transparent)}
html.es-app .app-lector-barra .lector-continuar-interior{display:flex;gap:8px;max-width:620px;margin:0 auto;padding:0}
html.es-app .app-lector-barra .lector-continuar-interior > button{position:relative;isolation:isolate;height:54px;margin:0;border:0;border-radius:999px;font-family:var(--sg);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),filter .18s}
/* Foco con teclado: anillo doble nieve y noche sumado al cristal, visible sobre el velo claro y
   sobre el bloque noche. */
html.es-app .app-lector-barra .lector-continuar-interior > button:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--cc-foco-flota),var(--cc-s)}
html.es-app .app-lector-barra svg{flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-lector-barra .app-lector-anterior{--cc-s:var(--cc-sombra-flota);flex:none;width:54px;display:grid;place-items:center;padding:0;background:var(--cc-v-boton);box-shadow:var(--cc-s);color:var(--noche)}
html.es-app .app-lector-anterior svg{width:22px;height:22px;stroke-width:2.3}
html.es-app .app-lector-barra .app-lector-anterior:disabled{opacity:.4;cursor:default;transform:none}
html.es-app .app-lector-barra .app-lector-lista{--cc-s:var(--cc-humo-flota);--cc-toque:var(--cc-toque-osc);flex:none;min-width:98px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px;background:var(--cc-brillo-humo),var(--cc-v-humo);box-shadow:var(--cc-s);color:var(--nieve);font-size:15px;line-height:1;font-weight:700;white-space:nowrap}
html.es-app .app-lector-lista.app-oscura svg{width:18px;height:18px;stroke-width:1.9;color:var(--aurora)}
html.es-app .lector-continuar .app-lector-seguir{--cc-s:var(--cc-aurora-flota);--cc-toque:var(--cc-toque-pri);flex:1 1 auto;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;padding:0 14px 0 22px;background:var(--cc-brillo),var(--cc-v-aurora);color:var(--noche);text-align:left;line-height:1.2;box-shadow:var(--cc-s)}
html.es-app .app-lector-seguir-txt{display:flex;flex-direction:column;min-width:0}
html.es-app .app-lector-seguir-txt > span{font-size:16.5px;line-height:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app .lector-continuar .app-lector-seguir small{display:block;max-width:100%;font-family:var(--sg);font-size:12.5px;line-height:16px;font-weight:500;color:rgba(14,27,38,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.es-app .app-lector-seguir svg{width:20px;height:20px;stroke-width:2.3}
/* El borde de luz de «N de M» termina en aurora. */
html.es-app .app-lector-barra .lector-continuar-interior > button.app-lector-lista::after{background:var(--cc-luz-humo)}
/* Al tocar: Anterior se vuelve blanco macizo; «N de M» y Continuar cambian de brillo con filter, como
   el resto de botones (ya no desenfocan, así que filter no anula nada). Anterior apagado no cambia ni
   se mueve. */
html.es-app .app-lector-barra .lector-continuar-interior > button.app-lector-anterior:active{background:linear-gradient(#fff,#fff)}
html.es-app .app-lector-barra .lector-continuar-interior > button.app-lector-lista:active,
html.es-app .lector-continuar .lector-continuar-interior > button.app-lector-seguir:active{filter:var(--cc-toque,none)}
html.es-app .app-lector-barra .lector-continuar-interior > button:disabled:active{background:var(--cc-v-boton);transform:none}
@media (prefers-reduced-motion:no-preference){
  html.es-app .app-lector-barra .lector-continuar-interior > button:active{transform:scale(.95)}
}
/* En la lección completa la barra lleva solo «Volver a los pasos». */
html.es-app body.app-lector-completa .app-lector-barra .app-lector-anterior,
html.es-app body.app-lector-completa .app-lector-barra .app-lector-seguir{display:none}
html.es-app body.app-lector-completa .app-lector-barra .app-lector-lista{flex:1 1 auto}
/* Con una sesión de pasos a medias (Responde o Practica de una lección desde cero), la barra retira
   «Continuar» hasta el resumen: mientras se responde, el único Continuar a la vista es el de la
   corrección. practica.js marca la sesión con «sesion-en-curso» y lector.js pone la clase en body. */
html.es-app body.app-lector-sesion .app-lector-barra .app-lector-seguir{display:none}
html.es-app body.app-lector-sesion .app-lector-barra .app-lector-lista{flex:1 1 auto}
@media (max-width:359px){
  html.es-app .app-lector-barra .app-lector-anterior{width:48px}
  html.es-app .app-lector-barra .app-lector-lista{min-width:0;padding:0 12px}
  html.es-app body.lector-por-pasos .app-lector-lista svg{display:none}
  html.es-app .lector-continuar .app-lector-seguir{padding:0 10px 0 14px;gap:4px}
}
/* Estrecho (360 px, o 320 con Zoom de pantalla): «Volver al curso» y «Has llegado al final» se
   cortaban. La flecha de Continuar se retira (el botón aurora ya se ve como botón) y, si aun así
   no cabe, la acción baja a una segunda línea. La línea del destino sigue en una. */
@media (max-width:374px){
  html.es-app .lector-continuar .app-lector-seguir{padding-right:12px}
  html.es-app .lector-continuar .app-lector-seguir > svg{display:none}
  html.es-app .app-lector-seguir-txt > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:15.5px;line-height:17px;white-space:normal;overflow-wrap:anywhere}
  html.es-app .lector-continuar .app-lector-seguir small{font-size:12px;line-height:15px}
}

/* Hoja de apartados: el actual con «Estás aquí»; al pie, «Ver la lección completa» y la misma salida
   que el botón atrás (a mano del pulgar: la app no tiene el gesto de volver de Safari). */
html.es-app .app-lector-fila-apartado{--app-sangria:52px;min-height:50px}
html.es-app .app-lector-fila-apartado .app-fila-titulo{white-space:normal}
html.es-app .app-lector-fila-apartado[aria-current="step"] .app-fila-titulo{font-weight:700}
html.es-app .app-lector-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--sg);font-size:13px;line-height:1;font-weight:700;color:var(--fiordo);box-shadow:inset 0 0 0 1.5px rgba(44,90,114,.35)}
html.es-app .app-lector-num.app-oscura{background:var(--noche);color:var(--aurora);box-shadow:none}
/* El pie deja sitio para el filete y la sombra de su última cápsula. */
html.es-app .app-lector-hoja-pie{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin-top:12px;padding-bottom:8px}
html.es-app .app-lector-ver-completa,
html.es-app .app-lector-salir{border:0;font-weight:500;cursor:pointer}
html.es-app .app-lector-ver-completa svg,
html.es-app .app-lector-salir svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Práctica (fase 4) ----------
   La práctica de una pieza, la práctica extra de desde cero, la sesión de una lección y el
   repaso. practica.js pinta en la app un control segmentado de tipos con «Más tipos» (hoja),
   deja huecos punteados en el banco de «Ordena la frase» y monta la corrección como panel fijo
   abajo (.feedback.app-correccion). Los textos son los de la web. */
html.es-app .practica-stats{margin:0;font-family:var(--sg);font-size:calc(13.5px * var(--app-t));line-height:calc(18px * var(--app-t));font-weight:500;color:var(--fiordo)}
html.es-app .app-practica-fila{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-top:12px}
html.es-app .app-practica-fila .practica-stats{flex:1 1 150px}
html.es-app .app-practica-mas{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:100%;padding:0 14px 0 12px;border:0;border-radius:999px;font-family:var(--sg);font-size:14.5px;line-height:1.1;font-weight:500;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),background-color .2s}
html.es-app .app-practica-mas span{overflow:hidden;text-overflow:ellipsis}
html.es-app .app-practica-mas svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
html.es-app .app-practica-mas.activo{--cc-s:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px var(--aurora),0 2px 6px -3px rgba(14,27,38,.16);background:var(--cc-brillo),rgba(63,203,148,.24);box-shadow:var(--cc-s);font-weight:700}
/* El mismo control segmentado del Inicio, con botones: cada uno ocupa los 44 px de alto y la
   pastilla del activo va dibujada 3 px hacia dentro. */
html.es-app .app-practica-tipos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:10px;padding:0;border-radius:999px}
html.es-app .app-practica-tipos button{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;margin:0;padding:0 6px;border:0;border-radius:999px;background:transparent;font-family:var(--sg);font-size:14.5px;line-height:1.15;font-weight:500;color:var(--tinta-suave);text-align:center;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s}
html.es-app .app-practica-tipos button::before{content:"";position:absolute;z-index:-1;top:3px;right:3px;bottom:3px;left:3px;border-radius:999px;background:transparent;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
html.es-app .app-practica-tipos button[aria-pressed="true"]{color:var(--noche);font-weight:700}
html.es-app .app-practica-tipos button:focus-visible{outline:2px solid var(--fiordo);outline-offset:-2px}
@media (max-width:359px){
  html.es-app .app-practica-tipos button{padding:0 2px;font-size:13px}
}
/* Hoja «Más tipos de ejercicio»: el tipo activo con tinte aurora y la marca de hecho. */
html.es-app .app-practica-tipo{--app-sangria:16px;padding-left:16px}
html.es-app .app-practica-hecho{flex:none;width:20px;height:20px;color:var(--noche);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Avance de la tanda: segmentos finos; el actual en fiordo, los acertados en aurora y los fallados en ámbar. */
html.es-app .practica-barra{gap:4px;margin:18px 0 12px}
html.es-app .practica-barra i{height:4px;border-radius:2px;background:rgba(14,27,38,.10)}
html.es-app .practica-barra i.actual{background:var(--fiordo)}
html.es-app .practica-barra i.ok{background:var(--aurora)}
html.es-app .practica-barra i.ko{background:var(--alerta)}

/* Tarjeta del ejercicio. Entra solo con opacidad: una tarjeta con transform haría que el panel
   fijo de la corrección se colocara respecto a ella mientras dura la animación. */
html.es-app .ejercicio{border:0;border-radius:var(--app-radio-ejercicio);padding:16px 16px 18px;background:var(--blanco);box-shadow:0 0 0 .5px rgba(14,27,38,.05),0 10px 26px rgba(14,27,38,.07);animation-name:app-aparece}
html.es-app .ejercicio-cab .eti{font-size:11.5px;line-height:15px;letter-spacing:.16em}
html.es-app .ejercicio .consigna{margin:10px 0 6px;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));color:var(--tinta-suave)}
html.es-app .ejercicio .pista-es{margin:0 0 12px;font-size:calc(17px * var(--app-t));line-height:calc(24px * var(--app-t))}
html.es-app .ejercicio .ayuda-item{font-family:var(--sg);font-size:calc(14px * var(--app-t));line-height:calc(20px * var(--app-t))}
html.es-app .practica-aviso{border-radius:var(--app-radio-control);font-family:var(--sg);font-size:14px;line-height:20px}

/* Fichas: estilo iOS, 44 px de alto y esquinas de 12 px. Siguen con touch-action:none (index.html)
   para que el arrastre funcione en iOS; se tocan o se mueven con el teclado igual que en la web.
   Son cristal: blanco del 100 % al 70 % sobre un velo noche tenue, brillo arriba y sombra suave, sin
   la sombra de tecla de la web. Los estados (acierto aurora, error ámbar, hueco punteado y la tarjeta
   elegida de Emparejar con su contorno aurora) conservan sus bordes de color y suman el brillo. */
html.es-app .ficha,
html.es-app .tarjeta{border:1.5px solid rgba(14,27,38,.10);border-radius:var(--app-radio-ficha);background:var(--cc-ficha);box-shadow:var(--cc-ficha-sombra);color:var(--noche);font-family:var(--sg)}
html.es-app .ficha{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;font-size:calc(17px * var(--app-t));line-height:1.2;font-weight:500;letter-spacing:-.005em}
html.es-app .tarjeta{border-radius:14px;font-size:calc(16px * var(--app-t));line-height:1.35}
html.es-app .tarjeta.es{font-family:var(--serif)}
/* Las palabras bajan enteras de línea. Solo una palabra de ocho letras o más se parte, con guion y
   según el idioma de la tarjeta, cuando no cabe; «siden» o «semanas» no se parten con guion. El lector de la
   web parte por cualquier letra (overflow-wrap:anywhere) y en una tarjeta estrecha salía «Lamentablemen /
   te». Las columnas de Emparejar no crecen con la palabra más larga. */
html.es-app .tarjeta,
html.es-app .ficha{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:8 3 3}
html.es-app .parejas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* La tarjeta elegida de Emparejar lleva su marca aurora como anillo interior de 3 px, sobre un tinte
   aurora: así el contorno queda libre para el foco del teclado, que se ve encima de la elección. */
html.es-app .tarjeta.seleccionada{outline:0;background:var(--cc-brillo),rgba(63,203,148,.14);box-shadow:inset 0 0 0 3px var(--aurora),var(--cc-ficha-sombra)}
html.es-app .tarjeta:focus-visible,
html.es-app .tarjeta.seleccionada:focus-visible{outline:2px solid var(--fiordo);outline-offset:3px}
html.es-app .ficha:disabled,
html.es-app .tarjeta:disabled{opacity:1}
html.es-app .ficha-flotante{box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(14,27,38,.08),0 16px 34px -6px rgba(14,27,38,.3)}
/* Hueco que deja en el banco la ficha que ha subido a la frase: mismo tamaño, borde punteado. */
html.es-app .ficha-hueco{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px dashed rgba(44,90,114,.42);border-radius:var(--app-radio-ficha);background:rgba(44,90,114,.04);color:transparent;font-family:var(--sg);font-size:calc(17px * var(--app-t));line-height:1.2;font-weight:500;letter-spacing:-.005em;white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}
/* En «Huecos» la ficha colocada se queda en su sitio del banco: se ve como hueco, no apagada. */
html.es-app .banco-fichas .ficha.usada{border-style:dashed;border-color:rgba(44,90,114,.42);background:rgba(44,90,114,.04);box-shadow:none;color:transparent;opacity:1;pointer-events:none}
html.es-app .banco-fichas{gap:8px;margin:14px 0 16px}
/* Comprobada la frase, el banco solo tiene huecos: se quedan como una fila de huecos pequeños. */
html.es-app .ejercicio.app-resuelta .banco-fichas{gap:6px;min-height:0;margin:10px 0 4px}
html.es-app .ejercicio.app-resuelta .ficha-hueco{width:44px;min-height:28px;padding:0;overflow:hidden;border-radius:9px;font-size:0}
/* La frase se construye sobre renglones punteados, como en el cuaderno: uno bajo cada fila de fichas. */
html.es-app .linea-respuesta{position:relative;z-index:0;align-items:flex-start;align-content:flex-start;gap:8px;min-height:110px;padding:4px 0 10px;border:0;border-radius:14px;background:transparent}
html.es-app .linea-respuesta::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 50px,rgba(44,90,114,.34) 50px,rgba(44,90,114,.34) 51.5px,transparent 51.5px,transparent 52px);-webkit-mask-image:repeating-linear-gradient(to right,#000 0,#000 6px,transparent 6px,transparent 11px);mask-image:repeating-linear-gradient(to right,#000 0,#000 6px,transparent 6px,transparent 11px)}
html.es-app .linea-respuesta.destino{background:rgba(63,203,148,.10)}
html.es-app .linea-respuesta.vacia::before{margin-top:-4px;padding-left:2px;font-family:var(--sg);font-size:14.5px;line-height:52px}
/* Tras comprobar: tinte aurora y marca de acierto, o tinte ámbar y cruz. El color nunca va solo:
   fichas, tarjetas de Emparejar (también el destello de un intento fallido) y huecos llevan en la
   esquina una insignia con la marca noche sobre aurora o la cruz blanca sobre ámbar (5,8:1); las
   opciones de Elegir la llevan en el círculo de la letra y el campo de Escribir, a la derecha. Con
   daltonismo o sin color, acierto y error se distinguen por la forma. */
html.es-app .ficha.bien{border-color:var(--aurora);background:var(--cc-brillo),rgba(63,203,148,.24)}
html.es-app .ficha.mal{border-color:var(--alerta);background:var(--cc-brillo),rgba(143,90,15,.11)}
html.es-app .tarjeta.bien,
html.es-app .tarjeta.mal,
html.es-app .hueco.bien,
html.es-app .hueco.mal{position:relative}
html.es-app .ficha.bien::after,
html.es-app .ficha.mal::after,
html.es-app .tarjeta.bien::after,
html.es-app .tarjeta.mal::after,
html.es-app .hueco.bien::after,
html.es-app .hueco.mal::after{content:"";position:absolute;top:-8px;right:-7px;width:19px;height:19px;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:11px 11px;pointer-events:none}
html.es-app .ficha.bien::after,
html.es-app .tarjeta.bien::after,
html.es-app .hueco.bien::after{background-color:var(--aurora);background-image:var(--app-i-bien)}
html.es-app .ficha.mal::after,
html.es-app .tarjeta.mal::after,
html.es-app .hueco.mal::after{background-color:var(--alerta);background-image:var(--app-i-mal)}
html.es-app .tarjeta.bien{border-color:var(--aurora);background:var(--cc-brillo),rgba(63,203,148,.24)}
html.es-app .tarjeta.mal{border-color:var(--alerta);background:var(--cc-brillo),rgba(143,90,15,.11)}

/* Huecos, opciones, parejas y campos. El hueco lleva una sombra interior, como un recuadro hundido;
   las opciones son cristal con 16 px de radio y su letra en un círculo con tinte fiordo; los campos,
   blanco al 92 % con 16 px de radio y el borde de siempre, que supera 3:1. */
html.es-app .frase-hueco{font-size:calc(19px * var(--app-t));line-height:2;margin:10px 0 2px}
html.es-app .hueco{border:1.5px dashed rgba(44,90,114,.45);border-radius:10px;background:rgba(44,90,114,.05);box-shadow:inset 0 1px 2px rgba(14,27,38,.06)}
html.es-app .hueco.bien{border-style:solid;border-color:var(--aurora);background:var(--cc-brillo),rgba(63,203,148,.24)}
html.es-app .hueco.mal{border-style:solid;border-color:var(--alerta);background:var(--cc-brillo),rgba(143,90,15,.11)}
/* Mientras se arrastra una ficha encima, el hueco se marca como en la web (su regla quedaba por debajo). */
html.es-app .hueco.destino{border-color:var(--aurora);background:rgba(63,203,148,.12)}
html.es-app .opciones-mc{gap:8px}
html.es-app .opcion-mc{--cc-toque:var(--cc-toque-claro);min-height:52px;padding:12px 14px;border:1.5px solid rgba(14,27,38,.10);border-radius:16px;background:var(--cc-opcion);box-shadow:var(--cc-opcion-sombra);color:var(--noche);align-items:center}
html.es-app .opcion-mc.bien{border-color:var(--aurora);background:var(--cc-brillo),rgba(63,203,148,.24)}
html.es-app .opcion-mc.mal{border-color:var(--alerta);background:var(--cc-brillo),rgba(143,90,15,.11)}
html.es-app .opcion-mc .letra{background:var(--cc-fiordo);box-shadow:var(--cc-fiordo-sombra)}
/* Respondida, la letra deja sitio a la insignia: marca noche sobre aurora en la correcta y cruz blanca
   sobre ámbar en la elegida por error. La letra sigue en el texto para VoiceOver. */
html.es-app .opcion-mc.bien .letra,
html.es-app .opcion-mc.mal .letra{box-shadow:inset 0 1px 0 rgba(255,255,255,.6);color:transparent}
html.es-app .opcion-mc.bien .letra{background:var(--app-i-bien) center/14px 14px no-repeat,var(--cc-brillo),var(--aurora)}
html.es-app .opcion-mc.mal .letra{background:var(--app-i-mal) center/13px 13px no-repeat,var(--alerta);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
html.es-app .contexto-mc,
html.es-app .origen,
html.es-app .modelo-graba,
html.es-app .tarjeta-datos{border-radius:var(--app-radio-control)}
html.es-app .campo-escribe{min-height:50px;border:1.5px solid var(--app-glifo-estado);border-radius:16px;background:var(--cc-campo);box-shadow:inset 0 1px 2px rgba(14,27,38,.06);font-size:max(16px,calc(17px * var(--app-t)))}
/* Foco de los tres campos de texto de la app (Escribir y Dictado, Larsito y el enlace de acceso): borde
   y contorno fiordo de 2 px pegado al borde. Gana al halo aurora de la web. */
html.es-app .campo-escribe:focus,
html.es-app .app-larsito .campo:focus,
html.es-app #formulario textarea:focus{border-color:var(--fiordo);outline:2px solid var(--fiordo);outline-offset:0}
html.es-app .campo-escribe::placeholder,
html.es-app .app-larsito .campo::placeholder,
html.es-app #formulario textarea::placeholder{color:rgba(14,27,38,.6);opacity:1}
/* Corregido, el campo lleva la insignia a la derecha (un input no admite ::after). Va después del foco
   para que su borde mande. */
html.es-app .campo-escribe.bien,
html.es-app .campo-escribe.mal{padding-right:48px;background-position:right 14px center,0 0;background-size:22px 22px,auto;background-repeat:no-repeat,repeat}
html.es-app .campo-escribe.bien{border-color:var(--aurora);background-image:var(--app-i-campo-bien),var(--cc-brillo);background-color:rgba(63,203,148,.24)}
html.es-app .campo-escribe.mal{border-color:var(--alerta);background-image:var(--app-i-campo-mal),var(--cc-brillo);background-color:rgba(143,90,15,.11)}
html.es-app .audio-nota{font-size:13px;line-height:18px}

/* Botones de la práctica: Comprobar a lo ancho, y los secundarios en cristal claro. */
html.es-app .ejercicio-cuerpo > .btn,
html.es-app .zona-ordena > .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--app-alto-boton);font-size:17px}
html.es-app .ejercicio .btn:disabled{opacity:1}
html.es-app .ejercicio .fila-acciones .btn,
html.es-app .ejercicio .audio-fila .btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:var(--app-alto-min);font-size:15.5px}
/* Con la corrección a la vista, lo que ya no se puede pulsar (Comprobar y compañía) se retira. */
html.es-app .ejercicio.app-resuelta .ejercicio-cuerpo > .btn:disabled,
html.es-app .ejercicio.app-resuelta .zona-ordena > .btn:disabled,
html.es-app .ejercicio.app-resuelta .fila-acciones .btn:disabled{display:none}

/* ---------- La corrección: panel fijo abajo ----------
   Tapa la barra del lector y, en el repaso, las pestañas (que se retiran mientras se ve). No
   oscurece nada: se puede desplazar la página para mirar el ejercicio. El cuerpo se desplaza
   dentro del panel si no cabe; «Continuar» se queda siempre abajo, sobre el área segura.
   Es una tarjeta de cristal que flota a 8 px de los bordes, con radio de 32 px, blanco al 94 % con
   desenfoque (la silueta de la tarjeta de debajo ya no se nota) y un tinte ámbar o aurora arriba
   según el resultado, como refuerzo del icono y del título. La última sombra es un velo nieve
   difuminado que llena los 8 px de hueco: sin él, un bloque noche asomaba cortado por debajo. */
html.es-app .feedback.app-correccion{position:fixed;z-index:95;top:auto;right:8px;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) - 26px));left:8px;display:flex;flex-direction:column;width:auto;max-width:640px;max-height:min(58%,calc(100% - var(--app-alto-cab-lector) - 150px));margin:0 auto;padding:6px 0 0;border:0;border-radius:32px;background:radial-gradient(90% 70% at 0% 0%,rgba(143,90,15,.08),rgba(143,90,15,0) 70%),var(--cc-v-panel);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(255,255,255,.6),0 0 0 .5px rgba(14,27,38,.08),0 2px 8px rgba(14,27,38,.06),0 22px 50px -12px rgba(14,27,38,.3),0 36px 18px 24px rgba(243,245,244,.9);color:var(--noche);animation:app-correccion-sube .38s cubic-bezier(0.16,1,0.3,1)}
html.es-app .feedback.bien.app-correccion{background:radial-gradient(90% 70% at 0% 0%,rgba(63,203,148,.16),rgba(63,203,148,0) 70%),var(--cc-v-panel)}
/* El hueco de 8 px entre el panel y los bordes no deja pasar toques: debajo hay contenido tapado por
   el velo nieve («Marcar como hecha», «Material de apoyo») que se pulsaría sin verlo. Una capa
   transparente del propio panel ocupa ese hueco a los lados y hasta el borde inferior; un toque ahí
   cae en el panel y no hace nada. En la lección completa el panel va en su sitio y no la lleva. */
html.es-app .feedback.app-correccion::before{content:"";position:absolute;z-index:-1;top:0;right:-8px;bottom:calc(-1 * max(8px,calc(env(safe-area-inset-bottom,0px) - 26px)));left:-8px}
html.es-app body.app-lector-completa .feedback.app-correccion::before{content:none}
/* El pie del cuerpo se desvanece en sus últimos 14 px (el relleno): si el texto sigue, se nota. */
html.es-app .app-correccion-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 18px 12px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 14px),transparent)}
html.es-app .app-correccion-cab{display:flex;align-items:center;gap:10px;margin:0 0 8px}
html.es-app .app-correccion-icono{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--app-tinte-alerta);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 .5px rgba(143,90,15,.2);color:var(--alerta)}
html.es-app .feedback.bien .app-correccion-icono{background:var(--app-tinte-aurora);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 .5px rgba(63,203,148,.5);color:var(--noche)}
html.es-app .app-correccion-icono svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
html.es-app .feedback.app-correccion .app-correccion-cab b{display:block;margin:0;font-family:var(--sg);font-size:calc(19px * var(--app-t));line-height:calc(24px * var(--app-t));font-weight:700;letter-spacing:-.02em;color:var(--noche)}
html.es-app .feedback.app-correccion p{margin:0 0 10px;font-family:var(--sg);font-size:calc(15.5px * var(--app-t));line-height:calc(22px * var(--app-t));color:var(--noche)}
html.es-app .feedback.app-correccion .diagnostico{margin:0 0 10px;font-size:calc(15.5px * var(--app-t));line-height:calc(22px * var(--app-t))}
html.es-app .feedback.app-correccion .app-correccion-texto{color:var(--tinta-suave)}
/* Si la explicación va sola bajo el título (Elegir, Emparejar), es el texto principal. */
html.es-app .feedback.app-correccion .app-correccion-cab + .app-correccion-texto{color:var(--noche)}
html.es-app .app-correccion-k{display:block;font-family:var(--sg);font-size:calc(13px * var(--app-t));line-height:calc(17px * var(--app-t));font-weight:500;color:var(--tinta-suave)}
html.es-app .app-correccion-solucion{margin:0 0 10px;padding:8px 14px 10px;border-radius:var(--app-radio-control);background:rgba(243,245,244,.8);box-shadow:inset 0 0 0 .5px rgba(14,27,38,.06),inset 0 1px 2px rgba(14,27,38,.04)}
html.es-app .feedback.app-correccion .app-correccion-solucion .solucion{margin:1px 0 0;font-size:calc(19px * var(--app-t));line-height:calc(26px * var(--app-t));font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}
html.es-app .app-correccion-solucion mark{padding:0 4px;border-radius:5px;background:var(--aurora);color:var(--noche);-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.es-app .feedback.app-correccion .feedback-parte{margin:0 0 10px}
html.es-app .feedback.app-correccion .feedback-parte .app-correccion-k,
html.es-app .app-correccion-regla .app-correccion-k{font-weight:700;color:var(--fiordo)}
html.es-app .feedback.app-correccion .feedback-parte p{margin:1px 0 0}
html.es-app .app-correccion-regla{margin:0 0 8px}
html.es-app .feedback.app-correccion .app-correccion-regla p{margin:1px 0 0;font-family:var(--serif);font-size:calc(17px * var(--app-t));line-height:calc(24px * var(--app-t));color:var(--tinta-suave)}
html.es-app .feedback.app-correccion > .btn{flex:none;display:flex;align-items:center;justify-content:center;width:auto;min-height:var(--app-alto-boton);--cc-s:var(--cc-aurora-sombra);margin:6px 18px max(16px,calc(env(safe-area-inset-bottom,0px) - 8px));font-size:17px;letter-spacing:-.01em;box-shadow:var(--cc-s)}
html.es-app .feedback.app-correccion > .btn:active{transform:scale(.97);filter:var(--cc-toque,none)}
/* Mientras el panel se ve, las pestañas se retiran (el panel ocupa su sitio) y la página reserva
   su alto al final para que la respuesta se pueda ver entera por encima de él. */
html.es-app.app-con-correccion .app-barra-inferior{display:none}
/* La barra del lector queda debajo del panel: se oculta también para el teclado y VoiceOver, que
   si no recorrían Anterior, «N de M» y Continuar sin verlos. El foco que baja al final de la
   pieza (Marcar como hecha) se coloca por encima del panel. */
html.es-app.app-con-correccion .app-lector-barra{visibility:hidden}
/* Sin transición en la barra: con «Reducir movimiento», index.html da una transición mínima a todas
   las propiedades, y la visibilidad tardaba un fotograma en volver al quitar el panel. */
html.es-app .lector-continuar.app-lector-barra{transition-property:none}
html.es-app.app-con-correccion{scroll-padding-bottom:calc(var(--app-alto-correccion) + 16px)}
/* Sin transición en el contenedor: con «Reducir movimiento», index.html da una transición mínima a
   todas las propiedades y app-ios.js mediría la reserva antes de que exista. */
html.es-app #app{transition-property:none}
html.es-app.app-con-correccion body #app,
html.es-app.app-con-correccion body.modo-lector #app,
html.es-app.app-con-correccion body.app-lector-con-barra #app{padding-bottom:calc(var(--app-alto-correccion) + 32px)}
/* En la lección completa todo va seguido, como en la web: la corrección vuelve a su sitio, dentro
   de la tarjeta, con la misma estructura. */
html.es-app body.app-lector-completa .feedback.app-correccion{position:static;z-index:auto;max-width:none;max-height:none;margin:18px 0 0;padding:0;border-radius:var(--app-radio-control);background:var(--nieve);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;animation:none}
html.es-app body.app-lector-completa .app-correccion-cuerpo{overflow:visible;padding:14px 14px 2px;-webkit-mask-image:none;mask-image:none}
html.es-app body.app-lector-completa .app-correccion-solucion{background:var(--blanco)}
/* Su «Continuar» conserva el cristal aurora: brillo, filete y la sombra neutra, sin halo. */
html.es-app body.app-lector-completa .feedback.app-correccion > .btn{margin:6px 14px 14px}

/* Repaso (pestaña Practicar cuando vence algo): el título va en grande, como el de las otras tres
   pestañas, y app.js lo repite en la barra compacta al desplazar. «← Volver al curso» sigue arriba. */
html.es-app .step-repaso .practica-pieza{margin-top:18px}
html.es-app .step-repaso .practica-cab .kicker{margin:0}
html.es-app .step-repaso .practica-cab h2{margin:2px 0 10px;font-family:var(--sg);font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.03em;color:var(--noche);text-wrap:balance}
html.es-app .step-repaso .practica-cab h2:focus{outline:none}

/* Resumen de la tanda y llamada «Ponlo a prueba». */
html.es-app .resumen-practica{border:0;border-radius:var(--app-radio-ejercicio);padding:28px 18px 20px;box-shadow:0 0 0 .5px rgba(14,27,38,.05),0 10px 26px rgba(14,27,38,.07);animation-name:app-aparece}
html.es-app .resumen-practica .eti{font-size:11.5px;letter-spacing:.16em}
html.es-app .resumen-practica .lectura{font-family:var(--sg);font-size:calc(15.5px * var(--app-t));line-height:calc(22px * var(--app-t))}
html.es-app .resumen-practica .fila-acciones{flex-direction:column;align-items:stretch;gap:8px}
html.es-app .resumen-practica .fila-acciones .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--app-alto-boton);font-size:17px}
html.es-app .practica-llamada{--cc-toque:var(--cc-toque-claro);grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;min-height:var(--app-alto-fila);padding:12px 14px;border:0;border-radius:var(--app-radio-azulejo);background:var(--cc-tarjeta);box-shadow:var(--cc-tarjeta-sombra);-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
html.es-app .practica-llamada:active{transform:scale(.98)}
html.es-app .practica-llamada:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px}
html.es-app .practica-llamada .eti{grid-column:1;grid-row:1;justify-self:start;font-size:10.5px;line-height:14px;letter-spacing:.14em}
html.es-app .practica-llamada .txt{grid-column:1;grid-row:2}
html.es-app .practica-llamada .txt strong{font-size:calc(16px * var(--app-t));line-height:calc(21px * var(--app-t));letter-spacing:-.01em}
html.es-app .practica-llamada .txt small{font-family:var(--sg);font-size:calc(13.5px * var(--app-t));line-height:calc(18px * var(--app-t))}
html.es-app .practica-llamada .flecha{display:none}
html.es-app .practica-llamada::after{content:"";grid-column:2;grid-row:1 / span 2;align-self:center;width:9px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='m1.5 1.5 6 6-6 6' fill='none' stroke='%230E1B26' stroke-opacity='.34' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px 15px no-repeat}

/* ---------- Larsito, acceso y pronunciación (fase 5) ----------
   Iconos de los botones de escucha y grabación: se pintan con máscara en un ::before, así el
   texto del botón puede cambiar («Parar», «Grabar otra vez») sin perder el icono, y el color
   sigue al del texto. Un botón que suena (clase «sonando») cambia su icono por el de parar. */
html.es-app{
  --app-i-oir:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a1 1 0 0 0 1.52.85l10.6-6.8a1 1 0 0 0 0-1.7L9.52 4.35A1 1 0 0 0 8 5.2z'/%3E%3C/svg%3E");
  --app-i-parar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2.6'/%3E%3C/svg%3E");
  --app-i-lento:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7.6' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 9.2v4l2.7 1.7M9.6 2.9h4.8' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --app-i-grabar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.6'/%3E%3C/svg%3E");
  --app-i-onda:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10.2v3.6M8 7.5v9M12 4.5v15M16 7.5v9M20 10.2v3.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --app-i-comparar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.6 6.5h10M3.6 11.5h10M3.6 16.5h5.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6 12.4v7.2a.8.8 0 0 0 1.23.67l5.4-3.6a.8.8 0 0 0 0-1.34l-5.4-3.6a.8.8 0 0 0-1.23.67z'/%3E%3C/svg%3E");
  --app-i-texto:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.2 3.5h7.6l4 4v13H6.2z' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.6 3.5v4.2h4.2M9.2 12.5h5.6M9.2 16h5.6' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* La flecha de las filas de lista (.app-chevron: 9 x 15 px, trazo 2,2), para dibujarla con máscara. */
  --app-i-flecha-fila:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='m1.5 1.5 6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --app-i-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.es-app .app-oir,
html.es-app .app-oir-lento,
html.es-app .app-oir-mio,
html.es-app .app-grabar,
html.es-app .app-comparar,
html.es-app .app-traducir,
html.es-app .app-texto,
html.es-app .audio-ref .oir-audio{display:inline-flex;align-items:center;justify-content:center;gap:7px}
html.es-app .app-oir::before,
html.es-app .app-oir-lento::before,
html.es-app .app-oir-mio::before,
html.es-app .app-grabar::before,
html.es-app .app-comparar::before,
html.es-app .app-traducir::before,
html.es-app .app-texto::before,
html.es-app .audio-ref .oir-audio::before,
html.es-app .seccion-bloques .voz-bloque::before,
html.es-app .app-larsito .bloque-oir::before{content:"";flex:none;width:18px;height:18px;background-color:currentColor;-webkit-mask:var(--app-i-oir) center/contain no-repeat;mask:var(--app-i-oir) center/contain no-repeat}
html.es-app .app-oir-lento::before{-webkit-mask-image:var(--app-i-lento);mask-image:var(--app-i-lento)}
html.es-app .app-oir-mio::before{-webkit-mask-image:var(--app-i-onda);mask-image:var(--app-i-onda)}
html.es-app .app-grabar::before{width:16px;height:16px;-webkit-mask-image:var(--app-i-grabar);mask-image:var(--app-i-grabar)}
html.es-app .app-comparar::before{-webkit-mask-image:var(--app-i-comparar);mask-image:var(--app-i-comparar)}
html.es-app .app-traducir::before,
html.es-app .app-texto::before{-webkit-mask-image:var(--app-i-texto);mask-image:var(--app-i-texto)}
html.es-app .audio-ref .oir-audio::before{width:14px;height:14px}
html.es-app .sonando.app-oir::before,
html.es-app .sonando.app-oir-lento::before,
html.es-app .sonando.app-oir-mio::before,
html.es-app .audio-ref .oir-audio.sonando::before,
html.es-app .seccion-bloques .voz-bloque.sonando::before,
html.es-app .app-larsito .bloque-oir.sonando::before{-webkit-mask-image:var(--app-i-parar);mask-image:var(--app-i-parar)}
/* Grabando: el cuadrado de parar en aurora, que late despacio. El fondo humo va en «Cristal de los
   controles». */
html.es-app .app-grabar.grabando::before{width:16px;height:16px;background-color:var(--aurora);-webkit-mask-image:var(--app-i-parar);mask-image:var(--app-i-parar);animation:app-late 1.1s ease-in-out infinite}
/* Estas reglas dan display a botones que Larsito oculta con el atributo hidden (sin voz noruega,
   o antes de grabar): el atributo sigue mandando. */
html.es-app .app-larsito .btn[hidden],
html.es-app .app-larsito .mini[hidden],
html.es-app .app-larsito .bloque-oir[hidden],
html.es-app .pronunciacion .btn[hidden]{display:none}

/* Pantalla de detalle fuera del curso: la fila de marca se sustituye por la barra fija con el
   botón atrás; el título del centro aparece cuando el título grande sale por arriba. La barra es el
   mismo esmerilado con borde que se desvanece que la del lector (ver «Barras superiores»). */
html.es-app body.app-detalle > header{position:fixed;top:0;left:0;right:0;z-index:80;padding-top:var(--app-seguro-arriba);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html.es-app body.app-detalle > header .head-inner,
html.es-app body.app-detalle > header .wrap{display:none}
html.es-app .app-detalle-cab{padding:0 max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px))}
html.es-app .app-detalle-cab a.app-lector-atras{color:var(--noche);text-decoration:none}
html.es-app .app-detalle-cab .app-lector-centro{opacity:0;transition:opacity .2s var(--ease)}
html.es-app body.app-detalle > header.app-detalle-con-titulo .app-lector-centro{opacity:1}
html.es-app body.app-detalle-sin-pestanas .app-barra-inferior{display:none}
/* Al pie de una escena y de la escucha, la misma salida que el botón atrás, a mano del pulgar. */
html.es-app .app-detalle-pie{display:flex;justify-content:center;margin:22px 0 0}
html.es-app .app-detalle-pie .app-enlace{border:0;font-weight:500;cursor:pointer}
html.es-app .app-detalle-pie .app-enlace svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Larsito ----------
   La pantalla de la pestaña (con acceso o cerrada) y sus pantallas de detalle: una escena y la
   escucha. Canal de 16 px, como el Inicio del curso. */
html.es-app body.app-larsito-pagina > main#app{padding:0 24px calc(var(--app-alto-pestanas) + 40px);min-height:0}
html.es-app body.app-detalle > main#app{padding-top:calc(var(--app-seguro-arriba) + 60px)}
html.es-app body.app-detalle-sin-pestanas > main#app{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px)}
html.es-app body.app-larsito-pagina > main#app > h1.cargando{margin:6px 0 4px;font-size:34px;line-height:40px;letter-spacing:-.03em}
html.es-app body.app-larsito-pagina > main#app > .intro{font-family:var(--sg);font-size:15px;color:var(--tinta-suave)}
html.es-app .app-larsito .app-subtitulo{margin-top:4px}
html.es-app .app-larsito .app-lista .app-fila{padding-top:10px;padding-bottom:10px}
/* Las filas de Larsito que no van en .app-lista (la escucha, el progreso) también bajan de línea:
   con Zoom de pantalla «Ver los ejercicios de escucha» se cortaba. */
html.es-app .app-larsito .app-fila-titulo{white-space:normal}
/* Larsito lleva el foco al título de cada pantalla (como el curso): sin anillo en el título, que no se pulsa. */
html.es-app .app-larsito h1[tabindex="-1"]:focus{outline:none}
html.es-app .app-larsito .app-fila-sub + .app-fila-sub{margin-top:2px}
html.es-app .app-larsito .app-larsito-aviso{margin:0 4px 14px;font-family:var(--serif);font-size:calc(15px * var(--app-t));line-height:calc(22px * var(--app-t));color:var(--noche)}
/* «Borrar progreso» es una fila del grupo, como en iOS, con su icono en un cuadrado de cristal ámbar
   para alinearse con «Exportar progreso». El icono va en ::after (el ::before es el separador) y se
   coloca delante con order. */
html.es-app .app-larsito .app-fila-borrar{color:var(--alerta)}
html.es-app .app-larsito .app-fila-borrar::after{content:"";order:-1;flex:none;width:36px;height:36px;border-radius:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 6.8h15M9.6 6.6V4.9c0-.6.5-1.1 1.1-1.1h2.6c.6 0 1.1.5 1.1 1.1v1.7M6.6 6.8l.8 11.6c.1 1 .9 1.8 1.9 1.8h5.4c1 0 1.8-.8 1.9-1.8l.8-11.6M10.2 10.6v5.8M13.8 10.6v5.8' fill='none' stroke='%238F5A0F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/19px 19px no-repeat,var(--cc-alerta);box-shadow:var(--cc-alerta-sombra)}
html.es-app .app-larsito [data-aviso]{margin-top:7px}

/* Tarjetas: la ronda de cinco minutos, la recuperación pendiente y la ficha ficticia. */
html.es-app .app-larsito .aviso{display:block;margin:14px 0 0;padding:14px 16px 16px;border:0;border-radius:var(--app-radio-azulejo);background:var(--blanco);box-shadow:var(--app-sombra-azulejo)}
html.es-app .app-larsito .aviso .eti{display:block;padding:0;font-family:var(--sg);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-larsito .aviso.datos-ficticios .eti{color:var(--alerta)}
html.es-app .app-larsito .aviso p{margin:4px 0 0;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));color:var(--noche)}
html.es-app .app-larsito .aviso.datos-ficticios{margin:0 0 14px}
html.es-app .app-larsito .aviso.datos-ficticios p{font-family:var(--serif);font-size:calc(16.5px * var(--app-t));line-height:calc(24px * var(--app-t))}
html.es-app .app-larsito .aviso .ayuda{margin-top:8px}
html.es-app .app-larsito .aviso .btn{margin-top:10px}
html.es-app .app-larsito .aviso .btn + .btn{margin-top:8px}

/* Botones: 50 px de alto, a lo ancho; los secundarios en cristal claro. */
html.es-app .app-larsito .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--app-alto-boton);margin-top:10px;padding:0 18px;border:0;border-radius:999px;font-family:var(--sg);font-size:17px;line-height:1.2;font-weight:700;letter-spacing:-.01em;text-align:center;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),filter .18s}
html.es-app .app-larsito .btn.ghost{border:0}
html.es-app .app-larsito .btn:active{transform:scale(.97)}
html.es-app .app-larsito .btn:disabled{opacity:.45;transform:none}
html.es-app .app-larsito .btn:focus-visible,
html.es-app .app-larsito .mini:focus-visible,
html.es-app .app-larsito .bloque:focus-visible,
html.es-app .app-larsito .bloque-oir:focus-visible,
html.es-app .app-larsito .op:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px}

/* Escena: rótulo, título, contexto en Source Serif y el reloj. */
html.es-app .app-larsito > .kicker{margin:6px 4px 0;font-size:12px;line-height:16px;letter-spacing:.18em}
html.es-app .app-larsito > h1:not(.app-titulo-grande){margin:4px 4px 8px;font-size:30px;line-height:36px;letter-spacing:-.03em}
html.es-app .app-larsito > .intro{margin:0 4px 16px;max-width:none;font-family:var(--serif);font-size:calc(17px * var(--app-t));line-height:calc(26px * var(--app-t));color:var(--tinta-suave)}
html.es-app .app-larsito .crono{margin:0 0 14px;padding:12px 16px;border:0;border-radius:var(--app-radio-azulejo);background:var(--blanco);box-shadow:var(--app-sombra-celda)}
html.es-app .app-larsito .crono .eti{font-family:var(--sg);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-larsito .crono .reloj{font-size:28px;line-height:32px}
html.es-app .app-larsito .crono .ayuda{font-size:13px;line-height:18px;color:var(--tinta-suave)}

/* Conversación: burbujas como en Mensajes. Larsito a la izquierda sobre blanco; tú a la derecha
   con tinte aurora y el texto en noche. */
html.es-app .app-larsito .chat{gap:8px;margin:16px 0}
html.es-app .app-larsito .burbuja{max-width:88%;padding:10px 14px 11px;border:0;border-radius:20px;box-shadow:none}
html.es-app .app-larsito .burbuja.lars{background:var(--blanco);border-bottom-left-radius:6px;box-shadow:var(--app-sombra-celda)}
html.es-app .app-larsito .burbuja.tu{background:var(--app-tinte-aurora);border-bottom-right-radius:6px}
html.es-app .app-larsito .burbuja .quien{margin:0 0 2px;font-size:11px;line-height:14px;letter-spacing:.14em}
html.es-app .app-larsito .burbuja .no{font-size:calc(17px * var(--app-t));line-height:calc(23px * var(--app-t))}
html.es-app .app-larsito .burbuja .es{margin-top:3px;font-family:var(--serif);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));font-style:normal;color:var(--tinta-suave)}
html.es-app .app-larsito .burbuja .onda{height:16px;margin-top:6px}
html.es-app .app-larsito .fila-audio{gap:6px;margin-top:8px}
/* Controles pequeños (escuchar, más lento, traducción, grabar mi intento): pastillas de 44 px. */
html.es-app .app-larsito .mini{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;margin:0;padding:0 13px;border:0;border-radius:999px;font-family:var(--sg);font-size:14.5px;line-height:1.15;font-weight:500;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),background-color .2s}
html.es-app .app-larsito .mini::before{width:16px;height:16px}
html.es-app .app-larsito .mini:disabled{opacity:.5;transform:none}
@media (hover:hover) and (pointer:fine){html.es-app .app-larsito .mini:hover{color:var(--noche)}}
html.es-app .app-larsito .correccion{margin-top:10px;padding-top:9px;border-top:.5px solid var(--app-separador);font-family:var(--sg);font-size:calc(14.5px * var(--app-t));line-height:calc(20px * var(--app-t));color:var(--tinta-suave)}
html.es-app .app-larsito .correccion b{margin-bottom:2px;font-size:11px;line-height:14px;letter-spacing:.14em}
html.es-app .app-larsito .correccion i{font-style:normal;font-weight:700;color:var(--noche)}
html.es-app .app-larsito .correccion .bien{font-size:calc(17px * var(--app-t));line-height:calc(23px * var(--app-t));font-weight:700;color:var(--noche)}

/* Zona de respuesta: tarjeta como la del ejercicio del curso. */
html.es-app .app-larsito .responder{padding:16px 16px 18px;border:0;border-radius:var(--app-radio-ejercicio);background:var(--blanco);box-shadow:0 0 0 .5px rgba(14,27,38,.05),0 10px 26px rgba(14,27,38,.07)}
html.es-app .app-larsito .responder h2{margin:0 0 10px;font-size:20px;line-height:25px}
html.es-app .app-larsito .responder > .correccion{margin-top:0}
html.es-app .app-larsito .pista{margin-bottom:12px;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));color:var(--tinta-suave)}
html.es-app .app-larsito .pista b{margin-bottom:3px;font-size:11px;line-height:14px;letter-spacing:.16em;color:var(--fiordo)}
html.es-app .app-larsito .bloques{gap:8px;margin-bottom:12px}
html.es-app .app-larsito .bloque{min-height:44px;padding:0 14px;border:1.5px solid rgba(14,27,38,.10);border-radius:var(--app-radio-ficha);background:var(--cc-ficha);box-shadow:var(--cc-ficha-sombra);font-size:calc(16px * var(--app-t));line-height:1.2;font-weight:500;-webkit-tap-highlight-color:transparent}
html.es-app .app-larsito .bloque:active{background:var(--cc-brillo),rgba(63,203,148,.24)}
html.es-app .app-larsito .bloque-oir{--cc-toque:var(--cc-toque-claro);display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--cc-fiordo);box-shadow:var(--cc-fiordo-sombra),0 2px 6px -1px rgba(14,27,38,.12);color:var(--fiordo);font-size:0;line-height:0;-webkit-tap-highlight-color:transparent}
html.es-app .app-larsito .bloque-oir::before{width:16px;height:16px;margin-left:2px}
html.es-app .app-larsito .bloque-oir:hover{color:var(--fiordo)}
html.es-app .app-larsito .bloque-oir.sonando::before{margin-left:0}
html.es-app .app-larsito .mic{--cc-s:var(--cc-aurora-sombra);--cc-toque:var(--cc-toque-pri);min-height:54px;border-radius:999px;background:var(--cc-brillo),var(--cc-aurora-base);box-shadow:var(--cc-s);font-size:17px}
html.es-app .app-larsito .campo{min-height:50px;margin-top:12px;padding:12px 14px;border:1.5px solid var(--app-glifo-estado);border-radius:16px;background:var(--cc-campo);box-shadow:inset 0 1px 2px rgba(14,27,38,.06);font-size:max(16px,calc(17px * var(--app-t)))}
html.es-app .app-larsito .ayuda{font-size:calc(13px * var(--app-t));line-height:calc(18px * var(--app-t))}
/* «Repite tú y compárate»: un recuadro nieve dentro de la tarjeta, con sus controles. */
html.es-app .app-larsito .repite{margin-top:14px;padding:14px;border:0;border-radius:16px;background:var(--nieve)}
html.es-app .app-larsito .repite b{font-family:var(--sg);font-size:15.5px;line-height:21px}
html.es-app .app-larsito .repite .fila-audio{gap:8px;margin-top:10px}
/* «Escuchar mi intento» y «Modelo y después yo» son cristal claro con su brillo y su filete, como el
   resto de pastillas, con un fondo algo más blanco para despegarse del recuadro nieve. Ya no llevan
   el anillo de 0,5 px de antes. */
html.es-app .app-larsito .repite .mini:not(.app-grabar){background:var(--cc-claro),rgba(255,255,255,.5)}
html.es-app .app-larsito .repite .mini.app-grabar{--cc-s:var(--cc-aurora-sombra);--cc-toque:var(--cc-toque-pri);background:var(--cc-brillo),var(--cc-aurora-base);box-shadow:var(--cc-s);font-weight:700}
html.es-app .app-larsito .repite .mini.grabando{border-radius:999px}

/* Escucha: cada grabación es una tarjeta; las opciones, como las del curso. */
html.es-app .app-larsito .ejercicio{margin-bottom:14px}
html.es-app .app-larsito .ejercicio h3{margin:0 0 2px;font-size:18px;line-height:23px;letter-spacing:-.015em}
html.es-app .app-larsito .ejercicio .meta{margin-bottom:8px;font-size:11.5px;line-height:15px;letter-spacing:.14em}
/* Reproductor nativo de la escucha con audio remoto (hoy cerrado por flags): a lo ancho de la tarjeta.
   Donde el navegador deja pintar su panel (Chromium), el panel es una cápsula de cristal claro. En iOS
   el reproductor ya usa el material del sistema: no se le pone radio ni sombra, porque recortar sus
   controles con desenfoque propio es la combinación que falla en WebKit. */
html.es-app .app-larsito .ejercicio audio{display:block;width:100%;margin:8px 0 6px}
html.es-app .app-larsito .ejercicio audio::-webkit-media-controls-enclosure{border-radius:999px;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-claro-sombra)}
html.es-app .app-larsito .ejercicio audio::-webkit-media-controls-panel{background:transparent}
html.es-app .app-larsito .ejercicio > .btn + .btn{margin-top:8px}
html.es-app .app-larsito .pregunta-no{margin-top:18px;font-size:calc(17px * var(--app-t));line-height:calc(23px * var(--app-t))}
html.es-app .app-larsito .pregunta-es{font-family:var(--serif);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));font-style:normal}
html.es-app .app-larsito .ops{gap:8px;margin-top:10px}
html.es-app .app-larsito .op{--cc-toque:var(--cc-toque-claro);display:flex;align-items:center;min-height:52px;padding:12px 14px;border:1.5px solid rgba(14,27,38,.10);border-radius:16px;background:var(--cc-opcion);box-shadow:var(--cc-opcion-sombra);font-family:var(--sg);font-size:calc(16px * var(--app-t));line-height:1.3;-webkit-tap-highlight-color:transparent}
html.es-app .app-larsito .op.acierto{border-color:var(--aurora);background:var(--cc-brillo),rgba(63,203,148,.24)}
html.es-app .app-larsito .op.fallo{border-color:var(--alerta);background:var(--cc-brillo),rgba(143,90,15,.11)}
/* Como en la práctica del curso, el resultado no va solo en el color: la opción correcta lleva la marca
   noche sobre aurora y la elegida por error, la cruz blanca sobre ámbar, a la derecha. */
html.es-app .app-larsito .op.acierto,
html.es-app .app-larsito .op.fallo{padding-right:48px}
html.es-app .app-larsito .op.acierto::after,
html.es-app .app-larsito .op.fallo::after{content:"";position:absolute;top:50%;right:14px;width:22px;height:22px;margin-top:-11px;background:var(--app-i-campo-bien) center/22px 22px no-repeat;pointer-events:none}
html.es-app .app-larsito .op.fallo::after{background-image:var(--app-i-campo-mal)}
html.es-app .app-larsito .explica{margin-top:10px;padding:12px 14px;border:0;border-radius:var(--app-radio-control);background:var(--app-tinte-aurora);font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t))}
html.es-app .app-larsito .explica.mal{background:var(--app-tinte-alerta)}
html.es-app .app-larsito .ejercicio > .mini{margin-top:14px}
html.es-app .app-larsito .transcript{border-top:.5px solid var(--app-separador)}
html.es-app .app-larsito .transcript .es{font-style:normal}

/* Lo último que trabajaste: una lista agrupada. */
html.es-app .app-larsito .cierre-panel{margin-top:0;padding-top:0;border-top:0}
html.es-app .app-larsito .recorrido h2{margin:22px 4px 7px;font-size:12px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--fiordo)}
html.es-app .app-larsito .recorrido .lista-informes{border-radius:var(--app-radio-grupo);background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra);overflow:hidden}
html.es-app .app-larsito .recorrido li{padding:12px 16px;border-top:.5px solid var(--app-separador);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t))}
html.es-app .app-larsito .recorrido li:first-child{border-top:0}
/* Enlaces de cada informe: «Repasar M03 en el curso» es una cápsula de cristal claro de 44 px con el
   texto fiordo, y la página del cuaderno queda al lado como texto suave. El separador « · » de la web
   sobra junto a una cápsula: el párrafo va a 0 px de letra y cada parte recupera la suya. */
html.es-app .app-larsito .enlaces-informe{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:10px 0 2px;font-size:0;line-height:0}
html.es-app .app-larsito .enlaces-informe a{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);display:inline-flex;align-items:center;min-height:44px;margin-right:12px;padding:0 16px;border-radius:999px;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s);font-family:var(--sg);font-size:14.5px;line-height:1.2;font-weight:700;color:var(--fiordo);text-decoration:none;-webkit-tap-highlight-color:transparent}
html.es-app .app-larsito .enlaces-informe span{font-family:var(--sg);font-size:calc(13.5px * var(--app-t));line-height:calc(18px * var(--app-t));font-weight:500;color:var(--tinta-suave)}

/* Cerrado: el ejemplo público de práctica, identificado como preparado. */
html.es-app .app-larsito-ejemplo{margin-top:16px;padding:16px 16px 14px;border-radius:var(--app-radio-tarjeta);background:var(--blanco);box-shadow:var(--app-sombra-azulejo)}
html.es-app .app-larsito-ejemplo-cab{display:flex;align-items:flex-start;gap:10px}
html.es-app .app-larsito-ejemplo-textos{flex:1;min-width:0}
html.es-app .app-larsito-ejemplo .app-kicker-mini{margin:0}
html.es-app .app-larsito-ejemplo h2{margin:4px 0 0;font-family:var(--sg);font-size:18px;line-height:23px;font-weight:700;letter-spacing:-.02em;color:var(--noche)}
html.es-app .app-larsito-ejemplo-dibujo{flex:none;position:relative;width:86px;height:58px;margin:-4px -4px 0 0;overflow:hidden}
html.es-app .app-larsito-ejemplo-dibujo img{position:absolute;left:0;top:-2px;width:86px;max-width:none;height:auto;pointer-events:none}
html.es-app .app-larsito-ejemplo-entrada{margin:10px 0 0;font-family:var(--serif);font-size:calc(16px * var(--app-t));line-height:calc(23px * var(--app-t));color:var(--tinta-suave)}
html.es-app .app-larsito-ejemplo .chat{margin:14px 0 0}
html.es-app .app-larsito-ejemplo .burbuja.lars{background:var(--nieve);box-shadow:none}
html.es-app .app-larsito-ejemplo-pie{margin:12px 2px 0;font-family:var(--sg);font-size:13px;line-height:18px;color:var(--tinta-suave)}
html.es-app .app-larsito-cerrado{margin-top:14px}
html.es-app .app-larsito-cerrado .app-fila{align-items:flex-start;padding-top:12px;padding-bottom:13px}
html.es-app .app-larsito-cerrado .app-fila-icono{margin-top:2px}
html.es-app .app-larsito-cerrado .app-fila-titulo{font-weight:700}
html.es-app .app-larsito-cerrado .app-candado{margin-top:10px}
html.es-app .app-larsito .app-estado .app-estado-linea + .app-enlace + .app-estado-linea{margin-top:2px}

/* ---------- Página de acceso ----------
   Cuelga de Inicio: barra con el botón atrás, título grande, el campo y los botones de iOS y
   las dudas como lista agrupada. Las instrucciones para guardar la app no se muestran dentro de
   la app, que ya está guardada. */
html.es-app body.app-detalle > main#contenido{padding-top:calc(var(--app-seguro-arriba) + 56px)}
html.es-app #contenido .wrap{width:calc(100% - 32px)}
html.es-app #contenido .hero{padding:4px 0 0}
html.es-app #contenido .hero .eyebrow{display:none}
html.es-app #contenido .hero h1{max-width:none;margin:0 4px;font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.03em}
html.es-app #contenido .hero h1 mark{background:none}
html.es-app #contenido .hero .lede{max-width:none;margin:4px 4px 0;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));color:var(--tinta-suave)}
html.es-app #formulario{margin-top:24px}
html.es-app #formulario label{margin:0 4px 7px;font-size:12px;line-height:16px;letter-spacing:.16em;color:var(--fiordo)}
html.es-app #formulario textarea{max-width:none;min-height:112px;padding:12px 13px;border:1px solid var(--app-glifo-estado);border-radius:16px;background:var(--cc-campo);box-shadow:inset 0 1px 2px rgba(14,27,38,.06),0 0 0 .5px rgba(14,27,38,.04);font-family:var(--sg);font-size:max(16px,calc(17px * var(--app-t)));line-height:calc(23px * var(--app-t));resize:none}
html.es-app #formulario .fila{flex-direction:column;align-items:stretch;gap:8px;margin-top:14px}
html.es-app #formulario .btn{width:100%;min-height:var(--app-alto-boton);padding:0 18px;border:0;border-radius:999px;font-size:17px;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
html.es-app #formulario .btn:hover{transform:none}
html.es-app #formulario .btn:active{transform:scale(.97)}
html.es-app #contenido .aviso{max-width:none;margin:12px 0 0;padding:12px 14px;border:0;border-radius:var(--app-radio-control);background:var(--app-tinte-aurora);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t))}
html.es-app #contenido .aviso.mal{background:var(--app-tinte-alerta)}
html.es-app #contenido .hero .micro{max-width:none;margin:10px 4px 0;font-size:13px;line-height:18px;color:var(--tinta-suave)}
html.es-app #contenido > section#app{display:none}
html.es-app #contenido .section{padding:30px 0 0;border-top:0}
html.es-app #contenido .section h2{max-width:none;margin:0 4px 10px;font-size:22px;line-height:27px;font-weight:700;letter-spacing:-.02em;color:var(--noche)}
html.es-app #contenido .faq{border-radius:var(--app-radio-grupo);background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra);overflow:hidden}
html.es-app #contenido .faq details,
html.es-app #contenido .faq details:last-child{position:relative;border:0}
html.es-app #contenido .faq details + details::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--app-separador)}
html.es-app #contenido .faq summary{min-height:52px;padding:12px 16px;font-size:calc(16px * var(--app-t));line-height:calc(21px * var(--app-t));font-weight:500;-webkit-tap-highlight-color:transparent}
html.es-app #contenido .faq summary:active{background:rgba(14,27,38,.05)}
html.es-app #contenido .faq summary:focus-visible{outline:2px solid var(--fiordo);outline-offset:-4px;border-radius:12px}
/* La flecha de cada duda es la de las demás listas agrupadas (9 x 15 px, trazo 2,2), y gira al abrir. */
html.es-app #contenido .faq summary::after{content:"";width:9px;height:15px;background-color:var(--app-glifo-suave);-webkit-mask:var(--app-i-flecha-fila) center/9px 15px no-repeat;mask:var(--app-i-flecha-fila) center/9px 15px no-repeat;transition:transform .2s var(--ease)}
html.es-app #contenido .faq details[open] summary::after{content:"";transform:rotate(90deg)}
html.es-app #contenido .faq p{max-width:none;margin:0;padding:0 16px 14px;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t))}

/* ---------- Mis dispositivos ----------
   Cuelga de Inicio como el acceso (barra con el botón atrás y el mismo título grande). La lista
   es un grupo blanco con una fila por dispositivo y su botón «Cerrar sesión» en cápsula. El botón
   «Volver al curso» de la web sobra: la barra ya lo tiene. */
html.es-app #contenido .dispositivos{max-width:none;margin:14px 0 0;border-radius:var(--app-radio-grupo);background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra);overflow:hidden}
html.es-app #contenido .dispositivo{position:relative;min-height:var(--app-alto-fila);padding:10px 12px 10px 16px}
html.es-app #contenido .dispositivo + .dispositivo{border-top:0}
html.es-app #contenido .dispositivo + .dispositivo::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--app-separador)}
html.es-app #contenido .dispositivo-nombre{font-size:calc(16.5px * var(--app-t));line-height:calc(21px * var(--app-t));font-weight:600;letter-spacing:-.01em}
html.es-app #contenido .dispositivo-uso{font-size:calc(13.5px * var(--app-t));line-height:calc(18px * var(--app-t))}
html.es-app #contenido .dispositivo .btn{min-height:var(--app-alto-min);padding:0 16px;border:0;border-radius:999px;font-size:15px;-webkit-tap-highlight-color:transparent}
html.es-app #contenido .hero .aviso{margin:14px 0 0}
html.es-app #contenido .acciones{flex-direction:column;align-items:stretch;gap:8px;margin-top:14px}
html.es-app #contenido .acciones .btn{width:100%;min-height:var(--app-alto-boton);padding:0 18px;border:0;border-radius:999px;font-size:17px;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
html.es-app #contenido .volver{display:none}
/* «Tu progreso» con «Borrar mi progreso» (progreso sincronizado, 01.10.2026): un título de sección y
   el botón a lo ancho, como las acciones de arriba. Solo sale con la sincronización activa. */
html.es-app #contenido .progreso{max-width:none;margin:28px 0 0;padding-top:0;border-top:0}
html.es-app #contenido .progreso h2{margin:0 4px 6px;font-size:calc(20px * var(--app-t));line-height:calc(25px * var(--app-t));letter-spacing:-.015em}
html.es-app #contenido .progreso .intro{margin:0 4px 4px;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t))}
html.es-app #contenido .progreso .fila{flex-direction:column;align-items:stretch;margin-top:12px}
html.es-app #contenido .progreso .btn{width:100%;min-height:var(--app-alto-boton);padding:0 18px;border:0;border-radius:999px;font-size:17px;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent}
html.es-app #contenido #aviso-progreso{margin:14px 0 0}
/* «Borrar mi progreso» es la acción que más borra: el tinte ámbar de las filas que borran de Larsito
   y no el aspecto de la acción principal (revisión del 01.10.2026). */
html.es-app #contenido .progreso .btn.borrar{background:var(--cc-alerta);box-shadow:var(--cc-alerta-sombra);color:var(--alerta)}

/* ---------- Progreso sincronizado · 01.10.2026 ----------
   «¿Es tuyo este progreso?» en la app es una hoja con el texto y dos botones a lo ancho: «No,
   apartarlo» (principal, con el foco) y «Sí, añadirlo» (gris). Larsito avisa de una sesión cerrada
   con progreso sin subir con una línea y el enlace para entrar. */
html.es-app .app-hoja-cuenta .sincro-cuenta-cuerpo{padding:0 10px 8px}
html.es-app .app-hoja-cuenta .sincro-cuenta-texto{margin:0 0 16px;font-family:var(--sg);font-size:calc(15px * var(--app-t));line-height:calc(21px * var(--app-t));color:var(--noche)}
html.es-app .app-hoja-cuenta .app-boton + .app-boton{margin-top:10px}
html.es-app .app-larsito-sesion{margin:14px 0 4px}
html.es-app .app-larsito-sesion .app-pie-grupo{margin:0 4px 6px;color:var(--alerta)}
/* «Borrar progreso» de Larsito sin conexión: el aviso va debajo del grupo, no dentro, y en el color
   de lo que no ha salido bien (revisión del 01.10.2026). */
html.es-app .app-pie-grupo.app-aviso-borrar{margin:8px 4px 0;color:var(--alerta)}

/* ---------- Pronunciación (pronunciacion.js) ----------
   Modelo 1 · 2 · 3 como control segmentado; Escuchar y Más despacio, Grabar mi intento y Oír
   mi intento como botones de 50 px con icono; la lista de comprobación y «Compara los sonidos»
   como grupos blancos. Los textos y lo que hace cada botón son los de la web. */
html.es-app .pronunciacion-ilustracion{width:140px;max-width:40%}
html.es-app .pronunciacion-foco{margin:0 0 6px;font-size:21px;line-height:26px;font-weight:700;letter-spacing:-.02em}
html.es-app .pronunciacion-pasos,
html.es-app .pronunciacion-observar,
html.es-app .pronunciacion-comparar{font-size:calc(17px * var(--app-t));line-height:calc(26px * var(--app-t))}
html.es-app .pronunciacion-modelos{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:18px 0 6px;border-radius:999px}
html.es-app .pronunciacion .pronunciacion-modelo{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 6px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--tinta-suave);font-size:14.5px;line-height:1.15;font-weight:500;white-space:nowrap;transform:none;-webkit-tap-highlight-color:transparent;transition:color .2s}
html.es-app .pronunciacion .pronunciacion-modelo::before{content:"";position:absolute;z-index:-1;top:3px;right:3px;bottom:3px;left:3px;border-radius:999px;background:transparent;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
html.es-app .pronunciacion .pronunciacion-modelo[aria-pressed="true"]{background:transparent;color:var(--noche);font-weight:700}
/* Los modelos son .btn.ghost dentro del segmentado: sin cristal propio de botón. */
html.es-app .pronunciacion .btn.pronunciacion-modelo{background:transparent;box-shadow:none;border-radius:999px;color:var(--tinta-suave)}
html.es-app .pronunciacion .btn.pronunciacion-modelo[aria-pressed="true"]{background:transparent;box-shadow:none;color:var(--noche)}
html.es-app .pronunciacion .pronunciacion-modelo:focus-visible{outline:2px solid var(--fiordo);outline-offset:-2px}
html.es-app .pronunciacion-mas{display:inline-flex;align-items:center;margin:0 0 2px;font-family:var(--sg);font-size:15px;font-weight:700;color:var(--fiordo);text-decoration:none}
/* «Practicar pronunciación» de la ficha de la lección: la cápsula de los enlaces de acción (su cristal va
   en «Cristal de los controles»), sin el subrayado de la web y con una flecha, como «Ver la frase». */
html.es-app .pronunciacion-acceso{gap:6px;margin-top:12px;font-family:var(--sg);font-size:15px;line-height:1.2;font-weight:700;color:var(--fiordo);text-decoration:none;-webkit-tap-highlight-color:transparent}
html.es-app .pronunciacion-acceso::after{content:"";flex:none;width:12px;height:12px;background-color:currentColor;-webkit-mask:var(--app-i-chevron) center/contain no-repeat;mask:var(--app-i-chevron) center/contain no-repeat}
html.es-app .pronunciacion-acciones{gap:8px;margin:12px 0}
html.es-app .pronunciacion .pronunciacion-acciones .btn{flex:1 1 auto;min-height:var(--app-alto-boton);padding:0 16px;border:0;font-size:16px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease)}
html.es-app .pronunciacion .pronunciacion-acciones .btn:active{transform:scale(.97)}
html.es-app .pronunciacion .pronunciacion-acciones .btn:disabled{transform:none}
html.es-app .pronunciacion-texto{margin:2px 0 10px}
html.es-app .pronunciacion-texto summary,
html.es-app .pronunciacion-pares summary{list-style:none;-webkit-tap-highlight-color:transparent}
html.es-app .pronunciacion-texto summary::-webkit-details-marker,
html.es-app .pronunciacion-pares summary::-webkit-details-marker{display:none}
html.es-app .pronunciacion-texto summary{display:inline-flex;gap:6px;font-size:15px;font-weight:700;color:var(--fiordo);text-decoration:none}
html.es-app .pronunciacion-texto summary::after,
html.es-app .pronunciacion-pares summary::after{content:"";flex:none;width:12px;height:12px;background-color:currentColor;-webkit-mask:var(--app-i-chevron) center/contain no-repeat;mask:var(--app-i-chevron) center/contain no-repeat;transition:transform .2s var(--ease)}
html.es-app .pronunciacion-texto[open] summary::after,
html.es-app .pronunciacion-pares[open] summary::after{transform:rotate(90deg)}
html.es-app .pronunciacion-frase{margin:4px 0 0;padding:10px 14px;border-radius:var(--app-radio-control);background:var(--blanco);box-shadow:var(--app-sombra-celda);font-size:calc(19px * var(--app-t));line-height:calc(26px * var(--app-t));font-weight:600}
html.es-app .pronunciacion-frase mark{border-radius:4px;background:var(--app-tinte-aurora)}
html.es-app .pronunciacion-estado{font-size:14px;line-height:20px;color:var(--tinta-suave)}
html.es-app .pronunciacion-lista{gap:0;margin:14px 0;border-radius:var(--app-radio-grupo);background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra);overflow:hidden}
html.es-app .pronunciacion-lista label{position:relative;gap:12px;min-height:52px;padding:10px 16px;font-family:var(--sg);font-size:calc(15.5px * var(--app-t));line-height:calc(21px * var(--app-t));color:var(--noche)}
html.es-app .pronunciacion-lista label + label::before{content:"";position:absolute;top:0;left:52px;right:0;height:.5px;background:var(--app-separador)}
/* Toda la fila es la zona táctil de la casilla (52 px) y responde como una fila de lista. */
html.es-app .pronunciacion-lista label{-webkit-tap-highlight-color:transparent;transition:background-color .15s}
html.es-app .pronunciacion-lista label:active{background:rgba(14,27,38,.06)}
/* Casillas de cristal, como las de iOS: un círculo perla con el borde en noche al 50 % (pasa de 3:1
   sobre el grupo blanco) y, marcada, cristal aurora con la marca en noche. La marca es la señal del
   estado, no el color. Siguen siendo casillas nativas: el teclado, VoiceOver y la etiqueta funcionan
   igual que en la web. */
html.es-app .pronunciacion-lista input{--cc-s:var(--cc-casilla-sombra);--cc-toque:var(--cc-toque-claro);flex:none;width:24px;height:24px;margin:0;padding:0;border:0;border-radius:50%;-webkit-appearance:none;appearance:none;background:var(--cc-casilla);box-shadow:var(--cc-s);cursor:pointer}
html.es-app .pronunciacion-lista input:checked{--cc-s:var(--cc-casilla-si-sombra);--cc-toque:var(--cc-toque-pri);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.6 4.4 4.4L19 7.4' fill='none' stroke='%230E1B26' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat,var(--cc-brillo),var(--cc-aurora-base)}
html.es-app .pronunciacion-pares{margin:14px 0;padding:0 16px;border:0;border-radius:var(--app-radio-grupo);background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra)}
html.es-app .pronunciacion-pares[open]{padding-bottom:6px}
html.es-app .pronunciacion-pares summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;line-height:1.3;font-size:16px;font-weight:600;color:var(--noche)}
html.es-app .pronunciacion-pares summary::after{width:9px;height:15px;color:var(--app-glifo-suave);background-color:var(--app-glifo-suave);-webkit-mask:var(--app-i-flecha-fila) center/9px 15px no-repeat;mask:var(--app-i-flecha-fila) center/9px 15px no-repeat}
/* «Compara los sonidos» es la fila de cabecera del grupo: ocupa todo el ancho y al tocarla se oscurece
   como una fila de lista; con foco lleva el anillo fiordo hacia dentro. */
html.es-app .pronunciacion-pares summary{margin:0 -16px;padding:0 16px;border-radius:var(--app-radio-grupo);transition:background-color .15s}
html.es-app .pronunciacion-pares[open] summary{border-radius:var(--app-radio-grupo) var(--app-radio-grupo) 0 0}
html.es-app .pronunciacion-pares summary:active{background:rgba(14,27,38,.06)}
html.es-app .pronunciacion-pares summary:focus-visible{outline:2px solid var(--fiordo);outline-offset:-3px}
html.es-app .pronunciacion-pares p{margin:0 0 8px;font-size:calc(16px * var(--app-t));line-height:calc(23px * var(--app-t))}
html.es-app .pronunciacion-par-label{margin:10px 0;font-size:13px;color:var(--tinta-suave)}
/* El selector de pares es el del kit oral en cristal claro: cápsula de 50 px sin la apariencia nativa,
   con su flecha fina a 18 px del borde. */
html.es-app .pronunciacion-par-label select{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);min-height:var(--app-alto-boton);padding:0 44px 0 18px;border:0;border-radius:999px;-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230E1B26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/14px 14px no-repeat,var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s);color:var(--noche);font-family:var(--sg);font-size:16px;line-height:1.2;text-overflow:ellipsis;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.es-app .pronunciacion-privacidad{font-size:13px;line-height:18px}

/* ---------- Tablas de Bloques: filas agrupadas ----------
   Noruego · Castellano · Oír se lee como una lista de iOS: la frase noruega arriba, su
   traducción debajo y, a la derecha, un botón redondo de escucha. app.js conserva la tabla
   para los lectores de pantalla con roles ARIA. Las demás tablas del curso siguen como en la web. */
html.es-app .seccion-bloques .tabla-scroll{width:auto;margin:22px 0;overflow:visible;border-radius:var(--app-radio-grupo);background:var(--cc-grupo);box-shadow:var(--cc-grupo-sombra)}
html.es-app .seccion-bloques .tabla-scroll.desplazable::before{display:none}
html.es-app .seccion-bloques table{display:block;width:auto;background:transparent;box-shadow:none;font-size:inherit}
html.es-app .seccion-bloques thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.es-app .seccion-bloques tbody{display:block}
html.es-app .seccion-bloques tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:60px;padding:9px 12px 10px 16px}
html.es-app .seccion-bloques tr + tr::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--app-separador)}
html.es-app .seccion-bloques td,
html.es-app .seccion-bloques tr:last-child td{display:block;width:auto;min-width:0;padding:0;border:0;overflow-wrap:anywhere}
html.es-app .seccion-bloques td:first-child{grid-column:1;grid-row:1;width:auto;font-family:var(--sg);font-size:calc(17px * var(--app-t));line-height:calc(23px * var(--app-t));font-weight:600;color:var(--noche)}
html.es-app .seccion-bloques td:first-child > code{padding:0;border:0;background:transparent;font-size:inherit;font-weight:inherit;overflow-wrap:anywhere}
html.es-app .seccion-bloques td code{border-bottom:0;border-radius:5px}
/* En «Solo reconocer» la frase es el botón de escucha: en la fila tiene su zona de 44 px. */
html.es-app .seccion-bloques td .oir-frase{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 -6px;vertical-align:middle}
html.es-app .seccion-bloques td:nth-child(2){grid-column:1;grid-row:2;margin-top:1px;font-family:var(--sg);font-size:calc(14.5px * var(--app-t));line-height:calc(20px * var(--app-t));color:var(--tinta-suave)}
html.es-app .seccion-bloques td:nth-child(3){grid-column:2;grid-row:1 / span 2;align-self:center}
html.es-app .seccion-bloques td .sin-voz{font-size:13px}
html.es-app .seccion-bloques .voz-bloque{--cc-toque:var(--cc-toque-claro);display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--cc-fiordo);box-shadow:var(--cc-fiordo-sombra),0 2px 6px -1px rgba(14,27,38,.12);color:var(--fiordo);font-size:0;line-height:0;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease),background-color .2s}
html.es-app .seccion-bloques .voz-bloque::before{width:17px;height:17px;margin-left:2px}
html.es-app .seccion-bloques .voz-bloque.sonando::before{margin-left:0}
html.es-app .seccion-bloques .voz-bloque:active{transform:scale(.92)}
html.es-app .seccion-bloques .voz-bloque:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px}
html.es-app .seccion-bloques .voz-bloque:disabled{width:auto;padding:0 12px;border-radius:999px;background:rgba(14,27,38,.06);box-shadow:none;color:var(--tinta-suave);font-size:13px;line-height:1;transform:none}
html.es-app .seccion-bloques .voz-bloque:disabled::before{display:none}
html.es-app .seccion-bloques .audio-nota{margin:0 4px}

/* Botones de escucha dentro de los ejercicios y del texto de la lección. */
html.es-app .audio-ref .oir-audio{gap:5px;padding:0 12px;border:0;border-radius:999px}
html.es-app .ejercicio .modelo-graba > .btn{margin-top:8px}
/* «Ver el texto» de los ejercicios de escucha: la misma cápsula que «Ver la frase», con su flecha. */
html.es-app .ejercicio .audio-texto > summary{display:inline-flex;align-items:center;gap:6px;list-style:none;font-family:var(--sg);font-size:14.5px;font-weight:700;color:var(--fiordo);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.es-app .ejercicio .audio-texto > summary::-webkit-details-marker{display:none}
html.es-app .ejercicio .audio-texto > summary::after{content:"";flex:none;width:12px;height:12px;background-color:currentColor;-webkit-mask:var(--app-i-chevron) center/contain no-repeat;mask:var(--app-i-chevron) center/contain no-repeat;transition:transform .2s var(--ease)}
html.es-app .ejercicio .audio-texto[open] > summary::after{transform:rotate(90deg)}

/* ---------- Cristal de los controles (15.09.2026) ----------
   Receta común de los botones de la app, con el lenguaje de cristal de iOS 26. En el flujo no hay
   desenfoque, porque sobre una superficie lisa no aporta nada. Hay tres cristales:
   - aurora: aurora translúcida con brillo arriba y texto noche, para el principal;
   - claro: blanco translúcido, brillo arriba, filete de 0,5 px y casi sin sombra, para los secundarios;
   - humo: noche translúcida con brillo tenue, reflejo aurora abajo y texto nieve, para lo que suena o
     graba.
   Sobre superficies noche va un cristal nieve tenue con texto nieve. Cada control guarda su sombra en
   --cc-s y su brillo al tocar en --cc-toque: una sola regla :active aplica el brillo y la de foco
   suma el anillo a la sombra, así el foco no borra el cristal. Las capas flotantes (pestañas, barras,
   botones de la barra del lector y panel de corrección) llevan su cristal en su propia sección; las
   que desenfocan no usan filter al tocar, porque en Safari anularía el desenfoque. Esta sección va al
   final para ganar, con la misma especificidad, a las reglas de cada pantalla. */

/* Principal: cristal teñido de aurora, texto noche, en cápsula. */
html.es-app .btn,
html.es-app .app-boton{--cc-s:var(--cc-aurora-sombra);--cc-toque:var(--cc-toque-pri);border-radius:999px;background:var(--cc-brillo),var(--cc-aurora-base);box-shadow:var(--cc-s);color:var(--noche)}

/* Secundario: cristal claro. :where(.ghost) pesa lo mismo que .btn: gana a la web, pero no a los
   botones que esta hoja ya pinta con más detalle (modelos de la pronunciación, escucha de Bloques). Sin
   el borde de 1 px de la web (en la app era transparente): un secundario mide lo mismo que el principal
   que tiene al lado. */
html.es-app .btn:where(.ghost),
html.es-app .app-boton.gris,
html.es-app .ejercicio .btn.ghost,
html.es-app .resumen-practica .btn.ghost,
html.es-app .app-larsito .btn.ghost,
html.es-app #formulario .btn.ghost,
html.es-app .pronunciacion .pronunciacion-acciones .btn.ghost,
html.es-app .app-practica-mas,
html.es-app .app-larsito .mini,
html.es-app .audio-ref .oir-audio,
html.es-app .app-circulo{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);border:0;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s);color:var(--noche)}

/* Sonando y grabando: cristal humo con texto nieve y reflejo aurora abajo. */
html.es-app .btn.sonando,
html.es-app .mini.sonando,
html.es-app .app-grabar.grabando,
html.es-app .ejercicio .btn.sonando,
html.es-app .app-larsito .btn.sonando,
html.es-app .app-larsito .mini.sonando,
html.es-app .audio-ref .oir-audio.sonando,
html.es-app .seccion-bloques .voz-bloque.sonando,
html.es-app .app-larsito .bloque-oir.sonando,
html.es-app .app-larsito .mic.grabando,
html.es-app .app-larsito .repite .mini.grabando,
html.es-app .pronunciacion .pronunciacion-acciones .btn.sonando,
html.es-app .pronunciacion .pronunciacion-acciones .btn.grabando{--cc-s:var(--cc-humo-sombra);--cc-toque:var(--cc-toque-osc);background:var(--cc-brillo-humo),var(--cc-humo-base);box-shadow:var(--cc-s);color:var(--nieve)}

/* Sobre noche: el botón de «Marcar como hecha» es cristal nieve con texto nieve. Marcado lleva un
   anillo aurora interior, para que el estado se vea sin leer la etiqueta. El bloque noche que lo
   contiene (también el del kit oral) lleva esquinas de tarjeta y un borde de luz tenue. */
html.es-app .marcar{border-radius:var(--app-radio-tarjeta);box-shadow:var(--cc-noche-tarjeta)}
html.es-app .marcar .btn.ghost{--cc-s:var(--cc-noche-sombra);--cc-toque:var(--cc-toque-osc);border-color:transparent;background:var(--cc-noche);box-shadow:var(--cc-s);color:var(--nieve)}
html.es-app .marcar .btn.ghost[aria-pressed="true"]{--cc-s:inset 0 1px 0 rgba(243,245,244,.3),inset 0 0 0 1.5px rgba(63,203,148,.75),0 6px 16px -6px rgba(14,27,38,.6);box-shadow:var(--cc-s)}

/* Apagado: plano, sin brillo ni sombra y sin la opacidad de la web, para que no parezca pulsable. Va
   con la misma especificidad que el cristal de cada familia, así se ve igual en todas las pantallas
   (práctica, pronunciación, kit oral, Larsito y acceso). El texto queda en noche al 40 % (2,47:1,
   exento por ser un control inactivo); con «Aumentar contraste» sube y lleva un borde punteado. */
html.es-app .btn:disabled,
html.es-app .ejercicio .btn:disabled,
html.es-app .resumen-practica .btn:disabled,
html.es-app .app-larsito .btn:disabled,
html.es-app .app-larsito .mini:disabled,
html.es-app .app-larsito .mic:disabled,
html.es-app #formulario .btn:disabled,
html.es-app .pronunciacion .pronunciacion-acciones .btn:disabled,
html.es-app .audio-ref .oir-audio:disabled,
html.es-app .app-practica-mas:disabled{--cc-s:inset 0 0 0 .5px rgba(14,27,38,.06);--cc-toque:none;background:rgba(14,27,38,.06);box-shadow:var(--cc-s);color:rgba(14,27,38,.4);opacity:1}

/* Controles segmentados (cursos, tipos de práctica y modelos de la pronunciación): carril hundido en
   cápsula y pastilla blanca de cristal encima. Al tocar, el segmento elegido se oscurece un poco y
   los demás muestran una lente clara bajo el dedo, como las pestañas. */
html.es-app .app-segmentado,
html.es-app .app-practica-tipos,
html.es-app .pronunciacion-modelos{background:rgba(14,27,38,.055);box-shadow:inset 0 1px 2px rgba(14,27,38,.07),inset 0 0 0 .5px rgba(14,27,38,.05)}
html.es-app .app-segmentado a,
html.es-app .app-practica-tipos button{--cc-toque:var(--cc-toque-claro)}
html.es-app .app-segmentado a[aria-current="page"]::before,
html.es-app .app-practica-tipos button[aria-pressed="true"]::before,
html.es-app .pronunciacion .pronunciacion-modelo[aria-pressed="true"]::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.88) 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(14,27,38,.08),0 2px 6px rgba(14,27,38,.10),0 6px 14px -4px rgba(14,27,38,.10)}
html.es-app .app-segmentado a:not([aria-current="page"]):active::before,
html.es-app .app-practica-tipos button:not([aria-pressed="true"]):active::before,
html.es-app .pronunciacion .pronunciacion-modelo:not([aria-pressed="true"]):active::before{background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(14,27,38,.06)}

/* «← Volver al curso» del repaso y de la pantalla de error de una pieza: cápsula de cristal claro de
   44 px con el texto fiordo de siempre. */
html.es-app .back{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s);color:var(--fiordo);font-size:14px;line-height:1.2;-webkit-tap-highlight-color:transparent}
html.es-app .error .btn + .back{margin-left:6px}
/* En la pantalla de error, «Reintentar» (o «Volver al curso») tiene la medida de la cápsula de al lado:
   44 px de alto y 15 px de letra, así los dos se leen como la misma familia puesta en fila. */
html.es-app .error .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:0;font-size:15px;line-height:1.2;vertical-align:middle}

/* Botones a lo ancho del kit oral y de «Marcar como hecha»: la medida de la app (50 px, 17 px de letra),
   como en la práctica, Larsito y el acceso. Antes medían 54 o 56 px según llevaran borde. */
html.es-app .marcar .btn,
html.es-app .nav-actuacion .btn{display:flex;align-items:center;justify-content:center;min-height:var(--app-alto-boton);padding-block:0;border:0;font-size:17px;line-height:1.2;letter-spacing:-.01em}

/* Navegación entre piezas sin lector por pasos (kit oral, saltos, puente y lección completa):
   «← Anterior» y «Continuar →» son tarjetas de cristal claro, sin la línea de la web encima. La que
   no lleva a ningún sitio queda plana, como un botón apagado. */
html.es-app .nav-pieza{padding-top:0;border-top:0}
html.es-app .nav-pieza .nav-card{--cc-toque:var(--cc-toque-claro);min-height:0;padding:14px 16px 15px;border:0;border-radius:var(--app-radio-azulejo);background:var(--cc-tarjeta);box-shadow:var(--cc-tarjeta-sombra);-webkit-tap-highlight-color:transparent}
html.es-app .nav-pieza .nav-card small{margin-bottom:5px}
html.es-app .nav-pieza .nav-card:disabled{background:rgba(14,27,38,.06);box-shadow:inset 0 0 0 .5px rgba(14,27,38,.06);color:rgba(14,27,38,.4);opacity:1}
html.es-app .nav-pieza .nav-card:disabled small{color:inherit}

/* Kit oral: el bloque noche del selector de actuación lleva esquinas de tarjeta y borde de luz, y el
   selector es una cápsula de cristal nieve con texto noche y su flecha. Con 16 px de letra Safari no
   agranda la página al tocarlo. */
html.es-app .ruta21{padding:20px 18px 18px;border-radius:var(--app-radio-tarjeta);box-shadow:var(--cc-noche-tarjeta)}
html.es-app .ruta21 select{--cc-s:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.4),0 0 0 .5px rgba(243,245,244,.3),0 6px 16px -6px rgba(14,27,38,.6);--cc-toque:var(--cc-toque-claro);display:block;min-height:50px;padding:0 44px 0 18px;border:0;border-radius:999px;-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230E1B26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/14px 14px no-repeat,linear-gradient(180deg,#fff 0%,rgba(243,245,244,.9) 100%),var(--nieve);box-shadow:var(--cc-s);color:var(--noche);font-family:var(--sg);font-size:16px;line-height:1.2;text-overflow:ellipsis;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* «Material de apoyo» y «Práctica extra»: la cabecera del desplegable es una tarjeta de cristal
   claro con el signo centrado en un círculo con tinte fiordo. */
html.es-app .lesson-apoyo{border-top:0;border-bottom:0}
html.es-app .lesson-apoyo > summary{--cc-toque:var(--cc-toque-claro);padding:16px 14px 16px 18px;border-radius:22px;background:var(--cc-tarjeta);box-shadow:var(--cc-tarjeta-sombra);-webkit-tap-highlight-color:transparent}
html.es-app .lesson-apoyo .abrir{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;font-size:0;background:var(--cc-fiordo);box-shadow:var(--cc-fiordo-sombra)}
html.es-app .lesson-apoyo .abrir::after{content:"+";font-size:20px;line-height:1;color:var(--fiordo)}
html.es-app .lesson-apoyo[open] .abrir::after{content:"\2212"}

/* Enlaces de acción sueltos: cápsulas de cristal claro de 44 px con el texto fiordo de siempre. Los
   enlaces de salida al pie del Inicio siguen como texto. */
html.es-app .app-estado .app-enlace,
html.es-app .app-objetivo .app-enlace,
html.es-app .app-lector-ver-completa,
html.es-app .app-lector-salir,
html.es-app .app-detalle-pie .app-enlace,
html.es-app .pronunciacion-texto summary,
html.es-app .ejercicio .audio-texto > summary,
html.es-app .pronunciacion-acceso,
html.es-app .pronunciacion-mas{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);min-height:44px;padding:0 16px;border-radius:999px;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s)}
html.es-app .app-estado .app-enlace{margin-top:8px}

/* Respuesta al toque: brillo con filter, solo en controles sin backdrop-filter. Las opciones y
   tarjetas apagadas (ya respondidas o sin destino) no responden. */
html.es-app .btn:active,
html.es-app .app-boton:active,
html.es-app .app-practica-mas:active,
html.es-app .app-larsito .mini:active,
html.es-app .app-larsito .mic:active,
html.es-app .audio-ref .oir-audio:active,
html.es-app .seccion-bloques .voz-bloque:active,
html.es-app .app-larsito .bloque-oir:active,
html.es-app .app-estado .app-enlace:active,
html.es-app .app-objetivo .app-enlace:active,
html.es-app .app-lector-ver-completa:active,
html.es-app .app-lector-salir:active,
html.es-app .app-detalle-pie .app-enlace:active,
html.es-app .pronunciacion-texto summary:active,
html.es-app .pronunciacion-mas:active,
html.es-app .pronunciacion-acceso:active,
html.es-app .ejercicio .audio-texto > summary:active,
html.es-app .app-segmentado a:active,
html.es-app .app-practica-tipos button:active,
html.es-app .back:active,
html.es-app .ruta21 select:active,
html.es-app .pronunciacion-par-label select:active,
html.es-app .lesson-apoyo > summary:active,
html.es-app .nav-pieza .nav-card:not(:disabled):active,
html.es-app .opcion-mc:not(:disabled):active,
html.es-app .app-larsito .op:not(:disabled):active,
html.es-app .practica-llamada:active,
html.es-app a.app-cuaderno:active,
html.es-app button.app-cuaderno:active,
html.es-app .app-larsito .enlaces-informe a:active,
html.es-app .pronunciacion-lista label:active input{filter:var(--cc-toque,none)}
html.es-app .btn:disabled:active{filter:none;transform:none}
/* Las escalas, solo si no se ha pedido reducir el movimiento. */
@media (prefers-reduced-motion:no-preference){
  html.es-app .btn:active,
  html.es-app .app-practica-mas:active,
  html.es-app .app-larsito .mini:active,
  html.es-app .audio-ref .oir-audio:active,
  html.es-app .app-estado .app-enlace:active,
  html.es-app .app-objetivo .app-enlace:active,
  html.es-app .app-lector-ver-completa:active,
  html.es-app .app-lector-salir:active,
  html.es-app .app-detalle-pie .app-enlace:active,
  html.es-app .pronunciacion-texto summary:active,
  html.es-app .pronunciacion-mas:active,
  html.es-app .app-segmentado a:active,
  html.es-app .app-practica-tipos button:active,
  html.es-app .ejercicio .audio-texto > summary:active,
  html.es-app .app-larsito .enlaces-informe a:active,
  html.es-app .pronunciacion-acceso:active,
  html.es-app .back:active{transform:scale(.97)}
  html.es-app .pronunciacion-lista label:active input{transform:scale(.9)}
  html.es-app .btn:disabled:active{transform:none}
  html.es-app .lesson-apoyo > summary:active,
  html.es-app .nav-pieza .nav-card:not(:disabled):active{transform:scale(.98)}
  html.es-app .app-hoja-cerrar:active span{transform:scale(.92)}
  html.es-app .app-hoja-cerrar span,
  html.es-app .app-estado .app-enlace,
  html.es-app .app-objetivo .app-enlace,
  html.es-app .app-lector-ver-completa,
  html.es-app .app-lector-salir,
  html.es-app .app-detalle-pie .app-enlace,
  html.es-app .pronunciacion-texto summary,
  html.es-app .pronunciacion-mas,
  html.es-app .ejercicio .audio-texto > summary,
  html.es-app .app-larsito .enlaces-informe a,
  html.es-app .pronunciacion-acceso,
  html.es-app .back,
  html.es-app .lesson-apoyo > summary,
  html.es-app .nav-pieza .nav-card{transition:transform .18s var(--ease)}
  html.es-app .pronunciacion-lista input{transition:transform .18s var(--ease),background-color .2s,box-shadow .2s}
  html.es-app .app-segmentado a,
  html.es-app .app-practica-tipos button{transition:color .2s,transform .18s var(--ease)}
}

/* Foco con teclado. El contorno sigue la cápsula en Safari 16.4 o posterior; el anillo con
   box-shadow la sigue también en versiones anteriores y se suma al cristal. El anillo general es
   fiordo, que sobre noche no llega a 3:1: sobre superficies noche va en nieve (un trazo, no texto). */
html.es-app .btn:focus-visible,
html.es-app .app-boton:focus-visible,
html.es-app .app-practica-mas:focus-visible,
html.es-app .app-larsito .mini:focus-visible,
html.es-app .app-larsito .btn:focus-visible,
html.es-app .audio-ref .oir-audio:focus-visible,
html.es-app .ejercicio .btn:focus-visible,
html.es-app .resumen-practica .btn:focus-visible,
html.es-app #formulario .btn:focus-visible,
html.es-app .pronunciacion .pronunciacion-acciones .btn:focus-visible,
html.es-app .feedback.app-correccion > .btn:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px;box-shadow:var(--cc-foco),var(--cc-s,0 0 #0000)}
html.es-app .app-estado .app-enlace:focus-visible,
html.es-app .app-objetivo .app-enlace:focus-visible,
html.es-app .app-lector-ver-completa:focus-visible,
html.es-app .app-lector-salir:focus-visible,
html.es-app .app-detalle-pie .app-enlace:focus-visible,
html.es-app .pronunciacion-texto summary:focus-visible,
html.es-app .pronunciacion-mas:focus-visible,
html.es-app .ejercicio .audio-texto > summary:focus-visible,
html.es-app .app-larsito .enlaces-informe a:focus-visible,
html.es-app .pronunciacion-acceso:focus-visible,
html.es-app .back:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px;border-radius:999px;box-shadow:var(--cc-foco),var(--cc-s,0 0 #0000)}
html.es-app .pronunciacion-lista input:focus-visible,
html.es-app .pronunciacion-par-label select:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px;box-shadow:var(--cc-foco),var(--cc-s,0 0 #0000)}
html.es-app .nav-pieza .nav-card:focus-visible,
html.es-app .lesson-apoyo > summary:focus-visible{outline:2px solid var(--fiordo);outline-offset:2px}
html.es-app .marcar .btn:focus-visible,
html.es-app .ruta21 select:focus-visible,
html.es-app .app-oscura .app-boton:focus-visible{outline:2px solid var(--nieve);outline-offset:2px;box-shadow:var(--cc-foco-noche),var(--cc-s,0 0 #0000)}

/* ---------- Hábito diario y ejercicios · 01.10.2026 (ESTILO.md) ----------
   Letras noruegas encima de los campos: teclas de cristal claro de 44 px, sin desenfoque. */
html.es-app .tecla-nb{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);min-width:44px;min-height:44px;border-radius:14px;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s);font-size:19px;color:var(--noche)}
html.es-app .tecla-nb:active{filter:var(--cc-toque)}
html.es-app .tecla-nb:focus-visible{outline:none;box-shadow:var(--cc-foco),var(--cc-s)}
html.es-app .app-larsito .teclas-nb + .campo{margin-top:8px}
html.es-app .app-larsito .crono.corta{padding:10px 16px;gap:2px 12px}
html.es-app .app-larsito .crono.corta .reloj{margin-left:auto;font-size:24px;line-height:28px}
html.es-app .app-larsito .bloques.bloques-ronda{margin:12px 0 0}
html.es-app .app-larsito .datos-ronda{margin-top:12px}
html.es-app .app-larsito .datos-ronda summary{display:flex;align-items:center;min-height:44px;cursor:pointer}

/* Pestaña Ejercicios (#practicar): el repaso de hoy, o adelantar el próximo, y «De tus lecciones». */
html.es-app .app-ejercicios .app-repaso{margin-top:18px}
html.es-app .app-ejercicios .app-grupo-cab{margin-top:28px}
html.es-app .app-ejercicios .app-fila-titulo{white-space:normal}
html.es-app .app-ejercicios-vacio{margin:24px 4px 0}
/* Hoja «Más»: «Mis dispositivos» arriba, en su grupo, y los enlaces que salen del curso aparte. */
html.es-app .app-mas-propios{margin-bottom:18px}
html.es-app .app-larsito .app-plegables{margin-top:14px}
/* Primer uso: «¿Desde dónde empiezas?» y la fila opcional «Tu punto de partida». */
html.es-app .app-inicio-hoja .app-fila{min-height:60px}
html.es-app .app-inicio-hoja .app-fila-titulo{font-weight:700}
html.es-app .app-inicio-hoja .app-pie-grupo{margin:12px 6px 4px}
html.es-app .punto-partida{margin-top:14px}
html.es-app .punto-partida .app-fila-titulo{font-weight:700}
html.es-app .punto-partida .punto-partida-no{width:100%;justify-content:center;border:0;border-top:.5px solid var(--app-separador);background:transparent;cursor:pointer}
html.es-app .app-ejercicios-texto{margin:0 0 16px;font-family:var(--sg);font-size:calc(16px * var(--app-t));line-height:calc(22px * var(--app-t));font-weight:500;color:var(--tinta-suave)}

/* ---------- Reservas: sin desenfoque, transparencia reducida y movimiento reducido ---------- */
/* Sin desenfoque: las capas flotantes pasan a opacas con su filete. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.es-app{--cc-v-barra:linear-gradient(#fff,#fff);--cc-v-nieve:var(--nieve);--cc-v-panel:var(--blanco);--cc-v-boton:linear-gradient(#fff,#fff);--cc-v-aurora:var(--aurora);--cc-v-humo:var(--noche)}
  html.es-app .app-pestanas{background:var(--blanco)}
  html.es-app .app-barra-inferior::before{background:linear-gradient(to top,var(--nieve) 45%,rgba(243,245,244,0))}
  html.es-app .app-barra-compacta{height:calc(44px + var(--app-seguro-arriba));padding-bottom:0;background:var(--nieve);-webkit-mask-image:none;mask-image:none;box-shadow:0 .5px 0 var(--linea-clara)}
  html.es-app body.modo-lector > header.site-header,
  html.es-app body.app-detalle > header{background:var(--nieve);box-shadow:0 .5px 0 var(--linea-clara)}
  html.es-app body.modo-lector > header.site-header::before,
  html.es-app body.app-detalle > header::before,
  html.es-app .lector-continuar.app-lector-barra::before{display:none}
  html.es-app .lector-continuar.app-lector-barra{background:var(--nieve);box-shadow:0 -.5px 0 var(--linea-clara)}
}
/* «Reducir transparencia» y «Aumentar contraste»: todo opaco, sin brillos, sin desenfoque, sin
   borde de luz y sin filter al tocar. Safari todavía no entiende prefers-reduced-transparency (se
   queda para cuando lo haga). En iOS lo que sí llega es «Aumentar contraste» (prefers-contrast:
   more, Safari 14.1), que lleva la misma reserva opaca. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html.es-app{--cc-claro:linear-gradient(#fff,#fff);--cc-claro-base:#fff;--cc-brillo:linear-gradient(transparent,transparent);--cc-brillo-humo:linear-gradient(transparent,transparent);--cc-aurora-base:var(--aurora);--cc-humo-base:var(--noche);--cc-fiordo:linear-gradient(rgba(44,90,114,.12),rgba(44,90,114,.12)),#fff;--cc-v-barra:linear-gradient(#fff,#fff);--cc-v-nieve:var(--nieve);--cc-v-panel:var(--blanco);--cc-v-boton:linear-gradient(#fff,#fff);--cc-v-aurora:var(--aurora);--cc-v-humo:var(--noche);--cc-hoja:linear-gradient(transparent,transparent);--cc-toque-claro:none;--cc-toque-pri:none;--cc-toque-osc:none;--cc-toque-noche:none;--cc-tarjeta:linear-gradient(#fff,#fff);--cc-grupo:linear-gradient(#fff,#fff);--cc-ficha:linear-gradient(#fff,#fff);--cc-opcion:linear-gradient(#fff,#fff);--cc-campo:#fff;--cc-casilla:linear-gradient(#fff,#fff);--cc-alerta:linear-gradient(rgba(143,90,15,.12),rgba(143,90,15,.12)),#fff}
  html.es-app .app-pestanas{background:var(--blanco);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.es-app .app-barra-inferior::before{background:linear-gradient(to top,var(--nieve) 45%,rgba(243,245,244,0))}
  html.es-app .app-barra-compacta{height:calc(44px + var(--app-seguro-arriba));padding-bottom:0;background:var(--nieve);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;box-shadow:0 .5px 0 var(--linea-clara)}
  html.es-app body.modo-lector > header.site-header,
  html.es-app body.app-detalle > header{background:var(--nieve);box-shadow:0 .5px 0 var(--linea-clara)}
  html.es-app .lector-continuar.app-lector-barra{background:var(--nieve);box-shadow:0 -.5px 0 var(--linea-clara)}
  html.es-app body.modo-lector > header.site-header::before,
  html.es-app body.app-detalle > header::before,
  html.es-app .lector-continuar.app-lector-barra::before,
  html.es-app .app-pestanas::after,
  html.es-app .app-lector-barra .lector-continuar-interior > button::after{display:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.es-app .feedback.app-correccion,
  html.es-app .feedback.bien.app-correccion{background:var(--blanco);-webkit-backdrop-filter:none;backdrop-filter:none}
  html.es-app .app-hoja-cuerpo .app-grupo{background:var(--blanco)}
  /* La hoja no desvanece su cuerpo: un filete bajo la cabecera marca dónde se corta la lista. */
  html.es-app .app-hoja-cuerpo{-webkit-mask-image:none;mask-image:none;border-top:.5px solid var(--linea-clara)}
}
/* «Aumentar contraste» añade bordes visibles a los controles, un filete al panel y a la hoja con el
   hueco del panel relleno de nieve opaca, y refuerza Comprobar apagado. */
@media (prefers-contrast:more){
  html.es-app{--cc-claro-sombra:0 0 0 1px rgba(14,27,38,.6);--cc-aurora-sombra:0 0 0 1px var(--noche);--cc-humo-sombra:0 0 0 1px var(--nieve);--cc-noche-sombra:0 0 0 1px var(--nieve);--cc-fiordo-sombra:0 0 0 1px var(--fiordo);--cc-sombra-flota:0 0 0 1px rgba(14,27,38,.6);--cc-humo-flota:0 0 0 1px var(--nieve);--cc-aurora-flota:0 0 0 1px var(--noche);--cc-casilla-sombra:inset 0 0 0 2px rgba(14,27,38,.72);--cc-casilla-si-sombra:0 0 0 1px var(--noche);--cc-alerta-sombra:0 0 0 1px var(--alerta)}
  html.es-app .app-pestana{color:var(--noche)}
  html.es-app .app-pestana[aria-current="page"]{background:rgba(63,203,148,.26);box-shadow:inset 0 0 0 1.5px var(--noche)}
  html.es-app .app-segmentado,
  html.es-app .app-practica-tipos,
  html.es-app .pronunciacion-modelos{box-shadow:inset 0 0 0 1px rgba(14,27,38,.6)}
  html.es-app .app-segmentado a[aria-current="page"]::before,
  html.es-app .app-practica-tipos button[aria-pressed="true"]::before,
  html.es-app .pronunciacion .pronunciacion-modelo[aria-pressed="true"]::before{background:var(--blanco);box-shadow:0 0 0 1.5px var(--noche)}
  html.es-app .feedback.app-correccion,
  html.es-app .feedback.bien.app-correccion{box-shadow:0 0 0 1px rgba(14,27,38,.5),0 36px 0 24px var(--nieve)}
  html.es-app .app-hoja{box-shadow:0 0 0 1px rgba(14,27,38,.5),0 -10px 40px rgba(14,27,38,.2)}
  /* Fichas, opciones, tarjetas pulsables, el selector del kit oral y las frases que se tocan para oírlas. */
  html.es-app .ficha,
  html.es-app .tarjeta,
  html.es-app .opcion-mc,
  html.es-app .app-larsito .bloque,
  html.es-app .app-larsito .op{border-color:rgba(14,27,38,.6)}
  html.es-app .nav-pieza .nav-card,
  html.es-app .lesson-apoyo > summary,
  html.es-app .practica-llamada{box-shadow:0 0 0 1px rgba(14,27,38,.6)}
  html.es-app .ruta21 select{--cc-s:0 0 0 1px var(--nieve)}
  html.es-app .seccion-cuerpo .oir-frase code{box-shadow:inset 0 0 0 1px var(--fiordo)}
  /* Lo apagado: la norma lo exime, pero quien pide más contraste tiene que ver que existe. */
  html.es-app .btn:disabled,
  html.es-app .ejercicio .btn:disabled,
  html.es-app .resumen-practica .btn:disabled,
  html.es-app .app-larsito .btn:disabled,
  html.es-app .app-larsito .mini:disabled,
  html.es-app .app-larsito .mic:disabled,
  html.es-app #formulario .btn:disabled,
  html.es-app .pronunciacion .pronunciacion-acciones .btn:disabled,
  html.es-app .audio-ref .oir-audio:disabled,
  html.es-app .app-practica-mas:disabled,
  html.es-app .nav-pieza .nav-card:disabled,
  html.es-app .app-lector-barra .app-lector-anterior:disabled{color:rgba(14,27,38,.62);outline:1px dashed rgba(14,27,38,.55);outline-offset:-1px}
  html.es-app .app-lector-barra .app-lector-anterior:disabled{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  html.es-app .app-hoja[open],
  html.es-app .app-hoja.cerrando,
  html.es-app .app-hoja[open]::backdrop,
  html.es-app .app-hoja.cerrando::backdrop{animation:none}
  html.es-app .app-hoja.soltando,
  html.es-app .app-pestana,
  html.es-app .app-barra-compacta,
  html.es-app .app-barra-compacta.visible,
  html.es-app .app-boton,
  html.es-app .app-circulo,
  html.es-app .app-fila,
  html.es-app .app-segmentado a,
  html.es-app .app-segmentado a::before,
  html.es-app .app-cuaderno,
  html.es-app .app-lector-atras span,
  html.es-app .app-lector-barra .lector-continuar-interior > button,
  html.es-app .app-practica-mas,
  html.es-app .app-practica-tipos button,
  html.es-app .app-practica-tipos button::before,
  html.es-app .practica-llamada,
  html.es-app .back,
  html.es-app .lesson-apoyo > summary,
  html.es-app .nav-pieza .nav-card,
  html.es-app body.app-detalle > header,
  html.es-app .app-detalle-cab .app-lector-centro,
  html.es-app .app-larsito .btn,
  html.es-app .app-larsito .mini,
  html.es-app #formulario .btn,
  html.es-app #contenido .faq summary::after,
  html.es-app .pronunciacion .pronunciacion-modelo,
  html.es-app .pronunciacion .pronunciacion-modelo::before,
  html.es-app .pronunciacion .pronunciacion-acciones .btn,
  html.es-app .pronunciacion-texto summary::after,
  html.es-app .pronunciacion-pares summary::after,
  html.es-app .ejercicio .audio-texto > summary::after,
  html.es-app .app-larsito .enlaces-informe a,
  html.es-app .pronunciacion-acceso,
  html.es-app .pronunciacion-pares summary,
  html.es-app .skip,
  html.es-app .pronunciacion-lista label,
  html.es-app .pronunciacion-lista input,
  html.es-app .seccion-bloques .voz-bloque{transition:none}
  html.es-app .app-grabar.grabando::before{animation:none}
  html.es-app .app-larsito .btn:active,
  html.es-app .app-larsito .mini:active,
  html.es-app #formulario .btn:active,
  html.es-app .pronunciacion .pronunciacion-acciones .btn:active,
  html.es-app .seccion-bloques .voz-bloque:active{transform:none}
  html.es-app .feedback.app-correccion,
  html.es-app .ejercicio,
  html.es-app .resumen-practica{animation:none}
  html.es-app .app-practica-mas:active,
  html.es-app .practica-llamada:active,
  html.es-app .feedback.app-correccion > .btn:active{transform:none}
  html.es-app .app-pestana:active,
  html.es-app .app-boton:active,
  html.es-app .app-circulo:active,
  html.es-app a.app-cuaderno:active,
  html.es-app button.app-cuaderno:active,
  html.es-app .app-lector-atras:active span,
  html.es-app .app-lector-barra .lector-continuar-interior > button:active{transform:none}
}

@keyframes app-hoja-sube{from{transform:translateY(calc(100% + 40px))}to{transform:none}}
@keyframes app-hoja-baja{from{transform:none}to{transform:translateY(calc(100% + 40px))}}
@keyframes app-velo-aparece{from{opacity:0}to{opacity:1}}
@keyframes app-velo-desaparece{from{opacity:1}to{opacity:0}}
@keyframes app-aparece{from{opacity:0}to{opacity:1}}
@keyframes app-correccion-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes app-late{0%,100%{opacity:1}50%{opacity:.35}}

html.es-app .ejercicio-cab .ejercicio-anterior{font-size:.76rem;min-height:44px;padding:8px 12px;letter-spacing:0}
html.es-app .ejercicio .ejercicio-instruccion{font-size:1rem;line-height:1.5}

/* Escuchas de la ruta B1 (audio v4 del 30.09.2026): reproductor en tarjeta y desplegables del guion y la solución. */
html.es-app .escucha-b1{border:0;border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(14,27,38,.04),0 0 0 .5px rgba(14,27,38,.08)}
html.es-app .escucha-b1 .audio-fila .btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:var(--app-alto-min);font-size:15.5px}
html.es-app details.escucha-solucion > summary,html.es-app details.escucha-texto > summary{list-style:none;text-decoration:none;font-weight:700;font-size:14.5px;gap:6px;-webkit-tap-highlight-color:transparent}
html.es-app details.escucha-solucion > summary::-webkit-details-marker,html.es-app details.escucha-texto > summary::-webkit-details-marker{display:none}
html.es-app details.escucha-solucion > summary::after,html.es-app details.escucha-texto > summary::after{content:"";flex:none;width:12px;height:12px;background-color:currentColor;-webkit-mask:var(--app-i-chevron) center/contain no-repeat;mask:var(--app-i-chevron) center/contain no-repeat;transition:transform .2s var(--ease)}
html.es-app details.escucha-solucion[open] > summary::after,html.es-app details.escucha-texto[open] > summary::after{transform:rotate(90deg)}

/* ---------- Cristal de los componentes (11.10.2026) ----------
   Las familias de norsk/componentes.css (nx-*) con la receta de «Cristal de los controles», para que los
   módulos nuevos (audiocurso, vídeo, práctica nueva, recursos de la lección) se vean en la app como el
   resto: principal aurora, secundario claro, humo mientras suena, tarjetas y opciones de cristal blanco. */
html.es-app .nx-btn{--cc-s:var(--cc-aurora-sombra);--cc-toque:var(--cc-toque-pri);min-height:var(--app-alto-boton);font-size:16px;background:var(--cc-brillo),var(--cc-aurora-base);box-shadow:var(--cc-s)}
html.es-app .nx-sec{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);min-height:var(--app-alto-min);font-size:15px;background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s)}
html.es-app .nx-sec[aria-pressed="true"]{background:var(--cc-brillo),var(--app-tinte-aurora);box-shadow:inset 0 0 0 1.5px var(--aurora),var(--cc-s)}
html.es-app .nx-redondo{--cc-s:var(--cc-claro-sombra);--cc-toque:var(--cc-toque-claro);background:var(--cc-claro),var(--cc-claro-base);box-shadow:var(--cc-s)}
html.es-app .nx-redondo[data-sonando="true"],html.es-app .nx-redondo.sonando{--cc-s:var(--cc-humo-sombra);--cc-toque:var(--cc-toque-osc);background:var(--cc-brillo-humo),var(--cc-humo-base);color:var(--nieve)}
html.es-app .nx-enlace{text-decoration:none;font-size:15px}
html.es-app .nx-fila{border-radius:12px;font-size:calc(15px * var(--app-t))}
html.es-app .nx-tarjeta{background:var(--cc-tarjeta);box-shadow:var(--cc-tarjeta-sombra);border-radius:var(--app-radio-azulejo)}
html.es-app .nx-opcion{--cc-s:var(--cc-opcion-sombra);--cc-toque:var(--cc-toque-claro);border-radius:16px;background:var(--cc-opcion);box-shadow:var(--cc-s);font-size:calc(16px * var(--app-t))}
html.es-app .nx-recuadro{border-radius:var(--app-radio-control);background:var(--app-tinte-fiordo)}
html.es-app :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion):not(:disabled):active{filter:var(--cc-toque)}
html.es-app :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion):focus-visible{outline:2px solid transparent;box-shadow:var(--cc-foco),var(--cc-s)}
html.es-app :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion):disabled{background:rgba(14,27,38,.06);box-shadow:none;color:rgba(14,27,38,.4);opacity:1}
/* Los módulos dentro de la lección de la app: misma columna, mismos márgenes y textos que el lector. */
html.es-app .seccion-recurso .recurso-texto{font-size:calc(16px * var(--app-t));line-height:1.55}
html.es-app .seccion-recurso .recurso-bloque{border-top-color:var(--app-separador)}
html.es-app .nexo-audiocurso,html.es-app .nexo-audio-details,html.es-app .nexo-audio-tome{border-top-color:var(--app-separador)}
html.es-app .nexo-audio-rate select{border-radius:16px;background:var(--cc-campo)}
html.es-app .nexo-video-el{border-radius:var(--app-radio-control)}
html.es-app .np-paso{border-bottom-color:var(--app-separador)}
html.es-app .np-no{font-size:calc(17px * var(--app-t))}
@media(prefers-contrast:more){
  html.es-app :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion,.nx-tarjeta){background:var(--blanco);box-shadow:none;border:1px solid var(--tinta-suave)}
  html.es-app .nx-btn{background:var(--aurora)}
  html.es-app :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion):not(:disabled):active{filter:none}
}
@media(prefers-reduced-transparency:reduce){
  html.es-app :is(.nx-sec,.nx-redondo,.nx-opcion,.nx-tarjeta){background:var(--blanco)}
  html.es-app .nx-btn{background:var(--aurora)}
}

/* ---------- Cristal líquido en los botones del flujo (13.10.2026) ----------
   Josep: «todo efecto cristal iOS 27 igual que Inicio y Lecciones… y los botones que aparecen, como
   Ejercicios, Larsito». Los botones que no flotan llevan la receta de cristal sin desenfoque de
   «Cristal de los controles» (relleno translúcido, brillo arriba y filete de 0,5 px) más el borde de luz
   de 1 px de los botones de la barra del lector (--cc-luz en ::after con máscara). Sin backdrop-filter:
   van en el flujo, sobre el fondo liso, donde el desenfoque no se vería y solo costaría batería. Con
   «Aumentar contraste» o «Reducir transparencia» el borde de luz se retira (reservas, al final). */
html.es-app .app-tema{width:44px;height:44px;color:var(--noche)}
html.es-app .app-tema svg{width:20px;height:20px}
html.es-app .app-tema:focus-visible{outline:2px solid transparent;box-shadow:var(--cc-foco),var(--cc-s)}
/* La pastilla PRO o Muestra: cristal teñido, aurora o fiordo, con su brillo. */
html.es-app body > header .estado{background:var(--cc-brillo),rgba(63,203,148,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .5px rgba(14,27,38,.08),0 1px 2px rgba(14,27,38,.06)}
html.es-app body > header .estado.demo{background:var(--cc-brillo),var(--app-tinte-fiordo)}
/* Sombra de despegue suave para los botones de cristal del flujo. */
html.es-app :is(.app-tema,.app-mas-boton,.app-acceso){--cc-s:var(--cc-claro-sombra),0 6px 16px -8px rgba(14,27,38,.22)}
html.es-app :is(.app-circulo,.nx-sec,.app-practica-mas,.app-larsito .btn.ghost),
html.es-app body > header .estado{position:relative;isolation:isolate}
html.es-app .app-circulo::after,
html.es-app .nx-sec::after,
html.es-app .app-practica-mas::after,
html.es-app .app-larsito .btn.ghost::after,
html.es-app body > header .estado::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;padding:1px;border-radius:inherit;background:var(--cc-luz);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html.es-app .app-circulo::after,
  html.es-app .nx-sec::after,
  html.es-app .app-practica-mas::after,
  html.es-app .app-larsito .btn.ghost::after,
  html.es-app body > header .estado::after{display:none}
}

/* ---------- Modo oscuro (13.10.2026) ----------
   Solo dentro de la app: la web, PASS y la home no cambian. La clase «app-oscuro» la pone en <html>
   el script en línea del <head> (antes de pintar, sin parpadeo) y la mantiene app-ios.js según la
   fila «Apariencia» de la hoja «Más»: Automático sigue el ajuste del iPhone (prefers-color-scheme),
   Claro y Oscuro lo fijan en ese dispositivo. Los tokens de marca se invierten dentro de
   html.es-app.app-oscuro: --noche pasa a ser la tinta (Nieve) y --nieve el fondo (Noche), así cada
   regla que pinta texto con var(--noche) y fondos con var(--nieve) se adapta sin copiarla. --blanco,
   el de las superficies elevadas, es Nieve al 7 % sobre Noche; --fiordo, el acento tipográfico, pasa a
   Niebla aclarada con un 30 % de Nieve (8,8:1 sobre Noche y más de 5:1 sobre el cristal); --alerta
   pasa al ámbar claro. Aurora sigue siendo relleno de botón con tinta Noche encima, nunca texto. Tres
   excepciones devuelven los tokens de siempre a su caja: lo que va relleno de aurora (tinta Noche de
   verdad), las superficies noche (tarjeta del Inicio, cuaderno, bloques de cierre, que pasan a ser un
   tono elevado con texto Nieve) y los dibujos (ver más abajo). Debajo, solo las propiedades de color de
   las reglas que escriben a mano transparencias de noche o de blanco; ninguna regla se duplica entera. */
html.es-app.app-oscuro{
  color-scheme:dark;
  --noche:#F3F5F4;--nieve:#0E1B26;
  --blanco:color-mix(in srgb,#F3F5F4 7%,#0E1B26);
  --fiordo:color-mix(in srgb,#8DA1AB 70%,#F3F5F4);
  --tinta-suave:rgba(243,245,244,.74);
  --linea-clara:rgba(243,245,244,.14);
  --sombra-clara:0 14px 34px rgba(0,0,0,.28);
  --alerta:#E0A458;
  /* Tokens de la app */
  --app-separador:rgba(243,245,244,.11);
  --app-glifo-suave:rgba(243,245,244,.38);
  --app-glifo-estado:rgba(243,245,244,.55);
  --app-tinte-fiordo:rgba(141,161,171,.14);
  --app-tinte-aurora:rgba(63,203,148,.2);
  --app-tinte-alerta:rgba(224,164,88,.14);
  --app-sombra-celda:inset 0 0 0 .5px rgba(243,245,244,.08);
  --app-sombra-azulejo:inset 0 0 0 .5px rgba(243,245,244,.08),0 8px 22px rgba(0,0,0,.2);
  /* Una superficie un punto más clara que --blanco para las cajas noche y lo que flota encima. */
  --app-elevada:color-mix(in srgb,#F3F5F4 11%,#0E1B26);
  /* Cristal: el blanco translúcido pasa a Nieve muy tenue y los brillos se apagan. */
  --cc-claro:linear-gradient(180deg,rgba(243,245,244,.13) 0%,rgba(243,245,244,.08) 100%);
  --cc-claro-base:rgba(243,245,244,.03);
  --cc-claro-sombra:inset 0 1px 0 rgba(243,245,244,.14),inset 0 0 0 .5px rgba(243,245,244,.12),0 1px 2px rgba(0,0,0,.2);
  --cc-brillo:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 72%);
  --cc-aurora-sombra:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.25),0 6px 14px -6px rgba(0,0,0,.4);
  --cc-humo-base:rgba(243,245,244,.9);
  --cc-brillo-humo:linear-gradient(transparent,transparent);
  --cc-humo-sombra:inset 0 0 0 .5px rgba(255,255,255,.4),0 2px 6px rgba(0,0,0,.3);
  --cc-noche:linear-gradient(180deg,rgba(243,245,244,.16) 0%,rgba(243,245,244,.08) 100%);
  --cc-noche-sombra:inset 0 1px 0 rgba(243,245,244,.2),inset 0 0 0 .5px rgba(243,245,244,.14),0 6px 16px -6px rgba(0,0,0,.5);
  --cc-fiordo:linear-gradient(180deg,rgba(243,245,244,.1) 0%,rgba(243,245,244,.04) 100%),rgba(141,161,171,.16);
  --cc-fiordo-sombra:inset 0 1px 0 rgba(243,245,244,.14),inset 0 0 0 .5px rgba(141,161,171,.26);
  --cc-v-barra:linear-gradient(180deg,rgba(14,27,38,.78) 0%,rgba(14,27,38,.68) 100%);
  --cc-v-nieve:rgba(14,27,38,.84);
  --cc-v-panel:color-mix(in srgb,#F3F5F4 9%,#0E1B26);
  --cc-v-boton:linear-gradient(180deg,rgba(243,245,244,.16) 0%,rgba(243,245,244,.1) 100%);
  --cc-v-humo:rgba(243,245,244,.9);
  --cc-sombra-flota:inset 0 1px 0 rgba(243,245,244,.16),inset 0 0 0 .5px rgba(243,245,244,.14),0 12px 32px -8px rgba(0,0,0,.5);
  --cc-humo-flota:inset 0 0 0 .5px rgba(255,255,255,.4),0 12px 30px -8px rgba(0,0,0,.5);
  --cc-aurora-flota:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 .5px rgba(255,255,255,.22),0 12px 28px -10px rgba(0,0,0,.5);
  --cc-hoja:linear-gradient(180deg,rgba(243,245,244,.05) 0%,rgba(243,245,244,0) 140px);
  --cc-luz:linear-gradient(135deg,rgba(243,245,244,.4) 0%,rgba(243,245,244,.08) 28%,rgba(243,245,244,0) 50%,rgba(243,245,244,.06) 74%,rgba(243,245,244,.3) 100%);
  --cc-toque-claro:brightness(1.18);
  --cc-toque-osc:brightness(.9);
  --cc-foco:0 0 0 2px #0E1B26,0 0 0 4px #F3F5F4;
  --cc-foco-noche:0 0 0 2px #0E1B26,0 0 0 4px #F3F5F4;
  --cc-foco-flota:0 0 0 2px #0E1B26,0 0 0 4px #F3F5F4;
  --cc-tarjeta:linear-gradient(180deg,rgba(243,245,244,.1) 0%,rgba(243,245,244,.06) 100%);
  --cc-tarjeta-sombra:inset 0 1px 0 rgba(243,245,244,.1),inset 0 0 0 .5px rgba(243,245,244,.1),0 10px 26px -10px rgba(0,0,0,.4);
  --cc-grupo:linear-gradient(180deg,rgba(243,245,244,.08) 0%,rgba(243,245,244,.06) 100%);
  --cc-grupo-sombra:inset 0 1px 0 rgba(243,245,244,.08),inset 0 0 0 .5px rgba(243,245,244,.08);
  --cc-ficha:linear-gradient(180deg,rgba(243,245,244,.14) 0%,rgba(243,245,244,.09) 100%);
  --cc-ficha-sombra:inset 0 1px 0 rgba(243,245,244,.12),0 1px 2px rgba(0,0,0,.3);
  --cc-opcion:linear-gradient(180deg,rgba(243,245,244,.12) 0%,rgba(243,245,244,.07) 100%);
  --cc-opcion-sombra:inset 0 1px 0 rgba(243,245,244,.1),0 1px 2px rgba(0,0,0,.3);
  --cc-campo:rgba(243,245,244,.07);
  --cc-noche-tarjeta:inset 0 1px 0 rgba(243,245,244,.1),inset 0 0 0 .5px rgba(243,245,244,.1),0 18px 40px -12px rgba(0,0,0,.5);
  --cc-casilla:linear-gradient(180deg,rgba(243,245,244,.1) 0%,rgba(243,245,244,.05) 100%);
  --cc-casilla-sombra:inset 0 0 0 1.5px rgba(243,245,244,.55);
  --cc-alerta:linear-gradient(180deg,rgba(243,245,244,.08) 0%,rgba(243,245,244,.02) 100%),rgba(224,164,88,.16);
  --cc-alerta-sombra:inset 0 1px 0 rgba(243,245,244,.12),inset 0 0 0 .5px rgba(224,164,88,.3);
}
/* Tokens que componentes.css declara en body. */
html.es-app.app-oscuro body{
  --pa-sombra-grupo:inset 0 0 0 .5px rgba(243,245,244,.08);
  --pa-sombra-opcion:inset 0 0 0 .5px rgba(243,245,244,.1);
  --pa-sombra-boton:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -12px rgba(0,0,0,.5);
  --pa-sombra-sec:inset 0 0 0 .5px rgba(243,245,244,.14);
  --nx-tinte-fiordo:rgba(141,161,171,.12);
  --nx-tinte-aurora:rgba(63,203,148,.18);
}
/* Excepción 1 · Relleno aurora: dentro, --noche vuelve a ser la tinta Noche. */
html.es-app.app-oscuro :is(.btn:not(.ghost,.sonando,.grabando,:disabled),.app-boton:not(.gris,.secundario),.nx-btn,.primary,.app-fila-icono.destacada,.app-cuaderno-accion,.app-cuaderno-doc b,.app-biblioteca .app-fila-icono.hecha,.lector-continuar .app-lector-seguir,.app-correccion-solucion mark,.hoy-casilla.hecha .hoy-casilla-icono,.nx-redondo.sonando,.nx-redondo[data-sonando="true"],.marcar.marcar-cierre:not(.hecha) .btn.ghost){--noche:#0E1B26;--nieve:#F3F5F4;--tinta-suave:rgba(14,27,38,.72)}
/* Excepción 2 · Superficies noche: un tono elevado con texto Nieve. */
html.es-app.app-oscuro :is(.app-oscura,.siguiente-paso,.larsito-franja,.ruta21,.seccion-cuerpo pre,.seccion-cuerpo thead,.skip){--noche:var(--app-elevada);--nieve:#F3F5F4}
/* Excepción 3 · Dibujos: el trazo noche sobre relleno blanco del curso se invierte (trazo claro sobre
   relleno casi noche) y el giro de tono de 180° devuelve su color al aurora de la bufanda de Pepet. Así
   no quedan siluetas blancas ni trazos que se pierden en el fondo. Las fotos no se tocan. */
html.es-app.app-oscuro :is(img[src*="/ilustraciones/"],.vocabulario-sprite,.lamina-celda-imagen > img){filter:invert(.9) hue-rotate(180deg) saturate(1.15)}
html.es-app.app-oscuro body.curso-integrado .app-hoy-media img{mix-blend-mode:normal}
/* El símbolo de la marca va en aurora sobre oscuro, como en la home. */
html.es-app.app-oscuro .marca svg path{stroke:#3FCB94}
/* Transparencias escritas a mano en las reglas de arriba: solo su color. */
html.es-app.app-oscuro .app-pestanas{background:rgba(14,27,38,.92);border-top-color:rgba(243,245,244,.1)}
html.es-app.app-oscuro .app-pestana:active svg{background:rgba(243,245,244,.1)}
html.es-app.app-oscuro :is(.app-fila,.pronunciacion-lista label,.pronunciacion-pares summary):active,
html.es-app.app-oscuro #contenido .faq summary:active{background:rgba(243,245,244,.08)}
html.es-app.app-oscuro .app-hoja::backdrop{background:rgba(0,0,0,.5)}
html.es-app.app-oscuro .app-hoja-velo{background:rgba(0,0,0,.5)}
html.es-app.app-oscuro .app-hoja{box-shadow:inset 0 1px 0 rgba(243,245,244,.12),inset 0 0 0 .5px rgba(243,245,244,.1),0 -10px 40px rgba(0,0,0,.5)}
html.es-app.app-oscuro .app-hoja-asa{background:rgba(243,245,244,.28)}
html.es-app.app-oscuro .app-hoja-cerrar{color:rgba(243,245,244,.8)}
html.es-app.app-oscuro .app-hoja-cuerpo .app-grupo{background:var(--blanco);box-shadow:inset 0 0 0 .5px rgba(243,245,244,.08)}
html.es-app.app-oscuro :is(.app-lector-avance i,.practica-barra i){background:rgba(243,245,244,.14)}
html.es-app.app-oscuro .app-lector-atras span{background:var(--cc-claro),var(--cc-claro-base)}
html.es-app.app-oscuro .app-lector-atras:active span{background:rgba(243,245,244,.2)}
html.es-app.app-oscuro .lector-continuar .app-lector-seguir small{color:rgba(14,27,38,.86)}
html.es-app.app-oscuro .lector-continuar.app-lector-barra::before{background:linear-gradient(to top,rgba(14,27,38,.9) 0,rgba(14,27,38,.82) 34%,rgba(14,27,38,0) 100%)}
html.es-app.app-oscuro .ejercicio,
html.es-app.app-oscuro .resumen-practica,
html.es-app.app-oscuro .app-larsito .responder{box-shadow:inset 0 0 0 .5px rgba(243,245,244,.08)}
html.es-app.app-oscuro :is(.tarjeta,.opcion-mc,.app-larsito .bloque,.app-larsito .op){border-color:rgba(243,245,244,.12)}
html.es-app.app-oscuro .ficha-flotante{box-shadow:inset 0 1px 0 rgba(243,245,244,.2),0 16px 34px -6px rgba(0,0,0,.6)}
html.es-app.app-oscuro :is(.ficha-hueco,.banco-fichas .ficha.usada,.hueco){border-color:rgba(141,161,171,.5);background:rgba(141,161,171,.06)}
html.es-app.app-oscuro #formulario textarea::placeholder{color:rgba(243,245,244,.6)}
html.es-app.app-oscuro .feedback.app-correccion{box-shadow:inset 0 1px 0 rgba(243,245,244,.12),inset 0 0 0 .5px rgba(243,245,244,.1),0 22px 50px -12px rgba(0,0,0,.6),0 36px 18px 24px rgba(14,27,38,.9)}
html.es-app.app-oscuro .app-correccion-solucion{background:rgba(243,245,244,.06);box-shadow:inset 0 0 0 .5px rgba(243,245,244,.08)}
html.es-app.app-oscuro .seccion-cuerpo .oir-frase code{box-shadow:inset 0 0 0 .5px rgba(141,161,171,.3)}
html.es-app.app-oscuro .seccion-cuerpo .oir-frase:focus-visible code{background:rgba(141,161,171,.24)}
html.es-app.app-oscuro .seccion-bloques .voz-bloque:disabled,
html.es-app.app-oscuro :is(.app-practica-mas,.nav-pieza .nav-card,.nx-btn,.nx-sec,.nx-redondo,.nx-opcion):disabled{background:rgba(243,245,244,.06);box-shadow:none;color:rgba(243,245,244,.4)}
html.es-app.app-oscuro :is(.app-segmentado,.app-practica-tipos,.pronunciacion-modelos){background:rgba(243,245,244,.06);box-shadow:inset 0 0 0 .5px rgba(243,245,244,.08)}
html.es-app.app-oscuro :is(.app-segmentado a[aria-current="page"],.app-practica-tipos button[aria-pressed="true"],.pronunciacion .pronunciacion-modelo[aria-pressed="true"])::before{background:rgba(243,245,244,.18);box-shadow:inset 0 1px 0 rgba(243,245,244,.16),0 1px 3px rgba(0,0,0,.3)}
html.es-app.app-oscuro :is(.app-segmentado a:not([aria-current="page"]),.app-practica-tipos button:not([aria-pressed="true"]),.pronunciacion .pronunciacion-modelo:not([aria-pressed="true"])):active::before{background:rgba(243,245,244,.1);box-shadow:none}
html.es-app.app-oscuro .app-larsito .repite .mini:not(.app-grabar){background:var(--cc-claro),var(--cc-claro-base)}
html.es-app.app-oscuro .app-plegable-cuerpo{background:rgba(243,245,244,.04)}
html.es-app.app-oscuro body > header .estado{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(243,245,244,.1)}
html.es-app.app-oscuro :is(.app-tema,.app-mas-boton,.app-acceso){--cc-s:var(--cc-claro-sombra),0 6px 16px -8px rgba(0,0,0,.5)}
html.es-app.app-oscuro .escucha-b1{background:var(--blanco);box-shadow:inset 0 0 0 .5px rgba(243,245,244,.08)}
html.es-app.app-oscuro .app-cuaderno-doc::before{background:rgba(14,27,38,.3);box-shadow:0 6px 0 rgba(14,27,38,.3),0 12px 0 rgba(14,27,38,.3)}
/* En el curso integrado la tarjeta del Inicio y el cuaderno van sin caja, sobre el fondo de la página. */
html.es-app.app-oscuro body.curso-integrado :is(.app-hoy,.app-cuaderno){--noche:#F3F5F4;--nieve:#0E1B26}

/* Oscuro con «Aumentar contraste» o «Reducir transparencia»: las mismas reservas opacas de arriba, pero
   en superficies noche (--blanco) en lugar de blanco, y los filetes en Nieve. */
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  html.es-app.app-oscuro{--cc-claro:linear-gradient(var(--blanco),var(--blanco));--cc-claro-base:var(--blanco);--cc-fiordo:linear-gradient(rgba(141,161,171,.16),rgba(141,161,171,.16)),var(--blanco);--cc-v-barra:linear-gradient(var(--nieve),var(--nieve));--cc-v-nieve:var(--nieve);--cc-v-panel:var(--blanco);--cc-v-boton:linear-gradient(var(--blanco),var(--blanco));--cc-humo-base:var(--noche);--cc-v-humo:var(--noche);--cc-tarjeta:linear-gradient(var(--blanco),var(--blanco));--cc-grupo:linear-gradient(var(--blanco),var(--blanco));--cc-ficha:linear-gradient(var(--blanco),var(--blanco));--cc-opcion:linear-gradient(var(--blanco),var(--blanco));--cc-campo:var(--blanco);--cc-casilla:linear-gradient(var(--blanco),var(--blanco));--cc-alerta:linear-gradient(rgba(224,164,88,.16),rgba(224,164,88,.16)),var(--blanco);--cc-brillo:linear-gradient(transparent,transparent);--cc-hoja:linear-gradient(transparent,transparent)}
  html.es-app.app-oscuro .app-pestanas{background:var(--nieve)}
}
@media (prefers-contrast:more){
  html.es-app.app-oscuro{--cc-claro-sombra:0 0 0 1px rgba(243,245,244,.6);--cc-sombra-flota:0 0 0 1px rgba(243,245,244,.6);--cc-humo-sombra:0 0 0 1px var(--nieve);--cc-aurora-sombra:0 0 0 1px var(--noche);--app-separador:rgba(243,245,244,.3);--tinta-suave:rgba(243,245,244,.86)}
  html.es-app.app-oscuro :is(.app-segmentado,.app-practica-tipos,.pronunciacion-modelos){box-shadow:inset 0 0 0 1px rgba(243,245,244,.6)}
  html.es-app.app-oscuro .feedback.app-correccion,
  html.es-app.app-oscuro .feedback.bien.app-correccion{box-shadow:0 0 0 1px rgba(243,245,244,.5),0 36px 0 24px var(--nieve)}
  html.es-app.app-oscuro .app-hoja{box-shadow:0 0 0 1px rgba(243,245,244,.5)}
  html.es-app.app-oscuro :is(.ficha,.tarjeta,.opcion-mc,.app-larsito .bloque,.app-larsito .op){border-color:rgba(243,245,244,.6)}
  html.es-app.app-oscuro :is(.nav-pieza .nav-card,.lesson-apoyo > summary,.practica-llamada){box-shadow:0 0 0 1px rgba(243,245,244,.6)}
  html.es-app.app-oscuro :is(.btn,.ejercicio .btn,.resumen-practica .btn,.app-larsito .btn,.app-larsito .mini,.app-larsito .mic,#formulario .btn,.pronunciacion .pronunciacion-acciones .btn,.audio-ref .oir-audio,.app-practica-mas,.nav-pieza .nav-card,.app-lector-barra .app-lector-anterior):disabled{color:rgba(243,245,244,.66);outline-color:rgba(243,245,244,.6)}
}