/*
 * theme-final.css — Absolute Theme Authority v1.0
 * ═══════════════════════════════════════════════════
 * This file loads AFTER the inline <style> block in index.html.
 * It is the SINGLE SOURCE OF TRUTH for all color tokens.
 *
 * Load order: all <link> CSS → inline <style> → THIS FILE
 * Cascade: this file wins because it appears last in <head>.
 */

:root {
  /* ─── Brand ─── */
  --primary:       #7C3AED;
  --primary-dark:  #5B21B6;
  --primary-light: #A78BFA;
  --primary-hover: #6D28D9;
  --primary-subtle:#F5F3FF;
  --accent:        #8B5CF6;

  /* ─── Legacy "dark-*" tokens (remapped to light) ─── */
  --dark-bg:       #F5F6FA;
  --dark-surface:  #FFFFFF;
  --dark-border:   #E2E5EF;

  /* ─── Text ─── */
  --text-main:      #2D3748;
  --text-secondary: #718096;

  /* ─── Status ─── */
  --success: #10B981;
  --danger:  #EF4444;
  --warning: #F59E0B;
  --info:    #3B82F6;

  /* ─── DS Brand ─── */
  --ds-brand-primary:       #7C3AED;
  --ds-brand-primary-dark:  #5B21B6;
  --ds-brand-primary-light: #A78BFA;
  --ds-brand-accent:        #F59E0B;
  --ds-brand-accent-dark:   #D97706;

  /* ─── DS Surfaces ─── */
  --ds-bg-base:     #F9FAFB;
  --ds-bg-surface:  #FFFFFF;
  --ds-bg-elevated: #FFFFFF;
  --ds-bg-overlay:  rgba(107, 114, 128, 0.40);
  --bg-base:     #F9FAFB;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(107, 114, 128, 0.40);

  /* ─── DS Text ─── */
  --ds-text-primary:   #111827;
  --ds-text-secondary: #4B5563;
  --ds-text-tertiary:  #9CA3AF;
  --ds-text-inverse:   #FFFFFF;
  --ds-text-link:      #7C3AED;
  --text-primary:   #111827;
  --text-tertiary:  #9CA3AF;
  --text-inverse:   #FFFFFF;
  --text-link:      #7C3AED;

  /* ─── Borders ─── */
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;
  --border-focus:  #7C3AED;
  --border-accent: #F59E0B;
  --ds-border:        #E5E7EB;
  --ds-border-strong: #D1D5DB;

  /* ─── Navy palette → Violet ─── */
  --navy-900: #4C1D95;
  --navy-800: #5B21B6;
  --navy-700: #6D28D9;
  --navy-600: #7C3AED;
  --navy-500: #8B5CF6;
  --navy-100: #EDE9FE;
  --navy-50:  #F5F3FF;
  --ds-color-navy-900: #4C1D95;
  --ds-color-navy-800: #5B21B6;
  --ds-color-navy-700: #6D28D9;
  --ds-color-navy-600: #7C3AED;
  --ds-color-navy-500: #8B5CF6;
  --ds-color-navy-100: #EDE9FE;
  --ds-color-navy-50:  #F5F3FF;

  /* ─── Sidebar ─── */
  --sidebar-bg:            #F8F7FF;
  --sidebar-hover:         rgba(124, 58, 237, 0.06);
  --sidebar-active:        rgba(124, 58, 237, 0.10);
  --sidebar-active-border: #7C3AED;
  --sidebar-text:          #6B7280;
  --sidebar-text-active:   #7C3AED;
  --sidebar-label:         #9CA3AF;
  --ds-sidebar-bg:     #F8F7FF;
  --ds-sidebar-hover:  rgba(124, 58, 237, 0.06);
  --ds-sidebar-active: rgba(124, 58, 237, 0.10);
  --ds-sidebar-text:   #6B7280;
  --ds-sidebar-label:  #9CA3AF;

  /* ─── Shadows ─── */
  --shadow-navy:    0 4px 14px rgba(124, 58, 237, 0.15);
  --ds-shadow-navy: 0 4px 14px rgba(124, 58, 237, 0.15);

  /* ─── Input ─── */
  --ds-input-focus-ring: rgba(124, 58, 237, 0.10);

  /* ─── Component tokens ─── */
  --pa-bg:      #F9FAFB;
  --pa-surface: #FFFFFF;
  --pa-border:  #E5E7EB;
  --rp-surface: #FFFFFF;
}

/* ══════════════════════════════════════════
   SIDEBAR — Force light
   ══════════════════════════════════════════ */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04) !important;
}
.ds-sidebar {
  background: var(--ds-sidebar-bg) !important;
  border-right: 1px solid var(--ds-border) !important;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.04) !important;
}
.ds-sidebar__logo-name {
  color: var(--primary) !important;
}
.ds-sidebar__logo {
  border-bottom-color: var(--border) !important;
}
.menu-section {
  color: var(--sidebar-label) !important;
}
.menu-item {
  color: var(--sidebar-text) !important;
}
.menu-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--primary) !important;
}
.menu-item.active {
  background: var(--sidebar-active) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}
.ds-nav__item {
  color: var(--ds-sidebar-text) !important;
}
.ds-nav__item:hover {
  background: var(--ds-sidebar-hover) !important;
  color: var(--primary) !important;
}
.ds-nav__item.active,
.ds-nav__item[aria-current="page"] {
  background: var(--ds-sidebar-active) !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
}

/* Sidebar internals */
.sidebar-search { border-bottom-color: var(--border) !important; }
.sidebar-search-input {
  background: var(--bg-base) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
.sidebar-search-input::placeholder { color: var(--text-tertiary) !important; }
.sidebar-footer { border-top-color: var(--border) !important; }
.sidebar-avatar { background: var(--primary) !important; }
.sidebar-user-name { color: var(--text-primary) !important; }
.sidebar-user-role { color: var(--ds-text-secondary) !important; }
.sidebar-user-btn { color: var(--ds-text-secondary) !important; }
.sidebar-user-btn:hover {
  color: var(--primary) !important;
  background: rgba(124, 58, 237, 0.06) !important;
}
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border) !important; }
.menu-group-toggle { color: var(--ds-text-secondary) !important; }
.menu-group-toggle:hover { background: var(--sidebar-hover) !important; }

/* ══════════════════════════════════════════
   GLOBAL OVERRIDES — Cards, Tables, Forms
   ══════════════════════════════════════════ */

/* Cards */
.card, .ds-card, .metric-card,
.ds-metric, .kpi-card, .ds-chart-card {
  background: var(--bg-surface) !important;
}

/* Tables */
tbody tr:hover { background: #F5F3FF !important; }
.ds-table tbody tr:hover { background: #F5F3FF !important; }
thead th { background: var(--bg-base) !important; }

/* Forms */
input:focus, select:focus, textarea:focus,
.form-group input:focus, .form-group select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
}

/* Header accents */
.header-title { color: var(--primary) !important; }
.user-name { color: var(--primary) !important; }

/* Login */
.login-btn {
  background: var(--primary) !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
}
.login-btn:hover {
  background: var(--primary-dark) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35) !important;
}

/* Quick actions bar */
.quick-actions-bar {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.qa-btn { color: var(--ds-text-secondary) !important; }
.qa-btn:hover { background: var(--bg-base) !important; color: var(--primary) !important; }
.qa-btn.primary {
  background: var(--primary) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.30) !important;
}
.qa-divider { background: var(--border) !important; }

/* Modal overlays */
.cmd-overlay { background: rgba(107, 114, 128, 0.40) !important; }
.context-panel-overlay { background: rgba(107, 114, 128, 0.25) !important; }

/* Buttons */
.btn-primary { background: var(--primary) !important; }
.btn-primary:hover { background: var(--primary-dark) !important; box-shadow: var(--shadow-navy) !important; }
.btn.primary { background: var(--primary) !important; }

/* Platform admin */
.pa-shell { background: var(--bg-base) !important; }
.pa-sidebar { background: var(--bg-surface) !important; border-right-color: var(--border) !important; }
.pa-card { background: var(--bg-surface) !important; border-color: var(--border) !important; }
.pa-field input, .pa-field select, .pa-field textarea {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

/* Onboarding */
.ob-header { background: linear-gradient(135deg, #EDE9FE, #DBEAFE) !important; }
.ob-header h2, .ob-header p { color: var(--text-primary) !important; }

/* Portal cliente */
.cp-header { background: linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%) !important; }

/* ══════════════════════════════════════════
   FORZAR DOMINIO DEL THEME FINAL
   ══════════════════════════════════════════ */
:root {
  color-scheme: light;
}

html, body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.login-card,
.sidebar,
.modal,
.panel,
.card {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}
