/* Mechanic Max — css/consulta.css
   Vistas: Códigos de falla (#codigos), Boletines (#boletines), Retiros y quejas (#retiros), Especificaciones (#specs), Buscar en documentos (#biblioteca) y Fuentes oficiales (#fuentes).
   Se carga después de estilo.css: aquí solo van los ajustes propios de estas vistas.
   Usa los tokens de :root (colores, --t-*, --e-*, --r-*) y las clases compartidas; la guía está en guia-estilo.html.

   Índice
     1. Piezas comunes (lupa en los buscadores, filas de documento con la acción a la derecha, «cargando»)
     2. Códigos de falla        5. Especificaciones (tablas, formulario, buscar un dato)
     3. Boletines técnicos      6. Buscar en documentos
     4. Retiros y quejas        7. Fuentes oficiales
     8. Tableta y celular */

/* ---------- 1. Piezas comunes ---------- */
/* Lupa dentro de los buscadores de estas vistas (dibujo propio, en línea: no se pide nada a la red) */
#inCodigo,#fBolTexto,#fQueja,#inBib,#inBd{
  padding-left:38px;background-repeat:no-repeat;background-position:12px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6F76' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='m13.2 13.2 3.8 3.8'/%3E%3C/svg%3E");
}
#inCodigo{padding-left:52px;background-position:18px center;background-size:20px}
/* El código se escribe en mono, pero la indicación es una frase: va en la letra normal */
#inCodigo::placeholder{font-family:var(--f-base);font-size:var(--t-l);letter-spacing:0}

/* Fila de documento: texto a la izquierda y su acción en una columna fija a la derecha (boletines y resultados de búsqueda) */
#bolLista,#codDetalle{--col-accion:120px}
#bibResultados,#bdResultados{--col-accion:216px}
:is(#bolLista,#codDetalle) .bol,:is(#bibResultados,#bdResultados) .resultado{display:grid;grid-template-columns:minmax(0,1fr) var(--col-accion);align-items:start;gap:var(--e-2) var(--e-5)}
:is(#bolLista,#codDetalle) .bol>.bol-cab,:is(#bibResultados,#bdResultados) .resultado>.bol-cab{grid-column:1}
:is(#bolLista,#codDetalle) .bol>p,:is(#bibResultados,#bdResultados) .resultado>p{grid-column:1;margin:0;max-width:80ch}
:is(#bolLista,#codDetalle) .bol>:is(button,.ayuda),:is(#bibResultados,#bdResultados) .resultado>button{grid-column:2;grid-row:1/span 2;justify-self:end;margin:0}
:is(#bolLista,#codDetalle) .bol>.ayuda{padding-top:2px;color:var(--texto-3);text-align:right}
:is(#bolLista,#codDetalle) .bol>button{min-width:0}
/* «Abrir boletín»: acción en línea arriba a la derecha (sesenta botones con borde eran un muro) */
.bol>.bol-abrir{min-height:32px;padding:0 var(--e-1);white-space:nowrap}
.bol>.bol-abrir:disabled{color:var(--texto-3);text-decoration-color:var(--linea-fuerte);cursor:progress}
:is(#bibResultados,#bdResultados) .resultado>button{width:100%;justify-content:center;white-space:normal;text-align:center}

/* Cargando: una línea con un aro que gira (con «menos movimiento» se queda quieto) */
:is(#bolLista,#retLista,#bibResultados,#bdResultados)>p.ayuda:only-child{display:flex;align-items:center;gap:var(--e-3);margin:0;padding:var(--e-5) 0;border-top:1px solid var(--linea)}
:is(#bolLista,#retLista,#bibResultados,#bdResultados)>p.ayuda:only-child::before{content:"";width:16px;height:16px;flex:none;border:2px solid var(--linea-fuerte);border-top-color:var(--tinta);border-radius:50%;animation:consulta-giro .8s linear infinite}
@keyframes consulta-giro{to{transform:rotate(360deg)}}

/* ---------- 2. Códigos de falla ---------- */
/* Con un código completo se ve su ficha; la lista general vuelve al borrar el campo */
#codDetalle:not(:empty)~:is(#tLista,#codLista){display:none}
#v-codigos .cod-detalle{display:block;margin:var(--e-5) 0 0}

/* Ficha del código: arriba el código con su significado y, a la derecha, qué quiere decir cada carácter; debajo, la guía */
#v-codigos .cod-tarjeta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--e-6);padding:0;border:1px solid var(--linea-fuerte);border-radius:var(--r-3);background:var(--superficie-2);overflow:hidden}
#v-codigos .cod-tarjeta .cod{grid-column:1;align-self:end;padding:var(--e-5) 0 0 var(--e-5);font-size:var(--t-3xl);font-weight:700}
#v-codigos .cod-tarjeta .def{grid-column:1;align-self:start;margin:var(--e-3) 0 0;padding:0 0 var(--e-5) var(--e-5);max-width:44ch;font-size:var(--t-l);line-height:1.4}
#v-codigos .anatomia{grid-column:2;grid-row:1/span 2;align-self:center;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:var(--e-4) var(--e-5) var(--e-4) 0}
#v-codigos .anatomia div{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:var(--e-3);padding:6px 0;border-radius:0;border-top:1px solid var(--linea);background:none;font-size:var(--t-s);line-height:1.35;color:var(--texto-2)}
#v-codigos .anatomia div:first-child{border-top:0}
#v-codigos .anatomia b{display:flex;align-items:center;justify-content:center;min-height:28px;border-radius:var(--r-1);background:var(--hundido);box-shadow:inset 0 1px 2px rgba(23,25,28,.14);font:650 var(--t-m)/1 var(--f-mono);font-stretch:90%;color:var(--texto)}

#v-codigos .guia{grid-column:1/-1;margin:0;padding:var(--e-5);border-top:1px solid var(--linea-fuerte);background:var(--superficie)}
#v-codigos .guia>.ayuda{margin:0 0 var(--e-4);font-size:var(--t-s)}
#v-codigos .guia-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--e-6);margin:0}
#v-codigos .guia-cols>div>b{display:block;padding-bottom:var(--e-2);border-bottom:1px solid var(--linea-fuerte);font-weight:650}
#v-codigos .guia :is(ul,ol){list-style:none;margin:0;padding:0}
#v-codigos .guia li{position:relative;margin:0;padding:var(--e-2) 0 var(--e-2) 36px;border-bottom:1px solid var(--linea);line-height:1.45}
#v-codigos .guia li:last-child{border-bottom:0}
#v-codigos .guia ul li{padding-left:var(--e-4)}
#v-codigos .guia ul li::before{content:"";position:absolute;left:2px;top:calc(var(--e-2) + .65em);width:6px;height:2px;background:var(--texto-3)}
#v-codigos .guia ol{counter-reset:paso}
#v-codigos .guia ol li{counter-increment:paso}
#v-codigos .guia ol li::before{content:counter(paso);position:absolute;left:0;top:7px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-1);background:var(--hundido);font:600 var(--t-xs)/1 var(--f-mono);font-stretch:90%;color:var(--texto)}
#v-codigos .herr{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--e-2);margin:var(--e-4) 0 0;padding-top:var(--e-4);border-top:1px solid var(--linea)}
#v-codigos .herr b{margin-right:var(--e-1);color:var(--texto)}
#v-codigos .herr span{padding:1px 8px;border:1px solid var(--linea-fuerte);border-radius:var(--r-1);font-size:var(--t-xs);font-weight:500;line-height:1.5;color:var(--texto-2)}

/* Lo que hay de este código en el carro elegido */
#v-codigos .relacionados{margin-top:var(--e-6)}
#v-codigos .relacionados h3{margin:0 0 var(--e-3)}
#v-codigos .relacionados>.ayuda{margin-bottom:var(--e-3)}
#v-codigos .relacionados .fila-botones{margin:var(--e-4) 0 0}

/* Lista general */
#tLista{margin-top:var(--e-6)}
#v-codigos .cod-lista button{grid-template-columns:72px minmax(0,1fr);align-items:baseline;padding:var(--e-2);border-radius:0;color:var(--texto);transition:background var(--dur) var(--curva)}
#v-codigos .cod-lista button:focus-visible{outline-offset:-2px}
#v-codigos .cod-lista>.vacio{column-span:all;break-inside:avoid}
#v-codigos .cod-lista>.vacio .fila-botones{justify-content:center;margin:0}
#v-codigos .cod-lista>.vacio .btn-gris{display:inline-flex;grid-template-columns:none;width:auto;min-height:var(--control);padding:8px 16px;border:1px solid var(--borde-control);border-radius:var(--r-2);background:var(--superficie);font-size:var(--t-m);font-weight:600;line-height:1.2;text-align:center}
#v-codigos .cod-lista>.vacio .btn-gris:hover{background:var(--superficie-2);border-color:var(--tinta-2)}
#v-codigos .cod-lista>.ayuda{column-span:all;margin:0;padding:var(--e-5);border:1px dashed var(--linea-fuerte);border-radius:var(--r-3);background:var(--superficie-2);max-width:none}

/* ---------- 3. Boletines técnicos ---------- */
#v-boletines .filtros{margin-bottom:var(--e-3)}
#v-boletines .filtros>select{flex:0 1 auto;max-width:280px}
#bolCuenta{margin-bottom:var(--e-3);font-size:var(--t-s)}
#bolCuenta:empty{display:none}

/* ---------- 4. Retiros y quejas ---------- */
#v-retiros h1+h2{margin-top:var(--e-5)}
#retLista .retiro{padding:var(--e-4) var(--e-5) var(--e-5)}
#retLista .retiro h3{margin-bottom:var(--e-1)}
#retLista .retiro dl{grid-template-columns:88px minmax(0,1fr);margin-top:var(--e-4);padding-top:var(--e-3);border-top:1px solid var(--linea)}
#retLista .retiro dd{max-width:84ch}
/* La nota final es casi siempre el teléfono de NHTSA: va más discreta que el problema, el riesgo y la solución */
#retLista .retiro dd:nth-of-type(4){font-size:var(--t-s);color:var(--texto-2)}
/* Avisos graves del retiro o de la queja: en rojo, que es el color reservado al peligro */
:is(#retLista,#qLista) .sello.ok{background:var(--rojo-fondo);border-color:var(--rojo-borde);color:var(--rojo)}

#qCuenta{margin-bottom:var(--e-3)}
#qCuenta:empty{display:none}
#qBarras{max-width:none}
#qBarras:empty{display:none}
#qBarras .barra-fila{transition:background var(--dur) var(--curva)}
#qBarras .barra-fila .n{font-weight:600;color:var(--texto)}
/* Barra elegida: se queda marcada mientras filtra (otro toque la suelta). La flecha gira hacia abajo: «estás viendo estas» */
#qBarras .barra-fila.activa{background:var(--amarillo-suave);box-shadow:inset 3px 0 0 var(--amarillo);font-weight:650}
#qBarras .barra-fila.activa .relleno{background:var(--tinta)}
#qBarras .barra-fila.activa::after{border-color:var(--tinta);transform:rotate(135deg)}
#v-retiros .filtros{max-width:none;margin-bottom:var(--e-3)}
#fQueja{width:100%;max-width:none}
#qLista>.ayuda{font-size:var(--t-s)}
/* Filtro activo (se tocó una barra): franja resaltada con la salida a mano */
#qLista>.ayuda:has(#bQuejasTodas){display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-1) var(--e-2);max-width:none;margin-bottom:var(--e-3);padding:var(--e-2) var(--e-3);border-radius:var(--r-2);background:var(--amarillo-suave);box-shadow:inset 3px 0 0 var(--amarillo);font-size:var(--t-m);color:var(--texto)}
#qLista>.ayuda:has(#bQuejasTodas) .btn-texto{margin-left:auto;text-decoration-color:var(--amarillo-borde)}
#qLista .queja p{max-width:84ch}

/* ---------- 5. Especificaciones ---------- */
#v-specs .leyenda{margin-bottom:0;padding:var(--e-2) 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
#specsTablas h2{margin:var(--e-6) 0 var(--e-2)}
#specsTablas .tabla td{vertical-align:middle}
#specsTablas .tabla td:first-child{font-weight:500}
#specsTablas .spec-valor{font-size:var(--t-l);font-variant-numeric:tabular-nums}
#specsTablas .spec-valor small{font-size:var(--t-s)}
/* Dato que falta: marcador gris y, a su lado, las tres maneras de conseguirlo (la principal, «Añadir», en tinta) */
#specsTablas tr[data-nuevo] td{padding-top:var(--e-2);padding-bottom:var(--e-2)}
#specsTablas tr[data-nuevo] td:first-child{font-weight:400}
#specsTablas tr[data-nuevo] td[colspan]{font-size:var(--t-s)}
#specsTablas tr[data-nuevo] td[colspan]::before{content:"Sin dato";display:inline-block;min-width:88px;margin-right:var(--e-2);color:var(--texto-3)}
#specsTablas tr[data-nuevo] .btn-texto{margin-left:0!important;margin-right:var(--e-4);font-size:var(--t-s);font-weight:500;color:var(--texto-2);text-decoration-color:transparent}
#specsTablas tr[data-nuevo] .btn-texto[data-anadir]{font-weight:600;color:var(--texto);text-decoration-color:var(--linea-fuerte)}
#specsTablas tr[data-nuevo]:hover .btn-texto{color:var(--texto);text-decoration-color:var(--linea-fuerte)}
#specsTablas tr[data-nuevo] .btn-texto:is(:hover,:focus-visible){color:var(--texto);text-decoration-color:var(--tinta)}

/* Sección sin datos: una línea, y debajo «Faltan N datos» plegado con las tres maneras de conseguir cada uno */
#specsTablas .specs-sin{margin:0 0 var(--e-2);font-size:var(--t-s)}
.specs-faltan{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.specs-faltan>summary{display:flex;align-items:center;gap:var(--e-2);min-height:44px;padding:0 var(--e-2);list-style:none;font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.specs-faltan>summary::-webkit-details-marker{display:none}
.specs-faltan>summary::before{content:"";width:7px;height:7px;flex:none;margin-right:4px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur) var(--curva)}
.specs-faltan[open]>summary::before{transform:rotate(45deg)}
.specs-faltan>summary:hover{background:var(--superficie-2);color:var(--texto)}
.specs-faltan>summary:focus-visible{outline-offset:-2px}
.specs-faltan .tabla{margin-bottom:var(--e-2)}
.specs-faltan .tabla tr:last-child td{border-bottom:0}
#specsTablas .specs-faltan tr[data-nuevo] td[colspan]::before{content:none}

/* Columnas fijas en todas las tablas: Dato 32 %, Valor 24 %, Estado 120 px (lo pone el JS) y Fuente el resto.
   Así todas las secciones quedan alineadas entre sí y «Sin dato» cae justo en la columna Valor. */
@media (min-width:701px){
  #specsTablas .tabla{table-layout:fixed}
  #specsTablas .tabla th:first-child{width:32%}
  #specsTablas .tabla th:nth-child(2){width:24%}
  #specsTablas .tabla td{overflow-wrap:anywhere}
  /* La celda vacía abarca Valor+Fuente+Estado (68 % de la tabla); «Sin dato» ocupa lo que mide Valor (24 %) */
  #specsTablas tr[data-nuevo] td[colspan]::before{min-width:0;width:calc(35.3% + 7px);margin-right:0;vertical-align:baseline}
}
/* Con ratón: en cada dato que falta solo se ve «Añadir»; las otras dos maneras aparecen al pasar por la fila
   o al llegar con el teclado. Sin ratón (pantalla táctil) y para el invitado se ven siempre. */
@media (hover:hover) and (pointer:fine) and (min-width:701px){
  body:not(.invitado) #specsTablas tr[data-nuevo] :is(button:not([data-anadir]),a).btn-texto{opacity:0;transition:opacity var(--dur) var(--curva)}
  body:not(.invitado) #specsTablas tr[data-nuevo]:is(:hover,:focus-within) :is(button:not([data-anadir]),a).btn-texto{opacity:1}
}

/* Campos con lista de sugerencias (Dato, Unidad): la misma flecha que los desplegables, no el triángulo del navegador */
#dSpec input[list]{padding-right:32px;background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2350545A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")}
#dSpec input[list]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}

/* Formulario «Añadir dato»: dos columnas (sección y dato, valor y unidad) */
#dSpec{width:min(600px,calc(100vw - 2*var(--e-4)))}
#dSpec .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
#dSpec label.check{min-height:0;padding:var(--e-1) 0}
#dSpec label.check:has(input:disabled){color:var(--texto-3);cursor:not-allowed}
#dSpec label.check:has(input:disabled) input{cursor:not-allowed}

/* Panel «Buscar un dato en los documentos» */
#dBuscarDato .panel-cab .ayuda{margin-top:var(--e-1);max-width:64ch}
#bdResultados .resultado>.usar{grid-column:1/-1;margin-top:var(--e-1)}
/* Valores encontrados en la página: botones compactos; el amarillo aparece al ir a pulsar */
#bdResultados .usar .btn{min-height:32px;padding:4px 12px;border-color:var(--borde-control);background:var(--superficie);box-shadow:none;font-size:var(--t-s);font-variant-numeric:tabular-nums}
#bdResultados .usar .btn:hover{background:var(--amarillo);border-color:var(--amarillo-borde)}
#bdResultados .usar .btn:active{background:var(--amarillo-activo)}

/* ---------- 6. Buscar en documentos ---------- */
/* Estado de la biblioteca: tres cifras unidas por filetes y, si falta leer boletines, la acción debajo */
#bibEstado{gap:0;padding:0;overflow:hidden}
#bibEstado>*{margin:0;padding:var(--e-4) var(--e-5)}
#bibEstado>*+*{border-top:1px solid var(--linea)}
#bibEstado .bib-cifras{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:0}
#bibEstado .bib-cifras span{display:flex;flex-direction:column;gap:2px;padding:var(--e-4) var(--e-5);border-left:1px solid var(--linea);font-size:var(--t-s);line-height:1.35}
#bibEstado .bib-cifras span:first-child{border-left:0}
#bibEstado .bib-cifras b{margin:0;font-size:var(--t-2xl);line-height:1.1;letter-spacing:-.02em}
#bibEstado>div:has(>#bIndexar){display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-5);background:var(--superficie)}
#bibEstado>div:has(>#bIndexar) .ayuda{flex:1 1 280px;margin:0;font-size:var(--t-s)}
#bibEstado .progreso{max-width:560px}
#bibEstado>p.ayuda{font-size:var(--t-s);max-width:none}

#formBib{margin-bottom:var(--e-3)}
#formBib .btn{min-width:112px}
#bibAtajos{margin-bottom:var(--e-5)}
#bibAtajos .btn-gris.activa{border-color:var(--tinta);color:var(--texto);font-weight:600;box-shadow:inset 0 -3px 0 var(--amarillo)}
#bibCuenta{margin-bottom:var(--e-3);font-size:var(--t-s)}
#bibCuenta:empty{display:none}
/* Antes de la primera búsqueda: qué hacer y qué va a salir (lo reemplaza el primer resultado) */
#bibResultados .bib-inicio{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-5) 0;border-top:1px solid var(--linea);color:var(--texto-2);font-size:var(--t-s)}
#bibResultados .bib-inicio .ico{flex:none;width:20px;height:20px;margin-top:1px;color:var(--texto-3)}
#bibResultados .bib-inicio p{margin:0;max-width:64ch}
/* Resultado: primero el título del documento, debajo qué es y en qué página, y luego el fragmento */
:is(#bibResultados,#bdResultados) .resultado .bol-cab{gap:var(--e-1) var(--e-3)}
:is(#bibResultados,#bdResultados) .resultado .bol-cab>b{order:-1;flex-basis:100%;margin-bottom:2px;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
:is(#bibResultados,#bdResultados) .resultado>p{color:var(--texto-2)}
:is(#bibResultados,#bdResultados) .resultado>p mark{color:var(--texto);font-weight:600}

/* ---------- 7. Fuentes oficiales ---------- */
/* Cada fuente: qué es a la izquierda y cómo entrar a la derecha. Solo la primera (la gratuita por la que conviene empezar) lleva el botón amarillo */
#fuentesLista .fuente{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:start;gap:var(--e-2) var(--e-7)}
#fuentesLista .fuente-cab{grid-column:1;flex-wrap:wrap;justify-content:flex-start;gap:var(--e-2) var(--e-3)}
#fuentesLista .fuente>p{grid-column:1;margin:0;max-width:68ch}
#fuentesLista .fuente>.fila-botones{grid-column:2;grid-row:1/span 2;flex-direction:column;align-items:stretch;gap:var(--e-2);margin:0}
#fuentesLista .fila-botones>*{justify-content:space-between;min-height:44px;white-space:normal;text-align:left}
#fuentesLista .fuente:not(:first-child) .btn{background:var(--superficie);border-color:var(--borde-control);box-shadow:none}
#fuentesLista .fuente:not(:first-child) .btn:hover{background:var(--superficie-2);border-color:var(--tinta-2)}
#fuentesLista .fuente:not(:first-child) .btn:active{background:var(--hundido)}

/* ---------- 8. Tableta y celular ---------- */
@media (max-width:960px){
  #fuentesLista .fuente{grid-template-columns:minmax(0,1fr) minmax(0,240px);column-gap:var(--e-5)}
  /* Boletines: el buscador ocupa toda la fila y los dos desplegables se reparten la de abajo */
  #v-boletines .filtros{flex-wrap:wrap}
  #v-boletines .filtros>input{flex:1 1 100%}
  #v-boletines .filtros>select{flex:1 1 0;max-width:none}
}
@media (max-width:700px){
  #v-boletines .filtros>select{flex:1 1 100%}
  .bol>.bol-abrir{min-height:var(--control)}
}
@media (max-width:700px){
  /* Filas de documento: la acción baja debajo del texto */
  :is(#bolLista,#codDetalle) .bol,:is(#bibResultados,#bdResultados) .resultado{grid-template-columns:minmax(0,1fr)}
  :is(#bolLista,#codDetalle) .bol>:is(button,.ayuda),:is(#bibResultados,#bdResultados) .resultado>button{grid-column:1;grid-row:auto;justify-self:start;margin-top:var(--e-1)}
  :is(#bolLista,#codDetalle) .bol>.ayuda{text-align:left}

  #inCodigo{padding-left:44px;background-position:14px center}
  #inCodigo::placeholder{font-size:var(--t-m)}
  #v-codigos .cod-tarjeta{grid-template-columns:minmax(0,1fr)}
  #v-codigos .cod-tarjeta .cod{padding:var(--e-4) var(--e-4) 0}
  #v-codigos .cod-tarjeta .def{padding:0 var(--e-4) var(--e-3)}
  #v-codigos .anatomia{grid-column:1;grid-row:auto;margin:0 var(--e-4) var(--e-4);padding-top:var(--e-1);border-top:1px solid var(--linea-fuerte)}
  #v-codigos .guia{padding:var(--e-4)}
  #v-codigos .guia-cols{grid-template-columns:minmax(0,1fr);gap:var(--e-5)}
  #v-codigos .cod-lista button{min-height:var(--control)}

  #retLista .retiro{padding:var(--e-4)}
  #retLista .retiro dl{grid-template-columns:minmax(0,1fr)}
  #qLista>.ayuda:has(#bQuejasTodas) .btn-texto{margin-left:0;min-height:var(--control)}

  /* Especificaciones: cada dato pasa a ser un bloque (nombre, valor con su estado, fuente) en vez de una tabla que no cabe */
  #specsTablas .tabla{overflow:visible}
  #specsTablas .tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #specsTablas .tabla tbody{display:block;border-top:1px solid var(--linea-fuerte)}
  #specsTablas .tabla tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px var(--e-3);padding:var(--e-3) 0;border-bottom:1px solid var(--linea)}
  #specsTablas .tabla td{display:block;padding:0;border:0}
  #specsTablas .tabla td:first-child{grid-column:1/-1;font-size:var(--t-s);font-weight:500;color:var(--texto-2)}
  #specsTablas .tabla td.spec-valor{grid-column:1}
  #specsTablas .tabla td:has(>.sello){grid-column:2;grid-row:2}
  #specsTablas .tabla td:nth-child(3):not(:has(>.sello)){grid-column:1/-1;font-size:var(--t-s);color:var(--texto-2)}
  #specsTablas .tabla td:nth-child(3):not(:has(>.sello)) small{display:inline;margin-left:var(--e-2)}
  #specsTablas tr[data-nuevo]{padding:var(--e-3) 0 var(--e-1)}
  #specsTablas tr[data-nuevo] td{padding:0}
  #specsTablas tr[data-nuevo] td:first-child{color:var(--texto)!important;font-size:var(--t-m)}
  #specsTablas tr[data-nuevo] td[colspan]{grid-column:1/-1}
  #specsTablas tr[data-nuevo] td[colspan]::before{content:none}
  #specsTablas tr[data-nuevo] .btn-texto{min-height:var(--control);margin-right:var(--e-5)}
  #dSpec .rejilla{grid-template-columns:minmax(0,1fr)}
  /* Leyenda: cada sello con su explicación en su propia línea */
  #v-specs .leyenda{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--e-2) var(--e-3)}
  #v-specs .leyenda .sello{justify-self:start;margin-left:0!important}

  #bibEstado .bib-cifras span{padding:var(--e-3)}
  #bibEstado .bib-cifras b{font-size:var(--t-xl)}
  #bibEstado>div:has(>#bIndexar){padding:var(--e-4) var(--e-3)}
  #bibEstado>div:has(>#bIndexar) .btn{width:100%;white-space:normal;text-align:center}
  /* Atajos: una sola tira que se desliza de lado, de borde a borde */
  #bibAtajos{flex-wrap:nowrap;margin:0 calc(-1*var(--margen)) var(--e-4);padding:0 var(--margen) var(--e-1);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 var(--margen)}
  #bibAtajos::-webkit-scrollbar{display:none}
  #bibAtajos .btn-gris{flex:none;scroll-snap-align:start}
  #formBib .btn{flex:1 1 auto}

  #fuentesLista .fuente{grid-template-columns:minmax(0,1fr);row-gap:var(--e-3)}
  #fuentesLista .fuente>.fila-botones{grid-column:1;grid-row:auto;margin-top:var(--e-1)}
}

/* ---------- 9. Pulido final (v11) ---------- */
/* Códigos: la lista se lee de pie junto al carro (15 px y 40 px de alto); «banco 2» en un motor en línea va al final, atenuado */
#v-codigos .cod-lista button{font-size:var(--t-m);min-height:var(--control)}
#v-codigos .cod-lista button.no-aplica{opacity:.55}
#v-codigos .cod-lista button.no-aplica span::after{content:" · banco 2: no aplica a este motor";font-size:var(--t-s);color:var(--texto-2)}
#v-codigos .relacionados .fila-botones .btn-texto{margin-left:var(--e-2)}

/* Boletines: pestañas por tipo de comunicado encima de los filtros */
#bolTipos{margin:0 0 var(--e-3)}
#bolTipos button{display:inline-flex;align-items:center;gap:var(--e-2)}
#bolTipos .cuenta{background:var(--superficie-2)}
#bolTipos button.activa .cuenta{background:var(--hundido);color:var(--texto)}
/* Tipo del comunicado (en español) y revisiones juntadas: discretos, al lado del número */
.bol-tipo{font-size:var(--t-xs);font-weight:600;color:var(--texto)}
.bol-rev{padding:1px 6px;border-radius:var(--r-1);background:var(--hundido);font-size:var(--t-xs);font-weight:500;color:var(--texto-2);line-height:1.5}
/* Toda la fila abre el boletín: el enlace queda pegado al texto y no a 300 px */
#bolLista{--col-accion:auto;max-width:1040px}
#bolLista .bol.bol-abre,#codDetalle .bol.bol-abre{cursor:pointer;margin:0 calc(-1*var(--e-3));padding-left:var(--e-3);padding-right:var(--e-3);border-radius:var(--r-2);transition:background var(--dur) var(--curva)}
#bolLista .bol.bol-abre:hover,#codDetalle .bol.bol-abre:hover{background:var(--superficie-2)}
#bolLista .bol.bol-abre:hover .bol-abrir{text-decoration-color:var(--tinta)}
#bolLista>.vacio-accion .fila-botones{justify-content:center;margin:0}

/* Retiros: el nombre en español manda; la ruta original de NHTSA, debajo y en pequeño; «Qué hacer» siempre a la vista */
#retLista .retiro h3{margin-bottom:0}
#retLista .retiro-en{display:block;margin:2px 0 var(--e-2) 16px;font-size:var(--t-xs);color:var(--texto-3)}
#retLista .retiro-hacer{margin:var(--e-3) 0 0;padding:var(--e-2) var(--e-3);border-radius:var(--r-2);background:var(--rojo-fondo);color:var(--texto);font-size:var(--t-s);max-width:none}
#retLista .retiro-hacer b{color:var(--rojo)}
/* Quejas: 4 renglones cada una y «Leer completa» si hay más */
#qLista .queja-texto{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
#qLista .queja.abierta .queja-texto{display:block;-webkit-line-clamp:unset;line-clamp:none}
#qLista .queja-leer{margin-top:var(--e-1);font-size:var(--t-s)}
#qLista .mas-quejas{flex-direction:column;align-items:center;gap:var(--e-2);margin-top:var(--e-5)}
#qLista .mas-quejas .ayuda{margin:0;font-size:var(--t-s)}

/* Especificaciones: un solo punto de partida cuando no hay datos, y la cuenta de cada sección en su título */
#specsTablas .specs-empezar{margin-top:var(--e-5)}
#specsTablas .specs-empezar>p{max-width:60ch}
.chips-accion{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-2)}
.chips-accion .btn-gris{min-height:var(--control);font-size:var(--t-s)}
#specsTablas h2 .cuenta{margin-left:var(--e-2);vertical-align:3px}
#specsTablas:has(.specs-empezar) h2{margin-top:var(--e-5)}

/* Buscar en documentos: un bloque por documento, con sus páginas en filas compactas */
.bib-doc{padding:var(--e-4) 0;border-bottom:1px solid var(--linea)}
.bib-doc:first-child{border-top:1px solid var(--linea)}
.bib-doc-cab{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-1) var(--e-3);margin-bottom:var(--e-2)}
.bib-doc-cab>b{font-size:var(--t-s)}
.bib-doc-tit{flex:1 1 240px;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bib-pags{list-style:none;margin:0;padding:0}
.bib-pags li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:baseline;gap:var(--e-3);padding:6px 0;border-top:1px dashed var(--linea)}
.bib-pags li:first-child{border-top:0}
.bib-pags p{margin:0;color:var(--texto-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.bib-pags p mark{color:var(--texto);font-weight:600}
.bib-pag{font-size:var(--t-s);color:var(--texto-2)}
.bib-mas{margin-top:var(--e-2);font-size:var(--t-s)}

@media (max-width:700px){
  #bolLista .bol.bol-abre,#codDetalle .bol.bol-abre{margin:0;padding-left:0;padding-right:0}
  #bibEstado .bib-cifras{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  #bibEstado .bib-cifras span{flex-direction:row;align-items:baseline;gap:var(--e-2);border-left:0;border-top:1px solid var(--linea)}
  #bibEstado .bib-cifras span:first-child{border-top:0}
  .bib-pags li{grid-template-columns:52px minmax(0,1fr);row-gap:2px}
  .bib-pags li .btn-texto{grid-column:2;justify-self:start;min-height:32px}
  #bolTipos{display:flex;width:100%}
  #bolTipos button{flex:1 1 50%;justify-content:center;white-space:normal;line-height:1.2;text-align:center}
}