/**
 * Apex AI — Theme System
 * Fuentes: Sora (display) + DM Sans (body)
 * Dark / Light mode con transición suave
 */

/* ── Prevención FOUC ──────────────────────────────────────────────────────── */
html:not([data-theme-ready]) body { visibility: hidden; }
html[data-theme-ready] body       { visibility: visible; }

/* ── Transición de tema ───────────────────────────────────────────────────── */
:root {
  --theme-transition-duration: 280ms;
  --theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color            var(--theme-transition-duration) var(--theme-transition-timing),
    border-color     var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow       var(--theme-transition-duration) var(--theme-transition-timing),
    fill             var(--theme-transition-duration) var(--theme-transition-timing),
    stroke           var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

/* ── Tokens: DARK (default) ───────────────────────────────────────────────── */
:root {
  /* Fondos */
  --bg-primary:   #0d0f18;
  --bg-secondary: #13162a;
  --bg-tertiary:  #1c2038;

  /* Texto */
  --text-primary:   #eef0f8;
  --text-secondary: #8892b0;
  --text-tertiary:  #5a6480;

  /* Acentos */
  --accent-blue:      #4f7bff;
  --accent-blue-hover:#3d63e0;
  --accent-teal:      #00c9a7;
  --success:  #22c55e;
  --error:    #ef4444;
  --warning:  #f59e0b;

  /* Bordes */
  --border-color: rgba(255,255,255,.08);
  --border-hover: rgba(255,255,255,.15);

  /* Hover */
  --hover-rgb:     255,255,255;
  --hover-opacity: 0.05;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);

  /* Tipografía */
  --font-display: 'Sora', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --accent-color: #4f7bff;
}

/* ── Tokens: LIGHT ────────────────────────────────────────────────────────── */
html.theme-light,
html.theme-light body {
  --bg-primary:   #ffffff;
  --bg-secondary: #f5f7fc;
  --bg-tertiary:  #eaeff8;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-tertiary:  #94a3b8;

  --accent-blue:      #3b6fd4;
  --accent-blue-hover:#2a5bbf;
  --accent-teal:      #0891b2;
  --success:  #16a34a;
  --error:    #dc2626;
  --warning:  #d97706;

  --border-color: rgba(15,23,42,.1);
  --border-hover: rgba(15,23,42,.2);

  --hover-rgb:     0,0,0;
  --hover-opacity: 0.04;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  --accent-color: #3b6fd4;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Theme toggle button ──────────────────────────────────────────────────── */
[data-theme-toggle] {
  position: relative; cursor: pointer;
  padding: .45rem; border-radius: 8px;
  background: transparent; border: none;
  color: var(--text-secondary);
  transition: background .2s, color .2s;
}
[data-theme-toggle]:hover {
  background: rgba(var(--hover-rgb), .08);
  color: var(--text-primary);
}
[data-theme-toggle]:active { transform: scale(.95); }

.theme-icon {
  font-size: 1.1rem; display: inline-block;
  transition: transform .3s cubic-bezier(.68,-.55,.265,1.55);
}
[data-theme-toggle]:hover .theme-icon { transform: rotate(20deg); }

/* ── Fade-in on load ──────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.app-container,
.main-content,
[role="main"] { animation: fadeIn .25s ease-out; }

/* ── Sidebar nav active indicator ────────────────────────────────────────── */
.sidebar .nav-item {
  position: relative;
  transition: background .2s, color .2s, transform .1s;
}
.sidebar .nav-item:hover {
  background: rgba(var(--hover-rgb), var(--hover-opacity));
}
.sidebar .nav-item.active {
  background: rgba(var(--accent-blue), .1);
}
.sidebar .nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent-blue);
  border-radius: 0 2px 2px 0;
  animation: slideIn .2s ease-out;
}
@keyframes slideIn {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ── Loading overlay ──────────────────────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(10,15,24,.75);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.loading-overlay.active { opacity: 1; pointer-events: all; }
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Accessibility ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
*:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ── App logo ─────────────────────────────────────────────────────────────── */
/* Reemplaza el logo de caja 3D en todas las páginas de app */
.logo {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ── Sidebar refinements ──────────────────────────────────────────────────── */
.sidebar {
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.sidebar-header {
  background: var(--bg-secondary);
}
.nav-item, .config-nav-item, .super-nav-item, .tab-btn {
  font-family: var(--font-body, 'DM Sans', sans-serif);
}

/* ── Inputs & buttons global refinements ─────────────────────────────────── */
input, select, textarea, button {
  font-family: var(--font-body, 'DM Sans', sans-serif);
}