@charset "UTF-8";
/* =========================================================
   El Batman · Estilo del proceso de reserva (QuickCal/Booked)
   Lo carga el plugin elbatman-ajustes. No editar en el servidor:
   los cambios se hacen en GitHub y Plesk los despliega.
   ========================================================= */

:root {
  --eb-rojo: #B3261E;
  --eb-rojo-osc: #7A1712;
  --eb-rojo-suave: #FDF1EF;
  --eb-tinta: #1F1B19;
  --eb-gris: #6B625E;
  --eb-fondo: #FAF7F4;
  --eb-linea: #EAE3DE;
  --eb-apagado: #A39892;
}

/* Color base de botones de QuickCal (sustituye al verde) */
body { --booked_button_color: #B3261E !important; }

/* ---------- Calendario ---------- */
.booked-calendar-wrap .booked-calendar {
  background: #fff;
  border: 1px solid var(--eb-linea) !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(31, 27, 25, .06);
}

/* Cabecera del mes */
.booked-calendar .bc-head .bc-row.top,
.booked-calendar .bc-head .bc-row.top .bc-col {
  background: #fff !important;
  color: var(--eb-tinta) !important;
  border: 0 !important;
}
.booked-calendar .bc-head .bc-row.top .bc-col { padding: 18px 20px !important; }
.booked-calendar .bc-head .monthName {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: capitalize;
  color: var(--eb-tinta) !important;
}
.booked-calendar .bc-head .page-left,
.booked-calendar .bc-head .page-right {
  width: 44px; height: 44px;
  border: 1px solid var(--eb-linea);
  border-radius: 12px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  color: var(--eb-tinta) !important;
  top: 50% !important; transform: translateY(-50%);
  transition: background .15s;
}
.booked-calendar .bc-head .page-left:hover,
.booked-calendar .bc-head .page-right:hover { background: var(--eb-fondo); }

/* Días de la semana */
.booked-calendar .bc-head .bc-row.days,
.booked-calendar .bc-head .bc-row.days .bc-col {
  background: #fff !important;
  color: var(--eb-gris) !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.booked-calendar .bc-head .bc-row.days { border-bottom: 1px solid var(--eb-linea) !important; }

/* Celdas */
.booked-calendar .bc-body .bc-col {
  border-color: #F0EAE6 !important;
  background: #fff;
}
.booked-calendar .bc-body .bc-col .date {
  color: var(--eb-tinta) !important;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.booked-calendar .bc-body .bc-col .date .number {
  border-radius: 50% !important;
  transition: background .15s, color .15s;
}
/* Pasados / otro mes / sin turnos */
.booked-calendar .bc-body .bc-col.prev-date,
.booked-calendar .bc-body .bc-col.prev-month,
.booked-calendar .bc-body .bc-col.next-month,
.booked-calendar .bc-body .bc-col.blur,
.booked-calendar .bc-body .bc-col.booked {
  background: #F6F2EF !important;
}
.booked-calendar .bc-body .bc-col.prev-date .date,
.booked-calendar .bc-body .bc-col.prev-month .date,
.booked-calendar .bc-body .bc-col.next-month .date,
.booked-calendar .bc-body .bc-col.blur .date,
.booked-calendar .bc-body .bc-col.booked .date {
  color: var(--eb-apagado) !important;
}
/* Disponibles: hover */
.booked-calendar .bc-body .bc-col .date.tooltipster:hover .number {
  background: var(--eb-rojo-suave) !important;
  color: var(--eb-rojo-osc) !important;
}
/* Hoy */
.booked-calendar .bc-body .bc-col.today .date .number {
  border: 2px solid var(--eb-rojo) !important;
  color: var(--eb-rojo) !important;
  background: #fff !important;
}
/* Día seleccionado */
.booked-calendar .bc-body .bc-col.active,
.booked-calendar .bc-body .bc-col.active:hover { background: var(--eb-fondo) !important; }
.booked-calendar .bc-body .bc-col.active .date .number {
  background: var(--eb-rojo) !important;
  color: #fff !important;
  border-color: var(--eb-rojo) !important;
  font-weight: 700;
}

/* ---------- Lista de turnos del día ---------- */
.booked-calendar .bc-row.entryBlock,
.booked-calendar .bc-row.entryBlock .bc-col {
  background: var(--eb-fondo) !important;
  border-color: var(--eb-linea) !important;
}
.booked-calendar .booked-appt-list {
  background: #fff;
  border: 1px solid var(--eb-linea);
  border-radius: 16px;
  box-shadow: none !important;
  padding: 22px 22px 10px !important;
}
.booked-appt-list h2 {
  font-family: Montserrat, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--eb-tinta) !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}
.booked-appt-list .timeslot {
  border: 1px solid var(--eb-linea) !important;
  border-radius: 14px;
  padding: 14px 16px !important;
  margin-bottom: 10px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.booked-appt-list .timeslot .timeslot-time,
.booked-appt-list .timeslot .timeslot-people {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
.booked-appt-list .timeslot .timeslot-title {
  font-family: Montserrat, sans-serif;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--eb-tinta) !important;
  text-transform: none;
}
.booked-appt-list .timeslot .spots-available {
  color: var(--eb-gris) !important;
  font-size: 13px !important;
  text-transform: none !important;
}
.booked-appt-list .timeslot button.new-appt,
.booked-appt-list .timeslot .button {
  background: var(--eb-rojo) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  min-height: 44px;
  padding: 0 18px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .02em;
  box-shadow: none !important;
  transition: background .15s;
}
.booked-appt-list .timeslot button.new-appt:hover { background: var(--eb-rojo-osc) !important; }
.booked-appt-list .timeslot button[disabled],
.booked-appt-list .timeslot .button[disabled] {
  background: var(--eb-linea) !important;
  color: #8A7F79 !important;
  cursor: default;
}
.booked-appt-list .timeslot:has(button[disabled]) { background: #FBF9F7; }

/* ---------- Ventana de reserva ---------- */
.booked-modal .bm-overlay { background: rgba(31, 27, 25, .55) !important; }
.booked-modal .bm-window {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25) !important;
}
.booked-modal .booked-title-bar {
  background: var(--eb-rojo) !important;
  font-family: Montserrat, sans-serif;
  font-weight: 700 !important;
  letter-spacing: .04em;
  padding: 18px 24px !important;
}
.booked-modal .booked-form { background: var(--eb-fondo); }
.booked-modal .booked-appointment-details {
  background: #fff !important;
  border: 1px solid var(--eb-linea) !important;
  border-radius: 14px;
  box-shadow: none !important;
}
.booked-modal .appointment-title {
  color: var(--eb-rojo) !important;
  font-family: Montserrat, sans-serif;
  font-weight: 700 !important;
}
.booked-modal .field-label {
  font-family: Montserrat, sans-serif;
  font-weight: 700 !important;
  color: var(--eb-tinta) !important;
}
.booked-modal .required-asterisk { color: var(--eb-rojo) !important; }
.booked-modal input.textfield,
.booked-modal input[type="text"],
.booked-modal input[type="email"],
.booked-modal input[type="tel"],
.booked-modal textarea,
.booked-modal select {
  border: 1px solid #D9CFC9 !important;
  border-radius: 12px !important;
  background: #fff !important;
  min-height: 48px;
  padding: 0 14px !important;
  font-size: 16px !important;
  color: var(--eb-tinta) !important;
  box-shadow: none !important;
}
.booked-modal textarea { padding: 12px 14px !important; }
.booked-modal input:focus,
.booked-modal textarea:focus,
.booked-modal select:focus {
  border-color: var(--eb-rojo) !important;
  outline: 3px solid rgba(179, 38, 30, .15) !important;
}
.booked-modal #submit-request-appointment,
.booked-modal .button-primary {
  background: var(--eb-rojo) !important;
  border: 0 !important;
  border-radius: 14px !important;
  min-height: 52px;
  padding: 0 26px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
  box-shadow: none !important;
}
.booked-modal #submit-request-appointment:hover { background: var(--eb-rojo-osc) !important; }
.booked-modal .button.cancel {
  background: #fff !important;
  border: 1px solid #D9CFC9 !important;
  border-radius: 14px !important;
  min-height: 52px;
  padding: 0 22px !important;
  color: var(--eb-tinta) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Móvil */
@media (max-width: 640px) {
  .booked-appt-list .timeslot { flex-wrap: wrap; }
  .booked-appt-list .timeslot .timeslot-people,
  .booked-appt-list .timeslot button.new-appt { width: 100% !important; }
  .booked-modal .bm-window { border-radius: 16px !important; }
}