@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #080808; color: #e5e2e1; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── Typography ────────────────────────────────────────────────── */
.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* ── Logo glow (hero only) ─────────────────────────────────────── */
.logo-glow { filter: drop-shadow(0 0 24px rgba(247,0,255,0.35)) drop-shadow(0 0 60px rgba(0,229,255,0.2)); }

/* ── Card ──────────────────────────────────────────────────────── */
.card {
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-2px); }
.card-pink:hover  { border-color: rgba(247,0,255,0.3); }
.card-cyan:hover  { border-color: rgba(0,229,255,0.3); }
.card-green:hover { border-color: rgba(120,210,0,0.3); }

/* ── Accent line (top of card) ─────────────────────────────────── */
.accent-pink  { border-top: 2px solid #f700ff; }
.accent-cyan  { border-top: 2px solid #00e5ff; }
.accent-green { border-top: 2px solid #78d200; }

/* ── Pill tag ──────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; border: 1px solid rgba(255,255,255,0.1); color: #a1a1aa; }
.tag-pink  { border-color: rgba(247,0,255,0.3);  color: #f700ff;  background: rgba(247,0,255,0.06); }
.tag-cyan  { border-color: rgba(0,229,255,0.3);  color: #00e5ff;  background: rgba(0,229,255,0.06); }
.tag-green { border-color: rgba(120,210,0,0.3);  color: #78d200;  background: rgba(120,210,0,0.06); }

/* ── Button ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border-radius: 8px; padding: 10px 24px; transition: opacity .15s, transform .15s; cursor: pointer; border: none; }
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-primary { background: #f700ff; color: #000; }
.btn-secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.14); }
.btn-cyan  { background: #00e5ff; color: #000; }
.btn-green { background: #78d200; color: #000; }
.btn-sm { font-size: 11px; padding: 7px 16px; }
.btn-lg { font-size: 14px; padding: 14px 36px; border-radius: 10px; }

/* ── Input ─────────────────────────────────────────────────────── */
/* Bump de especificidad (input.input) para ganar sobre @tailwindcss/forms,
   que aplica bg-white a [type=email|password|text|...]. */
.input,
input.input, select.input, textarea.input { width: 100%; background: #0f0f0f; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 11px 14px; font-size: 14px; color: #fff; outline: none; transition: border-color .2s; }
input.input:focus, select.input:focus, textarea.input:focus, .input:focus { border-color: rgba(247,0,255,0.5); }
input.input::placeholder, textarea.input::placeholder, .input::placeholder { color: #52525b; }
/* Autofill (Chrome/Safari): fuerza el color y el bg oscuro (bg no se puede pintar, se usa el text-fill inverso) */
input.input:-webkit-autofill,
input.input:-webkit-autofill:hover,
input.input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 30px #0f0f0f inset; caret-color: #fff; transition: background-color 9999s ease-in-out 0s; }

/* ── Field-input (variante compacta usada en admin/empleado modales) ──
   Mismo problema de especificidad que .input: hay que prefijar con el
   selector de elemento para ganarle a @tailwindcss/forms.
   Fondo casi-transparente (3% blanco) para que se lea sobre el bg del
   modal oscuro (#11161d) — texto blanco, layout compacto. */
.field-input,
input.field-input, select.field-input, textarea.field-input { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: .55rem .75rem; border-radius: .5rem; font-size: .875rem; outline: none; transition: border-color .15s; }
input.field-input:focus, select.field-input:focus, textarea.field-input:focus, .field-input:focus { border-color: rgba(247,0,255,0.5); }
input.field-input::placeholder, textarea.field-input::placeholder, .field-input::placeholder { color: rgba(255,255,255,0.4); }
/* Options del dropdown: el default del OS pinta blanco. Se fuerza el color del modal
   para que el popup de opciones matche el resto del form. */
select.field-input option { background: #11161d; color: #fff; }
/* Autofill (Chrome/Safari) no permite bg transparente — se usa el color del modal (#11161d) para blend */
input.field-input:-webkit-autofill,
input.field-input:-webkit-autofill:hover,
input.field-input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 30px #11161d inset; caret-color: #fff; transition: background-color 9999s ease-in-out 0s; }

/* Mismo tratamiento para .input (login, page-level forms) */
select.input option { background: #0f0f0f; color: #fff; }

/* Fallback global: cualquier <option> en cualquier <select> del sitio.
   El popup nativo del OS renderiza blanco por default; MF es dark theme,
   así que forzamos bg oscuro + texto blanco. Aplica a páginas whitelabel
   (bar/site.php, bar/detail.php) que usan utility classes tipo `bg-white/5`
   sin `.field-input` ni `.input`. */
select option { background: #11161d; color: #fff; }

/* ── Botones deshabilitados ────────────────────────────────────────
   Los .btn-primary tienen gradiente vibrante y sin regla :disabled
   se veían idénticos al estado activo (bug de affordance repetido).
   Aplica a todas las variantes btn-mf. */
.btn-mf:disabled,
.btn-mf[disabled],
button.btn-mf:disabled,
button.btn-mf[disabled] {
  opacity: 0.35;
  filter: saturate(0.3);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Nav ───────────────────────────────────────────────────────── */
.nav-link { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #71717a; transition: color .2s; }
.nav-link:hover, .nav-link.active { color: #fff; }

/* ── Section label ─────────────────────────────────────────────── */
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #52525b; }

/* ── Modal backdrop ────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { background: #0f0f0f; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 32px; width: 100%; max-width: 480px; }

/* ── Divider ───────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0; }

/* ── Main tab (eventos page) ───────────────────────────────────── */
.main-tab {
  padding: 8px 20px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #52525b; border-radius: 8px;
  transition: color .15s, background .15s; border: none;
}
.main-tab:hover { color: #a1a1aa; }
.active-main-tab { background: #1a1a1a; color: #fff; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ── Noise texture overlay ─────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018;
}

/* ── Electric Celebration Utility Styles ───────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  border-color: rgba(247, 0, 255, 0.3);
  box-shadow: 0 0 40px rgba(247, 0, 255, 0.1);
}
button.glass-card:hover,
a.glass-card:hover {
  transform: translateY(-4px);
}
.glass-card.no-lift:hover {
  transform: none;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);    }
}
#toast:not(.hidden) {
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.neon-gradient {
  background: linear-gradient(45deg, #F700FF, #00E5FF) !important;
}
.light-leak {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.animated-glow {
  filter: blur(120px);
  opacity: 0.15;
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  animation: pulse-glow 15s infinite alternate ease-in-out;
}

/* ── Atmospheric glow used across landings (defaults; bar.js overrides
   colors per-bar with --bp/--bs).  Sin esto, los <div class="bg-glow …">
   en admin/cocteles/domicilio/eventos/juegos/servicios/social render
   como cajas vacías invisibles. ─────────────────────────────────────── */
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.45;
}
.bg-glow.bg-neon-magenta  { background: radial-gradient(circle, rgba(247,0,255,0.6) 0%, transparent 70%); }
.bg-glow.bg-electric-cyan { background: radial-gradient(circle, rgba(0,229,255,0.5) 0%, transparent 70%); }
.bg-glow.bg-acid-lime     { background: radial-gradient(circle, rgba(120,210,0,0.5) 0%, transparent 70%); }

/* ── Skip-to-content (a11y) ────────────────────────────────────
   Invisible salvo cuando recibe foco con Tab desde el top de la página. */
.skip-link {
  position: absolute;
  top: -40px; left: 8px;
  z-index: 100;
  padding: 8px 14px;
  background: #f700ff;
  color: #000;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; outline: 3px solid #00e5ff; }

/* ── Net status dot (compartido) — antes redefinido inline en 4 páginas */
.net-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px currentColor;
}
/* net.js setea ambos: documentElement[data-mf-net] y #mf-net-status[data-state] */
#mf-net-status[data-state="retrying"] .net-dot,
[data-mf-net="retrying"] .net-dot { background: #eab308; }
#mf-net-status[data-state="offline"]  .net-dot,
[data-mf-net="offline"]  .net-dot  { background: #ef4444; }
@keyframes pulse-glow {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(100px, 50px) scale(1.2); }
  100% { transform: translate(-50px, 100px) scale(0.9); }
}
@keyframes float-logo {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}
.animate-float {
  animation: float-logo 4s ease-in-out infinite;
}
.neon-glow-cyan {
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
}
.neon-glow-cyan:hover {
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.4);
}
.neon-glow-magenta {
  box-shadow: 0 0 20px rgba(247, 0, 255, 0.2);
}
.neon-glow-magenta:hover {
  box-shadow: 0 0 25px rgba(247, 0, 255, 0.4);
}
.active-pill {
  background: rgba(0, 229, 255, 0.15);
  color: #00E5FF;
  border-color: rgba(0, 229, 255, 0.3) !important;
}
.recipe-drawer {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bg-mesh {
  background: radial-gradient(circle at 10% 20%, rgba(247, 0, 255, 0.05) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(0, 229, 255, 0.05) 0%, transparent 40%);
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}