/* =====================================================================
   MECHANIC MAX — Sistema de diseño «Placa de chasis» (tema claro)
   Base única de la app. La guía viva está en guia-estilo.html.

   Idea: una herramienta de taller sobria y ordenada, en blanco y grises
   neutros. Lo único con carácter es la placa del vehículo (#placa):
   aluminio, remaches, letras troqueladas y el VIN en casillas.
   El amarillo es la marca y se usa poco: acción principal, estado
   activo y los detalles de la placa. Nunca como fondo grande.

   Índice
     1. Tokens               8. Bloques y listas
     2. Base                 9. Fotos, galerías y diagramas
     3. Estructura          10. Vistas (valores de partida)
     4. Placa del vehículo  11. Diálogos, visor y avisos
     5. Texto y rejillas    12. Página de diagramas
     6. Controles           13. Tableta y celular
     7. Datos               14. Impresión y movimiento reducido

   Los ajustes finos de cada vista viven en css/inicio-vehiculo.css,
   css/consulta.css, css/diagramas.css y css/taller.css (se cargan después).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;

  /* Color: superficies */
  --fondo:#FFFFFF;          /* lienzo de la app */
  --lateral:#F5F5F2;        /* riel de navegación */
  --superficie:#FFFFFF;     /* controles, diálogos, bloques elevados */
  --superficie-2:#F7F7F4;   /* bloque tranquilo, cabecera de tabla, hover */
  --hundido:#EFEFEB;        /* marcos de foto, pistas de progreso, casillas */
  /* Color: líneas */
  --linea:#E4E4DF;          /* filetes entre filas y bloques */
  --linea-fuerte:#CDCDC6;   /* borde de bloque, separador marcado */
  --borde-control:#8C8F94;  /* borde de campos y botones grises (3:1 sobre blanco) */
  /* Color: texto */
  --texto:#17191C;          /* texto principal */
  --texto-2:#50545A;        /* texto secundario, ayudas, etiquetas */
  --texto-3:#6B6F76;        /* texto de apoyo: marcadores, deshabilitado */
  --tenue:var(--texto-2);   /* nombre antiguo: lo usa app.js en un estilo en línea */
  /* Color: tinta (superficies oscuras puntuales) */
  --tinta:#17191C;
  --tinta-2:#2C3035;
  --sobre-tinta:#FFFFFF;
  /* Color: marca */
  --amarillo:#FFC400;       /* acción principal, activo, detalle de la placa */
  --amarillo-hover:#FFD23F;
  --amarillo-activo:#EDB600;
  --amarillo-borde:#D4A200;
  --amarillo-suave:#FFF4CC; /* resaltado de fila, marca de búsqueda, aviso */
  --amarillo-texto:#6B4E00; /* texto sobre amarillo suave */
  --sobre-amarillo:#17191C;
  /* Color: significado */
  --rojo:#B3261E;           /* peligro, error, retiros */
  --rojo-fondo:#FCEEEC;
  --rojo-borde:#E5ADA7;
  --verde:#177245;          /* correcto, servidor activo */
  --verde-fondo:#E7F4EC;
  /* Color: aluminio de la placa */
  --alu-1:#F1F3F5;
  --alu-2:#DFE2E6;
  --alu-3:#CED2D7;
  --alu-borde:#A2A7AE;
  --alu-texto:#22262A;
  --alu-texto-2:#474D54;
  --alu-casilla:#C6CBD1;

  /* Tipografía */
  --f-base:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-titulo:"Archivo","Segoe UI",system-ui,sans-serif;  /* va con font-stretch:var(--ancho-titulo) */
  --f-mono:"Martian Mono",Consolas,"Courier New",monospace;
  --ancho-titulo:112%;      /* Archivo expandida para títulos y cifras */
  --t-xs:.75rem;            /* 12  atajo de teclado, leyendas mínimas */
  --t-s:.8125rem;           /* 13  etiquetas, cabeceras de tabla, metadatos */
  --t-m:.9375rem;           /* 15  cuerpo */
  --t-l:1.0625rem;          /* 17  h3, texto destacado */
  --t-xl:1.3125rem;         /* 21  h2 */
  --t-2xl:1.75rem;          /* 28  h1 */
  --t-3xl:2.25rem;          /* 36  título de entrada, cifras grandes */
  --linea-texto:1.5;
  --linea-titulo:1.15;

  /* Espacio (base 4 px) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:40px; --e-8:48px; --e-9:64px;

  /* Medidas de la estructura */
  --riel-ancho:264px;
  --barra-alto:64px;
  --margen:32px;            /* margen lateral del contenido (24 tableta, 16 celular) */
  --ancho-max:1240px;
  --control:40px;           /* alto de botones y campos: también el mínimo táctil */

  /* Radios y sombras */
  --r-1:4px;                /* sellos, chips, casillas */
  --r-2:6px;                /* controles */
  --r-3:10px;               /* bloques, diálogos, placa */
  --r:var(--r-2);
  --sombra-1:0 1px 2px rgba(23,25,28,.08);
  --sombra-2:0 6px 20px rgba(23,25,28,.10),0 1px 3px rgba(23,25,28,.08);
  --sombra-3:0 24px 64px rgba(23,25,28,.24),0 2px 8px rgba(23,25,28,.10);

  /* Capas y movimiento */
  --z-barra:20; --z-velo:30; --z-riel:40; --z-toast:90;
  --dur:.16s;
  --curva:cubic-bezier(.2,0,0,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--barra-alto) + var(--e-4))}
html,body{margin:0;background:var(--fondo);color:var(--texto)}
body{font:400 var(--t-m)/var(--linea-texto) var(--f-base);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{cursor:pointer}
img,svg,canvas{max-width:100%}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);line-height:var(--linea-titulo);letter-spacing:-.01em;color:var(--texto);text-wrap:balance}
h1{font-size:var(--t-2xl);font-weight:750;margin:0 0 var(--e-4)}
h1+.ayuda{margin-top:calc(-1*var(--e-2))}
h2{font-size:var(--t-xl);font-weight:700;margin:var(--e-7) 0 var(--e-3)}
h3{font-size:var(--t-l);font-weight:700;margin:var(--e-5) 0 var(--e-2)}
h4{font-size:var(--t-m);font-weight:700;margin:var(--e-4) 0 var(--e-2)}
p{margin:0 0 var(--e-3)}
small{font-size:var(--t-s)}
b,strong{font-weight:650}

a{color:var(--texto);text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--tinta)}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
::selection{background:var(--amarillo);color:var(--sobre-amarillo)}

.mono{font-family:var(--f-mono);font-stretch:90%;font-size:.92em;letter-spacing:0;font-variant-numeric:tabular-nums}
mark{background:var(--amarillo-suave);color:inherit;box-shadow:inset 0 -2px 0 var(--amarillo);padding:0 2px;border-radius:2px}
kbd{font:500 var(--t-xs)/1 var(--f-mono);font-stretch:90%;color:var(--texto-2);background:var(--superficie-2);border:1px solid var(--linea-fuerte);border-bottom-width:2px;border-radius:var(--r-1);padding:4px 6px;white-space:nowrap}
summary{cursor:pointer;font-weight:600;border-radius:var(--r-1)}

/* Iconos: <svg class="ico" aria-hidden="true"><use href="#i-nombre"/></svg> (el sprite está en index.html) */
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-s{width:16px;height:16px}

/* ---------- 3. Estructura: riel, barra superior, zona principal ---------- */
.app{display:grid;grid-template-columns:var(--riel-ancho) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.riel{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--lateral);border-right:1px solid var(--linea);overflow-y:auto;overscroll-behavior:contain}

.logo{display:flex;align-items:center;gap:var(--e-3);height:var(--barra-alto);flex:none;padding:0 var(--e-5);color:var(--texto);text-decoration:none;font-family:var(--f-titulo);font-stretch:118%;font-weight:800;font-size:var(--t-l);letter-spacing:-.015em;line-height:1;white-space:nowrap}
.logo-marca{width:28px;height:28px;flex:none}
.logo-a,.logo-b{display:inline-block}
.logo-b{margin-left:.25em}
.logo:focus-visible{outline-offset:-4px}
.riel-cab{display:flex;align-items:center;justify-content:space-between;flex:none}
.riel .riel-cerrar{display:none;margin-right:var(--e-3)}

#menu{display:flex;flex-direction:column;gap:2px;padding:var(--e-2) var(--e-3) var(--e-4)}
#menu .grupo{margin:var(--e-4) var(--e-3) var(--e-1);font-size:var(--t-s);font-weight:500;color:var(--texto-3)}
#menu .grupo:first-child{margin-top:var(--e-1)}
#menu a{position:relative;display:flex;align-items:center;gap:var(--e-3);min-height:var(--control);padding:var(--e-2) var(--e-3);border-radius:var(--r-2);color:var(--texto-2);text-decoration:none;font-weight:500;line-height:1.25;transition:background var(--dur) var(--curva),color var(--dur) var(--curva)}
#menu a .ico{color:var(--texto-3)}
#menu a:hover{background:rgba(23,25,28,.06);color:var(--texto)}
#menu a:hover .ico{color:var(--texto)}
#menu a.activo{background:var(--superficie);color:var(--texto);font-weight:600;box-shadow:var(--sombra-1),0 0 0 1px var(--linea)}
#menu a.activo .ico{color:var(--texto)}
#menu a.activo::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 3px 3px 0;background:var(--amarillo)}
/* Sin carro: las opciones del vehículo se leen (contraste 4,5:1) pero van en gris; al tocarlas, el Panel explica qué falta */
#menu a.req.bloq{color:var(--texto-3)}
#menu a.req.bloq .ico{opacity:.7}
#menu .grupo-nota{display:block;margin:0 var(--e-3) var(--e-1);font-size:var(--t-xs);font-weight:400;color:var(--texto-3)}
#menu:not(:has(a.req.bloq)) .grupo-nota{display:none}
#menu a>span:not(.cuenta){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#menu a .cuenta{margin-left:auto}

.estado-servidor{margin-top:auto;display:flex;align-items:center;gap:var(--e-2);padding:var(--e-4) var(--e-5);font-size:var(--t-s);color:var(--texto-2);border-top:1px solid var(--linea)}
.estado-servidor::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--texto-3)}
.estado-servidor.ok::before{background:var(--verde)}
.estado-servidor.mal{color:var(--rojo);font-weight:600}
.estado-servidor.mal::before{background:var(--rojo)}

.cuerpo{min-width:0;display:flex;flex-direction:column}
.barra{position:sticky;top:0;z-index:var(--z-barra);display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-2) var(--e-4);min-height:var(--barra-alto);padding:var(--e-3) var(--margen);background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linea)}
.barra .logo{display:none}
.boton-menu{display:none;align-items:center;justify-content:center;width:var(--control);height:var(--control);flex:none;padding:0;border:1px solid var(--borde-control);border-radius:var(--r-2);background:var(--superficie);color:var(--texto)}
.boton-menu:hover{background:var(--superficie-2)}
.velo-menu{display:none}

.buscador-global{position:relative;flex:1 1 320px;max-width:720px;display:flex;align-items:center}
.buscador-global .ico{position:absolute;left:12px;color:var(--texto-3);pointer-events:none}
.buscador-global input{width:100%;padding-left:40px;padding-right:76px;background:var(--superficie-2);border-color:var(--linea-fuerte);text-overflow:ellipsis}
.buscador-global input:hover{border-color:var(--borde-control)}
.buscador-global input:focus{background:var(--superficie)}
.buscador-global kbd{position:absolute;right:8px}
@media (hover:none),(max-width:1024px){.buscador-global kbd{display:none}.buscador-global input{padding-right:12px}}

main{width:100%;max-width:calc(var(--ancho-max) + 2*var(--margen));padding:var(--e-6) var(--margen) var(--e-9)}
.vista{display:none}
.vista.activa{display:block}

/* ---------- 4. Placa del vehículo: la firma visual ----------
   Aluminio cepillado, cuatro remaches, año en casilla de tinta, nombre troquelado
   y el VIN carácter por carácter en casillas hundidas (solo CSS: letra de ancho fijo
   sobre un fondo repetido cada «1ch + separación»). */
.placa{
  --remache:radial-gradient(circle at 35% 30%,#FDFDFE 0 18%,#B9BEC5 46%,#8D939A 62%,transparent 66%);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--e-3) var(--e-5);
  width:calc(100% - 2*var(--margen));max-width:var(--ancho-max);min-height:88px;margin:var(--e-5) var(--margen) 0;padding:var(--e-4) var(--e-7);
  color:var(--alu-texto);border:1px solid var(--alu-borde);border-radius:var(--r-3);
  background:
    var(--remache) left 14px top 14px/11px 11px no-repeat,
    var(--remache) right 14px top 14px/11px 11px no-repeat,
    var(--remache) left 14px bottom 14px/11px 11px no-repeat,
    var(--remache) right 14px bottom 14px/11px 11px no-repeat,
    repeating-linear-gradient(0deg,rgba(255,255,255,.34) 0 1px,rgba(120,128,138,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,var(--alu-1),var(--alu-2) 52%,var(--alu-3));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.06),0 1px 2px rgba(23,25,28,.10),0 8px 24px -12px rgba(23,25,28,.28);
}
.placa-id{display:flex;align-items:center;gap:var(--e-4);min-width:0}
.placa-anio{flex:none;font:650 var(--t-xl)/1 var(--f-mono);font-stretch:90%;color:var(--amarillo);background:var(--tinta);border-radius:var(--r-1);padding:9px 10px 8px;box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.7)}
.placa-anio:empty{display:none}
.placa-nombre{min-width:0;font-family:var(--f-titulo);font-stretch:122%;font-weight:800;font-size:clamp(1.375rem,.85rem + 1.25vw,2rem);line-height:1.08;letter-spacing:-.015em;color:var(--alu-texto);text-shadow:0 1px 0 rgba(255,255,255,.75);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-wrap:balance}
.placa-datos{display:flex;align-items:flex-start;gap:var(--e-5);min-width:0;padding-left:var(--e-5);border-left:1px solid rgba(23,25,28,.16);box-shadow:-1px 0 0 rgba(255,255,255,.75)}
.placa-datos>span{display:flex;flex-direction:column;gap:6px;min-width:0}
.placa-datos small{font-size:var(--t-s);font-weight:500;line-height:1;color:var(--alu-texto-2)}
.placa-datos b{font-size:var(--t-m);font-weight:650;line-height:24px;color:var(--alu-texto);text-shadow:0 1px 0 rgba(255,255,255,.7);max-width:26ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.placa-datos b.mono{
  --paso:5px;                       /* separación entre casillas */
  font-size:var(--t-s);font-weight:600;font-stretch:87.5%;line-height:24px;letter-spacing:var(--paso);text-shadow:none;max-width:none;overflow:visible;
  min-width:calc(17*(1ch + var(--paso)));padding-left:calc(var(--paso)/2 - 1px);
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(1ch + var(--paso) - 2px),var(--alu-2) calc(1ch + var(--paso) - 2px) calc(1ch + var(--paso))),
    linear-gradient(180deg,rgba(23,25,28,.26),rgba(23,25,28,0) 3px),
    var(--alu-casilla);
}
.placa .btn-negro{box-shadow:0 1px 0 rgba(255,255,255,.6)}

/* ---------- 5. Texto de apoyo y rejillas ---------- */
.ayuda{color:var(--texto-2);margin:0 0 var(--e-4);max-width:72ch}
.ayuda.error{color:var(--rojo);font-weight:600}
.cabecera{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e-4) var(--e-5);margin-bottom:var(--e-5)}
.cabecera>div:first-child{min-width:0}
.cabecera .ayuda{margin-bottom:0}
.cabecera>.btn,.cabecera>label.btn{flex:none}
.columnas{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--e-7)}
.columnas>div>h2:first-child{margin-top:var(--e-7)}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-4)}
.rejilla .ancho{grid-column:1/-1}
.fila-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin:var(--e-3) 0}
.fila-botones>:is(.btn,.btn-gris,.btn-negro,.btn-peligro){max-width:100%;white-space:normal;text-align:center}
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin:0 0 var(--e-4)}
.filtros>input{flex:1 1 240px;min-width:0}
.espacio{flex:1}
.leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);color:var(--texto-2);font-size:var(--t-s);margin-bottom:var(--e-2)}
.leyenda .sello:not(:first-child){margin-left:var(--e-3)}
.mas{display:flex;justify-content:center;margin:var(--e-4) 0}

/* ---------- 6. Controles ---------- */
label{display:flex;flex-direction:column;gap:6px;font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
label.check{flex-direction:row;align-items:center;gap:var(--e-3);min-height:var(--control);font-size:var(--t-m);font-weight:400;color:var(--texto);cursor:pointer}
label.en-linea{flex-direction:row;align-items:center;gap:var(--e-2);white-space:nowrap}
label.en-linea select,label.en-linea input{min-width:0}

input,select,textarea{min-width:0;min-height:var(--control);padding:8px 12px;font-size:var(--t-m);font-weight:400;line-height:1.4;color:var(--texto);background:var(--superficie);border:1px solid var(--borde-control);border-radius:var(--r-2);transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
textarea{min-height:72px;resize:vertical}
select{padding-right:32px;appearance:none;-webkit-appearance:none;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");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;text-overflow:ellipsis;white-space:nowrap}
::placeholder{color:var(--texto-3);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--tinta-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta),0 0 0 4px var(--amarillo)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--superficie-2);border-color:var(--linea-fuerte);color:var(--texto-3);cursor:not-allowed}
input[readonly]{background:var(--superficie-2)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;flex:none;padding:0;accent-color:var(--tinta);cursor:pointer}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
input[type=number]{font-variant-numeric:tabular-nums}
#formOrden input[name=vin]{font-family:var(--f-mono);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:slashed-zero}
.campo-grande{width:100%;min-height:56px;padding:12px 16px;font-size:var(--t-xl)}
.campo-grande.mono{font-size:var(--t-l)}
.filtro-col{width:100%;margin-bottom:var(--e-2)}

/* Botones: .btn (principal, uno por pantalla), .btn-gris (secundario), .btn-negro (sobre la placa),
   .btn-peligro (borrar), .btn-texto (acción en línea) */
.btn,.btn-gris,.btn-negro,.btn-peligro{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--control);padding:8px 16px;border:1px solid transparent;border-radius:var(--r-2);font-family:var(--f-base);font-size:var(--t-m);font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background var(--dur) var(--curva),border-color var(--dur) var(--curva),color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
.btn{background:var(--amarillo);border-color:var(--amarillo-borde);color:var(--sobre-amarillo);box-shadow:var(--sombra-1)}
.btn:hover{background:var(--amarillo-hover)}
.btn:active{background:var(--amarillo-activo);box-shadow:none}
.btn-gris{background:var(--superficie);border-color:var(--borde-control);color:var(--texto)}
.btn-gris:hover{background:var(--superficie-2);border-color:var(--tinta-2)}
.btn-gris:active{background:var(--hundido)}
.btn-negro{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
.btn-negro:hover{background:var(--tinta-2);border-color:var(--tinta-2)}
.btn-peligro{background:var(--superficie);border-color:var(--rojo-borde);color:var(--rojo)}
.btn-peligro:hover{background:var(--rojo-fondo);border-color:var(--rojo)}
.btn-texto{display:inline-flex;align-items:center;gap:var(--e-1);padding:0;border:0;background:none;color:var(--texto);font-family:var(--f-base);font-size:inherit;font-weight:600;line-height:1.4;text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.btn-texto:hover{text-decoration-color:var(--tinta)}
:is(.btn,.btn-gris,.btn-negro,.btn-peligro):disabled,:is(.btn,.btn-gris,.btn-negro,.btn-peligro)[aria-disabled=true]{background:var(--superficie-2);border-color:var(--linea-fuerte);color:var(--texto-3);box-shadow:none;cursor:not-allowed}
label.btn:focus-within{outline:2px solid var(--tinta);outline-offset:2px}

/* Pestañas (grupo de botones excluyentes) */
.pestanas{display:inline-flex;max-width:100%;padding:3px;gap:2px;background:var(--hundido);border-radius:calc(var(--r-2) + 2px)}
.pestanas button{min-height:34px;padding:6px 14px;border:0;border-radius:var(--r-1);background:none;color:var(--texto-2);font-weight:600;font-size:var(--t-s);white-space:nowrap;transition:background var(--dur) var(--curva),color var(--dur) var(--curva)}
.pestanas button:hover{color:var(--texto)}
.pestanas button.activa{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-1),inset 0 -2px 0 var(--amarillo)}

/* Atajos y chips */
.atajos{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-4)}
.atajos .btn-gris{min-height:34px;padding:6px 12px;font-size:var(--t-s);font-weight:500;border-color:var(--linea-fuerte)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:var(--e-1);min-height:32px;padding:0 4px 0 10px;font:600 var(--t-s)/1 var(--f-mono);font-stretch:90%;background:var(--hundido);border:1px solid var(--linea-fuerte);border-radius:var(--r-1)}
.chip a{color:var(--texto);text-decoration:none}
.chip a:hover{text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px}
.chip button{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--r-1);background:none;color:var(--texto-2);font-size:var(--t-xs)}
.chip button:hover{background:var(--superficie);color:var(--rojo)}
.chip-nuevo{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-2)}
.chip-nuevo input{width:220px;max-width:100%;text-transform:uppercase}
.chip-nuevo input::placeholder{text-transform:none}

/* ---------- 7. Datos: tablas, sellos, cifras ---------- */
.tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabla th{padding:var(--e-2) var(--e-3);font-size:var(--t-s);font-weight:600;line-height:1.3;color:var(--texto-2);text-align:left;vertical-align:bottom;white-space:nowrap;border-bottom:1px solid var(--linea-fuerte)}
.tabla td{padding:10px var(--e-3);vertical-align:top;border-bottom:1px solid var(--linea)}
.tabla th:first-child,.tabla td:first-child{padding-left:var(--e-2)}
.tabla th:last-child,.tabla td:last-child{padding-right:var(--e-2)}
.tabla .n{text-align:right;white-space:nowrap}
.tabla small{display:block;color:var(--texto-2);font-size:var(--t-s)}
.tabla tbody tr{transition:background var(--dur) var(--curva)}
.tabla tbody tr:is([data-id],[data-i],[data-nuevo]){cursor:pointer}
.tabla tbody tr:is([data-id],[data-i],[data-nuevo]):hover td{background:var(--superficie-2)}
.tabla tbody tr[tabindex]:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
.tabla td.vacio{border:1px dashed var(--linea-fuerte)}
.tabla .btn-texto{font-weight:500;text-decoration-color:var(--linea-fuerte)}
.tabla .btn-texto:hover{text-decoration-color:var(--tinta)}
.fila-coincide td{background:var(--amarillo-suave)}
.fila-coincide td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}
.tabla-marco{overflow-x:auto}
.tabla-ordenes td:first-child{white-space:nowrap}

.lineas{width:100%;min-width:560px;border-collapse:collapse}
.lineas th{padding:var(--e-1);font-size:var(--t-s);font-weight:600;color:var(--texto-2);text-align:left;white-space:nowrap}
.lineas td{padding:3px var(--e-1)}
.lineas input,.lineas select{width:100%}
.lineas td:nth-child(1){width:150px}
.lineas td:nth-child(3){width:96px}
.lineas td:nth-child(4){width:112px}
.lineas td:nth-child(5){width:104px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.lineas .n{text-align:right}
.lineas button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-1);background:none;color:var(--texto-2)}
.lineas button:hover{background:var(--rojo-fondo);color:var(--rojo)}
.totales{width:300px;max-width:100%;margin:var(--e-4) 0 0 auto;font-variant-numeric:tabular-nums}
.totales div{display:flex;justify-content:space-between;gap:var(--e-4);padding:3px 0;color:var(--texto-2)}
.totales .gran{margin-top:var(--e-2);padding-top:var(--e-2);border-top:2px solid var(--tinta);color:var(--texto);font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:var(--t-xl);font-weight:750}

/* Sellos y cuentas */
.sello,.estado{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 8px;border:1px solid transparent;border-radius:var(--r-1);font-size:var(--t-xs);font-weight:600;line-height:1.3;white-space:nowrap;vertical-align:middle}
.sello.ok{background:var(--amarillo);border-color:var(--amarillo-borde);color:var(--sobre-amarillo)}
.sello.no{background:var(--superficie);border:1px dashed var(--borde-control);color:var(--texto-2)}
.sello.fabrica{background:var(--hundido);border-color:var(--linea-fuerte);color:var(--texto)}
.estado::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:currentColor}
.e-Presupuesto{background:var(--superficie);border-color:var(--linea-fuerte);color:var(--texto-2)}
.e-En{background:var(--amarillo-suave);border-color:#EBD27A;color:var(--amarillo-texto)}
.e-Terminado{background:var(--verde-fondo);border-color:#B5DCC4;color:var(--verde)}
.e-Pagado{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
.cuenta{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 6px;border-radius:var(--r-1);background:var(--hundido);color:var(--texto-2);font:500 var(--t-xs)/1.3 var(--f-mono);font-stretch:90%;letter-spacing:0;vertical-align:middle}
.cuenta:empty{display:none}

/* Cifras en rejilla unida por filetes */
.cifras,.indicadores,.ficha{display:grid;gap:1px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-3);overflow:hidden}
.cifras>div,.indicador,.ficha>div{box-shadow:0 0 0 1px var(--linea)}
.cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
.cifras div{display:flex;flex-direction:column;gap:var(--e-1);padding:var(--e-4);background:var(--superficie)}
.cifras b,.indicador b{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:var(--t-2xl);font-weight:750;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifras span,.indicador span{font-size:var(--t-s);color:var(--texto-2);line-height:1.35}
.bib-cifras{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-6);color:var(--texto-2)}
.bib-cifras b{margin-right:6px;font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:var(--t-xl);font-weight:750;color:var(--texto);font-variant-numeric:tabular-nums}

/* Progreso */
.progreso{height:8px;margin:var(--e-3) 0 var(--e-2);background:var(--hundido);border-radius:4px;overflow:hidden}
.progreso span{display:block;height:100%;min-width:4px;background:var(--amarillo);border-radius:4px;box-shadow:inset 0 0 0 1px var(--amarillo-borde);transition:width .4s var(--curva)}

/* Barras de frecuencia */
.barras{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--e-5)}
.barra-fila{display:grid;grid-template-columns:minmax(160px,280px) minmax(0,1fr) 48px 16px;align-items:center;gap:var(--e-3);width:100%;min-height:36px;cursor:pointer;padding:var(--e-1) var(--e-2);border:0;border-radius:var(--r-1);background:none;font-size:var(--t-s);text-align:left;color:var(--texto)}
.barra-fila:hover{background:var(--superficie-2)}
.barra-fila .fondo{height:10px;background:var(--hundido);border-radius:2px;overflow:hidden}
.barra-fila .relleno{height:100%;background:var(--texto-3);border-radius:2px;transition:background var(--dur) var(--curva)}
.barra-fila:is(:hover,:focus-visible) .relleno{background:var(--tinta)}
.barra-fila::after{content:"";width:7px;height:7px;justify-self:center;border-right:1.75px solid var(--texto-3);border-top:1.75px solid var(--texto-3);transform:rotate(45deg)}
.barra-fila:is(:hover,:focus-visible)::after{border-color:var(--tinta)}
.barra-fila .n{text-align:right;color:var(--texto-2);font-variant-numeric:tabular-nums}

/* ---------- 8. Bloques y listas ---------- */
/* Estado vacío: dice qué pasa y qué hacer */
.vacio{padding:var(--e-5);border:1px dashed var(--linea-fuerte);border-radius:var(--r-3);background:var(--superficie-2);color:var(--texto-2);max-width:none}
.vacio a{font-weight:600}
/* Vacío con acción: icono, frase y el botón que lo resuelve, centrados */
.vacio-accion{display:flex;flex-direction:column;align-items:center;gap:var(--e-3);padding:var(--e-6) var(--e-5);text-align:center}
.vacio-accion>.ico{width:24px;height:24px;color:var(--texto-3)}
.vacio-accion>p{margin:0;max-width:52ch}

/* Avisos */
/* Aviso: bloque neutro con su icono (el color va en el icono, no en el fondo ni en una franja) */
.aviso,.aviso-mmd{--aviso-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4E00' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.2h.01'/%3E%3C/svg%3E");
  padding:var(--e-3) var(--e-4) var(--e-3) 44px;border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--superficie-2) var(--aviso-ico) 14px 13px/20px 20px no-repeat;color:var(--texto)}
.aviso{margin-bottom:var(--e-4)}
.aviso-mmd{margin:var(--e-3) 0 0;font-size:var(--t-m)}

/* Bloque tranquilo: agrupa un estado o un formulario */
.tarjeta-bib,.wiki,.mmd-panel,.compartir,.cat-ficha{background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-3);padding:var(--e-4) var(--e-5)}
.tarjeta-bib{display:flex;flex-direction:column;gap:var(--e-3);margin-bottom:var(--e-4)}
.tarjeta-bib:empty{display:none}
.tarjeta-bib .fila-botones,.tarjeta-bib .ayuda{margin:0}
.compartir{margin:var(--e-4) 0 var(--e-5)}
.compartir h2{margin-top:0}
.enlace-compartir{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);margin:var(--e-3) 0 var(--e-2)}
.enlace-compartir input{flex:1 1 240px;min-width:0;font-family:var(--f-mono);font-stretch:90%;font-size:var(--t-s)}

/* Listas de documentos: filas separadas por filetes, sin tarjetas */
.bol-lista{display:flex;flex-direction:column}
.bol,.resultado,.queja{padding:var(--e-4) 0;border-bottom:1px solid var(--linea)}
.bol:first-child,.resultado:first-child,.queja:first-child{border-top:1px solid var(--linea)}
.bol-cab{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3)}
.bol-num{font:600 var(--t-s)/1.3 var(--f-mono);font-stretch:90%;color:var(--texto)}
.bol-fecha{font-size:var(--t-s);color:var(--texto-2);font-variant-numeric:tabular-nums}
.bol-comp{padding:1px 8px;border:1px solid var(--linea-fuerte);border-radius:var(--r-1);font-size:var(--t-xs);font-weight:500;color:var(--texto-2);line-height:1.5}
.bol p,.resultado p,.queja p{margin:var(--e-2) 0 var(--e-3);max-width:90ch;color:var(--texto)}
.bol>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.bol:focus-within>p{-webkit-line-clamp:unset;line-clamp:none}
.queja p{margin-bottom:0}
.bol .ayuda,.resultado .ayuda{font-size:var(--t-s)}
.usar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px dashed var(--linea-fuerte)}
.usar .ayuda{margin:0}

/* Retiros de seguridad: el rojo es solo para esto */
.retiro{margin-bottom:var(--e-3);padding:var(--e-4) var(--e-5);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--superficie)}
.retiro h3{display:flex;align-items:baseline;gap:var(--e-2);margin:0 0 var(--e-2)}
.retiro h3::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--rojo);transform:translateY(-2px)}
.retiro dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--e-2) var(--e-4);margin:var(--e-3) 0 0}
.retiro dt{font-size:var(--t-s);font-weight:600;color:var(--texto-2);padding-top:2px}
.retiro dd{margin:0;max-width:90ch}

/* Fuentes oficiales */
.fuente{padding:var(--e-5) 0;border-bottom:1px solid var(--linea)}
.fuente:first-child{border-top:1px solid var(--linea)}
.fuente-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3)}
.fuente h3{margin:0}
.fuente p{margin:var(--e-2) 0 0;max-width:90ch;color:var(--texto-2)}
.fuente .fila-botones{margin-bottom:0}
.fuente-propia{margin-top:var(--e-4);padding:var(--e-5);border:1px solid var(--linea-fuerte);border-radius:var(--r-3);background:var(--superficie-2)}
/* «Gratis» e «Incluido» son buenas noticias, no la acción principal: en verde, no en amarillo */
.fuente-cab .sello.ok{background:var(--verde-fondo);border-color:#B5DCC4;color:var(--verde)}
.fuente a[target=_blank] .ico{width:16px;height:16px}
.fuente-propia .btn{white-space:normal;text-align:center}
.lista-oficial{list-style:none;margin:var(--e-3) 0 0;padding:0;display:flex;flex-direction:column}
.lista-oficial li{display:flex;flex-direction:column;gap:2px;padding:var(--e-2) 0;border-top:1px solid var(--linea)}
.lista-oficial a{font-weight:600}
.lista-oficial small{color:var(--texto-2)}
.mas-oficial{margin-top:var(--e-2)}

/* Wikipedia */
.wiki-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-2) var(--e-3);margin-bottom:var(--e-2)}
.wiki-texto{max-height:300px;overflow:auto;font-size:var(--t-s);line-height:1.55;color:var(--texto-2)}

/* Guía de diagnóstico dentro de un código */
.guia{margin-top:var(--e-5);padding-top:var(--e-4);border-top:1px solid var(--linea)}
.guia h3{margin:0 0 var(--e-1)}
.guia-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--e-5);margin-top:var(--e-2)}
.guia ul,.guia ol{margin:var(--e-2) 0 0;padding-left:20px}
.guia li{margin:var(--e-1) 0}
.guia ol li::marker{font-weight:700;font-variant-numeric:tabular-nums}
.herr{margin:var(--e-3) 0 0;font-size:var(--t-s);color:var(--texto-2)}

/* ---------- 9. Fotos, galerías y diagramas ---------- */
/* Marco de foto: 4:3, fondo neutro; sirve para fotos de estudio sin fondo y para fotos normales */
.foto{display:flex;flex-direction:column;gap:var(--e-2);margin:0;min-width:0}
.foto img,.foto>span{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;border:1px solid var(--linea);border-radius:var(--r-3);background:var(--hundido)}
/* Mientras llega la foto, el marco enseña una silueta neutra de carro (la foto la tapa al cargar) */
.foto img{height:auto;object-fit:contain;padding:var(--e-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4B7B1' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17v-4.2l1.7-4.4A2 2 0 0 1 8.6 7h6.8a2 2 0 0 1 1.9 1.4L19 12.8V17'/%3E%3Cpath d='M5 12.8h14M3.5 17h17M6.5 17v2.5M17.5 17v2.5'/%3E%3Cpath d='M7.8 14.9h1.4M14.8 14.9h1.4'/%3E%3C/svg%3E");background-position:center;background-size:40%;background-repeat:no-repeat}
.foto img.cargada{background-image:none}   /* ya llegó: las fotos de estudio no tienen fondo y la silueta se vería detrás */
.foto>span{color:var(--texto-3);font-size:var(--t-s)}
.foto figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-1) var(--e-3);font-size:var(--t-xs);color:var(--texto-2)}
.foto-mal{font-size:var(--t-xs);font-weight:500}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--e-3)}
.diag-grupo{margin-bottom:var(--e-6)}
.miniatura,.esquema,.mmd-fig{display:flex;flex-direction:column;margin:0;min-width:0;border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie);overflow:hidden;transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
.miniatura:hover,.esquema:hover,.mmd-fig:hover{border-color:var(--borde-control);box-shadow:var(--sombra-2)}
.miniatura .ver{display:flex;align-items:center;justify-content:center;height:150px;padding:0;border:0;border-bottom:1px solid var(--linea);background:#fff;cursor:zoom-in;overflow:hidden}
.miniatura img{max-width:100%;max-height:150px}
.miniatura .pdf{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--hundido);color:var(--texto-2);font:600 var(--t-l)/1 var(--f-mono)}
.miniatura .pie{display:flex;justify-content:space-between;align-items:center;gap:var(--e-2);min-height:var(--control);padding:var(--e-1) var(--e-3);font-size:var(--t-s)}
.miniatura .pie span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miniatura .pie button{flex:none;padding:var(--e-1);border:0;background:none;color:var(--texto-2);font-size:var(--t-s);text-decoration:underline;text-decoration-color:var(--linea-fuerte);text-underline-offset:3px}
.miniatura .pie button:hover{color:var(--rojo);text-decoration-color:var(--rojo)}
.ver-pdf{background:#fff}
.ver-pdf canvas{display:block;max-width:100%;max-height:150px}
.miniatura .ver:focus-visible,.esq-ver:focus-visible,.mmd-ver:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}

/* Esquemas generales (el dibujo SVG lleva su propio estilo: no tocar los .c-*) */
.esquemas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--e-4)}
.esq-ver{padding:var(--e-3);border:0;border-bottom:1px solid var(--linea);background:#fff;cursor:zoom-in}
.esq-ver svg{display:block;width:100%;height:auto}
.esquema figcaption{display:flex;flex-direction:column;gap:var(--e-1);padding:var(--e-3) var(--e-4)}
.esquema figcaption span{font-size:var(--t-s);color:var(--texto-2)}
.esq-ver .c-caja{fill:#fff;stroke:#111;stroke-width:2}.esq-ver .c-tit{font:600 14px var(--f-base);fill:#111}.esq-ver .c-sub{font:12px var(--f-base);fill:#333}.esq-ver .c-num{font:600 12px var(--f-mono);fill:#111}
.esq-ver .c-cable{fill:none;stroke:#111;stroke-width:2}.esq-ver .c-gordo{fill:none;stroke:#C00;stroke-width:5}.esq-ver .c-trazo{stroke:#111;stroke-width:2;stroke-dasharray:5 4}.esq-ver .c-punto{fill:#111}
.esq-ver .c-pin{fill:#eee;stroke:#666}.esq-ver .c-pin-on{fill:#FFC400;stroke:#111}.esq-ver .c-can-h{fill:none;stroke:#E0A000;stroke-width:4}.esq-ver .c-can-l{fill:none;stroke:#2A7A2A;stroke-width:4}.esq-ver .c-res{fill:#ddd;stroke:#111}

/* Diagramas propios de Mechanic Max (vista «Diagramas y manuales») */
.mmd-panel{margin-bottom:var(--e-4)}
.mmd-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--e-3)}
.mmd-cab .ayuda{margin:var(--e-1) 0 0;font-size:var(--t-s)}
.mmd-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);max-width:100%}
.mmd-botones label{max-width:100%}
.mmd-botones select{max-width:min(340px,100%)}
.mmd-fichas{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:var(--e-3) 0 var(--e-2)}
.mmd-ficha{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border:1px solid var(--linea-fuerte);border-radius:var(--r-2);background:var(--superficie);font-size:var(--t-s);font-weight:600;line-height:1.3}
.mmd-ficha small{font-size:var(--t-xs);font-weight:500;color:var(--texto-2)}
.mmd-ficha.deducido{border-style:dashed;border-color:var(--borde-control)}
.mmd-ficha.deducido small::before,.mmd-punto{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--amarillo);box-shadow:inset 0 0 0 1px var(--amarillo-borde);vertical-align:0}
.mmd-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--e-3);margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--linea)}
.mmd-form[hidden]{display:none}
.mmd-form-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3)}
.mmd-barra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);margin-bottom:var(--e-3)}
.mmd-barra input{flex:1 1 260px;min-width:0}
.mmd-indice{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-4)}
.mmd-indice a{display:inline-flex;align-items:center;gap:var(--e-2);min-height:32px;padding:var(--e-1) var(--e-3);border:1px solid var(--linea-fuerte);border-radius:16px;background:var(--superficie);color:var(--texto);font-size:var(--t-s);font-weight:500;text-decoration:none;white-space:nowrap}
.mmd-indice a:hover{border-color:var(--tinta-2);background:var(--superficie-2)}
.diag-secciones{margin-bottom:0;padding-bottom:var(--e-4);border-bottom:1px solid var(--linea)}
.mmd-sis{scroll-margin-top:calc(var(--barra-alto) + var(--e-4))}
.mmd-grupo{display:flex;align-items:center;gap:var(--e-2);margin:var(--e-6) 0 var(--e-3);padding-bottom:var(--e-2);border-bottom:1px solid var(--linea-fuerte)}
.mmd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:var(--e-4)}
.mmd-ver{display:block;padding:0;border:0;border-bottom:1px solid var(--linea);background:#fff;cursor:zoom-in}
.mmd-ver img{display:block;width:100%;height:auto}
.mmd-fig figcaption{display:flex;flex-direction:column;gap:6px;padding:var(--e-3) var(--e-4) var(--e-4)}
.mmd-fig figcaption>span{font-size:var(--t-s);line-height:1.45;color:var(--texto-2)}
.mmd-fig>.vacio{margin:var(--e-3);border-radius:var(--r-2)}
.mmd-tipo{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;color:var(--texto-2)}
.mmd-fig figcaption>.mmd-tipo{font-size:var(--t-xs);color:var(--texto-2)}
.mmd-tipo::before{content:"";width:8px;height:8px;flex:none;border-radius:2px;background:var(--tinta-2)}
.mmd-tipo.electrico::before{background:var(--amarillo);box-shadow:inset 0 0 0 1px var(--amarillo-borde)}
.mmd-cods{display:flex;flex-wrap:wrap;gap:var(--e-1)}
.mmd-cod{min-height:26px;padding:2px 8px;border:1px solid var(--linea-fuerte);border-radius:var(--r-1);background:var(--hundido);color:var(--texto);font:600 var(--t-xs)/1.3 var(--f-mono);font-stretch:90%}
.mmd-cod:hover{border-color:var(--tinta-2);background:var(--superficie-2)}
.mmd-sup summary{font-size:var(--t-xs);font-weight:500;color:var(--texto-2)}
.mmd-sup ul{margin:var(--e-2) 0 0;padding-left:18px;font-size:var(--t-xs);color:var(--texto-2)}
.mmd-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--e-1) var(--e-6);margin:var(--e-2) 0 var(--e-1)}
.mmd-resumen h4{display:flex;align-items:center;gap:var(--e-2);margin:var(--e-3) 0 0}
.mmd-resumen .lista-oficial{margin-top:var(--e-2)}
.mmd-resumen .lista-oficial li{padding:6px 0}
.mmd-resumen .lista-oficial a{font-weight:500}

/* ---------- 10. Vistas: valores de partida (se afinan en css/*.css) ---------- */
/* Panel: entrada del vehículo */
.entrada{max-width:760px;margin-bottom:var(--e-4)}
.entrada h1{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--e-5)}
.vin-campo label{font-size:var(--t-m);color:var(--texto);margin-bottom:var(--e-2)}
.vin-fila{display:flex;gap:var(--e-3)}
.vin-fila input{flex:1;min-width:0;min-height:56px;padding:10px 16px;font-size:var(--t-xl);letter-spacing:.08em;text-transform:uppercase}
.vin-fila input::placeholder{color:var(--texto-3);font-family:var(--f-base);letter-spacing:0;text-transform:none}
.vin-fila .btn{min-height:56px;padding:0 var(--e-6);font-size:var(--t-l)}
.vin-campo .ayuda{margin:var(--e-2) 0 0}
.sin-vin{margin-top:var(--e-4);padding-top:var(--e-4);border-top:1px solid var(--linea)}
.sin-vin summary{display:inline-block;text-decoration:underline;text-decoration-color:var(--amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
.sin-vin summary:hover{text-decoration-color:var(--tinta)}
.ymm{display:grid;grid-template-columns:104px repeat(3,minmax(0,1fr)) auto;align-items:end;gap:var(--e-3);margin-top:var(--e-4)}

/* Resumen del vehículo */
.resumen{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;gap:var(--e-5)}
.indicadores{grid-template-columns:repeat(3,minmax(0,1fr))}
.indicador{display:flex;flex-direction:column;justify-content:space-between;gap:var(--e-3);min-height:104px;padding:var(--e-4);background:var(--superficie);color:var(--texto);text-decoration:none;transition:background var(--dur) var(--curva)}
.indicador:hover{background:var(--superficie-2)}
.indicador:hover b{box-shadow:inset 0 -3px 0 var(--amarillo)}
.indicador b{align-self:flex-start}
.indicador:focus-visible{outline-offset:-2px}
.ficha{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ficha div{padding:var(--e-3) var(--e-4);background:var(--superficie);font-weight:500}
.ficha small{display:block;font-weight:400;color:var(--texto-2)}

/* Códigos de falla */
.cod-detalle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e-5);margin:var(--e-5) 0}
.cod-tarjeta{padding:var(--e-5);border:1px solid var(--linea);border-top:4px solid var(--amarillo);border-radius:var(--r-3);background:var(--superficie)}
.cod-tarjeta .cod{font:700 var(--t-3xl)/1 var(--f-mono);font-stretch:90%;letter-spacing:.02em;color:var(--texto)}
.cod-tarjeta .def{margin:var(--e-3) 0 var(--e-4);font-size:var(--t-l);line-height:1.4}
.anatomia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e-2)}
.anatomia div{padding:var(--e-2) var(--e-3);border-radius:var(--r-1);background:var(--hundido);font-size:var(--t-xs);color:var(--texto-2);line-height:1.35}
.anatomia b{display:block;font:700 var(--t-l)/1.3 var(--f-mono);color:var(--texto)}
.relacionados h3{margin-top:0}
.cod-lista{columns:2;column-gap:var(--e-6)}
.cod-lista button{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--e-3);width:100%;min-height:36px;padding:var(--e-2) var(--e-1);border:0;border-bottom:1px solid var(--linea);background:none;font-size:var(--t-s);line-height:1.4;text-align:left;break-inside:avoid}
.cod-lista button:hover{background:var(--superficie-2)}
.cod-lista b{font:600 var(--t-s)/1.4 var(--f-mono);font-stretch:90%}
.spec-valor{font-weight:650}
.spec-valor small{display:inline;margin-left:var(--e-1);font-weight:400;color:var(--texto-2)}

/* Todos los vehículos: año → marca → modelos con foto */
.explorador{display:grid;grid-template-columns:96px 200px minmax(0,1fr);align-items:start;gap:var(--e-4);margin-bottom:var(--e-3)}
.explorador h3{margin:0 0 var(--e-2);min-height:24px}
.col-lista{height:min(64vh,620px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--linea);border-radius:var(--r-2);background:var(--superficie);scrollbar-width:thin}
.col-lista button{display:block;width:100%;min-height:34px;padding:6px var(--e-3);border:0;border-bottom:1px solid var(--linea);background:none;font-size:var(--t-s);text-align:left;font-variant-numeric:tabular-nums}
.col-lista button:hover{background:var(--superficie-2)}
.col-lista button.activa{background:var(--superficie-2);color:var(--texto);font-weight:650;box-shadow:inset 3px 0 0 var(--amarillo)}
.col-lista .ayuda{margin:var(--e-3)}
.cat-principal{min-width:0;display:flex;flex-direction:column;gap:var(--e-3)}
.cat-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-2) var(--e-3)}
.cat-cab h3{margin:0}
.cat-cab .filtro-col{width:220px;max-width:100%;margin:0}
.cat-modelos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--e-3)}
.cat-modelos>.ayuda{grid-column:1/-1}
.cat-tarjeta{display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie);text-align:left;overflow:hidden;transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
.cat-tarjeta img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:var(--e-2);background:var(--hundido)}
.cat-tarjeta span{padding:var(--e-2) var(--e-3) var(--e-3);font-size:var(--t-s);font-weight:600;line-height:1.3}
.cat-tarjeta:hover{border-color:var(--borde-control);box-shadow:var(--sombra-2)}
.cat-tarjeta.activa{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta),inset 0 -4px 0 var(--amarillo)}
.cat-ficha{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);align-items:start;gap:var(--e-5)}
.cat-ficha>.ayuda{grid-column:1/-1;margin:0}
.cat-ficha-datos h2{margin-top:0}
.foto-cat{align-self:start}
.cat-progreso{font-size:var(--t-s);color:var(--texto-2)}
.cat-progreso b{color:var(--texto)}

/* ---------- 11. Diálogos, visor y avisos ---------- */
dialog{padding:0;border:0;color:var(--texto);background:var(--superficie)}
dialog::backdrop{background:rgba(23,25,28,.48)}
.panel-lateral{width:min(880px,100vw);max-width:100vw;height:100vh;height:100dvh;max-height:none;margin:0 0 0 auto;border-left:1px solid var(--linea-fuerte);box-shadow:var(--sombra-3)}
.panel-lateral>form,.panel-form{display:flex;flex-direction:column;height:100%}
.modal{width:min(720px,calc(100vw - 2*var(--e-4)));max-height:calc(100dvh - 2*var(--e-4));border:1px solid var(--linea-fuerte);border-radius:var(--r-3);box-shadow:var(--sombra-3)}
.modal>form{display:flex;flex-direction:column;max-height:inherit}
.panel-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--e-4);flex:none;min-height:64px;padding:var(--e-3) var(--e-5);border-bottom:1px solid var(--linea)}
.panel-cab h2{margin:0;line-height:var(--control)}
.panel-cab .ayuda{display:block;margin:0;font-size:var(--t-s)}
.panel-cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--e-5)}
.panel-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3);flex:none;padding:var(--e-3) var(--e-5);border-top:1px solid var(--linea);background:var(--superficie-2)}
.x{display:inline-flex;align-items:center;justify-content:center;width:var(--control);height:var(--control);flex:none;padding:0;border:0;border-radius:var(--r-2);background:none;color:var(--texto-2);font-size:var(--t-l);line-height:1}
.x:hover{background:var(--hundido);color:var(--texto)}

/* Orden de trabajo: queja, causa y corrección */
.tres-c{list-style:none;margin:var(--e-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--e-4);counter-reset:c}
.tres-c li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--e-2) var(--e-3);counter-increment:c}
.tres-c li::before{content:counter(c);grid-row:span 3;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:22px;border-radius:var(--r-1);background:var(--tinta);color:var(--amarillo);font:600 var(--t-s)/1 var(--f-mono)}
.tres-c textarea{width:100%}

/* Visor de documentos a pantalla completa */
.visor{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:var(--superficie)}
.visor[open]{display:flex;flex-direction:column}
.visor-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-2) var(--e-3);flex:none;min-height:60px;padding:var(--e-2) var(--e-4);border-bottom:1px solid var(--linea-fuerte)}
.visor-cab>b{min-width:0;font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.visor-acc .mono{min-width:5ch;text-align:center;color:var(--texto-2)}
.visor-lienzo{flex:1;min-height:0;overflow:auto;background:#fff;cursor:grab}
.visor-lienzo.arrastrando{cursor:grabbing}
.visor-lienzo img{display:block;max-width:none;transform-origin:0 0;user-select:none}
.visor-lienzo iframe{display:block;width:100%;height:100%;border:0}

/* Aviso breve: #toast en la app (el JS le pone .ver y .error); .aviso-breve es la misma pieza para la guía */
#toast,.aviso-breve{position:fixed;left:50%;bottom:var(--e-5);z-index:var(--z-toast);max-width:calc(100vw - 2*var(--e-4));padding:var(--e-3) var(--e-4);border-radius:var(--r-2);background:var(--tinta);color:var(--sobre-tinta);font-weight:600;box-shadow:var(--sombra-3);visibility:hidden;pointer-events:none;transform:translate(-50%,12px);transition:transform var(--dur) var(--curva),visibility 0s linear var(--dur)}
#toast.ver,.aviso-breve.ver{visibility:visible;transform:translate(-50%,0);transition:transform var(--dur) var(--curva)}
#toast.error,.aviso-breve.error{background:var(--rojo)}

/* Modo invitado (enlace compartido): solo consulta */
.aviso-invitado{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-s);color:var(--texto-2)}
body.invitado #menu p.grupo:has(+ a[data-v='ajustes']){display:none}
@media (min-width:961px){body.invitado .barra .aviso-invitado{order:3;flex-basis:100%;min-height:0;padding:0 0 var(--e-1);border:0;background:none;color:var(--texto-2)}}
body.invitado .aviso-invitado::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--amarillo);box-shadow:inset 0 0 0 1px var(--amarillo-borde)}

/* ---------- 12. Página completa de diagramas (diagramas.html, body.pagina-diag) ---------- */
.pd-placa{width:auto;max-width:none;margin:var(--e-4)}
.pd-acciones{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.pd-cuerpo{display:grid;grid-template-columns:272px minmax(0,1fr);align-items:start;border-top:1px solid var(--linea)}
.pd-indice{position:sticky;top:0;display:flex;flex-direction:column;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:var(--e-5) var(--e-3);border-right:1px solid var(--linea);background:var(--lateral);scrollbar-width:thin}
.pd-indice-tit{margin:0 var(--e-2) var(--e-3);font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-weight:750;font-size:var(--t-l)}
.pd-indice input{margin:0 var(--e-1) var(--e-2)}
.pd-filtro{display:flex;margin:0 var(--e-1) var(--e-2)}
.pd-filtro button{flex:1;padding:6px 4px}
.pd-indice-sis{display:flex;flex-direction:column}
.pd-indice .grupo{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2);margin:var(--e-4) var(--e-2) var(--e-1);font-size:var(--t-s);font-weight:650;color:var(--texto)}
.pd-indice a{padding:6px var(--e-2);border-radius:var(--r-1);color:var(--texto-2);font-size:var(--t-s);line-height:1.35;text-decoration:none}
.pd-indice a:hover{background:rgba(23,25,28,.06);color:var(--texto)}
.pd-main{width:100%;max-width:1280px;padding:var(--e-5) var(--margen) var(--e-9)}
.pd-config{margin-bottom:0}
.pd-grupo{display:flex;align-items:center;gap:var(--e-3);margin:var(--e-8) 0 var(--e-4);padding-bottom:var(--e-2);border-bottom:2px solid var(--tinta);font-size:var(--t-2xl)}
.pd-sis:first-of-type .pd-grupo{margin-top:var(--e-6)}
.pd-diag{margin:0 0 var(--e-5);border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie);overflow:hidden;scroll-margin-top:var(--e-4)}
.pd-diag>.vacio{margin:var(--e-4)}
.pd-diag-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--e-3);padding:var(--e-4) var(--e-5) 0}
.pd-diag-cab h3{margin:var(--e-1) 0 0;font-size:var(--t-xl)}
.pd-nota{margin:var(--e-2) var(--e-5) var(--e-4);max-width:90ch;color:var(--texto-2)}
.pd-lamina{background:#fff;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pd-lamina img{display:block;width:100%;height:auto}
.pd-detalle{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--e-2) var(--e-6);padding:var(--e-1) var(--e-5) var(--e-4)}
.pd-detalle:empty{display:none}
.pd-detalle h4{margin:var(--e-4) 0 var(--e-2)}
.pd-cods{display:flex;flex-direction:column;gap:6px;margin:0}
.pd-cods div{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline;gap:var(--e-3)}
.pd-cods dt{font-size:var(--t-s);font-weight:600;color:var(--texto)}
.pd-cods dd{margin:0;font-size:var(--t-s)}
.pd-sup{margin:0;padding-left:18px;font-size:var(--t-s);color:var(--texto-2)}
.pd-sup li{margin-bottom:var(--e-1)}
.pd-pie{margin-top:var(--e-6)}

/* Tiras que se deslizan de lado (índice de partes, sistemas, años y marcas, atajos, índice de la página completa).
   Un degradado pegado al borde derecho avisa de que la tira sigue; cuando todo cabe, se queda en el hueco libre y no tapa nada. */
.diag-secciones::after{content:"";position:sticky;right:0;flex:none;align-self:stretch;width:32px;margin-left:auto;background:linear-gradient(90deg,rgba(255,255,255,0),var(--desliza-fondo,var(--fondo)) 85%);pointer-events:none}
.diag-secciones{scroll-snap-type:x proximity;scroll-padding-inline:var(--e-4)}
.diag-secciones a{scroll-snap-align:start}
@media (max-width:1100px){
  #v-catalogo .col-lista::after{content:"";position:sticky;right:0;flex:none;align-self:stretch;width:32px;margin-left:auto;background:linear-gradient(90deg,rgba(255,255,255,0),var(--superficie) 85%);pointer-events:none}
}
@media screen and (max-width:960px){
  .pd-indice-lista::after{content:"";position:sticky;right:0;flex:none;align-self:stretch;width:32px;margin-left:auto;background:linear-gradient(90deg,rgba(245,245,242,0),var(--lateral) 85%);pointer-events:none}
}
@media (max-width:700px){
  #bibAtajos::after,#diagPropios>.mmd-indice::after{content:"";position:sticky;right:0;flex:none;align-self:stretch;width:32px;margin-left:auto;background:linear-gradient(90deg,rgba(255,255,255,0),var(--fondo) 85%);pointer-events:none}
}

/* ---------- 13. Tableta y celular ---------- */
@media (max-width:1360px){
  .placa{grid-template-columns:minmax(0,1fr) auto;padding:var(--e-4) var(--e-6)}
  .placa-datos{grid-row:2;grid-column:1/-1;flex-wrap:wrap;gap:var(--e-3) var(--e-5);padding:var(--e-3) 0 0;border-left:0;border-top:1px solid rgba(23,25,28,.16);box-shadow:0 -1px 0 rgba(255,255,255,.75)}
}
@media (max-width:1100px){
  .explorador{grid-template-columns:88px 168px minmax(0,1fr)}
  .columnas{gap:var(--e-5)}
}
@media (max-width:960px){
  :root{--margen:24px}
  /* El riel pasa a ser un cajón que se abre con el botón de la barra */
  .app{grid-template-columns:minmax(0,1fr)}
  .riel{position:fixed;inset:0 auto 0 0;z-index:var(--z-riel);width:min(300px,86vw);border-right:1px solid var(--linea-fuerte);box-shadow:var(--sombra-3);transform:translateX(-102%);visibility:hidden;transition:transform .22s var(--curva),visibility 0s linear .22s}
  .menu-abierto .riel{transform:none;visibility:visible;transition:transform .22s var(--curva)}
  .velo-menu{display:block;position:fixed;inset:0;z-index:var(--z-velo);border:0;padding:0;background:rgba(23,25,28,.48);opacity:0;visibility:hidden;transition:opacity .22s var(--curva),visibility 0s linear .22s}
  .menu-abierto .velo-menu{opacity:1;visibility:visible;transition:opacity .22s var(--curva)}
  .menu-abierto body{overflow:hidden}
  .boton-menu{display:inline-flex}
  .riel .riel-cerrar{display:inline-flex;width:44px;height:44px}
  .barra .logo{display:flex;height:auto;padding:0}
  .riel .logo{padding-right:var(--e-3)}
  .barra .logo-texto{display:none}
  #menu a{min-height:44px}

  .columnas,.resumen,.cod-detalle,.guia-cols{grid-template-columns:minmax(0,1fr)}
  .resumen .foto{max-width:420px}
  .cabecera{flex-wrap:wrap}
  .ymm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ymm .btn{grid-column:1/-1}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}

  .pd-cuerpo{grid-template-columns:minmax(0,1fr)}
  .pd-indice{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--linea);padding:var(--e-4) var(--e-3)}
  .pd-indice-sis{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 var(--e-1)}
  .pd-indice .grupo{flex-basis:100%;justify-content:flex-start}
  .pd-indice a{padding:var(--e-2)}
}
@media (max-width:700px){
  :root{--margen:16px;--barra-alto:56px;--t-2xl:1.5rem;--t-3xl:1.75rem}
  input,select,textarea{font-size:1rem}            /* 16 px: el celular no hace zoom al escribir */
  main{padding-top:var(--e-5);padding-bottom:var(--e-8)}
  h2{margin-top:var(--e-6)}
  .buscador-global{flex:1 1 0;min-width:0}
  .buscador-global input{padding-right:12px}
  .buscador-global kbd{display:none}
  .barra{gap:var(--e-2) var(--e-3)}
  .aviso-invitado{flex-basis:100%}

  .placa{margin-top:var(--e-4);padding:var(--e-5) var(--e-5) var(--e-4);gap:var(--e-3) var(--e-4)}
  .placa-id{display:contents}
  .placa-anio{grid-row:1;grid-column:1;justify-self:start;font-size:var(--t-l);padding:8px 9px 7px}
  .placa>.btn-negro{grid-row:1;grid-column:2}
  .placa-nombre{grid-row:2;grid-column:1/-1;font-size:1.5rem}
  .placa-datos{grid-row:3}
  .placa-datos b{max-width:100%}
  .placa-datos b.mono{--paso:3px;font-size:var(--t-xs)}

  .rejilla,.ymm,.anatomia{grid-template-columns:minmax(0,1fr)}
  .anatomia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cod-lista{columns:1}
  .vin-fila{flex-direction:column}
  .vin-fila input{font-size:1.125rem;letter-spacing:.04em}
  .filtros>input{flex-basis:100%}
  .filtros>select,.filtros>label.en-linea,.filtros>.btn{flex:1 1 auto}
  .filtros>label.en-linea select{flex:1}
  .pestanas{overflow-x:auto;scrollbar-width:none}
  .pestanas button{min-height:var(--control)}
  .cabecera>.btn,.cabecera>label.btn{width:100%}
  .fila-botones>:is(.btn,.btn-gris,.btn-peligro,.btn-negro){flex:1 1 auto}
  .atajos .btn-gris,.mmd-indice a{min-height:var(--control)}
  .mmd-cod{min-height:32px}
  .mmd-botones,.mmd-botones label.en-linea{width:100%}
  .mmd-botones label.en-linea{flex-wrap:wrap;white-space:normal}
  .mmd-botones select{width:100%;max-width:100%}
  .mmd-botones>:is(.btn,.btn-gris){flex:1 1 auto;white-space:normal;text-align:center}

  .tabla{display:block;overflow-x:auto}
  .tabla td,.tabla th{padding-left:var(--e-2);padding-right:var(--e-2)}
  .tabla th{white-space:normal}
  .barra-fila{grid-template-columns:minmax(0,1fr) 40px 16px;grid-template-areas:"etq n flecha" "barra barra barra";row-gap:6px;min-height:var(--control);padding:var(--e-2)}
  .barra-fila>span:first-child{grid-area:etq}
  .barra-fila .fondo{grid-area:barra}
  .barra-fila .n{grid-area:n}
  .barra-fila::after{grid-area:flecha}
  .retiro{padding:var(--e-4)}
  .retiro dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .retiro dd{margin-bottom:var(--e-2)}
  .fuente-cab{align-items:flex-start}
  .totales{width:100%}

  /* Catálogo: años y marcas pasan a ser tiras que se deslizan de lado */
  .explorador{grid-template-columns:minmax(0,1fr)}
  .col-lista{display:flex;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 var(--e-7)}
  .col-lista button{flex:none;width:auto;min-height:var(--control);padding:var(--e-2) var(--e-4);border-bottom:0;border-right:1px solid var(--linea);white-space:nowrap;scroll-snap-align:start}
  .col-lista button.activa{background:var(--superficie);box-shadow:inset 0 -3px 0 var(--amarillo)}
  .cat-cab .filtro-col{width:100%}
  .cat-modelos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-ficha{grid-template-columns:minmax(0,1fr)}

  .panel-cab,.panel-cuerpo,.panel-pie{padding-left:var(--e-4);padding-right:var(--e-4)}
  .panel-pie .espacio{display:none}
  .panel-pie>button{flex:1 1 auto}
  .visor-cab>b{flex-basis:100%}
  #toast{bottom:var(--e-4);width:max-content}

  .pd-placa{margin:var(--e-3)}
  .pd-acciones{grid-row:4;grid-column:1/-1}
  .pd-acciones>*{flex:1 1 auto;white-space:normal;text-align:center}
  .pd-main{padding-top:var(--e-4)}
  .pd-grupo{font-size:var(--t-xl);margin-top:var(--e-6)}
  .pd-diag-cab,.pd-detalle{padding-left:var(--e-4);padding-right:var(--e-4)}
  .pd-nota{margin-left:var(--e-4);margin-right:var(--e-4)}
}

/* ---------- 14. Impresión y movimiento reducido ---------- */
#impresion{display:none}
@media print{
  @page{margin:14mm}
  html,body{background:#fff;color:#000}
  /* Orden de trabajo («Imprimir» de una orden pone body.imprimiendo-orden): solo se imprime #impresion */
  body.imprimiendo-orden:not(.pagina-diag)>*:not(#impresion){display:none!important}
  body.imprimiendo-orden #impresion{display:block}
  #impresion{font:11pt/1.45 var(--f-base);color:#000}
  /* Cualquier otra pantalla (Ctrl+P en un retiro, un boletín, las especificaciones…): se imprime la vista activa,
     sin el menú, la barra de arriba, los avisos ni los botones de acción */
  body:not(.imprimiendo-orden):not(.pagina-diag) :is(.riel,.velo-menu,.barra,#toast,#placa .btn-negro,main :is(.btn,.btn-gris,.btn-peligro)){display:none!important}
  body:not(.imprimiendo-orden):not(.pagina-diag) .app{display:block}
  body:not(.imprimiendo-orden):not(.pagina-diag) main{max-width:none;padding:var(--e-5) 0 0}
  body:not(.imprimiendo-orden):not(.pagina-diag) #placa{width:100%;max-width:none;margin:0;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:not(.imprimiendo-orden):not(.pagina-diag) :is(.tabla-marco,.wiki-texto){max-height:none;overflow:visible}
  #impresion .cab{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:4px solid #000;padding-bottom:10px;margin-bottom:14px}
  #impresion h1{font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:22pt;margin:0}
  #impresion .doc{text-align:right}
  #impresion .doc b{display:block;font-family:var(--f-titulo);font-stretch:var(--ancho-titulo);font-size:16pt}
  #impresion .bloques{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}
  #impresion .bloques small{display:block;color:#555;font-size:9pt}
  #impresion table{width:100%;border-collapse:collapse;margin:10px 0;font-variant-numeric:tabular-nums}
  #impresion th{font-size:9pt;color:#555;text-align:left;border-bottom:1.5px solid #000;padding:5px}
  #impresion td{border-bottom:1px solid #ccc;padding:5px}
  #impresion .n{text-align:right}
  #impresion .tot{margin-left:auto;width:250px;font-variant-numeric:tabular-nums}
  #impresion .tot div{display:flex;justify-content:space-between;padding:2px 0}
  #impresion .tot .gran{font-weight:700;font-size:14pt;border-top:2px solid #000;margin-top:4px;padding-top:4px}
  #impresion .pie{margin-top:30px;font-size:9pt;color:#555}
  #impresion .firma{margin-top:40px;width:260px;border-top:1px solid #000;padding-top:4px;font-size:9pt}

  /* Página de diagramas: se imprime entera, sin índice ni botones */
  body.pagina-diag{background:#fff;color:#000}
  body.pagina-diag>.pd-placa{display:grid!important;margin:0 0 10px;padding:8px 0 10px;background:#fff;border:0;border-bottom:4px solid #000;border-radius:0;box-shadow:none}
  body.pagina-diag .pd-placa .placa-anio{background:#fff;color:#000;box-shadow:none;padding:0;font-size:16pt}
  body.pagina-diag .pd-placa *{text-shadow:none}
  body.pagina-diag .pd-acciones,body.pagina-diag .pd-indice,body.pagina-diag .pd-diag-cab button,body.pagina-diag .pd-config .mmd-botones{display:none!important}
  body.pagina-diag>.pd-cuerpo{display:block!important;border:0}
  body.pagina-diag .pd-main{padding:0;max-width:none}
  body.pagina-diag .mmd-panel,body.pagina-diag .pd-diag{background:#fff;border-color:#999;color:#000}
  body.pagina-diag .pd-diag{break-inside:avoid;page-break-inside:avoid}
  body.pagina-diag .pd-nota,body.pagina-diag .pd-cods dd,body.pagina-diag .ayuda,body.pagina-diag .pd-sup{color:#222}
  body.pagina-diag .pd-cods dt{color:#000}
  body.pagina-diag .mmd-ficha{background:#fff;color:#000}
  body.pagina-diag .pd-grupo{break-before:page;border-color:#000}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ---------- 15. Pulido final (v11) ---------- */
/* Barra de abajo (solo celular y con un carro abierto): Resumen, Códigos, Boletines, Diagramas y «+ Orden» al alcance del pulgar */
.barra-abajo{display:none}
@media screen and (max-width:700px){
  .barra-abajo:not([hidden]){position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barra);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    padding:0 var(--e-1) env(safe-area-inset-bottom);background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-top:1px solid var(--linea-fuerte)}
  .barra-abajo>*{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 2px;border:0;background:none;color:var(--texto-2);font:600 var(--t-xs)/1.2 var(--f-base);text-decoration:none}
  .barra-abajo>[aria-current]{color:var(--texto);box-shadow:inset 0 3px 0 var(--amarillo)}
  .barra-abajo>button{color:var(--texto)}
  .barra-abajo>button .ico{padding:2px;border-radius:var(--r-1);background:var(--amarillo);box-shadow:inset 0 0 0 1px var(--amarillo-borde)}
  .cuerpo:has(.barra-abajo:not([hidden])) main{padding-bottom:calc(var(--e-8) + 56px)}
  .cuerpo:has(.barra-abajo:not([hidden])) ~ #toast,body:has(.barra-abajo:not([hidden])) #toast{bottom:calc(56px + var(--e-4))}
  body.invitado .barra-abajo>button{display:none}
  body.invitado .barra-abajo:not([hidden]){grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Pestañas que no caben: el borde derecho se difumina para que se note que se deslizan */
  .pestanas:not(#bolTipos):not(.pd-filtro):not(#mmdFiltro){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pestanas:not(#bolTipos):not(.pd-filtro):not(#mmdFiltro):has(button:last-child:focus){-webkit-mask-image:none;mask-image:none}
}
@media print{
  .barra-abajo{display:none!important}
  /* Imprimir el Resumen (Ctrl+P): fuera lo que solo sirve en pantalla (escribir el VIN, «Esta foto está mal», cajas de «falta…») */
  body:not(.imprimiendo-orden):not(.pagina-diag) :is(.ficha-vin,#vFoto .foto-mal,#placa .placa-vin-cta,.vacio,.historial-vacio,#avisoConexion,#vAviso .btn-texto){display:none!important}
  body:not(.imprimiendo-orden):not(.pagina-diag) #vFicha>.ficha-vacia{display:none!important}
  body:not(.imprimiendo-orden):not(.pagina-diag) #v-vehiculo.activa::after{content:"Mechanic Max · Datos: NHTSA (vPIC, retiros, quejas y boletines) y EPA (fueleconomy.gov)";display:block;margin-top:8mm;padding-top:2mm;border-top:.75pt solid #999;font-size:8pt;color:#444}
}