/* v6 — añadidos sobre el CSS heredado de v4. Nada se pisa: solo clases nuevas. */

/* El sello de fecha del pie (regla de oro 4: lo que no se ha mirado se dice). */
.sello-datos {
  display: inline-block; margin-top: 8px; padding: 3px 9px;
  border: 1px solid currentColor; border-radius: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px;
  letter-spacing: .02em; opacity: .85;
}
.sello-datos--sin { border-style: dashed; opacity: .6; }

/* ── Etiquetas de estado de un vínculo ──────────────────────────────────────
   Tres, no dos. VINCULADO no quiere decir "tiene contrato": 639 de 943 se
   identifican sin ambigüedad pero su contrato no está recolectado. Pintarlos
   igual que los 304 que sí lo tienen sería afirmar más de lo que el dato dice. */
.etq { display: inline-block; padding: 2px 8px; border-radius: 3px;
       font-family: "IBM Plex Mono", monospace; font-size: 11px;
       font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.etq-vinculado      { background: #e7f4ec; color: #1c6b3f; border: 1px solid #b7ddc7; }
.etq-sin-contrato   { background: #eef1f5; color: #44506b; border: 1px solid #ccd4e0; }
.etq-ambiguo        { background: #fdf3e0; color: #8a5a12; border: 1px solid #ecd4a4; }
.etq-rescatada      { background: #f4eefb; color: #5f3d8a; border: 1px solid #d9c8ee; }
.etq-sin-verificar  { background: #fdecec; color: #983232; border: 1px solid #f0c4c4; }

/* El motivo, siempre al lado de la etiqueta. Un vínculo sin porqué no se publica. */
.motivo { font-size: 12px; color: #5a6472; line-height: 1.45; }

/* Aviso de cabecera para las extracciones IA: tiene que ser imposible de ignorar. */
.aviso-ia {
  border-left: 4px solid #983232; background: #fdecec; color: #6d2626;
  padding: 12px 16px; margin: 0 0 18px; border-radius: 0 4px 4px 0;
  font-size: 14px; line-height: 1.5;
}
.aviso-ia strong { display: block; margin-bottom: 3px; }

/* Páginas de error: salida útil, no una traza. */
.error-caja { max-width: 640px; margin: 48px auto; text-align: center; }
.error-caja .codigo { font-family: "IBM Plex Mono", monospace; font-size: 56px;
                      font-weight: 600; opacity: .25; line-height: 1; }
.error-caja h2 { margin: 10px 0 6px; }
.error-caja p  { color: #5a6472; line-height: 1.6; }
.error-caja .acciones { margin-top: 22px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Rejilla de la portada. */
.v6-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
             gap: 12px; margin: 22px 0; }
.v6-cifra { border: 1px solid #dde2ea; border-radius: 5px; padding: 14px 16px; background: #fff; }
.v6-cifra .num { font-family: "IBM Plex Mono", monospace; font-size: 26px; font-weight: 600; }
.v6-cifra .lbl { font-size: 12px; color: #5a6472; margin-top: 3px; line-height: 1.35; }
.v6-cifra .lbl a { color: inherit; }

/* ── Móvil ────────────────────────────────────────────────────────────────────
   OJO: el tratamiento móvil de v4 NO viene en sus tres CSS — vive incrustado en
   su `_base_v3.html`. Al escribir una base propia se perdió entero, así que se
   reconstruye aquí, que es su sitio: en una hoja de estilos y no dentro del HTML.
   Sin esto, en un teléfono las tablas desbordan la pantalla y la navegación se
   sale por el lado. */

html, body { overflow-x: hidden; }
img, table, .masthead, .masthead-content { max-width: 100%; }

@media (max-width: 768px) {
  .masthead { padding: 14px 12px; }
  .masthead-content { padding: 0 !important; max-width: 100%; }
  .masthead .title { font-size: clamp(20px, 5.4vw, 32px) !important;
                     line-height: 1.15; word-break: break-word; hyphens: auto; }
  .masthead .subtitle, .masthead .kicker { font-size: 12px !important; word-break: break-word; }

  /* La navegación no cabe: se desliza en horizontal en vez de partirse. */
  .topbar, .topbar-sticky {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; gap: 4px; padding: 8px 10px; scrollbar-width: thin;
  }
  .topbar a { white-space: nowrap; padding: 8px 12px; font-size: 13px; flex-shrink: 0; }

  .v3-main { padding: 14px 12px !important; max-width: 100% !important; }

  /* Las tablas del catálogo y de expedientes son anchas por necesidad: se
     deslizan dentro de su caja en vez de desbordar la página. */
  .v3-tabla, table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }

  .v3-filtros { grid-template-columns: 1fr !important; gap: 8px !important; }
  .v2-footer-inner { grid-template-columns: 1fr !important; gap: 14px; padding: 14px; }

  /* ── Lo propio de v6 ── */
  .v6-cifras { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .v6-cifra { padding: 12px 10px; }
  .v6-cifra .num { font-size: 22px; }

  /* Las dos columnas de la ficha, una debajo de otra: en un móvil la imagen y
     el texto en paralelo dejan ambas ilegibles. */
  .doc-dos { grid-template-columns: 1fr !important; }
  .doc-ident { grid-template-columns: 1fr !important; gap: 10px; }
  .doc-texto { max-height: 50vh; font-size: 12px; }
  .doc-paginas { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .doc-paginas a, .doc-paginas span { flex-shrink: 0; }

  .error-caja { margin: 28px 14px; }
  .vinculo { padding: 9px 11px; }
  .aviso-ia { padding: 11px 13px; font-size: 13.5px; }
}

@media (max-width: 480px) {
  .masthead .title { font-size: 22px !important; }
  .topbar a { font-size: 12px; padding: 7px 10px; }
  .v6-cifras { grid-template-columns: 1fr; }
}

/* ─── Línea de tiempo del expediente (v6.11) ────────────────────────────────
   Un eje vertical con un punto por hito. Se hace con CSS y no con una imagen
   para que funcione sin JavaScript, se pueda copiar como texto y se lea igual
   en el móvil, donde una gráfica horizontal se rompería. */
.cronologia { list-style: none; margin: 10px 0 0; padding: 0 0 0 22px;
              border-left: 2px solid #d9d2c5; }
.cronologia li { position: relative; padding: 0 0 16px 4px; }
.cronologia li::before { content: ""; position: absolute; left: -29px; top: 5px;
                         width: 11px; height: 11px; border-radius: 50%;
                         background: #8a7f6a; border: 2px solid #fff; }
.cronologia li.hito-adjudicacion::before { background: #2f6f4f; }
.cronologia li.hito-prorroga::before     { background: #b07d2b; }
.cronologia li.hito-modificacion::before { background: #9c4221; }
.cronologia .fecha { font-family: 'IBM Plex Mono', monospace; font-weight: 600;
                     margin-right: 8px; }
.cronologia .hueco { color: #7a7264; font-size: .86em; font-style: italic;
                     display: block; margin: -8px 0 8px; }

/* ─── Bloques de preguntas de la portada (v6.15) ────────────────────────────
   La portada entraba por «cuántos documentos se leyeron por OCR». Eso hace
   falta, pero no es por lo que entra nadie a auditar: ahora va debajo. */
.v6-preguntas { display: grid; gap: 18px; margin: 6px 0 0;
                grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.v6-pregunta { border: 1px solid #e2dbcd; border-radius: 6px; padding: 14px 16px;
               background: #fffdf9; }
.v6-pregunta h4 { margin: 0 0 8px; font-size: 1.05em; }
.v6-pregunta ol { margin: 0; padding-left: 20px; }
.v6-pregunta li { padding: 3px 0; }
.v6-pregunta .cifra { font-family: 'IBM Plex Mono', monospace; font-weight: 600;
                      margin-left: 6px; }
.v6-pregunta .motivo { margin: 10px 0 0; font-size: .86em; }

/* ─── Gráficos (v6.17) ──────────────────────────────────────────────────────
   Sin JavaScript y sin librerías: son barras de CSS. Así funcionan con el
   navegador que sea, se pueden copiar como texto y no piden nada a un CDN —que
   en una web de auditoría importa: un gráfico que se carga de fuera es un
   tercero mirando quién consulta qué.

   Las dos tintas están validadas con el comprobador de la guía de visualización
   contra el fondo del sitio: separación para daltonismo ΔE 24,7 y contraste
   por encima de 3:1. Además cada serie va con su etiqueta, para que la
   identidad no dependa nunca solo del color. */
/* Las variables van en `:root` y no solo en `.viz-root`.
   Estaban acotadas a `.viz-root`, y una leyenda colocada FUERA de ese contenedor
   —como la de «qué empresas repiten» o la de los órganos— recibía
   `var(--serie-lic)` sin valor: los cuadritos de color salían transparentes y la
   leyenda quedaba muda. No lo vio ninguna prueba; se vio abriendo el navegador. */
:root, .viz-root {
  --serie-lic: #2a78d6;   /* categórica 1 · licitaciones */
  --serie-men: #eb6834;   /* categórica 2 · contratos menores */
  --viz-tinta: #256abf;   /* secuencial · magnitud */
  --viz-pista: #e8e2d6;
}
.viz-leyenda { display:flex; gap:18px; font-size:.9em; margin-bottom:10px; color:#52514e; }
.viz-leyenda i { display:inline-block; width:11px; height:11px; border-radius:2px;
                 margin-right:5px; vertical-align:baseline; }

.viz-columnas { display:flex; gap:10px; align-items:flex-end; overflow-x:auto;
                padding-bottom:4px; }
.viz-col { flex:1 1 0; min-width:52px; text-align:center; }
.viz-valor { font-family:'IBM Plex Mono',monospace; font-size:.85em; color:#52514e;
             margin-bottom:3px; }
.viz-pila { display:flex; flex-direction:column-reverse; border-radius:4px 4px 0 0;
            overflow:hidden; min-height:3px; }
/* 2px de separación entre tramos apilados, como pide la guía de marcas. */
.viz-pila > div + div { box-shadow:0 -2px 0 #fffdf7; }
.viz-eje { font-size:.82em; color:#52514e; margin-top:5px; }
.viz-nota { font-size:.9em; font-style:italic; }

.viz-barras { display:flex; flex-direction:column; gap:7px; }
.viz-fila { display:grid; grid-template-columns:minmax(120px,20ch) 1fr 3.5ch;
            gap:10px; align-items:center; }
.viz-etq { font-size:.9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viz-barra { background:var(--viz-pista); border-radius:4px; height:15px; }
.viz-barra > span { display:block; height:100%; background:var(--viz-tinta);
                    border-radius:4px; }
.viz-num { font-family:'IBM Plex Mono',monospace; font-size:.88em; text-align:right;
           color:#52514e; }

@media (max-width:640px) {
  .viz-fila { grid-template-columns:1fr 3.5ch; }
  .viz-fila .viz-barra { grid-column:1 / -1; }
}

/* Separa en la navegación lo que sirve para auditar de cómo está hecho. */
.nav-sep { opacity:.4; padding:0 2px; }

/* ─── Quién gobernaba (v6.18) ───────────────────────────────────────────────
   Un sello discreto, no un titular: dice en qué mandato cae una fecha para que
   nadie atribuya al equipo actual algo de hace dos legislaturas. Los colores
   NO son los de los partidos —eso convertiría una web de datos en un panfleto—:
   son dos grises distinguibles, y el partido va escrito con letras. */
.mandato { display:inline-block; font-size:.78em; letter-spacing:.02em;
           padding:1px 7px; border-radius:10px; white-space:nowrap;
           border:1px solid #cfc7b6; background:#f4f1e9; color:#4a463d; }
.mandato--pp   { background:#f1efe8; }
.mandato--psoe { background:#eceae2; }
.mandato-anios { opacity:.7; }

/* ── Barra de años (v6.19) ──────────────────────────────────────────────────
   El año más reciente va primero. Los colores NO son de partido: eso
   convertiría una web de datos en un panfleto. El partido va escrito. */
.anios { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:16px 0 18px; }
.anios-etq { font-size:.9em; color:#52514e; margin-right:4px; }
.anio { display:inline-flex; align-items:baseline; gap:5px; padding:5px 10px;
        border:1px solid #d9d3c4; border-radius:6px; background:#fffdf7;
        text-decoration:none; color:#2f2e2b; font-size:.93em; line-height:1.2; }
.anio:hover { border-color:#2a78d6; }
.anio--sel { background:#2a78d6; border-color:#2a78d6; color:#fff; font-weight:600; }
.anio-part { font-size:.78em; opacity:.72; font-family:'IBM Plex Mono',monospace; }
.anio-nota { font-size:.76em; opacity:.72; font-style:italic; }
.anio-cab { border-left:3px solid #2a78d6; padding:2px 0 2px 12px; margin:26px 0 14px; }

/* Etiqueta de tipo de contrato: menor frente a licitación (v6.19) */
.tipo-c { display:inline-block; padding:1px 6px; border-radius:4px; font-size:.79em;
          border:1px solid; white-space:nowrap; }
.tipo-men { border-color:#eb6834; color:#a8410f; background:#fdf0e9; }
.tipo-lic { border-color:#2a78d6; color:#1a4f91; background:#e9f1fc; }

/* Barra apilada horizontal: dos tintas seguidas, con 2px de hueco de superficie
   entre ellas, como pide la guía de visualización. */
.viz-barra > span + span { box-shadow:-2px 0 0 #fffdf7; }
.viz-barra { display:flex; }
.viz-barra > span { flex:0 0 auto; }
.viz-fila--ancha { grid-template-columns:minmax(180px,34ch) 1fr 4ch; align-items:center; }
a.viz-pila { display:flex; flex-direction:column-reverse; }

/* Ejemplos de uso del buscador (v6.19). Un campo de texto vacío no dice qué se
   puede preguntar; estos ejemplos sí, y son pulsables. */
.ejemplos { background:#f6f2e8; border:1px solid #e6dfcd; border-radius:8px;
            padding:14px 16px; margin:0 0 24px; }
.ejemplos-lista { list-style:none; margin:0; padding:0;
                  display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.ejemplos-lista li { line-height:1.5; }
.ejemplos-lista code { background:#fffdf7; border:1px solid #ddd6c6; border-radius:4px;
                       padding:1px 6px; }
.ejemplos-lista .motivo { display:block; font-size:.88em; margin-top:2px; }
.anios-mas > summary { cursor:pointer; font-size:.9em; color:#52514e; padding:5px 4px; }
.anios-mas .anios { margin:6px 0 0; }

/* Incidencias y lecturas (v6.20). El color va en un filete lateral y NO en el
   fondo: un fondo rojo convierte una observación en una acusación antes de que
   nadie la haya leído. La gravedad va además escrita en la etiqueta. */
.incid { border-left-width:3px; }
.incid--alta  { border-left-color:#c0392b; }
.incid--media { border-left-color:#eb6834; }
.incid--baja  { border-left-color:#b9b2a1; }
.por-que { background:#f6f2e8; border-radius:6px; padding:9px 11px; font-size:.94em; }
.cronologia .hito-calculado::before { background:#fffdf7; border:2px dashed #b9b2a1; }
.cronologia .hito-anuncio::before { background:#2a78d6; }
.cronologia .hito-mesa::before    { background:#7a9bb8; }

/* Dos columnas para «quién gana» y «quién cobra», que se leen en paralelo.
   Se apilan en pantalla estrecha: un gráfico de barras comprimido no se lee. */
.dos-columnas { display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.dos-columnas h5 { margin:0 0 4px; font-size:1em; }