/* =============================================================================
   base.css — reset, tokens de diseño y tipografía
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Superficies */
  --bg:            #0f172a;
  --bg-2:          #1e293b;
  --bg-3:          #273449;
  --surface:       #f8fafc;
  --surface-2:     #ffffff;
  --border:        #e2e8f0;
  --border-dark:   #334155;

  /* Texto */
  --text:          #0f172a;
  --text-muted:    #64748b;
  --text-invert:   #e2e8f0;
  --text-invert-2: #94a3b8;

  /* Semánticos */
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --success:       #16a34a;
  --warning:       #d97706;
  --danger:        #dc2626;

  /* Paleta fija de botones de caja.
     8 colores, uno por familia de servicio. NO ampliar sin motivo:
     una paleta corta mantiene la pantalla legible y permite al operador
     ubicar por color sin leer. */
  --btn-azul:    #2563eb;
  --btn-verde:   #16a34a;
  --btn-naranja: #ea580c;
  --btn-morado:  #7c3aed;
  --btn-ambar:   #ca8a04;
  --btn-rosa:    #db2777;
  --btn-gris:    #475569;
  --btn-rojo:    #dc2626;

  /* Métricas */
  --radius:    10px;
  --radius-lg: 14px;
  --sidebar-w: 248px;
  --shadow:    0 1px 3px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .04);
  --shadow-lg: 0 10px 25px rgb(15 23 42 / .12);

  /* Tamaño mínimo táctil: 96px es cómodo para dedo adulto en tablet. */
  --touch-min: 96px;
}

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

#root { height: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Evita el resaltado azul al tocar en tablets */
button, .btn-caja, .nav-item { -webkit-tap-highlight-color: transparent; }

.muted     { color: var(--text-muted); }
.mono      { font-variant-numeric: tabular-nums; }
.nowrap    { white-space: nowrap; }
.right     { text-align: right; }
.center    { text-align: center; }
.hidden    { display: none !important; }

.stack     { display: flex; flex-direction: column; gap: .75rem; }
.row       { display: flex; align-items: center; gap: .6rem; }
.row-wrap  { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.spacer    { flex: 1; }

/* Accesibilidad: foco siempre visible */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

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