/* ═══════════════════════════════════════════════════════════════════
   Reservas — Acciones, Modales, Blade Historial
   Sprint 2.4c · LUZOcrm V2 · TRANSED ONG
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens locales (heredados del root ya definido en reservas.css) ── */

/* ── Modal helpers ──────────────────────────────────────────────────── */
.rs-modal-lbl {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-muted, #64748b);
}
.rs-modal-lbl--mt { margin-top: 14px; }
.rs-modal-val {
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
}
.rs-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: .5px solid var(--border, #e2e8f0);
  margin-bottom: 4px;
}
.rs-req { color: #dc2626; }

/* Select dentro de modal */
.rs-select-wrap { margin-top: 6px; }
.rs-modal-select {
  width: 100%;
  height: 36px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 7px;
  background: var(--bg-card, #fff);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.rs-modal-select:focus { border-color: var(--c-brand, #6d28d9); }

.rs-modal-textarea {
  width: 100%;
  margin-top: 6px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 7px;
  background: var(--bg-card, #fff);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  font-family: inherit;
  outline: none;
  resize: vertical;
  min-height: 72px;
  box-sizing: border-box;
}
.rs-modal-textarea:focus { border-color: var(--c-brand, #6d28d9); }

.rs-modal-input {
  display: block;
  width: 100%;
  height: 36px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 7px;
  background: var(--bg-card, #fff);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  font-family: inherit;
  outline: none;
  margin-top: 6px;
  box-sizing: border-box;
}
.rs-modal-input:focus { border-color: var(--c-brand, #6d28d9); }

/* ── Modal buttons ─────────────────────────────────────────────────── */
.rs-mb {
  height: 34px;
  padding: 0 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  border: none;
  transition: filter .15s;
}
.rs-mb:disabled { opacity: .45; cursor: not-allowed; }
.rs-mb-cancel  { background: var(--bg-surface, #f8fafc); color: var(--tx-base, #0f172a); border: .5px solid var(--border, #e2e8f0); }
.rs-mb-cancel:hover:not(:disabled)  { background: var(--bg-body, #f1f5f9); }
.rs-mb-confirm { background: var(--c-brand, #6d28d9); color: #fff; }
.rs-mb-confirm:hover:not(:disabled) { filter: brightness(.9); }
.rs-mb-danger  { background: #dc2626; color: #fff; }
.rs-mb-danger:hover:not(:disabled)  { filter: brightness(.9); }
.rs-mb-amber   { background: #b45309; color: #fff; }
.rs-mb-amber:hover:not(:disabled)   { filter: brightness(.9); }

/* ── Estados verticales (cambiar estado) ──────────────────────────── */
.rs-estado-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.rs-estado-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 7px;
  border: .5px solid var(--border, #e2e8f0);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  transition: background .1s, border-color .1s;
  user-select: none;
}
.rs-estado-opt:hover { background: var(--bg-surface, #f8fafc); }
.rs-estado-opt--active {
  background: rgba(109, 40, 217, .08);
  border-color: rgba(109, 40, 217, .35);
  color: var(--c-brand, #6d28d9);
}
.rs-estado-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Banner amber (cancelación profesional) ───────────────────────── */
.rs-banner-amber {
  padding: 10px 14px;
  border-radius: 7px;
  background: rgba(180, 83, 9, .08);
  border: .5px solid rgba(180, 83, 9, .3);
  color: #92400e;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* ── Prof picker (cambiar profesional) ────────────────────────────── */
.rs-prof-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.rs-prof-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: .5px solid var(--border, #e2e8f0);
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.rs-prof-row:hover { background: var(--bg-surface, #f8fafc); }
.rs-prof-row--active {
  background: rgba(109, 40, 217, .08);
  border-color: rgba(109, 40, 217, .35);
}

/* Avatares */
.rs-prof-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.rs-prof-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg-surface, #f8fafc);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--tx-base, #0f172a);
  position: relative; z-index: 2;
  overflow: hidden;
}
.rs-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.rs-av-ini { font-size: 12px; font-weight: 500; }

/* Halos — solo radial-gradient glow, nunca border/box-shadow sólido */
.rs-halo-green::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,211,153,.55) 0%, rgba(52,211,153,0) 65%);
  z-index: 1;
  pointer-events: none;
  animation: rsHaloPulse 2.4s ease-in-out infinite;
}
.rs-halo-amber::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,.55) 0%, rgba(251,191,36,0) 65%);
  z-index: 1;
  pointer-events: none;
}
@keyframes rsHaloPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.06); }
}

/* Prof info */
.rs-prof-info   { flex: 1; min-width: 0; }
.rs-prof-nom    { font-size: 12px; font-weight: 500; color: var(--tx-base, #0f172a); }
.rs-prof-esp    { font-size: 11px; color: var(--tx-muted, #64748b); margin-top: 1px; }
.rs-prof-disp   { font-size: 10px; margin-top: 2px; }
.rs-prof-disp--ok   { color: #16a34a; }
.rs-prof-disp--prox { color: #b45309; }

.rs-prof-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--tx-muted, #64748b);
}

/* ── Reagendar — slots ─────────────────────────────────────────────── */
.rs-slots-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  min-height: 36px;
  align-items: flex-start;
}
.rs-slots-hint {
  font-size: 12px;
  color: var(--tx-muted, #64748b);
  padding: 6px 0;
}
.rs-slots-hint--err { color: #dc2626; }
.rs-slot-chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 20px;
  border: .5px solid var(--border, #e2e8f0);
  background: var(--bg-surface, #f8fafc);
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  cursor: pointer;
  transition: background .1s, border-color .1s;
  font-family: inherit;
}
.rs-slot-chip:hover { border-color: var(--c-brand, #6d28d9); }
.rs-slot-chip--active {
  background: rgba(109, 40, 217, .1);
  border-color: var(--c-brand, #6d28d9);
  color: var(--c-brand, #6d28d9);
}

/* Modalidad toggle */
.rs-toggle-group {
  display: flex;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 7px;
  overflow: hidden;
  margin-top: 6px;
}
.rs-toggle-btn {
  flex: 1;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--tx-muted, #64748b);
  font-family: inherit;
  transition: background .15s, color .15s;
}
.rs-toggle-btn + .rs-toggle-btn { border-left: .5px solid var(--border, #e2e8f0); }
.rs-toggle-btn--active {
  background: rgba(109, 40, 217, .08);
  color: var(--c-brand, #6d28d9);
}

/* ── Blade historial ───────────────────────────────────────────────── */
.rs-blade-historial {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  height: 100vh;
  background: var(--bg-card, #fff);
  border-left: .5px solid var(--border, #e2e8f0);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .1);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.68,0,1.2);
}
.rs-blade-historial--open { transform: translateX(0); }

.rs-blade-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: .5px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
.rs-blade-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
}
.rs-blade-folio {
  font-size: 11px;
  color: var(--tx-muted, #64748b);
  margin-top: 2px;
}
.rs-blade-close {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--tx-muted, #64748b);
  transition: background .1s;
  flex-shrink: 0;
  padding: 0;
}
.rs-blade-close:hover { background: var(--bg-surface, #f8fafc); }
.rs-blade-close svg   { stroke: currentColor; fill: none; }

.rs-blade-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.rs-blade-loading {
  font-size: 13px;
  color: var(--tx-muted, #64748b);
  padding: 24px 0;
}
.rs-blade-empty {
  font-size: 13px;
  color: var(--tx-muted, #64748b);
  padding: 24px 0;
  text-align: center;
}
.rs-blade-empty--err { color: #dc2626; }

.rs-blade-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: .5px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
.rs-blade-count { font-size: 11px; color: var(--tx-muted, #64748b); }

/* ── Timeline ──────────────────────────────────────────────────────── */
.rs-timeline { display: flex; flex-direction: column; gap: 0; }
.rs-tl-item {
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}
.rs-tl-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border, #e2e8f0);
}
.rs-tl-item:last-child::before { display: none; }
.rs-tl-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.rs-tl-content  { flex: 1; min-width: 0; }
.rs-tl-title    { font-size: 12px; font-weight: 500; color: var(--tx-base, #0f172a); }
.rs-tl-meta     { font-size: 11px; color: var(--tx-muted, #64748b); margin-top: 2px; }
.rs-tl-detail   { font-size: 11px; color: var(--tx-muted, #64748b); margin-top: 4px; line-height: 1.5; }

/* ── Botón Columnas en topbar ──────────────────────────────────────── */
#lz-reservas-root .rs-btn-cols {
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-muted, #64748b);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
#lz-reservas-root .rs-btn-cols:hover {
  background: var(--bg-surface, #f8fafc);
  color: var(--tx-base, #0f172a);
}
#lz-reservas-root .rs-btn-cols svg { stroke: currentColor; fill: none; }

/* ── Columnas toggle modal ─────────────────────────────────────────── */
.rs-col-toggle-list { display: flex; flex-direction: column; gap: 4px; }
.rs-col-toggle-row  {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  transition: background .1s;
}
.rs-col-toggle-row:hover { background: var(--bg-surface, #f8fafc); }
.rs-col-cb { accent-color: var(--c-brand, #6d28d9); width: 14px; height: 14px; cursor: pointer; }

/* ── Col resize handle ─────────────────────────────────────────────── */
.rs-col-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background .15s;
  z-index: 5;
}
.rs-col-resize-handle:hover { background: var(--c-brand, #6d28d9); opacity: .4; }

/* ── Link button ───────────────────────────────────────────────────── */
.rs-link-btn {
  background: none;
  border: none;
  color: var(--c-brand, #6d28d9);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}
.rs-link-btn:hover { opacity: .75; }

/* ── Blade wrapper profs fullscreen ─────────────────────────────────── */
.rs-blade-profs-wrap { padding: 16px; }
/* ════════════════════════════════════════════════════════════════════════
   RESERVAS MODALS v2 — Look v4 unificado
   2026-05-11 — Deploy 3a
   Prefijo: .rs-m-* (evita colisión con clases .rs-* existentes)
   Reglas: CERO halos, CERO aros, CERO glow-pulse, CERO shimmer.
           Avatares planos. Tokens del sistema.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. OVERLAY + CARD SHELL ──────────────────────────────────────────── */

.rs-m-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: background .18s ease, opacity .18s ease;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
.rs-m-overlay--on {
  background: rgba(15, 23, 42, .42);
  opacity: 1;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.rs-m-card {
  background: var(--bg-card, #fff);
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 14px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(15, 23, 42, .12);
}
.rs-m-card--620 { width: 100%; max-width: 620px; }
.rs-m-card--720 { width: 100%; max-width: 720px; }

/* ── 2. HEADER ─────────────────────────────────────────────────────────── */

.rs-m-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: .5px solid var(--border, #e2e8f0);
  gap: 16px;
}
.rs-m-header-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rs-m-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--tx-base, #0f172a);
  letter-spacing: -.01em;
}
.rs-m-subtitle {
  font-size: 12.5px;
  color: var(--tx-muted, #64748b);
  line-height: 1.4;
}
.rs-m-close-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .5px solid var(--border, #e2e8f0);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--tx-base, #0f172a);
  transition: background .12s, border-color .12s;
}
.rs-m-close-btn:hover {
  background: var(--bg-body, #f1f5f9);
  border-color: var(--tx-muted, #64748b);
}

/* ── 3. BODY + FOOTER ──────────────────────────────────────────────────── */

.rs-m-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.rs-m-section { margin-bottom: 16px; }
.rs-m-section:last-child { margin-bottom: 0; }
.rs-m-section-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.rs-m-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: .5px solid var(--border, #e2e8f0);
  background: var(--bg-body, #f8fafc);
}

/* Scrollbar discreto dentro del modal */
.rs-m-body::-webkit-scrollbar { width: 6px; }
.rs-m-body::-webkit-scrollbar-track { background: transparent; }
.rs-m-body::-webkit-scrollbar-thumb {
  background: var(--border, #e2e8f0);
  border-radius: 3px;
}
.rs-m-body::-webkit-scrollbar-thumb:hover { background: var(--tx-muted, #64748b); }

/* ── 4. AVATAR ROW (sin halos, sin aros, plano) ───────────────────────── */

.rs-m-avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rs-m-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bbg, #ede9fe);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* NO border, NO box-shadow */
}
.rs-m-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rs-m-avatar-initials {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand, #6d28d9);
}
.rs-m-avatar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rs-m-avatar-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-base, #0f172a);
}
.rs-m-avatar-meta {
  font-size: 12px;
  color: var(--tx-muted, #64748b);
  line-height: 1.45;
}

/* ── 5. PATIENT CARD (resumen cita) ───────────────────────────────────── */

.rs-m-pcard {
  padding: 12px 14px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-body, #f8fafc);
}
.rs-m-pcard-cita {
  margin-top: 10px;
  padding-top: 10px;
  border-top: .5px solid var(--border, #e2e8f0);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 12px;
  font-size: 12px;
  color: var(--tx-muted, #64748b);
}
.rs-m-pcard-cita > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rs-m-pcard-cita svg { flex-shrink: 0; }
.rs-m-pcard-prof {
  font-weight: 500;
  color: var(--tx-base, #0f172a);
}

/* ── 6. FORM FIELDS ────────────────────────────────────────────────────── */

.rs-m-field { margin-bottom: 14px; }
.rs-m-field:last-child { margin-bottom: 0; }
.rs-m-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.rs-m-field-row .rs-m-field { margin-bottom: 0; }

.rs-m-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
  margin-bottom: 6px;
}
.rs-m-label-required::after {
  content: '*';
  color: var(--rd, #dc2626);
  margin-left: 3px;
}

.rs-m-input,
.rs-m-textarea {
  width: 100%;
  padding: 9px 11px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  font-size: 13.5px;
  color: var(--tx-base, #0f172a);
  font-family: inherit;
  transition: border-color .12s;
  box-sizing: border-box;
}
.rs-m-input:focus,
.rs-m-textarea:focus {
  outline: none;
  border-color: var(--c-brand, #6d28d9);
}
.rs-m-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}
.rs-m-helper {
  font-size: 11px;
  color: var(--tx-muted, #64748b);
  margin-top: 4px;
}
.rs-m-readonly {
  padding: 9px 11px;
  background: var(--bg-body, #f8fafc);
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--tx-base, #0f172a);
}

/* ── 7. TOGGLE PILL (modalidad) ───────────────────────────────────────── */

.rs-m-toggle {
  display: flex;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 3px;
  background: var(--bg-body, #f8fafc);
}
.rs-m-toggle-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--tx-muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.rs-m-toggle-btn--active {
  background: var(--bg-card, #fff);
  color: var(--tx-base, #0f172a);
  font-weight: 500;
}
.rs-m-toggle-btn svg { flex-shrink: 0; }

/* ── 8. WARNING / DANGER BOXES ────────────────────────────────────────── */

.rs-m-warning,
.rs-m-danger {
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.rs-m-warning {
  background: #fef3c7;
  border: .5px solid #fbbf24;
  color: #78350f;
}
.rs-m-danger {
  background: #fee2e2;
  border: .5px solid #ef4444;
  color: #7f1d1d;
}
.rs-m-warning svg,
.rs-m-danger svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.rs-m-warning-text {
  font-size: 12.5px;
  line-height: 1.5;
}
.rs-m-warning-text strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.rs-m-warning .rs-m-warning-text strong { color: #451a03; }
.rs-m-danger  .rs-m-warning-text strong { color: #450a0a; }

/* ── 9. CONFIRMACIÓN TEXTUAL "CANCELAR" ───────────────────────────────── */

.rs-m-confirm-textual {
  margin-top: 14px;
  padding-top: 14px;
  border-top: .5px solid var(--border, #e2e8f0);
}
.rs-m-confirm-label {
  display: block;
  font-size: 12.5px;
  color: var(--tx-base, #0f172a);
  margin-bottom: 8px;
  line-height: 1.5;
}
.rs-m-confirm-label code {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  background: var(--bg-body, #f1f5f9);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  letter-spacing: .5px;
  color: var(--c-brand, #6d28d9);
  font-weight: 600;
}
.rs-m-confirm-input {
  width: 100%;
  padding: 10px 14px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tx-base, #0f172a);
  transition: border-color .12s, background .12s;
  box-sizing: border-box;
}
.rs-m-confirm-input:focus { outline: none; border-color: var(--c-brand, #6d28d9); }
.rs-m-confirm-input--ok {
  border-color: var(--grn, #16a34a);
  background: #f0fdf4;
}

/* ── 10. BOTONES ──────────────────────────────────────────────────────── */

.rs-m-btn {
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: .5px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: filter .12s, background .12s, border-color .12s;
}
.rs-m-btn:disabled {
  opacity: .45;
  pointer-events: none;
}
.rs-m-btn--ghost {
  background: transparent;
  border-color: var(--border, #e2e8f0);
  color: var(--tx-base, #0f172a);
}
.rs-m-btn--ghost:hover { background: var(--bg-body, #f1f5f9); }
.rs-m-btn--primary {
  background: var(--c-brand, #6d28d9);
  color: #fff;
  border-color: var(--c-brand, #6d28d9);
}
.rs-m-btn--primary:hover { filter: brightness(.92); }
.rs-m-btn--danger {
  background: var(--rd, #dc2626);
  color: #fff;
  border-color: var(--rd, #dc2626);
}
.rs-m-btn--danger:hover { filter: brightness(.92); }

.rs-m-btn-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rs-m-spin .55s linear infinite;
  display: inline-block;
}
@keyframes rs-m-spin { to { transform: rotate(360deg); } }

/* ── 11. BULK · COUNT + LIST + BANNER ─────────────────────────────────── */

.rs-m-bulk-count {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bbg, #ede9fe);
  color: var(--c-brand, #6d28d9);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
}

.rs-m-bulk-list {
  max-height: 200px;
  overflow-y: auto;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 6px;
  background: var(--bg-body, #f8fafc);
  margin-bottom: 14px;
}
.rs-m-bulk-list::-webkit-scrollbar { width: 6px; }
.rs-m-bulk-list::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 3px; }

.rs-m-bulk-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 6px;
  transition: background .1s;
}
.rs-m-bulk-item:hover { background: var(--bg-card, #fff); }
.rs-m-bulk-item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12.5px;
  color: var(--tx-base, #0f172a);
  min-width: 0;
}
.rs-m-bulk-item-folio {
  font-size: 11px;
  color: var(--tx-muted, #64748b);
}
.rs-m-bulk-item--more {
  justify-content: center;
  color: var(--tx-muted, #64748b);
  font-size: 11.5px;
  padding: 8px;
}

/* ── 12. PLACEHOLDER SUGERENCIA (Deploy 3b) ───────────────────────────── */

.rs-m-smart-placeholder {
  padding: 12px 14px;
  border: .5px dashed #fbbf24;
  background: #fef9e7;
  border-radius: 10px;
  margin-bottom: 14px;
}
.rs-m-smart-text {
  font-size: 12px;
  color: #78350f;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rs-m-smart-text strong {
  font-weight: 600;
  color: #451a03;
}

/* ── 13. PANTALLA POST-ACCIÓN (sin glow-pulse, sin animaciones) ───────── */

.rs-m-success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 18px;
  text-align: center;
}
.rs-m-success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dcfce7;
  color: var(--grn, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  /* NO animación, NO halo */
}
.rs-m-success-check svg { width: 28px; height: 28px; }
.rs-m-success-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--tx-base, #0f172a);
  margin-bottom: 4px;
}
.rs-m-success-subtitle {
  font-size: 13px;
  color: var(--tx-muted, #64748b);
}

.rs-m-success-card {
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  margin-top: 16px;
  overflow: hidden;
}
.rs-m-success-section {
  padding: 14px 16px;
  border-bottom: .5px solid var(--border, #e2e8f0);
}
.rs-m-success-section:last-child { border-bottom: 0; }
.rs-m-success-section-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tx-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.rs-m-success-fact {
  font-size: 13px;
  color: var(--tx-base, #0f172a);
  line-height: 1.5;
}
.rs-m-success-fact--muted {
  font-size: 12px;
  color: var(--tx-muted, #64748b);
}
.rs-m-success-quote {
  margin-top: 6px;
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--c-brand, #6d28d9);
  font-size: 12.5px;
  color: var(--tx-base, #0f172a);
  line-height: 1.5;
  background: var(--bg-body, #f8fafc);
}

/* BULK success */
.rs-m-success-bulk-summary {
  text-align: center;
  font-size: 13.5px;
  color: var(--tx-base, #0f172a);
  margin: 4px 0 14px;
}
.rs-m-success-bulk-summary strong {
  color: var(--grn, #16a34a);
  font-size: 15px;
  font-weight: 600;
}
.rs-m-success-errors { color: var(--rd, #dc2626); }
.rs-m-success-bulk-list {
  max-height: 220px;
  overflow-y: auto;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 6px;
  background: var(--bg-body, #f8fafc);
}
.rs-m-success-bulk-list::-webkit-scrollbar { width: 6px; }
.rs-m-success-bulk-list::-webkit-scrollbar-thumb { background: var(--border, #e2e8f0); border-radius: 3px; }

/* ── 14. RESPONSIVE ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .rs-m-overlay { padding: 0; }
  .rs-m-card { border-radius: 0; max-height: 100vh; max-height: 100svh; }
  .rs-m-field-row { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════
   RESERVAS MODALS v2.1 — Performance patch
   2026-05-11 — Deploy 3a-fix
   Override de propiedades caras:
   - Quita backdrop-filter (caro en GPU sobre dashboards)
   - Reduce transition de 220ms → 120ms
   - Elimina box-shadow extendida del card
   - Asegura que rs-m-select sin transformar todavía sea legible
   ════════════════════════════════════════════════════════════════════════ */

/* ── Quitar backdrop-filter (lo más pesado visualmente) ──────────────── */

.rs-m-overlay {
  transition: background .12s ease, opacity .12s ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.rs-m-overlay--on {
  background: rgba(15, 23, 42, .50);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── Card más liviano (sin shadow extendida ni transform) ────────────── */

.rs-m-card {
  box-shadow: 0 4px 16px rgba(15, 23, 42, .15);
  /* Sin will-change ni filter para no forzar capa GPU */
}

/* ── <select> nativo legible si LK.select.init() no llegó a transformar ─ */
/* (fallback: si falla el kernel, sigue funcionando como select nativo)   */

.rs-m-select {
  width: 100%;
  padding: 9px 11px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--tx-base, #0f172a);
  cursor: pointer;
  box-sizing: border-box;
  appearance: auto;
}
.rs-m-select:focus {
  outline: none;
  border-color: var(--c-brand, #6d28d9);
}
.rs-m-select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── lks-wrap dentro del modal: forzar ancho 100% y z-index correcto ─── */
/* (cuando LK.select.init() transforma el <select>, el wrap debe ocupar  */
/*  el espacio del campo y el dropdown debe estar por encima del modal)  */

.rs-m-body .lks-wrap {
  width: 100%;
  position: relative;
}
.rs-m-body .lks-trigger {
  width: 100%;
  padding: 9px 11px;
  border: .5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  font-size: 13.5px;
  font-family: inherit;
  color: var(--tx-base, #0f172a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.rs-m-body .lks-trigger:hover {
  border-color: var(--tx-muted, #64748b);
}
.rs-m-body .lks-wrap.lks-open .lks-trigger {
  border-color: var(--c-brand, #6d28d9);
}
.rs-m-body .lks-drop {
  z-index: 10001;
}
/* ════════════════════════════════════════════════════════════════════════
   RESERVAS MODALS v2.2 — Final fixes
   2026-05-11 — Deploy 3a final

   Cambios respecto a v2.1:
   1. Scroll interno eliminado del modal (regla locked: NO scroll en modales)
   2. Overlay scrolleable como fallback honesto si el contenido no entra
   3. Paddings compactos (-60px vertical)
   4. Confirm-input ok: texto LEGIBLE (negro sobre verde claro)
   5. Toast inline styling (rs-toast-stack, rs-toast)
   6. Info box (rs-m-info) para el modal recordatorio
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. ELIMINAR SCROLL INTERNO DEL MODAL ────────────────────────────── */

.rs-m-overlay {
  /* Si el modal no entra, scrollea el overlay completo (excepción de fallback) */
  overflow-y: auto !important;
  align-items: flex-start !important;
  padding: 30px 20px !important;
}

.rs-m-card {
  max-height: none !important;
  /* El card crece con su contenido. NO tiene altura máxima. */
}

.rs-m-body {
  overflow: visible !important;
  /* SIN scroll interno. Si excede viewport, scrollea el overlay. */
  flex: 0 0 auto !important;
  max-height: none !important;
  padding: 14px 22px 12px !important;
}

/* ── 2. PADDINGS COMPACTOS (-60px vertical en total) ─────────────────── */

.rs-m-header {
  padding: 14px 22px 10px !important;
}
.rs-m-footer {
  padding: 10px 22px 12px !important;
}

.rs-m-field {
  margin-bottom: 10px !important;
}
.rs-m-field:last-child {
  margin-bottom: 0 !important;
}
.rs-m-field-row {
  margin-bottom: 10px !important;
}

.rs-m-section {
  margin-bottom: 12px !important;
}

.rs-m-pcard {
  padding: 10px 12px !important;
}
.rs-m-pcard-cita {
  margin-top: 8px !important;
  padding-top: 8px !important;
  gap: 4px 12px !important;
}

.rs-m-textarea {
  min-height: 64px !important;
}

.rs-m-warning,
.rs-m-danger {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

.rs-m-bulk-count {
  margin-bottom: 8px !important;
}

.rs-m-bulk-list {
  max-height: 160px !important;
  /* Excepción aprobada: solo la lista de pacientes scrollea, no el modal */
  margin-bottom: 10px !important;
}

.rs-m-smart-placeholder {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}

.rs-m-confirm-textual {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

/* ── 3. CONFIRM-INPUT LEGIBLE (negro sobre verde claro) ─────────────── */

.rs-m-confirm-input--ok {
  color: var(--tx-base, #0f172a) !important;
  background: rgba(22, 163, 74, .10) !important;
  border-color: var(--grn, #16a34a) !important;
}

/* ── 4. INFO BOX (para modal recordatorio) ──────────────────────────── */

.rs-m-info {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bbg, #ede9fe);
  border: .5px solid var(--bbdr, rgba(109,40,217,.20));
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tx-base, #0f172a);
}
.rs-m-info strong {
  display: block;
  font-weight: 600;
  color: var(--c-brand, #6d28d9);
  margin-bottom: 2px;
}

/* ── 5. TOAST INLINE ─────────────────────────────────────────────────── */

.rs-toast-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.rs-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-card, #fff);
  border: .5px solid var(--border, #e2e8f0);
  border-left-width: 3px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-base, #0f172a);
  transform: translateX(20px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
  cursor: pointer;
}
.rs-toast--on {
  transform: translateX(0);
  opacity: 1;
}
.rs-toast-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.rs-toast-text {
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.rs-toast--success { border-left-color: var(--grn, #16a34a); }
.rs-toast--success .rs-toast-icon { color: var(--grn, #16a34a); }
.rs-toast--error   { border-left-color: var(--rd, #dc2626); }
.rs-toast--error   .rs-toast-icon { color: var(--rd, #dc2626); }
.rs-toast--warning { border-left-color: #d97706; }
.rs-toast--warning .rs-toast-icon { color: #d97706; }
.rs-toast--info    { border-left-color: var(--c-brand, #6d28d9); }
.rs-toast--info    .rs-toast-icon { color: var(--c-brand, #6d28d9); }
/* ════════════════════════════════════════════════════════════════════════
   RESERVAS · CSS CLEANUP v2.3
   2026-05-11 — Deploy 3a-B
   
   Anula el toast inline propio que metí erróneamente.
   Ahora el módulo usa LK.toast.show() del sistema (contenedor #lz-toast,
   bottom-right). El rs-toast-stack queda oculto en caso de que algún
   código viejo intente crearlo.
   ════════════════════════════════════════════════════════════════════════ */

#rs-toast-stack,
.rs-toast-stack,
.rs-toast {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}