/* ==========================================================================
   ELENA HAIRLOVER — Base (lo comparten la web y el panel)
   Reunido el 2026-09-21 a partir de: variables.css, text.css, gradients.css, borders.css, typography.css, reset.css
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════
   ELENA HAIRLOVER — Variables de Tema Oscuro Premium (BRAND_COLOR_DNA)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ═══════ GOLD PALETTE ═══════ */
  --color-gold-warm:       #C9A84C;
  --color-gold-bright:     #D4AF37;
  --color-gold-dark:       #B8962E;
  --color-gold-light:      #F5EDD0;
  --color-gold-warm-rgb:   201 168 76;

  /* ═══════ DARK PALETTE ═══════ */
  --color-dark-main:       #111111;
  --color-dark-main-rgb:   17 17 17;
  --color-dark-bg:         #171717;
  --color-dark-card:       #1F1F1F;
  --color-dark:            #1A1A1A;

  /* ═══════ TEXT ═══════ */
  --color-text-light:      #ECE7DF;   /* blanco roto: más suave que el blanco puro (2026-10-05) */
  --color-text-dark:       #222222;
  /* Subido de #666666 a #8A8279 el 2026-09-24: sobre #111 daba 3,3:1, por
     debajo del mínimo legible (4,5:1). Ahora 5,2:1. */
  --color-text-muted:      #8A8279;
  --color-text-gold:       #C5A880;

  /* ═══════ LIGHT MODE ═══════ */
  --color-light-bg:        #FAF8F5;
  --color-light-warm:      #F4EFE5;
  --color-light-card:      #FFFFFF;

  /* ═══════ GRADIENTS ═══════ */
  --gold-grad-primary:     linear-gradient(135deg, #F3D798 0%, #C9A84C 50%, #9A782B 100%);
  --gold-grad-hover:       linear-gradient(135deg, #F7E0AA 0%, #DBB95D 50%, #AD8A38 100%);
  --gold-grad-text:        linear-gradient(135deg, #F7E0AA 0%, #C9A84C 50%, #E2BE6E 100%);
  --gold-grad-border:      linear-gradient(135deg, #F3D798, #C9A84C, #9A782B);

  /* ═══════ AVISOS ═══════ */
  /* Estas cuatro estaban escritas en trozos sueltos de css/components/ que
     habían perdido su `:root {` de apertura, así que NO EXISTÍAN. Y sí se
     usan: --color-red aparece 12 veces (los botones de borrar del panel y
     los avisos de error), que hasta hoy salían sin su rojo. */
  --color-red:             #e74c3c;
  --color-green:           #2ecc71;
  --transition-fast:       all 0.2s ease;
  --space-section-mob:     80px;

  /* ═══════ BORDERS ═══════ */
  --color-border-light:    rgba(197, 168, 128, 0.25);
  --color-border-dark:     rgba(197, 168, 128, 0.15);
  --color-border:          rgba(201, 168, 76, 0.2);

  /* ═══════ BUTTON GHOST ═══════ */
  --color-btn-ghost:       rgba(201, 168, 76, 0.15);
  --color-btn-ghost-hover: rgba(201, 168, 76, 0.28);
  --color-btn-ghost-border:#C9A84C;

  /* ═══════ CAPA DE TEMA (2026-09-24) ═══════
     Lo que cambia entre «Noche de oro» (esto) y «Lino» (el bloque de abajo).
     Dicen lo que significan, no de qué color son:
       --color-on-gold   texto encima del oro relleno (botones)
       --color-gold-text oro solo para texto (eyebrows, precios, enlaces):
                         en Lino el oro de marca sobre beige es ilegible
       --color-superficie-suave  fondo apenas más claro que la página
       --color-linea-suave       líneas finas (bordes, separadores)
       --color-dark-deep         fondo de las secciones intercaladas */
  --color-on-gold:         #111111;
  --color-gold-text:       #C9A84C;
  --color-text-suave:      rgba(236, 231, 223, 0.74);   /* párrafos secundarios */
  --color-superficie-suave: rgba(255, 255, 255, 0.03);
  --color-linea-suave:     rgba(255, 255, 255, 0.08);
  --color-linea-fuerte:    rgba(255, 255, 255, 0.4);    /* bordes de botones fantasma */
  --color-dark-deep:       #0f0f0f;
  /* --color-gold no existía y css/web.css la usaba (bordes del visor): alias */
  --color-gold:            var(--color-gold-warm);

  /* ═══════ TYPOGRAPHY & TRANSITIONS ═══════ */
  --font-heading:          'Cormorant Garamond', Georgia, serif;
  --font-display:          'Cormorant Garamond', Georgia, serif;
  --font-body:             'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --transition-luxury:     all 0.3s cubic-bezier(0.25, 1, 0.22, 1);
  --space-section:         100px;
}

/* Temas más suaves (2026-10-05, lo pidió el propietario: «baja la intensidad
   de los temas»). El texto de Noche pasa de blanco puro a blanco roto
   (#ECE7DF) y el de Lino de casi negro a #3A3732. Lo que va ESCRITO ENCIMA DE
   UNA FOTO (la portada, el visor, el pie de las transformaciones, el texto
   de la galería) sigue en blanco puro en todos los temas: ahí hace falta
   para leerse sobre una foto clara. (En Lino estas mismas piezas vuelven a
   declarar sus fichas más abajo; esto es para Noche.) */
.hero,
.lightbox,
.transf__pie,
.galeria__overlay {
  --color-text-light: #FFFFFF;
  --color-text-suave: rgba(255, 255, 255, 0.72);
}

/* Aquí había 35 líneas de trozos sueltos (restos de text.css, gradients.css,
   borders.css y typography.css, que habían perdido su ":root {"). Fuera de
   una regla no valen nada, pero además el navegador los leía junto con la
   regla siguiente y la DESCARTABA entera: era la puesta a cero de abajo, así
   que ningún campo del panel medía lo que su hueco y se montaban unos sobre
   otros (2026-09-21). Todos esos valores ya están en el :root de arriba. */

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

body {
  background-color: var(--color-dark-main);
  color: var(--color-text-light);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   TEMA CLARO «LINO» (se activa desde el panel, 2026-09-24)
   ═══════════════════════════════════════════════════════════
   El panel guarda settings/tema = { modo: "noche" | "lino" }; la web lo
   lee (js/i18n-loader.js, en la misma consulta que los idiomas) y pone
   <html data-tema="lino">. Un script en el <head> lo aplica antes de
   pintar con la copia del navegador, para que no parpadee.
   Contrastes comprobados: texto 14,1:1 · secundario 5,3:1 · acento 5,4:1 ·
   botón 7,5:1. Los nombres siguen diciendo «dark» aunque el valor sea
   claro: renombrarlos tocaría cientos de líneas (deuda apuntada). */
html[data-tema="lino"] {
  --color-dark-main:   #F3F0EA;   /* fondo de página */
  --color-dark-main-rgb: 243 240 234;
  --color-dark-bg:     #EAE5DC;   /* fondo alterno */
  --color-dark-card:   #FCFBF8;   /* tarjetas */
  --color-dark:        #EFEBE2;
  --color-dark-deep:   #EAE5DC;

  --color-text-light:  #3A3732;   /* texto principal (2026-10-05: antes #22211F, más duro) */
  --color-text-muted:  #625E57;   /* 4,77:1 en una tarjeta sobre el fondo alterno (con #66625B se quedaba en 4,49; 2026-10-05) */
  --color-text-suave:  #57524A;
  --color-text-gold:   #6F6040;

  --color-gold-warm:   #BFB08A;   /* botones, bordes, iconos */
  --color-gold-bright: #CFC2A2;
  --color-gold-dark:   #9E8F6A;
  --color-gold-light:  #FCFBF8;
  --color-gold-warm-rgb: 191 176 138;

  --color-on-gold:     #22211F;
  --color-gold-text:   #6F6040;
  --color-superficie-suave: rgba(34, 33, 31, 0.04);
  --color-linea-suave: rgba(111, 96, 64, 0.18);
  --color-linea-fuerte: rgba(34, 33, 31, 0.4);

  --gold-grad-primary: linear-gradient(135deg, #D8CEB4 0%, #BFB08A 50%, #9E8F6A 100%);
  --gold-grad-hover:   linear-gradient(135deg, #E2DAC4 0%, #CBBC97 50%, #A99A75 100%);
  /* Letra con degradado (el título «Horario del Salón»). Más oscuro desde el
     2026-10-07: con #8A7A52 en las puntas se quedaba en 3,4:1 sobre la tarjeta. */
  --gold-grad-text:    linear-gradient(135deg, #6A5B3C 0%, #5A4D32 50%, #6A5B3C 100%);
  --gold-grad-border:  linear-gradient(135deg, #D8CEB4, #BFB08A, #9E8F6A);

  --color-border-light: rgba(111, 96, 64, 0.28);
  --color-border-dark:  rgba(111, 96, 64, 0.18);
  --color-border:       rgba(111, 96, 64, 0.22);

  --color-btn-ghost:        rgba(111, 96, 64, 0.10);
  --color-btn-ghost-hover:  rgba(111, 96, 64, 0.18);
  --color-btn-ghost-border: #BFB08A;
}

/* El hero se queda oscuro en los dos temas: ahí viven el logo dorado y las
   fotos con velo oscuro, que es lo que da el golpe premium. Las ventanas
   emergentes también (van sobre un velo negro). La cabecera sigue al tema
   desde el 2026-09-24 (css/cabecera.css, fichas --cab-*) y el PIE desde el
   2026-09-25 (css/footer-modern.css, fichas --pie-*). */
/* Lo que va ESCRITO ENCIMA DE UNA FOTO lleva su propio velo oscuro detrás, así
   que su letra es clara en los DOS temas (2026-09-25). En Lino, el texto normal
   es oscuro porque va sobre beige, y el pie de una transformación salía con
   letra oscura sobre el velo oscuro: no se leía, y menos sobre una foto clara.
   El velo hace que dé igual si la foto es clara u oscura. */
html[data-tema="lino"] .hero,
html[data-tema="lino"] .lightbox,
html[data-tema="lino"] .transf__pie,
html[data-tema="lino"] .galeria__overlay,
html[data-tema="lino"] #auth-modal,
html[data-tema="lino"] #profile-modal {
  --color-dark-main: #111111;
  --color-dark-main-rgb: 17 17 17;
  --color-dark-bg: #171717;
  --color-dark-card: #1F1F1F;
  --color-dark-deep: #0f0f0f;
  --color-text-light: #FFFFFF;
  --color-text-muted: #A39A8E;
  --color-text-suave: rgba(255, 255, 255, 0.72);
  --color-gold-warm: #C9A84C;
  --color-gold-light: #F5EDD0;
  --color-text-gold: #C9A84C;
  --color-on-gold: #111111;
  --color-gold-text: #C9A84C;
  --color-superficie-suave: rgba(255, 255, 255, 0.03);
  --color-linea-suave: rgba(255, 255, 255, 0.08);
  --color-linea-fuerte: rgba(255, 255, 255, 0.4);
  --gold-grad-primary: linear-gradient(135deg, #F3D798 0%, #C9A84C 50%, #9A782B 100%);
  --gold-grad-hover:   linear-gradient(135deg, #F7E0AA 0%, #DBB95D 50%, #AD8A38 100%);
  --gold-grad-text:    linear-gradient(135deg, #F7E0AA 0%, #C9A84C 50%, #E2BE6E 100%);
  --color-border-light: rgba(197, 168, 128, 0.25);
  --color-border-dark:  rgba(197, 168, 128, 0.15);
  --color-border:       rgba(201, 168, 76, 0.2);
}

/* Clases de Tailwind que fijan el color sin pasar por las variables (o que
   pasan por --color-gold-warm, que en Lino no vale para texto). Van aquí
   en vez de en el HTML para no tener que regenerar tailwind.css. */
html[data-tema="lino"] .text-white,
html[data-tema="lino"] .text-white\/95 { color: var(--color-text-light); }
html[data-tema="lino"] .text-white\/70,
html[data-tema="lino"] .text-white\/60 { color: var(--color-text-suave); }
html[data-tema="lino"] .text-white\/50,
html[data-tema="lino"] .text-white\/40 { color: var(--color-text-muted); }
html[data-tema="lino"] .text-gold-warm,
html[data-tema="lino"] .text-\[\#C9A84C\] { color: var(--color-gold-text); }
html[data-tema="lino"] .hover\:text-gold-warm:hover { color: var(--color-gold-text); }
html[data-tema="lino"] .text-dark-main,
html[data-tema="lino"] .text-\[\#1A1A1A\] { color: var(--color-on-gold); }
html[data-tema="lino"] .hover\:text-dark-main:hover { color: var(--color-on-gold); }
html[data-tema="lino"] .bg-\[\#111\],
html[data-tema="lino"] .bg-\[\#111111\] { background-color: var(--color-dark-main); }
html[data-tema="lino"] .bg-\[\#222\] { background-color: var(--color-dark-card); }
html[data-tema="lino"] .bg-\[\#C9A84C\] { background-color: var(--color-gold-warm); }
html[data-tema="lino"] .border-white\/40 { border-color: var(--color-border-light); }
html[data-tema="lino"] .bg-white\/20 { background-color: var(--color-superficie-suave); }

/* La pestaña activa de la carta lleva el texto en --color-dark-main (que en
   Lino es beige) sobre oro: aquí se le da el texto de «encima del oro». */
html[data-tema="lino"] .tab-btn.active,
html[data-tema="lino"] .tab-btn[aria-selected="true"] { color: var(--color-on-gold); }

/* El panel nunca cambia de tema: hereda el :root oscuro. */
html[data-panel][data-tema] { --color-dark-main: #111111; }