/* Madrid Terror · piel del calendario y el formulario de Escape Room Director (19-sep-2026).
   SOLO aspecto: no se toca ni un script, ni un campo, ni una llamada del widget; las reservas y el cobro son de ERD.
   El widget pone colores con variables (se redefinen sobre #ercalendar) y algunos con style="…!important"
   en línea, que ninguna hoja puede pisar: a esos se les pone encima una capa propia (::before con z-index:-1),
   que tapa su fondo y deja el texto por encima. Todo va bajo .reserva .calendario #ercalendar para ganar a sus selectores con ID. */

.reserva .calendario #ercalendar{
  --checkout-day-free-bg:#E9E1D3!important;--checkout-day-free-text:#0A0807!important;--checkout-day-free-border:#E9E1D3!important;
  --checkout-day-available-bg:transparent!important;--checkout-day-available-text:#E9E1D3!important;--checkout-day-available-border:#C0272F!important;
  --checkout-day-complete-bg:transparent!important;--checkout-day-complete-text:rgba(233,225,211,.22)!important;--checkout-day-complete-border:transparent!important;
  --checkout-slots-date-color:#E8434B!important;--checkout-extended-info-color:#E9E1D3!important;
  --checkout-form-accent:#C0272F!important;--checkout-form-back-bg:transparent!important;--checkout-form-back-text:#E9E1D3!important;--checkout-form-back-border:rgba(233,225,211,.35)!important;
  --checkout-form-datetime-bg:transparent!important;--checkout-form-datetime-border:rgba(233,225,211,.35)!important;
  --checkout-gift-bg:transparent!important;--checkout-gift-text:#E9E1D3!important;--checkout-gift-border:rgba(233,225,211,.45)!important;
  --checkout-hero-accent:#C0272F!important;
  font-family:"Archivo",system-ui,sans-serif!important;color:#E9E1D3}
.reserva .calendario #ercalendar *{font-family:inherit}
.reserva .calendario #ercalendar svg{font-family:initial}

/* Encabezados del widget: nuestra letra de cartel. El «Selecciona la fecha» sobra: la sección ya pregunta «¿Cuándo entras?» */
.reserva .calendario #ercalendar .checkout-calendar-heading{display:none!important}
.reserva .calendario #ercalendar .checkout-slots-heading,.reserva .calendario #ercalendar .checkout-game-modern-hero__title,
.reserva .calendario #ercalendar .checkout-form-step-header__title,.reserva .calendario #ercalendar .checkout-form-step-header__subtitle{
  font:400 clamp(30px,2.6vw,40px)/1 "Bebas Neue",Impact,sans-serif!important;text-transform:uppercase;letter-spacing:.02em;text-align:left!important}
.reserva .calendario #ercalendar .checkout-slots-heading{margin:26px 0 14px!important;padding-top:22px;border-top:1px solid rgba(233,225,211,.14)}
.reserva .calendario #ercalendar .checkout-form-step-header__subtitle{color:#E8434B!important;font-size:clamp(22px,1.8vw,28px)!important}

/* ---------- Calendario ---------- */
.reserva .calendario #ercalendar .vdp-datepicker__calendar{background:transparent!important;border:0!important;box-shadow:none!important;width:100%!important;max-width:460px;padding:0!important}
.reserva .calendario #ercalendar .vdp-datepicker__calendar header{display:flex;align-items:center;margin-bottom:10px}
.reserva .calendario #ercalendar .vdp-datepicker__calendar header span{font:400 30px/1.2 "Bebas Neue",Impact,sans-serif!important;letter-spacing:.04em;text-transform:uppercase;color:#E9E1D3!important}
.reserva .calendario #ercalendar .vdp-datepicker__calendar header .prev::after{border-right-color:#E9E1D3!important}
.reserva .calendario #ercalendar .vdp-datepicker__calendar header .next::after{border-left-color:#E9E1D3!important}
.reserva .calendario #ercalendar .vdp-datepicker__calendar header .prev:not(.disabled):hover,.reserva .calendario #ercalendar .vdp-datepicker__calendar header .next:not(.disabled):hover{background:rgba(192,39,47,.18)!important}
.reserva .calendario #ercalendar .cell.day-header{font:500 12px "Oswald",sans-serif!important;letter-spacing:.16em;color:rgba(233,225,211,.5)!important}
.reserva .calendario #ercalendar .cell.day{font:500 17px/1 "Oswald",sans-serif!important;border-radius:2px!important;font-variant-numeric:tabular-nums;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.reserva .calendario #ercalendar .cell.day.disabled{color:rgba(233,225,211,.22)!important}
.reserva .calendario #ercalendar .cell.day.checkout-day-free:hover,.reserva .calendario #ercalendar .cell.day.checkout-day-available:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 0 1px #C0272F!important}
.reserva .calendario #ercalendar .cell.day.checkout-day-complete{text-decoration:line-through;text-decoration-color:rgba(192,39,47,.6)}
.reserva .calendario #ercalendar .cell.day.selected{background:#C0272F!important;color:#fff!important;border-color:#C0272F!important}
.reserva .calendario #ercalendar .checkout-calendar-shell{background:transparent!important;border:0!important;box-shadow:none!important}
.reserva .calendario #ercalendar #powered{font:12px "Oswald",sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,225,211,.35)!important;background:transparent!important}
/* Leyenda con los mismos colores que el calendario */
.reserva .calendario #ercalendar .calendar-legend{margin-top:14px}
.reserva .calendario #ercalendar .legend-text{font:500 12px "Oswald",sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,225,211,.65)!important}
.reserva .calendario #ercalendar .legend-dot{border-radius:2px!important}
.reserva .calendario #ercalendar .legend-item:nth-child(1) .legend-dot{background:#E9E1D3!important}
.reserva .calendario #ercalendar .legend-item:nth-child(2) .legend-dot{background:transparent!important;box-shadow:inset 0 0 0 2px #C0272F}
.reserva .calendario #ercalendar .legend-item:nth-child(3) .legend-dot{background:rgba(233,225,211,.18)!important}

/* ---------- Horas ---------- */
/* El cartel viejo de la sala sobra aquí (la ficha ya es el cartel) y sus datos pueden no coincidir con la ficha */
.reserva .calendario #ercalendar .checkout-game-modern-hero__banner-wrap{display:none!important}
.reserva .calendario #ercalendar .checkout-game-modern-hero__meta{justify-content:flex-start!important;gap:6px}
.reserva .calendario #ercalendar .checkout-game-modern-hero__slots{margin-top:16px!important}
/* aviso bajo las horas de Jueves Frikis: lo mete jueves_js (Fran, 27-sep) */
.reserva .calendario #ercalendar .aviso-jueves{margin:12px 0 0;font:400 14px "Oswald",sans-serif;color:rgba(233,225,211,.7)}
.reserva .calendario #ercalendar .checkout-hero-editorial__chip{border-radius:2px!important;border:1px solid rgba(233,225,211,.2)!important;background:transparent!important;
  font:500 12px "Oswald",sans-serif!important;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,225,211,.8)!important}
.reserva .calendario #ercalendar .checkout-slot-row{gap:8px;justify-content:flex-start!important}
.reserva .calendario #ercalendar .checkout-slot-row .btn,
.reserva .calendario #ercalendar .checkout-form-back--classic,
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta{position:relative;isolation:isolate;overflow:hidden;border-radius:2px!important;border:0!important}
.reserva .calendario #ercalendar .checkout-slot-row .btn{min-width:96px;padding:13px 16px!important}
.reserva .calendario #ercalendar .checkout-slot-row .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#0A0807;box-shadow:inset 0 0 0 1.5px rgba(233,225,211,.45);transition:background .2s,box-shadow .2s}
.reserva .calendario #ercalendar .checkout-slot-row .btn,.reserva .calendario #ercalendar .checkout-slot-time{color:#E9E1D3!important;font:500 18px/1 "Oswald",sans-serif!important;letter-spacing:.08em}
.reserva .calendario #ercalendar .checkout-slot-row .btn:not(:disabled):hover::before{background:#8E1016;box-shadow:inset 0 0 0 1.5px #C0272F}
.reserva .calendario #ercalendar .checkout-slot-row .btn:disabled::before{background:transparent;box-shadow:inset 0 0 0 1px rgba(233,225,211,.1)}
.reserva .calendario #ercalendar .checkout-slot-row .btn:disabled .checkout-slot-time{color:rgba(233,225,211,.25)!important;text-decoration:line-through}

/* ---------- Formulario ---------- */
.reserva .calendario #ercalendar .checkout-form-back--classic::before{content:"";position:absolute;inset:0;z-index:-1;background:#0A0807;box-shadow:inset 0 0 0 1.5px rgba(233,225,211,.35)}
.reserva .calendario #ercalendar .checkout-form-back--classic{color:#E9E1D3!important;font:600 13px "Archivo",sans-serif!important;letter-spacing:.16em;text-transform:uppercase;height:auto;padding:12px 16px!important;text-align:left}
.reserva .calendario #ercalendar .checkout-form-back--classic:hover::before{box-shadow:inset 0 0 0 1.5px #E9E1D3}
.reserva .calendario #ercalendar .checkout-form-back--classic svg{fill:currentColor}
.reserva .calendario #ercalendar .checkout-form-bars{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.reserva .calendario #ercalendar .checkout-form-bar{border-radius:2px!important;border:1px solid rgba(233,225,211,.3)!important;background:rgba(233,225,211,.04)!important;color:#E9E1D3!important;padding:12px 14px!important}
.reserva .calendario #ercalendar .checkout-form-bar__value{font:500 18px "Oswald",sans-serif!important;letter-spacing:.08em}
.reserva .calendario #ercalendar .checkout-form-bar svg{color:#E8434B}
.reserva .calendario #ercalendar .checkout-modern-field__control{background:rgba(233,225,211,.04)!important;border:0!important;border-bottom:1.5px solid rgba(233,225,211,.3)!important;border-radius:0!important;box-shadow:none!important;transition:border-color .25s,background .25s}
.reserva .calendario #ercalendar .checkout-modern-field__control:focus-within{border-color:#C0272F!important;background:rgba(192,39,47,.07)!important}
.reserva .calendario #ercalendar .checkout-modern-field__input,.reserva .calendario #ercalendar .vti__input{background:transparent!important;color:#E9E1D3!important;font:16px "Archivo",sans-serif!important;text-align:left!important;text-align-last:left;caret-color:#C0272F}
.reserva .calendario #ercalendar .checkout-modern-field__input::placeholder,.reserva .calendario #ercalendar .vti__input::placeholder{color:rgba(233,225,211,.4)!important}
.reserva .calendario #ercalendar .checkout-modern-field__input option{background:#131010;color:#E9E1D3}
.reserva .calendario #ercalendar .checkout-modern-field__icon,.reserva .calendario #ercalendar .checkout-modern-field__chevron,.reserva .calendario #ercalendar .checkout-modern-field__control > svg{color:rgba(233,225,211,.5)!important}
.reserva .calendario #ercalendar .vue-tel-input{border:0!important;box-shadow:none!important;background:transparent!important}
.reserva .calendario #ercalendar .vti__dropdown{background:transparent!important}
.reserva .calendario #ercalendar .vti__dropdown-list{background:#131010!important;border-color:rgba(233,225,211,.2)!important;color:#E9E1D3}
.reserva .calendario #ercalendar .checkout-modern-checkbox{background:transparent!important;border:0!important;border-top:1px solid rgba(233,225,211,.14)!important;border-radius:0!important;padding-left:0!important}
.reserva .calendario #ercalendar .checkout-modern-checkbox__box{border-radius:2px!important;border-color:rgba(233,225,211,.5)!important}
.reserva .calendario #ercalendar .checkout-modern-checkbox__input:checked + .checkout-modern-checkbox__box{background:#C0272F!important;border-color:#C0272F!important}
.reserva .calendario #ercalendar .checkout-modern-checkbox__label{font:14px/1.5 "Archivo",sans-serif!important;color:rgba(233,225,211,.8)!important}
.reserva .calendario #ercalendar .checkout-modern-checkbox__link{color:#E9E1D3!important;text-decoration-color:#C0272F!important;text-underline-offset:3px}
/* El pago: el botón rojo de la web, con su relieve */
.reserva .calendario #ercalendar .checkout-modern-payment-panel{border:0!important;border-top:2px solid #C0272F!important;border-radius:0!important;background:transparent!important;padding:18px 0 0!important}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
/* el botón final es el sello de la web: borde rojo, Bebas, torcido y con la tinta comida. Al pasar se llena de tinta. */
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta{color:#C0272F!important;font:400 26px/1 "Bebas Neue",Impact,sans-serif!important;letter-spacing:.1em;text-transform:uppercase;padding:13px 28px 9px!important;
  border-radius:4px!important;box-shadow:none!important;transform:rotate(-2deg);filter:url(#tinta);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:#0A0807;box-shadow:inset 0 0 0 3px #C0272F;transition:background .18s}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta:hover{color:#0A0807!important;-webkit-text-fill-color:#0A0807;transform:rotate(-2deg) scale(.96)}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta:hover::before{background:#C0272F}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta:active{transform:rotate(-2deg) scale(.9)}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__note{font:12px "Oswald",sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,225,211,.5)!important}
.reserva .calendario #ercalendar .checkout-gift-button--modern{max-width:none!important;font:600 13px "Archivo",sans-serif!important;letter-spacing:.16em}

/* Ajustes tras verlo con datos reales: días separados, día elegido en rojo, todo alineado a la izquierda y horas ocupadas legibles.
   -webkit-text-fill-color gana al color en línea con !important que ERD pone en los botones de hora. */
.reserva .calendario #ercalendar{--checkout-day-available-border:transparent!important;--checkout-day-free-border:transparent!important}
.reserva .calendario #ercalendar .cell.day:not(.blank){border:3px solid #0A0807!important;line-height:34px!important}
.reserva .calendario #ercalendar .cell.day.checkout-day-available{outline:1.5px solid #C0272F;outline-offset:-4.5px}
.reserva .calendario #ercalendar .cell.day.checkout-day-free:hover,.reserva .calendario #ercalendar .cell.day.checkout-day-available:hover{outline:1.5px solid #E9E1D3;outline-offset:-4.5px;box-shadow:0 6px 16px rgba(0,0,0,.6)!important}
.reserva .calendario #ercalendar .cell.day.selected{box-shadow:inset 0 0 0 40px #C0272F!important;outline:0;-webkit-text-fill-color:#fff}
.reserva .calendario #ercalendar .checkout-calendar-shell,.reserva .calendario #ercalendar .vdp-datepicker,.reserva .calendario #ercalendar .vdp-datepicker__calendar,
.reserva .calendario #ercalendar .calendar-legend,.reserva .calendario #ercalendar .checkout-gift-button--modern{margin-left:0!important;margin-right:auto!important;max-width:460px}
.reserva .calendario #ercalendar .checkout-design__calendar,.reserva .calendario #ercalendar .checkout-calendar-column{text-align:left!important;padding-left:0!important}
.reserva .calendario #ercalendar .checkout-design__slots > .col-12,.reserva .calendario #ercalendar .checkout-design__slots{padding-left:0!important}
.reserva .calendario #ercalendar .checkout-slot-row .btn{-webkit-text-fill-color:#E9E1D3}
.reserva .calendario #ercalendar .checkout-slot-row .btn-danger{-webkit-text-fill-color:rgba(233,225,211,.34);text-decoration:line-through;text-decoration-color:rgba(192,39,47,.9);cursor:not-allowed}
.reserva .calendario #ercalendar .checkout-slot-row .btn-danger::before{background:#0A0807;box-shadow:inset 0 0 0 1px rgba(233,225,211,.12)}
.reserva .calendario #ercalendar .checkout-slot-row .btn-danger:hover::before{background:#0A0807!important;box-shadow:inset 0 0 0 1px rgba(233,225,211,.12)!important}
.reserva .calendario #ercalendar .checkout-form-back--classic{-webkit-text-fill-color:#E9E1D3}
.reserva .calendario #ercalendar .checkout-modern-payment-panel__cta{-webkit-text-fill-color:#C0272F}
.reserva .calendario #ercalendar .row{justify-content:flex-start!important;margin-left:0!important;margin-right:0!important}
.reserva .calendario #ercalendar .checkout-design__calendar>*{margin-left:0!important}
/* El «Volver» de las horas en el móvil también viene naranja en línea */
.reserva .calendario #ercalendar .input-booking{position:relative;isolation:isolate;overflow:hidden;border:0!important;border-radius:2px!important;-webkit-text-fill-color:#E9E1D3;font:600 13px "Archivo",sans-serif!important;letter-spacing:.16em;text-transform:uppercase}
.reserva .calendario #ercalendar .input-booking::before{content:"";position:absolute;inset:0;z-index:-1;background:#0A0807;box-shadow:inset 0 0 0 1.5px rgba(233,225,211,.35)}
.reserva .calendario #ercalendar .input-booking svg{color:#E9E1D3;fill:currentColor}
/* Bonos (widget de cupón): el botón de pago viene verde en línea, sin !important */
.reserva .calendario #ercalendar button[type="submit"].btn-primary{background:#0A0807!important;border:3px solid #C0272F!important;color:#C0272F!important;-webkit-text-fill-color:#C0272F;border-radius:4px!important;
  font:400 26px/1 "Bebas Neue",Impact,sans-serif!important;letter-spacing:.1em;text-transform:uppercase;padding:13px 28px 9px!important;box-shadow:none!important;transform:rotate(-2deg);filter:url(#tinta);transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .18s}
.reserva .calendario #ercalendar button[type="submit"].btn-primary:hover{background:#C0272F!important;color:#0A0807!important;-webkit-text-fill-color:#0A0807;transform:rotate(-2deg) scale(.96)}
.reserva .calendario #ercalendar button[type="submit"].btn-primary:active{transform:rotate(-2deg) scale(.9)}
.reserva .calendario #ercalendar .checkout-design__form{text-align:left}

/* ---------- El desplegable de paises del telefono (23-sep-2026) ----------
   Comprobado en el navegador: la lista trae 244 paises por orden alfabetico ingles, abre por
   Afganistan, Espana esta en el puesto 205 y no hay buscador ni pais por defecto. Es friccion
   en cada reserva.
   Esto sube los seis de siempre al principio con `order`. Solo cambia el orden en pantalla: el
   valor que se envia lo sigue decidiendo el widget, asi que no puede corromper una reserva. */
.reserva .calendario #ercalendar .vti__dropdown-list{display:flex;flex-direction:column;max-height:264px}
.reserva .calendario #ercalendar .vti__dropdown-item{flex:0 0 auto}
.reserva .calendario #ercalendar .vti__dropdown-item:has(.vti__flag.es){order:-6}
.reserva .calendario #ercalendar .vti__dropdown-item:has(.vti__flag.pt){order:-5}
.reserva .calendario #ercalendar .vti__dropdown-item:has(.vti__flag.fr){order:-4}
.reserva .calendario #ercalendar .vti__dropdown-item:has(.vti__flag.gb){order:-3}
.reserva .calendario #ercalendar .vti__dropdown-item:has(.vti__flag.it){order:-2}
.reserva .calendario #ercalendar .vti__dropdown-item:has(.vti__flag.de){order:-1;
  border-bottom:2px solid rgba(192,39,47,.55);margin-bottom:4px;padding-bottom:6px}

/* El cursor dentro del widget (25-sep-2026).
   Solo cursor: ni una regla de tamano, color o posicion. El widget sigue siendo suyo.
   Sus botones son Bootstrap y traen cursor:pointer de fabrica, asi que sin esto quedaban los
   unicos dos sitios de la web donde salia la manita. Los campos de texto conservan su cursor de
   escribir, porque ahi un cuchillo estorba para escribir un correo o un telefono. */
#app a,#app button,#app [role=button],#app .btn,#app label,
#app .dia,#app .hora,#app .slot{cursor:var(--cur-p)}
#app input,#app textarea,#app select{cursor:auto}
#app input[type=text],#app input[type=email],#app input[type=tel],#app textarea{cursor:text}
