/* ============================================================
   Saint Salts OS — main.css
   Variables (brandbook), reset, tipografía, utilidades
   Brandbook: solo #001A3B navy · #D7D2CA mineral · #FFFEF5 cream
   ============================================================ */

:root {
  /* Brandbook (3 colores oficiales) */
  --navy: #001A3B;
  --navy-deep: #001229;
  --mineral: #D7D2CA;
  --mineral-light: #E9E6E2;
  --cream: #FFFEF5;
  --cream-dark: #F0EDE2;

  /* Neutros derivados */
  --white: #FFFFFF;
  --white-warm: #FDFCF6;
  --border: #E6E1D6;
  --border-light: #F0ECE3;
  --text-primary: #001A3B;
  --text-secondary: #52607A;   /* ~6.5:1 sobre cream */
  --text-muted: #6E7888;       /* subido para llegar a ~4.5:1 (antes #9AA1AB no pasaba contraste) */
  --ink: #001A3B;            /* navy usado como TEXTO sobre superficies (se aclara en modo oscuro) */
  --focus-ring: rgba(0, 26, 59, 0.16);

  /* Estados semánticos (mutados, armónicos con la paleta) */
  --success: #2E5C54;   /* Mesa 16 (prueba BR2): Proof Green del Brandbook (era #2D7A4F) */
  --success-bg: #E9F2EC;
  --warning: #B8860B;
  --warning-bg: #F7F0DC;
  --danger: #A85A4A;    /* Mesa 16 (prueba BR2): Marine Rust del Brandbook (era #C23B3B) */
  --danger-bg: #F8E9E9;

  /* Tonos para contenido SOBRE NAVY (las franjas hero quedan navy en ambos temas,
     por eso estos valores son fijos y NO cambian en modo oscuro). Antes estaban
     hardcodeados en los <style> de cada template; acá hay una sola fuente. */
  --on-navy: #EDE8DF;          /* texto secundario sobre navy */
  --on-navy-strong: #FFFEF5;   /* texto fuerte / números sobre navy */
  --tone-ok: #4BB67E;          /* verde suave armonizado con navy */
  --tone-warn: #E0A23B;        /* ámbar suave sobre navy */
  --tone-bad: #E0625E;         /* rojo suave sobre navy */
  --danger-soft: #E08A8A;
  --warning-soft: #D9B36A;

  /* Tokens */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0, 26, 59, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 26, 59, 0.08);
  --transition-fast: 0.15s ease;
  --sidebar-width: 232px;
}

/* ===== MODO OSCURO ===== invierte superficies + texto; deja navy/mineral (sidebar, botones,
   chips tan, banners) como acentos de marca. --ink (navy-como-texto) se aclara para que se lea. */
html[data-theme="dark"] {
  /* A3 — navy cálido: superficies bien separadas (fondo < tarjeta < elevado) + bordes marcados */
  --cream: #0C1320;          /* fondo de la app */
  --cream-dark: #1A2236;     /* chips / superficie sutil */
  --white: #1E2840;          /* tarjetas (más claras que el fondo → se separan) */
  --white-warm: #27314C;     /* superficie elevada / inputs */
  --border: #3D4A6B;         /* borde marcado, visible */
  --border-light: #2C3954;   /* divisores sutiles */
  --text-primary: #F1EFEA;   /* blanco cálido */
  --text-secondary: #B8BFCE;
  --text-muted: #8B92A4;
  --ink: #D2DAE8;            /* navy-como-texto → claro y legible sobre superficies oscuras */
  /* Semánticos APAGADOS (no fluor): salvia / ocre / terracota */
  --success: #8FB3A9; --success-bg: #1B2720;   /* Mesa 16 (prueba BR2): Proof Green claro (era #74A98C) */
  --warning: #C9A35E; --warning-bg: #2A2516;
  --danger:  #D38B79; --danger-bg: #2A1B19;    /* Mesa 16 (prueba BR2): Marine Rust claro (era #D58A82) */
  --focus-ring: rgba(215, 210, 202, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
/* progress bar visible sobre fondo oscuro (navy quedaría apagado) */
html[data-theme="dark"] .progress-bar { background: var(--mineral); }
html[data-theme="dark"] .progress-bar.accent { background: var(--mineral); }
/* inputs/selects legibles en oscuro */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea { background: var(--white-warm); color: var(--text-primary); border-color: var(--border); }
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .form-textarea::placeholder { color: var(--text-muted); }
/* texto sobre fondos NAVY (que no cambian) tiene que quedar claro en oscuro */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .kpi-tile.primary .k-value,
html[data-theme="dark"] .sidebar .brand-name,
html[data-theme="dark"] .badge-navy,
html[data-theme="dark"] .now-banner,
html[data-theme="dark"] .now-banner .now-label,
html[data-theme="dark"] .now-banner .now-msg,
html[data-theme="dark"] .active-tag,
html[data-theme="dark"] .pos-stance .txt { color: #F2F6FC; }
/* El sidebar es navy FIJO en ambos modos → su texto siempre claro (--cream flipearía a oscuro).
   El ítem activo va sobre mineral (tan), así que ese queda con texto oscuro (no se toca). */
html[data-theme="dark"] .nav-item:not(.active) { color: #E9EEF6; }
html[data-theme="dark"] .product-switcher-select { color: #E9EEF6; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: 'Hanken Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;   /* corta el rebote (rubber-band) en celu/webclip iOS */
}

h1, h2, h3, h4 { color: var(--text-primary); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 23px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Accesibilidad: foco visible por teclado (no afecta al mouse) ===== */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 5px; }
.sidebar :focus-visible, .topbar :focus-visible { outline-color: var(--mineral); }
html[data-theme="dark"] :focus-visible { outline-color: var(--mineral); }
/* el mouse no muestra el anillo en inputs/botones (lo maneja focus-visible) */
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--mineral); color: var(--navy); }

/* Scrollbar discreta, on-brand */
* { scrollbar-width: thin; scrollbar-color: var(--mineral) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--mineral); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* ============== UTILIDADES ============== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}

.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.text-xs { font-size: 11px; } .text-sm { font-size: 13px; } .text-2xl { font-size: 24px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-navy { color: var(--ink); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }

.hidden { display: none !important; }

/* ===== Respeta "reducir movimiento" del sistema (accesibilidad) ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}