/* =========================================================
   Vera · Planificador de boda
   Sistema visual: paleta pastel cálida, mucho aire,
   bordes redondeados, sombras suaves, tipografía elegante.
   ========================================================= */

:root {
  /* Paleta */
  --ivory:        #FBF8F3;  /* marfil */
  --off-white:    #FFFDF9;  /* blanco roto */
  --champagne:    #EBDBC6;  /* champagne */
  --sand:         #E5D6BE;  /* arena */
  --warm-beige:   #EFE6D6;  /* beige cálido */
  --blush:        #E8C9C4;  /* rosa empolvado */
  --blush-deep:   #D7A59E;  /* rosa empolvado intenso */
  --sage:         #A9B89E;  /* verde salvia */
  --sage-deep:    #8B9C80;  /* salvia intenso */
  --sage-soft:    #EAEFE3;  /* salvia muy claro (fondos) */
  --blush-soft:   #F8ECEA;  /* rosa muy claro (fondos) */

  /* Texto */
  --ink:          #4F453D;  /* marrón cálido principal */
  --ink-soft:     #7C7066;  /* texto secundario */
  --ink-faint:    #A89C90;  /* texto tenue / placeholders */

  /* Estados */
  --confirmed:    #8B9C80;
  --pending:      #D9B66A;
  --declined:     #C99A93;

  /* Superficies */
  --card:         #FFFFFF;
  --line:         #ECE3D6;  /* bordes suaves */
  --line-strong:  #E0D4C2;

  /* Sombras suaves */
  --shadow-sm:    0 2px 8px rgba(120, 98, 74, 0.06);
  --shadow-md:    0 10px 30px rgba(120, 98, 74, 0.10);
  --shadow-lg:    0 24px 60px rgba(120, 98, 74, 0.16);

  /* Radios */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Tipografía */
  --serif: "Cormorant Garamond", "Georgia", serif;
  --sans:  "Jost", "Segoe UI", system-ui, sans-serif;

  --maxw: 1080px;
}

/* ---------- Reset ligero ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* El hueco de la barra de scroll SIEMPRE reservado: así el ancho útil no cambia
   entre vistas con y sin scroll (la pastilla central del appbar "bailaba" unos
   px al pasar por Banquete, cuyo plano cabe sin scrollear). */
html { overflow-y: scroll; }
@supports (scrollbar-gutter: stable) {
  html { overflow-y: auto; scrollbar-gutter: stable; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.15;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; }

::selection { background: var(--blush); color: var(--ink); }

/* ---------- Utilidades de layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blush-deep);
  font-weight: 500;
}

.muted { color: var(--ink-soft); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
  white-space: nowrap;
  letter-spacing: .3px;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: linear-gradient(135deg, var(--blush-deep), #C68F87);
  color: #fff;
  box-shadow: 0 8px 22px rgba(199, 138, 130, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(199, 138, 130, 0.45); }

.btn-sage {
  background: linear-gradient(135deg, var(--sage), var(--sage-deep));
  color: #fff;
  box-shadow: 0 8px 22px rgba(139, 156, 128, 0.32);
}
.btn-sage:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(139, 156, 128, 0.42); }

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--warm-beige); transform: translateY(-1px); }

.btn-soft {
  background: var(--warm-beige);
  color: var(--ink);
}
.btn-soft:hover { background: var(--sand); }

.btn-lg { padding: 17px 38px; font-size: 17px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-block { width: 100%; }

.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Animaciones de aparición ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.92) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Entrada SUAVE y orgánica para elementos NUEVOS de una lista (no rebota; solo el
   elemento recién creado se anima, no toda la lista en cada refresh). */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.card-enter { animation: cardEnter .36s cubic-bezier(.3,.7,.3,1) both; }
@keyframes settleSeat {
  0%   { transform: rotate(-2deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

.fade-up { animation: fadeUp .6s cubic-bezier(.2,.7,.3,1) both; }
.view-enter { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
[data-delay="1"] { animation-delay: .07s; }
[data-delay="2"] { animation-delay: .14s; }
[data-delay="3"] { animation-delay: .21s; }
[data-delay="4"] { animation-delay: .28s; }

/* =========================================================
   LANDING
   ========================================================= */
.landing-bg {
  position: relative;
  background:
    radial-gradient(1100px 520px at 78% -8%, var(--blush-soft) 0%, transparent 60%),
    radial-gradient(900px 480px at 8% 8%, var(--sage-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--off-white), var(--ivory));
  overflow: hidden;
}
.landing-bg::before,
.landing-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .5;
  pointer-events: none;
}
.landing-bg::before {
  width: 260px; height: 260px; top: 12%; right: -60px;
  background: radial-gradient(circle at 30% 30%, var(--blush), transparent 70%);
  animation: floaty 9s ease-in-out infinite;
}
.landing-bg::after {
  width: 200px; height: 200px; bottom: 8%; left: -40px;
  background: radial-gradient(circle at 30% 30%, var(--sage), transparent 70%);
  animation: floaty 11s ease-in-out infinite reverse;
}

.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 0;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Selector de idioma (ES/EN): misma estética que el resto de pastillas propias. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  background: var(--warm-beige); border: 1px solid var(--line);
  padding: 3px; border-radius: var(--r-pill);
}
.lang-opt {
  min-width: 34px; padding: 6px 4px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--ink-soft);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.lang-opt:hover { color: var(--ink); }
.lang-opt.active { background: var(--card); color: var(--blush-deep); box-shadow: var(--shadow-sm); }
/* Dentro del menú de tres rayas: fila propia con el icono de globo delante. */
.menu-lang-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px 2px; }
.menu-lang-row .icon { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.menu-lang-row .lang-switch { flex: 1; justify-content: center; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand .mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blush), var(--sage));
  display: grid; place-items: center; color: #fff;
  box-shadow: var(--shadow-sm);
}
.brand .name { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: .5px; }
.brand .name b { font-weight: 600; }

/* Hero: ilustración (vertical, ajustada a su tamaño) a la izquierda y texto a la
   derecha. Contenido centrado con un ancho máximo para que no se agrande de más. */
.hero {
  position: relative; z-index: 2;
  max-width: 1080px; margin: 8px auto 44px; padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  gap: 52px; text-align: left;
}
.hero-media { flex: 0 0 auto; }
.hero-media img {
  display: block; width: auto; height: clamp(300px, 38vw, 460px);
  object-fit: contain;
}
.hero-text { flex: 0 1 auto; min-width: 0; max-width: 480px; }
.hero .eyebrow { display: inline-block; margin-bottom: 16px; }
.hero h1 {
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 500;
  letter-spacing: .3px;
  line-height: 1.14;
  margin: 0 0 30px;
  max-width: 15ch;
}
.hero h1 em { font-style: italic; color: var(--blush-deep); }
.hero .sub {
  font-size: clamp(15px, 1.35vw, 18px);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 28px;
}
.hero-cta { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
/* Footer de la landing: compacto, centrado, con enlace a la política */
.landing-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  text-align: center; padding: 8px 0 40px;
  font-size: 12.5px; color: var(--ink-faint); letter-spacing: .2px;
}

/* Tarjetas de valor */
.values {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 10px 0 86px;
}
.value-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.value-card .vc-icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 18px;
}
.vc-1 .vc-icon { background: var(--blush-soft); color: var(--blush-deep); }
.vc-2 .vc-icon { background: var(--sage-soft); color: var(--sage-deep); }
.vc-3 .vc-icon { background: var(--warm-beige); color: #C39B5B; }
.value-card h3 { font-size: 24px; margin-bottom: 8px; }
.value-card p { color: var(--ink-soft); font-size: 15px; }

/* =========================================================
   FAQ (landing) — acordeón compacto
   ========================================================= */
.faq-section { max-width: 760px; margin: 0 auto; padding: 8px 0 28px; }
.faq-eyebrow { display: block; text-align: center; margin-bottom: 18px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; text-align: left; font-family: inherit;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
}
.faq-icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--warm-beige); color: var(--ink-soft);
  transition: transform .32s cubic-bezier(.3,.7,.3,1), background .2s ease, color .2s ease;
}
.faq-icon .icon { width: 14px; height: 14px; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--blush-soft); color: var(--blush-deep); }
.faq-a {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.3,.7,.3,1), opacity .3s ease;
}
.faq-item.open .faq-a { max-height: 220px; opacity: 1; }
.faq-a p { padding: 0 18px 16px; margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

/* =========================================================
   MODAL (creación de proyecto)
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(79, 69, 61, 0.34);
  backdrop-filter: blur(6px);
  /* flex + scroll: el modal se centra si cabe; si es más alto que la pantalla,
     se puede desplazar desde arriba (no queda nada cortado). */
  display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto; padding: 20px;
  animation: fadeIn .25s ease both;
}
.modal {
  width: 100%; max-width: 480px;
  margin: auto;            /* centra en vertical cuando hay espacio */
  background: var(--off-white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 38px 34px 34px;
  animation: popIn .4s cubic-bezier(.2,.8,.3,1) both;
  position: relative;
}
.modal .close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft);
  transition: background .2s ease;
}
.modal .close:hover { background: var(--warm-beige); }
.modal .m-eyebrow { text-align: center; margin-bottom: 8px; }
.modal h2 { text-align: center; font-size: 32px; margin-bottom: 6px; }
.modal .m-sub { text-align: center; color: var(--ink-soft); font-size: 14.5px; margin-bottom: 26px; }
/* Modal Editar invitado: compacto (título arriba-izquierda, menos alto) */
.modal-eg { padding: 22px 30px 26px; }
.modal-eg .mg-title { text-align: left; font-size: 21px; margin: 0 0 18px; }

/* ---------- Formularios ---------- */
.field { margin-bottom: 16px; }
.field.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.field label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); margin-bottom: 7px; letter-spacing: .3px;
}
.field label .opt { color: var(--ink-faint); font-weight: 400; }
.input {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 15px; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus {
  outline: none;
  border-color: var(--blush-deep);
  box-shadow: 0 0 0 4px rgba(215, 165, 158, 0.18);
}
.modal .btn-primary { margin-top: 16px; }
.amp { font-family: var(--serif); font-style: italic; color: var(--blush-deep); }

/* Aviso suave de validación (oculto por defecto) */
.form-note {
  max-height: 0; opacity: 0; overflow: hidden;
  font-size: 13.5px; color: var(--declined); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
  margin: 0;
}
.form-note.show { max-height: 40px; opacity: 1; margin-top: 14px; }
.form-note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--declined); flex: none;
}
/* Variante de éxito (verde, p. ej. "email enviado") */
.form-note.ok { color: var(--sage-deep); }
.form-note.ok.show { max-height: 64px; }
.form-note.ok::before { background: var(--sage-deep); }

/* Separador "o" + botón "Continuar con Google" (login/registro) */
.auth-or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px; color: var(--ink-faint); font-size: 12.5px;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-google { gap: 10px; }
.gicon { width: 18px; height: 18px; flex: none; }

/* Enlace "¿Has olvidado la contraseña?" en el login */
.auth-forgot {
  display: block; margin: 14px auto 0; font-size: 13.5px; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-forgot:hover { color: var(--blush-deep); }

/* Campo con error: borde rosado suave, sin agresividad */
.input.field-error {
  border-color: var(--declined);
  box-shadow: 0 0 0 4px rgba(201, 154, 147, 0.16);
}

/* Botón desactivado */
.btn:disabled,
.btn[disabled] {
  cursor: not-allowed; opacity: .55; filter: saturate(.7);
  box-shadow: none; transform: none;
}
.btn:disabled:hover { transform: none; box-shadow: none; }

/* =========================================================
   ESTRUCTURA DE APP (dashboard / módulos)
   ========================================================= */
.app-bg {
  min-height: 100vh;
  padding-bottom: 48px;   /* PREMISA: nunca cortado por abajo; siempre aire al final */
  background:
    radial-gradient(900px 460px at 92% -6%, var(--sage-soft) 0%, transparent 55%),
    radial-gradient(800px 420px at -4% 4%, var(--blush-soft) 0%, transparent 55%),
    var(--ivory);
}

.appbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 248, 243, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.appbar .wrap,
.appbar-inner { display: flex; align-items: center; height: 64px; gap: 14px; }
.appbar .brand .name { font-size: 21px; }
/* Tres zonas: izquierda y derecha con el mismo peso para centrar la pastilla */
.appbar-left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.appbar-actions { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }

/* Wordmark wedding.com */
.brand .name .dot { color: var(--blush-deep); }

/* Pestañas de navegación dentro del proyecto (centradas en la barra) */
.tabs {
  display: inline-flex; gap: 4px; flex: 0 0 auto;
  background: var(--warm-beige); border: 1px solid var(--line);
  padding: 4px; border-radius: var(--r-pill);
}
/* Pestañas por ICONO (Invitados / Banquete / Menú) */
.navtab {
  display: grid; place-items: center;
  width: 46px; height: 38px; border-radius: var(--r-pill);
  color: var(--ink-faint); cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.navtab .icon { width: 20px; height: 20px; }
.navtab:hover { color: var(--ink-soft); }
.navtab.active {
  background: var(--card); color: var(--blush-deep);
  box-shadow: var(--shadow-sm);
}

/* Menú de tres rayas (derecha) */
.menu-wrap { position: relative; }
.menu-btn {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; color: var(--ink-soft);
  border: 1px solid var(--line); background: var(--card);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.menu-btn:hover { background: var(--warm-beige); color: var(--ink); border-color: var(--line-strong); }
.menu-btn .icon { width: 20px; height: 20px; }
.menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 216px; padding: 8px;
  background: var(--off-white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: popIn .18s ease both;
}
.menu-panel[hidden] { display: none; }
.menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 12px; border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: left;
  transition: background .18s ease, color .18s ease;
}
.menu-item:hover { background: var(--warm-beige); }
.menu-item .icon { width: 18px; height: 18px; color: var(--ink-soft); flex: none; }
.menu-item.active { color: var(--blush-deep); }
.menu-item.active .icon { color: var(--blush-deep); }
.menu-sep { height: 1px; background: var(--line); margin: 7px 6px; }
.menu-user {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 9px; font-size: 12.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.menu-user .icon { width: 16px; height: 16px; color: var(--blush-deep); flex: none; }
.menu-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modal de cuenta */
.account-email {
  display: flex; align-items: center; gap: 9px;
  background: var(--warm-beige); border-radius: var(--r-sm);
  padding: 13px 15px; margin: 6px 0 20px; font-size: 15px; color: var(--ink);
}
.account-email .icon { width: 18px; height: 18px; color: var(--blush-deep); flex: none; }
.account-email span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.auth-switch button {
  color: var(--blush-deep); font-weight: 600; font-size: 14px;
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-switch button:hover { color: var(--ink); }

/* Aviso "guarda tu boda" (usuarios sin cuenta con trabajo hecho) */
.save-nudge {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--sage-soft); border: 1px solid var(--sage);
  border-radius: var(--r-md); padding: 11px 14px;
  margin: 16px 0 20px;   /* aire también por debajo: que no quede pegado al contenido */
  box-shadow: var(--shadow-sm);
}
.save-nudge .sn-icon {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #fff; color: var(--sage-deep);
}
.save-nudge .sn-icon .icon { width: 19px; height: 19px; }
.sn-text { flex: 1 1 260px; margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.sn-text b { color: var(--ink); font-weight: 600; }
.sn-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sn-close {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: background .2s ease, color .2s ease;
}
.sn-close:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.sn-close .icon { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .sn-actions { margin-left: 0; width: 100%; }
  .sn-actions .btn { flex: 1; }
}

/* Título del dashboard */
.dash-title {
  display: flex; align-items: center; gap: 12px;
  justify-content: center; flex-wrap: wrap; margin-bottom: 18px;
}
.dash-warn { color: var(--declined); font-size: 14.5px; margin-top: 4px; }
.link-btn {
  color: var(--blush-deep); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; font-size: inherit;
}
.link-btn:hover { color: var(--ink); }

/* ---------- Cabecera del dashboard ---------- */
.dash-head { text-align: center; padding: 54px 0 30px; }
.dash-head .eyebrow { margin-bottom: 14px; }
.dash-head h1 { font-size: clamp(34px, 6vw, 58px); margin: 0; }
.dash-head h1 .amp { font-size: .82em; }
/* Chips (fecha · lugar · cuenta atrás) SIEMPRE en su propia línea, bajo los nombres. */
.dash-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; color: var(--ink-soft); font-size: 15.5px;
}
.dash-meta .chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.dash-meta .chip svg { color: var(--blush-deep); }
.countdown { font-weight: 500; color: var(--ink); }
.countdown b { font-family: var(--serif); font-size: 18px; color: var(--blush-deep); }

/* ---------- Módulos del dashboard ---------- */
/* Módulos estilo "iconos de app": icono + nombre debajo, pequeños y centrados. */
.modules {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px;
  padding: 20px 0 80px;
}
.module-card {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  width: 112px; padding: 6px; background: none; border: none; cursor: pointer;
  font-family: inherit;
}
.module-card .m-icon {
  width: 76px; height: 76px; border-radius: 22px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.module-card:hover .m-icon { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.module-card:focus-visible { outline: none; }
.module-card:focus-visible .m-icon { outline: 2px solid var(--blush-deep); outline-offset: 3px; }
.module-card .m-icon .icon { width: 32px; height: 32px; }
.mod-guests .m-icon { background: var(--blush-soft); color: var(--blush-deep); }
.mod-banquet .m-icon { background: var(--sage-soft); color: var(--sage-deep); }
.mod-menu .m-icon { background: var(--warm-beige); color: #C39B5B; }
.mod-projects .m-icon { background: var(--warm-beige); color: var(--ink-soft); }
.module-card .m-label { font-size: 15px; font-weight: 500; color: var(--ink); }

/* =========================================================
   VISTA PROYECTOS (Wedding desks)
   Mismo patrón que Invitados: toolbar (Activas/Archivadas +
   vista + buscador) y cuerpo en tarjetas o lista.
   ========================================================= */
.projects-view { padding-top: 18px; }
.projects-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap; margin-bottom: 16px;
}
.pd-filter .view-tab { min-width: 104px; }
.projects-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-bottom: 70px;
}
.project-card {
  position: relative; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: popIn .3s ease both;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project-card.active { border-color: var(--blush-deep); box-shadow: 0 0 0 3px rgba(215,165,158,.16), var(--shadow-sm); }
.pc-head { display: flex; align-items: center; justify-content: space-between; }
.pc-folder {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--warm-beige); color: var(--blush-deep);
}
.pc-folder .icon { width: 24px; height: 24px; }
.pc-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--sage-deep); background: var(--sage-soft);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.pc-badge-arch { color: var(--ink-soft); background: var(--warm-beige); }
.pc-name { font-size: 23px; line-height: 1.15; }
.pc-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; flex: 1; }
.pc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-soft);
}
.pc-chip .icon { width: 15px; height: 15px; color: var(--ink-faint); }
.pc-actions { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-actions .btn { flex: 1; }
.pc-del {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  border: 1px solid var(--line); background: var(--card);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pc-del:hover { background: var(--blush-soft); color: var(--declined); border-color: var(--blush); }
.pc-del .icon { width: 16px; height: 16px; }
/* Botón "archivar boda" (no destructivo: hover cálido, no rosa) */
.pc-arch {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  border: 1px solid var(--line); background: var(--card);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pc-arch:hover { background: var(--warm-beige); color: var(--ink); border-color: var(--line-strong); }
.pc-arch .icon { width: 16px; height: 16px; }

/* Vista LISTA de wedding desks (reutiliza .guest-list-table/.glt-row) */
.pd-row { cursor: pointer; transition: background .15s ease; }
.pd-row:hover { background: var(--off-white); }
.pd-folder { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.pd-folder .icon { width: 18px; height: 18px; }
.pd-meta { flex: none; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.pd-act { flex: 0 0 150px; }
.glt-name .pc-badge { margin-left: 8px; flex: none; }
.pd-new-row {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px;
  padding: 13px; font-size: 14px; font-weight: 600; color: var(--sage-deep);
  border-top: 1px solid var(--line); transition: background .18s ease;
}
.pd-new-row:hover { background: var(--sage-soft); }
.pd-new-row .icon { width: 16px; height: 16px; }

/* Tarjeta "crear nuevo" */
.new-project-card {
  border: 1px dashed var(--line-strong); background: transparent;
  border-radius: var(--r-lg); min-height: 220px;
  display: grid; place-items: center; align-content: center; gap: 12px;
  color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.new-project-card:hover { border-color: var(--blush-deep); background: var(--blush-soft); color: var(--blush-deep); }
.np-circle {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--card); display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.np-text { font-size: 15px; font-weight: 500; }

/* =========================================================
   MÓDULO INVITADOS
   ========================================================= */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 40px 0 22px; flex-wrap: wrap;
}
.page-head h1 { font-size: clamp(32px, 5vw, 46px); }
.page-head .ph-sub { color: var(--ink-soft); font-size: 15px; margin-top: 4px; }

/* Cabecera compacta del banquete (sin titulares decorativos) */
.banquet-head { align-items: center; padding: 24px 0 16px; }
.bq-copy { display: flex; flex-direction: column; gap: 12px; }
.view-switch {
  display: inline-flex; align-items: center; gap: 4px;
  width: fit-content; padding: 4px;
  background: var(--warm-beige); border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.view-tab {
  min-width: 86px; padding: 7px 14px; border-radius: var(--r-pill);
  color: var(--ink-soft); font-size: 13.5px; font-weight: 500;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Pastilla segmentada con "pulgar" blanco DESLIZANTE (.seg) */
.seg { position: relative; }
.seg-thumb {
  position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0;
  background: var(--card); border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}
.seg-thumb.animated { transition: left .34s cubic-bezier(.5,.05,.2,1), top .34s cubic-bezier(.5,.05,.2,1), width .34s ease, height .34s ease; }
.seg .view-tab, .seg .navtab { position: relative; z-index: 1; }
/* El fondo del activo lo aporta el thumb */
.seg .view-tab.active, .seg .navtab.active { background: transparent; box-shadow: none; }

/* La pastilla dentro de la tarjeta "Sin mesa": a ancho completo, arriba */
.unseated .view-switch { display: flex; width: 100%; margin-bottom: 16px; box-sizing: border-box; }
.unseated .view-tab { flex: 1 1 0; min-width: 0; text-align: center; }

/* Deslizamiento del contenido al cambiar de vista/módulo */
@keyframes segSlideR { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: none; } }
@keyframes segSlideL { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: none; } }
.slide-in-r { animation: segSlideR .38s cubic-bezier(.3,.7,.3,1) both; }
.slide-in-l { animation: segSlideL .38s cubic-bezier(.3,.7,.3,1) both; }
.nav-slide-r { animation: segSlideR .42s cubic-bezier(.3,.7,.3,1) both; }
.nav-slide-l { animation: segSlideL .42s cubic-bezier(.3,.7,.3,1) both; }

/* Vista invitados: arranca pegada al header y respira al llegar al final del scroll */
.guests-view { padding-top: 22px; padding-bottom: 96px; }

/* Barra superior: contadores a la izquierda, buscador a la derecha */
.guests-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap; margin-bottom: 14px;
}

/* Línea compacta de contadores */
.counter-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-size: 14px; color: var(--ink-soft); padding: 0 2px;
}
.counter-line .cnt b { font-family: var(--sans); font-weight: 600; font-size: 15px; margin-right: 3px; }
.counter-line .cnt-sub { font-size: 12.5px; color: var(--ink-faint); margin-left: -6px; }
.counter-line .sep { color: var(--line-strong); }
.counter-line .cnt-total b { color: var(--ink); }
.counter-line .cnt-conf  b { color: var(--confirmed); }
.counter-line .cnt-pend  b { color: var(--pending); }
.counter-line .cnt-wait  b { color: var(--pending); }
.counter-line .cnt-nosend b { color: var(--ink-faint); }
.counter-line .cnt-decl  b { color: var(--declined); }

/* Grupo filtro + buscador */
.search-group { display: flex; align-items: center; gap: 10px; }

/* Botón de filtro (icono) */
.filter-wrap { flex: none; }
.filter-btn {
  position: relative; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft);
  background: var(--card); border: 1.5px solid var(--line-strong);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn:hover { background: var(--warm-beige); color: var(--ink); }
.filter-btn .icon { width: 18px; height: 18px; }
.filter-btn.has-filters {
  background: var(--blush-soft); border-color: var(--blush-deep); color: var(--blush-deep);
}
.filter-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--blush-deep); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--ivory);
}

/* Popover de filtros */
.filter-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  width: 250px; padding: 14px;
  background: var(--off-white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  animation: popIn .18s ease both;
}
.filter-panel[hidden] { display: none; }
.filter-group + .filter-group { margin-top: 14px; }
.filter-label {
  font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 8px;
}
.filter-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-opt {
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  padding: 6px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--card);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-opt:hover { background: var(--warm-beige); color: var(--ink); }
.filter-opt.active { background: var(--blush-deep); border-color: var(--blush-deep); color: #fff; }
.filter-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.filter-clear {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  padding: 6px 10px; border-radius: var(--r-sm);
  transition: background .18s ease, color .18s ease;
}
.filter-clear:hover { background: var(--blush-soft); color: var(--declined); }
.filter-clear .icon { width: 14px; height: 14px; }

/* Buscador */
.search-box {
  position: relative; display: flex; align-items: center; flex: 1 1 auto;
  background: var(--card); border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 0 12px;
  min-width: 230px; transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box:focus-within { border-color: var(--blush-deep); box-shadow: 0 0 0 4px rgba(215,165,158,.16); }
.search-box > .icon { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }
.search-input {
  flex: 1; border: none; background: transparent; outline: none;
  padding: 10px 8px; font-size: 14.5px; color: var(--ink); min-width: 0;
}
.search-input::placeholder { color: var(--ink-faint); }
.search-clear {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: background .2s ease, color .2s ease;
}
.search-clear[hidden] { display: none; }
.search-clear:hover { background: var(--warm-beige); color: var(--ink); }
.search-clear .icon { width: 14px; height: 14px; }

/* Estado vacío compacto (sin resultados de búsqueda) */
.empty-compact {
  padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-compact .ec-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--warm-beige); color: var(--ink-faint);
}
.empty-compact .ec-icon .icon { width: 22px; height: 22px; }
.empty-compact p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* Chip de grupo editable en la tarjeta */
.group-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warm-beige); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 3px 5px 3px 9px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.group-pill:hover { background: var(--sand); }
.group-pill:focus-within { background: #fff; border-color: var(--blush-deep); }

/* Barra de añadir invitado */
.add-bar {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 2fr 1fr auto; gap: 12px; align-items: center;
}
.add-bar .input { border-radius: var(--r-pill); }

/* Versión compacta: Nombre | Grupo | Estado | Añadir, en una fila baja */
.add-bar.compact {
  padding: 10px; border-radius: var(--r-pill); margin-bottom: 16px;
  grid-template-columns: minmax(0, 1fr) 150px 150px auto;
}
.add-bar.compact .input,
.add-bar.compact .select { padding: 11px 14px; }
.add-bar.compact .select:not(.select-trigger) { padding-right: 34px; }
.add-bar.compact .btn { padding: 11px 22px; }
.select {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 13px 15px; font-size: 14.5px; color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C7066' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.select:focus { outline: none; border-color: var(--blush-deep); box-shadow: 0 0 0 4px rgba(215,165,158,.18); }
.select-sm {
  padding: 8px 30px 8px 13px; font-size: 13px; border-radius: var(--r-pill);
  appearance: none; -webkit-appearance: none; cursor: pointer;
}

/* Cuadrícula de invitados: 3 columnas en escritorio */
.guest-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.guest-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 11px 13px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .15s ease;
}
.guest-card:hover { box-shadow: var(--shadow-md); }
.gc-row { display: flex; align-items: center; gap: 9px; }
.gc-top { margin-bottom: 8px; }
.gc-bottom { justify-content: space-between; }
.gc-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
}
/* Avatar de los novios = anillos (blancos, centrados) en vez de iniciales */
.gc-avatar > .icon, .s-avatar > .icon, .chair-avatar > .icon { width: 62%; height: 62%; }
.gc-name {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-group {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-soft);
}
.group-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.gc-remove {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: background .2s ease, color .2s ease;
}
.gc-remove:hover { background: var(--blush-soft); color: var(--declined); }
.gc-remove .icon { width: 15px; height: 15px; }
.gc-couple {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  color: var(--blush-deep); background: var(--blush-soft);
}
.gc-couple .icon { width: 14px; height: 14px; }

/* Badge de plazas (×N) y aviso de alergias en la tarjeta */
.gc-seats {
  flex: none; font-size: 11px; font-weight: 700; color: var(--sage-deep);
  background: var(--sage-soft); border-radius: var(--r-pill); padding: 2px 7px;
}
.gc-allergy {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--pending);
}
.gc-actions { display: inline-flex; align-items: center; gap: 6px; }
.gc-edit {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: background .2s ease, color .2s ease;
}
.gc-edit:hover { background: var(--warm-beige); color: var(--ink); }
.gc-edit .icon { width: 14px; height: 14px; }

/* Botón "enviar invitación" (RSVP) por invitado */
.gc-share {
  position: relative;
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: background .2s ease, color .2s ease;
}
.gc-share:hover { background: var(--sage-soft); color: var(--sage-deep); }
.gc-share .icon { width: 14px; height: 14px; }
/* Estado "invitación enviada" (aún sin respuesta): avión teñido en rosa */
.gc-share.sent { color: var(--blush-deep); }
.gc-share.sent:hover { background: var(--blush-soft); color: var(--blush-deep); }
/* Punto verde cuando ese invitado ya respondió */
.gc-share.responded { color: var(--sage-deep); }
.gc-share.responded::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--confirmed); border: 1.5px solid var(--card);
}

/* ---------- Modal: compartir invitación ---------- */
.modal-share { max-width: 460px; }
.share-loading, .share-error {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-soft); font-size: 14.5px; padding: 14px 0;
}
.share-error { color: var(--declined); }
.share-loading .icon { width: 18px; height: 18px; }
.share-linkrow { display: flex; gap: 8px; margin-bottom: 12px; }
.share-url {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink-soft);
  background: var(--off-white);
}
.share-copy { flex: none; white-space: nowrap; }
.share-copy .icon { width: 15px; height: 15px; }
.share-wa .icon { width: 18px; height: 18px; }

/* ---------- Modal: aviso "enviar sin menú" ---------- */
.modal-menuwarn { max-width: 440px; text-align: center; }
.modal-menuwarn .mw-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--warm-beige); color: #C39B5B;
}
.modal-menuwarn .mw-icon .icon { width: 26px; height: 26px; }
.modal-menuwarn h2 { margin-bottom: 8px; }
.mw-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 18px;
}
.mw-check input { width: 16px; height: 16px; accent-color: var(--blush-deep); cursor: pointer; }
.mw-actions { display: flex; flex-direction: column; gap: 10px; }
.mw-actions .btn .icon { width: 17px; height: 17px; }

/* Modal "¿Guardamos vuestra boda?" (migración local → cuenta): icono en salvia */
.modal-migrate .mw-icon { background: var(--sage-soft); color: var(--sage-deep); }
.modal-migrate .m-sub b { color: var(--ink); font-weight: 600; }

/* Modal de confirmación (acción destructiva): icono en rosa */
.modal-confirm .mw-icon { background: var(--blush-soft); color: var(--declined); }
.modal-confirm .m-sub b { color: var(--ink); font-weight: 600; }

/* Botón "Eliminar cuenta" en el detalle de usuario (admin) */
.user-del-btn { margin-top: 20px; color: var(--declined); border-color: var(--blush); }
.user-del-btn:hover { background: var(--blush-soft); border-color: var(--blush); }
.user-del-btn .icon { width: 16px; height: 16px; }

/* =========================================================
   Página pública del invitado (RSVP) — ruta ?rsvp=TOKEN
   ========================================================= */
.rsvp-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  padding: 40px 20px;
  background:
    radial-gradient(900px 500px at 80% -10%, var(--blush-soft) 0%, transparent 60%),
    radial-gradient(800px 460px at 0% 10%, var(--sage-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--off-white), var(--ivory));
}
.rsvp-card {
  width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 38px 32px; text-align: center;
  animation: popIn .3s ease both;
}
.rsvp-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-soft); padding: 20px 0;
}
.rsvp-loading .icon { width: 34px; height: 34px; color: var(--blush-deep); animation: pulseHeart 1.4s ease-in-out infinite; }
@keyframes pulseHeart { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }

.rsvp-eyebrow { display: inline-block; margin-bottom: 10px; }
.rsvp-couple {
  font-size: clamp(28px, 7vw, 40px); line-height: 1.1; margin: 0 0 14px;
  color: var(--ink);
}
.rsvp-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  margin-bottom: 22px;
}
.rsvp-metaitem {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--ink-soft);
}
.rsvp-metaitem .icon { width: 16px; height: 16px; color: var(--blush-deep); }
.rsvp-countdown {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 22px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--blush-soft); color: var(--blush-deep); font-size: 14px; font-weight: 600;
}
.rsvp-countdown .icon { width: 15px; height: 15px; }
.rsvp-countdown strong { font-family: var(--sans); }
.rsvp-hello { font-size: 16px; color: var(--ink); margin: 0 0 20px; line-height: 1.5; }

.rsvp-choices { display: flex; gap: 12px; margin-bottom: 18px; }
.rsvp-choice {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: var(--off-white);
  color: var(--ink-soft); font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
}
.rsvp-choice .icon { width: 17px; height: 17px; }
.rsvp-choice:hover { border-color: var(--ink-faint); transform: translateY(-1px); }
.rsvp-choice.yes.active {
  border-color: var(--confirmed); background: var(--sage-soft); color: var(--sage-deep);
}
.rsvp-choice.no.active {
  border-color: var(--declined); background: var(--blush-soft); color: var(--declined);
}

.rsvp-field { text-align: left; margin-bottom: 18px; animation: fadeIn .2s ease both; }
.rsvp-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.rsvp-field textarea { resize: vertical; min-height: 46px; }
.rsvp-opt { font-weight: 400; color: var(--ink-faint); }
.rsvp-send .icon { width: 17px; height: 17px; }
.rsvp-send.loading { opacity: .7; pointer-events: none; }
.rsvp-note { margin: 14px 0 0; font-size: 13px; color: var(--ink-faint); }

/* --- Pantalla "ya has respondido": pastilla de estado + resumen --- */
.rsvp-answer {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 16px; padding: 10px 20px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px;
}
.rsvp-answer .icon { width: 17px; height: 17px; }
.rsvp-answer.yes { background: var(--sage-soft); color: var(--sage-deep); }
.rsvp-answer.no  { background: var(--blush-soft); color: var(--declined); }
.rsvp-sum {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--off-white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 15px; margin: 0 0 6px;
}
.rsvp-sum-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink-soft); min-width: 0;
}
.rsvp-sum-item b { color: var(--ink); font-weight: 600; }
.rsvp-sum-item .icon { width: 15px; height: 15px; color: var(--blush-deep); flex: none; }

.rsvp-msg { padding: 14px 0; }
.rsvp-msg-icon {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--blush-soft); color: var(--blush-deep);
}
.rsvp-msg-icon .icon { width: 30px; height: 30px; }
.rsvp-thanks .rsvp-msg-icon { background: var(--sage-soft); color: var(--sage-deep); }
.rsvp-msg h1 { font-size: clamp(22px, 6vw, 30px); margin: 0 0 10px; color: var(--ink); }
.rsvp-msg p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }
.rsvp-foot-note { margin-top: 18px !important; font-style: italic; color: var(--blush-deep) !important; }
.rsvp-foot { font-size: 12.5px; color: var(--ink-faint); }
.rsvp-foot strong { color: var(--ink-soft); font-weight: 600; }
.rsvp-foot a:hover strong { color: var(--blush-deep); }

/* --- Selección de menú en la página del invitado --- */
.rsvp-menu { text-align: left; margin: 4px 0 18px; }
.rsvp-menu-head { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 12px; text-align: center; }
.rsvp-menu-course { margin-bottom: 14px; }
.rsvp-menu-title { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 0 0 7px; }
.rsvp-menu-opts { display: flex; flex-direction: column; gap: 7px; }
.rsvp-menu-opt {
  width: 100%; text-align: left; padding: 11px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--off-white);
  color: var(--ink); font-family: inherit; font-size: 14.5px; cursor: pointer;
  transition: all .16s ease;
}
.rsvp-menu-opt:hover { border-color: var(--ink-faint); }
.rsvp-menu-opt.active { border-color: var(--blush-deep); background: var(--blush-soft); color: var(--blush-deep); font-weight: 600; }

/* Elección de menú por plato (un desplegable por plato) en el modal Editar invitado */
.gm-field .gm-course { margin-bottom: 12px; }
.gm-field .gm-course:last-child { margin-bottom: 0; }
.gm-course-name { display: block; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin: 0 0 6px; }
.gm-course-name .opt { text-transform: none; letter-spacing: 0; }
.gm-hint { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.gm-hint .icon { width: 13px; height: 13px; }

/* =========================================================
   Módulo Menú (lado novios)
   ========================================================= */
/* PREMISA: todos los módulos comparten el MISMO ancho (.wrap → --maxw 1080px)
   y el MISMO patrón: cuadrícula de tarjetas + tarjeta punteada de "añadir"
   (igual que las mesas del banquete). Sin cabeceras decorativas. */
.menu-view { padding-top: 18px; }
.menu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px; align-items: start;
}
.menu-course {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 18px;
}
/* Editor de menú compacto: inputs más bajos y menos huecos */
.menu-course .input { padding: 9px 12px; font-size: 14px; }
.menu-course-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* Nombre del plato: mismo estilo que el nombre de una mesa (serif, sin caja) */
.menu-course-name {
  flex: 1 1 auto; min-width: 0; width: 100%;
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 2px 6px; margin-left: -6px;
  transition: border-color .2s ease, background .2s ease;
}
.menu-course-name::placeholder { color: var(--ink-faint); }
.menu-course-name:hover { border-color: var(--line-strong); }
.menu-course-name:focus { outline: none; background: var(--ivory); border-color: var(--blush-deep); }
.menu-course-del {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ink-faint); transition: background .2s ease, color .2s ease;
}
.menu-course-del:hover { background: var(--blush-soft); color: var(--declined); }
.menu-course-del .icon { width: 15px; height: 15px; }
.menu-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.menu-opt { display: flex; align-items: center; gap: 9px; }
.menu-opt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sand); }
.menu-opt-name { flex: 1 1 auto; }
.menu-opt-del {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--ink-faint); transition: background .2s ease, color .2s ease;
}
.menu-opt-del:hover { background: var(--blush-soft); color: var(--declined); }
.menu-opt-del .icon { width: 14px; height: 14px; }
.menu-add-opt {
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--sage-deep); padding: 4px 2px; cursor: pointer;
}
.menu-add-opt .icon { width: 15px; height: 15px; }
/* Tarjeta punteada "Añadir plato" (reutiliza .add-table-card del banquete) */
.add-course-card { min-height: 170px; }
.add-course-card small { color: var(--ink-faint); font-size: 12.5px; margin-top: -6px; }

/* Resumen de elecciones (catering) */
.menu-summary {
  margin-top: 18px; padding: 16px; border-radius: var(--r-md);
  background: var(--off-white); border: 1px solid var(--line);
}
.menu-summary-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.menu-summary-title .icon { width: 16px; height: 16px; color: var(--blush-deep); }
.msum-course { margin-bottom: 12px; }
.msum-title { font-size: 13.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.msum-opts { display: flex; flex-wrap: wrap; gap: 7px; }
.msum-opt {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 11px;
}
.msum-opt b { color: var(--ink); font-family: var(--sans); }
.msum-pending { color: var(--ink-faint); }
.msum-pending b { color: var(--pending); }

/* Fila de herramientas (CSV / PDF) */
.guests-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  padding: 8px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--card);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tool-btn:hover { background: var(--warm-beige); color: var(--ink); border-color: var(--line-strong); }
.tool-btn .icon { width: 16px; height: 16px; color: var(--ink-faint); }

/* Conmutador de vista en Invitados (icono compacto: tarjetas / lista) */
.guest-view-switch { flex: none; padding: 3px; gap: 2px; }
.guest-view-switch .view-tab {
  min-width: 0; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
}
.guest-view-switch .view-tab .icon { width: 18px; height: 18px; }

/* Barra de acciones masivas (vista lista) */
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px;
  flex-wrap: wrap; margin: -2px 0 14px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  animation: fadeUp .25s ease both;
}
.bulk-bar[hidden] { display: none; }
.bulk-allwrap { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.bulk-allwrap input { width: 17px; height: 17px; accent-color: var(--blush-deep); cursor: pointer; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--card);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bulk-btn:hover { background: var(--warm-beige); color: var(--ink); }
.bulk-btn .icon { width: 15px; height: 15px; }
.bulk-btn.danger { color: var(--declined); border-color: var(--blush-soft); }
.bulk-btn.danger:hover { background: var(--blush-soft); color: var(--declined); }

/* Vista lista: un invitado por línea, compacta */
.guest-list-table {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden;
}
.glt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-top: 1px solid var(--line);
}
.glt-row:first-child { border-top: none; }
.glt-row.selected { background: var(--blush-soft); }
.glt-head {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); background: var(--off-white); animation: none;
  padding-top: 9px; padding-bottom: 9px;
}
.glt-check { flex: 0 0 24px; display: grid; place-items: center; }
.glt-check input { width: 17px; height: 17px; accent-color: var(--blush-deep); cursor: pointer; }
.glt-couple { color: var(--blush-deep); display: grid; place-items: center; }
.glt-couple .icon { width: 15px; height: 15px; }
.glt-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; }
.glt-avatar { width: 28px; height: 28px; font-size: 13px; }
.glt-name-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
}
.glt-group {
  flex: 0 0 140px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glt-status { flex: 0 0 132px; }
.glt-act { flex: 0 0 96px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.glt-head .glt-status { font-weight: 600; }
/* Cada título sigue la alineación de su columna: Invitado/Grupo/Estado a la
   izquierda (como su contenido) y Acciones centrado (los botones van centrados,
   heredado del justify-content de .glt-act). */

/* Stepper de plazas (modal invitado) */
.stepper { display: flex; align-items: center; gap: 8px; }
.step-btn {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-strong); background: var(--card);
  font-size: 20px; line-height: 1; color: var(--ink); display: grid; place-items: center;
  transition: background .2s ease, border-color .2s ease;
}
.step-btn:hover { background: var(--warm-beige); border-color: var(--blush-deep); }
.step-input { width: 64px; text-align: center; }
.field-hint { font-size: 12px; color: var(--ink-faint); margin: 6px 0 0; }
.modal-guest { max-width: 520px; }

/* Plazas en silla del plano y en la fila de mesa (tarjetas) */
.chair-seats {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--ink); color: #fff; font-family: var(--sans);
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px #fffdf9;
}
.chair-avatar { position: relative; }
.s-seats { font-size: 11px; font-weight: 700; color: var(--sage-deep); }
.group-static {
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  cursor: default;
}

/* La pastilla de estado dentro de la tarjeta, aún más compacta */
.guest-card .status-pill .select-sm {
  padding: 5px 26px 5px 11px; font-size: 12px;
  background-position: right 9px center;
}
.guest-card .status-pill .status-static {
  display: inline-flex; align-items: center;
  padding-right: 11px; cursor: default;
  background-image: none;
}

/* Pastilla de estado (selector) */
.status-pill { position: relative; }
.status-pill .select-sm {
  font-weight: 500; border: none; color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.st-pending  .select-sm { background-color: var(--pending); }
.st-confirmed .select-sm { background-color: var(--confirmed); }
.st-declined  .select-sm { background-color: var(--declined); }

/* =========================================================
   Desplegable PROPIO (sustituye al <select> nativo)
   ========================================================= */
.status-trigger, .group-trigger, .select-trigger {
  font-family: inherit; -webkit-appearance: none; appearance: none;
}
/* Disparador de ESTADO = pastilla de color con chevron */
.status-trigger {
  display: inline-flex; align-items: center; gap: 2px;
  border: none; cursor: pointer; color: #fff;
  font-size: 13px; font-weight: 500; border-radius: var(--r-pill);
  padding: 8px 9px 8px 14px; transition: filter .15s ease, box-shadow .15s ease;
}
.status-trigger.st-pending  { background: var(--pending); }
.status-trigger.st-confirmed { background: var(--confirmed); }
.status-trigger.st-declined  { background: var(--declined); }
.status-trigger:hover { filter: brightness(.97); }
.status-trigger .chevron { width: 15px; height: 15px; opacity: .9; }
.guest-card .status-trigger { padding: 5px 7px 5px 11px; font-size: 12px; }
.guest-card .status-trigger .chevron { width: 14px; height: 14px; }

/* Disparador de GRUPO = chip con punto + chevron (usa .group-pill de base) */
.group-trigger {
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  padding-right: 7px; min-width: 0; max-width: 100%;
}
.group-trigger .gp-label { line-height: 1.5; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En la vista lista el grupo va dentro de su columna (140px): que no la desborde */
.glt-group .group-trigger { max-width: 100%; }
.group-trigger .chevron { width: 13px; height: 13px; color: var(--ink-soft); }
.group-trigger.dd-open, .status-trigger.dd-open { box-shadow: 0 0 0 3px rgba(215,165,158,.22); }

/* Disparadores de la barra de alta (aspecto .select) */
.select-trigger {
  display: inline-flex; align-items: center; gap: 7px; text-align: left;
  background-image: none; padding-right: 14px;
}
.select-trigger .pill-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .chevron { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.select-trigger .group-dot { flex: none; }
.select-trigger.dd-open { border-color: var(--blush-deep); box-shadow: 0 0 0 4px rgba(215,165,158,.18); }

/* Popover con las opciones */
.choice-popover {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 6px; z-index: 1400; max-height: 280px; overflow-y: auto;
  animation: popIn .16s ease both;
}
.choice-opt {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 14px; color: var(--ink); text-align: left; background: none; border: none;
  font-family: inherit; transition: background .15s ease;
}
.choice-opt:hover { background: var(--warm-beige); }
.choice-opt.active { background: var(--blush-soft); color: var(--blush-deep); font-weight: 600; }
.choice-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.choice-lbl { flex: 1 1 auto; }
.choice-check { display: inline-flex; color: var(--blush-deep); }
.choice-check .icon { width: 15px; height: 15px; }
/* Botón eliminar grupo dentro de la opción */
.choice-del {
  flex: none; width: 26px; height: 26px; border-radius: 7px; margin-left: 2px;
  display: grid; place-items: center; color: var(--ink-faint);
  opacity: .5; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.choice-opt:hover .choice-del { opacity: 1; }
.choice-del:hover { background: var(--blush-soft); color: var(--declined); }
.choice-del .icon { width: 15px; height: 15px; }
.choice-opt.sentinel {
  color: var(--sage-deep); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: 2px;
}
.choice-opt.sentinel:hover { background: var(--sage-soft); }
/* Fila de creación inline (input + validar), sustituye a "Crear grupo…" */
.choice-create {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px; border-top: 1px solid var(--line); margin-top: 2px;
}
.choice-create-input {
  flex: 1 1 auto; min-width: 0; font-family: inherit;
  padding: 8px 10px; font-size: 13.5px; color: var(--ink);
  background: var(--off-white); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
}
.choice-create-input:focus { outline: none; border-color: var(--blush-deep); box-shadow: 0 0 0 3px rgba(215,165,158,.18); }
.choice-create-ok {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--sage); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease;
}
.choice-create-ok:hover { background: var(--sage-deep); }
.choice-create-ok .icon { width: 17px; height: 17px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  transition: background .2s ease, color .2s ease;
}
.icon-btn:hover { background: var(--blush-soft); color: var(--declined); }

/* Línea de ayuda cuando un módulo está VACÍO (desaparece al crear contenido) */
.module-hint { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }
.tables-grid .module-hint, .projects-grid .module-hint { grid-column: 1 / -1; margin: 0; }

/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */
.empty {
  text-align: center; padding: 64px 24px;
  background: var(--card); border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.empty .e-art {
  width: 88px; height: 88px; border-radius: 50%;
  margin: 0 auto 22px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blush-soft), var(--sage-soft));
  color: var(--blush-deep);
  animation: floaty 6s ease-in-out infinite;
}
.empty h3 { font-size: 27px; margin-bottom: 8px; }
.empty p { color: var(--ink-soft); max-width: 40ch; margin: 0 auto 24px; }

/* Panel sin boda activa: mismo bloque .empty, centrado con aire arriba */
.dash-empty { margin-top: 44px; }
.dash-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   MÓDULO BANQUETE
   ========================================================= */
.banquet-layout {
  display: grid; grid-template-columns: 290px 1fr; gap: 22px;
  align-items: start; padding-bottom: 70px;
}

/* Panel de invitados sin mesa: fijo en pantalla, con scroll propio.
   El appbar mide 64px; dejamos un margen para que el panel respire. */
.unseated {
  position: sticky; top: 80px;
  max-height: calc(100vh - 80px - 20px);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
}
.unseated h3 { font-size: 21px; margin-bottom: 4px; flex: none; }
.unseated .u-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; flex: none; }
/* La lista interna es lo único que scrollea */
.unseated-list {
  display: flex; flex-direction: column; gap: 9px; min-height: 60px;
  overflow-y: auto; flex: 1;
  margin: 0 -8px; padding: 2px 8px;       /* deja aire para la barra de scroll */
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.unseated-list::-webkit-scrollbar { width: 8px; }
.unseated-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.unseated-list::-webkit-scrollbar-track { background: transparent; }

.guest-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--warm-beige); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 8px 12px;
  cursor: grab; user-select: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.guest-chip:hover { background: var(--sand); box-shadow: var(--shadow-sm); }
.guest-chip:active { cursor: grabbing; }
.guest-chip.selected {
  background: #fff; border-color: var(--blush-deep);
  box-shadow: 0 0 0 3px rgba(215,165,158,.22);
}
.guest-chip.dragging { opacity: .4; }
.guest-chip .gc-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 13px; font-weight: 600;
}
.guest-chip .gc-name { font-size: 14px; font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Banner de "modo colocar" */
.place-hint {
  display: none;
  align-items: center; gap: 9px;
  background: var(--blush-soft); color: var(--blush-deep);
  border: 1px dashed var(--blush-deep);
  border-radius: var(--r-md); padding: 11px 15px; font-size: 13.5px; font-weight: 500;
  margin-bottom: 14px; flex: none;
}
.placing .place-hint { display: flex; animation: fadeUp .3s ease both; }

/* Rejilla de mesas */
.tables-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px;
}
.table-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.table-card.drop-target,
.placing .table-card:hover {
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(139,156,128,.2);
}
/* Mesa llena al arrastrar encima: aviso visual discreto en rosa */
.table-card.drop-full {
  border-color: var(--declined);
  box-shadow: 0 0 0 3px rgba(201,154,147,.22);
}
.table-card.full { opacity: .92; }
.table-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.table-name {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 2px 6px; margin-left: -6px; width: 100%;
  transition: border-color .2s ease, background .2s ease;
}
.table-name:hover { border-color: var(--line-strong); }
.table-name:focus { outline: none; background: var(--ivory); border-color: var(--blush-deep); }
.table-cap {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-soft); white-space: nowrap;
}
.table-cap input {
  width: 38px; text-align: center; border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 4px; font-size: 13px; color: var(--ink); background: var(--card);
}
.table-cap input:focus { outline: none; border-color: var(--sage-deep); }
.cap-bar { height: 5px; border-radius: 4px; background: var(--warm-beige); overflow: hidden; margin: 12px 0 14px; }
.cap-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sage), var(--sage-deep)); transition: width .35s ease; }
.cap-bar.over .cap-fill { background: linear-gradient(90deg, var(--declined), var(--blush-deep)); }

.seat-list { display: flex; flex-direction: column; gap: 7px; min-height: 30px; }
.seat {
  display: flex; align-items: center; gap: 9px;
  background: var(--sage-soft); border-radius: var(--r-pill);
  padding: 6px 8px 6px 6px; font-size: 13.5px;
  cursor: grab; user-select: none;
  transition: box-shadow .2s ease, opacity .2s ease, transform .2s ease, background .2s ease;
}
.seat:hover { box-shadow: var(--shadow-sm); }
.seat:active { cursor: grabbing; }
.seat.dragging {
  opacity: .72;
  transform: rotate(-2deg) scale(1.02);
  box-shadow: 0 10px 22px rgba(120,98,74,.18);
}
.seat.reorder-target {
  position: relative;
  box-shadow: 0 0 0 3px rgba(215,165,158,.22);
  background: var(--blush-soft);
  transform: translateY(5px);
}
.seat.reorder-target::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: -7px;
  height: 3px; border-radius: 999px;
  background: var(--blush-deep);
  box-shadow: 0 3px 8px rgba(215,165,158,.3);
}
.seat.seat-placed {
  animation: settleSeat .28s ease both;
}
.seat .s-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 12px; font-weight: 600;
}
.seat .s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.seat .s-remove { color: var(--sage-deep); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.seat .s-remove:hover { background: rgba(255,255,255,.6); color: var(--declined); }
.seat-empty { font-size: 13px; color: var(--ink-faint); text-align: center; padding: 8px 0; }

.table-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.table-foot .t-count { font-size: 12.5px; color: var(--ink-faint); }
.table-foot .t-del { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
.table-foot .t-del:hover { color: var(--declined); }

.add-table-card {
  border: 1px dashed var(--line-strong); background: transparent;
  border-radius: var(--r-lg); min-height: 200px;
  display: grid; place-items: center; align-content: center; gap: 12px;
  color: var(--ink-soft); transition: border-color .2s ease, background .2s ease, color .2s ease;
  cursor: pointer;
}
.add-table-card:hover { border-color: var(--sage-deep); background: var(--sage-soft); color: var(--sage-deep); }
.add-table-card .at-circle {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--card); display: grid; place-items: center; box-shadow: var(--shadow-sm);
}

/* ---------- Vista plano del banquete ---------- */
.plan-layout { align-items: start; }
.plan-workspace { min-width: 0; }
.floor-canvas {
  position: relative; min-height: 640px; overflow: hidden;
  background: var(--off-white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
/* Papelera a la IZQUIERDA (cerca de las mesas que se arrastran) y zoom a la derecha. */
.floor-toolbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: rgba(255,253,249,.88);
  border-bottom: 1px solid var(--line);
}
.floor-label {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
}
.zoom-controls {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--card);
  box-shadow: var(--shadow-sm);
}
.zoom-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft); font-size: 18px; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.zoom-btn:hover { background: var(--sage-soft); color: var(--sage-deep); }
.zoom-value {
  min-width: 48px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.floor-scroll {
  height: 620px; overflow: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
/* Mientras se arrastra con la rueda para desplazarse por el plano */
.floor-scroll.panning { cursor: grabbing; }
.floor-scroll.panning * { pointer-events: none; }
.floor-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.floor-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; }
.floor-scroll::-webkit-scrollbar-track { background: transparent; }
.floor-space { position: relative; }
.floor-stage {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  background:
    linear-gradient(rgba(236,227,214,.78) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,227,214,.78) 1px, transparent 1px),
    #fffdf9;
  background-size: 44px 44px;
}
.floor-grid {
  position: absolute; inset: 22px;
  border: 1px dashed rgba(224,212,194,.9);
  border-radius: 24px; pointer-events: none;
}
.floor-table {
  position: absolute; width: 220px; height: 220px;
  cursor: grab; user-select: none; touch-action: none;
  transition: filter .2s ease, transform .16s ease;
}
/* Solo la mesa NUEVA aparece (fade, sin transform para no chocar con la rotación) */
.floor-table.card-enter { animation: fadeIn .34s ease both; }
.floor-table:hover { transform: translateY(-1px); filter: drop-shadow(0 8px 16px rgba(120, 98, 74, 0.12)); }
/* La mesa activa (hover/moviéndose/girando) por delante para que sus botones (editar/
   girar) no queden tapados por una mesa vecina solapada. */
.floor-table:hover, .floor-table.moving, .floor-table.rotating { z-index: 10; }
.floor-table:active, .floor-table.moving { cursor: grabbing; }
.floor-table.drop-target,
.floor-canvas.placing .floor-table:hover {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 12px rgba(139,156,128,.42));
}
.floor-table.drop-full {
  filter: drop-shadow(0 0 12px rgba(201,154,147,.48));
}
.floor-table.full .ft-count { color: var(--declined); }
.plan-table-object { position: relative; width: 220px; height: 220px; }
.plan-table-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 122px; height: 122px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 3px;
  text-align: center; padding: 18px 14px;
  background: rgba(255,253,249,.96);
  border: 1.3px solid var(--ink-faint);
  box-shadow: 0 10px 24px rgba(120, 98, 74, 0.10), inset 0 2px 8px rgba(255,255,255,.72);
}
.ft-name {
  max-width: 100px;
  font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink);
  text-align: center; line-height: 1.12; word-break: break-word;
  /* Hasta dos líneas, centrado y sin cortar palabras de dos términos */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ft-count { font-size: 12px; color: var(--sage-deep); font-weight: 600; }
.plan-chairs { position: absolute; inset: 0; }
.plan-chair {
  position: absolute; left: 50%; top: 50%;
  width: 58px; min-height: 46px;
  display: grid; justify-items: center; align-content: start; gap: 3px;
  /* El radio (--seat-radius) crece con el nº de sillas para que no se solapen. */
  transform: translate(-50%, -50%) rotate(var(--seat-angle)) translate(var(--seat-radius, 86px)) rotate(calc(var(--seat-angle) * -1));
}
/* Silla vacía: solo un círculo pequeño, sin caja ni alto reservado */
.plan-chair.vacant { width: 30px; min-height: 0; cursor: default; }
.chair-empty,
.chair-avatar {
  border-radius: 50%;
  display: grid; place-items: center;
}
.chair-avatar {
  width: 38px; height: 38px;
  border: 1.2px solid rgba(255,255,255,.85);
  color: #fff; font-family: var(--serif); font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 10px rgba(120,98,74,.16);
}
.chair-empty {
  width: 24px; height: 24px;
  border: 1.4px dashed var(--ink-faint);
  background: rgba(255,253,249,.5);
}
.chair-name {
  max-width: 70px; padding: 1px 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 7px; background: rgba(255,253,249,.92);
  border: 1px solid rgba(236,227,214,.9);
  font-size: 10.5px; line-height: 1.25; color: var(--ink);
}
.plan-chair.filled { cursor: grab; }
.plan-chair.filled:active { cursor: grabbing; }
.plan-chair.filled.selected .chair-avatar {
  box-shadow: 0 0 0 3px rgba(215,165,158,.22), 0 4px 10px rgba(120,98,74,.16);
}
.plan-chair.seat-drop-target .chair-empty {
  border-color: var(--sage-deep);
  background: var(--sage-soft);
  box-shadow:
    0 0 0 5px rgba(139,156,128,.26),
    0 0 0 11px rgba(139,156,128,.12),
    0 6px 14px rgba(120,98,74,.16);
}
.plan-chair.seat-drop-target .chair-empty::after {
  content: "";
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--sage-deep);
}
.plan-chair.reorder-target .chair-avatar {
  transform: scale(1.08);
  box-shadow:
    0 0 0 5px rgba(215,165,158,.32),
    0 0 0 11px rgba(215,165,158,.14),
    0 6px 14px rgba(120,98,74,.18);
}
/* Silla ocupada sobre la que no se permite soltar (viene de fuera de la mesa) */
.plan-chair.seat-blocked { cursor: not-allowed; }
.plan-chair.seat-blocked .chair-avatar {
  box-shadow:
    0 0 0 4px rgba(201,154,147,.4),
    0 0 0 9px rgba(201,154,147,.16),
    0 6px 14px rgba(120,98,74,.18);
}
.plan-extra {
  position: absolute; right: 24px; bottom: 28px;
  min-width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.floor-empty-add {
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%); width: 220px; min-height: 180px;
  background: rgba(255,253,249,.74);
}

/* ---------- Mesas RECTANGULARES en el plano ---------- */
/* El tamaño (ancho×alto) lo fija JS en línea: la mesa se alarga con las plazas.
   El núcleo (la superficie) ABARCA todo el ancho para que las sillas queden sobre
   sus bordes y no fuera de la mesa. */
.shape-rect2 .plan-table-core, .shape-rect1 .plan-table-core {
  left: 26px; right: 26px; width: auto; height: auto; transform: none;
  border-radius: 16px; padding: 6px 14px;
}
/* Insets del cuerpo (deben coincidir con RECT_CORE en views.js). */
.shape-rect2 .plan-table-core { top: 50px; bottom: 50px; }       /* bar central; sillas arriba y abajo */
.shape-rect1 .plan-table-core { top: 50px; bottom: 16px; }       /* sillas arriba; cuerpo de la mesa debajo */
.shape-rect2 .ft-name, .shape-rect1 .ft-name { font-size: 15px; max-width: none; }
/* El avatar del invitado SIEMPRE por delante del cuerpo de la mesa (nunca debajo). */
.plan-chairs { z-index: 2; }
.plan-table-core { z-index: 1; }
/* Sillas rectangulares: ancladas al borde de la mesa (no centradas). El hueco entre
   avatar y nombre (--label-gap) crece al girar para que el nombre no pise el avatar. */
.shape-rect2 .plan-chair, .shape-rect1 .plan-chair { gap: var(--label-gap, 3px); }
.shape-rect2 .plan-chair.chair-top, .shape-rect1 .plan-chair.chair-top {
  transform: translate(-50%, -100%); align-content: end;   /* avatar abajo (pegado a la mesa), nombre encima */
}
.shape-rect2 .plan-chair.chair-bottom, .shape-rect1 .plan-chair.chair-bottom {
  transform: translate(-50%, 0); align-content: start;     /* avatar arriba (pegado a la mesa), nombre debajo */
}

/* Redondas: el avatar va centrado EXACTO sobre el radio; el nombre flota fuera
   (posición absoluta) para no desplazar el avatar y que ninguno se solape. */
.shape-round .plan-chair { align-content: center; min-height: 0; }
.shape-round .plan-chair .chair-name {
  position: absolute; left: 50%; transform: translateX(-50%); margin: 0; max-width: 78px;
}
.shape-round .plan-chair.chair-top .chair-name { bottom: calc(100% + 3px); }
.shape-round .plan-chair.chair-bottom .chair-name { top: calc(100% + 3px); }

/* ---------- Rotación de mesas (rectangulares) ---------- */
/* Gira la mesa+sillas; el texto se contra-rota para seguir legible. */
.plan-table-object { transform: rotate(var(--rot, 0deg)); transition: transform .2s ease; }
/* El texto se contra-rota EN BLOQUE (número arriba, nombre abajo) para que no se
   solape ni se ponga de lado cuando la mesa está girada. */
.ft-label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ft-label, .chair-name { transform: rotate(calc(var(--rot, 0deg) * -1)); }
/* Mientras se arrastra el giro, sin transición para que siga al dedo/ratón. */
.floor-table.rotating .plan-table-object { transition: none; }
.table-rotate {
  position: absolute; top: -12px; right: -12px; z-index: 6;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--sage-deep);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
  opacity: .6; cursor: grab; touch-action: none;
  transition: opacity .15s ease, background .2s ease;
}
.floor-table:hover .table-rotate, .table-rotate:focus-visible { opacity: 1; }
.table-rotate:hover { background: var(--sage-soft); }
.table-rotate:active, .floor-table.rotating .table-rotate { cursor: grabbing; opacity: 1; background: var(--sage-soft); }
.table-rotate .icon { width: 15px; height: 15px; }

/* Botón de editar mesa (lápiz), arriba a la izquierda — en las tres formas */
.table-edit {
  position: absolute; top: -12px; left: -12px; z-index: 6;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--blush-deep);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
  opacity: .6; cursor: pointer; transition: opacity .15s ease, background .2s ease;
}
.floor-table:hover .table-edit, .table-edit:focus-visible { opacity: 1; }
.table-edit:hover { background: var(--blush-soft); }
.table-edit .icon { width: 14px; height: 14px; }

/* Pista del lienzo vacío (ya no es un botón: se arrastra una mesa desde la izquierda) */
.floor-empty-hint {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 240px; display: grid; place-items: center; gap: 12px; text-align: center;
  color: var(--ink-soft); padding: 26px; border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg); background: rgba(255,253,249,.74);
}
.floor-empty-hint small { color: var(--ink-faint); font-size: 12.5px; }
.floor-empty-hint .at-circle {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--card); display: grid; place-items: center; box-shadow: var(--shadow-sm);
}

/* Botones de tipo de mesa: se arrastran al plano */
.table-type-btn { cursor: grab; }
.table-type-btn:active { cursor: grabbing; }
.table-type-btn.dragging { opacity: .5; }
/* Pista visual al arrastrar una mesa nueva sobre el lienzo */
.floor-stage.drop-new { box-shadow: inset 0 0 0 3px var(--sage-deep); }

/* Papelera de mesas (vista plano): arrastra una mesa encima para eliminarla. */
.table-trash {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--ink-faint);
  border: 1.5px dashed var(--line-strong); background: var(--card);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.table-trash .icon { width: 18px; height: 18px; }
.table-trash.drag-over {
  color: var(--declined); border-color: var(--declined); border-style: solid;
  background: var(--blush-soft); transform: scale(1.14);
  box-shadow: 0 0 0 5px rgba(201,154,147,.18);
}
.floor-table.over-trash { opacity: .5; filter: drop-shadow(0 0 10px rgba(201,154,147,.5)); }

/* ---------- Barra superior en vista Tarjetas (solo el conmutador) ---------- */
.banquet-view { padding-top: 18px; }
.banquet-bar { display: flex; align-items: center; margin-bottom: 16px; }

/* ---------- Columna izquierda del plano: "Sin mesa" + tipos de mesa ---------- */
.plan-sidebar { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.plan-sidebar .unseated { max-height: calc(100vh - 300px); }
.add-types-wrap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm);
}
.add-types-label {
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 12px;
}
.table-add-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.table-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: var(--card);
  color: var(--ink-soft); font-size: 12px; font-weight: 500; text-align: center;
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}
.table-type-btn:hover { border-color: var(--sage-deep); background: var(--sage-soft); color: var(--sage-deep); transform: translateY(-2px); }
.table-type-btn .ts-icon { width: 30px; height: 30px; stroke-width: 1.5; }

/* =========================================================
   PANEL ADMIN
   ========================================================= */
.admin-head { padding-bottom: 14px; }
.admin-loading { color: var(--ink-soft); padding: 30px 4px; font-size: 14.5px; }
.btn.is-loading { opacity: .7; cursor: progress; }
.admin-notice {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--blush-soft); border: 1px solid var(--blush);
  border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 22px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}
.admin-notice .icon { width: 20px; height: 20px; color: var(--blush-deep); flex: none; margin-top: 1px; }
.admin-notice b { color: var(--ink); font-weight: 600; }

.admin-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
}
.admin-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm);
}
.ac-num { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--ink); }
.ac-lbl { font-size: 13px; color: var(--ink-soft); margin-top: 7px; }
.ac-active .ac-num { color: var(--sage-deep); }
.ac-hist .ac-num { color: var(--ink-faint); }
.ac-proj .ac-num { color: var(--blush-deep); }

.admin-table-wrap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  overflow: hidden; margin-bottom: 60px;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table thead th {
  text-align: left; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 14px 16px;
  border-bottom: 1px solid var(--line); background: var(--ivory);
}
.admin-table th.ta-num, .admin-table td.ta-num { text-align: center; }
.admin-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-row { cursor: pointer; transition: background .15s ease; }
.admin-row:hover { background: var(--warm-beige); }
.ta-email { font-weight: 500; }
.ta-muted { color: var(--ink-soft); white-space: nowrap; }
.admin-empty { text-align: center; color: var(--ink-soft); padding: 32px 16px !important; }

.user-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
}
.user-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.us-active { background: var(--sage-soft); color: var(--sage-deep); }
.us-active::before { background: var(--sage-deep); }
.us-inactive { background: var(--warm-beige); color: var(--ink-faint); }
.us-inactive::before { background: var(--ink-faint); }
.role-admin { color: var(--blush-deep); font-weight: 600; }

/* Modal detalle de usuario */
.user-modal-email { font-size: 26px; word-break: break-word; }
.user-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; margin-top: 14px;
}
.umi { background: var(--card); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.umi-label { font-size: 11.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .3px; }
.umi-value { font-size: 14px; color: var(--ink); font-weight: 500; }
.user-projects { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.user-projects li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px;
}
.up-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.up-meta { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }

/* =========================================================
   AVISO DE COOKIES + PÁGINA LEGAL
   ========================================================= */
.cookie-banner {
  /* Centrado con margin auto (NO con transform: translateX, porque la animación
     fadeUp usa transform y lo pisaba dejándolo descolocado a la derecha). */
  position: fixed; left: 0; right: 0; bottom: 18px; margin: 0 auto;
  z-index: 70; width: calc(100% - 32px); max-width: 660px;
  background: var(--off-white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 15px 18px; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
  animation: fadeUp .4s ease both;
}
.cookie-text { flex: 1 1 300px; margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.cookie-text b { color: var(--ink); font-weight: 600; }
.cookie-actions { display: flex; align-items: center; gap: 16px; flex: none; margin-left: auto; }
.cookie-more { white-space: nowrap; }

/* En móvil: ancho completo, en columna y botones repartidos (antes se quedaba a un lado). */
@media (max-width: 560px) {
  .cookie-banner {
    left: 12px; right: 12px; bottom: 12px;
    transform: none; width: auto; max-width: none;
    flex-direction: column; align-items: stretch; gap: 12px; padding: 16px;
  }
  .cookie-text { flex: none; }
  .cookie-actions { margin-left: 0; justify-content: space-between; gap: 12px; }
  .cookie-actions .btn { flex: 1; text-align: center; justify-content: center; }
}

.legal { max-width: 760px; padding-bottom: 72px; }
.legal-head { padding: 42px 0 8px; }
.legal-head h1 { font-size: clamp(30px, 5vw, 44px); }
.legal h2 { font-size: 22px; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal b { color: var(--ink); font-weight: 600; }
.legal a { color: var(--blush-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--ink); }
.legal-foot { margin-top: 30px; }

/* =========================================================
   TOASTS
   ========================================================= */
#toast-root {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff;
  padding: 13px 22px; border-radius: var(--r-pill);
  font-size: 14px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 9px;
  animation: popIn .3s ease both;
}
.toast.out { animation: fadeIn .3s ease reverse both; }
.toast svg { color: var(--sage); }

/* =========================================================
   RESPONSIVE — Mobile first refinements
   ========================================================= */
/* Tablet: invitados y proyectos en 2 columnas */
@media (max-width: 860px) {
  /* Hero en pantallas medias: imagen un poco más pequeña */
  .hero { gap: 32px; }
  .hero-media img { height: clamp(240px, 34vw, 360px); }
  .hero h1 { max-width: 16ch; }
  .values { grid-template-columns: 1fr; gap: 16px; padding-bottom: 60px; }
  .admin-cards { grid-template-columns: repeat(2, 1fr); }
  .admin-table-wrap { overflow-x: auto; }
  .admin-table { min-width: 560px; }
  .banquet-layout { grid-template-columns: 1fr; }
  .floor-canvas { min-height: 520px; }
  .floor-scroll { height: 520px; }
  /* En móvil el panel "sin mesa" se apila pero sigue siendo compacto con scroll propio */
  .unseated, .plan-sidebar .unseated { position: static; max-height: none; }
  .unseated-list {
    flex-direction: row; flex-wrap: wrap;
    max-height: 200px; margin: 0; padding: 2px;
  }
  .unseated-list .guest-chip { flex: 0 1 auto; }
  .guest-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

/* En móvil: ocultamos la ilustración y dejamos solo el texto (a ancho completo). */
@media (max-width: 760px) {
  .hero { display: block; margin: 4px auto 30px; }
  .hero-media { display: none; }
  .hero-text { flex: none; padding: 6px 0 0; }
  .hero h1 { max-width: 18ch; font-size: clamp(32px, 8vw, 44px); }
}

/* Header compacto con pestañas en pantallas medias */
@media (max-width: 720px) {
  .appbar .brand .name { font-size: 18px; }
  .add-bar.compact { grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); }
  .add-bar.compact #g-name { grid-column: 1 / -1; }
  .add-bar.compact .btn { grid-column: 1 / -1; }
}

/* Landing en móvil: la topbar solo muestra la sesión (el CTA grande ya está en el hero) */
@media (max-width: 640px) {
  .topbar { padding: 20px 0; }
  .landing-bg .brand .name { font-size: 21px; }
  .topbar-actions .btn-soft { display: none; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 0 16px; }
  .admin-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .user-meta-grid { grid-template-columns: 1fr; }
  .add-bar { grid-template-columns: 1fr; }
  .add-bar .btn { width: 100%; }
  .field.row { grid-template-columns: 1fr; gap: 0; }
  .field.row .field { margin-bottom: 16px; }
  .modal { padding: 32px 22px 26px; }
  .dash-head { padding: 38px 0 24px; }
  .page-head { padding: 24px 0 16px; }
  .banquet-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .banquet-head .btn { width: 100%; }
  .view-switch { width: 100%; }
  .view-tab { flex: 1; }
  /* El conmutador compacto de Invitados (iconos) NO se estira: deja sitio
     al filtro y al buscador en la misma fila (antes quedaban cortados). */
  .guest-view-switch { width: auto; flex: none; }
  .guest-view-switch .view-tab { flex: none; }
  /* Wedding desks en móvil: lista sin meta (nombre + acciones caben) */
  .pd-meta { display: none; }
  .pd-act { flex-basis: 132px; }
  .tables-grid { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  /* Invitados y proyectos: 1 columna pero igualmente compactos */
  .guest-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  /* Filtro + buscador a ancho completo bajo los contadores */
  .guests-toolbar { gap: 10px; }
  .search-group { width: 100%; }
  .search-box { min-width: 0; }
  /* Vista lista compacta: en móvil se oculta Grupo (caben nombre + estado + acciones) */
  .glt-group { display: none; }
  .glt-status { flex-basis: 120px; }
  .bulk-bar { justify-content: flex-start; }
  .bulk-actions { width: 100%; }
  .bulk-btn { flex: 1; justify-content: center; }
  .floor-canvas { min-height: 460px; }
  .floor-scroll { height: 460px; }
}

/* Appbar en móvil: todo cabe sin cortar la marca (pastilla y menú más compactos).
   La marca reclama su ancho completo; la pastilla cede unos px de centrado. */
@media (max-width: 480px) {
  .appbar-inner { gap: 8px; }
  .appbar-left { min-width: fit-content; }
  .appbar .brand .name { font-size: 15px; }
  .appbar .tabs { padding: 3px; gap: 2px; }
  .navtab { width: 40px; height: 34px; }
  .navtab .icon { width: 18px; height: 18px; }
  .menu-btn { width: 38px; height: 38px; }
}

/* =========================================================
   ACCESIBILIDAD — respeta "reducir movimiento"
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible y accesible en elementos interactivos */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blush-deep);
  outline-offset: 2px;
}