/* NovaPOS: tokens de diseño (maqueta NovaPOS_maqueta_codigo_fuente).
   Claro por defecto; oscuro con data-bs-theme="dark" en <html>. */
:root,
[data-bs-theme="light"] {
  --nova-accent: #635bff;
  --nova-accent-dark: #5044eb;
  --nova-accent-pale: #efedff;
  --nova-ink: #242633;
  --nova-ink-2: #424657;
  --nova-muted: #8990a2;
  --nova-line: #e9eaf0;
  --nova-bg: #e9eaee;
  --nova-surface: #ffffff;
  --nova-side: #f7f7fa;
  --nova-subtle: #fafafd;
  --nova-shadow: 0 2px 4px rgba(28, 31, 55, .025), 0 10px 30px rgba(27, 30, 65, .035);
  --nova-radius: 15px;
  --nova-font: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nova-mono: 'JetBrains Mono', monospace;
}

[data-bs-theme="dark"] {
  --nova-accent: #8b85ff;
  --nova-accent-dark: #a39eff;
  --nova-accent-pale: #2a2750;
  --nova-ink: #ececf3;
  --nova-ink-2: #c7c9d6;
  --nova-muted: #9a9fb3;
  --nova-line: #2c2f40;
  --nova-bg: #12131a;
  --nova-surface: #1b1d28;
  --nova-side: #161822;
  --nova-subtle: #20232f;
  --nova-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .35);
}

/* Bootstrap lee estas variables: el tema entero sale de los tokens de arriba. */
:root,
[data-bs-theme] {
  --bs-body-font-family: var(--nova-font);
  --bs-body-bg: var(--nova-bg);
  --bs-body-color: var(--nova-ink);
  --bs-secondary-color: var(--nova-muted);
  --bs-tertiary-color: var(--nova-muted);
  --bs-border-color: var(--nova-line);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: var(--nova-radius);
  --bs-link-color: var(--nova-accent);
  --bs-link-hover-color: var(--nova-accent-dark);
  --bs-card-bg: var(--nova-surface);
  --bs-card-border-color: var(--nova-line);
  --bs-card-box-shadow: var(--nova-shadow);
}

/* Botón principal con la marca NovaPOS (Bootstrap compila estos colores por variante). */
.btn-primary {
  --bs-btn-bg: var(--nova-accent);
  --bs-btn-border-color: var(--nova-accent);
  --bs-btn-hover-bg: var(--nova-accent-dark);
  --bs-btn-hover-border-color: var(--nova-accent-dark);
  --bs-btn-active-bg: var(--nova-accent-dark);
  --bs-btn-active-border-color: var(--nova-accent-dark);
  --bs-btn-disabled-bg: var(--nova-accent);
  --bs-btn-disabled-border-color: var(--nova-accent);
}

.font-mono {
  font-family: var(--nova-mono);
}

[x-cloak] {
  display: none !important;
}

/* Alpine x-show oculta con display:none en línea, pero las utilidades de Bootstrap
   (d-flex, d-grid, ...) llevan !important y lo anulaban: los diálogos quedaban abiertos.
   Esta regla hace que lo oculto por Alpine gane siempre. */
[style*="display: none"] {
  display: none !important;
}