/* ============================================================================
   STRONG LMB 360 — V19.3.01
   GRAMÁTICA VISUAL UNIFICADA (Executive 360)
   ----------------------------------------------------------------------------
   Eleva el lenguaje visual del Dashboard Ejecutivo 360 (azul/navy/blanco, Inter,
   pesos gruesos, tarjetas nítidas, encabezados en mayúsculas) a TODO el sistema.

   Estrategia: el sistema es ~90% dirigido por tokens (--coop-*). Re-mapeando los
   tokens en una sola capa autoritativa, la nueva gramática se propaga a sidebar,
   tarjetas, botones, tablas, badges, KPIs, modales, tabs y formularios sin tener
   que editar las 99 hojas existentes. Esta hoja se carga de ÚLTIMO para ganar la
   cascada. No toca el Dashboard RC2 (.rc2*) — solo lo complementa.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) RE-MAPEO DE TOKENS  → paleta y tipografía ejecutiva
   Mantiene los MISMOS nombres de variables para no romper nada; solo cambia su
   valor. Cada token conserva su rol semántico original.
   ---------------------------------------------------------------------------- */
:root {
  /* Superficies oscuras / primario (sidebar, botón primario, encabezados) */
  --coop-deep:      #061d32;   /* navy profundo  (antes verde #0d3b2e) */
  --coop-forest:    #0a6fe8;   /* azul de realce / hover / gradiente */
  --coop-sage:      #5b6b7d;
  --coop-mint:      #dbe9fb;   /* tinte azul suave */

  /* Fondos claros */
  --coop-cream:     #eef3f9;   /* superficies suaves (thead, chips, cream cards) */
  --coop-paper:     #f4f7fb;   /* fondo de app + texto claro sobre navy */

  /* Acento (marca, KPI top, tab activo, eyebrow) — antes dorado, ahora azul */
  --coop-gold:      #0a6fe8;
  --coop-gold-soft: #0d8bff;
  --coop-clay:      #f39c12;   /* acento cálido residual → naranja ejecutivo */

  /* Texto */
  --coop-ink:       #0f1f2e;
  --coop-graphite:  #5b6b7d;
  --coop-mist:      #90a0b3;

  /* Líneas */
  --coop-line:      #dfe6ef;
  --coop-line-soft: #eaf0f7;
  --coop-white:     #ffffff;

  /* Estados */
  --coop-success:   #16a05d;
  --coop-warning:   #e59200;
  --coop-danger:    #e0252c;
  --coop-info:      #0a6fe8;

  /* Tipografía — Inter en display y cuerpo (con respaldo del sistema) */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Radios — más nítidos, al estilo RC2 (tarjetas ~10-12px) */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Sombras — tono azulado RC2 */
  --shadow-soft: 0 1px 2px rgba(14,38,64,.04), 0 8px 24px rgba(14,38,64,.07);
  --shadow-lift: 0 4px 14px rgba(14,38,64,.10), 0 16px 40px rgba(14,38,64,.08);
  --shadow-deep: 0 8px 28px rgba(14,38,64,.16), 0 24px 60px rgba(14,38,64,.10);
}

/* ----------------------------------------------------------------------------
   2) BASE TIPOGRÁFICA  → encabezados ejecutivos (pesos gruesos, tracking ceñido)
   ---------------------------------------------------------------------------- */
body { letter-spacing: -0.005em; }

.app h1, .app h2, .app h3, .app h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.app h1 { font-weight: 900; }
.app h2 { font-weight: 800; }
.app h3 { font-weight: 800; }
.app h4 { font-weight: 800; }

/* Números tabulares uniformes para cifras financieras */
.kpi-value, .num, td.num, th.num, .stat-value, .metric-value {
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   3) SIDEBAR / MARCA / NAVEGACIÓN  → navy ejecutivo + acento azul
   ---------------------------------------------------------------------------- */
.sidebar {
  background: linear-gradient(180deg, #051a2e 0%, #072b49 100%);
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar::-webkit-scrollbar-thumb { background: rgba(13,139,255,.28); }

/* Marca: círculo azul (como el Dashboard RC2) */
.brand { border-bottom: 1px solid rgba(255,255,255,.10); }
.brand-mark {
  background: linear-gradient(135deg, #0a6fe8 0%, #0d8bff 100%);
  border-radius: 50%;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(10,111,232,.34);
}
.brand-text h1 { font-weight: 900; letter-spacing: -0.02em; }
.brand-text small { color: rgba(255,255,255,.72); }

/* Estado activo del menú: gradiente azul con elevación (firma RC2) */
.nav button.active,
.nav-item.active,
.nav-category-toggle.has-active {
  background: linear-gradient(135deg, #0972ee 0%, #0d8bff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(9,114,238,.32);
}
.nav button.active::before,
.nav-item.active::before,
.nav-category-toggle.has-active::before { background: #9fd0ff !important; }
.nav-item:hover,
.nav button:hover,
.nav-category-toggle:hover { background: rgba(255,255,255,.07); color: #ffffff; }
.nav-category-toggle.has-active .nav-category-icon { background: rgba(13,139,255,.22); }
.nav-chevron { color: rgba(255,255,255,.42); }
.nav-category-toggle.open .nav-chevron { color: #6fb6ff; }

/* ----------------------------------------------------------------------------
   4) TOPBAR  → fondo blanco nítido, título ejecutivo
   ---------------------------------------------------------------------------- */
header.topbar {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--coop-line);
}
.topbar-title h2 { font-weight: 900; letter-spacing: -0.025em; color: var(--coop-ink); }
.topbar-title .breadcrumb { color: var(--coop-muted, #637282); font-weight: 700; }

/* ----------------------------------------------------------------------------
   5) TARJETAS  → blancas, borde fino, sombra suave, título en MAYÚSCULAS
   ---------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--coop-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.card-deep {
  background: linear-gradient(135deg, #061d32 0%, #0a6fe8 100%);
}
.card-title h4 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--coop-ink);
}

/* Encabezado de sección con número en círculo (patrón RC2), opcional vía clase */
.section-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; color: var(--coop-ink);
  margin: 0 0 12px;
}
.section-head .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #09213a; color: #fff;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 900;
}

/* ----------------------------------------------------------------------------
   6) KPIs  → acento superior azul, valor grueso navy
   ---------------------------------------------------------------------------- */
.kpi { border: 1px solid var(--coop-line); border-radius: var(--r-lg); }
.kpi::before { background: linear-gradient(90deg, #0a6fe8, #0d8bff); }
.kpi-value {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--coop-ink);
  letter-spacing: -0.035em;
}
.kpi-icon {
  background: #eaf2fe;
  color: #0a6fe8;
  border-radius: 12px;
}

/* ----------------------------------------------------------------------------
   7) BOTONES  → ejecutivos, mayúsculas, pesos gruesos
   ---------------------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 10px;
}
.btn-primary {
  background: #061d32;
  box-shadow: 0 6px 16px rgba(6,29,50,.22);
}
.btn-primary:hover { background: #0a6fe8; box-shadow: 0 8px 20px rgba(10,111,232,.30); }
.btn-gold { background: #0a6fe8; color: #fff; box-shadow: 0 6px 16px rgba(10,111,232,.26); }
.btn-gold:hover { background: #0d8bff; }
.btn-ghost { color: #0a6fe8; border: 1px solid var(--coop-line); }
.btn-ghost:hover { background: #eaf2fe; border-color: #0a6fe8; }

/* ----------------------------------------------------------------------------
   8) FORMULARIOS  → foco azul
   ---------------------------------------------------------------------------- */
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: #0a6fe8;
  box-shadow: 0 0 0 3px rgba(10,111,232,.12);
}
.field label { color: var(--coop-graphite); }

/* ----------------------------------------------------------------------------
   9) TABLAS  → cabecera azul-grisácea, números monoespaciados nítidos
   ---------------------------------------------------------------------------- */
thead th {
  background: #eef3f9;
  color: var(--coop-ink);
  font-family: var(--font-display);
  font-weight: 800;
}
tbody tr:hover { background: #f6f9fd; }
td.num, th.num { color: var(--coop-ink); }

/* ----------------------------------------------------------------------------
   10) TABS  → subrayado azul
   ---------------------------------------------------------------------------- */
.tab { font-family: var(--font-display); font-weight: 800; }
.tab.active { color: #0a6fe8; border-bottom-color: #0a6fe8; }
.tab:hover { color: #0a6fe8; }

/* ----------------------------------------------------------------------------
   11) MODALES / TOASTS  → eyebrow y acentos azules
   ---------------------------------------------------------------------------- */
.modal-head .eyebrow { color: #0a6fe8; }
.toast { border-left-color: #0a6fe8; }
.toast-title { color: var(--coop-ink); }

/* ----------------------------------------------------------------------------
   12) NEUTRALIZACIÓN de verdes/dorados HARDCODED residuales (no tokenizados)
   Estos selectores tenían hex verdes/dorados fijos; se re-tiñen a la gramática.
   ---------------------------------------------------------------------------- */
.coop-tooltip {
  background: linear-gradient(135deg, #0a2740 0%, #061d32 100%) !important;
}
.hero-strip {
  background: linear-gradient(135deg, #061d32 0%, #0a6fe8 55%, #051a2e 100%) !important;
}
.strong-help-head {
  background: linear-gradient(135deg, #061d32, #0a2740) !important;
  border-bottom: 3px solid #0a6fe8 !important;
}
.divider-thick {
  background: linear-gradient(90deg, #0a6fe8 0%, transparent 100%);
}

/* Asistente AI ejecutivo (advisor19200) — acentos a azul */
.gen-help-chat.user { background: #061d32 !important; }
.advisor19200-status { color: #0a6fe8 !important; border-color: rgba(10,111,232,.18) !important; }
.advisor19200-primary,
.strong-help-send { background: linear-gradient(135deg, #0a6fe8, #0d8bff) !important; color: #fff !important; }

/* Login activo (v18311): su único acento dorado → azul, resto ya es navy */
.login-mark, .login-tagline-word, .login-tagline-dot,
.login-field label, .login-footer .author { color: #0a6fe8 !important; }
.login-field input:focus { border-color: #0a6fe8 !important; }
.login-button { background: linear-gradient(135deg, #0a6fe8 0%, #0858c4 100%) !important; color: #fff !important; }
.login-divider { background: linear-gradient(to right, transparent, #0a6fe8, transparent) !important; }

/* ----------------------------------------------------------------------------
   13) ACCESIBILIDAD  → foco visible y respeto a reduced-motion
   ---------------------------------------------------------------------------- */
.app a:focus-visible,
.app button:focus-visible,
.app input:focus-visible,
.app select:focus-visible {
  outline: 2px solid #0a6fe8;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}