/* ==========================================================================
   SueldoFlex — Sitio público (landing)
   Hoja de estilos y sistema de temas: OSCURO (por defecto) / CLARO


   CÓMO FUNCIONA EL TEMA
   El HTML está maquetado con la paleta OSCURA de Tailwind (clases slate/white).
   El oscuro es el estado por defecto (html.dark). El claro se resuelve aquí:

     2.1  Base: fondo de página, cabecera, pie y paneles de cristal.
     2.2  Superficies: los fondos slate-800/900/950 pasan a blanco o gris claro.
     2.3  Bordes: los bordes slate oscuros pasan a gris claro.
     2.4  Texto neutro: text-white y slate-100/200/300/400 pasan a oscuro.
     2.5  Acentos: los tonos -400 (esmeralda/azul/índigo/púrpura/ámbar) se
          oscurecen a -600/-700, porque sobre blanco no tenían contraste.
     2.6  Superficies de color (degradados de marca y botones azul/índigo/
          esmeralda): se EXCLUYEN de 2.4 y 2.5 y conservan su texto blanco.

   Regla de oro: los bloques 2.6 van después y con más especificidad que
   2.4/2.5, para poder "deshacer" la conversión a oscuro dentro de una
   superficie que sigue siendo de color.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ==========================================================================
   1. TEMA OSCURO (estado por defecto)
   ========================================================================== */
html.dark body {
  background-color: #020617;
  color: #f8fafc;
}

.glass-panel {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(51, 65, 85, 0.6);
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* ==========================================================================
   2. TEMA CLARO
   ========================================================================== */

/* --- 2.1 Base: página, cabecera, pie y paneles -------------------------- */
html:not(.dark) body {
  background-color: #f8fafc;
  color: #0f172a;
}

html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

html:not(.dark) header nav a {
  color: #334155 !important;
}

html:not(.dark) header nav a:hover {
  color: #2563eb !important;
}

html:not(.dark) footer {
  background-color: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

html:not(.dark) footer p,
html:not(.dark) footer a {
  color: #475569 !important;
}

html:not(.dark) footer a:hover {
  color: #2563eb !important;
}

html:not(.dark) .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .grid-overlay {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
}

/* --- 2.2 Superficies oscuras -> claras ---------------------------------- */
/* Nota: .bg-slate-950/80 es el fondo del modal de descarga: se deja oscuro
   a propósito, para que el modal siga destacando sobre la página. */
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/75,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/95,
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/95 {
  background-color: #ffffff !important;
}

html:not(.dark) .bg-slate-900\/30,
html:not(.dark) .bg-slate-900\/40,
html:not(.dark) .bg-slate-900\/50 {
  background-color: #f1f5f9 !important;
}

html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/90 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Insignia del héroe (azul marino) -> azul muy claro */
html:not(.dark) .bg-blue-950\/80 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
}

/* Tarjeta con degradado gris de la calculadora -> tarjeta blanca */
html:not(.dark) .bg-gradient-to-br.from-slate-900.to-slate-950 {
  background-image: none !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* --- 2.3 Bordes --------------------------------------------------------- */
html:not(.dark) .border-slate-600,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80 {
  border-color: #e2e8f0 !important;
}

/* --- 2.4 Texto neutro -> oscuro ---------------------------------------- */
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3,
html:not(.dark) h4, html:not(.dark) h5, html:not(.dark) h6 {
  color: #0f172a !important;
}

html:not(.dark) p {
  color: #475569 !important;
}

html:not(.dark) .text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-400 {
  color: #475569 !important;
}

/* Campos de formulario (el valor de un input con text-white se volvía invisible) */
html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Acordeones de la FAQ */
html:not(.dark) details summary,
html:not(.dark) details summary span {
  color: #0f172a !important;
}

html:not(.dark) details summary svg,
html:not(.dark) details summary i {
  color: #64748b !important;
}

html:not(.dark) details p {
  color: #334155 !important;
  border-top-color: #e2e8f0 !important;
}

/* --- 2.5 Acentos -> tonos oscuros con contraste real sobre blanco ------- */
html:not(.dark) .text-emerald-400 { color: #047857 !important; } /* 5.5:1 */
html:not(.dark) .text-blue-400    { color: #1d4ed8 !important; } /* 6.7:1 */
html:not(.dark) .text-indigo-400  { color: #4338ca !important; } /* 7.5:1 */
html:not(.dark) .text-purple-400  { color: #6d28d9 !important; } /* 7.3:1 */
html:not(.dark) .text-amber-400   { color: #b45309 !important; } /* 4.8:1 */

html:not(.dark) .hover\:text-blue-400:hover,
html:not(.dark) .hover\:text-blue-300:hover { color: #1d4ed8 !important; }

html:not(.dark) .hover\:text-indigo-300:hover { color: #4338ca !important; }

html:not(.dark) .hover\:text-purple-300:hover { color: #6d28d9 !important; }

html:not(.dark) .hover\:text-white:hover { color: #0f172a !important; }

/* Hovers de botones grises: si no, al pasar el ratón el fondo se volvía
   oscuro y el texto (ya oscuro en claro) se perdía. */
html:not(.dark) .hover\:bg-slate-700:hover,
html:not(.dark) .hover\:bg-slate-700\/80:hover,
html:not(.dark) .hover\:bg-slate-800:hover,
html:not(.dark) .hover\:bg-slate-900:hover {
  background-color: #e2e8f0 !important;
}

/* Texto con degradado recortado (logo "SueldoFlex" y titular del héroe):
   el degradado original (from-white / from-blue-400) es ilegible sobre blanco. */

html:not(.dark) .bg-clip-text {
  background-image: linear-gradient(to right, #1d4ed8, #4338ca, #047857) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Controles de rango */
html:not(.dark) input[type=range] {
  background: #cbd5e1;
}

html:not(.dark) .accent-emerald-400 { accent-color: #047857; }
html:not(.dark) .accent-blue-400    { accent-color: #1d4ed8; }
html:not(.dark) .accent-indigo-400  { accent-color: #4338ca; }

/* --- 2.6 Superficies de color: conservan su texto claro ----------------- */

/* 2.6.a  El propio elemento con fondo de marca + text-white */
html:not(.dark) .bg-blue-500.text-white,
html:not(.dark) .bg-blue-600.text-white,
html:not(.dark) .bg-blue-700.text-white,
html:not(.dark) .bg-indigo-500.text-white,
html:not(.dark) .bg-indigo-600.text-white,
html:not(.dark) .bg-indigo-700.text-white,
html:not(.dark) .bg-emerald-500.text-white,
html:not(.dark) .bg-emerald-600.text-white,
html:not(.dark) .bg-purple-600.text-white,
html:not(.dark) .bg-teal-500.text-white,
html:not(.dark) [class*="from-blue-"].text-white,
html:not(.dark) [class*="from-indigo-"].text-white,
html:not(.dark) [class*="from-emerald-"].text-white,
html:not(.dark) [class*="from-purple-"].text-white,
html:not(.dark) [class*="from-teal-"].text-white {
  color: #ffffff !important;
}

/* 2.6.b  Títulos, párrafos y text-white DENTRO de una superficie de color
   vuelven a heredar el color claro de esa superficie. */
html:not(.dark) :is([class*="from-blue-"],[class*="from-indigo-"],[class*="from-emerald-"],[class*="from-purple-"],[class*="from-teal-"],.bg-blue-500,.bg-blue-600,.bg-blue-700,.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,.bg-emerald-500,.bg-emerald-600,.bg-purple-600,.bg-teal-500) :is(h1,h2,h3,h4,h5,h6,p,.text-white) {
  color: inherit !important;
}

/* 2.6.c  Botón con fondo slate DENTRO de un banner de color (p. ej.
   "Entrar al Aplicativo"): en claro su fondo pasa a blanco, así que su texto
   y sus hijos deben ser oscuros. Va después de 2.6.b y con más especificidad. */
html:not(.dark) .bg-slate-900.text-white,
html:not(.dark) .bg-slate-900.text-white :is(span,i,svg),
html:not(.dark) .bg-slate-950.text-white,
html:not(.dark) .bg-slate-950.text-white :is(span,i,svg) {
  color: #0f172a !important;
}

/* ==========================================================================
   3. ANIMACIONES Y BARRAS DE DESPLAZAMIENTO
   ========================================================================== */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-scaleUp {
  animation: scaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

html:not(.dark)::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html:not(.dark)::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
html:not(.dark)::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Estilo base de los controles de rango */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 6px;
  outline: none;
  background: #1e293b;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  border: 2px solid white;
}

input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
  border: 2px solid white;
}