/* ═══════════════════════════════════════════════════════════════
   NAVBAR FIX v3 — Hotel San Rafael
   Píldora flotante redondeada, siempre visible, con glass por tema:
   crema en claro, noche en oscuro. No depende del scroll.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0) Paleta del navbar: los tokens viven en .srhome (solo Home), así que
   en el resto de páginas var(--oro)/var(--bosque) no resolvían y el hover del
   botón Reservar quedaba con texto oscuro sobre azul, sin panel dorado. ── */
#navbar{--oro:#D4A574;--bosque:#081826;--azul:#1E5EE5}

/* ── 1) Píldora SIEMPRE visible (no depende del scroll): color por tema ──
   Así nunca hay texto blanco sobre fondo claro ni viceversa, en hero o
   al hacer scroll, con o sin las clases .solid/.is-glass del JS. */
:root[data-theme="light"] #navbar .navbar__menu--item{color:rgba(42,38,34,.66)!important}
:root[data-theme="light"] #navbar .navbar__menu--item:hover,
:root[data-theme="light"] #navbar .navbar__menu--item.w--current{color:#081826!important}
:root[data-theme="dark"] #navbar .navbar__menu--item{color:rgba(247,243,236,.88)!important}
:root[data-theme="dark"] #navbar .navbar__menu--item:hover,
:root[data-theme="dark"] #navbar .navbar__menu--item.w--current{color:#fff!important}

/* ── 2) Subrayado azul marca ── */
#navbar .navbar__menu--item{position:relative}
#navbar .navbar__menu--item.w--current::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;
  bottom:-6px!important;height:2px!important;border-radius:1px!important;
  background:#1e5ee5!important;box-shadow:0 0 12px rgba(30,94,229,.55)!important;
}

/* ── 3) Barra flotante con esquinas redondeadas en TODO ──
   La píldora lleva su propio fondo por tema (siempre visible). Las clases
   .solid (home) / .is-glass (subpáginas) del JS solo refuerzan la sombra. */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:12px clamp(12px,3vw,32px) 0;
}
#navbar .c__navbar{padding-left:0!important;padding-right:0!important}
#navbar .navbar__wrap{
  position:relative;
  border-radius:20px!important;
  border:1px solid transparent;
  padding:12px 16px!important;
  box-shadow:0 18px 44px -18px rgba(8,24,38,.35);
  transition:background .35s,border-color .35s,box-shadow .35s;
}
#navbar .navbar__glass{border-radius:20px!important;border-bottom:none!important}

/* ── 3a) Tema CLARO: crema glass + texto oscuro ── */
:root[data-theme="light"] #navbar .navbar__wrap{
  background:rgba(247,243,236,.9)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
  border-color:rgba(42,38,34,.12)!important;
}
:root[data-theme="light"] #navbar .navbar__glass{
  background:rgba(247,243,236,.9)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
}
/* Logo oscuro sobre crema */
:root[data-theme="light"] #navbar .logo__brand img{filter:brightness(0) contrast(1.05)!important}
/* Hamburguesa oscura */
:root[data-theme="light"] #navbar .menu__line{background:#081826!important}
/* Toggle en claro */
:root[data-theme="light"] #navbar .tema--nav{
  background:rgba(42,38,34,.06)!important;border-color:rgba(42,38,34,.22)!important;color:#2A2622!important;
}

/* ── 3b) Tema OSCURO: noche glass + texto claro ── */
:root[data-theme="dark"] #navbar .navbar__wrap{
  background:rgba(8,24,38,.8)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
  border-color:rgba(255,255,255,.08)!important;
}
:root[data-theme="dark"] #navbar .navbar__glass{
  background:rgba(8,24,38,.8)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
}
/* Logo en azul tenue pero vivo sobre noche */
:root[data-theme="dark"] #navbar .logo__brand img{filter:none!important}
/* Hamburguesa blanca */
:root[data-theme="dark"] #navbar .menu__line{background:#F7F3EC!important}
/* Toggle en oscuro */
:root[data-theme="dark"] #navbar .tema--nav{
  background:rgba(247,243,236,.08)!important;border-color:rgba(247,243,236,.3)!important;color:#F7F3EC!important;
}
#navbar .tema--nav{
  position:static;width:40px;height:40px;box-shadow:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:background .3s,transform .2s;
}
#navbar .tema--nav svg{width:19px;height:19px}
#navbar .tema--nav:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.tema--nav .luna{display:none}
:root[data-theme="dark"] .tema--nav .sol{display:none}
:root[data-theme="dark"] .tema--nav .luna{display:block}

/* ── 4) Escritorio: Reservar + toggle de tema forman un solo grupo a la derecha.
   Antes el toggle quedaba solo al final, a ~159px del botón. ── */
@media(min-width:992px){
  #navbar .navbar__wrap{justify-content:flex-start}
  #navbar .navbar__menu{margin-inline:auto}
  #navbar .navbar__tools{margin-left:10px}
}

/* ── Móvil: menú como tarjeta flotante redondeada (no full-screen cuadrado) ── */
@media(max-width:991px){
  #navbar .navbar__menu{
    position:fixed!important;top:76px!important;left:12px!important;right:12px!important;
    bottom:auto!important;padding:24px 22px 28px!important;
    flex-direction:column!important;align-items:flex-start!important;gap:6px!important;
    border-radius:20px!important;border:1px solid transparent;
    z-index:10000!important;
  }
  :root[data-theme="light"] #navbar .navbar__menu{
    background:rgba(247,243,236,.97)!important;border-color:rgba(42,38,34,.12)!important;
    box-shadow:0 24px 60px -20px rgba(8,24,38,.4)!important;
  }
  :root[data-theme="dark"] #navbar .navbar__menu{
    background:rgba(8,24,38,.97)!important;border-color:rgba(255,255,255,.1)!important;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.6)!important;
  }
  :root[data-theme="light"] #navbar .navbar__menu--item{color:rgba(42,38,34,.8)!important}
  :root[data-theme="light"] #navbar .navbar__menu--item:hover,
  :root[data-theme="light"] #navbar .navbar__menu--item.w--current{color:#081826!important}
  :root[data-theme="dark"] #navbar .navbar__menu--item{color:rgba(247,243,236,.9)!important}
  :root[data-theme="dark"] #navbar .navbar__menu--item:hover,
  :root[data-theme="dark"] #navbar .navbar__menu--item.w--current{color:#fff!important}
}