/* Componentes comunes de NEXO NORSK · 11.10.2026 (ESTILO.md, «Componentes»).
   Un solo juego de botones, tarjetas, opciones y recuadros para el curso y sus módulos (audiocurso,
   vídeo, práctica nueva, recursos de la lección), Larsito y las dudas. Los módulos ponen la familia en
   su marcado (class="… nx-sec") y en su hoja solo dejan la colocación: nada de colores, sombras ni
   esquinas propias. Solo usa los tokens del :root de cada página y las transparencias de esos mismos
   colores. Dentro de la app, norsk/app-ios.css les da el cristal («Cristal de los componentes»).

   Esquinas permitidas: cápsula (999px), círculo (50%), ficha 12px, recuadro 14px, campo 16px,
   opción y grupo 18px, tarjeta 20px, tarjeta grande 24px y hoja 36px. El guard lo comprueba. */

body{
  --pa-sombra-grupo:0 0 0 .5px rgba(14,27,38,.07),0 1px 2px rgba(14,27,38,.04),0 12px 28px -14px rgba(14,27,38,.16);
  --pa-sombra-opcion:0 0 0 .5px rgba(14,27,38,.08),0 1px 2px rgba(14,27,38,.05),0 8px 20px -12px rgba(14,27,38,.18);
  --pa-sombra-boton:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 .5px rgba(14,27,38,.08),0 10px 22px -12px rgba(14,27,38,.42);
  --pa-sombra-sec:0 0 0 .5px rgba(14,27,38,.12),0 1px 2px rgba(14,27,38,.05),0 8px 18px -12px rgba(14,27,38,.2);
  --pa-principal:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 58%),var(--aurora);
  --nx-tinte-fiordo:rgba(44,90,114,.08);
  --nx-tinte-aurora:rgba(63,203,148,.16);
}

/* Botones: principal (aurora), secundario (blanco), redondo de escucha y enlace de acción. Dentro de una
   lección el único principal es «Continuar»: escuchar, ver y abrir van en secundario. */
.nx-btn,.nx-sec{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  min-height:44px;padding:10px 20px;border:0;border-radius:999px;
  font:inherit;font-family:var(--sg);font-size:.95rem;line-height:1.3;text-align:center;text-decoration:none;
  color:var(--noche);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:filter .18s var(--ease),transform .18s var(--ease);
}
.nx-btn{font-weight:700;background:var(--pa-principal);box-shadow:var(--pa-sombra-boton)}
.nx-sec{font-weight:600;background:var(--blanco);box-shadow:var(--pa-sombra-sec)}
/* Marcado (una variante elegida, el audio que suena): anillo aurora interior sobre tinte aurora. */
.nx-sec[aria-pressed="true"]{background:var(--nx-tinte-aurora);box-shadow:inset 0 0 0 1.5px var(--aurora)}
.nx-redondo{
  display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:44px;height:44px;min-width:44px;padding:0;
  border:0;border-radius:50%;background:var(--blanco);box-shadow:var(--pa-sombra-sec);color:var(--fiordo);
  font:inherit;font-size:.85rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.nx-redondo[data-sonando="true"],.nx-redondo.sonando{background:var(--aurora);color:var(--noche)}
.nx-enlace{
  display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;
  font:inherit;font-family:var(--sg);font-size:.9rem;font-weight:600;line-height:1.4;color:var(--fiordo);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;
}
/* Fila de una lista (pistas del audiocurso, actividades de un vídeo): a lo ancho, sin forma propia. */
.nx-fila{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;
  min-height:48px;padding:12px 10px;border:0;border-radius:12px;background:transparent;
  font:inherit;font-family:var(--sg);font-size:.86rem;line-height:1.4;color:var(--fiordo);text-align:left;overflow-wrap:anywhere;cursor:pointer;
}
.nx-fila[aria-current="true"]{background:var(--nx-tinte-aurora);color:var(--noche)}

/* Superficies: tarjeta (20 px), opción de respuesta (18 px) y recuadro con tinte (14 px, sin filete). */
.nx-tarjeta{border:0;border-radius:20px;background:var(--blanco);box-shadow:var(--pa-sombra-grupo)}
.nx-opcion{
  display:block;width:100%;box-sizing:border-box;min-height:46px;padding:10px 16px;border:0;border-radius:18px;
  background:var(--blanco);box-shadow:var(--pa-sombra-opcion);color:var(--noche);
  font:inherit;font-size:.98rem;text-align:left;cursor:pointer;touch-action:manipulation;
}
.nx-recuadro{border:0;border-radius:14px;background:var(--nx-tinte-fiordo);padding:12px 16px}

.nx-btn:disabled,.nx-sec:disabled,.nx-redondo:disabled,.nx-opcion:disabled,.nx-fila:disabled{opacity:.45;cursor:default;filter:none}
:is(.nx-btn,.nx-sec,.nx-redondo,.nx-enlace,.nx-fila,.nx-opcion):focus-visible{outline:2px solid var(--fiordo);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion):not(:disabled):hover{filter:brightness(1.04)}
  .nx-fila:not(:disabled):hover{background:var(--nx-tinte-fiordo)}
}
:is(.nx-btn,.nx-sec,.nx-redondo):not(:disabled):active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){:is(.nx-btn,.nx-sec,.nx-redondo):not(:disabled):active{transform:none}}
@media(forced-colors:active){
  :is(.nx-btn,.nx-sec,.nx-redondo,.nx-opcion,.nx-tarjeta,.nx-recuadro){border:1px solid ButtonText}
  :is(.nx-sec[aria-pressed="true"],.nx-redondo[data-sonando="true"],.nx-fila[aria-current="true"]){outline:2px solid Highlight}
}
@media(prefers-contrast:more){:is(.nx-sec,.nx-redondo,.nx-opcion,.nx-tarjeta){box-shadow:none;border:1px solid var(--tinta-suave)}}

/* Mezcla de la unidad (plan de mejora del contenido, fase 4): acceso al final de la última lección. */
.mezcla-unidad-acceso{margin:2rem 0;padding:1.25rem 1.25rem 1.4rem;border-radius:18px;background:var(--nx-tinte-aurora);box-shadow:var(--pa-sombra-grupo)}
.mezcla-unidad-acceso h3{margin-top:0}
/* Comentario de tu texto en las tareas de la prueba escrita (plan de mejora del contenido, fase 6,
   12.10.2026). El cuadro es un nx-recuadro y el comentario una nx-tarjeta: aquí solo va la colocación
   y el campo de texto. */
.escritura-ia{margin:18px 0 22px}
.escritura-ia h4{margin:0 0 6px}
.escritura-ia textarea{display:block;box-sizing:border-box;width:100%;min-height:180px;margin:10px 0 6px;padding:12px;border-radius:16px;border:1px solid var(--linea-clara);background:var(--blanco);color:var(--noche);font:inherit;line-height:1.5;resize:vertical}
.escritura-contador{margin:0 0 10px;font-size:.9rem;color:var(--tinta-suave)}
.escritura-permiso{margin:0 0 12px;font-size:.92rem}
.escritura-comentario{margin-top:14px;padding:16px}
.escritura-comentario .kicker{margin:0 0 8px}
.escritura-criterios{list-style:none;margin:10px 0;padding:0}
.escritura-criterios li{margin:0 0 8px;line-height:1.45}
.escritura-criterios .estado{display:inline-block;margin-right:4px;padding:2px 10px;border-radius:999px;font-family:var(--sg);font-weight:700;font-size:.78rem}
.escritura-criterios .estado-listo{background:rgba(63,203,148,.18)}
.escritura-criterios .estado-repasa{background:rgba(143,90,15,.12)}
.escritura-criterios .estado-duda{background:rgba(14,27,38,.08)}
.escritura-foco{margin:12px 0}
.escritura-frase{margin:6px 0}
.escritura-frase .eti{display:block;font-family:var(--sg);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}