/*
 * Restaurant Manager Core — shortcodes.css
 * Diseño alineado con la web pública de Timeqik/Reservo.
 * Light: superficies limpias blanco-gris y azul corporativo.
 * Dark:  antracita con capas grises estilo entorno de trabajo moderno.
 * Tipografía: Geist / system-ui.
 * Versión: 2.0.0
 */

/* ═══════════════════════════════════════════════════════════════
   1. TOKENS — LIGHT
   ═══════════════════════════════════════════════════════════════ */
.rmc-app-root,
.rmc-guard-card {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;

  /* ── Acento corporativo (sobreescrito por JS con brand_color) */
  --rmc-accent:        #1a6fd4;
  --rmc-accent-soft:   rgba(26,111,212,.08);
  --rmc-accent-mid:    rgba(26,111,212,.18);
  --rmc-accent-text:   #1a6fd4;

  /* ── Fondos — alineados con rest.timeqik.com */
  --rmc-bg:            #f8f8f4;
  --rmc-surface:       #ffffff;
  --rmc-surface-2:     #f0f0ea;
  --rmc-surface-3:     #e6e6de;
  --rmc-surface-4:     #dcdcd4;

  /* ── Bordes — coherentes con la landing */
  --rmc-border:        rgba(14,14,12,.08);
  --rmc-border-strong: rgba(14,14,12,.14);

  /* ── Texto — jerarquía clara estilo Timeqik */
  --rmc-text:          #111110;
  --rmc-text-2:        #2e2e2a;
  --rmc-muted:         #5c5c55;
  --rmc-placeholder:   #8e8e86;

  /* ── Estado verde */
  --rmc-green:         #16834a;
  --rmc-green-soft:    rgba(22,131,74,.10);
  --rmc-green-text:    #0f6438;

  /* ── Estado ámbar */
  --rmc-orange:        #92600a;
  --rmc-orange-soft:   rgba(146,96,10,.10);
  --rmc-orange-text:   #7a4f08;

  /* ── Estado rojo */
  --rmc-red:           #b43c3c;
  --rmc-red-soft:      rgba(180,60,60,.10);
  --rmc-red-text:      #8b2e2e;

  /* ── Estado dim (cancelado/no-show) */
  --rmc-dim:           #7a7a72;
  --rmc-dim-soft:      rgba(14,14,12,.05);

  /* ── Transiciones globales */
  --rmc-ease:          cubic-bezier(.22,1,.36,1);

  /* ── Sombras — estilo Timeqik */
  --rmc-shadow-sm:     0 2px 8px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
  --rmc-shadow-md:     0 8px 24px rgba(0,0,0,.08), 0 20px 48px rgba(0,0,0,.05);

  /* ── Radios — alineados con Timeqik */
  --rmc-r:      7px;
  --rmc-r-md:  10px;
  --rmc-r-lg:  14px;
  --rmc-r-xl:  20px;
  --rmc-r-pill:999px;

  box-sizing: border-box;
  color: var(--rmc-text);
}

.rmc-app-root *,
.rmc-app-root *::before,
.rmc-app-root *::after,
.rmc-guard-card *,
.rmc-guard-card *::before,
.rmc-guard-card *::after {
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   2. TOKENS — DARK MODE
   Superficies grises claras tipo Claude/Codex sobre antracita.
   Textos de alto contraste. Acento azul eléctrico.
   ═══════════════════════════════════════════════════════════════ */
.rmc-shell-manager.rmc-theme-dark,
.rmc-shell-setup.rmc-theme-dark,
.rmc-shell-booking.rmc-theme-dark {

  /* ── Fondos — alineados con rest.timeqik.com dark mode */
  --rmc-bg:            #171818;
  --rmc-surface:       #212325;
  --rmc-surface-2:     #2a2d30;
  --rmc-surface-3:     #34383c;
  --rmc-surface-4:     #42474d;

  /* ── Bordes — sutiles sobre oscuro */
  --rmc-border:        rgba(240,237,230,.09);
  --rmc-border-strong: rgba(240,237,230,.17);

  /* ── Texto — alto contraste estilo Timeqik */
  --rmc-text:          #f0ede6;
  --rmc-text-2:        #d2cec7;
  --rmc-muted:         #a39f98;
  --rmc-placeholder:   #737069;

  /* ── Acento azul claro para dark */
  --rmc-accent:        #4f9cf9;
  --rmc-accent-soft:   rgba(79,156,249,.12);
  --rmc-accent-mid:    rgba(79,156,249,.24);
  --rmc-accent-text:   #7db8ff;

  /* ── Estado verde */
  --rmc-green:         #3dba78;
  --rmc-green-soft:    rgba(61,186,120,.14);
  --rmc-green-text:    #5dcc90;

  /* ── Estado ámbar */
  --rmc-orange:        #d49420;
  --rmc-orange-soft:   rgba(212,148,32,.14);
  --rmc-orange-text:   #e8a832;

  /* ── Estado rojo */
  --rmc-red:           #e07070;
  --rmc-red-soft:      rgba(224,112,112,.14);
  --rmc-red-text:      #f08888;

  /* ── Estado dim */
  --rmc-dim:           #98938b;
  --rmc-dim-soft:      rgba(240,237,230,.06);

  /* ── Sombras — más pronunciadas en dark */
  --rmc-shadow-sm:     0 2px 8px rgba(0,0,0,.24), 0 6px 20px rgba(0,0,0,.18);
  --rmc-shadow-md:     0 8px 24px rgba(0,0,0,.30), 0 20px 48px rgba(0,0,0,.22);
}

/* ═══════════════════════════════════════════════════════════════
   3. SHELLS
   ═══════════════════════════════════════════════════════════════ */
.rmc-app-root {
  display: block;
  width: 100%;
}

.rmc-shell-manager,
.rmc-shell-setup {
  background: var(--rmc-bg);
  color: var(--rmc-text);
  padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 36px);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  transition: background .3s var(--rmc-ease), color .3s var(--rmc-ease);
}

.rmc-shell-booking {
  background: transparent;
  color: var(--rmc-text);
  width: 100%;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   4. HERO — cabecera del dashboard
   ═══════════════════════════════════════════════════════════════ */
.rmc-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.rmc-hero-copy { flex: 1 1 260px; min-width: 0; }

.rmc-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--rmc-muted);
  margin-bottom: 4px;
}

.rmc-eyebrow-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  color: var(--rmc-accent);
  letter-spacing: .06em;
}

.rmc-eyebrow-accent::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--rmc-accent);
  box-shadow: 0 0 0 4px var(--rmc-accent-soft);
}

.rmc-hero h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.06;
  color: var(--rmc-text);
  margin: 0;
}

.rmc-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.rmc-hero-date,
.rmc-hero-restaurant {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--rmc-surface-2);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rmc-muted);
}

.rmc-hero-restaurant-line {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rmc-text-2);
  letter-spacing: -.02em;
}

.rmc-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.rmc-hero-controls {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.rmc-date-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rmc-date-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--rmc-r-pill);
  border: 1px solid var(--rmc-border-strong);
  background: var(--rmc-surface-2);
  color: var(--rmc-text-2);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}

.rmc-date-nav-btn:hover {
  background: var(--rmc-surface-3);
  border-color: var(--rmc-border-strong);
}

.rmc-interval-toggle,
.rmc-qr-link {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.rmc-qr-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.rmc-qr-link svg { flex-shrink: 0; }

.rmc-hero-date-picker.is-compact {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 180px));
  gap: 10px;
}

.rmc-hero-date-picker.is-compact label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rmc-muted);
}

/* ─── Stat grid ─── */
.rmc-stat-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rmc-stat-card {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  padding: 12px 16px;
  min-width: 80px;
  flex: 1 1 80px;
}

.rmc-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rmc-muted);
  margin-bottom: 4px;
}

.rmc-stat-value {
  display: block;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.05em;
  color: var(--rmc-accent);
  line-height: 1;
}

/* ─── Theme toggle (legacy pill — now using .rmc-theme-toggle-btn) ─── */
.rmc-theme-toggle {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   5. PANEL
   ═══════════════════════════════════════════════════════════════ */
.rmc-panel {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-lg);
  padding: clamp(14px, 2.5vw, 22px);
}

.rmc-panel-head { margin-bottom: 16px; }

.rmc-panel-head h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--rmc-text);
  margin: 0 0 4px;
}

.rmc-muted-copy {
  font-size: 12px;
  color: var(--rmc-muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   6. FEEDBACK — loading, error, success, guard, toast
   ═══════════════════════════════════════════════════════════════ */
.rmc-loading-card,
.rmc-error-card,
.rmc-success-card,
.rmc-guard-card {
  border-radius: var(--rmc-r-md);
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 16px;
}

.rmc-loading-card {
  background: var(--rmc-surface-2);
  border: 1px solid var(--rmc-border);
  color: var(--rmc-muted);
  text-align: center;
  padding: clamp(36px, 6vw, 56px) 20px;
  font-weight: 500;
}

.rmc-error-card {
  background: var(--rmc-red-soft);
  border: 1px solid rgba(180,60,60,.16);
  color: var(--rmc-red-text);
}

.rmc-success-card {
  background: var(--rmc-green-soft);
  border: 1px solid rgba(22,131,74,.16);
  color: var(--rmc-green-text);
}

.rmc-guard-card {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  color: var(--rmc-text-2);
  max-width: 480px;
  box-shadow: var(--rmc-shadow-sm);
}

.rmc-guard-card strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rmc-text);
  margin-bottom: 6px;
}

.rmc-guard-card p {
  margin: 0;
  color: var(--rmc-muted);
  font-size: 13px;
}

/* Toast */
.rmc-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  min-width: 220px;
  max-width: min(90vw, 360px);
  padding: 14px 20px;
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border-strong);
  box-shadow: var(--rmc-shadow-md);
  color: var(--rmc-text);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.rmc-toast.is-error {
  background: var(--rmc-red-soft);
  border-color: rgba(180,60,60,.22);
  color: var(--rmc-red-text);
}

/* ═══════════════════════════════════════════════════════════════
   7. STATUS PILLS
   ═══════════════════════════════════════════════════════════════ */
.rmc-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--rmc-r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  position: relative;
}

.rmc-status-pill.is-pending   { background: var(--rmc-orange-soft); color: var(--rmc-orange-text); }
.rmc-status-pill.is-confirmed { background: var(--rmc-green-soft);  color: var(--rmc-green-text);  }
.rmc-status-pill.is-cancelled { background: var(--rmc-red-soft);    color: var(--rmc-red-text);    }
.rmc-status-pill.is-delayed   { background: var(--rmc-orange-soft); color: var(--rmc-orange-text); }
.rmc-status-pill.is-no_show   { background: var(--rmc-dim-soft);    color: var(--rmc-dim);         text-decoration: line-through; }

.rmc-status-pill.is-delayed {
  box-shadow: 0 0 0 0 rgba(146,96,10,.20);
  animation: rmcDelayedPulse 1.8s ease-in-out infinite;
}

@keyframes rmcDelayedPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(146,96,10,.16); }
  50% { transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(146,96,10,.05); }
}

/* ═══════════════════════════════════════════════════════════════
   8. BOTONES
   ═══════════════════════════════════════════════════════════════ */
.rmc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--rmc-r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, opacity .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  text-decoration: none;
  user-select: none;
  letter-spacing: -.01em;
}

.rmc-btn:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }

.rmc-btn-primary {
  background: var(--rmc-accent);
  color: #fff;
  border-color: var(--rmc-accent);
}
.rmc-btn-primary:hover { opacity: .85; transform: translateY(-1px); }

.rmc-btn-ghost {
  background: transparent;
  color: var(--rmc-text-2);
  border-color: var(--rmc-border-strong);
}
.rmc-btn-ghost:hover { background: var(--rmc-surface-2); }

.rmc-btn-soft {
  background: var(--rmc-surface-2);
  color: var(--rmc-text-2);
  border-color: var(--rmc-border);
}
.rmc-btn-soft:hover { background: var(--rmc-surface-3); border-color: var(--rmc-border-strong); }

.rmc-btn-soft-danger {
  background: var(--rmc-red-soft);
  color: var(--rmc-red-text);
  border-color: rgba(180,60,60,.16);
}
.rmc-btn-soft-danger:hover { opacity: .86; }

.rmc-btn-outline {
  background: transparent;
  color: var(--rmc-text-2);
  border-color: var(--rmc-border-strong);
}
.rmc-btn-outline:hover { background: var(--rmc-surface-2); }

.rmc-btn-block { width: 100%; margin-top: 12px; }

/* ─── Acento en botones: light usa azul corporativo ─── */
.rmc-btn-primary {
  background: var(--rmc-accent);
  border-color: var(--rmc-accent);
}

/* ═══════════════════════════════════════════════════════════════
   9. INPUTS, SELECTS, TEXTAREAS
   ═══════════════════════════════════════════════════════════════ */
.rmc-shell-manager input:not([type="checkbox"]):not([type="color"]):not([type="submit"]),
.rmc-shell-manager select,
.rmc-shell-manager textarea,
.rmc-shell-setup input:not([type="checkbox"]):not([type="color"]):not([type="submit"]),
.rmc-shell-setup select,
.rmc-shell-setup textarea,
.rmc-shell-booking input:not([type="checkbox"]):not([type="color"]):not([type="submit"]),
.rmc-shell-booking select,
.rmc-shell-booking textarea {
  width: 100%;
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border-strong);
  border-radius: var(--rmc-r);
  color: var(--rmc-text);
  font-family: inherit;
  font-size: 14px;
  min-height: 38px;
  padding: 8px 10px;
  transition: border-color .12s, box-shadow .12s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.rmc-shell-manager input:focus:not([type="checkbox"]):not([type="color"]),
.rmc-shell-manager select:focus,
.rmc-shell-manager textarea:focus,
.rmc-shell-setup input:focus:not([type="checkbox"]):not([type="color"]),
.rmc-shell-setup select:focus,
.rmc-shell-setup textarea:focus,
.rmc-shell-booking input:focus:not([type="checkbox"]):not([type="color"]),
.rmc-shell-booking select:focus,
.rmc-shell-booking textarea:focus {
  border-color: var(--rmc-accent);
  box-shadow: 0 0 0 3px var(--rmc-accent-soft);
}

.rmc-shell-manager textarea,
.rmc-shell-setup textarea,
.rmc-shell-booking textarea { min-height: 80px; resize: vertical; }

.rmc-shell-manager input[type="color"],
.rmc-shell-setup input[type="color"] {
  width: 100%;
  min-height: 38px;
  padding: 4px 6px;
  border: 1px solid var(--rmc-border-strong);
  border-radius: var(--rmc-r);
  background: var(--rmc-surface);
  cursor: pointer;
}

.rmc-shell-manager input[type="checkbox"],
.rmc-shell-setup input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-height: 15px;
  accent-color: var(--rmc-accent);
  cursor: pointer;
}

.rmc-filter-bar label,
.rmc-inline-grid label,
.rmc-setup-toolbar label,
.rmc-setup-grid label,
.rmc-table-group-editor label,
.rmc-setup-inline-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rmc-muted);
}

.rmc-shell-manager code,
.rmc-shell-setup code {
  display: block;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12px;
  padding: 10px 14px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r);
  background: var(--rmc-surface-2);
  color: var(--rmc-text-2);
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
}

.rmc-shell-manager ::placeholder,
.rmc-shell-setup ::placeholder,
.rmc-shell-booking ::placeholder { color: var(--rmc-placeholder); }

/* ═══════════════════════════════════════════════════════════════
   10. TABS
   ═══════════════════════════════════════════════════════════════ */
.rmc-mobile-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rmc-border);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rmc-mobile-tabs::-webkit-scrollbar { display: none; }

.rmc-mobile-tab {
  padding: 10px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--rmc-muted);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
  letter-spacing: -.01em;
  transition: color .12s, border-color .12s;
}

.rmc-mobile-tab:hover { color: var(--rmc-text-2); }

.rmc-mobile-tab.is-active {
  color: var(--rmc-accent);
  border-bottom-color: var(--rmc-accent);
}

.rmc-tab-panel { display: none; }
.rmc-tab-panel.is-active { display: block; }

/* ═══════════════════════════════════════════════════════════════
   11. FILTROS
   ═══════════════════════════════════════════════════════════════ */
.rmc-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 150px) minmax(180px, 1fr) minmax(210px, 1.1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  width: 100%;
  min-width: 0;
}

.rmc-filter-bar label,
.rmc-filter-bar input,
.rmc-filter-bar select { box-sizing: border-box; min-width: 0; max-width: 100%; }

.rmc-filter-date input { text-align: center; }

.rmc-empty {
  text-align: center;
  color: var(--rmc-muted);
  padding: clamp(28px, 5vw, 48px) 20px;
  font-size: 14px;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   12. TABLA DE DATOS
   ═══════════════════════════════════════════════════════════════ */
.rmc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rmc-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 680px;
}

.rmc-data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rmc-muted);
  border-bottom: 1px solid var(--rmc-border);
  background: var(--rmc-surface);
  white-space: nowrap;
}

.rmc-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rmc-border);
  vertical-align: top;
  color: var(--rmc-text);
}

.rmc-data-table tbody tr:last-child td { border-bottom: none; }
.rmc-data-table tbody tr:hover td { background: var(--rmc-surface-2); }
.rmc-data-table strong { font-weight: 700; color: var(--rmc-text); }
.rmc-muted { color: var(--rmc-muted); font-size: 12px; margin-top: 2px; }
.rmc-actions-cell { min-width: 280px; }

/* ═══════════════════════════════════════════════════════════════
   13. CARDS MÓVIL
   ═══════════════════════════════════════════════════════════════ */
.rmc-mobile-card-list {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.rmc-mobile-reservation-card {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.rmc-mobile-reservation-card:hover { border-color: var(--rmc-border-strong); }

.rmc-mobile-reservation-card.is-expanded {
  border-color: var(--rmc-accent-mid);
  box-shadow: 0 8px 18px rgba(17,24,39,.08);
}

.rmc-mobile-reservation-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.rmc-mobile-status-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

.rmc-mobile-reservation-head strong {
  font-size: 20px;
  font-weight: 900;
  color: var(--rmc-text);
  letter-spacing: -.04em;
  line-height: 1;
}

.rmc-mobile-reservation-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--rmc-text);
  letter-spacing: -.02em;
  margin: 0 0 4px;
}

.rmc-mobile-customer-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.rmc-mobile-customer-phone {
  font-size: 12px;
  font-weight: 500;
  color: var(--rmc-muted);
  display: none;
}

.rmc-mobile-meta { margin: 0 0 10px; color: var(--rmc-muted); font-size: 13px; }

.rmc-mobile-reservation-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--rmc-muted);
}

.rmc-mobile-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}

.rmc-mobile-inline-actions .rmc-btn {
  width: 100%;
  min-height: 38px;
  justify-content: center;
}

.rmc-mobile-wide { flex-basis: 100%; }

/* ═══════════════════════════════════════════════════════════════
   14. ACCIONES DE RESERVA
   ═══════════════════════════════════════════════════════════════ */
.rmc-reservation-actions { display: flex; flex-direction: column; gap: 10px; }

.rmc-action-row-compact .rmc-btn {
  min-height: 34px;
}

.rmc-action-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.rmc-guest-stepper { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.rmc-guest-stepper span {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--rmc-text);
}

.rmc-guest-stepper .rmc-btn { min-height: 28px; padding: 4px 8px; font-size: 12px; }

.rmc-reschedule-box {
  display: grid;
  grid-template-columns: auto 110px auto;
  gap: 8px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface-2);
  position: relative;
}

.rmc-reschedule-date-wrap {
  position: relative;
}

.rmc-reschedule-date-btn {
  width: 40px;
  min-width: 40px;
  height: 38px;
  padding: 0;
  border-radius: var(--rmc-r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rmc-reschedule-date-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  padding: 10px;
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  box-shadow: var(--rmc-shadow-md);
}

.rmc-reschedule-date-popover input {
  min-width: 150px;
}

.rmc-table-group-editor {
  background: var(--rmc-surface-2);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rmc-table-group-editor select[multiple] { min-height: 80px; }

.rmc-table-assignment { display: grid; gap: 6px; min-width: 0; }
.rmc-table-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.rmc-table-assignment-row select { width: 100%; min-width: 0; }

.rmc-quick-form {
  display: grid !important;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, .75fr) !important;
  gap: 10px;
  align-items: end;
}
.rmc-quick-form input,
.rmc-quick-form select { min-width: 0 !important; max-width: 100%; }

.rmc-manager-modal-card {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-xl);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--rmc-shadow-md);
}

/* ═══════════════════════════════════════════════════════════════
   15. TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.rmc-timeline-panel { overflow: hidden; }

.rmc-time-axis {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  font-size: 10px;
  color: var(--rmc-muted);
  margin-bottom: 10px;
  padding-left: 160px;
  font-variant-numeric: tabular-nums;
}

.rmc-timeline-group { margin-bottom: 22px; }
.rmc-timeline-group + .rmc-timeline-group { padding-top: 22px; border-top: 1px solid var(--rmc-border); }

.rmc-timeline-group h4 {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rmc-muted);
}

.rmc-timeline-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.rmc-timeline-label strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--rmc-text);
  letter-spacing: -.015em;
}

.rmc-timeline-label span {
  display: block;
  font-size: 11px;
  color: var(--rmc-muted);
  margin-top: 1px;
}

.rmc-timeline-track {
  position: relative;
  height: 36px;
  border-radius: var(--rmc-r);
  background: var(--rmc-surface-2);
  border: 1px solid var(--rmc-border);
  overflow: hidden;
}

.rmc-timeline-card {
  position: absolute;
  top: 3px;
  height: 28px;
  border-radius: var(--rmc-r);
  padding: 4px 8px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: opacity .12s, transform .12s, box-shadow .12s, filter .12s;
  box-shadow: 0 8px 18px rgba(17,24,39,.14);
}
.rmc-timeline-card:active { cursor: grabbing; }
.rmc-timeline-card:hover  { opacity: .88; }

.rmc-timeline-card.is-pending   { background: var(--rmc-orange-soft); border-left: 2px solid var(--rmc-orange); }
.rmc-timeline-card.is-confirmed { background: var(--rmc-green-soft);  border-left: 2px solid var(--rmc-green);  }
.rmc-timeline-card.is-delayed   { background: var(--rmc-orange-soft); border-left: 2px solid var(--rmc-orange); }
.rmc-timeline-card.is-cancelled,
.rmc-timeline-card.is-no_show   { background: var(--rmc-dim-soft); border-left: 2px solid var(--rmc-border-strong); opacity: .55; }

.rmc-timeline-card strong {
  display: block; font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--rmc-text); line-height: 1.2; letter-spacing: -.01em;
}
.rmc-timeline-card span {
  display: block; font-size: 10px; color: var(--rmc-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rmc-timeline-card em { display: block; font-size: 10px; font-style: normal; color: var(--rmc-muted); }

.rmc-timeline-edit-list { display: grid; gap: 8px; grid-column: 2; margin-top: 8px; }

.rmc-timeline-edit-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto 110px minmax(170px, 1.2fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface-2);
}

.rmc-timeline-edit-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--rmc-text); letter-spacing: -.01em;
}

.rmc-timeline-edit-row input,
.rmc-timeline-edit-row select { width: 100%; min-width: 0; min-height: 34px; }

.rmc-timeline-shift { display: inline-flex; gap: 4px; }
.rmc-timeline-shift .rmc-btn { min-height: 30px; padding: 5px 8px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════
   16. CALENDARIO HEATMAP
   ═══════════════════════════════════════════════════════════════ */
.rmc-calendar-panel {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-lg);
  padding: clamp(14px, 2.5vw, 22px);
}

.rmc-calendar-panel h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--rmc-text);
  margin: 0 0 4px;
}

.rmc-calendar-weekdays,
.rmc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.rmc-calendar-weekdays {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--rmc-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rmc-calendar-cell {
  min-height: 52px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface-2);
  padding: 7px;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.rmc-calendar-cell:hover { border-color: var(--rmc-border-strong); }
.rmc-calendar-cell.is-empty { border: none; background: transparent; cursor: default; }

/* Ocupación: light usa tono suave del azul para "cargado" */
.rmc-calendar-cell.is-green  { background: var(--rmc-green-soft);  border-color: rgba(22,131,74,.18);  }
.rmc-calendar-cell.is-orange { background: var(--rmc-orange-soft); border-color: rgba(146,96,10,.18);  }
.rmc-calendar-cell.is-red    { background: var(--rmc-red-soft);    border-color: rgba(180,60,60,.18);  }
.rmc-calendar-cell.is-selected { outline: 2px solid var(--rmc-accent); outline-offset: -2px; }

.rmc-calendar-day {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--rmc-text);
  letter-spacing: -.015em;
}

.rmc-calendar-meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--rmc-muted);
}

.rmc-calendar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rmc-border);
  font-size: 12px;
  color: var(--rmc-muted);
}

.rmc-calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }

.rmc-calendar-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.rmc-calendar-legend i.is-green  { background: var(--rmc-green); }
.rmc-calendar-legend i.is-orange { background: var(--rmc-orange); }
.rmc-calendar-legend i.is-red    { background: var(--rmc-red); }

/* ═══════════════════════════════════════════════════════════════
   17. BOOKING WIDGET — público
   ═══════════════════════════════════════════════════════════════ */
.rmc-shell-booking { padding: 0; }

.rmc-booking-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(10px, 2vw, 16px) 0;
}

.rmc-booking-card {
  width: 100%;
  max-width: 360px;
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-xl);
  padding: clamp(20px, 4vw, 28px);
}

.rmc-booking-header { margin-bottom: 20px; }

.rmc-booking-kicker {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rmc-muted);
  margin-bottom: 10px;
}

.rmc-booking-divider { height: 1px; background: var(--rmc-border); }

.rmc-booking-step { display: flex; flex-direction: column; gap: 12px; }

.rmc-inline-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Month picker */
.rmc-picker-card {
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  padding: 14px;
  background: var(--rmc-surface);
}

.rmc-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.rmc-picker-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--rmc-text);
  letter-spacing: -.02em;
}

.rmc-picker-nav { display: inline-flex; align-items: center; gap: 6px; }

.rmc-picker-nav button {
  width: 28px;
  height: 28px;
  border-radius: var(--rmc-r);
  border: 1px solid var(--rmc-border-strong);
  background: var(--rmc-surface-2);
  color: var(--rmc-text-2);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  font-family: inherit;
}

.rmc-picker-nav button:hover { background: var(--rmc-surface-3); }

.rmc-picker-nav span {
  font-size: 12px;
  font-weight: 600;
  color: var(--rmc-text);
  white-space: nowrap;
  min-width: 110px;
  text-align: center;
}

.rmc-picker-weekdays,
.rmc-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.rmc-picker-weekdays {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--rmc-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rmc-picker-day {
  height: 32px;
  border-radius: var(--rmc-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--rmc-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}

.rmc-picker-day:hover:not(.is-disabled):not(.is-empty) {
  background: var(--rmc-surface-2);
  border-color: var(--rmc-border);
}

.rmc-picker-day.is-active {
  background: var(--rmc-accent);
  color: #fff;
  border-color: var(--rmc-accent);
  font-weight: 700;
}

.rmc-picker-day.is-disabled { opacity: .3; cursor: not-allowed; }
.rmc-picker-day.is-empty { border: none; background: transparent; cursor: default; }

/* Time slots */
.rmc-slot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.rmc-slot-btn {
  border: 1px solid var(--rmc-border-strong);
  background: var(--rmc-surface);
  color: var(--rmc-text);
  border-radius: var(--rmc-r);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .1s, border-color .1s, color .1s;
  letter-spacing: -.01em;
}

.rmc-slot-btn:hover:not(.is-disabled) {
  background: var(--rmc-accent-soft);
  border-color: var(--rmc-accent-mid);
  color: var(--rmc-accent-text);
}

.rmc-slot-btn.is-selected {
  background: var(--rmc-accent);
  color: #fff;
  border-color: var(--rmc-accent);
  font-weight: 700;
}

.rmc-slot-btn.is-disabled { opacity: .35; cursor: not-allowed; font-size: 12px; }

/* Summary bar */
.rmc-summary-bar {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  background: var(--rmc-surface-2);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rmc-text);
}

.rmc-back-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  color: var(--rmc-muted);
  padding: 0;
  line-height: 1;
  transition: color .12s;
  font-family: inherit;
}

.rmc-back-btn:hover { color: var(--rmc-text); }

.rmc-time-heading {
  font-size: 15px;
  font-weight: 800;
  color: var(--rmc-text);
  letter-spacing: -.02em;
}

.rmc-subtitle { font-size: 13px; font-weight: 500; color: var(--rmc-muted); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   18. SETUP DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.rmc-setup-toolbar { margin-bottom: 18px; }

.rmc-setup-inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.rmc-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  align-items: start;
}

.rmc-setup-wide { grid-column: 1 / -1; }

/* Horarios */
.rmc-opening-hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rmc-opening-hour-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface-2);
}

.rmc-opening-hour-row.is-closed { opacity: .6; }

.rmc-day-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--rmc-text);
  letter-spacing: -.01em;
}

.rmc-hour-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.rmc-closed-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 5px !important;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--rmc-muted);
  text-transform: none;
  letter-spacing: 0;
}

.rmc-time-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.rmc-time-pair span { color: var(--rmc-muted); font-size: 12px; text-align: center; }
.rmc-time-pair input[type="time"] { min-width: 0; padding: 7px 6px; }

/* Setup lists */
.rmc-setup-stack,
.rmc-setup-list { display: flex; flex-direction: column; gap: 8px; }

.rmc-setup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface-2);
  flex-wrap: wrap;
  transition: background .12s;
}

.rmc-setup-item:hover { background: var(--rmc-surface-3); }

.rmc-setup-item strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--rmc-text);
  letter-spacing: -.015em;
  flex: 1;
}

.rmc-setup-item .rmc-muted { margin: 0; flex-shrink: 0; }
.rmc-setup-item .rmc-action-row { margin-left: auto; }

/* Integrations */
.rmc-integration-group {
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-lg);
  padding: clamp(14px, 2.5vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rmc-integration-group h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--rmc-text);
  letter-spacing: -.025em;
  margin: 0 0 4px;
}

.rmc-inline-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-md);
  background: var(--rmc-surface-2);
}

.rmc-inline-tool strong {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rmc-muted);
}

/* ═══════════════════════════════════════════════════════════════
   19. DARK MODE — sobreescrituras específicas de elementos
   ═══════════════════════════════════════════════════════════════ */
.rmc-theme-dark .rmc-panel,
.rmc-theme-dark .rmc-stat-card,
.rmc-theme-dark .rmc-calendar-panel,
.rmc-theme-dark .rmc-booking-card,
.rmc-theme-dark .rmc-mobile-reservation-card,
.rmc-theme-dark .rmc-inline-tool,
.rmc-theme-dark .rmc-setup-item,
.rmc-theme-dark .rmc-integration-group,
.rmc-theme-dark .rmc-manager-modal-card,
.rmc-theme-dark .rmc-picker-card {
  background: var(--rmc-surface);
  border-color: var(--rmc-border);
  box-shadow: none;
}

.rmc-theme-dark .rmc-data-table th {
  background: var(--rmc-surface);
  border-bottom-color: var(--rmc-border);
}

.rmc-theme-dark .rmc-data-table tbody tr:hover td {
  background: var(--rmc-surface-2);
}

/* Calendario dark — colores de estado sobre fondo oscuro */
.rmc-theme-dark .rmc-calendar-cell { background: var(--rmc-surface-2); border-color: var(--rmc-border); }
.rmc-theme-dark .rmc-calendar-cell.is-green  { background: rgba(61,186,120,.14); border-color: rgba(61,186,120,.22); }
.rmc-theme-dark .rmc-calendar-cell.is-orange { background: rgba(212,148,32,.14); border-color: rgba(212,148,32,.22); }
.rmc-theme-dark .rmc-calendar-cell.is-red    { background: rgba(224,112,112,.14); border-color: rgba(224,112,112,.22); }
.rmc-theme-dark .rmc-calendar-cell.is-selected { outline-color: var(--rmc-accent); }

/* Timeline dark */
.rmc-theme-dark .rmc-timeline-track { background: var(--rmc-surface-2); border-color: var(--rmc-border); }
.rmc-theme-dark .rmc-timeline-card.is-pending   { background: rgba(212,148,32,.16); }
.rmc-theme-dark .rmc-timeline-card.is-confirmed { background: rgba(61,186,120,.16); }
.rmc-theme-dark .rmc-timeline-card.is-delayed   { background: rgba(212,148,32,.16); }
.rmc-theme-dark .rmc-timeline-card.is-cancelled,
.rmc-theme-dark .rmc-timeline-card.is-no_show   { background: rgba(136,136,128,.12); }
.rmc-theme-dark .rmc-timeline-card {
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

/* Slot buttons dark — acento sobre superficie oscura */
.rmc-theme-dark .rmc-slot-btn {
  background: var(--rmc-surface-2);
  border-color: var(--rmc-border-strong);
}
.rmc-theme-dark .rmc-slot-btn:hover:not(.is-disabled) {
  background: var(--rmc-accent-soft);
  border-color: var(--rmc-accent-mid);
  color: var(--rmc-accent-text);
}

/* Tab activo dark — usa acento azul */
.rmc-theme-dark .rmc-mobile-tab.is-active {
  border-bottom-color: var(--rmc-accent);
  color: var(--rmc-accent-text);
}

/* ═══════════════════════════════════════════════════════════════
   20. RESPONSIVE — 1100px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .rmc-shell-manager .rmc-filter-bar {
    grid-template-columns: minmax(0, 1fr) minmax(126px, 150px) !important;
  }
  .rmc-shell-manager .rmc-filter-restaurant { grid-column: 1 !important; }
  .rmc-shell-manager .rmc-filter-date       { grid-column: 2 !important; }
  .rmc-shell-manager .rmc-filter-room,
  .rmc-shell-manager .rmc-filter-search     { grid-column: 1 / -1 !important; }
  .rmc-table-assignment-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   21. RESPONSIVE — 900px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rmc-shell-manager .rmc-table-wrap .rmc-data-table { display: none; }
  .rmc-shell-manager .rmc-mobile-card-list { display: flex; }

  .rmc-dashboard-grid     { grid-template-columns: 1fr; }
  .rmc-opening-hours-grid { grid-template-columns: 1fr; }

  .rmc-timeline-row { grid-template-columns: 1fr; gap: 6px; }
  .rmc-time-axis    { padding-left: 0; }
  .rmc-timeline-label { display: flex; gap: 10px; align-items: baseline; }

  .rmc-timeline-edit-row { grid-template-columns: 1fr; }
  .rmc-timeline-shift { justify-content: stretch; }
  .rmc-timeline-shift .rmc-btn { flex: 1; }

  .rmc-quick-form { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════
   22. RESPONSIVE — 640px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .rmc-shell-manager,
  .rmc-shell-setup { padding: 14px; }

  .rmc-hero { position: relative; flex-direction: column; gap: 12px; margin-bottom: 16px; padding-top: 44px; }
  .rmc-hero-copy { flex-basis: auto; }
  .rmc-hero-side { width: 100%; align-items: stretch; }
  .rmc-hero-controls {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    z-index: 3;
  }

  .rmc-stat-grid { width: 100%; gap: 8px; }
  .rmc-stat-card { padding: 10px 12px; }
  .rmc-stat-value { font-size: 22px; }
  .rmc-stat-grid .rmc-stat-card:last-child { display: none; }

  .rmc-panel,
  .rmc-calendar-panel,
  .rmc-integration-group { padding: 14px; }

  /* Filtros */
  .rmc-shell-manager .rmc-filter-bar {
    grid-template-columns: 1fr !important;
  }
  .rmc-shell-manager .rmc-filter-restaurant,
  .rmc-shell-manager .rmc-filter-date,
  .rmc-shell-manager .rmc-filter-room,
  .rmc-shell-manager .rmc-filter-search { grid-column: 1 !important; }
  .rmc-shell-manager .rmc-filter-room,
  .rmc-shell-manager .rmc-filter-search { display: none; }
  .rmc-filter-bar input[type="date"] { width: 100%; -webkit-appearance: none; appearance: none; }
  .rmc-qr-link {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--rmc-r-pill);
  }
  .rmc-qr-label { display: none; }
  .rmc-mobile-customer-phone { display: inline; }
  .rmc-mobile-phone-block { display: none; }

  /* Setup */
  .rmc-setup-toolbar  { margin-bottom: 12px; }
  .rmc-setup-inline-form { grid-template-columns: 1fr; gap: 8px; }
  .rmc-setup-grid     { grid-template-columns: 1fr; gap: 10px; }
  .rmc-special-day-row { grid-template-columns: 1fr; }
  .rmc-setup-item     { flex-direction: column; align-items: flex-start; }
  .rmc-setup-item .rmc-action-row { margin-left: 0; }

  /* Horarios */
  .rmc-opening-hour-row {
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 8px;
    gap: 8px;
  }
  .rmc-hour-controls { grid-template-columns: 1fr; gap: 6px; }
  .rmc-closed-toggle { justify-self: start; }
  .rmc-time-pair { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
  .rmc-time-pair input[type="time"] { font-size: 13px; min-height: 34px; }

  /* Cards móvil */
  .rmc-mobile-card-list { display: flex; }

  /* Booking */
  .rmc-booking-card { max-width: 100%; }
  .rmc-slot-grid    { grid-template-columns: 1fr 1fr; }
  .rmc-summary-bar  { grid-template-columns: 32px 1fr 1fr; font-size: 12px; }

  /* Reschedule */
  .rmc-reschedule-box { grid-template-columns: 1fr 1fr; }
  .rmc-reschedule-box .rmc-btn { grid-column: 1 / -1; }

  /* Guest stepper */
  .rmc-guest-stepper { display: flex; width: 100%; }
  .rmc-guest-stepper .rmc-btn:last-child { margin-left: auto; }

  /* Timeline edit */
  .rmc-timeline-edit-list { grid-column: 1; }

  /* Acción */
  .rmc-action-row { display: flex; }
  .rmc-mobile-inline-actions { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   23. RESPONSIVE — 390px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  .rmc-opening-hour-row { grid-template-columns: 1fr; }
  .rmc-day-label { font-size: 12px; }
  .rmc-theme-toggle-btn { width: 34px; height: 34px; }
  .rmc-slot-grid { grid-template-columns: 1fr; }
  .rmc-mobile-inline-actions { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   24. FAB — botón flotante + del dashboard manager
   ═══════════════════════════════════════════════════════════════ */
.rmc-manager-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99990;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--rmc-accent);
  color: #fff;
  box-shadow:
    0 4px 14px rgba(26,111,212,.28),
    0 16px 36px rgba(26,111,212,.16);
  cursor: pointer;
  font-family: inherit;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .15s, box-shadow .15s;
}

.rmc-manager-fab:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(26,111,212,.32),
    0 24px 48px rgba(26,111,212,.18);
}

.rmc-manager-fab:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   25. MODAL — quick-add reserva
   ═══════════════════════════════════════════════════════════════ */
.rmc-manager-modal {
  position: fixed;
  inset: 0;
  z-index: 99991;
  display: grid;
  place-items: center;
  padding: 18px;
}

.rmc-manager-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rmc-manager-modal-card {
  position: relative;
  width: min(460px, 100%);
  background: var(--rmc-surface);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-xl);
  box-shadow: var(--rmc-shadow-md);
  padding: clamp(16px, 3vw, 24px);
  color: var(--rmc-text);
}

.rmc-manager-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.rmc-manager-modal-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--rmc-text);
}

.rmc-modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rmc-border-strong);
  border-radius: 999px;
  background: var(--rmc-surface-2);
  color: var(--rmc-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
  font-family: inherit;
}

.rmc-modal-close:hover { background: var(--rmc-surface-3); color: var(--rmc-text); }

.rmc-quick-form {
  display: grid !important;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, .75fr) !important;
  gap: 10px;
  margin-bottom: 14px;
  align-items: end;
}

.rmc-quick-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rmc-muted);
}

.rmc-quick-form input,
.rmc-quick-form select { width: 100%; min-width: 0 !important; max-width: 100%; }
.rmc-quick-wide { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════════════════════════
   26. LAUNCHER FLOTANTE — booking widget público
   ═══════════════════════════════════════════════════════════════ */
.rmc-launcher-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 0;
  background: var(--rmc-accent, #1a6fd4);
  color: #fff;
  box-shadow:
    0 4px 14px rgba(26,111,212,.28),
    0 16px 40px rgba(26,111,212,.16);
  cursor: pointer;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .15s;
}

.rmc-launcher-btn:hover { opacity: .86; transform: translateY(-2px); }

.rmc-launcher-btn svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rmc-launcher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  box-sizing: border-box;
  z-index: 999998;
}

.rmc-launcher-overlay.is-open { display: flex; }

.rmc-launcher-panel {
  width: min(384px, calc(100vw - 24px));
  height: min(720px, calc(100vh - 24px));
  background: var(--rmc-bg, #f8f8f4);
  border-radius: var(--rmc-r-xl, 20px);
  box-shadow: var(--rmc-shadow-md, 0 24px 60px rgba(0,0,0,.2));
  overflow: hidden;
  position: relative;
}

.rmc-launcher-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--rmc-border, rgba(14,14,12,.1));
  background: var(--rmc-surface, #f2f2ec);
  color: var(--rmc-text-2, #2e2e2a);
  cursor: pointer;
  z-index: 2;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}

.rmc-launcher-close:hover { background: var(--rmc-surface-2, #eaeae2); }

.rmc-launcher-frame { width: 100%; height: 100%; border: 0; background: transparent; }

/* ═══════════════════════════════════════════════════════════════
   27. RESPONSIVE — FAB y modal en móvil
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .rmc-manager-fab {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    font-size: 26px;
  }

  .rmc-manager-modal {
    align-items: flex-end;
    padding: 0;
  }

  .rmc-manager-modal-card {
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    padding: 20px 16px;
  }

  .rmc-quick-form { grid-template-columns: 1fr !important; }

  .rmc-launcher-btn { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .rmc-launcher-overlay { padding: 0; }
  .rmc-launcher-panel { width: 100vw; height: 100vh; border-radius: 0; }

  .rmc-integration-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   28. THEME TOGGLE BUTTON — icono SVG ☀/🌙 aislado esquina sup-der
   ═══════════════════════════════════════════════════════════════ */
.rmc-theme-toggle-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--rmc-r-pill);
  border: 1px solid var(--rmc-border-strong);
  background: var(--rmc-surface);
  color: var(--rmc-muted);
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(24,39,75,.06);
  position: relative;
  overflow: hidden;
}

.rmc-theme-toggle-btn:hover {
  background: var(--rmc-surface-2);
  border-color: var(--rmc-accent);
  color: var(--rmc-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(24,39,75,.10);
}

.rmc-theme-toggle-btn:active {
  transform: translateY(0);
}

.rmc-theme-toggle-btn.is-dark {
  background: var(--rmc-surface-2);
  border-color: var(--rmc-border-strong);
  color: var(--rmc-accent-text);
}

.rmc-theme-toggle-btn.is-dark:hover {
  border-color: var(--rmc-accent);
  color: var(--rmc-accent);
}

/* SVG icons inside toggle */
.rmc-theme-icon {
  display: block;
  transition: opacity .2s ease, transform .2s ease;
}

.rmc-theme-icon.is-active {
  opacity: 1;
}

/* Posición aislada del toggle — esquina superior derecha del shell */
.rmc-hero-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   29. TIMELINE — colores por cliente
   Cards con color inline (via JS). Override del estado para que
   el color del cliente prevalezca sobre el color de estado.
   ═══════════════════════════════════════════════════════════════ */
.rmc-timeline-card--colored {
  /* Los colores vienen del style inline generado por JS */
  border-left-width: 3px;
  opacity: 1;
  box-shadow: 0 10px 22px rgba(15,23,42,.18);
}

.rmc-timeline-card--colored strong {
  font-weight: 700;
  font-size: 11px;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

.rmc-timeline-card--colored span,
.rmc-timeline-card--colored em {
  font-size: 10px;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

.rmc-timeline-card--interactive:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter: saturate(1.05);
}

/* Estados cancelado/no-show mantienen opacidad baja */
.rmc-timeline-card--colored.is-cancelled,
.rmc-timeline-card--colored.is-no_show {
  opacity: .72;
  filter: grayscale(.18);
}

/* ═══════════════════════════════════════════════════════════════
   30. QUICK FORM — feedback de disponibilidad
   ═══════════════════════════════════════════════════════════════ */
.rmc-avail-checking {
  font-size: 12px;
  color: var(--rmc-muted);
  text-align: center;
  padding: 6px 0 2px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   31. CRM DASHBOARD
   ═══════════════════════════════════════════════════════════════ */
.rmc-crm-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(260px, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.rmc-crm-panel {
  padding: 18px;
}

.rmc-crm-list {
  display: grid;
  gap: 12px;
}

.rmc-crm-card {
  background: var(--rmc-surface-2);
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-lg);
  padding: 16px;
  box-shadow: var(--rmc-shadow-sm);
}

.rmc-crm-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.rmc-crm-card-head strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--rmc-text);
  letter-spacing: -.02em;
}

.rmc-crm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.rmc-crm-meta span {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rmc-surface-3);
  border: 1px solid var(--rmc-border);
  color: var(--rmc-text-2);
  font-size: 12px;
  font-weight: 600;
}

.rmc-crm-note {
  margin: 6px 0 0;
  color: var(--rmc-muted);
  font-size: 13px;
  line-height: 1.6;
}

.rmc-avail-error {
  background: var(--rmc-red-soft);
  border: 1px solid rgba(180,60,60,.18);
  border-radius: var(--rmc-r);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--rmc-red-text);
  line-height: 1.5;
  margin-bottom: 4px;
}

.rmc-avail-error strong {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--rmc-red-text);
}

.rmc-avail-ok {
  background: var(--rmc-green-soft);
  border: 1px solid rgba(22,131,74,.18);
  border-radius: var(--rmc-r);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--rmc-green-text);
  font-weight: 600;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .rmc-crm-toolbar {
    grid-template-columns: 1fr;
  }

  .rmc-crm-card-head {
    flex-direction: column;
  }
}


/* ═══════════════════════════════════════════════════════════════
   25. SETUP OVERRIDES — business config, preview, notifications
   ═══════════════════════════════════════════════════════════════ */
.rmc-setup-hero {
  align-items: stretch;
}

.rmc-setup-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 18px;
  align-items: start;
  width: 100%;
}

.rmc-setup-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rmc-setup-title-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.rmc-setup-business-name {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--rmc-accent);
  letter-spacing: -.02em;
}

.rmc-autosave-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  padding: 6px 10px;
  border-radius: var(--rmc-r-pill);
  background: var(--rmc-orange-soft);
  color: var(--rmc-orange-text);
  font-size: 12px;
  font-weight: 700;
}

.rmc-autosave-badge.is-saved {
  background: var(--rmc-accent-soft);
  color: var(--rmc-accent-text);
}

.rmc-widget-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--rmc-border);
  border-radius: var(--rmc-r-lg);
  background: var(--rmc-surface-2);
}

.rmc-widget-preview-head {
  margin-bottom: 14px;
}

.rmc-widget-preview-head strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--rmc-text);
  margin-bottom: 4px;
}

.rmc-widget-preview-shell {
  position: relative;
  min-height: 280px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--rmc-surface) 0%, var(--rmc-surface-2) 100%);
  border: 1px solid var(--rmc-border);
}

.rmc-widget-preview-card {
  max-width: 320px;
  background: #ffffff;
  color: #13151a;
  border-radius: 20px;
  border: 1px solid #e7ebf1;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.rmc-widget-preview-card.is-widget {
  position: relative;
  padding-bottom: 80px;
}

.rmc-widget-preview-card h4 {
  margin: 6px 0 12px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
}

.rmc-widget-preview-field,
.rmc-widget-preview-cal {
  padding: 12px 14px;
  border: 1px solid #dfe4ea;
  border-radius: 14px;
  background: #fbfcfe;
  margin-bottom: 10px;
  font-size: 13px;
  color: #4b5563;
}

.rmc-widget-preview-cal strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: #13151a;
}

.rmc-widget-preview-days,
.rmc-widget-preview-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.rmc-widget-preview-days span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  color: #8a94a6;
}

.rmc-widget-preview-date {
  height: 34px;
  border-radius: 10px;
  border: 1px solid #dfe4ea;
  background: #ffffff;
  color: #13151a;
  font-size: 12px;
  font-weight: 700;
}

.rmc-widget-preview-date.is-active {
  color: #ffffff;
}

.rmc-setup-step-title {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--rmc-accent);
}

.rmc-widget-preview-launcher {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 12px 32px rgba(26,111,212,.24);
}

.rmc-opening-slot-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rmc-shift-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.rmc-shift-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rmc-muted);
}

.rmc-split-shift-btn {
  align-self: flex-start;
}

.rmc-notifications-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rmc-checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rmc-text-2);
}

.rmc-setup-save-row {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .rmc-setup-hero-top,
  .rmc-notifications-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rmc-setup-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .rmc-setup-title-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .rmc-shift-row {
    grid-template-columns: 1fr;
  }
}


.rmc-onboarding-progress-inline {
  min-width: min(100%, 320px);
}

.rmc-onboarding-progress-inline strong {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rmc-text-2);
}

.rmc-onboarding-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--rmc-surface-3);
  overflow: hidden;
}

.rmc-onboarding-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rmc-accent) 0%, color-mix(in srgb, var(--rmc-accent) 72%, white) 100%);
}

.rmc-onboarding-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.rmc-onboarding-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--rmc-border);
  background: #ffffff;
  color: var(--rmc-text-2);
  font-size: 13px;
  font-weight: 700;
}

.rmc-onboarding-step.is-active {
  border-color: var(--rmc-accent);
  color: var(--rmc-accent);
  box-shadow: 0 0 0 3px rgba(26,111,212,.12);
}

.rmc-onboarding-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--rmc-surface-3);
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}

.rmc-onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.rmc-onboarding-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .rmc-onboarding-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .rmc-onboarding-footer-actions {
    justify-content: stretch;
  }

  .rmc-onboarding-footer-actions .rmc-btn {
    flex: 1 1 180px;
  }
}