/* ===========================================================================
   Fichas — piezas propias de la ficha de alojamiento y de la barra de datos
   ---------------------------------------------------------------------------
   Reglas de alojamiento.html del diseño Fusion, con la tipografía del panel
   (var(--font-body)) en lugar de 'Mulish' escrita a mano. Lo común a todas las
   fichas (.detail-layout, .gallery-*, .fact-card, .detail-cta…) ya está en
   tc-interior.css; aquí solo lo que el tema no tenía.

   El panel deslizante del lateral va acotado a .tc-lodging: en el diseño
   afectaba a cualquier .detail-aside, y aquí también hay fichas de monumento
   que no lo llevan.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Barra de datos (.event-meta) con número de columnas variable
   --------------------------------------------------------------------------- */
.tc-resource-bar[data-cols="1"] { grid-template-columns: 1fr; }
.tc-resource-bar[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.tc-resource-bar[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.tc-resource-bar[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.tc-resource-bar[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }	/* la de ruta */
.tc-resource-bar .em-ic svg { width: 26px; height: 26px; }
.event-meta .em-v .stars svg { width: 14px; height: 14px; color: var(--gold-lt); }
.event-meta .em-v a { color: inherit; }

@media (max-width: 768px) {
  .tc-resource-bar[data-cols] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .tc-resource-bar[data-cols] { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   2. Clasificación oficial: estrellas en hoteles y hostales, llaves en
      apartamentos. Es la categoría del registro, no una valoración.
   --------------------------------------------------------------------------- */
.stars { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.stars svg { width: 13px; height: 13px; color: var(--gold); }
.stars--hero svg { width: 17px; height: 17px; color: var(--gold-lt); }
.stars--card svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------------
   3. Columna principal
   --------------------------------------------------------------------------- */
/* Sin h2: repetía el nombre que ya está en el titular */
.detail-body--suelto h2 { display: none; }
.tc-lodging-services { margin-top: 36px; }

.amenities { display: flex; flex-wrap: wrap; gap: 10px; }
.amenity {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border: 1px solid var(--border); background: var(--cream);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--dark);
}
.amenity svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   4. Lateral: redes, nota y mapa de situación
   --------------------------------------------------------------------------- */
.aside-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.aside-social a {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); color: var(--mid);
  transition: border-color .25s, color .25s, background .25s;
}
.aside-social a:hover { border-color: var(--gold); color: var(--gold); background: var(--cream); }
.aside-social svg { width: 16px; height: 16px; }

.alo-nota { margin-top: 14px; font-size: 12px; color: var(--gray); line-height: 1.6; }

/* isolation crea un contexto de apilamiento propio: Leaflet reparte z-index de
   hasta 1000 entre sus paneles y, sin aislarlos, se montaban por encima de la
   cabecera pegajosa del panel deslizante. */
.alo-mini-mapa {
  border: 1px solid var(--border); background: var(--cream);
  position: relative; isolation: isolate; z-index: 0;
}
.alo-mini-mapa[hidden] { display: none; }
.alo-mini-canvas { height: 230px; width: 100%; background: #e9e4dc; }
.alo-mini-ir {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 16px; background: #fff; border-top: 1px solid var(--border);
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid);
  transition: background .25s, color .25s;
}
.alo-mini-ir:hover { background: var(--cream); color: var(--gold-dk); }
.alo-mini-ir svg { width: 14px; height: 14px; color: var(--gold); }

.alo-mini-canvas .leaflet-container { font-family: var(--font-body); background: #e9e4dc; }
.alo-mini-canvas .leaflet-popup-content-wrapper {
  border-radius: 0; border-top: 2px solid var(--gold); padding: 1px;
  box-shadow: 0 14px 36px rgba(46,11,12,.2);
}
.alo-mini-canvas .leaflet-popup-tip { box-shadow: none; }
.alo-mini-canvas .leaflet-popup-content { margin: 11px 13px; font-size: 12px; }
.alo-mini-canvas .leaflet-bar a { border-radius: 0; color: var(--mid); border-bottom-color: var(--border); }
.alo-mini-canvas .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.85); }

/* La chapa del alojamiento: la .rm-pin de los mapas de ruta */
.tc-minipin {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mid); color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(46,11,12,0.35);
}
.tc-minipin svg { width: 14px; height: 14px; }
.tc-minipop-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dk); }
.tc-minipop-t { display: block; font-family: var(--font-head); font-size: 15px; color: var(--dark); margin: 2px 0; }
.tc-minipop-d { display: block; color: var(--gray); }
.tc-minipop-a { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--mid); }

/* ---------------------------------------------------------------------------
   5. Panel de contacto deslizante (móvil y tableta)
   Por debajo de 1024 px el contenido va a una sola columna y el contacto
   quedaba al final, después de la galería, el texto y los servicios: ahí no lo
   encuentra nadie. Se recoge en un panel que sale del borde derecho.
   --------------------------------------------------------------------------- */
.aside-tab, .aside-backdrop, .tc-lodging .aside-cabecera { display: none; }

@media (max-width: 1024px) {
  /* Pestaña fija en el borde derecho, a media altura */
  .aside-tab {
    display: flex; align-items: center; gap: 8px;
    position: fixed; right: 0; top: 50%; transform: translateY(-50%);
    z-index: 1150; cursor: pointer;
    padding: 14px 12px 14px 14px; border: none;
    border-radius: 3px 0 0 3px;
    background: var(--mid); color: #fff;
    box-shadow: -3px 0 14px rgba(46,11,12,.32);
    font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    writing-mode: vertical-rl;
    transition: background .25s, padding-right .25s;
  }
  .aside-tab svg { width: 15px; height: 15px; flex-shrink: 0; }
  .aside-tab:hover, .aside-tab:focus-visible { background: var(--gold-dk); padding-right: 16px; }
  .aside-tab[aria-expanded="true"] { opacity: 0; pointer-events: none; }

  .aside-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1240;
    background: rgba(20, 10, 8, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .aside-backdrop.is-open { opacity: 1; visibility: visible; }

  .tc-lodging .detail-aside {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(390px, 90vw); z-index: 1250;
    margin: 0; padding: 0 20px 32px;
    background: #fff; gap: 18px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -16px 0 44px rgba(46, 11, 12, .24);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.16, .84, .44, 1);
  }
  .tc-lodging .detail-aside.is-open { transform: translateX(0); }

  /* La animación de entrada (tc-base.css) le pone al lateral, en cuanto se ve,
     «transform: none !important»: abierto una vez, el panel ya no volvía a su
     sitio y no había forma de cerrarlo. En panel no se anima la entrada: se
     desliza. */
  .av-anim .tc-lodging .detail-aside,
  .av-anim .tc-lodging .detail-aside.av-in {
    opacity: 1 !important;
    transform: translateX(100%) !important;
    transition: transform .38s cubic-bezier(.16, .84, .44, 1) !important;
  }
  .av-anim .tc-lodging .detail-aside.is-open { transform: translateX(0) !important; }

  .tc-lodging .aside-cabecera {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; position: sticky; top: 0; z-index: 1010;
    margin: 0 -20px 4px; padding: 16px 20px;
    background: #fff; border-bottom: 1px solid var(--border);
  }
  .aside-cabecera-t {
    font-family: var(--font-body); font-size: 10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gray);
  }
  .aside-cerrar {
    background: none; border: 1px solid var(--border); cursor: pointer;
    width: 34px; height: 34px; display: flex; align-items: center;
    justify-content: center; color: var(--mid); flex-shrink: 0;
    transition: border-color .25s, color .25s;
  }
  .aside-cerrar:hover { border-color: var(--gold); color: var(--gold); }
  .aside-cerrar svg { width: 15px; height: 15px; }

  /* Con el panel abierto no se desplaza la página de detrás */
  html.aside-open, body.aside-open { overflow: hidden; }
}

/* La barra de administración tapa la cabecera del panel */
@media (max-width: 1024px) {
  .admin-bar .tc-lodging .detail-aside { top: 32px; }
}
@media screen and (max-width: 782px) {
  .admin-bar .tc-lodging .detail-aside { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-lodging .detail-aside, .aside-backdrop { transition: none; }
}

/* ---------------------------------------------------------------------------
   6. Tarjetas de alojamiento: estrellas junto a la categoría
   --------------------------------------------------------------------------- */
.rc-cat .stars { margin-left: 6px; }
.rc-cat .stars svg { width: 10px; height: 10px; color: var(--gold-lt); }


/* ===========================================================================
   7. Listado de alojamientos (alojamientos.html)
   Las piezas comunes —introducción, filtros, chips, rejilla, paginación— ya
   están en tc-interior.css; aquí las del listado: el mapa con su leyenda, las
   gotas de cada tipo, los grupos, la distancia de la tarjeta y el vacío.
   =========================================================================== */
/* El atributo hidden no puede con el display de .resource-card: el filtro
   oculta tarjetas con él. */
.tc-lodging-list .resource-card[hidden] { display: none !important; }

.rc-title .stars { margin-left: 7px; }

/* Segunda línea de la tarjeta: distancia al centro */
.rc-dist {
  display: flex; align-items: center; gap: 7px; margin: -8px 0 14px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dk);
}
.rc-dist svg { width: 13px; height: 13px; flex-shrink: 0; }

.alo-vacio {
  text-align: center; padding: 56px 24px; color: var(--gray); font-size: 15px;
  border: 1px solid var(--border); background: #fff;
}
.alo-vacio[hidden] { display: none; }

/* Mapa de la introducción: responde a los filtros de abajo */
.alo-mapa-card { border: 1px solid var(--border); background: #fff; position: relative; isolation: isolate; z-index: 0; }
.alo-mapa-card[hidden] { display: none; }
.alo-mapa { height: 300px; width: 100%; background: #e9e4dc; }

/* Leyenda en una tira compacta: la muestra repite el marcador del mapa,
   icono incluido, para reconocerlo sin memorizar colores. */
.alo-leyenda {
  display: flex; flex-wrap: wrap; gap: 5px 12px;
  padding: 10px 16px 8px; background: #fff;
  border-top: 1px solid var(--border);
}
.alo-leyenda span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--mid); line-height: 1.2; white-space: nowrap;
}
.alo-leyenda i {
  width: 16px; height: 16px; border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.alo-leyenda i svg { width: 8px; height: 8px; color: #fff; transform: rotate(45deg); }

/* Marcador de alojamiento: gota con el icono de su tipo */
.alo-pin {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50% 50% 50% 2px; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 2px 7px rgba(46,11,12,.45);
  transition: transform .18s;
}
.alo-pin svg { width: 14px; height: 14px; color: #fff; transform: rotate(45deg); }
.alo-pin:hover { transform: rotate(-45deg) scale(1.14); }

/* Plaza Mayor: referencia, no un alojamiento; se distingue a propósito */
.alo-pin--centro {
  width: 16px; height: 16px; border-radius: 50%; transform: none;
  background: #fff; border: 3px solid var(--mid); box-shadow: 0 1px 5px rgba(46,11,12,.4);
}
.alo-pin--centro:hover { transform: scale(1.12); }

/* Grupos de marcadores, con la paleta del sitio en vez de las burbujas azules
   de la hoja por omisión del plugin (que no se carga). */
.alo-grupo {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; border: 2px solid #fff;
  font-family: var(--font-body); font-weight: 700;
  box-shadow: 0 2px 9px rgba(46,11,12,.4);
  background: var(--mid);
}
.alo-grupo--s { width: 32px; height: 32px; font-size: 12px; }
.alo-grupo--m { width: 40px; height: 40px; font-size: 13px; background: #6d2124; }
.alo-grupo--l { width: 50px; height: 50px; font-size: 15px; background: var(--dark); }

.alo-mapa .marker-cluster { background: none; }
.alo-mapa .leaflet-marker-icon { transition: none; }
.alo-mapa.leaflet-container { font-family: var(--font-body); background: #e9e4dc; }
.alo-mapa .leaflet-popup-content-wrapper {
  border-radius: 0; border-top: 2px solid var(--gold); padding: 1px;
  box-shadow: 0 16px 40px rgba(46,11,12,.22);
}
.alo-mapa .leaflet-popup-tip { box-shadow: none; }
.alo-mapa .leaflet-popup-content { margin: 12px 14px; font-size: 12.5px; }
.alo-mapa .leaflet-bar a { border-radius: 0; color: var(--mid); border-bottom-color: var(--border); }
.alo-mapa .leaflet-control-attribution { font-size: 9.5px; background: rgba(255,255,255,.86); }

.alo-pop-k {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-dk); margin-bottom: 4px;
}
.alo-pop-t { display: block; font-family: var(--font-head); font-size: 16px; color: var(--dark); line-height: 1.25; }
.alo-pop-d { display: block; margin-top: 4px; color: var(--gray); }
.alo-pop-a {
  display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dk);
}
.alo-pop-a:hover { color: var(--gold); }

@media (max-width: 1024px) {
  .alo-mapa { height: 280px; }
}
@media (max-width: 600px) {
  .alo-mapa { height: 250px; }
}

/* La barra de filtros del tema tiene cinco huecos (buscador, tres
   desplegables y botón). El listado de alojamientos lleva dos desplegables, y
   el botón caía en el hueco de un desplegable y se estiraba a su ancho. El
   diseño (alojamientos.html) la deja en cuatro, con el botón a su tamaño.
   Solo en escritorio: por debajo manda el responsive de tc-interior.css, que
   apila los campos. */
@media (min-width: 1025px) {
  .tc-lodging-list .filter-bar { grid-template-columns: 1.7fr 1fr 1fr auto; }
}