/* ── BITÁCORA ──
   [v2026.10.08-1] hvy-modalidad.css (NUEVO)
   2026-10-08 | Elegir la modalidad de atención (hvy-modalidad.js [v2026.10.08-1]; vista previa
     aprobada por Alberto el 08-10):
     · .hvy-mod-op: cada opción (Presencial, Online, A domicilio) con su ícono y su color; la
       marcada se tiñe con el fondo de su modalidad.
     · .hvy-mod--fila: en una sola línea, con el ícono de la fila (el recuadro de reservar en
       Conversaciones; pedido de Alberto: "que quepa en una sola línea").
     · .falta: falta elegir. Las opciones se marcan y aparece el aviso debajo.
     · .hvy-mod--detalle: dentro de CITA ACTUAL del calendario, con el rótulo como los demás.
     · .seg-agenda-mod: bajo las horas de Seguimiento › Agendar próxima sesión (seg-agenda.js).
*/

.hvy-mod { margin: 8px 0 4px; }
.hvy-mod-tit { font-size: 10px; font-weight: 700; color: #7D84C1; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.hvy-mod-tit small { font-size: 10.5px; font-weight: 600; color: #b7791f; text-transform: none; letter-spacing: 0; }
.hvy-mod-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.hvy-mod-op { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid #e3e0ef; background: #fff; font: 600 12px 'DM Sans', 'Poppins', sans-serif; color: #4b5068;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s; line-height: 1.2; }
.hvy-mod-op i { font-size: 11px; color: var(--mod-color); }
.hvy-mod-op:hover { border-color: var(--mod-color); }
.hvy-mod-op.on { background: var(--mod-bg); border-color: var(--mod-color); color: var(--mod-color);
  box-shadow: 0 1px 4px rgba(30, 25, 80, .08); }
.hvy-mod-op:focus-visible { outline: 2px solid var(--mod-color); outline-offset: 1px; }
.hvy-mod-falta { display: none; margin-top: 6px; font-size: 11px; color: #c2410c; align-items: center; gap: 6px; }
.hvy-mod.falta .hvy-mod-falta { display: flex; }
.hvy-mod.falta .hvy-mod-op:not(.on) { border-color: #f3b49f; }
/* Guardando (el detalle de la cita): se ve, pero no se toca hasta que responda el servidor. */
.hvy-mod--ocupado .hvy-mod-op { opacity: .6; cursor: progress; }

/* En una línea: el ícono de la fila y las opciones, más chicas. */
.hvy-mod--fila { margin: 2px 0 8px; }
.hvy-mod-linea { display: flex; align-items: center; gap: 6px; }
.hvy-mod-ico { color: #9961FF; width: 12px; font-size: 11.5px; flex-shrink: 0; }
.hvy-mod--fila .hvy-mod-ops { gap: 5px; flex-wrap: wrap; }
.hvy-mod--fila .hvy-mod-op { padding: 3px 9px; font-size: 11px; gap: 5px; }
.hvy-mod--fila .hvy-mod-op i { font-size: 10px; }
.hvy-mod--fila .hvy-mod-falta { margin-left: 18px; }

/* Bajo las horas de Seguimiento › Agendar próxima sesión. */
.seg-agenda-mod .hvy-mod--fila { margin: 10px 0 2px; }

/* Dentro de CITA ACTUAL del calendario: la fila entera, con el rótulo como Fecha u Hora. */
#appt-modalidad-wrap.hvy-mod-editable { grid-column: 1 / -1; }
.hvy-mod--detalle { margin: 0; }
.hvy-mod--detalle .hvy-mod-tit { font-size: 10px; font-weight: 400; color: rgba(56, 56, 56, 0.42); text-transform: none;
  letter-spacing: 0; margin-bottom: 5px; }