/* Ficha Única de Registro y Perfil Docente · Robotixspace
   Marca extraída de robotixspace.org (13/10/2026): noche #00082A, neón #00E77F, naranja CTA #F98601,
   Montserrat (títulos) y Poppins (texto). Fuentes auto-alojadas (CSP: sin CDN). */

/* Respaldos con métricas ajustadas: sin salto de diseño mientras cargan las fuentes */
@font-face { font-family: "Montserrat-respaldo"; src: local("Arial"); size-adjust: 113.39%; ascent-override: 85.43%; descent-override: 22.15%; line-gap-override: 0%; }
@font-face { font-family: "Poppins-respaldo"; src: local("Arial"); size-adjust: 112.16%; ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 0%; }
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 700 800;
  font-display: swap;
}
@font-face { font-family: "Poppins"; src: url("fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Marca */
  --noche: #00082a;
  --noche-2: #152052;
  --noche-3: #202b54;
  --neon: #00e77f;          /* solo sobre noche (11,9:1) */
  --naranja: #f98601;       /* CTA; texto noche encima (7,9:1) */
  --naranja-hover: #ff9a24;
  /* Superficie clara del formulario: se llena al sol, desde el teléfono */
  --fondo: #f3f5fb;
  --papel: #ffffff;
  --tinta: #00082a;
  --tinta-2: #3b4263;       /* texto secundario sobre papel (≈10:1) */
  --borde: #6b7290;         /* borde de campo ≥3:1 contra papel */
  --borde-suave: #d5d9e8;
  --ok: #00864a;            /* verde AA sobre papel */
  --ok-fondo: #e6f7ee;
  --error: #b3261e;
  --error-fondo: #fdecea;
  --foco: #007bc2;          /* azul de foco (anillos, ≥3:1) */
  --enlace: #005f94;        /* azul para texto: 6,6:1 sobre #f3f5fb */
  --sel-fondo: #eef9f3;

  --f-titulo: "Montserrat", "Montserrat-respaldo", system-ui, sans-serif;
  --f-texto: "Poppins", "Poppins-respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-campo: 14px;
  --r-boton: 50px;          /* píldora: radio de los CTA del sitio */
  --sombra: 0 1px 2px rgb(0 8 42 / .06), 0 8px 24px -12px rgb(0 8 42 / .18);
  --ancho: 40rem;
  --toque: 3.25rem;         /* 52px: objetivo táctil */
  --salida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* WCAG 2.4.11: el campo enfocado no queda debajo de la barra superior ni de la navegación fija */
  scroll-padding-top: 6.5rem;
  scroll-padding-bottom: 6rem;
}
@media (min-width: 641px) { html { scroll-padding-bottom: 1rem; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
::selection { background: var(--neon); color: var(--noche); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
a { color: var(--enlace); text-underline-offset: .2em; }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--naranja); color: var(--noche); padding: .75rem 1rem; border-radius: 10px; font-weight: 600;
}
.saltar:focus { top: 1rem; }

.icono { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono--boton { width: 1.25rem; height: 1.25rem; }

/* ---------- Barra superior con progreso ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--noche);
  color: #fff;
  padding: .625rem 1rem .75rem;
  padding-top: max(.625rem, env(safe-area-inset-top));
}
.barra__fila {
  max-width: var(--ancho); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.barra__logo { width: 6rem; height: auto; }
.barra__paso { margin: 0; font-size: .9375rem; font-weight: 500; color: #dfe4f5; font-variant-numeric: tabular-nums; }
.barra__paso strong { color: #fff; font-weight: 600; }
.progreso {
  list-style: none; margin: .625rem auto 0; padding: 0;
  max-width: var(--ancho);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem;
}
.progreso__seg {
  height: .375rem; border-radius: 99px;
  background: var(--noche-3);
  position: relative; overflow: hidden;
}
.progreso__seg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--neon); border-radius: inherit;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--salida);
}
.progreso__seg[data-estado="hecho"]::after { transform: scaleX(1); }
/* El paso actual se marca, no se rellena: sin avances falsos (Villar et al. 2013) */
.progreso__seg[data-estado="actual"] { background: #5a6aa8; }
/* Muesca neón: marca dónde estás, sin fingir avance */
.progreso__seg[data-estado="actual"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .75rem; background: var(--neon); border-radius: inherit; }

/* ---------- Bienvenida: noche espacial, como robotixspace.org ---------- */
body:has(#intro:not([hidden])) {
  background-color: var(--noche);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgb(255 255 255 / .55), transparent),
    radial-gradient(1px 1px at 78% 9%, rgb(255 255 255 / .5), transparent),
    radial-gradient(1px 1px at 46% 62%, rgb(255 255 255 / .35), transparent),
    radial-gradient(1.5px 1.5px at 88% 71%, rgb(0 231 127 / .55), transparent),
    radial-gradient(1px 1px at 23% 84%, rgb(255 255 255 / .4), transparent);
  background-size: 420px 520px;
  color: #fff;
}
.intro { max-width: 68.75rem; margin: 0 auto; }
.intro__arte { display: block; background: #e9eef7; }
.intro__arte img { width: 100%; aspect-ratio: 800 / 537; object-fit: cover; }
@media (min-width: 641px) {
  .intro { padding: 1.5rem 1.5rem 0; }
  .intro__arte img { aspect-ratio: 16 / 9; border-radius: 24px 24px 120px 24px; }  /* firma asimétrica de la marca */
  .intro__arte { background: none; }
}
.intro__cuerpo {
  max-width: var(--ancho); margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}
.intro__titulo {
  font: 800 clamp(1.75rem, 6.4vw, 2.5rem)/1.12 var(--f-titulo);
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.lema { margin: 0 0 1.75rem; }
.lema__frase {
  margin: 0 0 .5rem;
  font: 800 clamp(1.25rem, 5.2vw, 1.625rem)/1.25 var(--f-titulo); letter-spacing: -.01em;
  color: var(--neon);
}
.lema__frase span { white-space: nowrap; }
.lema__detalle { margin: 0; color: #dfe4f5; font-size: 1rem; }
.lema__detalle--nota { margin-top: .5rem; color: #b9c1e0; font-size: .9375rem; }

.saludo p { margin: 0 0 1rem; color: #c9d0ea; }
.saludo p:first-child { color: #fff; font-weight: 500; }

.privacidad {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid #2a3566;
  font-size: .9375rem; color: #b9c1e0;
}
.privacidad__titulo {
  display: flex; align-items: center; gap: .5rem;
  font: 600 .9375rem/1.3 var(--f-texto); color: #fff; margin: 0 0 .5rem;
}
.privacidad p { margin: 0; }

.retomar {
  margin: 0 0 1.25rem; padding: 1rem 1.125rem;
  background: var(--noche-2); border-radius: 14px;
  color: #dfe4f5;
}
.retomar strong { color: #fff; }
.retomar .boton--texto { color: #fff; }
.retomar__texto { margin: 0 0 .75rem; }

@media (max-width: 640px) {
  #acciones-intro {
    position: sticky; bottom: 0; z-index: 10;
    margin: 1.5rem -1rem 0; padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom));
    background: var(--noche); border-top: 1px solid #2a3566;
  }
}

/* ---------- Botones ---------- */
.acciones { display: flex; gap: .75rem; margin-top: 1.5rem; }
.acciones--apiladas { flex-direction: column; margin-top: 0; }
.boton {
  -webkit-appearance: none; appearance: none;
  min-height: var(--toque);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem;
  border-radius: var(--r-boton);
  border: 2px solid transparent;
  font: 600 1.0625rem/1.2 var(--f-texto);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, transform .15s var(--salida), box-shadow .15s;
}
.boton:active { transform: scale(.98); }
.boton--primario { background: var(--naranja); color: var(--noche); }
.boton--primario:hover { background: var(--naranja-hover); }
.boton--secundario { background: var(--papel); color: var(--tinta); border-color: var(--borde); }
.boton--secundario:hover { background: #eef1f9; }
.boton--texto { background: none; color: var(--tinta); text-decoration: underline; text-underline-offset: .2em; }
.boton--ancho { width: 100%; }
.boton[disabled] { opacity: .6; cursor: progress; }
.boton__cargando { display: none; width: 1.125rem; height: 1.125rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; }
.boton[aria-busy="true"] .boton__cargando { display: inline-block; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Formulario ---------- */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.paso__titulo {
  font: 800 1.5rem/1.2 var(--f-titulo); letter-spacing: -.015em;
  margin: .25rem 0 1.25rem; text-wrap: balance;
}
.paso { animation: entra .35s var(--salida); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

.campo {
  margin: 0; padding: 1.5rem 0 1.75rem;
  border: 0; border-bottom: 1px solid var(--borde-suave);
  min-width: 0;
}
.paso .campo:last-of-type { border-bottom: 0; }
.campo__etiqueta {
  display: block; padding: 0; margin: 0 0 .625rem;
  font: 600 1.0625rem/1.35 var(--f-texto); color: var(--tinta);
}
legend.campo__etiqueta { float: left; width: 100%; }
fieldset.campo > :not(legend) { clear: left; }
.campo__etiqueta--sub { font-size: 1rem; margin-top: 1rem; }
.campo__ayuda { margin: -.25rem 0 .75rem; font-size: .9375rem; line-height: 1.5; color: var(--tinta-2); }
.campo__error {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: 0 0 .625rem; color: var(--error); font-weight: 500; font-size: .9375rem; line-height: 1.4;
}
.campo__error::before {
  content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-top: .1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Error: lo dicen el mensaje y el borde rojo del control; sin franjas laterales */
.campo[data-error] .opcion { border-color: #e7b4b0; }

.entrada {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: var(--toque);
  padding: .75rem .9375rem;
  font: 400 1.0625rem/1.3 var(--f-texto); color: var(--tinta);  /* ≥16px: sin zoom en iOS */
  background: var(--papel);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-campo);
  caret-color: var(--foco);
  transition: border-color .15s, box-shadow .15s;
}
.entrada:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px rgb(0 123 194 / .28); }
.entrada[aria-invalid="true"] { border-color: var(--error); }
.entrada--select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300082a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .875rem center; background-size: 1.25rem;
}
input[type="date"].entrada { min-height: var(--toque); }

.entrada-grupo { display: flex; align-items: stretch; }
.entrada-grupo__prefijo {
  display: flex; align-items: center; padding: 0 .875rem;
  background: #eef1f9; border: 1.5px solid var(--borde); border-right: 0;
  border-radius: var(--r-campo) 0 0 var(--r-campo);
  font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.entrada-grupo .entrada { border-radius: 0 var(--r-campo) var(--r-campo) 0; }

.fecha { display: grid; grid-template-columns: 7.75rem 1fr; gap: .75rem; }
.fecha__etiqueta { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: .375rem; color: var(--tinta-2); }
.opcional { font-weight: 400; }

.sugerencia { margin: .625rem 0 0; font-size: .9375rem; color: var(--tinta-2); }
.sugerencia button {
  font: inherit; font-weight: 600; color: var(--enlace); background: none; border: 0; padding: .25rem 0;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 2.75rem;
}

/* Cada trimestre en una línea: etiqueta a la izquierda, mes a la derecha; selectores del mismo ancho */
.trimestres { display: grid; gap: .625rem; }
.trimestre { display: grid; grid-template-columns: 7rem minmax(0, 18rem); align-items: center; gap: .75rem; }
.trimestre .fecha__etiqueta { margin: 0; color: var(--tinta); font-weight: 500; white-space: nowrap; }

/* Opciones (radio y casilla) como filas táctiles completas */
.opciones { display: grid; gap: .5rem; }
@media (min-width: 30rem) { .opciones--2 { grid-template-columns: 1fr 1fr; } }
.opcion {
  position: relative;
  display: flex; align-items: center; gap: .875rem;
  min-height: var(--toque);
  padding: .75rem .9375rem;
  border: 1.5px solid var(--borde-suave);
  border-radius: var(--r-campo);
  background: var(--papel);
  cursor: pointer;
  line-height: 1.35;
  transition: border-color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.opcion:hover { border-color: var(--borde); }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opcion__marca {
  flex: none; width: 1.375rem; height: 1.375rem;
  border: 2px solid var(--borde); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel);
  transition: border-color .15s, background-color .15s;
}
.opcion--check .opcion__marca { border-radius: 6px; }
.opcion__marca::after {
  content: ""; width: .625rem; height: .625rem; border-radius: 50%;
  background: var(--noche); transform: scale(0); transition: transform .2s var(--salida);
}
.opcion--check .opcion__marca::after {
  width: .875rem; height: .875rem; border-radius: 0; background: var(--noche);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.opcion:has(input:checked) { border-color: var(--noche); background: #eef0f8; }
.opcion:has(input:checked) .opcion__marca { border-color: var(--noche); background: var(--neon); }
.opcion:has(input:checked) .opcion__marca::after { transform: scale(1); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.opcion--confirmar { align-items: flex-start; font-size: .9375rem; }
.opcion--confirmar .opcion__marca { margin-top: .125rem; }

.aviso-plegable { margin: 0 0 .875rem; font-size: .9375rem; color: var(--tinta-2); }
.aviso-plegable summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--enlace); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.aviso-plegable p { margin: .25rem 0 .5rem; }

.revela { margin-top: .25rem; animation: entra .3s var(--salida); }

.turnstile:not(:empty) { margin: 0 0 1rem; display: flex; justify-content: center; }

/* Resumen de errores */
.resumen-errores {
  margin: 0 0 1.25rem; padding: 1rem 1.125rem;
  background: var(--papel); border: 1px solid var(--error); border-radius: 14px;
}
.resumen-errores:focus { outline: none; }
.resumen-errores__titulo { font: 600 1.0625rem/1.3 var(--f-texto); color: var(--error); margin: 0 0 .5rem; }
.resumen-errores ul { margin: 0; padding-left: 1.25rem; }
.resumen-errores li { margin: .25rem 0; }
.resumen-errores ul:has(> li:only-child) { list-style: none; padding-left: 0; }
.resumen-errores a { color: var(--error); font-weight: 500; }

.aviso { margin: 0 0 1rem; padding: .875rem 1rem; border-radius: 14px; font-weight: 500; }
.aviso--error { background: var(--error-fondo); color: var(--error); border: 1px solid var(--error); }

/* Navegación entre pasos: fija al pie en el teléfono */
.navegacion {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: .75rem;
  margin: 1.25rem -1rem 0; padding: .5rem 1rem;
  padding-bottom: max(.5rem, env(safe-area-inset-bottom));
  background: var(--fondo);
  border-top: 1px solid var(--borde-suave);
}
.navegacion .boton { min-height: 3rem; padding-inline: 1rem; }
.navegacion .boton--secundario { flex: 0 0 auto; }
.navegacion .boton--primario { flex: 1; }
@media (max-width: 640px) {
  body:has(.entrada:focus) .navegacion { position: static; }
}
@media (min-width: 641px) {
  .navegacion { position: static; margin: 1.5rem 0 0; padding: 0; background: none; border: 0; backdrop-filter: none; justify-content: space-between; }
  .navegacion .boton { flex: 0 0 auto; min-width: 10rem; }
}

.guardado {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  margin: .875rem 0 0; font-size: .875rem; color: var(--tinta-2);
}
.guardado .icono { width: 1rem; height: 1rem; color: var(--ok); }

/* ---------- Pantallas finales ---------- */
.final {
  max-width: var(--ancho); margin: 0 auto;
  padding: 2rem 1rem 3rem; text-align: center;
}
.final:focus { outline: none; }
.final__titulo { font: 800 clamp(1.5rem, 6vw, 2rem)/1.15 var(--f-titulo); letter-spacing: -.015em; margin: 1.75rem 0 .75rem; text-wrap: balance; }
.final__texto { color: var(--tinta-2); margin: 0 auto 1rem; max-width: 34rem; }
.final__icono { width: 4rem; height: 4rem; margin: 0 auto; fill: none; stroke: var(--noche); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.final--aviso .acciones { margin-top: 1.5rem; align-items: center; }

/* Carnet: la recompensa al terminar */
.carnet {
  max-width: 22rem; margin: 0 auto;
  padding: 1.25rem 1.25rem 1.375rem;
  background-color: var(--noche);
  background-image:
    radial-gradient(1.5px 1.5px at 82% 22%, rgb(255 255 255 / .6), transparent),
    radial-gradient(1px 1px at 64% 70%, rgb(255 255 255 / .45), transparent),
    radial-gradient(1px 1px at 92% 58%, rgb(0 231 127 / .7), transparent),
    radial-gradient(1px 1px at 38% 12%, rgb(255 255 255 / .35), transparent);
  color: #fff; text-align: left;
  border-radius: 22px 22px 22px 72px;
  box-shadow: 0 24px 48px -24px rgb(0 8 42 / .55);
  animation: carnet .7s var(--salida) both;
}
@keyframes carnet { from { opacity: 0; transform: translateY(16px) rotate(-2deg) scale(.96); } }
.carnet__cabeza { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.carnet__cabeza img { width: 7.5rem; }
.carnet__sello {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .625rem; border-radius: 99px;
  background: var(--neon); color: var(--noche);
  font: 700 .8125rem/1.2 var(--f-texto);
  animation: sello .45s .45s var(--salida) both;
}
.carnet__sello .icono { width: .9375rem; height: .9375rem; stroke-width: 3; }
@keyframes sello { from { opacity: 0; transform: scale(1.6); } }
.carnet__rol { margin: 0; font-size: .875rem; color: #b9c1e0; }
.carnet__nombre { margin: .125rem 0 .25rem; font: 800 1.375rem/1.2 var(--f-titulo); overflow-wrap: anywhere; }
.carnet__inst { margin: 0 0 1rem; color: #dfe4f5; font-size: .9375rem; overflow-wrap: anywhere; }
.carnet__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.carnet__chips li { padding: .25rem .625rem; border-radius: 99px; border: 1px solid #3a4778; color: #e4e8f6; font-size: .8125rem; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .boton__cargando { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}
@media (forced-colors: active) {
  .opcion__marca, .entrada, .opcion { border-color: CanvasText; }
  .opcion:has(input:checked) { outline: 3px solid Highlight; }
}