/* ═══════════════════════════════════════════════════════════════════
   AURELIA — catálogo compartido "Lienzo editorial" (design.md §4–§8)

   Cascada (design.md §13.1), de lo general a lo específico:
     design-tokens.css  → tokens generados desde design-system/tokens.json
     aurelia-base.css   → este archivo: base tipográfica y componentes
                          del catálogo, iguales en todas las superficies
     superficie         → aurelia.css (panel), auth.css (acceso),
                          public-theme.css (landing), aurelia-console.css
   Aquí solo se usan tokens; nada de valores sueltos. Las superficies no
   redefinen tokens ni repiten estas reglas: solo agregan las suyas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── §4 Base: tinta sobre lino, Manrope para UI, Fraunces para display ── */
/* Off-canvas drawers are fixed + translated; clip (not hidden) keeps them
   from widening the page without breaking position: sticky. */
html, body { overflow-x: clip; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  font-feature-settings: "ss01" 0;
}
.c-display, .page-title, .hero-names, .home-hero-names, .wizard-title,
.settings-section-title, .modal-title, h1.h1, .font-display, .font-serif {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
}
.page-title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: -0.01em;
  color: var(--text);
}
.page-title-count {
  font-family: var(--font-sans);
  font-variation-settings: normal;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-2);
  margin-left: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.page-subtitle { font-size: var(--fs-body-s); color: var(--text-2); max-width: 68ch; }
.page-header { margin-bottom: var(--space-8); }

/* §4.2 label / eyebrow */
.c-label, .label-caps, .hero-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: var(--fw-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* §4.3 numbers: tabular everywhere they line up */
.table, .c-num, .c-display, .activity-num, .metric-num, .cd-num,
.budget-kpi-value, [class*="amount"], [class*="-count"] {
  font-variant-numeric: tabular-nums;
}
.c-num { text-align: right; white-space: nowrap; }

/* §8.4 display figures */
.c-display {
  font-weight: var(--fw-display-l);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: -0.02em;
  color: var(--text);
}
.c-display--xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--fw-display-xl); }
.c-display-unit { font-size: 0.55em; color: var(--text-2); margin-left: 0.08em; }
.c-metric { display: flex; flex-direction: column; gap: var(--space-1); }
.c-metric-value { font-family: var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 50; font-weight: 360; line-height: 1.05; color: var(--text); }
.c-metric-caption { font-size: var(--fs-caption); color: var(--text-2); }

/* ── §8.1 Botones ── */
.btn {
  --btn-h: 40px;
  min-height: var(--btn-h);
  border-radius: var(--radius-s);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-s);
  letter-spacing: 0;
  padding-inline: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out),
              border-color var(--dur-instant) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn .bi { font-size: 1rem; margin: 0 !important; } /* beats Bootstrap .me-1 utilities */
.btn-sm { --btn-h: 32px; padding-inline: var(--space-4); font-size: var(--fs-body-s); }
.btn-lg { --btn-h: 48px; padding-inline: var(--space-6); font-size: var(--fs-body); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .45; }

.btn-primary, .btn-pay, .btn-wizard-main, .wizard-fixed-btn .btn-wizard-main {
  background: var(--text);
  color: var(--canvas);
  -webkit-text-fill-color: var(--canvas);
  border: 0;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-pay:hover, .btn-wizard-main:hover {
  background: var(--surface-ink-raised);
  color: var(--canvas);
  box-shadow: inset 0 -2px 0 var(--gold);
  transform: none;
}
.btn-outline-secondary, .btn-outline-primary {
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  border: 1px solid var(--hairline-strong);
}
.btn-outline-secondary:hover, .btn-outline-primary:hover {
  background: var(--surface-sunken);
  color: var(--text);
  -webkit-text-fill-color: currentColor;
  border-color: var(--hairline-strong);
}
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-text);
  -webkit-text-fill-color: currentColor;
}
.btn-link, .c-button--tertiary { color: var(--gold-text); font-weight: 600; text-decoration: none; padding-inline: var(--space-2); }
.btn-link:hover, .c-button--tertiary:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.btn-gold { background: var(--gold); color: var(--text); border: 0; }
.btn-gold:hover { background: var(--gold); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold-text); }
.btn-danger { background: var(--err); color: #FFFFFF; border: 0; }
.btn-outline-danger { color: var(--err); border: 1px solid var(--hairline-strong); background: transparent; }
.btn-outline-danger:hover { background: var(--err-bg); color: var(--err); border-color: var(--err); }

/* ── §8.3 Tarjetas: superficie blanca + hairline + elev-1 ── */
.card, .section-card, .metric-card, .c-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--elev-1);
}
.c-card { padding: var(--space-6); }
/* Only cards that are links/buttons lift (§8.3 "Interactiva"). */
.metric-card:hover, .card:hover { transform: none; box-shadow: var(--elev-1); }
a.card:hover, button.card:hover, .card.is-pressable:hover, .c-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
.c-card--sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }
.c-card--ai { border: 1px dashed var(--gold); }
.c-card--ink {
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(198 169 107 / .12), transparent 60%),
    var(--surface-ink);
  border: 0;
  border-radius: var(--radius-l);
  color: var(--text-on-ink);
  box-shadow: var(--elev-2);
}

/* ── §8.5 Pills ── */
.c-pill, .badge.badge-soft-success, .badge.badge-soft-warning, .badge.badge-soft-danger,
.badge.badge-soft-info, .badge.badge-soft-gray {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.c-pill .bi { font-size: 0.8125rem; }
.c-pill--ok, .badge.badge-soft-success { background: var(--ok-bg); color: var(--ok); }
.c-pill--warn, .badge.badge-soft-warning { background: var(--warn-bg); color: var(--warn); }
.c-pill--err, .badge.badge-soft-danger { background: var(--err-bg); color: var(--err); }
.c-pill--info, .badge.badge-soft-info { background: var(--info-bg); color: var(--info); }
.c-pill--neutral, .badge.badge-soft-gray { background: var(--neutral-bg); color: var(--neutral); }
.c-pill--gold { background: var(--gold-soft); color: var(--gold-text); }

/* §8.5 Chip de filtro */
.filter-pill {
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-body-s);
  font-weight: 500;
  padding: var(--space-1) var(--space-4);
}
.filter-pill span { font-variant-numeric: tabular-nums; color: var(--text-3); }
.filter-pill:hover { background: var(--surface-sunken); color: var(--text); }
.filter-pill.active, .filter-pill.active-confirmed, .filter-pill.active-pending, .filter-pill.active-declined {
  background: var(--gold-soft);
  background-image: none;
  border-color: var(--gold);
  color: var(--gold-text);
  -webkit-text-fill-color: currentColor;
  font-weight: 600;
}
.filter-pill.active span { color: inherit; }

/* ── §8.2 Campos ──
   Deviation from §8.2 "sin borde en reposo": WCAG 2.2 SC 1.4.11 needs a 3:1
   boundary to identify the field; --text-3 on white/sunken gives ≈3.9:1. */
.form-label { font-size: var(--fs-body-s); font-weight: 600; color: var(--text); margin-bottom: var(--space-1); }
.form-control, .form-select, .assistant-input {
  min-height: 44px;
  background-color: var(--surface-sunken);
  border: 1px solid var(--text-3);
  border-radius: var(--radius-s);
  color: var(--text);
}
.form-control:hover, .form-select:hover { border-color: var(--text-2); }
.form-control:focus, .form-select:focus, .assistant-input:focus {
  background-color: var(--surface);
  border-color: var(--gold-text);
  box-shadow: var(--focus);
}
/* Placeholders keep body-text contrast (≥ 4.5:1), not the decorative --text-3. */
.form-control::placeholder, .assistant-input::placeholder { color: var(--text-2); opacity: 1; }
.form-text { font-size: var(--fs-caption); color: var(--text-2); }
textarea.form-control { min-height: 96px; }

.c-search { position: relative; flex: 1 1 240px; max-width: 360px; }
.c-search > .bi { position: absolute; left: var(--space-3); top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
.c-search .form-control { padding-left: calc(var(--space-3) + 24px); }

/* ── §8.7 Tablas ── */
.table { --bs-table-bg: transparent; color: var(--text); }
.table thead th {
  background: transparent;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-2);
  border-bottom: 1px solid var(--hairline-strong);
  padding: var(--space-3) var(--space-4);
}
.table td { border-color: var(--hairline); padding: var(--space-3) var(--space-4); height: 52px; font-size: var(--fs-body-s); }
.table tbody tr { transition: background-color var(--dur-instant) var(--ease-out); }
.table tbody tr:hover > td { background: var(--surface-sunken); }
.table th.c-num, .table td.c-num { text-align: right; }

/* ── §8.8 Progreso ── */
.progress { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.c-stacked-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-sunken);
}
.c-stacked-bar > span { flex: 0 1 0; min-width: 0; transition: flex-grow var(--dur-draw) var(--ease-out); }
.c-stacked-bar .is-ok, .c-dot.is-ok { background: var(--ok); }
.c-stacked-bar .is-declined, .c-dot.is-declined { background: var(--err); }
.c-stacked-bar .is-neutral, .c-dot.is-neutral { background: var(--text-3); }
.c-stacked-bar .is-pending, .c-dot.is-pending { background: var(--gold); }
.c-stacked-bar--ink { background: rgb(243 238 229 / .12); }
.c-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); vertical-align: 1px; }

/* ── Disclosure (acordeón ligero, §7.4) ── */
.c-disclosure {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  margin-bottom: var(--space-4);
}
.c-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-body-s);
  color: var(--text);
  list-style: none;
}
.c-disclosure > summary::-webkit-details-marker { display: none; }
.c-disclosure > summary > .bi:first-child { color: var(--gold-text); font-size: 1rem; }
.c-disclosure-chevron { margin-left: auto; color: var(--text-2); transition: transform var(--dur-base) var(--ease-out); }
.c-disclosure[open] .c-disclosure-chevron { transform: rotate(180deg); }
.c-disclosure-body { padding: 0 var(--space-5) var(--space-5); }

/* ── §8.14 Avisos y banners: tintado semántico, nunca saturado ── */
.alert { border: 1px solid transparent; border-radius: var(--radius-m); font-size: var(--fs-body-s); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 18%, transparent); }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 18%, transparent); }
.alert-danger { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 18%, transparent); }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 18%, transparent); }
.trial-banner {
  background: var(--gold-50);
  border-bottom: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: var(--fs-body-s);
}
.trial-banner a, .trial-banner button { color: var(--gold-text); font-weight: 600; }

.section-link { color: var(--gold-text); font-weight: 600; font-size: var(--fs-body-s); }
.section-link:hover { color: var(--text); }


/* ── §8.9 Modales ──
   Native <dialog> (c-dialog) for new flows: focus trap, Esc and ::backdrop
   for free, @starting-style entry. Existing Bootstrap modals get the same
   look and the same phone presentation (bottom sheet under 640 px). */
.c-dialog {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100dvh - 2 * var(--space-8));
  padding: 0;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-3);
  opacity: 0; translate: 0 12px; scale: .98;
  transition: opacity var(--dur-moderate) var(--ease-out), translate var(--dur-moderate) var(--ease-out),
              scale var(--dur-moderate) var(--ease-out),
              overlay var(--dur-moderate) allow-discrete, display var(--dur-moderate) allow-discrete;
}
.c-dialog--wide { width: min(720px, calc(100vw - 2 * var(--space-4))); }
.c-dialog[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { .c-dialog[open] { opacity: 0; translate: 0 12px; scale: .98; } }
.c-dialog::backdrop {
  background: rgb(15 13 10 / 0); backdrop-filter: blur(0);
  transition: background var(--dur-moderate) var(--ease-out), backdrop-filter var(--dur-moderate) var(--ease-out),
              overlay var(--dur-moderate) allow-discrete, display var(--dur-moderate) allow-discrete;
}
.c-dialog[open]::backdrop { background: var(--backdrop); backdrop-filter: blur(8px); }
@starting-style { .c-dialog[open]::backdrop { background: rgb(15 13 10 / 0); backdrop-filter: blur(0); } }
.c-dialog-inner { display: flex; flex-direction: column; max-height: inherit; }
.c-dialog-head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-8) var(--space-8) var(--space-4); }
.c-dialog-head h2 { margin: 0; font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.c-dialog-head p { margin: var(--space-2) 0 0; color: var(--text-2); font-size: var(--fs-body-s); }
.c-dialog-close {
  margin-left: auto; flex-shrink: 0; width: 40px; height: 40px;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem;
}
.c-dialog-close:hover { background: var(--surface-sunken); color: var(--text); }
.c-dialog-body { padding: 0 var(--space-8) var(--space-6); overflow-y: auto; }
.c-dialog-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid var(--hairline);
}
.c-dialog-actions .c-dialog-cancel { margin-right: auto; }

/* Bootstrap modals, re-skinned to the same anatomy. */
.modal-backdrop.show { opacity: 1; background: var(--backdrop); backdrop-filter: blur(8px); }
.modal-content {
  border: 0;
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-3);
}
.modal-header, .modal-header-aurelia { border-bottom: 0; padding: var(--space-8) var(--space-8) var(--space-2); background: transparent; color: var(--text); }
.modal-header-aurelia h5, .modal-header-aurelia h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 600; margin: 0; }
.modal-title { font-family: var(--font-sans); font-variation-settings: normal; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.modal-body { padding: var(--space-4) var(--space-8) var(--space-6); }
.modal-footer {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid var(--hairline);
  background: transparent;
}
.modal-footer > * { margin: 0; }
.modal-footer > .btn-outline-secondary:first-child { margin-right: auto; }
.modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform var(--dur-moderate) var(--ease-out); }
.modal.show .modal-dialog { transform: none; }

/* §8.9: under 640 px a modal is presented as a bottom sheet (§8.10). */
@media (max-width: 639.98px) {
  .c-dialog {
    width: 100vw; max-width: 100vw; max-height: 92dvh;
    margin: auto 0 0; border-radius: var(--radius-l) var(--radius-l) 0 0;
    translate: 0 100%; scale: 1;
    transition-timing-function: var(--ease-drawer);
  }
  .c-dialog[open] { translate: 0 0; }
  @starting-style { .c-dialog[open] { translate: 0 100%; } }
  .modal-dialog, .modal-dialog-centered { margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none; }
  .modal-content { border-radius: var(--radius-l) var(--radius-l) 0 0; max-height: 92dvh; overflow-y: auto; }
  .modal.fade .modal-dialog { transform: translateY(100%); transition: transform var(--dur-moderate) var(--ease-drawer); }
  .modal.show .modal-dialog { transform: none; }
  .c-dialog::before, .modal-content::before {
    content: ""; display: block; width: 36px; height: 4px; margin: var(--space-2) auto 0;
    border-radius: var(--radius-pill); background: var(--hairline-strong);
  }
  .c-dialog-head, .modal-header, .modal-header-aurelia { padding: var(--space-4) var(--space-5) var(--space-2); }
  .c-dialog-body, .modal-body { padding: var(--space-2) var(--space-5) var(--space-4); }
  .c-dialog-actions, .modal-footer { padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}

/* ── §8.12 Toasts ── tinta, abajo a la derecha (centrados en celular),
   5 s (8 s con acción), pausa con hover/foco, máximo 3. */
.a-toast-wrap {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2);
  width: min(420px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}
.a-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-ink); color: var(--text-on-ink);
  font-size: var(--fs-body-s); line-height: var(--lh-body-s);
  box-shadow: var(--elev-3);
  animation: c-toast-in var(--dur-base) var(--ease-out);
}
.a-toast-icon { color: var(--gold-on-ink); flex-shrink: 0; font-size: 1.125rem; }
.a-toast-error .a-toast-icon { color: var(--warn-bg); }
.a-toast-text { flex: 1; min-width: 0; }
.a-toast-action {
  flex-shrink: 0; min-height: 36px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-s); background: transparent;
  color: var(--gold-on-ink); font: inherit; font-weight: 700;
}
.a-toast-action:hover { background: var(--surface-ink-raised); }
.a-toast-out { animation: c-toast-out var(--dur-fast) var(--ease-accel) forwards; }
@keyframes c-toast-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes c-toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 991.98px) {
  .a-toast-wrap { left: 50%; right: auto; translate: -50% 0; align-items: center; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ── §8.17 WhatsApp preview ── burbuja real con hora y doble palomita. */
.c-wa {
  margin: 0;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-sunken);
  background-image: radial-gradient(var(--hairline) 1px, transparent 1px);
  background-size: 16px 16px;
}
.c-wa-bubble {
  position: relative;
  max-width: 340px;
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-radius: var(--radius-s) var(--radius-s) var(--radius-s) 2px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-1);
}
.c-wa-bubble::before {
  content: ""; position: absolute; left: -6px; bottom: 0;
  border: 6px solid transparent; border-right-color: var(--surface); border-bottom-color: var(--surface);
}
.c-wa-text { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); white-space: pre-wrap; }
.c-wa-meta { display: block; text-align: right; color: var(--text-3); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.c-wa-meta .bi { color: var(--info); }
.c-wa-attachment {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2); padding: var(--space-2);
  border-radius: var(--radius-xs); background: var(--surface-sunken);
  font-size: var(--fs-caption); font-weight: 600;
}
.c-wa-attachment .bi { color: var(--err); font-size: 1.125rem; }

/* ── §8.11 Deshacer antes de un envío masivo ── */
.c-undo {
  display: grid; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-m);
  background: var(--surface-ink); color: var(--text-on-ink);
}
.c-undo[hidden] { display: none; }
.c-undo-row { display: flex; align-items: center; gap: var(--space-3); }
.c-undo-row strong { flex: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-undo-track { height: 4px; border-radius: var(--radius-pill); background: rgb(243 238 229 / .16); overflow: hidden; }
.c-undo-bar { height: 100%; background: var(--gold-on-ink); transform-origin: left; transform: scaleX(1); }
.c-undo.is-running .c-undo-bar { transform: scaleX(0); transition: transform 10s linear; }
.c-undo-cancel {
  min-height: 40px; padding: 0 var(--space-4);
  border: 1px solid rgb(243 238 229 / .3); border-radius: var(--radius-s);
  background: transparent; color: var(--gold-on-ink); font: inherit; font-weight: 700;
}
.c-undo-cancel:hover { background: var(--surface-ink-raised); }
@media (prefers-reduced-motion: reduce) { .c-undo.is-running .c-undo-bar { transition: none; transform: scaleX(.5); } }


/* ── Shared with the app (web ↔ app coherence) ─────────────────────────────── */
.c-avatar { --av: 40px; display: inline-grid; place-items: center; flex: none; width: var(--av); height: var(--av); border-radius: 50%;
  font-family: var(--font-display); font-size: calc(var(--av) * .36); line-height: 1; border: 1px solid var(--hairline); }
.c-avatar--sage { background: var(--ok-bg); color: var(--ok); }
.c-avatar--gold { background: var(--gold-soft); color: var(--gold-text); }
.c-avatar--accent { background: var(--accent-soft); color: var(--accent); }
.c-avatar--info { background: var(--info-bg); color: var(--info); }

.c-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-5); }
.c-empty-ring { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: var(--space-4); animation: c-empty-in var(--dur-moderate) var(--ease-spring, var(--ease-out)) both; }
.c-empty-ring > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); }
.c-empty-ring .bi { font-size: 1.55rem; }
.c-empty-ring--gold { background: var(--gold-soft); } .c-empty-ring--gold > span { border: 1px solid rgba(138,111,46,.25); color: var(--gold-text); }
.c-empty-ring--sage { background: var(--ok-bg); } .c-empty-ring--sage > span { border: 1px solid rgba(36,122,75,.25); color: var(--ok); }
.c-empty-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-title, 1.5rem); margin: 0 0 var(--space-2); }
.c-empty-text { max-width: 28rem; margin: 0; color: var(--text-2); }
.c-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
@keyframes c-empty-in { from { opacity: 0; transform: scale(.88); } }

.c-action-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast); }
.c-action-pill:hover { filter: brightness(.97); transform: translateY(-1px); } .c-action-pill:active { transform: scale(.97); }
.c-action-pill--ok { background: var(--ok-bg); color: var(--ok); }
.c-action-pill--gold { background: var(--gold-soft); color: var(--gold-text); }

/* Progress that grows to its value (positive progress is green). */
.c-grow-bar { height: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.c-grow-bar > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--ok); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--dur-draw, 600ms) var(--ease-out); }
.c-grow-bar.is-pending > span { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .c-grow-bar > span, .c-empty-ring, .c-action-pill { transition: none; animation: none; } }

/* Filtros de invitados con el color de su estado (como los chips de la app) */
.filter-pill.active-confirmed { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.filter-pill.active-pending { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.filter-pill.active-declined { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.filter-pill[data-filter="confirmed"] span { color: var(--ok); } .filter-pill[data-filter="pending"] span { color: var(--warn); } .filter-pill[data-filter="declined"] span { color: var(--err); }
.btn-check:checked + .rsvp-choice-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.rsvp-choice-ok { color: var(--ok); border-color: var(--ok); }