/* En la web las fuentes vienen de Google Fonts (20 KB en vez de 400 KB).
   El ZIP que descarga el cliente las lleva incrustadas. */
/* ==========================================================================
   PDV RETAIL PRO — SISTEMA DE PUNTO DE VENTA
   Leuname Software · leunamesoftware.com
   ========================================================================== */

:root{
  --fondo:#f4f5f7; --panel:#fff; --panel2:#fafafb;
  --tinta:#181a1f; --apagado:#767b87; --linea:#e6e7ec;
  --naranja:#ff7a1a; --naranja-osc:#e56000; --naranja-suave:#fff1e6;
  --verde:#1f9d55; --azul:#1e63d6;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;max-width:100%}
body{background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-size:14.5px;-webkit-font-smoothing:antialiased}
button,input{font-family:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d6d8e0;border-radius:99px}

.aviso-demo{background:#111;color:#ffcf9e;text-align:center;padding:8px 20px;font-size:12px;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1.5px solid transparent;
  border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
.btn-linea{background:#fff;border-color:var(--linea);color:var(--tinta)}
.btn-linea:hover{border-color:#c7c9d1}
.btn-cobrar{background:var(--naranja);color:#fff}
.btn-cobrar:hover{background:var(--naranja-osc)}

/* ---------------- Layout general ---------------- */
.pdv{display:grid;grid-template-columns:200px 1fr 340px;height:calc(100vh - 32px);min-height:640px}

/* ---------------- Barra lateral ---------------- */
.lateral{background:#14161b;color:#e7e8ec;display:flex;flex-direction:column;padding:20px 14px}
.marca{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.marca-ic{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--naranja),var(--naranja-osc));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.marca strong{display:block;font-size:14.5px}
.marca span{font-size:10.5px;color:#8b8f9c;letter-spacing:.04em}
.cats{display:flex;flex-direction:column;gap:5px;flex:1}
.cat{text-align:left;background:none;border:none;color:#b7bac4;padding:10px 12px;border-radius:9px;font-size:13px;
  font-weight:600;cursor:pointer;transition:.15s}
.cat:hover{background:rgba(255,255,255,.06);color:#fff}
.cat.act{background:var(--naranja);color:#fff}
.lateral-pie{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;flex-direction:column;gap:14px}
.turno{display:flex;flex-direction:column;font-size:11.5px;color:#8b8f9c}
.turno strong{font-size:19px;color:#fff;font-variant-numeric:tabular-nums;margin-top:2px}
.cajero{display:flex;align-items:center;gap:9px}
.cajero-ini{width:30px;height:30px;border-radius:50%;background:#2a2d36;color:#fff;font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cajero strong{display:block;font-size:12.5px}
.cajero span{font-size:11px;color:#8b8f9c}

/* ---------------- Catálogo central ---------------- */
.catalogo{padding:20px 22px;overflow-y:auto}
.cab-catalogo{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.buscar{display:flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--linea);border-radius:10px;
  padding:11px 16px;flex:1;min-width:220px;color:var(--apagado)}
.buscar input{border:none;outline:none;font-size:13.5px;width:100%;color:var(--tinta)}
.fecha{font-size:12.5px;color:var(--apagado);white-space:nowrap;text-transform:capitalize}

.grid-productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.producto{background:var(--panel);border:1.5px solid var(--linea);border-radius:12px;padding:12px;cursor:pointer;
  transition:.15s;text-align:left}
.producto:hover{border-color:var(--naranja);transform:translateY(-2px)}
.producto:active{transform:translateY(0)}
.producto-img{height:64px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;
  font-size:26px}
.producto h4{font-size:12.5px;font-weight:700;line-height:1.3;margin-bottom:6px;min-height:32px}
.producto .cat-eti{font-size:10px;color:var(--apagado);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;display:block}
.producto .precio{font-size:14px;font-weight:800;color:var(--naranja-osc)}

/* ---------------- Panel de ticket ---------------- */
.ticket{background:var(--panel);border-left:1px solid var(--linea);display:flex;flex-direction:column;padding:20px}
.ticket-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.ticket-cab h2{font-size:15.5px;font-weight:800}
.ticket-num{font-size:11px;color:var(--apagado);font-variant-numeric:tabular-nums}

.ticket-lineas{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:2px;margin-bottom:14px}
.ticket-vacio{font-size:12.5px;color:var(--apagado);text-align:center;padding:40px 10px}
.linea{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--linea);border-radius:10px;padding:9px 10px}
.linea-info{flex:1;min-width:0}
.linea-info strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linea-info span{font-size:11px;color:var(--apagado)}
.linea-cant{display:flex;align-items:center;gap:6px;flex-shrink:0}
.linea-cant button{width:22px;height:22px;border-radius:6px;border:1px solid var(--linea);background:#fff;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--tinta);display:flex;align-items:center;justify-content:center}
.linea-cant span{font-size:12.5px;font-weight:700;min-width:16px;text-align:center}
.linea-precio{font-size:12.5px;font-weight:800;flex-shrink:0;min-width:56px;text-align:right}
.linea-quitar{width:22px;height:22px;border-radius:6px;border:none;background:none;color:#c53030;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}

.ticket-totales{border-top:1.5px dashed var(--linea);padding-top:12px;margin-bottom:14px}
.fila{display:flex;justify-content:space-between;font-size:12.5px;color:var(--apagado);margin-bottom:6px}
.fila-total{font-size:18px;font-weight:800;color:var(--tinta);margin-top:6px}

.ticket-pago{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pago{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border:1.5px solid var(--linea);
  border-radius:10px;background:#fff;cursor:pointer;font-size:11px;font-weight:700;color:var(--apagado);transition:.15s}
.pago.act{border-color:var(--naranja);background:var(--naranja-suave);color:var(--naranja-osc)}

.ticket-botones{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}

/* ---------------- Modal de venta cobrada ---------------- */
.modal-fondo{position:fixed;inset:0;background:rgba(10,10,14,.55);display:none;align-items:center;justify-content:center;
  z-index:50;padding:20px}
.modal-fondo.ver{display:flex}
.modal{background:#fff;border-radius:16px;padding:32px 28px;max-width:340px;width:100%;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-check{width:56px;height:56px;border-radius:50%;background:var(--verde);display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px}
.modal h3{font-size:18px;margin-bottom:8px}
.modal p{font-size:13.5px;color:var(--apagado);margin-bottom:22px}
.modal-acciones{display:flex;flex-direction:column;gap:9px}

@media(max-width:1024px){
  .pdv{grid-template-columns:76px 1fr 300px}
  .marca strong,.marca span,.turno,.cajero strong,.cajero span{display:none}
  .marca{justify-content:center}
  .cajero{justify-content:center}
  .cat{text-align:center;font-size:0}
  .cat::first-letter{font-size:13px}
}
@media(max-width:820px){
  .pdv{grid-template-columns:1fr;height:auto;min-height:0}
  .lateral{flex-direction:row;align-items:center;overflow-x:auto}
  .cats{flex-direction:row}
  .lateral-pie{display:none}
  .catalogo{overflow-y:visible}
  .ticket{border-left:none;border-top:1px solid var(--linea)}
}