/* ════════════════════════════════════════════════════════════════════════
   LATAMIA — skin de marca
   Carga al FINAL del bundle CSS (ui.php): gana por orden. Sobreescribe los
   tokens por defecto de ui/base/base.css (landing, contexto oscuro) y de
   mod/app/app-light.css (panel claro) con la paleta azul de Latamia.
   Valores tomados de base.css y app-light.css del Latamia original.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tokens globales (landing / auth / contexto oscuro) ─────────── */
:root {
	--bg: #070B10;
	--bg-1: #0C1219;
	--bg-2: #111A25;
	--text: #EDF2FA;
	--muted: rgba(237,242,250,.56);
	--muted-2: rgba(237,242,250,.32);
	--accent: #4F7FFF;
	--accent-hi: #7BA4FF;
	--accent-bg: rgba(79,127,255,.11);
	--accent-border: rgba(79,127,255,.24);
	--font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.btn-primary:hover {
	background: #5B8AFF;
	box-shadow: 0 8px 28px rgba(79,127,255,.36);
}


/* ── Tokens del skin del panel (estructura en ui/base/app-skin.css) ── */
:root {
	--skin-nav: #0C1219;
	--skin-nav-2: #070B10;
	--skin-accent-bright: #3B6EF5;
	--skin-accent: #3B6EF5;
	--skin-accent-hi: #7BA4FF;
	--skin-accent-hi-2: #5B8AFF;
	--skin-accent-deep: #234FCF;
	--skin-accent-deeper: #1A3FA8;
	--skin-accent-mid: #2F5FE0;
	--skin-accent-soft: #C7D7FF;
	--skin-accent-tint: #EEF3FF;
	--skin-accent-a16: rgba(59,110,245,.16);
	--skin-ink: #0B1426;
	--skin-accent-tint-2: #E6EDFF;
	--skin-border: #DDE3EE;
	--skin-nav-text: #EDF2FA;
	--skin-accent-glow: rgba(59,110,245,.55);
	--skin-accent-rgb: 59,110,245;   /* tintes rgba(var(--skin-accent-rgb), a) en módulos y auth */
	--skin-ink-rgb: 15,30,60;        /* sombras */
	--skin-canvas: #EFF2F7;          /* fondo de páginas legales */

	/* Gráfico del dashboard (dash.js los lee con getComputedStyle) — paleta del Latamia original */
	--chart-conv: #A855F7;
	--chart-conv-2: #7E22CE;
	--chart-conv-text: #7E22CE;
	--chart-in: #3B82F6;
	--chart-out: #22C55E;
}

/* ── Panel (tema claro) ─────────────────────────────────────────── */
#app.theme-light {
	--bg:     #EFF2F7;
	--bg-2:   #E7ECF3;
	--bg-3:   #D8DFE9;
	--surface:    rgba(15,30,60,.05);
	--surface-2:  rgba(15,30,60,.09);
	--surface-3:  rgba(15,30,60,.13);
	--border:    rgba(15,30,60,.12);
	--border-2:  rgba(15,30,60,.18);
	--border-3:  rgba(15,30,60,.26);
	--text:    #0B1426;
	--accent:        #3B6EF5;
	--accent-hi:     #234FCF;
	--accent-bg:     rgba(59,110,245,.08);
	--accent-border: rgba(59,110,245,.26);
	--accent-strong: rgba(59,110,245,.16);
	--shadow-sm: 0 1px 2px rgba(15,30,60,.06), 0 1px 1px rgba(15,30,60,.04);
	--shadow-md: 0 2px 4px rgba(15,30,60,.05), 0 8px 24px rgba(15,30,60,.08);
	--shadow-lg: 0 4px 8px rgba(15,30,60,.06), 0 20px 48px rgba(15,30,60,.12);
	--shadow-xl: 0 8px 16px rgba(15,30,60,.08), 0 32px 80px rgba(15,30,60,.16);
	--focus-ring: 0 0 0 3px rgba(59,110,245,.18);
	scrollbar-color: rgba(15,30,60,.22) transparent;
}
#app.theme-light #nav{ box-shadow: 1px 0 0 rgba(15,30,60,.04); }
#app.theme-light .btn:hover{ box-shadow: 0 4px 12px rgba(59,110,245,.28), 0 1px 2px rgba(15,30,60,.08); }
#app.theme-light .block-card-content:focus{ background: rgba(15,30,60,.02); }
#app.theme-light ::-webkit-scrollbar-thumb{ background: rgba(15,30,60,.22); }
#app.theme-light ::-webkit-scrollbar-thumb:hover{ background: rgba(15,30,60,.32); }

/* ── Logo del panel (logo-dark.svg, 130×46) ─────────────────────── */
#app .nav-brand .brand-logo{ width:112px; height:auto; }
#app .nav-mobile-brand-logo{ height:20px; width:auto; display:block; }