/* =========================================================
   Essence · agenda.css
   Rejilla de agenda (grid.js), barra de la vista (index.js), mini-calendario
   mensual (month.js), sheet de cita (appointment-sheet.js), nueva cita
   (new-appointment.js) y client-picker (ui/client-picker.js).
   Enlazar en app/index.php tras booking.css.
   ========================================================= */

/* ---- Página + barra superior ---- */
.ess-agenda { padding: var(--sp-4); }
.ess-agenda__toolbar { margin-bottom: var(--sp-4); }
.ess-agenda__toolrow {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
}
.ess-agenda__toolright { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.ess-agenda__datenav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ess-agenda__navbtn, .ess-agenda__today {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; min-width: 38px; padding: 0 var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.ess-agenda__today { padding: 0 var(--sp-3); font-weight: 600; }
.ess-agenda__navbtn:hover, .ess-agenda__today:hover { border-color: var(--border-strong); }
.ess-agenda__datepick { height: 38px; max-width: 160px; }
.ess-agenda__datelabel { font-weight: 600; color: var(--text); text-transform: capitalize; }

.ess-agenda__viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.ess-agenda__viewbtn {
  padding: var(--sp-2) var(--sp-3); background: var(--surface); border: none;
  color: var(--text-soft); cursor: pointer; font-size: var(--fs-sm); border-right: 1px solid var(--border);
}
.ess-agenda__viewbtn:last-child { border-right: none; }
.ess-agenda__viewbtn.is-active { background: var(--brand); color: var(--brand-contrast); }
/* height:38px + el padding vertical de .v2-select (12px) con box-sizing:border-box dejaba la
   caja de contenido en 12px y recortaba el texto. Anulamos el padding vertical (el <select>
   centra el texto en la altura fija); conservamos el horizontal. */
.ess-agenda__loc, .ess-agenda__staff { height: 38px; max-width: 200px; padding-block: 0; line-height: 1.2; }

/* ---- Menú rápido "+" (falta de disponibilidad / tiempo libre / ausencia) ---- */
.ess-agenda__pluswrap { position: relative; }
.ess-agenda__plus { height: 38px; min-width: 38px; padding: 0 var(--sp-3); font-size: 1.2rem; font-weight: 700; }
.ess-agenda__plusmenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  display: flex; flex-direction: column; min-width: 220px;
}
/* El display:flex de arriba pisaría el display:none del atributo [hidden]. */
.ess-agenda__plusmenu[hidden] { display: none; }
.ess-agenda__plusmenu {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12));
  overflow: hidden;
}
.ess-agenda__plusitem {
  padding: var(--sp-3) var(--sp-4); text-align: left; background: none; border: none;
  cursor: pointer; font-size: var(--fs-sm); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.ess-agenda__plusitem:last-child { border-bottom: none; }
.ess-agenda__plusitem:hover { background: var(--surface-2); }

/* ---- Hoja de indisponibilidad (ui/timeoff-sheet.js) ---- */
.ess-timeoff__kinds { margin-bottom: var(--sp-4); }
.ess-timeoff__fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.ess-timeoff__field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ess-timeoff__label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ess-timeoff__row { display: flex; gap: var(--sp-3); }
.ess-timeoff__allday { margin: var(--sp-1) 0; }
.ess-timeoff__fixedstaff { padding: var(--sp-2) 0; font-weight: 600; }
.ess-timeoff__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
.ess-timeoff__warn {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.ess-timeoff__warntitle { margin: 0 0 var(--sp-2); font-weight: 700; }
.ess-timeoff__conflict { padding: 2px 0; }

/* ---- Sheet de ausencias por profesional (admin-equipo) ---- */
.ess-stafftimeoff__head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ess-stafftimeoff__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ess-stafftimeoff__row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.ess-stafftimeoff__main { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }

/* ---- Franja de ausencia/bloqueo en la rejilla ---- */
.ess-agrid__timeoff {
  position: absolute; left: 2px; right: 2px;
  border-radius: var(--r-sm);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--muted) 16%, transparent) 0 6px,
    color-mix(in srgb, var(--muted) 7%, transparent) 6px 12px);
  border: 1px dashed var(--border-strong);
  color: var(--muted); font-size: var(--fs-xs);
  padding: 2px 6px; overflow: hidden;
}
.ess-agrid__timeoff-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.ess-agenda__movebanner {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  border: 1px solid var(--accent); border-radius: var(--r-sm);
}

/* ---- Rejilla ---- */
.ess-agenda__gridhost { overflow-x: auto; }
.ess-agrid {
  --agrid-border: var(--border);
  min-width: max-content; border: 1px solid var(--agrid-border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); user-select: none;
}
.ess-agrid__head { display: grid; position: sticky; top: 0; z-index: 3; background: var(--surface-2); }
.ess-agrid__corner { border-right: 1px solid var(--agrid-border); }
.ess-agrid__colhead {
  padding: var(--sp-2); border-left: 1px solid var(--agrid-border);
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font-size: var(--fs-sm); font-weight: 600;
}
.ess-agrid__colname { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ess-agrid__colsub { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.ess-agrid__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

.ess-agrid__body { display: grid; position: relative; }
.ess-agrid__timecol { border-right: 1px solid var(--agrid-border); }
.ess-agrid__timecell {
  height: 26px; font-size: var(--fs-xs); color: var(--muted);
  padding-right: var(--sp-2); text-align: right; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.ess-agrid__timecell.is-hour { color: var(--text-soft); font-weight: 600; }

.ess-agrid__col { position: relative; border-left: 1px solid var(--agrid-border); }
.ess-agrid__cell {
  height: 26px; box-sizing: border-box; border-bottom: 1px dashed transparent;
}
.ess-agrid__cell.is-hour { border-top: 1px solid color-mix(in srgb, var(--agrid-border) 60%, transparent); }
.ess-agrid__cell.is-closed { background: repeating-linear-gradient(45deg, transparent, transparent 6px, color-mix(in srgb, var(--muted) 8%, transparent) 6px, color-mix(in srgb, var(--muted) 8%, transparent) 12px); }
.ess-agrid__cell.is-past { background: color-mix(in srgb, var(--muted) 6%, transparent); }
.ess-agrid__cell.is-free { cursor: pointer; }
.ess-agrid__cell.is-free:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ess-agrid__cell.is-drop-target { background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.ess-agrid.is-moving-mode .ess-agrid__cell.is-move-target { background: color-mix(in srgb, var(--success) 20%, transparent); cursor: pointer; box-shadow: inset 0 0 0 1px var(--success); }

/* Chips de cita */
.ess-agrid__chip {
  position: absolute; left: 3px; right: 3px; box-sizing: border-box;
  padding: 2px 6px; border-radius: var(--r-sm); overflow: hidden;
  display: flex; flex-direction: column; gap: 0; cursor: pointer; z-index: 2;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  font-size: var(--fs-xs); line-height: 1.25;
  box-shadow: 0 2px 6px -3px rgba(0,0,0,.3);
}
.ess-agrid__chip:hover { filter: brightness(1.03); z-index: 4; }
.ess-agrid__chip.is-faded { opacity: 0.55; }
.ess-agrid__chip.is-dragging { opacity: 0.4; }
.ess-agrid__chip.is-moving { outline: 2px dashed var(--brand); outline-offset: 1px; }
.ess-agrid__chip-time { font-weight: 700; }
.ess-agrid__chip-client { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-agrid__chip-svc { color: color-mix(in srgb, currentColor 78%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-agrid__paid {
  position: absolute; top: 2px; right: 4px; font-weight: 800; font-size: 11px;
  width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--success); color: #fff;
}
.ess-agrid__heart {
  position: absolute; top: 2px; right: 22px; font-size: 11px; line-height: 15px;
  color: var(--danger);
}
.ess-agrid__chip:not(.is-paid) .ess-agrid__heart { right: 4px; }
/* El chip usa las variantes de estado de _status.js como fondo (mezcla con surface). */
.ess-agrid__chip.ess-status--confirmed { background: color-mix(in srgb, var(--success) 22%, var(--surface)); color: var(--text); }
.ess-agrid__chip.ess-status--arrived   { background: color-mix(in srgb, var(--success) 38%, var(--surface)); color: var(--text); }
.ess-agrid__chip.ess-status--pending   { background: color-mix(in srgb, var(--warning) 24%, var(--surface)); color: var(--text); }
.ess-agrid__chip.ess-status--progress  { background: color-mix(in srgb, var(--info) 24%, var(--surface)); color: var(--text); }
.ess-agrid__chip.ess-status--completed { background: var(--surface-2); color: var(--text-soft); }
.ess-agrid__chip.ess-status--cancelled { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--text-soft); }
.ess-agrid__chip.ess-status--noshow    { background: color-mix(in srgb, var(--danger) 24%, var(--surface)); color: var(--text); }
.ess-agrid__chip.ess-status--rescheduled { background: var(--surface-2); color: var(--muted); }

.ess-agrid__now { position: absolute; left: 56px; right: 0; height: 2px; background: var(--danger); z-index: 5; pointer-events: none; }
.ess-agrid__now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }

/* ---- Mini-calendario mensual ---- */
.ess-agenda__monthhost { max-width: 720px; margin: 0 auto; }
.ess-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.ess-month__wd { text-align: center; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; padding-bottom: var(--sp-1); }
.ess-month__blank { }
.ess-month__day {
  aspect-ratio: 1 / 1; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; padding: var(--sp-1);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  color: var(--text);
}
.ess-month__day:hover { border-color: var(--border-strong); }
.ess-month__day.is-today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ess-month__day.has-appts { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.ess-month__num { font-weight: 600; font-size: var(--fs-sm); }
.ess-month__count { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; align-self: flex-end; }
.ess-month__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- Sheet de cita ---- */
.ess-apptsheet__detail { margin-bottom: var(--sp-4); }
.ess-apptsheet__topline { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ess-apptsheet__code { font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-mono, monospace); }
.ess-apptsheet__client { margin: 0 0 var(--sp-3); font-size: 1.15rem; }
.ess-apptsheet__rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.ess-apptsheet__row { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); font-size: var(--fs-sm); }
.ess-apptsheet__notes { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.ess-apptsheet__notes--int { background: color-mix(in srgb, var(--warning) 12%, var(--surface-2)); }
.ess-apptsheet__actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.ess-apptsheet__act { justify-content: flex-start; gap: var(--sp-2); }

/* ---- Nueva cita ---- */
.ess-newappt__section { margin-bottom: var(--sp-4); }
.ess-newappt__h { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ess-newappt__quick { margin-top: var(--sp-2); }
.ess-newappt__quickgrid, .ess-newappt__dt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ess-newappt__cat { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.ess-newappt__svcgrid { display: grid; gap: var(--sp-2); }
.ess-newappt__svc {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; position: relative;
}
.ess-newappt__svc.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ess-newappt__svc .ess-icon { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--success); }
.ess-newappt__svcname { font-weight: 600; }
.ess-newappt__svcmeta { font-size: var(--fs-xs); color: var(--muted); }
.ess-newappt__total { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--border); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }

/* ---- Client picker ---- */
.ess-cpick__searchbar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); margin-bottom: var(--sp-3); }
.ess-cpick__searchbar .v2-input { border: none; padding: 0; background: transparent; }
.ess-cpick__searchbar .v2-input:focus { border: none; box-shadow: none; }
.ess-cpick__results { display: flex; flex-direction: column; gap: var(--sp-1); min-height: 60px; }
.ess-cpick__hint { color: var(--muted); font-size: var(--fs-sm); padding: var(--sp-2); }
.ess-cpick__hint--error { color: var(--danger); }
.ess-cpick__row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid transparent; border-radius: var(--r-sm); background: var(--surface); cursor: pointer; text-align: left; }
.ess-cpick__row:hover { border-color: var(--border); background: var(--surface-2); }
.ess-cpick__avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--brand-contrast); font-weight: 700; flex-shrink: 0; }
.ess-cpick__meta { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ess-cpick__name { font-weight: 600; }
.ess-cpick__sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-cpick__quick { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.ess-cpick__newbtn { gap: var(--sp-1); }
.ess-cpick__form { margin-top: var(--sp-3); }
.ess-cpick__formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }

/* Campo inline del picker */
.ess-cpickfield__wrap { display: flex; align-items: center; gap: var(--sp-2); }
.ess-cpickfield {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; color: var(--muted); text-align: left;
}
.ess-cpickfield.has-value { color: var(--text); border-color: var(--border-strong); }
.ess-cpickfield__label { flex: 1; }
.ess-cpickfield__clear { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); }

@media (max-width: 640px) {
  .ess-agenda__toolrow { flex-direction: column; align-items: stretch; }
  .ess-agenda__toolright { justify-content: space-between; }
  /* En móvil el select de profesional/sede ocupa el ancho completo (200px cortaba
     "Todos los profesionales"). */
  .ess-agenda__loc, .ess-agenda__staff { max-width: none; flex: 1 1 100%; }
  .ess-newappt__quickgrid, .ess-newappt__dt, .ess-cpick__formgrid { grid-template-columns: 1fr; }
}

/* ---- Agenda v2: vista de lista diaria (list.js, RF-AG-018) ---- */
.ess-aglist__summary {
  display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.ess-aglist__sumcell {
  flex: 1; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); display: flex; flex-direction: column; gap: 2px; text-align: center;
}
.ess-aglist__sumval { font-size: 1.25rem; font-weight: 800; font-family: var(--font-body, inherit); }
.ess-aglist__sumlabel { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ess-aglist__rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.ess-aglist__row {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.ess-aglist__row:hover { border-color: var(--border-strong); }
.ess-aglist__when { display: flex; flex-direction: column; min-width: 48px; }
.ess-aglist__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.ess-aglist__dur { font-size: var(--fs-xs); color: var(--muted); }
.ess-aglist__bar { width: 4px; align-self: stretch; border-radius: 2px; padding: 0 !important; }
.ess-aglist__main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.ess-aglist__client { font-weight: 600; }
.ess-aglist__heart { color: var(--danger); }
.ess-aglist__meta { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-aglist__paid {
  font-weight: 800; font-size: 11px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--success); color: #fff;
}

/* ---- Hoja de filtros de profesionales (RF-AG-013) ---- */
.ess-agfilter__quick { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ess-agfilter__list { display: flex; flex-direction: column; gap: var(--sp-1); }
.ess-agfilter__row { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }

/* ---- Calendario mensual desplegable en la cabecera (RF-AG-003) ---- */
.ess-agenda__monthwrap { position: relative; }
.ess-agenda__datelabel--btn { background: none; border: none; cursor: pointer; font: inherit; }
.ess-agenda__monthdd {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 45;
  width: min(360px, 92vw); padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.ess-agenda__monthdd[hidden] { display: none; }

/* ---- Detalle de cita: bloques nuevos (RF-AG-010) ---- */
.ess-apptsheet__origin { margin: 2px 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.ess-apptsheet__block { margin-top: var(--sp-3); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.ess-apptsheet__block summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.ess-apptsheet__blockh { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ess-apptsheet__blockact { margin-top: var(--sp-2); display: flex; justify-content: flex-end; }
.ess-apptsheet__payrow { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0; font-size: var(--fs-sm); }
.ess-apptsheet__paymeta { color: var(--muted); flex: 1; }
.ess-apptsheet__due { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--fs-sm); }
.ess-apptsheet__histrow { display: flex; gap: var(--sp-2); padding: 2px 0; font-size: var(--fs-xs); color: var(--text-soft); }
.ess-apptsheet__histtime { color: var(--muted); min-width: 84px; font-variant-numeric: tabular-nums; }
.ess-apptsheet__ics { margin-top: var(--sp-3); }

/* ---- Nueva cita: banner naranja fuera de turno (RF-AG-008) + ❤ ---- */
.ess-newappt__warn {
  margin: var(--sp-3) 0; padding: var(--sp-3);
  background: color-mix(in srgb, var(--warning) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.ess-newappt__heart { margin-top: var(--sp-2); }
.ess-newappt__preclient { margin: 0 0 var(--sp-2); }

/* Cabecera de columna con el turno del día */
.ess-agrid__colsub { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }

/* ── T3: complementos en nueva cita ──────────────────────── */
.ess-newappt__addons {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-1) 0 var(--sp-2) var(--sp-3);
}
.ess-newappt__addon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  background: none;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}
.ess-newappt__addon small { color: var(--text-muted); font-size: 0.72rem; }
.ess-newappt__addon.is-on {
  border-style: solid;
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}