/* ================================================================
   SISTEMA DE TEMA — Claro (predeterminado) & Oscuro
   Wellness Puerto Varas
   ================================================================ */

/* ── MODO CLARO (Predeterminado) ── */
:root {
  /* Componentes RGB para compatibilidad con modificadores de opacidad Tailwind */
  --rgb-bg:          249 247 244;   /* #F9F7F4  Marfil cálido */
  --rgb-bg-alt:      241 237 229;   /* #F1EDE5  Crema cálida */
  --rgb-surface:     233 229 220;   /* #E9E5DC  Piedra cálida (tarjetas) */
  --rgb-text:        26  23  20;    /* #1A1714  Negro cálido (texto) */
  --rgb-text-muted:  107 99  96;    /* #6B6360  Gris muted */
  --rgb-gold:        239 195 67;    /* #EFC343  Dorado principal */
  --rgb-gold-light:  248 230 160;   /* #F8E6A0  Dorado claro */
  --rgb-gold-dark:   176 141 40;    /* #B08D28  Dorado oscuro */
  --rgb-salmon:      241 163 139;   /* #F1A38B  Salmón principal */
  --rgb-salmon-dark: 199 125 103;   /* #C77D67  Salmón oscuro */
  --rgb-border:      0   0   0;     /* Negro → opacidad baja = borde sutil */

  /* Tokens semánticos */
  --theme-bg:               rgb(var(--rgb-bg));
  --theme-bg-alt:           rgb(var(--rgb-bg-alt));
  --theme-surface:          rgb(var(--rgb-surface));
  --theme-text:             rgb(var(--rgb-text));
  --theme-text-muted:       rgb(var(--rgb-text-muted));
  --theme-heading:          #0F0C0B;
  --theme-border:           rgba(0, 0, 0, 0.09);
  --theme-glass-nav:        rgba(249, 247, 244, 0.90);
  --theme-glass-panel:      rgba(233, 229, 220, 0.65);
  --theme-scrollbar-track:  rgb(var(--rgb-bg-alt));
  --theme-scrollbar-thumb:  #C4BDB7;
  --theme-placeholder:      rgba(0, 0, 0, 0.30);
  --theme-shadow-nav:       0 10px 30px -10px rgba(0, 0, 0, 0.12);
  --theme-selection-text:   #F9F7F4;
}

/* ── MODO OSCURO ── */
html[data-theme="dark"] {
  --rgb-bg:          2   2   2;
  --rgb-bg-alt:      10  10  10;
  --rgb-surface:     18  18  18;
  --rgb-text:        229 229 229;
  --rgb-text-muted:  156 163 175;
  --rgb-gold:        239 195 67;
  --rgb-gold-light:  248 230 160;
  --rgb-gold-dark:   176 141 40;
  --rgb-salmon:      241 163 139;
  --rgb-salmon-dark: 199 125 103;
  --rgb-border:      255 255 255;   /* Blanco → opacidad baja = borde sutil sobre fondo oscuro */

  --theme-bg:               rgb(var(--rgb-bg));
  --theme-bg-alt:           rgb(var(--rgb-bg-alt));
  --theme-surface:          rgb(var(--rgb-surface));
  --theme-text:             rgb(var(--rgb-text));
  --theme-text-muted:       rgb(var(--rgb-text-muted));
  --theme-heading:          #ffffff;
  --theme-border:           rgba(255, 255, 255, 0.08);
  --theme-glass-nav:        rgba(2, 2, 2, 0.88);
  --theme-glass-panel:      rgba(18, 18, 18, 0.40);
  --theme-scrollbar-track:  #020202;
  --theme-scrollbar-thumb:  #333333;
  --theme-placeholder:      rgba(255, 255, 255, 0.30);
  --theme-shadow-nav:       0 10px 30px -10px rgba(0, 0, 0, 0.50);
  --theme-selection-text:   #020202;
}

/* ================================================================
   TRANSICIÓN GLOBAL AL CAMBIAR DE TEMA
   ================================================================ */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

/* No animar transforms ni opacidades (interferirían con animaciones del sitio) */
.anim-slide-up,
.anim-fade-scale,
.anim-fade-left,
.anim-fade-right,
.anim-clip-reveal,
.anim-letter-space,
.hero-zoom,
.animate-slow-zoom,
.animate-float,
.fade-up {
  transition-property: opacity, transform, clip-path, letter-spacing !important;
}

/* ================================================================
   BODY & GLOBAL
   ================================================================ */
body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
}

::selection {
  background-color: rgb(var(--rgb-salmon));
  color: var(--theme-selection-text);
}

::placeholder {
  color: var(--theme-placeholder);
}

/* ── Opacidad predeterminada para bordes brand-border (sin modificador de opacidad) ── */
/* !important necesario: Tailwind CDN inyecta estilos después de theme.css */
.border-brand-border  { --tw-border-opacity: 0.09 !important; }
.border-t-brand-border { --tw-border-opacity: 0.09 !important; }
.border-b-brand-border { --tw-border-opacity: 0.09 !important; }
.border-l-brand-border { --tw-border-opacity: 0.09 !important; }
.border-r-brand-border { --tw-border-opacity: 0.09 !important; }
html[data-theme="dark"] .border-brand-border  { --tw-border-opacity: 0.08 !important; }
html[data-theme="dark"] .border-t-brand-border { --tw-border-opacity: 0.08 !important; }
html[data-theme="dark"] .border-b-brand-border { --tw-border-opacity: 0.08 !important; }
html[data-theme="dark"] .border-l-brand-border { --tw-border-opacity: 0.08 !important; }
html[data-theme="dark"] .border-r-brand-border { --tw-border-opacity: 0.08 !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb) !important;
}

/* ================================================================
   NAVEGACIÓN
   ================================================================ */
.glass-nav {
  background: var(--theme-glass-nav) !important;
  border-bottom-color: var(--theme-border) !important;
  box-shadow: var(--theme-shadow-nav) !important;
}

/* Texto del nav y links */
html:not([data-theme="dark"]) nav a:not(.btn-gold-nav):not([class*="bg-brand-gold"]):not([class*="bg-white"]) {
  color: var(--theme-text) !important;
}
html:not([data-theme="dark"]) nav .text-white {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) nav .text-white\/80 {
  color: rgba(15, 12, 11, 0.75) !important;
}
html:not([data-theme="dark"]) nav .text-gray-400 {
  color: var(--theme-text-muted) !important;
}

/* ── Menú móvil ── */
html:not([data-theme="dark"]) #mobile-menu-content {
  background-color: var(--theme-bg-alt) !important;
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) #mobile-menu-content .text-white {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) #mobile-menu-content a {
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* ── Dropdown del nav ── */
html:not([data-theme="dark"]) nav .bg-brand-black {
  background-color: var(--theme-bg) !important;
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) nav .bg-brand-card {
  background-color: var(--theme-surface) !important;
}
html:not([data-theme="dark"]) nav li a {
  color: var(--theme-text) !important;
}

/* ================================================================
   PRELOADER
   ================================================================ */
html:not([data-theme="dark"]) #preloader {
  background-color: var(--theme-bg) !important;
}
html:not([data-theme="dark"]) #preloader .text-brand-light,
html:not([data-theme="dark"]) #preloader span {
  color: var(--theme-text) !important;
}

/* ================================================================
   SECCIONES DE CONTENIDO (excluye héroe con imágenes)
   ================================================================ */

/* Fondo de secciones */
html:not([data-theme="dark"]) section:not(.hero-section):not(.theme-invert) {
  background-color: var(--theme-bg) !important;
}
html:not([data-theme="dark"]) section:not(.hero-section):not(.theme-invert).bg-brand-charcoal,
html:not([data-theme="dark"]) section:not(.hero-section):not(.theme-invert)[class*="bg-brand-charcoal"] {
  background-color: var(--theme-bg-alt) !important;
}

/* Secciones con tema invertido (ej: academia) */
html:not([data-theme="dark"]) section.theme-invert {
  background-color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) section.theme-invert .text-brand-black,
html:not([data-theme="dark"]) section.theme-invert p,
html:not([data-theme="dark"]) section.theme-invert span:not(.text-brand-gold):not(.text-brand-salmon) {
  color: rgba(249, 247, 244, 0.85) !important;
}
html:not([data-theme="dark"]) section.theme-invert h2,
html:not([data-theme="dark"]) section.theme-invert h3 {
  color: #F9F7F4 !important;
}

/* Línea divisoria de secciones */
html:not([data-theme="dark"]) section:not(.hero-section):not(.theme-invert) {
  border-color: var(--theme-border) !important;
}

/* ── Tarjetas y superficies ── */
html:not([data-theme="dark"]) section:not(.hero-section) .bg-brand-card,
html:not([data-theme="dark"]) section:not(.hero-section) [class*="bg-brand-card"] {
  background-color: var(--theme-surface) !important;
}
html:not([data-theme="dark"]) section:not(.hero-section) .bg-brand-charcoal,
html:not([data-theme="dark"]) section:not(.hero-section) [class*="bg-brand-charcoal"] {
  background-color: var(--theme-bg-alt) !important;
}
html:not([data-theme="dark"]) section:not(.hero-section) .bg-brand-black:not(.absolute):not(.fixed) {
  background-color: var(--theme-bg) !important;
}

/* ── Paneles glass ── */
html:not([data-theme="dark"]) .glass-panel {
  background: var(--theme-glass-panel) !important;
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) .glass-panel:hover {
  background: rgba(233, 229, 220, 0.85) !important;
}

/* ── Bordes ── */
html:not([data-theme="dark"]) section:not(.hero-section) .border-brand-border,
html:not([data-theme="dark"]) section:not(.hero-section) [class*="border-brand-border"] {
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) .border-brand-border {
  border-color: var(--theme-border) !important;
}

/* ================================================================
   TIPOGRAFÍA EN SECCIONES DE CONTENIDO
   ================================================================ */

/* Headings en secciones de contenido */
html:not([data-theme="dark"]) section:not(.hero-section) .text-white,
html:not([data-theme="dark"]) section:not(.hero-section) h1,
html:not([data-theme="dark"]) section:not(.hero-section) h2,
html:not([data-theme="dark"]) section:not(.hero-section) h3,
html:not([data-theme="dark"]) section:not(.hero-section) h4,
html:not([data-theme="dark"]) section:not(.hero-section) h5,
html:not([data-theme="dark"]) section:not(.hero-section) h6 {
  color: var(--theme-heading) !important;
}

/* Texto de cuerpo en secciones */
html:not([data-theme="dark"]) section:not(.hero-section) .text-brand-light,
html:not([data-theme="dark"]) section:not(.hero-section) p,
html:not([data-theme="dark"]) section:not(.hero-section) li {
  color: var(--theme-text);
}

/* Texto muted / secundario */
html:not([data-theme="dark"]) section:not(.hero-section) .text-gray-400,
html:not([data-theme="dark"]) section:not(.hero-section) .text-gray-300,
html:not([data-theme="dark"]) section:not(.hero-section) .text-gray-500 {
  color: var(--theme-text-muted) !important;
}
html:not([data-theme="dark"]) section:not(.hero-section) [class*="text-brand-gray"],
html:not([data-theme="dark"]) section:not(.hero-section) [class*="text-brand-light"] {
  color: var(--theme-text) !important;
}

/* Trackers de letras en caps (mantener el color de acento dorado) */
html:not([data-theme="dark"]) section:not(.hero-section) .text-brand-gold {
  color: rgb(var(--rgb-gold)) !important;
}
html:not([data-theme="dark"]) section:not(.hero-section) .text-brand-salmon {
  color: rgb(var(--rgb-salmon)) !important;
}

/* ── Texto sobre overlays de imágenes en tarjetas (siempre blanco) ── */
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay .text-white,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay h1,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay h2,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay h3,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay h4,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay p,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay span,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay button,
.card-text-overlay .text-white,
.card-text-overlay h1,
.card-text-overlay h2,
.card-text-overlay h3,
.card-text-overlay h4,
.card-text-overlay p,
.card-text-overlay span,
.card-text-overlay button {
  color: white !important;
}
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay .text-gray-400,
html:not([data-theme="dark"]) section:not(.hero-section) .card-text-overlay .text-gray-300,
.card-text-overlay .text-gray-400,
.card-text-overlay .text-gray-300 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Footer / áreas de fondo oscuro intencional ── */
html:not([data-theme="dark"]) footer {
  background-color: var(--theme-bg-alt) !important;
  color: var(--theme-text) !important;
}
html:not([data-theme="dark"]) footer .text-white,
html:not([data-theme="dark"]) footer h1,
html:not([data-theme="dark"]) footer h2,
html:not([data-theme="dark"]) footer h3 {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) footer .text-gray-400,
html:not([data-theme="dark"]) footer .text-gray-300 {
  color: var(--theme-text-muted) !important;
}
html:not([data-theme="dark"]) footer .border-brand-border,
html:not([data-theme="dark"]) footer [class*="border-brand-border"] {
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) footer .bg-brand-card,
html:not([data-theme="dark"]) footer .bg-brand-charcoal {
  background-color: var(--theme-surface) !important;
}

/* ── Modales ── */
html:not([data-theme="dark"]) .modal-content,
html:not([data-theme="dark"]) [class*="modal"] .bg-brand-card,
html:not([data-theme="dark"]) [class*="modal"] .bg-brand-black {
  background-color: var(--theme-bg) !important;
}
html:not([data-theme="dark"]) [class*="modal"] .text-white,
html:not([data-theme="dark"]) [class*="modal"] h2,
html:not([data-theme="dark"]) [class*="modal"] h3 {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) [class*="modal"] .text-gray-400,
html:not([data-theme="dark"]) [class*="modal"] .text-gray-300 {
  color: var(--theme-text-muted) !important;
}
html:not([data-theme="dark"]) [class*="modal"] .border-brand-border {
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) [class*="modal"] input,
html:not([data-theme="dark"]) [class*="modal"] select,
html:not([data-theme="dark"]) [class*="modal"] textarea {
  background-color: var(--theme-bg-alt) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* ── Formularios globales ── */
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
  background-color: var(--theme-bg-alt) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* ── Plan / Precio cards (retiro) ── */
html:not([data-theme="dark"]) .plan-card {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) .plan-card--featured {
  background-color: var(--theme-surface) !important;
  border-color: rgb(var(--rgb-gold)) !important;
}
html:not([data-theme="dark"]) .plan-card .text-white,
html:not([data-theme="dark"]) .plan-card h3 {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) .plan-features li {
  color: var(--theme-text-muted) !important;
}
html:not([data-theme="dark"]) .plan-tier {
  color: var(--theme-text-muted) !important;
}
html:not([data-theme="dark"]) .plan-tier.text-brand-salmon {
  color: rgb(var(--rgb-salmon)) !important;
}

/* ── Pain / Benefit cards (retiro) ── */
html:not([data-theme="dark"]) .pain-card {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) .pain-card:hover {
  border-color: rgba(239, 195, 67, 0.35) !important;
}
html:not([data-theme="dark"]) .benefit-card {
  background-color: var(--theme-bg-alt) !important;
  border-color: var(--theme-border) !important;
}
html:not([data-theme="dark"]) .benefit-card:hover {
  background-color: var(--theme-surface) !important;
}
html:not([data-theme="dark"]) .benefit-card--cta {
  background: linear-gradient(135deg, rgba(239,195,67,0.07), rgba(241,163,139,0.05)) !important;
  border-color: rgba(239,195,67,0.25) !important;
}
html:not([data-theme="dark"]) .benefit-card .text-white,
html:not([data-theme="dark"]) .benefit-card h3,
html:not([data-theme="dark"]) .benefit-card h4 {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) .benefit-card p {
  color: var(--theme-text) !important;
}
html:not([data-theme="dark"]) .pain-card .text-white,
html:not([data-theme="dark"]) .pain-card p {
  color: var(--theme-text) !important;
}

/* ── Pillar badges (retiro) ── */
html:not([data-theme="dark"]) .pillar-badge {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

/* ── Staff cards (retiro) ── */
html:not([data-theme="dark"]) .staff-img-wrap {
  background-color: var(--theme-surface) !important;
}
html:not([data-theme="dark"]) .staff-info .text-white,
html:not([data-theme="dark"]) .staff-info h3 {
  color: var(--theme-heading) !important;
}
html:not([data-theme="dark"]) .staff-info .text-gray-400 {
  color: var(--theme-text-muted) !important;
}

/* ── Tooltip WhatsApp ── */
html:not([data-theme="dark"]) .whatsapp-tooltip {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* ── Promo badge ── */
html:not([data-theme="dark"]) .promo-badge {
  background: rgba(239, 195, 67, 0.10);
  border-color: rgba(239, 195, 67, 0.35);
}

/* ================================================================
   BOTÓN TOGGLE TEMA
   ================================================================ */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--theme-border);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
  border-radius: 2px;
  flex-shrink: 0;
}
#theme-toggle:hover {
  border-color: rgb(var(--rgb-gold));
  background: rgba(239, 195, 67, 0.08);
}
#theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--theme-text);
  transition: color 0.3s ease, transform 0.5s ease;
}
#theme-toggle:hover svg {
  color: rgb(var(--rgb-gold));
  transform: rotate(20deg);
}

/* ── Icono de sol (modo oscuro activo → mostrar sol para cambiar a claro) ── */
#icon-sun  { display: none; }
#icon-moon { display: block; }
html[data-theme="dark"] #icon-sun  { display: block; }
html[data-theme="dark"] #icon-moon { display: none; }

/* ================================================================
   WELLNESS CORPORATIVO - TEXTO SIEMPRE OSCURO
   ================================================================ */
#empresas .text-brand-black {
  color: #1A1714 !important;
}
html[data-theme="dark"] #empresas .text-brand-black {
  color: #1A1714 !important;
}