/* Catálogo MAFISA — hoja de estilo.
   Fondo NEUTRO (gris muy claro) y superficies blancas; el teal de MAFISA es
   ACENTO (barra, botones, códigos, badges), nunca tinte de toda la página. */
:root {
  /* marca */
  --acento: #007878;
  --acento-2: #009090;
  --acento-oscuro: #044A4A;

  /* superficie */
  --bg: #F7F8FA;
  --sup: #FFFFFF;
  --sup-2: #F3F4F6;
  --borde: #E5E7EB;
  --borde-2: #D1D5DB;

  /* texto */
  --texto: #111827;
  --suave: #6B7280;
  --tenue: #9CA3AF;

  /* semáforo */
  --verde: #15803D;
  --verde-bg: #F0FDF4;
  --verde-borde: #BBF7D0;
  --ambar: #B45309;
  --azul: #1D4ED8;

  --sombra: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --sombra-md: 0 6px 20px rgba(16,24,40,.08);
  --sombra-lg: 0 14px 44px rgba(16,24,40,.16);
  --r: 14px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
}
* { box-sizing: border-box; }
/* Los SVG en línea (pestañas, lupa, botones) se dibujan todos igual. */
svg { fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento-2); outline-offset: 2px; }

/* Piezas compartidas: la superficie blanca elevada y el anillo de foco. */
.fila, .dcard, .tarjeta, .fam, .kyb-grupo {
  background: var(--sup); border: 1px solid var(--borde); box-shadow: var(--sombra);
}
#q:focus, #vin:focus, #placa:focus, .filtro-caja input:focus, .login-caja input:focus {
  border-color: var(--acento-2); box-shadow: 0 0 0 3px rgba(0,144,144,.13);
}

/* ===== Barra de progreso EN VIVO =====
   Sliver fijo de 3 px en el borde superior (por encima de barra y pestañas). El
   relleno es un rojo MÁS brillante que el borgoña de la barra a propósito: sobre
   el borgoña oscuro del header un borgoña puro sería invisible. pointer-events:
   none en las dos piezas para no tapar clics: es puramente informativa. */
#vivo {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
  pointer-events: none; opacity: 1; transition: opacity .45s ease;
}
.vivo-track { position: absolute; inset: 0; overflow: hidden; }
.vivo-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--acento-2), #00A5A5);
  box-shadow: 0 0 8px rgba(200,30,46,.7); transition: width .3s ease;
}
#vivo.indet .vivo-fill { width: 35%; transition: none; animation: vivo-desliza 1.1s linear infinite; }
@keyframes vivo-desliza { 0% { left: -35%; } 100% { left: 100%; } }
#vivo.ok .vivo-fill { background: var(--verde); box-shadow: 0 0 8px rgba(21,128,61,.55); animation: none; }
#vivo.error .vivo-fill { width: 100%; background: #B42318; box-shadow: 0 0 8px rgba(180,35,24,.55); animation: none; }
/* Texto discreto: pastilla transitoria centrada arriba. Fondo oscuro translúcido
   para leerse tanto sobre el header borgoña como sobre las pestañas blancas. */
#vivo-txt {
  position: fixed; top: 9px; left: 50%; transform: translateX(-50%); z-index: 99;
  max-width: calc(100vw - 24px); pointer-events: none;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(17,24,39,.9);
  padding: 4px 12px; border-radius: 999px; box-shadow: var(--sombra-md);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .3s ease;
}
#vivo-txt.ver { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #vivo.indet .vivo-fill { animation: none; width: 100%; opacity: .6; }
}

/* ===== Login ===== */
.login {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg);
}
.login-caja {
  display: flex; flex-direction: column; gap: 12px; width: min(360px, 100%);
  padding: 26px 26px 24px; border-radius: 16px; background: var(--sup);
  border: 1px solid var(--borde); box-shadow: var(--sombra-md); text-align: center;
}
.login-marca {
  background: linear-gradient(100deg, var(--acento-oscuro), var(--acento) 60%, var(--acento-2));
  border-radius: 12px; padding: 16px 18px; margin-bottom: 4px;
}
.login-marca img { width: 170px; max-width: 100%; display: block; margin: 0 auto; }
.login-caja h1 { margin: 6px 0 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.login-sub { margin: 0 0 6px; font-size: 13px; color: var(--suave); }
.login-caja input {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--borde-2);
  background: var(--sup); font-size: 16px; text-align: center; outline: none;
}
.login-caja button {
  padding: 12px; border: 0; border-radius: 10px; background: var(--acento); color: #fff;
  font-weight: 650; letter-spacing: .01em;
}
.login-caja button:hover { background: var(--acento-2); }
.login-error { color: #B42318; font-size: 13.5px; }

/* ===== Barra superior ===== */
.barra { display: flex; align-items: center; gap: 14px; padding: 12px 20px; color: #fff;
  background: linear-gradient(105deg, var(--acento-oscuro), var(--acento) 55%, var(--acento-2));
  box-shadow: 0 2px 14px rgba(74, 6, 12, .22); }
.barra-logo { height: 30px; }
/* min-width:0 en los dos flex-items: sin eso ninguno puede encoger por debajo de
   su contenido y la barra termina empujando el ancho de TODA la página. Se veía
   en 375 px apenas aparecía la pastilla de cuota (251 px): scroll horizontal en
   todas las vistas. */
.barra-titulo {
  font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-titulo span { font-weight: 350; opacity: .78; }
.cuota {
  margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.cuota.bajo { background: #F59E0B; color: #3A2400; font-weight: 650; }
.cuota.cero { background: #FEE4E2; color: #B42318; font-weight: 650; }

/* ===== Pestañas ===== */
.tabs {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 2px;
  padding: 0 20px; background: var(--sup); border-bottom: 1px solid var(--borde);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 14px; border: 0; background: none; color: var(--suave);
  font-size: 14px; font-weight: 550; border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
}
.tab svg { width: 17px; height: 17px; flex: none; }
.tab:hover { color: var(--texto); }
.tab.act { color: var(--acento); border-bottom-color: var(--acento); }

main { max-width: 1040px; margin: 0 auto; padding: 20px 16px 28px; }

/* ===== Buscador ===== */
.buscador { position: relative; }
.buscador .lupa {
  position: absolute; left: 16px; top: 50%; width: 20px; height: 20px;
  transform: translateY(-50%); color: var(--tenue); pointer-events: none;
}
#q {
  width: 100%; padding: 15px 48px 15px 48px; font-size: 16.5px;
  border: 1.5px solid var(--borde-2); border-radius: var(--r); outline: none;
  background: var(--sup); color: var(--texto); box-shadow: var(--sombra);
  transition: border-color .12s, box-shadow .12s;
}
#q::placeholder { color: var(--tenue); }
.spinner {
  position: absolute; right: 16px; top: 50%; width: 17px; height: 17px; margin-top: -9px;
  border: 2.4px solid var(--borde); border-top-color: var(--acento-2);
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.filtros { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.select {
  padding: 11px 12px; border: 1.5px solid var(--borde-2); border-radius: 11px;
  background: var(--sup); color: var(--texto); font-size: 14.5px; max-width: 100%;
  outline: none;
}
.select:focus { border-color: var(--acento-2); }
.latencia { margin-left: auto; font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.latencia b { color: var(--verde); font-weight: 650; }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 9px 16px; border-radius: 11px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; line-height: 1.2; transition: background .12s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-primario { box-shadow: 0 3px 10px rgba(107, 9, 17, .18); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:hover { background: var(--acento-2); }
.btn-primario:disabled { background: var(--borde-2); color: #fff; cursor: default; }
.btn-suave { background: var(--sup); border-color: var(--borde-2); color: var(--texto); }
.btn-suave:hover { border-color: var(--acento-2); color: var(--acento); }

/* interruptor */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .pista {
  width: 36px; height: 20px; border-radius: 999px; background: var(--borde-2);
  position: relative; transition: background .15s; flex: none;
}
.switch .pista::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--sombra);
}
.switch input:checked + .pista { background: var(--acento); }
.switch input:checked + .pista::after { transform: translateX(16px); }
.switch input:focus-visible + .pista { outline: 2px solid var(--acento-2); outline-offset: 2px; }

/* ===== Secciones y listas de artículos ===== */
.seccion { margin-top: 20px; }
.seccion h2, .ficha h3 {
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--suave);
}
.seccion h2 { margin: 0 0 8px; font-size: 12px; }
.seccion h2 small { font-weight: 500; color: var(--tenue); text-transform: none; letter-spacing: 0; }
.lista { display: flex; flex-direction: column; gap: 8px; }
.fila {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: var(--r); text-align: left; width: 100%;
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.fila:hover { border-color: var(--borde-2); box-shadow: var(--sombra-md); }
.fila:active { transform: scale(.995); }
.mini, .mini-ph {
  width: 50px; height: 50px; flex: none; border-radius: 8px; border: 1px solid var(--borde);
}
.mini { object-fit: contain; background: var(--sup); }
.mini-ph {
  background: var(--sup-2); display: flex; align-items: center; justify-content: center;
  color: var(--tenue); font-size: 18px;
}
.fila-info { flex: 1 1 auto; min-width: 0; }
.fila-cod { font-family: var(--mono); font-weight: 700; font-size: 14.5px; color: var(--acento); }
.fila-desc { font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-depto { font-size: 12px; color: var(--tenue); }
.fila-nums { flex: none; text-align: right; }
.exist { font-weight: 650; font-size: 14px; }
.exist.si { color: var(--verde); }
.exist.no { color: var(--tenue); font-weight: 500; }
.precio { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.precio b { color: var(--texto); font-weight: 600; }

.badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px;
  border-radius: 5px; color: #fff; background: var(--tenue);
}
.badge.b-codigo { background: var(--acento); }
.badge.b-alias { background: var(--acento-2); }
.badge.b-proveedor { background: var(--azul); }
.badge.b-intercambio { background: #7D6608; }
.badge.b-intercambio2 { background: transparent; color: var(--ambar); border: 1px solid var(--ambar); }

.vacio { margin-top: 32px; text-align: center; color: var(--suave); font-size: 14.5px; }
.vacio .grande { font-size: 30px; margin-bottom: 6px; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin: 12px 0;
  border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F;
  font-size: 13.5px;
}
.aviso.malo { background: #FEF3F2; border-color: #FECDCA; color: #B42318; }
.aviso.info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }

/* ===== Departamentos ===== */
.encabezado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.encabezado h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.015em; }
.encabezado .sub { font-size: 13.5px; color: var(--suave); }
.migas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); margin-bottom: 10px; flex-wrap: wrap; }
.migas .sep { color: var(--borde-2); }
.migas button { border: 0; background: none; color: var(--acento); font-weight: 600; padding: 4px 0; font-size: 13px; }
.migas button:hover { text-decoration: underline; }
.migas .actual { color: var(--texto); font-weight: 600; }

.filtro-caja { position: relative; margin: 12px 0 14px; }
.filtro-caja input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--borde-2); border-radius: 10px;
  background: var(--sup); outline: none; font-size: 14.5px;
}

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.dcard {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left;
  padding: 13px 14px; border-radius: var(--r);
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.dcard:hover { border-color: var(--acento-2); box-shadow: var(--sombra-md); transform: translateY(-1px); }
.dcard-cab { display: flex; align-items: center; gap: 10px; width: 100%; }
.dcard .cod {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--acento); background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: 5px; padding: 2px 7px;
}
.dcard .nom { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--texto); }
.dcard .meta { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.dcard .meta .hay { color: var(--verde); font-weight: 650; }

.barra-lista {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 12px; border-bottom: 1px solid var(--borde); margin-bottom: 14px;
}
.paginacion { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; font-size: 13.5px; color: var(--suave); }

/* ===== Vehículo / VIN ===== */
.tarjeta {
  border-radius: 14px; padding: 18px; margin-bottom: 14px;
}
.tarjeta h2 { margin: 0 0 4px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.tarjeta .ayuda { margin: 0 0 14px; font-size: 13.5px; color: var(--suave); }
/* Entrada por placa: campo grande como el del VIN. */
.placa-fila { display: flex; gap: 10px; flex-wrap: wrap; }
#placa {
  flex: 1 1 220px; min-width: 0; padding: 13px 15px; font-size: 20px; letter-spacing: .12em;
  font-family: var(--mono); text-transform: uppercase; border: 1px solid var(--borde-2);
  border-radius: 11px; background: var(--sup); outline: none;
}
#placa::placeholder { font-size: 15px; letter-spacing: .04em; color: var(--tenue); text-transform: none; }
.placa-fila .btn { padding: 13px 20px; font-size: 14.5px; flex: 0 0 auto; }
.placa-datos { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borde); }
.placa-cred {
  display: inline-block; font-size: 12.5px; color: var(--suave);
  background: var(--sup-2); border: 1px solid var(--borde); border-radius: 999px;
  padding: 3px 10px; font-variant-numeric: tabular-nums;
}

.vin-fila { display: flex; gap: 10px; flex-wrap: wrap; }
#vin {
  flex: 1 1 260px; min-width: 0; padding: 13px 15px; font-size: 19px; letter-spacing: .09em;
  font-family: var(--mono); text-transform: uppercase; border: 1px solid var(--borde-2);
  border-radius: 11px; background: var(--sup); outline: none;
}
#vin::placeholder { font-size: 15px; letter-spacing: .04em; color: var(--tenue); text-transform: none; }
.vin-fila .btn { padding: 13px 20px; font-size: 14.5px; flex: 0 0 auto; }
.vin-datos {
  display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--borde); font-size: 13px; color: var(--suave);
}
.vin-datos b { color: var(--texto); font-weight: 600; }

.desplegable summary {
  list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--acento);
  padding: 12px 2px; display: flex; align-items: center; gap: 8px;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::before { content: "▸"; font-size: 12px; }
.desplegable[open] summary::before { content: "▾"; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
  padding: 9px 13px; border-radius: 10px; border: 1px solid var(--borde-2);
  background: var(--sup); font-size: 13.5px; text-align: left; line-height: 1.25;
  box-shadow: var(--sombra);
}
.opcion:hover { border-color: var(--acento-2); color: var(--acento); }
.opcion small { display: block; color: var(--tenue); font-size: 11.5px; font-weight: 500; }
.opcion b { font-weight: 600; }

.veh-cab {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(100deg, var(--acento-oscuro), var(--acento) 65%, var(--acento-2));
  margin-bottom: 12px;
}
.veh-cab .nombre { font-size: 17px; font-weight: 650; line-height: 1.2; }
.veh-cab .id { font-size: 12px; opacity: .8; }
.veh-cab .btn { margin-left: auto; background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
.veh-cab .btn:hover { background: rgba(255,255,255,.26); }

.familias { display: flex; flex-direction: column; gap: 8px; }
.fam { border-radius: var(--r); overflow: hidden; }
.fam-cab {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
  background: none; border: 0; text-align: left;
}
.fam-cab:hover { background: var(--sup-2); }
.fam-cab .nom { font-size: 14.5px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.fam-cab .flecha { color: var(--tenue); font-size: 12px; flex: none; transition: transform .15s; }
.fam.abierta .fam-cab .flecha { transform: rotate(90deg); }
.fam-cuerpo { padding: 0 14px 14px; border-top: 1px solid var(--borde); }
.pill {
  font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 999px;
  background: var(--sup-2); color: var(--suave); white-space: nowrap;
}
.pill.ok { background: var(--verde-bg); color: var(--verde); border: 1px solid var(--verde-borde); }
.pill.cero { background: var(--sup-2); color: var(--tenue); }

/* ---- Familias en cuadros (grilla + ícono) ---- */
.fam-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 4px;
}
.fam-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 15px 15px 13px; min-height: 108px; text-align: left; cursor: pointer;
  background: var(--sup); border: 1px solid var(--borde); border-radius: var(--r);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.fam-card:hover {
  border-color: var(--acento); box-shadow: 0 6px 16px rgba(107, 9, 17, .10);
  transform: translateY(-1px);
}
/* Ícono SVG "lineal color" en su contenedor redondeado */
.fam-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: #F8FAFC; border: 1px solid #EEF1F4; flex: none; }
.ico-svg { width: 32px; height: 32px; display: block; }
.fam-card .fam-nom { font-weight: 600; font-size: 14.5px; color: var(--texto); line-height: 1.2; }
.fam-card .pill { margin-top: auto; }

.fam-volver {
  background: none; border: 0; color: var(--acento); font-weight: 600;
  font-size: 14px; cursor: pointer; padding: 6px 2px; margin-bottom: 4px;
}
.fam-volver:hover { text-decoration: underline; }
.fam-detalle-cab { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; cursor: default; }
.fam-detalle-cab:hover { background: none; }
.fam-detalle-cab .fam-ic { width: 40px; height: 40px; }
.fam-detalle-cab .ico-svg { width: 28px; height: 28px; }
.fam-detalle-cab .nom { font-size: 18px; font-weight: 700; }

@media (max-width: 480px) {
  .fam-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
}

/* ---- Fila con acciones (despiece / equivalente) — vista 17vin ---- */
.v17-fila { display: flex; gap: 8px; align-items: stretch; }
.v17-fila .fila { flex: 1; min-width: 0; }
.v17-acc { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.v17-dia {
  display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer;
  white-space: nowrap; font-size: 15px; line-height: 1.1; padding: 6px 9px;
  border-radius: var(--r); background: var(--sup-2); color: var(--acento);
  border: 1px solid var(--borde);
}
.v17-dia small { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.v17-dia:hover { border-color: var(--acento); background: #fff; }
.eq-badge {
  font-size: 10px; font-weight: 800; color: var(--verde); background: var(--verde-bg);
  border: 1px solid var(--verde-borde); border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.eq-num { display: block; color: var(--suave); font-size: 11.5px; margin-top: 2px; }

/* ---- Visor de despiece (dentro del panel de la ficha) ---- */
.dia-cab { margin-bottom: 10px; }
.dia-cab h3 { margin: 0; }
.dia-cab .sub { font-size: 12.5px; color: var(--suave); }
.dia-wrap {
  position: relative; width: 100%; background: #fff; border: 1px solid var(--borde);
  border-radius: var(--r); overflow: hidden; margin-bottom: 12px;
}
.dia-img { width: 100%; display: block; }
.dia-hs {
  position: absolute; transform: translate(-50%, -50%); cursor: default;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
  background: rgba(107, 9, 17, .12); color: var(--acento);
  border: 1px solid rgba(107, 9, 17, .35);
}
.dia-hs.hay { background: var(--verde-bg); color: var(--verde);
  border-color: var(--verde-borde); cursor: pointer; }
.dia-hs.sin { background: #FEF3C7; color: #92400E; border-color: #FDE68A; cursor: pointer; }
.dia-hs.actual { outline: 3px solid var(--acento); outline-offset: 1px; z-index: 2; }
.dia-hs.hay:hover, .dia-hs.sin:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 3; }

.dia-lista { display: flex; flex-direction: column; gap: 6px; }
.dia-item {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  text-align: left; cursor: pointer; padding: 9px 11px; border-radius: var(--r);
  background: var(--sup); border: 1px solid var(--borde);
}
.dia-item:hover { border-color: var(--acento); }
.dia-item.sin { opacity: .7; }
.dia-call {
  font-size: 11px; font-weight: 700; color: var(--acento); background: var(--sup-2);
  border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.dia-nom { font-size: 13px; color: var(--texto); overflow: hidden; }
.dia-precio { font-size: 13px; font-weight: 700; }

/* ---- Visor con pestañas Foto | Despiece ---- */
.visor-cab { margin-bottom: 10px; }
.visor-cab .cod { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.visor-desc { font-size: 13px; color: var(--suave); }
.vtabs { display: flex; gap: 6px; margin-bottom: 12px; background: var(--sup-2);
  padding: 4px; border-radius: 12px; }
.vtab { flex: 1; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--suave); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.vtab.on { background: var(--sup); color: var(--acento); box-shadow: var(--sombra); }
.visor-foto { width: 100%; border: 1px solid var(--borde); border-radius: var(--r);
  background: #fff; display: block; }

/* ---- Inspección de fotos candidatas ---- */
.foto-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 16px; }
.foto-barra .select { flex: 1; min-width: 180px; }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.foto-cand {
  display: flex; flex-direction: column; background: var(--sup); border: 1px solid var(--borde);
  border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
  transition: opacity .15s, transform .15s;
}
.foto-cand.yendo { opacity: .4; transform: scale(.97); }
.foto-img { aspect-ratio: 1 / 1; background: #fff; display: grid; place-items: center; overflow: hidden; }
.foto-img img { width: 100%; height: 100%; object-fit: contain; }
.foto-cand.rota .foto-img::after {
  content: "sin imagen"; color: var(--tenue); font-size: 12px;
}
.foto-cand.rota .foto-img img { display: none; }
.foto-info { padding: 10px 12px 8px; }
.foto-cod { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.foto-desc { font-size: 12.5px; color: var(--texto); margin: 2px 0; line-height: 1.3; }
.foto-meta { font-size: 11px; color: var(--tenue); }
.foto-meta.tec { color: var(--suave); }
.foto-acc { display: flex; gap: 1px; margin-top: auto; border-top: 1px solid var(--borde); }
.foto-ok, .foto-no {
  flex: 1; padding: 11px 8px; border: 0; font-weight: 700; font-size: 13.5px; cursor: pointer;
  background: var(--sup);
}
.foto-ok { color: var(--verde); }
.foto-ok:hover { background: var(--verde-bg); }
.foto-no { color: #B42318; border-left: 1px solid var(--borde); }
.foto-no:hover { background: #FEF2F2; }

/* ---- Asistente de venta (chat) ---- */
.asis { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 400px; }
.asis-msgs { flex: 1; overflow-y: auto; padding: 6px 2px 12px; display: flex; flex-direction: column; gap: 10px; }
.asis-b { max-width: 84%; padding: 10px 13px; border-radius: 15px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.asis-b.user { align-self: flex-end; background: var(--acento); color: #fff; border-bottom-right-radius: 5px; }
.asis-b.assistant { align-self: flex-start; background: var(--sup); border: 1px solid var(--borde);
  box-shadow: var(--sombra); border-bottom-left-radius: 5px; }
.asis-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 2px; border-top: 1px solid var(--borde); }
.asis-input textarea { flex: 1; resize: none; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--borde-2);
  font: inherit; font-size: 16px; outline: none; max-height: 120px; line-height: 1.4; }
.asis-input textarea:focus { border-color: var(--acento-2); box-shadow: 0 0 0 3px rgba(0,144,144,.13); }
.asis-enviar { flex: none; width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--acento);
  color: #fff; font-size: 19px; cursor: pointer; }
.asis-enviar:hover { background: var(--acento-2); }
.asis-bienvenida { text-align: center; color: var(--suave); margin: auto; max-width: 400px; padding: 16px; }
.asis-ic { font-size: 42px; }
.asis-bienvenida p { font-size: 14.5px; line-height: 1.55; }
.asis-sug { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.asis-chip { padding: 11px 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--sup);
  color: var(--acento); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.asis-chip:hover { border-color: var(--acento); }
.asis-pensando { display: inline-flex; gap: 4px; align-items: center; }
.asis-pensando span { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); animation: asis-blink 1.2s infinite; }
/* Fotos en el chat: el vendedor manda el VIN o la placa como se las manda el
   cliente. Los inputs van con opacity:0 y NO display:none — Safari ignora el
   .click() programático sobre un input con display:none. */
.asis-file { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; left: -9999px; }
.asis-foto { flex: none; width: 44px; height: 44px; border: 1.5px solid var(--borde-2);
  border-radius: 13px; background: var(--sup); font-size: 19px; cursor: pointer;
  line-height: 1; padding: 0; }
.asis-foto:hover { border-color: var(--acento); }
.asis-adjuntas { display: flex; gap: 8px; padding: 8px 0 0; flex-wrap: wrap; }
.asis-adj { position: relative; width: 62px; height: 62px; }
.asis-adj img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--borde); }
.asis-adj-x { position: absolute; top: -6px; right: -6px; width: 21px; height: 21px;
  border-radius: 50%; border: 0; background: var(--texto); color: var(--sup);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.asis-b-foto { display: block; max-width: 200px; width: 100%; border-radius: 10px;
  margin-bottom: 7px; }
.asis-nota { font-size: 12.5px; color: var(--acento); padding: 7px 2px 0; }
.asis-tip { font-size: 12.5px; color: var(--tenue); margin-top: 14px; line-height: 1.5; }
/* Códigos que el modelo citó sin que salieran de una búsqueda. Antes se
   descartaban en silencio; con fotos de por medio tienen que verse. */
.asis-alerta { margin-top: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px;
  line-height: 1.45; background: var(--verde-bg, rgba(140,18,32,.07));
  border: 1px solid var(--acento-2); color: var(--acento); }
.asis-pensando span:nth-child(2) { animation-delay: .2s; }
.asis-pensando span:nth-child(3) { animation-delay: .4s; }
@keyframes asis-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ---- En tránsito / pedido (viene en camino) ---- */
.transito { font-size: 11px; font-weight: 700; color: var(--azul); white-space: nowrap; margin-top: 1px; }
.transito.ped { color: var(--ambar); }
/* Stock de la empresa hermana. Deliberadamente en OTRO color que el verde de
   «hay» y que el azul de «viene en camino»: es un tercer estado —existe, pero
   en otra empresa— y confundirlo con stock propio hace prometer de más. */
.mafisa { font-size: 11px; font-weight: 700; color: #7E22CE; white-space: nowrap; margin-top: 1px; }
.ficha-mafisa { margin: 10px 0 4px; font-size: 13px; color: #6B21A8;
  background: #FAF5FF; border: 1px solid #E9D5FF; border-radius: 10px; padding: 9px 11px; }
.ficha-mafisa .tenue { color: var(--tenue); font-weight: 500; }
/* Cuando el dato envejece deja de ser morado y se pone ámbar: el mismo color
   que ya usa el catálogo para «esto viene en camino, todavía no está». */
.mafisa.viejo { color: var(--ambar); }

/* «No es equivalente». Ámbar y en cursiva: es una advertencia, no un dato del
   artículo, y tiene que leerse distinto del resto de la fila. */
.relacionado { font-size: 11px; font-style: italic; color: var(--ambar);
  white-space: nowrap; margin-top: 1px; }

/* Historial de placas. Rejilla que se acomoda sola: en el celular del mostrador
   queda a una columna y en la pantalla del escritorio a dos o tres. */
.hp-lista { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hp-item { display: flex; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: 9px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
.hp-item:hover { border-color: var(--acento); background: var(--sup); }
.hp-placa { font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.hp-carro { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12.5px; color: var(--suave); }
.hp-carro i { color: var(--tenue); }
.hp-cuando { font-size: 11px; color: var(--tenue); white-space: nowrap; }
.hp-veces { margin-left: 5px; font-weight: 700; color: var(--azul); }
.ficha-mafisa.viejo { color: #92400E; background: #FFFBEB; border-color: #FDE68A; }
.ficha-mafisa-viejo { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #92400E; }

.ficha-transito { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 4px;
  font-size: 13px; color: #1D4ED8; background: #EFF6FF; border: 1px solid #DBEAFE;
  border-radius: 10px; padding: 9px 11px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.kpi { background: var(--sup-2); border-radius: 10px; padding: 9px 11px; }
.kpi .lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.kpi .val { font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* Aviso de motor/cilindrada en la fila del artículo */
.cil {
  display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
}
.cil.ok { color: var(--verde); background: var(--verde-bg); border: 1px solid var(--verde-borde); }
.cil.no { color: var(--ambar); background: #FFFBEB; border: 1px solid #FDE68A; }

/* Barra de aprobación en lote de la cola de fotos */
.foto-lote {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 16px; padding: 12px 15px; border-radius: var(--r);
  background: var(--verde-bg); border: 1px solid var(--verde-borde);
}
.foto-lote-txt { flex: 1 1 280px; font-size: 12.5px; color: var(--suave); line-height: 1.45; }
.foto-lote-txt b { color: var(--texto); }

/* Salida a TecDoc cuando 17vin no trae el despiece del vehículo */
.v17-tecdoc {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding: 13px 15px; border-radius: var(--r);
  background: var(--sup-2); border: 1px solid var(--borde);
}
.v17-tecdoc-txt { flex: 1 1 260px; font-size: 12.5px; color: var(--suave); line-height: 1.45; }
.v17-tecdoc-txt b { color: var(--texto); }
.btn.sec { background: var(--sup); color: var(--suave); border: 1px solid var(--borde-2); }
.btn.sec:hover { border-color: var(--acento-2); color: var(--acento); }

/* Llegada estimada del producto en tránsito */
.ficha-transito .eta { color: var(--azul); font-size: 12.5px; }
.ficha-transito .eta b { font-weight: 700; }
.ficha-transito .eta small { color: var(--tenue); font-weight: 500; }
.ficha-transito .eta.sin { color: var(--ambar); }
.ficha-transito small { color: var(--tenue); font-weight: 500; }

/* Bloque "lo que REMUSA tiene de este carro" (arriba de las familias externas) */
.rem-bloque { background: var(--verde-bg); border: 1px solid var(--verde-borde);
  border-radius: var(--r); padding: 4px 14px 14px; margin-bottom: 18px; }
.rem-bloque .encabezado h1 { font-size: 17px; }
.rem-bloque .fam-card { background: var(--sup); }

/* ===== Radar de demanda (#/reportes) ===== */
.kpi .txt { font-size: 11.5px; color: var(--suave); margin-top: 2px; }
.kpi .val.bueno { color: var(--verde); }
.kpi .val.malo { color: var(--acento); }
.rep-bloque { margin-top: 22px; }
.rep-bloque h3 { margin: 0 0 4px; font-size: 12px; border-bottom: 1px solid var(--borde);
  padding-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.rep-bloque .ayuda { font-size: 12.5px; color: var(--suave); margin: 6px 0 10px; }
.rep-tabla th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tenue); font-weight: 700; text-align: left; padding: 6px; border-bottom: 1px solid var(--borde); }
.rep-tabla th.num { text-align: right; }
.rep-anio { font-family: var(--mono); font-size: 12.5px; color: var(--suave); }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi.verde .val { color: var(--verde); }

.cargando { display: flex; align-items: center; gap: 9px; padding: 12px 0; color: var(--suave); font-size: 13.5px; }
.cargando::before {
  content: ""; width: 15px; height: 15px; border: 2.2px solid var(--borde);
  border-top-color: var(--acento-2); border-radius: 50%; animation: girar .7s linear infinite;
}
.fila-extra { font-size: 12px; color: var(--suave); }
.fila-extra .marca-cat { color: var(--texto); font-weight: 600; }
.fila-extra .numero { font-family: var(--mono); }

/* ===== Por vehículo (KYB) ===== */
.kyb-lista { display: flex; flex-direction: column; gap: 10px; }
.kyb-grupo { border-radius: var(--r); overflow: hidden; }
.kyb-cab {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 14px; background: var(--sup-2); border-bottom: 1px solid var(--borde);
}
.kyb-marca { font-weight: 700; font-size: 14px; color: var(--acento); }
.kyb-modelo { font-size: 14px; color: var(--texto); }
.kyb-anios {
  font-family: var(--mono); font-size: 11.5px; color: var(--suave);
  background: var(--sup); border: 1px solid var(--borde); border-radius: 5px; padding: 1px 6px;
}
.kyb-notas { font-size: 11.5px; color: var(--tenue); font-style: italic; }
.kyb-item { padding: 8px 14px; border-top: 1px solid var(--borde); }
.kyb-item:first-of-type { border-top: 0; }
.kyb-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kyb-pos {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px;
  border-radius: 5px; color: #fff; background: var(--acento);
}
.kyb-pos.tras { background: var(--azul); }
.kyb-lado {
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px;
  color: var(--suave); background: var(--sup-2); border: 1px solid var(--borde);
}
.kyb-tipo { font-size: 11.5px; color: var(--tenue); font-family: var(--mono); }
.kyb-numero { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--acento); margin-left: auto; }
.kyb-art {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  margin-top: 6px; padding: 7px 10px; border-radius: 9px;
  background: var(--sup); border: 1px solid var(--borde);
}
.kyb-art.hay { background: var(--verde-bg); border-color: var(--verde-borde); }
.kyb-art:hover { border-color: var(--borde-2); box-shadow: var(--sombra); }
.kyb-art-cod { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--acento); flex: none; }
.kyb-art-desc {
  font-size: 12.5px; color: var(--suave); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kyb-art .exist { flex: none; font-size: 13px; }
.kyb-art-precio { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--suave); }
.kyb-no {
  margin-top: 6px; padding: 7px 10px; border-radius: 9px; background: var(--sup-2);
  border: 1px dashed var(--borde-2); color: var(--tenue); font-size: 12.5px;
}

/* ===== Ficha lateral ===== */
.velo { position: fixed; inset: 0; background: rgba(17,24,39,.42); z-index: 40; }
.ficha {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, 95vw); max-height: 92vh; z-index: 50;
  background: var(--sup); box-shadow: var(--sombra-lg); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; animation: fichaIn .18s ease-out;
}
@keyframes fichaIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes entrar { from { transform: translateY(26px); opacity: .3; } }
.ficha-top { display: flex; justify-content: flex-end; padding: 10px 12px 0; }
.ficha-cerrar {
  border: 1px solid var(--borde); background: var(--sup); color: var(--suave);
  width: 32px; height: 32px; border-radius: 9px; font-size: 14px;
}
.ficha-cerrar:hover { background: var(--sup-2); color: var(--texto); }
.ficha-cuerpo { padding: 0 22px 30px; overflow-y: auto; }
.ficha-foto {
  width: 100%; max-height: 230px; object-fit: contain; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--sup); margin-bottom: 14px;
}
.ficha-cod { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-cod .cod { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--acento); }
.btn-copiar {
  border: 1px solid var(--borde-2); background: var(--sup); border-radius: 8px;
  padding: 4px 10px; font-size: 12px; color: var(--suave); font-weight: 600;
}
.btn-copiar:hover { border-color: var(--acento-2); color: var(--acento); }
.btn-copiar.ok { color: var(--verde); border-color: var(--verde-borde); }
.ficha-desc { font-size: 15px; margin: 6px 0 0; }

/* Cabecera en banda: foto a la izquierda, identidad a la derecha */
.ficha-head { display: flex; gap: 18px; align-items: flex-start; margin: 2px 0 8px; }
.ficha-head-foto { flex: none; width: 190px; }
.ficha-head-id { min-width: 0; flex: 1; padding-top: 2px; }
.ficha-foto.ph { display: grid; place-items: center; height: 150px; font-size: 42px; color: var(--tenue); }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fchip { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  background: var(--sup-2); border: 1px solid var(--borde); color: var(--suave); }
.fchip.ok { color: var(--verde); background: var(--verde-bg); border-color: var(--verde-borde); }
.fchip.no { color: var(--tenue); }
.fchip.precio { color: var(--texto); }
.fchip.precio small { color: var(--tenue); font-weight: 600; }
.fchip.trans { color: var(--acento); border-color: var(--acento-2); }
.fchip.dep { color: var(--tenue); }
/* Medida física (diámetro de bomba, medidas de rótula): se destaca porque es
   el dato que separa dos piezas que se ven iguales. */
/* ---- Subir fotos del proveedor ---- */
.subir { margin-bottom: 22px; }
.subir-caja { display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center; padding: 26px 18px; border: 2px dashed var(--borde-2);
  border-radius: 14px; background: var(--sup-2); }
.subir-caja.encima { border-color: var(--acento); background: var(--sup); }
.subir-ic { font-size: 30px; }
.subir-caja code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
/* opacity:0 y NO display:none: Safari ignora el .click() sobre un input oculto */
.subir-input { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; left: -9999px; }
.subir-resumen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 2px; font-size: 14px; }
.subir-fila { display: flex; gap: 11px; align-items: center; padding: 9px 12px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--sup);
  margin-bottom: 6px; }
.subir-fila.mal { border-color: var(--acento-2); }
.subir-fila.hecho { opacity: .6; }
.subir-mini { width: 46px; height: 46px; object-fit: contain; background: #fff;
  border-radius: 7px; border: 1px solid var(--borde); flex: none; }
.subir-txt { flex: 1; min-width: 0; }
.subir-nom { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subir-art { font-size: 13px; color: var(--suave); }
.subir-aviso { font-size: 12px; color: var(--acento); font-weight: 600; }
.subir-ok { font-size: 12px; color: var(--verde, #1a7f37); font-weight: 700; }
.subir-x { border: 0; background: none; color: var(--tenue); font-size: 19px;
  cursor: pointer; padding: 2px 6px; flex: none; }
.foto-h2 { font-size: 16px; margin: 0 0 10px; }

/* Tira de opciones cuando un artículo trae varias fotos candidatas. La elegida
   va marcada; tocar otra cambia la grande sin decidir nada todavía. */
.foto-ops { display: flex; gap: 5px; padding: 6px 9px 0; flex-wrap: wrap; }
.foto-op { width: 40px; height: 40px; padding: 0; border-radius: 7px; cursor: pointer;
  border: 2px solid var(--borde); background: #fff; overflow: hidden; }
.foto-op img { width: 100%; height: 100%; object-fit: contain; }
.foto-op.act { border-color: var(--acento); }

/* ---- Despiece navegable por VIN ---- */
.desp-buscar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.desp-buscar input { flex: 1 1 260px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--borde-2); background: var(--sup); font-size: 16px;
  color: inherit; letter-spacing: 1px; text-transform: uppercase;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.desp-buscar button { flex: 0 0 auto; padding: 12px 20px; border: 0; border-radius: 12px;
  background: var(--acento); color: #fff; font-weight: 700; cursor: pointer; }
.desp-nota { font-size: 13px; line-height: 1.55; max-width: 620px; }
.desp-cab { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; }
.desp-cab h1 { margin: 0 0 3px; }
.desp-veh { font-size: 14px; color: var(--suave); }
.desp-vin { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px;
  margin-left: 8px; color: var(--tenue); }
.desp-otro { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--borde-2);
  background: var(--sup); cursor: pointer; color: inherit; font-size: 13px; }
.desp-migas { display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 14px; font-size: 13px; }
.desp-miga { background: none; border: 0; color: var(--acento); cursor: pointer;
  padding: 4px 2px; font-size: 13px; text-decoration: underline; }
.desp-sep { color: var(--tenue); }
/* Ficha del vehículo, arriba de todo: es lo primero que el vendedor confirma
   antes de creerle nada al despiece. */
.desp-veh-caja { border: 1px solid var(--borde); border-radius: 13px;
  background: var(--sup-2); padding: 14px 16px; margin-bottom: 14px; }
.desp-veh-fila { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; }
.desp-veh-nom { font-size: 17px; font-weight: 800; }
.desp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.desp-chip { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--borde-2); color: var(--suave); }
.desp-chip.ok { color: var(--verde, #1a7f37); border-color: currentColor; }
.desp-chip.aviso { color: var(--acento); border-color: var(--acento-2); }

.desp-filtro input { width: 100%; padding: 11px 14px; border-radius: 12px;
  border: 1.5px solid var(--borde-2); background: var(--sup); font-size: 14.5px;
  color: inherit; margin-bottom: 12px; }

/* Los grupos como pastillas, siempre a la vista, con su contador. */
.desp-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 14px; scrollbar-width: none; }
.desp-pills::-webkit-scrollbar { display: none; }
.desp-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 17px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--sup); cursor: pointer; color: inherit; font-size: 13.5px;
  font-weight: 700; }
.desp-pill:hover { border-color: var(--acento); }
.desp-pill.act { background: var(--texto); color: var(--sup); border-color: var(--texto); }
.desp-pill-n { font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px;
  background: var(--acento); color: #fff; }
.desp-grid-cab { font-size: 14px; font-weight: 700; margin-bottom: 10px; }

/* La cuadrícula de diagramas: el dibujo es lo que hace reconocible la pieza, así
   que manda sobre el texto. */
.desp-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
@media (min-width: 700px) { .desp-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
.desp-tarj { display: flex; flex-direction: column; text-align: left; padding: 0;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--sup);
  cursor: pointer; color: inherit; overflow: hidden; }
.desp-tarj:hover { border-color: var(--acento); }
.desp-tarj-img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: #fff; border-bottom: 1px solid var(--borde); }
.desp-tarj-img.ph { display: flex; align-items: center; justify-content: center;
  color: var(--tenue); font-size: 22px; }
.desp-tarj-cod { font-size: 12px; font-weight: 800; color: var(--acento);
  padding: 9px 11px 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.desp-tarj-nom { font-size: 12.5px; font-weight: 600; line-height: 1.35;
  padding: 3px 11px 11px; }
.desp-volver { background: none; border: 0; color: var(--acento); cursor: pointer;
  font-size: 13.5px; padding: 4px 0 10px; }
.desp-tit { margin: 0 0 12px; font-size: 17px; }
.desp-nocalza { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--acento-2); color: var(--acento); white-space: nowrap; }
.desp-zh { font-size: 11px; color: var(--tenue); }
.desp-resumen { font-size: 13.5px; color: var(--suave); margin-bottom: 10px; }
/* En pantalla grande el dibujo queda fijo al lado de la lista; en el celular
   se apila, con el dibujo arriba para que se vea al tocar un renglón. */
.desp-visor { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .desp-visor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.desp-img-caja { position: relative; border: 1px solid var(--borde); border-radius: 12px;
  background: #fff; overflow: hidden; }
.desp-img { display: block; width: 100%; height: auto; }
.desp-punto { position: absolute; transform: translate(-50%, -50%); min-width: 20px;
  height: 20px; padding: 0 4px; border-radius: 999px; border: 1.5px solid var(--acento);
  background: rgba(255,255,255,.92); color: var(--acento); font-size: 10px;
  font-weight: 800; cursor: pointer; line-height: 1; }
.desp-punto:hover { background: var(--acento); color: #fff; }
.desp-lista { display: flex; flex-direction: column; gap: 5px; max-height: 70vh;
  overflow-y: auto; }
.desp-fila { display: grid; gap: 8px; align-items: center; padding: 9px 11px;
  grid-template-columns: 42px minmax(0, 1fr); border: 1px solid var(--borde);
  border-radius: 9px; background: var(--sup); font-size: 13px; }
@media (min-width: 620px) { .desp-fila { grid-template-columns: 42px 130px minmax(0, 1fr) 150px; } }
.desp-fila.activa { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-2); }
.desp-fila.nocalza { opacity: .58; }
.desp-callout { font-weight: 800; color: var(--acento); font-size: 12px; }
.desp-pn { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.desp-nom { color: var(--suave); }
.desp-rem { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
  font-size: 12px; text-decoration: none; color: inherit; }
.desp-rem.si b { color: var(--verde, #1a7f37); }
.desp-rem.no b { color: var(--suave); }
.desp-rem.falta { color: var(--tenue); font-style: italic; }

/* ---- Login y cambio de clave ---- */
.login-pie { font-size: 12.5px; color: var(--tenue); margin-top: 14px; line-height: 1.5; }
.login-link { background: none; border: 0; color: var(--tenue); font-size: 13px;
  text-decoration: underline; cursor: pointer; margin-top: 12px; padding: 6px; }

/* ---- Panel de usuarios ---- */
.us-cab h2 { margin: 0 0 4px; font-size: 19px; }
.us-nuevo { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px;
  padding: 14px; background: var(--sup-2); border: 1px solid var(--borde); border-radius: 12px; }
.us-nuevo input, .us-nuevo select { flex: 1 1 160px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--borde-2); background: var(--sup); font-size: 14px; color: inherit; }
.us-nuevo button { flex: 0 0 auto; padding: 10px 18px; border: 0; border-radius: 10px;
  background: var(--acento); color: #fff; font-weight: 700; cursor: pointer; }
/* La clave temporal NO se esconde sola: el admin tiene que copiarla o dictarla,
   y si desapareciera habría que resetear otra vez. Se cierra a mano. */
.us-aviso { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 13px 15px; margin-bottom: 14px; border-radius: 11px;
  border: 1.5px solid var(--acento-2); background: var(--sup-2); }
.us-clave { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px;
  font-weight: 700; letter-spacing: .5px; color: var(--acento); margin-left: 6px; }
.us-lista { display: flex; flex-direction: column; gap: 9px; }
.us-fila { display: flex; gap: 12px; justify-content: space-between; align-items: center;
  flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--borde);
  border-radius: 11px; background: var(--sup); }
.us-fila.apagado { opacity: .55; }
.us-nom { font-weight: 700; font-size: 15px; }
.us-desc { font-size: 13.5px; color: var(--suave); }
.us-meta { font-size: 12px; color: var(--tenue); margin-top: 2px; }
.us-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.us-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--tenue); }
.us-tag.no { color: var(--acento); border-color: var(--acento-2); }
.us-tag.tmp { color: var(--suave); }
.us-tag.adm { color: var(--verde, #1a7f37); border-color: currentColor; }
.us-acciones { display: flex; gap: 7px; flex-wrap: wrap; }
.us-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--borde-2);
  background: var(--sup); font-size: 12.5px; cursor: pointer; color: inherit; }
.us-btn:hover { border-color: var(--acento); }
.pie-yo { font-weight: 700; }

/* Rango de años de aplicación en la fila de resultados */
.anios { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--borde); font-size: 11px; font-weight: 700; color: var(--suave);
  font-variant-numeric: tabular-nums; }
.fchip.spec { color: var(--acento); border-color: var(--acento-2);
  background: var(--acento-bg, transparent); font-weight: 700; }

/* Carrusel de venta cruzada (piezas hermanas), al fondo de la ficha */
.ficha-cross { margin: 12px -22px -30px; padding: 15px 22px 24px;
  background: var(--sup-2); border-top: 1px solid var(--borde); }
/* "Va con" es un juego escrito a mano, no un parecido calculado: se separa
   del otro carrusel para que no compitan por la mirada. */
.ficha-cross.juego { margin-bottom: 0; border-left: 3px solid var(--acento); }
.ficha-cross.juego + .ficha-cross { margin-top: 0; }
.ficha-cross h3 { margin: 0 0 10px; border: 0; padding: 0; color: var(--texto); font-size: 13px; }
.ficha-carrusel { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; }
.herm-card { flex: 0 0 158px; width: 158px; scroll-snap-align: start; display: flex;
  flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--sup); text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s; }
.herm-card:hover { border-color: var(--acento-2); box-shadow: var(--sombra-md); transform: translateY(-2px); }
.herm-foto { width: 100%; height: 92px; object-fit: contain; border-radius: 8px; background: var(--sup-2); }
.herm-foto.ph { display: grid; place-items: center; font-size: 28px; color: var(--tenue); }
.herm-cod { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--acento); word-break: break-all; }
.herm-desc { font-size: 11.5px; color: var(--suave); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.herm-exist { margin-top: auto; font-size: 11.5px; font-weight: 650; }
.herm-exist.si { color: var(--verde); }
.herm-exist.no { color: var(--tenue); }
.ficha-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; margin-bottom: 16px; }
.ficha-datos dt { color: var(--tenue); }
.ficha-datos dd { margin: 0; font-weight: 600; }
.ficha h3 {
  margin: 18px 0 8px; font-size: 11.5px; border-bottom: 1px solid var(--borde); padding-bottom: 5px;
}
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla td { padding: 5px 6px; border-bottom: 1px solid var(--borde); }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.grupo-marca { font-size: 11.5px; font-weight: 700; color: var(--tenue); padding-top: 8px; text-transform: uppercase; letter-spacing: .04em; }
.tag-oem { color: var(--acento); font-weight: 700; font-size: 11px; }
.tag-2 { color: var(--ambar); font-size: 10.5px; font-weight: 700; }
/* Intercambios compactos: número | marca, con divisores de sección */
.inter-n { font-size: 11px; font-weight: 700; color: var(--suave); background: var(--sup-2);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.inter-tabla td { padding: 4px 6px; }
.inter-sec { font-size: 10.5px; font-weight: 800; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .05em; padding: 12px 6px 3px !important;
  border-bottom: 0 !important; }
.inter-num { font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.inter-marca { text-align: right; font-size: 11.5px; color: var(--suave); font-weight: 600; }
.inter-fila.oem .inter-num { color: var(--acento); }
.inter-fila.oem .inter-marca { color: var(--acento); }
/* Conteo por sección y botón "+ ver N más" (las listas llegan a 1,300 filas) */
.inter-sec-n { font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--tenue); background: var(--sup-2); border-radius: 999px;
  padding: 1px 6px; margin-left: 6px; }
.inter-mas-fila td { border-bottom: 0 !important; padding: 6px 6px 2px !important; }
.inter-mas {
  display: inline-flex; align-items: center; gap: 7px; width: 100%;
  border: 1px dashed var(--borde-2); background: var(--sup); border-radius: 9px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 650; color: var(--suave);
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.inter-mas:hover { border-color: var(--acento-2); color: var(--acento); background: var(--sup-2); }
.inter-mas .sig {
  display: grid; place-items: center; width: 17px; height: 17px; flex: none;
  border-radius: 5px; background: var(--sup-2); color: var(--acento);
  font-size: 13px; font-weight: 800; line-height: 1;
}
.inter-mas.on { border-style: solid; }
.inter-mas.on .sig { background: var(--acento); color: #fff; }
.inter-oculta { margin-top: 2px; }
.kyb-cuenta {
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff;
  background: var(--acento); border-radius: 999px; padding: 1px 7px; letter-spacing: 0;
}
.kyb-ficha-num { font-size: 12.5px; color: var(--suave); margin-bottom: 6px; }
.kyb-ficha-num b { font-family: var(--mono); font-size: 14px; color: var(--acento); }
.kyb-tabla td { vertical-align: middle; }
.kyb-f-veh { font-size: 13px; }
.kyb-f-veh b { color: var(--acento); }
.kyb-f-anios { font-family: var(--mono); font-size: 12px; color: var(--tenue); white-space: nowrap; }
/* flex y no text-align: los badges de posición/lado/tipo tienen que quedar
   separados entre sí (pegados se lee "TRASEROSE.G"). */
.kyb-f-pos { display: flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.kyb-f-pos .kyb-numero { margin-left: 0; font-size: 12.5px; }
.kyb-f-num { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--acento); font-weight: 700; }
.kyb-mas { margin-top: 6px; }
.kyb-mas summary { cursor: pointer; font-size: 12.5px; color: var(--acento); font-weight: 600; list-style: none; padding: 4px 0; }
.kyb-mas summary::-webkit-details-marker { display: none; }
.kyb-mas summary::before { content: "▾ "; }
.kyb-mas[open] summary::before { content: "▴ "; }

.alias-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.alias-item {
  font-family: var(--mono); font-size: 12.5px; background: var(--sup-2);
  border: 1px solid var(--borde); border-radius: 6px; padding: 3px 8px;
}
.hermano {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px;
  border: 1px solid transparent; background: none; width: 100%; text-align: left;
}
.hermano:hover { border-color: var(--borde); background: var(--sup-2); }
.hermano .mini, .hermano .mini-ph { width: 38px; height: 38px; font-size: 15px; }
.hermano .cod { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--acento); }
.hermano .desc { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hermano .exist { margin-left: auto; font-size: 12.5px; flex: none; }

/* ===== Pie ===== */
.pie {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 13px 16px 22px; border-top: 1px solid var(--borde); background: var(--sup);
}
.pie-stats {
  display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-size: 12.5px; color: var(--tenue);
}
.pie-stats b { color: var(--suave); font-variant-numeric: tabular-nums; }
.pie-stats .alerta { color: var(--ambar); font-weight: 650; }
.pie-stats .pie-link { color: var(--suave); text-decoration: none; font-weight: 600; }
.pie-stats .pie-link:hover { color: var(--acento); text-decoration: underline; }

/* Indicador de COMPLETITUD: dos mini-barras de cobertura + chip de frescura. */
.completitud {
  display: flex; align-items: center; justify-content: center; gap: 12px 20px; flex-wrap: wrap;
}
.compl-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--suave); }
.compl-lab { font-weight: 600; white-space: nowrap; }
.compl-track {
  width: 78px; height: 6px; border-radius: 999px; background: var(--sup-2);
  border: 1px solid var(--borde); overflow: hidden; flex: none;
}
.compl-fill { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width .5s ease; }
.compl-pct { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texto); min-width: 30px; }
.compl-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px;
}
.compl-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.compl-chip.ok { background: var(--verde-bg); color: var(--verde); border: 1px solid var(--verde-borde); }
.compl-chip.amber { background: #FFFBEB; color: var(--ambar); border: 1px solid #FDE68A; }

/* ===== Revisión de cruces (interna) ===== */
.rev-seldepto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.rev-seldepto label { font-size: 13px; color: var(--suave); font-weight: 600; }
.rev-seldepto .select { font-size: 14px; padding: 9px 12px; }
.rev-kpis { margin-top: 6px; }
.rev-pct { font-size: 13px; font-weight: 600; color: var(--suave); }
.rev-porori { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 10px; }
.rev-ori-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--suave); font-variant-numeric: tabular-nums;
}
.rev-scroll { overflow-x: auto; }
.rev-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.rev-tabla th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--suave); padding: 8px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--borde-2);
}
.rev-tabla th.num, .rev-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rev-tabla th.cen, .rev-tabla td.cen { text-align: center; }
.rev-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.rev-fila { cursor: pointer; }
.rev-fila:hover td { background: var(--sup-2); }
.rev-fila.sin td { background: #FFFBEB; }
.rev-fila.sin:hover td { background: #FEF3C7; }
.rev-cod { font-family: var(--mono); font-weight: 700; color: var(--acento); white-space: nowrap; }
.rev-desc {
  min-width: 180px; max-width: 380px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rev-nada { color: var(--tenue); }
.rev-si { color: var(--verde); font-weight: 700; }
.rev-tabla .badges { margin: 0; flex-wrap: nowrap; }

/* ===== Celular ===== */
@media (max-width: 700px) {
  .barra { padding: 9px 14px; gap: 10px; }
  .barra-logo { height: 26px; }
  .barra-titulo { font-size: 15px; }
  .barra-titulo span { display: none; }
  .cuota { font-size: 11px; padding: 2px 8px; }
  .tabs { padding: 0 8px; }
  .tab { padding: 11px 10px; font-size: 13.5px; gap: 6px; }
  .tab-largo { display: none; }
  main { padding: 14px 12px 22px; }
  #q { font-size: 16px; padding: 12px 42px 12px 42px; }
  .buscador .lupa { left: 14px; width: 18px; height: 18px; }
  .fila { gap: 10px; padding: 9px 11px; align-items: flex-start; }
  .fila-desc { white-space: normal; }
  .mini, .mini-ph { width: 42px; height: 42px; }
  .fila-nums { text-align: right; }
  .grilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .dcard { padding: 11px 12px; }
  .dcard .nom { font-size: 13.5px; }
  .kpis { grid-template-columns: 1fr; }
  .kpi { display: flex; align-items: baseline; gap: 8px; }
  .kpi .val { font-size: 17px; }
  .vin-fila .btn { flex: 1 1 100%; }
  .veh-cab .btn { margin-left: 0; }
  /* En celular el artículo de REMUSA se apila: el código y la existencia
     nunca se deben cortar, la descripción sí. */
  .kyb-art { flex-wrap: wrap; gap: 4px 8px; }
  .kyb-art-desc { flex-basis: 100%; order: 3; white-space: normal; }
  .kyb-numero { margin-left: 0; }
  /* En celular la ficha ocupa toda la pantalla (no un modal flotante chico). */
  .ficha { top: 0; left: 0; transform: none; width: 100%; max-height: 100%; height: 100dvh;
    border-radius: 0; animation: entrar .16s ease-out; }
  .ficha-cuerpo { padding: 0 16px 26px; }
  .ficha-head { flex-direction: column; gap: 12px; }
  .ficha-head-foto { width: 100%; max-width: 220px; }
  .ficha-cross { margin: 12px -16px -26px; padding: 14px 16px 22px; }
  .pie-stats { gap: 10px; font-size: 11.5px; }
  .completitud { gap: 10px 16px; }
  .compl-track { width: 64px; }
  .rev-seldepto .select { width: 100%; }
  .rev-tabla { font-size: 12.5px; }
  .rev-tabla th, .rev-tabla td { padding: 7px 8px; }
  .rev-desc { max-width: 200px; }
}
@media (max-width: 380px) {
  .tab { padding: 11px 7px; font-size: 12.5px; }
  .tab svg { width: 15px; height: 15px; }
}


/* --- Ficha tecnica (criterios de TecDoc, en espanol) ---------------------
   Dos columnas: el criterio en gris a la izquierda y el valor destacado a la
   derecha. El valor es el dato que decide la venta (espesor minimo, diametro),
   asi que se lee primero. */
.spec-prod {
  font-weight: 600;
  margin: 2px 0 8px;
}
.spec-tabla td { padding: 4px 8px; }
.spec-tabla .spec-k { opacity: .72; width: 58%; }
.spec-tabla .spec-v { font-weight: 600; text-align: right; white-space: nowrap; }
.spec-fuente { font-size: .78rem; opacity: .65; margin-top: 6px; }


/* --- Venta perdida: lo anota el vendedor con el cliente enfrente ---------
   Discreto a proposito. No es una alarma: es una nota que se toma al pasar,
   y si estorba nadie la usa. */
.vp-ofrecer { margin: 10px 0 4px; display: flex; align-items: center; gap: 8px;
              flex-wrap: wrap; }
.vp-btn {
  border: 1px solid currentColor; background: transparent; color: inherit;
  opacity: .78; border-radius: 10px; padding: 6px 12px; font-size: .86rem;
  cursor: pointer;
}
.vp-btn:hover { opacity: 1; }
.vp-form { margin: 10px 0; padding: 10px 12px; border-radius: 12px;
           border: 1px solid rgba(128,128,128,.35); }
.vp-tit { font-size: .9rem; margin-bottom: 8px; }
.vp-motivos { display: flex; gap: 6px; flex-wrap: wrap; }
.vp-m {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: 10px; padding: 7px 12px; font-size: .86rem; cursor: pointer;
  /* Objetivo tactil comodo: esto se toca en el mostrador, a veces con guantes */
  min-height: 38px;
}
.vp-m:hover { background: rgba(128,128,128,.14); }
.vp-cancel { margin-top: 8px; background: none; border: 0; color: inherit;
             opacity: .6; font-size: .82rem; cursor: pointer; padding: 4px 0; }
.vp-ok  { border-color: rgba(40,160,80,.55); }
.vp-err { border-color: rgba(200,60,60,.55); }

/* Ficha original del fabricante (17vin, model_original_epc_list). */
.veh-ficha { margin: 8px 0 12px; }
.veh-ficha > summary,
.veh-ffab > summary { cursor: pointer; font-weight: 650; font-size: .86rem;
                      padding: 6px 2px; opacity: .85; }
/* Sin esto los valores largos ("1-WEATHER - THE TROPICAL ZONE") se salen de la
   pantalla: la clase que se reusa trae nowrap para medidas cortas. */
.veh-ficha .spec-v { white-space: normal; }
.veh-ffab { margin-top: 6px; border-top: 1px solid var(--borde); padding-top: 4px; }
.veh-ffab .spec-k { width: 46%; font-family: ui-monospace, monospace; font-size: .78rem; }

/* Piezas del mismo modelo pero de OTRA generación (filtro por año). */
.rem-otras { margin-top: 16px; border: 1px solid var(--borde); border-radius: 10px;
             padding: 6px 10px; background: var(--fondo-2, transparent); }
.rem-otras > summary { cursor: pointer; font-size: .85rem; font-weight: 650;
                       opacity: .7; padding: 4px 0; }
.rem-otras[open] > summary { margin-bottom: 6px; }

/* Sello de "pegó por número OE" en la tarjeta de departamento. */
.fam-card .pill.oe { background: rgba(22,163,74,.12); color: var(--verde, #16A34A);
                     border: 1px solid rgba(22,163,74,.28); font-weight: 650; }

/* Selector LOCAL de modelos: cuando no se identifica el VIN pero sí la marca. */
.sel-aviso { margin: 10px 0; padding: 10px 12px; border-radius: 10px;
             background: rgba(37,99,235,.08); font-size: .9rem; line-height: 1.4; }
.sel-buscar { width: 100%; padding: 10px 12px; font-size: 1rem; border-radius: 10px;
              border: 1px solid var(--borde-2); margin-bottom: 8px; }
.sel-lista { display: flex; flex-direction: column; gap: 4px; }
.sel-fila { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
            padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px;
            background: #fff; cursor: pointer; font: inherit; }
.sel-fila:hover { border-color: var(--borde-2); background: #FAFAFA; }
.sel-fila .sel-nom { flex: 1; font-weight: 600; }
.sel-fila .sel-anios { font-size: .8rem; opacity: .6; white-space: nowrap; }
.sel-mas { text-align: center; font-size: .82rem; opacity: .65; margin-top: 8px; }

/* Candidata de REEMPLAZO: la foto actual del artículo en una esquina, para comparar */
.foto-cand .foto-img { position: relative; }
.foto-actual { position: absolute; right: 4px; bottom: 4px; width: 34%; border: 2px solid #fff;
  border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.foto-actual img { width: 100%; height: auto; display: block; }
.foto-actual span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px;
  text-align: center; background: rgba(0,0,0,.55); color: #fff; }
.foto-cand.reemplazo .foto-cod::after { content: " · reemplazo"; color: #b45309; font-weight: 400; }

/* Cola de cruces por aprender */
.apr-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 14px; }
.apr-chk { font-size: .86rem; opacity: .8; display: flex; align-items: center; gap: 6px; }
.apr-aviso { font-size: .84rem; }
.apr-aviso.info { color: var(--verde, #16A34A); }
.apr-aviso.malo { color: #B91C1C; }
.apr-lista { display: flex; flex-direction: column; gap: 8px; }
.apr-fila { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
            background: #fff; display: grid; gap: 4px;
            grid-template-columns: 1fr auto; align-items: center; }
.apr-fila.dudosa { border-color: #F3B0B0; background: #FFFBFB; }
.apr-par { grid-column: 1; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.apr-buscado { background: #FEF3C7; padding: 2px 7px; border-radius: 6px; font-weight: 650; }
.apr-art { background: #E2EFDA; padding: 2px 7px; border-radius: 6px; font-weight: 650; }
.apr-flecha { opacity: .5; }
.apr-desc, .apr-meta { grid-column: 1; font-size: .82rem; }
.apr-desc { opacity: .85; }
.apr-meta { opacity: .65; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apr-flag { font-size: .74rem; padding: 1px 7px; border-radius: 999px; }
.apr-flag.malo { background: #FEE2E2; color: #991B1B; }
.apr-flag.ojo { background: #FEF3C7; color: #92400E; }
.apr-acc { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 700px) {
  .apr-fila { grid-template-columns: 1fr; }
  .apr-acc { grid-column: 1; grid-row: auto; flex-direction: row; }
}