/* Mechanic Max — css/inicio-vehiculo.css
   Vistas: Panel (#inicio), Resumen del vehículo (#vehiculo) y la placa del vehículo activo (#placa).
   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. Placa del vehículo activo (#placa)
     2. Panel: entrada del VIN, carros recientes, cifras del taller
     3. Resumen del vehículo: foto, indicadores, ficha, EPA, Wikipedia
     4. Tableta y celular */

/* ---------- 1. Placa del vehículo activo ----------
   Dos filas: arriba año + nombre + «Cambiar»; abajo el VIN troquelado (la firma) y el motor.
   El VIN va carácter por carácter en 17 casillas de ancho fijo (--celda); la décima, la del año del
   modelo, en amarillo, igual que la casilla del año. Las casillas se dibujan SIEMPRE: sin VIN quedan
   vacías y dentro sale «Escribir el VIN» (app.js pone #placa.sin-vin). */
#placa{
  --celda:16px;                 /* ancho de cada casilla del VIN */
  --vin-alto:28px;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"id orden boton" "datos datos datos";
  gap:10px var(--e-5);min-height:0;padding:14px var(--e-7)
}
/* Reborde estampado: la chapa se dobla a 5 px del canto, como una placa remachada de verdad */
#placa::after{content:"";position:absolute;inset:5px;border:1px solid rgba(23,25,28,.11);border-radius:calc(var(--r-3) - 4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.6);pointer-events:none}
#placa .placa-id{grid-area:id;display:flex;align-items:center;gap:var(--e-4);min-width:0}
#placa>.btn-negro{grid-area:boton;position:relative;z-index:1}
/* Dos acciones en la placa: «Nueva orden» (la que sigue en el flujo, en tinta) y «Cambiar» de carro, en aluminio */
#placa>.placa-orden{grid-area:orden}
#placa>a.btn-negro{background:rgba(255,255,255,.55);border-color:var(--alu-borde);color:var(--alu-texto);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
#placa>a.btn-negro:hover{background:rgba(255,255,255,.85);border-color:var(--alu-texto-2)}
body.invitado #placa>.placa-orden{display:none}
#placa .placa-anio{font-size:var(--t-xl);padding:9px 10px 8px}
#placa .placa-nombre{font-size:clamp(1.375rem,.85rem + 1.25vw,1.875rem)}

#placa .placa-datos{
  grid-area:datos;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-6);min-width:0;
  padding:10px 0 0;border-left:0;border-top:1px solid rgba(23,25,28,.16);box-shadow:0 -1px 0 rgba(255,255,255,.75)
}
#placa .placa-datos>span{position:relative;z-index:1;flex-direction:row;align-items:center;gap:var(--e-3);min-width:0}
#placa .placa-vin{order:-1;flex:none;max-width:100%}
#placa .placa-motor{flex:0 1 auto}
#placa .placa-datos small{flex:none;font-size:var(--t-s);font-weight:500;line-height:var(--vin-alto);color:var(--alu-texto-2)}
#placa #pMotor{max-width:none;min-width:0;line-height:var(--vin-alto)}
/* Motor deducido por los diagramas (el carro se abrió sin VIN): mismo punto amarillo que en la configuración */
#placa .placa-motor.deducido b::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 1px 0;border-radius:50%;background:var(--amarillo);box-shadow:inset 0 0 0 1px var(--amarillo-borde);vertical-align:middle}

/* VIN: 17 casillas hundidas dibujadas en el marco; las letras van encima con espaciado de una casilla */
#placa .placa-vin-marco{
  position:relative;display:block;flex:none;width:calc(17*var(--celda));height:var(--vin-alto);
  background:
    linear-gradient(180deg,rgba(23,25,28,.26),rgba(23,25,28,0) 3px) 0 0/calc(17*var(--celda) - 2px) 100% no-repeat,
    linear-gradient(var(--amarillo),var(--amarillo)) calc(9*var(--celda)) 0/calc(var(--celda) - 2px) 100% no-repeat,
    repeating-linear-gradient(90deg,var(--alu-casilla) 0 calc(var(--celda) - 2px),transparent calc(var(--celda) - 2px) var(--celda)) 0 0/calc(17*var(--celda)) 100% no-repeat
}
#placa .placa-vin-fila{display:block;height:100%}
#placa .placa-sin-vin{display:none}
#placa #pVin{
  display:block;height:var(--vin-alto);min-width:0;max-width:none;overflow:visible;white-space:nowrap;background:none;
  padding:0 0 0 calc((var(--celda) - 1ch)/2);
  font:600 .875rem/var(--vin-alto) var(--f-mono);font-stretch:87.5%;letter-spacing:calc(var(--celda) - 1ch);
  color:var(--alu-texto);text-shadow:0 1px 0 rgba(255,255,255,.5);user-select:all;-webkit-user-select:all
}
#placa.sin-vin #pVin{visibility:hidden}
/* Sin VIN la décima casilla no se pinta de amarillo: no hay año que señalar y era lo que más llamaba la atención */
#placa.sin-vin .placa-vin-marco{
  background:
    linear-gradient(180deg,rgba(23,25,28,.26),rgba(23,25,28,0) 3px) 0 0/calc(17*var(--celda) - 2px) 100% no-repeat,
    repeating-linear-gradient(90deg,var(--alu-casilla) 0 calc(var(--celda) - 2px),transparent calc(var(--celda) - 2px) var(--celda)) 0 0/calc(17*var(--celda)) 100% no-repeat;
  opacity:.9
}
/* Sin VIN: las casillas vacías son el botón para escribirlo */
#placa .placa-vin-cta{display:none}
#placa.sin-vin .placa-vin-cta{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 var(--e-2);border-radius:2px;
  color:var(--alu-texto);font-size:var(--t-s);font-weight:650;text-decoration:none;text-shadow:0 1px 0 rgba(255,255,255,.6)
}
#placa.sin-vin .placa-vin-cta .ico{width:16px;height:16px}
#placa.sin-vin .placa-vin-cta span{text-decoration:underline;text-decoration-color:var(--amarillo-borde);text-decoration-thickness:2px;text-underline-offset:3px}
#placa.sin-vin .placa-vin-cta:hover{background:rgba(255,255,255,.35)}
#placa.sin-vin .placa-vin-cta:hover span{text-decoration-color:var(--tinta)}
#placa.sin-vin .placa-vin-cta:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}

/* La placa es del carro: solo sale en las pantallas del vehículo. En las del taller (Panel, Órdenes, Todos los
   vehículos, Taller y respaldo) daría a entender que la lista está filtrada por ese carro. En el Panel el carro
   abierto sale en «Seguir con». */
.cuerpo:has(:is(#v-inicio,#v-ordenes,#v-catalogo,#v-ajustes).activa) #placa{display:none}

/* En pantalla ancha el VIN troquelado manda: se lee de lejos y se le dicta al de repuestos */
@media (min-width:961px){
  #placa{--celda:28px;--vin-alto:40px}
  #placa #pVin{font-size:1.25rem}
  #placa .placa-motor{padding-left:var(--e-6);border-left:1px solid rgba(23,25,28,.16);box-shadow:-1px 0 0 rgba(255,255,255,.75)}
  #placa #pMotor{font-size:var(--t-l)}
  #placa.sin-vin .placa-vin-cta{padding-left:var(--e-3);font-size:var(--t-m)}
}
@media (min-width:701px) and (max-width:960px){
  #placa{--celda:22px;--vin-alto:34px}
  #placa #pVin{font-size:1.0625rem}
}

/* ---------- 2. Panel ---------- */
/* Entrada del VIN: el campo es una regleta de 17 casillas, la misma idea que la placa */
#v-inicio .entrada{max-width:760px;margin-bottom:0}
#v-inicio .vin-campo label{margin-bottom:var(--e-2)}
#v-inicio .vin-fila{align-items:stretch}
#inVin{
  --celda:28px;--vin-borde:16px;
  flex:none;width:calc(17*var(--celda) + 2*var(--vin-borde) + 6px);max-width:100%;
  padding-left:calc(var(--vin-borde) + (var(--celda) - 1ch)/2);padding-right:0;
  font-weight:500;letter-spacing:calc(var(--celda) - 1ch);
  background-image:repeating-linear-gradient(90deg,var(--linea-fuerte) 0 1px,transparent 1px var(--celda));
  background-size:calc(17*var(--celda) + 1px) 22px;background-position:var(--vin-borde) 50%;background-repeat:no-repeat
}
#inVin::placeholder{color:var(--texto-3)}
/* Las casillas guían al escribir; con el campo vacío manda la indicación, sin rayas encima */
#inVin:placeholder-shown,#vFicha .ficha-vin input:placeholder-shown{background-size:0 0}
#formVin:has(.ayuda.error) #inVin{border-color:var(--rojo)}
#formVin:has(.ayuda.error) #inVin:focus{box-shadow:0 0 0 3px var(--rojo-borde)}
#v-inicio .vin-fila .btn{min-width:148px}
#vinAyuda{min-height:calc(var(--t-m)*var(--linea-texto))}

/* «No tengo el VIN»: segunda puerta, con su flecha de abrir y cerrar */
#sinVin{padding-top:var(--e-2)}
#sinVin summary{display:inline-flex;align-items:center;gap:var(--e-2);min-height:var(--control);list-style:none;text-decoration:none}
#sinVin summary::-webkit-details-marker{display:none}
#sinVin summary::before{content:"";width:8px;height:8px;flex:none;margin:0 3px 3px 2px;border-right:2px solid var(--texto);border-bottom:2px solid var(--texto);transform:rotate(-45deg);transition:transform var(--dur) var(--curva)}
#sinVin[open] summary::before{transform:rotate(45deg);margin-bottom:5px}
#sinVin summary:hover{text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
#sinVin .ymm{margin-top:var(--e-2);padding:var(--e-4);border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie-2)}

/* Carros recientes: año alineado en su columna, nombre en negrita, «Quitar» discreto */
#tRecientes td{vertical-align:middle}
/* Sangría francesa: si el nombre parte en dos renglones, el segundo empieza bajo el nombre, no bajo el año */
#tRecientes{--anio:52px}
#tRecientes td:first-child{padding-left:calc(var(--e-2) + var(--anio));text-indent:calc(-1*var(--anio))}
#tRecientes .rec-anio{display:inline-block;width:calc(var(--anio) - .27em);text-indent:0;color:var(--texto-2);font-weight:500}
#tRecientes td.mono{font-size:var(--t-s);color:var(--texto-2);white-space:nowrap}
#tRecientes td.sin-dato{color:var(--texto-3)}
#tRecientes td:last-child{width:1%}
#tRecientes [data-quitar]{min-height:32px;padding:0 var(--e-1);font-size:var(--t-s);color:var(--texto-2)}
#tRecientes [data-quitar]:hover{color:var(--rojo);text-decoration-color:var(--rojo)}
/* Con ratón, «Quitar» solo aparece en la fila sobre la que se está (o al llegar con el teclado): la lista queda limpia */
@media (hover:hover) and (pointer:fine){
  #tRecientes [data-quitar]{opacity:0;transition:opacity var(--dur) var(--curva)}
  #tRecientes tr:hover [data-quitar],#tRecientes [data-quitar]:focus-visible{opacity:1}
}
#tRecientes td.vacio{padding:var(--e-5);border-radius:var(--r-3);background:var(--superficie-2);color:var(--texto-2)}
/* Cada carro es una fila de lista: año y nombre; debajo, en pequeño, motor y VIN (solo si se conocen).
   Sin columnas de «—»: casi todos los recientes se eligen sin VIN. */
#tRecientes{display:block;overflow:visible;border-top:1px solid var(--linea-fuerte)}
#tRecientes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#tRecientes tbody{display:block}
#tRecientes tr[data-i]{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;column-gap:var(--e-4);min-height:56px;padding:10px 84px 10px var(--e-2);border-bottom:1px solid var(--linea)}
#tRecientes tr[data-i]:hover{background:var(--superficie-2)}
#tRecientes tr[data-i] td{display:block;width:auto;min-width:0;padding:0;border:0;background:none}
#tRecientes tr[data-i] td:first-child{flex:1 0 100%;padding-left:var(--anio)}
#tRecientes tr[data-i] td:is(.rec-motor,.rec-vin){padding-left:var(--anio);font-size:var(--t-s);line-height:1.5;color:var(--texto-2)}
#tRecientes tr[data-i] td.rec-motor+td.rec-vin{padding-left:0}
#tRecientes tr[data-i] td.rec-motor.sin-dato+td.rec-vin{padding-left:var(--anio)}
#tRecientes tr[data-i] td.rec-vin{font-size:var(--t-xs);letter-spacing:.02em}
#tRecientes tr[data-i] td.sin-dato{display:none}
#tRecientes tr[data-i] td:last-child{position:absolute;top:50%;right:0;transform:translateY(-50%)}
#tRecientes td.vacio{display:block}

/* Carros recientes necesita más ancho que las cifras del taller */
@media (min-width:961px){#v-inicio .columnas{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}}
#abiertas .tabla td{vertical-align:middle}
#abiertas .tabla td:nth-child(2){min-width:15ch}
#abiertas .tabla td:first-child{width:1%;white-space:nowrap;color:var(--texto-2)}
#abiertas .tabla td:last-child{width:1%;text-align:right}

/* ---------- 3. Resumen del vehículo ---------- */
/* Foto e indicadores a la misma altura: dos filas de indicadores = el marco 4:3 de la foto */
#v-vehiculo .resumen{--foto:340px;grid-template-columns:var(--foto) minmax(0,1fr);gap:var(--e-4) var(--e-5)}
#vFoto figcaption{flex-wrap:nowrap;align-items:flex-start;min-height:20px;line-height:1.4}
#vFoto .foto-mal{flex:none;margin-left:auto;font-size:var(--t-s);color:var(--texto-2);line-height:1.4;text-decoration-color:var(--linea-fuerte);text-decoration-thickness:1px}
#vFoto .foto-mal:hover{color:var(--rojo);text-decoration-color:var(--rojo)}
#vFoto>span{
  flex-direction:column;justify-content:center;padding-top:72px;
  background:var(--hundido) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9ACB1' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17v-4.2l1.7-4.4A2 2 0 0 1 8.600 7h6.800a2 2 0 0 1 1.900 1.400L19 12.800V17'/%3E%3Cpath d='M5 12.800h14M3.500 17h17M6.500 17v2.500M17.500 17v2.500'/%3E%3Cpath d='M7.800 14.900h1.400M14.800 14.900h1.400'/%3E%3C/svg%3E") center calc(50% - 16px)/64px no-repeat
}
#vIndicadores{grid-auto-rows:minmax(calc((var(--foto)*.75 - 3px)/2),auto);align-self:start}
#vIndicadores .indicador{justify-content:center;gap:6px;min-height:0;padding:var(--e-4) var(--e-5)}
#vIndicadores .indicador span{max-width:22ch;min-height:calc(2*1.35em)}
/* Cuando la cajita queda estrecha (foto al lado, pantallas de 700 a 1150 px), la palabra se parte con guion
   («segu-ridad») y no a media palabra sin aviso («segurida d») */
#vIndicadores .indicador{container-type:inline-size}
@container (max-width:150px){
  #vIndicadores .indicador span{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;font-size:.8125rem}
}
#vAviso{grid-column:1/-1;max-width:none;margin:0}

/* Mientras se cargan los datos, indicadores y ficha muestran su forma (sin salto de diseño al llegar) */
#vIndicadores:empty,#vFicha:empty{
  --brillo:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);
  background:var(--brillo) -150% 0/60% 100% no-repeat,var(--superficie-2);
  animation:mm-cargando 1.4s var(--curva) infinite
}
#vIndicadores:empty{min-height:calc(var(--foto)*.75 + 2px)}
#vFicha:empty{min-height:132px}
@keyframes mm-cargando{to{background-position:250% 0,0 0}}
@media (prefers-reduced-motion:reduce){#vIndicadores:empty,#vFicha:empty{animation:none}}

/* Ficha de fábrica: etiqueta arriba, dato debajo */
#vFicha{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));font-variant-numeric:tabular-nums}
#vFicha>div{line-height:1.4}
/* Tableta y escritorio: la última fila se estira hasta el borde (nunca queda una casilla vacía con su marco al final).
   En el celular la ficha va a dos columnas y el último dato, si queda solo, ocupa las dos (más abajo). */
@media (min-width:701px){
  #vFicha{display:flex;flex-wrap:wrap}
  #vFicha>div{flex:1 1 200px}
  #vFicha>.ficha-vacia{flex-basis:100%}
}
#vFicha small{margin-bottom:2px;font-size:var(--t-s);line-height:1.4}
#vFicha>.ficha-vacia{padding:var(--e-4) var(--e-5);font-weight:400;color:var(--texto-2);background:var(--superficie-2)}
#vFicha>.ficha-vacia small{font-weight:650;font-size:var(--t-m);color:var(--texto)}
/* Sin VIN: se escribe aquí mismo, en la regleta de 17 casillas, sin ir al Panel */
#vFicha .ficha-vin{max-width:560px;margin:var(--e-3) 0 var(--e-2)}
#vFicha .ficha-vin input{--celda:24px;flex:1 1 auto;min-height:48px;padding-left:calc(12px + (var(--celda) - 1ch)/2);font-size:var(--t-l);letter-spacing:calc(var(--celda) - 1ch);text-transform:uppercase;background:var(--superficie) repeating-linear-gradient(90deg,var(--linea-fuerte) 0 1px,transparent 1px var(--celda)) 12px 50%/calc(17*var(--celda) + 1px) 20px no-repeat}
#vFicha .ficha-vin input::placeholder{font-family:var(--f-base);font-size:var(--t-m);letter-spacing:0}
#vFicha .ficha-vin .btn{min-height:48px;padding:0 var(--e-5);font-size:var(--t-m)}
#vFicha>.ficha-vacia .ayuda{display:block;margin:0;font-size:var(--t-s)}

/* EPA y Wikipedia: una debajo de otra hasta que hay ancho para leer la tabla en un renglón por versión */
#v-vehiculo .columnas{grid-template-columns:minmax(0,1fr);gap:0}
#vEpa .tabla th.n{white-space:normal}
#vEpa .tabla td:first-child{min-width:14ch}
#vEpa .tabla+.ayuda{margin-top:var(--e-3)}
#vEpa .ayuda,#vWiki .ayuda{margin-bottom:var(--e-2)}
#vWiki .wiki-cab{align-items:baseline}
#vWiki .wiki-cab b{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:var(--t-l)}
#vWiki .wiki-texto{max-width:96ch;padding-right:var(--e-3);scrollbar-width:thin}
#vWiki .wiki .ayuda{margin:var(--e-3) 0 0}
/* Texto de Wikipedia ya limpio: el apartado del motor como título pequeño y sus datos en dos columnas (dato · valor) */
#vWiki .wiki-sub{margin:0 0 var(--e-2);font-family:var(--f-mono);font-stretch:normal;font-size:var(--t-s);font-weight:600;letter-spacing:0;color:var(--texto)}
#vWiki .wiki-sub:not(:first-child){margin-top:var(--e-4)}
#vWiki .wiki-texto p{margin:0 0 var(--e-2)}
#vWiki .wiki-datos{display:grid;grid-template-columns:minmax(10ch,max-content) minmax(0,1fr);gap:var(--e-1) var(--e-4);margin:0 0 var(--e-3)}
#vWiki .wiki-datos dt{color:var(--texto-2)}
#vWiki .wiki-datos dd{margin:0;color:var(--texto);font-variant-numeric:tabular-nums}
@media (max-width:700px){
  #vWiki .wiki-datos{grid-template-columns:minmax(0,1fr);gap:0}
  #vWiki .wiki-datos dd{margin-bottom:var(--e-2)}
}
@media (min-width:1500px){
  #v-vehiculo .columnas{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--e-7)}
}

/* ---------- 4. Tableta y celular ---------- */
@media (max-width:960px){
  /* Una columna: el título de cada bloque ya separa; sin hueco doble entre «Carros recientes» y las cifras */
  #v-inicio .columnas{gap:0}
  /* La foto y los indicadores siguen lado a lado en tableta: no queda un hueco al lado de la foto */
  #v-vehiculo .resumen{--foto:288px;grid-template-columns:var(--foto) minmax(0,1fr)}
  #v-vehiculo .resumen .foto{max-width:none}
  #vIndicadores .indicador{padding:var(--e-3) var(--e-4)}
}
@media (max-width:700px){
  /* Celular: la placa en unos 110 px. Año y nombre en una fila con «Cambiar» como botón de icono;
     debajo, solo el VIN (el motor se queda en Resumen, que es donde se consulta) */
  #placa{
    --vin-alto:32px;
    gap:var(--e-2) var(--e-3);padding:12px 18px;
    background-position:left 7px top 7px,right 7px top 7px,left 7px bottom 7px,right 7px bottom 7px,0 0,0 0;
    background-size:9px 9px,9px 9px,9px 9px,9px 9px,auto,auto
  }
  #placa::after{inset:3px;border-radius:calc(var(--r-3) - 2px)}
  #placa .placa-id{display:flex;gap:10px}
  #placa .placa-anio{font-size:var(--t-m);padding:7px 7px 6px}
  #placa .placa-nombre{font-size:1.1875rem;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:normal}
  /* «Cambiar» se queda con su palabra (un icono ⇄ solo no se entiende); «Nueva orden» pasa a «+ Orden» */
  #placa>.btn-negro{min-height:var(--control);padding:0 10px;gap:6px;font-size:var(--t-s)}
  #placa>.btn-negro .ico{width:18px;height:18px}
  /* En el celular «Nueva orden» va en la barra de abajo, al alcance del pulgar (#barraAbajo) */
  #placa>.placa-orden{display:none}
  #placa .placa-datos{gap:var(--e-1) var(--e-5);padding-top:var(--e-2)}
  #placa .placa-datos>span{gap:var(--e-2)}
  #placa #pMotor{max-width:100%;white-space:normal}
  .cuerpo:not(:has(#v-vehiculo.activa)) #placa .placa-motor{display:none}

  #inVin{--celda:19px;--vin-borde:12px;width:100%}
  #v-inicio .vin-fila .btn{min-width:0}
  #sinVin .ymm{padding:var(--e-4) var(--e-3)}

  /* Carros recientes: cada carro en su bloque (nombre arriba; motor y VIN debajo, solo si se conocen) */
  #tRecientes{--anio:48px}
  /* En el celular motor y VIN van cada uno en su renglón, alineados bajo el nombre */
  #tRecientes tr[data-i] td:is(.rec-motor,.rec-vin),#tRecientes tr[data-i] td.rec-motor+td.rec-vin{flex-basis:100%;padding-left:var(--anio)}
  #tRecientes [data-quitar]{min-height:var(--control);padding:0 var(--e-2)}

  #vFoto .foto-mal{min-height:var(--control);padding:0;margin:calc(-1*var(--e-2)) 0 calc(-1*var(--e-2)) auto}
  #vFicha .ficha-vin input{--celda:17px;padding-left:calc(10px + (var(--celda) - 1ch)/2);background-position:10px 50%;font-size:1rem}

  #v-vehiculo .resumen{grid-template-columns:minmax(0,1fr)}
  #vIndicadores{grid-auto-rows:auto}
  #vIndicadores .indicador{min-height:88px}
  #vIndicadores:empty{min-height:266px}
  #vFicha{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vFicha>div{padding:var(--e-3)}
  #vFicha>div:last-child:nth-child(odd){grid-column:1/-1}
  /* Versiones de la EPA: versión y consumo arriba; transmisión y tracción debajo, en pequeño */
  #vEpa .tabla{display:block;overflow:visible}
  #vEpa .tabla :is(thead,tbody){display:block}
  #vEpa .tabla tr{display:grid;grid-template-columns:minmax(0,1fr) auto}
  #vEpa .tabla th:is(:nth-child(2),:nth-child(3)){display:none}
  #vEpa .tabla td{display:block;min-width:0;border:0;padding:10px var(--e-2) 0}
  #vEpa .tabla td:first-child{min-width:0;font-weight:600}
  #vEpa .tabla td.n{grid-column:2;grid-row:1;padding-left:var(--e-3)}
  #vEpa .tabla td:is(:nth-child(2),:nth-child(3)){grid-row:2;padding-top:2px;padding-bottom:10px;border-bottom:1px solid var(--linea);font-size:var(--t-s);color:var(--texto-2)}
  #vEpa .tabla td:nth-child(3){text-align:right;padding-left:var(--e-3)}
  #vEpa .fila-coincide td:nth-child(2){box-shadow:inset 3px 0 0 var(--amarillo)}
  #vEpa .fila-coincide td:is(:nth-child(2),:nth-child(3)){color:var(--amarillo-texto)}
}
@media (max-width:389px){
  #placa{--celda:15px}
  #inVin{--celda:17px}
}
@media (max-width:359px){
  #placa{--celda:13px}
  #placa #pVin{font-size:var(--t-xs)}
  #inVin{--celda:15px;font-size:1rem}
}
@media (min-width:701px) and (max-width:960px){
  /* Tableta: las cuatro cifras del taller caben en una fila */
  #cifrasTaller{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 5. Pulido final (v11) ---------- */
/* Panel: el VIN a la izquierda y, a la derecha, el carro con el que se seguía trabajando (o los accesos sin VIN) */
#v-inicio .entrada-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-5);align-items:start}
/* Dos columnas solo cuando cabe la regleta del VIN con su botón al lado (si no, la tarjeta va debajo) */
@media (min-width:1240px){
  #v-inicio .entrada-grid{grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:var(--e-6)}
  #v-inicio #inVin{--celda:24px}
}
@media (min-width:1500px){#v-inicio #inVin{--celda:28px}}
#v-inicio .entrada{max-width:none}
.seguir{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-5);border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie-2)}
.seguir:empty{display:none}
.seguir-tit{margin:0;font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.seguir-foto{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:var(--r-2);background:#fff;border:1px solid var(--linea)}
.seguir .fila-botones{margin:0}
/* La placa en pequeño: misma chapa, un renglón */
.placa.placa-mini{--celda:16px;width:100%;max-width:none;min-height:0;margin:0;padding:var(--e-3) var(--e-5);grid-template-columns:minmax(0,1fr);gap:var(--e-1);
  background-size:8px 8px,8px 8px,8px 8px,8px 8px,auto,auto;background-position:left 7px top 7px,right 7px top 7px,left 7px bottom 7px,right 7px bottom 7px,0 0,0 0}
.placa-mini .placa-anio{font-size:var(--t-m);padding:6px 7px 5px}
.placa-mini .placa-nombre{font-size:var(--t-xl);-webkit-line-clamp:1;line-clamp:1}
.placa-mini-dato{font-size:var(--t-s);color:var(--alu-texto-2);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.placa-mini-dato .mono{letter-spacing:.06em;color:var(--alu-texto)}
/* Accesos grandes (sin carro): todo el bloque se toca */
.acceso{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-4);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--superficie);color:var(--texto);text-decoration:none;transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
.acceso:hover{border-color:var(--borde-control);box-shadow:var(--sombra-1)}
.acceso .ico{margin-top:2px;color:var(--texto-2)}
.acceso span{display:flex;flex-direction:column;gap:2px}
.acceso b{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:var(--t-l)}
.acceso small{color:var(--texto-2);line-height:1.4}
/* Primer uso: falta configurar el taller */
#avisoTaller{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-3) var(--e-5);margin-bottom:var(--e-6)}
#avisoTaller>div{flex:1 1 320px}
/* Carros recientes: el que está abierto se marca */
#tRecientes tr.activo{background:var(--amarillo-suave);box-shadow:inset 3px 0 0 var(--amarillo)}
#tRecientes tr.activo:hover{background:var(--amarillo-suave)}
.rec-abierto{display:inline-block;margin-left:var(--e-2);padding:0 6px;border-radius:var(--r-1);background:var(--tinta);color:var(--sobre-tinta);font-size:var(--t-xs);font-weight:600;line-height:1.6;text-indent:0;vertical-align:2px}

/* Resumen: los retiros son lo único urgente (rojo); un cero no se enseña como cifra, se dice qué hacer */
#vIndicadores .indicador.alerta{background:var(--rojo-fondo)}
#vIndicadores .indicador.alerta b{color:var(--rojo)}
#vIndicadores .indicador.alerta span{color:var(--rojo);font-weight:600}
#vIndicadores .indicador.alerta:hover b{box-shadow:inset 0 -3px 0 var(--rojo)}
#vIndicadores .indicador.accion b{color:var(--texto-3)}
#vIndicadores .indicador.accion span{color:var(--texto);font-weight:600;text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
body.invitado #vIndicadores{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Foto: una sola pieza (sin doble marco). La de estudio va entera sobre blanco; la de calle llena el marco */
#vFoto img{background-color:#fff}
#vFoto img.foto-calle,.foto img.foto-calle{object-fit:cover;padding:0;background:var(--hundido)}
#vFoto figcaption{font-size:var(--t-xs);color:var(--texto-3)}
#vFoto .foto-mal{font-size:var(--t-xs);font-weight:500}
.historial-vacio{max-width:none;margin:0;padding:var(--e-3) 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}

@media (max-width:960px){
  .seguir{padding:var(--e-4)}
}
@media (max-width:700px){
  .placa.placa-mini{padding:var(--e-3) var(--e-4)}
  #avisoTaller .btn-gris{width:100%}
  body.invitado #vIndicadores .indicador{min-height:80px;padding:var(--e-3)}
  body.invitado #vIndicadores .indicador b{font-size:var(--t-xl)}
}
/* Una columna (tableta): la tarjeta del Panel se reparte a lo ancho en vez de apilarse */
@media (min-width:701px) and (max-width:1239px){
  .seguir:has(.acceso){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .seguir:has(.placa-mini):has(.seguir-foto){display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;column-gap:var(--e-5)}
  .seguir:has(.placa-mini)>.seguir-foto{grid-column:1;grid-row:2/span 2}
  .seguir-tit{grid-column:1/-1}
}