/* High Custom · Inventario — sistema visual.
   Sale del logo: fondo negro, letra blanca pesada y el arco del tacómetro
   (verde → amarillo → naranja → rojo). El tacómetro es la señal de existencias:
   verde = hay de sobra, rojo = últimas. */
:root{
  --negro:#0a0a0b; --carbon:#121214; --grafito:#19191c; --acero:#222327; --linea:#2c2d32; --linea2:#3a3b41;
  --blanco:#f4f4f1; --gris:#a4a6ad; --tenue:#70737b;
  --t1:#5fb246; --t2:#c9d225; --t3:#f2bd1a; --t4:#f38a1c; --t5:#e7401f;
  --rojo:#e7401f; --rojo-h:#ff5a36; --rojo-f:#2b120c;
  --verde:#5fb246; --verde-f:#13220e;
  --ambar:#f2bd1a; --ambar-f:#2a220a;
  --azul:#58a6e8; --azul-f:#0f1f2e;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --texto:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radio:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--negro);color:var(--blanco);font-family:var(--texto);font-size:15px;line-height:1.45;min-height:100vh}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--rojo);color:#fff}

/* ───── tacómetro: la firma de la marca ───── */
.taco{display:flex;gap:3px;height:4px}
.taco i{flex:1;transform:skewX(-28deg)}
.taco i:nth-child(1){background:var(--t1)} .taco i:nth-child(2){background:var(--t2)}
.taco i:nth-child(3){background:var(--t3)} .taco i:nth-child(4){background:var(--t4)}
.taco i:nth-child(5){background:var(--t5)}

/* medidor de existencia: 5 segmentos, se encienden según lo que hay */
.medidor{display:inline-flex;gap:2px;vertical-align:middle}
.medidor i{width:9px;height:12px;background:var(--acero);transform:skewX(-20deg);border-radius:1px}
.medidor.n1 i:nth-child(-n+1){background:var(--t5)}
.medidor.n2 i:nth-child(-n+2){background:var(--t4)}
.medidor.n3 i:nth-child(-n+3){background:var(--t3)}
.medidor.n4 i:nth-child(-n+4){background:var(--t2)}
.medidor.n5 i:nth-child(-n+5){background:var(--t1)}

/* ───── barra superior ───── */
.cabeza{background:var(--negro);position:sticky;top:0;z-index:30;border-bottom:1px solid var(--linea)}
.cabeza .fila{display:flex;align-items:center;gap:16px;padding:10px 20px;max-width:1320px;margin:0 auto}
.cabeza .logo{height:38px;display:block}
.cabeza .area{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:3px;color:var(--gris);
  text-transform:uppercase;padding-left:16px;border-left:1px solid var(--linea2);line-height:1}
.cabeza .yo{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--gris)}
.cabeza .yo b{color:var(--blanco);font-weight:600}
.cabeza .yo a,.cabeza .yo button{background:none;border:none;color:var(--gris);cursor:pointer;text-decoration:none;font-size:13.5px}
.cabeza .yo a:hover,.cabeza .yo button:hover{color:var(--blanco)}
.cabeza .taco{height:3px;gap:0}
.cabeza .taco i{transform:none}

.pestanas{display:flex;gap:4px;max-width:1320px;margin:0 auto;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{background:none;border:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--tenue);padding:10px 14px 11px;white-space:nowrap;
  border-bottom:3px solid transparent;display:flex;align-items:center;gap:7px}
.pestanas button:hover{color:var(--blanco)}
.pestanas button.on{color:var(--blanco);border-bottom-color:var(--rojo)}
.pestanas .cuenta{background:var(--rojo);color:#fff;font-family:var(--texto);font-size:11px;font-weight:700;
  letter-spacing:0;border-radius:9px;padding:1px 7px;line-height:16px}

.cuerpo{max-width:1320px;margin:0 auto;padding:24px 20px 90px}

/* ───── tipografía ───── */
.titulo{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;letter-spacing:.3px;text-transform:uppercase}
.sub{color:var(--gris);font-size:14.5px;margin-top:6px;max-width:72ch}
.rotulo{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--tenue)}
.seccion{display:flex;align-items:baseline;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.seccion h2{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:1px;text-transform:uppercase}
.seccion .rotulo{margin-left:auto}
.mini{font-size:12.5px;color:var(--tenue)}
.num{font-variant-numeric:tabular-nums}
.rojo{color:var(--rojo)} .verde{color:var(--verde)} .ambar{color:var(--ambar)} .azul{color:var(--azul)} .gris{color:var(--gris)}

/* ───── pieza: cómo se escribe en toda la app ───── */
.pz-prod{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:1.6px;color:var(--rojo);text-transform:uppercase}
.pz-nom{font-weight:600;font-size:15.5px;line-height:1.3}
.pz-det{color:var(--gris);font-size:13px;margin-top:1px}
.codigo{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11.5px;color:var(--tenue);letter-spacing:.3px}

/* ───── botones ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  background:var(--rojo);color:#fff;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:1px;
  text-transform:uppercase;padding:11px 20px;border-radius:8px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--rojo-h)}
.btn:disabled{background:var(--acero);color:var(--tenue);cursor:not-allowed}
.btn.sec{background:var(--acero);color:var(--blanco);border:1px solid var(--linea2)}
.btn.sec:hover{background:#2c2d33}
.btn.linea{background:none;border:1px solid var(--linea2);color:var(--blanco)}
.btn.linea:hover{border-color:var(--gris)}
.btn.verde{background:#3f8f2c} .btn.verde:hover{background:var(--verde)}
.btn.chico{font-size:13.5px;padding:7px 13px}
.btn.ancho{width:100%}
.enlace{background:none;border:none;color:var(--gris);cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-size:13.5px}
.enlace:hover{color:var(--blanco)}

/* ───── chips de filtro ───── */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{background:var(--grafito);border:1px solid var(--linea);color:var(--gris);cursor:pointer;border-radius:20px;
  padding:6px 13px;font-size:13px;font-weight:500;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.chip:hover{color:var(--blanco);border-color:var(--linea2)}
.chip.on{background:var(--blanco);color:var(--negro);border-color:var(--blanco);font-weight:600}
.chip .c{font-size:11.5px;opacity:.7}

/* ───── campos ───── */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label,.campo .et{font-size:12px;font-weight:600;color:var(--gris);letter-spacing:.4px;text-transform:uppercase}
.entrada,select.entrada,textarea.entrada{background:var(--carbon);border:1px solid var(--linea2);border-radius:8px;
  padding:11px 13px;font-size:15.5px;width:100%;outline:none}
.entrada:focus{border-color:var(--gris)}
textarea.entrada{resize:vertical;min-height:70px}
.buscador{position:relative}
.buscador input{background:var(--carbon);border:1px solid var(--linea2);border-radius:10px;padding:15px 16px 15px 48px;
  font-size:18px;width:100%;outline:none}
.buscador input:focus{border-color:var(--blanco)}
.buscador svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--tenue)}
.rejilla2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.rejilla2{grid-template-columns:1fr}}

.pasos{display:inline-flex;align-items:stretch;border:1px solid var(--linea2);border-radius:10px;overflow:hidden}
.pasos button{background:var(--acero);border:none;width:52px;font-size:24px;cursor:pointer;color:var(--blanco)}
.pasos button:hover{background:#2e2f35}
.pasos input{width:78px;text-align:center;background:var(--carbon);border:none;font-family:var(--display);
  font-weight:700;font-size:28px;outline:none;padding:6px 0}

/* ───── listas de piezas ───── */
.lista{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--carbon)}
.renglon{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 16px;
  border-bottom:1px solid var(--linea);cursor:pointer;text-align:left;width:100%;background:none;border-left:none;border-right:none;border-top:none}
.renglon:last-child{border-bottom:none}
.renglon:hover{background:var(--grafito)}
.existe{text-align:right;min-width:92px}
.existe .n{font-family:var(--display);font-weight:800;font-size:28px;line-height:1}
.existe .n.cero{color:var(--tenue)}
.existe .l{font-size:11px;color:var(--tenue);text-transform:uppercase;letter-spacing:.6px;margin-top:3px}
.marcas-pz{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* ───── etiquetas ───── */
.et{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 8px;border-radius:4px;white-space:nowrap;border:1px solid transparent}
.et.usa{background:var(--azul-f);color:var(--azul);border-color:#1d3d5c}
.et.ubi{background:var(--acero);color:var(--gris)}
.et.sin{background:var(--rojo-f);color:#ff8a6b;border-color:#56231a}
.et.ret{background:var(--ambar-f);color:var(--ambar);border-color:#5a4610}
.et.pres{background:#221a33;color:#b99af5;border-color:#3d2e5c}
.et.ok{background:var(--verde-f);color:var(--verde);border-color:#27461d}

/* tipos de movimiento */
.mv{display:inline-block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.mv.entrada,.mv.inicial,.mv.regreso,.mv.devolucion{color:var(--verde)}
.mv.venta,.mv.instalacion{color:var(--blanco)}
.mv.defecto{color:var(--rojo)}
.mv.prestamo{color:#b99af5}
.mv.traspaso,.mv.taller{color:var(--azul)}
.mv.ajuste,.mv.salida_excel{color:var(--ambar)}
.tachado{text-decoration:line-through;opacity:.45}

/* ───── tablas ───── */
.tabla-env{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--carbon)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--tenue);text-align:left;padding:11px 14px;border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--grafito)}
td{padding:11px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--grafito)}
th.d,td.d{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ───── panel lateral de pieza ───── */
.velo{position:fixed;inset:0;background:#000b;z-index:50;display:flex;justify-content:flex-end;animation:aparece .15s}
.panel{background:var(--carbon);width:min(560px,100%);height:100%;overflow-y:auto;border-left:1px solid var(--linea2);
  animation:entra .2s ease-out;display:flex;flex-direction:column}
.panel .top{position:sticky;top:0;background:var(--carbon);z-index:2;padding:18px 22px 14px;border-bottom:1px solid var(--linea)}
.panel .cerrar{position:absolute;right:14px;top:14px;background:var(--acero);border:none;width:36px;height:36px;border-radius:50%;
  font-size:20px;cursor:pointer;color:var(--blanco)}
.panel .dentro{padding:18px 22px 40px}
@keyframes aparece{from{opacity:0}}
@keyframes entra{from{transform:translateX(40px);opacity:.4}}

.stock3{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;margin:16px 0}
.stock3 div{background:var(--grafito);padding:12px 10px;text-align:center}
.stock3 .n{font-family:var(--display);font-weight:800;font-size:30px;line-height:1}
.stock3 .l{font-size:10.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.7px;margin-top:4px}

.acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.accion{background:var(--grafito);border:1px solid var(--linea);border-radius:9px;padding:12px 13px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:2px}
.accion:hover{border-color:var(--linea2);background:var(--acero)}
.accion b{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.8px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.accion span{font-size:12px;color:var(--tenue)}
.accion.sale b::before,.accion.entra b::before{content:'';width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
.accion.sale b::before{border-top:8px solid var(--rojo)}
.accion.entra b::before{border-bottom:8px solid var(--verde)}
.accion.on{border-color:var(--blanco);background:var(--acero)}
.forma{background:var(--grafito);border:1px solid var(--linea2);border-radius:var(--radio);padding:16px;margin-top:12px}

.historial{list-style:none}
.historial li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:13.5px;align-items:start}
.historial li:last-child{border-bottom:none}
.historial .cant{font-family:var(--display);font-weight:800;font-size:19px;min-width:38px;text-align:right}

.foto-pz{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radio);background:var(--grafito);display:block}
.silueta{color:var(--linea2)}

/* ───── avisos ───── */
.brindis{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;background:var(--blanco);color:var(--negro);
  font-weight:600;padding:12px 20px;border-radius:9px;box-shadow:0 10px 30px #000a;max-width:92vw;animation:sube .2s}
.brindis.mal{background:var(--rojo);color:#fff}
@keyframes sube{from{transform:translate(-50%,14px);opacity:0}}
.vacio{padding:40px 20px;text-align:center;color:var(--tenue)}
.cargando{padding:40px;text-align:center;color:var(--tenue);font-family:var(--display);letter-spacing:2px;text-transform:uppercase}
.nota-caja{border-left:3px solid var(--ambar);background:var(--ambar-f);padding:11px 14px;border-radius:0 8px 8px 0;font-size:13.5px;color:#e9d9a3}

@media(max-width:700px){
  .cabeza .fila{padding:10px 14px;gap:10px}
  .cabeza .logo{height:30px}
  .cabeza .area{font-size:12px;letter-spacing:2px;padding-left:10px}
  .cabeza .yo .nom{display:none}
  .cuerpo{padding:18px 14px 80px}
  .pestanas{padding:0 10px}
  .titulo{font-size:28px}
  .acciones{grid-template-columns:1fr 1fr}
  .stock3 .n{font-size:24px}
}

/* Fotografías de pieza protagonistas; vehículo como referencia secundaria. */
.carro-referencia{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--gris);font-size:11px;font-weight:500;text-align:left;line-height:1.3;width:max-content;max-width:100%;text-transform:none;letter-spacing:0}
.carro-referencia img{width:72px;height:40px;object-fit:contain;background:#eceeed;border:1px solid #ffffff14;border-radius:6px;flex:none}
.carro-referencia small{display:block;font-size:9px;color:#979ba4;margin-top:2px}
.mini-pieza{display:grid;place-items:center;width:90px;height:82px;flex:none;border-radius:9px;background:#17181c;border:1px solid var(--linea);overflow:hidden;color:#646974}
.mini-pieza img{width:100%;height:100%;object-fit:contain}.mini-pieza svg{width:70px}
.renglon .pieza-texto{flex:1;min-width:0}.renglon{gap:16px}
.celda-pieza{display:flex;align-items:center;gap:14px;min-width:305px}.foto-tabla{width:86px;min-width:86px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--linea);border-radius:8px;background:#18191c;color:var(--gris);overflow:hidden;padding:0;cursor:pointer}
.foto-tabla img{width:84px;height:64px;object-fit:contain}.foto-tabla svg{width:62px;height:64px}.foto-tabla span{font-size:10px;padding:5px;width:100%;border-top:1px solid var(--linea)}.foto-tabla:hover{border-color:var(--t3);color:white}
.alta-foto{display:flex;gap:18px;align-items:center;border:1px dashed #555a64;background:#17191d;border-radius:12px;padding:16px;margin-bottom:24px}.alta-foto strong{font-size:16px}.alta-foto-preview{width:120px;height:110px;border-radius:8px;background:#22252a;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:none;color:#9399a4}.alta-foto-preview svg{width:80px}.alta-foto-preview span{font-size:10px}.alta-foto-preview img{width:100%;height:100%;object-fit:contain}.foto-acciones{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.foto-acciones label{cursor:pointer}.archivo-foto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.archivo-foto:focus-visible+*{outline:2px solid white}
.busqueda-inventario{display:grid;grid-template-columns:1fr 240px;gap:10px;margin-top:18px}.filtros-bodega{margin-top:16px}.filtros-bodega summary{cursor:pointer;color:var(--gris);font-size:13px;padding:6px 0}.creditos-fotos{display:block;text-align:center;color:#838995;font-size:10px;padding:14px;text-decoration:none}.brindis{z-index:2000}button:focus-visible,a:focus-visible,summary:focus-visible,label.btn:focus-within{outline:2px solid #dfc384;outline-offset:3px}
@media(max-width:700px){.barra-busca{flex-wrap:wrap}.barra-busca .buscador{flex-basis:100%;width:100%}.barra-busca>.btn{margin-left:auto;font-size:13px;padding:10px 14px}.busqueda-inventario{grid-template-columns:1fr}.renglon{gap:10px;padding:14px 10px}.mini-pieza{width:58px;height:64px}.mini-pieza svg{width:45px}.carro-referencia img{width:58px;height:34px}.carro-referencia{gap:6px;font-size:10px}.carro-referencia small{font-size:8px}.alta-foto{align-items:flex-start;gap:12px;padding:12px}.alta-foto-preview{width:82px;height:90px}.alta-foto .btn{font-size:12px}.alta-foto strong{font-size:14px}.existe{min-width:50px}.foto-pz{object-fit:contain}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.renglon{grid-template-columns:auto minmax(0,1fr) auto}body.panel-abierto{overflow:hidden}.foto-pz{object-fit:contain}.panel .top{padding-right:62px}.tarjeta .img img{object-fit:contain}.panel[role=dialog]:focus{outline:none}

/* Controles independientes: abrir pieza o ampliar su vehículo de referencia. */
.renglon,.tarjeta{position:relative}.pieza-abrir{position:absolute;inset:0;z-index:1;background:transparent;border:0;border-radius:inherit;cursor:pointer;width:100%;height:100%}
.carro-referencia{position:relative;z-index:2;border:0;background:transparent;padding:0;font-family:inherit;cursor:zoom-in;color:var(--gris)}
.carro-referencia:hover img,.carro-referencia:focus-visible img{border-color:#dfc384;box-shadow:0 0 0 2px #dfc38466}
.carro-avance{position:fixed;z-index:2500;width:min(330px,calc(100vw - 24px));background:#191b20;border:1px solid #5c616c;border-radius:12px;padding:10px;box-shadow:0 16px 50px #000b;pointer-events:none}
.carro-avance img{width:100%;height:190px;object-fit:contain;border-radius:7px;background:#eff0f0;display:block}.carro-avance strong{display:block;font-size:16px;padding:9px 2px 2px;color:#f7f7f7}.carro-avance small{font-size:12px;color:#aaa;padding:2px}
.carro-ampliado{position:fixed;inset:0;margin:auto;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #4d535e;border-radius:16px;background:#191b20;color:#eee;overflow:auto;box-shadow:0 24px 100px #000b}
.carro-ampliado::backdrop{background:#000c;backdrop-filter:blur(4px)}.carro-ampliado>img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:62dvh;object-fit:contain;background:#eff0f0}.carro-ampliado-texto{padding:18px 22px}.carro-ampliado strong{font-size:24px}.carro-ampliado p{font-size:14px;color:#aeb4bf;margin-top:8px}.cerrar-carro{position:absolute;right:12px;top:12px;border:1px solid #ffffff60;border-radius:50%;width:42px;height:42px;font-size:28px;background:#15161bea;color:#fff;cursor:pointer;z-index:1}