/* --- 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;
}

/* ==========================================================================
   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);
}