@charset "utf-8";
/*
MASCARA DE RESERVAS — CALENDARIO Y POP-UP DE OCUPACION
La maqueta solo traia los campos de la mascara (#searchForm, en
fenix-sevilla-hotel.css y skeleton.css). El calendario y el pop-up de
huespedes son piezas NUEVAS: se visten aqui con el mismo lenguaje visual
de la mascara (blanco, radio 4px, sombra 0 4px 32px rgba(0,0,0,.16),
texto #1A1A1A, separadores #CFCFD2, acento oro #F4C670).
DOS ESCOPADOS DISTINTOS, y el motivo importa:
- El pop-up de ocupacion vive DENTRO de la mascara: va bajo #searchForm.
- El calendario NO: Litepicker lo cuelga del porque
booking-calendar.js NO usa parentEl (su rama parentEl tiene la deteccion
de desborde rota; el detalle esta en la nota 1 de la cabecera de ese
modulo). Se estila por la clase bookingCalendar que le anade el modulo.
Y se escribe .litepicker.bookingCalendar, con las dos clases ENCADENADAS, a
proposito: Litepicker inyecta su hoja como PRIMER elemento del , antes
de nuestros . Con .bookingCalendar a secas empatariamos en
especificidad con sus reglas base (.litepicker .container__days .day-item) y
ganariamos solo por orden de documento, una carta que se cae sola el dia que
cambie el orden de carga. Encadenando las dos clases sumamos una clase mas
que cualquier regla equivalente suya y ganamos por especificidad.
De ahi que los estados del rango (is-start-date / is-end-date / is-in-range)
tengan su propio selector mas abajo: sin el, nuestra regla base del dia
taparia los estados de la libreria y el rango se quedaria sin color.
El anillo de foco es #1A1A1A y no el oro #F4C670: sobre blanco el oro se
queda en 1,7:1 y un indicador de foco necesita 3:1 (WCAG 1.4.11).
La utilidad .d-none con la que los dos modulos JS ocultan el pop-up y la
fila de edades NO se redefine aqui: la aporta Bootstrap
(css/third-party/bootstrap.min.css, .d-none { display: none !important })
y ademas ganaria por !important a cualquier regla propia.
*/
/* #Calendario (Litepicker)
================================================== */
/* Litepicker inyecta su propio CSS base; aqui solo se re-viste. Sus variables
custom se declaran en el contenedor y las heredan los dias.
UNIDADES. Este bloque nacio en px computados porque se ajusto contra el
navegador y no contra la maqueta, y era el unico sitio del tema que no
escalaba al ampliar la tipografia del navegador (WCAG 1.4.4). Toda medida de
diseno pasa aqui a rem, segun el contrato de unidades de
fenix-sevilla-hotel.css.
El numero en rem sale de dividir el px COMPUTADO entre 12, que es exactamente
lo mismo que dividir el px de maqueta entre 16: la raiz computa 12px
(html{font-size:75%}), asi que px_computado/12 == (px_computado/0,75)/16. No
son dos criterios distintos, es el mismo con la palanca ya aplicada.
Seis decimales y SIEMPRE redondeando hacia arriba (32px -> 2.666667rem, nunca
2.666666) para que el computado caiga por encima del valor exacto: el motor
de layout cuantiza a 1/64 de px hacia abajo, y 2.666666rem daria 31,999992px,
que baja a 31,984375 y encoge la celda.
Se quedan en px, por ser de las constantes funcionales que el contrato
excluye: la sombra, el hairline del dia de hoy, el anillo de foco y el area
tactil de las flechas de mes (el motivo, en su propia regla mas abajo). */
.litepicker.bookingCalendar {
--litepickerDayWidth: 2.666667rem;
/* HAY QUE RE-DERIVAR EL ANCHO DEL MES EN ESTE MISMO AMBITO. La libreria declara
en :root las dos variables:
--litepickerDayWidth: 38px;
--litepickerMonthWidth: calc(var(--litepickerDayWidth) * 7);
y el calc se resuelve DONDE SE DECLARA, es decir en :root con los 38px
originales -> 266px. Bajar el dia a 2.666667rem (32px) aqui no re-evalua esa
derivada: los descendientes siguen heredando 266px. Y en 266px caben OCHO
columnas de 32, asi que la rejilla pintaba 8 dias por fila frente a 7
cabeceras y ningun numero caia debajo de su dia de la semana (medido:
cabeceras de 224px empezando en x=121, rejilla de 266px empezando en x=100).
Pasar el dia a rem NO rompe esta derivada, y ademas es lo que mantiene la
rejilla cuadrada al ampliar el texto: ancho de mes y ancho de dia salen de
la MISMA variable, asi que 7 columnas siguen midiendo exactamente el ancho
del mes sea cual sea la raiz. Verificado al 100% y al 200%: 7 dias por fila
bajo 7 cabeceras, y ancho de mes == 7 x ancho de dia en ambas. */
--litepickerMonthWidth: calc(var(--litepickerDayWidth) * 7);
--litepickerDayColor: #1A1A1A;
--litepickerDayColorHover: #1A1A1A;
--litepickerDayIsTodayColor: #1A1A1A;
--litepickerDayIsLockedColor: #999999;
--litepickerDayIsStartBg: #1A1A1A;
--litepickerDayIsStartColor: #ffffff;
--litepickerDayIsEndBg: #1A1A1A;
--litepickerDayIsEndColor: #ffffff;
--litepickerDayIsInRange: #FDF3E1;
--litepickerMonthHeaderTextColor: #1A1A1A;
--litepickerMonthWeekdayColor: #6D6D6D;
--litepickerMonthButton: #1A1A1A;
--litepickerMonthButtonHover: #F4C670;
font-family: inherit;
font-size: 1rem;
z-index: 5;
}
.litepicker.bookingCalendar .container__main {
padding: 2rem;
background-color: #ffffff;
border-radius: 0.333334rem;
box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16);
}
.litepicker.bookingCalendar .container__months {
box-shadow: none;
}
.litepicker.bookingCalendar .container__months .month-item-header div {
font-size: 0.75rem;
color: #1A1A1A;
font-weight: 600;
line-height: 0.75rem;
text-transform: uppercase;
}
.litepicker.bookingCalendar .container__months .month-item-header div > .month-item-name,
.litepicker.bookingCalendar .container__months .month-item-header div > .month-item-year {
font-weight: 600;
}
/* WCAG 2.5.8 - las flechas de mes de Litepicker vienen a 21x22, por debajo del
minimo de 24x24 del objetivo tactil. Se agranda SOLO el area interactiva via
padding: el boton no tiene fondo ni borde, y su cabecera reserva 42px de alto
para una flecha de 22 (20px de aire) y 47px libres hasta el nombre del mes,
asi que el icono no se mueve ni desplaza nada. El tamano del SVG lo fija la
propia libreria y no se toca.
ESTAS DOS MEDIDAS SE QUEDAN EN px aunque el resto del calendario pase a rem, y
no es un olvido. Son las dos caras de un minimo tactil, que el contrato de
unidades de fenix-sevilla-hotel.css excluye expresamente de la palanca: el
minimo de 2.5.8 esta definido en px CSS, asi que expresarlo en rem lo dejaria
por debajo de 24 en cuanto alguien bajase la raiz. Medido: 25x24, justo en el
minimo, sin margen que perder por un redondeo.
Ademas el margen de abajo compensa un desbordamiento de 2px que NO es
proporcional al padding (depende del alto natural de la cabecera), asi que en
rem la compensacion solo cuadraria a la raiz actual. En px cuadra siempre. */
.litepicker.bookingCalendar .container__months .month-item-header .button-previous-month,
.litepicker.bookingCalendar .container__months .month-item-header .button-next-month {
padding: 4px 7px;
/* El margen negativo devuelve al FLUJO el alto que suma el padding: sin el,
la caja de 24 estiraba la cabecera de 42 a 44px y bajaba la rejilla de dias
2px. Asi el area interactiva crece pero el layout no se mueve. */
margin: -1px 0;
}
.litepicker.bookingCalendar .container__months .month-item-weekdays-row > div {
width: 2.666667rem;
height: 2.666667rem;
/* Mismo caso que los dias: anular el padding de la libreria y dar line-height
igual al alto, o la etiqueta queda 4px por encima del centro de su columna
(medido) y no alinea con la rejilla de numeros que encabeza. */
padding: 0;
font-size: 0.6875rem;
color: #6D6D6D;
font-weight: 600;
line-height: 2.666667rem;
text-transform: uppercase;
}
.litepicker.bookingCalendar .container__days > div,
.litepicker.bookingCalendar .container__days > a {
width: 2.666667rem;
height: 2.666667rem;
}
.litepicker.bookingCalendar .container__days .day-item {
min-width: 2.666667rem;
width: 2.666667rem;
height: 2.666667rem;
/* El padding: 5px 0 de la libreria HAY QUE ANULARLO. Con box-sizing:border-box
deja el area de contenido en 22px, y la linea de 32px arranca 5px mas abajo:
el numero quedaba 5px por debajo del centro de su circulo (medido). Con
padding 0, contenido y line-height valen 32 y el numero centra exacto. */
padding: 0;
border: none;
background-color: transparent;
border-radius: 100%;
font-size: 0.8125rem;
color: #1A1A1A;
font-weight: 600;
line-height: 2.666667rem;
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.litepicker.bookingCalendar .container__days .day-item:hover {
box-shadow: none;
background-color: #F4C670;
color: #1A1A1A;
}
.litepicker.bookingCalendar .container__days .day-item.is-today {
box-shadow: inset 0 0 0 1px #1A1A1A;
}
/* LOS TRES ESTADOS DEL RANGO SE REDECLARAN AQUI A PROPOSITO.
Litepicker los pinta con selectores de cuatro clases
(.litepicker .container__days .day-item.is-start-date), especificidad (0,4,0),
que LEEN las variables --litepickerDayIs* de arriba. La regla base de este
modulo (.litepicker.bookingCalendar .container__days .day-item) empata con
ellos en (0,4,0) y gana por orden de documento —su hoja es el primer elemento
del —, asi que dejaba el rango sin fondo y los extremos en negro sobre
blanco. Al anadir la clase de estado al selector propio (0,5,0) se recupera la
cascada por especificidad y sin !important. Los valores siguen saliendo de las
variables: unica fuente de verdad. Van DESPUES de :hover para que el dia
seleccionado conserve su color con el cursor encima, como en cualquier
calendario. */
.litepicker.bookingCalendar .container__days .day-item.is-in-range {
background-color: var(--litepickerDayIsInRange);
border-radius: 0;
}
.litepicker.bookingCalendar .container__days .day-item.is-start-date {
background-color: var(--litepickerDayIsStartBg);
color: var(--litepickerDayIsStartColor);
}
.litepicker.bookingCalendar .container__days .day-item.is-end-date {
background-color: var(--litepickerDayIsEndBg);
color: var(--litepickerDayIsEndColor);
}
.litepicker.bookingCalendar .container__days .day-item.is-locked {
color: #999999;
font-weight: 400;
}
.litepicker.bookingCalendar .container__days .day-item.is-locked:hover {
background-color: transparent;
color: #999999;
}
/* FASE 08 WCAG (2.4.7, antipatron A1 / E-75): anillo INSET, no exterior. La
rejilla del calendario son celdas contiguas de 32x32 SIN gap, asi que un
outline-offset positivo se sale de la celda e invade a las vecinas: medido con
el dia 21 enfocado, su anillo pisaba los rects de 8 dias (13, 14, 15, 20, 22,
27, 28 y 29). Con offset negativo el anillo se dibuja DENTRO de la celda: sigue
viendose igual de bien -2px de #1A1A1A sobre el blanco de la rejilla, 17,4:1-
pero ya no se solapa con nada. */
.litepicker.bookingCalendar .container__days .day-item:focus-visible {
outline: 2px solid #1A1A1A;
outline-offset: -2px;
}
/* #Pop-up de ocupacion
================================================== */
/* El resumen de ocupacion no cabe en el campo, y no es cosa del resumen: el input
mide 142 px utiles y el texto POR DEFECTO de la maqueta ("1 habitacion ·
2 adultos") ya necesita 197 px, asi que la maqueta entregada ya recortaba 55 px.
Con varias habitaciones el texto llega a 372 px. Aqui solo se cambia el corte
seco por puntos suspensivos, que avisa de que hay mas texto; el detalle completo
esta en el pop-up, que es la fuente autorizada. Acortar el resumen (quitar bebes,
abreviar "habitaciones") es una decision de copy, no de maquetacion. */
#searchForm .field.adultschildren .form-control {
text-overflow: ellipsis;
}
/* La mascara vive pegada al borde inferior de la ventana, asi que el pop-up se
abre HACIA ARRIBA desde su campo (.field ya es position:relative). */
#searchForm .guestsPopup {
width: 21.25rem;
padding: 1rem 1.5rem 1.5rem;
background-color: #ffffff;
border-radius: 0.25rem;
box-shadow: 0 0.25rem 2rem 0 rgba(0, 0, 0, 0.16);
position: absolute;
bottom: calc(100% + 1rem);
left: 0;
z-index: 4;
}
/* La X vive en su propia fila: asi no puede solaparse con el boton "Elimina"
de la primera habitacion ni desbordar la tarjeta. */
#searchForm .guestsPopup .guestsHead {
display: flex;
justify-content: flex-end;
margin-bottom: 0.5rem;
}
#searchForm .guestsPopup .guestsClose {
display: flex;
width: 24px;
height: 24px;
padding: 0;
border: none;
background-color: transparent;
border-radius: 0.25rem;
}
#searchForm .guestsPopup .guestsClose:hover {
border-color: transparent;
background-color: transparent;
}
#searchForm .guestsPopup .guestsClose img {
width: 100%;
height: 100%;
transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#searchForm .guestsPopup .guestsClose:hover img {
opacity: 0.6;
}
#searchForm .guestsPopup .guestsClose:focus-visible {
outline: 2px solid #1A1A1A;
outline-offset: 2px;
}
#searchForm .guestsPopup .roomsBox {
max-height: 16.25rem;
padding-right: 0.375rem;
overflow-y: auto;
}
#searchForm .guestsPopup .roomsBox::-webkit-scrollbar {
width: 0.125rem;
}
#searchForm .guestsPopup .roomsBox::-webkit-scrollbar-track {
background-color: #CFCFD2;
border-radius: 0.625rem;
}
#searchForm .guestsPopup .roomsBox::-webkit-scrollbar-thumb {
background-color: #6D6D6D;
border-radius: 0.625rem;
}
#searchForm .guestsPopup .room {
padding-bottom: 1rem;
border-bottom: 1px solid #CFCFD2;
}
#searchForm .guestsPopup .room + .room {
padding-top: 1rem;
}
#searchForm .guestsPopup .room:last-child {
padding-bottom: 0;
border-bottom: none;
}
#searchForm .guestsPopup .roomHead {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
#searchForm .guestsPopup .roomName {
font-size: 0.75rem;
color: #1A1A1A;
font-weight: 600;
line-height: 0.75rem;
text-transform: uppercase;
}
/* Solo se puede eliminar la ultima habitacion, y nunca la primera: asi el indice
de cada habitacion no cambia y los hidden ages[N] no hay que reindexarlos. */
#searchForm .guestsPopup .room:not(:last-child) .removeRoomBtn,
#searchForm .guestsPopup .room:first-child .removeRoomBtn {
display: none;
}
/* El inline-flex con min-height NO es decoracion: con padding 0 y el
text-box-trim: trim-both que hereda de la regla global de