/* Parte pública de MCyL (encargo 1.3). Solo usa los tokens `--fg-*` de tokens.css: ningún
   color escrito a mano (lo comprueba tests/test_publico_tokens.py, también el contraste AA de
   cada par texto/fondo). Toda regla con fondo de color fija también su color de texto.
   Escritorio primero (1366 px) y móvil (375 px) sin desbordamiento horizontal. Sin JavaScript.
   Se viste después con el traspaso de Claude Design sin tocar la lógica (D14). */

/* Fuentes servidas desde el propio servidor (licencias OFL en ../fonts/). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: var(--fg-t-lectura);
  color: var(--fg-texto);
  background-color: var(--fg-fondo);
  background-image: var(--fg-fondo-degradado);
  background-repeat: no-repeat;
  overflow-wrap: anywhere;
}

img {
  max-width: 100%;
  height: auto;
}

/* Enlaces dentro de un texto (encargo 5.15): color del texto, subrayado, y más grueso al pasar
   el ratón. Sin magenta: el magenta queda para la acción principal de cada pantalla. */
a {
  color: var(--fg-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--fg-texto);
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: var(--fg-foco);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  color: var(--fg-texto);
  margin: 0 0 var(--fg-e-3);
}

h1 {
  font: var(--fg-t-titulo);
  letter-spacing: var(--fg-ls-titulo);
}

h2 {
  font: var(--fg-t-seccion);
}

h3 {
  font: var(--fg-t-tarjeta);
  letter-spacing: var(--fg-ls-tarjeta);
}

p {
  margin: 0 0 var(--fg-e-3);
}

.cifra {
  font-family: var(--fg-mono);
  font-weight: var(--fg-peso-medio);
}

/* Enlace de salto: fuera de la vista hasta que recibe el foco. */
.saltar {
  position: absolute;
  left: var(--fg-e-4);
  top: calc(-1 * var(--fg-e-12));
  z-index: 10;
  padding: var(--fg-e-2) var(--fg-e-4);
  border-radius: var(--fg-r-campo);
  background: var(--fg-texto);
  color: var(--fg-superficie);
  font: var(--fg-t-boton);
}

.saltar:focus {
  top: var(--fg-e-2);
  background: var(--fg-texto);
  color: var(--fg-superficie);
}

/* Cabecera */
.cabecera {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border-bottom: 1px solid var(--fg-linea);
}

.cabecera__filete {
  height: 4px;
  background: var(--fg-filete);
}

.cabecera__interior,
.pie__interior,
.contenido {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--fg-e-6);
  padding-right: var(--fg-e-6);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fg-e-6);
  padding-top: var(--fg-e-3);
  padding-bottom: var(--fg-e-3);
}

.cabecera__marca {
  display: inline-block;
  line-height: 0;
}

.cabecera__logo {
  width: 134px;
}

/* Marca del programa (encargo 5.1a) */
.cabecera__programa {
  display: flex;
  align-items: center;
  gap: var(--fg-e-3);
  color: var(--fg-texto);
}

.cabecera__programa-nombre {
  font: var(--fg-t-seccion);
  white-space: nowrap;
}

.cabecera__programa picture {
  display: block;
  flex: none;
  line-height: 0;
}

/* Logo oficial del programa (encargo 5.21): redondo, 56 px como máximo y nunca de fondo. */
.cabecera__programa-logo {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: var(--fg-sombra-tarjeta);
}

.contenido {
  padding-top: var(--fg-e-8);
  padding-bottom: var(--fg-e-12);
}

.contenido:focus {
  outline: none;
}

/* Portada y cabecera de la convocatoria */
.antetitulo {
  font: var(--fg-t-grupo);
  letter-spacing: var(--fg-ls-grupo);
  text-transform: uppercase;
  color: var(--fg-texto-2);
}

.entradilla {
  font: var(--fg-t-lectura);
  font-size: 18px;
  color: var(--fg-texto-2);
  max-width: 70ch;
}

.portada,
.convocatoria__cabecera {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  box-shadow: var(--fg-sombra-tarjeta);
  padding: var(--fg-e-8);
  margin-bottom: var(--fg-e-8);
}

.portada h1 {
  font-size: 40px;
}

.destacado {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--fg-e-4);
  margin: var(--fg-e-6) 0;
}

.destacado__dato {
  background: var(--fg-linea-suave);
  color: var(--fg-texto);
  border-radius: var(--fg-r-campo);
  padding: var(--fg-e-4) var(--fg-e-5);
}

.destacado dt {
  font: var(--fg-t-etiqueta);
  color: var(--fg-texto);
  margin-bottom: var(--fg-e-1);
}

.destacado dd {
  margin: 0;
  font: var(--fg-t-cifra-fuerte);
  color: var(--fg-texto);
}

.destacado .cifra--grande {
  font: var(--fg-t-display);
  letter-spacing: var(--fg-ls-display);
  color: var(--fg-texto);
  white-space: nowrap;
}

/* Estado del plazo: palabra en la píldora y frase, nunca solo color. */
.plazo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fg-e-4);
  margin-bottom: var(--fg-e-4);
}

.plazo__texto {
  margin: 0;
  font: var(--fg-t-base-fuerte);
  color: var(--fg-texto);
}

.pildora {
  display: inline-block;
  padding: 2px var(--fg-e-3);
  border-radius: var(--fg-r-pildora);
  font: var(--fg-t-pildora);
  border: 1px solid currentColor;
  margin-right: var(--fg-e-2);
}

.plazo--abierto .pildora {
  background: var(--fg-ok-fondo);
  color: var(--fg-exito);
}

.plazo--cerrado .pildora {
  background: var(--fg-aviso-fondo);
  color: var(--fg-aviso);
}

/* Botones (encargo 5.15): un solo sitio. `.boton` es el secundario neutro; `.boton--principal`
   es la acción principal de la pantalla, la única en magenta; `.boton--pequeno` (36 px) va en
   listas y tarjetas. Un <a> con este aspecto navega; un <button> envía un formulario. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fg-e-2);
  box-sizing: border-box;
  min-height: 44px;
  padding: var(--fg-e-2) var(--fg-e-6);
  border: 1px solid var(--fg-borde-campo);
  border-radius: var(--fg-r-campo);
  background: var(--fg-superficie);
  color: var(--fg-texto);
  font: var(--fg-t-boton-grande);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover {
  background: var(--fg-fila-hover);
  color: var(--fg-texto);
  text-decoration: none;
}

.boton--principal {
  border-color: var(--fg-accion);
  background: var(--fg-accion);
  color: var(--fg-superficie);
  box-shadow: var(--fg-sombra-accion);
}

.boton--principal:hover {
  border-color: var(--fg-accion-hover);
  background: var(--fg-accion-hover);
  color: var(--fg-superficie);
}

.boton--pequeno {
  min-height: 36px;
  padding: var(--fg-e-1) var(--fg-e-4);
  font: var(--fg-t-boton-pequeno);
}

.boton__icono {
  flex: none;
  line-height: 1;
}


/* Otras convocatorias */
.tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--fg-e-4);
}

.tarjeta {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  padding: var(--fg-e-6);
}

.tarjeta__dato {
  color: var(--fg-texto-2);
  margin: 0;
}

/* Índice de secciones */
.indice ul {
  list-style: none;
  margin: 0 0 var(--fg-e-8);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-e-2);
}

.indice a {
  display: inline-block;
  padding: var(--fg-e-2) var(--fg-e-4);
  border: 1px solid var(--fg-borde-boton);
  border-radius: var(--fg-r-pildora);
  background: var(--fg-superficie);
  color: var(--fg-texto);
  font: var(--fg-t-boton);
  text-decoration: none;
}

.indice a:hover {
  background: var(--fg-fila-hover);
  color: var(--fg-texto);
}

/* Secciones */
.seccion {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  padding: var(--fg-e-8);
  margin-bottom: var(--fg-e-6);
  scroll-margin-top: var(--fg-e-4);
}

.seccion > p,
.texto > p {
  max-width: 75ch;
}

.lista {
  margin: 0;
  padding-left: var(--fg-e-6);
}

.lista li {
  margin-bottom: var(--fg-e-2);
}

/* Baremo */
.tabla-envoltorio {
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font: var(--fg-t-base);
}

.tabla caption {
  text-align: left;
  font: var(--fg-t-ayuda);
  color: var(--fg-texto-2);
  margin-bottom: var(--fg-e-2);
}

.tabla th,
.tabla td {
  text-align: left;
  vertical-align: top;
  padding: var(--fg-e-3);
  border-bottom: 1px solid var(--fg-linea);
}

.tabla thead th {
  font: var(--fg-t-cabecera-tabla);
  letter-spacing: var(--fg-ls-cabecera-tabla);
  text-transform: uppercase;
  color: var(--fg-texto-2);
}

.tabla tbody th {
  font: var(--fg-t-base-fuerte);
}

.tabla tfoot th,
.tabla tfoot td {
  font: var(--fg-t-base-fuerte);
  border-bottom: 0;
  border-top: 2px solid var(--fg-texto);
}

.tabla .numero {
  text-align: right;
  white-space: nowrap;
}

/* Calendario: lista ordenada de fases públicas, con su estado en palabra. */
.calendario {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fase;
}

.calendario__fase {
  counter-increment: fase;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--fg-e-4);
  padding: var(--fg-e-4) 0 var(--fg-e-4) var(--fg-e-12);
  border-bottom: 1px solid var(--fg-linea-suave);
}

.calendario__fase::before {
  content: counter(fase);
  position: absolute;
  left: 0;
  top: var(--fg-e-4);
  width: var(--fg-e-8);
  height: var(--fg-e-8);
  border-radius: var(--fg-r-pildora);
  display: grid;
  place-items: center;
  font: var(--fg-t-cifra-fuerte);
  background: var(--fg-linea-suave);
  color: var(--fg-texto);
}

.calendario__nombre {
  font: var(--fg-t-tarjeta);
  margin: 0;
}

.calendario__fechas {
  grid-column: 1;
  color: var(--fg-texto-2);
  margin: var(--fg-e-1) 0 0;
}

.calendario__estado {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

/* Estado de cada fase (encargo 5.16): punto de color más la palabra. Azul la actual, verde la
   hecha, gris la pendiente. */
.calendario__fase .pildora::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--fg-e-2);
  border-radius: var(--fg-r-pildora);
  background: var(--fg-borde-campo);
}

.calendario__fase--abierta .pildora {
  background: var(--fg-info-fondo);
  color: var(--fg-info);
}

.calendario__fase--abierta .pildora::before {
  background: var(--fg-azul);
}

.calendario__fase--cerrada .pildora {
  background: var(--fg-ok-fondo);
  color: var(--fg-exito);
}

.calendario__fase--cerrada .pildora::before {
  background: var(--fg-verde);
}

.calendario__fase--pendiente .pildora,
.calendario__fase--no_aplica .pildora {
  background: var(--fg-linea-suave);
  color: var(--fg-texto-2);
}

/* Preguntas frecuentes y documentos */
.pregunta {
  padding: var(--fg-e-4) 0;
  border-bottom: 1px solid var(--fg-linea-suave);
}

.pregunta p {
  margin: 0;
}

.documentos,
.publicaciones {
  list-style: none;
  margin: 0 0 var(--fg-e-4);
  padding: 0;
}

.documentos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fg-e-2) var(--fg-e-4);
  padding: var(--fg-e-3) 0;
  border-bottom: 1px solid var(--fg-linea-suave);
}

.documentos__titulo {
  display: block;
  font: var(--fg-t-base-fuerte);
  font-size: 16px;
}

.documentos__datos {
  display: block;
  font: var(--fg-t-ayuda);
  color: var(--fg-texto-2);
}

/* Tablón */
/* Miga: un botón pequeño «← Mi solicitud» (encargo 5.15). */
.miga {
  margin: 0 0 var(--fg-e-4);
}

.publicacion {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  padding: var(--fg-e-6);
  margin-bottom: var(--fg-e-4);
}

.publicacion__titulo {
  font: var(--fg-t-tarjeta);
}

.publicacion__fecha {
  color: var(--fg-texto-2);
}

.publicacion__documento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fg-e-2) var(--fg-e-4);
  margin: 0;
}

/* Fila con un nombre y sus botones pequeños (un fichero, un tipo de documento, un paso). */
.fichero,
.documentos-paso__lista li,
.lista-pasos__paso > :first-child {
  min-width: 0;
}

.fichero,
.documentos-paso__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fg-e-2) var(--fg-e-3);
}

.fichero form {
  margin: 0;
}

.lista-pasos__paso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fg-e-2) var(--fg-e-3);
}

.lista-pasos__bloques {
  flex-basis: 100%;
}

/* Bloque fijo de contacto del área privada (encargo 5.15). */
.contacto-bloque {
  margin: var(--fg-e-8) 0 var(--fg-e-4);
  padding: var(--fg-e-5) var(--fg-e-6);
  border: 1px solid var(--fg-borde-tarjeta);
  border-left: 4px solid var(--fg-azul);
  border-radius: var(--fg-r-tarjeta);
  background: var(--fg-azul-suave);
  color: var(--fg-texto);
}

.contacto-bloque__titulo {
  margin: 0 0 var(--fg-e-2);
  font: var(--fg-t-tarjeta);
}

.contacto-bloque p {
  margin: 0 0 var(--fg-e-3);
}

.contacto-bloque p:last-child {
  margin-bottom: 0;
}

/* Fila de acciones sueltas (botones secundarios al pie de una pantalla). */
.acciones-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fg-e-3);
  margin: var(--fg-e-4) 0 0;
}

.acciones-pie form {
  margin: 0;
}

/* Avisos y textos */
.aviso {
  background: var(--fg-info-fondo);
  color: var(--fg-info);
  border-radius: var(--fg-r-aviso);
  padding: var(--fg-e-4) var(--fg-e-5);
}

/* Encargo 5.17: aviso de requisito no cumplido (preguntas de control). */
.aviso--atencion {
  background: var(--fg-aviso-fondo);
  color: var(--fg-aviso);
}

.aviso > p {
  margin: 0;
}

.aviso > p + p,
.aviso > .casilla {
  margin-top: var(--fg-e-3);
}

.preguntas-control {
  display: grid;
  gap: var(--fg-e-4);
  margin-bottom: var(--fg-e-6);
}

/* Encargo 5.20: preguntas del contacto en filas (texto a la izquierda, «Sí» y «No» a la derecha;
   en el móvil, el texto arriba), separadas por una línea fina y sin tarjeta. */
.preguntas-control--filas {
  gap: 0;
  margin-bottom: var(--fg-e-3);
}

.preguntas-control--filas > .campo__ayuda {
  margin-bottom: var(--fg-e-2);
}

.preguntas-control--filas .campo--fila {
  gap: var(--fg-e-2);
  padding: var(--fg-e-2) 0;
  border-top: 1px solid var(--fg-linea);
}

.preguntas-control--filas .campo--fila:last-child {
  border-bottom: 1px solid var(--fg-linea);
}

.pregunta-control {
  display: grid;
  gap: var(--fg-e-1);
}

.pregunta-control__texto {
  margin: 0;
  font: var(--fg-t-lectura);
}

.preguntas-control--filas .opciones {
  flex-wrap: nowrap;
}

.preguntas-control--filas .opcion__caja {
  min-height: 40px;
  padding: var(--fg-e-1) var(--fg-e-4);
}

@media (min-width: 768px) {
  .preguntas-control--filas .campo--fila {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fg-e-6);
  }
}

/* Encargo 5.20: el mensaje del contacto, con la misma separación que el formulario. */
.contacto-mensaje {
  display: grid;
  gap: var(--fg-e-4);
}

.formulario--contacto {
  margin-bottom: var(--fg-e-5);
}

.texto {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border-radius: var(--fg-r-tarjeta);
  border: 1px solid var(--fg-borde-tarjeta);
  padding: var(--fg-e-8);
}

/* Pie */
.pie {
  background: var(--fg-superficie);
  color: var(--fg-texto-2);
  border-top: 1px solid var(--fg-linea);
  font: var(--fg-t-base);
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fg-e-6);
  padding-top: var(--fg-e-6);
  padding-bottom: var(--fg-e-6);
}

.pie__texto {
  font: var(--fg-t-ayuda);
  margin: 0 0 var(--fg-e-1);
}

.pie__enlaces ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-e-4);
}

.pie__version {
  font: var(--fg-t-cifra-pequena);
  margin: 0;
}

/* Móvil (375 px) */
@media (max-width: 720px) {
  /* A 375 px caben el logo de FGULEM, el del programa (44 px) y el nombre en una línea. */
  .cabecera__interior {
    gap: var(--fg-e-2);
  }

  .cabecera__logo {
    width: 104px;
    height: auto;
  }

  .cabecera__programa {
    gap: var(--fg-e-2);
  }

  .cabecera__programa-nombre {
    font-size: 18px;
  }

  .cabecera__programa-logo {
    width: 44px;
    height: 44px;
  }

  .cabecera__interior,
  .pie__interior,
  .contenido {
    padding-left: var(--fg-e-4);
    padding-right: var(--fg-e-4);
  }

  .contenido {
    padding-top: var(--fg-e-5);
  }

  .portada,
  .convocatoria__cabecera,
  .seccion,
  .texto {
    padding: var(--fg-e-5);
  }

  .portada h1,
  h1 {
    font-size: 26px;
  }

  .destacado {
    grid-template-columns: 1fr 1fr;
  }

  .destacado__dato:first-child {
    grid-column: 1 / -1;
  }

  .destacado .cifra--grande {
    font-size: 30px;
  }

  .calendario__fase {
    grid-template-columns: 1fr;
  }

  .calendario__estado {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--fg-e-2);
  }

  .pie__interior {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none;
    scroll-behavior: auto;
  }
}

/* Formularios de la cuenta del solicitante (encargo 2.1b) */
.formulario {
  display: grid;
  gap: var(--fg-e-5);
  max-width: 640px;
}

.campo {
  display: grid;
  gap: var(--fg-e-2);
}

.campo label,
.campo legend {
  font: var(--fg-t-base-fuerte);
}

.campo fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo textarea {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: var(--fg-e-3);
  border: 1px solid var(--fg-borde-campo);
  border-radius: var(--fg-r-campo);
  background: var(--fg-superficie);
  color: var(--fg-texto);
}

.campo input:focus,
.campo textarea:focus,
.formulario button:focus,
.boton:focus-visible {
  outline: var(--fg-foco);
  outline-offset: 2px;
}

.campo__ayuda {
  margin: 0;
  font: var(--fg-t-ayuda);
}

.campo__error,
.error {
  margin: 0;
  color: var(--fg-error);
  background: var(--fg-error-fondo);
  border-radius: var(--fg-r-aviso);
  padding: var(--fg-e-2) var(--fg-e-3);
}

.campo--error input {
  border-color: var(--fg-error);
}

/* Encargo 5.14: el texto del formulario de contacto. */
.campo textarea {
  resize: vertical;
  min-height: 10rem;
}

.campo--trampa {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario button,
button.boton {
  justify-self: start;
  cursor: pointer;
}

.texto-legal {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-campo);
  padding: var(--fg-e-4);
}

.exito {
  background: var(--fg-ok-fondo);
  color: var(--fg-exito);
  border-radius: var(--fg-r-aviso);
  padding: var(--fg-e-4) var(--fg-e-5);
}

.candidatura {
  border-top: 1px solid var(--fg-linea);
  padding-top: var(--fg-e-5);
  margin-top: var(--fg-e-5);
}

/* Información de los másteres (encargo 5.1c) */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ficha__datos {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) 1fr;
  gap: var(--fg-e-2) var(--fg-e-6);
  margin: 0 0 var(--fg-e-4);
}

.ficha__datos dt {
  font: var(--fg-t-base-fuerte);
}

.ficha__datos dd {
  margin: 0;
}

.ficha__descripcion {
  margin: var(--fg-e-4) 0;
}

.ficha__oficial {
  margin: var(--fg-e-4) 0 var(--fg-e-2);
}

.dialogo {
  max-width: min(40rem, calc(100vw - var(--fg-e-8)));
  width: 100%;
  max-height: calc(100vh - var(--fg-e-8));
  overflow-y: auto;
  padding: 0;
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  box-shadow: var(--fg-sombra-modal);
}

.dialogo::backdrop {
  background: var(--fg-texto);
  color: var(--fg-superficie);
  opacity: 0.55;
}

.dialogo__caja {
  padding: var(--fg-e-6);
}

.dialogo__titulo {
  margin: 0 0 var(--fg-e-4);
}

.dialogo__titulo:focus {
  outline: none;
}

.dialogo__pie {
  margin: var(--fg-e-4) 0 0;
  text-align: right;
}

@media (max-width: 480px) {
  .ficha__datos {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ficha__datos dd {
    margin-bottom: var(--fg-e-2);
  }
}

/* Formulario por pasos y preinscripción (encargo 5.8) */
.formulario [hidden],
.pasos [hidden] {
  display: none;
}

.texto--pasos {
  background: none;
  border: 0;
  padding: 0;
}

.formulario--paso {
  max-width: none;
  gap: var(--fg-e-6);
}

.formulario .campo label,
.formulario .campo legend {
  font: var(--fg-t-lectura);
  font-weight: var(--fg-peso-seminegrita);
  padding: 0;
}

.formulario .campo__ayuda {
  font: var(--fg-t-base);
  color: var(--fg-texto-2);
}

.campo__opcional {
  font-weight: 400;
  color: var(--fg-texto-2);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"],
.campo input[type="date"],
.campo select {
  font: var(--fg-t-lectura);
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--fg-e-2) var(--fg-e-3);
  border: 1px solid var(--fg-borde-campo);
  border-radius: var(--fg-r-campo);
  background: var(--fg-superficie);
  color: var(--fg-texto);
}

.campo select:focus {
  outline: var(--fg-foco);
  outline-offset: 2px;
}

.campo.campo--error input,
.campo.campo--error select,
.campo--error .opcion__caja {
  border-color: var(--fg-error);
  border-width: 2px;
}

.tarjeta-bloque {
  background: var(--fg-superficie);
  color: var(--fg-texto);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  border-top: 4px solid var(--fg-azul);
  box-shadow: var(--fg-sombra-tarjeta);
  padding: var(--fg-e-6);
  display: grid;
  gap: var(--fg-e-4);
  scroll-margin-top: var(--fg-e-4);
}

/* Encargo 5.16: el borde superior alterna azul y verde de una tarjeta a la siguiente. */
.tarjeta-bloque:nth-of-type(even) {
  border-top-color: var(--fg-verde);
}

.tarjeta-bloque h2 {
  margin: 0;
  font: var(--fg-t-seccion);
}

.tarjeta-bloque > p {
  margin: 0;
}

.rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fg-e-5) var(--fg-e-4);
}

.rejilla--compacta {
  gap: var(--fg-e-3) var(--fg-e-3);
}

.grupo {
  border: 1px solid var(--fg-linea);
  border-radius: var(--fg-r-campo);
  margin: 0;
  padding: var(--fg-e-3) var(--fg-e-4) var(--fg-e-4);
  min-width: 0;
}

.grupo > legend {
  font: var(--fg-t-tarjeta);
  padding: 0 var(--fg-e-2);
}

/* Opciones cortas: botones segmentados o tarjetas, con su `radio` accesible por teclado. */
.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fg-e-2);
}

.opciones--tarjetas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.opcion {
  position: relative;
  display: block;
}

.formulario .campo .opcion,
.formulario .campo .casilla {
  font: var(--fg-t-lectura);
}

.opcion input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.opcion__caja {
  display: flex;
  align-items: center;
  gap: var(--fg-e-3);
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--fg-e-2) var(--fg-e-4);
  border: 1px solid var(--fg-borde-campo);
  border-radius: var(--fg-r-campo);
  background: var(--fg-superficie);
  color: var(--fg-texto);
  cursor: pointer;
}

.opcion__caja::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid var(--fg-borde-campo);
  border-radius: var(--fg-r-pildora);
  background: var(--fg-superficie);
}

.opcion input:checked + .opcion__caja {
  border: 2px solid var(--fg-texto);
  background: var(--fg-fila-hover);
  color: var(--fg-texto);
  font-weight: var(--fg-peso-seminegrita);
}

.opcion input:checked + .opcion__caja::before {
  border: 5px solid var(--fg-texto);
}

.opcion input:focus-visible + .opcion__caja {
  outline: var(--fg-foco);
  outline-offset: 2px;
}

.opcion input:disabled + .opcion__caja {
  cursor: default;
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--fg-e-3);
}

.casilla input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--fg-texto);
}

.casilla input:focus {
  outline: var(--fg-foco);
  outline-offset: 2px;
}

.calculado {
  margin: 0;
}

.destacado--compacto {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--fg-e-1) var(--fg-e-4);
  margin: 0;
  padding: var(--fg-e-4);
  border-radius: var(--fg-r-campo);
  background: var(--fg-linea-suave);
  color: var(--fg-texto);
}

.destacado--compacto dd {
  font: var(--fg-t-base);
  overflow-wrap: anywhere;
}

.resumen-errores {
  margin-bottom: var(--fg-e-6);
}

.rejilla > .campo,
.rejilla > div > .campo {
  align-content: start;
}

.resumen-errores ul {
  margin: var(--fg-e-2) 0 0;
  padding-left: var(--fg-e-5);
}

.resumen-errores a {
  color: var(--fg-error);
}

.documentos-paso {
  display: grid;
  gap: var(--fg-e-2);
  padding: var(--fg-e-5) var(--fg-e-6);
  border-radius: var(--fg-r-tarjeta);
  border: 1px solid var(--fg-borde-tarjeta);
  background: var(--fg-superficie);
  color: var(--fg-texto);
}

.documentos-paso h2 {
  margin: 0;
  font: var(--fg-t-tarjeta);
}

.documentos-paso__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fg-e-2);
}

.pildora--ok {
  background: var(--fg-ok-fondo);
  color: var(--fg-exito);
}

.pildora--falta {
  background: var(--fg-aviso-fondo);
  color: var(--fg-aviso);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fg-e-4);
}


/* Barra de los seis pasos */
.pasos {
  margin: var(--fg-e-4) 0 var(--fg-e-6);
}

.pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fg-e-2);
}

.pasos__paso a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--fg-e-2);
  align-items: center;
  min-height: 44px;
  height: 100%;
  box-sizing: border-box;
  padding: var(--fg-e-2) var(--fg-e-3);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-campo);
  background: var(--fg-superficie);
  color: var(--fg-texto);
  text-decoration: none;
}

.pasos__paso a:hover {
  border-color: var(--fg-borde-campo);
}

.pasos__paso a:focus {
  outline: var(--fg-foco);
  outline-offset: 2px;
}

.pasos__paso--actual a {
  border-color: var(--fg-texto);
  box-shadow: inset 0 -3px 0 var(--fg-texto);
}

.pasos__numero {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--fg-r-pildora);
  border: 1px solid var(--fg-borde-campo);
  font: var(--fg-t-cifra-fuerte);
}

.pasos__paso--completo .pasos__numero {
  border-color: var(--fg-verde);
  background: var(--fg-ok-fondo);
  color: var(--fg-exito);
}

.pasos__paso--actual .pasos__numero {
  border: 2px solid var(--fg-azul);
  background: var(--fg-azul-suave);
  color: var(--fg-texto);
}

.pasos__titulo {
  font: var(--fg-t-etiqueta);
  hyphens: auto;
}

.pasos__estado {
  font: var(--fg-t-cifra-pequena);
  font-family: var(--fg-fuente);
  color: var(--fg-texto-2);
}

.pasos__paso--completo .pasos__estado {
  color: var(--fg-exito);
}

.pasos__paso--incompleto .pasos__estado {
  color: var(--fg-aviso);
}

.lista-pasos {
  margin: 0;
  padding-left: var(--fg-e-6);
  display: grid;
  gap: var(--fg-e-3);
}

.lista-pasos__bloques {
  margin: var(--fg-e-1) 0 0;
  padding-left: var(--fg-e-5);
  font: var(--fg-t-base);
  color: var(--fg-texto-2);
}

/* Preinscripción en una pantalla */
.formulario--preinscripcion {
  max-width: none;
  gap: var(--fg-e-4);
}

.legal-desplegable summary {
  cursor: pointer;
  color: var(--fg-texto);
  text-decoration: underline;
}

.legal-desplegable .texto-legal {
  margin-top: var(--fg-e-3);
}

@media (min-width: 768px) {
  .rejilla {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .rejilla > * {
    grid-column: span 6;
  }

  .rejilla > .campo--medio {
    grid-column: span 3;
  }

  .rejilla > .campo--tercio {
    grid-column: span 2;
  }

  .rejilla > .campo--nueva-fila {
    grid-column: 1 / span 3;
  }

  .opciones--tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pasos__lista {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tarjeta-bloque,
  .documentos-paso {
    padding: var(--fg-e-4);
  }

  .acciones .boton {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

fieldset.campo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

fieldset.campo > legend {
  margin-bottom: var(--fg-e-2);
}

/* Carga animada en toda la parte pública y el área privada (encargos 5.22 y 5.25, carga.js).
   Una sola capa (macro `capa_carga` de `_carga.html`) sobre la página: el anillo del proyecto modelo
   (una pista fina y un arco que gira y cambia de longitud), el logo del programa en el centro
   con una respiración suave y «Cargando» con tres puntos. En una subida el arco no gira: se
   llena con el porcentaje real. Oculta (`hidden`) hasta que el script la enseña. */
.carga {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fg-e-4);
  background: var(--fg-velo-carga);
  -webkit-backdrop-filter: var(--fg-velo-desenfoque);
  backdrop-filter: var(--fg-velo-desenfoque);
}

.carga[hidden] {
  display: none;
}

.carga__caja {
  display: grid;
  justify-items: center;
  gap: var(--fg-e-3);
  text-align: center;
}

.carga__anillo {
  position: relative;
  width: 96px;
  height: 96px;
}

.carga__dibujo {
  position: absolute;
  inset: 0;
  width: 96px;
  height: 96px;
  transform: rotate(-90deg);
}

.carga__pista,
.carga__avance {
  fill: none;
  stroke-width: 3;
}

.carga__pista {
  stroke: var(--fg-linea);
}

.carga__avance {
  stroke: var(--fg-azul);
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.2s linear;
  transform-origin: 48px 48px;
}

.carga__logo {
  position: absolute;
  top: 12px;
  left: 12px;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.carga__texto,
.carga__cifra {
  margin: 0;
  color: var(--fg-texto);
}

.carga__texto {
  font: var(--fg-t-boton-grande);
}

.carga__cifra:empty {
  display: none;
}

.carga__puntos {
  display: inline-flex;
  gap: 4px;
  margin-inline-start: 4px;
  vertical-align: middle;
}

.carga__puntos i {
  display: block;
  box-sizing: content-box;
  width: 0;
  height: 0;
  /* Un punto de 5 px hecho con el borde (sin `background`: no es superficie de texto). */
  border: 2.5px solid var(--fg-azul);
  border-radius: 50%;
}

/* Espera sin porcentaje: el arco da vueltas y cambia de longitud alrededor del logo. */
.carga--gira .carga__avance {
  transition: none;
}

/* Movimiento: solo si la persona no ha pedido reducirlo. Sin él, el anillo queda como pista,
   el logo quieto y los puntos visibles. */
@media (prefers-reduced-motion: no-preference) {
  .carga:not([hidden]) {
    animation: carga-entra 0.15s ease-out;
  }

  .carga--gira .carga__avance {
    animation: carga-giro 1.4s linear infinite, carga-arco 1.8s ease-in-out infinite;
  }

  .carga:not([hidden]) .carga__logo {
    animation: carga-respira 1.6s ease-in-out -0.5s infinite;
  }

  .carga:not([hidden]) .carga__puntos i {
    animation: carga-punto 1.2s ease-in-out infinite;
  }

  .carga:not([hidden]) .carga__puntos i:nth-child(2) {
    animation-delay: 0.2s;
  }

  .carga:not([hidden]) .carga__puntos i:nth-child(3) {
    animation-delay: 0.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carga--gira .carga__avance {
    display: none;
  }
}

@keyframes carga-entra {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes carga-giro {
  to {
    transform: rotate(360deg);
  }
}

/* El arco crece y se encoge mientras gira (la circunferencia mide 100 por `pathLength`). */
@keyframes carga-arco {
  0% {
    stroke-dasharray: 6 94;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 58 42;
    stroke-dashoffset: -22;
  }

  100% {
    stroke-dasharray: 6 94;
    stroke-dashoffset: -94;
  }
}

@keyframes carga-respira {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

@keyframes carga-punto {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}