/* ==========================================================================
   Vista Calendario Semanal — Agenda Ambulatoria
   Prefijo dedicado `wvcal-`: no comparte una sola clase con el resto de la
   agenda para que nada de aquí se filtre a las otras pestañas (ni al revés).
   ========================================================================== */

.wvcal-container {
  --wvcal-hora-h: 64px;      /* alto de una hora de la grilla */
  --wvcal-time-w: 62px;      /* ancho de la columna de horas */
  --wvcal-borde: #e2e8f0;
  --wvcal-libre: #22c55e;
  --wvcal-libre-bg: #dcfce7;
  --wvcal-hoy-bg: #f5f9ff;
  padding: 12px;
}

/* ── Cabecera del período ── */
.wvcal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.wvcal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wvcal-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--wvcal-borde);
  background: #fff;
  color: #475569;
  font-size: 13px;
  line-height: 1;
  transition: all .2s ease;
}

.wvcal-nav-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.wvcal-hoy-btn {
  height: 34px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  box-shadow: 0 4px 12px rgba(74, 144, 226, .3);
}

.wvcal-titulo {
  font-size: 17px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -.3px;
  margin: 0 0 0 6px;
  text-transform: capitalize;
}

.wvcal-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
}

.wvcal-leyenda span.wvcal-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* ── Grilla ── */
/* La grilla scrollea POR DENTRO. Antes crecía hasta cubrir el eje completo (un profesional que
   atiende hasta las 19:00 son 11 filas de 64 px) y las últimas horas quedaban fuera del alto
   visible de la pestaña. Además `overflow:hidden` dejaba INERTE el `position:sticky` de la
   cabecera —un ancestro sin scroll no ancla nada—, así que al bajar se perdían los días. */
.wvcal-grid {
  border: 1px solid var(--wvcal-borde);
  border-radius: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 235px);
  min-height: 340px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  scrollbar-width: thin;
}

.wvcal-grid::-webkit-scrollbar {
  width: 10px;
}

.wvcal-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 3px solid #fff;
  border-radius: 10px;
}

.wvcal-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.wvcal-head {
  display: grid;
  grid-template-columns: var(--wvcal-time-w) repeat(7, minmax(0, 1fr));
  background: #f8fafc;
  border-bottom: 1px solid var(--wvcal-borde);
  position: sticky;
  top: 0;
  z-index: 6;
}

.wvcal-head-cell {
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--wvcal-borde);
}

.wvcal-head-cell:last-child {
  border-right: none;
}

.wvcal-head-dow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #94a3b8;
}

.wvcal-head-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
}

.wvcal-head-cell.is-hoy .wvcal-head-num {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: #fff;
}

.wvcal-head-cell.is-bloqueado .wvcal-head-num {
  color: #b91c1c;
}

.wvcal-head-cupos {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  margin-top: 1px;
}

.wvcal-head-cupos.sin-cupos {
  color: #cbd5e1;
}

.wvcal-body {
  display: grid;
  grid-template-columns: var(--wvcal-time-w) repeat(7, minmax(0, 1fr));
  position: relative;
}

.wvcal-time-col {
  border-right: 1px solid var(--wvcal-borde);
  background: #fbfcfe;
}

.wvcal-time-cell {
  height: var(--wvcal-hora-h);
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  text-align: right;
  padding: 2px 7px 0 0;
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
}

.wvcal-day-col {
  position: relative;
  border-right: 1px solid var(--wvcal-borde);
}

.wvcal-day-col:last-child {
  border-right: none;
}

.wvcal-day-col.is-hoy {
  background: var(--wvcal-hoy-bg);
}

.wvcal-hour-cell {
  height: var(--wvcal-hora-h);
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
}

/* media hora, apenas insinuada */
.wvcal-hour-cell::after {
  content: "";
  display: block;
  height: 50%;
  border-bottom: 1px dashed #f8fafc;
}

/* ── Fantasma de la hora bajo el cursor (grilla vacía) ── */
.wvcal-day-col[data-fecha] {
  cursor: pointer;
}

.wvcal-fantasma {
  display: none;
  position: absolute;
  left: 3px;
  right: 3px;
  z-index: 2;
  border-radius: 6px;
  border: 1px dashed var(--wvcal-libre);
  background: var(--wvcal-libre-bg);
  color: #14532d;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.wvcal-fantasma.sin-cupos {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #94a3b8;
}


/* ── Día cerrado por el recinto ── */
.wvcal-day-col.is-bloqueado {
  background: repeating-linear-gradient(45deg,
      rgba(185, 28, 28, .05) 0px,
      rgba(185, 28, 28, .05) 8px,
      rgba(185, 28, 28, .02) 8px,
      rgba(185, 28, 28, .02) 16px);
}

.wvcal-bloqueado-tag {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 20px;
  padding: 2px 9px;
  max-width: 94%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Bloques (citas y cupos libres) ── */
.wvcal-block {
  position: absolute;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 3;
  transition: filter .15s ease;
}

.wvcal-block:hover {
  filter: brightness(.96);
  z-index: 8;
}

.wvcal-block-hora {
  font-weight: 800;
  white-space: nowrap;
}

.wvcal-block.es-corto .wvcal-block-txt {
  display: inline;
}

.wvcal-block-txt {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .92;
}

/* Cupo libre: es el único bloque que se puede clickear para agendar. */
.wvcal-block--libre {
  background: var(--wvcal-libre-bg);
  border: 1px solid var(--wvcal-libre);
  color: #14532d;
  cursor: pointer;
}

.wvcal-block--libre:hover {
  background: #bbf7d0;
}

.wvcal-cupos-badge {
  display: inline-block;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--wvcal-libre);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

/* Cupo suelto (vista Día): la columna ya dice de quién es, así que el bloque muestra su HORA y
   el tipo de atención. Con 20 minutos de cadencia mide ~21 px, y ahí los dos van en una línea. */
.wvcal-block--libre.es-slot {
  background: #f0fdf4;
}

.wvcal-block--libre.es-slot:hover {
  background: #bbf7d0;
  border-color: #16a34a;
}

.wvcal-block--libre.es-slot .wvcal-block-txt {
  font-size: 9px;
  font-weight: 600;
  opacity: .8;
}

.wvcal-block--libre.es-slot.es-corto .wvcal-block-hora {
  margin-right: 3px;
}

.wvcal-block--libre.es-slot.es-corto .wvcal-block-txt::before {
  content: "· ";
}

/* Hora bajo el cursor dentro de una franja libre: dice qué cupo se va a reservar. */
.wvcal-hora-hover {
  display: none;
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: #14532d;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}

/* Citas, por origen */
.wvcal-block--cita {
  color: #fff;
  cursor: pointer;
}

.wvcal-block--cita.origen-AMBULATORIA { background: #3b82f6; border: 1px solid #2563eb; }
.wvcal-block--cita.origen-CARNET      { background: #059669; border: 1px solid #047857; }
.wvcal-block--cita.origen-PELUQUERIA  { background: #d97706; border: 1px solid #b45309; }

.wvcal-block--cita.origen-PABELLON {
  background: repeating-linear-gradient(45deg,
      #e74a3b 0px, #e74a3b 6px,
      #c0392b 6px, #c0392b 12px);
  border: 1px solid #a03227;
}

/* Línea de la hora actual */
.wvcal-ahora {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ef4444;
  z-index: 7;
  pointer-events: none;
}

.wvcal-ahora::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}

/* ── Vacíos y carga ── */
.wvcal-vacio {
  padding: 48px 20px;
  text-align: center;
  color: #94a3b8;
}

.wvcal-vacio i {
  font-size: 40px;
  opacity: .35;
  display: block;
  margin-bottom: 12px;
}

/* ── Sidebar ── */
.wvcal-side-card {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  background: #fff;
}

.wvcal-side-card .card-header {
  background: #fff;
  border: 0;
  padding: 14px 16px 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.wvcal-side-card .card-body {
  padding: 8px 16px 16px;
}

.wvcal-prof-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.wvcal-prof-item label {
  margin: 0;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}

/* ── Responsive: bajo 992px la semana se desplaza en horizontal ── */
@media (max-width: 991.98px) {
  .wvcal-scroll {
    overflow-x: auto;
  }

  /* En móvil el scroll horizontal lo hace el contenedor: si además la grilla scrollea vertical
     por dentro, quedan dos barras peleando. Acá scrollea la página, como antes. */
  .wvcal-grid {
    min-width: 760px;
    max-height: none;
    overflow-y: visible;
  }
}

/* ==========================================================================
   Panel lateral de la cita
   Se abre al hacer clic en una hora agendada. Es un panel y no un modal a
   propósito: la grilla de la semana sigue visible al costado.
   ========================================================================== */

.wvcal-panel-fondo {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  z-index: 1045;
}

.wvcal-panel-fondo.abierto {
  display: block;
}

.wvcal-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
  z-index: 1046;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .25s cubic-bezier(.25, .8, .25, 1);
}

.wvcal-panel.abierto {
  transform: translateX(0);
}

.wvcal-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--wvcal-borde, #e2e8f0);
}

.wvcal-panel-eyebrow {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #94a3b8;
}

.wvcal-panel-titulo {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -.3px;
}

.wvcal-panel-cerrar {
  border: 0;
  background: #f1f5f9;
  color: #475569;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
}

.wvcal-panel-cerrar:hover {
  background: #e2e8f0;
}

.wvcal-panel-body {
  padding: 16px 18px 26px;
  overflow-y: auto;
  flex: 1;
}

/* ── Piezas del panel ── */
.wvcal-estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.wvcal-panel-seccion {
  margin-top: 18px;
}

.wvcal-panel-seccion h6 {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.wvcal-dato {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #334155;
  padding: 5px 0;
  border-bottom: 1px dashed #f1f5f9;
}

.wvcal-dato:last-child {
  border-bottom: 0;
}

.wvcal-dato i {
  width: 16px;
  text-align: center;
  color: #94a3b8;
  margin-top: 3px;
}

.wvcal-dato b {
  color: #1e293b;
  font-weight: 700;
}

.wvcal-dato-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid #fcd9a4;
  border-radius: 50%;
  background: #fff7ed;
  cursor: pointer;
  color: #d97706;
  font-size: 11px;
  transition: all .15s ease;
}

.wvcal-dato-accion:hover {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}

.wvcal-chips-estado {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Se leían como etiquetas y el usuario no sabía que había que hacerles clic (2026-08-25): borde
   marcado, sombra y un hover que levanta, para que se vean como lo que son. */
.wvcal-chip-estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(#fff, #f8fafc);
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
  transition: all .15s ease;
}

.wvcal-chip-estado:hover {
  border-color: #4a90e2;
  background: #eff6ff;
  color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(74, 144, 226, .28);
}

.wvcal-chip-estado:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, .18);
}

/* El estado actual no es un botón: es el estado en que está la cita. */
.wvcal-chip-estado.es-actual,
.wvcal-chip-estado.es-actual:hover {
  border-color: #4a90e2;
  background: #eff6ff;
  color: #1d4ed8;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.wvcal-chip-estado.es-actual i {
  font-size: 9px;
}

.wvcal-btn-principal {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  box-shadow: 0 4px 14px rgba(74, 144, 226, .3);
}

.wvcal-btn-principal.es-cobro {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, .3);
}

.wvcal-btn-principal.es-documento {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 4px 14px rgba(22, 163, 74, .3);
}

.wvcal-btn-principal.es-pabellon {
  background: linear-gradient(135deg, #e74a3b 0%, #7b241c 100%);
  box-shadow: 0 4px 14px rgba(231, 74, 59, .3);
}

.wvcal-btn-principal[disabled] {
  background: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
}

.wvcal-acciones-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wvcal-btn-sec {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  padding: 9px 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wvcal-btn-sec:hover {
  background: #f8fafc;
  color: #1e293b;
}

.wvcal-btn-sec.es-peligro {
  color: #b91c1c;
  border-color: #fecaca;
}

.wvcal-btn-sec.es-peligro:hover {
  background: #fef2f2;
}

.wvcal-contacto {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.wvcal-contacto a {
  flex: 1;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 7px 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

.wvcal-contacto a:hover {
  background: #f8fafc;
  text-decoration: none;
}

.wvcal-panel-aviso {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 575.98px) {
  .wvcal-panel {
    width: 100%;
  }

  .wvcal-acciones-grid {
    grid-template-columns: 1fr;
  }
}

/* Panel detrás de un modal: NO se cierra al lanzar una acción (así se pueden encadenar varias
   sobre la misma cita), solo baja bajo el backdrop de Bootstrap mientras el modal está abierto. */
.wvcal-panel.detras {
  z-index: 1035;
}

.wvcal-panel-fondo.detras {
  z-index: 1034;
}

/* ── Marca del estado de la cita dentro de la grilla ──
   El color del bloque dice de qué agenda viene; el ícono dice en qué estado está. */
/* Píldora de estado: el fondo del bloque dice de qué AGENDA viene la cita, así que el estado
   lleva su propio color —el mismo de la tarjeta de la agenda del día—. Es lo que deja ver de
   una mirada quién espera en sala, quién se atiende y a quién hay que cobrarle. */
.wvcal-marca {
  position: absolute;
  right: 4px;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 8px);
  padding: 1px 6px;
  border-radius: 20px;
  background: #64748b;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  pointer-events: none;
}

.wvcal-marca i {
  font-size: 8.5px;
  flex: 0 0 auto;
}

.wvcal-marca > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bloque sin alto para una línea propia (una cita de 20 min mide ~21 px): solo el color y el
   ícono, que es lo único legible ahí. El nombre del estado queda en el tooltip. */
.wvcal-marca.es-mini {
  width: 15px;
  height: 15px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  justify-content: center;
}

.wvcal-marca.estado-confirmado,
.wvcal-tip-estado.estado-confirmado { background: #6b46c1; }
.wvcal-marca.estado-en-sala,
.wvcal-tip-estado.estado-en-sala    { background: #975a16; }
.wvcal-marca.estado-llamado,
.wvcal-tip-estado.estado-llamado    { background: #2b6cb0; }
.wvcal-marca.estado-atendiendo,
.wvcal-tip-estado.estado-atendiendo { background: #22543d; }
.wvcal-marca.estado-atendido,
.wvcal-tip-estado.estado-atendido   { background: #276749; }
.wvcal-marca.estado-cobrado,
.wvcal-tip-estado.estado-cobrado    { background: #276749; }
/* Pendiente de cobro: no es un estado más, es plata esperando en el mostrador. */
.wvcal-marca.estado-por-cobrar,
.wvcal-tip-estado.estado-por-cobrar { background: #c2410c; }
.wvcal-marca.estado-no-asiste,
.wvcal-tip-estado.estado-no-asiste  { background: #e53e3e; }
.wvcal-marca.estado-cancelado,
.wvcal-tip-estado.estado-cancelado  { background: #718096; }
.wvcal-marca.estado-cirugia,
.wvcal-tip-estado.estado-cirugia    { background: #a03227; }

.wvcal-block--cita {
  padding-right: 14px;
}

.wvcal-block--cita.es-corto .wvcal-marca {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* Confirmada: el tick basta, no necesita gritar. */
.wvcal-block--cita.estado-confirmado {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .85);
}

/* En sala: el paciente ESTÁ esperando en la clínica. Es lo que hay que ver primero, así que
   lleva borde claro y un latido suave. */
.wvcal-block--cita.estado-en-sala {
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .9), 0 2px 8px rgba(0, 0, 0, .2);
  animation: wvcalLatido 2s ease-in-out infinite;
}

.wvcal-block--cita.estado-llamado {
  border: 2px dashed #fff !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .85);
}

.wvcal-block--cita.estado-atendiendo {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 8px rgba(0, 0, 0, .18);
}

/* Atendida y sin nada pendiente: cumplida, se apaga para que no compita con lo que viene. */
.wvcal-block--cita.estado-atendido,
.wvcal-block--cita.estado-cobrado {
  opacity: .82;
}

/* La que espera cobro NO se apaga: todavía hay algo que hacer con ella. */
.wvcal-block--cita.estado-por-cobrar {
  box-shadow: inset 3px 0 0 #fb923c, 0 2px 6px rgba(194, 65, 12, .25);
}

/* No asistió / cancelada: la hora sigue reservada pero el paciente no viene. */
.wvcal-block--cita.estado-no-asiste,
.wvcal-block--cita.estado-cancelado {
  opacity: .55;
  filter: grayscale(.35);
}

.wvcal-block--cita.estado-no-asiste .wvcal-block-txt,
.wvcal-block--cita.estado-cancelado .wvcal-block-txt {
  text-decoration: line-through;
}

@keyframes wvcalLatido {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, .9), 0 2px 8px rgba(0, 0, 0, .2); }
  50%      { box-shadow: 0 0 0 5px rgba(251, 191, 36, .35), 0 2px 8px rgba(0, 0, 0, .2); }
}

@media (prefers-reduced-motion: reduce) {
  .wvcal-block--cita.estado-en-sala {
    animation: none;
  }
}

/* Leyenda de estados del panel lateral: mismos colores que las píldoras de la grilla, o el
   recepcionista tendría que aprenderse dos códigos distintos. */
.wvcal-leyenda-estados span i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  background: #64748b;
  color: #fff;
  font-size: 8.5px;
  flex: 0 0 auto;
}

.wvcal-leyenda-estados .estado-confirmado i { background: #6b46c1; }
.wvcal-leyenda-estados .estado-en-sala i    { background: #975a16; }
.wvcal-leyenda-estados .estado-llamado i    { background: #2b6cb0; }
.wvcal-leyenda-estados .estado-atendiendo i { background: #22543d; }
.wvcal-leyenda-estados .estado-por-cobrar i { background: #c2410c; }
.wvcal-leyenda-estados .estado-atendido i   { background: #276749; }
.wvcal-leyenda-estados .estado-no-asiste i  { background: #e53e3e; }

.wvcal-leyenda-estados {
  /* Una sola columna: el panel lateral es angosto y en dos columnas los rótulos se parten. */
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

.wvcal-leyenda-estados span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Cupos libres bajo una hora tomada
   Una cita tapa —o le gana el ancho— a los cupos que otros profesionales
   tienen a esa misma altura de la grilla. El badge los delata sin abrir la
   cita; la sección del panel los ofrece agrupados por profesional.
   ══════════════════════════════════════════════════════════════════════════ */

/* Badge ⊕N en la esquina superior del bloque de la cita. */
.wvcal-cita-cupos {
  position: absolute;
  top: 2px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  height: 14px;
  border-radius: 20px;
  background: var(--wvcal-libre);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .12s ease, background .12s ease;
}

.wvcal-cita-cupos i {
  font-size: 7px;
}

.wvcal-cita-cupos:hover {
  background: #15803d;
  transform: scale(1.12);
}

/* Con el badge arriba, la marca de estado y el texto se corren para no chocar. */
.wvcal-block--cita.tiene-cupos {
  padding-right: 32px;
}

.wvcal-block--cita.es-corto.tiene-cupos .wvcal-marca {
  right: 30px;
}

/* Sección del panel lateral */
.wvcal-seccion-cupos h6 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wvcal-cupos-conteo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--wvcal-libre);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

/* Dice que lo de abajo se clickea. Va bajo el título de la sección. */
.wvcal-ayuda-seccion {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: -2px 0 9px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #f8fafc;
  border-left: 3px solid #cbd5e1;
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.wvcal-ayuda-seccion i {
  margin-top: 1px;
  color: #94a3b8;
  font-size: 11px;
  flex: 0 0 auto;
}

/* Con muchos profesionales ofreciendo esa hora, la lista empujaba el resto del panel: se acota
   y scrollea sola. */
.wvcal-cupos-lista {
  max-height: 208px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.wvcal-cupo-grupo {
  border: 1px solid var(--wvcal-borde, #e2e8f0);
  border-left: 3px solid var(--wvcal-libre);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #f8fffb;
}

.wvcal-cupo-grupo:last-child {
  margin-bottom: 0;
}

.wvcal-cupo-prof {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}

.wvcal-cupo-prof i {
  color: #16a34a;
  font-size: 11px;
}

.wvcal-cupo-tipo {
  font-size: 11px;
  color: #64748b;
  margin: 1px 0 6px 17px;
}

.wvcal-cupo-horas {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wvcal-cupo-chip {
  border: 1px solid var(--wvcal-libre);
  background: #fff;
  color: #14532d;
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 83, 45, .12);
  transition: all .12s ease;
}

.wvcal-cupo-chip:hover {
  background: var(--wvcal-libre);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(34, 197, 94, .3);
}

.wvcal-cupo-chip:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(20, 83, 45, .2);
}

.wvcal-cupo-chip:focus {
  outline: 2px solid rgba(34, 197, 94, .45);
  outline-offset: 1px;
}


/* ══════════════════════════════════════════════════════════════════════════
   Globo propio de la grilla
   El tooltip de Bootstrap se pinta ARRIBA del elemento y tapaba los cupos y
   las horas vecinas. Éste se ancla al COSTADO del bloque y nunca lo cubre.
   ══════════════════════════════════════════════════════════════════════════ */

.wvcal-tip {
  display: none;
  position: fixed;
  z-index: 1030;
  width: 272px;
  max-width: calc(100vw - 20px);
  background: rgba(15, 23, 42, .97);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(2, 6, 23, .45), 0 2px 8px rgba(2, 6, 23, .35);
  font-size: 11.5px;
  line-height: 1.45;
}

/* "Puente" invisible sobre el margen que separa el globo del bloque: sin él, el cursor sale del
   bloque, cruza el vacío y el globo se cerraría antes de llegar a sus opciones. */
.wvcal-tip::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 14px;
}

.wvcal-tip.es-izquierda::before {
  left: auto;
  right: -14px;
}

/* Hay que medirlo antes de poder ubicarlo: se pinta, pero invisible. */
.wvcal-tip.es-medible {
  display: block;
  visibility: hidden;
}

.wvcal-tip.visible {
  display: block;
  visibility: visible;
  animation: wvcalTipEntra .13s ease-out;
}

@keyframes wvcalTipEntra {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

.wvcal-tip.es-izquierda.visible {
  animation-name: wvcalTipEntraIzq;
}

@keyframes wvcalTipEntraIzq {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wvcal-tip.visible { animation: none; }
}

/* Flecha: la posición vertical la fija el JS, para que siga apuntando al bloque aunque el
   globo se haya corrido para no salirse de la ventana. */
.wvcal-tip::after {
  content: "";
  position: absolute;
  top: var(--wvcal-tip-flecha, 22px);
  left: -7px;
  margin-top: -7px;
  border: 7px solid transparent;
  border-right-color: rgba(15, 23, 42, .97);
}

.wvcal-tip.es-izquierda::after {
  left: auto;
  right: -7px;
  border-right-color: transparent;
  border-left-color: rgba(15, 23, 42, .97);
}

/* Barra de acciones rápidas: lo que la recepción hace todo el día, arriba del todo. */
.wvcal-tip-rapidas {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px 7px 16px;
  background: rgba(2, 6, 23, .5);
  border-bottom: 1px solid rgba(148, 163, 184, .2);
  border-radius: 14px 14px 0 0;
}

.wvcal-tip-sep {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: rgba(148, 163, 184, .3);
  flex: 0 0 auto;
}

.wvcal-tip-rapida {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 20px;
  background: rgba(148, 163, 184, .12);
  color: #e2e8f0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s ease;
}

.wvcal-tip-rapida i {
  font-size: 10px;
  color: #94a3b8;
}

.wvcal-tip-rapida:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  text-decoration: none;
}

.wvcal-tip-rapida:hover i {
  color: #fff;
}

.wvcal-tip-rapida.es-icono {
  padding: 4px;
  width: 26px;
  height: 26px;
  justify-content: center;
  border-radius: 50%;
}

.wvcal-tip-rapida.es-wsp i {
  color: #25d366;
}

.wvcal-tip-rapida.es-wsp:hover {
  background: #25d366;
  border-color: #25d366;
}

.wvcal-tip-rapida.es-wsp:hover i {
  color: #06280f;
}

/* La cita ya está en ese estado: no es un botón. */
.wvcal-tip-rapida.es-actual,
.wvcal-tip-rapida.es-actual:hover {
  background: rgba(34, 197, 94, .18);
  border-color: rgba(34, 197, 94, .5);
  color: #86efac;
  cursor: default;
}

.wvcal-tip-rapida.es-actual i,
.wvcal-tip-rapida.es-actual:hover i {
  color: #86efac;
}

/* Barra del color de la agenda de origen: el mismo código de color del bloque. */
.wvcal-tip-barra {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  /* Sobre el fondo de la barra rápida, para que el color de origen recorra el globo entero. */
  z-index: 1;
}

.wvcal-tip-cuerpo {
  padding: 11px 13px 10px 16px;
}

.wvcal-tip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wvcal-tip-hora {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
}

.wvcal-tip-estado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #475569;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.wvcal-tip-estado i {
  font-size: 8.5px;
}

.wvcal-tip-estado.es-libre {
  background: #16a34a;
}

.wvcal-tip-paciente {
  margin: 6px 0 7px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  word-break: break-word;
}

.wvcal-tip-linea {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 3px;
}

.wvcal-tip-linea i {
  margin-top: 2px;
  width: 12px;
  text-align: center;
  color: #64748b;
  font-size: 10px;
  flex: 0 0 auto;
}

.wvcal-tip-aviso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(231, 74, 59, .16);
  color: #fca5a5;
  font-size: 10.5px;
}

.wvcal-tip-aviso i {
  margin-top: 2px;
  font-size: 9px;
}

/* Cupos que quedan libres a esa misma hora con otro profesional. */
.wvcal-tip-cupos {
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .3);
}

.wvcal-tip-cupos-tit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: #86efac;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.wvcal-tip-cupos-tit i {
  font-size: 8.5px;
}

.wvcal-tip-cupos-prof {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
}

.wvcal-tip-cupos-prof span {
  font-weight: 600;
  font-size: 10px;
  color: #94a3b8;
  text-align: right;
  flex: 0 1 auto;
}

/* Menú: el globo no solo informa, deja actuar sin abrir el panel. */
.wvcal-tip-acciones {
  margin: 10px -13px -10px -16px;
  padding: 5px 6px 6px;
  border-top: 1px solid rgba(148, 163, 184, .2);
  background: rgba(2, 6, 23, .45);
}

.wvcal-tip-accion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e2e8f0;
  font-size: 11.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.wvcal-tip-accion + .wvcal-tip-accion {
  margin-top: 1px;
}

.wvcal-tip-accion:hover {
  background: rgba(148, 163, 184, .18);
  color: #fff;
}

.wvcal-tip-accion > i:first-child {
  width: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  flex: 0 0 auto;
}

.wvcal-tip-accion:hover > i:first-child {
  color: #93c5fd;
}

.wvcal-tip-accion.es-wsp > i:first-child,
.wvcal-tip-accion.es-wsp:hover > i:first-child {
  color: #25d366;
}

.wvcal-tip-accion > span {
  flex: 1 1 auto;
}

.wvcal-tip-accion em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 20px;
  background: #22c55e;
  color: #06280f;
}

.wvcal-tip-flecha {
  font-size: 8.5px;
  color: #475569;
  flex: 0 0 auto;
}

.wvcal-tip-accion:hover .wvcal-tip-flecha {
  color: #cbd5e1;
}

/* Botón de lo que toca AHORA con la cita: llamar, seguir la atención o cobrar. */
.wvcal-tip-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}

.wvcal-tip-principal i {
  font-size: 11px;
}

.wvcal-tip-principal:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.wvcal-tip-principal:active {
  transform: translateY(0);
  filter: brightness(.95);
}

.wvcal-tip-principal.es-llamar {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 3px 10px rgba(37, 99, 235, .4);
}

.wvcal-tip-principal.es-seguir {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 3px 10px rgba(79, 70, 229, .4);
}

.wvcal-tip-principal.es-cobrar {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 3px 10px rgba(22, 163, 74, .4);
}

/* Nota al pie del contenido, antes del menú. */
.wvcal-tip-hint {
  margin-top: 8px;
  font-size: 10px;
  color: #94a3b8;
}


/* ══════════════════════════════════════════════════════════════════════════
   Botón "Mostrar cupos libres" y selector Semana / Día
   El interruptor de cupos era un switch de 12 px en el panel lateral y pasaba
   desapercibido: es la función que responde "¿cuándo tiene hora?".
   El panel es angosto (col-lg-2 ≈ 150 px útiles), así que el botón se arma en
   DOS filas —el dato arriba, el interruptor abajo— y no en una sola, donde el
   ícono, el texto y el número se apretaban unos contra otros.
   ══════════════════════════════════════════════════════════════════════════ */

.wvcal-btn-cupos {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 11px 9px;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 100%);
  color: #14532d;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
}

.wvcal-btn-cupos:hover {
  border-color: var(--wvcal-libre);
  box-shadow: 0 4px 14px rgba(34, 197, 94, .28);
  transform: translateY(-1px);
}

.wvcal-btn-cupos:active {
  transform: translateY(0);
}

.wvcal-btn-cupos:focus-visible {
  outline: 2px solid var(--wvcal-libre);
  outline-offset: 2px;
}

/* Fila 1: el dato. */
.wvcal-btn-cupos-dato {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wvcal-btn-cupos-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--wvcal-libre);
  color: #fff;
  font-size: 13px;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(34, 197, 94, .35);
}

.wvcal-btn-cupos-cifra {
  min-width: 0;
  line-height: 1.05;
}

.wvcal-btn-cupos-cifra b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.wvcal-btn-cupos-cifra small {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #3f6212;
  opacity: .8;
}

/* Fila 2: la acción, con un interruptor de verdad para que se lea como tal. */
.wvcal-btn-cupos-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(22, 101, 52, .22);
  font-size: 11px;
  font-weight: 700;
}

.wvcal-btn-cupos-sw {
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 20px;
  background: rgba(22, 101, 52, .22);
  flex: 0 0 auto;
  transition: background .18s ease;
}

.wvcal-btn-cupos-sw i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}

/* Encendido: verde sólido y la perilla al otro lado. Se ve desde lejos en qué modo está. */
.wvcal-btn-cupos.es-activo {
  background: linear-gradient(160deg, #16a34a 0%, #15803d 100%);
  border-color: #15803d;
  color: #fff;
  box-shadow: 0 4px 16px rgba(22, 163, 74, .38);
}

.wvcal-btn-cupos.es-activo .wvcal-btn-cupos-ico {
  background: rgba(255, 255, 255, .2);
  box-shadow: none;
}

.wvcal-btn-cupos.es-activo .wvcal-btn-cupos-cifra small {
  color: #dcfce7;
  opacity: 1;
}

.wvcal-btn-cupos.es-activo .wvcal-btn-cupos-cta {
  border-top-color: rgba(255, 255, 255, .3);
}

.wvcal-btn-cupos.es-activo .wvcal-btn-cupos-sw {
  background: rgba(255, 255, 255, .45);
}

.wvcal-btn-cupos.es-activo .wvcal-btn-cupos-sw i {
  transform: translateX(13px);
}

/* Sin cupos que mostrar: el botón sigue vivo, pero no promete lo que no hay. */
.wvcal-btn-cupos.es-vacio {
  background: #f8fafc;
  border-color: var(--wvcal-borde);
  color: #64748b;
}

.wvcal-btn-cupos.es-vacio .wvcal-btn-cupos-ico {
  background: #cbd5e1;
  box-shadow: none;
}

.wvcal-btn-cupos.es-vacio .wvcal-btn-cupos-cifra small {
  color: #94a3b8;
}

@media (prefers-reduced-motion: reduce) {
  .wvcal-btn-cupos,
  .wvcal-btn-cupos-sw,
  .wvcal-btn-cupos-sw i {
    transition: none;
  }
}

/* Selector de vista. Tiene que INVITAR a probarlo: mucha gente no descubre que el calendario
   también se ve por día, así que lleva rótulo, tamaño de botón real y un activo con peso. */
.wvcal-modos {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #cbd5e1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.wvcal-modos-rotulo {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #94a3b8;
  padding: 0 6px 0 8px;
}

.wvcal-modo {
  border: 0;
  background: transparent;
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  transition: all .14s ease;
}

.wvcal-modo i {
  font-size: 11px;
  margin-right: 4px;
  opacity: .9;
}

.wvcal-modo:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

.wvcal-modo.es-activo {
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(74, 144, 226, .45);
}

.wvcal-modo.es-activo:hover {
  color: #fff;
}

/* Marca de hora del último dato: discreta, pero destella al llegar datos nuevos. */
.wvcal-actualizado {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
}

.wvcal-actualizado i {
  font-size: 9px;
}

.wvcal-actualizado.es-nuevo i {
  animation: wvcalGiro .7s ease-out;
}

.wvcal-actualizado.es-nuevo {
  animation: wvcalDestello 1.4s ease-out;
}

@keyframes wvcalGiro {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wvcalDestello {
  0%   { color: #16a34a; }
  100% { color: #94a3b8; }
}

@media (prefers-reduced-motion: reduce) {
  .wvcal-actualizado.es-nuevo,
  .wvcal-actualizado.es-nuevo i {
    animation: none;
  }
}

/* Cabecera de la vista Día: una columna por profesional. */
.wvcal-head-cell.es-prof {
  padding: 8px 6px;
}

.wvcal-head-prof {
  font-size: 12px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}