/* ==========================================================================
   1. VARIABLES, TEMAS (NETLIFY LIGHT / VS CODE DARK) Y RESET BASE
   Archivo: css/variables.css
   Estética: Minimalista, líneas rectas ligeramente redondeadas, transparencias
   (glassmorphism) y colores de enfoque Salmón (#FA8072) + Blanco (#FFFFFF).
   ========================================================================== */

:root {
  /* Paleta Modo Claro — Inspirada en panel minimalista tipo Netlify */
  --bg-primary: #f6f7f9;
  --bg-ambient: radial-gradient(circle at 12% 0%, rgba(250, 128, 114, 0.09), transparent 42%),
                radial-gradient(circle at 88% 8%, rgba(17, 24, 39, 0.03), transparent 38%);
  --bg-chrome: rgba(255, 255, 255, 0.84);
  --bg-secondary: rgba(255, 255, 255, 0.78);
  --bg-secondary-solid: #ffffff;
  --bg-tertiary: rgba(15, 23, 42, 0.038);
  --bg-hover: rgba(15, 23, 42, 0.065);
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-modal: rgba(255, 255, 255, 0.94);

  /* Tipografía modo claro */
  --text-primary: #111827;
  --text-heading: #090d16;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;

  /* Bordes rectos y sutiles */
  --border-color: rgba(17, 24, 39, 0.09);
  --border-strong: rgba(17, 24, 39, 0.16);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 16px 36px rgba(15, 23, 42, 0.10);

  /* Colores de Enfoque: Salmón y Blanco */
  --accent-primary: #e86b5c;
  --accent-salmon: #fa8072;
  --accent-primary-hover: #d6594a;
  --accent-white: #ffffff;
  --accent-soft: rgba(250, 128, 114, 0.13);
  --accent-soft-strong: rgba(250, 128, 114, 0.22);
  --accent-border: rgba(232, 107, 92, 0.48);
  --focus-ring: 0 0 0 1px var(--accent-primary), 0 0 0 3px rgba(250, 128, 114, 0.18);

  /* Estados semánticos sobrios (presupuestos y notificaciones) */
  --success: #10b981;
  --success-soft: rgba(16, 185, 129, 0.11);
  --success-border: rgba(16, 185, 129, 0.28);
  --warning: #d97706;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --warning-border: rgba(245, 158, 11, 0.30);
  --danger: #e11d48;
  --danger-soft: rgba(225, 29, 72, 0.10);
  --danger-border: rgba(225, 29, 72, 0.28);
  --info: #fa8072;
  --info-soft: rgba(250, 128, 114, 0.12);

  /* Geometría: Líneas rectas con esquinas ligeramente redondeadas */
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 64px;
  --bottom-nav-height: 4.15rem;
  --header-height: 3.75rem;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --blur-glass: blur(14px) saturate(140%);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tema Oscuro — Basado en VS Code Dark Modern (#181818 / #1e1e1e / #252526)
   con transparencias y enfoque en Salmón (#FA8072) + Blanco (#FFFFFF) */
[data-theme="dark"] {
  --bg-primary: #1e1e1e;
  --bg-ambient: radial-gradient(circle at 14% 0%, rgba(250, 128, 114, 0.08), transparent 44%),
                radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.03), transparent 40%);
  --bg-chrome: rgba(24, 24, 24, 0.86);
  --bg-secondary: rgba(37, 37, 38, 0.74);
  --bg-secondary-solid: #252526;
  --bg-tertiary: rgba(255, 255, 255, 0.045);
  --bg-hover: rgba(255, 255, 255, 0.08);
  --bg-glass: rgba(24, 24, 24, 0.82);
  --bg-modal: rgba(30, 30, 30, 0.94);

  --text-primary: #d4d4d4;
  --text-heading: #ffffff;
  --text-secondary: #9d9d9d;
  --text-muted: #767676;

  --border-color: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.55);

  /* Enfoque Salmón luminoso + Blanco puro sobre gris VS Code */
  --accent-primary: #fa8072;
  --accent-salmon: #fa8072;
  --accent-primary-hover: #ff9488;
  --accent-white: #ffffff;
  --accent-soft: rgba(250, 128, 114, 0.14);
  --accent-soft-strong: rgba(250, 128, 114, 0.24);
  --accent-border: rgba(250, 128, 114, 0.55);
  --focus-ring: 0 0 0 1px #fa8072, 0 0 0 3px rgba(250, 128, 114, 0.20);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --success-border: rgba(52, 211, 153, 0.30);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.13);
  --warning-border: rgba(251, 191, 36, 0.30);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.13);
  --danger-border: rgba(248, 113, 113, 0.30);
  --info: #fa8072;
  --info-soft: rgba(250, 128, 114, 0.14);
}

/* ==========================================================================
   PALETAS DE COLOR DE ACENTO PERSONALIZABLES POR USUARIO (6 ALTERNATIVAS)
   1. salmon  (Salmón Coral — Predeterminado)
   2. ocean   (Azul Océano)
   3. emerald (Verde Esmeralda)
   4. violet  (Violeta Amatista)
   5. amber   (Ámbar Dorado)
   6. rose    (Rosa Rubí)
   ========================================================================== */

:root[data-accent="ocean"] {
  --accent-primary: #2563eb;
  --accent-salmon: #3b82f6;
  --accent-primary-hover: #1d4ed8;
  --accent-soft: rgba(59, 130, 246, 0.13);
  --accent-soft-strong: rgba(59, 130, 246, 0.22);
  --accent-border: rgba(37, 99, 235, 0.45);
  --focus-ring: 0 0 0 1px #2563eb, 0 0 0 3px rgba(59, 130, 246, 0.20);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.13);
  --bg-ambient: radial-gradient(circle at 12% 0%, rgba(59, 130, 246, 0.09), transparent 42%),
                radial-gradient(circle at 88% 8%, rgba(17, 24, 39, 0.03), transparent 38%);
}

[data-theme="dark"][data-accent="ocean"] {
  --accent-primary: #60a5fa;
  --accent-salmon: #60a5fa;
  --accent-primary-hover: #93c5fd;
  --accent-soft: rgba(96, 165, 250, 0.15);
  --accent-soft-strong: rgba(96, 165, 250, 0.25);
  --accent-border: rgba(96, 165, 250, 0.55);
  --focus-ring: 0 0 0 1px #60a5fa, 0 0 0 3px rgba(96, 165, 250, 0.22);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.15);
  --bg-ambient: radial-gradient(circle at 14% 0%, rgba(96, 165, 250, 0.09), transparent 44%),
                radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.03), transparent 40%);
}

:root[data-accent="emerald"] {
  --accent-primary: #059669;
  --accent-salmon: #10b981;
  --accent-primary-hover: #047857;
  --accent-soft: rgba(16, 185, 129, 0.13);
  --accent-soft-strong: rgba(16, 185, 129, 0.22);
  --accent-border: rgba(5, 150, 105, 0.45);
  --focus-ring: 0 0 0 1px #059669, 0 0 0 3px rgba(16, 185, 129, 0.20);
  --info: #10b981;
  --info-soft: rgba(16, 185, 129, 0.13);
  --bg-ambient: radial-gradient(circle at 12% 0%, rgba(16, 185, 129, 0.09), transparent 42%),
                radial-gradient(circle at 88% 8%, rgba(17, 24, 39, 0.03), transparent 38%);
}

[data-theme="dark"][data-accent="emerald"] {
  --accent-primary: #34d399;
  --accent-salmon: #34d399;
  --accent-primary-hover: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.15);
  --accent-soft-strong: rgba(52, 211, 153, 0.25);
  --accent-border: rgba(52, 211, 153, 0.55);
  --focus-ring: 0 0 0 1px #34d399, 0 0 0 3px rgba(52, 211, 153, 0.22);
  --info: #34d399;
  --info-soft: rgba(52, 211, 153, 0.15);
  --bg-ambient: radial-gradient(circle at 14% 0%, rgba(52, 211, 153, 0.09), transparent 44%),
                radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.03), transparent 40%);
}

:root[data-accent="violet"] {
  --accent-primary: #7c3aed;
  --accent-salmon: #8b5cf6;
  --accent-primary-hover: #6d28d9;
  --accent-soft: rgba(139, 92, 246, 0.13);
  --accent-soft-strong: rgba(139, 92, 246, 0.22);
  --accent-border: rgba(124, 58, 237, 0.45);
  --focus-ring: 0 0 0 1px #7c3aed, 0 0 0 3px rgba(139, 92, 246, 0.20);
  --info: #8b5cf6;
  --info-soft: rgba(139, 92, 246, 0.13);
  --bg-ambient: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.09), transparent 42%),
                radial-gradient(circle at 88% 8%, rgba(17, 24, 39, 0.03), transparent 38%);
}

[data-theme="dark"][data-accent="violet"] {
  --accent-primary: #a78bfa;
  --accent-salmon: #a78bfa;
  --accent-primary-hover: #c4b5fd;
  --accent-soft: rgba(167, 139, 250, 0.15);
  --accent-soft-strong: rgba(167, 139, 250, 0.25);
  --accent-border: rgba(167, 139, 250, 0.55);
  --focus-ring: 0 0 0 1px #a78bfa, 0 0 0 3px rgba(167, 139, 250, 0.22);
  --info: #a78bfa;
  --info-soft: rgba(167, 139, 250, 0.15);
  --bg-ambient: radial-gradient(circle at 14% 0%, rgba(167, 139, 250, 0.09), transparent 44%),
                radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.03), transparent 40%);
}

:root[data-accent="amber"] {
  --accent-primary: #d97706;
  --accent-salmon: #f59e0b;
  --accent-primary-hover: #b45309;
  --accent-soft: rgba(245, 158, 11, 0.14);
  --accent-soft-strong: rgba(245, 158, 11, 0.24);
  --accent-border: rgba(217, 119, 6, 0.45);
  --focus-ring: 0 0 0 1px #d97706, 0 0 0 3px rgba(245, 158, 11, 0.20);
  --info: #f59e0b;
  --info-soft: rgba(245, 158, 11, 0.14);
  --bg-ambient: radial-gradient(circle at 12% 0%, rgba(245, 158, 11, 0.09), transparent 42%),
                radial-gradient(circle at 88% 8%, rgba(17, 24, 39, 0.03), transparent 38%);
}

[data-theme="dark"][data-accent="amber"] {
  --accent-primary: #fbbf24;
  --accent-salmon: #fbbf24;
  --accent-primary-hover: #fcd34d;
  --accent-soft: rgba(251, 191, 36, 0.15);
  --accent-soft-strong: rgba(251, 191, 36, 0.25);
  --accent-border: rgba(251, 191, 36, 0.55);
  --focus-ring: 0 0 0 1px #fbbf24, 0 0 0 3px rgba(251, 191, 36, 0.22);
  --info: #fbbf24;
  --info-soft: rgba(251, 191, 36, 0.15);
  --bg-ambient: radial-gradient(circle at 14% 0%, rgba(251, 191, 36, 0.09), transparent 44%),
                radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.03), transparent 40%);
}

:root[data-accent="rose"] {
  --accent-primary: #e11d48;
  --accent-salmon: #f43f5e;
  --accent-primary-hover: #be123c;
  --accent-soft: rgba(244, 63, 94, 0.13);
  --accent-soft-strong: rgba(244, 63, 94, 0.22);
  --accent-border: rgba(225, 29, 72, 0.45);
  --focus-ring: 0 0 0 1px #e11d48, 0 0 0 3px rgba(244, 63, 94, 0.20);
  --info: #f43f5e;
  --info-soft: rgba(244, 63, 94, 0.13);
  --bg-ambient: radial-gradient(circle at 12% 0%, rgba(244, 63, 94, 0.09), transparent 42%),
                radial-gradient(circle at 88% 8%, rgba(17, 24, 39, 0.03), transparent 38%);
}

[data-theme="dark"][data-accent="rose"] {
  --accent-primary: #fb7185;
  --accent-salmon: #fb7185;
  --accent-primary-hover: #fda4af;
  --accent-soft: rgba(251, 113, 133, 0.15);
  --accent-soft-strong: rgba(251, 113, 133, 0.25);
  --accent-border: rgba(251, 113, 133, 0.55);
  --focus-ring: 0 0 0 1px #fb7185, 0 0 0 3px rgba(251, 113, 133, 0.22);
  --info: #fb7185;
  --info-soft: rgba(251, 113, 133, 0.15);
  --bg-ambient: radial-gradient(circle at 14% 0%, rgba(251, 113, 133, 0.09), transparent 44%),
                radial-gradient(circle at 86% 10%, rgba(255, 255, 255, 0.03), transparent 40%);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  scroll-behavior: smooth;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  background-color: var(--bg-primary);
  background-image: var(--bg-ambient);
  background-attachment: fixed;
  color: var(--text-primary);
  transition: background-color var(--transition-smooth), color var(--transition-smooth);
  overflow-x: hidden;
  line-height: 1.5;
}

h1, h2, h3, h4, strong {
  color: var(--text-heading);
}

button, input, select, textarea, summary, a {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  touch-action: manipulation;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   OPTIMIZACIÓN GPU MÓVIL (60 FPS EN TELÉFONO, ESCRITORIO INTACTO)
   Desactiva background-attachment:fixed y apilado de blur en pantallas táctiles
   para evitar repintados de pantalla completa al desplazar en Android / iOS.
   ========================================================================== */
html.is-phone {
  scroll-behavior: auto;
  --bg-chrome: rgba(255, 255, 255, 0.97);
  --bg-secondary: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.97);
  --bg-modal: #ffffff;
  --blur-glass: none;
}

html.is-phone[data-theme="dark"] {
  --bg-chrome: rgba(24, 24, 24, 0.97);
  --bg-secondary: #252526;
  --bg-glass: rgba(24, 24, 24, 0.97);
  --bg-modal: #1e1e1e;
  --blur-glass: none;
}

html.is-phone body {
  background-attachment: scroll;
  transition: none;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  :root {
    --bg-chrome: rgba(255, 255, 255, 0.97);
    --bg-secondary: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.97);
    --bg-modal: #ffffff;
    --blur-glass: none;
  }

  [data-theme="dark"] {
    --bg-chrome: rgba(24, 24, 24, 0.97);
    --bg-secondary: #252526;
    --bg-glass: rgba(24, 24, 24, 0.97);
    --bg-modal: #1e1e1e;
    --blur-glass: none;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    background-attachment: scroll;
    transition: none;
  }
}

button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-primary-hover);
}

/* Scrollbars minimalistas estilo VS Code */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.26);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.45);
}

/* ==========================================================================
   CONFIGURACIÓN DE FUENTE, TAMAÑO DE PANTALLA Y RENDIMIENTO (100% CSS PURO)
   ========================================================================== */
html[data-font="jakarta"] {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html[data-font="system"] {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

html[data-font="serif"] {
  font-family: Georgia, 'Times New Roman', Cambria, serif;
}

html[data-font="mono"] {
  font-family: 'Cascadia Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Tamaño de pantalla / Escala global */
html[data-scale="compact"] {
  font-size: 13.75px !important;
}

html[data-scale="normal"] {
  font-size: 15px !important;
}

html[data-scale="comfortable"] {
  font-size: 16.2px !important;
}

html[data-scale="large"] {
  font-size: 17.5px !important;
}

/* Densidad de botones y tarjetas */
html[data-density="compact"] .card {
  padding: 0.9rem !important;
}

html[data-density="spacious"] .card {
  padding: 1.35rem !important;
}

html[data-density="spacious"] .btn {
  min-height: 46px !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

/* Modo Fluido Móvil: Desactiva solo bucles decorativos infinitos manteniendo micro-transiciones suaves a 60fps */
html[data-motion="reduced"] {
  --transition-fast: 110ms ease-out;
  --transition-smooth: 150ms ease-out;
}

html[data-motion="reduced"] .animated-shimmer::after,
html[data-motion="reduced"] #onboardingNextBtn.pulse-ready {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}