/* =====================================================================
   agenda.css — Agenda: calendario (FullCalendar), horarios, detalle de cita,
   disponibilidad, tipos de cita, calendarios, páginas de reserva y ajustes.
   También lo usan las páginas públicas (horarios, interruptores, resumen).
   ===================================================================== */

/* ---------- Utilidades comunes ---------- */
.small { font-size: .84rem; }
.is-off { opacity: .62; }
.link-strong { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.link-subtle--spaced { margin-top: 14px; }
button.link-subtle { padding: 0; border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.btn-row--spaced { margin-top: 16px; }
.btn-row--center { justify-content: center; }
.form-grid--spaced { margin-top: 18px; }
.field--spaced { margin-top: 16px; }
.check-row--sm { font-size: .84rem; font-weight: 600; }
.check-row--sm input { width: 16px; height: 16px; }
.check-row--spaced { margin-top: 18px; align-items: flex-start; }
.check-row--spaced input { margin-top: 3px; }
.spinner--dark { display: inline-block; width: 15px; height: 15px; border-color: var(--ink); border-right-color: transparent; vertical-align: -2px; }
.avatar--md { width: 48px; height: 48px; border-radius: 15px; font-size: .9rem; }
.modal--lg { width: min(760px, 100% - 24px); }
.tabs--scroll { scrollbar-width: none; }
.tabs--scroll::-webkit-scrollbar { display: none; }

.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: .86rem; font-weight: 700; }
.back-link:hover { color: var(--ink); }
.back-link .ico { width: 16px; height: 16px; }

.page-intro { max-width: 720px; margin: -4px 0 18px; color: var(--muted); font-size: .9rem; }
.page-intro strong { color: var(--ink); }

.subhead { margin: 20px 0 10px; font-size: .9rem; }

/* Select en forma de píldora (filtros del calendario, cambio de anfitrión) */
.select-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 34px 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  transition: border-color .2s;
}
.select-pill:hover, .select-pill:focus-within { border-color: var(--ink); }
.select-pill > .ico { width: 16px; height: 16px; color: var(--muted); }
.select-pill select {
  min-width: 0;
  max-width: 220px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: .86rem;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.select-pill select:focus { outline: none; }
.host-switch { margin-bottom: 16px; }

/* Interruptor */
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: .9rem; font-weight: 600; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--surface-3);
  transition: background-color .2s;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30, 30, 40, .25);
  transition: transform .2s var(--ease);
}
.switch input:checked + .switch__track { background: var(--sage); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--chart); outline-offset: 2px; }
.switch input:disabled + .switch__track { opacity: .5; }
.switch--row { display: flex; align-items: flex-start; }
.switch--row .switch__track { margin-top: 1px; }

/* Grupo con leyenda */
.fieldset { margin: 0; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--radius); }
.fieldset legend { padding: 0 8px; font-size: .84rem; font-weight: 800; }
.fieldset .field__help { margin: 0 0 12px; }

/* Insignia de tipo de cita */
.type-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.type-chip--dark { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .8rem; font-weight: 700; }

/* Opciones en chips (recordatorios, días) */
.chip-checks, .day-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 700;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip-check:hover span { border-color: #cdd2dc; }
.chip-check input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip-check input:focus-visible + span { box-shadow: 0 0 0 4px var(--sky); }
.chip-check--day span { justify-content: center; width: 52px; padding-inline: 0; }

/* Campos compuestos */
.input-action, .input-prefix, .input-suffix { display: flex; align-items: center; gap: 8px; min-width: 0; }
.input-action input { flex: 1; min-width: 0; }
.input-prefix {
  gap: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.input-prefix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--sky); }
.input-prefix span { flex-shrink: 1; min-width: 0; padding: 0 4px 0 12px; overflow: hidden; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.field .input-prefix input { flex: 1 0 110px; min-width: 0; border: 0; border-radius: 0; box-shadow: none !important; }
.input-suffix input { flex: 0 0 110px; }
.input-suffix span { color: var(--muted); font-size: .88rem; font-weight: 600; }
.input-sm {
  width: 72px;
  height: 38px;
  padding: 6px 10px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: .9rem;
}
.input-sm:focus { outline: none; border-color: var(--ink); }
.input-sm:disabled { opacity: .45; }

/* Barra de acciones fija al pie (formularios largos) */
.sticky-actions {
  position: sticky;
  bottom: 12px;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: fit-content;
  margin: 16px 0 0 auto;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-pop);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* =====================================================================
   HORARIOS (panel y páginas públicas)
   ===================================================================== */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; min-height: 48px; }
.slot-grid__hint, .slot-grid__loading { grid-column: 1 / -1; margin: 0; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); font-size: .86rem; text-align: center; }
.slot {
  min-height: 44px;
  padding: 10px 8px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease);
}
.slot:hover { border-color: var(--ink); transform: translateY(-1px); }
.slot.is-selected { border-color: var(--ink); background: var(--ink); color: #fff; }

/* =====================================================================
   CALENDARIO (FullCalendar con el estilo del panel)
   ===================================================================== */
.cal-card { padding: 16px; }
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cal-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: .8rem; font-weight: 600; color: var(--muted); }
.cal-legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend__dot--blocked { background: repeating-linear-gradient(45deg, #c3c8d2 0 3px, #eceef3 3px 6px); }

#calendar {
  --fc-border-color: var(--line);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--surface-2);
  --fc-today-bg-color: #f6f9fe;
  --fc-now-indicator-color: var(--coral);
  --fc-event-border-color: transparent;
  --fc-list-event-hover-bg-color: var(--surface-2);
  font-size: .84rem;
}
#calendar .fc-toolbar { flex-wrap: wrap; gap: 10px; }
#calendar .fc-toolbar-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; text-transform: capitalize; }
#calendar .fc-button {
  padding: .5em .85em;
  border: 0;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  text-transform: none;
  box-shadow: none !important;
}
#calendar .fc-button:hover { background: var(--surface-3); }
#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active { background: var(--ink); color: #fff; }
#calendar .fc-button:disabled { opacity: .5; }
#calendar .fc-button-group { gap: 3px; }
#calendar .fc-button-group > .fc-button { border-radius: 11px; }
#calendar .fc-scrollgrid { border-radius: var(--radius-sm); overflow: hidden; }
#calendar .fc-col-header-cell-cushion { padding: 10px 4px; color: var(--muted); font-size: .76rem; font-weight: 700; text-transform: capitalize; }
#calendar .fc-timegrid-slot { height: 2.6em; }
#calendar .fc-timegrid-slot-label-cushion, #calendar .fc-timegrid-axis-cushion { color: var(--subtle); font-size: .72rem; font-weight: 600; }
#calendar .fc-daygrid-day-number { padding: 6px 8px; color: var(--muted); font-weight: 700; }
#calendar .fc-day-today .fc-daygrid-day-number { color: var(--ink); }
#calendar .fc-list-day-cushion { background: var(--surface-2); }
#calendar .fc-list-event-title a { color: var(--ink); }

.fc-booking { border-radius: 10px !important; overflow: hidden; cursor: pointer; }
.fc-booking .fc-event-main { color: var(--ink); }
.fc-booking__inner { display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; overflow: hidden; line-height: 1.25; }
.fc-booking__time { font-size: .7rem; font-weight: 700; opacity: .75; }
.fc-booking__title { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.fc-booking__meta { overflow: hidden; font-size: .7rem; opacity: .75; text-overflow: ellipsis; white-space: nowrap; }
.fc-booking.is-pending { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .45) 0 6px, transparent 6px 12px) !important; }
.fc-booking.is-canceled { opacity: .45; text-decoration: line-through; }
.fc-booking.is-no_show { opacity: .7; }
.fc-daygrid-event.fc-booking { padding: 0; }
.fc-list-event.fc-booking .fc-booking__inner { padding: 0; }
.fc-list .fc-booking .fc-event-main, .fc-list-event .fc-list-event-graphic { color: var(--ink); }
.fc-blocked, .fc-holiday { background: repeating-linear-gradient(45deg, rgba(195, 200, 210, .5) 0 4px, rgba(236, 238, 243, .5) 4px 8px) !important; opacity: 1 !important; }
.fc-holiday .fc-event-title { margin: 4px; color: var(--muted); font-size: .7rem; font-style: normal; font-weight: 700; }

/* =====================================================================
   RESERVAS
   ===================================================================== */
.tile--link { transition: transform .25s var(--ease), box-shadow .25s; }
.tile--link:hover { transform: translateY(-3px); }
.tile.is-current { box-shadow: 0 0 0 2.5px var(--ink); }
.filters--wide .filters__actions { align-self: end; }

/* =====================================================================
   DETALLE DE CITA
   ===================================================================== */
.detail-grid { display: grid; gap: 16px; align-items: start; }
.detail-main, .detail-side { display: grid; gap: 16px; min-width: 0; }

.booking-hero { display: grid; gap: 6px; padding: clamp(22px, 3vw, 30px); }
.booking-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.booking-hero__date { margin: 0; font-size: clamp(1.35rem, 1.6vw + .9rem, 1.9rem); line-height: 1.2; }
.booking-hero__time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; font-weight: 700; }
.booking-hero__time small { color: rgba(255, 255, 255, .55); font-size: .82rem; font-weight: 600; }
.booking-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .7); font-size: .86rem; }
.booking-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.booking-hero__facts .ico { width: 16px; height: 16px; }
.booking-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.btn--outline-light { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); color: #fff; }
.btn--outline-light:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); }
.btn--outline-light:disabled { opacity: .45; cursor: default; }

.guest { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.guest strong { display: block; font-size: 1.02rem; }
.guest small { color: var(--muted); }
.stat-list--compact li { padding: 6px 0; }
.stat-list--compact li a, .stat-list--compact li strong { margin-left: auto; overflow-wrap: anywhere; text-align: right; }

.answers { display: grid; gap: 10px; margin: 0; }
.answers div { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.answers dt { color: var(--muted); font-size: .76rem; font-weight: 700; }
.answers dd { margin: 2px 0 0; font-size: .9rem; overflow-wrap: anywhere; }

.reminders { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.reminders li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.reminders li:first-child { border-top: 0; padding-top: 0; }
.reminders li > div { flex: 1; min-width: 0; }
.reminders strong { display: block; font-size: .84rem; }
.reminders small { display: block; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.reminders__channel { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px; }
.reminders__channel .ico { width: 16px; height: 16px; }

/* =====================================================================
   DISPONIBILIDAD
   ===================================================================== */
.week { display: grid; gap: 4px; }
.week__day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "toggle add" "blocks blocks" "error error";
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.week__day:first-child { border-top: 0; padding-top: 0; }
.week__toggle { grid-area: toggle; }
.week__name { min-width: 92px; font-weight: 700; }
.week__blocks { grid-area: blocks; display: grid; gap: 8px; min-width: 0; }
.week__add { grid-area: add; }
.week__error { grid-area: error; }
.week__off { display: none; color: var(--subtle); font-size: .86rem; font-weight: 600; }
.week__day.is-off .time-range { display: none; }
.week__day.is-off .week__off { display: block; }

.time-range { display: flex; align-items: center; gap: 8px; min-width: 0; }
.time-range input {
  flex: 1 1 0;
  min-width: 0;
  max-width: 140px;
  height: 42px;
  padding: 8px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: .95rem;
}
.time-range input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--sky); }
.time-range input:disabled { background: var(--surface-2); color: var(--muted); }
.time-range > span { color: var(--subtle); }

.date-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.date-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.date-list li:first-child { border-top: 0; padding-top: 0; }
.date-list li > div { flex: 1; min-width: 0; }
.date-list strong { display: block; font-size: .86rem; }
.date-list small { display: block; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.date-list.is-muted { opacity: .55; }
.date-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px; height: 50px;
  border-radius: 14px;
  line-height: 1;
}
.date-badge strong { font-size: 1.05rem; }
.date-badge small { margin-top: 2px; color: var(--muted-on-tone); font-size: .66rem; font-weight: 700; text-transform: uppercase; }

/* =====================================================================
   TIPOS DE CITA
   ===================================================================== */
.type-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.type-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--type-color, var(--sage)); }
.type-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.type-card__head > div { flex: 1; min-width: 0; }
.type-card__head h3 { margin: 0; font-size: 1.05rem; }
.type-card__head small { color: var(--muted); font-size: .8rem; }
.type-card__dot { flex-shrink: 0; width: 14px; height: 14px; margin-top: 4px; border-radius: 5px; background: var(--type-color, var(--sage)); }
.type-card__facts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .84rem; }
.type-card__facts li { display: flex; align-items: center; gap: 8px; }
.type-card__facts .ico { width: 16px; height: 16px; color: var(--ink); }
.type-card__foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.type-card__slug { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.type-card.is-off { opacity: 1; }
.type-card.is-off > *:not(.type-card__foot) { opacity: .6; }
.type-card--add { min-height: 200px; }

.type-form__main { display: grid; gap: 16px; align-content: start; min-width: 0; }
.form-grid--3 { display: grid; gap: 16px; }
.choice-group--3 { gap: 10px; }
[data-rules].is-muted { opacity: .55; }

.questions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.question {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.question.is-ghost { border-style: dashed; background: var(--surface-2); opacity: .7; }
.question__grip {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px; height: 46px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--subtle);
  cursor: grab;
  touch-action: none;
}
.question__grip:hover { background: var(--surface-2); color: var(--ink); }
.question__grip .ico { width: 18px; height: 18px; }
.question__body { display: grid; flex: 1; gap: 10px; min-width: 0; }
.question__row { display: grid; gap: 10px; }
.question__row--meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.question__remove { margin-top: 4px; }
.questions__empty { margin: 4px 0 0; }

.select-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.select-inline select {
  height: 36px;
  padding: 0 32px 0 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23646a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}

.type-preview { display: grid; gap: 10px; justify-items: start; }
.type-preview .eyebrow { margin-bottom: 6px; }
.type-preview__dot { width: 34px; height: 34px; border-radius: 11px; }
.type-preview__name { margin: 0; font-size: 1.3rem; }
.type-preview__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 6px; padding: 0; list-style: none; color: rgba(255, 255, 255, .72); font-size: .86rem; }
.type-preview__facts li { display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================================
   CALENDARIOS
   ===================================================================== */
.calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.calendar-card { min-height: 200px; }
.calendar-card small { overflow-wrap: anywhere; }
.calendar-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.folder--light { background: var(--surface); color: var(--ink); --folder-shadow: rgba(30, 30, 40, .35); }
.folder--light .icon-btn--dark { border-color: var(--line); background: var(--surface-2); color: var(--ink); }
.folder--sage .icon-btn--dark { border-color: rgba(30, 30, 34, .15); background: rgba(255, 255, 255, .3); color: var(--ink); }
button.folder { font: inherit; cursor: pointer; }
button.folder:not(.folder--add) { border: 0; }
.avatar-stack { display: flex; min-height: 32px; }
.avatar-stack .avatar { box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .9); }
.avatar-stack .avatar + .avatar { margin-left: -4px; }

.host-table { display: grid; gap: 4px; }
.host-table__head { display: none; }
.host-table__row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.host-table__row:first-of-type { border-top: 0; }
.host-table__row > .check-row { min-width: 0; }
.host-table__row .cell-user > span:last-child { min-width: 0; overflow-wrap: anywhere; font-size: .86rem; }
.host-table__row.is-off .cell-user { opacity: .55; }

/* =====================================================================
   PÁGINAS DE RESERVA
   ===================================================================== */
.page-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.share-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.share-card.is-off { opacity: 1; }
.share-card.is-off .share-card__qr { opacity: .4; }
.share-card__qr { display: grid; justify-items: center; gap: 8px; }
.share-card__qr img { width: 148px; height: 148px; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; }
.share-card__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.share-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.share-card__head > div { flex: 1; min-width: 0; }
.share-card__head h3 { margin: 0; font-size: 1.08rem; }
.share-card__head small { color: var(--muted); font-size: .8rem; }
.share-card .type-card__dot { background: var(--type-color); }

.copy-field { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--radius-sm); background: var(--surface-2); }
.copy-field__icon { display: none; }
.copy-field input { flex: 1; min-width: 0; height: 38px; padding: 0 8px; border: 0; background: none; color: var(--ink); font-size: .86rem; font-weight: 600; text-overflow: ellipsis; }
.copy-field input:focus { outline: none; }

.embed-box { border-top: 1px solid var(--line); padding-top: 12px; }
.embed-box summary { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .86rem; font-weight: 700; cursor: pointer; list-style: none; }
.embed-box summary::-webkit-details-marker { display: none; }
.embed-box summary:hover, .embed-box[open] summary { color: var(--ink); }
.embed-box summary .ico { width: 16px; height: 16px; }
.embed-box .segmented { margin: 12px 0 10px; }
.embed-box__code { display: grid; justify-items: start; gap: 8px; }
.embed-box__code textarea {
  width: 100%;
  min-height: 84px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #d6f0de;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .76rem;
  line-height: 1.5;
  resize: vertical;
}

/* =====================================================================
   AJUSTES
   ===================================================================== */
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.var-chip {
  padding: 6px 10px;
  border: 1px dashed #c3c8d2;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.var-chip:hover { border-color: var(--ink); background: var(--sky); }
.templates { display: grid; gap: 18px; }
.template-field label { display: inline-flex; align-items: center; gap: 10px; }
.template-field__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.template-field__icon .ico { width: 14px; height: 14px; }
.template-field textarea { min-height: 110px; font-size: .92rem; }

/* =====================================================================
   MEDIA QUERIES
   ===================================================================== */
@media (min-width: 640px) {
  .cal-card { padding: 22px; }
  .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question__row { grid-template-columns: minmax(0, 1fr) 190px; }
  .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week__day { grid-template-columns: 170px minmax(0, 1fr) auto; grid-template-areas: "toggle blocks add" ". error error"; align-items: start; }
  .week__toggle { min-height: 42px; }
  .week__off { line-height: 42px; }
  .week__add { margin-top: 2px; }
  .share-card { grid-template-columns: 170px minmax(0, 1fr); align-items: start; }
  .copy-field__icon { display: grid; place-items: center; width: 36px; color: var(--muted); }
  .copy-field__icon .ico { width: 17px; height: 17px; }
  .host-table__head { display: grid; grid-template-columns: 1fr 72px 72px 90px; gap: 10px; padding-bottom: 6px; color: var(--subtle); font-size: .72rem; font-weight: 700; }
  .host-table__row { grid-template-columns: 1fr 72px 72px 90px; }
  .choice-group--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters--wide { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .filters--wide .filters__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (min-width: 1280px) {
  .filters--wide { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)) auto; }
  .filters--wide .filters__actions { grid-column: auto; }
}

@media (max-width: 639.98px) {
  .cal-toolbar > .btn { width: 100%; }
  .select-pill { flex: 1 1 100%; }
  .select-pill select { max-width: none; flex: 1; }
  .sticky-actions { bottom: 8px; width: auto; }
  .sticky-actions .btn { flex: 1; }
  #calendar .fc-toolbar-title { font-size: 1rem; }
  #calendar .fc-header-toolbar { margin-bottom: 1em; }
}