/* Glosa · sistema visual «Sello» (impresión de seguridad).
   Tintas fijas: inglés marino, español magenta, teal para la roseta y
   «Correcto», oro solo para la racha. «Incorrecto» va en tinta neutra. */

:root {
  color-scheme: light;
  --papel: #f2f4f0;
  --hoja: #fbfcfa;
  --filete: #d4dcdb;
  --filete-fuerte: #9fabb3;
  --trama: rgba(14, 124, 102, 0.15);
  --en: #13233f;
  --es: #c2185b;
  --teal: #0e7c66;
  --teal-hondo: #0a5c4c;
  --oro: #94650f;
  --neutra: #3a4560;
  --suave: #566075;
  --activo: #2453c8;
  --primario: #13233f;
  --primario-tinta: #fbfcfa;
  --bloqueado: #8a93a3;
  --sombra: 0 1px 2px rgba(19, 35, 63, 0.06), 0 14px 32px -18px rgba(19, 35, 63, 0.28);
  --sombra-hoja: 0 -18px 40px -24px rgba(19, 35, 63, 0.35);
  --correcto-tinta: #fff;

  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ipa: 'Charis SIL', 'Doulos SIL', 'Gentium Plus', serif;

  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --radio: 4px;
  --radio-hoja: 6px;
  --alto-control: 48px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;
    --papel: #0f1626;
    --hoja: #151e31;
    --filete: #27334b;
    --filete-fuerte: #4a5875;
    --trama: rgba(60, 191, 159, 0.12);
    --en: #e4eaf6;
    --es: #f2779f;
    --teal: #3cbf9f;
    --teal-hondo: #6fd6bb;
    --oro: #e2b65e;
    --neutra: #c3cde2;
    --suave: #9ba7be;
    --activo: #8fb0ff;
    --primario: #2b3d66;
    --primario-tinta: #eef2fa;
    --bloqueado: #59647b;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 34px -18px rgba(0, 0, 0, 0.6);
    --sombra-hoja: 0 -18px 40px -20px rgba(0, 0, 0, 0.7);
    --correcto-tinta: #08251f;
  }
}
:root[data-tema='oscuro'] {
  color-scheme: dark;
  --papel: #0f1626;
  --hoja: #151e31;
  --filete: #27334b;
  --filete-fuerte: #4a5875;
  --trama: rgba(60, 191, 159, 0.12);
  --en: #e4eaf6;
  --es: #f2779f;
  --teal: #3cbf9f;
  --teal-hondo: #6fd6bb;
  --oro: #e2b65e;
  --neutra: #c3cde2;
  --suave: #9ba7be;
  --activo: #8fb0ff;
  --primario: #2b3d66;
  --primario-tinta: #eef2fa;
  --bloqueado: #59647b;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 34px -18px rgba(0, 0, 0, 0.6);
  --sombra-hoja: 0 -18px 40px -20px rgba(0, 0, 0, 0.7);
  --correcto-tinta: #08251f;
}

/* --- Papel ---------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }
body.g-papel {
  margin: 0;
  background: var(--papel);
  color: var(--en);
  font: 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  caret-color: var(--en);
  -webkit-font-smoothing: antialiased;
}
.g-papel::before,
.g-papel::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: 64px;
  background: var(--trama);
  -webkit-mask: url(borde.svg) repeat-y;
  mask: url(borde.svg) repeat-y;
  pointer-events: none;
  z-index: 0;
}
.g-papel::before { left: 0; }
.g-papel::after { right: 0; transform: scaleX(-1); }

::selection { background: color-mix(in srgb, var(--teal) 24%, transparent); color: inherit; }
:focus-visible { outline: 2px solid var(--activo); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--filete-fuerte) transparent; }

/* --- Tipografía ----------------------------------------------------------- */

.g-marca { font: 700 20px/1 var(--serif); letter-spacing: -0.01em; color: var(--en); }
.g-titulo { font: 600 26px/1.15 var(--serif); letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.g-texto { font: 400 16px/1.5 var(--sans); color: var(--en); margin: 0; }
.g-nota { font: 400 14px/1.45 var(--sans); color: var(--suave); margin: 0; }
.g-etiqueta {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
}
.g-cifra { font: 600 40px/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.g-enlace {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--filete-fuerte);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.g-enlace:hover { text-decoration-color: currentColor; }

/* --- Íconos --------------------------------------------------------------- */

.g-icono {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.g-boton {
  box-sizing: border-box;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--alto-control);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: 500 14.5px/1 var(--mono);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 160ms var(--salida), background-color 200ms var(--salida), box-shadow 200ms var(--salida);
  -webkit-tap-highlight-color: transparent;
}
.g-boton:active:not(:disabled) { transform: translateY(1px); }
.g-boton .g-icono { width: 18px; height: 18px; }
.g-boton--ancho { width: 100%; }

.g-boton--primario { background: var(--primario); color: var(--primario-tinta); }
.g-boton--primario:hover:not(:disabled) { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--primario) 70%, transparent); }

.g-boton--secundario { background: transparent; color: var(--en); border-color: var(--en); }
.g-boton--secundario:hover:not(:disabled) { background: color-mix(in srgb, var(--en) 6%, transparent); }

.g-boton--correcto { background: var(--teal); color: var(--correcto-tinta); }
.g-boton--correcto:hover:not(:disabled) { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--teal) 80%, transparent); }

/* «Incorrecto»: tinta neutra, contorno punteado y ×. Nunca magenta ni rojo. */
.g-boton--incorrecto {
  background: var(--hoja);
  color: var(--neutra);
  border: 1.5px dashed color-mix(in srgb, var(--neutra) 70%, transparent);
}
.g-boton--incorrecto:hover:not(:disabled) { border-color: var(--neutra); }

.g-boton--texto { background: none; color: var(--en); min-height: 40px; padding: 0 6px; }
.g-boton--texto:hover { text-decoration: underline; text-underline-offset: 4px; }

.g-boton:disabled { opacity: 0.42; cursor: default; }

.g-respuestas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --- Campos --------------------------------------------------------------- */

.g-campo { display: grid; gap: 8px; }
.g-entrada {
  appearance: none;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--hoja);
  color: var(--en);
  font: 400 16px/1 var(--sans);
  transition: border-color 160ms var(--salida), box-shadow 160ms var(--salida);
}
.g-entrada::placeholder { color: color-mix(in srgb, var(--suave) 80%, transparent); }
.g-entrada:focus { outline: none; border-color: var(--activo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--activo) 18%, transparent); }
.g-campo__error { font: 400 14px/1.4 var(--sans); color: var(--neutra); margin: 0; }

/* Código del correo: seis casillas. */
.g-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); gap: 8px; }
.g-codigo input {
  appearance: none;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: var(--hoja);
  color: var(--en);
  font: 500 22px/1 var(--mono);
  text-align: center;
  transition: border-color 160ms var(--salida), box-shadow 160ms var(--salida);
}
.g-codigo input:focus { outline: none; border-color: var(--activo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--activo) 18%, transparent); }

/* Selector de meta: 10 / 20 / 30 / 40. */
.g-segmento {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--en);
  border-radius: var(--radio);
  overflow: hidden;
}
.g-segmento label { position: relative; }
.g-segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.g-segmento span {
  display: grid;
  place-items: center;
  height: 44px;
  font: 500 15px/1 var(--mono);
  color: var(--en);
  transition: background-color 200ms var(--salida), color 200ms var(--salida);
}
.g-segmento label + label span { border-left: 1px solid var(--en); }
.g-segmento input:checked + span { background: var(--primario); color: var(--primario-tinta); }
.g-segmento input:focus-visible + span { outline: 2px solid var(--activo); outline-offset: -4px; }

/* --- Tarjeta -------------------------------------------------------------- */

/* Hoja con doble filete, como el marco de un certificado. */
.g-tarjeta {
  position: relative;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
  box-shadow: var(--sombra), inset 0 0 0 5px var(--hoja), inset 0 0 0 6px color-mix(in srgb, var(--filete) 70%, transparent);
  padding: 28px 22px;
  text-align: center;
}
.g-termino {
  margin: 0;
  font: 680 clamp(29px, 8.6vw, 42px)/1.06 var(--serif);
  font-variation-settings: 'opsz' 60;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.g-termino--en { color: var(--en); }
.g-termino--es { color: var(--es); }
.g-pron { margin: 10px 0 0; font: 500 14px/1.3 var(--sans); letter-spacing: 0.1em; }
.g-ipa { margin: 4px 0 0; font: 400 16px/1.3 var(--ipa); letter-spacing: 0.02em; }
.g-par--en .g-pron, .g-par--en .g-ipa { color: var(--en); }
.g-par--es .g-pron, .g-par--es .g-ipa { color: var(--es); }
.g-consigna { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--suave); text-align: center; }

/* Separador con un rombo al centro. */
.g-separador {
  position: relative;
  height: 1px;
  margin: 22px auto;
  width: min(72%, 280px);
  background: linear-gradient(90deg, transparent, var(--filete-fuerte) 18%, var(--filete-fuerte) 82%, transparent);
}
.g-separador::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--hoja);
  border: 1px solid var(--teal);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Botón de escuchar: círculo fino. */
.g-escuchar {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-top: 14px;
  border: 1px solid var(--filete-fuerte);
  border-radius: 50%;
  background: var(--hoja);
  color: var(--en);
  cursor: pointer;
  transition: border-color 160ms var(--salida), color 160ms var(--salida);
}
.g-escuchar:hover { border-color: var(--en); }
.g-escuchar[aria-pressed='true'] { color: var(--teal); border-color: var(--teal); }

/* --- Barra inferior ------------------------------------------------------- */

.g-barra {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--hoja) 92%, transparent);
  border-top: 1px solid var(--filete);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
}
.g-barra a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 6px 0 9px;
  color: var(--en);
  text-decoration: none;
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}
.g-barra .g-icono { width: 22px; height: 22px; stroke-width: 1.35; }
.g-barra a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--activo);
  transform: translateX(-50%) scaleX(0);
  transition: transform 320ms var(--salida);
}
.g-barra a[aria-current='page'] { color: var(--activo); }
.g-barra a[aria-current='page']::after { transform: translateX(-50%) scaleX(1); }

/* --- Hoja inferior y aviso ------------------------------------------------ */

.g-hoja {
  background: var(--hoja);
  border-top: 1px solid var(--filete);
  border-radius: 10px 10px 0 0;
  box-shadow: var(--sombra-hoja);
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
}
.g-hoja::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 2px;
  background: var(--filete);
}

.g-aviso {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 12px;
  background: var(--hoja);
  border: 1px solid var(--filete);
  border-radius: var(--radio-hoja);
  box-shadow: var(--sombra);
}
.g-aviso__sello { width: 48px; height: 48px; }
.g-aviso__texto { display: grid; gap: 4px; }
.g-aviso__titulo { font: 600 18px/1.2 var(--serif); }
.g-aviso--entra { animation: g-aviso-entra 620ms var(--salida) both; }
@keyframes g-aviso-entra {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* --- Roseta --------------------------------------------------------------- */

.roseta-caja { position: relative; width: var(--tam, 172px); aspect-ratio: 1; }
.roseta-caja > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.roseta .roseta__linea { fill: none; stroke: var(--teal); stroke-width: var(--trazo, 0.3); }
.roseta .roseta__plancha .roseta__linea { opacity: 0.1; }
.roseta .roseta__tinta .roseta__linea { opacity: 0.92; }
.roseta.roseta--compacta .roseta__linea { stroke-width: 0.75; }
.roseta .roseta__filete { fill: none; stroke: var(--teal); stroke-width: 0.7; opacity: 0.55; transition: opacity 600ms var(--salida); }
.roseta .roseta__filete--fino { stroke-width: 0.35; }
.roseta--llena .roseta__filete { opacity: 1; }

.roseta__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--teal-hondo);
  pointer-events: none;
}
.roseta__titulo { font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); }
.roseta__cuenta { font: 600 26px/1 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.roseta__de { color: color-mix(in srgb, var(--teal-hondo) 55%, transparent); font-weight: 400; }
.roseta__marca { font: 700 calc(var(--tam, 172px) * 0.155)/1 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: -0.015em; color: var(--en); }
.roseta--compacta + .roseta__centro { gap: 0; }
.roseta--compacta + .roseta__centro .roseta__titulo { display: none; }
.roseta--compacta + .roseta__centro .roseta__cuenta { display: grid; justify-items: center; font-size: 15px; line-height: 1; }
.roseta--compacta + .roseta__centro .roseta__de { font: 500 8.5px/1.2 var(--mono); letter-spacing: 0.04em; }

/* --- Sellos de logro ------------------------------------------------------ */

.sello { display: block; width: 100%; height: auto; overflow: visible; --tinta-sello: var(--teal); }
.sello--oro { --tinta-sello: var(--oro); }
.sello--bloqueado { --tinta-sello: var(--bloqueado); }
.sello__linea { fill: none; stroke: var(--tinta-sello); stroke-width: 0.32; opacity: 0.9; stroke-dasharray: 1; }
.sello__filete { fill: none; stroke: var(--tinta-sello); stroke-width: 0.8; }
.sello__filete--fino { stroke-width: 0.4; }
.sello__leyenda { font: 500 9.6px var(--mono); letter-spacing: 0.2em; fill: var(--tinta-sello); }
.sello__cifra { font: 600 42px var(--serif); letter-spacing: -0.02em; fill: var(--tinta-sello); }
.sello__cifra--larga { font-size: 28px; }
.sello--bloqueado .sello__linea { opacity: 0.4; }
.sello--compacto .sello__linea { stroke-width: 0.9; }
.sello--compacto .sello__filete { stroke-width: 1.6; }
.sello--compacto .sello__cifra { font-size: 78px; font-weight: 700; }
.sello--compacto .sello__cifra--larga { font-size: 50px; }
.sello--bloqueado .sello__leyenda, .sello--bloqueado .sello__cifra { opacity: 0.75; }

/* --- Movimientos ---------------------------------------------------------- */

.cascada__letra { display: inline-block; }

/* Lo repasado se tacha y se queda en su lugar. */
.tachado { position: relative; color: var(--suave); transition: color 400ms var(--salida); }
.tachado::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 55%;
  height: 1.5px;
  background: currentColor;
  transform-origin: left center;
  animation: g-tachar 460ms var(--salida) both;
}
@keyframes g-tachar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}