/* =========================================================================
   NOEMA · Fundamentos · índice  (D9)
   Va después de noema.css. No declara colores nuevos: Fundamentos es azul
   en todo el sistema y aquí también.

   ORDEN DEL ARCHIVO
   01 · Cabecera y fila de datos
   02 · El filtro
   03 · Las áreas
   04 · La fila de un módulo
   05 · Puntos de corte
   ========================================================================= */


/* 01 · CABECERA ========================================================== */
/* El aire de abajo lo pone la franja del filtro, que va pegada: con el
   padding largo de .seccion-corta quedaban 170 px muertos entre la fila de
   datos y los botones. */
.cabecera-indice { padding-top: var(--e9); padding-bottom: var(--e7); }

/* La fila de datos con reglas del sistema, en versión clara. Sobre papel
   la regla tiene que pesar más que la trama, o se lee como una línea más
   de la cuadrícula y deja de ser estructura. */
.datos-indice {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--regla);
}
/* Cuando el catálogo no declara fecha de revisión, `fundamentos.js` quita esa
   celda y marca la fila. Sin esto quedaría un cuarto de fila vacío a la
   derecha, que se lee como un dato que no cargó. */
.datos-indice[data-columnas="3"] { grid-template-columns: repeat(3, 1fr); }
.datos-indice > div {
  padding: var(--e5) var(--e5) 0 0;
  border-right: 1px solid var(--borde-sutil);
}
.datos-indice > div:last-child { border-right: 0; }
.datos-indice > div:not(:first-child) { padding-left: var(--e5); }
.datos-indice .rotulo {
  display: block;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--azul-profundo); margin-bottom: 6px;
}
.datos-indice .valor {
  font-family: var(--grot); font-weight: 700; font-size: 30px;
  letter-spacing: -.02em; color: var(--texto-principal);
}
.datos-indice .glosa {
  display: block; font-size: 13px; color: var(--texto-secundario); margin-top: 4px;
}


/* 02 · EL FILTRO =========================================================
   Se queda pegado arriba al desplazar: con 36 módulos, volver al principio
   para cambiar de área sería el trabajo de la interfaz, no del contenido. */
/* Se queda pegada DEBAJO de la barra del sitio, no en top:0: la barra
   también es sticky y con el mismo tope el filtro le queda por detrás y no
   se puede tocar. El desplazamiento es el alto real de la barra. */
.filtro-franja {
  position: sticky; top: var(--tope-filtro, var(--alto-nav)); z-index: 60;
  padding-block: var(--e4);
  background: var(--fondo-pagina);
  box-shadow: 0 1px 0 var(--borde-sutil);
}
.filtro-franja .contenido {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); flex-wrap: wrap;
}
.filtro { display: flex; gap: var(--e2); flex-wrap: wrap; }
.filtro button {
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--r-boton);
  border: 1px solid var(--borde-sutil);
  background: var(--fondo-superficie);
  color: var(--texto-secundario);
  cursor: pointer;
}
.filtro button:hover { border-color: var(--borde-fuerte); color: var(--texto-principal); }
/* Azul lleno con papel encima: 8,1:1. Es el mismo par que usa la barra. */
.filtro button[aria-pressed="true"] {
  background: var(--azul-pleno); border-color: var(--azul-pleno); color: var(--papel);
}
.filtro .cuantos { opacity: .7; font-variant-numeric: tabular-nums; }
.conteo { margin: 0; }


/* 03 · LAS ÁREAS ========================================================= */
.area + .area { margin-top: var(--e9); }
.area[hidden] { display: none; }

.area-cabeza {
  display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--regla);
  margin-bottom: var(--e4);
}
.area-cabeza h2 { margin: 0; }
.area-cabeza .area-glosa {
  font-family: var(--grot); font-size: 15px;
  color: var(--texto-secundario);
}
.area-cabeza .area-cuenta {
  margin-left: auto;
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--azul-profundo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El enlace a la página del área. Dice qué añade y no «ver más»: esta lista
   da los módulos, esa página los da en orden. Un «ver más» habría dejado al
   lector adivinando si vale la pena el clic. */
.area-cabeza .area-enlace {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--azul-profundo);
  text-decoration: none;
  white-space: nowrap;
  padding-left: var(--e4);
  border-left: 1px solid var(--borde-sutil);
}
.area-cabeza .area-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }


/* 04 · LA FILA DE UN MÓDULO ==============================================
   Fila y no tarjeta: 36 tarjetas son un muro, y estos módulos se eligen
   leyendo títulos. La regla entre filas es la del sistema. */
.modulos { list-style: none; margin: 0; padding: 0; }

.modulo a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e3) var(--e6);
  align-items: baseline;
  padding: var(--e5) var(--e4);
  margin-inline: calc(var(--e4) * -1);
  border-radius: var(--r-m);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-1) ease;
}
.modulo + .modulo { box-shadow: 0 -1px 0 var(--borde-sutil); }
.modulo a:hover { background: var(--fondo-superficie); }
.modulo a:hover .modulo-titulo { text-decoration: underline; text-underline-offset: 4px; }

.modulo-titulo {
  font-family: var(--serif); font-weight: 700;
  font-size: 21px; line-height: 1.2;
  color: var(--texto-principal);
  margin: 0;
}
/* El módulo que sigue en la cola editorial se marca aquí, en la lista, y
   no al entrar: enterarse después de haber elegido sería el trato que este
   sitio declara no querer tener. */
.en-revision {
  display: inline-block;
  margin-left: var(--e3);
  vertical-align: 3px;
  font-family: var(--grot); font-size: 10px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--texto-secundario);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-boton);
  padding: 2px 8px;
}

.modulo-glosa {
  grid-column: 1;
  font-family: var(--grot); font-size: 15px; line-height: 1.5;
  color: var(--texto-secundario);
  max-width: 62ch;
  margin: 0;
}

/* El tiempo declarado. Va a la derecha y en cifra: la grotesca es el dato,
   la serif es la voz humana. Nunca al revés. */
.modulo-tiempo {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 3px;
}
.modulo-tiempo .ms { color: var(--azul-profundo); }

/* «Antes de esto». Es lo que separa un índice de un directorio: el
   directorio lista qué existe, esto dice en qué orden se lee. */
.modulo-antes {
  grid-column: 1;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario);
  margin: 0;
}
.modulo-antes b {
  font-weight: 600;
  color: var(--azul-profundo);
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
}
.modulo-antes .titulo-previo { color: var(--texto-principal); }

/* Cuando el filtro no deja nada, se dice. Una lista vacía sin explicación
   se lee como un error de la página. */
.sin-resultados {
  padding: var(--e8) 0;
  text-align: center;
}


/* 05 · PUNTOS DE CORTE =================================================== */
@media (max-width: 1023px) {
  .datos-indice { grid-template-columns: 1fr 1fr; }
  .datos-indice > div:nth-child(2) { border-right: 0; }
  .datos-indice > div:nth-child(3),
  .datos-indice > div:nth-child(4) { padding-top: var(--e5); }
}

@media (max-width: 767px) {
  .datos-indice { grid-template-columns: 1fr; }
  .datos-indice > div { border-right: 0; border-top: 1px solid var(--borde-sutil); }
  .datos-indice > div:first-child { border-top: 0; }
  .datos-indice > div:not(:first-child) { padding-left: 0; }

  .filtro-franja .contenido { gap: var(--e3); }
  .conteo { width: 100%; }

  /* El tiempo baja bajo el título: en 342 px, una columna a la derecha
     deja el título en dos palabras por línea. */
  .modulo a { grid-template-columns: 1fr; gap: var(--e2); }
  .modulo-tiempo { grid-row: auto; grid-column: 1; padding-top: 0; }
  .modulo-titulo { font-size: 19px; }
  .area-cabeza .area-cuenta { margin-left: 0; }
}

@media print {
  /* `.aplicar-area` y `.otras-areas` son de la página 12, que comparte esta
     hoja: en papel, un botón y tres tarjetas de navegación no sirven. Lo que
     sí se imprime es la ruta, que es a lo que alguien le tomaría una hoja. */
  .nav, .hoja-menu, .filtro-franja, .cierre-indice, .pie,
  .aplicar-area, .otras-areas, .migaja { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  .modulo a { break-inside: avoid; }
  .ruta-cabeza { break-after: avoid; }
}


/* 06 · LA PÁGINA DE ÁREA (12) =============================================
   `fundamentos-area.html` comparte esta hoja, igual que la ficha de una
   herramienta comparte la del índice de herramientas. Reusa `.datos-indice`,
   `.modulo` y `.en-revision` sin tocarlos: es la misma sección del sitio y
   tiene que verse como tal. Lo de abajo es solo lo que esa página añade.
   ========================================================================= */

/* La migaja de vuelta. Es la misma que la del artículo, y va repetida aquí a
   propósito: `fundamento.css` y esta hoja nunca se cargan juntas, así que
   compartir la regla exigiría un tercer archivo para dos declaraciones. Si
   alguna de las dos cambia, hay que cambiar la otra. */
.migaja {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--azul-profundo);
  text-decoration: none;
  margin-bottom: var(--e7);
}
.migaja:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La ruta. Dos grupos con su explicación, y la explicación lleva los números
   reales del área en vez de una frase que sirva para las cuatro. */
.ruta-cabeza {
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--regla);
  margin-bottom: var(--e4);
}
.ruta-cabeza h2 { margin: 0 0 var(--e3); }
.ruta-cabeza .parrafo { margin: 0; }
.ruta-cabeza-segunda { margin-top: var(--e9); }
.ruta-cabeza-segunda[hidden] { display: none; }

/* El requisito va FUERA del enlace del módulo, no dentro. Dentro convertía
   el título previo en un enlace anidado, que no es válido y que además hace
   que tocar el requisito abra el módulo equivocado. */
.modulo > .modulo-antes {
  padding: 0 var(--e4) var(--e5);
  margin-top: calc(var(--e3) * -1);
}
.modulo-antes a.titulo-previo {
  color: var(--texto-principal);
  text-decoration: none;
  border-bottom: 1px solid var(--borde-fuerte);
}
.modulo-antes a.titulo-previo:hover { border-bottom-color: var(--azul-pleno); color: var(--azul-profundo); }

/* La dependencia que sale del área. Es lo que el índice filtrado no puede
   enseñar, porque el área que la satisface está escondida. Se marca con el
   nombre del área al lado, o el lector no sabe dónde ir a buscarla. */
.modulo-antes-fuera b { color: var(--texto-secundario); }
.de-area {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--azul-profundo);
  background: var(--azul-claro);
  border-radius: var(--r-s);
  padding: 1px 6px;
  margin-left: 2px;
}

/* Las etapas del plan. Fila con número, nombre y cuenta: es una tabla de
   tres datos y no necesita ser una tabla. */
.etapas-area { max-width: 74ch; }
.etapas-area .etapa-fila {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--e4);
  align-items: baseline;
  padding: var(--e4) 0;
  border-top: 1px solid var(--borde-sutil);
}
.etapas-area .etapa-fila:first-child { border-top: 1px solid var(--regla); }
.etapa-num {
  font-family: var(--grot); font-weight: 700; font-size: 15px;
  color: var(--azul-pleno);
  font-variant-numeric: tabular-nums;
}
.etapa-nombre { font-family: var(--grot); font-size: 17px; color: var(--texto-principal); }
.etapa-cuenta {
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--texto-secundario);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* El vínculo B hacia A. Una sola llamada a la acción en la página, y es la
   del sitio entero. */
.aplicar-area {
  margin-top: var(--e8);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e6); flex-wrap: wrap;
}
.aplicar-area h3 { margin: 0; }

/* Las otras áreas. Tarjeta entera clicable, porque no hay nada más dentro
   que se pueda querer tocar. Las tres se estiran a la misma altura para que
   el pie de cada una quede alineado con el de las otras. */
.otras-areas { align-items: stretch; }
.tarjeta-area {
  display: flex; flex-direction: column; gap: var(--e3);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-1) ease;
}
.tarjeta-area:hover { background: var(--superficie-tenue); }
.tarjeta-area:hover .titular-s { text-decoration: underline; text-underline-offset: 4px; }
.tarjeta-area .parrafo { margin: 0; }
.tarjeta-area-pie {
  margin-top: auto; padding-top: var(--e4);
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--grot); font-size: 13px; font-weight: 600;
  color: var(--azul-profundo);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .modulo > .modulo-antes { padding-inline: 0; }
  .aplicar-area { flex-direction: column; align-items: stretch; }
  .etapas-area .etapa-fila { grid-template-columns: 32px minmax(0, 1fr); }
  .etapa-cuenta { grid-column: 2; }
}