/* Admin, asistente, autenticación y superadmin de "Dimos el sí": paleta Jacarandá y
   tipografías de la marca (design/marca/direccion-elegida/tokens.css). Las plantillas de
   invitación no usan este archivo: tienen su propio theme.css.
   - Flor #9372DD solo en las acciones principales, siempre con letra tinta (5.27:1), y
     en tildes, bordes y estados de "sí" (3.69:1 sobre papel: nunca como texto).
   - Hoja #23412F en las zonas oscuras (la barra del admin): papel encima 11.24:1, hoja
     clara 7.24:1 y la tilde en lila 5.86:1.
   - Pétalo #EDE6FA para los fondos suaves (tinta 16.01:1, grafito 5.77:1).
   - Base tinta y papel; errores en rojo alto #B3261E (6.54:1 sobre papel).
   - Radio 0, sin sombras; Archivo (texto y títulos en cartel) y Fragment Mono (plata). */

/* Respaldos calibrados de Archivo (sin saltos mientras carga la fuente) */
@font-face { font-family: "Archivo Poster FB Narrow"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 800; font-stretch: 62%; size-adjust: 85.4%; ascent-override: 103%; descent-override: 24.6%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Poster FB Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 800; font-stretch: 62%; size-adjust: 70%; ascent-override: 125.7%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Text FB Arial"; src: local("Arial"), local("ArialMT"); font-weight: 400 500; font-stretch: 100%; size-adjust: 98%; ascent-override: 89.8%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Text FB Arial"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 800; font-stretch: 100%; size-adjust: 98%; ascent-override: 89.8%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Fragment Mono FB"; src: local("Courier New"), local("CourierNewPSMT"); font-weight: 400; size-adjust: 103%; ascent-override: 92.2%; descent-override: 24.3%; line-gap-override: 0%; }

:root {
  --color-ink: #0D0D0D;
  --color-paper: #FFFFFF;
  --color-go: #9372DD;
  --color-leaf: #23412F;
  --color-leaf-muted: #C5D3C9;
  --color-petal: #EDE6FA;
  --color-lilac: #C4B1F5;
  --color-graphite: #595959;
  --color-hairline: #D4D4D4;
  --color-stop: #B3261E;

  --bg: var(--color-paper);
  --surface: var(--color-paper);
  --surface-2: var(--color-petal);
  --text: var(--color-ink);
  --text-2: var(--color-graphite);
  --placeholder: var(--color-graphite);
  --primary: var(--color-ink);            /* links y estados elegidos (papel encima 19.44:1) */
  --action: var(--color-go);              /* botón principal, con letra tinta (5.27:1) */
  --on-action: var(--color-ink);
  --sidebar: var(--color-leaf);
  --sidebar-active: rgba(255, 255, 255, 0.1);
  --sidebar-text: var(--color-leaf-muted);
  --sidebar-label: var(--color-leaf-muted);
  --sidebar-fg: var(--color-paper);
  --row-selected: var(--color-petal);
  --border-dashed: var(--color-graphite);
  --accent: var(--color-go);              /* solo gráficos: tildes, barras, bordes */
  --accent-dark: var(--color-leaf);       /* textos de acento (11.24:1) */
  --accent-soft-bg: var(--color-petal);
  --accent-soft-fg: var(--color-ink);
  --info-soft-bg: #F2F2F2;                /* tinta 17.6:1, grafito 6.24:1 */
  --info-soft-fg: var(--color-ink);
  --success: var(--color-leaf);
  --danger-soft-bg: #FBEDEA;              /* con rojo alto: 5.73:1 */
  --danger-soft-fg: var(--color-stop);
  --border: var(--color-hairline);        /* filetes decorativos */
  --border-input: var(--color-ink);       /* bordes de campos y botones (19.44:1) */
  --focus: var(--color-ink);
  --font-text: "Archivo", "Archivo Text FB Arial", system-ui, sans-serif;
  --font-display: "Archivo", "Archivo Poster FB Narrow", "Archivo Poster FB Arial", sans-serif;
  --font-money: "Fragment Mono", "Fragment Mono FB", ui-monospace, monospace;
  --stretch-poster: 62%;
  --tilde-ratio: 11 / 7;
  --tilde-shape: polygon(0 100%, 59.09% 100%, 100% 0, 40.91% 0);
  --doubt-shape: polygon(0 100%, 63.64% 100%, 63.64% 0, 0 0);
  --radius-field: 0;
  --radius-card: 0;
  --radius-panel: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* viewport-fit=cover (layout.html): la página llega hasta los bordes del celular y cada
   cosa se aparta de la muesca y de la barra de inicio con env(safe-area-inset-*). */
body {
  margin: 0;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-dark); }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
/* 16 px o más en todo campo: con menos, iOS hace zoom al enfocarlo (y no lo deshace). */
input, textarea, select { font-size: max(1em, 16px); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--color-go); color: var(--color-ink); }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
[x-cloak] { display: none !important; }
.money { font-family: var(--font-money); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius-field);
  background: var(--primary); color: #FFFFFF; text-decoration: none;
}
.skip-link:focus { top: 8px; color: #FFFFFF; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Botones: borde tinta de 2 px; el principal en flor con letra tinta --- */
.btn {
  min-height: 44px; padding: 0 18px; border-radius: var(--radius-field);
  border: 2px solid var(--border-input); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { color: var(--text); background: var(--color-petal); }
.btn--primary { border-color: var(--action); background: var(--action); color: var(--on-action); font-weight: 700; }
.btn--primary:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.btn--accent { border-color: var(--action); background: var(--action); color: var(--on-action); font-weight: 700; }
.btn--accent:hover { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.btn--dashed { border: 2px dashed var(--border-dashed); background: transparent; width: 100%; }
.btn--danger { color: var(--danger-soft-fg); }
.btn--small { min-height: 44px; padding: 0 12px; font-size: 14px; border-radius: 0; }
.btn--icon { min-width: 44px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--surface); color: var(--text); border-color: var(--border-input); }
.btn--primary[disabled]:hover, .btn--primary[aria-disabled="true"]:hover { background: var(--action); color: var(--on-action); border-color: var(--action); }
.btn-link {
  min-height: 44px; padding: 0 4px; border: none; background: none; color: var(--primary);
  text-decoration: underline; cursor: pointer; font-size: inherit;
}

/* --- Campos: etiqueta arriba, borde tinta de 2 px, cursor en flor --- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .field .label, fieldset legend { font-size: 14px; font-weight: 600; color: var(--text); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; border-radius: var(--radius-field);
  border: 2px solid var(--border-input); background: var(--surface);
  padding: 0 12px; font-size: 16px; color: var(--text); caret-color: var(--color-go);
}
.textarea { padding: 12px; resize: vertical; min-height: 88px; line-height: 1.5; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-stop); border-width: 3px; }
.field__error { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-stop); }
.hint { font-size: 14px; color: var(--text-2); }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; border-radius: 0; border: 1px solid var(--border-input);
  background: var(--surface); font-size: 14px; cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-ink); }
fieldset { margin: 0; padding: 0; border: none; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 10px; }
.prefix-input { display: flex; align-items: stretch; min-width: 0; }
.prefix-input span {
  display: inline-flex; align-items: center; padding: 0 10px; border: 2px solid var(--border-input);
  border-right: none; border-radius: var(--radius-field) 0 0 var(--radius-field);
  background: var(--surface-2); color: var(--text); font-size: 14px; white-space: nowrap;
}
.prefix-input .input { border-radius: 0; min-width: 0; }

/* --- Avisos --- */
.form-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); min-height: 20px; }
.form-status--ok { color: var(--success); font-weight: 600; }
.form-status--error { color: var(--danger-soft-fg); font-weight: 600; }
.alert {
  padding: 12px 14px; border-radius: var(--radius-field); font-size: 14px; line-height: 1.5;
  background: var(--info-soft-bg); color: var(--info-soft-fg); border-left: 4px solid var(--color-ink);
}
.alert--error { background: var(--danger-soft-bg); color: var(--danger-soft-fg); border-left-color: var(--color-stop); }
.alert--ok { background: var(--color-petal); color: var(--color-ink); border-left-color: var(--color-go); }
.chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 0; white-space: nowrap;
  background: var(--info-soft-bg); color: var(--info-soft-fg);
}
.chip--gold { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.chip--danger { background: var(--danger-soft-bg); color: var(--danger-soft-fg); }
.chip--ok { background: var(--color-petal); color: var(--color-leaf); }

/* --- Marca: el logo en línea (letras en el color del texto, tilde en flor o lila) --- */
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--color-ink); }
.brand:hover { color: var(--color-ink); }
.brand__logo { display: block; width: 120px; height: auto; flex: none; }
.brand__suffix { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); padding-top: 4px; }
.sidebar .brand, .sidebar .brand:hover { color: var(--sidebar-fg); }
.sidebar .brand__suffix { color: var(--sidebar-text); }
.sidebar .logo__tilde { fill: var(--color-lilac); }

/* --- Autenticación y páginas sueltas (registro, entrar, recuperar, errores) --- */
.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 32px 16px; background: var(--color-paper);
}
.auth__card {
  position: relative; width: 100%; max-width: 440px; background: var(--surface);
  border-top: 2px solid var(--color-ink); padding: 24px 0 0; display: flex; flex-direction: column; gap: 18px;
}
.auth__card::before {
  content: ""; position: absolute; left: 0; top: -7px; width: 19px; aspect-ratio: var(--tilde-ratio);
  background: var(--color-go); clip-path: var(--tilde-shape);
}
.auth__card--wide { max-width: 640px; }
.auth .brand__logo { width: 128px; }
.auth h1 {
  font-family: var(--font-display); font-stretch: var(--stretch-poster); font-weight: 800;
  font-size: 44px; line-height: 0.95; letter-spacing: -0.01em;
}
.auth__lead { color: var(--text-2); font-size: 15px; }
.auth form { display: flex; flex-direction: column; gap: 14px; }
.auth form .btn--primary { min-height: 52px; font-size: 16px; }
.auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; }
.auth__links a { min-height: 44px; display: inline-flex; align-items: center; }
.auth__links--start { justify-content: flex-start; }
/* "Olvidé mi contraseña" justo debajo de la contraseña: en el orden de lectura y de tabulación. */
.auth__forgot { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; margin-top: -8px; font-size: 14px; }
/* Contraseña con el botón "Mostrar" pegado al campo (mismo borde tinta de 2 px). */
.password-input { display: flex; align-items: stretch; min-width: 0; }
.password-input .input { flex: 1 1 auto; min-width: 0; }
.password-input .input:has(+ .password-toggle:not([x-cloak])) { border-right: none; }
.password-toggle {
  flex: none; min-height: 48px; min-width: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--border-input); border-radius: 0; background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.password-toggle:hover, .password-toggle[aria-pressed="true"] { background: var(--color-petal); }
/* "Entrar con un enlace al correo" y "Entrar con Google": las otras formas de entrar, con
   el mismo peso entre sí y un escalón por debajo del botón principal (52 px, 16 px, 700).
   Los separadores son filetes: la única regla de 2 px es la de arriba de la tarjeta. */
.auth__alt { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.auth__alt-text { margin: 0; font-size: 14px; color: var(--text-2); }
.auth__alt .btn, .btn--google { min-height: 48px; font-size: 15px; font-weight: 600; }
.auth__divider { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn--google { gap: 10px; text-decoration: none; }

/* --- Layout del admin: barra en hoja --- */
.admin { min-height: 100vh; min-height: 100dvh; display: flex; flex-wrap: wrap; }
.sidebar {
  flex: 1 1 240px; max-width: 100%; background: var(--sidebar); color: var(--sidebar-fg);
  padding: 24px 18px; display: flex; flex-direction: column; gap: 28px;
}
.sidebar__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sidebar__body { display: flex; flex-direction: column; gap: 28px; }
.sidebar__label { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sidebar-label); }
.sidebar__weddings { display: flex; flex-direction: column; gap: 8px; }
.wedding-link {
  display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 0;
  color: var(--sidebar-fg); text-decoration: none; border-left: 2px solid transparent;
}
.wedding-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--sidebar-fg); }
.wedding-link[aria-current="true"] { background: var(--sidebar-active); border-left-color: var(--color-lilac); }
.wedding-link__name { font-size: 15px; font-weight: 700; }
.wedding-link__meta { font-size: 14px; color: var(--sidebar-text); }
.new-wedding {
  min-height: 44px; border-radius: 0; border: 2px dashed var(--sidebar-text);
  background: transparent; color: var(--sidebar-fg); font-size: 14px; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.new-wedding:hover { color: var(--sidebar-fg); border-color: var(--sidebar-fg); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  min-height: 44px; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 0 12px; border-radius: 0; color: var(--sidebar-text); text-decoration: none; font-size: 14px;
}
.nav a::before {
  content: ""; flex: none; width: 14px; aspect-ratio: var(--tilde-ratio);
  background: transparent; clip-path: var(--tilde-shape);
}
.nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--sidebar-fg); }
/* La sección activa lleva la tilde (en lila sobre la hoja) y un subrayado de 2 px */
.nav a[aria-current="page"] {
  color: var(--sidebar-fg); font-weight: 700; background: var(--sidebar-active);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.nav a[aria-current="page"]::before { background: var(--color-lilac); }
.nav__soon { margin-left: auto; font-size: 14px; color: var(--sidebar-label); }
.nav a[aria-current="page"] .nav__soon { color: var(--sidebar-fg); }
.sidebar__account { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--sidebar-text); overflow-wrap: anywhere; }
.sidebar__account a, .sidebar__account button {
  color: var(--sidebar-fg); background: none; border: none; padding: 0; min-height: 44px;
  text-align: left; cursor: pointer; text-decoration: underline; font-size: 14px;
}
.sidebar :focus-visible { outline-color: var(--sidebar-fg); }

.main {
  flex: 999 1 560px; min-width: 0; padding: 32px; display: flex; flex-direction: column; gap: 24px;
}
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.page-head__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-head h1 {
  font-family: var(--font-display); font-stretch: var(--stretch-poster); font-size: 44px; font-weight: 800;
  line-height: 0.95; letter-spacing: -0.01em; overflow-wrap: anywhere;
}
.page-head__sub { font-size: 14px; color: var(--text-2); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Avisos de página: campo papel entre reglas de 2 px, con la tilde marcando el inicio */
.banner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-radius: var(--radius-card); font-size: 14px; line-height: 1.5;
  background: var(--color-paper); color: var(--color-ink); border: 0; border-block: 2px solid var(--color-ink);
}
.banner::before {
  content: ""; position: absolute; left: 0; top: -7px; width: 19px; aspect-ratio: var(--tilde-ratio);
  background: var(--color-go); clip-path: var(--tilde-shape);
}
.banner--info::before { background: var(--color-ink); clip-path: var(--doubt-shape); }
.banner--danger { color: var(--color-stop); border-color: var(--color-stop); }
.banner--danger::before { background: var(--color-stop); clip-path: var(--doubt-shape); }
.banner__text { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.banner__text > svg { flex: none; }
.banner .chip { background: var(--color-petal); }
.banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.card {
  background: var(--surface-2); border: 0; border-radius: var(--radius-card);
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.card__label { font-size: 14px; font-weight: 600; color: var(--text); }
.card__value {
  font-family: var(--font-display); font-stretch: var(--stretch-poster); font-size: 48px; font-weight: 800;
  line-height: 0.92; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums;
}
.card__value small { font-size: 22px; color: var(--text-2); }
.card__note { font-size: 14px; color: var(--text-2); }
/* 32 px desde 390 de ancho; a 320, en dos columnas, «Publicada» entra en su tarjeta. */
.card__value--text { font-size: clamp(24px, 8.2vw, 32px); overflow-wrap: break-word; }
.card__action { align-self: flex-start; margin-top: 4px; background: var(--surface); }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps li { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 0 12px; border-top: 1px solid var(--border); }
.steps li:first-child { border-top: none; padding-top: 0; }
.steps a, .steps strong { font-weight: 700; min-height: 24px; }
.steps a { display: inline-flex; align-items: center; min-height: 44px; }  /* objetivo táctil de 44 px */
.steps span { font-size: 14px; color: var(--text-2); }

/* Paneles: una regla de 2 px arriba, sin caja (radio 0, sin sombras) */
.panel {
  background: var(--surface); border: 0; border-top: 2px solid var(--color-ink); border-radius: var(--radius-panel);
  padding: 20px 0 0; display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.panel__head > div { display: flex; flex-direction: column; gap: 4px; }
.panel__head > .row-actions { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.panel h2 { font-size: 19px; font-weight: 700; }
.panel__lead { font-size: 14px; color: var(--text-2); }
.panel--muted { background: var(--surface-2); padding: 20px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.upcoming { align-items: flex-start; }
.upcoming__icon { color: var(--accent-dark); }

/* --- Programa --- */
.moments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.moment { border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.moment.is-dragging { opacity: 0.6; border-color: var(--accent); }
.moment__head { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.moment__handle {
  min-width: 44px; min-height: 44px; border: none; background: transparent; color: var(--text-2);
  cursor: grab; touch-action: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0; margin: -6px 0 -6px -6px;
}
.moment__handle:active { cursor: grabbing; }
.moment__info-wrap { display: contents; }
.moment__time {
  font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--accent-dark);
  line-height: 1; min-width: 64px; padding-top: 4px; font-variant-numeric: lining-nums;
}
.moment__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.moment__title { font-size: 15px; font-weight: 700; }
.moment__place { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.moment__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.moment__chips .chip { white-space: normal; }
.moment__tools { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.moment__form {
  border-top: 1px solid var(--border); padding: 16px 14px; display: flex; flex-direction: column; gap: 16px;
  background: var(--surface-2); border-radius: 0;
}
.moment__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.new-moment { border: 1px dashed var(--border-dashed); border-radius: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* --- Colaboradores --- */
.members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.member {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.member:first-child { border-top: none; }
.member__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.member__name { font-weight: 700; overflow-wrap: anywhere; }
.member__email { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.member__side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.invite-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.invite-form .field { flex: 1 1 240px; }

/* --- Tablas (superadmin) --- */
.table-wrap { position: relative; overflow-x: auto; border: 0; border-top: 2px solid var(--color-ink); border-radius: 0; }  /* relative: los .sr-only no ensanchan la página */
.table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14px; }
.table th { background: var(--surface); text-align: left; padding: 12px 14px; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--color-ink); }
.table td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: middle; }
.table .num { font-family: var(--font-money); font-variant-numeric: tabular-nums; }
.extend-form { display: flex; gap: 6px; align-items: center; }
.extend-form .input { width: 72px; }

.main--wide { max-width: 1280px; margin: 0 auto; width: 100%; }

/* --- Pastillas (radios y botones con estado) --- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-opt { position: relative; display: inline-flex; }
.pill-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pill-opt span, .pill-btn {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 0;
  border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font-size: 14px;
}
.pill-btn { cursor: pointer; }
.pill-opt input:checked + span, .pill-btn[aria-pressed="true"] {
  background: var(--primary); color: #FFFFFF; border-color: var(--primary);
}
.pill-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.pill-opt--filter span { min-height: 44px; padding: 0 14px; font-size: 14px; }
.pill-opt--filter input:checked + span { background: var(--sidebar); border-color: var(--sidebar); }

/* --- Invitados --- */
.alert--warn { background: var(--accent-soft-bg); color: var(--accent-soft-fg); }
.alert--actions { display: flex; flex-direction: column; gap: 10px; }
.alert--actions p { margin: 0; }
.alert__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alert__actions .btn { background: var(--surface); }
.chip--inline { margin-left: 8px; }
.chip--info { background: var(--info-soft-bg); color: var(--info-soft-fg); }
.filters { display: flex; flex-direction: column; gap: 12px; }
.filters__search { max-width: 420px; }
.table--guests { min-width: 960px; }  /* cabe entero a 1280 px (976 px útiles junto a la barra) */
.table--guests td { padding: 8px 14px; }
.table--guests tr.is-selected td { background: var(--row-selected); }
.cell-name { font-weight: 500; white-space: nowrap; }
.cell-muted { color: var(--text-2); }
.nowrap { white-space: nowrap; }
.row-actions--end { justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }
.btn--outline-primary { border-color: var(--primary); color: var(--primary); }
.btn--copy { min-width: 88px; }
.subpanel {
  border: 1px dashed var(--border-dashed); border-radius: 0; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.subpanel__title { font-size: 15px; font-weight: 700; }
.import-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.import-form .field { flex: 1 1 260px; }
.input--file { padding: 9px 12px; }
.table--import { min-width: 760px; }
.row-error td { background: var(--danger-soft-bg); }
.cell-error { color: var(--danger-soft-fg); }

.panel--editor { border-top-color: var(--accent); border-top-width: 4px; gap: 20px; scroll-margin-top: 16px; }
.editor-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.editor-head__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.editor-head__titles h2 { font-size: 22px; overflow-wrap: anywhere; }
.editor-head__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.eyebrow { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); }
.autosave-note { font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.editor-cols { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.editor-main { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.editor-form, .editor-fields { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; border: none; min-width: 0; }
.field-label { font-size: 14px; color: var(--text-2); }
.kind-box { display: flex; flex-direction: column; gap: 10px; }
.members-box {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.member-chip {
  min-height: 36px; display: inline-flex; align-items: center; gap: 2px; padding-left: 14px; border-radius: 0;
  background: var(--surface); border: 1px solid var(--border-input); font-size: 14px;
}
.member-chip--holder { padding-right: 14px; background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.member-chip__remove {
  width: 44px; height: 36px; border: none; background: transparent; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 0;
}
.add-member { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.add-member .field { flex: 1 1 200px; }

.guest-preview { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mini-invite {
  background: #0D1230; color: #F3EEE4; border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.mini-invite__top { display: flex; justify-content: space-between; align-items: center; }
.mini-invite__pill {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #B8B5CC;
  border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 999px; padding: 5px 10px;
}
.mini-invite__kanji { font-size: 18px; color: #C9A45C; }
.mini-invite__greeting { margin-top: 8px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 28px; line-height: 1.15; }
.mini-invite__text { font-size: 14px; color: #DCD8E8; line-height: 1.6; }
.mini-invite__people {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(201, 164, 92, 0.3);
  display: flex; flex-direction: column; gap: 10px;
}
.mini-invite__small { font-size: 12px; color: #B8B5CC; }
.mini-invite__person { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.mini-invite__yn { display: flex; gap: 6px; }
.mini-invite__yn span { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(243, 238, 228, 0.35); font-size: 12px; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.link-code {
  flex: 1 1 200px; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 0;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; overflow-wrap: anywhere;
}
.wa-bubble {
  padding: 14px; border-radius: 0; background: #E7F6E9; color: #14361B;
  font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;
}

/* --- Invitación (admin) --- */
.two-cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.two-cols__main { flex: 3 1 420px; }
.two-cols__side { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.field--check { justify-content: flex-end; }
.upload-box {
  border: 1px dashed var(--border-dashed); border-radius: 0; padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.upload-box__img { width: 140px; height: auto; aspect-ratio: 280 / 360; object-fit: cover; border-radius: 0; }
.upload-box__title { font-size: 14px; font-weight: 500; }
/* Portada de ejemplo de la plantilla mientras la pareja no sube su foto. */
.upload-box__example { margin: 0; max-width: 32ch; font-size: 14px; font-weight: 600; color: var(--text); text-wrap: pretty; }
.upload-box__form label { cursor: pointer; }
.upload-box__form:focus-within label { outline: 3px solid var(--focus); outline-offset: 3px; }
.design-form { display: flex; flex-direction: column; gap: 18px; }
.swatches { display: flex; gap: 12px; }
.swatch { position: relative; display: inline-flex; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch__dot { width: 44px; height: 44px; border-radius: 0; border: 1px solid var(--border-input); box-sizing: border-box; }
.swatch input:checked + .swatch__dot { border: 3px solid var(--text); }
.swatch input:focus-visible + .swatch__dot { outline: 3px solid var(--focus); outline-offset: 3px; }
.card--warn, .card--full { border-color: #EADBB8; }
.card--over { border-color: #F1D2CB; }

/* --- Asistente "Crear mi web" y "Cambiar diseño" --- */
.wizard { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wizard__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 24px; background: var(--surface); border-bottom: 2px solid var(--color-ink);
}
/* Los botones de la cabecera ("Mis diseños", "Volver al admin") con aire entre ellos;
   en el celular bajan juntos a una fila propia, sin chocar con el logo. */
.wizard__head-side { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.wizard__main {
  flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px; display: flex; flex-wrap: wrap;
  gap: 28px; align-items: flex-start;
}
.wizard__content { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wizard__preview { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; align-items: center; position: sticky; top: 16px; }
.wizard__steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wizard__steps li a, .wizard__steps li > span {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 8px; border-radius: 0;
  font-size: 14px; color: var(--text-2); text-decoration: none; background: var(--surface); border: 2px solid transparent;
}
.wizard__steps li.is-done a { color: var(--text); border-color: var(--color-ink); }
.wizard__steps li.is-current > span { background: var(--primary); color: #FFFFFF; border-color: var(--primary); }
.wizard__num {
  width: 26px; height: 26px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px;
}
.wizard__steps li.is-current .wizard__num { background: var(--accent); color: var(--text); }
.wizard__card {
  background: var(--surface); border: 0; border-top: 2px solid var(--color-ink); border-radius: 0; padding: 24px 0 0;
  display: flex; flex-direction: column; gap: 18px;
}
/* El título del asistente en cartel, como "Crea tu cuenta": el paso del registro a crear la
   web no cambia de voz. */
.wizard__title {
  font-family: var(--font-display); font-stretch: var(--stretch-poster); font-weight: 800;
  font-size: 40px; line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance;
}
.wizard__form { display: flex; flex-direction: column; gap: 18px; }
.wizard__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; }
.wizard__actions > .btn { white-space: nowrap; }
.span-all { grid-column: 1 / -1; }

.frame-box { position: relative; overflow: hidden; border-radius: 0; border: 2px solid var(--color-ink); background: var(--surface-2); flex: none; }
.frame { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #FFFFFF; }
.frame-box--preview { width: 300px; height: 650px; }
.frame--preview { width: 390px; height: 844px; transform: scale(0.769); }
.frame-box--thumb { width: 160px; height: 287px; }
.frame--thumb { width: 390px; height: 700px; transform: scale(0.41); pointer-events: none; }
.frame-box--proposal { width: 218px; height: 437px; }
.frame--proposal { width: 390px; height: 780px; transform: scale(0.559); pointer-events: none; }
.frame-box--compare { width: 312px; height: 720px; }
.frame--compare { width: 390px; height: 900px; transform: scale(0.8); }
.frame-box--version { width: 117px; height: 210px; }
.frame--version { width: 390px; height: 700px; transform: scale(0.3); pointer-events: none; }

.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.style-card { position: relative; display: block; cursor: pointer; }
.style-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.style-card__body {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 0;
  border: 2px solid var(--border-input); background: var(--surface); text-align: center; height: 100%; box-sizing: border-box;
  position: relative;
}
.style-card input:checked + .style-card__body,
.mode-card input:checked + .mode-card__body { border-color: var(--color-ink); background: var(--color-petal); box-shadow: inset 0 0 0 1px var(--color-ink); }
.style-card input:checked + .style-card__body::after,
.mode-card input:checked + .mode-card__body::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 19px; aspect-ratio: var(--tilde-ratio);
  background: var(--color-go); clip-path: var(--tilde-shape);
}
.style-card input:checked + .style-card__body::after { top: auto; bottom: 14px; }  /* junto al nombre, no sobre la miniatura */
.style-card input:focus-visible + .style-card__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.style-card__label { font-weight: 700; font-size: 14px; }
.style-card__meta { font-size: 14px; color: var(--text-2); }
.style-card--soon { cursor: default; }
.style-card--soon .style-card__body { border-style: dashed; border-color: var(--border-dashed); }
.style-card__soon-box { background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--surface) 10px 20px); }

.palette-list { display: flex; flex-wrap: wrap; gap: 10px; }
.palette-opt { position: relative; display: inline-flex; }
.palette-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.palette-opt__body {
  min-height: 52px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px 0 10px; border-radius: 0;
  border: 2px solid var(--border-input); background: var(--surface); font-size: 14px;
}
.palette-opt input:checked + .palette-opt__body { border-color: var(--primary); }
.palette-opt input:focus-visible + .palette-opt__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.palette-opt__dots { display: inline-flex; }
.palette-opt__dots span { width: 26px; height: 26px; border-radius: 0; border: 1px solid var(--border-input); }
.palette-opt__dots span + span { margin-left: -8px; }
.custom-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 14px; }
.input--color { padding: 4px; height: 52px; cursor: pointer; }
.section-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.check--block { width: 100%; border-radius: 0; box-sizing: border-box; }
.check--block .hint { flex-basis: 100%; padding: 0 0 8px 26px; margin-top: -6px; }  /* sección activa sin contenido */
.check--block:has(.hint) { flex-wrap: wrap; }

.proposal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.proposal { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.proposal form { width: 100%; display: flex; justify-content: center; }
.proposal__tag { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); }
.proposal__label { font-size: 14px; font-weight: 700; }

.compare { width: 100%; max-width: 1000px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.compare__grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.compare__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.compare__title { font-size: 18px; font-weight: 700; }
.compare__apply {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--surface); padding: 20px;
  border: 1px solid var(--border); border-radius: var(--radius-panel);
}
.compare__apply .field { flex: 1 1 260px; }
.version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.version { display: flex; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 0; }
.version__info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.version__label { font-weight: 700; }

/* Diseño automático o manual y «Mis diseños» */
.question { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.wizard__form fieldset + fieldset { margin-top: 6px; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mode-card { position: relative; display: block; cursor: pointer; }
.mode-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.mode-card__body {
  display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 18px;
  border: 2px solid var(--border-input); border-radius: 0; background: var(--surface); position: relative;
}
.mode-card input:focus-visible + .mode-card__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.mode-card__icon { color: var(--primary); }
.mode-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.mode-card__text { font-size: 14px; color: var(--text-2); }
.style-card__surprise { display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--info-soft-bg); }
.look-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.look-opt { position: relative; display: block; cursor: pointer; }
.look-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.look-opt__body {
  display: flex; flex-direction: column; gap: 2px; min-height: 64px; justify-content: center; box-sizing: border-box;
  padding: 10px 44px 10px 14px; border: 2px solid var(--border-input); border-radius: 0; background: var(--surface); font-size: 14px;
}
.look-opt__body span { font-size: 14px; color: var(--text-2); }
/* Elegida: no solo el pétalo (1.2:1 con el papel no basta para ver el estado). Borde de
   3 px (el relleno baja 1 px y nada se mueve) y la tilde en flor, la marca del sí. */
.look-opt input:checked + .look-opt__body { border-width: 3px; padding: 9px 43px 9px 13px; border-color: var(--color-ink); background: var(--color-petal); }
.look-opt input:checked + .look-opt__body::after {
  content: ""; position: absolute; top: 12px; right: 14px; width: 19px; aspect-ratio: var(--tilde-ratio);
  background: var(--color-go); clip-path: var(--tilde-shape);
}
.look-opt input:focus-visible + .look-opt__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.proposal form + form { margin-top: -2px; }
.review-list { margin: 0; display: flex; flex-direction: column; border: 0; border-top: 2px solid var(--color-ink); border-radius: 0; }
.review-list__row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; }
.review-list__row + .review-list__row { border-top: 1px solid var(--border); }
.review-list dt { font-size: 14px; color: var(--text-2); }
.review-list dd { margin: 0; }
.review-list a { display: inline-flex; align-items: center; min-height: 44px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.review-save { display: flex; flex-direction: column; gap: 12px; }
.saved-strip { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.saved-strip__title { font-size: 16px; font-weight: 700; }
.saved-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.saved-strip__item { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: 0; }
.saved-strip__info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.design-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.design-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.design-card.is-current { border: 2px solid var(--primary); }
.design-card__info { width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.design-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.design-card__actions form { display: contents; }
.design-name { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.design-name .input { font-weight: 700; }
.design-card--choice { position: relative; cursor: pointer; align-items: stretch; }
.design-card--choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.design-card__choice-body { display: flex; gap: 12px; align-items: center; }
.design-card--choice:has(input:checked) { border: 2px solid var(--primary); background: var(--color-petal); }
.design-card--choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.callout { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 0; background: var(--accent-soft-bg); color: var(--accent-soft-fg); margin-bottom: 16px; }
.callout p { margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form .input { flex: 1 1 220px; }

/* La boda en una pantalla y "Completa tu boda" (tanda 3b) */
.wizard__switch { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.wizard__switch p { margin: 0; }
.start__errors-title { margin: 0 0 6px; font-weight: 700; }
.start__errors { margin: 0; padding-left: 18px; }
/* Cada enlace del resumen lleva al campo: objetivo de 44 px como el resto. */
.start__errors a { display: inline-flex; align-items: center; min-height: 44px; color: var(--danger-soft-fg); font-weight: 600; }
/* La ayuda y el error bajo las pastillas, con aire (antes quedaban pegados). */
.pills + .hint { display: block; margin-top: 8px; }
fieldset > .field__error { margin-top: 6px; }
.start__design { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 2px solid var(--color-ink); }
.start__design p { margin: 0; }
.start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 8px; }
.start__actions .btn--primary { min-height: 52px; padding: 0 28px; font-size: 16px; }
.start__figure { margin: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; max-width: 232px; text-align: center; }
.start__figure img { display: block; width: 232px; max-width: 100%; height: auto; border: 2px solid var(--color-ink); }
.label-note { font-weight: 400; color: var(--text-2); }
.setup-block { margin: 0; padding: 16px 0 0; border: none; border-top: 2px solid var(--color-ink); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.setup-block > legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 17px; font-weight: 700; }
.setup-block > legend + * { clear: left; }
.setup-block fieldset { margin: 0; padding: 0; border: none; min-width: 0; }
.setup-block__sub { padding: 0; margin-bottom: 8px; }
.setup-time { max-width: 220px; }
.setup-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.setup-photo p { margin: 0; max-width: 36ch; text-wrap: pretty; }
.setup-photo__img { width: 120px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--color-ink); }

/* A 360 px "Saltar este paso" y "Guardar y seguir" no caben lado a lado: bajan a dos filas
   de todo el ancho (el principal abajo, al alcance del pulgar) en vez de partir su texto. */
@media (max-width: 479px) {
  .wizard__actions { flex-wrap: wrap; }
  .wizard__actions > .btn { flex: 1 1 auto; }
  .wizard__actions > span:empty { display: none; }  /* el relleno de "sin Atrás" */
  .wizard__title { font-size: 36px; }
}

@media (max-width: 767px) {
  .wizard__main, .compare { padding: 16px; }
  .wizard__card { padding: 20px 0 0; }
  .wizard__preview { position: static; flex-basis: 100%; }
  /* En móvil solo se ve el nombre del paso actual; los demás siguen para el lector. */
  .wizard__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wizard__steps li.is-current .wizard__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .review-list__row { grid-template-columns: 1fr auto; }
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .style-grid .style-card__body { padding: 10px 8px; }
  .style-grid .frame-box--thumb { width: 116px; height: 208px; }
  .style-grid .frame--thumb { transform: scale(0.2974); }
  .review-list__row dt { grid-column: 1 / -1; }
}

/* --- Secciones opcionales (admin) --- */
.section-list--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.section-editor { border: 1px solid var(--border); border-radius: 0; padding: 0 16px; }
.section-editor[open] { padding-bottom: 16px; }
.section-editor summary {
  min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 15px;
}
.section-editor__form { display: flex; flex-direction: column; gap: 12px; }
.list-item {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 0;
  background: var(--surface-2); border: 1px solid var(--border);
}
.list-item .btn { align-self: flex-start; }
.section-photos { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.section-photos form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.section-photos form label { cursor: pointer; }
.section-photos form:focus-within label { outline: 3px solid var(--focus); outline-offset: 3px; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.photo-grid__item { display: flex; flex-direction: column; gap: 6px; }
.photo-grid__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; }

/* --- Mesa de regalos y Pagos (admin) --- */
.gift-admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gift-admin {
  display: flex; flex-wrap: wrap; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 0;
}
.gift-admin--hidden { background: var(--surface-2); opacity: 0.75; }
.gift-admin__media {
  width: 96px; height: 96px; border-radius: 0; overflow: hidden; background: var(--surface-2); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-2);
}
.gift-admin__media img { width: 100%; height: 100%; object-fit: cover; }
.gift-admin__form { flex: 3 1 320px; min-width: 0; }
.gift-admin__side { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.gt-bar-admin { height: 8px; border-radius: 0; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.gt-bar-admin span { display: block; height: 100%; background: var(--accent); }
.upload-inline { display: inline-flex; }
.upload-inline label { cursor: pointer; }
.upload-inline:focus-within label { outline: 3px solid var(--focus); outline-offset: 3px; }
.filters--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filters--row .field { flex: 1 1 180px; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.review { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 0; }
.review--done { background: var(--surface-2); }
.review__shot { width: 120px; flex: none; border-radius: 0; overflow: hidden; border: 1px solid var(--border); }
.review__shot img { width: 100%; height: 180px; object-fit: cover; display: block; }
.review__info { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.review__title { font-weight: 700; }
/* Pago del carrito: sus regalos con la parte de cada uno (en Pagos y en Aportes). */
.review__gifts, .cell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.review__gifts li { overflow-wrap: anywhere; }
.qr-preview { width: 140px; height: 140px; object-fit: contain; background: #FFFFFF; border-radius: 0; }
.field--narrow { max-width: 120px; }

/* Switch (design/admin.dc.html): pista de 46 × 26, objetivo táctil de 44 px */
.switch {
  min-height: 44px; min-width: 52px; padding: 0; border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 0;
}
.switch__track {
  width: 46px; height: 26px; border-radius: 0; background: var(--color-graphite); padding: 3px;
  display: flex; align-items: center; justify-content: flex-start; transition: background 0.15s;
}
.switch__knob { width: 20px; height: 20px; border-radius: 0; background: #FFFFFF; }
.switch[aria-checked="true"] .switch__track { background: var(--color-go); justify-content: flex-end; }
.switch:disabled { cursor: not-allowed; opacity: 0.55; }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch-list { display: flex; flex-direction: column; }
.switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; }
.switch-list .switch-row + .switch-row { border-top: 1px solid var(--border); }
.switch-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.switch-row__title { font-size: 15px; font-weight: 700; }
.switch-row__desc { font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* Subnavegación (Mi mesa · Lista de regalos) */
.subnav { display: flex; flex-wrap: wrap; gap: 0; padding: 0; background: var(--surface); border: 0; border-bottom: 2px solid var(--color-ink); border-radius: 0; align-self: flex-start; }
.subnav__link {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 0;
  color: var(--text); text-decoration: none; font-size: 14px;
}
.subnav__link:hover { background: var(--surface-2); color: var(--text); }
.subnav__link[aria-current="page"] { background: var(--primary); color: #FFFFFF; font-weight: 700; }

/* Dedicatorias (Invitados → Dedicatorias) */
.dedication-results { display: flex; flex-direction: column; gap: 12px; }
.dedication-admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dedication-admin {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--surface); min-width: 0;
}
.dedication-admin--hidden { background: var(--surface-2); border-style: dashed; border-color: var(--border-dashed); }
.dedication-admin__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 12px; }
.dedication-admin__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dedication-admin__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dedication-admin__text { font-size: 15px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }

/* Fotos de invitados (Invitación → Fotos de invitados) */
.guest-photos-link { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.guest-photos-link__qr {
  width: 176px; flex: none; padding: 6px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 0;
}
.guest-photos-link__qr svg { display: block; width: 100%; height: auto; }
.guest-photos-link__info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.guest-photo-results, .guest-photo-results__form { display: flex; flex-direction: column; gap: 12px; }
.guest-photo-batch { align-items: center; }
.guest-photo-admin-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.guest-photo-admin {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface);
}
.guest-photo-admin--hidden { background: var(--surface-2); border-style: dashed; border-color: var(--border-dashed); }
.guest-photo-admin--hidden img { opacity: 0.6; }
.guest-photo-admin__media { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); }
.guest-photo-admin__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guest-photo-admin__body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.guest-photo-admin__head { display: flex; align-items: flex-start; gap: 4px; }
.guest-photo-admin__pick {
  flex: none; width: 44px; height: 44px; margin: -10px 0 0 -12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.guest-photo-admin__pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }
.guest-photo-admin__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guest-photo-admin__name { font-weight: 700; overflow-wrap: anywhere; }

/* Preguntas de la confirmación (Invitados → Preguntas) */
.questions-panel { display: flex; flex-direction: column; gap: 24px; }
.question-fields { display: flex; flex-direction: column; gap: 16px; }
.question-fields .check { align-self: flex-start; }
.moment--off { background: var(--surface-2); border-style: dashed; border-color: var(--border-dashed); }
.question-examples .btn { height: auto; padding-top: 8px; padding-bottom: 8px; text-align: left; }
.answer-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.answer-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--surface); min-width: 0;
}
.answer-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.answer-card__title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.answer-bars, .answer-texts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.answer-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.answer-bar__label { overflow-wrap: anywhere; }
.answer-bar__count { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.answer-bar__track {
  grid-column: 1 / -1; height: 8px; border-radius: 0; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.answer-bar__track span { display: block; height: 100%; background: var(--primary); }
.answer-texts { gap: 6px; font-size: 14px; }
.answer-texts li { overflow-wrap: anywhere; }
.answer-texts__name { font-weight: 700; }
.answer-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--primary); font-size: 14px; }
.guest-answers { margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.guest-answers > div { display: flex; flex-direction: column; gap: 2px; }
.guest-answers dt { font-size: 14px; color: var(--text-2); }
.guest-answers dd { margin: 0; overflow-wrap: anywhere; }

/* Lista de regalos */
.catalog-filters { display: flex; flex-direction: column; gap: 16px; }
.catalog-filters__search { max-width: 480px; }
.pill-count { font-size: 14px; opacity: 0.8; margin-left: 6px; font-variant-numeric: tabular-nums; }
.catalog-filters .filters--row .field { flex: 1 1 140px; }
@media (max-width: 767px) {
  /* En el celular las categorías se deslizan en una sola fila (sin scroll de página). */
  .catalog-filters .pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }
  .catalog-filters .pill-opt { flex: none; }
}
.catalog-results { display: flex; flex-direction: column; gap: 12px; }
.catalog-results__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.catalog-results__head p { margin: 0; }
.catalog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.catalog-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--surface);
}
.catalog-card.is-on { border-color: var(--accent); background: var(--row-selected); }
.catalog-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.catalog-card__icon {
  width: 48px; height: 48px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft-bg); color: var(--accent-soft-fg);
}
.catalog-card__toggle { display: inline-flex; align-items: center; gap: 4px; }
.catalog-card__switch-label { font-size: 14px; color: var(--text-2); }
.catalog-card__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.catalog-card__desc { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); flex: 1; }
.catalog-card__foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.catalog-card__price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.catalog-card__price-form { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); }
.catalog-card__price-form .input { max-width: 160px; }
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px dashed var(--border-dashed); border-radius: var(--radius-card); }
.empty-state p { margin: 0; }

/* Correos (design/admin.dc.html, sección "Correos automáticos") */
.email-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.email-card {
  border: 1px solid var(--border); border-radius: 0; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.email-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.email-card__title { font-size: 15px; font-weight: 700; }
.email-card__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.email-card__days { display: flex; align-items: center; gap: 10px; }
.email-card__days-input { width: 72px; }
.email-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; min-height: 44px; }
.email-preview { border: 2px solid var(--color-ink); border-radius: 0; overflow: hidden; background: #F4F5F9; }
.email-preview iframe { display: block; width: 100%; height: 640px; border: 0; background: #F4F5F9; }
.email-history { display: flex; flex-direction: column; gap: 10px; }
.email-history p { margin: 0; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.quota-bar { height: 8px; border-radius: 0; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; max-width: 420px; }
.quota-bar span { display: block; height: 100%; background: var(--primary); }
.quota-bar--alert span { background: var(--danger-soft-fg); }

/* --- Home provisional --- */
.home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 16px; text-align: center; }
.home h1 { font-family: var(--font-display); font-stretch: var(--stretch-poster); font-size: 48px; font-weight: 800; line-height: 0.95; letter-spacing: -0.01em; }
.home p { color: var(--text-2); max-width: 460px; }

@media (max-width: 767px) {
  .admin { align-content: flex-start; }  /* la barra no se estira en páginas cortas */
  .sidebar { padding: 16px; gap: 0; }
  /* "Más" abre la barra como una hoja sobre el menú de abajo, al alcance del pulgar. */
  .sidebar__body {
    position: fixed; left: 0; right: 0; z-index: 41;
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    max-height: calc(100vh - var(--tabbar-height) - 48px); max-height: calc(100dvh - var(--tabbar-height) - 48px); overflow-y: auto;
    padding: 20px calc(16px + env(safe-area-inset-right)) 20px calc(16px + env(safe-area-inset-left));
    background: var(--sidebar); border-top: 2px solid var(--color-lilac);
  }
  .sidebar__body[data-open="false"] { display: none; }
  .main { padding: 20px 16px calc(40px + var(--tabbar-height) + env(safe-area-inset-bottom)); gap: 20px; }
  .page-head h1 { font-size: 38px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 14px; }
  .panel { padding: 16px 0 0; }
  .panel--muted { padding: 16px; }
  .moment__head { flex-wrap: wrap; }
  .moment__tools { width: 100%; justify-content: flex-start; }
}

/* --- Membresía (admin) --- */
.benefits { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: 14px; }
.membership-form { display: flex; flex-direction: column; gap: 22px; }
.membership-step { display: flex; flex-direction: column; gap: 14px; }
.membership-step > legend { font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.membership-pay { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.membership-pay p { margin: 0; }
.field__label { font-size: 14px; color: var(--text-2); margin-bottom: 6px; }
.quote { max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.quote__rows { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 0; }
.quote__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.quote__rows > div + div { border-top: 1px solid var(--border); }
.quote__rows dt { color: var(--text-2); font-size: 14px; }
.quote__rows dd { margin: 0; font-variant-numeric: tabular-nums; }
.quote__discount dd { color: var(--success); }
.quote__total dt, .quote__total dd { color: var(--text); font-weight: 700; }
.detail-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.detail-list > div { display: flex; flex-direction: column; gap: 2px; }
.detail-list dt { font-size: 14px; color: var(--text-2); }
.detail-list dd { margin: 0; font-size: 15px; }

/* --- Superadmin --- */
.subnav--wide { align-self: stretch; border-radius: 0; }
.subnav__badge { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; align-items: center; justify-content: center; border-radius: 0; background: var(--accent); color: var(--text); font-size: 14px; font-weight: 700; }
.table--superadmin { min-width: 1100px; }
.table--compact { min-width: 0; }
.action-menu { position: relative; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu[open] > summary { outline: 2px solid var(--accent); outline-offset: -2px; }
.action-menu__form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 280px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0;
}
.table-wrap .action-menu__form { position: static; width: 260px; margin-top: 6px; box-shadow: none; }
.suffix-input { display: flex; align-items: stretch; min-width: 0; }
.suffix-input .input { border-radius: var(--radius-field) 0 0 var(--radius-field); min-width: 0; }
.suffix-input span {
  display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--border-input);
  border-left: none; border-radius: 0; background: var(--surface-2); color: var(--text-2);
}
.settings-form { display: flex; flex-direction: column; gap: 20px; }
.settings-form__actions { position: sticky; bottom: 0; padding: 12px 0; background: var(--bg); }
.rich-form { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.rich-area { min-height: 220px; max-height: 520px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--border-input); border-radius: var(--radius-field); background: var(--surface); }
.rich-area:focus { outline: 3px solid var(--focus); outline-offset: 3px; }

/* --- Páginas legales --- */
.legal { max-width: 760px; margin: 0 auto; padding: 32px 16px 56px; display: flex; flex-direction: column; gap: 24px; }
.legal .brand { color: var(--text); text-decoration: none; }
.legal__body { line-height: 1.7; color: var(--text); }
.legal__body h1 { font-family: var(--font-display); font-stretch: var(--stretch-poster); font-size: 44px; font-weight: 800; line-height: 0.95; margin: 0 0 16px; }
.legal__body h2 { font-size: 20px; margin: 28px 0 8px; }
.legal__body h3 { font-size: 17px; margin: 20px 0 6px; }
.legal__body p { margin: 0 0 12px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.legal__nav a { min-height: 44px; display: inline-flex; align-items: center; }
.legal__nav a[aria-current="page"] { font-weight: 700; }

/* --- Superadmin: contenido de la web --- */
.content-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.content-pages__item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.content-pages__item:first-child { border-top: 0; padding-top: 0; }
.content-pages__info { display: flex; flex-direction: column; gap: 2px; }
.content-pages__name { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 700; }
.content-form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.content-marks { max-width: 760px; }
.content-marks .detail-list { margin: 12px 0 4px; }
.content-marks code { font-family: var(--font-money); font-size: 14px; background: var(--color-petal); padding: 1px 4px; }
.content-image {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; max-width: 760px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.content-image__preview { flex: none; width: 160px; }
.content-image__preview img { display: block; width: 100%; height: auto; border: 2px solid var(--color-ink); background: var(--surface-2); }
.content-image__fields { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.faq-editor { display: flex; flex-direction: column; gap: 12px; }
.faq-editor > legend { font-size: 14px; font-weight: 600; }
.faq-editor__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.faq-editor__item--hidden { border-style: dashed; opacity: 0.85; }
.faq-editor__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.faq-editor__fields { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.faq-editor__fields .field:nth-child(3) { grid-column: 1 / -1; }
.version-list .version { border: 0; border-top: 1px solid var(--border); padding: 12px 0; justify-content: space-between; flex-wrap: wrap; }
.version-list .version:first-child { border-top: 0; }
.content-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.content-intro p { flex: 1 1 320px; }
/* La plata va en Fragment Mono (también el total recaudado del Resumen) */
.card__value--money { font-family: var(--font-money); font-stretch: normal; font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: 0.01em; overflow-wrap: anywhere; }

/* --- Tanda 3d: menú de abajo en el celular, "Cambios guardados", consejos y paso a paso --- */
:root { --tabbar-height: 60px; }

/* De 768 px en adelante la barra va al costado (antes, a 768 caía arriba del contenido). */
@media (min-width: 768px) {
  .admin { flex-wrap: nowrap; }
  .sidebar { flex: 0 0 240px; }
}

.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--sidebar); border-top: 2px solid var(--color-ink);
  }
  .tabbar__item {
    position: relative; min-height: var(--tabbar-height); min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 0; border: 0; background: none; color: var(--sidebar-text);
    /* 14 px desde 390 de ancho; a 320, 11.5 px: «Invitación» (en negrita) entra sin cortarse. */
    font: inherit; font-size: clamp(11px, 3.6vw, 14px); line-height: 1.2; text-decoration: none; cursor: pointer;
  }
  .tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item:hover { color: var(--sidebar-fg); }
  /* La sección actual: barra lila arriba, letra en negrita y subrayada (no solo el color). */
  .tabbar__item[aria-current="page"], .tabbar__item[data-current="true"], .tabbar__item[aria-expanded="true"] {
    color: var(--sidebar-fg); font-weight: 700; background: var(--sidebar-active);
  }
  .tabbar__item[aria-current="page"]::before, .tabbar__item[data-current="true"]::before {
    content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; background: var(--color-lilac);
  }
  .tabbar__item[aria-current="page"] .tabbar__label, .tabbar__item[data-current="true"] .tabbar__label {
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
  }
  .tabbar :focus-visible { outline: 3px solid var(--sidebar-fg); outline-offset: -3px; }
}

/* "Cambios guardados": uno solo, arriba al centro; aparece y se va (sin animar con
   "reducir movimiento"). Los errores siguen junto a su campo. */
.save-status {
  position: fixed; top: 12px; left: 50%; z-index: 90; transform: translate(-50%, -8px);
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 10px 16px; background: var(--color-ink); color: var(--color-paper);
  font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.save-status svg { color: var(--color-lilac); flex: none; }
.save-status.is-visible { opacity: 1; transform: translate(-50%, 0); }
.save-status:empty { padding: 0; }
@media (prefers-reduced-motion: reduce) { .save-status { transition: none; } }

/* Consejo de primera vez: una línea con la tilde, entre reglas finas. */
.tip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 14px; background: var(--color-petal); border-left: 4px solid var(--color-go);
}
.tip__text { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.5; text-wrap: pretty; }

/* Tu web, paso a paso */
.checklist__bar { max-width: none; height: 10px; border: 1px solid var(--color-ink); background: var(--color-paper); }
.checklist__bar span { background: var(--color-go); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist__item { display: flex; align-items: flex-start; gap: 14px; padding: 6px 0 10px; border-top: 1px solid var(--border); }
.checklist__item:first-child { border-top: none; }
.checklist__mark {
  flex: none; width: 30px; height: 30px; margin-top: 7px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-ink); font-size: 14px; font-weight: 700; font-variant-numeric: lining-nums;
}
.checklist__item.is-done .checklist__mark { background: var(--color-go); }
.checklist__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.checklist__text a, .checklist__text strong { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.checklist__item.is-done .checklist__text a { font-weight: 600; color: var(--text-2); }
.checklist__hint { font-size: 14px; color: var(--text-2); }

/* Guía de Mercado Pago (Pagos) */
.guide { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; max-width: 72ch; }
.guide li::marker { font-weight: 700; }

/* Solo lectura (superadmin sin permiso, app.js → lockReadonly): lo que no se puede guardar
   se ve apagado, no solo falla al tocarlo. */
:is(.input, .textarea, .select):disabled { background: var(--info-soft-bg); border-style: dashed; cursor: not-allowed; }
.check input:disabled, .pill-opt input:disabled + span { cursor: not-allowed; opacity: 0.55; }
main[data-readonly] label.btn:has(+ input:disabled) { cursor: not-allowed; opacity: 0.55; }

/* Plano de mesas (Invitados → Plano de mesas) */
.seating { gap: 16px; }
.seating__totals { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; color: var(--text-2); }
.seating__totals strong { font-family: var(--font-money); font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.seating__error:empty { display: none; }
.seating__error { margin: 0; }
.seat-warnings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seat-warnings li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.seat-warnings .btn { background: var(--surface); }
.seating__cols { display: flex; flex-direction: column; gap: 20px; }
.seating__aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.seating__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1024px) {
  .seating__cols { flex-direction: row; align-items: flex-start; }
  .seating__aside { flex: 0 0 340px; position: sticky; top: 16px; }
  .seat-list--unseated { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
  .seating__main { flex: 1 1 auto; }
}
.seat-tables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.seat-table { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--color-ink); min-width: 0; }
.seat-table.is-full { border-top-color: var(--color-go); }
.seat-table__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; }
.seat-table__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seat-table__name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.seat-table__count { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.seat-table__tools { display: flex; gap: 4px; }
.seat-table__form { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface-2); }
.seat-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.seat-dots i { width: 12px; height: 12px; border: 1.5px solid var(--color-graphite); }
.seat-dots i.is-taken { background: var(--color-ink); border-color: var(--color-ink); }
.seat-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.seat-fields .field { flex: 1 1 180px; }
.seat-fields .field--seats { flex: 0 0 96px; }
.seat-new { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px dashed var(--border-dashed); }
.seat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 52px; }
.seat-list--unseated { padding: 8px; background: var(--surface-2); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
.seat-list__empty { padding: 12px; font-size: 14px; color: var(--text-2); border: 1px dashed var(--border-dashed); }
[data-drop].is-over { outline: 3px solid var(--color-go); outline-offset: 2px; }
.seat-person { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); }
.seat-person--warn { border-color: var(--color-stop); background: var(--danger-soft-bg); }
.seat-person.is-dragging { position: relative; z-index: 5; pointer-events: none; opacity: 0.85; box-shadow: 0 6px 18px rgba(13, 13, 13, 0.18); }
.seat-person__handle { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 44px; color: var(--text-2); cursor: grab; touch-action: none; flex: none; }
.seat-person__handle:active { cursor: grabbing; }
.seat-person__info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; flex: 1 1 140px; min-width: 0; }
.seat-person__name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.seat-person__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.seat-person__inv { overflow-wrap: anywhere; }
.seat-move { display: flex; gap: 6px; flex: 1 1 200px; min-width: 0; }
.seat-move .select { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.seat-inactive summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.seat-inactive__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seat-inactive__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); }
@media (prefers-reduced-motion: no-preference) { [data-drop] { transition: outline-color 0.15s; } }

/* Plano dibujado: mesas redondas o rectangulares con sus sillas (admin/_seat_drawing.html).
   Las medidas (px) vienen del servidor; aquí solo colores y forma. */
.seat-view .pills { gap: 6px; }
.seat-shape legend { margin-bottom: 6px; }
.seat-table--drawn { align-items: stretch; padding: 14px 10px; }
.seat-draw { min-width: 0; padding: 4px 0; }
.seat-draw[tabindex] { overflow-x: auto; padding: 36px 4px 4px; }
.seat-draw[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.seat-draw__room { position: relative; margin: 0 auto; }
.seat-draw__table { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; text-align: center; background: var(--color-petal); border: 2px solid var(--color-ink); }
.seat-draw__table--round { border-radius: 50%; padding: 12%; }
.seat-draw__name { flex: none; max-width: 100%; font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.seat-draw__count { flex: none; font-family: var(--font-money); font-size: 15px; font-variant-numeric: tabular-nums; }
.seat-draw__chairs { list-style: none; margin: 0; padding: 0; }
.chair { position: absolute; width: 44px; height: 44px; }
.chair__seat { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px dashed var(--color-graphite); border-radius: 50%; background: var(--surface); color: var(--text-2); font: 700 13px/1 var(--font-text); -webkit-user-select: none; user-select: none; }
button.chair__seat { cursor: pointer; }
.chair.is-taken .chair__seat { border-style: solid; border-color: var(--color-ink); background: var(--color-go); color: var(--color-ink); }
.chair.is-taken button.chair__seat { cursor: grab; touch-action: none; }
.chair.is-warn .chair__seat { border-color: var(--color-stop); background: var(--danger-soft-bg); color: var(--color-stop); }
.chair__seat:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chair__seat[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); outline: 3px solid var(--color-go); outline-offset: 2px; }
.chair__seat.is-dragging { position: relative; z-index: 5; pointer-events: none; box-shadow: 0 6px 18px rgba(13, 13, 13, 0.25); }
.chair__tip { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 6; transform: translateX(-50%); width: max-content; max-width: 180px; padding: 4px 8px; background: var(--color-ink); color: var(--color-paper); font-size: 13px; line-height: 1.3; pointer-events: none; }
.chair:hover .chair__tip, .chair:focus-within .chair__tip { display: block; }
.seating-panel.is-picking .chair:not(.is-taken) .chair__seat { border-style: solid; border-color: var(--color-go); background: var(--color-petal); color: var(--text); }
.seat-pick { position: sticky; top: 0; z-index: 7; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; background: var(--color-petal); border-left: 4px solid var(--color-go); }
.seat-pick.is-on { border-left-color: var(--color-ink); }
.seat-pick__text { margin: 0; font-size: 14px; flex: 1 1 220px; }
.seat-pick__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.seat-pick__actions .btn { background: var(--surface); }
.seat-pick__actions [hidden] { display: none; }
.seat-move .btn[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.seat-draw--print .chair { width: 64px; height: 64px; }
.seat-draw--print .chair__seat { padding: 2px; font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }

/* --- Fase 9: tipos de evento ("¿Qué vas a celebrar?") y "Mis eventos" --- */
.event-types { margin: 4px 0 20px; }
.event-types__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.event-types__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.event-card {
  position: relative; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--border-input); border-radius: 2px; color: var(--text); text-decoration: none;
  background: var(--surface); font-weight: 600; font-size: 16px;
}
.event-card:hover { background: var(--accent-soft-bg); }
.event-card.is-current { background: var(--accent-soft-bg); box-shadow: inset 0 0 0 2px var(--color-ink); }
.event-card__icon { flex: none; color: var(--accent-dark); }
.event-card__check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--action); color: var(--on-action);
  display: inline-flex; align-items: center; justify-content: center;
}
/* En el celular, dos fichas lado a lado con el ícono arriba: «Baby shower» entra en una
   línea y la marca de elegida va en la esquina, sin empujar el nombre. */
@media (max-width: 560px) {
  .event-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .event-card__check { position: absolute; top: 12px; right: 12px; margin: 0; }
}
.events-list { list-style: none; margin: 8px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.events-list__link {
  min-height: 44px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-decoration: none;
  color: var(--text); border: 1px solid var(--border-input); border-radius: 2px;
}
.events-list__link:hover { background: var(--accent-soft-bg); }
.events-list__type { font-size: 13px; color: var(--accent-dark); font-weight: 600; letter-spacing: 0.02em; }
.events-list__name { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.events-list__meta { font-size: 14px; color: var(--text-2); }
.events-page__new { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }