/*
 * ============================================================
 *  LIGHT THEME — Global Overrides
 *  Cargado AL FINAL para ganar la cascada CSS.
 *  Cubre: body, panel, landing, components.css, nexus.css
 * ============================================================
 */

/* ────────────────────────────────────────────────────────────
   1. BASE — body color para que el texto genérico sea oscuro
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] body {
    color: #0f172a;
}

/* ────────────────────────────────────────────────────────────
   2. TEXTO — forzar color oscuro en elementos de texto
      que usen var(--text-color) o var(--text-primary)
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] label,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th {
    color: inherit;
}

/* ────────────────────────────────────────────────────────────
   3. PANEL — sidebar, main-content, header, footer
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .app-container {
    color: #0f172a;
}

[data-theme="light"] .logo h1,
[data-theme="light"] .logo span,
[data-theme="light"] .logo p {
    color: #0f172a;
}

/* Sidebar items */
[data-theme="light"] .sidebar-section h3 {
    color: #4f46e5;
}

/* Main content text */
[data-theme="light"] .content-header p {
    color: #475569;
}

/* ────────────────────────────────────────────────────────────
   4. CARDS / GLASS — fondos claros + texto oscuro
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .card,
[data-theme="light"] .glass-card,
[data-theme="light"] .info-box {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(99, 102, 241, 0.15);
    color: #0f172a;
}

[data-theme="light"] .result-item {
    background: rgba(238, 242, 255, 0.70);
    border-left-color: #4f46e5;
    color: #0f172a;
}

[data-theme="light"] .result-label {
    color: #475569;
}

[data-theme="light"] .result-value {
    color: #0f172a;
}

/* ────────────────────────────────────────────────────────────
   5. DATA TABLES
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .data-table {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
}

[data-theme="light"] .data-table td {
    color: #0f172a;
    border-color: rgba(99, 102, 241, 0.12);
}

[data-theme="light"] .data-table tbody tr:hover {
    background: rgba(238, 242, 255, 0.60);
}

/* ────────────────────────────────────────────────────────────
   6. INPUTS / TEXTAREAS / SELECTS del panel
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(99, 102, 241, 0.20);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #94a3b8;
}

/* TABS */
[data-theme="light"] .tab {
    background: rgba(255, 255, 255, 0.70);
    color: #334155;
    border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .tab:hover {
    background: rgba(238, 242, 255, 0.80);
    color: #0f172a;
}

[data-theme="light"] .tab.active {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
}

/* ────────────────────────────────────────────────────────────
   7. FÓRMULA / CÓDIGO / PRE — background oscuro → claro
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .formula-box {
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(124,58,237,0.06));
    border-color: rgba(99, 102, 241, 0.18);
}

[data-theme="light"] .formula-display {
    background: rgba(238, 242, 255, 0.80);
    color: #0f172a;
    border-left-color: #7c3aed;
}

[data-theme="light"] .inline-code {
    background: rgba(79, 70, 229, 0.10);
    color: #4f46e5;
}

[data-theme="light"] .message-text pre {
    background: #f1f5f9;
    border-left-color: #4f46e5;
}

[data-theme="light"] .message-text pre code {
    color: #0f172a;
}

[data-theme="light"] .diagram-container {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(99, 102, 241, 0.15);
}

/* ────────────────────────────────────────────────────────────
   8. COMPONENTS.CSS — Chat UI (uses --card-bg etc)
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .control-panel-compact {
    background: rgba(255, 255, 255, 0.70);
    border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .chat-messages-container {
    background: rgba(248, 250, 252, 0.60);
}

[data-theme="light"] .chat-input-section {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .chat-input {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(99, 102, 241, 0.20);
    color: #0f172a;
}

[data-theme="light"] .message-assistant .message-content {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(99, 102, 241, 0.15);
    color: #0f172a;
}

[data-theme="light"] .welcome-features li {
    background: rgba(99, 102, 241, 0.06);
    color: #334155;
}

[data-theme="light"] .welcome-content h3 {
    color: #0f172a;
}

[data-theme="light"] .welcome-content p {
    color: #475569;
}

[data-theme="light"] .settings-panel {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(99, 102, 241, 0.18);
    color: #0f172a;
}

[data-theme="light"] .notification {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.15);
}

/* ────────────────────────────────────────────────────────────
   9. NEXUS.CSS — scoped vars sobreescritas
   El .nexus-container define sus propias --bg-primary etc.
   Los overrides con mayor especificidad ganan.
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .nexus-container {
    --bg-primary:    #f8fafc;
    --bg-secondary:  rgba(238, 242, 255, 0.70);
    --bg-tertiary:   rgba(224, 231, 255, 0.60);
    --accent-primary: #4f46e5;
    --accent-secondary: #7c3aed;
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --text-primary:  #0f172a;
    --text-secondary: #334155;
    --border-color:  rgba(99, 102, 241, 0.18);
    --success: #059669;
    --warning: #d97706;
    --error:   #dc2626;
}

/* Nexus input container */
[data-theme="light"] .nexus-input-container {
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12);
}

/* Nexus AI messages */
[data-theme="light"] .nexus-message.ai {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    border-color: rgba(99, 102, 241, 0.15);
}

/* Code blocks inside NEXUS messages */
[data-theme="light"] .nexus-message.ai code {
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
    border-color: rgba(79, 70, 229, 0.15);
}

[data-theme="light"] .nexus-message.ai pre {
    background: #f1f5f9;
    border-color: rgba(99, 102, 241, 0.20);
}

[data-theme="light"] .nexus-message.ai pre code {
    color: #0f172a;
}

/* Nexus suggestion cards */
[data-theme="light"] .nexus-suggestion-card {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(99, 102, 241, 0.15);
    color: #0f172a;
}

[data-theme="light"] .nexus-suggestion-card:hover {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .suggestion-title {
    color: #0f172a;
}

[data-theme="light"] .suggestion-desc {
    color: #475569;
}

/* Nexus mode chips */
[data-theme="light"] .nexus-mode-chip {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(99, 102, 241, 0.18);
    color: #334155;
}

[data-theme="light"] .nexus-mode-chip.active {
    background: rgba(79, 70, 229, 0.12);
    border-color: rgba(79, 70, 229, 0.40);
    color: #4f46e5;
}

/* Nexus gradient text — recolor for light bg */
[data-theme="light"] .nexus-gradient-text {
    background: linear-gradient(to right, #4f46e5, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .nexus-subtitle {
    color: #334155;
}

/* Nexus icon buttons */
[data-theme="light"] .nexus-icon-btn {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(99, 102, 241, 0.18);
    color: #334155;
}

[data-theme="light"] .nexus-icon-btn:hover {
    background: rgba(238, 242, 255, 0.90);
    color: #0f172a;
}

/* Nexus modal */
[data-theme="light"] .nexus-modal-content {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(99, 102, 241, 0.18);
    color: #0f172a;
}

[data-theme="light"] .nexus-modal {
    background: rgba(15, 23, 42, 0.40);
}

/* Nexus status */
[data-theme="light"] .nexus-status-indicator {
    background: rgba(255, 255, 255, 0.75);
    color: #334155;
}

/* Nexus input */
[data-theme="light"] .nexus-input {
    color: #0f172a;
}

[data-theme="light"] .nexus-input::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .nexus-input-hint {
    color: #64748b;
}

/* ────────────────────────────────────────────────────────────
   10. BÚSQUEDA INTELIGENTE
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .search-modal {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(99, 102, 241, 0.18) !important;
    color: #0f172a !important;
}

[data-theme="light"] #globalSearchInput {
    color: #0f172a;
    background: transparent;
}

[data-theme="light"] .search-results {
    color: #0f172a;
}

/* ────────────────────────────────────────────────────────────
   11. SCROLLBARS — versión clara
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(238, 242, 255, 0.50);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.30);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 70, 229, 0.55);
}

/* ────────────────────────────────────────────────────────────
   12. SETTINGS PAGE
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .theme-option {
    background: rgba(255, 255, 255, 0.80);
    border-color: rgba(99, 102, 241, 0.15);
    color: #0f172a;
}

[data-theme="light"] .theme-option.active {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

/* ────────────────────────────────────────────────────────────
   13. LOADING OVERLAY — ajustar para tema claro
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] .loading-overlay {
    background: rgba(238, 242, 255, 0.95);
    color: #0f172a;
}