/* ======================================================
   Theme "Linen" – Vitwi default
   - Layout = el de assets/css/style.css
   - Este fichero SOLO controla colores / acentos
   - Usa data-theme="linen" + data-palette="<id>"
   ====================================================== */

/* ========= 1) BASE NEUTRA PARA LINEN (sin colores de marca) ========= */

:root[data-theme="linen"] {
  /* Colores neutros */
  --vtw-bg: #ffffff;
  --vtw-text: #222222;
  --vtw-muted: #666666;
  --vtw-border: #eeeeee;

  /* Valores de acento por defecto (luego la paleta los sobreescribe) */
  --vtw-accent: #b84c00;
  --vtw-accent-hover: #a24300;
  --vtw-accent-soft: #fff3eb;

  --vtw-header-bg: #ffffff;
  --vtw-header-border: #eeeeee;

  /* Texto del footer (el fondo vendrá de --footer-bg global) */
  --vtw-footer-text: #f5f5f5;

  /* 🔗 Mapeo a los tokens globales de style.css
     (OJO: NO fijamos --footer-bg aquí) */
  --accent: var(--vtw-accent);
  --accent-2: var(--vtw-accent-hover);
  --accent-soft: var(--vtw-accent-soft);
  --header-bg: var(--vtw-header-bg);
  --header-link: #666666;
  --link-color: var(--vtw-accent);
}

/* ========= 2) PALETAS DE COLOR PARA LINEN ========= */
/* Coral = NARANJA VITWI (default) */
:root[data-theme="linen"]:not([data-palette]),
:root[data-theme="linen"][data-palette=""],
:root[data-theme="linen"][data-palette="coral"] {
  --vtw-accent:        #b84c00;
  --vtw-accent-hover:  #a24300;
  --vtw-accent-soft:   #fff3eb;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Forest = verdes más sobrios */
:root[data-theme="linen"][data-palette="forest"] {
  --vtw-accent:        #1c7c4d;
  --vtw-accent-hover:  #145c38;
  --vtw-accent-soft:   #e4f3ea;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Ocean = azules tipo “mar” */
:root[data-theme="linen"][data-palette="ocean"] {
  --vtw-accent:        #0369a1;
  --vtw-accent-hover:  #075985;
  --vtw-accent-soft:   #e1f5fe;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Rose = rosa pero más elegante */
:root[data-theme="linen"][data-palette="rose"] {
  --vtw-accent:        #d81b60;
  --vtw-accent-hover:  #b21751;
  --vtw-accent-soft:   #ffe0eb;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Teal + Gold = turquesa elegante */
:root[data-theme="linen"][data-palette="teal-gold"] {
  --vtw-accent:        #00897b;
  --vtw-accent-hover:  #007064;
  --vtw-accent-soft:   #e0f2f1;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Sand (arena / tierra suave) */
:root[data-theme="linen"][data-palette="sand"] {
  --vtw-accent:        #a67c52;
  --vtw-accent-hover:  #8d633e;
  --vtw-accent-soft:   #f6e8d8;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Lime = verde lima, menos chillón */
:root[data-theme="linen"][data-palette="lime"] {
  --vtw-accent:        #a4c639;
  --vtw-accent-hover:  #8fa52f;
  --vtw-accent-soft:   #f3f8da;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Gold (dorados) */
:root[data-theme="linen"][data-palette="gold"] {
  --vtw-accent:        #f9a825;
  --vtw-accent-hover:  #f57f17;
  --vtw-accent-soft:   #fff3cd;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Sky (azul alegre) */
:root[data-theme="linen"][data-palette="sky"] {
  --vtw-accent:        #039be5;
  --vtw-accent-hover:  #0288d1;
  --vtw-accent-soft:   #e1f5fe;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}

/* Violet (morado) */
:root[data-theme="linen"][data-palette="violet"] {
  --vtw-accent:        #7e57c2;
  --vtw-accent-hover:  #5e35b1;
  --vtw-accent-soft:   #ede7f6;

  --accent:            var(--vtw-accent);
  --accent-2:          var(--vtw-accent-hover);
  --accent-soft:       var(--vtw-accent-soft);
}


/* ========= 3) APLICAR ESOS COLORES A LOS ELEMENTOS ========= */

/* Fondo / texto general */
html[data-theme="linen"] body {
  background: var(--vtw-bg);
  color: var(--vtw-text);
}

/* HEADER / NAV */
html[data-theme="linen"] .header {
  border-bottom: 1px solid var(--vtw-header-border);
  background: var(--vtw-header-bg);
}

/* Enlaces del menú arriba */
html[data-theme="linen"] .nav a {
  color: #222;
}

/* Pestaña activa del menú (Inicio / Presentación / etc.) */
html[data-theme="linen"] .nav a.active {
  border-bottom: 2px solid var(--vtw-accent);
}

/* Selector de idioma – activo en color de acento */
html[data-theme="linen"] .lang-switch .lang-link.is-active {
  color: var(--vtw-accent);
  opacity: 1;
}

/* BOTONES RESERVA (header + modal + sticky) */
html[data-theme="linen"] .btn-book,
html[data-theme="linen"] .reserve-btn,
html[data-theme="linen"] .reserve-sticky {
  background: var(--vtw-accent) !important;
  color: #ffffff !important;
  border: 0;
}

/* Hover */
html[data-theme="linen"] .btn-book:hover,
html[data-theme="linen"] .reserve-btn:hover,
html[data-theme="linen"] .reserve-sticky:hover {
  background: var(--vtw-accent-hover) !important;
  opacity: 1 !important;
}

/* HERO CTA (“Reservar” sobre la foto) */
html[data-theme="linen"] .hero-cta {
  background: var(--vtw-accent);
  color: #ffffff;
}

html[data-theme="linen"] .hero-cta:hover {
  background: var(--vtw-accent-hover);
}

/* TABS (overview: Descripción / Distribución / Servicios / etc.) */
html[data-theme="linen"] .tabs {
  border-bottom: 1px solid var(--vtw-border);
}

html[data-theme="linen"] .tab {
  color: #222;
}

html[data-theme="linen"] .tab.active,
html[data-theme="linen"] .tab.is-active {
  border-bottom: 2px solid var(--vtw-accent);
  font-weight: 700;
}

/* READMORE / ENLACES “VER MÁS” */
html[data-theme="linen"] .readmore-toggle,
html[data-theme="linen"] a.link-more,
html[data-theme="linen"] a.link-more--end {
  color: var(--vtw-accent);
  font-weight: 700;
}

/* CHIPS (Wi-Fi, Parking, etc.) */
html[data-theme="linen"] .chips .chip,
html[data-theme="linen"] #vtwTopChips .chip {
  border-radius: 999px;
  border: 1px solid #dddddd;
  background: #ffffff;
}

/* FOOTER – usa el fondo de la PALETA global (style.css → --footer-bg) */
html[data-theme="linen"] .footer {
  background-color: var(--footer-bg);
  color: var(--vtw-footer-text);
}

html[data-theme="linen"] .footer a {
  color: #fdfdfd;
}

html[data-theme="linen"] .footer a:hover {
  color: var(--accent-soft);
  opacity: 1;
}

/* LEGAL BOX */
html[data-theme="linen"] .legal-info {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.03);
  font-size: 14px;
  line-height: 1.35;
}

/* LIGHTBOX (navegación) */
html[data-theme="linen"] .lb-btn {
  background: rgba(0,0,0,.6);
  color: #ffffff;
}

html[data-theme="linen"] .lb-btn:hover {
  background: rgba(0,0,0,.85);
}

/* META-ROW ICONOS (Overview: Huéspedes, Dormitorios, etc.) */
html[data-theme="linen"] .meta-row--icons .ico {
  border-radius: 12px;
  border: 1px solid #eeeeee;
  background: #ffffff;
}

/* RESERVA MODAL */
html[data-theme="linen"] .reserve-panel {
  background: #ffffff;
  color: #111111;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
}

html[data-theme="linen"] .reserve-close {
  background: #ffffff;
  color: #111111;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

/* ===========================================
   LINEN – Fix contraste footer (rose / teal-gold)
   =========================================== */

/* Paleta ROSE: fondo vino + texto claro */
html[data-theme="linen"][data-palette="rose"] .footer {
  background: #4b1624;      /* vino / teja oscuro */
  color: #fdeaf2;
}

html[data-theme="linen"][data-palette="rose"] .footer a {
  color: #ffe9f3;
}

html[data-theme="linen"][data-palette="rose"] .footer a:hover {
  color: #ffffff;
}

/* Paleta TEAL-GOLD: fondo teal muy oscuro + texto claro */
html[data-theme="linen"][data-palette="teal-gold"] .footer {
  background: #003b33;      /* teal oscuro elegante */
  color: #e6faf8;
}

html[data-theme="linen"][data-palette="teal-gold"] .footer a {
  color: #f0fffd;
}

html[data-theme="linen"][data-palette="teal-gold"] .footer a:hover {
  color: #ffffff;
}

/* ===========================================
   LINEN – Fix contraste footer para el resto
   (FOREST, OCEAN, SAND, LIME, GOLD, SKY, VIOLET)
   Forzamos fondo oscuro + texto/link claro
   =========================================== */

/* FOREST */
html[data-theme="linen"][data-palette="forest"] .footer {
  background: #0b1f16 !important;
  color: #f4f8f6 !important;
}
html[data-theme="linen"][data-palette="forest"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="forest"] .footer a:hover {
  color: #c6f6d5 !important;
}

/* OCEAN */
html[data-theme="linen"][data-palette="ocean"] .footer {
  background: #0b2236 !important;
  color: #f3f7fb !important;
}
html[data-theme="linen"][data-palette="ocean"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="ocean"] .footer a:hover {
  color: #b3e5fc !important;
}

/* SAND */
html[data-theme="linen"][data-palette="sand"] .footer {
  background: #3f2b1f !important;
  color: #f8f2eb !important;
}
html[data-theme="linen"][data-palette="sand"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="sand"] .footer a:hover {
  color: #ffe0b2 !important;
}

/* LIME */
html[data-theme="linen"][data-palette="lime"] .footer {
  background: #3e4a1a !important;
  color: #f7fae6 !important;
}
html[data-theme="linen"][data-palette="lime"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="lime"] .footer a:hover {
  color: #e6ff8f !important;
}

/* GOLD */
html[data-theme="linen"][data-palette="gold"] .footer {
  background: #3f2a00 !important;
  color: #fff7de !important;
}
html[data-theme="linen"][data-palette="gold"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="gold"] .footer a:hover {
  color: #ffe082 !important;
}

/* SKY */
html[data-theme="linen"][data-palette="sky"] .footer {
  background: #0b3450 !important;
  color: #eff7ff !important;
}
html[data-theme="linen"][data-palette="sky"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="sky"] .footer a:hover {
  color: #bbdefb !important;
}

/* VIOLET */
html[data-theme="linen"][data-palette="violet"] .footer {
  background: #2a184b !important;
  color: #f3edff !important;
}
html[data-theme="linen"][data-palette="violet"] .footer a {
  color: #ffffff !important;
}
html[data-theme="linen"][data-palette="violet"] .footer a:hover {
  color: #d1c4e9 !important;
}