/* Ocultar elementos por defecto del tema */
header.site-header,
header.page-header,
h1.entry-title {
  display: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f5f7fb;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
}

/* ======================================================
LAYOUT
====================================================== */

.barber-booking {
  max-width: 1100px;
  margin: auto;
  padding: 50px 20px 100px;
}

.card {
  background: #fff;
  border-radius: 36px;
  padding: 40px;
  margin-bottom: 25px;
 
  box-shadow: 0 10px 40px rgba(0,0,0,.05);
  animation: fadeUp .25s ease;
  scroll-margin-top: 40px; /* Margen para el auto-scroll */
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================================================
CABECERAS Y ANIMACIÓN PASO ACTIVO
====================================================== */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 38px;
  font-weight: 900;
  color: #000;
  transition: color 0.3s ease;
}

@keyframes pulseHint {
  0% { 
    color: rgba(54, 154, 254, 0.5); 
    text-shadow: none; 
  }
  50% { 
    color: rgba(54, 154, 254, 1); 
    text-shadow: 0 0 15px rgba(54, 154, 254, 0.6); 
  }
  100% { 
    color: rgba(54, 154, 254, 0.5); 
    text-shadow: none; 
  }
}

.section-title.step-active {
  color: #369afe;
  display: inline-block;
  animation: pulseHint 2s infinite ease-in-out;
}

/* --- BOTÓN MODIFICAR (Diseño suave recuperado) --- */
.modify-btn {
  background: #f0f7ff;
  border: 1px solid #cce4ff;
  color: #369afe; 
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 5px;
  transition: .2s;
  white-space: nowrap !important; 
  flex-shrink: 0 !important; 
}

.modify-btn:hover {
  background: #eef8ff;
}
/* ======================================================
SERVICIOS
====================================================== */
/* ======================================================
   ANIMACIÓN "SERVICIOS / ELIGE" (Añadido)
====================================================== */

/* Contenedor principal de la tarjeta de precios de la home */
.home-tarjeta-servicios {
    background: #fff;
    width: 100%; 
    max-width: 420px;
    border-radius: 36px; 
    padding: 40px;      
    box-shadow: 0 10px 40px rgba(0,0,0,.05); 
    border: 1px solid #ececec; 
    margin: 0 auto; 
    font-family: Arial, Helvetica, sans-serif; 
}

/* ======================================================
   ANIMACIÓN TÍTULO SERVICIOS (NEÓN AZUL Y ROJO)
====================================================== */

.contenedor-animacion-bucle-limpio {
    width: 100%; 
    display: flex; 
    justify-content: flex-start !important; 
    align-items: center;
    margin-bottom: 12px; 
    margin-top: -8px;
}

.efecto-corte-bucle-limpio {
    margin: 0; padding: 0; position: relative;
    font-size: 38px; 
    font-weight: 900; 
    color: transparent; 
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif; 
    display: inline-block; 
    height: 1.2em;
    background: transparent;
    text-shadow: none;
    text-align: left; 
}

/* Palabra base invisible */
.efecto-corte-bucle-limpio span:nth-child(1) {
    visibility: hidden;
    display: block;
}

/* MITAD SUPERIOR (Azul claro neón) */
.efecto-corte-bucle-limpio span:nth-child(2){
    position: absolute; top: 0; left: 0; right: 0;
    color: #00d4ff; 
    background: transparent;
    text-shadow: none;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    overflow: hidden;
    text-align: left;
    animation: openingTop 6s ease-in-out infinite;
}

/* MITAD INFERIOR (Azul claro neón) */
.efecto-corte-bucle-limpio span:nth-child(3){
    position: absolute; top: 0; left: 0; right: 0;
    color: #00d4ff; 
    background: transparent;
    text-shadow: none;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    overflow: hidden;
    text-align: left;
    animation: openingBottom 6s ease-in-out infinite;
}

/* PALABRA CENTRAL "ELIGE" (Rojo/Fucsia neón) */
.efecto-corte-bucle-limpio span:nth-child(4){
    position: absolute; top: 50%; left: 0;
    transform: translateY(-50%) scaleY(0);
    width: 100%; 
    color: #ff005e; 
    background: transparent; 
    text-shadow: none;
    font-size: 0.42em; 
    font-weight: 900; 
    letter-spacing: 0.4em; 
    padding-left: 0.2em; 
    text-align: center;
    z-index: 10; 
    animation: showingElige 6s ease-in-out infinite;
}

/* --- ESTADO PAUSADO (Cuando se selecciona un servicio) --- */
.efecto-corte-bucle-limpio.animacion-pausada span {
    animation: none !important; 
}
/* Al pausar, devolvemos las dos mitades azules a su sitio para que se lea "SERVICIOS" */
.efecto-corte-bucle-limpio.animacion-pausada span:nth-child(2),
.efecto-corte-bucle-limpio.animacion-pausada span:nth-child(3) {
    transform: translateY(0) !important; 
}
/* Al pausar, ocultamos la palabra roja "ELIGE" */
.efecto-corte-bucle-limpio.animacion-pausada span:nth-child(4) {
    transform: translateY(-50%) scaleY(0) !important;
    opacity: 0 !important;
}

/* --- KEYFRAMES DEL BUCLE --- */
@keyframes openingTop {
    0%, 33%, 100% { transform: translateY(0); } 
    42%, 75% { transform: translateY(-14px); }  
}

@keyframes openingBottom {
    0%, 33%, 100% { transform: translateY(0); } 
    42%, 75% { transform: translateY(14px); }   
}

@keyframes showingElige {
    0%, 33%, 100% { transform: translateY(-50%) scaleY(0); opacity: 0; } 
    42%, 75% { transform: translateY(-50%) scaleY(1); opacity: 1; } 
}

/* --- LISTA DE SERVICIOS (HOME) --- */
.home-lista-servicios { 
    display: flex; flex-direction: column; gap: 12px; 
}

.home-item-servicio {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; 
    border: 1px solid #e2e8f0; 
    border-radius: 14px;      
    background-color: #fff;
    transition: all 0.2s ease;
}

.home-item-servicio:hover {
    border-color: #7ec7ff;
    background: #eef8ff;
}

.home-info-servicio { 
    display: flex; align-items: center; 
    font-size: 18px; 
    font-weight: 700; color: #000; 
}

.home-icono { 
    font-size: 1.2rem; width: 20px; display: flex; justify-content: center; 
}

.home-separador { 
    margin: 0 10px; font-weight: bold; color: #000; 
}

.home-precio-servicio { 
    font-size: 18px; 
    font-weight: 900; color: #000; 
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: 0 !important; /* Quitamos el gap para animar fluidamente */
  width: 100%;
}


.service-block {
  background: #fff;
  /* Eliminamos el border real para usar box-shadow como borde falso */
  border: none;
  /* El box-shadow dibuja un borde de 1px hacia adentro sin ocupar espacio físico en el DOM */
  box-shadow: inset 0 0 0 1px #e2e8f0;
  border-radius: 14px;
  padding: 7px 11px; /* Compensamos el px del borde que acabamos de quitar */
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  
  width: 100%;
  transform: translateZ(0);
  
  /* AJUSTE: Bajamos max-height a 80px para eliminar el "aire invisible" del tirón */
  margin-bottom: 8px; 
  max-height: 80px; 
  overflow: hidden; 
  opacity: 1;
  
  /* AJUSTE: Tiempos 100% unificados a 1.6s para que no haya desincronización */
  transition: max-height 1.6s cubic-bezier(.22, 1, .36, 1), 
              opacity 1.6s cubic-bezier(.22, 1, .36, 1), 
              margin-bottom 1.6s cubic-bezier(.22, 1, .36, 1), 
              padding 1.6s cubic-bezier(.22, 1, .36, 1), 
              background 0.3s ease, 
              box-shadow 1.2s ease;
  color: #000;
}

/* El último elemento no necesita margen debajo */
.service-block:last-child {
  margin-bottom: 0;
}

/* CLASE NUEVA: Hace desaparecer la tarjeta suavemente */
.service-block.colapsado {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

.service-block:hover {
  background: #eef8ff;
  box-shadow: inset 0 0 0 1px #7ec7ff;
}

.service-block.active {
  background: #7ec7ff !important;
  /* Cambiamos el color y grosor del borde falso (inset) y añadimos la sombra exterior brillante */
  box-shadow: inset 0 0 0 2px #369afe, 0 4px 15px rgba(54,154,254,.18) !important;
}







.service-name,
.service-price {
  font-size: 18px;
  font-weight: 700;
}

.service-price {
  font-weight: 900;
}

/* Contenedor para agrupar el nombre y la descripción a la izquierda */
.service-info-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  padding-right: 20px;
  padding-top: 8px;
}

/* Estilo para el texto de la descripción */
.service-desc {
  font-size: 14px;
  font-weight: 400;
  color: #666; 
  font-style: italic; 
}

/* ======================================================
INPUTS Y VALIDACIONES
====================================================== */

input {
  width: 100%;
  height: 82px;
  border-radius: 22px;
  border: 2px solid #ececec;
  padding: 0 24px;
  font-size: 20px;
  font-weight: 700;
  outline: none;
  background: #fff;
  transition: 0.2s;
}

input:focus {
  border-color: #369afe;
}

.hidden {
  display: none !important;
}

/* Validaciones y Error Teléfono */
.input-error {
    border-color: #ff3b3b !important;
    background-color: #fff5f5 !important;
    animation: shakeError 0.3s ease-in-out;
}

.error-msg {
    color: #ff3b3b;
    font-size: 14px;
    font-weight: 800;
    margin-top: 8px;
    margin-left: 20px;
    display: none; 
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* ======================================================
HORAS Y BARBEROS
====================================================== */

.time-row {
  background: #fff;
  border-radius: 22px;
  padding: 16px 24px;
  margin-bottom: 10px;
  border: 2px solid #f1f1f1;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-height: 120px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 1.6s cubic-bezier(.22, 1, .36, 1),
              opacity 1.6s cubic-bezier(.22, 1, .36, 1),
              margin-bottom 1.6s cubic-bezier(.22, 1, .36, 1),
              padding 1.6s cubic-bezier(.22, 1, .36, 1),
              border-width 1.6s cubic-bezier(.22, 1, .36, 1),
              border-color 1.6s cubic-bezier(.22, 1, .36, 1);
}

.time-row.colapsado {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  pointer-events: none;
}

.time-label {
  font-size: 32px;
  font-weight: 900;
  min-width: 100px;
  color: #333;
}

.time-barbers {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  width: 100%;
}

.time-btn {
  flex: 1;
  background: #ecfdf5;
  border: 2px solid #a7f3d0;
  padding: 14px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: #059669;
  transition: .2s;
  text-align: center;
}

.time-btn:hover {
  background: #d1fae5;
  border-color: #34d399;
  transform: translateY(-2px);
}

.hour-selected,
.time-btn.hour-selected {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(5,150,105,.25);
}

.time-btn-disabled {
  background: #fff0f3 !important;
  border-color: #ffb3c6 !important;
  color: #FF577B !important;
  opacity: .6 !important;
  pointer-events: none;
}

/* ======================================================
BOTÓN RESERVAR
====================================================== */

.reserve-btn {
  width: 100%;
  height: 84px;
  border: none;
  border-radius: 24px;
  background: #369afe;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 30px;
  transition: 0.2s;
}

/* ======================================================
FLATPICKR DESKTOP (UNIFICADO)
====================================================== */

.flatpickr-input {
  display: none !important;
}

.flatpickr-calendar {
  width: 100% !important;
  max-width: 100% !important;
  background: #fff !important;
  border: none !important;
  border-radius: 34px !important;
  padding: 18px 14px 15px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  position: relative !important;
  height: auto !important; 
  max-height: none !important;
}

#calendar-wrapper {
  overflow: hidden;
  transition: max-height 1.6s cubic-bezier(.22, 1, .36, 1),
              opacity 1.6s cubic-bezier(.22, 1, .36, 1),
              padding 1.6s cubic-bezier(.22, 1, .36, 1),
              margin 1.6s cubic-bezier(.22, 1, .36, 1);
  max-height: 1000px;
  opacity: 1;
}

#calendar-wrapper.wrapper-colapsado {
  max-height: 320px;
}

.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days {
  width: 100% !important;
}

.flatpickr-innerContainer {
  margin-bottom: 20px !important; 
  display: block !important;
}

.flatpickr-months {
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 60px !important;
  position: relative !important;
}

.flatpickr-current-month {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: auto !important;
  min-width: max-content !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month .cur-year {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #000 !important; /* Añadimos color negro explícito */
}

.flatpickr-current-month input.cur-year {
  width: 72px !important;
  min-width: 72px !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
}

.flatpickr-prev-month {
  left: 0 !important;
}

.flatpickr-next-month {
  right: 0 !important;
}

.flatpickr-prev-month .nav-btn,
.flatpickr-next-month .nav-btn {
  font-size: 24px !important;
  color: #000 !important;
}

.flatpickr-weekdays {
  margin-bottom: 16px !important;
}

.flatpickr-weekdaycontainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
}

.flatpickr-weekday {
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #333 !important;
}

.flatpickr-weekday.selected-weekday {
  background: #7ec7ff !important;
  border: 2px solid #369afe !important;
  color: #000 !important;
  border-radius: 14px !important;
  padding: 8px 0 !important;
  transition: .2s;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 14px !important;
  padding-top: 10px !important;
}

.flatpickr-day {
  width: 100% !important;
  max-width: 100% !important;
  height: 65px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: 1px solid #ececec !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #333 !important;
  transition: .2s;
}

.flatpickr-day:hover {
  background: #eef8ff !important;
}

.flatpickr-day:nth-child(7n):not(.flatpickr-disabled) {
    background: #fff7f8 !important;
    border: 1px solid #ffe0e6 !important;
    color: #ff3b3b !important;
}

/* PROBLEMA 2: Borde negro en el día actual, siempre visible en cualquier estado
   (disponible, deshabilitado, festivo, domingo).
   box-shadow inset actúa como respaldo visual cuando otras reglas sobreescriben el border. */
.flatpickr-day.today,
.flatpickr-day.today.flatpickr-disabled,
.flatpickr-day.today.is-holiday {
  border: 2px solid #111111 !important;
  box-shadow: inset 0 0 0 1px #111111 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #d3d3d3 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #7ec7ff !important;
  border: 2px solid #369afe !important;
  color: #000 !important;
}

/* Días del mes anterior y siguiente (Espacios en blanco) */
.flatpickr-day.prevMonthDay, 
.flatpickr-day.nextMonthDay {
    visibility: visible !important;
    display: flex !important;
    opacity: 0.3 !important; 
    color: #333 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    pointer-events: none !important; 
}

/* ======================================================
BOTÓN IR A HOY
====================================================== */

.calendar-today-btn {
    position: relative !important;
    margin: 10px auto !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 60px);
    height: 58px;
    border-radius: 18px;
    border: 1px solid #ececec;
    background: #fff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    z-index: 10;
}

.today-icon {
  width: 18px;
  height: 18px;
  border: 2px solid #000;
  border-radius: 5px;
}

/* ======================================================
RESPONSIVE MÓVIL
====================================================== */

@media(max-width:768px){
  .barber-booking {
    padding: 10px 10px 10px !important;
  }
 .card {
    padding: 24px 18px 10px 18px !important;
    margin-bottom: 15px !important;
    border-radius: 28px !important;
}
  .section-header {
    margin-bottom: 2px !important;
  }
  .section-title {
    font-size: 22px !important; 
    line-height: 1.25 !important; 
    max-width: 75% !important; 
    white-space: nowrap !important; 
  }
  .modify-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;      
    justify-content: center !important;  
    line-height: 1 !important;
    white-space: nowrap !important; 
    flex-shrink: 0 !important;          
  }
  .services-list {
    gap: 0 !important; /* Aniquilamos el gap para que no deje espacios vacíos */
  }
.service-block {
    padding: 2px 12px !important;
    border-radius: 16px !important;
}

.service-desc{
    line-height: 1 !important;
    margin-top: -2px !important;
}

.service-name,
.service-price {
    font-size: 15px !important;
}

  input {
    height: 50px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    padding: 0 14px !important;
  }
  .flatpickr-calendar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 14px 10px 10px !important;
    border-radius: 28px !important;
    box-shadow: none !important;
  }
  .flatpickr-innerContainer {
    padding-bottom: 0px !important; 
  }
  .flatpickr-months {
    margin-top: -8px !important;
    height: 58px !important;
    margin-bottom: 4px !important;
  }
  .flatpickr-current-month,
  .flatpickr-current-month .cur-month,
  .flatpickr-current-month .cur-year {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #000 !important; /* Fuerza el negro intenso en móviles */
  }
  .flatpickr-current-month {
    gap: 8px !important;
  }
  .flatpickr-current-month input.cur-year {
    width: 80px !important;
    min-width: 80px !important;
  }
  .flatpickr-prev-month,
  .flatpickr-next-month {
    width: 36px !important;
    height: 36px !important;
  }
  .flatpickr-prev-month .nav-btn,
  .flatpickr-next-month .nav-btn {
    font-size: 24px !important;
  }
  .flatpickr-weekdays {
    margin-bottom: 6px !important;
  }
  .flatpickr-weekday {
    font-size: 13px !important;
  }

  .flatpickr-weekday.selected-weekday {
    background: #7ec7ff !important;
    color: #000 !important;
    border-radius: 10px !important;
    padding: 4px 0 !important;
    transition: .2s;
  }

 .dayContainer {
    gap: 4px !important;
    padding-top: 12px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

  .flatpickr-day {
    height: 44px !important;
    max-width: 44px !important;
    margin: auto !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    border: 1px solid #f1f1f1 !important;
  }

  /* PROBLEMA 2 móvil: borde negro del día actual en todos los estados */
  .flatpickr-day.today,
  .flatpickr-day.today.flatpickr-disabled,
  .flatpickr-day.today.is-holiday {
    border: 2px solid #111111 !important;
    box-shadow: inset 0 0 0 1px #111111 !important;
  }

  .flatpickr-day.selected,
  .flatpickr-day.selected:hover {
    background: #7ec7ff !important;
    border: 2px solid #369afe !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  .flatpickr-day:nth-child(7n):not(.flatpickr-disabled) {
  background: #fff5f7 !important;
  border: 1px solid #ffd6de !important;
  color: #ff3b3b !important;
}

  .calendar-today-btn {
    width: calc(100% - 40px);
    height: 46px;
    border-radius: 16px;
    font-size: 14px;
    gap: 8px;
  }

  .today-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }

  .time-row {
    padding: 12px 10px !important;
    gap: 10px !important;
    border-radius: 18px !important;
  }
  .time-label {
    font-size: 18px !important;
    min-width: 55px !important;
  }
  .time-barbers {
    gap: 6px !important;
  }
  .time-btn {
    padding: 12px 2px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }
  .time-btn:hover {
    transform: none !important;
  }
}

/* ======================================================
MINI SEMANA REAL
====================================================== */

.calendar-collapsed .flatpickr-prev-month,
.calendar-collapsed .flatpickr-next-month {
    display: none !important;
}

.calendar-collapsed.flatpickr-calendar,
.calendar-collapsed .flatpickr-innerContainer,
.calendar-collapsed .flatpickr-rContainer,
.calendar-collapsed .flatpickr-days {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

.calendar-collapsed .calendar-today-btn {
  display: none !important;
}

.calendar-collapsed .flatpickr-months {
  display: flex !important; 
  height: 60px !important; 
  margin-bottom: 10px !important;
}

.calendar-collapsed .flatpickr-weekdays {
    margin-bottom: 12px !important;
    height: auto !important; 
    overflow: visible !important; 
}

.calendar-collapsed .flatpickr-weekdaycontainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    padding: 5px 10px !important;
    box-sizing: border-box !important;
    gap: 0 !important; 
    height: auto !important; 
    overflow: visible !important;
}

.calendar-collapsed .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ececec !important;
    border-radius: 24px !important;
    background: #fff !important;
    overflow: visible !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

.calendar-collapsed .flatpickr-weekday {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important; 
    padding: 0 !important; 
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: .2s;
}

.calendar-collapsed .flatpickr-weekday.selected-weekday {
    background: #7ec7ff !important;
    border: 2px solid #369afe !important;
    color: #000 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(54,154,254,.3) !important;
    transform: scale(1.05);
}

.calendar-collapsed .flatpickr-day {
  display: none !important;
}

.calendar-collapsed .flatpickr-day.week-visible {
  all: unset;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important; 
  height: 40px !important;
  margin: 0 auto !important; 
  background: #fff !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #222 !important;
  box-sizing: border-box !important;
  transition: .2s;
  position: relative !important;
}





.calendar-collapsed .flatpickr-day.selected {
  background: #7ec7ff !important; 
  border: 2px solid #369afe !important; 
  color: #000 !important; 
  box-shadow: 0 4px 12px rgba(54,154,254,.3) !important;
  transform: scale(1.05);
}

.calendar-collapsed .flatpickr-day.week-visible:nth-child(7n) {
  background: #fff5f7 !important;
  border: 1px solid #ffd6de !important;
  color: #ff3b3b !important;
}

.calendar-collapsed .flatpickr-day.week-visible.selected:nth-child(7n) {
  background: #ff3b3b !important;
  border: 2px solid #cc0000 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.3) !important;
}

.time-label, 
.time-btn {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.time-label {
    width: 25% !important; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 5px !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
}

.time-barbers {
    width: 75% !important; 
    display: flex !important;
    gap: 10px !important;
}

.time-btn {
    flex: 1 !important; 
    padding: 8px 5px !important;
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;     
    height: 44px !important;            
    line-height: normal !important;
    text-align: center !important; 
}

.hour-selected,
.time-btn.hour-selected {
  background-color: #7ec7ff !important;
  color: #000 !important;
  border: 2px solid #369afe !important;
  box-shadow: 0 4px 15px rgba(54,154,254,.18) !important;
}

.time-label-selected {
    background-color: #7ec7ff !important;
    color: #000 !important;
    border: 2px solid #369afe !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(54,154,254,.18) !important;
}

.booking-summary-global{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:25px;
  margin-bottom:20px;
}

.summary-item{
  flex:1;
  min-width:95px;
  background:#bef4be;
  border:2px solid #28a745;
  border-radius:14px;
  padding:10px 12px;
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:#111;
  transition:.25s ease;
}

.summary-item.empty{
  background:#f5f5f5;
  border-color:#e3e3e3;
  color:#999;
  opacity:.7;
}

/* ======================================================
   DÍAS PASADOS EN LA MINI SEMANA (Gris)
====================================================== */
.calendar-collapsed .flatpickr-day.week-visible.flatpickr-disabled,
.calendar-collapsed .flatpickr-day.week-visible.flatpickr-disabled:nth-child(7n) {
    color: #d3d3d3 !important;
    background: #fafafa !important;
    border: 1px solid #ececec !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

@media(max-width:768px){
  .booking-summary-global{
    gap: 4px !important; /* Juntamos un poco más las cajas */
    margin-top: 15px !important; /* Subimos la barra para acercarla a la tarjeta */
    margin-bottom: 8px !important;
    flex-wrap: nowrap !important; /* MAGIA: Fuerza a que se queden en una sola línea */
  }
.summary-item{
    font-size: 10px !important; /* Letra un poco más pequeña */
    padding: 8px 4px !important; /* Quitamos relleno lateral para ganar espacio */
    border-radius: 10px !important;
    min-width: 0 !important; /* Permite que las cajas se encojan si hace falta */
    
    /* FIX: Evita que el texto rompa el contenedor */
    display: block !important; 
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    line-height: 1.2 !important; /* Ajuste para centrar el texto verticalmente al usar block */
    text-align: center !important;
  }
}

/* Texto de error */
.error-msg {
  color: #ff3b3b;
  font-size: 12px;
  margin-top: 5px;
  display: block;
  font-weight: bold;
}

/* Efecto vibración */
.shake {
  animation: shake 0.4s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.midday-separator{
  width: 100%;
  text-align: center;
  background: #f3f3f3;
  border: 2px dashed #d8d8d8;
  color: #777;
  font-weight: 800;
  padding: 18px 10px;
  margin: 20px 0;
  border-radius: 16px;
  font-size: 15px;
  letter-spacing: 1px;
  box-sizing: border-box;
  max-height: 100px;
  overflow: hidden;
  opacity: 1;
  transition: max-height 1.6s cubic-bezier(.22, 1, .36, 1),
              opacity 1.6s cubic-bezier(.22, 1, .36, 1),
              margin 1.6s cubic-bezier(.22, 1, .36, 1),
              padding 1.6s cubic-bezier(.22, 1, .36, 1),
              border-width 1.6s cubic-bezier(.22, 1, .36, 1),
              border-color 1.6s cubic-bezier(.22, 1, .36, 1);
}

.midday-separator.colapsado {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  pointer-events: none;
}

/* Asistentes bloqueados o que no dan el servicio */
.time-btn.time-btn-disabled {
    background-color: #ffe5e5 !important; 
    color: #ff3b3b !important;            
    border: 2px solid #ff3b3b !important; 
    cursor: not-allowed !important;       
    opacity: 0.6;                         
    pointer-events: none;                 
}

/* ======================================================
   DÍAS FESTIVOS Y DOMINGOS SIN DISPONIBILIDAD (AMELIA)
   PROBLEMA 8:  Festivos y domingos sin disponibilidad → Estilo idéntico a amelia-panel.css
   PROBLEMA 11: Estado C (festivo) y D (domingo) visualmente idénticos.
   PROBLEMA 3:  Sin modal — el cursor pointer permite mostrar el mensaje inferior.
====================================================== */

/* Vista normal del calendario */
.flatpickr-calendar .flatpickr-day.is-holiday,
.flatpickr-calendar .flatpickr-day.is-holiday.flatpickr-disabled {
    color: #dc2626 !important;
    border-color: #f87171 !important;
    background: #fef2f2 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.flatpickr-calendar .flatpickr-day.is-holiday:hover,
.flatpickr-calendar .flatpickr-day.is-holiday.flatpickr-disabled:hover {
    background: #fee2e2 !important; /* Un tono un pelín más oscuro al pasar el ratón */
    cursor: pointer !important;
}

/* Cuando el festivo/domingo tiene disponibilidad y se selecciona (Aperturas futuras) */
.flatpickr-calendar .flatpickr-day.is-holiday.selected {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* Vista "Mini Semana Real" (Calendario colapsado) */
.calendar-collapsed .flatpickr-day.week-visible.is-holiday,
.calendar-collapsed .flatpickr-day.week-visible.is-holiday.flatpickr-disabled {
    color: #dc2626 !important;
    border: 1px solid #f87171 !important;
    background: #fef2f2 !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.calendar-collapsed .flatpickr-day.week-visible.is-holiday.selected {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* PROBLEMA 11-D: Días cerrados genéricos (sin disponibilidad, no festivo, no domingo)
   También tienen cursor pointer para el mensaje inferior. */
.flatpickr-day.flatpickr-disabled:not(.prevMonthDay):not(.nextMonthDay) {
    cursor: pointer !important;
}

.calendar-collapsed .flatpickr-day.week-visible.is-holiday.selected {
    background: #e53e3e !important;
    border-color: #e53e3e !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3) !important;
}

/* PROBLEMA 11-D: Días cerrados genéricos (sin disponibilidad, no festivo, no domingo)
   También tienen cursor pointer para el mensaje inferior. */
.flatpickr-day.flatpickr-disabled:not(.prevMonthDay):not(.nextMonthDay) {
    cursor: pointer !important;
}

/* PROBLEMA 11-D: Días cerrados genéricos (sin disponibilidad, no festivo, no domingo)
   También tienen cursor pointer para el mensaje inferior. */
.flatpickr-day.flatpickr-disabled:not(.prevMonthDay):not(.nextMonthDay) {
    cursor: pointer !important;
}

/* ======================================================
   FORZAR OCULTAR BOTONES NO SELECCIONADOS
====================================================== */
.time-btn.hidden {
    display: none !important;
}

/* ======================================================
   TITULOS ANIMADOS MOVIL REAL
====================================================== */

@media(max-width:768px){
  .contenedor-animacion-bucle-limpio{
    margin-bottom: 10px !important;
  }
  .efecto-corte-bucle-limpio {
    font-size: 21px !important; 
    white-space: nowrap !important; 
    max-width: 100% !important; 
    height: 1.2em !important; 
  }
  .efecto-corte-bucle-limpio span:nth-child(4){
    font-size: 0.42em !important;
    letter-spacing: 0.25em !important;
  }

  @keyframes openingTop {
    0%, 33%, 100% { transform: translateY(0); }
    42%, 75% { transform: translateY(-8px); }
  }

  @keyframes openingBottom {
    0%, 33%, 100% { transform: translateY(0); }
    42%, 75% { transform: translateY(8px); }
  }
}

/* ======================================================
   NÚMEROS DE DISPONIBILIDAD (CENTRADO DEFINITIVO)
====================================================== */

.flatpickr-day {
    position: relative !important;
}

.availability-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #57d67b;
    color: white !important;
    font-size: 9px !important;
    font-weight: 700;
    
    /* FIX DE CENTRADO PARA MÓVILES (FLEX + LINE-HEIGHT:0) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 0 !important; 
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important; /* Ayuda a que los números dobles quepan mejor */
    
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    pointer-events: none;
    left: auto !important;
    transform: none !important;
}

/* Ajustes para cuando el calendario se colapsa (Mini Semana) */
.calendar-collapsed .availability-count {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    left: auto !important;
    transform: none !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 7px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    
    border-radius: 50%;
    z-index: 999 !important;
}

/* Ajuste para móviles */
@media(max-width: 768px) {
    .availability-count {
        width: 14px !important;
        height: 14px !important;
        font-size: 8px !important;
        top: -5px !important;
        right: -5px !important;
        line-height: 0 !important;
    }
}

/* ======================================================
   SUBIR ÚNICAMENTE EL BOTÓN MODIFICAR (AJUSTE FINO)
====================================================== */
.section-header .modify-btn {
    transform: translateY(-9px) !important;
}

/* ======================================================
   ESTILOS DEL NUEVO FORMULARIO (DISEÑO FINO Y ASTERISCO)
====================================================== */
.input-wrapper {
    position: relative !important;
    margin-bottom: 18px !important;
    width: 100%;
    display: block;
}

.input-wrapper input {
    width: 100% !important;
    height: 60px !important; 
    border-radius: 14px !important; 
    border: 1px solid #999 !important; 
    padding: 0 18px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #333 !important;
    outline: none !important;
    background: #fff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: 0.2s;
}

.input-wrapper input:focus {
    border-color: #369afe !important;
    box-shadow: 0 0 0 2px rgba(54, 154, 254, 0.15) !important;
}

.custom-placeholder {
    position: absolute !important;
    left: 18px !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #999 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    pointer-events: none !important; 
    transition: 0.2s ease !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.input-wrapper input:focus + .custom-placeholder,
.input-wrapper input:not(:placeholder-shown) + .custom-placeholder {
    opacity: 0 !important;
    visibility: hidden !important;
}

.custom-placeholder .asterisk {
    color: #ff3b3b !important;
    margin-right: 4px !important;
    font-weight: 900 !important;
}

.mandatory-note {
    color: #ff3b3b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-bottom: 25px !important;
    margin-top: 5px !important;
    padding-left: 5px !important;
}

.mandatory-note .asterisk {
    margin-right: 4px;
}

#clientNickname::placeholder {
    color: #999 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* ======================================================
   SEPARAR LOS DÍAS EN LA MINI SEMANA MÓVIL
====================================================== */
@media (max-width: 768px) {
  .calendar-collapsed .flatpickr-weekdaycontainer,
  .calendar-collapsed .dayContainer {
    gap: 6px !important; 
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .calendar-collapsed .flatpickr-weekday,
  .calendar-collapsed .flatpickr-day.week-visible {
    width: 100% !important; 
    min-width: 10px !important; 
    max-width: 100% !important;
  }
}

/* ======================================================
   CALENDARIO DINÁMICO (OCULTAR FILAS SOBRANTES)
====================================================== */

/* Si el día 36 (que es el primer día de la 6ª fila) pertenece al mes siguiente, ocultamos toda la fila 6 */
.dayContainer:has(.flatpickr-day.nextMonthDay:nth-child(36)) .flatpickr-day:nth-child(n+36) {
    display: none !important;
}

/* Si el día 29 (primer día de la 5ª fila) pertenece al mes siguiente (Ej: Febrero de 28 días que empieza en lunes), ocultamos fila 5 y 6 */
.dayContainer:has(.flatpickr-day.nextMonthDay:nth-child(29)) .flatpickr-day:nth-child(n+29) {
    display: none !important;
}

/* ======================================================
   AJUSTES DEL GLOBO DE CITAS (TAMAÑO Y POSICIÓN)
====================================================== */

/* Vista por defecto (PC y tablets) */
.flatpickr-day .availability-count {
    position: absolute !important;
    top: -6px !important;      
    right: -6px !important;    
    width: 20px !important;    
    height: 20px !important;
    font-size: 11px !important; 
    
    /* FIX DE CENTRADO PARA ESCRITORIO */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: -0.5px !important;
    
    border-radius: 50% !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    z-index: 2 !important;     
}

/* Vista específica para móviles */
@media (max-width: 768px) {
    .flatpickr-day .availability-count {
        top: -4px !important;      
        right: -4px !important;
        width: 18px !important;    
        height: 18px !important;
        font-size: 10px !important;
        line-height: 0 !important;
    }
}

/* Fuerza la ocultación absoluta de los botones de modificar */
.modify-btn {
    display: none !important;
}

/* Solo los muestra cuando se les quita la clase .hidden mediante JavaScript */
.modify-btn:not(.hidden) {
    display: block !important; 
}

/* ======================================================
   FIX DEFINITIVO BOTÓN RESERVAR (EVITAR GRANATE EN MÓVIL)
====================================================== */

/* Forzar la clase de tu botón en cualquier estado (activo, cargando, deshabilitado...) */
.reserve-btn,
.reserve-btn:active,
.reserve-btn:focus,
.reserve-btn:hover,
.reserve-btn:visited,
.reserve-btn[disabled],
.reserve-btn.is-loading,
.reserve-btn.success,
.el-button--primary,
.el-button--primary:active,
.el-button--primary:focus,
.am-button--primary,
.am-button--primary:active,
.am-button--primary:focus {
    background: #369afe !important;
    background-color: #369afe !important;
    border-color: #369afe !important;
    color: #ffffff !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Sobrescribir las variables nativas de Amelia por si las inyecta por JS */
:root {
    --am-c-primary: #369afe !important;
    --am-c-btn-prim: #369afe !important;
}

/* Evitar el sombreado oscuro al hacer tap en móviles */
button, a {
    -webkit-tap-highlight-color: transparent !important;
}

/* ======================================================
   NUEVOS COLORES DINÁMICOS PARA GLOBOS DE DISPONIBILIDAD
====================================================== */
.availability-count.count-green {
    background-color: #22c55e !important; /* Verde (Más de 1 cita) */
    color: #ffffff !important;
}

.availability-count.count-orange-soft {
    background-color: #fb923c !important; /* Naranja suave (Solo 1 cita) */
    color: #ffffff !important;
}

.availability-count.count-black {
    background-color: #111111 !important; /* Negro (0 citas) */
    color: #ffffff !important;
}


/* ======================================================
   NUEVA SECCIÓN: TIPO DE CITA (TARJETAS)
====================================================== */

.appointment-type-container {
    background: #ffffff;
    border-radius: 28px;
    padding: 15px 10px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.05);
    border: 1px solid #ececec;
    margin-top: 15px;
    margin-bottom: 25px;
}

.appointment-header {
    margin-bottom: 16px;
}

.appointment-title {
    color: #7ec7ff;
    font-size: 16px;
    font-weight: 900;
    margin: 0 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.appointment-header .appointment-subtitle {
    color: #999;
    font-size: 13px;
    margin: 0;
    font-weight: 500;
}

.appointment-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.type-card {
    flex: 1;
    border: 2px solid #ececec;
    border-radius: 20px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Ocultamos el radio de sistema */
.type-card input[type="radio"] {
    display: none;
}

.card-icon-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
}

.card-icon-title i {
    font-size: 20px;
    margin-right: 8px;
}

/* Colores base (Inactivos) */
#card-single .card-icon-title i { color: #369afe; }
#card-single .card-icon-title h4 { color: #333; }

#card-recurring .card-icon-title i {     color: #369afe; }
#card-recurring .card-icon-title h4 { color: #333; }

.card-icon-title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.type-card p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

/* Falso Radio Button Custom */
.radio-custom {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 2px solid #ececec;
    border-radius: 50%;
    background: #fff;
    transition: 0.2s;
}

/* Bordes del radio inactivo */
#card-single .radio-custom { border-color: #369afe; }
#card-recurring .radio-custom { border-color: #369afe; }

/* --- ESTADOS ACTIVOS --- */

#card-single.active {
    background: #f0f8ff;
    border-color: #369afe;
}
/* Al ensanchar el borde del radio, generamos el efecto de seleccionado */
#card-single.active .radio-custom {
    border-width: 5px;
}

#card-recurring.active {
    background: #f0f8ff;
    border-color: #369afe;
}
#card-recurring.active .radio-custom {
    border-width: 5px;
}

/* Select de semanas recurrente */
#recurring-options label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

#recurring-weeks {
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 2px solid #ececec;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    background: #f9f9f9;
    outline: none;
    transition: 0.2s;
}

#recurring-weeks:focus {
    border-color: #369afe;
    background: #fff;
}

/* ======================================================
   OVERRIDE DEL BOTÓN ACEPTAR CITA (FORZAR VERDE)
====================================================== */
#acceptBtn {
    background: #22c55e !important;
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
}

#acceptBtn:active,
#acceptBtn:focus,
#acceptBtn:hover {
    background: #16a34a !important;
    background-color: #16a34a !important;
    border-color: #16a34a !important;
}

/* ======================================================
   ESTILO DEFINITIVO BOTÓN CONFIRMAR RESERVA (AZUL)
====================================================== */
#confirmBooking {
    width: 100% !important;
    padding: 16px !important;
    height: auto !important;
    border-radius: 18px !important;
    background-color: #369afe !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(54, 154, 254, 0.35) !important;
    cursor: pointer !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
    display: block !important;
    text-align: center !important;
}

/* Efecto al pasar el ratón */
#confirmBooking:hover:not([disabled]) {
    background-color: #2b7bdb !important;
    box-shadow: 0 6px 20px rgba(54, 154, 254, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* Estado bloqueado mientras procesa ("Confirmando reserva...") 
   y estado de éxito ("✅ Reserva confirmada") */
#confirmBooking[disabled] {
    background-color: #369afe !important; /* Se mantiene en azul */
    box-shadow: 0 2px 10px rgba(54, 154, 254, 0.2) !important;
    opacity: 0.8 !important; /* Un poco translúcido para indicar que está pensando */
    cursor: wait !important; /* Cursor de reloj de arena */
    transform: none !important;
}

/* ======================================================
   FIX: SOLAPAMIENTO TEXTO Y RADIO BUTTON EN MÓVILES
====================================================== */

/* Margen de seguridad en todas las pantallas para que el texto no pise el radio */
.card-icon-title {
    padding-right: 24px !important; 
}

.card-icon-title h4 {
    line-height: 1.2 !important; /* Mejora la lectura si el texto salta a dos líneas */
}

/* Ajustes finos solo para la versión móvil */
@media (max-width: 768px) {
    .card-icon-title h4 {
        font-size: 12.5px !important; /* Hacemos el título un poco más pequeño */
    }
    
    .type-card p {
        font-size: 11px !important; /* Achicamos un punto la descripción para que respire */
    }
    
    .type-card {
        padding: 14px 10px !important; /* Reducimos los bordes internos de la tarjeta para ganar anchura de texto */
    }
    
}

/* Domingo con disponibilidad = comportamiento normal (Mes Completo y Mini Semana) */
.flatpickr-day.has-availability:nth-child(7n),
.calendar-collapsed .flatpickr-day.week-visible.has-availability:nth-child(7n) {
    background: #fff !important;
    border: 1px solid #ececec !important;
    color: #333 !important;
}

/* Domingo seleccionado con disponibilidad (Mes Completo y Mini Semana) */
.flatpickr-day.has-availability.selected:nth-child(7n),
.calendar-collapsed .flatpickr-day.week-visible.has-availability.selected:nth-child(7n) {
    background: #7ec7ff !important;
    border: 2px solid #369afe !important;
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(54,154,254,.3) !important;
}

/* ======================================================
   CLIENTE EXISTENTE - ESTILO BARBER VICO
====================================================== */

#confirmExistingBtn,
#useOtherEmailBtn {

    width: 100% !important;
    height: 70px !important;

    border-radius: 24px !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    border: none !important;

    transition: all .25s ease !important;
}

/* Botón principal */
#confirmExistingBtn {

    background: #369afe !important;
    color: #fff !important;

    box-shadow: 0 4px 15px rgba(54,154,254,.35) !important;
}

#confirmExistingBtn:hover {

    background: #2b7bdb !important;
    transform: translateY(-2px) !important;
}

/* Botón secundario */
#useOtherEmailBtn {

    background: #f5f7fb !important;
    color: #333 !important;

    border: 2px solid #dbe4f0 !important;
}

#useOtherEmailBtn:hover {

    background: #eef8ff !important;
    border-color: #369afe !important;
    transform: translateY(-2px) !important;
}

/* ======================================================
   BOTÓN CONTINUAR CLIENTE
====================================================== */

#findCustomerBtn {

    width: 100% !important;
    max-width: none !important;

    height: 84px !important;

    border: none !important;
    border-radius: 24px !important;

    background: #369afe !important;
    color: #fff !important;

    font-size: 22px !important;
    font-weight: 900 !important;

    box-shadow: 0 4px 15px rgba(54,154,254,.35) !important;

    transition: all .25s ease !important;
}

@media(max-width:768px){

    #findCustomerBtn{
        max-width: 100% !important;
        height: 60px !important;
        border-radius: 20px !important;
    }

}

/* =====================================
   BOTÓN CONTINUAR EMAIL
===================================== */

#emailContinueBtn {

    width: 100% !important;
    height: 84px !important;

    border: none !important;
    border-radius: 24px !important;

    background: #369afe !important;
    color: #fff !important;

    font-size: 22px !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow: 0 4px 15px rgba(54,154,254,.35) !important;

    transition: all .25s ease !important;

    margin-top: 25px !important;
}

#emailContinueBtn:hover {
    transform: translateY(-2px);
}

#emailContinueBtn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.error-message{
    position:absolute;
    top:-10px;
    left:12px;
    background:#f5f7fb;
    padding:0 6px;
    margin:0;
    z-index:2;
    font-size:14px;
}

/* Bloquear cambio de año en Flatpickr */
.flatpickr-current-month .cur-year {
    pointer-events: none !important;
}

/* Ocultar las flechas ▲▼ del año */
.flatpickr-current-month .numInputWrapper span {
    display: none !important;
}

/* Seguridad extra */
.flatpickr-current-month .arrowUp,
.flatpickr-current-month .arrowDown {
    display: none !important;
}

.flatpickr-current-month {
    pointer-events: none;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    pointer-events: auto;
}

@media(max-width:768px){

    .appointment-type-container{
        /* Antes tenía un 6px en la parte inferior, lo subimos a 20px */
    padding: 20px 18px 8px 18px !important;    }

    .appointment-header{
        margin-bottom: 6px !important;
    }

    .appointment-cards{
        margin-bottom: 10px !important;
    }

}


@media(max-width:768px){

    .services-list{
        margin-bottom: 10px !important;
    }

}

@media(max-width:768px){

    /* Letras L M X J V S D */
    .flatpickr-weekdays{
        margin-top: -6px !important;
    }

    /* Fila de días */
    .flatpickr-days{
        margin-top: -6px !important;
    }
}


/* ======================================================
   CORRECCIÓN CENTRADO DEFINITIVO: TEXTO Y PUNTO
====================================================== */

.type-card {
    justify-content: center !important; 
    align-items: center !important;     
    text-align: center !important;
    padding: 16px 36px !important; 
}

.card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important; /* Obligamos a que ocupe todo el alto */
}

.card-icon-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important; 
    padding-right: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important; /* ¡AQUÍ ESTABA EL CULPABLE! Fulminamos el margen fantasma */
}

.card-icon-title h4 {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Por si el HTML del párrafo sigue ahí vacío, lo ocultamos para que no quite espacio */
.type-card p {
    display: none !important; 
}

.radio-custom {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .type-card {
        padding: 18px 30px 18px 10px !important; /* Un poco más de alto en móvil para que respire */
    }
    .radio-custom {
        right: 10px !important;
    }
}

.appointment-cards{
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.type-card{
  flex: 1;
}

/* SOLO mover el radio de "Cita REPETITIVA" a la izquierda */
#card-recurring .radio-custom{
    left: 15px !important;
    right: auto !important;
}

#card-recurring .card-icon-title{
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

#card-recurring.type-card{
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* ======================================================
   MENSAJE INFORMATIVO INFERIOR DEL CALENDARIO
   PROBLEMA 3: Sin modal/popup centrado.
   PROBLEMA 4: Integrado debajo del calendario.
   PROBLEMA 5: Persistente — sin temporizador de ocultado.
   PROBLEMA 6: Sin fondo amarillo ni apariencia de alerta.
               Estilo limpio y coherente con Barber Vico.
====================================================== */

.vico-cal-message-box {
    display: none;
    margin-top: 14px;
    padding: 0;
    background: transparent;
    border: none;
}

.vico-cal-message-box.vico-cal-message-visible {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.vico-cal-msg-titulo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #999;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.vico-cal-msg-motivo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .vico-cal-message-box {
        margin-top: 10px;
    }
    .vico-cal-msg-titulo {
        font-size: 11px;
    }
    .vico-cal-msg-motivo {
        font-size: 15px;
    }
}

.flatpickr-current-month input.cur-year{
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    opacity:1 !important;
}


/* ======================================================
   FIX: ELIMINAR HUECO BLANCO AL COLAPSAR SERVICIOS
====================================================== */

/* 1. Animamos el contenedor blanco para que se encoja suavemente */
.card {
  transition: padding-bottom 0.5s ease-in-out, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 2. Reducimos el padding inferior general cuando está colapsado */
.card:has(.modify-btn:not(.hidden)) {
  padding-bottom: 24px !important; 
}

/* 3. Matamos el margen inferior del servicio que se queda seleccionado */
.card:has(.modify-btn:not(.hidden)) .service-block.active {
  margin-bottom: 0 !important;
}

/* 4. Matamos el margen fantasma que tiene la lista entera */
.card:has(.modify-btn:not(.hidden)) .services-list {
  margin-bottom: 0 !important;
}

/* 5. Ajuste milimétrico para la versión móvil (encoge la tarjeta al máximo) */
@media (max-width: 768px) {
  .card:has(.modify-btn:not(.hidden)) {
    padding-bottom: 12px !important; 
  }
}


/* ======================================================
   FIX DEFINITIVO: ESPACIO BLANCO TARJETA
====================================================== */
/* 1. Cuando se ocultan los demás, quitamos el margen del servicio que queda activo */
.card:has(.modify-btn:not(.hidden)) .service-block.active {
    margin-bottom: 0 !important;
}

/* 2. Reducimos el relleno (padding) inferior de la tarjeta blanca en PC */
.card:has(.modify-btn:not(.hidden)) {
    padding-bottom: 35px !important; /* Ajustado para que respire un pelín más */
    transition: padding-bottom 0.5s ease-in-out;
}

/* 3. Reducimos el relleno inferior de la tarjeta blanca en Móvil al milímetro */
@media (max-width: 768px) {
    .card:has(.modify-btn:not(.hidden)) {
        box-sizing: border-box;
        padding-bottom: 18px !important; /* Ajustado para móvil */
    }
}

/* ======================================================
   FIX HUECO TARJETA ASISTENTE (1 asistente seleccionado)
====================================================== */
#hoursSection.card:has(.modify-btn:not(.hidden)) .time-row:not(.colapsado) {
    margin-bottom: 0 !important;
}

#hoursSection.card:has(.modify-btn:not(.hidden)) {
    padding-bottom: 18px !important;
    transition: padding-bottom 1.6s cubic-bezier(.22, 1, .36, 1) !important;
}

@media (max-width: 768px) {
    #hoursSection.card:has(.modify-btn:not(.hidden)) {
        padding-bottom: 12px !important;
    }
}

/* ======================================================
   FIX DEFINITIVO: SALTO EN ANIMACIÓN DE ASISTENTES
====================================================== */

/* 1. Reducimos el max-height para eliminar el "tiempo muerto" (antes en 120px) */
.time-row {
    max-height: 85px !important;
}

/* 2. En móviles la fila es aún más estrecha, lo ajustamos al milímetro */
@media(max-width:768px){
    .time-row {
        max-height: 70px !important; 
    }
}

/* 3. Unificamos el padding a 0 para que la transición no se corte */
.time-row.colapsado {
    padding: 0 !important; 
}

/* 4. Aplicamos el mismo parche al separador de MEDIODÍA (estaba en 100px) */
.midday-separator {
    max-height: 60px !important;
}

.midday-separator.colapsado {
    padding: 0 !important; 
}

/* ======================================================
   FIX DEFINITIVO: SALTO FINAL ANIMACIÓN ASISTENTES
====================================================== */

/* 1. Cambiamos el borde físico por una sombra interior (box-shadow inset).
      Aumentamos 2px el padding para compensar el grosor del borde eliminado. */
.time-row {
    border: none !important;
    box-shadow: inset 0 0 0 2px #f1f1f1;
    padding: 18px 26px !important; 
    transition: max-height 1.6s cubic-bezier(.22, 1, .36, 1),
                opacity 1.6s cubic-bezier(.22, 1, .36, 1),
                margin-bottom 1.6s cubic-bezier(.22, 1, .36, 1),
                padding 1.6s cubic-bezier(.22, 1, .36, 1),
                box-shadow 1.6s cubic-bezier(.22, 1, .36, 1) !important;
}

/* 2. Ajuste milimétrico del padding compensado para la versión móvil */
@media(max-width:768px){
    .time-row {
        padding: 14px 12px !important;
    }
}

/* 3. Al colapsar, la sombra se esfuma suavemente a transparente */
.time-row.colapsado {
    box-shadow: inset 0 0 0 0 transparent !important;
}

/* ======================================================
   FIX: ELIMINAR BORDE DE LA PÍLDORA EN MINI SEMANA
====================================================== */
.calendar-collapsed .dayContainer {
    border: none !important;
    background: transparent !important; /* Por si acaso, para que se funda perfectamente */
}

/* ======================================================
   FIX: RECORTAR ESPACIO INFERIOR CALENDARIO COLAPSADO
====================================================== */

/* 1. Eliminamos el relleno inferior sobrante de la fila de los días */
.calendar-collapsed .dayContainer {
    padding-bottom: 0 !important;
}

/* 2. Reducimos el colchón inferior de la tarjeta blanca (PC) */
#dateSection.card:has(.modify-btn:not(.hidden)) {
    padding-bottom: 20px !important; 
}

/* 3. Ajuste súper ceñido para la versión móvil */
@media (max-width: 768px) {
    #dateSection.card:has(.modify-btn:not(.hidden)) {
        padding-bottom: 10px !important; 
    }
}

@media (min-width: 769px){

  #calendar-wrapper{
      background: transparent !important;
  }

  #calendar-wrapper .flatpickr-calendar{
      box-shadow: none !important;
  }

}