.app-body{
  min-height:100vh;
  background: linear-gradient(180deg, #f7f9ff, #eef3ff);
}


/* Layout */
.app-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  padding: 18px;

  /* Alto exacto de pantalla. Antes era min-height: 100vh y, como el padding
     suma 36px, la pagina siempre scrolleaba esos 36px de mas. */
  height: 100vh;
  overflow: hidden;
}

/* Sidebar */
.sidebar{
  padding: 18px;
  height: calc(100vh - 36px);
  position: sticky;
  top: 18px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.side-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 16px;
}

.brand-logo-img{
  width: auto;
  object-fit: contain;
}

.brand-logo-img.small{
  height: 34px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
}

/* Nav */
.side-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nav-sep{
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 10px 0;
}

.nav-item{
  text-align:left;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  transition: all .2s ease;
}

.nav-item:hover{
  background: rgba(59,130,246,.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.nav-item.active{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.22);
}

/* Content */
.content{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width: 0;
  min-height: 0;   /* si no, el contenido empuja y desborda el shell */
}

.topbar{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.search{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 12px;
  max-width: 620px;
}

.search input{
  border:none;
  outline:none;
  background: transparent;
  width:100%;
}

.userbox{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Filters */
.filters{
  padding: 10px 12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chip{
  display:flex;
  align-items:center;
  gap:8px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.60);
  border-radius: 14px;
  padding: 8px 10px;
  transition: transform .15s ease, box-shadow .2s ease;
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}

.chip select{
  border:none;
  outline:none;
  background: transparent;
}

/* Views */
/* .views se come el alto que sobra bajo topbar + filtros */
.views{
  min-width: 0;
  flex: 1;
  min-height: 0;
}

.view{ display:none; }
.view.active{ display:block; height: 100%; }

/* Inicio y Soporte si son largos: que scrollee su panel, no la pagina */
#view-inicio.active,
#view-soporte.active{
  overflow-y: auto;
}

/* Grid principal */
.grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 14px;

  /* Antes: calc(100vh - 170px). Ese 170 no cuadraba con la altura real de
     topbar (74) + filtros (64) + gaps (28) + padding (36) = 202, y por eso
     sobresalia ~32px. Ahora lo resuelve el flex del contenedor. */
  height: 100%;
  min-height: 0;
}

.list,
.map{
  min-height: 0;
}

.list{
  padding: 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.list-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 6px 4px 10px;
}

.cards{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding-right: 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Map */
.map{
  padding: 12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;

  /* ancla del boton flotante, que ya no puede vivir dentro de #map */
  position: relative;
}

.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 4px 10px;
}

/* Responsive */
@media (max-width: 992px){
  /* En pantallas chicas apilamos y dejamos que la pagina scrollee: forzar
     una sola pantalla dejaria el mapa y la lista aplastados. */
  .app-shell{
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .view.active{
    height: auto;
  }
  #view-inicio.active,
  #view-soporte.active{
    overflow-y: visible;
  }
  .sidebar{
    position: static;
    height: auto;
  }
  .grid{
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* ================= HERO PREMIUM ================= */

.hero{
  position: relative;
  height: 320px;     /* antes 240px */
  overflow: hidden;
}

.hero-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;  /* sube el encuadre (antes 35%) */
  filter: brightness(.95);
}

.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 22px 28px;
  /* Dos capas: una de abajo hacia arriba y otra desde la izquierda, porque
     el texto es de bajo contraste sobre las zonas claras del cielo. */
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.85),
      rgba(0,0,0,.55) 45%,
      rgba(0,0,0,.15) 75%,
      rgba(0,0,0,0) 100%
    ),
    linear-gradient(
      to right,
      rgba(0,0,0,.55),
      rgba(0,0,0,0) 60%
    );
}

.hero-title{
  color:#fff;
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:.2px;
  text-shadow:0 8px 25px rgba(0,0,0,.6);
}

.hero-sub{
  margin-top:6px;
  max-width:640px;
  color:#ffffff;
  font-weight:400;
  text-shadow:0 6px 18px rgba(0,0,0,.6);
}

.hero-ctas{
  margin-top:12px;
  display:flex;
  gap:12px;
}

/* ================= FEATURED CAROUSEL (LOOP REAL) ================= */

.featured-title{
  font-weight: 600;
  font-size: 1.05rem;
}

.featured-carousel{
  width: 100%;
  overflow: hidden;
  position: relative;

  padding: 4px 6px;

  /* fade premium compatible con Chrome */
-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.carousel-track{
  display: flex;
  width: max-content;
  will-change: transform;

  /* importante: NO uses gap aquí para el truco del -50% */
  gap: 0;

  animation: scrollFeatured 32s linear infinite;
}

.featured-carousel:hover .carousel-track{
  animation-play-state: paused;
}

.track-group{
  display: flex;
  align-items: stretch;
  gap: 28px;          /* espacio entre cards */
  flex: 0 0 auto;     /* evita que el grupo intente estirarse */
}

/* separación exacta entre grupo1 y grupo2 */
.track-group:first-child{
  margin-right: 18px;
}

/* ===== Tarjeta de hotel destacado =====
   Mismo lenguaje visual que .review-card. Estas clases las emite
   featured-places.js (buildCard) y no tenían ni una regla: las tarjetas
   salían como <a> pelón, azul y subrayado. */
.featured-card{
  flex: 0 0 auto;
  width: 300px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;

  /* es un enlace: hay que matar el azul y el subrayado de Bootstrap */
  text-decoration: none;
  color: inherit;

  transition: transform .25s ease, box-shadow .25s ease;
}

.featured-card:hover,
.featured-card:focus{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  text-decoration: none;
  color: inherit;
}

.featured-cover{
  width: 100%;
  height: 170px;
  flex: 0 0 auto;
  overflow: hidden;
  background: #eef2f7;
}

.featured-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Respaldo cuando Places no trae foto (el div con el emoji) */
.featured-img.placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}

.featured-body{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  min-width: 0;
}

.featured-name{
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;

  /* dos líneas fijas: si no, los nombres largos descuadran la altura */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}

.featured-meta{
  font-size: .85rem;
  color: #5b6472;
}

.featured-addr{
  font-size: .8rem;
  color: #8a93a2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Nombre de usuario del header =====
   Traía .text-light (blanco) de cuando la barra era oscura: sobre la barra
   blanca actual quedaba invisible. */
.user-name{
  color: #1f2a3d;
  font-weight: 600;
}

/* Loop perfecto: 2 grupos idénticos */
@keyframes scrollFeatured{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================= REVIEWS CAROUSEL (LOOP REAL) ================= */

.reviews-title{
  font-weight: 600;
  font-size: 1.05rem;
}

/* Contenedor que recorta y aplica fade como el featured */
.reviews-carousel{
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 4px 6px;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

/* Track animado */
.reviews-track{
  display:flex;
  width:max-content;
  will-change: transform;

  /* igual que featured: SIN gap aquí */
  gap: 0;

  /* para que vaya “opuesto” al de arriba */
  animation: scrollReviews 28s linear infinite;
}

/* Pausa al hover */
.reviews-carousel:hover .reviews-track{
  animation-play-state: paused;
}

/* Grupo duplicado */
.reviews-group{
  display:flex;
  align-items: stretch;
  gap: 18px;
  flex: 0 0 auto;
}

/* separación exacta entre grupo1 y grupo2 */
.reviews-group:first-child{
  margin-right: 18px;
}

/* Tarjeta de review (compacta, premium, no gigante) */
.review-card{
  flex: 0 0 auto;
  width: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,.06);
  padding: 14px;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.review-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Avatar pequeño (el problema principal era que no tenía tamaño fijo) */
.review-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display:block;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.08);
}

/* Texto */
.review-meta{
  min-width: 0;
}

.review-name{
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.review-text{
  font-size: 0.90rem;
  color: rgba(0,0,0,.65);
  line-height: 1.25;
}

/* Loop perfecto: 2 grupos idénticos */
@keyframes scrollReviews{
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ===== Acciones en lista (Hoteles Places) ===== */
.list-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Al meterles icono, "Favoritos" y "Recargar" partian en dos lineas
   y arrastraban al contador de la izquierda. */
.list-actions .btn{
  white-space: nowrap;
}

.list-head > div:first-child{
  min-width: 0;
}

.list-head .text-muted{
  white-space: nowrap;
}

.list-actions select{
  width: 110px;
}

/* ===== Botón flotante en mapa ===== */
/* ====== Map floating action button ====== */
/* ================= TARJETA DE HOTEL (lista Hoteles / Favoritos) =================
   Antes todo esto vivia en atributos style="" dentro de los template strings
   de hotelsMap.js y favoritesMap.js (36 elementos con estilos inline), asi que
   cualquier ajuste visual obligaba a editar JS y las dos vistas se
   desincronizaban. */

.card-hotel{
  display: flex;
  gap: 15px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  background: #fff;

  /* altura pareja: sin esto una tarjeta con titulo de 2 lineas
     descuadraba contra las vecinas */
  min-height: 150px;

  transition: transform .2s ease, box-shadow .2s ease;
}

.card-hotel:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

.card-hotel__side{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100px;
  flex-shrink: 0;
}

.card-hotel__thumb{
  width: 90px;
  height: 90px;
  overflow: hidden;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-hotel__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-hotel__btn{
  width: 90px;
  font-size: 11px;
}

/* Hotel sin sitio web: lo marca hotelsMap.js al llegar los detalles */
.card-hotel__btn.is-disabled{
  opacity: .5;
  pointer-events: none;
}

.card-hotel__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-hotel__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.card-hotel__title{
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-hotel__fav{
  padding: 0;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #6c757d;
  transition: transform .15s ease, color .15s ease;
}

.card-hotel__fav:hover{
  transform: scale(1.12);
}

.card-hotel__fav.is-active{
  color: #dc3545;
}

.card-hotel__meta{
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-hotel__addr{
  font-size: 13px;
  color: #999;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================= FICHA DEL INFOWINDOW ================= */

.hotel-info{
  position: relative;   /* el corazon va absoluto encima */
  width: 18rem;
  max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
}

.hotel-info__img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.hotel-info__body{
  padding: 1rem;
  max-width: 240px;
}

/* El popup completo (con foto) si puede ser mas ancho */
.hotel-info .hotel-info__body{
  max-width: none;
}

.hotel-info__fav{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  user-select: none;
}

.hotel-info__title{
  margin: 0 0 .25rem;
  font-weight: 700;
  font-size: 1rem;
}

.hotel-info__addr{
  margin: 0 0 .5rem;
  font-size: 12px;
  color: #6c757d;
  line-height: 1.3;
}

.hotel-info__meta{
  margin: 0 0 .75rem;
  font-size: 13px;
}

.hotel-info__actions{
  display: flex;
  gap: .5rem;
}

/* ====== Boton flotante del mapa ======
   Estaba definido tres veces (44/42/44px, dos radios distintos) y el
   transition solo vivia en el primer bloque. Ahora es uno solo. */
.map-canvas{
  /* flex:1 + min-height:0 son los que le dan altura dentro del panel.
     Al consolidar los bloques duplicados los perdi y el canvas quedaba
     con altura 0: el mapa desaparecia. */
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  background: #e8efff;
  position: relative;
}

.map-fab{
  position: absolute;
  right: 26px;
  bottom: 26px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}

.map-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}