/* Página de la convocatoria (encargos 5.7 y 5.9): bases, banner, menú de secciones y Resumen.
   Solo tokens de tokens.css. Hoja aparte de publico.css: la enlaza `_convocatoria.html`, que
   pintan la portada y la página de cada convocatoria. */

/* Medidas de la página (múltiplos de 8 px: menú de 56, separación de 24 y sección a 80 del borde
   para que el menú fijo no tape su título). Un solo ancho de contenido para el banner, el menú y
   las secciones: el de la cabecera del portal (`.cabecera__interior` y `.contenido`, en
   publico.css: 1120 px, con 24 px a cada lado en el escritorio y 16 px en el móvil). Aquí no se
   fija ancho ni margen lateral. */
/* Aviso de borrador: con palabra, no solo color. */
.bases__cabecera p {
  margin: 0 0 var(--fg-e-4);
  padding: var(--fg-e-3) var(--fg-e-4);
  background: var(--fg-aviso-fondo);
  color: var(--fg-aviso);
  border-radius: var(--fg-r-aviso);
  font: var(--fg-t-base);
}

.bases__cabecera h3 {
  margin: 0 0 var(--fg-e-4);
  color: var(--fg-texto);
  font: var(--fg-t-tarjeta);
  overflow-wrap: break-word;
}

/* Preámbulo plegado: sin caja (ya está dentro de la tarjeta de la sección), solo filetes. */
.bases__preambulo {
  margin: 0 0 var(--fg-e-6);
  padding: var(--fg-e-2) 0;
  border-top: 1px solid var(--fg-linea);
  border-bottom: 1px solid var(--fg-linea);
  color: var(--fg-texto);
}

.bases__preambulo summary {
  cursor: pointer;
  padding: var(--fg-e-2) 0;
  color: var(--fg-texto);
  font: var(--fg-t-base-fuerte);
}

.bases__preambulo[open] summary {
  margin-bottom: var(--fg-e-2);
}

/* Índice y texto: arriba y en una columna en el móvil; a un lado en el escritorio. */
.bases__cuerpo {
  display: block;
}

.bases__indice {
  margin: 0 0 var(--fg-e-6);
  padding: 0 0 var(--fg-e-2);
  border-bottom: 1px solid var(--fg-linea);
}

.bases__indice ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bases__indice li {
  margin: 0;
}

.bases__indice a {
  display: block;
  padding: var(--fg-e-2) 0;
  color: var(--fg-texto);
  font: var(--fg-t-boton);
  overflow-wrap: break-word;
}

/* Texto de lectura: todo el ancho que deja el índice (encargo 5.13) */
.bases__texto {
  min-width: 0;
  color: var(--fg-texto);
  font: var(--fg-t-lectura);
  overflow-wrap: break-word;
}

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

.bases__texto h3,
.bases__texto h4,
.bases__texto h5 {
  margin: var(--fg-e-6) 0 var(--fg-e-3);
  color: var(--fg-texto);
}

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

.bases__texto h5 {
  font: var(--fg-t-base-fuerte);
}

.base {
  margin: 0 0 var(--fg-e-8);
  scroll-margin-top: 80px;
}

.base:last-child {
  margin-bottom: 0;
}

.base > h3 {
  margin-top: 0;
  font: var(--fg-t-seccion);
}

.bases__texto ul,
.bases__texto ol {
  margin: 0 0 var(--fg-e-4);
  padding-left: var(--fg-e-6);
}

.bases__texto li {
  margin: 0 0 var(--fg-e-2);
}

.bases__texto li > ul,
.bases__texto li > ol {
  margin: var(--fg-e-2) 0 0;
}

.bases__texto .lista-letras {
  list-style: none;
  padding-left: 0;
}

.bases__texto .lista-numerada {
  padding-left: var(--fg-e-6);
}

.bases__texto .marca {
  font: var(--fg-t-cifra-fuerte);
  color: var(--fg-texto-2);
}

.bases__texto strong {
  font-weight: var(--fg-peso-seminegrita);
}

/* Escritorio: el índice, fijo a la izquierda mientras se lee. */
@media (min-width: 960px) {
  .bases__cuerpo {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--fg-e-8);
    align-items: start;
  }

  .bases__indice {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 56px - var(--fg-e-6) - var(--fg-e-4));
    margin: 0;
    padding: 0 var(--fg-e-4) 0 0;
    border-bottom: 0;
    border-right: 1px solid var(--fg-linea);
    overflow-y: auto;
  }

  .bases__indice a {
    padding: var(--fg-e-1) 0;
    font: var(--fg-t-ayuda);
  }
}

/* ------------------------------------------------------------------------------------------
   Banner (encargo 5.12): superficie clara con el filete de marca arriba; el texto, en tinta.
   El magenta queda para el botón principal (encargo 5.15). Una sola tarjeta: los datos van
   separados por filetes, no en cajas. Encargo 5.16: el degradado de la página, dos veces para
   que se note algo más, y un borde superior de 4 px en cada cifra (azul, verde y magenta).
   ------------------------------------------------------------------------------------------ */
.banner {
  position: relative;
  display: grid;
  gap: var(--fg-e-6);
  padding: var(--fg-e-8);
  margin-bottom: var(--fg-e-6);
  overflow: hidden;
  background: var(--fg-fondo-degradado), var(--fg-fondo-degradado), 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);
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--fg-filete);
}

.banner__titulo {
  margin: 0;
  font: var(--fg-t-titulo);
  font-size: 40px;
  letter-spacing: var(--fg-ls-titulo);
  color: var(--fg-texto);
  overflow-wrap: break-word;
}

.banner__convocatoria {
  display: block;
  margin-top: var(--fg-e-2);
  color: var(--fg-texto-2);
  font: var(--fg-t-seccion);
  letter-spacing: var(--fg-ls-tarjeta);
}

.banner__lema {
  margin: var(--fg-e-3) 0 0;
  color: var(--fg-texto-2);
  font-size: 20px;
  font-style: italic;
  line-height: 1.35;
}

.banner__oficial {
  margin: var(--fg-e-4) 0 0;
  color: var(--fg-texto);
  font: var(--fg-t-lectura);
}

.banner__cifras {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--fg-linea);
}

.banner__dato {
  min-width: 0;
  padding: var(--fg-e-4) var(--fg-e-6);
  border-top: 4px solid var(--fg-azul);
}

.banner__dato:nth-child(2) {
  border-top-color: var(--fg-verde);
}

.banner__dato:nth-child(3) {
  border-top-color: var(--fg-accion);
}

.banner__dato:first-child {
  padding-left: 0;
}

.banner__dato + .banner__dato {
  border-left: 1px solid var(--fg-linea);
}

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

.banner__dato dd {
  margin: 0;
  color: var(--fg-texto);
  font: var(--fg-t-cifra-fuerte);
  overflow-wrap: break-word;
}

.banner__dato .banner__cifra {
  font: var(--fg-t-display);
  letter-spacing: var(--fg-ls-display);
  font-size: 32px;
}

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

/* El estado, con palabra y con los tokens de estado, no solo con color. */
.banner__pildora {
  display: inline-block;
  margin-right: var(--fg-e-2);
  padding: 2px var(--fg-e-3);
  border-radius: var(--fg-r-pildora);
  font: var(--fg-t-pildora);
}

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

.banner__pildora--cerrada {
  background: var(--fg-aviso-fondo);
  color: var(--fg-aviso);
}

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

/* Los botones del banner son los de publico.css (`.boton`, encargo 5.15). */

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

/* ------------------------------------------------------------------------------------------
   Menú de secciones: fijo arriba al desplazarse; en el móvil, en una sola línea que se
   desplaza en horizontal sin desbordar la página. La entrada activa lleva un subrayado
   de 3 px en el color del texto (encargo 5.15), no un fondo.
   ------------------------------------------------------------------------------------------ */
.menu-secciones {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 56px;
  margin: 0 0 var(--fg-e-6);
  background: var(--fg-superficie);
  border: 1px solid var(--fg-borde-tarjeta);
  border-radius: var(--fg-r-tarjeta);
  box-shadow: var(--fg-sombra-tarjeta);
}

.menu-secciones ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--fg-e-1);
  height: 100%;
  margin: 0;
  padding: 0 var(--fg-e-2);
  list-style: none;
  overflow-x: auto;
  position: relative;
  scrollbar-width: none;
}

.menu-secciones ul::-webkit-scrollbar {
  display: none;
}

/* Degradado en el borde derecho: avisa de que hay más entradas (encargo 5.19). Solo se ve en
   la pantalla estrecha y desaparece (clase puesta por secciones.js) al llegar al final. */
.menu-secciones::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  border-radius: 0 var(--fg-r-tarjeta) var(--fg-r-tarjeta) 0;
  background: linear-gradient(to right, transparent, var(--fg-superficie) 85%);
  pointer-events: none;
  transition: opacity 0.15s;
}

.menu-secciones--fin::after {
  opacity: 0;
}

.menu-secciones li {
  flex: none;
  margin: 0;
}

.menu-secciones a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0 var(--fg-e-4);
  border-bottom: 3px solid transparent;
  color: var(--fg-texto);
  font: var(--fg-t-boton);
  text-decoration: none;
  white-space: nowrap;
}

.menu-secciones a:hover {
  border-bottom-color: var(--fg-borde-campo);
  color: var(--fg-texto);
}

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

.menu-secciones a[aria-current="true"] {
  border-bottom-color: var(--fg-texto);
  color: var(--fg-texto);
}

/* ------------------------------------------------------------------------------------------
   Secciones: con JavaScript se ve una cada vez; sin él, todas seguidas.
   ------------------------------------------------------------------------------------------ */
.secciones [data-seccion] {
  margin-bottom: var(--fg-e-6);
  scroll-margin-top: 80px;
}

.secciones [data-seccion] h2 {
  margin: 0 0 var(--fg-e-6);
  scroll-margin-top: 80px;
}

/* Con JavaScript, el contenedor llega al menos al pie de la ventana desde el título de la sección
   (que queda a 80 px del borde, bajo el menú fijo): así una sección corta, como el Calendario,
   se coloca igual que las largas (encargo 5.13). */
.secciones--js {
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

.secciones--js [data-seccion][hidden] {
  display: none;
}

.secciones [tabindex="-1"]:focus {
  outline: none;
}

.secciones [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--fg-info);
  outline-offset: 4px;
}

/* El calendario numerado: el círculo en neutro, no en rosa; su borde lleva el color del estado
   (encargo 5.16: azul la actual, verde la hecha, gris la pendiente). */
.secciones .calendario__fase::before {
  background: var(--fg-fondo);
  border: 2px solid var(--fg-borde-campo);
  color: var(--fg-texto);
}

.secciones .calendario__fase--abierta::before {
  background: var(--fg-azul-suave);
  border-color: var(--fg-azul);
}

.secciones .calendario__fase--cerrada::before {
  background: var(--fg-ok-fondo);
  border-color: var(--fg-verde);
}

/* Resumen: todo el ancho del recuadro; sin el límite de 75 caracteres de publico.css (5.13). */
.secciones .seccion > p {
  max-width: none;
}

.apartado {
  margin: 0 0 var(--fg-e-8);
}

.apartado:first-child > h3 {
  padding-top: 0;
  border-top: 0;
}

.apartado > h3 {
  margin: 0 0 var(--fg-e-3);
  padding-top: var(--fg-e-3);
  border-top: 1px solid var(--fg-linea);
  font: var(--fg-t-seccion);
  color: var(--fg-texto);
}

/* Marcador de color a la izquierda del título (encargo 5.16): barra de 4 × 20 px que rota entre
   azul, verde y magenta. El rojo no se usa. */
.apartado > h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  margin-right: var(--fg-e-3);
  vertical-align: -3px;
  background: var(--fg-azul);
}

.resumen > .apartado:nth-of-type(3n + 2) > h3::before {
  background: var(--fg-verde);
}

.resumen > .apartado:nth-of-type(3n) > h3::before {
  background: var(--fg-accion);
}

.apartado p,
.apartado li {
  font: var(--fg-t-lectura);
  overflow-wrap: break-word;
}

.criterios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--fg-e-4) var(--fg-e-6);
  margin: 0 0 var(--fg-e-4);
  padding: 0;
  list-style: none;
}

/* Sin caja: ya están dentro de la tarjeta de la sección. Un filete a la izquierda las separa. */
.criterio {
  margin: 0;
  padding: 0 0 0 var(--fg-e-4);
  border-left: 3px solid var(--fg-linea);
  color: var(--fg-texto);
}

.criterio__nombre {
  margin: 0 0 var(--fg-e-2);
  font: var(--fg-t-tarjeta);
  overflow-wrap: break-word;
}

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

.criterio__cifra {
  color: var(--fg-texto);
  font-size: 22px;
}

.apartado .criterio__texto {
  margin: 0;
  font: var(--fg-t-base);
}

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

.como-solicitar li {
  margin: 0 0 var(--fg-e-2);
}

.resumen__bases {
  margin: 0;
}

/* Escritorio: el índice de las bases cabe a un lado; en el móvil, el banner en una columna. */
@media (max-width: 720px) {
  .banner {
    gap: var(--fg-e-4);
    padding: var(--fg-e-6) var(--fg-e-4);
  }

  .banner__titulo {
    font-size: 30px;
  }

  .banner__lema {
    font-size: 17px;
  }

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

  .banner__dato--plazo {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--fg-linea);
  }

  .banner__dato--plazo + .banner__dato {
    border-left: 0;
    padding-left: 0;
  }

  .banner__dato .banner__cifra {
    font-size: 26px;
  }

  .secciones .seccion {
    padding: var(--fg-e-6) var(--fg-e-4);
  }

  /* Al abrir una sección desde el menú, su tarjeta queda justo bajo el menú fijo (56 px de menú
     y 8 de aire) y el título, inmediatamente debajo (encargo 5.19). */
  .secciones [data-seccion],
  .secciones [data-seccion] h2,
  .secciones .base {
    scroll-margin-top: 64px;
  }

  .secciones--js {
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
  }

  /* Los botones del banner, uno bajo otro y a ancho completo. */
  .banner__acciones {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ------------------------------------------------------------------------------------------
   Másteres (encargo 5.13): una tarjeta por máster, en rejilla (dos columnas desde 900 px, una
   en el móvil). El título y el botón abren lo mismo. Las píldoras no se parten.
   ------------------------------------------------------------------------------------------ */
.masteres {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fg-e-4);
  margin: var(--fg-e-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .masteres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Áreas de conocimiento (encargo 5.23): un subtítulo y, debajo, sus tarjetas. */
.masteres__area {
  margin: var(--fg-e-6) 0 0;
}

.masteres__area:first-child {
  margin-top: var(--fg-e-4);
}

.masteres__area[hidden] {
  display: none;
}

.masteres__area-titulo {
  margin: 0;
  padding-bottom: var(--fg-e-2);
  border-bottom: 2px solid var(--fg-linea);
  font: var(--fg-t-tarjeta);
  color: var(--fg-texto);
}

.master {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fg-e-3);
  margin: 0;
  padding: var(--fg-e-5);
  background: var(--fg-superficie);
  border: 1px solid var(--fg-linea);
  border-top: 4px solid var(--fg-azul);
  border-radius: var(--fg-r-tarjeta);
}

.master__titulo {
  margin: 0;
  font: var(--fg-t-tarjeta);
  overflow-wrap: break-word;
}

.master__titulo a {
  color: var(--fg-texto);
  text-decoration: none;
}

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

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

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

.master__dato {
  margin: 0;
  padding: 2px var(--fg-e-3);
  border: 1px solid var(--fg-linea);
  border-radius: var(--fg-r-pildora);
  background: var(--fg-fondo);
  color: var(--fg-texto);
  font: var(--fg-t-pildora);
  white-space: nowrap;
}

.master__accion {
  margin: auto 0 0;
  padding-top: var(--fg-e-2);
}


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

/* Buscador (encargo 5.19): solo lo muestra masteres.js. */
.masteres__buscador {
  margin: var(--fg-e-4) 0 0;
}

.masteres__buscador input[type="search"] {
  font: inherit;
  width: 100%;
  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);
}

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

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

.master[hidden] {
  display: none;
}

/* Lista compacta por debajo de 900 px (encargo 5.19): sin tarjeta dentro de la tarjeta de la
   sección; cada máster es una fila con un separador fino. Título, centro y, en una sola fila,
   las píldoras y el botón pequeño a la derecha. */
@media (max-width: 899px) {
  /* Un poco más de anchura útil para que las píldoras y el botón quepan en una fila. */
  .secciones #masteres.seccion {
    padding-right: var(--fg-e-3);
    padding-left: var(--fg-e-3);
  }

  .masteres {
    display: block;
    margin-top: var(--fg-e-2);
  }

  .masteres > .master {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "titulo titulo"
      "centro centro"
      "datos accion";
    align-items: center;
    gap: var(--fg-e-1) var(--fg-e-2);
    padding: 10px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--fg-linea);
    border-radius: 0;
  }

  .masteres > .master[hidden] {
    display: none;
  }

  .master__titulo {
    grid-area: titulo;
    font: 700 16px/1.25 var(--fg-fuente);
  }

  .master__centro {
    grid-area: centro;
    font: var(--fg-t-base);
  }

  .master__datos {
    grid-area: datos;
    gap: var(--fg-e-1);
    margin: 0;
  }

  .master__dato {
    padding: 1px 5px;
  }

  .master__accion {
    grid-area: accion;
    margin: 0;
    padding-top: 0;
  }

  .master__accion .boton {
    padding-right: 10px;
    padding-left: 10px;
    white-space: nowrap;
  }
}