/* bookings.css — widget de reserva de la ficha y agenda de la cuenta.
   Mismo lenguaje que subscription.css y follows.css: tarjetas blancas con borde #E9EEF5,
   radios de 12-14 px, Montserrat en títulos e Inter en el texto.

   Los colores de enlace llevan clase + elemento (0,2,1): `.elementor-kit-4 a` (0,2,0) pinta de azul
   cualquier enlace y gana a una clase suelta — ahí se perdió el CTA de «Siguiendo», azul sobre azul. */

/* ============================== Widget de la ficha ============================== */

.ctop-reserva{
  padding:18px 20px; margin-bottom:16px;
  border:1px solid #E9EEF5; border-radius:14px; background:#fff;
}
.ctop-reserva h3{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font:800 16.5px/1.3 Montserrat,sans-serif; color:#0F172A;
}
.ctop-reserva h3 > i{ color:#2563EB; font-size:15px; }

.ctop-reserva__lbl{
  display:block; margin-bottom:6px;
  font:600 13px/1.4 Inter,sans-serif; color:#475569;
}
.ctop-reserva__fecha{
  width:100%; padding:10px 12px; margin-bottom:14px;
  border:1px solid #D7DEE8; border-radius:10px; background:#fff;
  font:600 14.5px/1.2 Inter,sans-serif; color:#0F172A;
}
.ctop-reserva__fecha:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px #DBEAFE; }

/* ---------- Rejilla de horas ---------- */
.ctop-reserva__huecos{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.ctop-reserva__hueco{
  padding:9px 13px; cursor:pointer;
  border:1px solid #D7DEE8; border-radius:10px; background:#fff; color:#0F172A;
  font:700 13.5px/1 Inter,sans-serif;
  transition:background .15s, border-color .15s, color .15s;
}
.ctop-reserva__hueco:hover{ background:#F8FAFC; border-color:#2563EB; color:#2563EB; }
.ctop-reserva__hueco.is-elegido{ background:#2563EB; border-color:#2563EB; color:#fff; }

.ctop-reserva__cargando,
.ctop-reserva__nohay{
  margin:0; padding:10px 0;
  font:500 13.5px/1.5 Inter,sans-serif; color:#64748B;
}

/* ---------- Formulario ---------- */
.ctop-reserva__form{ margin-top:14px; padding-top:14px; border-top:1px solid #EEF2F7; }
.ctop-reserva__elegido{
  margin:0 0 12px; padding:9px 12px; border-radius:10px;
  background:#EFF6FF; color:#1D4ED8;
  font:700 13.5px/1.4 Inter,sans-serif;
}
.ctop-reserva__form input[type=text],
.ctop-reserva__form input[type=tel],
.ctop-reserva__form input[type=email],
.ctop-reserva__form textarea{
  width:100%; padding:10px 12px; margin-bottom:9px;
  border:1px solid #D7DEE8; border-radius:10px; background:#fff;
  font:500 14px/1.4 Inter,sans-serif; color:#0F172A;
}
.ctop-reserva__form input:focus,
.ctop-reserva__form textarea:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px #DBEAFE; }
.ctop-reserva__form textarea{ resize:vertical; }

.ctop-reserva__consent{
  display:flex; gap:9px; align-items:flex-start; margin:4px 0 12px;
  font:500 12px/1.5 Inter,sans-serif; color:#64748B;
}
.ctop-reserva__consent input{ margin-top:2px; flex:0 0 auto; }

.ctop-reserva__enviar{
  width:100%; padding:12px 18px; cursor:pointer;
  border:0; border-radius:12px; background:#2563EB; color:#fff;
  font:800 14.5px/1 Inter,sans-serif;
  transition:background .15s;
}
.ctop-reserva__enviar:hover{ background:#1D4ED8; }
.ctop-reserva__enviar[disabled]{ opacity:.65; cursor:default; }

.ctop-reserva__msg{ margin:10px 0 0; font:600 13px/1.45 Inter,sans-serif; color:#64748B; }
.ctop-reserva__msg.is-mal{ color:#B91C1C; }
.ctop-reserva__ok{
  margin:0; padding:14px 16px; border-radius:12px;
  background:#F0FDF4; border:1px solid #BBF7D0; color:#14532D;
  font:600 14px/1.55 Inter,sans-serif;
}

.ctop-reserva__nota{
  margin:12px 0 0; font:500 12px/1.5 Inter,sans-serif; color:#94A3B8;
}
.ctop-reserva__flash{
  margin:0 0 12px; padding:11px 14px; border-radius:10px;
  font:600 13px/1.45 Inter,sans-serif;
}
.ctop-reserva__flash--ok { background:#F0FDF4; border:1px solid #BBF7D0; color:#14532D; }
.ctop-reserva__flash--mal{ background:#FEF2F2; border:1px solid #FECACA; color:#7F1D1D; }

/* ============================== Agenda de la cuenta ============================== */

.ctop-agenda{ max-width:880px; margin:0 auto; }
.ctop-agenda__seccion + .ctop-agenda__seccion{ margin-top:38px; }

.ctop-agenda__seccion h2{
  display:flex; align-items:center; gap:10px; margin:0 0 8px;
  font:800 18px/1.3 Montserrat,sans-serif; color:#0F172A;
}
.ctop-agenda__seccion h2 > i{ color:#2563EB; font-size:16px; }

.ctop-agenda__grupo{
  display:flex; align-items:center; gap:9px; margin:20px 0 10px;
  font:700 13px/1.3 Inter,sans-serif; color:#64748B;
  text-transform:uppercase; letter-spacing:.04em;
}
.ctop-agenda__grupo span{
  padding:1px 8px; border-radius:99px; background:#F1F5F9; color:#475569;
  font:700 12px/1.5 Inter,sans-serif; letter-spacing:0;
}
.ctop-agenda__grupo--urge{ color:#B45309; }
.ctop-agenda__grupo--urge span{ background:#FEF3C7; color:#92400E; }

.ctop-agenda__ayuda,
.ctop-agenda__nada{
  margin:0 0 10px; font:500 13.5px/1.6 Inter,sans-serif; color:#64748B;
}

/* ---------- Filas ---------- */
.ctop-agenda__lista{ list-style:none; margin:0; padding:0; }
.ctop-agenda__item{
  display:flex; align-items:flex-start; gap:16px;
  padding:15px 18px; margin-bottom:10px;
  border:1px solid #E9EEF5; border-left:4px solid #CBD5E1; border-radius:12px; background:#fff;
}
.ctop-agenda__item--pendiente { border-left-color:#F59E0B; background:#FFFDF7; }
.ctop-agenda__item--confirmada{ border-left-color:#16A34A; }
.ctop-agenda__item--rechazada,
.ctop-agenda__item--cancelada { border-left-color:#CBD5E1; background:#FAFBFC; }
.ctop-agenda__item.is-pasada{ opacity:.7; }
.ctop-agenda__lista--pasadas .ctop-agenda__item{ padding:12px 16px; }

.ctop-agenda__cuando{
  flex:0 0 96px; text-align:center;
  padding:8px 6px; border-radius:10px; background:#F8FAFC;
}
.ctop-agenda__dia{
  display:block; font:700 13px/1.3 Inter,sans-serif; color:#475569;
}
.ctop-agenda__hora{
  display:block; margin-top:3px;
  font:800 13.5px/1.3 Montserrat,sans-serif; color:#0F172A;
}

.ctop-agenda__datos{ flex:1 1 auto; min-width:0; }
.ctop-agenda__quien{
  margin:0 0 3px; font:700 15px/1.35 Montserrat,sans-serif; color:#0F172A;
}
.ctop-agenda__anuncio{ margin:0 0 5px; font:500 13px/1.4 Inter,sans-serif; }
.ctop-agenda__mensaje{
  margin:5px 0 0; font:500 13px/1.55 Inter,sans-serif; color:#475569;
}
.ctop-agenda__motivo{
  margin:5px 0 0; font:600 12.5px/1.5 Inter,sans-serif; color:#B45309;
}
.ctop-agenda__contacto{ display:flex; flex-wrap:wrap; gap:12px; margin-top:7px; }
.ctop-agenda__contacto i{ margin-right:4px; color:#94A3B8; }

.ctop-agenda__lado{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:9px;
}
.ctop-agenda__estado{
  padding:3px 10px; border-radius:99px;
  font:700 12px/1.6 Inter,sans-serif;
  background:#F1F5F9; color:#475569;
}
.ctop-agenda__estado[data-estado=pendiente] { background:#FEF3C7; color:#92400E; }
.ctop-agenda__estado[data-estado=confirmada]{ background:#DCFCE7; color:#166534; }
.ctop-agenda__estado[data-estado=rechazada],
.ctop-agenda__estado[data-estado=cancelada] { background:#F1F5F9; color:#64748B; }

.ctop-agenda__acciones{ display:flex; gap:7px; }
.ctop-agenda__btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; cursor:pointer; white-space:nowrap;
  border:1px solid #D7DEE8; border-radius:10px; background:#fff; color:#0F172A;
  font:700 13px/1 Inter,sans-serif;
  transition:background .15s, border-color .15s, color .15s;
}
.ctop-agenda__btn--ok:hover { background:#F0FDF4; border-color:#16A34A; color:#166534; }
.ctop-agenda__btn--mal:hover{ background:#FEF2F2; border-color:#DC2626; color:#B91C1C; }
.ctop-agenda__btn[disabled]{ opacity:.6; cursor:default; }

/* ---------- Días cerrados ---------- */
.ctop-bloqueos__anuncio{
  padding:16px 18px; margin-bottom:12px;
  border:1px solid #E9EEF5; border-radius:12px; background:#fff;
}
.ctop-bloqueos__anuncio h4{
  margin:0 0 10px; font:700 14.5px/1.3 Montserrat,sans-serif; color:#0F172A;
}
.ctop-bloqueos__alta{ display:flex; gap:9px; flex-wrap:wrap; }
/* `reset.css` trae `input[type="date"] { width:100% }`, que es (0,1,1) y gana a una clase suelta
   (0,1,0) por especificidad, no por orden: el campo se comía la fila entera. Con clase + elemento
   dentro del contenedor son (0,2,1). Es el mismo tropiezo que con los colores de enlace. */
.ctop-bloqueos__alta input.ctop-bloqueos__fecha{
  flex:0 0 auto; width:190px;
  padding:9px 12px; border:1px solid #D7DEE8; border-radius:10px;
  font:600 14px/1.2 Inter,sans-serif; color:#0F172A;
}
.ctop-bloqueos__add{
  padding:9px 16px; cursor:pointer;
  border:1px solid #D7DEE8; border-radius:10px; background:#F8FAFC; color:#0F172A;
  font:700 13.5px/1.2 Inter,sans-serif;
}
.ctop-bloqueos__add:hover{ background:#EFF6FF; border-color:#2563EB; color:#2563EB; }

.ctop-bloqueos__lista{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; }
.ctop-bloqueos__lista li{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 8px 6px 12px; border-radius:99px;
  background:#F1F5F9; color:#475569;
  font:600 12.5px/1.4 Inter,sans-serif;
}
.ctop-bloqueos__quitar{
  border:0; background:none; cursor:pointer; padding:0 3px;
  font:700 16px/1 Inter,sans-serif; color:#94A3B8;
}
.ctop-bloqueos__quitar:hover{ color:#DC2626; }
.ctop-bloqueos__msg{ margin:10px 0 0; font:600 12.5px/1.45 Inter,sans-serif; color:#B45309; }

/* ---------- Agenda vacía ---------- */
.ctop-agenda__vacio{
  padding:34px 24px; text-align:center;
  border:1px dashed #D7DEE8; border-radius:14px; background:#FAFBFC;
}
.ctop-agenda__vacio > i{ font-size:26px; color:#CBD5E1; }
.ctop-agenda__vacio-t{ margin:12px 0 4px; font:700 15.5px/1.4 Montserrat,sans-serif; color:#0F172A; }
.ctop-agenda__vacio-d{ margin:0 auto 16px; max-width:440px; font:500 13.5px/1.6 Inter,sans-serif; color:#64748B; }
.ctop-agenda .ctop-agenda__cta{
  display:inline-block; padding:11px 22px; border-radius:12px;
  background:#2563EB; text-decoration:none; font:700 14px/1 Inter,sans-serif;
}
.ctop-agenda .ctop-agenda__cta:hover{ background:#1D4ED8; }

/* ---------- Colores de enlace (ganan a `.elementor-kit-4 a`) ---------- */
.ctop-agenda a.ctop-agenda__cta,
.ctop-agenda a.ctop-agenda__cta:hover{ color:#fff; }
.ctop-agenda__anuncio a{ color:#2563EB; }
.ctop-agenda__contacto a{ color:#475569; text-decoration:none; }
.ctop-agenda__contacto a:hover{ color:#2563EB; }

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .ctop-agenda__item{ flex-wrap:wrap; gap:12px; }
  .ctop-agenda__cuando{ flex:0 0 auto; display:flex; gap:8px; align-items:baseline; padding:6px 10px; }
  .ctop-agenda__dia, .ctop-agenda__hora{ display:inline; margin:0; }
  .ctop-agenda__lado{ width:100%; align-items:stretch; }
  .ctop-agenda__estado{ align-self:flex-start; }
  .ctop-agenda__acciones{ width:100%; }
  .ctop-agenda__btn{ flex:1 1 0; justify-content:center; }
}