/* ═══════════════════════════════════════════════════════════════════════════
   MULTI RETEN — el aspecto
   ───────────────────────────────────────────────────────────────────────────
   Decisiones, y por qué:

   · NADA DE EMOJIS COMO ÍCONOS. Todos los dibujos son SVG hechos a mano acá.
   · POCO REDONDEO (4 px, y 12 px en las ventanitas). Es un negocio de repuestos,
     no una app de moda: tiene que verse firme y rectangular.
   · LETRA GRANDE Y BOTONES GRANDES. Se usa de pie en el mostrador, muchas veces
     con las manos sucias y a veces con guantes. Nada de tocar puntitos chicos.
   · CONTRASTE ALTO. La tienda tiene luz de tubo y entra sol; el gris claro sobre
     blanco no se lee.
   · EL LUGAR DE LA PIEZA VA GRANDE Y EN NARANJA. Encontrar el retén en el
     estante es lo que más tiempo hace perder en el día.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --acero:      #1e2a38;   /* el azul oscuro de la marca */
  --acero-2:    #2c3d51;
  --naranja:    #e4610f;   /* el acento: donde hay que mirar */
  --naranja-cl: #fff1e6;
  --papel:      #f4f5f7;
  --blanco:     #ffffff;
  --linea:      #d3d7dd;
  --letra:      #16202b;
  --suave:      #5d6875;
  --verde:      #16794a;
  --rojo:       #b3251c;
  --amarillo:   #8a5a10;
  --radio:      4px;
  --radio-caja: 12px;
  --sombra:     0 1px 2px rgba(22,32,43,.10), 0 4px 14px rgba(22,32,43,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--papel);
  color: var(--letra);
  font-size: 16px;
  line-height: 1.45;
  /* que el pulgar no choque con la barra del iPhone */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── contenedores ─────────────────────────────────────────────────────── */
.hoja { max-width: 1180px; margin: 0 auto; padding: 0 14px; }
/* ⚠️ min-width:0 en todo lo que sea grid o flex: sin esto, una descripción
   larga estira la columna y desborda la pantalla del teléfono. */
.grilla, .fila { min-width: 0; }
.oculto { display: none !important; }

/* ── la barra de arriba ───────────────────────────────────────────────── */
.barra {
  background: var(--acero);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.barra .hoja { display: flex; align-items: center; gap: 12px; height: 58px; }
.marca { display: flex; align-items: center; gap: 9px; font-weight: 800;
         letter-spacing: .04em; font-size: 18px; white-space: nowrap; }
.marca .lema { font-weight: 500; font-size: 11px; letter-spacing: .10em;
               opacity: .72; display: block; line-height: 1; margin-top: 2px; }
.barra .quien { margin-left: auto; font-size: 13px; opacity: .85; white-space: nowrap; }

/* ── el menú de abajo (teléfono) y de arriba (compu) ──────────────────── */
.menu { display: flex; gap: 2px; background: var(--acero-2); }
.menu .hoja { display: flex; gap: 2px; }
.menu button {
  flex: 1; background: none; border: 0; color: #cdd6e0; cursor: pointer;
  padding: 11px 8px 9px; font-size: 13px; font-weight: 600; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.menu button svg { width: 21px; height: 21px; }
.menu button:hover { color: #fff; }
.menu button.activo { color: #fff; border-bottom-color: var(--naranja); background: rgba(255,255,255,.06); }

/* ── EL BUSCADOR: lo más importante de la pantalla ────────────────────── */
.buscador { background: var(--blanco); border-bottom: 1px solid var(--linea);
            padding: 14px 0; position: sticky; top: 58px; z-index: 30; }
.caja-busca { display: flex; align-items: center; gap: 10px;
              border: 2px solid var(--acero); border-radius: var(--radio);
              background: #fff; padding: 0 12px; height: 54px; }
.caja-busca:focus-within { border-color: var(--naranja);
                           box-shadow: 0 0 0 4px rgba(228,97,15,.14); }
.caja-busca svg { width: 22px; height: 22px; color: var(--suave); flex: none; }
.caja-busca input {
  flex: 1; min-width: 0; border: 0; outline: 0; font-size: 19px; font-weight: 600;
  font-family: inherit; color: var(--letra); background: transparent;
}
.caja-busca input::placeholder { font-weight: 400; color: #939ba6; }
.caja-busca .limpiar { border: 0; background: none; cursor: pointer; color: var(--suave);
                       font-size: 26px; line-height: 1; padding: 0 4px; font-family: inherit; }

/* las ayuditas de qué se puede escribir */
.pistas { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.pistas button {
  border: 1px solid var(--linea); background: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--suave);
  font-family: inherit; font-weight: 600; white-space: nowrap;
}
.pistas button:hover { border-color: var(--naranja); color: var(--naranja); }
.pistas b { color: var(--letra); font-family: "Consolas", monospace; }

/* ── los resultados ───────────────────────────────────────────────────── */
.rotulo { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px;
          font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
          color: var(--suave); font-weight: 700; }
.rotulo::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
.rotulo .cuantos { text-transform: none; letter-spacing: 0; font-weight: 600; }

.piezas { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .piezas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .piezas { grid-template-columns: 1fr 1fr 1fr; } }

.pieza {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 13px; cursor: pointer; position: relative; min-width: 0;
  display: grid; gap: 8px; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pieza:hover { border-color: var(--acero); box-shadow: var(--sombra); transform: translateY(-1px); }
.pieza .arriba { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pieza .codigo { font-family: "Consolas", "Courier New", monospace; font-size: 17px;
                 font-weight: 700; color: var(--acero); letter-spacing: .02em; }
.pieza .marca-p { font-size: 12px; font-weight: 700; color: var(--suave);
                  text-transform: uppercase; letter-spacing: .05em; }
.pieza .desc { font-size: 14px; color: var(--suave); overflow-wrap: anywhere; }

/* las medidas, que es como se identifica un retén */
.medidas { display: inline-flex; align-items: center; gap: 4px;
           font-family: "Consolas", monospace; font-size: 17px; font-weight: 700;
           background: var(--acero); color: #fff; padding: 3px 10px;
           border-radius: var(--radio); white-space: nowrap; }
.medidas .x { opacity: .5; font-weight: 400; }
.medidas.vacia { background: #eceef1; color: #98a1ac; font-weight: 500; font-size: 13px; }

/* DÓNDE ESTÁ: lo que más se busca con la vista */
.lugar { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
         font-size: 14px; color: var(--naranja); background: var(--naranja-cl);
         border: 1px solid #f6d6bd; padding: 4px 10px; border-radius: var(--radio); }
.lugar svg { width: 15px; height: 15px; flex: none; }
.lugar.sin { color: var(--suave); background: #f0f1f3; border-color: var(--linea); }

.pieza .abajo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                border-top: 1px solid #edeff2; padding-top: 8px; }
.precio { font-size: 20px; font-weight: 800; color: var(--letra); white-space: nowrap; }
.precio small { font-size: 12px; font-weight: 600; color: var(--suave); }
.precio.sin { color: var(--rojo); font-size: 14px; font-weight: 700; }
.stock { margin-left: auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.stock.hay  { color: var(--verde); }
.stock.poco { color: var(--amarillo); }
.stock.no   { color: var(--rojo); }

/* ── ventanita (ficha, venta) ─────────────────────────────────────────── */
.velo { position: fixed; inset: 0; background: rgba(16,24,33,.55); z-index: 60;
        display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 700px) { .velo { align-items: center; padding: 24px; } }
.ventana {
  background: #fff; width: 100%; max-width: 640px; border-radius: var(--radio-caja) var(--radio-caja) 0 0;
  /* ⚠️ max-height + overflow para que en el teléfono SIEMPRE se pueda llegar
     al final: con overflow:hidden los botones de abajo quedan inalcanzables. */
  max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 -8px 40px rgba(0,0,0,.3);
}
@media (min-width: 700px) { .ventana { border-radius: var(--radio-caja); max-height: 88vh; } }
.ventana h3 { position: sticky; top: 0; background: var(--acero); color: #fff;
              padding: 14px 18px; font-size: 17px; display: flex; align-items: center;
              gap: 10px; z-index: 2; }
.ventana h3 .cerrar { margin-left: auto; background: none; border: 0; color: #fff;
                      font-size: 27px; line-height: 1; cursor: pointer; font-family: inherit; }
.ventana .cuerpo { padding: 16px 18px 22px; }

/* ── datos en dos columnas ────────────────────────────────────────────── */
.datos { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--linea);
         border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
@media (min-width: 560px) { .datos { grid-template-columns: 1fr 1fr; } }
.dato { background: #fff; padding: 9px 12px; min-width: 0; }
.dato b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--suave); font-weight: 700; margin-bottom: 1px; }
.dato span { font-size: 15px; overflow-wrap: anywhere; }

/* ── botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--linea); background: #fff; color: var(--letra);
  border-radius: var(--radio); padding: 11px 16px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; min-height: 46px; transition: .12s;
}
.btn:hover { border-color: var(--acero); }
.btn svg { width: 18px; height: 18px; }
.btn.principal { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.btn.principal:hover { background: #cf560c; border-color: #cf560c; }
.btn.oscuro { background: var(--acero); border-color: var(--acero); color: #fff; }
.btn.ancho { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── el carrito de la venta ───────────────────────────────────────────── */
.carrito { position: fixed; left: 0; right: 0; bottom: 0; background: var(--acero);
           color: #fff; z-index: 50; box-shadow: 0 -4px 20px rgba(0,0,0,.28); }
.carrito .hoja { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.carrito .cuenta { background: var(--naranja); border-radius: 999px; min-width: 26px;
                   height: 26px; display: grid; place-items: center; font-weight: 800;
                   font-size: 14px; padding: 0 7px; }
.carrito .total { margin-left: auto; font-size: 21px; font-weight: 800; white-space: nowrap; }

/* ── avisos ───────────────────────────────────────────────────────────── */
.vacio-aviso { text-align: center; padding: 46px 20px; color: var(--suave); }
.vacio-aviso svg { width: 54px; height: 54px; opacity: .35; margin-bottom: 12px; }
.vacio-aviso p { font-size: 16px; }

.aviso { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
         background: var(--acero); color: #fff; padding: 12px 20px; border-radius: var(--radio);
         font-weight: 600; z-index: 90; opacity: 0; pointer-events: none;
         transition: opacity .2s, transform .2s; max-width: 90vw; text-align: center; }
.aviso.se-ve { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso.malo { background: var(--rojo); }

/* ── tablero ──────────────────────────────────────────────────────────── */
.tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
@media (min-width: 760px) { .tarjetas { grid-template-columns: repeat(4, 1fr); } }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
           padding: 14px; min-width: 0; }
.tarjeta b { display: block; font-size: 11.5px; text-transform: uppercase;
             letter-spacing: .06em; color: var(--suave); margin-bottom: 4px; }
.tarjeta .n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.tarjeta.alerta .n { color: var(--rojo); }
.tarjeta.bien .n { color: var(--verde); }

/* ── entrar ───────────────────────────────────────────────────────────── */
.entrar { min-height: 100vh; display: grid; place-items: center; padding: 20px;
          background: var(--acero); }
.entrar form { background: #fff; border-radius: var(--radio-caja); padding: 30px 26px;
               width: 100%; max-width: 380px; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.entrar .marca { color: var(--acero); justify-content: center; font-size: 24px;
                 margin-bottom: 4px; flex-direction: column; gap: 4px; }
.entrar .sub { text-align: center; color: var(--suave); font-size: 13px; margin-bottom: 22px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12.5px; font-weight: 700; color: var(--suave);
               text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 13px; font-size: 16px; font-family: inherit; min-height: 48px;
  background: #fff; color: var(--letra);
}
.campo input:focus, .campo select:focus { outline: 0; border-color: var(--naranja);
                                          box-shadow: 0 0 0 3px rgba(228,97,15,.13); }
.error { background: #fdeceb; border: 1px solid #f2c3bf; color: var(--rojo);
         padding: 10px 12px; border-radius: var(--radio); font-size: 14px;
         font-weight: 600; margin-bottom: 14px; }

/* ── tablas (reportes) ────────────────────────────────────────────────── */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { background: #eef0f3; text-align: left; padding: 10px 12px; font-size: 12px;
     text-transform: uppercase; letter-spacing: .05em; color: var(--suave);
     white-space: nowrap; border-bottom: 1px solid var(--linea); }
td { padding: 10px 12px; border-bottom: 1px solid #eef0f2; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.cod { font-family: "Consolas", monospace; font-weight: 700; }