/* Portada (/) — bloques de Matriculaciones, Parque móvil y ZBE (templates/page_home/_matriculaciones.html,
   _parque_movil.html y _zbe.html, encargos del 31-10-2026 y del 02-11-2026). El molde de tarjeta es el del resumen del
   Observatorio (static/portada-observatorio.css, clases pobs-), para que los cuatro bloques se lean como una serie; aquí
   solo lo propio: los gráficos que pinta el servidor, la línea de datos de la cabecera, «Ver datos del gráfico» y los
   buscadores. Colores, solo tokens de Pizarra (:root de style.css), salvo los de las pegatinas de la DGT. */

.pd-linea { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--pobs-soft); }

/* Muestras de color de las cifras: son la leyenda del gráfico. */
.pd-m-bev, .pd-m-particular { background: var(--bev); }
.pd-m-empresa { background: var(--ink); }
/* La variación, en pequeño debajo de la cifra. Va en un hueco que se reserva en toda la fila (`.pd-g3-nota`), así las
   cifras de las tres columnas siguen en la misma línea. */
.pd-g3-nota > div { padding-bottom: 25px; }
.pd-g3-nota dd { position: relative; }
.pd-nota { position: absolute; left: 0; right: 0; top: 100%; margin-top: 1px; font-size: 11.5px; font-weight: 600; line-height: 14px;
    color: var(--pobs-soft); }
/* En la fila deslizable las columnas son estrechas: la referencia («vs. 29 oct.») baja a su propia línea. */
@media (max-width: 1023px) {
    .pd-g3-nota > div { padding-bottom: 38px; }
    .pd-ref { display: block; }
}

/* Sin línea de fechas: el hueco se guarda igual, así las cifras de las tres tarjetas quedan a la misma altura. */
.pd-sin-meta { min-height: 2.9em; margin-top: 4px; font-size: 12.5px; }

/* ── Columnas (cuota mensual, particular y empresa, el dato del día) ──────────────────────── */
.pd-col { position: absolute; left: 12px; right: 12px; top: 38px; bottom: 30px; display: flex; align-items: flex-end; gap: 3px; }
.pd-col > i { flex: 1 1 0; min-width: 0; background: var(--bev); border-radius: 1.5px 1.5px 0 0; }
.pd-col > i.pd-curso, .pd-col > i.pd-claro { background: var(--t4); }
.pd-x { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex; justify-content: space-between; height: 16px;
    font-size: 11px; font-weight: 600; line-height: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Cuota: 36 meses y, debajo, la barra del reparto del año por tecnología. */
.pd-col-mix { bottom: 64px; gap: 2px; }
.pd-x-mix { bottom: 44px; }
.pd-mix { position: absolute; left: 12px; right: 12px; bottom: 8px; }
.pd-mix-barra { display: flex; gap: 2px; height: 10px; background: var(--surface); }
.pd-mix-barra i { flex: 0 1 0; min-width: 2px; }
.pd-mix-ley { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; font-size: 10.5px; font-weight: 600; line-height: 14px; color: var(--ink-2); }
.pd-mix-ley span { display: inline-flex; align-items: center; gap: 4px; }
.pd-mix-ley i { width: 8px; height: 8px; border-radius: 2px; }
/* El BEV en el color de la web; el resto en grises que se distinguen entre sí y de su vecino. */
.pd-tec-bev { background: var(--bev); }
.pd-tec-phev { background: rgb(var(--gris-600)); }
.pd-tec-hev { background: rgb(var(--gris-400)); }
.pd-tec-ice { background: var(--ink); }
.pd-tec-other { background: rgb(var(--gris-300)); }

/* Particular y empresa: cada año, una columna al 100 %; particular abajo, en el color de la web. */
.pd-apilada > span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.pd-apilada i { flex: 0 1 0; }
.pd-apilada .pd-m-empresa { border-radius: 1.5px 1.5px 0 0; }

/* ── Barras horizontales de ZBE ───────────────────────────────────────────────────────────── */
.pd-pista { display: block; height: 10px; background: rgb(255 255 255 / .7); }
.pd-pista i { display: block; height: 100%; border-radius: 0 3px 3px 0; }

/* Por distintivo: la pegatina del silo (zbe/_macros.html, colores de static/zbe.css) con su nombre, la barra y «53 de 53». */
.pd-dist { position: absolute; inset: 38px 16px 10px; display: grid; grid-auto-rows: 1fr; list-style: none; }
.pd-dist li { display: grid; grid-template-columns: 20px 82px minmax(0, 1fr) 58px; align-items: center; gap: 10px; }
.pd-dist li > span:first-child { display: flex; }
.pd-dist-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pd-dist .pd-pista i { background: var(--bev); }
.pd-dist b { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Nivel de restricción: los tres niveles con los colores de la portada del silo (.zb-n1, .zb-n2, .zb-n3). */
.pd-niv { position: absolute; inset: 38px 16px 12px; display: grid; grid-auto-rows: 1fr; align-items: center; list-style: none; }
.pd-niv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
.pd-niv span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pd-niv b { font-size: 12.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-niv .pd-pista { grid-column: 1 / -1; }
.pd-niv-1 .pd-pista i { background: var(--hair-strong); }
.pd-niv-2 .pd-pista i { background: var(--muted); }
.pd-niv-3 .pd-pista i { background: var(--ink); }

/* La pegatina DGT del silo (copia de .zb-pg de static/zbe.css, que la portada no carga), a 20 px. */
.pobs .zb-pg { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    font-size: 9px; font-weight: 800; font-style: normal; letter-spacing: -.03em; line-height: 1; color: #111; }
.pobs .zb-pg--0 { background: #0b6d9a; }
.pobs .zb-pg--eco { background: linear-gradient(90deg, #6db33f 50%, #0b6d9a 50%); font-size: 6px; letter-spacing: 0; }
.pobs .zb-pg--c { background: #6db33f; }
.pobs .zb-pg--b { background: #ffe100; }
.pobs .zb-pg--sin { background: var(--surface); border: 1.5px dashed var(--muted); }

/* ── Consulta tu municipio ────────────────────────────────────────────────────────────────── */
/* El buscador, centrado en la imagen, que deja salir su desplegable (y va por encima del cuerpo de la tarjeta). */
.pd-v-busca { z-index: 2; display: flex; align-items: center; padding: 30px 16px 6px; overflow: visible; }
.pd-v-busca .pd-bs { width: 100%; }

/* Próximas zonas: como las cifras, entre filetes; cada una, a su ficha. */
.pd-prox { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    list-style: none; }
.pd-prox li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--hair); }
.pd-prox a { display: flex; flex-direction: column; align-items: center; padding: 9px 6px; text-align: center; }
.pd-prox span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
.pd-prox a:hover span { text-decoration-color: var(--ink); }
.pd-prox b { margin-top: 2px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* El botón de esta tarjeta no se estira: la tarjeta tiene más enlaces. */
.pd-go-solo::after { content: none; }
.pobs-c:hover .pd-go-solo { background: var(--surface); color: inherit; }
.pobs-c .pd-go-solo:hover { background: var(--ink); color: #fff; }
.pd-go-solo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Ver datos del gráfico ────────────────────────────────────────────────────────────────── */
/* Por encima del enlace estirado de la tarjeta, para poder abrirlo. */
.pd-datos { position: relative; z-index: 1; padding: 8px 16px 0; font-size: 12.5px; }
.pd-datos summary { width: max-content; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair-strong);
    text-underline-offset: 3px; }
.pd-datos summary:hover { text-decoration-color: var(--ink); }
.pd-tabla { max-height: 16rem; margin-top: 8px; overflow: auto; }
.pd-tabla + .pd-tabla { margin-top: 14px; }
.pd-tabla table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pd-tabla caption { padding-bottom: 4px; text-align: left; font-weight: 600; }
.pd-tabla th, .pd-tabla td { padding: 4px 6px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.pd-tabla th:first-child { text-align: left; }
.pd-tabla thead th { position: sticky; top: 0; background: var(--surface); font-weight: 600; color: var(--ink-2); }
.pd-tabla tbody th { font-weight: 500; }

/* ── Buscadores (el componente del silo, static/matriculaciones-buscador-silo.js) ─────────── */
.pobs > .pd-bs { max-width: 560px; margin: 28px auto 0; }
.pd-bs { position: relative; }
.pd-bs-lbl { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.pd-bs-input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 6px; background: var(--surface);
    font: inherit; font-size: 15px; color: var(--ink); }
.pd-bs-input::placeholder { color: var(--muted); }
.pd-bs-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.pd-bs-res { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 45; max-height: 14rem; overflow-y: auto;
    border: 1px solid var(--hair-strong); background: var(--surface); box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .25); }
.pd-bs .bs-lista { margin: 0; padding: 4px 0; list-style: none; }
.pd-bs .bs-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; color: var(--ink); }
.pd-bs .bs-item:hover, .pd-bs .bs-item.is-activo { background: var(--rail); }
.pd-bs .bs-nom { font-size: 14px; font-weight: 600; }
.pd-bs .bs-marca { font-size: 12px; color: var(--muted); }
/* Cada buscador lleva a un solo tipo de página: el tipo de cada fila sobra. */
.pd-bs .bs-tipo { display: none; }
.pd-bs .bs-vacio { margin: 0; padding: 12px 14px; font-size: 13px; color: var(--ink-2); }

/* ── Parque móvil (templates/page_home/_parque_movil.html, encargo del 02-11-2026) ────────── */
/* Vehículos en circulación: cada columna en su fecha (posición y ancho, de parque_movil/portada_web.py), así el último
   tramo, de diciembre al corte, mide lo que dura. La estimación, en el color claro (.pd-curso). */
.pd-col-fechas { display: block; }
.pd-col-fechas > i { position: absolute; bottom: 0; }

/* En la fila deslizable las tres cifras no caben en una línea cada una: el rango parte en dos («entre 39,39» / «y
   39,52»; el hueco de dos líneas ya lo guarda .pd-g3-nota) y, en los tipos, la unidad baja bajo la cifra en las tres. */
@media (max-width: 1023px) {
    .pd-g3-rango .pd-nota { white-space: normal; }
    .pd-g3-unidad dd small { display: block; margin-left: 0; }
}

/* Qué vehículos hay: los nueve tipos en el orden del documento; cada fila, una barra (su cuota sobre la mayor) con el
   nombre encima y la cuota a la derecha. Las que tienen página la enlazan, por encima del enlace de la tarjeta. */
.pd-tipos { position: absolute; inset: 34px 12px 8px; display: grid; grid-auto-rows: 1fr; gap: 2px; list-style: none; }
.pd-tipos li { display: flex; min-height: 0; }
.pd-tipos li > a, .pd-tipos li > span { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 0 6px; font-size: 11px; line-height: 1; }
.pd-tipos li > a { z-index: 1; }
.pd-tipos i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; background: var(--t4); }
.pd-tipos-n { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pd-tipos b { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-tipos a:hover i { background: var(--t3); }
.pd-tipos a:hover .pd-tipos-n { text-decoration: underline; text-underline-offset: 2px; }
.pd-tipos a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Distintivo: la fila de ZBE (.pd-dist) con la barra en el color de la etiqueta, el de las páginas del parque (copia de
   los tokens de .pm de static/parque-movil.css, que la portada no carga; el nombre lo pone vistas.DISTINTIVO). */
.pd-dist-pm { --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); }

/* Busca tu provincia o municipio: el buscador de las páginas del parque (static/parque-movil-buscador.css), centrado
   como el de modelo y con la caja de los buscadores de la portada. */
.pd-bs-pm { max-width: 560px; margin: 28px auto 0; }
.pd-bs-pm .pm-bs-lbl { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.pd-bs-pm .pm-bs-q { height: 44px; border-color: var(--ink); border-radius: 6px; font-size: 15px; }
.pd-bs-pm .pm-bs-borrar { height: 44px; }
.pd-bs-pm .pm-bs-panel { top: calc(100% + 4px); z-index: 45; }
.pd-bs-pm .pm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }