/* ==========================================================================
   [ZSPORT-vitrina-marcas] Paginas por marca (/e/calibraciones/<marca>) y de
   reprogramaciones (/e/reprogramaciones). Las arma backend/vitrina_marcas.py.
   --------------------------------------------------------------------------
   Va DESPUES de vitrina.css y usa sus variables: la barra, el desplegable de
   idioma, el menu del telefono, el cuadro de compra y el brillo del boton
   Comprar son los de la tienda, sin copiarlos. Todo lo propio lleva el
   prefijo vm- (no pisa ninguna de las clases de vitrina.css).
   El codigo de toda la vitrina:
     original de fabrica -> celeste, marcador cuadrado
     lectura completa    -> lila, marcador de pastilla con borde
     reprogramacion      -> naranja, marcador rayado
   Celular: corte a 760 px, campos de 16 px, toques de 44 px.
   ========================================================================== */

body.vm{
  --vm-dato-tenue:rgba(125,211,252,.11);
  --vm-lect:#C4B5FD;
  --vm-lect-tenue:rgba(196,181,253,.10);
  --vm-repro:#FF8A5C;
  --vm-raya:repeating-linear-gradient(135deg,var(--redline) 0 4px,transparent 4px 8px);
  --vm-placa:#F3F4F6;
  overflow-x:hidden;
}
body.vm img{ max-width:100% }
body.vm [hidden]{ display:none !important }
.vm-oculto{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; border:0 }
.vm-mono{ font-family:var(--mono) }
.vm-pagina{ padding-top:22px; padding-bottom:56px }
.vm-pagina h1, .vm-pagina h2, .vm-pagina h3{ font-family:var(--display); margin:0; line-height:1.15 }

/* La barra de la tienda tiene un enlace mas: Reprogramaciones. Entre 1000 y
   1280 px se esconden los dos que tambien estan en el menu (lo mismo que hace
   vitrina.css con /e/config en /e/, y aca tambien en /en/ y /pt/). */
@media (max-width:1280px){
  body.vm .barra nav a[href$="/config"]{ display:none }
}

/* ---------------------------------------------------------------- sellos -- */
.vm-sello{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; white-space:nowrap; line-height:1;
  padding:5px 8px 5px 7px; border-radius:5px; border:1px solid var(--borde); color:var(--ceniza);
}
.vm-sello::before{ content:""; flex:none }
.vm-s-orig{ color:var(--dato); border-color:rgba(125,211,252,.42); background:var(--vm-dato-tenue) }
.vm-s-orig::before{ width:8px; height:8px; border-radius:1.5px; background:var(--dato) }
.vm-s-lect{ color:var(--vm-lect); border-color:rgba(196,181,253,.45); background:var(--vm-lect-tenue) }
.vm-s-lect::before{ width:12px; height:8px; border-radius:2px; border:1.5px solid var(--vm-lect) }
.vm-s-repro{ color:var(--vm-repro); border-color:rgba(255,90,31,.5); background:var(--redline-tenue) }
.vm-s-repro::before{ width:16px; height:8px; border-radius:4px; background:var(--vm-raya); box-shadow:inset 0 0 0 1px rgba(255,90,31,.6) }
.vm-raya{ display:block; width:64px; height:4px; border-radius:2px; background:var(--vm-raya) }

/* ----------------------------------------------------------------- migas -- */
.vm-migas{ margin:0 0 6px }
.vm-migas span[aria-hidden]{ color:var(--ceniza-2) }

/* ------------------------------------------------------------- cabecera -- */
.vm-cab{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 26px; align-items:center;
  padding:18px 0 4px;
}
.vm-placa{
  width:168px; height:112px; border-radius:14px; background:var(--vm-placa);
  border:1px solid var(--borde); display:grid; place-items:center; padding:18px 22px;
  box-shadow:0 14px 34px -22px rgba(125,211,252,.55);
}
.vm-placa img{ max-height:64px; max-width:100%; width:auto; height:auto; object-fit:contain }
.vm-placa-txt{ font:800 22px/1 var(--display); color:#0A0C0F; letter-spacing:.04em }
.vm-placa.vm-e-skoda img, .vm-placa.vm-e-lamborghini img{ max-height:34px }
.vm-placa.vm-e-audi img{ max-height:44px }
.vm-placa.vm-e-ford img{ max-height:52px }
.vm-placa-cifra{
  width:168px; min-height:112px; border-radius:14px; background:var(--panel); border:1px solid var(--borde);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 16px;
}
.vm-placa-cifra b{ font:900 46px/1 var(--display); letter-spacing:-.02em; color:var(--hueso) }
.vm-placa-cifra span:not(.vm-raya){ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza) }
.vm-placa-cifra .vm-raya{ width:100% }
.vm-kicker{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.vm-kicker::before{ content:""; flex:none }
.vm-k-orig{ color:var(--dato) }
.vm-k-orig::before{ width:8px; height:8px; border-radius:1.5px; background:var(--dato) }
.vm-k-lect{ color:var(--vm-lect) }
.vm-k-lect::before{ width:12px; height:8px; border-radius:2px; border:1.5px solid var(--vm-lect) }
/* Marca con lecturas: los dos rotulos, cada uno con su color. */
.vm-kickers{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:0 0 8px }
.vm-kickers .vm-kicker{ margin:0 }
.vm-k-repro{ color:var(--vm-repro) }
.vm-k-repro::before{ width:16px; height:8px; border-radius:4px; background:var(--vm-raya); box-shadow:inset 0 0 0 1px rgba(255,90,31,.6) }
.vm-cab h1{ font-weight:800; font-size:clamp(30px,4.4vw,44px); letter-spacing:-.02em }
.vm-datos{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 0 0; align-items:baseline;
  font-family:var(--mono); font-size:12.5px; color:var(--ceniza);
}
.vm-datos b{ color:var(--hueso); font-weight:600 }
.vm-dato-orig b{ color:var(--dato) }
.vm-dato-lect b{ color:var(--vm-lect) }
.vm-dato-pedido{ color:var(--hueso) }
.vm-bajada{ margin:10px 0 0; color:var(--ceniza); font-size:15px; line-height:1.6; max-width:64ch }

/* Numeros compartidos del grupo: una nota, no una alarma. */
.vm-compartidas{
  margin:18px 0 0; padding:12px 16px 12px 18px; border-radius:var(--radio);
  background:linear-gradient(90deg,rgba(125,211,252,.07),transparent 80%);
  border:1px solid rgba(125,211,252,.22); border-left:3px solid var(--dato);
  font-size:13.5px; color:var(--ceniza); line-height:1.55;
}
.vm-compartidas p{ margin:0 }
.vm-compartidas p + p{ margin-top:6px }
.vm-compartidas b{ color:var(--hueso); font-weight:600 }
.vm-compartidas-cifras{ font-family:var(--mono); font-size:12px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline }
.vm-par{ border:1px solid var(--borde); border-radius:100px; padding:1px 9px; background:var(--grafito); color:var(--hueso) }
.vm-par b{ color:var(--dato) }
.vm-sep{ color:var(--ceniza-2) }

/* ------------------------------------------------- riel de las marcas -- */
.vm-riel{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0 }
.vm-riel a{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap;
  border:1px solid var(--borde); border-radius:100px; padding:5px 13px 5px 5px;
  font-size:13px; color:var(--ceniza); background:var(--grafito); min-height:40px;
  transition:border-color .14s, color .14s;
}
.vm-riel a small{ font-family:var(--mono); font-size:11px; color:var(--ceniza) }
.vm-riel a:hover{ border-color:var(--dato); color:var(--hueso) }
.vm-riel a[aria-current="page"]{ border-color:var(--dato); color:var(--hueso); background:var(--vm-dato-tenue) }
.vm-riel a.vm-riel-repro{ padding-left:7px }
.vm-riel a.vm-riel-repro:hover{ border-color:var(--redline) }
.vm-riel-repro a{ padding-left:13px }
.vm-riel-repro a:has(.vm-teja){ padding-left:5px }
.vm-riel-repro a[aria-current="page"]{ border-color:var(--redline); background:var(--redline-tenue) }
.vm-teja{
  width:40px; height:28px; border-radius:100px; background:var(--panel-alto);
  display:grid; place-items:center; padding:4px 6px; flex:none;
}
.vm-teja img{ max-height:18px; max-width:100%; width:auto; height:auto; object-fit:contain }
.vm-teja.vm-e-skoda img, .vm-teja.vm-e-lamborghini img{ max-height:11px }
.vm-teja.vm-e-volkswagen img, .vm-teja.vm-e-mercedes img, .vm-teja.vm-e-bmw img{ max-height:20px }
.vm-teja.vm-e-skoda, .vm-teja.vm-e-lamborghini, .vm-teja.vm-e-iveco, .vm-teja.vm-e-ktm, .vm-teja.vm-e-peugeot{ width:62px }
.vm-teja-txt{ font:700 11px var(--display); color:var(--hueso) }
.vm-teja-grande{ width:56px; height:40px; border-radius:10px }
.vm-teja-grande img{ max-height:26px }
.vm-teja-grande.vm-e-skoda, .vm-teja-grande.vm-e-lamborghini, .vm-teja-grande.vm-e-iveco,
.vm-teja-grande.vm-e-ktm, .vm-teja-grande.vm-e-peugeot{ width:86px }
.vm-teja-grande.vm-e-skoda img, .vm-teja-grande.vm-e-lamborghini img{ max-height:15px }

/* ----------------------------------------------------- buscadores -- */
.vm-busca{ margin:20px 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px }
.vm-busca-tit{ flex:1 1 100%; font-size:13px; color:var(--ceniza) }
.vm-busca-tit b{ color:var(--hueso) }
.vm-busca-campo{ position:relative; display:flex; gap:8px; flex:1 1 100%; max-width:760px; min-width:0 }
.vm-busca-campo svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; stroke:var(--ceniza); fill:none; stroke-width:2; stroke-linecap:round; pointer-events:none;
}
.vm-busca input[type="search"], .vm-lector input[type="search"]{
  flex:1 1 0; width:0; min-width:0; height:48px; background:var(--grafito); border:1px solid var(--borde);
  border-radius:var(--radio-chico); color:var(--hueso); font-family:var(--mono); font-size:16px;
  padding:0 14px 0 42px; -webkit-appearance:none; appearance:none;
}
.vm-lector input[type="search"]{ padding-left:14px }
.vm-busca input::placeholder, .vm-lector input::placeholder{ color:var(--ceniza-2); font-family:var(--texto) }
.vm-busca input:focus, .vm-lector input:focus{ outline:none; border-color:var(--redline); box-shadow:0 0 0 4px var(--redline-tenue) }
.vm-pista{ flex:1 1 100%; margin:0; color:var(--ceniza); font-size:12.5px }

.vm-btn, .vm-btn-sec{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  height:48px; padding:0 20px; border-radius:var(--radio-chico); text-decoration:none; cursor:pointer;
  font-family:var(--texto); font-weight:600; font-size:14px; transition:background .14s, border-color .14s, color .14s;
}
.vm-btn{ background:var(--redline); color:var(--carbon); border:0 }
.vm-btn:hover{ background:var(--redline-h) }
.vm-btn-sec{ background:transparent; border:1px solid var(--borde); color:var(--hueso) }
.vm-btn-sec:hover{ border-color:var(--hueso) }
.vm-busca .vm-btn, .vm-lector .vm-btn{ flex:none }

.vm-resultado{ margin:12px 0 0; font-size:13.5px; color:var(--ceniza); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline }
.vm-resultado b{ color:var(--hueso) }
.vm-resultado .vm-cifra{ color:var(--dato); font-family:var(--mono) }
.vm-resultado a, .vm-nota-lect a{ color:var(--hueso); text-decoration:none; border-bottom:1px solid var(--redline) }
.vm-vacio{
  margin:16px 0; padding:18px 20px; border:1px dashed var(--borde); border-radius:var(--radio);
  color:var(--ceniza); background:var(--grafito);
}
.vm-vacio p{ margin:0 }
.vm-vacio p + p{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px }
.vm-nota-lect{ margin:8px 0 0; font-size:13px; color:var(--vm-lect) }

/* ------------------------------------------------- chips y pestanas -- */
.vm-tipos, .vm-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 0 }
.vm-chip{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; cursor:pointer;
  background:var(--grafito); border:1px solid var(--borde); color:var(--ceniza);
  padding:7px 12px; border-radius:100px; font-size:13px; min-height:38px; white-space:nowrap;
  transition:border-color .14s, color .14s;
}
.vm-chip b{ font-family:var(--mono); font-size:11px; font-weight:500; color:var(--ceniza); font-variant-numeric:tabular-nums }
.vm-chip:hover{ border-color:var(--hueso); color:var(--hueso) }
.vm-chip[aria-current="true"]{ background:var(--hueso); border-color:var(--hueso); color:var(--carbon); font-weight:600 }
.vm-chip[aria-current="true"] b{ color:rgba(10,12,15,.65) }
.vm-chip-orig[aria-current="true"]{ background:var(--dato); border-color:var(--dato) }
.vm-chip-lect{ border-color:rgba(196,181,253,.35) }
.vm-chip-lect[aria-current="true"]{ background:var(--vm-lect); border-color:var(--vm-lect) }
.vm-etq{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza); margin-right:4px }
.vm-chips > .vm-etq{ min-width:150px }
.vm-chips-fila{ display:contents }

.vm-regleta{
  display:flex; align-items:stretch; flex-wrap:wrap; margin:18px 0 16px;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio-chico); overflow:hidden;
}
.vm-casilla{
  position:relative; flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:9px 14px 10px; border-left:1px solid var(--borde-suave); color:var(--ceniza); text-decoration:none;
  transition:background .14s, color .14s;
}
.vm-casilla:first-child{ border-left:0 }
.vm-casilla:hover{ background:var(--panel-alto); color:var(--hueso) }
.vm-casilla::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--dato);
  transform:scaleX(0); transform-origin:left; transition:transform .13s ease-out;
}
.vm-casilla[aria-current="true"]{ background:var(--vm-dato-tenue); color:var(--hueso) }
.vm-casilla[aria-current="true"]::before{ transform:scaleX(1) }
.vm-casilla-nombre{
  font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vm-casilla-cifra{ font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ceniza) }
.vm-casilla[aria-current="true"] .vm-casilla-cifra{ color:var(--dato) }
@media (prefers-reduced-motion:reduce){ .vm-casilla::before{ transition:none } }

/* ------------------------------------------------------------- listas -- */
.vm-lista{ margin-top:18px; background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio); overflow:hidden }
.vm-lista-cab{
  display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap;
  padding:12px 16px; background:var(--grafito); border-bottom:1px solid var(--borde-suave);
}
.vm-lista-cab h2{ font-size:16px; font-weight:700 }
.vm-conteo{ font-family:var(--mono); font-size:12px; color:var(--ceniza-2) }
.vm-conteo b{ color:var(--ceniza); font-weight:500 }

.vm-fila{
  position:relative; display:grid; align-items:center; gap:8px 18px;
  grid-template-columns:minmax(170px,1.05fr) minmax(0,1.7fr) auto auto;
  padding:13px 16px 13px 20px; border-top:1px solid var(--borde-suave);
}
.vm-lista-cab + .vm-fila{ border-top:0 }
.vm-fila::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--dato) }
.vm-fila.vm-lect::before{ background:var(--vm-lect) }
.vm-fila.vm-repro::before{ background:var(--vm-raya) }
.vm-fila:hover{ background:var(--panel-alto) }
.vm-col-num{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0 }
.vm-num-linea{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0 }
.vm-num{
  font-family:var(--mono); font-weight:600; font-size:16px; color:var(--dato); letter-spacing:-.01em;
  text-decoration:none; word-break:break-all; line-height:1.25;
}
a.vm-num:hover{ color:var(--hueso) }
span.vm-num{ color:var(--hueso) }
.vm-formato{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza);
  border:1px solid var(--borde); border-radius:4px; padding:1px 6px; white-space:nowrap;
}
.vm-que{ min-width:0; display:flex; flex-direction:column; gap:5px }
.vm-sist{ font-family:var(--display); font-weight:600; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ceniza) }
.vm-nota-fila{ font-size:12.5px; color:var(--ceniza) }
.vm-nota-fila b{ color:var(--hueso); font-weight:500 }
.vm-veh{ margin:0; font-family:var(--display); font-weight:700; font-size:15px; line-height:1.3 }
.vm-det{ margin:0; font-family:var(--mono); font-size:11.5px; color:var(--ceniza); line-height:1.6 }
.vm-det b{ color:var(--hueso); font-weight:400 }
.vm-regla{ font-family:var(--mono); font-size:12px; color:var(--vm-repro); font-weight:600 }
.vm-cruce{
  display:inline-flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ceniza);
  text-decoration:none; align-self:flex-start; line-height:1.4;
}
.vm-cruce::before{ content:""; flex:none; margin-top:5px }
.vm-cruce > span{ min-width:0 }
.vm-cruce b{ color:var(--hueso); font-weight:600 }
.vm-cruce:hover{ color:var(--hueso) }
.vm-a-repro::before{ width:16px; height:8px; border-radius:4px; background:var(--vm-raya); box-shadow:inset 0 0 0 1px rgba(255,90,31,.6) }
.vm-a-orig::before{ width:8px; height:8px; border-radius:1.5px; background:var(--dato) }
.vm-a-lect::before{ width:12px; height:8px; border-radius:2px; border:1.5px solid var(--vm-lect) }

.vm-ops{ display:flex; flex-wrap:wrap; gap:5px }
.vm-op{
  font-family:var(--mono); font-size:11.5px; line-height:1.4; padding:3px 8px; border-radius:5px;
  background:rgba(255,255,255,.05); border:1px solid var(--borde); color:var(--ceniza);
}
.vm-op-base{ background:var(--redline-tenue); border-color:rgba(255,90,31,.45); color:#FFB596; font-weight:600 }

.vm-precio{
  font-family:var(--mono); font-variant-numeric:tabular-nums; display:flex; flex-direction:column;
  align-items:flex-end; line-height:1.3; white-space:nowrap;
}
.vm-precio b{ font-weight:600; font-size:16px; color:var(--hueso) }
.vm-precio span, .vm-precio small{ font-size:11.5px; color:var(--ceniza) }
.vm-precio span b{ font-size:11.5px; font-weight:500; color:var(--ceniza) }
.vm-fila .btn-comprar{ padding:0 20px; height:40px; font-weight:700 }
.vm-acc{ display:flex; flex-direction:column; align-items:stretch; gap:6px }
.vm-acc .vm-btn-sec{ height:34px; padding:0 14px; font-size:12.5px; color:var(--ceniza) }
.vm-acc .vm-btn-sec:hover{ color:var(--hueso) }

/* ------------------------------------------------------------ paginas -- */
.vm-paginas{
  display:flex; align-items:center; justify-content:center; gap:6px 8px; flex-wrap:wrap;
  margin:0; padding:14px 16px; background:var(--grafito); border-top:1px solid var(--borde-suave);
  font-size:13px; color:var(--ceniza);
}
.vm-pag{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:38px; height:38px; padding:0 10px;
  border:1px solid var(--borde); border-radius:8px; color:var(--hueso); text-decoration:none; font-family:var(--mono); font-size:12.5px;
}
a.vm-pag:hover{ border-color:var(--hueso) }
.vm-pag-actual{ background:var(--hueso); border-color:var(--hueso); color:var(--carbon); font-weight:600 }
.vm-pag-hueco{ color:var(--ceniza-2) }
.vm-pag-cuenta{ font-family:var(--mono); font-size:12px; margin-left:8px }
.vm-pag-cuenta b{ color:var(--ceniza); font-weight:500 }

/* ----------------------------------------------------- Toyota y Lexus -- */
.vm-lector{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:14px 24px; align-items:center;
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  padding:18px 20px; margin:20px 0 4px;
}
.vm-lector h2{ font-size:18px; font-weight:700; margin-bottom:4px }
.vm-lector p{ margin:0; color:var(--ceniza); font-size:13.5px; max-width:60ch }
.vm-lector form{ display:flex; gap:8px; margin:0; min-width:0 }
.vm-lector input[type="search"]{ width:240px; flex:1 1 240px }
.vm-lector-ej{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  padding-top:12px; border-top:1px solid var(--borde-suave); font-family:var(--mono); font-size:12.5px;
}
.vm-viejo{ color:var(--ceniza); text-decoration:line-through; text-decoration-color:var(--ceniza-2) }
.vm-flecha{ color:var(--ceniza-2) }
.vm-nuevo{ font-weight:600; color:var(--dato); text-decoration:none }
/* Al buscar, el navegador baja a la linea del resultado (#vm-resultado); la
   barra de arriba es fija y la taparia. */
#vm-resultado{ scroll-margin-top:72px }
.vm-nuevo:hover{ color:var(--hueso) }

.vm-tabla-env{ overflow-x:auto }
.vm-tabla{ width:100%; border-collapse:collapse; font-size:13.5px }
.vm-tabla th{
  text-align:left; font-family:var(--display); font-weight:600; font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ceniza); padding:11px 10px; background:var(--grafito);
  border-bottom:1px solid var(--borde-suave); white-space:nowrap;
}
.vm-tabla td{ padding:12px 10px; border-top:1px solid var(--borde-suave); vertical-align:top }
.vm-tabla tbody tr:first-child td{ border-top:0 }
.vm-tabla tr:hover td{ background:var(--panel-alto) }
.vm-tabla td:first-child, .vm-tabla th:first-child{ padding-left:20px }
.vm-tabla td:last-child, .vm-tabla th:last-child{ padding-right:16px }
.vm-celda-num{ position:relative }
.vm-celda-num::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--dato) }
.vm-celda-num .vm-sello{ display:flex; width:max-content; margin-bottom:6px }
.vm-celda-num .vm-num{ display:block; white-space:nowrap; font-size:15.5px }
.vm-veh{ font-weight:600 }
.vm-tabla .vm-veh{ font-family:var(--texto); font-size:13.5px }
.vm-m{ font-family:var(--mono); font-size:12.5px; color:var(--ceniza) }
.vm-m b{ color:var(--hueso); font-weight:400 }
.vm-desde{ display:flex; flex-wrap:wrap; gap:4px; max-width:220px }
.vm-desde span{
  font-family:var(--mono); font-size:11.5px; color:var(--hueso);
  border:1px solid var(--borde); border-radius:4px; padding:1px 6px; background:var(--grafito);
}
.vm-sin{ font-size:12px; color:var(--ceniza-2) }
.vm-cpu2{ display:block; font-family:var(--mono); font-size:10.5px; line-height:1.4; color:var(--ceniza); margin-top:4px }
.vm-cpu2 b{ color:var(--hueso); font-weight:400 }
.vm-fecha{ font-family:var(--mono); font-size:12px; color:var(--ceniza); white-space:nowrap }
.vm-celda-acc{ white-space:nowrap }
.vm-celda-acc .vm-precio{ margin-bottom:8px }
.vm-celda-acc .btn-comprar{ height:38px; padding:0 18px; font-weight:700; float:right }
.vm-tabla .vm-etq{ display:none }

/* ------------------------------------------------- reprogramaciones -- */
.vm-filtros{ margin:16px 0 0; background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio) }
.vm-filtros-cab{
  display:flex; align-items:center; gap:8px; min-height:48px; padding:0 16px;
  font-family:var(--display); font-weight:600; font-size:14px;
}
.vm-filtros-cab .vm-cifra{ font-family:var(--mono); font-size:12px; font-weight:500; color:var(--ceniza); margin-left:auto }
.vm-filtros-cab > span:last-child{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ceniza) }
.vm-filtros-in{ padding:4px 16px 14px; border-top:1px solid var(--borde-suave) }
.vm-filtro-fila{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0 0 }
.vm-filtro-fila > .vm-etq{ min-width:150px }
.vm-filtros .vm-chip:hover{ border-color:var(--redline) }
.vm-filtros .vm-chip[aria-current="true"]:hover{ border-color:var(--hueso) }

.vm-repro-marca{ margin-top:30px; scroll-margin-top:80px }
.vm-marca-ancla{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px }
.vm-marca-ancla h2{ font-size:21px; font-weight:800 }
.vm-ver-orig{ margin-left:auto; font-size:13px; color:var(--dato); text-decoration:none; border-bottom:1px solid rgba(125,211,252,.4) }
.vm-ver-orig:hover{ color:var(--hueso) }
.vm-grupo{
  margin-bottom:12px; background:var(--panel); border:1px solid var(--borde); border-radius:14px; overflow:hidden; overflow:clip;
}
.vm-grupo-cab{
  display:flex; justify-content:space-between; align-items:center; gap:8px 14px; flex-wrap:wrap;
  padding:12px 16px; background:linear-gradient(90deg,rgba(255,90,31,.085),var(--grafito) 70%), var(--grafito);
  border-bottom:1px solid var(--borde-suave);
}
.vm-grupo-tit{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0 }
.vm-grupo-tit h3{ font-size:16px; font-weight:700 }
.vm-ecu{ font-family:var(--mono); font-size:12px; color:var(--ceniza); margin-left:auto }
.vm-ecu b{ color:var(--hueso); font-weight:400 }
.vm-grupo .vm-fila:first-of-type{ border-top:0 }
.vm-leyenda{ margin:14px 0 0; font-family:var(--mono); font-size:12px; color:var(--ceniza) }

/* --------------------------------------------------- cierre de pagina -- */
.vm-arma{
  margin:34px 0 0; display:flex; justify-content:space-between; align-items:center; gap:18px 30px; flex-wrap:wrap;
  padding:22px 24px; border:1px solid rgba(255,90,31,.25); border-radius:var(--radio);
  background:linear-gradient(90deg,rgba(255,90,31,.08),transparent 75%), var(--panel);
}
.vm-arma .vm-raya{ margin-bottom:12px }
.vm-arma h2{ font-size:19px; font-weight:700 }
.vm-arma p{ margin:6px 0 0; color:var(--ceniza); font-size:14px; max-width:58ch }
.vm-arma p b{ color:var(--hueso); font-family:var(--mono) }
.vm-acciones{ display:flex; flex-wrap:wrap; gap:10px }
.vm-cierre{
  margin:18px 0 0; display:flex; justify-content:space-between; align-items:center; gap:14px 24px; flex-wrap:wrap;
  padding:16px 20px; border:1px solid var(--borde); border-radius:var(--radio); background:var(--grafito);
}
.vm-cierre p{ margin:0; color:var(--ceniza); font-size:14px }
.vm-cierre p b{ color:var(--hueso) }
/* El boton Escribinos es el .wsp de vitrina.css (metalizado, con disco y glifo),
   el mismo de la portada: aca no se le cambia nada. */

/* ------------------------------------------------------------------ pie -- */
.vm-pie{ border-top:1px solid var(--borde-suave); background:rgba(10,12,15,.9); margin-top:20px }
.vm-pie-in{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:24px; padding-top:30px; padding-bottom:30px }
.vm-pie-col h2{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ceniza); margin:0 0 10px; font-weight:600 }
.vm-pie-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.vm-pie-col a{ color:var(--hueso); text-decoration:none; font-size:13.5px }
.vm-pie-col a:hover{ color:var(--redline) }
.vm-pie-quien p{ color:var(--ceniza); font-size:13px; margin:10px 0 0; max-width:36ch }
.vm-sellos{ display:flex; flex-wrap:wrap; gap:6px }

/* ------------------------------------------------------------ celular -- */
@media (max-width:760px){
  .vm-pagina{ padding-top:14px }
  .vm-cab{
    grid-template-columns:64px minmax(0,1fr); gap:4px 14px; align-items:center;
    grid-template-areas:"placa kicker" "placa h1" "datos datos" "bajada bajada";
  }
  .vm-cab-txt{ display:contents }
  .vm-placa{ grid-area:placa; width:64px; height:56px; padding:8px; border-radius:10px }
  .vm-placa img{ max-height:36px }
  .vm-placa.vm-e-skoda img, .vm-placa.vm-e-lamborghini img{ max-height:16px }
  .vm-placa-txt{ font-size:12px }
  .vm-placa-cifra{ display:none }
  .vm-cab .vm-kicker{ grid-area:kicker; margin:0; align-self:end; font-size:10.5px }
  .vm-cab .vm-kickers{ grid-area:kicker; margin:0; align-self:end; gap:2px 12px }
  .vm-cab .vm-kickers .vm-kicker{ grid-area:auto }
  .vm-cab h1{ grid-area:h1; font-size:28px; align-self:start }
  .vm-datos{ grid-area:datos; gap:2px 14px; margin-top:8px }
  .vm-bajada{ grid-area:bajada }
  .vm-cab-repro{ grid-template-columns:minmax(0,1fr); grid-template-areas:"kicker" "h1" "datos" "bajada" }
  .vm-bajada{ font-size:14px }

  .vm-riel{ flex-wrap:wrap; margin-top:12px }
  .vm-riel a{ min-height:44px; flex:none }
  .vm-riel a[aria-current="page"]{ order:-1 }

  .vm-busca{ margin-top:14px }
  .vm-busca .vm-btn{ padding:0 16px }
  .vm-tipos{ flex-wrap:wrap }
  .vm-chip{ min-height:44px; flex:none }
  .vm-chips{ display:block; overflow:visible; padding:0 }
  .vm-chips > .vm-etq{ display:block; margin:0 0 6px }
  .vm-chips-fila{ display:flex; gap:8px; flex-wrap:wrap }
  .vm-regleta{ flex-wrap:wrap }
  .vm-casilla{ flex:1 1 140px; min-width:0; min-height:48px }
  .vm-casilla-nombre{ white-space:normal; overflow:visible }

  .vm-fila{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"num num" "que que" "precio accion";
    padding:14px 14px 14px 18px;
  }
  .vm-col-num{ grid-area:num }
  .vm-que{ grid-area:que }
  .vm-que:empty{ display:none }
  .vm-precio{ grid-area:precio; align-items:flex-start }
  .vm-fila > .btn-comprar, .vm-acc{ grid-area:accion }
  .vm-fila .btn-comprar{ height:44px }
  .vm-acc .vm-btn-sec{ height:44px }
  .vm-num{ font-size:17px }
  a.vm-num, a.vm-cruce, a.vm-ver-orig, .vm-btn-sec{ min-height:44px; display:inline-flex; align-items:center }
  .vm-migas a, a.vm-nuevo{ min-height:44px; display:inline-flex; align-items:center; padding:0; margin:0 }
  a.vm-cruce::before{ margin-top:0 }
  .vm-col-num{ gap:0 }
  .vm-ver-orig{ border-bottom:0; text-decoration:underline; text-decoration-color:rgba(125,211,252,.4); text-underline-offset:4px }
  .vm-celda-num a.vm-num{ display:flex }

  .vm-lector{ grid-template-columns:minmax(0,1fr); padding:16px }
  .vm-lector form{ flex-wrap:wrap }
  .vm-lector input[type="search"]{ flex:1 1 100%; width:100% }
  .vm-lector .vm-btn{ flex:1 1 100% }

  .vm-tabla thead{ display:none }
  .vm-tabla, .vm-tabla tbody, .vm-tabla tr, .vm-tabla td{ display:block }
  .vm-tabla tr{ position:relative; padding:14px 14px 14px 18px; border-top:1px solid var(--borde-suave) }
  .vm-tabla tbody tr:first-child{ border-top:0 }
  .vm-tabla tr::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--dato) }
  .vm-tabla td{ padding:0; border:0 }
  .vm-tabla td + td{ margin-top:6px; display:flex; gap:10px; align-items:baseline }
  .vm-tabla td:first-child{ padding-left:0 }
  .vm-tabla tr:hover td{ background:none }
  .vm-celda-num::before{ display:none }
  .vm-tabla .vm-etq{ display:inline-block; flex:0 0 112px; font-size:10px }
  .vm-celda-acc{ display:flex !important; justify-content:space-between; align-items:center; margin-top:12px !important }
  .vm-celda-acc .vm-precio{ margin:0; align-items:flex-start }
  .vm-celda-acc .btn-comprar{ float:none; height:44px }
  .vm-desde{ max-width:none }

  .vm-filtro-fila{ flex-wrap:wrap }
  .vm-filtro-fila > .vm-etq{ min-width:0; flex:1 1 100% }
  .vm-grupo-cab{ padding:12px 14px }
  .vm-ecu{ margin-left:0; flex:1 1 100% }
  .vm-ver-orig{ margin-left:0 }
  .vm-paginas{ gap:6px }
  .vm-pag{ min-width:44px; height:44px }
  .vm-pag-cuenta{ flex:1 1 100%; text-align:center; margin:4px 0 0 }

  .vm-arma, .vm-cierre{ padding:18px 16px }
  .vm-acciones{ width:100% }
  .vm-acciones .vm-btn, .vm-acciones .vm-btn-sec{ flex:1 1 auto }
  .vm-pie-in{ grid-template-columns:1fr 1fr; gap:20px }
  .vm-pie-quien{ grid-column:1 / -1 }
}
@media (max-width:390px){
  .vm-pie-in{ grid-template-columns:1fr }
  .vm-busca .vm-btn{ padding:0 12px }
}