/* El sitio publico (lo que ve el huesped), pensado primero para el celular. Los colores del hotel llegan como
 * variables (--hotel-barra, --hotel-boton, --hotel-boton-texto) desde el layout; el resto es neutro. */
:root { --pub-texto: #1b2230; --pub-gris: #5b6472; --pub-borde: #e3e6eb; --pub-fondo: #f5f6f8; --pub-ok: #1d7a4f; --pub-alerta: #b4231a; --pub-amarillo: #f2b13b; }

body.publico { margin: 0; background: var(--pub-fondo); color: var(--pub-texto); font-family: -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; }
.publico a { color: #1f5fbf; }
.publico .contenedor { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.publico h1, .publico h2, .publico h3 { font-weight: 700; line-height: 1.25; color: var(--pub-texto); }
.publico h1 { font-size: 26px; margin: 0; }
.publico h2 { font-size: 20px; margin: 0 0 10px; }
.publico h3 { font-size: 17px; margin: 0 0 4px; }
.publico .nota { font-size: 13px; color: var(--pub-gris); }
.publico .aviso { background: #fff7e6; border: 1px solid var(--pub-amarillo); border-radius: 10px; padding: 12px 16px; margin: 0; }

/* Botones con el color del hotel (si el hotel eligio un color muy claro, el texto igual se lee). */
.botonHotel { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--hotel-boton); color: var(--hotel-boton-texto); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.publico a.botonHotel, .botonHotel:hover { color: var(--hotel-boton-texto); }
.botonHotel:hover { filter: brightness(.93); }
.botonHotel:disabled { opacity: .45; cursor: default; }

/* Cabecera del hotel */
.cabeceraHotel { background: var(--hotel-barra); border-bottom: 1px solid rgba(0,0,0,.08); }
.cabeceraHotel .contenedor { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.cabeceraHotel .marca { display: flex; align-items: center; text-decoration: none; color: inherit; min-height: 44px; }
.cabeceraHotel .logoHotel { max-height: 56px; max-width: 220px; width: auto; }
.cabeceraHotel .nombreMarca { font-weight: 700; font-size: 20px; }
.cabeceraHotel .lema { font-size: 13px; color: rgba(0,0,0,.65); flex: 1 1 200px; }
.cabeceraHotel .idiomas { display: flex; gap: 4px; }
.cabeceraHotel .idiomas a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; color: rgba(0,0,0,.7); background: rgba(255,255,255,.55); }
.cabeceraHotel .idiomas a.activo { background: #fff; color: var(--pub-texto); }

/* La barra de busqueda, como la de Booking: borde amarillo y todo en una fila que se apila en el celular. */
.barraBusqueda { background: #fff; border-bottom: 1px solid var(--pub-borde); }
.barraBusqueda .contenedor { padding-top: 14px; padding-bottom: 14px; }
.buscador { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: #fff7e6; border: 3px solid var(--pub-amarillo); border-radius: 12px; padding: 10px; }
.campoBuscador { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; font-size: 12px; font-weight: 600; color: #3b4352; }
.campoBuscador > span { text-transform: capitalize; }
.campoBuscador.chico { flex: 1 1 90px; }
.campoBuscador input, .campoBuscador select { font: inherit; font-size: 15px; font-weight: 500; padding: 10px 12px; border: 1px solid #d5d9e0; border-radius: 8px; min-height: 44px; background: #fff; color: var(--pub-texto); }
.buscador .botonHotel { flex: 1 1 100%; min-height: 48px; }

/* Encabezado, fotos y presentacion */
.publico .paginaHotel { padding-top: 28px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 20px; }
.encabezadoHotel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; }
.encabezadoHotel .direccion { margin: 4px 0 0; font-size: 14px; color: #3b4352; }
.fotosHotel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 8px; }
.fotosHotel .foto { display: flex; align-items: flex-end; justify-content: flex-end; border-radius: 12px; background: #c9d3e0 center/cover no-repeat; text-decoration: none; }
.fotosHotel .foto-0 { grid-column: span 2; grid-row: span 2; }
.fotosHotel.fotos-1 { grid-template-columns: 1fr; }
.fotosHotel.fotos-1 .foto-0 { grid-column: span 1; }
.fotosHotel.fotos-2, .fotosHotel.fotos-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fotosHotel.fotos-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fotosHotel.fotos-2 .foto-0, .fotosHotel.fotos-3 .foto-0 { grid-column: span 1; }
.fotosHotel.fotos-2 .foto, .fotosHotel.fotos-3 .foto { grid-row: span 2; }
.fotosHotel.fotos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fotosHotel.fotos-4 .foto-0 { grid-column: span 1; grid-row: span 1; }
.fotosHotel .masFotos { margin: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.presentacion { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.descripcionHotel { flex: 999 1 460px; min-width: 0; }
.descripcionHotel .texto { font-size: 15px; line-height: 1.6; color: #2d3544; }
.descripcionHotel .texto img { max-width: 100%; height: auto; }
.subtitulo { margin-top: 14px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d5d9e0; border-radius: 999px; padding: 6px 12px; font-size: 13px; background: #fff; }
.chips li .fa { color: var(--pub-ok); }
.chips.chicas li { padding: 3px 9px; font-size: 12px; }
.tarjetaInfo { flex: 1 1 280px; background: #fff; border: 1px solid var(--pub-borde); border-radius: 12px; padding: 16px; }
.tarjetaInfo p { margin: 0 0 8px; font-size: 14px; }
.tarjetaInfo .destacado { color: var(--pub-ok); font-weight: 600; }

/* Disponibilidad: cada tipo es una tarjeta con su ficha a la izquierda y sus filas (condiciones) a la derecha. */
.disponibilidad { scroll-margin-top: 12px; }
.tituloDisponibilidad .resumenBusqueda { font-size: 15px; font-weight: 400; color: #3b4352; }
.encabezadoTabla { display: none; }
.tipo { background: #fff; border: 1px solid #d5d9e0; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.fichaTipo { padding: 14px; border-bottom: 1px solid var(--pub-borde); }
.fichaTipo .fotoTipo { display: block; height: 150px; border-radius: 10px; background: #c9d3e0 center/cover no-repeat; margin-bottom: 10px; }
.fichaTipo .capacidad { margin: 0 0 8px; font-size: 13px; color: #3b4352; }
.fichaTipo .detalle { margin-top: 8px; font-size: 13px; }
.fichaTipo .detalle summary { cursor: pointer; color: #1f5fbf; }
.fichaTipo .detalle .texto { margin-top: 6px; color: #2d3544; }
.fila { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px; border-bottom: 1px solid var(--pub-borde); }
.fila:last-child { border-bottom: 0; }
.fila.recomendada { background: #f7fbf8; }
.celdaCondicion { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.celdaCondicion .garantia { color: #2d3544; }
.celdaCondicion .garantia .fa { color: var(--pub-gris); width: 14px; }
.celdaCondicion .politica summary { cursor: pointer; color: var(--pub-ok); font-weight: 600; font-size: 13px; }
.celdaCondicion .politica p { margin: 4px 0 0; font-size: 13px; color: #3b4352; white-space: pre-line; }
.etiqueta { display: inline-block; width: fit-content; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.etiqueta.promo { background: #fdecec; color: var(--pub-alerta); }
.etiqueta.recomendado { background: #eaf4ee; color: #17573a; }
.celdaPrecio { display: flex; flex-direction: column; gap: 2px; }
.celdaPrecio .tachado { color: var(--pub-gris); font-size: 13px; }
.celdaPrecio .precio { font-size: 20px; }
.celdaPrecio .quedan { color: var(--pub-alerta); font-size: 13px; font-weight: 600; }
.celdaCantidad label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pub-gris); }
.celdaCantidad select { font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid #b9c1cc; border-radius: 8px; min-height: 44px; min-width: 76px; background: #fff; }

/* La barra con el total, pegada abajo mientras se elige. */
.barraTotal { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #d5d9e0; border-radius: 12px; padding: 12px 16px; box-shadow: 0 -4px 16px rgba(20,30,50,.08); margin-top: 6px; }
.barraTotal > div { display: flex; flex-direction: column; gap: 2px; }
.barraTotal .resumen { font-size: 14px; color: #3b4352; }
.barraTotal .total { font-size: 22px; }
.barraTotal .botonHotel { min-width: 140px; }

/* Los pasos de la reserva (seleccion, datos, pago) en la cabecera. */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(0,0,0,.6); }
.pasos li { display: inline-flex; align-items: center; gap: 6px; }
.pasos li span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: #fff; }
.pasos li.hecho { color: var(--pub-ok); font-weight: 600; }
.pasos li.hecho span { background: var(--pub-ok); border-color: var(--pub-ok); color: #fff; }
.pasos li.actual { color: var(--pub-texto); font-weight: 700; }
.pasos li.actual span { background: var(--hotel-boton); border-color: var(--hotel-boton); color: var(--hotel-boton-texto); }

/* Tus datos: resumen a un lado y el formulario al otro (en el celular, uno debajo del otro). */
.publico .paginaDatos { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.columnaResumen { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.columnaResumen .tarjetaInfo, .columnaFormulario .tarjetaInfo { flex: 0 0 auto; }
.columnaFormulario { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fechasResumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--pub-borde); padding-top: 10px; margin: 10px 0; }
.fechasResumen div { display: flex; flex-direction: column; }
.lineaPrecio { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
/* El importe nunca se parte ("$" en un renglon y el numero en otro): el que se acomoda es el nombre de la habitacion. */
.lineaPrecio > span:first-child { min-width: 0; }
.lineaPrecio > span:last-child { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.lineaPrecio.total { border-top: 1px solid var(--pub-borde); padding-top: 8px; font-weight: 700; font-size: 18px; }
.lineaPrecio.pagoAhora { color: var(--pub-ok); font-weight: 600; }
.avisoRetencion { background: #eaf4ee; border: 1px solid #bfe0cc; border-radius: 10px; padding: 10px 14px; margin: 0; font-size: 14px; color: #17573a; }
.avisoRetencion.aviso { background: #fff7e6; border-color: var(--pub-amarillo); color: var(--pub-texto); }
.formularioDatos .tarjetaInfo { display: flex; flex-direction: column; gap: 12px; }
.formularioDatos h1 { font-size: 22px; margin-bottom: 4px; }
.dosColumnas { display: grid; grid-template-columns: 1fr; gap: 12px; }
.campoDatos { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.campoDatos > span small { font-weight: 400; color: var(--pub-gris); }
.campoDatos input, .campoDatos select, .campoDatos textarea { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid #b9c1cc; border-radius: 8px; min-height: 44px; background: #fff; color: var(--pub-texto); }
.campoDatos textarea { min-height: 80px; resize: vertical; }
.campoDatos small { font-weight: 400; font-size: 12px; color: var(--pub-gris); }
.campoDatos em { display: none; font-style: normal; font-weight: 400; font-size: 12px; color: var(--pub-alerta); }
.campoDatos.conError input, .campoDatos.conError select, .campoDatos.conError textarea { border-color: var(--pub-alerta); }
.campoDatos.conError em { display: block; }
.paraQuien { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.paraQuien legend { font-weight: 600; margin-bottom: 4px; }
.paraQuien label { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.accionesDatos { display: flex; justify-content: flex-end; margin: 20px 0 40px; }
.accionesDatos .botonHotel { min-height: 50px; }

/* El pago: cada medio es una tarjeta con su radio. */
.medios { display: flex; flex-direction: column; gap: 10px; }
.medio { display: flex; gap: 14px; align-items: center; border: 2px solid #d5d9e0; border-radius: 12px; padding: 14px 16px; cursor: pointer; background: #fff; }
.medio.elegido { border-color: var(--hotel-boton); background: #f7f9fd; }
.medio input { width: 18px; height: 18px; flex: 0 0 auto; }
.medio .textoMedio { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.medio .tituloMedio { font-weight: 700; font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.medio .logoMedio { max-height: 28px; max-width: 110px; width: auto; }
.botonSecundario { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid #b9c1cc; border-radius: 8px; background: #fff; color: var(--pub-texto); text-decoration: none; font-weight: 600; font-size: 14px; }
.publico a.botonSecundario { color: var(--pub-texto); }

/* Confirmada / pendiente */
.cartelConfirmada { display: flex; gap: 14px; align-items: flex-start; border-radius: 12px; padding: 18px 20px; background: #eaf4ee; border: 1px solid #bfe0cc; }
.cartelConfirmada.transferencia, .cartelConfirmada.pendiente { background: #fff7e6; border-color: var(--pub-amarillo); }
.cartelConfirmada h1 { font-size: 22px; margin: 0 0 6px; }
.cartelConfirmada p { margin: 0; font-size: 15px; }
.iconoConfirmada { width: 44px; height: 44px; border-radius: 50%; background: var(--pub-ok); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
.cartelConfirmada.transferencia .iconoConfirmada, .cartelConfirmada.pendiente .iconoConfirmada { background: #c47f00; }
.datosReserva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.datosReserva div { display: flex; flex-direction: column; gap: 2px; }
.datosReserva .grande { font-size: 20px; }
.datosReserva .codigo { letter-spacing: 2px; }
.lineaSeparada { border-top: 1px solid var(--pub-borde); margin-top: 12px; padding-top: 10px; }
.lineaSeparada p { margin: 0 0 4px; }
.botonesConfirmada { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cuenta { border: 1px solid var(--pub-borde); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; }
.cartelConfirmada.cancelada { background: #fdecec; border-color: #f0b4b0; }
.cartelConfirmada.cancelada .iconoConfirmada { background: var(--pub-alerta); }
.subtituloComprobante { font-size: 16px; margin: 16px 0 8px; }
.formularioComprobante { display: flex; flex-direction: column; gap: 12px; }
.formularioComprobante input[type=file] { padding: 9px 12px; }
.cancelacion .politicaTexto { font-size: 14px; white-space: pre-line; }
.botonPeligro { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--pub-alerta); border-radius: 8px; background: #fff; color: var(--pub-alerta); font: inherit; font-weight: 600; cursor: pointer; }
.botonPeligro:hover { background: #fdecec; }
.entradaMiReserva { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.entradaMiReserva .tarjetaInfo { display: flex; flex-direction: column; gap: 12px; }

/* Mapa, politicas y pie */
.pieHotel { display: flex; flex-wrap: wrap; gap: 20px; }
.mapa { flex: 2 1 380px; display: flex; flex-direction: column; gap: 6px; }
.mapa iframe { width: 100%; height: 260px; border: 0; border-radius: 12px; background: #dfe7df; }
.piePublico { border-top: 1px solid var(--pub-borde); background: #fff; }
.piePublico .contenedor { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; font-size: 12px; color: var(--pub-gris); }

/* De tablet para arriba: la fila se vuelve tabla (ficha | condicion | precio | cantidad). */
@media (min-width: 768px) {
    .buscador .botonHotel { flex: 0 0 auto; }
    .fotosHotel { grid-auto-rows: 170px; }
    .encabezadoTabla { display: grid; grid-template-columns: 2fr 2.2fr 1.3fr 1fr; background: #2a3a55; color: #fff; font-size: 13px; font-weight: 600; border-radius: 10px 10px 0 0; padding: 10px 14px; gap: 14px; }
    .tipo { display: grid; grid-template-columns: 2fr 4.5fr; border-radius: 0; margin-bottom: 0; border-top: 0; }
    .tipo:first-of-type { border-top: 1px solid #d5d9e0; }
    .tipo:last-of-type { border-radius: 0 0 12px 12px; }
    .fichaTipo { border-bottom: 0; border-right: 1px solid var(--pub-borde); }
    .fichaTipo .fotoTipo { height: 120px; }
    .fila { grid-template-columns: 2.2fr 1.3fr 1fr; gap: 14px; }
    .soloMovil { display: none; }
    .celdaCantidad label { justify-content: flex-start; }
    .barraTotal { margin-top: 12px; }
    .dosColumnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El check-in online: la lista de huespedes, las fotos del documento y la firma. */
.aviso.avisoOk { background: #e6f4ea; border-color: #b7dfc3; color: #1d5a35; }
.listaHuespedes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.listaHuespedes li { display: flex; align-items: center; gap: 12px; border: 1px solid #d5d9e0; border-radius: 10px; padding: 10px 12px; }
.listaHuespedes li.completo { border-color: #b7dfc3; background: #f4faf6; }
.listaHuespedes .estadoHuesped { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef1f5; color: var(--pub-gris); flex: 0 0 auto; }
.listaHuespedes li.completo .estadoHuesped { background: #1d7a4f; color: #fff; }
.listaHuespedes .textoHuesped { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.listaHuespedes .botonHotel, .listaHuespedes .botonSecundario { min-height: 40px; padding: 0 14px; flex: 0 0 auto; }
.fotosDocumento { display: grid; grid-template-columns: 1fr; gap: 14px; }
.campoFoto .miniatura { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid #d5d9e0; object-fit: contain; background: #f5f6f8; align-self: flex-start; }
.campoFoto .cargada { color: #1d7a4f; font-weight: 600; }
.campoFoto input[type=file] { padding: 9px 10px; }
.campoHora input { max-width: 180px; }
.firma { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.firma canvas { width: 100%; max-width: 600px; height: auto; aspect-ratio: 600 / 220; border: 1px dashed #9aa3b1; border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.formularioFirma h2 { margin-top: 6px; }
.avisoFalta { color: var(--pub-alerta); }
.accionesDatos { gap: 10px; }
@media (min-width: 600px) { .fotosDocumento { grid-template-columns: 1fr 1fr; } }

/* Los textos que carga el hotel llegan con saltos de linea (antes <br/>). */
.textoDelHotel { white-space: pre-line; }

/* El almanaque del buscador, como el de Booking: un solo campo "entrada — salida"; en la compu, dos meses en
 * un panel flotante con flechas; en el celular, una hoja a pantalla completa con los meses uno abajo del otro.
 * Entrada y salida van con el color del boton del hotel y el rango con ese mismo color muy aclarado. */
.campoFechas { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 2 1 260px; min-width: 0; font-size: 12px; font-weight: 600; color: #3b4352; }
.etiquetaFechas { text-transform: none; }
.disparadorFechas { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d5d9e0; border-radius: 8px; background: #fff; color: var(--pub-texto); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.disparadorFechas svg { flex: 0 0 auto; color: var(--pub-gris); }
.disparadorFechas .textoFechas { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campoFechas.abierto .disparadorFechas, .disparadorFechas:focus-visible { border-color: #1f5fbf; box-shadow: 0 0 0 1px #1f5fbf; outline: 0; }

.almanaque { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 680px; max-width: calc(100vw - 32px); background: #fff; color: var(--pub-texto); border-radius: 10px; box-shadow: 0 4px 24px rgba(20,30,50,.22); padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; font-weight: 400; }
.almanaque[hidden] { display: none; }
.almanaqueCabecera, .almanaqueSemana.fija, .almanaqueListo { display: none; }
.almanaqueCuerpo { position: relative; }
.almanaqueMeses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.almanaqueNombreMes { text-align: center; font-weight: 700; font-size: 16px; line-height: 36px; margin-bottom: 6px; }
.almanaqueSemana { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; font-weight: 600; color: var(--pub-gris); text-align: center; padding-bottom: 4px; }
.almanaqueDias { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.almanaqueFlecha { position: absolute; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--pub-texto); font-size: 26px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.almanaqueFlecha:hover { background: #f0f2f5; }
.almanaqueFlecha:disabled { visibility: hidden; }
.almanaqueFlecha.anterior { left: -4px; }
.almanaqueFlecha.siguiente { right: -4px; }

.dia { height: 40px; border: 0; margin: 0; padding: 0; background: transparent; color: var(--pub-texto); font: inherit; font-size: 14px; border-radius: 6px; cursor: pointer; position: relative; }
.dia:hover:not(:disabled) { background: #eef1f5; }
.dia:focus-visible { outline: 2px solid #1f5fbf; outline-offset: -2px; }
.dia:disabled { color: #b9bfc8; cursor: default; }
.dia.hoy { font-weight: 700; }
.dia.hoy::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dia.enRango, .dia.enRango:hover:not(:disabled) { background: #e8f0fe; background: color-mix(in srgb, var(--hotel-boton) 14%, #fff); border-radius: 0; }
.dia.inicio, .dia.fin, .dia.inicio:hover:not(:disabled), .dia.fin:hover:not(:disabled) { background: var(--hotel-boton); color: var(--hotel-boton-texto); font-weight: 700; }
.dia.inicio.conRango { border-radius: 6px 0 0 6px; }
.dia.fin { border-radius: 0 6px 6px 0; }
.dia.fin.previa { background: color-mix(in srgb, var(--hotel-boton) 70%, #fff); }
.dia.lejos { color: #b9bfc8; cursor: not-allowed; }
.dia.lejos:hover { background: transparent; }

.almanaquePie { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--pub-borde); padding-top: 10px; font-size: 14px; }
.almanaqueResumen { color: var(--pub-gris); }
.almanaqueResumen.avisoAlmanaque { color: var(--pub-alerta); font-weight: 600; }

/* En el celular: hoja a pantalla completa, los dias de la semana fijos arriba y el boton abajo. */
@media (max-width: 767px) {
    body.almanaqueAbierto { overflow: hidden; }
    .almanaque { position: fixed; inset: 0; width: auto; max-width: none; border-radius: 0; box-shadow: none; padding: 0; gap: 0; z-index: 1000; }
    .almanaqueCabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--pub-borde); font-size: 17px; }
    .almanaqueCerrar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--pub-texto); font-size: 28px; line-height: 1; cursor: pointer; }
    .almanaqueSemana.fija { display: grid; padding: 8px 16px; border-bottom: 1px solid var(--pub-borde); }
    .almanaqueSemana.delMes, .almanaqueFlecha { display: none; }
    .almanaqueCuerpo { flex: 1; min-height: 0; display: flex; }
    .almanaqueMeses { flex: 1; display: block; overflow-y: auto; padding: 0 16px 16px; -webkit-overflow-scrolling: touch; }
    .almanaqueMes { padding-top: 14px; }
    .almanaqueNombreMes { text-align: left; }
    .dia { height: 46px; font-size: 16px; }
    .almanaquePie { flex-direction: column; align-items: stretch; padding: 10px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px rgba(20,30,50,.08); text-align: center; }
    .almanaqueListo { display: inline-flex; width: 100%; }
}

/* La galeria de fotos a pantalla completa, como la de Booking: fondo oscuro, foto entera, flechas a los
 * costados, contador arriba y miniaturas abajo (en el celular se pasa deslizando). */
body.galeriaAbierta { overflow: hidden; }
.fichaTipo .fotoTipo { display: flex; align-items: flex-end; justify-content: flex-end; text-decoration: none; }
.fichaTipo .fotoTipo .masFotos { margin: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.galeria { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: rgba(12,14,18,.96); color: #fff; }
.galeria[hidden] { display: none; }
.galeriaCabecera { display: flex; align-items: center; gap: 14px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
.galeriaTitulo { flex: 1; min-width: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeriaContador { font-size: 14px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.galeriaCerrar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.galeriaCerrar:hover { background: rgba(255,255,255,.2); }
.galeriaEscenario { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 64px; touch-action: pan-y; }
.galeriaFoto { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; user-select: none; }
.galeriaFlecha { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: #1b2230; font-size: 32px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.galeriaFlecha.anterior { left: 12px; }
.galeriaFlecha.siguiente { right: 12px; }
.galeriaFlecha[hidden] { display: none; }
.galeriaCerrar:focus-visible, .galeriaFlecha:focus-visible, .galeriaMiniaturas button:focus-visible { outline: 3px solid #8ab4ff; outline-offset: 2px; }
.galeriaMiniaturas { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); justify-content: safe center; }
.galeriaMiniaturas[hidden] { display: none; }
.galeriaMiniaturas button { flex: 0 0 auto; width: 84px; height: 60px; border: 2px solid transparent; border-radius: 6px; background: #333 center/cover no-repeat; opacity: .55; cursor: pointer; padding: 0; }
.galeriaMiniaturas button:hover { opacity: .85; }
.galeriaMiniaturas button.activa { opacity: 1; border-color: #fff; }
.fotosHotel .foto, .fichaTipo .fotoTipo { cursor: zoom-in; }
@media (max-width: 767px) {
    .galeriaEscenario { padding: 0; }
    .galeriaFoto { border-radius: 0; }
    .galeriaFlecha { width: 40px; height: 40px; font-size: 26px; background: rgba(255,255,255,.85); }
    .galeriaFlecha.anterior { left: 8px; }
    .galeriaFlecha.siguiente { right: 8px; }
    .galeriaMiniaturas button { width: 64px; height: 46px; }
}

/* Pago con tarjeta (PayWay). */
.medio .logoPayWay { height: 18px; }
.camposTarjeta { grid-template-columns: 1fr 1fr; }
.vencimiento { display: flex; align-items: center; gap: 6px; }
.vencimiento input { width: 4.5em; text-align: center; }

/* La fila de una promo atada a un medio de pago (pagando por transferencia / con otro medio). */
.medioDeLaFila { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--pub-ok); }
.fila:has(.medioDeLaFila .fa-credit-card) .medioDeLaFila { color: var(--pub-gris); }

/* Los datos del hotel en un acordeon (fotos, descripcion, servicios, lo importante). */
.infoHotel { border: 1px solid var(--pub-borde); border-radius: 12px; background: #fff; }
.infoHotel > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: 16px; }
.infoHotel > summary::-webkit-details-marker { display: none; }
.infoHotel > summary .iconoInfo { font-size: 22px; vertical-align: -2px; margin-right: 4px; color: #2a3a55; }
.infoHotel > summary .desplegar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.infoHotel > summary .desplegar .nota { font-size: 12px; font-weight: 400; }
.infoHotel > summary .ocultar, .infoHotel[open] > summary .verMas { display: none; }
.infoHotel[open] > summary .ocultar { display: inline; }
.infoHotel > summary .flecha { transition: transform .2s; color: var(--pub-gris); }
.infoHotel[open] > summary .flecha { transform: rotate(180deg); }
.infoHotel .cuerpoInfoHotel { display: flex; flex-direction: column; gap: 20px; padding: 0 16px 16px; }

/* Encabezado de la pagina del hotel: logo, nombre con el lema chico al lado, direccion; los idiomas a la derecha. */
.encabezadoHotel { align-items: center; }
.identidadHotel { display: flex; align-items: center; gap: 14px; min-width: 0; }
.identidadHotel .logoHotel { height: 56px; width: auto; max-width: 140px; object-fit: contain; display: block; }
.identidadHotel h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.identidadHotel h1 .lema { font-size: 13px; font-weight: 400; color: var(--pub-gris); }
.encabezadoHotel .idiomas { display: flex; gap: 4px; }
.encabezadoHotel .idiomas a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--pub-gris); background: #fff; border: 1px solid var(--pub-borde); }
.encabezadoHotel .idiomas a.activo { color: var(--pub-texto); border-color: var(--pub-texto); }
@media (max-width: 767px) { .identidadHotel .logoHotel { height: 44px; max-width: 96px; } }

/* El encabezado del hotel vuelve a la franja de arriba (color del hotel), sobre el buscador. */
.cabeceraHotel .encabezadoHotel { flex: 1 1 100%; }
.cabeceraHotel .identidadHotel h1 .lema { flex: 0 1 auto; color: rgba(0,0,0,.6); }
.serviciosHotel { flex: 0 0 auto; }
.serviciosHotel h2 { margin-top: 0; }