/* /observatorio/ — layout de las páginas (templates/observatorio/_base.html).
   Desde el 25-10-2026, con el molde del índice de /marcas (static/marcas-indice.css, prefijo mi-) para que el
   Observatorio se lea como parte de la web: las piezas que toma de allí (cabecera, buscador, botones
   segmentados, cifras entre filetes, lista A–Z) están copiadas aquí con prefijo obs-, sin cargar aquella hoja.
   Ronda archivada en design-proposals/observatory-site-integration/. Ni azul en la navegación ni sombras;
   colores, solo tokens de Pizarra (:root de style.css).

   Colores por tecnología (encargo v3, §0.10): uno propio y bien distinto por tecnología, igual en todas
   las páginas. Gasolina y diésel de una misma tecnología llevan el mismo color y se distinguen por el
   trazo (continuo / discontinuo) o la trama (`.trama`). En :root para que observatorio.js los lea. */
:root {
    --obs-bev: var(--bev);        /* eléctrico (BEV): el verde de la web */
    --obs-phev: var(--k4);        /* híbrido enchufable (PHEV): morado */
    /* Dos series de una tecnología en el mismo gráfico de líneas (encargo v3, A3: cada una se distingue sin la leyenda):
       además del trazo, otro tono. Escenarios del PHEV: eléctrico, el oscuro; combustible, el claro; el ponderado (y el
       PHEV total), --obs-phev. El diésel junto a la gasolina de su tecnología, el claro. */
    --obs-phev-oscuro: #4b2570;
    --obs-phev-claro: #b393d4;
    --obs-hev-claro: #7ea5c8;
    --obs-comb-claro: #8c9094;
    --obs-hev: var(--k3);         /* híbrido (HEV): azul */
    --obs-comb: var(--ink);       /* combustión, gasolina y diésel: tinta */
    --obs-otros: var(--n6);       /* otros (GLP, GNC, REEV, hidrógeno): gris */
    --obs-ref: var(--muted);      /* referencias: el año de comparación, la media, la línea de control */
    --obs-banda: var(--n9);       /* bandas de fondo (medidas, programas) */
}

.obs { max-width: 1280px; margin: 0 auto; padding: 0 16px 56px; color: var(--ink); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; }
@media (min-width: 640px) { .obs { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .obs { padding-left: 32px; padding-right: 32px; } }

/* Cabecera: antetítulo verde con el recuento, título y entradilla (.mi-vh de /marcas). */
.obs-hd { padding-top: 28px; }
.obs-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bev); }
.obs-hd h1 { margin: 6px 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.obs-lead { max-width: 720px; font-size: 14px; color: var(--ink-2); }

/* Buscador de indicadores (obsBuscador): caja, borrar y botón; debajo, las coincidencias (.mi-search). */
.obs-buscar { display: flex; gap: 8px; margin-top: 20px; }
.obs-buscar-caja { position: relative; flex: 1; min-width: 0; }
.obs-buscar input { width: 100%; height: 44px; padding: 0 40px 0 14px; font: inherit; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--hair); border-radius: 6px; }
.obs-buscar input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.obs-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.obs-borrar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; padding: 4px 8px;
    font-size: 20px; line-height: 1; color: rgb(var(--gris-500)); background: none; border: 0; cursor: pointer; }
.obs-buscar-caja.on .obs-borrar { display: block; }
.obs-boton { height: 44px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: var(--ink);
    border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.obs-hits { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.obs-hits:empty { display: none; }
.obs-hits a { padding: 5px 10px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--hair); border-radius: 6px; }
.obs-hits a:hover { border-color: var(--ink); }
.obs-hits small { margin-left: 6px; font-size: 12px; font-weight: 400; color: rgb(var(--gris-500)); }

/* Barra: recuento a la izquierda; a la derecha, la página (botones segmentados, como el «Agrupar por» de /marcas) y
   la vista «Gráficos | Tablas» (como «Tarjetas | Tabla»). La página actual y la vista elegida, en tinta. */
.obs-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 20px;
    padding-top: 14px; border-top: 1px solid var(--hair); }
.obs-cuenta { font-size: 14px; color: var(--ink-2); }
.obs-cuenta b { font-weight: 600; color: var(--ink); }
.obs-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.obs-ctl-pag { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.obs-seg { display: inline-flex; height: 40px; overflow: hidden; border: 1px solid var(--hair); border-radius: 6px; }
.obs-seg > * { display: flex; align-items: center; flex: none; padding: 0 14px; font: inherit; font-size: 13.5px; font-weight: 500;
    color: var(--ink-2); background: var(--surface); border: 0; white-space: nowrap; text-decoration: none; cursor: pointer; }
.obs-vista > * { font-weight: 600; }
.obs-seg > * + * { border-left: 1px solid var(--hair); }
.obs-seg > a:hover, .obs-seg > button:hover { color: var(--ink); }
.obs-seg > [aria-current], .obs-seg > [aria-pressed="true"] { background: var(--ink); color: #fff; font-weight: 600; cursor: default; }
/* En móvil, como /marcas: sin botón «Buscar» (basta Intro) ni vista; las 7 páginas, en una fila que se desplaza. */
@media (max-width: 767px) {
    .obs-boton, .obs-vista, .obs-ctl-pag > span { display: none; }
    .obs-ctl, .obs-ctl-pag { width: 100%; min-width: 0; }
    .obs-nav { position: relative; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .obs-nav > * { padding: 0 12px; font-size: 13px; }
}

/* Sección: filete en tinta, título a la izquierda y sus fuentes en verde a la derecha (macro `cabecera`). La cabecera
   del sitio es fija (80 px): el ancla no queda debajo. */
.obs-bloque { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--ink); scroll-margin-top: 96px; }
.obs-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.obs-cab h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.obs-rot { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bev); }
@media (max-width: 639px) {
    .obs-cab { flex-direction: column; gap: 4px; }
    .obs-cab h2 { font-size: 21px; }
}
.obs-bloque h3 { margin-top: 1.75rem; font-size: 1.0625rem; font-weight: 700; }
.obs-sub { margin-top: 6px; max-width: 720px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.obs-cifra { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.5; }
.obs-cifra b { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Cifras (macro `cifra`) en una rejilla de 1, 2 o 3 columnas separadas por filetes, como «Desde · Fundada · Matric.
   12 meses» de las tarjetas de /marcas; la primera en verde. Cada celda corre su filete izquierdo y el superior 1 px
   hacia fuera y la rejilla lo recorta: la primera columna y la primera fila no lo pintan. */
.obs-ks { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 18px; overflow: hidden; border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair); }
@media (min-width: 640px) {
    .obs-ks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .obs-ks-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.obs-k { display: flex; flex-direction: column; align-items: center; margin: -1px 0 0 -1px; padding: 14px 12px 15px; text-align: center;
    border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); }
.obs-k-ante { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--gris-500)); }
.obs-k-val { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.obs-k:first-child .obs-k-val { color: var(--bev); }
.obs-k-u { margin-left: 2px; font-size: 12px; font-weight: 600; color: rgb(var(--gris-500)); }
.obs-k-txt { margin-top: 6px; max-width: 26em; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

/* Vista «Tablas» (obsVista): fuera los gráficos; las tablas de «Ver los datos» las abre el JS. */
.obs-tablas .obs-grafico, .obs-tablas .obs-graficos, .obs-tablas .obs-mapa, .obs-tablas .obs-apiladas,
.obs-tablas .obs-pesas, .obs-tablas .obs-barras { display: none; }

.obs-graficos { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 1024px) { .obs-graficos { grid-template-columns: 3fr 2fr; } }
.obs-graficos figure, .obs-grafico { margin: 0; min-width: 0; }
.obs-graficos figcaption, .obs-grafico-tit { font-size: .8125rem; font-weight: 600; color: var(--muted); }

/* Elecciones de un gráfico (tipo de vehículo, tecnología): texto con subrayado, el activo en tinta. */
.obs-sel { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-top: .75rem; font-size: .875rem; }
.obs-sel-tit { color: var(--muted); }
.obs-sel button { padding: .15rem 0; color: var(--muted); border-bottom: 2px solid transparent; background: none; cursor: pointer; }
.obs-sel button:hover { color: var(--ink); }
.obs-sel button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.obs-sel + div[x-ref], .obs-sel + .obs-sel + div[x-ref] { margin-top: 1rem; }

/* El proyecto no define [x-cloak] en general: aquí sí, para los paneles que Alpine aún no ha montado. */
.obs [x-cloak] { display: none !important; }

/* Tablas de ranking (provincias, municipios): lista numerada con la cifra alineada a la derecha. */
.obs-ranking { margin-top: 1rem; padding: 0; list-style: none; counter-reset: rk; font-size: .875rem; columns: 1; column-gap: 2.5rem; }
@media (min-width: 768px) { .obs-ranking { columns: 2; } }
.obs-ranking li { counter-increment: rk; display: grid; grid-template-columns: 2rem 1fr auto auto; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.obs-ranking li::before { content: counter(rk); color: var(--muted); font-variant-numeric: tabular-nums; }
.obs-ranking .n { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2); }
.obs-ranking .n b { color: var(--ink); }

/* Tablas de datos (ZBE, ciudades): cifras alineadas a la derecha; en móvil se desplazan dentro de su caja. */
.obs-tabla-caja { margin-top: 1rem; overflow-x: auto; }
.obs-tabla-visible { margin-top: 1.25rem; font-size: .8125rem; }
.obs-tabla-visible .obs-tabla-caja { max-height: 30rem; overflow-y: auto; }
.obs-tabla-visible .obs-tabla th { position: sticky; top: 0; background: var(--paper, #fff); }
.obs-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.obs-tabla th { padding: .4rem .5rem; text-align: right; font-weight: 600; font-size: .75rem; color: var(--muted); border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.obs-tabla td { padding: .35rem .5rem; text-align: right; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs-tabla th:first-child, .obs-tabla td:first-child { text-align: left; white-space: normal; }
.obs-tabla .flecha { color: var(--muted); }
.obs-tabla a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.obs-tabla a:hover { text-decoration-color: var(--ink); }

/* Nota a la vista (macro `aviso`): lo que cambia la lectura del gráfico, con un filete a la izquierda. */
.obs-aviso { margin-top: 1rem; max-width: 52rem; padding-left: .75rem; border-left: 2px solid var(--ink); font-size: .875rem; line-height: 1.5; color: var(--ink-2); }

/* Datos que no se han podido actualizar (Mongo no responde): bajo el índice, antes de los paneles. */
.obs-aviso-datos { margin-top: 1.5rem; }

/* «Cómo se calcula»: las notas de método de cada panel, plegadas (regla 1 del encargo v2). */
.obs-notas { margin-top: 1rem; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.obs-notas summary { cursor: pointer; width: max-content; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.obs-notas summary:hover { text-decoration-color: var(--ink); }
.obs-notas ul { margin: .5rem 0 0; padding-left: 0; list-style: none; max-width: 52rem; }
.obs-notas li + li { margin-top: .2rem; }

/* Tooltip propio de los gráficos (nubes de puntos, barras de rango, detalle por punto) y del mapa. */
.obs-tip { padding: .45rem .6rem; font-size: .8125rem; line-height: 1.45; color: var(--ink); background: var(--surface, #fff); border: 1px solid var(--hair); }
.obs-tip-tit { font-weight: 700; margin-bottom: .15rem; }
.obs-tip-extra { max-width: 20rem; margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--hair); font-size: .75rem; color: var(--ink-2); white-space: normal; }
.obs-tip-extra > div:first-child { font-weight: 600; color: var(--ink); }
.obs-tip-punto { display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; vertical-align: baseline; }

/* Mapa de provincias (obsMapa): el SVG del silo, la rampa de menos a más y el tooltip que sigue al ratón. */
.obs-mapa { position: relative; margin: 1.25rem auto 0; max-width: 46rem; }
.obs-mapa-svg path:hover { stroke: var(--ink); stroke-width: 1.2; }
.obs-mapa-leyenda { max-width: 18rem; margin: .5rem auto 0; font-size: .75rem; color: var(--muted); text-align: center; }
.obs-mapa-unidad { margin-bottom: .2rem; color: var(--ink-2); }
.obs-mapa-rampa { height: .5rem; }
.obs-mapa-extremos { display: flex; justify-content: space-between; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.obs-mapa-tip { position: absolute; display: none; pointer-events: none; z-index: 5; min-width: 12rem; }

/* «¿Cómo elaboramos estos datos?»: las fuentes del documento sobre fondo gris, como el de los listados de /coches/;
   la atribución, con el filete verde. */
.obs-fuentes { margin-top: 56px; padding: 20px; background: var(--ground); border-radius: 8px; scroll-margin-top: 96px; }
.obs-fuentes-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.obs-fuentes h2 { font-size: 16px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.obs-fuentes-cab span { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .095em; text-transform: uppercase; color: var(--muted); }
.obs-fuentes p { max-width: 56em; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.obs-fuentes ul { max-width: 56em; margin: 12px 0 0; padding-left: 1.1rem; list-style: disc; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.obs-fuentes li + li { margin-top: 3px; }
.obs-fuentes .obs-fuentes-notas { margin-top: 12px; }
.obs-fuentes .obs-fuentes-aviso { margin-top: 18px; padding: 2px 0 2px 16px; border-left: 3px solid var(--bev); color: var(--ink); }

/* Los indicadores de las 7 páginas de la A a la Z, con su página a la derecha («Las 66 marcas, de la A a la Z»). */
.obs-az { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--ink); }
.obs-az h2 { margin-bottom: 4px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.obs-az > p { margin-bottom: 16px; font-size: 13.5px; color: var(--ink-2); }
.obs-az ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.obs-az a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid rgb(var(--gris-100)); }
.obs-az a:hover span { text-decoration: underline; }
.obs-az small { font-size: 12px; font-weight: 400; color: rgb(var(--gris-500)); white-space: nowrap; }
@media (max-width: 1023px) { .obs-az ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .obs-az ul { grid-template-columns: minmax(0, 1fr); } }

/* Gráfico de pesas (macro `pesas`): etiqueta · pista con los dos puntos y la línea entre ellos · cifras. */
.obs-pesas { margin-top: 1rem; font-size: .875rem; }
.obs-pesas-ley { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--ink-2); }
.obs-pesas .punto { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -1px; margin-right: .35rem; }
.obs-pesas .punto.a { background: var(--pa); }
.obs-pesas .punto.b { background: var(--pb); }
.obs-pesas-filas { margin: .6rem 0 0; padding: 0; list-style: none; }
.obs-pesas-filas li, .obs-pesas-eje { display: grid; grid-template-columns: minmax(7rem, 15rem) 1fr 9rem; gap: .75rem; align-items: center; }
.obs-pesas-filas li { padding: .35rem 0; border-bottom: 1px solid var(--hair); }
.obs-pesas .pista { position: relative; height: 1.1rem; }
.obs-pesas .pista .punto { position: absolute; top: 50%; margin: 0; transform: translate(-50%, -50%); }
.obs-pesas .tramo { position: absolute; top: 50%; height: 2px; background: var(--muted); transform: translateY(-50%); }
.obs-pesas .cifras { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.obs-pesas .cifras b { color: var(--ink); }
.obs-pesas-eje { padding-top: .3rem; font-size: .75rem; color: var(--muted); }
.obs-pesas-eje .pista span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.obs-pesas-eje .pista span:last-child { transform: translateX(-100%); }
@media (max-width: 640px) {
    .obs-pesas-filas li, .obs-pesas-eje { grid-template-columns: 6.5rem 1fr; }
    .obs-pesas .cifras { grid-column: 2; text-align: left; }
}

/* ---------------------------------------------------------------------------------------------------
   Gráficos de barras en HTML (encargo v3, §0.3 y regla 7): las cifras siempre a la vista. Macros en
   templates/observatorio/_macros.html; datos, de observatorio/vistas/comun.py.
   --------------------------------------------------------------------------------------------------- */

/* Trama para el diésel y lo estimado: rayas del color de la serie sobre blanco. */
.obs .trama { background-image: repeating-linear-gradient(135deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 18%, #fff) 3px 6px) !important; }
.obs-ley { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .75rem; font-size: .8125rem; color: var(--ink-2); }
.obs-ley-item { display: inline-flex; align-items: center; gap: .4rem; }
/* Leyendas con elementos largos (coste y CO₂ de hoy): uno por línea, para que no se lean como una sola frase. */
.obs-coste-hoy .obs-ley, .obs-co2-hoy .obs-ley { flex-direction: column; align-items: flex-start; }
.obs-ley-mancha { display: inline-block; width: .9rem; height: .7rem; background: var(--c); }
.obs-ley-raya { display: inline-block; width: 1.1rem; border-top: 2px solid var(--c); }
.obs-ley-raya.discontinua { border-top-style: dashed; }
.obs-ley-marca { display: inline-block; width: 3px; height: .9rem; background: var(--ink); }
.obs-eje-titulo { margin-top: .35rem; font-size: .75rem; color: var(--muted); }

/* Barras horizontales: etiqueta · pista · cifra. Rango: barra del P25 al P75 (o del mínimo al máximo)
   con la mediana marcada. */
.obs-barras { margin-top: 1rem; font-size: .875rem; }
.obs-barras-filas { margin: 0; padding: 0; list-style: none; }
.obs-barras-filas li, .obs-barras-eje { display: grid; grid-template-columns: minmax(8rem, 17rem) 1fr minmax(8.5rem, 15rem); gap: .75rem; align-items: center; }
.obs-barras-filas li { padding: .3rem 0; border-bottom: 1px solid var(--hair); }
.obs-barras .pista { position: relative; height: 1.25rem; }
.obs-barras .barra { position: absolute; top: .15rem; bottom: .15rem; background: var(--c); }
.obs-barras .cero { position: absolute; top: -.25rem; bottom: -.25rem; width: 1px; background: var(--ink); }
.obs-barras .marca { position: absolute; top: -.1rem; bottom: -.1rem; width: 3px; margin-left: -1.5px; background: var(--ink); box-shadow: 0 0 0 1px #fff; }
.obs-barras .punto { position: absolute; top: 50%; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; background: var(--c); }
.obs-barras .punto.hueco { background: #fff; border: 3px solid var(--c); }
.obs-ley-punto { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--c); }
.obs-ley-punto.hueco { background: #fff; border: 2px solid var(--c); }
@media (min-width: 641px) {
    .obs-barras.cifra-ancha .obs-barras-filas li, .obs-barras.cifra-ancha .obs-barras-eje { grid-template-columns: minmax(8rem, 17rem) 1fr minmax(8.5rem, 20rem); }
}
/* La cifra se parte si no cabe (las etiquetas largas de `operadores`); dentro de cada cifra, espacios duros. */
.obs-barras .cifra { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.obs-barras .cifra small { display: block; font-size: .75rem; color: var(--muted); white-space: normal; }
.obs-barras-eje { padding-top: .3rem; font-size: .75rem; color: var(--muted); }
.obs-barras-eje .pista { height: 1rem; }
.obs-barras-eje .pista span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.obs-barras-eje .pista span:last-child { transform: translateX(-100%); }
@media (max-width: 640px) {
    .obs-barras-filas li, .obs-barras-eje { grid-template-columns: 6.5rem minmax(0, 1fr); }
    .obs-barras .cifra { grid-column: 2; text-align: left; }
    .obs-barras-eje .pista span.menor { display: none; }
}

/* Barras apiladas al 100 %: una fila por grupo; cada tramo con su cifra si cabe (y siempre en el título). */
.obs-apiladas { margin-top: 1rem; font-size: .8125rem; }
.obs-apiladas-fila + .obs-apiladas-fila { margin-top: .9rem; }
.obs-apiladas-tit { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; font-size: .875rem; }
.obs-apiladas-tit b { font-variant-numeric: tabular-nums; }
.obs-apiladas-barra { display: flex; height: 2.4rem; background: var(--rail); }
.obs-apiladas-barra > span { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; background: var(--c); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs-apiladas-barra > span + span { border-left: 1px solid #fff; }
.obs-apiladas-barra > span.claro { color: var(--ink); }
.obs-apiladas-barra b { font-weight: inherit; }
/* En móvil, la cifra de un tramo de menos del 14 % no cabe dentro: va en la línea de debajo. */
@media (max-width: 640px) { .obs-apiladas-barra b.ancho { display: none; } }
/* Etiquetas de los tramos de menos del 3 % (`fuera`): debajo de la barra, una por línea, con una línea fina en L
   desde el centro del tramo. Las de la mitad derecha, hacia la izquierda. */
.obs-apiladas-fuera { position: relative; height: calc(var(--filas) * 1.4rem + .35rem); }
.obs-apiladas-fuera > span { position: absolute; top: calc(var(--fila) * 1.4rem + .35rem); padding-left: .7rem; line-height: 1.4rem; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.obs-apiladas-fuera > span::before { content: ""; position: absolute; left: 0; bottom: 50%; height: calc(var(--fila) * 1.4rem + 1.05rem); border-left: 1px solid var(--ink); }
.obs-apiladas-fuera > span::after { content: ""; position: absolute; left: 0; top: 50%; width: .5rem; border-top: 1px solid var(--ink); }
.obs-apiladas-fuera > span.derecha { padding: 0 .7rem 0 0; transform: translateX(-100%); }
.obs-apiladas-fuera > span.derecha::before, .obs-apiladas-fuera > span.derecha::after { left: auto; right: 0; }
.obs-apiladas-cifras { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .4rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Barras enfrentadas: lo de la izquierda crece hacia la izquierda; lo de la derecha, hacia la derecha. */
.obs-enfrentadas { margin-top: 1rem; font-size: .8125rem; }
.obs-enfrentadas-cab, .obs-enfrentadas-filas li { display: grid; grid-template-columns: 1fr minmax(7rem, 11rem) 1fr; gap: .6rem; align-items: center; }
.obs-enfrentadas-cab { font-weight: 700; color: var(--ink-2); padding-bottom: .3rem; border-bottom: 1px solid var(--ink); }
.obs-enfrentadas-cab > span:first-child { text-align: right; }
.obs-enfrentadas-cab > span:nth-child(2) { text-align: center; }
.obs-enfrentadas-filas { margin: 0; padding: 0; list-style: none; }
.obs-enfrentadas-filas li { padding: .25rem 0; border-bottom: 1px solid var(--hair); }
.obs-enfrentadas .lado { position: relative; display: flex; align-items: center; height: 1.3rem; gap: .35rem; font-variant-numeric: tabular-nums; }
.obs-enfrentadas .lado.izq { flex-direction: row-reverse; }
.obs-enfrentadas .lado .barra { height: 100%; background: var(--c); }
.obs-enfrentadas .nombre { text-align: center; color: var(--ink); line-height: 1.2; }
.obs-enfrentadas .nombre small { color: var(--muted); }

/* Columnas apiladas en HTML (series mensuales): hacia arriba lo que suma, hacia abajo lo que resta. */
.obs-columnas { margin-top: 1rem; font-size: .75rem; }
.obs-columnas-area { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.obs-columnas-col { display: flex; flex-direction: column; }
.obs-columnas-col .arriba, .obs-columnas-col .abajo { position: relative; display: flex; }
.obs-columnas-col .arriba { flex-direction: column-reverse; justify-content: flex-start; border-bottom: 1px solid var(--ink); }
.obs-columnas-col .abajo { flex-direction: column; }
.obs-columnas-col .tramo { background: var(--c); }
.obs-columnas-col .total { display: flex; justify-content: center; min-height: 1.1rem; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
/* La cifra de la primera columna, desde su borde izquierdo; la de la última, hasta el derecho: no se salen del gráfico. */
.obs-columnas-col:first-child .total { justify-content: flex-start; }
.obs-columnas-col:last-child .total { justify-content: flex-end; }
.obs-columnas-etq { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: .25rem; color: var(--muted); text-align: center; }
@media (max-width: 640px) { .obs-columnas-col .total { font-size: .6rem; } }
/* Con eje vertical (`eje`): las marcas a la izquierda, con su línea por detrás de las columnas. */
.obs-columnas-caja { position: relative; }
.obs-columnas.con-eje .obs-columnas-caja, .obs-columnas.con-eje .obs-columnas-etq { margin-left: 3.6rem; }
.obs-columnas-eje { position: absolute; inset: 0; }
.obs-columnas-eje span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--hair); }
.obs-columnas-eje b { position: absolute; right: calc(100% + .35rem); transform: translateY(-50%); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.obs-columnas-eje-tit { margin: .5rem 0 .6rem; font-size: .75rem; color: var(--muted); }
.obs-columnas.con-eje .obs-columnas-area { position: relative; }
.obs-columnas-etq span { display: flex; justify-content: center; overflow: visible; white-space: nowrap; }
/* calidad-datos (encargo del 27-10-2026): la lógica visual de /matriculaciones/estado-de-los-datos/ con el estilo del
   Observatorio. Tablas planas a la vista, las de `.metodo` de style.css, que en móvil pasan a fichas apiladas (la
   etiqueta de cada celda, de `data-label`); el estado de cada fuente con la forma y el color del estado de un fichero
   allí (`.ed-c` de style.css): al día = consolidado (cuadrado verde), con aviso = retenido (triángulo naranja, el de
   «Con avisos» de la cabecera), retrasada = sin datos (recuadro de trazos). El estado se lee también por la forma y
   siempre lleva su nombre al lado. */
.obs-plana { width: 100%; margin-top: 18px; border-collapse: collapse; }
.obs-plana thead th { padding: 0 16px 8px 0; text-align: left; vertical-align: bottom; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.obs-plana td, .obs-plana tbody th { padding: 11px 16px 11px 0; text-align: left; vertical-align: top; font-size: 14px; line-height: 1.5; color: var(--ink-2);
    border-bottom: 1px solid var(--hair); overflow-wrap: break-word; }
/* La primera celda de cada fila es su encabezado (`th scope="row"`), en tinta. */
.obs-plana tbody th { font-weight: 600; color: var(--ink); }
.obs-plana th:last-child, .obs-plana td:last-child { padding-right: 0; }
.obs-plana .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.obs-plana .fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.obs-plana small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--muted); }
.obs-plana a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.obs-plana a:hover { text-decoration-color: var(--ink); }
.obs-estado { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.obs-estado .ed-c { width: 12px; height: 12px; flex: 0 0 12px; }
/* Fichas hasta 767 px, el corte de móvil del Observatorio: la tabla de fuentes, con seis columnas, pide unos 690 px. */
@media (max-width: 767px) {
    .obs-plana, .obs-plana tbody, .obs-plana tr, .obs-plana td, .obs-plana tbody th { display: block; width: 100%; }
    .obs-plana thead { display: none; }
    .obs-plana tr { padding: 12px 0; border-bottom: 1px solid var(--hair); }
    .obs-plana tbody tr:first-child { border-top: 1px solid var(--ink); }
    .obs-plana td, .obs-plana tbody th { padding: 0; border: 0; }
    .obs-plana tr > * + * { margin-top: 6px; }
    .obs-plana td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 700;
        letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .obs-plana .num { text-align: left; }
}
/* Última publicación con avisos: la cifra en tinta (no en el verde de la primera) y con el triángulo de aviso. */
.obs-k.con-avisos .obs-k-val { color: var(--ink); }
/* Coherencia: una línea por página, como «Última publicación: Correcta · Comprobaciones: 42 · Avisos: 0» allí. */
.obs-coh { margin-top: 18px; border-top: 1px solid var(--ink); }
.obs-coh li { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 2px 24px; padding: 10px 0; font-size: 14px; color: var(--ink-2);
    border-bottom: 1px solid var(--hair); }
.obs-coh a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.obs-coh b { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.obs-coh .sep { padding: 0 7px; color: rgb(var(--gris-300)); }
/* Cada «etiqueta: cifra», sin partir: en móvil la línea corta entre pares, no entre la etiqueta y su cifra (`.ed-cuenta`). */
.obs-coh-cifras { display: flex; flex-wrap: wrap; align-items: baseline; }
.obs-coh-cifras > span { white-space: nowrap; }
.obs-coh small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
/* En móvil, sin «·»: un separador no debe abrir ni cerrar línea; los pares, separados por el hueco. */
@media (max-width: 639px) {
    .obs-coh li { grid-template-columns: minmax(0, 1fr); }
    .obs-coh-cifras { column-gap: 14px; }
    .obs-coh-cifras .sep { display: none; }
}

/* «Ver los datos» (regla 8): la tabla de lo que se pinta, plegada bajo cada gráfico. */
.obs-datos { margin-top: .75rem; font-size: .8125rem; }
.obs-datos summary { cursor: pointer; width: max-content; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.obs-datos summary:hover { text-decoration-color: var(--ink); }
.obs-datos-tit { margin-top: 1rem; font-weight: 600; color: var(--ink); }
.obs-tabla caption.obs-datos-tit { padding-bottom: .4rem; text-align: left; }
.obs-datos-lista { margin: .5rem 0 0; padding-left: 1.1rem; max-width: 52rem; list-style: disc; color: var(--ink-2); line-height: 1.5; }
.obs-datos-lista li + li { margin-top: .3rem; }
.obs-datos-buscar { display: block; width: 100%; max-width: 22rem; margin-top: .6rem; padding: .35rem .6rem; border: 1px solid var(--hair); font-size: .875rem; }
.obs-datos .obs-tabla-caja { max-height: 28rem; overflow: auto; }
.obs-datos .obs-tabla th { position: sticky; top: 0; background: var(--surface, #fff); }
.obs-tabla th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.obs-tabla th[aria-sort="ascending"] button::after { content: " ▲"; }
.obs-tabla th[aria-sort="descending"] button::after { content: " ▼"; }

/* Rejilla de gráficos pequeños (cada uno con su escala): parque.evolucion. */
.obs-pequenos { display: grid; gap: 1.25rem 2rem; margin-top: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.obs-pequenos h3 { margin: 0; font-size: .9375rem; font-weight: 700; }

/* ===== Versión 2 de las páginas (propuestas del 28-10-2026), adoptada el 30-10-2026 (encargo v3, A1). Estaba en
   static/observatorio-v2.css, que solo cargaban las versiones en prueba. ===== */

/* Cabecera temporal (§3.5): la fecha de los datos y la de publicación, bajo el lead. */
.obs-fechas { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.obs-fechas b { margin-right: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bev); }

/* El ancla de «Hoy», dentro del primer bloque: que no quede bajo la cabecera fija (80 px). */
#hoy { scroll-margin-top: 96px; }

/* Peso y cuota de BEV y PHEV: 2 columnas en móvil y 4 desde 640 px, pegadas a la rejilla de encima. */
.obs-ks-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .obs-ks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.obs-ks + .obs-ks { margin-top: 0; border-top: 0; }

/* La frase que resume el dato: la conclusión del primer bloque y la lectura de la brecha (cambia con la tecnología). */
.obs-conclusion, .obs-lectura { margin-top: 16px; max-width: 760px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.obs-lectura { margin-top: 12px; }

/* Reparto del parque: el gráfico y la tabla, lado a lado en escritorio; en móvil, la tabla debajo. */
.obs-reparto { display: grid; gap: 1.5rem 2.5rem; margin-top: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .obs-reparto { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.obs-reparto .obs-tabla-visible { margin-top: 0; }

/* Barras en una columna estrecha (reparto, pequeños múltiplos, distancia al objetivo): etiqueta y cifra de ancho fijo y
   la pista con el resto; si no, las dos columnas crecen hasta su máximo y la pista se queda sin sitio. */
.obs-estrechas .obs-barras-filas li, .obs-estrechas .obs-barras-eje { grid-template-columns: 9.5rem minmax(0, 1fr) 6.5rem; }
.obs-distancia .obs-barras-filas li, .obs-distancia .obs-barras-eje { grid-template-columns: 15rem minmax(0, 1fr) 8.5rem; }
@media (max-width: 640px) {
    .obs-estrechas .obs-barras-filas li, .obs-estrechas .obs-barras-eje { grid-template-columns: 6.5rem minmax(0, 1fr); }
}
/* Cifras cortas (un %, sin nota): en móvil siguen en la línea de la barra, como en escritorio (reparto del parque de
   turismos de Transición y de vehículos de Parque, encargo del 31-10-2026, §5.5). */
@media (max-width: 640px) {
    .obs-cifra-en-linea .obs-barras-filas li, .obs-cifra-en-linea .obs-barras-eje { grid-template-columns: 6.5rem minmax(0, 1fr) 4.25rem; }
    .obs-cifra-en-linea .obs-barras .cifra { grid-column: auto; text-align: right; }
}

/* Resumen de altas y bajas en móvil (fichas de .obs-plana): las seis cifras de cada tecnología en dos filas de tres, en el
   orden de la cuenta (parque inicial, entradas, salidas · ajuste, saldo, parque final). */
@media (max-width: 767px) {
    .obs-resumen tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
    .obs-resumen tbody th { grid-column: 1 / -1; }
    .obs-resumen tr > * + * { margin-top: 0; }
}

/* Pequeños múltiplos de altas y bajas: 2 × 2 en escritorio y apilados en móvil, cada uno con su escala. */
.obs-multiples { margin-top: 1.75rem; }
.obs-multiples-rejilla { display: grid; gap: 1.75rem 2.5rem; margin-top: .5rem; }
@media (min-width: 1024px) { .obs-multiples-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs-multiples-rejilla h3 { margin-top: 1rem; }

/* Vista «Tablas»: fuera también los títulos y textos que solo acompañan a un gráfico. */
.obs-tablas .obs-multiples, .obs-tablas .obs-panel { display: none; }

/* ---------------------------------------------------------------------------------------------------
   El parque móvil, versión 2 (templates/observatorio/parque.html).
   --------------------------------------------------------------------------------------------------- */

/* Enlace a otra página del Observatorio, al pie de un bloque. */
.obs-enlace { margin-top: 1rem; font-size: 14px; color: var(--ink-2); }
.obs-enlace a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.obs-enlace a:hover { text-decoration-color: var(--ink); }

/* Evolución: la escala elegida y, bajo el nombre de cada tecnología, de cuánto a cuánto ha pasado. En móvil, solo los
   rótulos de 2015, 2020, 2025 y la estimación. */
.obs-escala { margin-top: .75rem; }
.obs-multiplicador { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .obs-columnas-etq span.menor { visibility: hidden; } }

/* Dos gráficos a la vez (entradas y salidas de BEV y PHEV): en paralelo en escritorio, apilados en móvil. */
.obs-dos { display: grid; gap: 1.5rem 2.5rem; margin-top: .5rem; }
@media (min-width: 1024px) { .obs-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.obs-medianas { max-width: 26rem; }

/* Consulta de una provincia (`obsProvincia`): el desplegable y, debajo, sus cifras. */
.obs-provincia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 1rem; font-size: 14px; }
.obs-provincia label { font-weight: 600; color: var(--ink); }
.obs-provincia select { min-width: 14rem; max-width: 100%; padding: 6px 8px; border: 1px solid var(--hair-strong, var(--hair)); background: var(--surface, #fff);
    font: inherit; color: var(--ink); }
.obs-provincia-cifras { min-height: 1.5em; margin-top: 6px; max-width: 760px; font-size: 14px; line-height: 1.5; color: var(--ink); }
/* La provincia elegida, en el mapa: borde en tinta (el SVG la pone encima de las vecinas). */
.obs-mapa-svg path.marcada { stroke: var(--ink); stroke-width: 2; }

/* Nivel y avance: en escritorio, la nube a la izquierda y el ranking a la derecha; en móvil, el ranking primero. */
.obs-avance { display: grid; gap: 1.5rem 2.5rem; margin-top: 1rem; align-items: start; }
@media (min-width: 1024px) {
    .obs-avance { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .obs-avance-ranking { order: 2; }
}
.obs-avance-ranking h3 { margin-top: 0; }
.obs-ranking-avance li { cursor: pointer; }
.obs-ranking-avance li:hover .etq { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.obs-ranking-avance li.marcada { box-shadow: inset 3px 0 0 var(--ink); }
.obs-ranking-avance li.marcada .etq, .obs-ranking-avance li.marcada .cifra { padding-left: 8px; font-weight: 700; color: var(--ink); }
.obs-ranking-avance li.marcada .cifra { padding-left: 0; }
/* La media de España en cada barra (la marca de la leyenda). */
.obs-ranking-avance .ref { position: absolute; top: -.3rem; bottom: -.3rem; width: 2px; margin-left: -1px; background: var(--ink); }

/* Subsección dentro de un bloque (turismos sin distintivo y ZBE, trasladada de Territorio), con su ancla. */
.obs-subseccion { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); scroll-margin-top: 96px; }
.obs-subseccion > h3 { margin-top: 0; }

/* Distintivos: la variación bajo las cifras de cada fila. */
.obs-pesas .cifras small { display: block; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------------------------------------------
   Lo que se compra, versión 2 (templates/observatorio/lo_que_se_compra.html).
   --------------------------------------------------------------------------------------------------- */

/* Ranking de modelos: el nombre de un modelo es más largo que el de una tecnología; la cifra lleva unidades y cuota. */
.obs-ranking-modelos .obs-barras-filas li, .obs-ranking-modelos .obs-barras-eje { grid-template-columns: 14rem minmax(0, 1fr) 9rem; }
@media (max-width: 640px) {
    .obs-ranking-modelos .obs-barras-filas li, .obs-ranking-modelos .obs-barras-eje { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

/* Tabla a la vista corta (los 15 primeros): entera, sin la caja con desplazamiento de las tablas largas. */
.obs-tabla-entera { max-width: 56rem; }
.obs-tabla-entera .obs-tabla-caja { max-height: none; }
/* Precios en móvil: posición, modelo y precio; matriculaciones y cuota ya están en las barras de encima. */
@media (max-width: 640px) {
    .obs-precios .obs-tabla th:nth-child(3), .obs-precios .obs-tabla td:nth-child(3),
    .obs-precios .obs-tabla th:nth-child(4), .obs-precios .obs-tabla td:nth-child(4) { display: none; }
    .obs-precios .obs-tabla td { white-space: normal; }
}

/* Carrocería y país, uno tras otro: el gráfico, la tabla de los últimos 12 meses y la cobertura. */
.obs-dimension { margin-top: 1.5rem; }
.obs-dimension + .obs-dimension { padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.obs-situacion { max-width: 40rem; }
.obs-cobertura { margin-top: .5rem; max-width: 760px; font-size: 13px; color: var(--ink-2); }
.obs-excluidos { color: var(--muted); }

/* ---------------------------------------------------------------------------------------------------
   Coste energético por 100 km, versión 2 (templates/observatorio/coste.html).
   --------------------------------------------------------------------------------------------------- */

/* Escenarios PHEV (barras con `escenarios`): una línea fina entre los dos modos; círculo, eléctrico; cuadrado, combustible. */
.obs-barras .tramo { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--c); }
.obs-barras .punto.cuadrado { border-radius: 0; }

/* Alcance del cálculo y notas de lectura del coste actual, a la vista y juntas. */
.obs-alcance { margin: 1rem 0 0; padding: 10px 14px; max-width: 52rem; list-style: none; border-left: 3px solid var(--ink); font-size: 13.5px;
    line-height: 1.5; color: var(--ink-2); background: var(--surface-2, transparent); }
.obs-alcance li + li { margin-top: 4px; }
.obs-alcance b { color: var(--ink); }
#consumo { scroll-margin-top: 96px; }

/* Provincias: la muestra del rayado de «sin dato suficiente» (el del mapa) y las tablas de extremos. */
.obs-sin-dato { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.obs-sin-dato-muestra { display: inline-block; width: 18px; height: 12px; border: 1px solid var(--hair);
    background: repeating-linear-gradient(135deg, var(--muted) 0 2px, #fff 2px 5px); }
.obs-extremos-tit { margin-top: 1.5rem; }
.obs-extremos { margin-top: 8px; }
@media (max-width: 767px) {
    .obs-extremos tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
    .obs-extremos tbody th { grid-column: 1 / -1; }
    .obs-extremos tr > * + * { margin-top: 0; }
    .obs-extremos td[data-label]::before { white-space: normal; }
}

/* ---------------------------------------------------------------------------------------------------
   Adopción y territorio, versión 2 (templates/observatorio/territorio.html).
   --------------------------------------------------------------------------------------------------- */

/* Tamaño municipal: por tramo, su nombre y dos filas (BEV y PHEV) en la misma escala; en cada barra, la media de España de
   su tecnología, discontinua y de su color. */
.obs-tramos { margin-top: 1rem; font-size: .875rem; }
.obs-tramos-lista { margin: .5rem 0 0; padding: 0; list-style: none; }
.obs-tramos-lista > li { padding: .5rem 0 .6rem; border-bottom: 1px solid var(--hair); }
.obs-tramo-tit { font-weight: 600; color: var(--ink); }
.obs-tramo-tit small { margin-left: 8px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.obs-tramo-fila, .obs-tramo-eje { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 5.5rem; gap: .75rem; align-items: center; }
.obs-tramo-fila { margin-top: 4px; }
.obs-tramo-fila .tec { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); }
.obs-tramos .pista { position: relative; height: 1.1rem; }
.obs-tramos .barra { position: absolute; left: 0; top: .15rem; bottom: .15rem; background: var(--c); }
.obs-tramos .ref { position: absolute; top: -.2rem; bottom: -.2rem; border-left: 2px dashed var(--c); }
.obs-tramos .cifra { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.obs-tramo-eje { padding-top: .3rem; font-size: .75rem; color: var(--muted); }
.obs-tramo-eje .pista { height: 1rem; }
.obs-tramo-eje .pista span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.obs-tramo-eje .pista span:first-child { transform: none; }
.obs-tramo-eje .pista span:last-child { transform: translateX(-100%); }
@media (max-width: 640px) {
    .obs-tramo-fila, .obs-tramo-eje { grid-template-columns: 3rem minmax(0, 1fr) 4.25rem; gap: .5rem; }
    .obs-tramo-eje .pista span:nth-child(even) { display: none; }
}

/* El ancla del bloque trasladado, al pie de la página. */
.obs-trasladado { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); scroll-margin-top: 96px; }

/* ---------------------------------------------------------------------------------------------------
   La recarga, versión 2 (templates/observatorio/recarga.html).
   --------------------------------------------------------------------------------------------------- */

/* Barras al 100 % con la marca de España (`a.ref` de la macro `apiladas`): a la altura de su % de rápida y ultrarrápida. */
.obs-apiladas-barra { position: relative; }
/* Dos muescas, arriba y abajo, con el centro libre: atravesando la barra tapaba la cifra de los tramos. */
.obs-apiladas-ref { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px;
    background: linear-gradient(to bottom, var(--ink) 0 9px, transparent 9px calc(100% - 9px), var(--ink) calc(100% - 9px)); }
/* El resto de provincias, plegado bajo las primeras. */
.obs-resto { margin-top: 1rem; font-size: .8125rem; }
.obs-resto summary { cursor: pointer; width: max-content; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.obs-tablas .obs-resto { display: none; }

/* Tabla a la vista compacta (municipios sin carga rápida): filas apretadas y alternas; en móvil, sin la fecha del parque
   (es la misma en todas: está en la cabecera del bloque). */
.obs-tabla-compacta .obs-tabla td { padding-top: .25rem; padding-bottom: .25rem; }
.obs-tabla-compacta .obs-tabla tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--hair) 35%, transparent); }
.obs-tabla-compacta .obs-datos-buscar { margin-top: 0; }
@media (max-width: 640px) {
    /* Sin provincia ni fecha: así caben población, puntos y BEV, que la propuesta pide no ocultar. */
    .obs-tabla-compacta .obs-tabla th:nth-child(2), .obs-tabla-compacta .obs-tabla td:nth-child(2),
    .obs-tabla-compacta .obs-tabla th:nth-child(6), .obs-tabla-compacta .obs-tabla td:nth-child(6) { display: none; }
    .obs-tabla-compacta .obs-tabla { font-size: .8125rem; }
    .obs-tabla-compacta .obs-tabla td, .obs-tabla-compacta .obs-tabla th { white-space: normal; padding-left: .3rem; padding-right: .3rem; }
}

/* Calidad de la correspondencia, al pie de la página. */
.obs-calidad-lista { margin: .75rem 0 0; padding-left: 1.1rem; max-width: 52rem; list-style: disc; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.obs-calidad-lista li + li { margin-top: .35rem; }
.obs-calidad-lista b { color: var(--ink); }

/* ---------------------------------------------------------------------------------------------------
   Mercado y calendario de medidas, versión 2 (templates/observatorio/medidas_mercado.html).
   --------------------------------------------------------------------------------------------------- */

/* Datos de ejemplo (macro `ejemplo`): inventados hasta que ev_observatory publique los verificados. Recuadro discontinuo
   con la marca en rojo, que no se confunda con un aviso de lectura (`.obs-aviso`): no son un cálculo, son de relleno. */
.obs-ejemplo { margin-top: 12px; max-width: 760px; padding: 8px 12px; border: 1px dashed var(--k5); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.obs-ejemplo b { margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k5); }
.obs-sin-verificar { color: var(--muted); font-style: italic; }

/* Interruptores de series (macro `grafico`, `interruptores`): hacen de leyenda; apagada, la muestra hueca y el texto gris. */
.obs-series { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .75rem; font-size: 13px; }
.obs-series button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--muted); background: none; cursor: pointer;
    border-bottom: 1px solid transparent; }
.obs-series button[aria-pressed="true"] { color: var(--ink); }
.obs-series button:hover, .obs-series button:focus-visible { border-bottom-color: var(--ink); }
.obs-series-m { flex: none; width: 16px; height: 4px; background: var(--c); }
.obs-series-trama { background: repeating-linear-gradient(to right, var(--c) 0 5px, transparent 5px 8px); }
.obs-series-punteada { background: repeating-linear-gradient(to right, var(--c) 0 2px, transparent 2px 4px); }
.obs-series button[aria-pressed="false"] .obs-series-m { background: none; box-shadow: inset 0 0 0 1px var(--c); }
.obs-mercado .obs-lectura { margin-top: .5rem; font-size: 14px; color: var(--ink-2); }

/* Panel de contexto: bajo el gráfico, separado por un filete. */
.obs-contexto { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.obs-contexto > h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.obs-contexto-tit { margin-top: 1rem; font-size: 14px; font-weight: 700; color: var(--ink); }
.obs-normas { margin: .5rem 0 0; padding-left: 1.1rem; max-width: 52rem; list-style: disc; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.obs-normas li + li { margin-top: .3rem; }
.obs-normas a, .obs-cal-detalle a, .obs-ayudas-contenido a, .obs-ayudas-tramos a { color: var(--ink); text-decoration: underline;
    text-decoration-color: var(--hair-strong, var(--hair)); text-underline-offset: 3px; }

/* Calendario de ayudas: el área de fechas, la misma del gráfico de matriculaciones (--eje-izq y --eje-ancho, que pone
   obsVariantes con data-eje); una fila por programa, una barra por tramo. */
.obs-cal-eje { position: relative; margin-top: 1rem; margin-left: var(--eje-izq, 72px); width: var(--eje-ancho, calc(100% - 90px)); }
.obs-cal-fila { position: relative; height: 40px; border-bottom: 1px dashed var(--hair); }
.obs-cal-prog { position: absolute; top: 2px; left: var(--x); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.obs-cal-prog.derecha { left: auto; right: 0; }
.obs-cal-tramo { position: absolute; top: 20px; left: var(--x); width: var(--w); height: 14px; padding: 0; border: 0; cursor: pointer;
    background: var(--c); box-shadow: inset -2px 0 0 var(--surface, #fff); }
/* Retroactivo: rayado hasta la publicación en el BOE (--r, en % de la barra), lleno después. */
.obs-cal-tramo.retro { background: linear-gradient(to right, transparent var(--r), var(--c) var(--r)),
    repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 5px); }
.obs-cal-tramo.sigue::after { content: ''; position: absolute; top: -3px; right: -8px; border-style: solid; border-width: 10px 0 10px 8px;
    border-color: transparent transparent transparent var(--c); }
.obs-cal-tramo.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.obs-cal-boe { position: absolute; top: 15px; left: var(--x); width: 2px; height: 24px; margin-left: -1px; background: var(--ink); opacity: .45; pointer-events: none; }
.obs-cal-boe.on { opacity: 1; }
.obs-cal-anios { position: relative; height: 22px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.obs-cal-anios span { position: absolute; top: 4px; left: var(--x); transform: translateX(-50%); }
@media (max-width: 640px) {
    .obs-cal-anios span:nth-child(even) { display: none; }
}
.obs-cal-leyenda { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .75rem 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.obs-cal-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.obs-cal-m { display: inline-block; width: 18px; height: 10px; background: var(--n7); }
.obs-cal-m.retro { background: repeating-linear-gradient(135deg, var(--n7) 0 2px, transparent 2px 5px); }
.obs-cal-m.boe { width: 2px; height: 14px; background: var(--ink); }
.obs-cal-m.sigue { width: 0; height: 0; background: none; border-style: solid; border-width: 6px 0 6px 7px; border-color: transparent transparent transparent var(--n7); }
.obs-cal-lista { margin-top: 1rem; }
.obs-cal-detalle { margin-top: .75rem; max-width: 52rem; padding: 12px 14px; border-left: 3px solid var(--ink); font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.obs-cal-detalle h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.obs-cal-detalle dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: .5rem 0 0; }
.obs-cal-detalle dl > div { display: contents; }
.obs-cal-detalle dt { color: var(--muted); }
.obs-cal-detalle dd { margin: 0; color: var(--ink); }
.obs-cal-detalle p { margin-top: .5rem; }
@media (max-width: 640px) {
    .obs-cal-detalle dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .obs-cal-detalle dd + div dt, .obs-cal-detalle dl > div + div dt { margin-top: 6px; }
}

/* Contenido de cada programa: campo y tres columnas de texto; en móvil, una ficha por campo con los tres programas. */
.obs-ayudas-contenido th[scope="row"] { width: 11rem; }
.obs-ayudas-contenido th small { display: block; font-weight: 400; color: var(--muted); }
.obs-ayudas-contenido td { font-size: 13.5px; }
/* El artículo de cada dato y, plegada, su cita literal del BOE (con los cortes «[…]» en líneas propias). */
.obs-cita { margin-top: .4rem; font-size: 12.5px; color: var(--muted); }
.obs-cita summary { cursor: pointer; }
.obs-cita blockquote { margin: .35rem 0 0; padding-left: .6rem; border-left: 2px solid var(--hair); white-space: pre-line; color: var(--ink-2); }
.obs-ayudas-tramos td { font-size: 13.5px; }
@media (max-width: 640px) {
    .obs-ayudas-contenido th[scope="row"] { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------------
   Emisiones, versión 2 (templates/observatorio/emisiones.html).
   --------------------------------------------------------------------------------------------------- */

/* Tercer escenario de las barras (el ponderado de un PHEV): un rombo entre el círculo y el cuadrado. */
.obs-barras .punto.rombo { border-radius: 0; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; transform: rotate(45deg); }
/* Gasolina y diésel, a la vez: lado a lado en pantalla ancha, uno bajo otro en móvil. */
.obs-paneles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 1000px) {
    .obs-paneles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.obs-panel > h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
/* Tipos de vehículo del último año: la fila del total, con filete encima. */
.obs-tipos { max-width: 52rem; }
.obs-tipos .obs-tipos-total th, .obs-tipos .obs-tipos-total td { border-top: 1px solid var(--ink); font-weight: 700; color: var(--ink); }
@media (max-width: 640px) {
    /* Fichas de los tipos de vehículo: el nombre arriba y las cuatro cifras en dos columnas. */
    .obs-tipos tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
    .obs-tipos tr > th { grid-column: 1 / -1; }
    .obs-plana.obs-tipos tr > * + * { margin-top: 0; }
    .obs-tipos .obs-tipos-total th, .obs-tipos .obs-tipos-total td { border-top: 0; }
    .obs-tipos tbody tr.obs-tipos-total { border-top: 1px solid var(--ink); }
}

/* ---------------------------------------------------------------------------------------------------
   Calidad de los datos (templates/observatorio/calidad_datos.html): la versión 3 usa los estados, los cortes y la
   lista; las fichas, acordeones, indicadores, limitaciones e historial son de la versión 2 y no se pintan desde el
   30-10-2026 (su código, comentado en la vista).
   --------------------------------------------------------------------------------------------------- */

/* Cuatro cifras: dos columnas en tableta, cuatro en escritorio. */
@media (min-width: 640px) { .obs-ks-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .obs-ks-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.obs-ks + .obs-ks { margin-top: -1px; }

/* Definiciones de los estados: marca y nombre a la izquierda, definición a la derecha; en móvil, una debajo de otra. */
.obs-estados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; margin: .75rem 0 0; max-width: 52rem; font-size: 14px; }
.obs-estados > div { display: contents; }
.obs-estados dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) {
    .obs-estados { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .obs-estados dd { margin-bottom: 8px; }
}
/* El último mes cerrado, por delante del avance diario. */
.obs-cortes tr.destacado th, .obs-cortes tr.destacado td { font-weight: 700; color: var(--ink); }

/* Versión 3 (30-10-2026): las limitaciones de las series, una por línea entre filetes. */
.obs-lista { margin: 18px 0 0; padding: 0; max-width: 52rem; list-style: none; border-top: 1px solid var(--ink); }
.obs-lista li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* Ficha de incidencia y de fuente: registro con sus campos (dt/dd), filete a la izquierda. */
.obs-ficha, .obs-fuente { margin-top: 1rem; max-width: 56rem; padding: 12px 14px; border-left: 3px solid var(--k2); scroll-margin-top: 96px;
    font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.obs-fuente { border-left-color: var(--hair); }
.obs-ficha header, .obs-fuente header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.obs-ficha h4, .obs-fuente h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.obs-ficha h4 a { color: inherit; text-decoration: underline; text-decoration-color: var(--hair-strong, var(--hair)); text-underline-offset: 3px; }
.obs-ficha-estado { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--k2); }
.obs-ficha dl, .obs-fuente dl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px 16px; margin: .5rem 0 0; }
.obs-ficha dl > div, .obs-fuente dl > div { display: contents; }
.obs-ficha dt, .obs-fuente dt { color: var(--muted); }
.obs-ficha dd, .obs-fuente dd { margin: 0; color: var(--ink); }
.obs-ficha a, .obs-fuente a, .obs-limitaciones a, .obs-historial a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong, var(--hair)); text-underline-offset: 3px; }
.obs-fuente > p { margin-top: .35rem; }
.obs-fuente-motivo { color: var(--ink); }
/* Páginas e indicadores de una fuente: una línea por página. */
.obs-indicadores { margin: 0; padding: 0; list-style: none; }
.obs-indicadores li + li { margin-top: 3px; }
.obs-indicadores li > a:first-child { font-weight: 700; }
@media (max-width: 640px) {
    .obs-ficha dl, .obs-fuente dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .obs-ficha dd, .obs-fuente dd { margin-bottom: 6px; }
}

/* Fuentes por organismo, en acordeones (details nativos: teclado y tacto). */
.obs-acordeon { margin-top: .75rem; border-top: 1px solid var(--hair); }
.obs-acordeon:last-of-type { border-bottom: 1px solid var(--hair); }
.obs-acordeon > summary { padding: 10px 0; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.obs-acordeon > summary b { color: var(--ink); }
.obs-acordeon[open] > summary { border-bottom: 1px dashed var(--hair); }
.obs-acordeon .obs-fuente { margin-bottom: .75rem; }

.obs-metodo { margin-top: .75rem; font-size: 13.5px; }
.obs-metodo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair-strong, var(--hair)); text-underline-offset: 3px; }
.obs-reutilizacion { margin-top: 2rem; }
.obs-reutilizacion a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }