/* /parque-movil/ — layout y piezas propias (templates/parque_movil/).

   Molde del silo /zonas-bajas-emisiones/ (static/zbe.css), copiado con prefijo pm- como el Observatorio copió el de
   /marcas: cabecera en rejilla bajo filete de tinta, tira de cifras entre filetes, barra de índice fija y numerada,
   apartados bajo filete de tinta y pie de fuentes. Los gráficos, en parque-movil-graficos.css (los que siguen con las
   macros del Observatorio, con observatorio.css, que se carga antes). Sin tarjetas con sombra, pastillas ni azul en la navegación; colores,
   solo tokens de Pizarra (:root de style.css). El verde, solo para el eléctrico. */

/* Sistema de color del silo (encargo del 02-11-2026): cada color significa lo mismo en toda la página, y el silo ya
   no usa los --obs-* del Observatorio. El verde azulado, solo para lo eléctrico; el rayado, solo para la estimación.
   En :root y no en .pm porque el gráfico de la 03 (ApexCharts, observatorio.js) lee los colores de la raíz; este CSS
   solo se carga en /parque-movil/. */
:root {
    --pm-bev: var(--bev);            /* eléctrico (BEV): siempre el acento */
    --pm-phev: var(--t3);            /* híbrido enchufable (PHEV) */
    --pm-hev: var(--t4);             /* híbrido (HEV) */
    --pm-bev-claro: #9fc4bd;         /* el trazo entre el parque y lo que entra (10) */
    --pm-phev-claro: var(--t5);
    --pm-tinta: var(--ink);          /* totales, España, entradas de vehículos nuevos */
    --pm-sec: #6b7680;               /* secundario: usados importados, «Otros» en tecnología */
    --pm-medio: #9aa3a9;             /* por debajo de la media (05), el parque (10), bordes discontinuos */
    --pm-resto: #c3cacf;             /* combustión y resto neutro */
    --pm-claro: #eef0f2;             /* sin motor, sin dato */
    --pm-desguace: var(--k2);        /* lo que sale del parque, en tres naranjas */
    --pm-export: #e8a874;
    --pm-otras-salidas: #f3d6bd;
    --pm-salida-txt: #b85d16;        /* cifras de salida en texto: el naranja con contraste suficiente */
    /* Colores reales de las pegatinas de la DGT: un objeto real conserva su color (DESIGN.md §3.2, regla 5). ECO es
       azul y verde, partido en diagonal. */
    --dgt-azul: #0b6d9a; --dgt-verde: #6db33f; --dgt-amarillo: #ffe100;
    --pm-dgt-0: var(--dgt-azul);
    --pm-dgt-eco: linear-gradient(135deg, var(--dgt-azul) 0 50%, var(--dgt-verde) 50% 100%);
    --pm-dgt-c: var(--dgt-verde);
    --pm-dgt-b: var(--dgt-amarillo);
    --pm-dgt-sin: var(--hair);
    /* Rayado de la estimación (04): tinta sobre blanco. */
    --pm-rayado: repeating-linear-gradient(135deg, var(--ink) 0 2px, #fff 2px 6px);
}
.pm {
    --tinta: var(--ink); --gris: var(--ink-2); --gris2: var(--muted); --linea: var(--hair); --linea2: rgb(var(--gris-100));
    --suave: var(--ground); --papel: #fff; --verde: var(--bev);
    --cabecera: 80px;   /* cabecera fija de base.html (h-20) */
    --barra: 50px;      /* barra fija del índice */
}
.pm :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
.pm :where(ol, ul) { padding: 0; list-style: none; }
.pm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Migas y buscador en la misma línea; en móvil, el buscador debajo y a todo el ancho. */
.pm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 16px; }
.pm-mg { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--gris2); }
.pm-mg a { color: var(--gris); text-decoration: none; }
.pm-mg a:hover { text-decoration: underline; }
/* La raíz, la portada del parque móvil, se ve como enlace: tinta y subrayado fino, como los de .pm-enlaces. */
.pm-mg a:first-child { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.pm-mg span[aria-current] { color: var(--tinta); font-weight: 600; }

/* Cabecera: a la izquierda, antetítulo verde y H1; a la derecha, entradilla y línea de estado. */
.pm-hd { display: grid; gap: 16px 48px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--tinta); }
.pm-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.pm-hd h1 { margin-top: 8px; font-size: 36px; line-height: 1.05; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; }
.pm-lead { max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--gris); }
.pm-lead p + p { margin-top: 8px; }
.pm-meta { display: flex; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: rgb(var(--gris-500)); }
.pm-meta > span + span::before { content: "·"; margin: 0 8px; color: rgb(var(--gris-400)); }
.pm-meta a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.pm-meta a:hover { text-decoration-color: var(--tinta); }
.pm-meta-doc { margin-top: 4px; }
@media (min-width: 900px) { .pm-hd { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
@media (min-width: 1024px) { .pm-hd { margin-top: 28px; } .pm-hd h1 { font-size: 52px; } }

/* Tira de cifras bajo la cabecera, separadas por filetes (las de ZBE y /marcas); la primera, en verde solo si no es
   un dato oficial (en los municipios de flotas, en tinta). */
.pm-datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 28px; border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea); }
.pm-datos > * { padding: 14px 14px 14px 0; min-width: 0; }
.pm-datos > *:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--linea); }
.pm-datos > *:nth-child(n+3) { border-top: 1px solid var(--linea); }
.pm-cifra-ante { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris2); }
.pm-cifra b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--tinta); }
.pm-cifra-txt { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--gris); }
.pm-cifra--acento b { color: var(--verde); }
/* El rango de la estimación, legible y no como nota al pie (encargo del 02-11-2026). */
.pm-cifra--acento .pm-cifra-txt { font-size: 15px; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* En móvil, la cifra con su unidad no cabe en media columna: va a todo el ancho y las demás, debajo, una por fila. */
@media (max-width: 767px) {
    .pm-datos > .pm-cifra--acento, .pm-datos > .pm-cifra--acento ~ * { grid-column: 1 / -1; }
    .pm-datos > .pm-cifra--acento ~ * { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
}
@media (min-width: 768px) {
    .pm-datos { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
    .pm-datos > *, .pm-datos > *:nth-child(even), .pm-datos > *:nth-child(n+3) { padding: 18px 20px; border-left: 1px solid var(--linea); border-top: 0; }
    .pm-datos > *:first-child { padding-left: 0; border-left: 0; }
    .pm-cifra b { font-size: 34px; }
}
.pm-datos--2 { --n: 2; }
.pm-datos--3 { --n: 3; }
.pm-datos--4 { --n: 4; }

/* Notas: las de anomalía del territorio y las de método, junto a lo que afectan (la .zb-nota de ZBE). */
.pm-nota { margin: 18px 0 0; max-width: 52rem; padding: 12px 16px; border-left: 2px solid var(--tinta); background: var(--suave);
    font-size: 15px; line-height: 1.6; color: var(--gris); }
.pm-nota b { color: var(--tinta); font-weight: 600; }
.pm-nota a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.pm-nota + .pm-nota { margin-top: 10px; }

/* Barra del índice, fija bajo la cabecera del sitio; parque-movil.js marca el apartado activo con aria-current. */
.pm-barra { position: sticky; top: var(--cabecera); z-index: 20; margin-top: 32px; border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea); background: var(--papel); }
.pm-barra ol { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pm-barra ol::-webkit-scrollbar { display: none; }
.pm-barra li { flex: none; }
.pm-barra a { display: flex; align-items: baseline; gap: 6px; margin-bottom: -1px; padding: 14px 10px 12px; border-bottom: 2px solid transparent;
    white-space: nowrap; font-size: 13.5px; font-weight: 600; color: rgb(var(--gris-600)); text-decoration: none; transition: color .12s, border-color .12s; }
.pm-barra li:first-child a { padding-left: 0; }
.pm-barra i { font-style: normal; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--verde); }
.pm-barra a:hover { color: var(--tinta); }
.pm-barra a[aria-current] { border-bottom-color: var(--tinta); color: var(--tinta); }
/* Vuelta a la portada en las subpáginas (pagina.html): fija a la izquierda, tras un filete; el índice desborda en su
   propia caja. */
.pm-barra--raiz { display: flex; }
.pm-barra--raiz > nav { flex: 1 1 auto; min-width: 0; }
.pm-barra .pm-raiz { flex: none; margin-right: 14px; padding: 14px 14px 12px 0; border-right: 1px solid var(--linea); color: var(--tinta); }

/* Apartados: filete de tinta, número gris y título; el sello con la fecha del dato, arriba a la derecha. A todo el
   ancho: lo piden los gráficos. Las páginas de documentación usan .pm-sec con su propia cabecera (.pm-sec-hd). */
.pm-sec { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--tinta); scroll-margin-top: calc(var(--cabecera) + var(--barra) + 16px); }
.pm-cuerpo > .pm-sec:first-child { margin-top: 40px; }
.pm-sec-hd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.pm-sec-hd > div { min-width: 0; }
.pm-h2n { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums;
    color: rgb(var(--gris-400)); }
.pm-sec h2 { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.pm-sello { font-size: 12.5px; line-height: 1.5; color: var(--gris); font-variant-numeric: tabular-nums; }
.pm-sello b { color: var(--tinta); font-weight: 600; }
.pm-sello span + span::before { content: "·"; margin: 0 7px; color: rgb(var(--gris-400)); }
.pm-sec h3 { margin-top: 28px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
@media (min-width: 900px) { .pm-sec h2 { font-size: 28px; } }

/* Apartados de datos (encargo de espaciado del 02-11-2026). Cabecera (.pm-cab, macro sec_hd): en escritorio, en dos
   columnas como la sección 01 de /zonas-bajas-emisiones/ (número y título a la izquierda; el sello arriba a la
   derecha y, debajo, el subtítulo); en móvil, todo seguido. Debajo, la cifra destacada a todo el ancho. */
.pm-sec:has(> .pm-cab) { margin-top: 80px; }
.pm-cuerpo > .pm-sec:has(> .pm-cab):first-child { margin-top: 40px; }
.pm-cab { display: grid; grid-template-columns: minmax(0, 1fr); }
.pm-cab > * { min-width: 0; }
.pm-sec .pm-cab h2 { font-size: 28px; }
.pm-cab .pm-sello { margin-top: 6px; font-size: 12px; }
.pm-cab-sub { margin-top: 8px; max-width: 46rem; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pm-cab-sub p + p { margin-top: 8px; }
@media (min-width: 900px) {
    .pm-cab { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "num sello" "tit sub"; column-gap: 48px; align-items: baseline; }
    .pm-cab .pm-h2n { grid-area: num; }
    .pm-cab .pm-sello { grid-area: sello; justify-self: end; margin-top: 0; text-align: right; }
    .pm-cab h2 { grid-area: tit; }
    .pm-cab .pm-cab-sub { grid-area: sub; margin-top: 0; }
}
.pm-sec-cifra { font-size: 15px; line-height: 1.5; color: var(--tinta); }
.pm-sec-cifra b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Una sola regla de espacios para todos los apartados, niveles y tipos: subtítulo → cifra, 16 px; cifra (o subtítulo)
   → primer gráfico, leyenda o pestañas, 24; dos gráficos del mismo apartado (y la tabla de hijos), 48; notas,
   enlaces y desplegables, 24 de lo que tienen encima. Dentro de un gráfico (.pm-fig), su rótulo (h3) y el gráfico,
   12; las notas de cómo leerlo, debajo. */
.pm-sec > .pm-cab ~ * { margin-top: 48px; }
.pm-sec > .pm-cab + * { margin-top: 24px; }
.pm-sec > .pm-cab ~ .pm-sec-cifra { margin-top: 16px; }
.pm-sec > .pm-sec-cifra + * { margin-top: 24px; }
.pm-sec > .pm-cab ~ :is(.pm-nota, .pm-enlaces, .obs-datos, .obs-notas) { margin-top: 24px; }
.pm-sec > .pm-cab ~ .pm-nota + .pm-nota { margin-top: 10px; }
.pm-fig { margin: 0; min-width: 0; }
.pm-fig > :first-child { margin-top: 0; }
.pm-sec .pm-fig > h3 { margin-top: 0; font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.pm-fig > h3 + * { margin-top: 12px; }
.pm-fig-nota { margin-top: 12px; max-width: 52rem; font-size: 12px; line-height: 1.5; color: var(--gris2); }
.pm-fig-nota + .pm-fig-nota { margin-top: 4px; }
/* Pestañas (10): sin margen propio (lo pone la regla de arriba) y el gráfico, a 16 px de ellas. */
.pm-sec .obs-sel { margin-top: 0; font-size: 15px; }
.pm-sec .obs-sel ~ div > .pm-fig { margin-top: 16px; }

/* 05 en España: el mapa a la izquierda (54 %) y las barras de diferencia con la media a la derecha, con casi la misma
   altura; en pantallas más estrechas, uno debajo de otro. */
.pm-mapa.obs-mapa { margin: 0; max-width: 46rem; }
.pm-terr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1200px) {
    .pm-terr.con-mapa { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); align-items: start; }
    .pm-terr.con-mapa .pm-mapa.obs-mapa { max-width: none; }
}

/* Dos gráficos lado a lado desde 900 px (06: reparto y variación; 07: tramos y edad por tipo). */
.pm-dos { display: grid; gap: 8px 48px; }
@media (min-width: 900px) { .pm-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pm-dos > * { min-width: 0; }

/* Tabla de hijos (05): enlaces rastreables y, con más de 20 filas, las de abajo plegadas con CSS (sin JS), como
   «Mostrar los N restantes» de /matriculaciones/ (ranking_bars, `visibles`). Todas van en el HTML. */
.pm-hijos .obs-tabla td:first-child { white-space: normal; }
.pm-hijos .obs-tabla a { font-weight: 600; }
.pm-hijos .pm-resto td { color: var(--gris); font-style: italic; }
.pm-hijos .pm-resto td small { display: block; font-style: normal; font-size: 11.5px; color: var(--gris2); }
/* La fila del resto, a la que lleva el buscador (#resto) a los municipios sin página: por debajo de las barras fijas y
   marcada al llegar. */
.pm-hijos .pm-resto { scroll-margin-top: calc(var(--cabecera) + var(--barra) + 16px); }
.pm-hijos .pm-resto:target td { background: var(--suave); }
.pm-chk { position: absolute; opacity: 0; pointer-events: none; }
.pm-oculta { display: none; }
.pm-chk:checked ~ .obs-tabla-caja .pm-oculta { display: table-row; }
.pm-mas { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--tinta); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.pm-mas:hover { text-decoration-color: var(--tinta); }
.pm-chk:focus-visible + .obs-tabla-caja + .pm-mas, .pm-chk:focus-visible ~ .pm-mas { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pm-mas .pm-menos, .pm-chk:checked ~ .pm-mas .pm-ver { display: none; }
.pm-chk:checked ~ .pm-mas .pm-menos { display: inline; }
@media (max-width: 639px) { .pm-hijos .pm-ancha { display: none; } }

/* Pegatina DGT en miniatura (la .zb-pg de ZBE), bajo cada barra de la 09; ECO, partida en diagonal. */
.pm-pg { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
    font-size: 9px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; font-style: normal; }
.pm-pg--0 { background: var(--pm-dgt-0); }
.pm-pg--eco { background: var(--pm-dgt-eco); font-size: 7px; letter-spacing: 0; }
.pm-pg--c { background: var(--pm-dgt-c); }
.pm-pg--b { background: var(--pm-dgt-b); color: var(--ink); }
.pm-pg--sin { background: var(--pm-dgt-sin); border: 1.5px dashed var(--pm-medio); }

/* Línea de las tres páginas iguales (Ceuta y Melilla) y de las comunidades de una provincia; con el mismo aspecto, los
   enlaces entre las páginas de todos los tipos y las de cada tipo (bajo la cabecera y en el 01). */
.pm-iguales, .pm-enlaces { margin-top: 18px; max-width: 52rem; font-size: 15px; line-height: 1.6; color: var(--gris); }
/* Los enlaces a las páginas de cada tipo, a todo el ancho (encargo de espaciado del 02-11-2026). */
.pm-enlaces { max-width: none; }
.pm-iguales a, .pm-enlaces a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }

/* Pie de fuentes (el de ZBE, .zb-fin): una línea por fuente y la atribución; en escritorio, la lista a la izquierda y
   la nota a la derecha. */
.pm-fuentes { margin-top: 80px; padding-top: 16px; border-top: 1px solid var(--tinta); }
.pm-fuentes h2 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.pm-fuentes ul { margin-top: 10px; max-width: 56em; padding-left: 1.1rem; list-style: disc; font-size: 12px; line-height: 1.55; color: var(--gris); }
.pm-fuentes li + li { margin-top: 3px; }
.pm-fuentes p { margin-top: 12px; max-width: 56em; font-size: 12px; line-height: 1.55; color: var(--gris2); }
.pm-fuentes a { color: var(--tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
@media (min-width: 900px) {
    .pm-fuentes-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
    .pm-fuentes-dos > p { margin-top: 10px; }
}

/* Página «no disponible» (503). */
.pm-nd { margin: 32px 0 80px; max-width: 40rem; font-size: 16px; line-height: 1.6; color: var(--gris); }