/*
 * Disposición general de la página.
 * Coloca el enlace de salto, la cabecera pegajosa con su franja de marca, las pestañas de navegación, el área principal, las rejillas de listado y el pie.
 * Ocupa el segundo lugar de la cascada porque los componentes se apoyan en estas cajas y no al revés.
 * El menú lateral del móvil se declara aquí en su estado cerrado y la hoja responsiva es la que lo despliega, de manera que el estado abierto vive en un solo sitio.
 */

/* ------------------------------------------------------------
   Enlace de salto al contenido.
   Aparece al recibir el foco y es lo primero que encuentra quien navega con el tabulador.
   ------------------------------------------------------------ */

.salto-al-contenido {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 80;
  padding: 10px 18px;
  border-radius: 0 0 var(--radio-s) var(--radio-s);
  background: var(--marca);
  color: var(--marca-tinta);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--transicion);
}

.salto-al-contenido:focus,
.salto-al-contenido:focus-visible {
  top: 0;
  color: var(--marca-tinta);
}

/* ------------------------------------------------------------
   Cabecera pegajosa.
   ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--superficie) 84%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--borde);
}

/* Franja de marca, que da identidad a la cabecera sin añadir un elemento al documento. */
.cabecera::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--grad-marca);
}

.cabecera-contenido {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* El ancho mínimo de cero deja que la marca se encoja antes que empujar a los botones fuera de la fila. */
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--tinta);
  text-decoration: none;
}

.marca:hover { color: var(--marca); }

.marca-icono {
  width: 40px;
  height: 40px;
  padding: 7px;
  border-radius: 12px;
  background: var(--grad-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra);
}

/*
 * El nombre de la guía se recorta con puntos suspensivos solo cuando de verdad no cabe.
 * El segundo término del mínimo descuenta lo que ocupan el escudo, los dos botones de la derecha y los huecos entre ellos, de modo que la fila de la cabecera nunca se parte en dos y no hace falta un cuarto punto de ruptura.
 */
.marca-texto {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(22em, calc(100vw - 196px));
}

/* ------------------------------------------------------------
   Navegación por pestañas.
   ------------------------------------------------------------ */

/*
 * Las diez pestañas no caben junto a la marca en ningún ancho de escritorio, porque el contenedor se detiene en el ancho máximo de la guía.
 * En lugar de dejar que se partan por donde toque, se les reserva un renglón entero y el botón de tema se adelanta al de la marca, de modo que la cabecera queda en dos filas ordenadas.
 */
.nav-principal {
  display: flex;
  order: 2;
  flex: 1 1 100%;
  gap: 4px;
  flex-wrap: wrap;
}

.boton-tema {
  order: 1;
}

.nav-enlace {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--tinta-2);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}

.nav-enlace:hover {
  background: var(--superficie-2);
  color: var(--tinta);
  transform: translateY(-1px);
}

.nav-enlace.activo {
  background: var(--grad-marca);
  color: var(--marca-tinta);
  box-shadow: var(--sombra);
}

/*
 * Estado abierto del menú lateral.
 * En el escritorio la clase no cambia nada, porque las pestañas ya se ven, y la hoja responsiva es la que le da sentido.
 */
.nav-principal.nav-abierta {
  display: flex;
}

/*
 * El botón que abre el menú lateral solo hace falta cuando las pestañas no caben.
 * El selector nombra las dos clases del botón para ganarle a la regla de botón con icono, que vive en una hoja posterior y lo declara visible.
 */
.boton-icono.boton-menu {
  display: none;
}

/* ------------------------------------------------------------
   Área principal y vistas.
   ------------------------------------------------------------ */

/* El recorte horizontal es la red de seguridad del contenido, y el margen de recorte deja pasar la sombra de las tarjetas que quedan pegadas al borde. */
main {
  display: block;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 26px 20px 84px;
  overflow-x: clip;
  overflow-clip-margin: 28px;
}

.vista {
  animation: aparecer 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.seccion-cabecera {
  margin: 0 0 20px;
}

.seccion-titulo {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.seccion-intro {
  margin: 0;
  max-width: 70ch;
  color: var(--tinta-2);
  font-size: 0.98rem;
}

/* Cuando la ventana de detalle está abierta, el cuerpo deja de desplazarse detrás de ella. */
body.con-modal {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Rejillas de listado.
   La lista de cada sección se adapta sola al ancho disponible, y las rejillas numeradas sirven para los paneles de columnas fijas.
   ------------------------------------------------------------ */

/* La medida mínima de cada columna se limita al ancho disponible, porque de otro modo una columna de 280 px no cabe en una pantalla de 320 px y empuja la página a lo ancho. */
.lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  align-items: start;
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  align-items: start;
}

.rejilla-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 14px;
  margin: 30px 0;
}

/* Fila de botones de una sección, que envuelve cuando el ancho no alcanza. */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------
   Pie de la página.
   ------------------------------------------------------------ */

.pie {
  border-top: 1px solid var(--borde);
  background: color-mix(in srgb, var(--superficie) 60%, transparent);
}

.pie-contenido {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 28px 20px 36px;
  text-align: center;
}

.pie-nota {
  margin: 0 0 6px;
  color: var(--tinta-3);
  font-size: 0.88rem;
}

.pie-enlace {
  color: var(--tinta-2);
  font-weight: 600;
}

.pie-enlace:hover { color: var(--marca); }