:root{
  --rojo:#CB0000; --rojo-oscuro:#9A0000;
  --tinta:#2A2A2A; --tinta-suave:#5A5A5A; --tinta-tenue:#8A8A8A;
  --blanco:#FFFFFF; --papel:#FAFAFA; --papel-calido:#F2F1EE; --linea:#E4E2DD;
  --ok:#1E8E3E; --warn:#F2B705; --bad:#CB0000;
  --display:"Archivo Black","Anton",Impact,system-ui,sans-serif;
  --texto:"Inter","Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --ancho:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* Volanta mono: la usa el manual para etiquetar sin gritar */
.volanta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-tenue)}
.sku{font-family:var(--mono);font-size:12px;color:var(--tinta-suave)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0}
h1{font-size:clamp(1.9rem,4.5vw,3rem)}
h2{font-size:clamp(1.3rem,2.5vw,1.75rem)}

/* ── Cabecera ── */
.cab{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:50}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* El logo es el oficial (Disenador/assets/logo, sacado del .ai). Antes se dibujaba con
   tipografia: no era el logo de Telmo, era una imitacion. "MAYORISTA" va debajo como bajada,
   no forma parte del logo. */
.logo{display:block;text-decoration:none;line-height:1}
.logo img{display:block;height:34px;width:auto}
.logo span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--tinta-tenue);margin-top:4px;text-align:right}
.nav{display:flex;gap:18px;font-size:14px}
.nav a{text-decoration:none;color:var(--tinta-suave);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--tinta)}
.nav a[aria-current]{color:var(--tinta);border-bottom-color:var(--rojo)}
.cab-fin{margin-left:auto;display:flex;align-items:center;gap:10px}
.buscar-mini{position:relative}
.buscar-mini input{width:230px;padding:8px 12px;border:1px solid var(--linea);border-radius:6px;font:inherit;font-size:13px;background:var(--papel)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:6px;border:1px solid transparent;
     font:inherit;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-oscuro)}
.btn-linea{background:var(--blanco);border-color:var(--linea);color:var(--tinta)}
.btn-linea:hover{border-color:var(--tinta-tenue)}
.btn-sm{padding:6px 12px;font-size:13px}

/* Carrito: contador que sólo aparece cuando hay algo */
.carrito-btn{position:relative}
.carrito-n{position:absolute;top:-6px;right:-6px;background:var(--rojo);color:#fff;font-family:var(--mono);
           font-size:10px;min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px}
.carrito-n[data-hay]{display:flex}

/* ── Semáforo de disponibilidad (el dato es del proveedor; su NOMBRE no se publica) ── */
.sem{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-suave);white-space:nowrap}
.sem::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta-tenue);flex:none}
.sem[data-n="hay"]::before{background:var(--ok)}
.sem[data-n="poco"]::before{background:var(--warn)}
.sem[data-n="no"]::before{background:var(--bad)}
.sem[data-n="nd"]::before{background:#C8C6C1}

/* ── Filas de producto (el listado ES la pantalla de carga) ── */
.filas{border:1px solid var(--linea);border-radius:8px;background:var(--blanco);overflow:hidden}
.fila{display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;
      padding:12px 16px;border-bottom:1px solid var(--linea)}
.fila:last-child{border-bottom:0}
.fila[data-cargado]{background:#FDF6F6}
.fila-foto{width:64px;height:64px;object-fit:contain;background:var(--papel-calido);border-radius:4px}
.fila-tit{font-weight:500;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 4px}
.fila-tit:hover{color:var(--rojo)}
.fila-precio{text-align:right}
.fila-precio b{font-family:var(--mono);font-size:16px;font-weight:600;display:block}
.fila-precio small{color:var(--tinta-tenue);font-size:11px}

/* Stepper: cargar cantidad SIN entrar a la ficha. Es lo más importante del listado —
   un mayorista carga 20 códigos y obligarlo a entrar y volver por cada uno mata el pedido. */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:6px;background:var(--blanco)}
.stepper button{width:32px;height:34px;border:0;background:none;font-size:16px;cursor:pointer;color:var(--tinta-suave);font-family:var(--mono)}
.stepper button:hover{background:var(--papel-calido);color:var(--tinta)}
.stepper input{width:46px;height:34px;border:0;border-left:1px solid var(--linea);border-right:1px solid var(--linea);
               text-align:center;font-family:var(--mono);font-size:14px;background:none;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Grillas ── */
.grilla-marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.marca-card{display:block;text-decoration:none;background:var(--blanco);border:1px solid var(--linea);border-radius:8px;padding:16px}
.marca-card:hover{border-color:var(--rojo)}
.marca-card b{display:block;font-size:15px}
.marca-card span{font-family:var(--mono);font-size:11px;color:var(--tinta-tenue)}

/* ── Layout de listado con filtros ── */
.con-filtros{display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start}
.filtros{position:sticky;top:76px}
.filtro-grupo{margin-bottom:22px}
.filtro-grupo h3{font-family:var(--texto);font-size:11px;font-weight:600;letter-spacing:.12em;
                 text-transform:uppercase;color:var(--tinta-tenue);margin:0 0 8px}
.filtro-lista{max-height:260px;overflow-y:auto;padding-right:4px}
.filtro-op{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px;cursor:pointer}
.filtro-op input{margin:0;accent-color:var(--rojo)}
.filtro-op .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--tinta-tenue)}
.filtro-buscar{width:100%;padding:6px 10px;border:1px solid var(--linea);border-radius:5px;font:inherit;font-size:12px;margin-bottom:6px}

/* ── Ficha ── */
.ficha{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
.ficha-fotos img{width:100%;max-height:60vh;object-fit:contain;background:var(--blanco);border:1px solid var(--linea);border-radius:8px}
.miniaturas{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.miniaturas img{width:64px;height:64px;object-fit:contain;border:1px solid var(--linea);border-radius:4px;cursor:pointer;background:var(--blanco)}
.caja-compra{background:var(--blanco);border:1px solid var(--linea);border-radius:8px;padding:20px;position:sticky;top:76px}
.caja-compra .precio-grande{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1}
.dato{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--linea);font-size:13px}
.dato:last-child{border-bottom:0}
.dato dt{color:var(--tinta-tenue)}
.dato dd{margin:0;text-align:right}

/* ── Pie ── */
.pie{background:var(--blanco);border-top:1px solid var(--linea);margin-top:56px;padding:32px 0;font-size:13px;color:var(--tinta-suave)}
.pie-in{max-width:var(--ancho);margin:0 auto;padding:0 20px;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.pie a{color:var(--tinta-suave)}

/* ── Barra del pedido: aparece sola cuando hay algo cargado ── */
.barra-pedido{position:fixed;left:0;right:0;bottom:0;background:var(--tinta);color:#fff;padding:12px 20px;
              display:none;align-items:center;gap:20px;z-index:60}
.barra-pedido[data-hay]{display:flex}
.barra-pedido .in{max-width:var(--ancho);margin:0 auto;display:flex;align-items:center;gap:20px;width:100%}
.barra-pedido b{font-family:var(--mono)}

.vacio{text-align:center;padding:56px 20px;color:var(--tinta-tenue)}

/* Piezas que SOLO existen en el celular (el panel de filtros como hoja). */
.solo-movil{display:none}
.filtros-cab{align-items:center;justify-content:space-between;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--linea)}
.filtros-cab b{font-size:17px}
.btn-cerrar{border:0;background:none;font-size:30px;line-height:1;padding:0 6px;cursor:pointer;color:var(--tinta-suave)}
.filtros-pie{position:sticky;bottom:0;background:var(--blanco);padding:14px 0 4px;margin-top:18px;border-top:1px solid var(--linea)}

/* ── Celular ──────────────────────────────────────────────────────────────────────────────
   El listado tiene que abrir MOSTRANDO PRODUCTOS. Con los filtros apilados arriba, el primer
   producto caia en el pixel 992 de una pantalla de 812: habia que scrollear una pantalla y
   pico para ver el primero. Ahora los filtros son una hoja que se abre a pedido.
   Y todo lo que se toca mide 44px: el stepper (que es LO que se usa para armar el pedido)
   media 32x34 y se erraba el dedo. */
@media (max-width:900px){
  .solo-movil{display:flex}
  .con-filtros{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr}
  .caja-compra{position:static}
  /* La cabecera media 165px de una pantalla de 812 (20%) porque el nav se iba a una tercera
     fila. Dos filas: logo + nav arriba, buscador + Pedido abajo. */
  .cab-in{padding:10px 16px;gap:10px}
  .nav{order:0;width:auto;margin-left:auto;gap:14px;font-size:13px}
  .cab-fin{order:1;width:100%;margin-left:0;gap:8px}
  .buscar-mini{flex:1;min-width:0}
  /* 16px no es capricho: por debajo, iOS hace zoom solo al tocar el campo y descuadra todo. */
  .buscar-mini input{width:100%;font-size:16px;padding:11px 12px}
  .carrito-btn{white-space:nowrap}

  /* El panel de filtros, como hoja a pantalla completa */
  .filtros{display:none;position:fixed;inset:0;z-index:80;background:var(--blanco);
           overflow-y:auto;padding:18px 20px 24px;-webkit-overflow-scrolling:touch}
  .filtros[data-abierto]{display:block}
  .filtro-lista{max-height:none}
  .filtro-op{padding:11px 0;font-size:15px}
  .filtro-op input[type=checkbox]{width:20px;height:20px}
  .filtro-buscar{padding:11px 12px;font-size:16px}

  /* Areas de toque: 44px es el minimo con el que no se erra el dedo. */
  .btn{padding:12px 18px}
  .btn-sm{padding:10px 14px}
  .nav a{padding:9px 0;display:inline-block}
  .stepper button{width:44px;height:44px;font-size:20px}
  .stepper input{width:52px;height:44px;font-size:16px}

  /* La fila: foto + datos arriba, precio y cantidad abajo en la misma linea. */
  .fila{grid-template-columns:52px 1fr auto;
        grid-template-areas:"foto datos datos" "precio precio stepper";
        row-gap:10px;column-gap:12px;padding:14px 14px}
  .fila-foto{grid-area:foto;width:52px;height:52px}
  .fila-datos{grid-area:datos;min-width:0}
  .fila-precio{grid-area:precio;text-align:left;align-self:center}
  .fila .stepper{grid-area:stepper;justify-self:end}

  /* La barra del pedido es fija abajo: sin esto tapa las ultimas filas y el pie. */
  body:has(.barra-pedido[data-hay]){padding-bottom:74px}

  /* La foto de la ficha medía 800px en una pantalla de 812: para ver el PRECIO había que
     scrollear 1,88 pantallas. Acotar la foto sola no alcanzaba: en el celular la columna de
     fotos se apila ENTERA (foto + miniaturas + descripción) antes de la caja de compra, así
     que el precio seguía cayendo en la pantalla 1,3. Con display:contents los hijos pasan a
     ser items del grid y se reordenan: foto -> precio y boton -> miniaturas -> descripción. */
  .ficha-fotos img{max-height:44vh}
  .ficha-fotos{display:contents}
  .ficha-fotos > img{order:1}
  .caja-compra{order:2}
  .miniaturas{order:3}
  .ficha-desc{order:4}
  .pie a{display:inline-block;padding:6px 0}
}

/* El boton "Filtrar" no existe en escritorio: ahi el panel esta siempre a la vista. */
@media (min-width:901px){
  [data-abrir-filtros]{display:none}
}