/*
 * Sistema de diseño de crowdrater.es.
 *
 * Tokens copiados literalmente de `patrimonia-landing/src/styles/input.css` (marca
 * hermana): no se retocan aquí.
 *
 * Fuentes: `patrimonia-landing` tampoco tiene los binarios `.woff2` autoalojados en su
 * propio repositorio — su CSS apunta a `/assets/fonts/*.woff2`, que hoy da 404 y cae a
 * `local()`. Reproducimos el mismo patrón (`local()` primero, `url()` después) contra
 * `/publico/fonts/<Familia>-<peso>.woff2`. Mientras esos ficheros no existan, cada
 * `@font-face` falla en silencio y el navegador usa la cascada de respaldo del propio
 * token (`--font-display`, `--font-sans`, `--font-mono`), que es real y no un simple
 * "system-ui": el sitio se ve correcto sin los binarios. Ninguna regla de este fichero
 * pide nada a un servicio de fuentes de terceros (ni Google Fonts ni ningún otro): por
 * privacidad del visitante, todo lo tipográfico se sirve desde este mismo dominio o
 * cae a una fuente ya instalada en el sistema.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Inter'), url('/publico/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Inter Medium'), url('/publico/fonts/Inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Inter SemiBold'), url('/publico/fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Inter Bold'), url('/publico/fonts/Inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Playfair Display Bold'),
    url('/publico/fonts/PlayfairDisplay-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('JetBrains Mono'), url('/publico/fonts/JetBrainsMono-500.woff2') format('woff2');
}

:root {
  --color-bg-base: oklch(13% 0.025 260);
  --color-surface-1: oklch(17% 0.030 260);
  --color-surface-2: oklch(22% 0.035 260);
  --color-border: oklch(28% 0.030 260);
  --color-gold: oklch(75% 0.12 80);
  --color-gold-bright: oklch(85% 0.14 80);
  --color-gold-dark: oklch(60% 0.13 80);
  --color-text-primary: oklch(92% 0.015 80);
  --color-text-secondary: oklch(72% 0.020 80);
  /* 62 %, no 55 % (revisión final de rama, B-1). A 55 % este token daba 3,57:1 sobre
     `--color-surface-2`, por debajo del 4,5:1 que pide WCAG AA para texto normal, y es el
     color de `.disclaimer p` --el aviso legal de no asesoramiento y la declaración de
     afiliación que §0.8 exige en las 21 páginas--, de `.desglose__estado` (la frase «no es
     un juicio sobre esta dimensión»), de `.ficha__aviso-afiliacion` y de
     `.portada-proyecto__aviso`. Es decir: de todo lo que el sitio existe para decir en voz
     alta. Mientras tanto la NOTA iba a 15,87:1.
     Se difirió como una observación estética y no lo es: es §0.3 en su lectura tipográfica
     --§0.3 pide que la ausencia «no parezca un juicio», y el número parecía un juicio
     precisamente porque la frase que lo niega no se leía-- más un aviso legal que no
     cumplía AA. A 62 % da 4,75:1 sobre `surface-2` y 5,52:1 sobre `bg-base`.
     `tests/publicacion/test_contraste.py` lo mide sobre este fichero. */
  --color-text-muted: oklch(62% 0.020 80);
  --color-success: oklch(70% 0.15 145);
  --color-warning: oklch(75% 0.15 75);
  --color-danger: oklch(65% 0.20 25);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-gold); text-decoration-color: var(--color-gold-dark); }
a:hover { color: var(--color-gold-bright); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--color-text-secondary); }

/* Toda cifra publicada va en la monoespaciada: alinea columnas y sostiene el aire de
   terminal financiera de la marca. */
.cifra, time, .tabla-cifras td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.contenedor {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Cabecera */
.cabecera {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-1);
}
.cabecera__contenedor {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.cabecera__marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text-primary);
  text-decoration: none;
}
.cabecera__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.cabecera__nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
}
.cabecera__nav a:hover { color: var(--color-gold); }

main.contenedor {
  min-height: 50vh;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* Tarjetas / superficies */
.tarjeta {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}

/* Pie y disclaimer: viven en base.html vía `_pie.html`, así que ninguna plantilla hija
   puede omitirlos por olvido — solo controlan `{% block contenido %}`. */
.pie {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-1);
  margin-top: 2rem;
}
.pie__contenedor {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}
.disclaimer {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.disclaimer p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.6em;
}
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer strong { color: var(--color-text-secondary); }
.pie__editor {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* 400px: la cabecera y el pie pasan a columna, el contenedor pierde el aire lateral
   grande para no desperdiciar los ~360px útiles de un móvil pequeño. */
@media (max-width: 480px) {
  .cabecera__contenedor { flex-direction: column; align-items: flex-start; }
  .contenedor, .pie__contenedor { padding-left: 1rem; padding-right: 1rem; }
}

/* --------------------------------------------------------------------------------
 * /proyectos/ (P4 tarea 6). Mobile-first a propósito: ninguna regla de aquí abajo
 * fija un ancho mayor que el viewport, todo envuelve con `flex-wrap`/`grid` y
 * `minmax()`, así que a 400px no hace falta ninguna regla adicional para evitar el
 * scroll horizontal -- la comprobación (§ el pliego la pide de forma explícita) es
 * que NINGUNA declaración de aquí abajo lo reintroduzca.
 * -------------------------------------------------------------------------------- */

.leyenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.leyenda__item { display: flex; align-items: center; }
.leyenda__muestra {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.4rem;
  flex-shrink: 0;
}
.leyenda__muestra--alta { background: var(--color-success); }
.leyenda__muestra--media { background: var(--color-warning); }
.leyenda__muestra--baja { background: var(--color-danger); }
/* Contorno discontinuo, sin relleno: distinta FORMA además de distinto color, no solo
   "gris" -- para que la diferencia con una medida mala no dependa de distinguir colores. */
.leyenda__muestra--sin-datos {
  background: transparent;
  border: 2px dashed var(--color-text-muted);
  width: 0.55rem;
  height: 0.55rem;
}

.aviso-noscript {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: 0.35rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1.5rem 0;
}
.filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 150px;
  min-width: 130px;
  max-width: 100%;
}
.filtros__campo label { font-size: 0.78rem; color: var(--color-text-secondary); }
.filtros select, .filtros input {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 0.35rem;
  padding: 0.45rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  max-width: 100%;
  min-width: 0;
}
.filtros__contador {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.listado-proyectos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }

.fila-proyecto {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
/* Frescura publicada, no excluida (P4 tarea 5): la fila NO desaparece, se atenúa con un
   borde y una etiqueta -- desaparecer en silencio es la mentira que ese diseño evita. */
.fila-proyecto--desactualizada { border-left: 3px solid var(--color-warning); }

.fila-proyecto__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.fila-proyecto__nombre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  margin-right: 0.25rem;
}

.etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.etiqueta--aviso { color: var(--color-warning); border-color: var(--color-warning); }
.etiqueta--declarada { color: var(--color-gold); border-color: var(--color-gold-dark); }
.etiqueta--calculada { color: var(--color-text-muted); }
/* P5: el estado del proyecto (abierto, próxima apertura...). Se distingue de las demás
   etiquetas de la cabecera porque es la única que dice si HOY se puede invertir ahí, que
   es la pregunta con la que el lector llega al listado. */
.etiqueta--estado { color: var(--color-text-primary); border-color: var(--color-text-muted); font-weight: 600; }

.fila-proyecto__nota {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.fila-proyecto__nota-valor { font-size: 2rem; font-weight: 700; color: var(--color-gold-bright); }
.fila-proyecto__nota-confianza { font-size: 0.8rem; color: var(--color-text-muted); }

.desglose {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.4rem 1.25rem;
}
.desglose__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.5rem;
  font-size: 0.82rem;
}
.desglose__etiqueta { order: 1; min-width: 5.5rem; color: var(--color-text-secondary); }
.desglose__valor { order: 2; margin-left: auto; }
.desglose__barra {
  order: 4;
  flex: 1 1 100%;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.desglose__barra span { display: block; height: 100%; background: var(--color-gold); border-radius: inherit; }
.desglose__estado { order: 5; flex: 1 1 100%; font-size: 0.72rem; color: var(--color-text-muted); }

/* La severidad SOLO colorea una dimensión medida (`sin_datos: false` en `contexto.py`):
   nunca se calcula sobre una imputada, así que este selector no puede aplicarse nunca a
   la vez que `--sin-datos` en el mismo elemento -- son mutuamente excluyentes por
   construcción en `_desglose_de()`, no solo por CSS. */
.desglose__item--alta .desglose__barra span { background: var(--color-success); }
.desglose__item--media .desglose__barra span { background: var(--color-warning); }
.desglose__item--baja .desglose__barra span { background: var(--color-danger); }
/* La dimensión sin datos, en cambio, SÍ se distingue explícitamente: color apagado y
   una barra sin relleno (no hay valor que dibujar), igual que `--sin-datos` en la
   leyenda -- es la comprobación central de esta tarea, la que evita que una ausencia se
   lea como una medida mala. */
.desglose__item--sin-datos .desglose__etiqueta,
.desglose__item--sin-datos .desglose__valor,
.desglose__item--sin-datos .desglose__estado { color: var(--color-text-muted); }
.desglose__item--sin-datos .desglose__barra { background: transparent; border: 1px dashed var(--color-border); }

.fila-proyecto__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}
.fila-proyecto__cifras dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.fila-proyecto__cifras dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }

.fila-proyecto__ficha {
  display: inline-block;
  font-size: 0.85rem;
  text-decoration: none;
}

/* Filas ocultas por `listado.js` (filtro sin coincidencia). Sin JavaScript esta clase
   nunca se añade -- el atributo `hidden` nativo ya basta y no depende de esta regla --
   pero fijarla explícitamente documenta el contrato entre la plantilla y el script. */
.fila-proyecto[hidden] { display: none; }


/* ---------------------------------------------------------------------------------
   Ficha individual de proyecto, /proyectos/<plataforma>/<slug>/ (P4 tarea 7).
   Ninguna regla de aquí pide nada a un tercero, igual que el resto del fichero.
   --------------------------------------------------------------------------------- */

.ficha { max-width: 52rem; }
.ficha__volver { font-size: 0.85rem; margin-bottom: 0.5rem; }
.ficha__identidad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}
.ficha__seccion {
  margin: 0 0 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* El caveat del §8: abre la ficha y tiene que verse ANTES que ninguna cifra, también
   cuando el color no llega (impresión, alto contraste, lector de pantalla). Por eso
   lleva además un `role="note"` y un encabezado propio en el HTML: el borde dorado es
   refuerzo, nunca el único portador del aviso. */
.caveat {
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--color-surface-1);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.caveat__titulo { font-size: 1.15rem; color: var(--color-warning); margin-bottom: 0.5rem; }

/* §13 (revisión final de rama, A-2): la advertencia regulatoria de una plataforma sin
   registro PSFP. Va por delante del caveat del §8 y se ve MÁS que él a propósito: el
   defecto medido era el contrario --caja grande y amarilla para nuestras lagunas de
   datos, fila de tabla gris para "esta plataforma no está supervisada por la CNMV"--.
   `--color-danger` la separa del amarillo de lo nuestro; el borde es refuerzo, nunca el
   único portador del aviso (el HTML lleva `role="note"`, encabezado y lista). */
.advertencia-regulatoria {
  border: 1px solid var(--color-danger);
  border-left-width: 6px;
  border-radius: 8px;
  background: var(--color-surface-1);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.advertencia-regulatoria__titulo {
  font-size: 1.25rem;
  color: var(--color-danger);
  margin-bottom: 0.6rem;
}
.advertencia-regulatoria__puntos { margin: 0 0 0.75rem; padding-left: 1.2rem; }
.advertencia-regulatoria__puntos li {
  margin-bottom: 0.4rem;
  color: var(--color-text-primary);
}
.advertencia-regulatoria__cierre { margin-bottom: 0; }
.caveat p { margin-bottom: 0.75rem; }
.caveat p:last-child { margin-bottom: 0; }

/* P5 (tanda del histórico): el aviso de que esta ronda ya no está abierta.

   **Deliberadamente NEUTRO, y ese es todo el punto del bloque.** Las dos cajas de
   arriba usan `--color-danger` (la plataforma no está supervisada) y `--color-warning`
   (nos faltan datos para esta nota) porque las dos avisan de un riesgo. Que una ronda
   haya cerrado NO es un riesgo ni un defecto -- normalmente es la ronda que se financió
   -- así que pintarla en rojo o en ámbar convertiría un hecho administrativo en una
   señal de alarma sobre el proyecto, que es §0.3 al revés y en la superficie más
   visible de la página. Fondo de superficie y borde de borde: se ve, se lee primero,
   y no grita.

   Lleva `role="note"` y un encabezado propio en el HTML por el mismo motivo que las
   otras dos: el borde es refuerzo, nunca el único portador del aviso. */
.aviso-ronda {
  border: 1px solid var(--color-border);
  border-left-width: 6px;
  border-radius: 8px;
  background: var(--color-surface-2);
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
}
.aviso-ronda__titular {
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: 0.6rem;
}
.aviso-ronda__significa { color: var(--color-text-primary); }
.aviso-ronda p { margin-bottom: 0.75rem; }
.aviso-ronda__matiz { font-size: 0.925rem; color: var(--color-text-muted); }
.aviso-ronda__salida { margin-bottom: 0; }
.ficha__nota-fecha { color: var(--color-text-muted); }

.tabla-variables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0;
}
.variable {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  min-width: 0;
}
.variable dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.variable dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.variable dd .cifra { font-size: 1.05rem; }
.variable__detalle {
  flex: 1 1 100%;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.variable__detalle--aviso { color: var(--color-warning); }

.ficha__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.ficha__nota-valor { font-size: 3rem; font-weight: 700; color: var(--color-gold-bright); }
.ficha__nota-escala { color: var(--color-text-muted); }
.ficha__nota-confianza { font-size: 0.85rem; color: var(--color-text-muted); }

/* El peso de la dimensión y lo que aporta: solo en la ficha (`detallado`), en su propia
   línea para que a 400 px no empuje nada fuera del viewport. */
.desglose__peso {
  order: 6;
  flex: 1 1 100%;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.desglose__item--sin-datos .desglose__peso { color: var(--color-text-muted); }

.ficha__frescura { font-size: 0.8rem; color: var(--color-text-muted); }

.enlace-salida {
  display: inline-block;
  max-width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}
.enlace-salida--afiliacion { border-color: var(--color-gold-dark); color: var(--color-gold-bright); }
.ficha__plan-amigo { font-size: 0.85rem; }
.ficha__aviso-afiliacion { font-size: 0.85rem; color: var(--color-text-muted); }
.ficha__matiz { font-size: 0.85rem; }
.ficha__plan-amigo-origen {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.ficha__plan-amigo-origen > span:last-child { flex: 1 1 14rem; min-width: 0; }

/* ---------------------------------------------------------------------------------
   /plataformas/ y la ficha de cada plataforma (P4 tarea 8). Mismo enfoque mobile-first
   que /proyectos/: nada de aquí abajo fija un ancho mayor que el viewport.
   --------------------------------------------------------------------------------- */

.listado-plataformas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }

.fila-plataforma {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.fila-plataforma__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.fila-plataforma__nombre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  margin-right: 0.25rem;
}
.fila-plataforma__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}
.fila-plataforma__cifras dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.fila-plataforma__cifras dd { margin: 0; }
.fila-plataforma__ficha {
  display: inline-block;
  font-size: 0.85rem;
  text-decoration: none;
}

/* --- /metodologia/ (P4 tarea 9) ------------------------------------------------------
   La página es casi toda tablas de cifras, y una tabla es el único elemento del sitio
   que puede necesitar más ancho que el viewport: cada una va dentro de su propio
   contenedor con scroll horizontal para que el BODY nunca desborde a 400 px.

   El scroll lo pone el CONTENEDOR (`.tabla-scroll`), no un `display: block` sobre la
   propia `<table>`. La primera versión hacía lo segundo y conseguía el mismo efecto, pero
   cambiar el `display` de una tabla le quita la semántica de tabla en algunos lectores de
   pantalla -- justo en la página que más invierte en `<caption>` y `scope`, y la única
   que existe para ser auditada (revisión de la tarea 9, B-11). */
.tabla-scroll { overflow-x: auto; max-width: 100%; }
.metodologia__seccion {
  margin: 0 0 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.metodologia__seccion h2 { margin-top: 0; }
.metodologia__seccion h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-text-primary);
}
.tabla-metodologia {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
}
.tabla-metodologia caption {
  caption-side: top;
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding-bottom: 0.4rem;
}
.tabla-metodologia th,
.tabla-metodologia td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.4rem 0.75rem 0.4rem 0;
  text-align: left;
  vertical-align: top;
}
.tabla-metodologia thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.tabla-metodologia tbody th,
.tabla-metodologia tfoot th {
  font-weight: 600;
  color: var(--color-text-secondary);
}
.tabla-metodologia tfoot th,
.tabla-metodologia tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--color-gold-dark);
  padding-top: 0.6rem;
  color: var(--color-text-primary);
}
.tabla-metodologia td.cifra { white-space: nowrap; }

/* --- La portada, /transparencia/ y /legal/ (P4 tarea 10) -----------------------------
   Mismo enfoque mobile-first que todo lo de arriba: ninguna regla de aquí abajo fija un
   ancho mayor que el viewport. Lo único que podría desbordar a 400 px es la URL de
   afiliación que publica /transparencia/, que es una cadena larga sin espacios: se rompe
   con `overflow-wrap` en vez de dejar que empuje el body. */

.entradilla { font-size: 1.05rem; }

.portada-ultimos { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.portada-proyecto {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.portada-proyecto__nombre {
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}
.portada-proyecto__nota { font-size: 1.35rem; font-weight: 700; grid-row: 1 / span 2; }
.portada-proyecto__plataforma, .portada-proyecto__aviso {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  grid-column: 1;
}

.portada-puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 0; }
.portada-puertas dt { font-family: var(--font-display); font-weight: 700; margin-bottom: 0.25rem; }
.portada-puertas dd { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }

.transparencia-plataformas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.transparencia-plataforma {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}
.transparencia-plataforma__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.transparencia-plataforma__nombre {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}
.transparencia-plataforma p { margin: 0 0 0.5rem; font-size: 0.9rem; }
.transparencia-plataforma__enlace a { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.8rem; }
.transparencia-plataforma__origen { font-size: 0.8rem; color: var(--color-text-muted); }

.transparencia-entradas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.transparencia-entradas li { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 0.3rem; padding: 0.15rem 0.5rem; }
.transparencia-entradas code, #no-influye code { font-family: var(--font-mono); font-size: 0.8rem; overflow-wrap: anywhere; }

.legal-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem 1rem; margin: 0 0 1rem; }
.legal-editor dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.legal-editor dd { margin: 0; }
.legal-editor__pendiente { color: var(--color-text-muted); font-style: italic; }

.pie__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.75rem; font-size: 0.85rem; }

/* Revisión de la tarea 10 (B-7): la nota de la portada llevaba su cifra desnuda, sin la
   escala ni la fecha en que se calculó. */
.portada-proyecto__escala { font-size: 0.8rem; color: var(--color-text-muted); }
.portada-proyecto__fecha { font-size: 0.75rem; color: var(--color-text-muted); grid-column: 1; }
.legal-editor__pendiente { color: var(--color-warning); font-style: normal; }

/* P5 (tanda de la narrativa): la descripción razonada de la nota.

   Los tres colores de borde NO son decoración: separan las tres listas de la forma en que
   la página separa ya "con datos" de "sin datos". La de `no_sabemos` usa el mismo gris
   apagado que el resto del sitio reserva para la ausencia --nunca el rojo de peligro--,
   porque una dimensión de la que no sabemos nada no es una alarma: es un hueco. */
.narrativa__procedencia { font-size: 0.9rem; color: var(--color-text-muted); }
.narrativa__titulo { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.narrativa__lista { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.narrativa__item {
  border-left: 4px solid var(--color-border);
  background: var(--color-surface-1);
  border-radius: 0 8px 8px 0;
  padding: 0.6rem 0.9rem;
  color: var(--color-text-secondary);
}
.narrativa__lista--ventajas .narrativa__item { border-left-color: var(--color-success); }
.narrativa__lista--riesgos .narrativa__item { border-left-color: var(--color-warning); }
.narrativa__lista--ausencia .narrativa__item { border-left-color: var(--color-text-muted); }
.narrativa__dimension {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-right: 0.4rem;
}
.narrativa__matiz { font-size: 0.9rem; color: var(--color-text-muted); }
.narrativa__conclusion { color: var(--color-text-primary); }
.narrativa__firma { font-size: 0.8rem; color: var(--color-text-muted); }