/* ============================================
   Brindis · Base styles, variables, reset
   ============================================ */

:root {
  /* Brand colors — terracota artisanal palette (brief 2026-05-20) */
  /* Primary accent (semantic) */
  --accent: #B85C3D;          /* Terracota — CTAs, brindis, primary accent */
  --accent-dark: #9A4A2E;     /* Hover / pressed states */
  --accent-soft: #E8C5B0;     /* Soft accent backgrounds */
  --accent-tint: #F2D8C6;     /* Even softer accent wash */

  /* Surfaces (semantic) */
  --bg: #FAF6F0;              /* Background principal — crema cálida papel */
  --surface: #F5EFE6;         /* Cards, modales */
  --surface-elevated: #FFFFFF;

  /* Text (semantic) */
  --text: #2C2418;            /* Texto principal — marrón muy oscuro */
  --text-soft: #6B5D4D;       /* Secundario, labels */
  --text-muted: #6F6047;      /* Placeholder, hints — darkened to pass WCAG AA (4.9:1 on cream) [audit #24] */

  /* Border (semantic) */
  --border: #E8DECB;

  /* Accent extra: champagne gold (sparkles, decoración, brindis halo) */
  --gold: #D9B870;            /* Champagne gold — restringido a sparkles/dorado */
  --gold-dark: #C29B4F;
  --gold-light: #F0DBA0;
  /* Legible text color ON a gold fill. Default gold is light, so dark ink.
     App.applyTheme overrides this per theme (white for dark golds). */
  --on-gold: #3A2E22;

  /* Status */
  --success: #7A8B5C;         /* Verde sauce desaturado */
  --danger: #C04A2E;          /* Rojo cálido (no rojo neón) */
  --danger-dark: #9E3B23;     /* Hover de acciones destructivas [audit #39] */

  /* Legacy aliases — kept to avoid breaking app.css / screens.css that
     still reference the old names. Map them onto the new semantic tokens. */
  --burgundy: #7A2F1E;        /* Marrón cálido (era #8B3A3A) */
  --coral: #D9B870;           /* Era coral pink — ahora gold (anti-cliché bodas) */
  --cream: var(--bg);         /* Alias */
  --cream-dark: var(--surface);
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --muted: var(--text-muted);
  --line: var(--border);
  --white: var(--surface-elevated);

  /* Type */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;  /* match the brand wordmark everywhere [audit #14] */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows — warm-tinted (brown, not blue-gray) per brief */
  --shadow-sm: 0 1px 2px rgba(44, 36, 24, 0.06), 0 1px 3px rgba(44, 36, 24, 0.08);
  --shadow-md: 0 4px 12px rgba(44, 36, 24, 0.08), 0 2px 4px rgba(44, 36, 24, 0.06);
  --shadow-lg: 0 12px 32px rgba(44, 36, 24, 0.12), 0 4px 12px rgba(44, 36, 24, 0.08);
  --shadow-focus: 0 0 0 4px rgba(184, 92, 61, 0.25);

  /* Motion */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;

  /* Layout */
  --max-w: 480px;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  /* Paint the warm cream behind the safe areas (notch / home indicator) so the
     native white webview background never shows through as "strips" top/bottom.
     Pairs with ios.contentInset:"never" (webview is full-bleed; CSS owns the
     safe-area padding via env()). [Carlo device QA: white strips]
     Use --bg (#FAF6F0): it matches the welcome screen and the Capacitor
     backgroundColor — --cream-dark was a DIFFERENT beige, so any peek-through
     showed as an off-color strip. */
  background: var(--bg);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  touch-action: manipulation;
  /* Default to NO text-selection on the app canvas / UI chrome. iOS
     Safari otherwise interprets long-press + drag (our pending list
     long-press drag) as text selection and leaves a sticky highlight
     across whatever was under the finger. Inputs + textareas override
     this so the user can still select text in form fields. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow real selection only in editable surfaces. Without this, the
   user can't select inside a text input on iOS once the body-level
   rule above is in place. */
input,
textarea,
[contenteditable="true"],
.allow-select {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* While ANY drag is in progress, kill text selection harder + suppress
   the iOS callout (the "Copy / Look Up" popup). JS toggles .is-dragging
   on body when a guest/table/prop drag begins. */
body.is-dragging,
body.is-dragging * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* App container */
.app {
  position: relative;
  width: 100%;
  /* svh (small viewport height) = the viewport WITH the mobile browser toolbar
     shown — so the shell always fits above iOS Safari's bottom bar. dvh resolves
     to the LARGE viewport on iOS and doesn't relayout reliably when the toolbar
     reappears, which let the collapsed drawer's "N guests to seat" label hide
     behind the Safari bar. env(safe-area-inset-bottom) only covers the home
     indicator (~34px), not the toolbar (~50px), so it couldn't fix this alone.
     On desktop svh == dvh == vh (no toolbar), so no visual change there. */
  height: 100svh;
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(44, 36, 24, 0.04), 0 24px 60px rgba(44, 36, 24, 0.08);
  transition: max-width var(--dur-base) var(--ease);
}

/* On tablets/desktop the app fills the screen in EVERY state (welcome +
   onboarding + main), not just the main canvas. Capping it at phone width left
   a floating "phone card" with beige side bands and clipped the welcome stage
   in iPad portrait. Full-width = no bands, and the welcome stage fits. [Carlo] */
@media (min-width: 641px) {
  .app {
    max-width: none;
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .app {
    box-shadow: none;
  }
}

/* Screens */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.screen.leaving {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-16px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--ink);
  color: var(--cream);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--ink-soft);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--gold);
}

.btn-text {
  background: transparent;
  color: var(--muted);
  padding: 12px 16px;
  font-weight: 500;
}

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

.btn-large {
  padding: 18px 32px;
  font-size: 18px;
  min-width: 200px;
}

.btn-full {
  width: 100%;
}

/* Icon button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  transition: background var(--dur-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--cream-dark);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: absolute;
  top: 0;
  left: 0;
  transition: all var(--dur-fast) var(--ease);
  z-index: 2;
}

.btn-back:hover {
  background: var(--cream);
  border-color: var(--gold);
  transform: translateX(-2px);
}

.btn-back:active {
  transform: scale(0.95);
}

/* Progress dots */
.progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.progress-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: all var(--dur-base) var(--ease);
}

.progress-dots .dot.active {
  background: var(--gold);
  width: 24px;
  border-radius: 4px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px)) + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  opacity: 0;
  transition: all var(--dur-base) var(--ease);
  pointer-events: none;
  /* Long messages (e.g. the password-reset confirmation) must be FULLY readable.
     The old nowrap + ellipsis truncated them to one line so the user never saw
     "check spam / can take a few minutes". Wrap instead. [Carlo 2026-06-15] */
  max-width: min(90%, 440px);
  white-space: normal;
  text-align: center;
  line-height: 1.45;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Sheet (bottom modal) */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 24, 0.5);  /* warm brown backdrop (was cool blue-gray) [audit #38] */
  z-index: 200;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}

.sheet-backdrop.visible {
  opacity: 1;
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: var(--max-w);
  background: var(--cream);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  z-index: 201;
  max-height: 85dvh;
  overflow-y: auto;
  transition: transform var(--dur-base) var(--ease);
  /* max(env, --safe-bottom): same first-paint-env()=0 insurance as the topbar
     (App.refreshSafeArea probes the real inset on a boot timeline). */
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom, 0px));
}

.sheet.visible {
  transform: translateX(-50%) translateY(0);
}

/* Compact sheet — used by the venue image panel after an image is loaded,
   so the user can see the canvas (where the floor map actually lives) while
   they nudge opacity / scale / position. Without this the regular 85dvh
   sheet covered the floor map entirely, making "is it lined up?" answers
   impossible. */
.sheet.sheet-compact {
  max-height: 55dvh;
}
.sheet.sheet-compact .sheet-content {
  padding-top: var(--space-2);
  padding-bottom: var(--space-3);
}
.sheet.sheet-compact .section-title {
  margin-top: 12px;
  margin-bottom: 4px;
}

.sheet-handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 10px auto;
  background: var(--line);
  border-radius: 2px;
}

.sheet-content {
  /* No env() here: .sheet already pads for the home indicator. Both carrying
     env() doubled the compensation (~92px of dead cream under every sheet's
     last button) once v268 made the webview full-bleed — the "sheets float
     above the bottom edge" device-QA bug of 2026-06-11. */
  padding: var(--space-3) var(--space-5) var(--space-5);
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Subtle copy that lives between the sheet title and the content. Used in
   most sheets ("Toca cada tipo…", "Elige una paleta…"). Centralizing here
   stops the inline-style sprinkle in each sheet builder. */
.sheet-subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: -8px 0 14px;
}

/* Utilities */
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* Respect the user's "reduce motion" accessibility preference.
   Kills decorative loops (tilt, candle glow, float, party-mode animations)
   that can trigger vestibular issues. Structural transitions stay short. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
}