/* base.css — Variables de diseño, reset y barra arcoíris */

:root {
  /* Paleta corporativa */
  --navy:        #1a2d5a;
  --navy-dark:   #111e3c;
  --navy-light:  #243570;
  --oro-viejo:   #c9a227; /* acento de marca: hover/activo en sidebar y botones, precios premium en carteles */
  --white:       #ffffff;
  --gray-50:     #f8f9fa;
  --gray-100:    #f0f2f5;
  --gray-200:    #e2e6ea;
  --gray-400:    #9aa3b0;
  --gray-600:    #6c757d;
  --gray-800:    #343a40;

  /* Estados */
  --color-ok:      #198754;
  --color-ok-bg:   #d1e7dd;
  --color-error:   #dc3545;
  --color-error-bg:#f8d7da;
  --color-warn:    #f59e0b;
  --color-warn-bg: #fff3cd;
  --color-info:    #0dcaf0;
  --color-info-bg: #cff4fc;

  /* Arcoíris */
  --rainbow: linear-gradient(90deg,
    #e82020 0%,
    #f09020 25%,
    #f0d000 50%,
    #30b830 75%,
    #2070e0 100%
  );

  /* Tipografía */
  /* Inter, Outfit y Poppins van autoalojadas (ver fonts.css). Antes esto era
   * la fuente del sistema y por eso el TPV entero parecía un formulario de
   * Windows. Inter sigue en el cuerpo (tablas, formularios: no se toca lo que
   * ya funciona). Outfit reemplaza a Poppins en --font-head: titulares,
   * nombre de bloque del sidebar y botones, con más carácter. */
  --font-base: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-head: 'Outfit', 'Poppins', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Consolas', 'Fira Code', monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;

  /* Bordes / radios */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow:    0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.16);

  /* Transiciones */
  --transition: 0.2s ease;
}

/* ── Reset mínimo ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size:   var(--text-base);
  color:        var(--gray-800);
  background:   var(--gray-100);
  line-height:  1.5;
  min-height:   100vh;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Barra arcoíris ────────────────────────────────────────── */
.rainbow-bar {
  height: 5px;
  background: var(--rainbow);
  width: 100%;
  flex-shrink: 0;
}

/* ── Utilidades básicas ────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-sm     { font-size: var(--text-sm); }
.text-muted  { color: var(--gray-600); }
.fw-bold     { font-weight: 600; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }

/* Titulares con Poppins (autoalojada). Se añade al final para no alterar el
 * orden de las reglas existentes: solo cambia la familia, no el tamaño ni el
 * peso que ya tuviera cada pantalla. */
h1, h2, h3, .page-title, .card-title, .sidebar-brand .brand-name {
  font-family: var(--font-head);
  letter-spacing: -.01em;
}