/* ============================================================
   GastrOS — Sistema de diseño
   DASE · Soluciones Empresariales

   Un solo criterio: app operativa seria, legible por horas,
   sin ruido visual. Nada de énfasis en cursiva en ningún punto
   de la interfaz — la jerarquía se resuelve con peso y color,
   nunca con italic.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Color — superficie clara (contenido) ─────────────────── */
  --bg:            #F6F7F9;   /* fondo general — gris muy claro, menos fatiga que blanco puro */
  --surface:       #FFFFFF;   /* tarjetas, tablas, paneles */
  --surface-alt:   #EEF0F3;   /* encabezados de tabla, hover sobre superficie clara */
  --border:        #E2E5EA;   /* líneas divisorias */
  --border-strong: #CBD0D8;   /* bordes de inputs, foco inactivo */

  /* ── Color — texto sobre superficie clara ─────────────────── */
  --ink:        #1B1E25;   /* texto principal — negro cálido, nunca #000 puro */
  --ink-muted:  #6B7280;   /* texto secundario */
  --ink-faint:  #9AA1AC;   /* placeholder, terciario */

  /* ── Color — menú lateral oscuro ──────────────────────────── */
  --sidebar:            #14171F;
  --sidebar-alt:        #1C202B;   /* hover / item activo */
  --sidebar-border:     #262B38;
  --sidebar-ink:        #A8AEBB;   /* texto default del menú */
  --sidebar-ink-active: #FFFFFF;

  /* ── Color — acento (verde petróleo, no violeta genérico) ─── */
  --accent:      #0F6E4F;
  --accent-dark: #0B5A40;
  --accent-ink:  #FFFFFF;
  --accent-soft: #E4F2EC;   /* fondo suave para badges/estados activos en superficie clara */

  /* ── Color — estados semánticos ────────────────────────────── */
  --danger:      #B3261E;
  --danger-soft: #FBEAE9;
  --warning:     #92600A;
  --warning-soft:#FBF2E2;
  --success:     var(--accent);
  --success-soft:var(--accent-soft);

  /* ── Tipografía — una sola familia en toda la app ─────────── */
  --font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Radios y sombra — discretos, ni secos ni "app de consumo" ─ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(20, 23, 31, .04);
  --shadow-md: 0 1px 3px rgba(20, 23, 31, .08), 0 1px 2px rgba(20, 23, 31, .04);
}

/* ── Base ──────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-style: normal;   /* nunca cursiva en ningún punto de la interfaz */
}

body {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Regla dura: nada se pone en cursiva, ni por herencia de <em>, <i>, etc. */
em, i, .italic, cite, blockquote {
  font-style: normal !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Números tabulares: alinea columnas de dinero y cantidades en tablas */
.num, .money, td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Inputs ────────────────────────────────────────────────────── */

.form-control, .form-select {
  font-family: var(--font);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, .form-select:focus {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-label {
  font-weight: 500;
  font-size: .8125rem;
  color: var(--ink-muted);
}

/* ── Botones ───────────────────────────────────────────────────── */

.btn {
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius-sm);
  font-style: normal;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
.btn-outline-secondary {
  border-color: var(--border-strong);
  color: var(--ink-muted);
}
.btn-outline-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn-link { font-weight: 500; color: var(--ink-muted); text-decoration: none; }
.btn-link:hover { color: var(--ink); }

/* ── Cards ─────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ── Tablas ────────────────────────────────────────────────────── */

table.gastros-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: .875rem;
}
table.gastros-table thead th {
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
table.gastros-table tbody td {
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
table.gastros-table tbody tr:hover { background: var(--surface-alt); }

/* ── Badges de estado ──────────────────────────────────────────── */

.badge-gastros {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .25em .6em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-gastros.ok      { background: var(--accent-soft);  color: var(--accent-dark); }
.badge-gastros.warn    { background: var(--warning-soft); color: var(--warning); }
.badge-gastros.danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-gastros.neutral { background: var(--surface-alt);  color: var(--ink-muted); }

/* Variantes "fuertes" — fondo sólido en vez de pastel, para estados que
   deben resaltar sobre el resto de la tabla (ej. estado de una orden de
   compra: qué sigue abierto/pendiente salta primero que el resto). */
.badge-gastros.warn-strong { background: #F2B705; color: var(--ink); }
.badge-gastros.ok-strong   { background: var(--accent-dark); color: #fff; }

/* ── Sidebar (menú lateral oscuro) ────────────────────────────── */

.gastros-sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
}
.gastros-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--sidebar-ink);
  font-weight: 500;
  font-size: .875rem;
  padding: .5625rem 1.125rem;
  border-radius: 0;
  border-left: 2px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.gastros-sidebar .nav-link svg { flex-shrink: 0; opacity: .85; }
.gastros-sidebar .nav-link:hover {
  background: var(--sidebar-alt);
  color: var(--sidebar-ink-active);
}
.gastros-sidebar .nav-link.active {
  background: var(--sidebar-alt);
  color: var(--sidebar-ink-active);
  border-left-color: var(--accent);
}
.gastros-sidebar .nav-link.active svg { opacity: 1; }

/* ── Navbar superior (clara) ───────────────────────────────────── */

.gastros-navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* ── Icono inline — tamaño y trazo consistentes ──────────────────
   Uso: <svg class="gicon">...</svg> o clases de tamaño gicon-sm/lg */
.gicon {
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gicon-sm { width: 15px; height: 15px; }
.gicon-lg { width: 22px; height: 22px; }

/* ── Utilidades de texto ───────────────────────────────────────── */

.text-muted-gastros { color: var(--ink-muted) !important; }
.text-faint-gastros  { color: var(--ink-faint) !important; }

/* ── Tabs (Bootstrap nav-tabs, reajustado al acento verde) ────────
   Agregado 08/07/2026 al construir Inventario — Bootstrap trae azul
   por defecto, que rompe la paleta fijada en la sección 7. */
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link {
  font-family: var(--font);
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .5rem .25rem;
  margin-right: 1.25rem;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-color: var(--border-strong); }
.nav-tabs .nav-link.active {
  color: var(--accent-dark);
  background: transparent;
  border-color: var(--accent);
}

/* ── Opción de negocio (login, selector de negocio en app.html) ───
   Antes vivía solo en el <style> local de login.html; movida aquí
   08/07/2026 al reusarla en el modal de cambiar/crear negocio de app.html. */
.negocio-option {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: .75rem 1rem;
  transition: border-color .12s ease, background .12s ease;
}
.negocio-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.negocio-option:disabled {
  cursor: default;
  opacity: 1;
}

/* ── Alerta de error inline (formularios, banners de vista) ──────
   Antes vivía solo en el <style> local de login.html; movida aquí
   08/07/2026 al construir el módulo Inventario — cualquier vista
   nueva (compras.js, gastos.js...) la necesita igual. */
.alert-danger-gastros {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .625rem .875rem;
  font-size: .8125rem;
  font-weight: 500;
}

/* ── POS táctil (pantalla de 15" para el cajero) ──────────────────
   Agregado 18/07/2026: la vista Caja y POS se opera con el dedo, no con
   mouse — todo objetivo interactivo respeta el mínimo táctil (~48px),
   sin depender de hover, y con feedback de "presionado" inmediato. */
.pos-touch { touch-action: manipulation; }
.pos-touch button, .pos-touch .btn, .pos-touch .form-control, .pos-touch .form-select {
  touch-action: manipulation;
}
.pos-touch ::selection { background: var(--accent-soft); }

/* Botones normales del panel: piso táctil sin volverlos gigantes */
.pos-touch .btn { min-height: 44px; }

/* Tarjetas del catálogo — el objetivo que más se toca, debe ser grande
   y dar feedback claro al presionar (no hay hover en una pantalla táctil). */
.pos-touch .catalogo-item {
  min-height: 92px;
  padding: .875rem .75rem !important;
  border-width: 1.5px !important;
  transition: transform .06s ease, background .06s ease, border-color .06s ease;
}
.pos-touch .catalogo-item:active:not(:disabled) {
  transform: scale(.96);
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}
.pos-touch .catalogo-item .catalogo-nombre { font-size: 1rem; line-height: 1.25; }
.pos-touch .catalogo-item .catalogo-precio { font-size: .9375rem; font-weight: 600; }

/* Chips de categoría / mesas — fila con scroll horizontal, sin wrap, más
   grandes para el dedo; se deslizan en vez de apilarse en varias líneas. */
.pos-touch .chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: .25rem;
}
.pos-touch .chip-touch {
  flex: 0 0 auto;
  min-height: 46px;
  padding: .5rem 1.125rem !important;
  font-size: .9375rem;
  white-space: nowrap;
}

/* Grilla de mesas dentro de la persiana (#offcanvas-mesas) — se envuelve en
   vez de desplazarse, así que escala bien con muchas mesas sin scroll
   horizontal interminable. */
.mesas-grid-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .5rem;
}
.mesa-tile {
  min-height: 56px;
  font-size: .9375rem;
}

/* Cantidad en el carrito: botones cuadrados grandes, fáciles de acertar
   con el dedo, con la cantidad en medio a buen tamaño de lectura. */
.pos-touch .btn-qty {
  width: 44px; height: 44px;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0;
  line-height: 1;
}
.pos-touch .qty-valor { min-width: 2.25rem; text-align: center; font-size: 1.0625rem; font-weight: 600; }
.pos-touch .btn-quitar-linea {
  width: 40px; height: 40px;
  padding: 0;
  font-size: 1.125rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: var(--surface);
}
.pos-touch .btn-quitar-linea:active { background: var(--danger-soft); }

/* Botón Cobrar — la acción final y más frecuente, debe ser el objetivo
   más grande y visible del panel. */
.pos-touch #btn-cobrar {
  min-height: 64px;
  font-size: 1.25rem;
  border-radius: var(--radius-md);
}

/* Selector de método de pago como botones grandes en vez de <select> —
   un <select> exige abrir un menú nativo pequeño, más lento en táctil. */
.pos-touch .metodo-toggle {
  min-height: 56px;
  font-size: .9375rem;
  font-weight: 600;
}
.pos-touch .metodo-toggle.activo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Billetes rápidos para efectivo — evita tener que digitar en la mayoría
   de los cobros (el cajero toca el billete con el que le pagaron). */
.pos-touch .btn-billete {
  min-height: 48px;
  font-size: .9375rem;
  font-weight: 600;
}

/* Modales del POS: botones de confirmación grandes también dentro de
   los modales (Cobrar / Cerrar turno / confirmaciones). */
.pos-touch .modal-footer .btn { min-height: 48px; font-size: .9375rem; padding: .625rem 1.25rem; }

/* Toast propio para avisos rápidos (reemplaza alert() bloqueante, que en
   una pantalla táctil de kiosco es diminuto y congela la pestaña). */
#pos-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: #fff;
  padding: .875rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  max-width: min(90vw, 420px);
  text-align: center;
}
#pos-toast.mostrar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Impresión (ej. Inventario general, para llevar en mano en una
   toma física) — oculta chrome de la app, deja solo el contenido. ── */
@media print {
  .gastros-navbar, .gastros-sidebar, .no-print { display: none !important; }
  .layout { display: block; }
  .main-content { padding: 0; }
  table.gastros-table { font-size: .8rem; }
  table.gastros-table thead th { background: transparent; color: #000; }
  table.gastros-table tbody td { color: #000; }
  .badge-gastros { border: 1px solid #999; background: transparent !important; color: #000 !important; }
}