/* ===================================================================
   BASE.CSS · Sistema de diseño moderno para FIESTAS
   Inspirado en santarosa/autogestion — identidad NARANJA de la marca.
   Sólo estiliza el shell nuevo (ff-*). No pisa mio.css (subpáginas).
   =================================================================== */

:root {
  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Identidad NARANJA */
  --color-primary: #ff7b00;
  --color-primary-dark: #c85f00;
  --color-primary-darker: #9c4a00;
  --color-primary-soft: #fff1e3;

  /* Acentos de apoyo */
  --color-secondary: #2f9e5f;
  --color-secondary-dark: #217a48;
  --color-blue: #2f7fce;
  --color-purple: #7c4dbc;
  --color-teal: #189a8d;
  --color-error: #e0362f;
  --color-warning: #d68a1e;

  /* Superficies y texto */
  --color-text: #16202b;
  --color-text-muted: #6b7580;
  --color-surface: #ffffff;
  --color-surface-soft: #f3f5f6;
  --color-background: #eef1f3;
  --color-border: #d7dde2;

  /* Bordes y sombras */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 2px 8px rgba(20, 30, 45, 0.05);
  --shadow: 0 6px 20px rgba(20, 30, 45, 0.07);
  --shadow-lg: 0 14px 34px rgba(20, 30, 45, 0.12);
  --grad-orange: linear-gradient(135deg, #ff9a3d 0%, #ff7b00 55%, #ef6f00 100%);
}

/* Sólo aplicamos el reset moderno al shell nuevo para no romper mio.css */
.ff-body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ff-body *, .ff-body *::before, .ff-body *::after { box-sizing: border-box; }

/* ============================ APP BAR =============================== */
.ff-appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: 56px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  padding: 0 10px;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 4px 18px rgba(200, 95, 0, 0.28);
}
.ff-appbar-btn {
  width: 44px; height: 40px;
  border: none; background: none;
  color: #fff; font-size: 1.3rem;
  cursor: pointer; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  text-decoration: none;
}
.ff-appbar-btn:hover { background: rgba(255, 255, 255, 0.16); }
.ff-appbar-title {
  text-align: center;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(120, 55, 0, 0.35);
}
.ff-appbar-actions { display: flex; align-items: center; gap: 2px; }

/* ============================ DRAWER =============================== */
.ff-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 22, 32, 0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s;
  z-index: 40;
}
.ff-drawer-overlay.show { opacity: 1; visibility: visible; }

.ff-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 286px; max-width: 82vw;
  background: #fff;
  z-index: 50;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  box-shadow: 10px 0 34px rgba(0, 0, 0, 0.16);
  overflow-y: auto;
}
.ff-drawer.open { transform: translateX(0); }
.ff-drawer-head {
  background: var(--grad-orange);
  color: #fff;
  padding: 22px 20px 20px;
}
.ff-drawer-head .ff-drawer-fiesta {
  font-size: 1.15rem; font-weight: 800; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(120, 55, 0, 0.35);
}
.ff-drawer-head .ff-drawer-owner {
  font-size: 0.85rem; opacity: 0.92; margin-top: 3px;
}
.ff-drawer-head .ff-drawer-staff {
  font-size: 0.78rem; opacity: 0.8; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.ff-drawer-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; }
.ff-drawer-nav a, .ff-drawer-nav span {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 12px;
  border-radius: 12px;
  color: #2b3540; text-decoration: none;
  font-weight: 600; font-size: 0.97rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ff-drawer-nav a:hover, .ff-drawer-nav span:hover { background: var(--color-primary-soft); }
.ff-drawer-nav i { width: 24px; text-align: center; color: var(--color-primary); font-size: 1.05rem; }
.ff-drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 8px 14px 18px;
  padding: 13px; border: none; border-radius: 12px;
  background: #fdece0; color: var(--color-primary-dark);
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.ff-drawer-logout:hover { background: #fbe0cd; }

/* ============================ LAYOUT =============================== */
/* La app inyecta el contenido dentro de .cetro (mio.css). Reservamos el
   alto del appbar fijo acá para que subpáginas y home queden alineadas. */
.ff-app .cetro { margin-top: 56px; }
.ff-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px 40px;
}

/* ============================= HERO =============================== */
.ff-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-orange);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 22px 20px;
  margin-bottom: 20px;
  box-shadow: 0 16px 34px rgba(200, 95, 0, 0.28);
}
.ff-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 85% -10%, rgba(255,255,255,0.28) 0%, transparent 55%);
  pointer-events: none;
}
.ff-hero-eyebrow {
  position: relative;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  opacity: 0.9;
}
.ff-hero-title {
  position: relative;
  font-size: 1.7rem; font-weight: 800; line-height: 1.15;
  margin: 4px 0 6px;
  text-shadow: 0 2px 6px rgba(120, 55, 0, 0.3);
}
.ff-hero-evento {
  position: relative;
  font-size: 0.92rem; font-weight: 600; opacity: 0.95;
  margin: 0 0 4px;
}
.ff-hero-sub {
  position: relative;
  font-size: 0.98rem; opacity: 0.95;
}

/* ========================== COUNTDOWN ============================= */
.ff-countdown {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin-bottom: 24px;
  text-align: center;
  border: 1px solid rgba(20, 30, 45, 0.05);
}
.ff-countdown-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--color-primary);
  margin-bottom: 12px;
}
.ff-countdown .hora {
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
}
.ff-countdown .hora > div {
  display: flex; flex-direction: column; align-items: center;
  min-width: 52px;
  background: var(--color-primary-soft);
  border-radius: 12px;
  padding: 8px 6px;
}
.ff-countdown .hora1 {
  font-size: 1.6rem; font-weight: 800; color: var(--color-primary-dark);
  line-height: 1;
}
.ff-countdown .hora2 {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 1px;
  color: var(--color-text-muted); margin-top: 4px;
}
/* separadores ":" del countdown legacy */
.ff-countdown .hora > div:has(.hora1:only-child) {
  background: none; min-width: 8px; padding: 0 2px;
  color: var(--color-primary); justify-content: center;
}
.ff-countdown .dia { margin-right: 0; }

/* =========================== SECCIÓN ============================== */
.ff-section-title {
  font-size: 1.15rem; font-weight: 800; color: var(--color-text);
  margin: 0 0 14px;
}

/* ======================== CARDS DE ACCESO ======================== */
.ff-quick { display: flex; flex-direction: column; gap: 12px; }
.ff-card {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ff-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ff-card:active { transform: translateY(0); }
.ff-card-icon {
  flex-shrink: 0; width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.ff-card-icon.orange { background: #fdeee1; color: #e5823a; }
.ff-card-icon.green  { background: #e4f3ea; color: #2f9e5f; }
.ff-card-icon.blue   { background: #e6f0fb; color: #2f7fce; }
.ff-card-icon.purple { background: #efe8fb; color: #7c4dbc; }
.ff-card-icon.teal   { background: #e1f3f1; color: #189a8d; }
.ff-card-icon.red    { background: #fde8e7; color: #e0362f; }
.ff-card-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ff-card-title { font-size: 1.02rem; font-weight: 700; color: #1b2733; }
.ff-card-desc { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.3; }
.ff-card-chev { color: #c2cad1; font-size: 1.4rem; flex-shrink: 0; }

/* ============================ BOTONES ============================= */
.ff-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ff-btn-primary {
  background: var(--grad-orange); color: #fff;
  box-shadow: 0 8px 20px rgba(255, 123, 0, 0.35);
  width: 100%;
}
.ff-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 123, 0, 0.42); }
.ff-btn-default {
  background: #f1f3f5; color: var(--color-text);
  width: 100%;
}
.ff-btn-default:hover { background: #e6e9ec; }

/* ============================= LOGIN ============================= */
.ff-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  position: relative;
  background:
    linear-gradient(135deg, rgba(156, 74, 0, 0.86), rgba(255, 123, 0, 0.74)),
    url('ico/splash.jpg') center / cover no-repeat;
}
.ff-login-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 34px 26px 30px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.ff-login-badge {
  width: 88px; height: 88px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--grad-orange);
  box-shadow: 0 10px 26px rgba(255, 123, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.ff-login-logo { width: 52px; height: auto; display: block; }
.ff-login-title {
  font-size: 1.35rem; font-weight: 800; color: var(--color-text);
  margin: 6px 0 2px;
}
.ff-login-sub { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 22px; }
.ff-field { position: relative; margin-bottom: 14px; text-align: left; }
.ff-field i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); font-size: 0.95rem;
}
.ff-input {
  width: 100%;
  padding: 13px 14px 13px 42px;
  font-family: inherit; font-size: 0.98rem;
  color: var(--color-text);
  background: #f8fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ff-input::placeholder { color: #9aa2ab; }
.ff-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.16);
}
/* ==================== SELECTOR DE FIESTA (post-login) ==================== */
.ff-fiesta-picker {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 50vh; overflow-y: auto;
  margin-bottom: 4px;
}
.ff-fiesta-picker-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left;
  padding: 13px 14px;
  font-family: inherit; cursor: pointer;
  background: #f8fafb;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.ff-fiesta-picker-item:hover { background: #fff; border-color: var(--color-primary); }
.ff-fiesta-picker-nombre { font-weight: 700; color: var(--color-text); }
.ff-fiesta-picker-sub { font-size: 0.82rem; color: var(--color-text-muted); }
.ff-fiesta-picker-vacio { color: var(--color-text-muted); font-size: 0.9rem; padding: 10px 0; }

.ff-login-error {
  display: none;
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: #fde8e7; color: #a11c16;
  border: 1px solid #f6cfcc; border-radius: var(--radius);
  font-size: 0.85rem; font-weight: 600;
}

/* ========================== RESPONSIVE =========================== */
@media (max-width: 480px) {
  .ff-hero-title { font-size: 1.45rem; }
  .ff-appbar-title { font-size: 0.95rem; }
  .ff-countdown .hora > div { min-width: 46px; }
  .ff-countdown .hora1 { font-size: 1.35rem; }
}

@media (min-width: 620px) {
  .ff-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}

/* En desktop el contenido del appbar se agrupa a una columna de 640px
   centrada (el fondo naranja sigue full-width), igual que santarosa. */
@media (min-width: 660px) {
  .ff-appbar {
    padding-left: calc((100% - 640px) / 2);
    padding-right: calc((100% - 640px) / 2);
  }
}

/* ===================================================================
   MODERNIZACIÓN DE SUBPÁGINAS LEGACY (clases de mio.css)
   Scopeado a .ff-app para no afectar el login. Sólo color/forma/sombra:
   no se toca posicionamiento ni dimensiones de las que depende el JS.
   =================================================================== */

.ff-app .soloweb { font-family: 'Inter', -apple-system, sans-serif; }

/* Respiro lateral en el contenido de los listados */
.ff-app .cetro { padding-left: 12px; padding-right: 12px; }
@media (min-width: 880px) { .ff-app .cetro { padding-left: 0; padding-right: 0; } }

/* Barra superior del listado (add + totales) */
.ff-app .mtop { background: transparent; }

/* Botón AGREGAR (+) — de celeste plano a pill naranja */
.ff-app .badd {
  background: var(--grad-orange);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 123, 0, 0.35);
  font-weight: 700;
  padding: 9px 16px;
  width: auto;
  min-width: 96px;
  letter-spacing: 0.3px;
}

/* Tabla de TOTALES → tarjeta redondeada */
.ff-app .totales table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20, 30, 45, 0.06);
}
.ff-app .totales td { padding: 7px 10px; }
.ff-app .totales .naran { background: var(--grad-orange); color: #fff; font-weight: 700; }
.ff-app .totales .confok { color: var(--color-secondary); font-weight: 800; }

/* Tabs CENA / BAILE (y WEB / TANDAS) → pills */
.ff-app .cenabaile { margin-bottom: 70px; }
.ff-app .bcena, .ff-app .bbaile {
  border-radius: 12px;
  height: auto;
  padding: 12px 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s;
}
.ff-app .bcena:hover, .ff-app .bbaile:hover { transform: translateY(-1px); }

/* Listado de mesas / invitados (acordeón) */
.ff-app .listamesa_mesa {
  background: #fff;
  border: 1px solid rgba(20, 30, 45, 0.07);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ff-app .listamesa_mesa_tareas {
  background: linear-gradient(135deg, #3a444f, #2b333c);
  color: #fff;
  border-radius: 12px;
  margin-bottom: 8px;
  border: none;
  box-shadow: var(--shadow-sm);
}
.ff-app .mesalolo { font-weight: 800; color: var(--color-primary-dark); }
.ff-app .sillaslolo { color: var(--color-text-muted) !important; font-weight: 600; }
.ff-app .listamesa {
  background: #fff;
  border-radius: 0 0 12px 12px;
  margin-top: -8px;
  margin-bottom: 8px;
  border: 1px solid rgba(20, 30, 45, 0.07);
  border-top: none;
  padding: 8px 10px;
}
.ff-app .linealolo { border-top: 1px solid var(--color-border); }
.ff-app .up img { transition: transform 0.2s; }

/* Formularios: inputs y selects modernos */
.ff-app .cam { margin-top: 8px; }
.ff-app .form,
.ff-app select {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  height: auto;
  padding: 12px 14px;
  background: #f8fafb;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 12px;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.ff-app .form:focus,
.ff-app select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.15);
}
.ff-app .form1 { border: 1px solid var(--color-border); }

/* Etiquetas naranja de sección (barras) */
.ff-app .label {
  background: var(--color-primary);
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Botón GUARDAR (era rojo plano) → botón naranja */
.ff-app .btnguardar {
  background: var(--grad-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px !important;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(255, 123, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ff-app .btnguardar:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 123, 0, 0.42); }

/* ===== MODALES DE CONFIRMACIÓN (SI/NO) — card moderna =====
   Reestiliza las clases legacy #alerta / .confirsieli / .confirsi /
   .confirno / .mensaje / .btnsino sin tocar el HTML. */
.ff-app #menualerta {
  background: rgba(15, 22, 32, 0.55);
  opacity: 1;
  height: 100%;
  z-index: 1500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ff-app #alerta {
  width: 340px;
  max-width: calc(100vw - 32px);
  height: auto;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1600;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: ffPop 0.22s ease;
}
.ff-app .confirsieli,
.ff-app .confirsi,
.ff-app .confirno {
  width: auto;
  background: #fff;
  padding: 26px 24px 22px;
  text-align: center;
}
/* Ícono superior según el tipo de acción */
.ff-app .confirsieli::before,
.ff-app .confirsi::before,
.ff-app .confirno::before {
  font: normal normal normal 30px/1 FontAwesome;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; margin: 0 auto 16px;
  border-radius: 50%;
}
.ff-app .confirsieli::before { content: "\f1f8"; background: #fde8e7; color: var(--color-error); }
.ff-app .confirsi::before   { content: "\f00c"; background: #e4f3ea; color: var(--color-secondary); }
.ff-app .confirno::before   { content: "\f05e"; background: #fdf0e0; color: var(--color-warning); }

.ff-app .mensaje {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ff-app .mensaje span {
  display: block;
  color: var(--color-text);
  font-weight: 800;
  font-size: 1.2rem;
  margin-top: 4px;
}
.ff-app .confirsi select { width: 100%; margin: 14px 0 0; }

.ff-app .btnsino {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.ff-app .btnsino div {
  flex: 1;
  margin: 0;
  width: auto;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.ff-app .btnsino div:active { transform: scale(0.97); }
/* NO = cancelar (segundo botón): siempre gris */
.ff-app .btnsino div:last-child {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}
.ff-app .btnsino div:last-child:hover { background: #e6eaed; }
/* SI = acción (primer botón): color según el tipo */
.ff-app .confirsieli .btnsino div:first-child {
  background: linear-gradient(135deg, #ef4b45, var(--color-error)); color: #fff;
  box-shadow: 0 6px 16px rgba(224, 54, 47, 0.35);
}
.ff-app .confirsi .btnsino div:first-child {
  background: linear-gradient(135deg, #3aa96a, var(--color-secondary-dark)); color: #fff;
  box-shadow: 0 6px 16px rgba(47, 158, 95, 0.35);
}
.ff-app .confirno .btnsino div:first-child {
  background: var(--grad-orange); color: #fff;
  box-shadow: 0 6px 16px rgba(255, 123, 0, 0.35);
}
.ff-app .btnsino div:first-child:hover { filter: brightness(1.05); transform: translateY(-1px); }

@keyframes ffPop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ===================================================================
   ALINEACIÓN DE ANCHO: el contenido de las subpáginas nunca supera la
   columna del appbar (640px), centrada, igual que home y appbar.
   =================================================================== */
.ff-app .soloweb {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
/* La barra superior del listado (botón + / totales) en fila, dentro de 640.
   Se saca el .badd de position:absolute para que fluya en la columna. */
.ff-app .mtop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  height: auto;
  padding: 4px 0 8px;
}
.ff-app .badd,
.ff-app .badd.baddmesa {
  position: static;
  top: auto; left: auto;
  margin: 0;
}
.ff-app .totales,
.ff-app .totales.totalesmesa {
  float: none;
  margin: 0;
  width: auto;
}
.ff-app .totales table { min-width: 190px; }
/* Tablas internas nunca desbordan la columna */
.ff-app .listamesa_mesa table,
.ff-app .listamesa table,
.ff-app .listamesa_mesa_tareas table { width: 100%; table-layout: fixed; }
.ff-app .listamesa_mesa td,
.ff-app .listamesa td { overflow: hidden; text-overflow: ellipsis; }

/* ===================================================================
   CHECK-IN / INGRESO (control de acceso manual, compatible con QR)
   =================================================================== */
.ff-checkin { max-width: 640px; margin: 0 auto; padding: 14px 0 40px; }
.ff-checkin-summary {
  position: relative; overflow: hidden;
  background: var(--grad-orange); color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 20px; margin-bottom: 16px;
  box-shadow: 0 12px 28px rgba(200, 95, 0, 0.28);
}
.ff-checkin-summary::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 90% -10%, rgba(255,255,255,0.25), transparent 55%);
}
.ff-checkin-count { position: relative; font-size: 2rem; font-weight: 800; line-height: 1; }
.ff-checkin-count small { font-size: 1rem; font-weight: 600; opacity: 0.9; }
.ff-checkin-caption { position: relative; font-size: 0.85rem; opacity: 0.95; margin-top: 4px; }
.ff-checkin-bar {
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.3); margin-top: 12px; overflow: hidden;
}
.ff-checkin-bar span { display: block; height: 100%; background: #fff; border-radius: 999px; transition: width 0.3s; }

.ff-checkin-search {
  width: 100%; padding: 12px 16px; margin-bottom: 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: inherit; font-size: 0.98rem; background: #fff; box-shadow: var(--shadow-sm);
}
.ff-checkin-search:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 123, 0, 0.15);
}

.ff-checkin-list { display: flex; flex-direction: column; gap: 10px; }
.ff-checkin-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid rgba(20, 30, 45, 0.06);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, background 0.2s;
}
.ff-checkin-row.in { border-left-color: var(--color-secondary); background: #f4fbf6; }
.ff-checkin-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff9a3d, #ff7b00);
}
.ff-checkin-row.in .ff-checkin-avatar { background: linear-gradient(135deg, #3aa96a, #2f9e5f); }
.ff-checkin-info { flex: 1; min-width: 0; }
.ff-checkin-name {
  font-weight: 700; color: var(--color-text); font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ff-checkin-meta { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }
.ff-checkin-toggle {
  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;
  font-weight: 700; font-size: 0.85rem; padding: 9px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform 0.12s, box-shadow 0.15s;
}
.ff-checkin-toggle.out { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.ff-checkin-toggle.in { background: linear-gradient(135deg, #3aa96a, #2f9e5f); color: #fff; box-shadow: 0 4px 12px rgba(47, 158, 95, 0.35); }
.ff-checkin-toggle:active { transform: scale(0.96); }
.ff-checkin-toggle:disabled { opacity: 0.6; cursor: default; }
.ff-checkin-empty { text-align: center; color: var(--color-text-muted); padding: 40px 20px; }

/* ===================================================================
   UPLOADER DE FOTO / VIDEO — estilo picker de redes (compacto).
   Card punteada "elegir foto/video" + preview inline. Sólo CSS, sin
   tocar la lógica de croppie/subida (clases .imgx/.cam/.vid, #filever…).
   =================================================================== */
.ff-app .imgx {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 16px;
}
.ff-app .cam,
.ff-app .vid {
  position: relative;
  width: 148px;
  max-width: 46%;
  margin: 0;
  text-align: center;
}
/* Estado vacío = card punteada compacta con ícono + label (como .rd-picker) */
.ff-app #filever,
.ff-app #fileverv {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  height: 92px;
  border: 2px dashed var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ff-app #filever:hover,
.ff-app #fileverv:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ff-app #filever img,
.ff-app #fileverv img { width: 28px; height: 28px; object-fit: contain; opacity: 0.5; }
.ff-app #filever::after { content: "Elegí una foto"; font-size: 0.78rem; font-weight: 600; }
.ff-app #fileverv::after { content: "Elegí un video"; font-size: 0.78rem; font-weight: 600; }
/* Preview (foto/video cargado) dentro de la card */
.ff-app #uploaded_image,
.ff-app #uploaded_imagev,
.ff-app .cam #fotoold,
.ff-app .vid #fotoold {
  width: 148px; height: 92px; max-width: 100%;
  border-radius: 14px; overflow: hidden;
  margin: 0 auto; background: #000;
}
.ff-app #uploaded_image img,
.ff-app #uploaded_imagev img,
.ff-app #uploaded_imagev video,
.ff-app #fotoold img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; border-radius: 0; margin: 0;
}
/* Botón quitar = badge rojo arriba a la derecha (se muestra vía JS) */
.ff-app .btn_foto,
.ff-app .btn_video {
  position: absolute; top: -6px; right: -6px; z-index: 4;
  width: 24px; height: 24px; margin: 0;
  border-radius: 50%; background: var(--color-error);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  text-align: center; line-height: 22px; cursor: pointer;
}
.ff-app .btn_foto img,
.ff-app .btn_video img {
  width: 11px; height: 11px; vertical-align: middle;
  filter: brightness(0) invert(1);
}

/* ===================================================================
   MESAS — experiencia dedicada para alta/listado
   =================================================================== */
.ff-mesas-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 0 40px;
}
.ff-mesas-hero,
.ff-form-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #fff8f1 100%);
  border: 1px solid rgba(255, 123, 0, 0.16);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.ff-mesas-hero::after,
.ff-form-hero::after {
  content: '';
  position: absolute;
  right: -46px;
  top: -54px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,123,0,.16) 0 5px, transparent 6px 15px);
  pointer-events: none;
}
.ff-mesas-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ff-mesas-kicker {
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ff-mesas-hero h2,
.ff-form-hero h2 {
  margin: 4px 0 5px;
  font-size: 1.42rem;
  line-height: 1.12;
  color: var(--color-text);
}
.ff-mesas-hero p,
.ff-form-hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.35;
}
.ff-mesas-add,
.ff-mesas-empty button,
.ff-save-btn {
  border: none;
  background: var(--grad-orange);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .30);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.ff-mesas-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  font-size: .92rem;
}
.ff-mesas-add:hover,
.ff-mesas-empty button:hover,
.ff-save-btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
.ff-mesas-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.ff-mesas-stat {
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .06);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.ff-mesas-stat strong {
  display: block;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-primary-dark);
}
.ff-mesas-stat span {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.ff-mesas-grid {
  display: grid;
  gap: 10px;
}
.ff-mesa-card {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 18px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.ff-mesa-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 123, 0, .24);
  box-shadow: var(--shadow);
}
.ff-mesa-mark {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.15)),
    var(--grad-orange);
  color: #fff;
  box-shadow: inset 0 -10px 18px rgba(156, 74, 0, .18);
  font-weight: 900;
  letter-spacing: -.5px;
}
.ff-mesa-mark span {
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-mesa-label {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-mesa-capacity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: .86rem;
  font-weight: 700;
}
.ff-mesa-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ff-icon-btn {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-size: 1.05rem;
  transition: transform .12s, background .15s;
}
.ff-icon-btn:active { transform: scale(.96); }
.ff-icon-btn.edit { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.ff-icon-btn.delete { background: #fdeaea; color: var(--color-error); }
.ff-icon-btn.edit:hover { background: #ffe3c6; }
.ff-icon-btn.delete:hover { background: #ffdede; }
.ff-mesas-empty {
  text-align: center;
  background: #fff;
  border: 1px dashed #f0b176;
  border-radius: 20px;
  padding: 32px 22px;
  box-shadow: var(--shadow-sm);
}
.ff-mesas-empty-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.55rem;
}
.ff-mesas-empty h3 { margin: 0 0 6px; }
.ff-mesas-empty p { margin: 0 auto 18px; color: var(--color-text-muted); max-width: 360px; }
.ff-mesas-empty button { padding: 12px 18px; }
.ff-confirm-help {
  margin: 8px 18px 0;
  color: rgba(255,255,255,.88);
  font-size: .86rem;
}
.ff-form-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ff-back-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  border: none;
  background: #fff;
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: inherit;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.ff-form-table-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--grad-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .28);
}
.ff-mesa-form {
  margin-top: 12px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.ff-field {
  display: block;
  margin-bottom: 14px;
}
.ff-field span {
  display: block;
  margin: 0 0 7px;
  color: var(--color-text);
  font-size: .86rem;
  font-weight: 800;
}
.ff-app .ff-field .form,
.ff-app .ff-field select {
  width: 100%;
  margin: 0;
  border-radius: 14px;
  border-color: #dce2e6;
  background: #f8fafb;
  font-size: 1rem;
}
.ff-app .ff-field .form:focus,
.ff-app .ff-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, .14);
}
.ff-form-note,
.ff-form-error {
  border-radius: 14px;
  padding: 11px 12px;
  font-size: .88rem;
  line-height: 1.35;
}
.ff-form-note {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
}
.ff-form-error {
  margin-bottom: 12px;
  background: #fdeaea;
  color: #b32924;
  font-weight: 700;
}
.ff-form-actions { text-align: stretch; }
.ff-save-btn {
  width: 100%;
  margin: 18px 0 0;
  padding: 14px 18px;
  font-size: 1rem;
}
.ff-save-btn:disabled { opacity: .72; cursor: wait; transform: none; }

@media (max-width: 520px) {
  .ff-mesas-hero { align-items: stretch; flex-direction: column; }
  .ff-mesas-add { justify-content: center; width: 100%; }
  .ff-mesa-card { grid-template-columns: 50px 1fr; }
  .ff-mesa-mark { width: 50px; height: 50px; border-radius: 16px; }
  .ff-mesa-actions { grid-column: 1 / -1; }
  .ff-icon-btn { flex: 1; }
}

/* ===================================================================
   INVITADOS — panel operativo para confirmar, ubicar y contactar
   =================================================================== */
.ff-inv-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 0 42px;
}
.ff-inv-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 0%, #fff7ed 100%);
  border: 1px solid rgba(255, 123, 0, .16);
  box-shadow: var(--shadow);
}
.ff-inv-hero::after {
  content: '';
  position: absolute;
  right: -34px;
  top: -52px;
  width: 150px;
  height: 150px;
  border-radius: 46% 54% 50% 50%;
  background:
    linear-gradient(90deg, rgba(255,123,0,.16) 1px, transparent 1px),
    linear-gradient(rgba(255,123,0,.16) 1px, transparent 1px);
  background-size: 18px 18px;
  transform: rotate(12deg);
  pointer-events: none;
}
.ff-inv-kicker {
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ff-inv-hero h2 {
  margin: 4px 0 5px;
  color: var(--color-text);
  font-size: 1.42rem;
  line-height: 1.12;
}
.ff-inv-hero p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.35;
}
.ff-sale-link-card {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid rgba(255,123,0,.2);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff8ef, #fff);
  box-shadow: var(--shadow-sm);
}
.ff-sale-link-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.ff-sale-link-head span { display:block; color:var(--color-primary-dark); font-size:.66rem; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
.ff-sale-link-head strong { display:block; margin-top:2px; color:var(--color-text); font-size:.92rem; font-weight:900; }
.ff-sale-link-head > i { color:var(--color-primary); font-size:1.25rem; }
.ff-sale-link-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px; }
.ff-sale-link-text { min-width:0; display:flex; align-items:center; overflow-wrap:anywhere; color:var(--color-text); font-size:.78rem; font-weight:750; line-height:1.4; user-select:all; }
.ff-sale-link-row button,.ff-sale-link-row a { height:42px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 13px; border:0; border-radius:12px; background:var(--color-primary); color:#fff; font-family:inherit; font-size:.75rem; font-weight:900; text-decoration:none; cursor:pointer; }
.ff-sale-link-row a { background:var(--color-primary-dark); }.ff-sale-link-row button.copied { background:#2f9e5f; }
.ff-sale-link-card > small { display:block; margin-top:8px; color:var(--color-text-muted); font-size:.68rem; font-weight:700; }
@media(max-width:520px){.ff-sale-link-row{grid-template-columns:1fr 1fr}.ff-sale-link-text{grid-column:1/-1}.ff-sale-link-row button,.ff-sale-link-row a{width:100%}}
.ff-inv-add {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  border: none;
  border-radius: 999px;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .30);
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 850;
}
.ff-inv-progress {
  margin: 12px 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .06);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.ff-inv-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ff-inv-progress-head strong {
  color: var(--color-primary-dark);
  font-size: 1.8rem;
  line-height: 1;
}
.ff-inv-progress-head span {
  color: var(--color-text-muted);
  font-size: .85rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.ff-inv-total-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 12px;
  margin-bottom: 10px;
}
.ff-inv-total-head span {
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.ff-inv-total-head strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--color-primary-dark);
  font-size: 2rem;
  line-height: 1;
}
.ff-inv-total-head em {
  color: var(--color-text);
  font-size: .88rem;
  font-style: normal;
  font-weight: 800;
}
.ff-inv-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f4;
}
.ff-inv-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-secondary), #79c88f);
  transition: width .25s;
}
.ff-inv-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ff-inv-stat {
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .06);
  border-radius: 16px;
  padding: 14px 15px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.ff-inv-stat-nav {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ff-inv-stat-nav:active { transform: scale(.98); }
.ff-inv-stat-nav.active {
  border-color: rgba(255, 123, 0, .42);
  box-shadow: 0 7px 18px rgba(255, 123, 0, .14);
}
.ff-inv-stat strong {
  display: block;
  color: var(--color-primary-dark);
  font-size: 1.7rem;
  line-height: 1;
}
.ff-inv-stat span {
  display: block;
  margin-top: 4px;
  color: var(--color-text);
  font-weight: 850;
}
.ff-inv-stat em {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: .82rem;
  font-style: normal;
}
.ff-inv-stat strong small {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.ff-inv-stat--over strong {
  color: #e53935;
}
.ff-inv-stat--over strong small {
  color: #e53935;
}
.ff-pay-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
.ff-pay-stats span {
  padding: 9px 6px;
  border-radius: 12px;
  background: #fff;
  color: var(--color-text-muted);
  text-align: center;
  font-size: .78rem;
  font-weight: 850;
  box-shadow: var(--shadow-sm);
}
.ff-inv-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0 14px;
  min-height: 48px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .08);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}
.ff-inv-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: .98rem;
}
.ff-inv-tabs.cenabaile {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  height: auto;
}
.ff-app .ff-inv-tabs .bcena,
.ff-app .ff-inv-tabs .bbaile {
  flex: 1;
  float: none;
  border: 1px solid rgba(20, 30, 45, .08);
  border-radius: 14px;
  background: #fff;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 900;
  padding: 12px 8px;
  text-transform: uppercase;
}
.ff-app .ff-inv-tabs .bcena.active,
.ff-app .ff-inv-tabs .bbaile.active {
  background: var(--grad-orange) !important;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 123, 0, .30);
}
.ff-inv-tabs-empty {
  color: var(--color-text-muted);
  font-size: .88rem;
  padding: 4px 0;
}
.ff-inv-tabs-tandas {
  position: relative;
  display: block !important;
  padding: 11px;
  border: 1px solid rgba(255,123,0,.14);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff8ef, #fff);
  box-shadow: var(--shadow-sm);
}
.ff-inv-tabs-tandas::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--tanda-pointer, 25%);
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(255,123,0,.14);
  border-left: 1px solid rgba(255,123,0,.14);
  background: #fff9f1;
  transform: translateX(-50%) rotate(45deg);
}
.ff-tandas-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 2px 8px;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-weight: 750;
}
.ff-tandas-label i { color: var(--color-primary); }
.ff-tandas-label strong { color: var(--color-text); font-weight: 900; }
.ff-tandas-de-tipo {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  width: 100%;
}
.ff-app .ff-tandas-de-tipo .ff-tanda-btn { width: 100%; }
.ff-app .ff-inv-tabs-tandas .ff-tanda-btn {
  min-height: 34px;
  padding: 8px 7px;
  border-color: rgba(255,123,0,.14);
  border-radius: 9px;
  background: rgba(255,255,255,.9);
  box-shadow: none;
  font-size: .72rem;
}
.ff-app .ff-inv-tabs-tandas .ff-tanda-btn.active {
  background: var(--color-text) !important;
  color: #fff;
  box-shadow: 0 5px 12px rgba(32,41,54,.16);
}
.ff-inv-content { display: grid; gap: 9px; }
.ff-app .ff-table-section.listamesa_mesa {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(20, 30, 45, .07);
  border-left: 5px solid var(--color-primary);
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.ff-app .ff-table-section.full { border-left-color: var(--color-secondary); }
.ff-app .ff-table-section.over { border-left-color: var(--color-error); }
.ff-app .ff-table-section.unassigned { border-left-color: var(--color-warning); }
.ff-app .ff-table-head {
  display: grid;
  grid-template-columns: 1fr auto auto 30px;
  align-items: center;
  gap: 10px;
  padding: 13px 13px 13px 15px;
  width: 100%;
  box-sizing: border-box;
}
.ff-table-badge {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
  font-size: .98rem;
  font-weight: 900;
}
.ff-table-meta {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 800;
}
.ff-table-meta strong { color: var(--color-text); font-size: 1rem; }
.ff-table-free {
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}
.ff-table-free.warn { background: #fff4dc; color: #a66500; }
.ff-table-section.full .ff-table-free { background: #e7f5ec; color: var(--color-secondary-dark); }
.ff-table-section.over .ff-table-free { background: #fdeaea; color: var(--color-error); }
.ff-table-head .up {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  font-size: 1.25rem;
  transition: transform .2s;
}
.ff-app .ff-guest-list.listamesa,
.ff-guest-list {
  width: 100%;
  margin: -4px 0 8px;
  padding: 9px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.ff-guest-list.listamesabaile {
  display: grid;
  gap: 9px;
  margin: 0;
}
.ff-guest-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafb;
  border: 1px solid rgba(20, 30, 45, .05);
}
.ff-guest-row.ok { background: #f4fbf6; }
.ff-guest-row.pending { background: #fffaf4; }
.ff-guest-row.companion { background: #f6f2fb; }
.ff-guest-status {
  border: none;
  border-radius: 999px;
  padding: 8px 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}
.ff-guest-status.ok { background: #daf0e2; color: var(--color-secondary-dark); }
.ff-guest-status.pending { background: #ffe7cd; color: var(--color-primary-dark); }
.ff-guest-status.companion { background: #eadff7; color: var(--color-purple); cursor: default; }
.ff-guest-main {
  min-width: 0;
  cursor: pointer;
}
.ff-guest-main strong,
.ff-guest-main span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-guest-main strong { color: var(--color-text); font-size: .96rem; }
.ff-guest-main span { margin-top: 2px; color: var(--color-text-muted); font-size: .8rem; font-weight: 700; }
/* Invitado sin codigo QR todavia (invitacion PULSERA: la pulsera se asigna en la entrada). */
.ff-guest-code-none {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.ff-guest-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.ff-mini-action {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  font-size: .96rem;
}
.ff-mini-action.whats { background: #e1f6e8; color: #16883d; }
.ff-mini-action.video { background: #edf0ff; color: #4c5bd5; }
.ff-mini-action.edit { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.ff-mini-action.delete { background: #fdeaea; color: var(--color-error); }
.ff-list-empty {
  padding: 18px;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 700;
}
.ff-list-subtitle {
  margin: 8px 2px 2px;
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ff-tanda-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.ff-tanda-summary strong {
  color: var(--color-primary-dark);
  font-size: 1.3rem;
}

@media (max-width: 560px) {
  .ff-inv-page { padding-top: 6px; }
  .ff-inv-hero {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 17px;
    box-shadow: 0 7px 18px rgba(31, 42, 55, .08);
  }
  .ff-inv-hero::after {
    right: -58px;
    top: -72px;
    width: 138px;
    height: 138px;
    opacity: .65;
  }
  .ff-inv-kicker { font-size: .61rem; letter-spacing: 1.15px; }
  .ff-inv-hero h2 { margin: 3px 0 3px; font-size: 1.18rem; line-height: 1.1; }
  .ff-inv-hero p { max-width: 260px; font-size: .78rem; line-height: 1.3; }
  .ff-inv-add {
    justify-content: center;
    width: 100%;
    min-height: 38px;
    gap: 6px;
    padding: 8px 12px;
    font-size: .76rem;
    box-shadow: 0 7px 15px rgba(255, 123, 0, .22);
  }
  .ff-sale-link-card {
    margin: 9px 0 11px;
    padding: 13px;
    border-radius: 17px;
    box-shadow: 0 6px 16px rgba(31, 42, 55, .07);
  }
  .ff-sale-link-head { gap: 9px; margin-bottom: 9px; }
  .ff-sale-link-head span { font-size: .58rem; letter-spacing: .7px; }
  .ff-sale-link-head strong { max-width: 210px; margin-top: 1px; font-size: .78rem; line-height: 1.15; }
  .ff-sale-link-head > i { font-size: 1rem; }
  .ff-sale-link-row { gap: 6px; }
  .ff-sale-link-text {
    padding: 8px 10px;
    border: 1px solid rgba(32, 41, 54, .07);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .ff-sale-link-row button,
  .ff-sale-link-row a {
    height: 35px;
    gap: 5px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: .68rem;
  }
  .ff-sale-link-card > small { margin: 7px 2px 0; font-size: .6rem; line-height: 1.25; }
  .ff-inv-progress {
    margin: 9px 0;
    padding: 11px 13px;
    border-radius: 15px;
    box-shadow: 0 6px 16px rgba(31, 42, 55, .07);
  }
  .ff-inv-progress-head { gap: 8px; margin-bottom: 8px; }
  .ff-inv-progress-head strong { font-size: 1.45rem; }
  .ff-inv-progress-head span { font-size: .66rem; letter-spacing: .65px; }
  .ff-inv-bar { height: 6px; }
  .ff-inv-stats { gap: 8px; margin-bottom: 9px; }
  .ff-inv-stat {
    min-height: 76px;
    padding: 11px 13px;
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(31, 42, 55, .065);
  }
  .ff-inv-stat strong { font-size: 1.4rem; }
  .ff-inv-stat span { margin-top: 3px; font-size: .78rem; }
  .ff-inv-stat em { margin-top: 1px; font-size: .67rem; }
  .ff-pay-stats { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
  .ff-pay-stats span { padding: 7px 5px; border-radius: 10px; font-size: .67rem; box-shadow: 0 4px 12px rgba(31,42,55,.055); }
  .ff-inv-search {
    min-height: 40px;
    gap: 8px;
    margin-bottom: 8px;
    padding: 0 11px;
    border-radius: 13px;
    box-shadow: 0 5px 14px rgba(31,42,55,.06);
    font-size: .78rem;
  }
  .ff-inv-search input { font-size: .78rem; }
  .ff-inv-tabs.cenabaile { gap: 6px; margin-bottom: 8px; }
  .ff-inv-tabs-tandas { margin-top: 1px !important; padding: 9px; border-radius: 13px; }
  .ff-inv-tabs-tandas::before { width: 10px; height: 10px; top: -6px; }
  .ff-tandas-label { margin-bottom: 7px; font-size: .61rem; }
  .ff-tandas-de-tipo { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 6px; }
  .ff-app .ff-inv-tabs-tandas .ff-tanda-btn { min-height: 32px; padding: 7px 6px; font-size: .64rem; }
  .ff-app .ff-inv-tabs .bcena,
  .ff-app .ff-inv-tabs .bbaile {
    min-height: 35px;
    padding: 8px 6px;
    border-radius: 11px;
    font-size: .68rem;
    box-shadow: 0 4px 12px rgba(31,42,55,.055);
  }
  .ff-app .ff-inv-tabs .bcena.active,
  .ff-app .ff-inv-tabs .bbaile.active { box-shadow: 0 6px 14px rgba(255,123,0,.22); }
  .ff-inv-tabs-empty { font-size: .72rem; }
  .ff-inv-content { gap: 7px; }
  .ff-app .ff-table-section.listamesa_mesa {
    border-left-width: 3px;
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(31,42,55,.06);
  }
  .ff-app .ff-table-head {
    grid-template-columns: minmax(0, 1fr) auto 24px;
    grid-template-areas:
      "table-name table-free table-toggle"
      "table-meta table-meta table-meta";
    column-gap: 9px;
    row-gap: 7px;
    padding: 10px 12px;
  }
  .ff-table-badge { grid-area: table-name; font-size: .82rem; }
  .ff-table-meta { grid-area: table-meta; justify-self: start; font-size: .68rem; }
  .ff-table-meta strong { font-size: .82rem; }
  .ff-table-free { grid-area: table-free; justify-self: end; padding: 4px 7px; font-size: .63rem; }
  .ff-table-head .up { grid-area: table-toggle; align-self: center; justify-self: end; width: 24px; height: 24px; font-size: 1rem; }
  .ff-app .ff-guest-list.listamesa,
  .ff-guest-list { margin-top: -3px; padding: 7px; border-radius: 14px; box-shadow: 0 5px 14px rgba(31,42,55,.055); }
  .ff-guest-list.listamesabaile { gap: 7px; }
  .ff-guest-row { grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 7px 9px; padding: 8px; border-radius: 11px; }
  .ff-guest-status { justify-self: start; padding: 6px 8px; font-size: .62rem; }
  .ff-guest-main strong { font-size: .8rem; }
  .ff-guest-main span { margin-top: 1px; font-size: .68rem; }
  .ff-guest-actions { grid-column: auto; align-self: start; justify-content: flex-end; gap: 5px; padding-top: 0; border-top: 0; }
  .ff-mini-action { flex: 0 0 31px; width: 31px; height: 31px; border-radius: 9px; font-size: .78rem; }
  .ff-list-empty { padding: 13px; font-size: .75rem; }
  .ff-list-subtitle { margin-top: 6px; font-size: .65rem; letter-spacing: .8px; }
  .ff-tanda-summary { padding: 8px 11px; border-radius: 12px; font-size: .68rem; letter-spacing: .65px; }
  .ff-tanda-summary strong { font-size: 1rem; }
}

/* ===================================================================
   FORMULARIO INVITADOS — ficha guiada de carga/edición
   =================================================================== */
.ff-inv-form-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 0 46px;
}
.ff-inv-form-hero {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 0%, #fff7ed 100%);
  border: 1px solid rgba(255, 123, 0, .16);
  box-shadow: var(--shadow);
}
.ff-inv-form-hero::after {
  content: '';
  position: absolute;
  right: -42px;
  top: -46px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, rgba(255,123,0,.14) 0 7px, transparent 7px 16px);
  pointer-events: none;
}
.ff-inv-form-hero h2 {
  margin: 4px 0 5px;
  color: var(--color-text);
  font-size: 1.42rem;
  line-height: 1.12;
}
.ff-inv-form-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.35;
}
.ff-inv-form-icon {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--grad-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .28);
}
.ff-inv-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.ff-form-card {
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.ff-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.ff-card-head span {
  display: block;
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ff-card-head strong {
  display: block;
  margin-top: 3px;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.2;
}
.ff-card-head em {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: .74rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.ff-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ff-inv-form .ff-field {
  display: block;
  margin: 0 0 12px;
}
.ff-inv-form .ff-two-cols .ff-field { margin-bottom: 0; }
.ff-inv-form .ff-two-cols.single { grid-template-columns: 1fr; }
.ff-card-main #ffContactRow { margin-top: 8px; }
.ff-card-main .ff-table-field { margin-top: 8px; }
.ff-inv-form select.acompa { float: none; }
.ff-companion-block .ff-companion-menu { margin-top: 0; }
.ff-companion-block .ff-companion-preferences { margin-top: 10px; }
.ff-inv-form .ff-field span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text);
  font-size: .84rem;
  font-weight: 850;
}
.ff-app .ff-inv-form .form,
.ff-app .ff-inv-form select,
.ff-inv-form input,
.ff-inv-form select {
  width: 100%;
  min-height: 46px;
  margin: 0;
  border: 1px solid #dce2e6;
  border-radius: 14px;
  background: #f8fafb;
  color: var(--color-text);
  font-family: inherit;
  font-size: .98rem;
  padding: 11px 13px;
}
.ff-app .ff-inv-form .form:focus,
.ff-app .ff-inv-form select:focus,
.ff-inv-form input:focus,
.ff-inv-form select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 123, 0, .14);
}
.ff-media-card .imgx {
  margin: 0;
  justify-content: flex-start;
}
.ff-companions-card {
  border-style: dashed;
  border-color: rgba(255, 123, 0, .30);
}
.ff-companion-block {
  display: none;
  margin-top: 10px;
  padding: 13px;
  border-radius: 16px;
  background: #f8fafb;
  border: 1px solid rgba(20, 30, 45, .06);
}
.ff-companion-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.ff-companion-title span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-orange);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
}
.ff-companion-title strong {
  color: var(--color-text);
  font-size: .95rem;
}
.ff-sticky-save {
  position: sticky;
  bottom: 0;
  z-index: 12;
  padding: 10px 0 0;
  background: linear-gradient(180deg, rgba(238,241,243,0), var(--color-background) 35%);
}
.ff-inv-form .ff-save-btn {
  margin: 0;
}
.ff-app .suggestionsBox {
  position: relative;
  z-index: 20;
  width: 100%;
  margin-top: -4px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ff-app .suggestionList {
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .08);
}
.ff-app #uploadimageModal,
.ff-app #uploadimageModalv {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ff-app .contenfoto {
  max-width: calc(100vw - 28px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 560px) {
  .ff-two-cols { grid-template-columns: 1fr; }
  .ff-inv-form-page { padding-top: 4px; padding-bottom: 70px; }
  .ff-inv-form-hero {
    padding: 10px 12px;
    border-radius: 15px;
    box-shadow: 0 5px 14px rgba(31,42,55,.065);
  }
  .ff-inv-form-hero::after {
    right: -54px;
    top: -62px;
    width: 112px;
    height: 112px;
    opacity: .55;
  }
  .ff-back-link {
    gap: 4px;
    margin-bottom: 7px;
    padding: 5px 8px;
    font-size: .67rem;
    box-shadow: 0 3px 9px rgba(31,42,55,.07);
  }
  .ff-form-title-row { gap: 8px; }
  .ff-inv-form-hero .ff-inv-kicker { font-size: .54rem; letter-spacing: .9px; }
  .ff-inv-form-hero h2 { margin: 2px 0 0; font-size: 1.05rem; }
  .ff-inv-form-hero p { display: none; }
  .ff-inv-form-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: .85rem;
    box-shadow: 0 5px 12px rgba(255,123,0,.2);
  }
  .ff-media-card .imgx { justify-content: center; }
  .ff-sticky-save { bottom: 0; }
}

/* ===================================================================
   MENÚ / COMIDAS — opciones culinarias del evento
   =================================================================== */
.ff-food-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 0 42px;
}
.ff-food-hero,
.ff-food-form-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 0%, #fff8f1 100%);
  border: 1px solid rgba(255, 123, 0, .16);
  box-shadow: var(--shadow);
}
.ff-food-form-hero { display: block; }
.ff-food-hero::after,
.ff-food-form-hero::after {
  content: '';
  position: absolute;
  right: -44px;
  top: -48px;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,123,0,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgba(47,158,95,.12) 0 2px, transparent 3px);
  background-size: 22px 22px, 34px 34px;
  background-position: 0 0, 8px 10px;
  pointer-events: none;
}
.ff-food-kicker {
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ff-food-hero h2,
.ff-food-form-hero h2 {
  position: relative;
  z-index: 1;
  margin: 4px 0 5px;
  color: var(--color-text);
  font-size: 1.42rem;
  line-height: 1.12;
}
.ff-food-hero p,
.ff-food-form-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.35;
}
.ff-food-add,
.ff-food-empty button {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  border: none;
  border-radius: 999px;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .30);
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 850;
  transition: transform .12s, filter .15s;
}
.ff-food-add:hover,
.ff-food-empty button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.ff-food-stats {
  margin: 12px 0 10px;
}
.ff-food-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .06);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.ff-food-stat strong {
  color: var(--color-primary-dark);
  font-size: 1.75rem;
  line-height: 1;
}
.ff-food-stat span {
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-align: right;
}
.ff-food-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  min-height: 48px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .08);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
}
.ff-food-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: .98rem;
}
.ff-food-list {
  display: grid;
  gap: 10px;
}
.ff-food-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.ff-food-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 123, 0, .24);
  box-shadow: var(--shadow);
}
.ff-food-mark {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.85), transparent 36%),
    linear-gradient(135deg, #ff9a3d 0%, #ff7b00 62%, #2f9e5f 160%);
  color: #fff;
  font-size: 1.22rem;
  font-weight: 950;
  box-shadow: inset 0 -10px 18px rgba(156, 74, 0, .18);
}
.ff-food-info {
  min-width: 0;
}
.ff-food-info strong,
.ff-food-info span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-food-info strong {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 900;
}
.ff-food-info span {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 700;
}
.ff-food-actions {
  display: flex;
  gap: 8px;
}
.ff-food-empty {
  text-align: center;
  background: #fff;
  border: 1px dashed #f0b176;
  border-radius: 20px;
  padding: 32px 22px;
  box-shadow: var(--shadow-sm);
}
.ff-food-empty-icon,
.ff-food-form-icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.45rem;
}
.ff-food-empty-icon { margin: 0 auto 12px; }
.ff-food-form-icon {
  position: relative;
  z-index: 1;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .28);
}
.ff-food-empty h3 { margin: 0 0 6px; }
.ff-food-empty p { margin: 0 auto 18px; color: var(--color-text-muted); max-width: 370px; }
.ff-food-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.ff-food-form .ff-form-card { margin: 0; }
.ff-food-form .ff-field { margin-bottom: 0; }

@media (max-width: 520px) {
  .ff-food-hero { align-items: stretch; flex-direction: column; }
  .ff-food-add { justify-content: center; width: 100%; }
  .ff-food-card { grid-template-columns: 50px minmax(0, 1fr); }
  .ff-food-mark { width: 50px; height: 50px; border-radius: 16px; }
  .ff-food-actions { grid-column: 1 / -1; }
  .ff-food-actions .ff-icon-btn { flex: 1; }
}

/* ===================================================================
   FIESTAS — pulido global para pantallas internas legacy restantes
   Proveedores, tareas, usuarios, tarjetas y formularios sin rediseño dedicado.
   =================================================================== */
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) {
  max-width: 640px;
  width: 100%;
  margin: 10px auto 46px !important;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form)::before {
  content: 'Completar datos';
  display: block;
  margin-bottom: 14px;
  color: var(--color-primary-dark);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) > div:not(.cam):not(.imgx) {
  display: grid;
  gap: 10px;
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) .form,
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) select {
  width: 100% !important;
  min-height: 46px;
  margin: 0 !important;
  border: 1px solid #dce2e6;
  border-radius: 14px;
  background: #f8fafb;
  color: var(--color-text);
  font-family: inherit;
  font-size: .98rem;
  padding: 11px 13px;
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) label {
  color: var(--color-text-muted);
  font-size: .84rem;
  font-weight: 800;
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) .btnguardar,
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) .btloginguar {
  width: 100% !important;
  margin: 18px 0 0 !important;
  border-radius: 999px !important;
  background: var(--grad-orange) !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(255, 123, 0, .30) !important;
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) .cam {
  width: 148px;
  max-width: 100%;
  margin: 0 auto 16px;
}
.ff-app .soloweb > form:not(.ff-inv-form):not(.ff-food-form):not(.ff-mesa-form) #file {
  display: none;
}
.ff-app #fotover {
  display: none;
  width: 148px;
  height: 92px;
  object-fit: cover;
  border-radius: 14px;
}

/* Listados legacy como tarjetas: proveedores, usuarios, tarjetas, tareas. */
.ff-app #bc:not(.ff-inv-content),
.ff-app .soloweb > .listamesa:not(.ff-guest-list) {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.ff-app #bc > .listamesa_mesa:not(.ff-table-section),
.ff-app .listamesa_mesa_tareas,
.ff-app .soloweb > .listamesa_mesa:not(.ff-table-section) {
  width: 100%;
  margin: 0 0 9px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 30, 45, .07);
  border-left: 5px solid var(--color-primary);
  border-radius: 17px;
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.ff-app .listamesa_mesa_tareas {
  background: linear-gradient(135deg, #2f3944, #1f2831);
  border-left-color: var(--color-secondary);
  color: #fff;
}
.ff-app #bc > .listamesa_mesa:not(.ff-table-section) table,
.ff-app .listamesa_mesa_tareas table,
.ff-app .soloweb > .listamesa_mesa:not(.ff-table-section) table {
  border-collapse: collapse;
}
.ff-app #bc > .listamesa_mesa:not(.ff-table-section) td,
.ff-app .listamesa_mesa_tareas td,
.ff-app .soloweb > .listamesa_mesa:not(.ff-table-section) td {
  padding: 13px 10px;
  vertical-align: middle;
}
.ff-app #bc > .listamesa:not(.ff-guest-list),
.ff-app .soloweb > .listamesa:not(.ff-guest-list) {
  width: 100%;
  margin: -5px 0 10px;
  padding: 9px;
  background: #fff;
  border: 1px solid rgba(20, 30, 45, .07);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: var(--shadow-sm);
}
.ff-app .listamesa:not(.ff-guest-list) tr {
  border-radius: 14px;
}
.ff-app .listamesa:not(.ff-guest-list) td {
  padding: 10px 8px;
  vertical-align: middle;
}
.ff-app .listamesa:not(.ff-guest-list) img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 10px;
}
.ff-app .provtitu {
  color: var(--color-text);
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 900;
}
.ff-app .provtitu + div,
.ff-app .provtitu + div + div,
.ff-app .provtitu + div + div + div {
  color: var(--color-text-muted);
  font-size: .84rem;
  font-weight: 650;
}
.ff-app .mesalolo {
  font-family: inherit !important;
  font-weight: 900;
}
.ff-app .sillaslolo {
  font-family: inherit !important;
  color: var(--color-text-muted) !important;
}
.ff-app .up img {
  width: 20px !important;
  height: 20px !important;
  opacity: .75;
}
.ff-app .linealolo { border-top-color: rgba(20, 30, 45, .08); }

/* Barra superior legacy cuando aún exista: consistente y sin solaparse. */
.ff-app .mtop:empty { display: none; }
.ff-app .mtop .badd {
  white-space: nowrap;
}
.ff-app .totales > .t1 {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 14px;
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font-weight: 850;
}
.ff-app .totales > .t1 span { color: var(--color-primary-dark); margin-left: 4px; }

/* Botones clickeables dentro de tablas legacy */
.ff-app td[onclick] {
  cursor: pointer;
}
.ff-app td[onclick]:has(img),
.ff-app td[align="center"]:has(img) {
  text-align: center;
}

@media (max-width: 560px) {
  .ff-app #bc > .listamesa_mesa:not(.ff-table-section) td,
  .ff-app .listamesa_mesa_tareas td,
  .ff-app .soloweb > .listamesa_mesa:not(.ff-table-section) td,
  .ff-app .listamesa:not(.ff-guest-list) td {
    padding: 9px 6px;
    font-size: .84rem;
  }
  .ff-app .listamesa:not(.ff-guest-list) img {
    width: 30px;
    height: 30px;
  }
}

/* ===================================================================
   CONFIRMACIÓN PÚBLICA — clon del flujo SIG con identidad fiestas
   =================================================================== */
.ff-confirm-public-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,123,0,.18), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(47,158,95,.12), transparent 24%),
    var(--color-background);
}
.ff-confirm-public {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 14px 42px;
}
.ff-confirm-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20,30,45,.07);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}
.ff-confirm-banner {
  background: #111;
  max-height: 280px;
  overflow: hidden;
}
.ff-confirm-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ff-confirm-hero-text {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 18px;
  background: linear-gradient(145deg, #fff 0%, #fff7ed 100%);
}
.ff-confirm-hero-text::after {
  content: '';
  position: absolute;
  right: -44px;
  top: -52px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,123,0,.16) 0 5px, transparent 6px 15px);
  pointer-events: none;
}
.ff-confirm-kicker {
  position: relative;
  z-index: 1;
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ff-confirm-hero-text h1 {
  position: relative;
  z-index: 1;
  margin: 5px 0 8px;
  color: var(--color-text);
  font-size: 1.65rem;
  line-height: 1.08;
}
.ff-confirm-hero-text p {
  position: relative;
  z-index: 1;
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: .94rem;
}
.ff-confirm-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}
.ff-confirm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ff-confirm-grid.two { grid-template-columns: 1fr 1fr; }
.ff-confirm-form .ff-field {
  margin: 0;
}
.ff-confirm-form .ff-field span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text);
  font-size: .84rem;
  font-weight: 850;
}
.ff-confirm-form input,
.ff-confirm-form select,
.ff-confirm-form textarea {
  width: 100%;
  min-height: 46px;
  margin: 0;
  border: 1px solid #dce2e6;
  border-radius: 14px;
  background: #f8fafb;
  color: var(--color-text);
  font-family: inherit;
  font-size: .98rem;
  padding: 11px 13px;
  box-sizing: border-box;
}
.ff-confirm-form textarea { resize: vertical; }
.ff-confirm-form input:focus,
.ff-confirm-form select:focus,
.ff-confirm-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,123,0,.14);
}
.ff-confirm-companion {
  margin-top: 10px;
  padding: 13px;
  border: 1px dashed rgba(255,123,0,.35);
  border-radius: 18px;
  background: #fffaf4;
}
.ff-confirm-companion-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.ff-confirm-companion-title span {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-orange);
  color: #fff;
  font-weight: 900;
}
.ff-confirm-companion-title strong { color: var(--color-text); }
.ff-confirm-dress {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
}
.ff-confirm-dress strong {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ff-confirm-submit {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 999px;
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255,123,0,.30);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
}
.ff-confirm-submit:disabled { opacity: .72; cursor: wait; }
.ff-confirm-response {
  display: none;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 750;
}
.ff-confirm-response.error,
.ff-confirm-response.ok { display: block; }
.ff-confirm-response.error { background: #fdeaea; color: #b32924; }
.ff-confirm-response.ok { background: #e7f5ec; color: var(--color-secondary-dark); }
.ff-share-confirm-card .ff-card-icon.green {
  background: #e1f6e8;
  color: #16883d;
}

/* Panel de agradecimiento (invitacion PULSERA): cierra el flujo sin QR.
   El talon replica la pulsera fisica que el invitado recibe en la entrada. */
.ff-thanks[hidden] { display: none; }
.ff-thanks {
  padding: 26px 20px 22px;
  animation: ff-thanks-in .45s ease both;
}
@keyframes ff-thanks-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.ff-thanks-head { text-align: center; }
.ff-thanks-kicker {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--color-secondary-dark);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.ff-thanks-head h2 {
  margin: 12px 0 6px;
  color: var(--color-text);
  font-size: 1.55rem;
  line-height: 1.12;
}
.ff-thanks-head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .96rem;
}
.ff-thanks-head p strong {
  color: var(--color-text);
  font-weight: 850;
}
.ff-thanks-stub {
  position: relative;
  margin: 24px 0 14px;
  padding: 24px 18px 18px;
  border-radius: 18px;
  background: var(--color-primary-soft);
}
/* Perforacion: la linea punteada y las dos muescas laterales. */
.ff-thanks-stub::before,
.ff-thanks-stub::after {
  content: '';
  position: absolute;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
}
.ff-thanks-stub::before { left: -11px; }
.ff-thanks-stub::after  { right: -11px; }
.ff-thanks-stub dl {
  display: grid;
  gap: 13px;
  margin: 0;
  padding-top: 4px;
  border-top: 2px dashed rgba(255,123,0,.38);
}
.ff-thanks-stub dl > div { display: grid; gap: 2px; }
.ff-thanks-stub dt {
  color: var(--color-primary-dark);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.ff-thanks-stub dd {
  margin: 0;
  color: var(--color-primary-darker);
  font-size: 1rem;
  font-weight: 750;
}
.ff-thanks-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .86rem;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ff-thanks { animation: none; }
}

@media (max-width: 620px) {
  .ff-confirm-public { padding: 0 0 30px; }
  .ff-confirm-card { border-radius: 0 0 24px 24px; }
  .ff-confirm-grid,
  .ff-confirm-grid.two { grid-template-columns: 1fr; }
  .ff-confirm-form { padding: 16px 14px 18px; }
}

@media (max-width: 620px) {
  .ff-thanks { padding: 22px 14px 18px; }
}

/* ===================================================================
   INVITADOS FORM — segunda pasada UX: flujo rápido + resumen vivo
   =================================================================== */
.ff-inv-form .ff-inv-live-summary { order: 19; }
.ff-inv-form .ff-card-location { order: 1; }
.ff-inv-form .ff-card-main { order: 2; }
.ff-inv-form .ff-card-sale { order: 2; }
.ff-inv-form .ff-preferences-card { order: 3; }
.ff-inv-form .ff-companions-card { order: 4; }
.ff-inv-form .ff-card-media { order: 5; }
.ff-inv-form .ff-sticky-save { order: 20; }

.ff-inv-live-summary {
  position: sticky;
  top: 64px;
  z-index: 14;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 123, 0, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ff-inv-live-summary div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 13px;
  background: #fff7ed;
}
.ff-inv-live-summary span,
.ff-inv-live-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-inv-live-summary span {
  color: var(--color-primary-dark);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.ff-inv-live-summary strong {
  margin-top: 2px;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 900;
}
.ff-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 5px;
  border-radius: 16px;
  background: #f2f5f7;
}
.ff-type-toggle button {
  min-height: 44px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 900;
}
.ff-type-toggle button.active {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 123, 0, .28);
}
.ff-type-toggle i { margin-right: 6px; }
/* El select queda como campo real para POST, pero el usuario usa el toggle. */
.ff-card-location > .ff-two-cols > .ff-field:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.ff-card-location > .ff-two-cols {
  grid-template-columns: 1fr;
}
.ff-card-main .ff-qr-field {
  margin-top: 8px;
}
.ff-inv-form .ff-field .ff-qr-input-wrap {
  position: relative;
  display: block;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.ff-inv-form .ff-qr-input-wrap #codigoT { padding-right: 52px; }
.ff-inv-form .ff-qr-input-wrap input[readonly] { cursor: pointer; background: #fff; }
.ff-inv-form .ff-qr-input-wrap input[id^="codigoAcom"] { padding-right: 92px; }
.ff-inv-form .ff-qr-camera-btn-scan { right: 48px; }
.ff-inv-form .ff-qr-camera-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 11px;
  background: var(--grad-orange);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 5px 12px rgba(255, 123, 0, .24);
}
.ff-inv-form .ff-field .ff-qr-camera-btn i {
  position: static;
  display: block;
  left: auto;
  top: auto;
  margin: 0;
  transform: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.ff-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .72);
  backdrop-filter: blur(4px);
}
.ff-qr-modal.open { display: flex; }
.ff-qr-modal-card {
  width: min(100%, 440px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}
.ff-qr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ff-qr-modal-head span,
.ff-qr-modal-head strong { display: block; }
.ff-qr-modal-head span {
  color: var(--color-primary-dark);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.ff-qr-modal-head strong { color: var(--color-text); font-size: 1.1rem; }
.ff-qr-modal-head button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  background: #f1f4f6;
  color: var(--color-text);
  cursor: pointer;
}
.ff-qr-camera-view {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #111827;
}
.ff-qr-camera-view video { width: 100%; height: 100%; object-fit: cover; }
.ff-qr-scan-frame {
  position: absolute;
  inset: 15%;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0,0,0,.28);
}
.ff-qr-scan-frame span {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: var(--color-primary);
  box-shadow: 0 0 10px var(--color-primary);
}
.ff-qr-modal-card > p { margin: 12px 0; color: var(--color-text-muted); font-size: .88rem; }
.ff-qr-modal .ff-field { display: block; margin: 0 0 12px; }
.ff-qr-modal .ff-field > span { display: block; margin-bottom: 7px; color: var(--color-text); font-size: .84rem; font-weight: 850; }
.ff-qr-modal .ff-field input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid #dce2e6;
  border-radius: 14px;
  background: #f8fafb;
  color: var(--color-text);
  font: inherit;
  box-sizing: border-box;
}
.ff-qr-modal .ff-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,123,0,.14); }
.ff-qr-manual-link {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 900;
  cursor: pointer;
}
.ff-qr-modal .suggestionsBox { position: static; width: 100%; max-height: 280px; overflow: auto; }
.ff-card-help {
  margin: -4px 0 12px;
  color: var(--color-text-muted);
  font-size: .86rem;
  line-height: 1.35;
}
.ff-companion-title {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.ff-companion-title button {
  margin-left: auto;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 900;
  padding: 7px 10px;
}
.ff-companion-title button:hover { background: var(--color-primary-soft); }
.ff-companion-title button.is-linked {
  color: #137a49;
  background: #e9f8f0;
  border-color: #bfe8d1;
}
.ff-card-main .ff-card-head em {
  background: #e7f5ec;
  color: var(--color-secondary-dark);
}
.ff-media-card .ff-card-head em {
  background: #edf0ff;
  color: #4c5bd5;
}

@media (max-width: 560px) {
  .ff-inv-live-summary {
    top: 58px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
  }
  .ff-inv-live-summary div { padding: 7px 6px; border-radius: 10px; }
  .ff-inv-live-summary span { font-size: .58rem; }
  .ff-inv-live-summary strong { font-size: .76rem; }
  .ff-companion-title button {
    width: 100%;
    margin: 4px 0 0;
  }
}

/* ===================================================================
   FIX CROPPER INVITADOS — modal real y usable en mobile
   =================================================================== */
.ff-app #uploadimageModal.ff-crop-modal,
.ff-app #uploadimageModalv.ff-crop-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 50000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 22, 32, .62) !important;
  text-align: center;
  overflow-y: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ff-app #uploadimageModal.ff-crop-modal[style*="display: block"],
.ff-app #uploadimageModalv.ff-crop-modal[style*="display: block"] {
  display: flex !important;
}
.ff-app .ff-crop-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: auto !important;
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  padding: 16px 14px 14px;
  border-radius: 22px !important;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.34) !important;
  overflow: hidden;
}
.ff-crop-head {
  margin-bottom: 10px;
  text-align: left;
}
.ff-crop-head strong {
  display: block;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 900;
}
.ff-crop-head span {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: .84rem;
  line-height: 1.3;
}
.ff-app .ff-crop-demo {
  width: 260px !important;
  max-width: 100%;
  min-height: 306px;
  margin: 0 auto !important;
}
.ff-app .ff-crop-demo .croppie-container {
  padding: 0;
}
.ff-app .ff-crop-demo .cr-boundary {
  border-radius: 18px;
  background: #eef1f3;
}
.ff-app .ff-crop-demo .cr-slider-wrap {
  width: 240px;
  margin: 14px auto 0;
}
.ff-crop-actions.modal-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  border: none;
  text-align: center;
}
.ff-crop-actions.one { grid-template-columns: 1fr; }
.ff-crop-actions button {
  min-height: 46px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 900;
}
.ff-crop-actions button:first-child {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255,123,0,.26);
}
.ff-crop-actions button:last-child {
  background: #eef1f3;
  color: var(--color-text-muted);
}
.ff-video-preview video {
  width: 100%;
  max-height: 60vh;
  border-radius: 16px;
  background: #000;
}

@media (max-width: 560px) {
  .ff-inv-live-summary { position: static; }
  .ff-app .ff-crop-card {
    width: min(330px, calc(100vw - 24px)) !important;
    padding: 14px 12px 12px;
  }
  .ff-app .ff-crop-demo {
    width: 240px !important;
    min-height: 286px;
  }
  .ff-app .ff-crop-demo .cr-boundary {
    width: 240px !important;
    height: 240px !important;
  }
  .ff-app .ff-crop-demo .cr-slider-wrap { width: 220px; }
  .ff-crop-actions button { min-height: 44px; }
}

/* ===================================================================
   QR lookup en Invitados — estado asignado/disponible legible
   =================================================================== */
.ff-app .ff-inv-form .suggestionsBox {
  position: relative !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0;
  border: none !important;
  border-radius: 16px;
  background: transparent !important;
  color: var(--color-text);
  box-shadow: none !important;
  z-index: 20;
}
.ff-app .ff-inv-form .suggestionList {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}
.ff-qr-option {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  grid-template-areas:
    "code status"
    "detail status";
  align-items: center;
  gap: 2px 10px;
  padding: 11px 12px;
  border: 1px solid rgba(20, 30, 45, .08);
  border-left: 5px solid var(--color-secondary);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.ff-qr-option.assigned { border-left-color: var(--color-error); }
.ff-qr-option:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.ff-qr-code {
  grid-area: code;
  font-size: .98rem;
  font-weight: 900;
  letter-spacing: .4px;
}
.ff-qr-detail {
  grid-area: detail;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 700;
}
.ff-qr-status {
  grid-area: status;
  justify-self: end;
  padding: 7px 9px;
  border-radius: 999px;
  background: #e7f5ec;
  color: var(--color-secondary-dark);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ff-qr-option.assigned .ff-qr-status {
  background: #fdeaea;
  color: var(--color-error);
}
.ff-qr-empty {
  padding: 12px 13px;
  border-radius: 14px;
  background: #fff;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  font-size: .88rem;
  font-weight: 750;
}

@media (max-width: 560px) {
  .ff-qr-option {
    grid-template-columns: 1fr;
    grid-template-areas: "code" "detail" "status";
  }
  .ff-qr-status { justify-self: start; }
}

/* Estado actual del QR dentro del alta de invitados */
.ff-app .ff-inv-form .ff-qr-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  margin-top: -4px;
  padding: 8px 11px;
  border: none;
  border-radius: 12px;
  background: #f6f8f9;
  box-shadow: none;
}
.ff-app .ff-inv-form .ff-qr-current span {
  display: block;
  color: var(--color-text-muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.ff-app .ff-inv-form .ff-qr-current strong {
  display: block;
  margin-top: 1px;
  color: var(--color-text);
  font-size: .8rem;
  font-weight: 950;
}
.ff-app .ff-inv-form .ff-qr-current em {
  justify-self: end;
  max-width: 270px;
  color: var(--color-text-muted);
  font-size: .7rem;
  font-style: normal;
  font-weight: 750;
  text-align: right;
}
.ff-app .ff-inv-form .ff-qr-current.available,
.ff-app .ff-inv-form .ff-qr-current.current { background: #f2faf5; }
.ff-app .ff-inv-form .ff-qr-current.assigned { background: #fff5f5; }
.ff-qr-option:disabled,
.ff-qr-option.assigned:disabled {
  opacity: .82;
  cursor: not-allowed;
}
.ff-qr-option:disabled:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
  .ff-app .ff-inv-form .ff-qr-current { grid-template-columns: 1fr; }
  .ff-app .ff-inv-form .ff-qr-current em { justify-self: start; text-align: left; max-width: none; }
}

/* ===================================================================
   Proveedores — agenda visual por rubros
   =================================================================== */
.ff-providers-page,
.ff-provider-form-page {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 14px 12px 90px;
}
.ff-providers-hero,
.ff-provider-form-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background: radial-gradient(circle at top left, rgba(255,123,0,.20), transparent 34%), linear-gradient(135deg, #fff, #fff7ef);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,123,0,.16);
}
.ff-providers-hero h2,
.ff-provider-form-hero h2 {
  margin: 4px 0 6px;
  color: var(--color-text);
  font-size: clamp(1.65rem, 5vw, 2.5rem);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -1px;
}
.ff-providers-hero p,
.ff-provider-form-hero p {
  max-width: 560px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: .95rem;
  font-weight: 650;
}
.ff-providers-kicker {
  color: var(--color-primary-dark);
  font-size: .74rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.ff-provider-add,
.ff-provider-toolbar button,
.ff-provider-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff !important;
  font-family: inherit;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(255,123,0,.24);
  cursor: pointer;
}
.ff-provider-add { min-height: 48px; padding: 0 18px; white-space: nowrap; }
.ff-provider-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ff-provider-stats div {
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.06);
}
.ff-provider-stats span,
.ff-provider-rubro-head span,
.ff-provider-form .ff-card-head span {
  display: block;
  color: var(--color-primary-dark);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .9px;
}
.ff-provider-stats strong { display: block; margin-top: 2px; color: var(--color-text); font-size: 1.55rem; font-weight: 950; }
.ff-provider-stats em { color: var(--color-text-muted); font-style: normal; font-size: .78rem; font-weight: 750; }
.ff-provider-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  margin-bottom: 14px;
}
.ff-provider-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.08);
  color: var(--color-primary-dark);
}
.ff-provider-search input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 750;
}
.ff-provider-toolbar button { min-height: 48px; padding: 0 14px; box-shadow: var(--shadow-sm); }
.ff-provider-list { display: grid; gap: 12px; }
.ff-provider-rubro {
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.07);
  overflow: hidden;
}
.ff-provider-rubro-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 0;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ff-provider-rubro-head strong { display: block; margin-top: 2px; font-size: 1rem; font-weight: 950; }
.ff-provider-rubro-head em {
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff3e5;
  color: var(--color-primary-dark);
  font-size: .75rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}
.ff-provider-rubro-head .fa-angle-down { color: var(--color-primary); font-size: 1.25rem; transition: transform .2s ease; }
.ff-provider-rubro.open .ff-provider-rubro-head .fa-angle-down { transform: rotate(180deg); }
.ff-provider-rubro-body { display: none; padding: 0 14px 14px; }
.ff-provider-rubro.open .ff-provider-rubro-body { display: grid; gap: 10px; }
.ff-provider-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff, #f9fafb);
  border: 1px solid rgba(20,30,45,.06);
}
.ff-provider-logo {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: #fff7ef;
  border: 1px solid rgba(255,123,0,.12);
}
.ff-provider-logo img { width: 100%; height: 100%; object-fit: cover; }
.ff-provider-info { min-width: 0; display: grid; gap: 4px; }
.ff-provider-info strong { color: var(--color-text); font-size: 1rem; font-weight: 950; }
.ff-provider-info span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 750;
}
.ff-provider-info i { width: 16px; color: var(--color-primary); }
.ff-provider-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.ff-provider-actions a { min-height: 36px; padding: 0 11px; font-size: .78rem; box-shadow: none; }
.ff-provider-actions a:nth-child(2) { background: linear-gradient(135deg, #20b35b, #128c45); }
.ff-provider-actions a:nth-child(3) { background: #eef2f6; color: var(--color-text) !important; }
.ff-provider-empty-rubro,
.ff-provider-no-results {
  padding: 16px;
  border-radius: 18px;
  background: #fff8ef;
  color: var(--color-text-muted);
  font-size: .9rem;
  font-weight: 800;
  border: 1px dashed rgba(255,123,0,.25);
}
.ff-provider-no-results { display: none; margin-top: 12px; text-align: center; }
.ff-provider-form { display: grid; gap: 14px; margin-top: 14px; }
.ff-provider-upload { display: grid; gap: 12px; }
.ff-provider-upload #file { display: none; }
.ff-provider-upload #filever {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px dashed rgba(255,123,0,.35);
  border-radius: 22px;
  background: #fff8ef;
  color: var(--color-primary-dark);
  font-family: inherit;
  font-weight: 950;
  cursor: pointer;
}
.ff-provider-upload #filever i { font-size: 1.8rem; }
.ff-provider-upload #filever em { color: var(--color-text-muted); font-size: .78rem; font-style: normal; }
.ff-provider-preview { position: relative; width: 140px; }
.ff-provider-preview #fotover { display: none; width: 140px; height: 140px; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-sm); }
.ff-provider-preview .btn_foto {
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(220, 53, 69, .94);
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 760px) {
  .ff-providers-page,
  .ff-provider-form-page { padding-left: 8px; padding-right: 8px; }
  .ff-providers-hero,
  .ff-provider-form-hero { flex-direction: column; align-items: stretch; border-radius: 24px; }
  .ff-provider-add { width: 100%; }
  .ff-provider-stats { grid-template-columns: 1fr; }
  .ff-provider-toolbar { grid-template-columns: 1fr; }
  .ff-provider-card { grid-template-columns: 58px minmax(0, 1fr); align-items: start; }
  .ff-provider-logo { width: 58px; height: 58px; border-radius: 16px; }
  .ff-provider-actions { grid-column: 1 / -1; justify-content: stretch; }
  .ff-provider-actions a { flex: 1; }
  .ff-provider-rubro-head { grid-template-columns: minmax(0, 1fr) auto; }
  .ff-provider-rubro-head em { grid-column: 1 / -1; justify-self: start; }
}

/* Fallback sin imagen para proveedores: evita loops de onerror si falta logos/1.jpg */
.ff-provider-logo span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 1.45rem;
  font-weight: 950;
  letter-spacing: -1px;
}

/* ===================================================================
   Tareas — checklist de organización
   =================================================================== */
.ff-tasks-page {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 14px 12px 90px;
}
.ff-tasks-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  background: radial-gradient(circle at top left, rgba(255,123,0,.22), transparent 34%), linear-gradient(135deg, #fff, #fff7ef);
  border: 1px solid rgba(255,123,0,.16);
  box-shadow: var(--shadow);
}
.ff-tasks-kicker {
  color: var(--color-primary-dark);
  font-size: .74rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 1.35px;
}
.ff-tasks-hero h2 {
  margin: 4px 0 6px;
  color: var(--color-text);
  font-size: clamp(1.65rem, 5vw, 2.5rem);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -1px;
}
.ff-tasks-hero p {
  max-width: 560px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: .95rem;
  font-weight: 650;
}
.ff-tasks-progress-ring {
  --progress: 0;
  width: 118px;
  height: 118px;
  flex: 0 0 118px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: conic-gradient(var(--color-secondary) calc(var(--progress) * 1%), #ffe0c2 0);
  box-shadow: 0 14px 30px rgba(255,123,0,.20);
  position: relative;
}
.ff-tasks-progress-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}
.ff-tasks-progress-ring strong,
.ff-tasks-progress-ring span { position: relative; z-index: 1; }
.ff-tasks-progress-ring strong { color: var(--color-text); font-size: 1.45rem; font-weight: 950; }
.ff-tasks-progress-ring span { margin-top: -10px; color: var(--color-text-muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.ff-tasks-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ff-tasks-stats div {
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.06);
}
.ff-tasks-stats span,
.ff-task-section-head span {
  display: block;
  color: var(--color-primary-dark);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .9px;
}
.ff-tasks-stats strong { display: block; color: var(--color-text); font-size: 1.55rem; font-weight: 950; }
.ff-tasks-stats em { color: var(--color-text-muted); font-style: normal; font-size: .78rem; font-weight: 750; }
.ff-tasks-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}
.ff-tasks-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.08);
  color: var(--color-primary-dark);
}
.ff-tasks-search input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 750;
}
.ff-tasks-filters {
  display: flex;
  gap: 7px;
  padding: 5px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.06);
}
.ff-tasks-filters button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}
.ff-tasks-filters button.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 10px 18px rgba(255,123,0,.20);
}
.ff-tasks-sections { display: grid; gap: 12px; }
.ff-task-section {
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.07);
  overflow: hidden;
}
.ff-task-section-head {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 0;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ff-task-section-head strong { display: block; margin-top: 2px; font-size: 1rem; font-weight: 950; }
.ff-task-section-head em {
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff3e5;
  color: var(--color-primary-dark);
  font-size: .75rem;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}
.ff-task-section-head .fa-angle-down { color: var(--color-primary); font-size: 1.25rem; transition: transform .2s ease; }
.ff-task-section.open .ff-task-section-head .fa-angle-down { transform: rotate(180deg); }
.ff-task-section-meter { height: 5px; background: #fff0de; }
.ff-task-section-meter i { display: block; height: 100%; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.ff-task-section-body { display: none; padding: 12px 14px 14px; gap: 9px; }
.ff-task-section.open .ff-task-section-body { display: grid; }
.ff-task-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 18px;
  border: 1px solid rgba(20,30,45,.06);
  background: linear-gradient(135deg, #fff, #f9fafb);
}
.ff-task-item.done { background: linear-gradient(135deg, #fff, #f0fff6); }
.ff-task-check {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: #fff3e5;
  color: var(--color-primary-dark);
  font-size: 1.2rem;
  cursor: pointer;
}
.ff-task-item.done .ff-task-check { background: #e7f5ec; color: var(--color-secondary-dark); }
.ff-task-copy { min-width: 0; display: grid; gap: 3px; }
.ff-task-copy strong { color: var(--color-text); font-size: .95rem; font-weight: 900; }
.ff-task-item.done .ff-task-copy strong { text-decoration: line-through; color: var(--color-text-muted); }
.ff-task-copy span { color: var(--color-text-muted); font-size: .74rem; font-weight: 850; text-transform: uppercase; letter-spacing: .5px; }
.ff-task-action {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 950;
  cursor: pointer;
}
.ff-task-item.done .ff-task-action { background: #eef2f6; color: var(--color-text); }
.ff-task-empty,
.ff-task-no-results {
  padding: 16px;
  border-radius: 18px;
  background: #fff8ef;
  color: var(--color-text-muted);
  font-size: .9rem;
  font-weight: 800;
  border: 1px dashed rgba(255,123,0,.25);
}
.ff-task-no-results { display: none; margin-top: 12px; text-align: center; }
@media (max-width: 760px) {
  .ff-tasks-page { padding-left: 8px; padding-right: 8px; }
  .ff-tasks-hero { flex-direction: column; align-items: stretch; border-radius: 24px; }
  .ff-tasks-progress-ring { align-self: center; }
  .ff-tasks-stats { grid-template-columns: 1fr; }
  .ff-tasks-toolbar { grid-template-columns: 1fr; }
  .ff-tasks-filters { overflow-x: auto; }
  .ff-task-section-head { grid-template-columns: minmax(0, 1fr) auto; }
  .ff-task-section-head em { grid-column: 1 / -1; justify-self: start; }
  .ff-task-item { grid-template-columns: 42px minmax(0, 1fr); align-items: start; }
  .ff-task-action { grid-column: 1 / -1; width: 100%; }
}

/* Ajuste fino: separar porcentaje y leyenda del anillo de progreso en Tareas */
.ff-tasks-progress-ring {
  align-content: center;
  gap: 5px;
}
.ff-tasks-progress-ring strong {
  line-height: 1;
}
.ff-tasks-progress-ring span {
  margin-top: 0;
  line-height: 1;
}

/* Ajuste accesos rápidos: tarjetas parejas y texto consistente */
.ff-quick .ff-card {
  min-height: 88px;
  box-sizing: border-box;
  align-items: center;
}
.ff-quick .ff-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .98rem;
  line-height: 1.12;
  font-weight: 800;
}
.ff-quick .ff-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.22;
}
@media (min-width: 620px) {
  .ff-quick { align-items: stretch; }
  .ff-quick .ff-card { height: 88px; }
}
@media (max-width: 380px) {
  .ff-quick .ff-card { gap: 11px; padding: 13px 12px; }
  .ff-card-icon { width: 48px; height: 48px; }
  .ff-card-chev { font-size: 1.15rem; }
}

/* Modal propio para compartir confirmación por WhatsApp */
.ff-share-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.ff-share-modal.open { display: flex; }
.ff-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 28, .58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ff-share-dialog {
  position: relative;
  width: min(100%, 430px);
  padding: 24px;
  border-radius: 28px;
  background: radial-gradient(circle at top left, rgba(32,179,91,.18), transparent 34%), linear-gradient(135deg, #fff, #fff8ef);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,123,0,.16);
  color: var(--color-text);
  animation: ffShareIn .18s ease-out;
}
@keyframes ffShareIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ff-share-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20,30,45,.06);
  color: var(--color-text-muted);
  cursor: pointer;
}
.ff-share-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #e1f6e8;
  color: #16883d;
  font-size: 1.65rem;
  margin-bottom: 14px;
}
.ff-share-kicker {
  display: block;
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ff-share-dialog h3 {
  margin: 4px 0 6px;
  color: var(--color-text);
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.5px;
}
.ff-share-dialog p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
}
.ff-share-field { display: grid; gap: 7px; }
.ff-share-field span {
  color: var(--color-text);
  font-size: .84rem;
  font-weight: 900;
}
.ff-share-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(20,30,45,.12);
  border-radius: 16px;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  outline: 0;
  box-sizing: border-box;
}
.ff-share-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(255,123,0,.14);
}
.ff-share-field select {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(20,30,45,.12);
  border-radius: 16px;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  outline: 0;
  box-sizing: border-box;
}
.ff-share-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(255,123,0,.14);
}
.ff-share-previews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 4px;
}
.ff-share-preview {
  margin: 0;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(20,30,45,.1);
  border-radius: 16px;
  background: #f7f9fb;
}
.ff-share-preview figcaption {
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7c8a97;
}
.ff-share-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: #e7ecf1;
}
.ff-share-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #e7ecf1;
  color: #90a0ac;
  font-size: .8rem;
  font-weight: 800;
}
.ff-share-preview-empty[hidden],
.ff-share-preview img[hidden] { display: none; }
.ff-share-error {
  display: none;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fdeaea;
  color: #b32924;
  font-size: .84rem;
  font-weight: 800;
}
.ff-share-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.ff-share-actions button {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 950;
  cursor: pointer;
}
.ff-share-secondary { background: #eef2f6; color: var(--color-text); }
.ff-share-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #20b35b, #128c45);
  color: #fff;
  box-shadow: 0 12px 24px rgba(32,179,91,.22);
}
@media (max-width: 420px) {
  .ff-share-dialog { padding: 20px 16px; border-radius: 24px; }
  .ff-share-actions { flex-direction: column-reverse; }
  .ff-share-actions button { width: 100%; }
}

/* Estadísticas de ingreso */
.ff-stats { max-width: 920px; margin: 0 auto; padding: 14px 0 44px; display: grid; gap: 16px; }
.ff-stats-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; color:#fff; border-radius:24px; background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); box-shadow:0 14px 30px rgba(255,123,0,.25); }
.ff-stats-kicker,.ff-stats-panel-head span { display:block; font-size:.7rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--color-primary-dark); }
.ff-stats-hero .ff-stats-kicker { color:#fff3df; }
.ff-stats-hero h2 { margin:4px 0; font-size:1.65rem; font-weight:900; }
.ff-stats-hero p { margin:0; color:rgba(255,255,255,.72); font-weight:600; }
.ff-stats-ring { --p:calc(var(--value) * 1%); width:106px; height:106px; flex:0 0 106px; display:grid; place-content:center; text-align:center; border-radius:50%; background:radial-gradient(circle closest-side,var(--color-primary-dark) 72%,transparent 73%),conic-gradient(#fff var(--p),rgba(255,255,255,.24) 0); }
.ff-stats-ring strong { font-size:1.45rem; line-height:1; }.ff-stats-ring span { margin-top:3px; font-size:.68rem; font-weight:800; opacity:.75; }
.ff-stats-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ff-stats-cards article { position:relative; padding:17px; overflow:hidden; border:1px solid rgba(20,30,45,.08); border-radius:19px; background:#fff; box-shadow:var(--shadow-sm); }
.ff-stats-cards article i { position:absolute; right:13px; top:13px; color:#b6bec8; font-size:1.15rem; }.ff-stats-cards article.success i { color:#35a566; }.ff-stats-cards article.pending i { color:#f29b38; }
.ff-stats-cards strong { display:block; padding-right:24px; color:var(--color-text); font-size:1.55rem; font-weight:900; }.ff-stats-cards span { color:var(--color-text-muted); font-size:.75rem; font-weight:800; }
.ff-stats-panel { padding:20px; border:1px solid rgba(20,30,45,.08); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); }
.ff-stats-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:17px; }.ff-stats-panel-head h3 { margin:2px 0 0; color:var(--color-text); font-size:1.05rem; font-weight:900; }.ff-stats-panel-head small { color:var(--color-text-muted); font-weight:700; }
.ff-hour-chart { display:grid; gap:11px; }.ff-hour-row { display:grid; grid-template-columns:48px 1fr 28px; align-items:center; gap:10px; font-size:.78rem; }.ff-hour-row time,.ff-hour-row strong { color:var(--color-text); font-weight:900; }.ff-hour-row div { height:10px; overflow:hidden; border-radius:99px; background:#edf0f3; }.ff-hour-row div span { display:block; height:100%; min-width:5px; border-radius:99px; background:linear-gradient(90deg,#ff7b00,#ffae52); }
.ff-stats-tools { display:flex; gap:10px; margin-bottom:14px; }
.ff-stats-search { flex:1; min-width:0; min-height:42px; display:flex; align-items:center; gap:9px; padding:8px 13px; box-sizing:border-box; border:1px solid #dde2e8; border-radius:13px; background:#fafbfc; color:var(--color-primary); transition:border-color .18s,box-shadow .18s,background .18s; }
.ff-stats-search:focus-within { border-color:var(--color-primary); background:#fff; box-shadow:0 0 0 3px rgba(255,123,0,.1); }
.ff-stats-search i { flex:0 0 auto; font-size:.8rem; }
.ff-stats-tools .ff-stats-search input { flex:1; min-width:0; width:100%; height:auto; padding:0; border:0; border-radius:0; outline:none; background:transparent; color:var(--color-text); font-family:inherit; font-size:.8rem; font-weight:700; box-shadow:none; }
.ff-stats-tools .ff-stats-search input:focus { border:0; box-shadow:none; }
.ff-stats-filters { display:flex; gap:4px; padding:4px; border-radius:13px; background:#f0f2f5; }.ff-stats-filters button { border:0; padding:0 11px; border-radius:10px; background:transparent; color:var(--color-text-muted); font-family:inherit; font-size:.74rem; font-weight:900; cursor:pointer; }.ff-stats-filters button.active { background:#fff; color:var(--color-primary-dark); box-shadow:0 2px 7px rgba(20,30,45,.1); }
.ff-stats-detail { display:grid; gap:7px; }.ff-stats-person { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; padding:10px 11px; border-radius:14px; background:#f8f9fb; }.ff-stats-person-state { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#e7eaee; color:#8b95a2; }.ff-stats-person-state.in { background:#dff5e7; color:#24874e; }.ff-stats-person-main strong,.ff-stats-person-main span,.ff-stats-person-time strong,.ff-stats-person-time span { display:block; }.ff-stats-person-main strong { overflow:hidden; color:var(--color-text); font-size:.86rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.ff-stats-person-main span,.ff-stats-person-time span { margin-top:2px; color:var(--color-text-muted); font-size:.68rem; font-weight:700; }.ff-stats-person-time { min-width:62px; text-align:right; }.ff-stats-person-time strong { color:var(--color-text); font-size:.85rem; font-weight:900; }
.ff-stats-empty { display:grid; justify-items:center; gap:8px; padding:30px; color:var(--color-text-muted); text-align:center; font-size:.82rem; font-weight:700; }.ff-stats-empty i { font-size:1.4rem; }
.ff-revenue-section { padding:22px; border:1px solid rgba(255,123,0,.18); border-radius:24px; background:linear-gradient(145deg,#fffaf4,#fff); box-shadow:var(--shadow-sm); }
.ff-revenue-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }.ff-revenue-head > div > span { display:block; color:var(--color-primary-dark); font-size:.7rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; }.ff-revenue-head h2 { margin:2px 0 3px; color:var(--color-text); font-size:1.35rem; font-weight:900; }.ff-revenue-head p { margin:0; color:var(--color-text-muted); font-size:.78rem; font-weight:700; }.ff-revenue-head > i { width:48px; height:48px; display:grid; flex:0 0 48px; place-items:center; border-radius:16px; background:var(--color-primary-soft); color:var(--color-primary-dark); font-size:1.25rem; }
.ff-revenue-cards { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; margin-bottom:16px; }.ff-revenue-cards article { padding:16px; border:1px solid rgba(20,30,45,.07); border-radius:17px; background:#fff; }.ff-revenue-cards article.main { border-color:transparent; background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark)); color:#fff; box-shadow:0 10px 22px rgba(255,123,0,.2); }.ff-revenue-cards span,.ff-revenue-cards strong,.ff-revenue-cards em { display:block; }.ff-revenue-cards span { color:var(--color-text-muted); font-size:.7rem; font-weight:900; text-transform:uppercase; }.ff-revenue-cards strong { margin:4px 0; color:var(--color-text); font-size:1.25rem; font-weight:950; white-space:nowrap; }.ff-revenue-cards em { color:var(--color-text-muted); font-size:.68rem; font-style:normal; font-weight:700; }.ff-revenue-cards .main span,.ff-revenue-cards .main strong,.ff-revenue-cards .main em { color:#fff; }.ff-revenue-cards .main span,.ff-revenue-cards .main em { opacity:.82; }
.ff-revenue-cards article.average,.ff-revenue-cards article.pending { position:relative; overflow:hidden; padding-top:20px; }
.ff-revenue-cards article.average { border-color:rgba(255,123,0,.16); background:linear-gradient(145deg,#fff,#fff8ef); }
.ff-revenue-cards article.pending { border-color:rgba(103,116,133,.14); background:linear-gradient(145deg,#fff,#f6f8fa); }
.ff-revenue-cards article.average::before,.ff-revenue-cards article.pending::before { content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--color-primary); }
.ff-revenue-cards article.pending::before { background:#8c98a7; }
.ff-revenue-cards article.average::after,.ff-revenue-cards article.pending::after { position:absolute; right:12px; top:14px; color:rgba(255,123,0,.14); font:normal normal normal 22px/1 FontAwesome; }
.ff-revenue-cards article.average::after { content:'\f201'; }
.ff-revenue-cards article.pending::after { content:'\f017'; color:rgba(103,116,133,.14); }
.ff-revenue-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.ff-revenue-breakdown > div { padding:14px; border-radius:16px; background:#fff; border:1px solid rgba(20,30,45,.07); }.ff-revenue-breakdown h3 { margin:0 0 8px; color:var(--color-text); font-size:.82rem; font-weight:900; }.ff-revenue-line { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid #eef0f2; font-size:.75rem; }.ff-revenue-line span { color:var(--color-text-muted); font-weight:750; }.ff-revenue-line strong { color:var(--color-text); font-weight:900; }.ff-revenue-empty { margin:0; padding:10px 0; color:var(--color-text-muted); font-size:.73rem; font-weight:700; }
@media(max-width:700px){.ff-stats-cards{grid-template-columns:1fr 1fr}.ff-stats-tools{flex-direction:column}.ff-stats-filters{height:40px}.ff-stats-filters button{flex:1}.ff-stats-hero{padding:19px}.ff-stats-ring{width:88px;height:88px;flex-basis:88px}.ff-stats-panel{padding:15px}}
@media(max-width:700px){.ff-revenue-section{padding:14px;border-radius:19px}.ff-revenue-head{margin-bottom:13px}.ff-revenue-head h2{font-size:1.18rem}.ff-revenue-head p{font-size:.7rem;line-height:1.35}.ff-revenue-head>i{width:40px;height:40px;flex-basis:40px;border-radius:13px;font-size:1.05rem}.ff-revenue-cards{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.ff-revenue-cards .main{grid-column:1/-1}.ff-revenue-cards article{min-height:104px;padding:14px;border-radius:15px}.ff-revenue-cards article.average,.ff-revenue-cards article.pending{padding-top:17px}.ff-revenue-cards span{padding-right:22px;font-size:.61rem;letter-spacing:.25px}.ff-revenue-cards strong{margin:4px 0 3px;font-size:1.13rem}.ff-revenue-cards em{font-size:.61rem;line-height:1.25}.ff-revenue-cards article.average::after,.ff-revenue-cards article.pending::after{right:10px;top:12px;font-size:18px}.ff-revenue-breakdown{grid-template-columns:1fr}.ff-revenue-breakdown>div{padding:12px;border-radius:14px}}
@media(max-width:430px){.ff-stats-hero h2{font-size:1.25rem}.ff-stats-hero p{font-size:.76rem}.ff-stats-ring{width:78px;height:78px;flex-basis:78px}.ff-stats-ring strong{font-size:1.15rem}.ff-stats-person{grid-template-columns:34px minmax(0,1fr) auto}.ff-stats-person-state{width:32px;height:32px}}
@media(max-width:700px){.ff-stats-search{width:100%;height:auto;min-height:46px;padding:9px 11px;border-radius:12px}.ff-stats-search i{font-size:.75rem}.ff-stats-tools .ff-stats-search input{font-size:.75rem;line-height:1.35}}

/* Confirmación pública: banner del evento integrado al diseño */
.ff-confirm-banner {
  min-height: 180px;
  background: linear-gradient(135deg, #fff3e5, #fdfdfd);
}
.ff-confirm-banner img {
  width: 100%;
  max-height: 330px;
  object-fit: cover;
}
@media (max-width: 620px) {
  .ff-confirm-banner { min-height: 140px; }
  .ff-confirm-banner img { max-height: 260px; }
}

/* Home mobile: igualar márgenes con pantallas internas como Invitados */
@media (max-width: 620px) {
  .ff-main {
    max-width: 360px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 380px) {
  .ff-main {
    max-width: calc(100% - 20px);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Home mobile debe usar exactamente la misma columna que Invitados */
@media (max-width: 620px) {
  .ff-main {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 10px 0 42px;
  }
}
@media (max-width: 380px) {
  .ff-main {
    width: 100%;
    max-width: 640px;
    padding: 10px 0 42px;
  }
}

/* Proveedores mobile: misma columna/márgenes que Invitados */
@media (max-width: 620px) {
  .ff-providers-page,
  .ff-provider-form-page {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 10px 0 42px;
  }
}

/* Tareas mobile: misma columna/márgenes que Invitados */
@media (max-width: 620px) {
  .ff-tasks-page {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 10px 0 42px;
  }
}

/* ===================================================================
   Mesas — diseñador mobile de salón
   =================================================================== */
.ff-mesas-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.ff-mesas-add.secondary {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,123,0,.18);
}
.ff-table-designer-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 0 84px;
}
.ff-table-designer-hero {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px;
  background: radial-gradient(circle at top right, rgba(255,123,0,.18), transparent 36%), linear-gradient(135deg, #fff, #fff7ef);
  border: 1px solid rgba(255,123,0,.14);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.ff-table-designer-hero p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}
.ff-designer-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.ff-designer-stats div {
  padding: 11px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(20,30,45,.06);
}
.ff-designer-stats strong { display:block; color: var(--color-primary-dark); font-size: 1.35rem; font-weight: 950; line-height: 1; }
.ff-designer-stats span { display:block; margin-top: 4px; color: var(--color-text-muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.ff-designer-toolbar {
  position: sticky;
  top: 56px;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 8px;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow-x: auto;
}
.ff-designer-toolbar button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #fff3e5;
  color: var(--color-primary-dark);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}
.ff-designer-toolbar button.save {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 12px 22px rgba(255,123,0,.24);
}
.ff-designer-toolbar button.save.dirty { background: linear-gradient(135deg, #ffb13d, #ff7b00); }
.ff-designer-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
  align-items: start;
}
.ff-designer-canvas-wrap {
  overflow: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(20,30,45,.07);
  -webkit-overflow-scrolling: touch;
}
.ff-designer-canvas {
  position: relative;
  width: 760px;
  height: 560px;
  min-width: 100%;
  background-color: #fffdf9;
  background-image:
    linear-gradient(rgba(255,123,0,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,123,0,.09) 1px, transparent 1px);
  background-size: 28px 28px;
  touch-action: none;
}
.ff-design-table {
  position: absolute;
  display: grid;
  place-items: center;
  transform-origin: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 2;
}
.ff-design-table:active { cursor: grabbing; }
.ff-design-table.selected { z-index: 5; }
.ff-design-body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 8px;
  background: var(--mesa-color, #ff8a1f);
  color: #fff;
  border: 3px solid rgba(255,255,255,.74);
  box-shadow: 0 12px 28px rgba(20,30,45,.22);
}
.ff-design-table.shape-redonda .ff-design-body { border-radius: 999px; }
.ff-design-table.shape-cuadrada .ff-design-body { border-radius: 20px; }
.ff-design-table.shape-rectangular .ff-design-body { border-radius: 18px; }
.ff-design-table.selected .ff-design-body {
  outline: 4px solid rgba(47,158,95,.32);
  box-shadow: 0 0 0 4px rgba(47,158,95,.18), 0 16px 32px rgba(20,30,45,.28);
}
.ff-design-body strong { font-size: 1rem; font-weight: 950; line-height: 1; text-align: center; }
.ff-design-body em { margin-top: 4px; font-size: .62rem; font-style: normal; font-weight: 850; opacity: .9; text-align: center; }
.ff-design-chairs { position: absolute; inset: 0; pointer-events: none; }
.ff-design-chairs span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #16202b;
  border: 2px solid #fff;
  box-shadow: 0 3px 7px rgba(20,30,45,.18);
}
.ff-designer-panel {
  position: sticky;
  top: 122px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(20,30,45,.07);
  padding: 14px;
}
.ff-panel-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--color-text-muted);
}
.ff-panel-empty i { width: 54px; height: 54px; display:grid; place-items:center; border-radius:18px; background:#fff3e5; color:var(--color-primary); font-size:1.4rem; }
.ff-panel-empty strong { color: var(--color-text); font-size: 1rem; font-weight: 950; }
.ff-panel-empty span { font-size: .84rem; font-weight: 750; line-height: 1.3; }
.ff-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ff-panel-head strong { font-size: 1.05rem; font-weight: 950; color: var(--color-text); }
.ff-panel-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 14px;
  background: #fdeaea;
  color: var(--color-error);
  cursor: pointer;
}
.ff-designer-panel .ff-field { display: grid; gap: 6px; margin-bottom: 10px; }
.ff-designer-panel .ff-field span { color: var(--color-text); font-size: .75rem; font-weight: 950; text-transform: uppercase; letter-spacing: .5px; }
.ff-designer-panel input,
.ff-designer-panel select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(20,30,45,.12);
  border-radius: 14px;
  padding: 0 10px;
  background: #f9fafb;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 850;
  outline: none;
}
.ff-designer-panel input[type="range"] { padding: 0; accent-color: var(--color-primary); }
.ff-designer-panel input[type="color"] { padding: 4px; }
.ff-designer-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ff-panel-nudge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.ff-panel-nudge button {
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #eef2f6;
  color: var(--color-text);
  cursor: pointer;
}
@media (max-width: 760px) {
  .ff-mesas-hero-actions { width: 100%; }
  .ff-mesas-hero-actions .ff-mesas-add { flex: 1; }
  .ff-table-designer-page { width: 100%; max-width: 640px; padding: 10px 0 42px; }
  .ff-table-designer-hero { border-radius: 22px; padding: 16px; }
  .ff-designer-workspace { grid-template-columns: 1fr; }
  .ff-designer-canvas { width: 680px; height: 520px; }
  .ff-designer-panel {
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 16;
    border-radius: 24px 24px 0 0;
    margin: 0 -12px;
  }
  .ff-designer-toolbar { grid-template-columns: repeat(4, max-content); }
}
@media (max-width: 420px) {
  .ff-designer-stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ff-designer-stats div { padding: 9px 8px; }
  .ff-designer-stats strong { font-size: 1.08rem; }
  .ff-designer-stats span { font-size: .62rem; }
  .ff-designer-grid2 { grid-template-columns: 1fr 1fr; }
}

/* Diseñador de mesas: edición en modal, sin panel lateral fijo */
.ff-designer-workspace {
  grid-template-columns: minmax(0, 1fr);
}
.ff-table-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ff-table-edit-modal.open { display: flex; }
.ff-table-edit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,18,28,.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ff-table-edit-dialog {
  position: relative;
  width: min(100%, 460px);
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 16px;
  border-radius: 26px;
  background: radial-gradient(circle at top right, rgba(255,123,0,.16), transparent 34%), #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,123,0,.16);
  animation: ffShareIn .18s ease-out;
}
.ff-table-edit-dialog .ff-panel-head {
  position: sticky;
  top: -16px;
  z-index: 2;
  margin: -16px -16px 12px;
  padding: 14px 14px 10px;
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.94));
  border-radius: 26px 26px 0 0;
}
.ff-table-edit-dialog .ff-panel-head > div {
  display: flex;
  gap: 8px;
}
.ff-table-edit-dialog .ff-panel-head button.danger {
  background: #fdeaea;
  color: var(--color-error);
}
.ff-table-edit-dialog .ff-field { display: grid; gap: 6px; margin-bottom: 10px; }
.ff-table-edit-dialog .ff-field span { color: var(--color-text); font-size: .75rem; font-weight: 950; text-transform: uppercase; letter-spacing: .5px; }
.ff-table-edit-dialog input,
.ff-table-edit-dialog select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(20,30,45,.12);
  border-radius: 14px;
  padding: 0 10px;
  background: #f9fafb;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 850;
  outline: none;
}
.ff-table-edit-dialog input[type="range"] { padding: 0; accent-color: var(--color-primary); }
.ff-table-edit-dialog input[type="color"] { padding: 4px; }
.ff-table-edit-done {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-family: inherit;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(255,123,0,.24);
  cursor: pointer;
}
@media (max-width: 760px) {
  .ff-table-edit-modal {
    align-items: flex-end;
    padding: 0;
  }
  .ff-table-edit-dialog {
    width: 100%;
    max-height: 86vh;
    border-radius: 26px 26px 0 0;
  }
}

/* Diseñador de mesas: modo maximizado desktop para usar todo el width */
.ff-designer-toolbar button.wide {
  background: #eef2f6;
  color: var(--color-text);
}
@media (min-width: 900px) {
  .ff-table-designer-page.maximized {
    width: calc(100vw - 32px);
    max-width: none;
    margin-left: calc(50% - 50vw + 16px);
    margin-right: calc(50% - 50vw + 16px);
    padding-top: 8px;
  }
  .ff-table-designer-page.maximized .ff-table-designer-hero,
  .ff-table-designer-page.maximized .ff-designer-stats {
    display: none;
  }
  .ff-table-designer-page.maximized .ff-designer-toolbar {
    grid-template-columns: repeat(5, max-content);
    justify-content: center;
  }
  .ff-table-designer-page.maximized .ff-designer-canvas-wrap {
    border-radius: 18px;
  }
  .ff-table-designer-page.maximized .ff-designer-canvas {
    width: 100%;
    min-width: 1180px;
    height: calc(100vh - 146px);
    min-height: 620px;
  }
}

/* Color de mesa aplicado inline desde JS; esta regla queda sólo como fallback */
.ff-design-body { background-color: #ff8a1f; }

/* Diseñador: maximizar y guardar como iconos para que la toolbar entre en una línea */
.ff-designer-toolbar {
  grid-template-columns: repeat(3, minmax(132px, 1fr)) 48px 48px;
}
.ff-designer-toolbar button.icon-only {
  width: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 16px;
}
.ff-designer-toolbar button.icon-only span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ff-designer-toolbar button.icon-only i {
  margin: 0;
  font-size: 1rem;
}
@media (max-width: 760px) {
  .ff-designer-toolbar {
    grid-template-columns: repeat(3, max-content) 48px 48px;
  }
}

/* Modal custom para salir del diseñador con cambios sin guardar */
.ff-designer-exit-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.ff-designer-exit-modal.open { display: flex; }
.ff-designer-exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,18,28,.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ff-designer-exit-dialog {
  position: relative;
  width: min(100%, 420px);
  padding: 24px;
  border-radius: 28px;
  background: radial-gradient(circle at top right, rgba(255,123,0,.18), transparent 34%), #fff;
  border: 1px solid rgba(255,123,0,.16);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  animation: ffShareIn .18s ease-out;
}
.ff-exit-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff3e5;
  color: var(--color-primary-dark);
  font-size: 1.45rem;
  margin-bottom: 12px;
}
.ff-exit-kicker {
  display: block;
  color: var(--color-primary-dark);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ff-designer-exit-dialog h3 {
  margin: 4px 0 8px;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 950;
  color: var(--color-text);
}
.ff-designer-exit-dialog p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.4;
  font-weight: 700;
}
.ff-exit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.ff-exit-actions button {
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 950;
  cursor: pointer;
}
.ff-exit-secondary { background: #eef2f6; color: var(--color-text); }
.ff-exit-danger {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 12px 24px rgba(255,123,0,.24);
}
@media (max-width: 420px) {
  .ff-designer-exit-dialog { padding: 20px 16px; border-radius: 24px; }
  .ff-exit-actions { flex-direction: column-reverse; }
  .ff-exit-actions button { width: 100%; }
}