/* --- Booking (from web.css) --------------------------------------------- */

/* --- Day strip: sticky full-width ---------------------------------------- */
#booking_day_strip_container {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-bg-card);
}
button#people-minus, button#people-plus { min-height: 32px }
.linea-pax-regimen { display: flex; padding: 1.25rem !important;
  margin: 0px 5px 8px 5px !important;
  background: var(--color-bg-card) !important; border: 1px solid var(--color-bg-subtle) !important;
  border-radius: var(--radius-md) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease
}
.booking-header {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 0; margin: 0; color: var(--color-text-inverse)!important;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  background-color: var(--color-text-heading) !important
}
.booking-header__title { padding-bottom: 1rem;
  font-size: 1.25rem; font-weight: var(--font-weight-medium); text-transform: uppercase
}
.booking-step__content { padding: 1rem }
.ui-widget {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  border: none !important;
  -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important
}
div#ui-datepicker-div { background: var(--color-text-body) !important }
div#privacy_policy_container { height: 37vh; overflow: auto; font-size: var(--text-sm); line-height: 16px }
div#nav-0-tab, div#nav-1-tab, div#nav-2-tab, div#nav-3-tab,
div#nav-4-tab, div#nav-5-tab, div#nav-6-tab { min-width: auto }
div#tabs-mobile { padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid var(--color-border-light) }
.ht-booking-time-slot__price div.card-body { font-size: var(--text-lg); font-weight: var(--font-weight-normal); line-height: 18px !important }

@media (max-width: 576px) {
  .linea-pax-regimen { flex-direction: row !important; justify-content: space-between !important }
}
@media (max-width: 767px) {
  .step6-misreservas-btn { margin-top: 10px; color: white; border-radius: var(--radius-lg) }
}

/*******************************
* BOOKING SOAP
*******************************/


/* .modalbox .modal-dialog {
transform: translate(0, 100%) !important;
min-width: 100%;
margin: 0;
transition: var(--transition-slow) !important;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin-top: env(safe-area-inset-top);
} */
#waitingDiv {
width: 1080px;
margin-top: 80px;
margin-bottom: -100px;
text-align: center;
}

.booking-itemcontainer {
text-align: center;
background: none !important;
}

#desc-text>div {
margin-right: 30px !important;
background: var(--color-bg-card) !important;
}

.timetable {
text-align: center;
list-style: none;
}

.timetable-groups {
display: inline-block;
width: 100px;
height: auto !important;
margin: 0;
vertical-align: top;
background: var(--color-bg-card);
}

.people-plus {
display: inline-block;
width: 53px;
height: 53px;
margin-top: -8px;
margin-left: -5px;
font-size: 40px;
line-height: 53px;
vertical-align: middle;
color: var(--color-bg-subtle);
text-align: center;
background: var(--color-text-heading);
border-radius: 0 5px 5px 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.people-minus {
display: inline-block;
width: 53px;
height: 53px;
margin-top: -8px;
margin-right: -5px;
margin-left: 5px;
font-size: 40px;
line-height: 53px;
vertical-align: middle;
color: var(--color-bg-subtle);
text-align: center;
background: var(--color-text-subtle);
border-radius: 5px 0 0 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#total-price,
#summary-total-price {
text-align: right;
background: 0;
border: 0;
}

#total-price-decimals {
width: 30px;
margin-top: 2px;
margin-right: 6px;
font-size: 0.9rem;
text-align: right;
background: 0;
border: 0;
}

#total-discount {
margin-right: 6px;
color: var(--color-danger);
text-align: right;
background: 0;
border: 0;
}

#total-no-discount {
text-align: right;
background: 0;
border: 0;
}

#total-selected-date {
text-align: right;
background: 0;
border: 0;
}

.booking-groups-checkbox {
position: relative;
/* display: block; */
margin: 0 1px;
line-height: 2;
background-color: var(--color-bg-body);
border: 1px solid var(--color-border);
}

div.booking-description * {
width: 100% !important;
font-size: var(--text-sm) !important;
text-align: left !important;
white-space: initial;
}

.booking-daterange-checkbox {
display: block;
background-image: url("../..//assets/images/booking-unchecked.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.booking-date-one {
float: left;
}

.booking-date-range {
float: left;
}

.booking-MaintenanceMode {
margin-top: 30px;
font-size: var(--text-2xl);
font-weight: bolder;
color: black;
text-align: center;
}

.booking-step3-item-description-title-date {
width: 180px;
margin-top: 3px;
font-weight: bold;
}

.product-button-ticket {
float: left;
width: 100%;
height: 131px;
background-color: var(--color-text-inverse);
background-position-x: center;
background-position-y: center;
background-size: cover;
border: 1px solid var(--color-text-muted);
}

.product-button-ticket.bookingcat-full {
opacity: 0.8;
filter: blur(2px);
}

.bookingcat-full-text {
position: absolute;
top: 50%;
display: flex;
width: 100%;
padding: 15px 10px;
font-size: var(--text-2xl);
color: white;
background-color: #ff00006b;
transform: translateY(-33%);
}

/* Alberto */
.mbsc-align-center {
text-align:left !important; 
}
#signature_required_modal{
max-height: 60%;
margin-bottom: 40px; 
}

.signature_container {
height:60% !important;
margin-top: 0px !important;
}
/* Alberto */

@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}

@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}

@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 100px #7ac142;
}
}/*
Created on : Oct 19, 2015, 1:23:32 PM
Author : asap
*/

/* ADS */

.carrousel_inner ul li {
float: left;
width: 225px;
height: 280px;
margin: 0;
list-style: none;
}

.carrousel_inner ul {
width: 10000px;
height: 310px;
padding: 0;
margin: 0;
overflow: hidden;
}

.carrousel_inner {
/* border:1px solid red; */
float: left;
width: 938px;
height: 310px;
margin-top: 12px;
overflow: hidden;
}

.carrousel_left {
float: left;
width: 50px;
height: 340px;
margin-right: 10px;
margin-left: 10px;
background: url(../assets/images/left-location.png) no-repeat center center;
}

.carrousel_right {
float: left;
width: 50px;
height: 340px;
margin-right: 10px;
margin-left: 10px;
background: url(../assets/images/right-location.png) no-repeat center center;
}


/* FORM STEPS POINTS */

#card-header i#check_icon {
display: block;
width: 19px;
height: 19px;
padding: 0px;
margin: 0px;
font-size: 18px;
}

.ui-widget-content {
color: black;
}

.ui-keyboard-button {
min-width: 3em;
height: 3em;
}


/*
.webui-popover-content {
left: 5px !important;
top: 220px !important;
width: auto !important;
height: auto !important;
margin: 0 auto !important;
background-color: green;

}

.closewindow {
position: relative;
float: right;
top: 5px;
margin-right: 2px;

height: 40px;
width: 40px;
cursor: pointer;
margin-bottom: 20px;
}
*/


/*
.loadingbooking {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url('../assets/images/ajaxloading2.gif') 50% 50% no-repeat rgb(249,249,249);
}


.ui-keyboard {
	font-size: 1.2em !important;
}
*/


/*
#step1 > div:nth-child(1) {
width:60%;
margin-left: 20%;
text-align: center;
height:25px;
margin-top:50px;
font-size: var(--text-2xl);
-webkit-border-radius: var(--radius-sm);
-moz-border-radius: var(--radius-sm);
border-radius: var(--radius-sm);
background-color:#009CDD;
padding: 10px 10px 10px 10px;
font-weight: bold;
};*/

.dialog-daterange {
display: none;
}

.dialog-requieredfields {
display: none;
}

.dialog-regime-error {
display: none;
}

.dialog-regime-message {
display: none;
}

.dialog-save-error {
display: none;
}

.step0 {
width: 1080px;
height: 500px;
}

.step1 {
display: none;
}

.ht-booking-daterange {position: absolute;top: -30px !important;width: 97%;height: 60px;margin-top: auto;}

.ht-booking-maintenance {
margin-top: 30px;
font-size: var(--text-2xl);
font-weight: bolder;
color: black;
text-align: center;
}

.ht-booking-summary__item-title {
position: absolute;
top: 50px;
left: 0px;
width: 180px;
padding-top: 15px;
padding-bottom: 11px;
padding-left: 20px;
margin-top: 3px;
font-size: var(--text-lg);
font-weight: bold;
color: white;
background-color: var(--color-text-muted);
border-bottom: 2px solid var(--color-text-muted);
border-radius: 0 15px 15px 0;
}

.step3-product-title {
font-size: var(--text-2xl);
line-height: 7px;
}

input#input_carid {
z-index: 1;
width: 100%;
color: var(--color-text-inverse);
text-align: center;
background: none;
border: none;
}

ul.timetableslist {
padding-inline-start: 0px;
margin: 0px;
margin-block-start: 0px;
}

div#step3-product {
font-size: var(--text-base);
}

.ul-regime-options {
margin: 9px 0;
}


.ht-booking-product__image {
float: left;
width: 280px;
height: 280px;
margin: 9px;
background-color: var(--color-text-inverse);
background-position-x: center;
background-position-y: center;
background-size: cover;
border-radius: var(--radius-sm);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.timetable-seats-available {
font-size: medium;
color: var(--color-text-body);
}

.form-label-text {
color: var(--color-text-subtle);
}

.res-top-title {
padding-bottom: 3px;
margin-top: 0px;
font-size: var(--text-xl);
color: var(--color-text-subtle);
text-align: center;

}

.div_summary_info {
position: absolute;
margin-top: -5px;
margin-left: 437px;
}

.formsubmit {
position: relative;
top: -70px;
float: right;
display: flex;
margin-right: 25px;
}

.b-reservation {
z-index: 99999;
display: inline;
}

.b-pay-reception {
z-index: 99999;
display: inline;
}

.b-pay-creditcard {
z-index: 99999;
display: inline;
}

.waitingDiv {
position: absolute;
margin-top: -150px;
}

.creditcard-orientation {
position: absolute;
}

.step6 {
display: none;
}

.formnext {
display: block;
margin-top: 54px;
margin-left: 885px;
}

.cardid-animation-container {
text-align: center;
}


.bg-booking-restaurant {
height: 1221px;
background-image: url('/assets/images/bg-restaurant-reservations.jpg');
background-position: center;
background-size: cover;
}

span#show_currency {
/* line-height: 1; */
margin: auto;
}


/* --- Upsellings & Timetables (Migrated from web.css) --- */

/* Upsellings Modal Scroll Fixes */
#modal-upsellings.ht-modal-full,
#modal-upsellings.ht-modal-glass-full {
padding-right: 0 !important;
}

#modal-upsellings .modal-dialog {
width: 100%;
max-width: 100%;
height: 100vh;
margin: 0;
}

#modal-upsellings .modal-content {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 0;
border-radius: 0;
/* Prevent body scroll */
}


#modal-upsellings .modal-body {
flex: 1 1 auto;
padding: 5px 0;
/* Grow to fill space */
overflow-y: auto !important;
/* Enable scroll */
-webkit-overflow-scrolling: touch;
}

#modal-upsellings .ht-modal-footer {
  flex: 0 0 auto;
}
div#modal-upsellings .ht-modal-header {
  padding: 10px;
  background-color: var(--color-text-inverse)c2;
}
/* Custom Card Styles for Upselling */
.upselling-card-custom {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
margin-bottom: 15px;
overflow: hidden;
background: var(--color-bg-card);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: var(--transition-fast);
}

.upselling_card-img-box {
    position: relative;
  height: 190px;
    /* CAMBIOS AQUÍ */
    padding: 10px;
  background-color: var(--color-bg-subtle);
  background-repeat: space;
    background-position: center;
    /* Este será tu "margen" interno */
    background-origin: content-box;
    background-size: contain;
    border-radius: var(--radius-sm);
    background-blend-mode: darken;
}

.upselling_card-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 12px;
}

.upselling_card-title {
margin-bottom: 6px;
font-size: 1rem;
font-weight: var(--font-weight-bold);
line-height: 1.2;
}

.upselling_card-prod-descp {
    /* Limitamos a 3 líneas para que no se vea eterno */
    display: -webkit-box;
    margin-bottom: 12px;
    overflow: hidden;
    -webkit-line-clamp: 3;
  font-size: 0.85rem;
    line-height: 1.4;
  color: var(--color-text-subtle);
    -webkit-box-orient: vertical;
    ;
  }
  
  /* FIN BOOKING PAGE MOVIL */

  /* Upselling Compact Mode (>2 items): horizontal card layout */
  .upselling-compact .upselling-card-custom {
    flex-direction: row;
    align-items: center;
    padding: 8px;
  }

  .upselling-compact .upselling_card-img-box {
    width: 80px;
    min-width: 80px;
    height: 80px;
    padding: 6px;
    border-radius: var(--radius-sm);
  }

  .upselling-compact .upselling_card-body {
    flex: 1;
    min-width: 0;
    padding: 0 10px;
  }

  .upselling-compact .upselling_card-title {
    margin-bottom: 2px;
    font-size: 0.9rem;
  }

  .upselling-compact .upselling_card-prod-descp {
    margin-bottom: 4px;
    -webkit-line-clamp: 2;
    font-size: 0.8rem;
  }

  .upselling-compact .price-section {
    margin-top: 0;
  }

  .upselling-compact .current-price {
    font-size: 0.95rem;
  }

  .upselling-compact .floating-element-container {
    position: relative;
    right: auto;
    bottom: auto;
    padding-right: 4px;
    margin-left: auto;
  }

  .upselling-compact .floating-btn-action {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* UPSELLING MODAL MOVIL */
  #upsellings-container {
    padding: 15px 15px;
    margin-bottom: 100px !important;
  }
  
  #modal-upsellings.show {
    display: flex !important;
  }
  
  .upselling-prod-descp {
    margin-bottom: 30px !important;
    line-height: 16px;
}

.price-section {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}

.prices {
display: flex;
flex-direction: column;
}

.old-price {
font-size: 0.8rem;
color: var(--color-text-muted);
text-align:;
text-decoration: line-through
}

.current-price {
font-size: 1.1rem;
font-weight: var(--font-weight-bold);
color: var(--color-text-heading);
}

.quantity-selector-upselling {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 250px;
/* Constrain width */
}

/* Reuse and refine standardized input styles for this context */
.quantity-selector-upselling .quantity-selector__input {
height: 38px !important;
font-weight: var(--font-weight-semibold);
color: var(--color-text-heading);
text-align: center;
/* Match standard button height */
border-color: var(--color-border) !important;
}

.quantity-selector-upselling .quantity-selector__button {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background-color: var(--color-bg-card);
border: 1px solid var(--color-border);
}

.quantity-selector-upselling .quantity-selector__button:hover {
background-color: var(--color-border);
}



.floating-element-container {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 20;
display: flex;
align-items: center;
justify-content: flex-end;
}

.floating-btn-action {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
font-size: 1.2rem;
color: var(--color-primary);
cursor: pointer;
background: var(--color-bg-card);
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: var(--transition-fast);
}

.floating-btn-action:active {
transform: scale(0.9);
}

.floating-btn-action.bg-success {
color: white !important;
background: var(--color-success) !important;
}

/* Floating Quantity Selector Styling */
.quantity-selector-upselling.floating-selector {
max-width: 140px;
padding: 0px;
overflow: hidden;
background: var(--color-bg-card);
border-radius: var(--radius-lg);
/* Compact */
}

.floating-selector .quantity-selector__input {
width: 40px !important;
height: 38px !important;
font-size: 1rem;
background: transparent !important;
border: none !important;
}

.floating-selector .quantity-selector__button {
width: 36px !important;
min-width: 36px !important;
height: 36px !important;
min-height: 36px !important;
background: transparent;
border: none;
}

.floating-selector .quantity-selector__button:hover {
background: rgba(0, 0, 0, 0.05);
}

.floating-selector .input-group-prepend button {
border-right: 1px solid var(--color-border-light);
}

.floating-selector .input-group-append button {
border-left: 1px solid var(--color-border-light);
}

@keyframes slideUpFade {
from {
opacity: 0;
transform: translateY(10px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

div#step3-date {
padding: 5px 10px;
margin-top: 3px;
}

.booking-description {
padding: 8px 15px !important;
font-size: 0.8em;
}

div#booking-allergens-card {
margin-bottom: 3px;
font-size: var(--text-xs);
}

/* #allergens_buttons column-count removed — HtAllergens handles layout */


/* Estilos de .btn-seats movidos a components/ht-floor-map.css */

.btn-seats #header_locate_resourcetable>.col-12>.badge-dark {
display: none !important;
}

#content_conditions {
min-height: 15vh;
font-size: 0.8rem;
line-height: 1.1rem;
text-align: left;
}

.btn-allergens {
width: 105px;
}


/*******************************
* BOOKING
*******************************/

/* --- Contenedor Principal (Tarjeta) --- */
#resume-tbody {
padding: 10px !important;
margin-top: 20px;
margin-bottom: 42px !important;
overflow: hidden;
background: var(--color-bg-card) !important;
border: 1px solid var(--color-bg-subtle) !important;
border-radius: var(--radius-lg) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
}

/* --- Estilo de cada Fila --- */
#resume-tbody .list-group-item {
display: flex !important;
align-items: center !important;
/* Separador muy tenue */
padding: 10px 10px !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--color-bg-body) !important;
}

#resume-tbody .list-group-item:last-child {
margin-top: 5px;
background-color: var(--color-bg-body) !important;
border-bottom: none !important;
border-radius: var(--radius-sm);
}

/* --- Columna Izquierda (Labels) --- */
#resume-tbody .font-weight-bold {
/* Gris suave */
font-size: 0.8rem !important;
font-weight: var(--font-weight-semibold) !important;
color: var(--color-text-subtle) !important;
text-transform: uppercase;
}

/* --- Columna Derecha (Valores) --- */
#resume-tbody .col-8 {
/* Azul oscuro corporativo */
font-size: 0.8rem !important;
font-weight: var(--font-weight-semibold) !important;
color: var(--color-primary) !important;
text-align: right !important;
}

#resume-tbody .list-group-item:last-child .font-weight-bold {
font-size: 1rem !important;
color: var(--color-primary) !important;
}

#resume-tbody .list-group-item:last-child .col-8 {
/* Verde éxito para el precio final */
font-size: 1.2rem !important;
font-weight: 800 !important;
color: var(--color-success) !important;
}

/* --- Botón "Cambiar" --- */
#button_extra_products .btn-primary {
padding: 4px 12px !important;
font-size: 0.7rem !important;
font-weight: var(--font-weight-bold) !important;
background-color: var(--color-primary) !important;
border: none !important;
border-radius: var(--radius-pill) !important;
box-shadow: 0 4px 8px rgba(26, 26, 63, 0.2);
}

span#button_extra_products .btn {
width: 100px !important;
min-width: 100px !important;
height: 25px !important;
min-height: 25px !important;
}

span#button_extra_products {
text-align: right;
}


#desc-text p {
padding: 5px;
margin: 0px;
font-size: 0.6em;
line-height: 1.4em;
}

#step3-desc p {
padding: 5px;
margin: 0px;
line-height: 1.4em;
}

#desc-text {
max-height: 150px;
}

.step6-booking-finished {
position: relative !important;
width: 100% !important;
height: calc(100vh - 100px) !important;
background: transparent !important;
}
/* 1. Contenedor Principal (Acordeón) */
#acordeon-tabla-precios {
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 2. El Header (La parte que siempre se ve) */
#acordeon-tabla-precios .accordion-header .list-group-item {
  align-items: center;
  padding: 15px 20px !important;
  font-size: var(--text-sm);
  background: transparent;
  border: none;
  transition: background 0.3s;
}

#acordeon-tabla-precios .accordion-header .col-4 {
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

/* 3. Estilo de los "Inputs" (Convertirlos en texto plano) */
#acordeon-tabla-precios input {
  /* Que no parezca editable */
  padding: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text-heading);
  pointer-events: none;
  background: transparent !important;
  border: none !important;
}


#show_currency {
  margin-left: 4px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body);
}

/* 4. El Cuerpo del Desglose (Cuando se abre) */
#tabla-precios {
  background: var(--color-bg-body);
  border-top: 1px solid var(--color-bg-subtle);
}

#tabla-precios .list-group-item {
  padding: 10px 20px !important;
  font-size: 0.9rem;
  background: transparent;
  border: none;
}


/* 5. Icono de la flecha (Opcional si usas Bootstrap) */
.accordion-header .btn::after {
  margin-left: auto;
  /* Icono font-awesome fa-chevron-down */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f107';
  transition: transform 0.3s;
}

.accordion-header .btn:not(.collapsed)::after {
  transform: rotate(180deg);
}

/* =========================================
   CHECK AVAILABILITY PAGE HEADER
   ========================================= */

.check-availability__message {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 16px;
  margin: 10px 15px 30px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.check-availability__message-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 20px;
  color: var(--color-primary, #1D174D);
  background: rgba(29, 23, 77, 0.08);
  border-radius: 50%;
}

.check-availability__message-text {
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--color-text-body);
}

/* Legend */
.check-availability__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}

.ht-cal-legend-item {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-subtle, #64748b);
}

.ht-cal-legend-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ht-cal-legend-today .ht-cal-legend-dot {
  background: var(--color-info, #3b82f6);
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

.ht-cal-legend-unavailable .ht-cal-legend-dot {
  background: var(--color-border-strong);
}

.ht-cal-legend-available .ht-cal-legend-dot {
  background: var(--color-success, #10b981);
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
}

/* Strip sticky bar */
.check-availability__strip-sticky {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--color-bg-card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Results grid */
.check-availability__results {
  padding: 12px 8px;
}

/* Empty state */
.check-availability__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
}

.check-availability__empty-icon {
  margin-bottom: 20px;
  font-size: 52px;
  color: var(--color-border-strong);
}

.check-availability__empty-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-heading);
}

.check-availability__empty-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* =========================================
   AVAILABLE OFFERS CARD (.ht-avail-card)
   ========================================= */

.ht-avail-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-card, #fff);
  border-radius: var(--radius-lg, 24px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
  transition: var(--transition-base, all 0.25s cubic-bezier(0.16, 1, 0.3, 1));
}

.ht-avail-card:hover {
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.12));
  transform: translateY(-4px);
}

/* Media */
.ht-avail-card__media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.ht-avail-card__img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ht-avail-card:hover .ht-avail-card__img {
  transform: scale(1.05);
}

/* Gradient + title overlay */
.ht-avail-card__overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 48px 16px 14px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.82) 0%, transparent 100%);
}

.ht-avail-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  color: var(--color-text-inverse);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ht-avail-card__avail-msg {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.85);
}

.ht-avail-card__avail-msg i {
  flex-shrink: 0;
  font-size: var(--text-sm);
}

/* Status chip */
.ht-avail-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill, 50px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Footer actions */
.ht-avail-card__footer {
  display: flex;
  gap: 8px;
  padding: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Buttons */
.ht-avail-btn {
  display: inline-flex;
  flex: 1;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: var(--radius-sm, 8px);
  transition: var(--transition-fast, all 0.15s cubic-bezier(0.16, 1, 0.3, 1));
}

.ht-avail-btn i {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}

.ht-avail-btn--primary {
  color: var(--color-text-inverse);
  background: var(--color-primary, #1D174D);
  box-shadow: 0 3px 10px rgba(var(--color-primary-rgb, 29, 23, 77), 0.3);
}

.ht-avail-btn--primary:hover {
  color: var(--color-text-inverse);
  background: var(--color-primary-hover, #150f3a);
  box-shadow: 0 5px 14px rgba(var(--color-primary-rgb, 29, 23, 77), 0.42);
  transform: translateY(-1px);
}

.ht-avail-btn--secondary {
  color: var(--color-text-heading, #0f172a);
  background: var(--color-bg-subtle, #f1f5f9);
}

.ht-avail-btn--secondary:hover {
  color: var(--color-text-heading, #0f172a);
  background: var(--color-border);
  transform: translateY(-1px);
}

.ht-avail-btn--disabled {
  flex: 1;
  color: var(--color-text-subtle, #64748b);
  cursor: not-allowed;
  background: var(--color-bg-subtle, #f1f5f9);
  opacity: 0.7;
}

/* Unavailable card */
.ht-avail-card--unavailable .ht-avail-card__img {
  filter: grayscale(40%) brightness(0.82);
}

.ht-avail-card--unavailable:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
  transform: none;
}

/* =========================================
   MODAL ERROR / SESIÓN EXPIRADA (API Auth)
   ========================================= */

/* 1. Tarjeta Principal */
#apiauth_error_modal .modal-content {
  text-align: center;
  background-color: var(--color-text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  /* Centramos todo el contenido */
}

/* 2. Cabecera y "Fake Icon" inyectado por CSS */
#apiauth_error_modal .modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px 10px 24px !important;
  border-bottom: none !important;
}

/* Inyectamos un círculo rojo suave con un signo de exclamación */
#apiauth_error_modal .modal-header::before {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fondo rojo muy pálido */
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  font-family: var(--font-family-body);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-danger);
  content: "!";
  /* Rojo vibrante */
  background-color: var(--color-danger-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.05);
  /* Halo sutil */
}

/* 3. Título ("Upss...") */
#apiauth_error_modal .modal-title {
  width: 100%;
  /* Negro Slate */
  margin: 0 !important;
  font-family: var(--font-family-body) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--color-text-heading) !important;
}

/* 4. Cuerpo del Mensaje */
#apiauth_error_modal .modal-body {
  padding: 0 24px 24px 24px !important;
  font-family: var(--font-family-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-body) !important;
  /* Gris intermedio */
}

/* 5. Footer y Botón */
#apiauth_error_modal .modal-footer {
  display: flex;
  justify-content: center;
  padding: 0 24px 30px 24px !important;
  border-top: none !important;
}

/* Transformamos el '.btn-dark' en una píldora táctil Premium */
#apiauth_error_modal .btn-dark {
  width: 100% !important;
  padding: 14px 24px !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: var(--font-weight-bold) !important;
  /* Negro Luxury */
  color: var(--color-text-inverse) !important;
  background-color: var(--color-text-heading) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  /* Ocupa todo el ancho disponible */
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#apiauth_error_modal .btn-dark:active {
  transform: scale(0.96) !important;
}

/* =========================================
   TARJETA DE CONFIRMACIÓN DE RESERVA (Success Box)
   ========================================= */

/* 1. Contenedor Principal de la Tarjeta */
.ht-booking-success-box {
  padding: 40px 24px 30px 24px !important;
  overflow: hidden;
  /* Mucho aire interior */
  text-align: center;
  background-color: var(--color-text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* 2. Círculo de Éxito (Icono Check) */
.ht-booking-success__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px auto;
  background-color: var(--color-success-soft);
  /* Verde esmeralda muy claro */
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.1);
  /* Halo suave */
}

/* Animación de dibujo del SVG (Tick verde) */
.ht-booking-success-box .checkmark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  stroke: var(--color-success) !important;
  stroke-width: 3;
  /* Verde Esmeralda */
  stroke-miterlimit: 10;
}

.ht-booking-success-box .checkmark__circle {
  fill: none;
  stroke: var(--color-success) !important;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: htStroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.ht-booking-success-box .checkmark__check {
  stroke: var(--color-success) !important;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  transform-origin: 50% 50%;
  animation: htStroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes htStroke {
  100% {
    stroke-dashoffset: 0;
  }
}

/* 3. Título (¡Gracias por su reserva!) */
.step6-booking-title {
  /* Negro Slate */
  margin-bottom: 12px !important;
  font-family: var(--font-family-body) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--color-text-heading) !important;
}

/* 5. Contenedor de Botones (Fix para la estructura anidada) */
.message_confirmation_reservation .row,
.step6-booking-tickets {
  display: flex;
  flex-direction: column;
  /* Apilados en móvil */
  gap: 12px;
  margin: 0 !important;
}

/* Botón Principal: Mis Reservas */
.step6-misreservas-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: var(--font-weight-bold) !important;
  /* Negro Premium */
  color: var(--color-text-inverse) !important;
  text-transform: none !important;
  background-color: var(--color-text-heading) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  /* Quitamos las mayúsculas agresivas */
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.step6-misreservas-btn i {
  padding-right: 8px !important;
  font-size: 20px !important;
}

.step6-misreservas-btn:active {
  transform: scale(0.96) !important;
}

/* Botón Secundario: Imprimir Ticket (Print) */
#print_button {
  display: none !important;
}


/* =========================================
   FIX: ESPACIADO Y JERARQUÍA DE BOTONES
   ========================================= */

/* 4. Mensaje de Confirmación */
.message_confirmation_reservation {
  padding: 0 10px;
  margin-bottom: 0 !important;
  font-family: var(--font-family-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-body) !important;
}

/* 2. Controlamos el espaciado exacto del botón "Mis Reservas" */
.message_confirmation_reservation .row {
  margin-top: 30px !important;
  /* Espacio arriba (separa del texto) */
  margin-bottom: 12px !important;
  /* Espacio abajo (separa del botón Print) */
}

.step6-booking-tickets button#print_button:active {
  transform: scale(0.96) !important;
}
div#check-availibility {
    height: calc(100vh) !important;
}
/* ==========================================================================
   SELECTOR DE FECHAS (DÍA ÚNICO VS RANGO) - PREMIUM UI
   ========================================================================== */

/* 1. Título de la Sección ("Seleccione opción") */
#booking-daterange .content-title {
    margin-bottom: 25px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: var(--color-text-muted) !important; /* Gris elegante */
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border: none !important;
}

/* 2. La "Pastilla" Selectora (Contenedor Flotante) */
#searchinterval {
    /* 1. Estructura y Centrado Perfecto */
    display: flex !important;
    gap: 5px !important;
     /* Se ajusta al tamaño de los textos/botones */
     /* Esto es lo que lo centra horizontalmente */
    
    /* 2. Posicionamiento flotante (hacia arriba) */
    
     
    /* ELIMINADO: left: 6%; -> Esto es lo que rompía tu centrado */
    /* ELIMINADO: display: block; -> Entraba en conflicto con flex */
    
    /* 3. Diseño Premium (Cristal / Sombra) */
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 25px !important;
    margin: 0 12px;
    background: var(--color-bg-card) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
}

/* Limpieza de contenedores internos y cursores */
#searchinterval .col-auto {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important; /* Toda el área es clicable */
}

/* Textos de las opciones */
#searchinterval .align-self-center {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.80rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-primary, #1D174D) !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

/* Línea separadora sutil en el medio */
#searchinterval .booking-date-one {
    padding-right: 20px !important;
    margin-right: 8px !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   HACK UX: CONVERTIR PNGs EN RADIO BUTTONS NATIVOS ANIMADOS
   ========================================================================== */

/* Base del círculo (Oculta la imagen PNG) */
.ht-booking-daterange__checkbox {
    position: relative !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background-color: var(--color-bg-body) !important;
    background-image: none !important; /* Bloquea el PNG del JS */
    border: 2px solid var(--color-border-strong) !important;
    border-radius: 50% !important; /* Círculo perfecto */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    transition: var(--transition-base) !important;
}

/* Estado Seleccionado (Lee el PNG que inyecta el JS) */
span[style*="booking-checked.png"] {
    background-color: var(--color-primary, #1D174D) !important;
    border-color: var(--color-primary, #1D174D) !important;
    box-shadow: 0 4px 12px rgba(29, 23, 77, 0.2) !important;
}

/* El punto blanco de selección (Animado) */
span[style*="booking-checked.png"]::after {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    content: "" !important;
    background: var(--color-bg-card) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes popIn {
    0% { transform: translate(-50%, -50%) scale(0); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Resaltar el texto de la opción activa */
#searchinterval > div:has(span[style*="booking-checked.png"]) + .align-self-center {
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-primary, #1D174D) !important;
}

/* ==========================================================================
   INPUTS DE FECHAS (DESDE / HASTA) - ESTILO MODERNO
   ========================================================================== */

/* Texto explicativo */
#booking_select_date_range p.text-muted {
    margin-bottom: 25px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.9rem !important;
    color: var(--color-text-subtle) !important;
}

/* Contenedor del Input */
.ht-booking-form__wrapper {
    position: relative !important;
}

/* Las Etiquetas (Labels) */
.ht-booking-form__wrapper .form-label {
    display: block !important;
    padding-left: 4px !important;
    margin-bottom: 8px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: var(--color-text-subtle) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Los Campos de Texto */
.ht-booking-form__wrapper .form-control {
    height: auto !important;
    padding: 14px 20px !important;
    font-family: var(--font-family-heading) !important;
    font-size: 1.05rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-text-heading) !important;
    text-align: center !important;
    cursor: pointer !important; /* Indica que abrirá un calendario */
    background: var(--color-bg-subtle) !important; /* Fondo gris-azulado premium */
    border: 2px solid transparent !important;
    border-radius: var(--radius-md) !important; /* Bordes suaves */
    box-shadow: none !important;
    transition: var(--transition-base) !important;
}

/* Estado Foco (Al tocar el input) */
.ht-booking-form__wrapper .form-control:focus,
.ht-booking-form__wrapper .form-control:active {
    outline: none !important;
    background: var(--color-bg-card) !important;
    border-color: var(--color-primary, #1D174D) !important;
    box-shadow: 0 4px 15px rgba(29, 23, 77, 0.12) !important;
}

/* Eliminar estilos por defecto de campos readonly en navegadores móviles */
.ht-booking-form__wrapper .form-control[readonly] {
    opacity: 1 !important;
}
div#booking_date_one {
    margin-top: 20px;
}



/* ==========================================================================
   GRID DE HORARIOS
   ========================================================================== */

/* 1. La Tarjeta */
.timetable-slot {
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important; 
    padding: 12px 8px 8px 8px !important; /* Un poco menos de padding abajo para que la barra quede ajustada */
    
    cursor: pointer !important;
    background: var(--color-bg-card) !important; 
    border: 1px solid var(--color-border) !important; /* Borde sutil */
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: var(--transition-fast) !important;
}

.timetable-slot:hover {
    border-color: var(--color-primary, #1D174D) !important;
    box-shadow: 0 6px 16px rgba(29, 23, 77, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* 2. La Hora */
.timetable-slot__title {
    margin-bottom: 12px !important; /* Espacio para separar de la barra verde */
    font-family: var(--font-family-heading) !important;
    font-size: 1.35rem !important; 
    font-weight: var(--font-weight-bold) !important;
    line-height: 1 !important;
    color: var(--color-text-heading) !important;
}

/* 3. La Barra de Disponibilidad (El nuevo "Footer") */
.timetable-slot__seats {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important; /* Ocupa todo el ancho interior de la tarjeta */
    padding: 2px 0 !important;
    
    color: var(--color-success-hover) !important; /* Verde esmeralda para el texto e icono */

    background: var(--color-success-soft) !important; /* Verde ultra pálido (estilo Tailwind) */
    border-radius: var(--radius-xs) !important; /* Bordes redondeados pero encajando en la tarjeta */
}

.timetable-slot__seats i.material-icons {
    margin: 0 !important;
    font-size: var(--text-base) !important;
}

.timetable-slot__seats strong {
    font-family: var(--font-family-heading) !important;
    font-size: 0.9rem !important;
    font-weight: var(--font-weight-bold) !important;
}

/* ==========================================================================
   ESTADO SELECCIONADO (AL HACER CLIC)
   ========================================================================== */
.timetable-slot.is-selected {
    background: var(--color-primary, #1D174D) !important;
    border-color: var(--color-primary, #1D174D) !important;
    box-shadow: 0 6px 18px rgba(29, 23, 77, 0.2) !important;
    transform: scale(0.97) !important;
}

.timetable-slot.is-selected .timetable-slot__title {
    color: var(--color-text-inverse) !important;
}

.timetable-slot.is-selected .timetable-slot__seats strong,
.timetable-slot.is-selected .timetable-slot__seats i {
    color: var(--color-text-inverse) !important;
}

/* ==========================================================================
   SEMÁFORO DE DISPONIBILIDAD (COLORES DINÁMICOS)
   ========================================================================== */

/* ESTADO: ALTA DISPONIBILIDAD (VERDE) */
.timetable-slot--high-avail .timetable-slot__seats {
    color: var(--color-success-hover) !important;     /* Verde bosque */
    background: var(--color-success-soft) !important; /* Verde ultra pálido */
}

/* ESTADO: ÚLTIMAS PLAZAS (NARANJA) */
.timetable-slot--low-avail .timetable-slot__seats {
    color: var(--color-warning-hover) !important;      /* Naranja quemado / Ámbar */
    background: var(--color-warning-soft) !important;  /* Naranja crema suave */
}

/* ESTADO: AGOTÁNDOSE (ROJO) */
.timetable-slot--critical-avail .timetable-slot__seats {
    color: var(--color-danger) !important;     /* Rojo carmín premium */
    background: var(--color-danger-soft) !important; /* Rojo rosado muy suave */
}

/* AJUSTE PARA EL ESTADO SELECCIONADO: 
   Cuando la tarjeta se pone azul, la barra interior debe ser blanca 
   independientemente del color original para que se lea bien. */
.timetable-slot.is-selected .timetable-slot__seats {
    color: var(--color-text-inverse) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}
/* ==========================================================================
   MODAL DE ADVERTENCIA (OVERCAPACITY) - DISEÑO TOP PREMIUM
   ========================================================================== */

/* 1. Fondo del Modal (Efecto Cristal Desenfocado) */
.ht-modal-auto,
.ht-modal-glass-auto {
    background: rgba(29, 23, 77, 0.2) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}


/* Resaltado de los números */
#warning-seats-count, #warning-pax-count {
    padding: 2px 6px !important;
    font-weight: 800 !important;
    color: var(--color-text-heading) !important;
    background: var(--color-bg-subtle) !important;
    border-radius: var(--radius-xs) !important;
}
/* ==========================================================================
   LISTADO DE ALÉRGENOS - ACABADO DE LUJO
   ========================================================================== */

.allergens-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Forzamos 3 columnas perfectas */
    gap: 10px !important;
    padding: 0px !important;
}

/* 1. La Tarjeta (Elevación y suavidad) */
.ht-allergen-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 10px !important;
    cursor: pointer !important;
    background: var(--color-bg-card) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    border-radius: var(--radius-sm) !important; /* Esquinas más orgánicas */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: var(--transition-base) !important;
    /* aspect-ratio: 1 / 1.1 !important; */ /* Casi cuadradas, ligeramente verticales */
}

/* 2. Contenedor del Icono (Sin bordes, puro minimalismo) */
.ht-allergen-item__image-container {
    display: flex !important;
  display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 10px !important;
    transition: transform 0.3s ease !important;
}

.ht-allergen-item__image {
  display: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 0.5 !important; /* Desaturado por defecto para no cansar la vista */
    filter: grayscale(100%) !important;
    transition: var(--transition-base) !important;
  
}

/* 3. Etiqueta (Tipografía Limpia) */
.ht-allergen-item__label {
    font-family: var(--font-family-heading) !important;
    font-size: 0.8rem !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.2 !important;
    color: var(--color-text-subtle) !important;
    text-align: center !important;
}

/* ==========================================================================
   INTERACCIÓN Y ESTADO SELECCIONADO
   ========================================================================== */

/* Hover: La tarjeta "despierta" */
.ht-allergen-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-3px) !important;
}

/* SELECCIONADO: Cambio radical a tu color corporativo */
.ht-allergen-item.is-selected {
    background: var(--color-bg-card) !important;
    border-color: var(--color-primary, #1D174D) !important;
    border-width: 2px !important;
    box-shadow: 0 10px 25px rgba(29, 23, 77, 0.1) !important;
}

/* Al seleccionar, el icono cobra vida (color completo) */
.ht-allergen-item.is-selected .ht-allergen-item__image {
    opacity: 1 !important;
    filter: grayscale(0%) !important;
    transform: scale(1.1) !important;
}

.ht-allergen-item.is-selected .ht-allergen-item__label {
    font-weight: 800 !important;
    color: var(--color-primary, #1D174D) !important;
}

/* ============================================================
   BOOKING NOT-ALLOWED MODAL — Premium classes (checkbooking.js)
   ============================================================ */

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.ht-modal-premium .modal-content {
    overflow: hidden;
    background: var(--color-bg-card);
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.ht-modal-divider {
    display: flex;
    align-items: center;
    margin: 25px 0 15px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ht-modal-divider::before,
.ht-modal-divider::after {
    flex: 1;
    content: '';
    border-bottom: 1px solid var(--color-border);
}

.ht-modal-divider span {
    padding: 0 10px;
}


.ht-action-card--primary {
    background: var(--color-success-soft);
    border-color: var(--color-success);
}

.ht-action-card--primary .ht-action-card__icon i {
    color: var(--color-success);
}

.ht-action-card--primary .ht-action-card__title {
    color: var(--color-success);
}

.ht-action-card--destructive {
    border-color: var(--color-danger-soft);
}

.ht-action-card--destructive:hover {
    background: var(--color-danger-soft);
    border-color: #fda4af;
}

.ht-action-card--destructive .ht-action-card__icon i {
    color: var(--color-danger);
}

.ht-action-card--disabled {
    cursor: not-allowed;
    background: var(--color-bg-body);
    border: 1px solid var(--color-border);
    box-shadow: none;
    opacity: 0.45;
}

.ht-action-card__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    background: var(--color-bg-card);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ht-action-card__title {
    margin-bottom: 2px;
    font-size: 0.95rem;
    font-weight: 800;
}

.ht-action-card__detail {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-subtle);
}

.ht-action-card__arrow i {
    font-size: 20px;
    color: var(--color-border-strong);
}

.ht-loading {
    pointer-events: none;
    opacity: 0.7;
}

.ht-loading::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   FIN BOOKING NOT-ALLOWED MODAL
   ============================================================ */

/* PLACEHOLDER — do not remove */
.ht-allergen-item.active{
    border: 1px solid var(--color-primary) !important;
}

/* ==========================================================================
   BLOCK: MODAL DE CONFLICTO DE RESERVAS (.ht-modal-glass-full)
   ========================================================================== */

/* 1. Contenedor Principal (Más estilizado y con sombra premium) */
.ht-modal-full .modal-content,
.ht-modal-glass-full .modal-content {
    padding: 0px;
    background-color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}



/* ==========================================================================
   BLOCK: FILA DE CONFLICTO (.ht-booking-conflict-row)
   ========================================================================== */
/* Textos de la fila (Restaurante y Fecha) */
.ht-booking-conflict-row__info p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--color-text-subtle); /* Nombre del restaurante en gris */
}

.ht-booking-conflict-row__info strong {
    display: block;
    margin-top: 2px;
    font-size: 0.95rem;
    color: var(--color-text-heading); /* Fecha y hora en oscuro para destacar */
}

/* ==========================================================================
   BLOCK: SEGMENTED CONTROL (.ht-btn-group) - Interruptor iOS
   ========================================================================== */
.ht-btn-group__option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
    cursor: pointer;
    border-radius: var(--radius-sm);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

/* Ocultamos el circulito nativo del radio button */
.ht-btn-group__option input[type="radio"] {
    display: none;
}

/* ESTADO ACTIVO (Cuando el usuario o Bootstrap le añaden la clase "active") */
.ht-btn-group__option.active,
.ht-btn-group__option.ht-btn-group__option--active {
    color: var(--color-text-heading); /* Texto oscuro por defecto (para "Mantener") */
    background-color: var(--color-text-inverse);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra que levanta la píldora */
}

/* DETALLE PREMIUM: Si la opción activa es "Cancelar", se pone rojo suave */
.ht-btn-group__option.active:has(input[value="cancel"]),
.ht-btn-group__option.ht-btn-group__option--active:has(input[value="cancel"]) {
    color: var(--color-danger); 
}


/* ==========================================================================
   MODAL DE RECURSO — Action Sheet (#info_resourcetable)
   Posicionamiento gestionado por la clase .ht-modal-sheet de ht-modals.css
   ========================================================================== */

#info_resourcetable .modal-dialog {
    display: block !important;
    align-items: stretch !important;
    min-height: auto !important;
    margin: 0 !important;
}

#info_resourcetable .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
    padding: 0 !important;
    overflow: hidden;
    text-align: left !important;
    border-radius: 24px 24px 0 0 !important;
}

/* Drag handle */
#info_resourcetable .modal-content::before {
    /* content: ''; */
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 4px;
    margin: 10px auto 0;
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-xs);
}

/* Footer del action sheet */
#info_resourcetable .ht-modal-footer {
    flex-shrink: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    margin-top: 0;
    border-top: 1px solid var(--color-bg-subtle);
}

.ht-resource-modal__img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: 2px 4px 14px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Gradiente en la parte inferior para legibilidad del título */
.ht-resource-modal__img-overlay {
    position: absolute;
    inset: 0;
    margin: 10px;
    /* background: linear-gradient(
        to bottom,
        transparent 40%,
        rgba(0, 0, 0, 0.65) 100%
    ); */
    pointer-events: none;
    border-radius: var(--radius-lg);
}

/* Botón cerrar flotante sobre la imagen */
.ht-resource-modal__close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--color-text-inverse);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.40);
    border: none;
    border-radius: 50%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
}

.ht-resource-modal__close .material-icons {
    font-size: 18px;
    pointer-events: none;
}

/* Título + badge superpuestos sobre imagen, esquina inferior */
.ht-resource-modal__img-title {
    position: absolute;
    right: 24px;
    bottom: 32px;
    left: 30px;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    justify-content: space-between;
}

.ht-resource-modal__name {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-inverse);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.ht-resource-modal__badge {
    flex-shrink: 0;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-success-hover);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-pill);
}

/* Cuerpo del modal con scroll si la descripción es larga */
#info_resourcetable .modal-card-body {
    flex: 1;
    min-height: 0;
    padding: 14px 20px 8px;
    overflow-y: auto;
}

.ht-resource-modal__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 8px;
}

.ht-resource-modal__price-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-heading);
}

.ht-resource-modal__price-supplement {
    font-size: 0.8rem;
    color: var(--color-text-subtle);
}

.ht-booking-conflict-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 12px !important;
    text-align: left;
    background-color: var(--color-text-inverse) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg);
    /* Le damos una sombra un poco más pronunciada para que "flote" sobre el fondo */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Aumentar el contraste del "Interruptor" (Segmented Control) */
.ht-btn-group {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background-color: var(--color-border) !important; /* Gris un tono más oscuro para la "pista" */
    border-radius: var(--radius-lg);
}



/* ==========================================================================
   ESTADO INLINE: RESERVA EXISTENTE (.ht-notallowed-inline)
   ========================================================================== */

/* 1. Contenedor General (Transparente y centrado) */
.ht-notallowed-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% + 2rem);
    min-height: 50vh;
    padding: 0 0 24px 0;
    margin-right: -1rem;
    margin-left: -1rem;
    text-align: center;
    background: transparent !important;
    background-color: transparent !important;
    animation: htFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes htFadeInUp {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   2. CABECERA Y TÍTULO (Apilados verticalmente)
   ========================================================================== */
.ht-modal-header-visual {
    display: flex;
    flex-direction: column; /* CRÍTICO: Pone el icono arriba y el título abajo */
    align-items: center;
    justify-content: center;
    padding: 30px 0!important;
    margin-bottom: 0px;
    background: var(--color-bg-subtle) !important; /* Mata el fondo rosa/cuadrado */
    border: none !important;
}

/* El círculo del icono */
.ht-icon-pulse-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px; /* Separación con el título */
    color: var(--color-info) !important; /* Icono verde esmeralda */
    background-color: var(--color-text-inverse) !important; /* Fondo verde cristalino */
    border-radius: 50% !important;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.04);
}

.ht-icon-pulse-wrapper i {
    font-size: 32px !important;
}

/* Título principal */
.ht-modal-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-info);
    text-align: center;
    letter-spacing: -0.4px;
}

/* ==========================================================================
   3. TEXTOS Y PÍLDORA (Badge)
   ========================================================================== */
.ht-notallowed-inline__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    padding: 0 1.5rem;
    text-align: center;
}

.ht-modal-desc {
    padding: 0 15px;
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-body);
    text-align: center;
}

.ht-modal-desc strong {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
}

/* La píldora de "Máximo permitido" */
.ht-badge-limit {
    display: inline-block;
    padding: 6px 16px;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-body); /* Gris oscuro para buena lectura */
    background-color: var(--color-bg-subtle); /* Gris muy suave */
    border-radius: var(--radius-pill);
}

/* Texto de instrucciones */
.ht-modal-instruction {
    max-width: 420px; /* Evita líneas larguísimas */
    margin: 0 auto 32px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-subtle);
}

/* ==========================================================================
   4. TARJETA DESHABILITADA (El candado)
   ========================================================================== */
.ht-conflict-list {
    width: 100%;
    max-width: 420px; /* Alineado con el texto */
    margin: 0 auto;
}

/* Icono del candado */
.ht-action-card--disabled .ht-action-card__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    color: var(--color-text-muted); /* Gris medio */
    background-color: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.ht-action-card--disabled .ht-action-card__icon i {
    font-size: 24px;
}

/* Textos de la tarjeta deshabilitada */
.ht-action-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ht-action-card--disabled .ht-action-card__title {
    margin-bottom: 2px;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-subtle); /* Gris oscuro para que SE LEA bien */
}

.ht-action-card--disabled .ht-action-card__detail {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}
/* ==========================================================================
   1. CABECERA VISUAL (Icono arriba, Título abajo, CERO ROJOS)
   ========================================================================== */

/* Forzamos que sea una columna centrada */
#booking_notallowed_inline .ht-modal-header-visual {
    display: flex !important;
    flex-direction: column !important; /* Esto es lo que pone el título debajo */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    padding: 30px 0!important;
    margin-bottom: 24px !important;
    background: var(--color-bg-subtle) !important; /* Mata cualquier fondo rosa/rojo heredado */
    border: none !important;
}

/* El círculo del icono: Pasamos a un Azul/Gris Premium */
#booking_notallowed_inline .ht-icon-pulse-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 16px auto !important; /* Margen de 16px abajo para separarlo del título */
    color: var(--color-info) !important; /* Icono en azul corporativo elegante */
    background-color: var(--color-bg-subtle) !important; /* Fondo azul cielo muy cristalino (cero rojo) */
    border-radius: 50% !important;
    box-shadow: 0 0 0 8px rgba(2, 132, 199, 0.05) !important; /* Halo azul muy sutil */
}

#booking_notallowed_inline .ht-icon-pulse-wrapper i {
    font-size: 32px !important;
}

/* El título: Centrado y oscuro */
#booking_notallowed_inline .ht-modal-title {
    width: 100% !important;
    margin: 0 !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--color-text-heading) !important; /* Azul marino casi negro */
    color: var(--color-info) !important;
    text-align: center !important;
    letter-spacing: -0.4px !important;
}

/* ==========================================================================
   BLOCK: EMPTY STATE / FALLBACK (Sin disponibilidad inicial)
   ========================================================================== */
.ht-booking-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px; /* Un poco más de aire para llenar el espacio vacío */
    text-align: center;
    background-color: transparent;
    /* Animación muy suave para que no aparezca de golpe al quitar el d-none */
    animation: htFadeInUpSoft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes htFadeInUpSoft {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* El círculo del icono: Tonos grises (Modo espera/placeholder) */
.ht-booking-empty-state i.material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    font-size: 36px !important;
    color: var(--color-text-muted); /* Gris medio, no llama excesivamente la atención */
    background-color: var(--color-bg-body); /* Gris casi blanco, súper sutil */
    border-radius: 50%;
    /* Halo gris muy difuminado */
    box-shadow: 0 0 0 12px rgba(241, 245, 249, 0.4); 
}

/* Título principal */
.ht-booking-empty-state__title {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading); /* Texto oscuro para buena lectura */
    letter-spacing: -0.3px;
}

/* Subtítulo / Instrucción */
.ht-booking-empty-state__subtitle {
    max-width: 320px; /* Mantiene el texto en dos líneas equilibradas */
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-subtle); /* Gris texto secundario */
}
/* ==========================================================================
   BLOCK: EMPTY STATE DE RANGO DE FECHAS (.ht-booking-daterange-empty)
   ========================================================================== */

/* Icono verde cuando ambas fechas están seleccionadas */
.ht-booking-daterange-empty.is-ready i.material-icons {
    color: var(--color-success);
    background-color: var(--color-success-soft);
    box-shadow: 0 0 0 12px rgba(34, 197, 94, 0.08);
}

/* Icono naranja cuando solo hay fecha de inicio */
.ht-booking-daterange-empty.is-partial i.material-icons {
    color: var(--color-warning);
    background-color: var(--color-warning-soft);
    box-shadow: 0 0 0 12px rgba(249, 115, 22, 0.08);
}

/* Transición suave del icono al cambiar estado */
.ht-booking-daterange-empty i.material-icons {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   BLOCK: TARJETA DE ACCIÓN DESTRUCTIVA (.ht-action-card--destructive)
   ========================================================================== */

/* 1. La Tarjeta Base (Sombra premium y transición táctil) */
.ht-action-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 12px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    outline: none;
    background-color: var(--color-text-inverse);
    border: 1px solid rgba(226, 232, 240, 0.6); /* Borde gris microscópico para definir el límite */
    border-radius: var(--radius-md);
    /* La magia del "Lujo Silencioso": una sombra amplia pero muy transparente */
    box-shadow: 0 10px 30px rgba(149, 157, 165, 0.08), 0 4px 6px rgba(149, 157, 165, 0.04);
    transition: var(--transition-base);
}

/* Efecto al pulsar (Se hunde ligeramente y reduce la sombra) */
.ht-action-card:active {
    box-shadow: 0 4px 10px rgba(149, 157, 165, 0.06);
    transform: scale(0.97);
}

/* 2. El Icono (Fondo suave y borde casi invisible) */
.ht-action-card--destructive .ht-action-card__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    color: var(--color-danger); /* Rojo cereza vibrante pero elegante */
    background-color: var(--color-danger-soft); /* Fondo rosa muy pálido */
    border: 1px solid rgba(225, 29, 72, 0.05); /* Le da un acabado 3D sutil */
    border-radius: var(--radius-md);
}



.ht-action-card--destructive .ht-action-card__title {
    margin-bottom: 2px;
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-danger); /* Un rojo rubí más oscuro para excelente legibilidad */
    letter-spacing: -0.2px;
}

.ht-action-card--destructive .ht-action-card__detail {
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-subtle); /* Gris pizarra clásico */
}

/* 4. La Flecha (Micro-interacción) */
.ht-action-card__arrow {
    display: flex;
    align-items: center;
    margin-left: 12px;
    color: var(--color-border-strong);
    transition: transform 0.2s ease;
}

/* Detalle Pro: Al hacer hover en PC, la flecha se mueve un poquito a la derecha */
.ht-action-card:hover .ht-action-card__arrow {
    color: var(--color-text-muted);
    transform: translateX(3px);
}

/* ==========================================================================
   BLOCK: CATEGORY MAP VIEW
   ========================================================================== */

.ht-category-map-wrap {
    position: relative;
    display: none;
    flex: 1;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

.ht-category-map-wrap.is-active {
    display: flex;
}

.ht-category-map {
    flex: 1;
    width: 100%;
    min-height: 0;
    background: var(--color-bg-subtle);
}

/* When map is active, modal body fills all available space */
#step1-select-your-activity.has-map .modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 0;
}

#step1-select-your-activity.has-map .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#step1-select-your-activity.has-map .ht-modal-close-btn {
    display: none;
}


/* Compact header when map is active */
#step1-select-your-activity.has-map .ht-modal-header {
    padding: 10px 16px;
}

.ht-modal-header-group {
    flex: 1;
    min-width: 0;
}

.ht-modal-header-subtitle {
    margin: 1px 0 0;
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--color-text-subtle);
}

#step1-select-your-activity.has-map .ht-modal-header-title {
    font-size: 0.95rem;
}

/* Marker bounce animation */
@keyframes markerBounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(-50%, -70%) scale(1.15); }
    50% { transform: translate(-50%, -50%) scale(1); }
    75% { transform: translate(-50%, -60%) scale(1.08); }
}

.ht-marker-bounce {
    animation: markerBounce 0.6s ease !important;
    z-index: 5 !important;
}

/* Move zoom controls to top-right in category map */
#category-map-container .ht-floor-map__controls {
    top: 12px;
    right: 12px;
    bottom: auto;
}

/* Floating cards carousel over map */
.ht-category-map-cards {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

.ht-category-map-cards::-webkit-scrollbar {
    display: none;
}

.ht-map-card {
    display: flex;
    flex: 0 0 260px;
    gap: 10px;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    background: var(--color-bg-card);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    scroll-snap-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ht-map-card.is-active {
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 2px 10px rgba(0, 0, 0, 0.15);
}

.ht-map-card:active {
    transform: scale(0.97);
}

.ht-map-card--disabled {
    opacity: 0.5;
}

.ht-map-card__img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-md);
}

.ht-map-card__body {
    flex: 1;
    min-width: 0;
}

.ht-map-card__title {
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ht-map-card__desc {
    margin-top: 1px;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--color-text-subtle);
}

.ht-map-card__seats {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.ht-map-card__avail-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ht-map-card__avail-dot.is-available {
    background: var(--color-success);
}

.ht-map-card__avail-dot.is-full {
    background: var(--color-danger);
}

.ht-map-card__action {
    flex-shrink: 0;
    color: var(--color-primary);
}

.ht-map-card__action i {
    font-size: 22px;
}

.ht-map-card__full {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-danger);
    text-transform: uppercase;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   BLOCK: CATEGORY CARDS (Miniaturas Horizontales Premium)
   ========================================================================== */

.ht-category-card {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    background: var(--color-bg-card);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ht-category-card:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transform: scale(0.98);
}

/* Miniatura Ampliable */
.ht-category-card__thumb {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-right: 16px;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); 
}

.ht-category-card__zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-text-inverse);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    backdrop-filter: blur(2px);
}

.ht-category-card__zoom i { font-size: 14px; }

/* Textos Centrales */
.ht-category-card__content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
}

.ht-category-card__title {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text-heading);
    text-align: left;
}

.ht-category-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px 0;
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--color-text-subtle);
    text-align: left;
}

/* El nuevo estilo para las Plazas Disponibles */
.ht-category-card__meta {
    margin-bottom: 6px;
    text-align: left;
}

.ht-category-card__seats {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-hover); /* Verde éxito elegante */
    background: var(--color-success-soft); /* Fondo verdecito para destacarlo como algo positivo */
    border-radius: var(--radius-xs);
}

.ht-category-card__seats i {
    margin-right: 4px;
    font-size: 14px;
}

/* Precios */
.ht-category-card__price {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.ht-category-card__price-label {
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
}

.ht-category-card__price-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-info); 
}

.ht-category-card__action {
    display: flex;
    align-items: center;
    padding-left: 12px;
    color: var(--color-border-strong);
}

/* Variante: Completo */
.ht-category-card--full {
    cursor: not-allowed;
    background: var(--color-bg-body);
    border-color: var(--color-border);
    box-shadow: none;
}

.ht-category-card--full:active { transform: none; }
.ht-category-card--full .ht-category-card__thumb { filter: grayscale(100%) opacity(0.7); }
.ht-category-card--full .ht-category-card__title { color: var(--color-text-subtle); }

.ht-badge-full {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 8px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border-radius: var(--radius-xs);
}

.ht-category-card__price--muted .ht-category-card__price-value {
    color: var(--color-text-muted);
}

/* ==========================================================================
   BLOCK: TIMETABLE HEADERS
   ========================================================================== */
.ht-timetable-header {
    padding: 16px 0 24px;
    margin-bottom: 24px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.ht-timetable-header__title {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-text-heading);
}

.ht-timetable-header__date {
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-subtle);
}

.ht-timetable-header--reserved {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-body);
}
/* ==========================================================================
   LIGHTBOX: ht-lightbox
   ========================================================================== */
#ht-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

#ht-lightbox-overlay.ht-lightbox--open {
    display: flex;
}

.ht-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    animation: ht-lb-fade-in 0.25s ease forwards;
}

#ht-lightbox-overlay.ht-lightbox--closing .ht-lightbox__backdrop {
    animation: ht-lb-fade-out 0.2s ease forwards;
}

.ht-lightbox__frame {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92vw;
    max-width: 860px;
    max-height: 90vh;
    transform-origin: var(--lb-origin-x, 50%) var(--lb-origin-y, 50%);
    animation: ht-lb-zoom-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#ht-lightbox-overlay.ht-lightbox--closing .ht-lightbox__frame {
    animation: ht-lb-zoom-out 0.2s cubic-bezier(0.55, 0, 0.78, 0) forwards;
}

.ht-lightbox__img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    overflow: hidden;
    background: var(--color-dark-hover);
    border-radius: var(--radius-md);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.ht-lightbox__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ht-lightbox__img.ht-lightbox__img--loaded {
    opacity: 1;
}

.ht-lightbox__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--color-text-heading);
    cursor: pointer;
    background: var(--color-bg-card);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.ht-lightbox__close:hover {
    background: var(--color-bg-subtle);
    transform: scale(1.1);
}

.ht-lightbox__close i { font-size: 18px; }

body.ht-lightbox-active { overflow: hidden; }

/* Keyframes */
@keyframes ht-lb-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ht-lb-fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes ht-lb-zoom-in {
    from { opacity: 0; transform: scale(0.15); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ht-lb-zoom-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.15); }
}

/* ==========================================================================
   ALTERNATIVES PANEL — inline, shown when the selected day is full/closed
   and the offer belongs to a group with other available venues
   ========================================================================== */


/* Loading spinner */
.ht-alternatives__loading {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding: 28px 0;
}

.ht-alternatives__loading-text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.ht-alternatives__spinner {
    width: 36px;
    height: 36px;
    border: 2px solid rgba(var(--color-primary-rgb, 0, 0, 0), 0.1);
    border-top-color: var(--color-primary, #334155);
    border-radius: 50%;
    animation: htSpin 0.8s linear infinite;
}

/* Empty state */
.ht-alternatives__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px;
    color: var(--color-text-muted);
    text-align: center;
}

.ht-alternatives__empty i {
    margin-bottom: 10px;
    font-size: 36px;
}

.ht-alternatives__empty p {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
}

.ht-alternatives__empty-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted) !important;
}/* ==========================================================================
   BLOCK: ALTERNATIVAS DE RESERVA (Cross-selling)
   ========================================================================== */
.ht-alternatives {
    padding: 24px 0px;
    animation: htFadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- 1. CABECERA (Adiós a la caja amarilla, hola elegancia) --- */
.ht-alternatives__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 32px;
    text-align: center;
}

.ht-alternatives__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    color: var(--color-text-subtle); /* Gris pizarra elegante */
    background-color: var(--color-bg-subtle); /* Gris perla muy suave, cero alarmante */
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(241, 245, 249, 0.5);
}

.ht-alternatives__icon i {
    font-size: 28px !important;
}

.ht-alternatives__title {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text-heading);
    letter-spacing: -0.3px;
}

.ht-alternatives__sub {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-subtle);
}

/* --- 3. TARJETAS DE RESTAURANTE --- */
.ht-alt-card {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 12px;
    color: inherit;
    text-decoration: none !important; /* Limpiamos el estilo por defecto de los <a> */
    background: var(--color-bg-card);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: var(--transition-base);
}

.ht-alt-card:hover {
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); /* Sombra más amplia al pasar el ratón en PC */
}

.ht-alt-card:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transform: scale(0.97); /* Feedback táctil estilo iOS */
}

/* Imagen miniatura del restaurante */
.ht-alt-card__thumb {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin-right: 16px;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); /* Borde interior sutil para fotos claras */
}

/* Textos de la tarjeta */
.ht-alt-card__body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
}

.ht-alt-card__name {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text-heading);
}

/* Llamada a la acción (Reservar >) */
.ht-alt-card__cta {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-info); /* Azul corporativo elegante, invita al clic */
}

.ht-alt-card__cta i {
    margin-left: 2px;
    font-size: 18px;
    transition: transform 0.2s ease;
}

/* Pequeño detalle pro: la flecha se mueve al hacer hover */
.ht-alt-card:hover .ht-alt-card__cta i {
    transform: translateX(3px);
}

/* --- 2. FECHA Y RESULTADOS (Estilo Píldora) --- */
.ht-alternatives__date-label {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 6px 16px;
    margin: 0 0 16px 4px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--color-bg-subtle);
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ht-alternatives__date-label i {
    margin-right: 6px;
    font-size: 16px;
    color: var(--color-text-muted);
}
/* Step 8 (mapa): flex column para que el mapa ocupe el espacio restante */
#step8 {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
}

#step8 > .container,
#step8 > .container-fluid {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.ht-resource-header {
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
    padding: 12px 16px 10px;
    margin-bottom: 0px;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-bg-subtle);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ht-resource-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-text-heading);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.ht-resource-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.ht-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill)
}

.ht-badge--free {
    color: var(--color-success-hover);
    background-color: var(--color-success-soft);
    border-color: rgba(22, 163, 74, 0.2)
}

.ht-badge--occupied {
    color: var(--color-text-subtle);
    background-color: var(--color-bg-body);
    border-color: var(--color-border)
}

.ht-badge--selection {
    color: var(--color-danger);
    background-color: var(--color-danger-soft);
    border-color: rgba(225, 29, 72, 0.2)
}

.ht-badge--shared {
    color: var(--color-warning-hover);
    background-color: var(--color-warning-soft);
    border-color: rgba(217, 119, 6, 0.2)
}

.ht-map-area {
    padding-bottom: 120px !important
}


.ht-bottom-bar-inline {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    background-color: rgba(255, 255, 255, 0.95);
    border-top: 1px solid var(--color-bg-subtle);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.ht-bottom-bar-inline__info {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-subtle) !important;
    letter-spacing: 0.3px
}

.ht-reserved-wrapper {
    margin-right: 12px
}

.ht-reserved-toggle {
    display: inline-flex;
    align-items: center;
    font-weight: var(--font-weight-bold);
    color: var(--color-info);
    cursor: pointer
}

.ht-reserved-toggle i {
    margin-left: 4px;
    font-size: 18px
}

.ht-reserved-menu {
    max-height: 300px;
    padding: 12px;
    overflow-y: auto;
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1)
}

.ht-btn-pill-green {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px 12px 28px;
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    cursor: pointer;
    outline: none;
    background-color: #76c893;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 15px rgba(118, 200, 147, 0.3);
    transition: var(--transition-base)
}

.ht-btn-pill-green i {
    margin-left: 4px;
    font-size: 20px;
    transition: transform 0.2s
}

.ht-btn-pill-green:hover:not(:disabled) i {
    transform: translateX(3px)
}

.ht-btn-pill-green:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(118, 200, 147, 0.2);
    transform: scale(0.96)
}

.ht-btn-pill-green:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    background-color: var(--color-border);
    box-shadow: none
}

.ht-floating-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 24px 15px;
    pointer-events: none
}

#button_continue.btn-success-action {
    justify-content: space-between;
    padding: 8px 20px 8px 24px;
    pointer-events: auto;
}

#button_continue .btn-success-action__info {
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    margin-right: 0;
    text-align: left;
}

#button_continue .btn-success-action__info > span:first-child {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

#button_continue .btn-success-action__info > span:last-child {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    opacity: 0.9;
}

#button_continue .btn-success-action__text i {
    font-size: 28px;
}

#button_continue:disabled {
    color: var(--color-text-muted);
    cursor: not-allowed;
    background: var(--color-bg-subtle) !important;
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04) !important;
}

.ht-resource-header__top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-bottom: 8px
}

.ht-resource-legend--dots {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center
}

.ht-legend-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-body);
    text-transform: uppercase;
    letter-spacing: 0.5px
}

.ht-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%
}

.ht-dot--free {
    background-color: var(--color-success-hover);
    box-shadow: 0 0 0 3px var(--color-success-soft)
}

.ht-dot--occupied {
    background-color: var(--color-text-muted);
    box-shadow: 0 0 0 3px var(--color-bg-body)
}

.ht-dot--selection {
    background-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-soft)
}

.ht-dot--shared {
    background-color: var(--color-warning-hover);
    box-shadow: 0 0 0 3px var(--color-warning-soft)
}

.ht-resource-header__top>.badge,
.ht-resource-header__top>span[style*="position: absolute"] {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    margin: 0 !important;
    color: var(--color-danger) !important;
    background: var(--color-danger-soft) !important;
    border: 1px solid rgba(225, 29, 72, 0.2) !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important
}

.controlHolder>div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px !important;
    border-radius: 50% !important;
    filter: brightness(0) invert(1) !important;
    transition: var(--transition-fast) !important
}

.controlHolder>div:hover:not(.off) {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    transform: scale(1.05) !important
}

.controlHolder>div:active:not(.off) {
    background-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: scale(0.92) !important
}

.controlHolder {
    position: absolute !important;
    bottom: 17px !important;
    left: 5px;
    z-index: 90 !important;
    display: inline-flex !important;
    gap: 10px !important;
    padding: 6px 8px !important;
    background: rgb(15 23 42 / 56%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 2px 5px 18px rgba(0, 0, 0, 0.2) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    transform: translateX(-50%) !important
}

.controlHolder>div:not(.off) {
    background-color: var(--color-text-inverse) !important;
    filter: brightness(1) opacity(0.5) !important
}

.controlHolder>div:not(.off):hover {
    background-color: var(--color-text-inverse) !important;
    transform: scale(1.05) !important
}

.controlHolder>div:not(.off):active {
    transform: scale(0.95) !important
}

.controlHolder>div.off {
    cursor: not-allowed !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    opacity: 0.5 !important
}
/* â"€â"€â"€ Imagen del recurso con overlay y título superpuesto â"€â"€â"€ */
.ht-resource-modal__img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    padding: 10px;
    padding-bottom: 20px;
    overflow: hidden;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-subtle);
}

/* 1. Layout base del grid de horarios */
.booking-timetables__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
    gap: 12px !important;
    padding: 10px 5px 25px 5px !important;
}

/* 2. El Botón (Blindado contra el texto gigante) */
.booking-timetables__grid .timetable-slot {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 8px !important; /* Un poco menos de padding lateral para dar espacio a pantallas pequeñas */
    overflow: hidden !important;
    cursor: pointer !important;
    background-color: var(--color-text-inverse) !important;
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    transition: var(--transition-fast) !important; 
}

/* Interacciones */
.booking-timetables__grid .timetable-slot:hover {
    border-color: var(--color-text-muted) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-2px) !important;
}

.booking-timetables__grid .timetable-slot:active {
    background-color: var(--color-bg-body) !important;
    box-shadow: none !important;
    transform: scale(0.97) !important;
}

/* 3. El Texto de la Hora (Controlado a 15px) */
.booking-timetables__grid .timetable-slot__title {
    width: 100% !important; 
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important; 
    text-overflow: ellipsis !important; /* Puntos suspensivos si no cabe en un móvil muy estrecho */
    font-size: var(--text-base) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.2 !important;
    color: var(--color-light-text) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important; /* Obliga a una línea */
}

/* 4. Estado Seleccionado */
.booking-timetables__grid .timetable-slot.is-selected {
    background-color: var(--color-success-soft) !important;
    border-color: var(--color-success) !important; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15) !important; 
}

.booking-timetables__grid .timetable-slot.is-selected .timetable-slot__title {
    color: var(--color-success-hover) !important;
}

/* El grupo inferior (por si alguna vez sale texto extra) */
.booking-timetables__grid .timetable-slot__groups {
    margin-top: 4px !important;
    font-size: var(--text-sm) !important;
    color: var(--color-text-subtle) !important;
}

.booking-timetables__grid .timetable-slot__groups:empty {
    display: none !important;
}
/* ==========================================================================
   BLOCK: BOTÓN SECUNDARIO ("Añadir otra habitación")
   ========================================================================== */

/* 1. Separación del botón principal (para que no parezca que está pegado por error) */
.text-center.mt-2 {
    margin-top: 16px !important;
    margin-bottom: 24px !important; /* Damos aire por abajo si es el final de la pantalla */
}

/* 2. El Botón Secundario (Sobrescribimos Bootstrap y estilos inline) */
#btn-add-group-room {
    display: inline-flex !important;
    gap: 8px !important; /* Espacio perfecto y matemático entre icono y texto */
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important; /* Área táctil amplia (Crucial para móviles) */
    font-size: 0.95rem !important; /* Matamos el 13px inline, lo hacemos más legible */
    font-weight: var(--font-weight-semibold) !important; /* Un poco de peso para que parezca un botón real */
    color: var(--color-text-body) !important; /* Gris pizarra muy elegante */
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-pill) !important; /* Forma de píldora invisible */
    transition: var(--transition-fast) !important;
}

/* 3. Ajuste perfecto del Icono (Adiós al vertical-align obsoleto) */
#btn-add-group-room i.material-icons {
    margin: 0 !important;
    font-size: 1.25rem !important; /* Matamos el 16px inline */
    line-height: 1 !important;
    vertical-align: baseline !important; /* Reset del estilo inline */
}

/* 4. Interacciones (Efecto nativo al tocar / pasar el ratón) */
#btn-add-group-room:hover,
#btn-add-group-room:active {
    color: var(--color-text-heading) !important; /* El texto se oscurece para dar feedback */
    text-decoration: none !important; /* Evitamos que Bootstrap le ponga subrayado */
    background-color: var(--color-bg-subtle) !important; /* Fondo gris/azulado muy sutil al tocar */
    transform: scale(0.98) !important; /* Pequeño efecto de hundimiento táctil */
}

/* Limpieza de sombras por defecto */
#btn-add-group-room:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* El pie "Continuar" (.fixed-footer) es position:fixed y flota sobre el contenido,
   tapando lo último del paso (p.ej. el botón "Añadir otra habitación"). El área con
   scroll del paso no reservaba espacio al fondo, así que reservamos hueco suficiente
   para que el contenido final quede por encima del pie y no oculto. */
.ht-booking-step.first-container-web {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   BLOCK: BOTTOM SHEET MODAL (Añadir Habitaciones)
   ========================================================================== */


/* ==========================================================================
   BLOCK: ALERTA DE ERROR PREMIUM
   ========================================================================== */

/* Estilos para el contenedor de error */
.ht-modal-sheet #group-room-error {
    display: flex; /* Usamos flex para alinear un icono si quisieras */
    align-items: center !important;
    padding: 12px 16px !important;
    margin-top: 8px !important; /* Separación sutil del input superior */
    margin-bottom: 24px !important;
    font-size: 0.85rem !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.5;
    color: var(--color-danger) !important; /* Rojo oscuro y legible para el texto */
    background-color: var(--color-danger-soft) !important; /* Rojo muy claro, casi pastel */
    border: 1px solid #fecaca !important; /* Borde rojo suave */
    border-radius: var(--radius-md) !important; /* Curva a juego con los inputs y botones */
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.05) !important; /* Sombra levísima */
}

/* Opcional: Inyectar un pequeño icono de alerta mediante CSS */
.ht-modal-sheet #group-room-error::before {
    margin-right: 8px !important;
    font-size: 1rem !important;
    content: "⚠️"; /* O un icono de material design si prefieres */
}

/* Ocultar la clase genérica de Bootstrap si interfiere */
.ht-modal-sheet .alert-danger {
    background-image: none !important;
}
/* ==========================================================================
   BLOCK: BOTTOM SHEET MODAL - PASO 2 (PAX)
   ========================================================================== */

/* 1. Tarjeta de Habitación Verificada */
.ht-modal-sheet #group-room-step-pax .rounded.p-3.mb-3 {
    padding: 16px !important;
    margin-bottom: 24px !important;
    background: var(--color-success-soft) !important; /* Verde esmeralda súper claro */
    border: 1px solid #d1fae5 !important;
    border-radius: var(--radius-md) !important;
}

.ht-modal-sheet #group-validated-room {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--color-text-heading) !important;
}

.ht-modal-sheet #group-validated-name {
    margin-top: 2px !important;
    font-size: 0.85rem !important;
    color: var(--color-text-body) !important;
}

/* La etiqueta (Badge) de "Verificada" */
.ht-modal-sheet .badge-success {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background-color: var(--color-success) !important; /* Verde corporativo */
    border-radius: var(--radius-pill) !important;
}

/* 2. Pregunta "¿Cuántas personas...?" */
.ht-modal-sheet #group-room-step-pax > .modal-body > p.text-muted {
    margin-bottom: 16px !important;
    font-size: 1.05rem !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-heading) !important;
    text-align: center !important;
}

/* 3. Filas de Selección (Adultos, Niños, Bebés) */
.ht-modal-sheet [id^="group-pax-row-"] {
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--color-bg-subtle) !important; /* Separador más sutil */
}

/* Eliminar borde de la última fila */
.ht-modal-sheet #group-pax-row-babies {
    margin-bottom: 8px !important;
    border-bottom: none !important;
}

.ht-modal-sheet [id^="group-pax-row-"] .font-weight-bold {
    font-size: 1rem !important;
    color: var(--color-text-heading) !important;
}

/* 4. Botones +/- y número: gestionados por quantity-selector.css */

/* 5. Ajuste de Botones del Footer para Textos Largos */
/* Como "← Cambiar habitación" es largo, permitimos que se apilen en pantallas muy estrechas, 
   o los forzamos a columna si lo prefieres. Vamos a mantenerlos en fila pero permitiendo wrap. */
.ht-modal-sheet .ht-modal-footer {
    flex-wrap: wrap !important; /* Permite que si no caben, uno baje */
}

.ht-modal-sheet .ht-modal-footer > button {
    min-width: 140px !important; /* Asegura un ancho decente */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Pone "..." si el texto es excesivamente largo en un móvil enano */
    white-space: nowrap !important; /* Evita que el texto del botón se rompa en dos líneas feas */
}
div#res-image img {
    border-radius: var(--radius-sm);
}