/* public/css/estilos.css
 *
 * Sistema de diseño para una herramienta de mostrador, no una landing page.
 * Prioridad: legibilidad a la distancia, botones grandes para tocar con el
 * dedo, alto contraste para luz de local con tubos fluorescentes, y cero
 * ambigüedad visual entre "esto suma plata" / "esto resta plata" / "esto
 * es peligroso" (eliminar producto, etc.)
 *
 * Paleta: inspirada en chapa, óxido y cinta métrica amarilla — el
 * vocabulario visual de una ferretería real, no un dashboard SaaS genérico.
 *   --acero:      #2B3138  (gris acero oscuro, texto principal y headers)
 *   --acero-claro: #5B6470 (texto secundario)
 *   --amarillo-obra: #F2B705 (acento principal: cinta métrica / advertencia constructiva)
 *   --naranja-oxido: #C75D2C (acento de alerta / cobro / fiado)
 *   --verde-stock:  #2E7D32 (confirmaciones, stock ok)
 *   --rojo-stock:   #B3261E (stock bajo, eliminar)
 *   --fondo:        #F6F4EF (blanco hueso, no blanco puro: menos cansador)
 *   --superficie:   #FFFFFF (cards)
 *   --borde:        #DCD7CC
 */

:root {
  --acero: #2B3138;
  --acero-claro: #5B6470;
  --amarillo-obra: #F2B705;
  --amarillo-obra-oscuro: #C99300;
  --naranja-oxido: #C75D2C;
  --verde-stock: #2E7D32;
  --verde-stock-bg: #E8F3E8;
  --rojo-stock: #B3261E;
  --rojo-stock-bg: #FBEAE9;
  --fondo: #F6F4EF;
  --superficie: #FFFFFF;
  --borde: #DCD7CC;

  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 3px rgba(43, 49, 56, 0.08), 0 1px 2px rgba(43, 49, 56, 0.06);
  --sombra-flotante: 0 8px 24px rgba(43, 49, 56, 0.18);

  --fuente-display: 'Space Grotesk', system-ui, sans-serif;
  --fuente-texto: 'Inter', system-ui, sans-serif;
  --fuente-mono: 'JetBrains Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fuente-texto);
  background: var(--fondo);
  color: var(--acero);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  margin: 0;
  color: var(--acero);
  letter-spacing: -0.01em;
}

p { margin: 0; }

/* Foco de teclado siempre visible: el mostrador se opera mucho con
   atajos de teclado, ver requisito del MVP. */
:focus-visible {
  outline: 3px solid var(--amarillo-obra);
  outline-offset: 2px;
}

button {
  font-family: var(--fuente-texto);
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--fuente-texto);
  font-size: 1rem;
}

/* ---------- Layout general ---------- */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.barra-superior {
  background: var(--acero);
  color: white;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.barra-superior .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.barra-superior .marca .punto-amarillo {
  width: 10px;
  height: 10px;
  background: var(--amarillo-obra);
  border-radius: 2px;
  flex-shrink: 0;
}

.nav-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: var(--acero);
  padding: 0 12px 10px;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  padding: 8px 16px;
  border-radius: 999px;
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav-tab.activo {
  background: var(--amarillo-obra);
  color: var(--acero);
}

.nav-tab:not(.activo):hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.contenido {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

/* ---------- Componentes ---------- */

.card {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: var(--radio-chico);
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.06s, box-shadow 0.15s, background 0.15s;
  min-height: 48px; /* objetivo táctil grande: se usa con el dedo en el mostrador */
}

.btn:active { transform: scale(0.98); }

.btn-primario {
  background: var(--amarillo-obra);
  color: var(--acero);
}
.btn-primario:hover { background: var(--amarillo-obra-oscuro); }

.btn-secundario {
  background: var(--superficie);
  color: var(--acero);
  border: 1.5px solid var(--borde);
}
.btn-secundario:hover { border-color: var(--acero-claro); }

.btn-peligro {
  background: var(--rojo-stock-bg);
  color: var(--rojo-stock);
}
.btn-peligro:hover { background: #f5d9d7; }

.btn-texto {
  background: none;
  color: var(--acero-claro);
  padding: 8px 10px;
  min-height: auto;
}
.btn-texto:hover { color: var(--acero); }

.btn-bloque { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.input-grupo { display: flex; flex-direction: column; gap: 6px; }

.input-grupo label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--acero-claro);
}

.input,
select.input,
textarea.input {
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 12px 14px;
  font-size: 1rem;
  background: var(--superficie);
  color: var(--acero);
  width: 100%;
}

.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--amarillo-obra-oscuro);
}

.input-buscador {
  font-size: 1.15rem;
  padding: 16px 18px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.badge-ok { background: var(--verde-stock-bg); color: var(--verde-stock); }
.badge-alerta { background: var(--rojo-stock-bg); color: var(--rojo-stock); }
.badge-neutro { background: var(--fondo); color: var(--acero-claro); border: 1px solid var(--borde); }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acero-claro);
  padding: 10px 12px;
  border-bottom: 2px solid var(--borde);
}
td {
  padding: 12px;
  border-bottom: 1px solid var(--borde);
  font-size: 0.95rem;
}
tr:last-child td { border-bottom: none; }

.vacio {
  text-align: center;
  padding: 50px 20px;
  color: var(--acero-claro);
}
.vacio .icono { font-size: 2.5rem; margin-bottom: 12px; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--acero);
  color: white;
  padding: 14px 22px;
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra-flotante);
  z-index: 200;
  font-weight: 600;
  font-size: 0.9rem;
  max-width: 90vw;
}
.toast.error { background: var(--rojo-stock); }
.toast.ok { background: var(--verde-stock); }

.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(43,49,56,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 0;
}

.modal {
  background: var(--superficie);
  border-radius: var(--radio) var(--radio) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: var(--sombra-flotante);
}

@media (min-width: 700px) {
  .modal-fondo { align-items: center; }
  .modal { border-radius: var(--radio); }
}

.fila-flex {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.grilla-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .grilla-2 { grid-template-columns: 1fr; }
}

.texto-chico { font-size: 0.85rem; color: var(--acero-claro); }
.monoespaciado { font-family: var(--fuente-mono); }

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--borde);
  border-top-color: var(--amarillo-obra-oscuro);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Recibo de venta ---------- */
/* Pensado para imprimirse en impresora térmica de ticket (58-80mm) o en
   hoja normal: el ancho se adapta solo, y en pantalla se ve como un
   "papelito" angosto para que sea obvio que es un comprobante, no una
   pantalla más de la app. */

.recibo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,49,56,0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 300;
  overflow-y: auto;
  padding: 24px 12px;
}

.recibo-papel {
  background: white;
  width: 100%;
  max-width: 340px;
  padding: 20px 18px;
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: var(--acero);
  box-shadow: var(--sombra-flotante);
  border-radius: 4px;
}

.recibo-papel .recibo-centro { text-align: center; }
.recibo-papel .recibo-separador {
  border: none;
  border-top: 1px dashed var(--borde);
  margin: 10px 0;
}
.recibo-papel .recibo-fila {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.recibo-papel .recibo-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 2px;
}
.recibo-papel .recibo-total {
  font-size: 1.1rem;
  font-weight: 700;
}

.recibo-acciones {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Mientras el recibo está abierto, JS agrega esta clase al <body>
   (ver mostrarRecibo en ui.js). Evita depender de selectores CSS
   modernos como :has(), que no son soportados en todos los navegadores
   que puede tener la compu de un mostrador. */
body.imprimiendo-recibo > .app-shell {
  display: none;
}

@media print {
  body {
    background: white;
  }

  .recibo-overlay {
    position: static;
    inset: auto;
    padding: 0;
    background: none;
    display: block;
  }

  .recibo-papel {
    box-shadow: none;
    max-width: 100%;
    margin: 0;
  }

  .recibo-acciones { display: none; }
}