/* =========================================================
   bw-ux.css — Capa de experiencia de usuario
   Best Western Plus Hotel San Diego

   1. Modo oscuro (html[data-theme="dark"])
   2. Animación de carga (html.bw-loading)
   3. Barra de progreso de scroll
   4. Microinteracciones (cursor, botones, links)
   5. CTA de navegación visible en móvil (pre-scroll)
   6. Barra CTA móvil fija
   7. Botón volver arriba
   ========================================================= */

/* ═══ 1. MODO OSCURO ═══════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;
  --c: #C23A5E;
  --cl: #D4577B;
  --cd: #9E2447;
  --coal: #B9AEB4;
  --blush: #2A1A20;
  --blush2: #33222A;
  --cream: #120B0E;
  --white: #1B1216;
  --text: #F3E9EC;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .14);
  --color-primary: #C23A5E;
  --color-neutral: #B9AEB4;
  --color-blush: #2A1A20;
  --color-cream: #120B0E;
  --color-text: #F3E9EC;
}

html.bw-theme-anim,
html.bw-theme-anim *,
html.bw-theme-anim *::before,
html.bw-theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

html[data-theme="dark"] img { filter: brightness(.92) }
html[data-theme="dark"] #nav { background: rgba(18, 11, 14, .94) }
/* Logo: versión blanca oficial en modo oscuro */
.nl .nl-dark { display: none }
html[data-theme="dark"] .nl img { display: none }
html[data-theme="dark"] .nl .nl-dark { display: block; filter: none }

@media (max-width: 768px) {
  html[data-theme="dark"] .nm { background: rgba(18, 11, 14, .98) }
}

html[data-theme="dark"] .loc-badge,
html[data-theme="dark"] .hab-loc-badge,
html[data-theme="dark"] .sec-img-badge { background: rgba(27, 18, 22, .95) }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--white);
  color: var(--text);
  border-color: var(--line2);
}

/* Interruptor */
.nr {
  display: flex;
  align-items: center;
  gap: 14px
}

.bw-theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--coal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1)
}

.bw-theme-toggle:hover { color: var(--c); border-color: var(--c) }
.bw-theme-toggle:active { transform: scale(.9) rotate(-20deg) }
.bw-theme-toggle .fa-sun { display: none }
html[data-theme="dark"] .bw-theme-toggle .fa-sun { display: inline-block }
html[data-theme="dark"] .bw-theme-toggle .fa-moon { display: none }

/* ═══ 2. ANIMACIÓN DE CARGA ═══════════════════════════════ */
.bw-loader { display: none }

html.bw-loading .bw-loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--grad);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  /* Salvavidas: si el JS falla, el loader se retira solo */
  animation: bwLoaderOut .5s ease 3s forwards
}

html.bw-loaded .bw-loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--grad);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  animation: bwLoaderOut .5s ease forwards
}

.bw-loader img {
  width: 170px;
  height: auto;
  animation: bwLoaderPulse 1.4s ease-in-out infinite
}

.bw-loader-bar {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, .2);
  overflow: hidden;
  position: relative
}

.bw-loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-100%);
  animation: bwLoaderBar 1.1s ease-in-out infinite
}

@keyframes bwLoaderPulse {
  0%, 100% { opacity: .75; transform: scale(.98) }
  50% { opacity: 1; transform: scale(1) }
}

@keyframes bwLoaderBar {
  0% { transform: translateX(-100%) }
  100% { transform: translateX(100%) }
}

@keyframes bwLoaderOut {
  to { opacity: 0; visibility: hidden }
}

/* Imágenes con carga diferida: aparecen suavemente */
img[loading="lazy"].bw-img-fade {
  opacity: 0;
  transition: opacity .6s ease
}

img[loading="lazy"].bw-img-fade.bw-img-in { opacity: 1 }

/* ═══ 3. BARRA DE PROGRESO DE SCROLL ══════════════════════ */
.bw-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 400;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none
}

/* ═══ 4. MICROINTERACCIONES ═══════════════════════════════ */

/* Brillo al pasar sobre botones principales */
.btn-c,
.ncta,
.bw-mbar-book {
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.btn-c::before,
.ncta::before,
.bw-mbar-book::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  z-index: -1;
  pointer-events: none
}

.btn-c:hover::before,
.ncta:hover::before,
.bw-mbar-book:hover::before { left: 125% }

/* Respuesta táctil al presionar */
.btn-c:active,
.btn-ol:active,
.btn-ghost:active,
.btn-wh:active,
.ncta:active,
.bw-mbar a:active,
.bw-top:active { transform: scale(.96) !important }

/* Flechas que avanzan al hover */
.arr-tag i,
.btn-c i.fa-arrow-right {
  transition: transform .25s ease
}

.arr-card:hover .arr-tag i,
.btn-c:hover i.fa-arrow-right { transform: translateX(4px) }

/* Links de texto: subrayado animado */
.post-content a,
.legal-body a,
.fct a,
.fc ul a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s ease, color .2s
}

.post-content a:hover,
.legal-body a:hover,
.fct a:hover,
.fc ul a:hover { background-size: 100% 1px }

/* Foco visible accesible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cl);
  outline-offset: 3px
}

/* Cursor personalizado — solo puntero fino (mouse) */
.bw-cursor,
.bw-cursor-dot { display: none }

@media (hover: hover) and (pointer: fine) {
  html.bw-has-cursor .bw-cursor,
  html.bw-has-cursor .bw-cursor-dot {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .25s
  }

  html.bw-has-cursor .bw-cursor {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1.5px solid var(--c);
    transition: opacity .25s, width .25s, height .25s, margin .25s, background-color .25s, border-color .25s
  }

  html.bw-has-cursor .bw-cursor-dot {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: var(--c)
  }

  /* Solo aparece sobre elementos accionables (links, botones, campos) */
  html.bw-has-cursor.bw-cursor-on.bw-cursor-hover .bw-cursor,
  html.bw-has-cursor.bw-cursor-on.bw-cursor-hover .bw-cursor-dot { opacity: 1 }

  html.bw-has-cursor.bw-cursor-hover .bw-cursor {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    background-color: rgba(182, 29, 74, .1);
    border-color: var(--cl)
  }

  html.bw-has-cursor .bw-cursor.is-down {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px
  }
}

/* ═══ 5. CTA NAVEGACIÓN VISIBLE EN MÓVIL (pre-scroll) ═════ */
@media (max-width: 768px) {
  .nr { gap: 8px }

  .ncta {
    display: inline-flex !important;
    align-items: center;
    padding: 9px 14px;
    font-size: 9px;
    letter-spacing: 1.5px;
    white-space: nowrap
  }

  .nl img { max-width: 36vw }
  .bw-theme-toggle { width: 34px; height: 34px; font-size: 13px }
}

@media (max-width: 360px) {
  .ncta { padding: 8px 10px; letter-spacing: 1px }
}

/* ═══ 6. BARRA CTA MÓVIL FIJA ═════════════════════════════ */
.bw-mbar { display: none }

@media (max-width: 768px) {
  .bw-mbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 450;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(24, 12, 16, .1);
    padding-bottom: env(safe-area-inset-bottom)
  }

  .bw-mbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--coal);
    transition: transform .15s, color .2s
  }

  .bw-mbar a i { font-size: 18px }
  .bw-mbar .bw-mbar-wa i { color: #25D366 }

  .bw-mbar .bw-mbar-book {
    flex-direction: row;
    gap: 8px;
    background: var(--grad);
    color: #fff;
    font-weight: 600;
    font-size: 11px
  }

  .bw-mbar .bw-mbar-book i { font-size: 15px }

  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)) }

  /* El WhatsApp ya está en la barra: se oculta el botón flotante */
  .fab { display: none !important }
}

/* ═══ 7. BOTÓN VOLVER ARRIBA ══════════════════════════════ */
.bw-top {
  position: fixed;
  right: 38px;
  bottom: 104px;
  z-index: 480;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--white);
  color: var(--c);
  box-shadow: 0 6px 22px rgba(24, 12, 16, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, visibility .3s, transform .3s, box-shadow .25s
}

.bw-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none
}

.bw-top:hover { box-shadow: 0 10px 28px rgba(139, 25, 54, .3) }
.bw-top:hover i { transform: translateY(-2px) }
.bw-top i { font-size: 14px; position: relative; transition: transform .2s }

/* Anillo con el progreso de lectura */
.bw-top svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg)
}

.bw-top circle {
  fill: none;
  stroke-width: 2.5;
  stroke: var(--c);
  stroke-linecap: round;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66
}

@media (max-width: 768px) {
  .bw-top {
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 42px;
    height: 42px
  }
}

/* ═══ Movimiento reducido ═════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.bw-loading .bw-loader { display: none }
  .bw-progress { display: none }
  .btn-c::before, .ncta::before, .bw-mbar-book::before { display: none }
  .bw-top, .bw-theme-toggle { transition: none }
  img[loading="lazy"].bw-img-fade { opacity: 1; transition: none }
}