/* =============================================================================
   Burger Fest — hoja de estilos premium (rojo / amarillo / negro)
   ============================================================================= */
:root{
  /* colores */
  --bg:#141210; --bg-2:#1b1815; --surface:#231f1b; --surface-2:#2c2721;
  --border:#3a332c; --border-soft:#2e2822;
  --text:#f7f2ea; --muted:#b8ab98; --faint:#8a7f70;
  --red:#e11d2a; --red-2:#b31217; --red-glow:#ff3b48;
  --amber:#f5b301; --amber-2:#ffcb2b; --amber-soft:#3a2f0e;
  --success:#37c26b; --danger:#f4664a;
  /* tipografía */
  --font-display:"Anton", Impact, sans-serif;
  --font-sans:"Inter", system-ui, -apple-system, sans-serif;
  /* espaciado (8pt) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem; --s24:6rem;
  /* radios y sombras */
  --r-sm:.6rem; --r-md:1rem; --r-lg:1.4rem; --r-xl:2rem; --r-full:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-lg:0 30px 60px -18px rgba(0,0,0,.7);
  --shadow-red:0 16px 40px -12px rgba(225,29,42,.5);
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{line-height:1.05; margin:0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.85rem}
.center{text-align:center}

/* fondo con textura sutil + hamburguesas flotando (JS las inyecta) */
.burger-bg{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% -10%, rgba(225,29,42,.18), transparent 60%),
    radial-gradient(50% 45% at 10% 0%, rgba(245,179,1,.12), transparent 60%),
    var(--bg);
}
.burger-bg::after{content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Ccircle cx='90' cy='60' r='1.5'/%3E%3Ccircle cx='50' cy='110' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}
.float-burger{position:fixed; z-index:-1; opacity:.10; pointer-events:none;
  animation:floaty 14s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(8deg)}}

/* ---------- layout helpers ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--s6)}
.section{padding:var(--s24) 0}
.section-head{text-align:center; max-width:640px; margin:0 auto var(--s12)}
.kicker{display:inline-block; color:var(--amber); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.78rem; margin-bottom:var(--s3)}
.h-display{font-family:var(--font-display); font-weight:400; letter-spacing:.01em;
  text-transform:uppercase; font-size:clamp(2rem,5vw,3.4rem)}

/* ---------- navbar ---------- */
.nav{position:sticky; top:0; z-index:50; transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(20,18,16,.75); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom-color:var(--border-soft)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:var(--s4) var(--s6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4)}
.brand{display:flex; align-items:center; gap:var(--s2); font-family:var(--font-display);
  font-size:1.3rem; letter-spacing:.03em; text-transform:uppercase}
.brand-mark{font-size:1.4rem; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.nav-links{display:flex; align-items:center; gap:var(--s6); flex:1; margin-left:var(--s8)}
.nav-links > a{color:var(--muted); font-weight:500; font-size:.95rem; transition:color .2s}
.nav-links > a:hover{color:var(--text)}
.nav-cta{display:flex; align-items:center; gap:var(--s3); margin-left:auto}
.nav-user{color:var(--amber); font-weight:600; font-size:.9rem}
/* botón hamburguesa (oculto en escritorio) */
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px;
  background:none; border:none; cursor:pointer; padding:0; z-index:70}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; margin:0 auto}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:820px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed; inset:0 0 0 auto; width:min(82vw,320px); height:100dvh;
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:var(--s5);
    margin:0; padding:calc(var(--s16) + var(--s4)) var(--s6) var(--s6);
    background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); z-index:60; overflow-y:auto}
  .nav-links.open{transform:none}
  .nav-links > a{font-size:1.1rem}
  .nav-cta{margin-left:0; flex-direction:column; align-items:stretch; width:100%; gap:var(--s3); margin-top:var(--s4)}
  .nav-cta .btn{width:100%}
  .nav-user{font-size:1rem}
  body.nav-open{overflow:hidden}
}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-weight:700; font-size:.98rem; padding:.8rem 1.4rem; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s, border-color .2s;
  text-align:center; line-height:1}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(245,179,1,.5)}
.btn-sm{padding:.55rem 1rem; font-size:.9rem}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(180deg,var(--red-glow),var(--red)); color:#fff; box-shadow:var(--shadow-red)}
.btn-primary:hover{box-shadow:0 22px 48px -14px rgba(225,29,42,.7)}
.btn-amber{background:linear-gradient(180deg,var(--amber-2),var(--amber)); color:#231f1b; box-shadow:0 14px 34px -12px rgba(245,179,1,.5)}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-wa{background:#25d366; color:#04241a}
.btn-wa:hover{background:#22c65e}
.btn[disabled], .btn.is-disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}

/* ---------- HERO ---------- */
.hero{position:relative; text-align:center; padding:var(--s20) var(--s6) var(--s16)}
.hero-badge{display:inline-flex; align-items:center; gap:var(--s2); background:var(--surface);
  border:1px solid var(--border); color:var(--muted); padding:.5rem 1rem; border-radius:var(--r-full);
  font-size:.82rem; font-weight:600}
.hero-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(225,29,42,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,29,42,.6)}70%{box-shadow:0 0 0 12px rgba(225,29,42,0)}100%{box-shadow:0 0 0 0 rgba(225,29,42,0)}}
.hero-title{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(2.8rem,9vw,6rem); margin:var(--s6) 0 var(--s4); line-height:.92}
.hero-title .grad{background:linear-gradient(100deg,var(--amber-2),var(--red-glow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 20px rgba(225,29,42,.35))}
.hero-sub{max-width:560px; margin:0 auto; color:var(--muted); font-size:1.15rem}
.hero-cta{margin-top:var(--s10); display:flex; gap:var(--s4); justify-content:center; flex-wrap:wrap}

/* ---------- countdown ---------- */
.countdown{margin:var(--s12) auto 0; max-width:560px}
.countdown-label{color:var(--amber); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; margin-bottom:var(--s4)}
.cd-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.cd-cell{background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s4) var(--s2);
  box-shadow:var(--shadow-md); position:relative; overflow:hidden}
.cd-cell::before{content:""; position:absolute; inset:0 0 50% 0; background:rgba(255,255,255,.03)}
.cd-num{font-family:var(--font-display); font-size:clamp(1.8rem,7vw,2.8rem); color:var(--text); position:relative}
.cd-unit{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); position:relative}
.cd-live{font-family:var(--font-display); text-transform:uppercase; font-size:1.6rem; color:var(--amber);
  border:2px dashed var(--amber); border-radius:var(--r-md); padding:var(--s4); animation:pulse 2s infinite}

/* ---------- restaurantes ---------- */
.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s6)}
.card{position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
  display:flex; flex-direction:column}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--border)}
.card-media{position:relative; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.card:hover .card-media img{transform:scale(1.06)}
.card-media .noimg{width:100%; height:100%; display:grid; place-items:center; font-size:3rem; opacity:.4}
.rank-badge{position:absolute; top:var(--s3); left:var(--s3); background:rgba(20,18,16,.8);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--border); color:var(--amber); font-weight:700;
  font-size:.8rem; padding:.35rem .7rem; border-radius:var(--r-full)}
.gallery-count{position:absolute; bottom:var(--s3); right:var(--s3); background:rgba(20,18,16,.8);
  color:var(--text); font-size:.78rem; padding:.3rem .6rem; border-radius:var(--r-full)}
.card-body{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.card-title{font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem; letter-spacing:.02em}
.card-burger{color:var(--amber); font-weight:600; font-size:.95rem}
.card-desc{color:var(--muted); font-size:.92rem; flex:1}
.card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:var(--s2)}
.price{font-family:var(--font-display); font-size:1.4rem; color:var(--text)}
.votes-pill{display:inline-flex; align-items:center; gap:.35rem; background:var(--amber-soft);
  color:var(--amber-2); font-weight:700; font-size:.85rem; padding:.35rem .7rem; border-radius:var(--r-full)}
.card-actions{display:flex; gap:var(--s3); margin-top:var(--s4)}
.card-actions .btn{flex:1}

/* horario + redes en la tarjeta */
.card-info{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  flex-wrap:wrap; padding:var(--s3) 0; border-top:1px solid var(--border-soft); margin-top:var(--s1)}
.info-hours{display:inline-flex; align-items:center; gap:var(--s2); color:var(--muted); font-size:.85rem}
.info-hours svg{color:var(--amber); flex:none}
.card-socials{display:inline-flex; align-items:center; gap:var(--s2); margin-left:auto}
.card-socials a{display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-full);
  background:var(--surface-2); color:var(--muted); transition:color .2s, background .2s, transform .2s}
.card-socials a:hover{color:var(--text); transform:translateY(-2px)}
.card-socials a[aria-label="Facebook"]:hover{background:rgba(24,119,242,.18); color:#4a9bff}
.card-socials a[aria-label="Instagram"]:hover{background:rgba(225,48,108,.18); color:#ff5c8a}

/* ---------- admin: navegación ---------- */
.admin-nav{display:flex; gap:var(--s5); margin:0 auto 0 var(--s4)}
.admin-nav a{color:var(--muted); font-weight:600; font-size:.92rem; transition:color .2s; white-space:nowrap}
.admin-nav a:hover{color:var(--amber)}
@media(max-width:760px){ .admin-nav{width:100%; order:3; margin:var(--s2) 0 0; gap:var(--s4); overflow-x:auto} }

/* ---------- admin: analíticas ---------- */
.analytics-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6)}
.panel-h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:1.1rem; margin:0 0 var(--s4)}
.an-row{display:grid; grid-template-columns:minmax(80px,120px) 1fr auto; align-items:center; gap:var(--s4); margin-bottom:var(--s3)}
.an-label{font-size:.9rem; color:var(--muted)}
.an-val{font-family:var(--font-display); font-size:1.1rem; min-width:2ch; text-align:right}
.an-row .bar{height:12px}
.an-row .bar > span{transition:width .8s cubic-bezier(.22,1,.36,1)}
@media(max-width:760px){ .analytics-grid{grid-template-columns:1fr} }

/* ---------- admin: configuración ---------- */
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:start}
.settings-grid .panel{display:flex; flex-direction:column; gap:var(--s4)}
.settings-grid label{display:flex; flex-direction:column; gap:var(--s2); font-weight:600; font-size:.9rem}
.settings-grid input{background:var(--bg-2); border:1px solid var(--border); color:var(--text); padding:.7rem .9rem; border-radius:var(--r-sm); font:inherit}
.settings-grid input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,29,42,.25)}
.copytxt{display:block; margin:var(--s2) 0; padding:.5rem .7rem; background:var(--bg); border:1px dashed var(--border);
  border-radius:var(--r-sm); font-size:.82rem; word-break:break-all; color:var(--amber-2)}
.alert-info a{color:var(--amber-2); text-decoration:underline}
@media(max-width:760px){ .settings-grid{grid-template-columns:1fr} }

/* ---------- admin: horario estructurado (formulario) ---------- */
.hours-box{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5); margin:0}
.hours-box legend{font-weight:700; font-size:.9rem; padding:0 var(--s2)}
.hours-days{margin-bottom:var(--s4)}
.hours-ranges{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.hours-range{background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:var(--s3)}
.hours-tag{display:block; font-size:.78rem; font-weight:700; color:var(--amber); margin-bottom:var(--s2)}
.hours-tag em{color:var(--faint); font-weight:400}
.hours-range label{flex-direction:row !important; align-items:center; justify-content:space-between; gap:var(--s2); font-size:.82rem}
.hours-range input[type=time]{background:var(--bg); border:1px solid var(--border); color:var(--text); padding:.35rem .5rem; border-radius:var(--r-sm); font:inherit}
@media(max-width:520px){ .hours-ranges{grid-template-columns:1fr} }

/* auth card más ancha para el registro con más campos */
.auth-card-wide{max-width:480px}

/* ======================= ANIMACIONES PREMIUM (home) ======================= */
/* entrada escalonada del hero al cargar */
.hero > *{animation:heroIn .85s cubic-bezier(.22,1,.36,1) both}
.hero-badge{animation-delay:.05s}
.hero-title{animation-delay:.15s}
.hero-sub{animation-delay:.30s}
.hero-cta{animation-delay:.45s}
.countdown{animation-delay:.60s}
@keyframes heroIn{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}

/* brillo animado recorriendo el título */
.hero-title .grad{
  background:linear-gradient(100deg,var(--amber-2) 0%,var(--red-glow) 45%,#fff 50%,var(--red-glow) 55%,var(--amber-2) 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:titleShine 6s linear infinite;
}
@keyframes titleShine{to{background-position:-220% center}}

/* halo latente detrás del hero */
.hero::before{content:""; position:absolute; left:50%; top:34%; width:min(680px,90vw); height:340px;
  transform:translate(-50%,-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(225,29,42,.28),transparent 70%);
  filter:blur(20px); animation:haloPulse 6s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(1)}50%{opacity:1; transform:translate(-50%,-50%) scale(1.08)}}

/* sweep de luz en botón primario al pasar el mouse */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .6s}
.btn-primary:hover::after{left:140%}

/* countdown: elevación y brillo */
.cd-cell{transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s}
.countdown:hover .cd-cell{transform:translateY(-3px)}
.cd-num{background:linear-gradient(180deg,#fff,var(--amber-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* tarjetas: borde con brillo al hover */
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,transparent 40%,rgba(245,179,1,.5),rgba(225,29,42,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .3s; z-index:1}
.card:hover::before{opacity:1}

/* kicker con línea animada */
.kicker{position:relative}

@media(prefers-reduced-motion:reduce){
  .hero > *,.hero-title .grad,.hero::before,.btn-primary::after,.cd-num{animation:none !important}
  .hero-title .grad{background:linear-gradient(100deg,var(--amber-2),var(--red-glow)); -webkit-background-clip:text; background-clip:text}
}

/* estado votado */
.card.voted{border-color:var(--amber)}
.card.voted::after{content:"TU VOTO"; position:absolute; top:14px; right:-34px; transform:rotate(45deg);
  background:var(--amber); color:#231f1b; font-weight:800; font-size:.7rem; letter-spacing:.1em;
  padding:.3rem 3rem; box-shadow:var(--shadow-sm)}

/* ---------- pasos "cómo votar" ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s6)}
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s8) var(--s6); text-align:center}
.step-num{font-family:var(--font-display); font-size:2.4rem; color:var(--red-glow); line-height:1}
.step h3{margin:var(--s3) 0 var(--s2); font-size:1.1rem}

/* ---------- flash / alerts ---------- */
.flash{max-width:var(--maxw); margin:var(--s4) auto 0; padding:var(--s3) var(--s5); border-radius:var(--r-md);
  font-weight:600; border:1px solid var(--border)}
.flash-ok{background:rgba(55,194,107,.12); color:#8ef0b4; border-color:rgba(55,194,107,.3)}
.flash-error{background:rgba(244,102,74,.12); color:#ffb4a3; border-color:rgba(244,102,74,.3)}
.alert{padding:var(--s3) var(--s4); border-radius:var(--r-md); margin:var(--s4) 0; border:1px solid var(--border); font-size:.92rem}
.alert-ok{background:rgba(55,194,107,.1); color:#8ef0b4}
.alert-error{background:rgba(244,102,74,.1); color:#ffb4a3}
.alert-info{background:var(--amber-soft); color:var(--amber-2)}

/* ---------- auth ---------- */
.auth-body{display:grid; place-items:center; min-height:100vh; padding:var(--s6)}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:var(--s10); box-shadow:var(--shadow-lg)}
.auth-logo{font-family:var(--font-display); text-align:center; font-size:1.8rem; text-transform:uppercase; margin-bottom:var(--s2)}
.auth-card h2{text-align:center; margin-bottom:var(--s2)}
.auth-card .muted{text-align:center; margin-bottom:var(--s6)}
.form{display:flex; flex-direction:column; gap:var(--s4)}
.form label{display:flex; flex-direction:column; gap:var(--s2); font-weight:600; font-size:.9rem}
.form input, .form textarea, .form select{
  background:var(--bg-2); border:1px solid var(--border); color:var(--text);
  padding:.75rem .9rem; border-radius:var(--r-sm); font:inherit; font-weight:400; transition:border-color .2s, box-shadow .2s}
.form input:focus, .form textarea:focus, .form select:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,29,42,.25)}
.form textarea{min-height:100px; resize:vertical}
.oauth{display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s5)}
.oauth-btn{display:flex; align-items:center; justify-content:center; gap:var(--s3); padding:.75rem;
  border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-2); font-weight:600; transition:background .2s}
.oauth-btn:hover:not(.is-disabled){background:var(--surface-2)}
.oauth-btn .soon{margin-left:auto; font-size:.7rem; background:var(--amber-soft); color:var(--amber-2); padding:.1rem .5rem; border-radius:var(--r-full)}
.divider{display:flex; align-items:center; gap:var(--s3); color:var(--faint); font-size:.8rem; margin:var(--s5) 0}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--border)}
.auth-alt{text-align:center; margin-top:var(--s5); color:var(--muted); font-size:.9rem}
.auth-alt a{color:var(--amber); font-weight:600}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border-soft); margin-top:var(--s24); padding:var(--s12) 0}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--s6); display:flex;
  justify-content:space-between; align-items:flex-start; gap:var(--s8); flex-wrap:wrap}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:100; background:rgba(10,8,6,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:none; place-items:center; padding:var(--s6)}
.lightbox.open{display:grid}
.lightbox img{max-width:90vw; max-height:82vh; border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.lb-close,.lb-nav{position:absolute; background:rgba(255,255,255,.1); border:1px solid var(--border);
  color:#fff; width:48px; height:48px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:grid; place-items:center}
.lb-close{top:var(--s6); right:var(--s6)}
.lb-nav.prev{left:var(--s4); top:50%; transform:translateY(-50%)}
.lb-nav.next{right:var(--s4); top:50%; transform:translateY(-50%)}
.lb-counter{position:absolute; bottom:var(--s6); color:var(--muted); font-weight:600}

/* ---------- admin ---------- */
.admin-wrap{max-width:var(--maxw); margin:0 auto; padding:var(--s8) var(--s6)}
.admin-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s8); flex-wrap:wrap; gap:var(--s4)}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s5); margin-bottom:var(--s10)}
.stat{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s6)}
.stat .label{color:var(--muted); font-size:.85rem}
.stat .value{font-family:var(--font-display); font-size:2.4rem; margin-top:var(--s2)}
.stat .value.amber{color:var(--amber)} .stat .value.red{color:var(--red-glow)}
.table{width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--r-lg); overflow:hidden}
.table th,.table td{padding:var(--s4); text-align:left; border-bottom:1px solid var(--border-soft); font-size:.92rem}
.table th{background:var(--surface-2); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em}
.table tr:last-child td{border-bottom:none}
.thumb-sm{width:52px; height:52px; border-radius:var(--r-sm); object-fit:cover}
.tag{display:inline-block; padding:.2rem .6rem; border-radius:var(--r-full); font-size:.75rem; font-weight:700}
.tag-on{background:rgba(55,194,107,.15); color:#8ef0b4} .tag-off{background:var(--surface-2); color:var(--faint)}
.bar{height:8px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden}
.bar > span{display:block; height:100%; background:linear-gradient(90deg,var(--amber),var(--red))}
.img-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:var(--s3); margin-top:var(--s3)}
.img-grid figure{position:relative; margin:0}
.img-grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--r-sm)}
.img-grid .del{position:absolute; top:4px; right:4px; background:var(--danger); color:#fff; border:none;
  width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:.8rem; line-height:1}
.row-actions{display:flex; gap:var(--s2)}

/* ---------- animación de entrada al hacer scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}

@media(max-width:600px){
  .section{padding:var(--s16) 0}
  .hero{padding:var(--s12) var(--s5)}
  .footer-inner{flex-direction:column}
  .cd-grid{gap:var(--s2)}
}

/* ---------- botones extra ---------- */
.btn-xs{padding:.4rem .7rem; font-size:.8rem; border-radius:var(--r-sm)}
.btn-danger{background:linear-gradient(180deg,#ff6a52,var(--danger)); color:#fff}
.btn-danger:hover{box-shadow:0 12px 28px -12px rgba(244,102,74,.6)}

/* ---------- login social: marca ---------- */
.oauth-fb:hover:not(.is-disabled){background:rgba(24,119,242,.12); border-color:rgba(24,119,242,.4)}

/* ---------- admin: topbar ---------- */
.admin-body{min-height:100vh}
.admin-topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) var(--s6); background:rgba(20,18,16,.82); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft)}
.admin-topbar .brand-text em{color:var(--amber); font-style:normal; font-size:.8em; opacity:.9}
.admin-topbar-actions{display:flex; align-items:center; gap:var(--s3)}

/* ---------- admin: secciones ---------- */
.admin-section{margin-bottom:var(--s12)}
.admin-h2{font-family:var(--font-display); text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em; margin-bottom:var(--s5)}
.admin-section-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5)}
.stat .value[data-count]{transition:none}

/* ---------- admin: tarjeta líder ---------- */
.leader-card{background:linear-gradient(135deg,rgba(245,179,1,.14),rgba(225,29,42,.12)),var(--surface);
  border:1px solid var(--amber); border-radius:var(--r-lg); padding:var(--s6); margin-bottom:var(--s12); box-shadow:var(--shadow-md)}
.leader-badge{font-weight:700; color:var(--amber-2); letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; margin-bottom:var(--s4)}
.leader-body{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}
.leader-thumb{width:88px; height:88px; border-radius:var(--r-md); object-fit:cover; flex:none}
.leader-thumb.noimg{display:grid; place-items:center; font-size:2.4rem; background:var(--surface-2)}
.leader-body h2{font-family:var(--font-display); text-transform:uppercase; font-size:1.6rem}
.leader-votes{font-family:var(--font-display); color:var(--amber); font-size:1.6rem; margin-top:var(--s2)}

/* ---------- admin: ranking de votos ---------- */
.rank-list{display:flex; flex-direction:column; gap:var(--s3)}
.rank-row{display:grid; grid-template-columns:28px minmax(120px,1.4fr) 3fr auto; align-items:center; gap:var(--s4);
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:var(--s3) var(--s5)}
.rank-pos{font-family:var(--font-display); color:var(--faint); font-size:1.1rem; text-align:center}
.rank-name{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rank-row .bar{height:10px}
.rank-row .bar > span{transition:width .8s cubic-bezier(.22,1,.36,1)}
.rank-votes{font-family:var(--font-display); font-size:1.2rem; min-width:2ch; text-align:right}

/* ---------- admin: tabla scrollable en móvil ---------- */
.table-scroll{overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border)}
.table-scroll .table{border:none}
.thumb-sm.noimg{font-size:1.4rem; background:var(--surface-2)}

/* ---------- admin: grid de edición ---------- */
.edit-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s6); align-items:start}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--shadow-sm)}
.form-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s4)}
.form-actions{display:flex; gap:var(--s3); margin-top:var(--s2); flex-wrap:wrap}
.check{flex-direction:row !important; align-items:center; gap:var(--s3) !important; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--red)}
@media(max-width:860px){ .edit-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} }

/* ---------- admin: dropzone ---------- */
.dropzone{display:flex; flex-direction:column; align-items:center; gap:var(--s2); text-align:center;
  padding:var(--s8) var(--s5); border:2px dashed var(--border); border-radius:var(--r-md); background:var(--bg-2);
  color:var(--muted); cursor:pointer; transition:border-color .2s, background .2s, transform .2s}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--amber); background:var(--surface-2); outline:none}
.dropzone svg{color:var(--amber)}
.dropzone.dragover{border-color:var(--red); background:rgba(225,29,42,.08); transform:scale(1.01)}
.dropzone.uploading{opacity:.7; pointer-events:none}
.dropzone.uploading svg{animation:pulse 1s infinite}

/* ---------- respeta accesibilidad ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .float-burger{display:none}
}

/* =============================================================================
   BURGER FEST — votación con QR, resultados en vivo, pantalla gigante y panel
   ============================================================================= */

/* ---------- utilidades ---------- */
.live-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--red-glow);
  margin-right:.45rem; vertical-align:middle; animation:pulse 1.6s infinite}
.grad-text{background:linear-gradient(100deg,var(--amber-2),var(--red-glow)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.section-tight{padding:var(--s12) 0}
.container-narrow{max-width:880px}
.nowrap{white-space:nowrap}
.hp{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.btn-lg{padding:1rem 1.4rem; font-size:1.05rem}
.btn-voted{background:var(--amber-soft); color:var(--amber-2); border-color:rgba(245,179,1,.5); cursor:default}
.btn-voted:hover{transform:none}
a.cd-live{display:block}
.nav-links > a[aria-current="page"]{color:var(--text)}
.nav-links > a[aria-current="page"]::after{content:""; display:block; height:2px; margin-top:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--amber),var(--red))}
.footer-links{display:flex; flex-direction:column; gap:var(--s2)}
.footer-links a{color:var(--muted); font-weight:500; transition:color .2s}
.footer-links a:hover{color:var(--amber)}
@keyframes pulseGreen{0%{box-shadow:0 0 0 0 rgba(55,194,107,.6)}70%{box-shadow:0 0 0 10px rgba(55,194,107,0)}100%{box-shadow:0 0 0 0 rgba(55,194,107,0)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetUp{from{transform:translateY(48px); opacity:0} to{transform:none; opacity:1}}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.28); color:var(--amber-2)}100%{transform:scale(1)}}
@keyframes spotSwap{0%{opacity:.2; transform:scale(.97)}100%{opacity:1; transform:none}}
@keyframes winnerGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,179,1,0), var(--shadow-lg)}50%{box-shadow:0 0 0 8px rgba(245,179,1,.16), var(--shadow-lg)}}

/* ---------- formularios: extras ---------- */
.field-error{color:#ffb4a3; font-weight:600; font-size:.8rem}
.form input[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 3px rgba(244,102,74,.18)}
.form-intro{margin:0; font-weight:600}
.form-intro .muted{display:block; font-weight:400; font-size:.85rem; margin-top:.2rem}
.pills{border:0; margin:0; padding:0; min-width:0}
.pills legend{font-weight:600; font-size:.9rem; margin-bottom:var(--s2); padding:0}
.form .pill, .settings-grid .pill, .pills .pill{display:inline-flex; flex-direction:row; gap:0; position:relative;
  margin:0 var(--s2) var(--s2) 0; cursor:pointer; font-weight:600}
.pill input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.pill span{display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem; padding:.7rem 1.15rem;
  border-radius:var(--r-full); border:1px solid var(--border); background:var(--bg-2); color:var(--muted);
  transition:border-color .2s, background .2s, color .2s}
.pill:hover span{border-color:var(--amber)}
.pill input:checked + span{border-color:var(--amber); background:var(--amber-soft); color:var(--amber-2)}
.pill input:focus-visible + span{box-shadow:0 0 0 3px rgba(245,179,1,.45)}
.pill small{font-weight:400; color:var(--faint)}
.pills-stack .pill{display:flex; margin-right:0}
.pills-stack .pill span{border-radius:var(--r-md); width:100%}
.form .consent{font-weight:400; font-size:.85rem; color:var(--muted); align-items:flex-start !important; line-height:1.45}
.form .consent input{margin-top:.15rem; flex:none}

/* ---------- página de votación ---------- */
.vote-hero{text-align:center; padding:var(--s12) 0 var(--s6)}
.vote-title{font-size:clamp(2.3rem,8vw,4.2rem); line-height:.95; margin:var(--s2) 0 var(--s4)}
.vote-lead{max-width:540px; margin:0 auto; font-size:1.05rem}
.vote-status{display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s6); padding:.6rem 1.1rem;
  border-radius:var(--r-full); background:var(--surface); border:1px solid var(--border); font-weight:600; font-size:.9rem}
.vote-status .live-dot{margin-right:0}
.vote-status--open, .vote-status--live{border-color:rgba(55,194,107,.45); color:#8ef0b4}
.vote-status--before{border-color:rgba(245,179,1,.45); color:var(--amber-2)}
.vote-status--closed, .vote-status--ended{color:var(--muted)}
.vote-status a{color:var(--amber); text-decoration:underline}
.vote-steps{list-style:none; display:flex; justify-content:center; gap:var(--s2) var(--s5); flex-wrap:wrap; padding:0; margin:var(--s6) 0 0}
.vote-steps li{display:inline-flex; align-items:center; gap:var(--s2); color:var(--muted); font-size:.88rem; font-weight:600}
.vote-steps b{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; font-size:.8rem}
.vote-as{color:var(--muted); font-size:.9rem; margin:var(--s2) 0 var(--s4)}
.vote-as a{color:var(--amber); text-decoration:underline}
.vote-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s5)}
.vote-card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-md); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s}
.vote-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.vote-card.is-mine{border-color:var(--amber); box-shadow:0 0 0 2px rgba(245,179,1,.35), var(--shadow-md)}
.vote-media{position:relative; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden}
.vote-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.vote-card:hover .vote-media img{transform:scale(1.05)}
.vote-media .noimg{width:100%; height:100%; display:grid; place-items:center; font-size:3rem; opacity:.4}
.mine-badge{position:absolute; top:var(--s3); left:var(--s3); background:var(--amber); color:#231f1b; font-weight:800;
  font-size:.78rem; padding:.3rem .7rem; border-radius:var(--r-full)}
.vote-body{padding:var(--s4) var(--s5) var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1}
.vote-body p{margin:0}
.vote-name{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.3rem; letter-spacing:.02em}
.vote-desc{color:var(--muted); font-size:.88rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.vote-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-top:auto; padding-top:var(--s3)}
.vote-foot .price{font-size:1.25rem}
@media(max-width:560px){
  .vote-grid{grid-template-columns:1fr; gap:var(--s3)}
  .vote-card{flex-direction:row}
  .vote-media{width:112px; aspect-ratio:auto; flex:none}
  .vote-body{padding:var(--s3) var(--s4); gap:.3rem}
  .vote-name{font-size:1.1rem}
  .vote-desc{-webkit-line-clamp:2; font-size:.82rem}
  .vote-foot{flex-wrap:wrap; padding-top:var(--s2)}
  .vote-foot .price{font-size:1.05rem}
  .vote-foot .btn{padding:.55rem .8rem}
  .mine-badge{top:var(--s2); left:var(--s2); font-size:.7rem}
}

/* "ya votaste" / "gracias" */
.voted-panel, .thanks{display:flex; gap:var(--s5); align-items:flex-start;
  background:linear-gradient(135deg,rgba(55,194,107,.12),rgba(245,179,1,.08)),var(--surface);
  border:1px solid rgba(55,194,107,.4); border-radius:var(--r-lg); padding:var(--s6); margin:var(--s4) 0 var(--s6)}
.voted-icon, .thanks-icon{font-size:2.4rem; line-height:1}
.voted-panel h2, .thanks h2{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.6rem; margin-bottom:var(--s2)}
.voted-panel p, .thanks p{margin:0 0 var(--s3); color:var(--muted)}
.voted-panel p strong, .thanks p strong{color:var(--text)}
.voted-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4)}
@media(max-width:560px){ .voted-panel, .thanks{flex-direction:column; gap:var(--s3); padding:var(--s5)} }

/* ---------- hoja de confirmación (modal) ---------- */
.sheet{position:fixed; inset:0; z-index:90; display:none; align-items:flex-end; justify-content:center}
.sheet.open{display:flex}
.sheet-backdrop{position:absolute; inset:0; background:rgba(10,8,6,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fadeIn .25s}
.sheet-panel{position:relative; width:100%; max-width:520px; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s6) var(--s6) calc(var(--s6) + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg);
  animation:sheetUp .35s cubic-bezier(.22,1,.36,1)}
.sheet-close{position:absolute; top:var(--s3); right:var(--s3); width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; background:var(--surface-2); color:var(--text); font-size:1.1rem; z-index:1}
.sheet-close:hover{background:var(--border)}
.sheet-pick{display:flex; gap:var(--s4); align-items:center; padding-right:2.8rem; margin-bottom:var(--s5)}
.sheet-pick img{width:84px; height:84px; object-fit:cover; border-radius:var(--r-md); flex:none; box-shadow:var(--shadow-md)}
.sheet-pick .kicker{margin-bottom:.15rem}
.sheet-pick h2{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.5rem; line-height:1.05}
.sheet-pick .card-burger{margin:.2rem 0 0}
.vote-form{gap:var(--s4)}
.vote-warning{margin:0; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--amber-soft); color:var(--amber-2); font-size:.86rem}
.form-row-phone{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.vote-form input:not([type=radio]):not([type=checkbox]), .vote-form select{width:100%; min-width:0}
.sheet-panel{min-width:0}
body.sheet-open{overflow:hidden}
@media(min-width:640px){ .sheet{align-items:center; padding:var(--s6)} .sheet-panel{border-radius:var(--r-xl)} }
@media(max-width:860px){ .form-row.form-row-phone{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)} }

/* ---------- resultados ---------- */
.results-hero{text-align:center; padding:var(--s12) 0 var(--s4)}
.results-title{font-size:clamp(2.4rem,8vw,4.4rem); line-height:.95; margin:var(--s2) 0 var(--s3)}
.results-lead strong{color:var(--text)}
.live-updated{display:block; font-size:.78rem; color:var(--faint); margin-top:.35rem; min-height:1.2em}
.live-updated.is-error{color:#ffb4a3}
.board-title{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.5rem; margin:var(--s10) 0 var(--s4)}
.results-cta{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin:var(--s10) 0 0}
.empty-state{text-align:center; padding:var(--s10) var(--s6); background:var(--surface); border:1px dashed var(--border);
  border-radius:var(--r-lg); margin:var(--s8) 0}
.empty-state h2, .empty-state h1{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.6rem; margin:var(--s2) 0}
.empty-icon{font-size:3rem}

/* quién va ganando / ganador */
.spotlight{position:relative; display:grid; grid-template-columns:minmax(180px,300px) 1fr; gap:var(--s6); align-items:center;
  background:linear-gradient(135deg,rgba(245,179,1,.14),rgba(225,29,42,.12)),var(--surface);
  border:1px solid var(--amber); border-radius:var(--r-xl); padding:var(--s5); margin:var(--s8) 0 0; box-shadow:var(--shadow-lg)}
.spotlight[hidden]{display:none}
.spotlight.swap{animation:spotSwap .7s cubic-bezier(.22,1,.36,1)}
.spotlight-media{position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2)}
.spotlight-media img{width:100%; height:100%; object-fit:cover}
.spotlight-crown{position:absolute; top:.4rem; left:.5rem; font-size:2.2rem; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.spotlight-kicker{display:inline-block; color:var(--amber-2); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem}
.spotlight-name{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:clamp(1.8rem,5vw,3rem);
  line-height:1; margin:var(--s2) 0; letter-spacing:.01em}
.spotlight .card-burger{margin:0}
.spotlight-stats{margin:var(--s3) 0 0; color:var(--muted)}
.spotlight-stats b{font-family:var(--font-display); font-weight:400; font-size:2.2rem; color:var(--text)}
.spotlight.is-winner{border-width:2px; animation:winnerGlow 2.6s ease-in-out infinite}
.spotlight.is-winner .spotlight-kicker{font-size:1rem}
@media(max-width:640px){ .spotlight{grid-template-columns:1fr; gap:var(--s4); padding:var(--s4)} }

/* ranking en vivo */
.board{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); position:relative}
.board-row{position:relative; display:grid; grid-template-columns:2.2rem 64px minmax(0,1fr) auto; align-items:center; gap:var(--s4);
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg);
  padding:var(--s3) var(--s5) var(--s3) var(--s3); transition:border-color .4s, background .4s, box-shadow .4s}
.board-rank{font-family:var(--font-display); font-size:1.5rem; color:var(--faint); text-align:center; line-height:1}
.board-photo{width:64px; height:64px; border-radius:var(--r-md); object-fit:cover; background:var(--surface-2)}
.board-photo.noimg{display:grid; place-items:center; font-size:1.8rem}
.board-info{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.board-name{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.15rem; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.board-burger{color:var(--amber); font-weight:600; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.board-burger[hidden]{display:none}
.board-row .bar{height:10px; margin-top:.4rem}
.board-fill{border-radius:inherit; transition:width .9s cubic-bezier(.22,1,.36,1)}
.board-score{display:flex; flex-direction:column; align-items:flex-end; line-height:1; min-width:3.2rem}
.board-votes{font-family:var(--font-display); font-weight:400; font-size:1.9rem; display:inline-block}
.board-pct{color:var(--muted); font-size:.8rem; font-weight:600; margin-top:.35rem}
.board-mine-tag{display:none; align-self:flex-start; margin-top:.15rem; background:var(--amber); color:#231f1b; font-weight:800;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border-radius:var(--r-full)}
.board-row.is-mine{border-color:rgba(245,179,1,.55)}
.board-row.is-mine .board-mine-tag{display:inline-block}
.board-row.is-leader{border-color:var(--amber); background:linear-gradient(135deg,rgba(245,179,1,.13),rgba(225,29,42,.08)),var(--surface);
  box-shadow:0 12px 30px -16px rgba(245,179,1,.5)}
.board-row.is-leader .board-rank{color:var(--amber)}
.board-row.is-leader .board-rank::after{content:"👑"; display:block; font-size:.95rem; margin-top:.2rem}
.board-row.bump .board-votes{animation:bump .7s cubic-bezier(.22,1,.36,1)}
.board-mini .board-row{padding:var(--s2) var(--s4) var(--s2) var(--s2)}
@media(max-width:560px){
  .board-row{grid-template-columns:1.7rem 48px minmax(0,1fr) auto; gap:var(--s3); padding:var(--s2) var(--s3) var(--s2) var(--s2)}
  .board-photo{width:48px; height:48px}
  .board-name{font-size:1rem}
  .board-votes{font-size:1.45rem}
  .board-rank{font-size:1.2rem}
}

/* confeti */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:120}

/* ---------- pantalla gigante (TV / videobeam) ---------- */
body.tv{height:100vh; overflow:hidden; display:flex; flex-direction:column; gap:1.6vh; padding:1.8vh 2vw}
.tv-top{display:flex; align-items:center; justify-content:space-between; gap:2vw; flex:none}
.tv .brand{font-size:clamp(1.3rem,2.3vw,2.6rem)}
.tv .brand-mark{font-size:1.1em}
.tv-status{display:flex; align-items:center; flex-wrap:wrap; gap:.6vw; font-size:clamp(.9rem,1.35vw,1.5rem); color:var(--muted)}
.tv-status strong{color:var(--text); letter-spacing:.08em}
.tv-status b{color:var(--amber-2); font-variant-numeric:tabular-nums}
.tv-sep{opacity:.4}
.tv-main{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,27vw); gap:2vw}
.tv-left{display:flex; flex-direction:column; gap:1.6vh; min-height:0}
.spotlight-tv{margin:0; flex:none; grid-template-columns:minmax(180px,24vw) 1fr; padding:1.3vw; gap:2vw}
.spotlight-tv .spotlight-media{max-height:30vh}
.spotlight-tv .spotlight-kicker{font-size:clamp(.9rem,1.4vw,1.6rem)}
.spotlight-tv .spotlight-name{font-size:clamp(2rem,4.4vw,5.2rem)}
.spotlight-tv .card-burger{font-size:clamp(1rem,1.6vw,1.8rem)}
.spotlight-tv .spotlight-stats{font-size:clamp(1rem,1.5vw,1.7rem)}
.spotlight-tv .spotlight-stats b{font-size:clamp(2rem,3.6vw,4.2rem)}
.board-tv{flex:1; min-height:0; gap:1vh}
.board-tv .board-row{flex:1 1 0; min-height:0; max-height:12vh; grid-template-columns:3.2vw 8vh minmax(0,1fr) auto;
  padding:.6vh 1.4vw .6vh .6vw; gap:1.2vw}
.board-tv .board-photo{width:8vh; height:8vh; max-height:100%}
.board-tv .board-rank{font-size:clamp(1.2rem,2.2vw,2.6rem)}
.board-tv .board-name{font-size:clamp(1rem,1.9vw,2.2rem)}
.board-tv .board-burger{font-size:clamp(.8rem,1.1vw,1.3rem)}
.board-tv .board-votes{font-size:clamp(1.5rem,2.7vw,3.2rem)}
.board-tv .board-pct{font-size:clamp(.75rem,1vw,1.2rem)}
.board-tv .bar{height:1.1vh; min-height:6px}
.board-tv.board-dense .board-row{max-height:8vh}
.board-tv.board-dense .board-photo{width:5.5vh; height:5.5vh}
.board-tv.board-dense .board-burger{display:none}
.tv-qr{display:flex; flex-direction:column; justify-content:center; min-height:0}
.tv-qr-card{background:#fff; color:#141210; border-radius:var(--r-xl); padding:1.6vw 1.6vw 2vw; text-align:center; box-shadow:var(--shadow-lg);
  max-height:100%; overflow:hidden}
.tv-qr-kicker{font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.4rem,2.5vw,3rem); color:var(--red); margin:0 0 1vh; line-height:1}
.tv-qr-code{margin:0 auto; max-width:min(100%,52vh)}
.tv-qr-code svg{display:block; width:100%; height:auto}
.tv-qr-url{font-weight:800; font-size:clamp(.95rem,1.35vw,1.5rem); margin:1vh 0 1.4vh; word-break:break-all}
.tv-qr-steps{text-align:left; margin:0 auto; padding-left:1.4em; display:inline-flex; flex-direction:column; gap:.6vh;
  font-weight:700; font-size:clamp(.85rem,1.15vw,1.3rem); color:#3a332c}
.tv-qr-note{margin:1.4vh 0 0; font-weight:700; color:var(--red-2); font-size:clamp(.85rem,1.1vw,1.2rem)}
.tv-thanks p{font-weight:600; font-size:clamp(1rem,1.4vw,1.5rem); color:#3a332c}
.tv-thanks-icon{font-size:clamp(3rem,7vw,7rem); margin:1vh 0}
@media(max-width:900px){
  body.tv{height:auto; overflow:auto}
  .tv-main{grid-template-columns:1fr}
  .board-tv .board-row{max-height:none; min-height:64px}
  .tv-top{flex-wrap:wrap}
}

/* ---------- panel: control de votación + QR ---------- */
.admin-nav a.active{color:var(--amber)}
.ops-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--s6); margin-bottom:var(--s8); align-items:stretch}
.ops-card .admin-h2{margin-bottom:var(--s3)}
.vote-state{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s2)}
.vote-state strong{font-family:var(--font-display); font-weight:400; letter-spacing:.04em; font-size:1.8rem}
.vote-state-dot{width:14px; height:14px; border-radius:50%; background:var(--faint); flex:none}
.vote-state.is-open .vote-state-dot{background:var(--success); animation:pulseGreen 2s infinite}
.vote-state.is-open strong{color:#8ef0b4}
.vote-state.is-wait .vote-state-dot{background:var(--amber)}
.vote-state.is-wait strong{color:var(--amber-2)}
.vote-state.is-closed .vote-state-dot{background:var(--red)}
.vote-state.is-closed strong{color:#ff8a8a}
.seg{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s4)}
.seg-btn{display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; text-align:left; padding:var(--s3);
  border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-2); color:var(--text); cursor:pointer; font:inherit;
  transition:border-color .2s, background .2s, transform .18s}
.seg-btn b{font-size:.92rem}
.seg-btn small{color:var(--faint); font-size:.74rem}
.seg-btn:hover{border-color:var(--amber); transform:translateY(-1px)}
.seg-btn.on{border-color:var(--amber); background:var(--amber-soft)}
.seg-btn.on small{color:var(--amber-2)}
.seg-danger:hover{border-color:var(--red)}
.seg-danger.on{border-color:var(--red); background:rgba(225,29,42,.14)}
.qr-frame{background:#fff; border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--shadow-md)}
.qr-frame svg{display:block; width:100%; height:auto}
.qr-frame-sm{width:150px; flex:none}
.qr-mini-row{display:flex; gap:var(--s5); align-items:center}
.qr-mini-info p{margin:0}
.qr-url-text{font-weight:700; color:var(--amber-2); word-break:break-all; font-size:.95rem; margin:.2rem 0 var(--s3) !important}
.qr-mini-actions{display:flex; flex-wrap:wrap; gap:var(--s2)}
.guide{margin:0 0 var(--s10)}
.guide summary{cursor:pointer}
.guide-steps{margin:var(--s4) 0 0; padding-left:1.3rem; display:flex; flex-direction:column; gap:var(--s3); color:var(--muted)}
.guide-steps strong{color:var(--text)}
.guide-steps a, .tips a{color:var(--amber); text-decoration:underline}
.qr-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); align-items:start}
.qr-main{position:sticky; top:90px}
.qr-main .qr-frame{max-width:420px; margin:0 auto}
.qr-main .qr-url-text{margin-top:var(--s4) !important}
.qr-main-actions{display:flex; justify-content:center; flex-wrap:wrap; gap:var(--s3)}
.qr-side{display:flex; flex-direction:column; gap:var(--s5)}
.qr-side .admin-h2{margin-bottom:var(--s4)}
.qr-dl{display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s3)}
.tips{margin:0; padding-left:1.1rem; color:var(--muted); display:flex; flex-direction:column; gap:var(--s2)}
.table-tools{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap}
.table-search{flex:1; min-width:220px; max-width:440px; background:var(--bg-2); border:1px solid var(--border); color:var(--text);
  padding:.7rem .9rem; border-radius:var(--r-sm); font:inherit}
.table-search:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(225,29,42,.25)}
.table a{color:var(--amber-2)}
.danger-zone{border-color:rgba(244,102,74,.45)}
.settings-grid .form label{font-weight:600}
@media(max-width:900px){ .ops-grid{grid-template-columns:1fr} }
@media(max-width:860px){ .qr-grid{grid-template-columns:1fr} .qr-main{position:static} }
@media(max-width:560px){
  .seg{grid-template-columns:1fr}
  .qr-mini-row{flex-direction:column; align-items:stretch; text-align:center}
  .qr-frame-sm{width:180px; margin:0 auto}
  .qr-mini-actions{justify-content:center}
  .admin-topbar{flex-wrap:wrap}
  .admin-topbar-actions{flex-wrap:wrap}
}

/* ---------- cartel imprimible ---------- */
.poster-body{background:#e9e4dc; color:#141210; min-height:100vh; padding:var(--s6) var(--s4)}
.poster-toolbar{max-width:210mm; margin:0 auto var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center}
.poster-toolbar .btn.on{border-color:var(--amber); color:var(--amber-2)}
.poster-hint{color:#6b6255}
.poster{width:100%; max-width:210mm; min-height:270mm; margin:0 auto; background:#fff; border-radius:12px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.35); padding:14mm 14mm 12mm; display:flex; flex-direction:column;
  align-items:center; text-align:center; overflow:hidden}
.poster-head{width:100%; display:flex; justify-content:space-between; align-items:center; gap:4mm}
.poster-brand{font-family:var(--font-display); font-size:28px; text-transform:uppercase; letter-spacing:.03em}
.poster-date{font-size:14px; font-weight:800; padding:6px 14px; border-radius:999px; background:#141210; color:#fff}
.poster-title{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:64px; line-height:.95; margin:10mm 0 3mm}
.poster-title span{color:var(--red)}
.poster-sub{font-size:19px; font-weight:600; color:#4a443c; margin:0 0 6mm}
.poster-qr{width:112mm; max-width:100%; padding:5mm; border-radius:8mm; border:3px solid var(--red); background:#fff}
.poster-qr svg{display:block; width:100%; height:auto}
.poster-url{font-weight:800; font-size:22px; margin:5mm 0 8mm; word-break:break-all}
.poster-steps{list-style:none; display:flex; flex-wrap:wrap; gap:6mm; padding:0; margin:0 0 8mm; justify-content:center}
.poster-steps li{display:flex; align-items:center; gap:3mm; text-align:left; font-weight:700; font-size:15px; line-height:1.2}
.poster-steps b{display:grid; place-items:center; width:10mm; height:10mm; border-radius:50%; background:var(--red); color:#fff; font-size:16px; flex:none}
.poster-foot{margin-top:auto; font-size:13px; color:#6b6255; font-weight:600}
.poster--oscuro .poster{color:var(--text);
  background:radial-gradient(70% 45% at 85% 0%, rgba(225,29,42,.35), transparent 60%),
             radial-gradient(60% 40% at 10% 5%, rgba(245,179,1,.22), transparent 60%), #141210}
.poster--oscuro .poster-date{background:var(--amber); color:#231f1b}
.poster--oscuro .poster-title span{color:transparent; background:linear-gradient(100deg,var(--amber-2),var(--red-glow));
  -webkit-background-clip:text; background-clip:text}
.poster--oscuro .poster-sub, .poster--oscuro .poster-foot{color:var(--muted)}
.poster--oscuro .poster-qr{border-color:var(--amber)}
@media(max-width:620px){
  .poster{min-height:auto; padding:8mm 6mm}
  .poster-title{font-size:40px}
  .poster-steps{flex-direction:column; align-items:flex-start}
}
@media print{
  @page{size:auto; margin:8mm}
  .poster-body{background:#fff; padding:0; min-height:0}
  .poster-toolbar{display:none}
  .poster{box-shadow:none; border-radius:0; max-width:none; min-height:0; height:calc(100vh - 2mm); padding:6mm 8mm;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; break-inside:avoid}
}

@media(prefers-reduced-motion:reduce){
  .live-dot, .spotlight.is-winner, .vote-state.is-open .vote-state-dot{animation:none !important}
  .board-fill{transition:none}
}

/* =============================================================================
   BURGER FEST v3 — Ruta 3D, páginas de restaurantes (tipo Rappi), pedidos,
   domiciliarios, patrocinadores y panel por roles
   ============================================================================= */
[hidden]{display:none !important}

@keyframes pinDrop{0%{transform:translateY(-70px) scale(.55); opacity:0}55%{opacity:1}75%{transform:translateY(5px) scale(1.04)}100%{transform:none; opacity:1}}
@keyframes groundPulse{0%{box-shadow:0 0 0 0 rgba(245,179,1,.75)}100%{box-shadow:0 0 0 22px rgba(245,179,1,0)}}
@keyframes mePulse{0%{transform:scale(1); opacity:.9}100%{transform:scale(3.4); opacity:0}}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes hintIn{from{opacity:0; transform:translate(-50%,-14px) scale(.96)}to{opacity:1; transform:translate(-50%,0)}}
@keyframes prodPop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes cartBump{0%,100%{transform:scale(1)}35%{transform:scale(1.045)}}
@keyframes ride{0%,100%{transform:translateX(-3px) rotate(-2deg)}50%{transform:translateX(3px) rotate(2deg)}}
@keyframes statusPulse{0%{transform:scale(.97); box-shadow:0 0 0 0 rgba(245,179,1,.55)}60%{transform:scale(1.01)}100%{transform:none; box-shadow:0 0 0 18px rgba(245,179,1,0)}}
@keyframes newOrder{0%,100%{box-shadow:0 0 0 0 rgba(255,59,72,0), var(--shadow-md)}50%{box-shadow:0 0 0 4px rgba(255,59,72,.28), var(--shadow-md)}}
@keyframes alertGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,179,1,0)}50%{box-shadow:0 0 0 6px rgba(245,179,1,.18)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes dashMove{to{stroke-dashoffset:-38}}

/* ---------- “Abierto / Cerrado” ---------- */
.open-pill{display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .65rem .2rem .5rem; border-radius:var(--r-full);
  font-size:.78rem; font-weight:700; white-space:nowrap; background:var(--surface-2); color:var(--muted)}
.open-pill::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none}
.open-pill.is-open{background:rgba(55,194,107,.14); color:#8ef0b4}
.open-pill.is-open::before{animation:pulseGreen 2s infinite}
.open-pill.is-closed{background:rgba(244,102,74,.12); color:#ffb4a3}

/* ---------- patrocinadores ---------- */
.sponsors{max-width:var(--maxw); margin:var(--s16) auto 0; padding:0 var(--s6); text-align:center}
.sp-title{display:flex; align-items:center; gap:var(--s4); margin:0 0 var(--s6); color:var(--faint); font-size:.74rem;
  font-weight:800; letter-spacing:.22em; text-transform:uppercase}
.sp-title::before, .sp-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border))}
.sp-title::after{background:linear-gradient(90deg,var(--border),transparent)}
.sp-row{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s6) var(--s8)}
.sp-item{display:flex; flex-direction:column; align-items:center; gap:var(--s3); width:128px; flex:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
a.sp-item:hover{transform:translateY(-6px)}
.sp-logo{position:relative; width:104px; height:104px; border-radius:26px; display:grid; place-items:center; padding:12px; overflow:hidden;
  background:linear-gradient(160deg,#ffffff,#efe9df); font-size:2.2rem; color:var(--red);
  box-shadow:0 18px 34px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.06);
  transition:box-shadow .35s}
.sp-logo::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-120%); transition:transform .8s}
a.sp-item:hover .sp-logo{box-shadow:0 24px 40px -16px rgba(245,179,1,.45), 0 0 0 2px rgba(245,179,1,.6)}
a.sp-item:hover .sp-logo::after{transform:translateX(120%)}
.sp-logo img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.sp-name{max-width:100%; color:var(--text); font-weight:800; font-size:.9rem; line-height:1.2}
.sponsors.is-marquee .sp-viewport{overflow:hidden; padding:var(--s2) 0 var(--s3);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sp-track{display:flex; width:max-content; animation:marquee 38s linear infinite}
.sp-track .sp-item{margin-right:var(--s8)}
.sp-viewport:hover .sp-track{animation-play-state:paused}
.sponsors-compact{margin:0; padding:0}
.sponsors-compact .sp-title{display:none}
.sp-preview{margin-bottom:var(--s6)}
@media(max-width:560px){
  .sponsors{margin-top:var(--s12); padding:0 var(--s4)}
  .sp-row{gap:var(--s4)}
  .sp-item{width:104px}
  .sp-logo{width:84px; height:84px; border-radius:22px; padding:10px}
  .sp-name{font-size:.8rem}
}

/* ---------- página del restaurante (tipo Rappi) ---------- */
.shop-hero{position:relative; isolation:isolate; overflow:hidden; padding:var(--s16) 0 var(--s8)}
.shop-cover{position:absolute; inset:-40px; z-index:-2; background:var(--surface-2) center/cover no-repeat;
  filter:blur(26px) saturate(1.25) brightness(.5); transform:scale(1.08)}
.shop-hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 90% at 15% 0%,rgba(225,29,42,.25),transparent 60%),linear-gradient(180deg,rgba(20,18,16,.15),var(--bg) 97%)}
.shop-head{display:flex; align-items:flex-end; gap:var(--s8)}
.shop-logo{flex:none; width:136px; height:136px; border-radius:34px; overflow:hidden; display:grid; place-items:center; font-size:3.6rem;
  background:#fff; box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 4px rgba(255,255,255,.1);
  transform:perspective(700px) rotateY(-10deg) rotateX(6deg); transition:transform .6s cubic-bezier(.22,1,.36,1)}
.shop-logo:hover{transform:perspective(700px) rotateY(0) rotateX(0) scale(1.03)}
.shop-logo img{width:100%; height:100%; object-fit:cover}
.shop-title{min-width:0}
.shop-title .kicker{margin-bottom:var(--s1)}
.shop-title h1{font-size:clamp(2.3rem,6.5vw,4rem); line-height:.95; margin:0 0 var(--s3); text-shadow:0 6px 30px rgba(0,0,0,.5)}
.shop-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin:0; color:var(--muted); font-size:.92rem}
.shop-desc{max-width:640px; margin:var(--s3) 0 0; color:var(--muted)}
.shop-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5)}
.contest-card{display:flex; align-items:center; gap:var(--s5); margin:var(--s4) 0 0; padding:var(--s4);
  border:1px solid rgba(245,179,1,.45); border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  background:linear-gradient(135deg,rgba(245,179,1,.14),rgba(225,29,42,.1)),var(--surface)}
.contest-card img{flex:none; width:128px; height:100px; object-fit:cover; border-radius:var(--r-md); cursor:zoom-in}
.contest-card h2{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.55rem; margin:.1rem 0 .2rem}
.contest-card p{margin:0 0 var(--s3)}
.shop-menu{padding:var(--s6) 0 var(--s12)}
.cat-tabs{position:sticky; top:var(--nav-h,70px); z-index:20; display:flex; gap:var(--s2); overflow-x:auto; margin:0 calc(var(--s2) * -1) var(--s2);
  padding:var(--s3) var(--s2); background:rgba(20,18,16,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:0 0 var(--r-md) var(--r-md);
  scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs a{flex:none; padding:.5rem 1.05rem; border-radius:var(--r-full); border:1px solid var(--border); background:var(--surface);
  color:var(--muted); font-weight:700; font-size:.88rem; white-space:nowrap; transition:color .2s, background .2s, border-color .2s}
.cat-tabs a:hover, .cat-tabs a.on{color:#231f1b; background:var(--amber); border-color:var(--amber)}
.cat-title{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.7rem; letter-spacing:.02em;
  margin:var(--s8) 0 var(--s4); scroll-margin-top:calc(var(--nav-h,70px) + 70px)}
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:var(--s4)}
.prod-card{position:relative; display:flex; gap:var(--s4); padding:var(--s3); background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s}
.prod-card:hover{transform:translateY(-3px); border-color:var(--border); box-shadow:var(--shadow-md)}
.prod-card.in-cart{border-color:rgba(245,179,1,.65); box-shadow:0 0 0 1px rgba(245,179,1,.35), var(--shadow-md)}
.prod-card.pop{animation:prodPop .45s cubic-bezier(.22,1.4,.36,1)}
.prod-photo{flex:none; width:116px; height:116px; border-radius:var(--r-md); overflow:hidden; display:grid; place-items:center;
  background:var(--surface-2); font-size:2.4rem}
.prod-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.prod-card:hover .prod-photo img{transform:scale(1.07)}
.prod-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem}
.prod-body h3{font-size:1.02rem; font-weight:800; line-height:1.25}
.prod-body p{margin:0; color:var(--muted); font-size:.85rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.prod-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:auto; padding-top:var(--s2)}
.prod-foot > b{font-family:var(--font-display); font-weight:400; font-size:1.3rem; letter-spacing:.01em}
.add-btn{border:0; cursor:pointer; padding:.6rem 1.05rem; border-radius:var(--r-full); color:#fff; font:800 .86rem var(--font-sans);
  background:linear-gradient(180deg,var(--red-glow),var(--red)); box-shadow:0 10px 22px -10px rgba(225,29,42,.85); transition:transform .15s}
.add-btn:hover{transform:translateY(-1px) scale(1.04)}
.add-btn:active{transform:scale(.95)}
.qty{display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:var(--r-full); background:var(--bg-2); border:1px solid var(--border)}
.qty button{display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; cursor:pointer;
  background:var(--surface-2); color:var(--text); font-size:1.15rem; font-weight:800; line-height:1; transition:background .15s, color .15s}
.qty button:hover{background:var(--red); color:#fff}
.qty output{min-width:1.9em; text-align:center; font-weight:800}
.page-shop .footer{padding-bottom:calc(var(--s12) + 80px)}
@media(max-width:640px){
  .shop-hero{padding:var(--s10) 0 var(--s6)}
  .shop-head{flex-direction:column; align-items:flex-start; gap:var(--s4)}
  .shop-logo{width:100px; height:100px; border-radius:26px; font-size:2.8rem}
  .contest-card{flex-direction:column; align-items:stretch}
  .contest-card img{width:100%; height:170px}
  .prod-photo{width:96px; height:96px}
}

/* carrito */
.cart-bar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; pointer-events:none;
  padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); animation:sheetUp .4s cubic-bezier(.22,1,.36,1)}
.cart-btn{pointer-events:auto; width:100%; max-width:540px; display:flex; align-items:center; gap:var(--s3); padding:.95rem 1.2rem;
  border:0; border-radius:var(--r-lg); cursor:pointer; color:#fff; font:800 1rem var(--font-sans);
  background:linear-gradient(180deg,var(--red-glow),var(--red)); box-shadow:0 20px 44px -12px rgba(225,29,42,.8), inset 0 1px 0 rgba(255,255,255,.2)}
.cart-btn > span:nth-child(2){flex:1; text-align:left}
.cart-count{display:grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border-radius:var(--r-full); background:rgba(0,0,0,.28)}
.cart-btn b{font-family:var(--font-display); font-weight:400; font-size:1.3rem; letter-spacing:.02em}
.cart-bar.bump .cart-btn{animation:cartBump .45s cubic-bezier(.22,1.4,.36,1)}
.cart-list{list-style:none; margin:0 0 var(--s4); padding:0; display:flex; flex-direction:column; gap:var(--s2)}
.cart-item{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3);
  background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-md)}
.cart-name{font-weight:700; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cart-price{min-width:4.6em; text-align:right; font-family:var(--font-display); font-weight:400; font-size:1.08rem}
.cart-item .qty button{width:28px; height:28px}
.cart-sum{display:flex; flex-direction:column; gap:.35rem; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--bg-2); border:1px dashed var(--border)}
.cart-row{display:flex; justify-content:space-between; gap:var(--s3); color:var(--muted); font-size:.9rem}
.cart-row b{color:var(--text)}
.cart-row.is-total{margin-top:.2rem; padding-top:.5rem; border-top:1px solid var(--border-soft); color:var(--text); font-weight:800; font-size:1rem}
.cart-row.is-total b{font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:var(--amber-2)}
.form [data-delivery-fields]{display:flex; flex-direction:column; gap:var(--s3)}

/* ---------- seguimiento del pedido ---------- */
.track-card{display:flex; flex-direction:column; gap:var(--s5); padding:var(--s6); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg)}
.track-head{display:flex; align-items:center; gap:var(--s4)}
.track-logo{flex:none; width:66px; height:66px; border-radius:18px; overflow:hidden; display:grid; place-items:center; font-size:2rem; background:#fff; box-shadow:var(--shadow-md)}
.track-logo img{width:100%; height:100%; object-fit:cover}
.track-head .kicker{margin-bottom:.1rem}
.track-head h1{font-size:clamp(1.6rem,5vw,2.4rem)}
.track-status{display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5); border-radius:var(--r-lg);
  border:1px solid rgba(245,179,1,.4); background:linear-gradient(135deg,rgba(245,179,1,.15),rgba(225,29,42,.1)),var(--bg-2)}
.track-icon{font-size:2.6rem; line-height:1; animation:floaty 3s ease-in-out infinite}
.track-status b{display:block; font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.7rem; letter-spacing:.02em; line-height:1.05}
.track-status small{color:var(--muted); font-size:.92rem}
.track-status.is-en_camino .track-icon{animation:ride 1.1s ease-in-out infinite}
.track-status.is-entregado{border-color:rgba(55,194,107,.5); background:linear-gradient(135deg,rgba(55,194,107,.16),rgba(245,179,1,.08)),var(--bg-2)}
.track-status.is-cancelado{border-color:rgba(244,102,74,.5); background:rgba(244,102,74,.1)}
.track-status.is-cancelado .track-icon{animation:none}
.track-status.pulse{animation:statusPulse .9s cubic-bezier(.22,1,.36,1)}
.track-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.track-steps li{position:relative; display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; font-size:.78rem; color:var(--faint)}
.track-steps li::before{content:""; position:absolute; top:9px; right:50%; width:100%; height:3px; border-radius:3px; background:var(--border)}
.track-steps li:first-child::before{display:none}
.track-steps li > span{position:relative; z-index:1; display:grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:var(--surface-2); border:2px solid var(--border); font-size:.7rem; font-weight:800; color:#231f1b}
.track-steps li b{font-weight:700; line-height:1.2}
.track-steps li small{min-height:1.2em; font-size:.7rem; color:var(--faint)}
.track-steps li.done, .track-steps li.now{color:var(--text)}
.track-steps li.done::before, .track-steps li.now::before{background:linear-gradient(90deg,var(--amber),var(--red-glow))}
.track-steps li.done > span{background:var(--amber); border-color:var(--amber)}
.track-steps li.done > span::after{content:"✓"}
.track-steps li.now > span{background:var(--red-glow); border-color:#fff; animation:pulse 1.6s infinite}
.is-cancelled .track-steps{opacity:.4; filter:grayscale(1)}
.track-map{height:330px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border); background:var(--bg-2)}
.track-driver{display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r-lg); background:var(--bg-2); border:1px solid var(--border)}
.track-driver-ico{flex:none; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:1.7rem; background:var(--amber-soft)}
.track-driver > div{flex:1; min-width:0; display:flex; flex-direction:column}
.track-driver small{color:var(--muted); font-size:.78rem}
.track-driver b{font-size:1.08rem}
.track-box .panel-h3{margin-bottom:var(--s3)}
.track-items{list-style:none; margin:0 0 var(--s3); padding:0; display:flex; flex-direction:column; gap:.4rem}
.track-items li{display:flex; justify-content:space-between; gap:var(--s3); font-size:.93rem}
.track-items li.is-total{margin-top:.2rem; padding-top:.55rem; border-top:1px dashed var(--border); font-weight:800}
.track-items li.is-total b{font-family:var(--font-display); font-weight:400; font-size:1.35rem; color:var(--amber-2)}
.track-actions{display:flex; flex-wrap:wrap; gap:var(--s2)}
@media(max-width:560px){
  .track-card{padding:var(--s4); border-radius:var(--r-lg); gap:var(--s4)}
  .track-steps li{font-size:.66rem}
  .track-map{height:270px}
  .track-status{padding:var(--s3) var(--s4)}
  .track-status b{font-size:1.4rem}
}

/* ---------- pines del mapa: MapLibre los posiciona (position:absolute + transform); aquí NUNCA se cambia position ni transform del marcador ---------- */
.pin3d{--s:50px; display:block; width:var(--s); height:calc(var(--s) * 1.21); padding:0; margin:0; border:0;
  background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; z-index:1}
.pin3d:hover{z-index:4}
.pin3d.is-active{z-index:6}
.pin3d:focus-visible{outline:none}
.pin3d:focus-visible .pin3d-body::before{box-shadow:0 0 0 4px rgba(245,179,1,.7)}
.pin3d-body{position:absolute; left:0; top:0; width:var(--s); height:calc(var(--s) * 1.21); transform-origin:50% 100%;
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.45)); transition:transform .4s cubic-bezier(.22,1.5,.36,1);
  animation:pinDrop .9s cubic-bezier(.22,1,.36,1) backwards; animation-delay:var(--delay,0ms)}
.pin3d-body::before{content:""; position:absolute; left:0; top:0; width:var(--s); height:var(--s); box-sizing:border-box;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:3px solid #fff;
  background:linear-gradient(225deg,#ffd76a 0%,var(--red-glow) 42%,var(--red-2) 100%);
  box-shadow:inset -4px 4px 8px rgba(255,255,255,.45), inset 6px -6px 12px rgba(0,0,0,.35)}
.pin3d-face{position:absolute; left:calc(var(--s) * .14); top:calc(var(--s) * .14); width:calc(var(--s) * .72); height:calc(var(--s) * .72);
  border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#fff; font-size:calc(var(--s) * .4); line-height:1;
  box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08)}
.pin3d-face img{width:100%; height:100%; object-fit:cover}
.pin3d-stem{position:absolute; left:50%; bottom:-4px; width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:var(--amber-2); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5)}
.pin3d-shadow{position:absolute; left:50%; bottom:-7px; z-index:-1; width:38px; height:12px; margin-left:-19px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent); transition:transform .4s, opacity .4s}
.pin3d-label{position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%); max-width:150px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; padding:3px 10px; border-radius:var(--r-full); background:rgba(20,18,16,.9); color:#fff;
  border:1px solid rgba(255,255,255,.14); font:700 11px/1.35 var(--font-sans); letter-spacing:.01em; pointer-events:none;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.55); animation:fadeIn .6s both; animation-delay:calc(var(--delay,0ms) + .45s); transition:background .3s, color .3s}
.pin3d-badge{position:absolute; top:-7px; right:-7px; z-index:2; min-width:26px; height:26px; padding:0 7px; border-radius:var(--r-full);
  background:var(--amber-2); color:#231f1b; border:2px solid #fff; font:800 13px/22px var(--font-sans); text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.45); animation:badgePop .45s cubic-bezier(.22,1.6,.36,1) both}
.pin3d:hover .pin3d-body{transform:translateY(-6px) scale(1.08)}
.pin3d:hover .pin3d-shadow{transform:scale(.8); opacity:.7}
.pin3d.is-active .pin3d-body{transform:translateY(-10px) scale(1.2)}
.pin3d.is-active .pin3d-body::before{background:linear-gradient(225deg,#fff6c9 0%,var(--amber-2) 40%,#d98f00 100%)}
.pin3d.is-active .pin3d-shadow{transform:scale(.7); opacity:.55}
.pin3d.is-active .pin3d-stem{animation:groundPulse 1.5s ease-out infinite}
.pin3d.is-active .pin3d-label{background:var(--amber-2); color:#231f1b; border-color:#fff}
.pin3d.is-closed .pin3d-body::before{background:linear-gradient(225deg,#d9d2c7 0%,#8a7f70 55%,#4a433b 100%)}
.pin3d.is-closed .pin3d-face{filter:saturate(.45)}
.pin3d.pin-sm{--s:44px}
.pin3d.pin-sm .pin3d-label{display:none}

/* puntos: tú, la casa del cliente y el domiciliario */
.map-dot{width:22px; height:22px; pointer-events:none}
.map-dot > span{position:absolute; inset:0; z-index:1; display:grid; place-items:center; border-radius:50%; line-height:1}
.map-dot.is-me > span{background:#2f7bff; border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.5)}
.map-dot.is-me::before{content:""; position:absolute; inset:0; border-radius:50%; background:rgba(47,123,255,.45); animation:mePulse 2s ease-out infinite}
.map-dot.is-home, .map-dot.is-driver{width:42px; height:42px}
.map-dot.is-home > span{background:#fff; border:3px solid var(--red); font-size:1.25rem; box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
.map-dot.is-driver > span{background:var(--amber-2); border:3px solid #fff; font-size:1.3rem; box-shadow:0 8px 18px -6px rgba(0,0,0,.6); animation:ride 1.1s ease-in-out infinite}
.map-dot.is-driver::before{content:""; position:absolute; inset:0; border-radius:50%; background:rgba(245,179,1,.5); animation:mePulse 1.8s ease-out infinite}

/* pin del selector de ubicación (panel) */
.pick-pin{width:46px; height:56px; cursor:grab; filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))}
.pick-pin:active{cursor:grabbing}
.pick-pin::before{content:""; position:absolute; left:0; top:0; width:46px; height:46px; box-sizing:border-box; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); border:3px solid #fff; background:linear-gradient(225deg,#ffd76a,var(--red-glow) 45%,var(--red-2))}
.pick-pin > img, .pick-pin > span{position:absolute; left:7px; top:7px; width:32px; height:32px; border-radius:50%; background:#fff;
  object-fit:cover; display:grid; place-items:center; font-size:1.1rem}

/* ---------- RUTA: mapa a pantalla completa ---------- */
body.page-route{height:100vh; height:100dvh; overflow:hidden; background:#0e0c0a; overscroll-behavior:none}
.route-map{position:fixed; inset:0; background:#171412}
.route-top{position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:calc(10px + env(safe-area-inset-top)) 12px 26px; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,10,.8),rgba(14,12,10,0))}
.route-top > *{pointer-events:auto}
.route-brand{display:flex; align-items:center; gap:10px; min-width:0; padding:7px 16px 7px 8px; border-radius:var(--r-full);
  background:rgba(20,18,16,.84); border:1px solid rgba(255,255,255,.12); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 12px 28px -12px rgba(0,0,0,.7)}
.route-brand .brand-mark{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; font-size:1.25rem;
  background:linear-gradient(180deg,var(--red-glow),var(--red)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.route-brand b{display:block; font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; line-height:1.1}
.route-brand small{display:block; color:var(--amber-2); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase}
.route-tools{display:flex; gap:8px; flex:none}
.round-btn{display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer; color:#fff;
  font:800 .95rem var(--font-sans); background:rgba(20,18,16,.84); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7); transition:transform .2s, background .2s}
.round-btn:hover{transform:translateY(-2px); background:rgba(44,39,33,.92)}
.round-btn:active{transform:scale(.94)}
.route-fabs{position:fixed; right:12px; bottom:calc(186px + env(safe-area-inset-bottom)); z-index:9; display:flex; flex-direction:column;
  align-items:flex-end; gap:10px; transition:opacity .3s, transform .3s}
.fab{display:inline-flex; align-items:center; gap:10px; padding:7px 18px 7px 7px; border-radius:var(--r-full); cursor:pointer; color:#fff;
  font:800 .92rem var(--font-sans); background:rgba(20,18,16,.9); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 16px 32px -12px rgba(0,0,0,.8); transition:transform .2s}
.fab span{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); font-size:1.1rem}
.fab:hover{transform:translateY(-2px)}
.fab:active{transform:scale(.96)}
.fab-tour{background:linear-gradient(180deg,var(--red-glow),var(--red)); border-color:rgba(255,255,255,.18); box-shadow:0 16px 34px -12px rgba(225,29,42,.8)}
.fab-tour span{background:rgba(0,0,0,.22)}
.route-hint{position:fixed; z-index:11; left:50%; top:calc(76px + env(safe-area-inset-top)); transform:translateX(-50%);
  width:max-content; max-width:min(92vw,440px); display:flex; align-items:center; gap:var(--s3); padding:.65rem .65rem .65rem 1rem;
  border-radius:var(--r-lg); background:rgba(255,203,43,.97); color:#231f1b; font-size:.9rem; line-height:1.35;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.75); animation:hintIn .5s cubic-bezier(.22,1.3,.36,1)}
.route-hint button{flex:none; border:0; cursor:pointer; padding:.55rem .85rem; border-radius:var(--r-full); background:#231f1b; color:#fff; font:800 .8rem var(--font-sans)}
.route-toast{position:fixed; z-index:12; left:50%; top:calc(76px + env(safe-area-inset-top)); transform:translateX(-50%);
  width:max-content; max-width:min(92vw,460px); padding:.8rem 1.1rem; border-radius:var(--r-lg); text-align:center;
  background:rgba(20,18,16,.95); border:1px solid rgba(255,255,255,.14); color:#fff; font-weight:600; font-size:.9rem; line-height:1.4;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 40px -14px rgba(0,0,0,.85)}
.route-toast.show{animation:hintIn .45s cubic-bezier(.22,1.3,.36,1)}
/* tarjetas deslizables */
.route-cards{position:fixed; left:0; right:0; bottom:0; z-index:8; display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding:0 16px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(14,12,10,.92) 35%,rgba(14,12,10,0)); scrollbar-width:none; transition:opacity .3s, transform .3s}
.route-cards::-webkit-scrollbar{display:none}
.route-card{position:relative; flex:0 0 auto; width:min(84vw,340px); min-width:0; height:152px; scroll-snap-align:center; display:flex; flex-direction:column; gap:8px;
  padding:14px; border-radius:22px; cursor:pointer; background:rgba(30,26,22,.94); border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 20px 40px -18px rgba(0,0,0,.85);
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s}
.route-card:hover{transform:perspective(900px) rotateX(4deg) translateY(-3px)}
.route-card.is-active{border-color:var(--amber); transform:translateY(-4px);
  box-shadow:0 0 0 2px rgba(245,179,1,.35), 0 24px 44px -18px rgba(245,179,1,.45)}
.route-card:focus-visible{outline:none; border-color:var(--amber)}
.route-card-top{display:flex; align-items:center; gap:10px; min-width:0}
.route-card-logo{flex:none; width:46px; height:46px; border-radius:14px; overflow:hidden; display:grid; place-items:center; font-size:1.4rem;
  background:#fff; box-shadow:0 8px 16px -8px rgba(0,0,0,.7)}
.route-card-logo img{width:100%; height:100%; object-fit:cover}
.route-card-title{flex:1; min-width:0; display:flex; flex-direction:column}
.route-card-title b{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:1.18rem;
  line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.route-card-title small{color:var(--muted); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.route-card-dist{flex:none; align-self:flex-start; padding:.22rem .55rem; border-radius:var(--r-full); background:var(--amber-soft); color:var(--amber-2);
  font-size:.7rem; font-weight:800; white-space:nowrap}
.route-card-dist:empty{display:none}
.route-card-meta{display:flex; align-items:center; gap:8px; min-width:0; margin:0; overflow:hidden; white-space:nowrap; color:var(--muted); font-size:.8rem}
.route-card-meta > span:not(.open-pill){overflow:hidden; text-overflow:ellipsis}
.route-card-actions{display:flex; gap:8px; margin-top:auto}
.route-card-actions .btn{flex:1; padding:.62rem .6rem; font-size:.86rem; border-radius:14px}
.route-card-empty{width:min(92vw,440px); margin:0 auto; align-items:center; justify-content:center; text-align:center; cursor:default}
.route-card-empty:hover, .route-card-sp:hover{transform:none}
.route-card-sp{cursor:default; justify-content:center; gap:10px}
.route-card-sp > small{color:var(--faint); font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; text-align:center}
.rc-sp-row{display:flex; justify-content:center; gap:14px; overflow:hidden}
.rc-sp{display:flex; flex-direction:column; align-items:center; gap:4px; width:76px; color:var(--text); font-size:.72rem; font-weight:800; text-align:center; line-height:1.15}
.rc-sp img{width:54px; height:54px; object-fit:contain; padding:5px; border-radius:14px; background:#fff}
/* indicaciones */
.route-go{position:fixed; left:0; right:0; bottom:0; z-index:10; max-width:540px; margin:0 auto; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  background:rgba(26,22,19,.96); border:1px solid rgba(255,255,255,.1); border-bottom:0; border-radius:26px 26px 0 0;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 -24px 50px -14px rgba(0,0,0,.7); animation:sheetUp .45s cubic-bezier(.22,1,.36,1)}
.route-go-head{display:flex; align-items:center; gap:12px}
.route-go-head > div{flex:1; min-width:0; display:flex; flex-direction:column}
.route-go-head small{color:var(--amber-2); font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.route-go-head b{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.4rem; letter-spacing:.02em; line-height:1.05;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.route-go-logo{flex:none; width:50px; height:50px; border-radius:15px; overflow:hidden; display:grid; place-items:center; font-size:1.5rem; background:#fff}
.route-go-logo img{width:100%; height:100%; object-fit:cover}
.route-go-stats{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:12px 0}
.route-go-stats strong{font-family:var(--font-display); font-weight:400; font-size:2.2rem; line-height:1;
  background:linear-gradient(180deg,#fff,var(--amber-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.route-go-stats span{color:var(--muted); font-weight:700}
.seg-mini{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:16px; background:var(--bg-2); border:1px solid var(--border)}
.seg-mini button{padding:.7rem; border:0; border-radius:12px; cursor:pointer; background:none; color:var(--muted); font:800 .92rem var(--font-sans); transition:background .2s, color .2s}
.seg-mini button.on{background:linear-gradient(180deg,var(--red-glow),var(--red)); color:#fff; box-shadow:0 8px 18px -8px rgba(225,29,42,.8)}
.route-go-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.route-go-actions .btn-block{grid-column:1/-1; padding:1rem; font-size:1.02rem}
.route-go-note{margin:10px 0 0; color:var(--muted); font-size:.82rem; line-height:1.45}
.route-noscript{position:fixed; left:16px; right:16px; bottom:16px; z-index:20; padding:1rem; border-radius:var(--r-lg); background:var(--surface); text-align:center}
.route-noscript a{color:var(--amber)}
body.is-going .route-cards, body.is-going .route-fabs{opacity:0; transform:translateY(40px); pointer-events:none}
/* controles de MapLibre en tema oscuro */
.page-route .maplibregl-ctrl-top-right{top:calc(64px + env(safe-area-inset-top)); right:2px}
.page-route .maplibregl-ctrl-group{background:rgba(20,18,16,.86); border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.page-route .maplibregl-ctrl-group button{width:40px; height:40px}
.page-route .maplibregl-ctrl-group button + button{border-top:1px solid rgba(255,255,255,.1)}
.page-route .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(1.5)}
.page-route .maplibregl-ctrl-bottom-right{top:calc(64px + env(safe-area-inset-top)); bottom:auto; right:auto; left:0}
/* sin mapa (celulares sin WebGL): lista normal */
body.page-route.no-map{height:auto; overflow:auto}
.no-map .route-map, .no-map .route-fabs{display:none}
.no-map .route-top{position:sticky; background:var(--bg)}
.no-map .route-cards{position:static; flex-direction:column; overflow:visible; padding:var(--s4); background:none}
.no-map .route-card{flex:none; width:100%; height:auto}
@media(min-width:900px){
  .route-cards{top:calc(84px + env(safe-area-inset-top)); bottom:16px; left:16px; right:auto; width:370px; flex-direction:column; gap:12px;
    overflow-x:hidden; overflow-y:auto; scroll-snap-type:y proximity; padding:4px 6px 16px 4px; background:none; scrollbar-width:thin}
  .route-card{flex:none; width:100%; height:auto; min-height:152px; scroll-snap-align:start}
  .route-card-empty{width:100%}
  .route-card:hover{transform:perspective(900px) rotateY(-4deg) translateX(3px)}
  .route-card.is-active{transform:translateX(6px)}
  .route-fabs{bottom:44px; right:16px}
  .route-go{left:16px; right:auto; bottom:16px; width:380px; border-radius:26px; border-bottom:1px solid rgba(255,255,255,.1)}
  .page-route .maplibregl-ctrl-bottom-right{top:auto; bottom:0; left:auto; right:0}
  body.is-going .route-cards{transform:translateX(-40px)}
}
@media(max-width:899px){
  /* los créditos del mapa quedan debajo de la barra superior; la brújula, debajo de ellos */
  .page-route .maplibregl-ctrl-top-right{top:calc(108px + env(safe-area-inset-top))}
}
@media(max-width:600px){
  .page-route .maplibregl-ctrl-zoom-in, .page-route .maplibregl-ctrl-zoom-out{display:none}
  .page-route .maplibregl-ctrl-group button + button{border-top:0}
  .route-brand{padding-right:12px}
  .route-brand b{font-size:.95rem}
  .fab b{font-size:.86rem}
}

/* ---------- inicio: vitrina de la Ruta ---------- */
.route-teaser{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:var(--s8);
  padding:var(--s6); border-radius:var(--r-xl); overflow:hidden; border:1px solid rgba(245,179,1,.35);
  background:radial-gradient(90% 120% at 0% 0%,rgba(225,29,42,.22),transparent 55%),radial-gradient(80% 120% at 100% 100%,rgba(245,179,1,.16),transparent 55%),var(--surface);
  box-shadow:var(--shadow-lg); transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s}
.route-teaser:hover{transform:translateY(-4px); box-shadow:0 40px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(245,179,1,.4)}
.rt-map{position:relative; height:300px; perspective:900px; perspective-origin:50% 20%}
.rt-plane{position:absolute; inset:6% 4% 2%; border-radius:28px; transform-style:preserve-3d; transform:rotateX(56deg) rotateZ(-24deg);
  background:
    linear-gradient(rgba(255,255,255,.07) 3px,transparent 3px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(255,255,255,.07) 3px,transparent 3px) 0 0/42px 100%,
    radial-gradient(60% 60% at 40% 45%,rgba(245,179,1,.14),transparent 70%),
    #1f1a16;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 60px 80px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(0,0,0,.6);
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.route-teaser:hover .rt-plane{transform:rotateX(50deg) rotateZ(-18deg)}
.rt-plane svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.rt-road{fill:none; stroke:rgba(255,255,255,.12); stroke-width:10; stroke-linecap:round; vector-effect:non-scaling-stroke}
.rt-path{fill:none; stroke:url(#rtGrad); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:10 9;
  vector-effect:non-scaling-stroke; animation:dashMove 1.6s linear infinite}
.rt-pin{position:absolute; width:0; height:0; transform-style:preserve-3d; transform:rotateZ(24deg) rotateX(-56deg); transition:transform .8s cubic-bezier(.22,1,.36,1)}
.route-teaser:hover .rt-pin{transform:rotateZ(18deg) rotateX(-50deg)}
.rt-pin > span{position:absolute; left:-23px; bottom:0; width:46px; height:56px; animation:pinBob 2.6s ease-in-out infinite; animation-delay:var(--d,0s);
  filter:drop-shadow(0 10px 6px rgba(0,0,0,.5))}
.rt-pin > span::before{content:""; position:absolute; left:0; top:0; width:46px; height:46px; box-sizing:border-box; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); border:3px solid #fff; background:linear-gradient(225deg,#ffd76a,var(--red-glow) 45%,var(--red-2))}
.rt-pin i{position:absolute; left:6px; top:6px; width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:#fff; font-style:normal; font-size:1.1rem}
.rt-pin img{width:100%; height:100%; object-fit:cover}
.rt-me{position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:#2f7bff; border:3px solid #fff; animation:pulse 2s infinite}
.rt-body .h-display{font-size:clamp(1.9rem,4.4vw,3rem); margin:var(--s2) 0 var(--s3)}
.rt-body p{margin:0 0 var(--s5)}
.rt-feats{list-style:none; margin:0 0 var(--s6); padding:0; display:flex; flex-direction:column; gap:var(--s2); color:var(--muted); font-weight:600; font-size:.92rem}
.rt-feats li{display:flex; align-items:center; gap:var(--s3)}
.rt-feats li span{display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:10px; background:var(--surface-2)}
.card-link{display:inline-flex; align-items:center; gap:.35rem; color:var(--amber); font-weight:700; font-size:.88rem}
.card-link:hover{color:var(--amber-2); text-decoration:underline}
@media(max-width:820px){
  .route-teaser{grid-template-columns:1fr; gap:var(--s4); padding:var(--s4) var(--s4) var(--s6)}
  .rt-map{height:250px}
}

/* ---------- panel: roles, restaurantes, menú, equipo ---------- */
.role-chip{display:inline-block; margin-left:.35rem; padding:.1rem .5rem; border-radius:var(--r-full); background:var(--amber-soft); color:var(--amber-2);
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; vertical-align:middle}
.rest-list{display:flex; flex-direction:column; gap:var(--s3)}
.rest-item{display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4);
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); transition:border-color .2s}
.rest-item:hover{border-color:var(--border)}
.rest-item.is-off{opacity:.62}
.rest-logo{width:64px; height:64px; border-radius:16px; overflow:hidden; display:grid; place-items:center; font-size:1.8rem; background:#fff; box-shadow:var(--shadow-sm)}
.rest-logo img{width:100%; height:100%; object-fit:cover}
.rest-main{min-width:0}
.rest-main h3{font-size:1.05rem; font-weight:800}
.rest-main h3 small{font-weight:500; font-size:.8rem}
.rest-main p{margin:.35rem 0 0}
.rest-tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem}
.tag-warn{background:rgba(245,179,1,.16); color:var(--amber-2)}
.rest-actions{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--s2); max-width:330px}
.logo-edit{display:flex; align-items:center; gap:var(--s4)}
.logo-edit > div:last-child{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--s2)}
.logo-edit p{margin:0}
.logo-prev{flex:none; width:96px; height:96px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:2.4rem; background:#fff;
  box-shadow:0 0 0 3px var(--border), var(--shadow-md)}
.logo-prev img{width:100%; height:100%; object-fit:cover}
.logo-prev-sq{border-radius:var(--r-md)}
.form input[type=file]{width:100%; padding:.55rem; font-size:.85rem; cursor:pointer}
.form .hours-box{display:flex; flex-direction:column; gap:var(--s4); min-width:0}
.picker{height:340px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:var(--bg-2)}
.picker-tools{display:flex; flex-wrap:wrap; gap:var(--s2)}
.picker-tools input{flex:1 1 200px; min-width:0}
.days{display:flex; flex-wrap:wrap}
.days .pill span{padding:.5rem .8rem}
.switch{position:relative; display:flex !important; flex-direction:row !important; align-items:center; gap:var(--s3) !important; cursor:pointer; user-select:none; font-weight:600}
.switch input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.switch span{display:inline-flex; align-items:center; gap:var(--s3); line-height:1.35}
.switch span::before{content:""; flex:none; width:46px; height:26px; box-sizing:border-box; border-radius:var(--r-full); background:var(--surface-2);
  border:1px solid var(--border); box-shadow:inset 0 2px 4px rgba(0,0,0,.35); transition:background .25s, border-color .25s}
.switch span::after{content:""; position:absolute; left:4px; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.45); transition:transform .3s cubic-bezier(.22,1.4,.36,1)}
.switch input:checked + span::before{background:linear-gradient(180deg,#4ad884,var(--success)); border-color:transparent}
.switch input:checked + span::after{transform:translateX(20px)}
.switch input:focus-visible + span::before{box-shadow:0 0 0 3px rgba(245,179,1,.5)}
.switch-big span{font-size:1.05rem}
.switch-big span::before{width:62px; height:36px}
.switch-big span::after{left:5px; width:28px; height:28px; margin-top:-14px}
.switch-big input:checked + span::after{transform:translateX(26px)}
.prod-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s2)}
.prod-item{display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3);
  background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-md)}
.prod-item.is-off{opacity:.6}
.prod-thumb{width:52px; height:52px; border-radius:12px; overflow:hidden; display:grid; place-items:center; font-size:1.5rem; background:var(--surface-2)}
.prod-thumb img{width:100%; height:100%; object-fit:cover}
.prod-thumb-contain{background:#fff}
.prod-thumb-contain img{object-fit:contain; padding:4px}
.prod-info{min-width:0; display:flex; flex-direction:column}
.prod-info strong{font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prod-info small{color:var(--muted); font-size:.8rem}
.txt-warn{color:var(--amber-2)}
.prod-item .row-actions{flex-wrap:wrap; justify-content:flex-end}
.roles-help{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s4); margin-bottom:var(--s6)}
.roles-help .panel{padding:var(--s4) var(--s5)}
.roles-help p{margin:.35rem 0 0}
.pass-row{display:flex; gap:var(--s2)}
.pass-row input{flex:1; min-width:0}
.qr-duo{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
.qr-duo-item{display:flex; flex-direction:column; align-items:center; gap:var(--s2); padding:var(--s3); text-align:center; border-radius:var(--r-md);
  background:var(--bg-2); border:1px solid var(--border-soft)}
.qr-duo-item .qr-frame-sm{width:100%; max-width:170px}
.qr-duo-item .qr-mini-actions{justify-content:center}
.quick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--s4); margin-bottom:var(--s10)}
.quick{position:relative; display:flex; flex-direction:column; gap:.2rem; padding:var(--s5); overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--border); box-shadow:var(--shadow-md);
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s}
.quick::after{content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(245,179,1,.16),transparent); transition:transform .5s}
.quick span{font-size:1.9rem; line-height:1; margin-bottom:.45rem; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.quick b{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em}
.quick small{color:var(--muted); font-size:.82rem; line-height:1.4}
.quick:hover{transform:perspective(700px) rotateX(4deg) translateY(-4px); border-color:var(--amber); box-shadow:0 24px 44px -20px rgba(245,179,1,.4)}
.quick:hover::after{transform:scale(1.6)}
@media(max-width:760px){
  .rest-item{grid-template-columns:52px minmax(0,1fr)}
  .rest-logo{width:52px; height:52px}
  .rest-actions{grid-column:1/-1; justify-content:flex-start; max-width:none}
}
@media(max-width:560px){
  .prod-item{grid-template-columns:46px minmax(0,1fr)}
  .prod-thumb{width:46px; height:46px}
  .prod-item .row-actions{grid-column:1/-1; justify-content:flex-start}
  .logo-prev{width:80px; height:80px}
}
@media(max-width:420px){ .qr-duo{grid-template-columns:1fr} }

/* ---------- pedidos en vivo (restaurante) y entregas (domiciliario) ---------- */
.alert-enable{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:var(--s4); width:100%; margin:0 0 var(--s5);
  padding:var(--s4) var(--s5); border-radius:var(--r-lg); border:2px dashed var(--amber); background:var(--amber-soft); color:var(--amber-2);
  font:inherit; text-align:left; cursor:pointer; animation:alertGlow 2.2s ease-in-out infinite}
.alert-enable > span{grid-row:1/3; font-size:2.1rem; line-height:1}
.alert-enable b{font-size:1rem}
.alert-enable small{color:var(--muted); font-size:.85rem}
.alert-enable:hover{background:rgba(245,179,1,.2)}
.orders-board{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); align-items:start}
.orders-board.is-offline, .deliveries.is-offline{opacity:.6}
.orders-col{min-height:240px; padding:var(--s3); border-radius:var(--r-lg); background:rgba(35,31,27,.6); border:1px solid var(--border-soft)}
.orders-col h2{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:var(--s1) var(--s2) var(--s3); font-size:.95rem; font-weight:800}
.orders-col h2 b{display:grid; place-items:center; min-width:28px; height:28px; padding:0 8px; border-radius:var(--r-full); background:var(--surface-2); font-size:.85rem}
.orders-col[data-col="nuevos"].has-items{border-color:rgba(255,59,72,.5)}
.orders-col[data-col="nuevos"].has-items h2 b{background:var(--red); color:#fff; animation:pulse 1.6s infinite}
.orders-list{display:flex; flex-direction:column; gap:var(--s3)}
.oc-empty{margin:0; padding:var(--s4) var(--s2); text-align:center; color:var(--faint); font-size:.82rem; line-height:1.45}
.admin-topbar-actions .btn{white-space:nowrap}
.oc-empty.big{display:flex; flex-direction:column; align-items:center; gap:var(--s2); padding:var(--s12) var(--s6); border:1px dashed var(--border);
  border-radius:var(--r-lg); background:var(--surface)}
.oc-empty.big span{font-size:3rem; line-height:1}
.oc-empty.big b{color:var(--text); font-size:1.1rem}
.order-card{position:relative; display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border); border-left:5px solid var(--border); box-shadow:var(--shadow-md)}
.order-card.st-nuevo{border-left-color:var(--red-glow); animation:newOrder 1.8s ease-in-out infinite}
.order-card.st-aceptado, .order-card.st-preparando{border-left-color:var(--amber)}
.order-card.st-listo{border-left-color:var(--success)}
.order-card.st-en_camino{border-left-color:#4a9bff}
.order-card.st-entregado{border-left-color:var(--success); opacity:.85}
.order-card.st-cancelado{opacity:.55}
.oc-head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2)}
.oc-code{display:flex; flex-direction:column}
.oc-code b{font-family:var(--font-display); font-weight:400; font-size:1.35rem; letter-spacing:.05em; line-height:1.1}
.oc-code small{color:var(--faint); font-size:.75rem}
.oc-status{flex:none; padding:.22rem .65rem; border-radius:var(--r-full); background:var(--surface-2); color:var(--muted); font-size:.72rem; font-weight:800; white-space:nowrap}
.st-nuevo .oc-status{background:var(--red); color:#fff}
.st-aceptado .oc-status, .st-preparando .oc-status{background:var(--amber-soft); color:var(--amber-2)}
.st-listo .oc-status, .st-entregado .oc-status{background:rgba(55,194,107,.15); color:#8ef0b4}
.st-en_camino .oc-status{background:rgba(74,155,255,.16); color:#8cc0ff}
.oc-rest{margin:0; color:var(--amber-2); font-size:.8rem; font-weight:700}
.oc-who{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2)}
.oc-who b{font-size:1.02rem}
.oc-mode{color:var(--muted); font-size:.78rem; font-weight:700}
.oc-addr{display:flex; flex-direction:column; margin:0; padding:var(--s2) var(--s3); border-radius:var(--r-sm); background:var(--bg-2); font-size:.88rem}
.oc-addr small{color:var(--muted)}
.oc-items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; font-size:.88rem}
.oc-items li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.4rem}
.oc-items li b{color:var(--amber-2)}
.oc-items li span{color:var(--muted)}
.oc-notes{margin:0; padding:var(--s2) var(--s3); border-radius:var(--r-sm); background:rgba(245,179,1,.08); border:1px dashed rgba(245,179,1,.4); color:var(--amber-2); font-size:.86rem}
.oc-pay{margin:0; font-weight:800; font-size:.96rem}
.oc-contact{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem}
.oc-contact .chip-btn{justify-content:center}
.chip-btn{display:inline-flex; align-items:center; gap:.3rem; padding:.45rem .75rem; border-radius:var(--r-full); background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); font-size:.8rem; font-weight:700; white-space:nowrap; transition:border-color .2s, background .2s}
.chip-btn:hover{border-color:var(--amber)}
.chip-btn.is-hot{background:linear-gradient(180deg,var(--red-glow),var(--red)); border-color:transparent; color:#fff}
.oc-driver{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border-radius:var(--r-sm);
  background:rgba(74,155,255,.08); border:1px solid rgba(74,155,255,.28); font-size:.85rem}
.oc-driver label{flex:1 1 100%; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:.3rem; font-weight:700}
.oc-driver select{width:100%; min-width:0; padding:.55rem .5rem; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--bg-2); color:var(--text); font:inherit}
.oc-actions{display:flex; flex-wrap:wrap; gap:var(--s2)}
.oc-actions .oc-go{flex:1 1 auto; padding:.9rem 1rem; font-size:1rem}
.oc-actions .oc-cancel{color:#ffb4a3}
.btn.is-loading{opacity:.6; pointer-events:none}
.deliveries .orders-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr)); gap:var(--s4)}
.deliveries .order-card{padding:var(--s5)}
.deliveries .oc-go{padding:1.05rem; font-size:1.05rem}
.gps-card{display:flex; align-items:center; gap:var(--s4); margin:0 0 var(--s5); padding:var(--s4) var(--s5); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border)}
.gps-card > div{flex:1; min-width:0; display:flex; flex-direction:column}
.gps-card small{color:var(--muted); font-size:.82rem}
.gps-dot{flex:none; width:14px; height:14px; border-radius:50%; background:var(--faint)}
.gps-card.is-on{border-color:rgba(55,194,107,.5)}
.gps-card.is-on .gps-dot{background:var(--success); animation:pulseGreen 2s infinite}
.gps-card.is-wait .gps-dot{background:var(--amber); animation:pulse 1.2s infinite}
.gps-card.is-err{border-color:rgba(244,102,74,.5)}
.gps-card.is-err .gps-dot{background:var(--danger)}
.panel-toasts{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:200; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; width:min(92vw,420px); pointer-events:none}
.panel-toast{padding:.85rem 1rem; border-radius:var(--r-md); background:rgba(35,31,27,.97); border:1px solid var(--border); color:var(--text);
  font-weight:700; font-size:.9rem; box-shadow:var(--shadow-lg); animation:sheetUp .35s cubic-bezier(.22,1,.36,1); transition:opacity .5s, transform .5s}
.panel-toast.is-ok{border-color:rgba(55,194,107,.55)}
.panel-toast.is-error{border-color:rgba(244,102,74,.6); color:#ffb4a3}
.panel-toast.out{opacity:0; transform:translateY(10px)}
@media(max-width:1180px){ .orders-board{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:640px){
  .orders-board{grid-template-columns:1fr}
  .orders-col{min-height:0}
  .alert-enable{padding:var(--s3) var(--s4)}
  .gps-card{flex-wrap:wrap}
  .gps-card [data-gps-toggle]{width:100%}
}
.oc-wait{margin:0; color:var(--muted); font-size:.85rem}

/* ---------- QR: votar o ruta, y cartel de la Ruta ---------- */
.qr-dest{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-bottom:var(--s6)}
.qr-dest a{display:flex; align-items:center; gap:var(--s3); padding:var(--s4) var(--s5); border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--border); transition:border-color .2s, background .2s, transform .2s}
.qr-dest a:hover{border-color:var(--amber); transform:translateY(-2px)}
.qr-dest a.on{border-color:var(--amber); background:linear-gradient(135deg,rgba(245,179,1,.16),rgba(225,29,42,.1)),var(--surface)}
.qr-dest span{font-size:2rem; line-height:1}
.qr-dest b{display:block; font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.2rem; letter-spacing:.02em}
.qr-dest small{color:var(--muted); font-size:.82rem}
.poster-logos{display:flex; flex-wrap:wrap; justify-content:center; gap:4mm; margin:0 0 7mm}
.poster-logos span{width:15mm; height:15mm; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#fff;
  border:2px solid rgba(0,0,0,.12); font-size:20px}
.poster-logos img{width:100%; height:100%; object-fit:cover}
@media(max-width:560px){ .qr-dest{grid-template-columns:1fr} }

/* ---------- pantalla gigante: patrocinadores ---------- */
.tv-sponsors{flex:none; display:flex; align-items:center; gap:1.2vw; overflow:hidden; padding:.4vh 0}
.tv-sponsors > small{flex:none; color:var(--faint); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:clamp(.6rem,.8vw,.9rem)}
.tv-sponsors .sp-row{flex-wrap:nowrap; justify-content:flex-start; gap:1.6vw}
.tv-sponsors .sp-item{flex-direction:row; width:auto; gap:.6vw}
.tv-sponsors .sp-logo{width:5.4vh; height:5.4vh; min-width:34px; min-height:34px; border-radius:12px; padding:4px}
.tv-sponsors .sp-name{font-size:clamp(.75rem,1vw,1.1rem)}

@media(prefers-reduced-motion:reduce){
  .pin3d-body, .pin3d-label, .rt-pin > span, .sp-track, .order-card.st-nuevo, .alert-enable{animation:none !important}
}
.poster--ruta .poster-title{margin-top:7mm}
.poster--ruta .poster-qr{width:98mm}
.poster--ruta .poster-url{margin:4mm 0 5mm}
.poster--ruta .poster-steps{margin-bottom:6mm}
.shop-notice{margin:0 0 var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--amber-soft); color:var(--amber-2); font-weight:600; font-size:.92rem}
.prod-card.is-sold{opacity:.55}
.prod-card.is-sold .prod-photo img{filter:grayscale(1)}
.sold-tag{padding:.35rem .8rem; border-radius:var(--r-full); background:var(--surface-2); color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em}

/* barra del panel: con muchas secciones, el menú pasa a su propia fila (deslizable) */
.admin-topbar .brand{flex:none; white-space:nowrap}
@media(max-width:1500px){
  .admin-topbar{flex-wrap:wrap; row-gap:var(--s2); padding-bottom:var(--s2)}
  .admin-nav{order:3; flex:1 0 100%; margin:0; gap:var(--s5); overflow-x:auto; scrollbar-width:none; padding:var(--s1) 0}
  .admin-nav::-webkit-scrollbar{display:none}
}

/* participantes que aún no suben fotos: se ve su logo completo */
.card-media img.is-logo, .vote-media img.is-logo{object-fit:contain; background:#000; padding:6%}
.card:hover .card-media img.is-logo, .vote-card:hover .vote-media img.is-logo{transform:scale(1.03)}
/* Ruta: locales sin punto en el mapa todavía */
.route-card.is-pending{border-style:dashed; border-color:rgba(245,179,1,.35)}
.route-card.is-pending .route-card-meta > span:not(.open-pill){color:var(--amber-2)}

/* ---------- mapas: nombres de los locales solo de cerca (de lejos se tapan unos con otros) ---------- */
.bf-far .pin3d:not(.is-active):not(:hover) .pin3d-label{visibility:hidden}

/* ---------- logo oficial ---------- */
.brand-logo{width:44px; height:44px; flex:none; border-radius:50%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.brand-logo-lg{width:72px; height:72px; display:block; margin-bottom:var(--s2)}
.brand .brand-logo{transition:transform .35s cubic-bezier(.22,1.4,.36,1)}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.06)}
.admin-topbar .brand-logo{width:40px; height:40px}
.route-brand .brand-logo{width:42px; height:42px}
.brand-logo-tv{width:clamp(44px,6vh,90px); height:clamp(44px,6vh,90px)}
.hero-logo{display:block; width:clamp(150px,26vw,240px); height:auto; margin:0 auto var(--s4); border-radius:50%;
  filter:drop-shadow(0 18px 40px rgba(225,29,42,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation:heroIn .85s cubic-bezier(.22,1,.36,1) both, logoFloat 6s ease-in-out 1s infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-2deg)}}
.auth-logo{display:flex; flex-direction:column; align-items:center; gap:var(--s2)}
.auth-logo-img{width:96px; height:96px; border-radius:50%; filter:drop-shadow(0 10px 24px rgba(225,29,42,.4))}
.poster-brand{display:flex; align-items:center; gap:3mm}
.poster-logo{width:16mm; height:16mm; border-radius:50%}
@media(max-width:560px){ .brand-logo{width:38px; height:38px} }
@media(prefers-reduced-motion:reduce){ .hero-logo{animation:none} }

/* ---------- página del local: “Dónde queda” con Google Maps ---------- */
.shop-where{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--s5); align-items:stretch; margin:var(--s8) 0 var(--s12);
  padding:var(--s4); border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md)}
.shop-where iframe{width:100%; height:100%; min-height:300px; border:0; border-radius:var(--r-lg); background:var(--surface-2)}
.shop-where-info{display:flex; flex-direction:column; gap:var(--s3); justify-content:center; padding:var(--s2)}
.shop-where-info h2{font-family:var(--font-display); text-transform:uppercase; font-weight:400; font-size:1.6rem}
.shop-where-info p{margin:0; color:var(--muted)}
.shop-where-info .addr{color:var(--text); font-weight:700; font-size:1.05rem}
.shop-where-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2)}
@media(max-width:760px){ .shop-where{grid-template-columns:1fr} .shop-where iframe{min-height:260px} }

/* ---------- pantalla gigante con 10 o más participantes: todo cabe en la TV ---------- */
.tv .empty-state{flex:none; margin:0; padding:1.2vh 2vw; display:flex; align-items:center; justify-content:center; gap:1.5vw}
.tv .empty-state .empty-icon{font-size:clamp(1.6rem,3.2vh,2.6rem)}
.tv .empty-state h1{margin:0; font-size:clamp(1.1rem,2.6vh,2.1rem)}
.board-tv .board-row{overflow:hidden}
.board-tv.board-dense{gap:.7vh}
.board-tv.board-dense .board-row{max-height:7.4vh; padding:.3vh 1.2vw .3vh .5vw}
.board-tv.board-dense .board-photo{width:5.4vh; height:5.4vh}
.board-tv.board-dense .board-name{font-size:clamp(.9rem,2.5vh,1.8rem); line-height:1.05}
.board-tv.board-dense .board-votes{font-size:clamp(1.1rem,3.2vh,2.4rem)}
.board-tv.board-dense .board-rank{font-size:clamp(1rem,2.8vh,2.1rem)}
.board-tv.board-dense .board-pct{font-size:clamp(.65rem,1.3vh,1rem); margin-top:.1rem}
.board-tv.board-dense .bar{height:.7vh; min-height:4px; margin-top:.3vh}
.tv-sponsors .sp-name{white-space:nowrap}
.spotlight-tv.is-compact{grid-template-columns:minmax(110px,13vw) 1fr; padding:.7vw 1.2vw; gap:1.6vw}
.spotlight-tv.is-compact .spotlight-media{max-height:14vh}
.spotlight-tv.is-compact .spotlight-kicker{font-size:clamp(.8rem,1.1vw,1.25rem)}
.spotlight-tv.is-compact .spotlight-name{font-size:clamp(1.5rem,3vw,3.4rem); margin:.4vh 0}
.spotlight-tv.is-compact .spotlight-stats{margin-top:.4vh}
.spotlight-tv.is-compact .spotlight-stats b{font-size:clamp(1.5rem,2.6vw,3rem)}
.board-tv.board-dense .board-pct{display:none}

/* ---------- resultados en suspenso ---------- */
.suspense{position:relative; margin:var(--s6) 0; padding:var(--s6); border-radius:var(--r-xl); border:1px dashed rgba(245,179,1,.55);
  background:radial-gradient(80% 120% at 0% 0%,rgba(245,179,1,.12),transparent 60%),radial-gradient(80% 120% at 100% 100%,rgba(225,29,42,.14),transparent 60%),var(--surface);
  box-shadow:var(--shadow-lg); text-align:center}
.suspense-head{display:flex; flex-direction:column; align-items:center; gap:var(--s3)}
.suspense-icon{font-size:clamp(3rem,8vw,4.6rem); line-height:1; animation:drum 1.1s ease-in-out infinite}
.suspense.is-awaiting .suspense-icon{animation-duration:.45s}
@keyframes drum{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
.suspense h2{font-size:clamp(1.9rem,6vw,3.2rem); margin:var(--s1) 0 var(--s2)}
.suspense p{margin:0 auto var(--s2); max-width:560px}
.suspense-total{color:var(--muted)}
.suspense-total b{font-family:var(--font-display); font-weight:400; font-size:1.6rem; color:var(--amber-2); letter-spacing:.02em}
.suspense-grid{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:var(--s4)}
.suspense-grid li{display:flex; flex-direction:column; align-items:center; gap:var(--s2); font-size:.85rem}
.suspense-grid b{line-height:1.2}
.suspense-logo{width:76px; height:76px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#000; font-size:2rem;
  box-shadow:0 0 0 3px rgba(245,179,1,.35), var(--shadow-md)}
.suspense-logo img{width:100%; height:100%; object-fit:cover}
.suspense-tv{margin:0; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; padding:2vh 2vw}
.suspense-tv .suspense-icon{font-size:clamp(3rem,9vh,6rem)}
.suspense-tv h2{font-size:clamp(2rem,6vh,4.4rem)}
.suspense-tv p{font-size:clamp(1rem,2.2vh,1.5rem); max-width:none}
.suspense-tv .suspense-total b{font-size:clamp(1.6rem,4vh,3rem)}
.suspense-tv .suspense-grid{grid-template-columns:repeat(5,1fr); gap:2vh 1.5vw; margin-top:3vh}
.suspense-tv .suspense-logo{width:9vh; height:9vh}
.suspense-tv .suspense-grid li{font-size:clamp(.8rem,1.7vh,1.2rem)}
@media(max-width:560px){ .suspense{padding:var(--s5) var(--s4)} .suspense-grid{grid-template-columns:repeat(3,1fr); gap:var(--s3)} .suspense-logo{width:62px; height:62px} }
@media(prefers-reduced-motion:reduce){ .suspense-icon{animation:none} }

/* ---------- panel: control de resultados públicos ---------- */
.results-ctl{margin-bottom:var(--s8)}
.results-ctl-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s5); flex-wrap:wrap}
.results-ctl-label{margin:var(--s4) 0 0; font-weight:700; font-size:.9rem}
.winner-peek{display:flex; flex-direction:column; gap:.15rem; min-width:220px; padding:var(--s3) var(--s4); border-radius:var(--r-md);
  background:var(--bg-2); border:1px dashed var(--border)}
.winner-peek-lock{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.winner-peek b{color:var(--amber-2); font-size:.85rem}
.winner-peek strong{font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:1.3rem; line-height:1.1}
.winner-peek small{color:var(--muted)}
.hide-at-form{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3); margin-top:var(--s4)}
.hide-at-form label{display:flex; flex-direction:column; gap:var(--s1); font-weight:600; font-size:.85rem}
.hide-at-form input{background:var(--bg-2); border:1px solid var(--border); color:var(--text); padding:.55rem .7rem; border-radius:var(--r-sm); font:inherit; color-scheme:dark}
.winner-actions{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--border-soft)}
.winner-actions p{margin:var(--s2) 0 0}

/* ---------- panel: reiniciar la votación (pruebas) ---------- */
.reset-card{margin-bottom:var(--s8); border-color:rgba(244,102,74,.35)}
.reset-head{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s5); flex-wrap:wrap}
.reset-head p{margin:var(--s2) 0 0; max-width:640px}
.reset-count{display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; padding:var(--s3) var(--s4); border-radius:var(--r-md);
  background:var(--bg-2); border:1px dashed var(--border); color:var(--muted); font-size:.9rem}
.reset-count b{font-family:var(--font-display); font-weight:400; font-size:1.5rem; color:var(--text)}
.reset-count span{color:var(--faint)}
.reset-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s5); margin-top:var(--s5)}
.reset-confirm{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3); margin-top:var(--s5)}
.reset-confirm label{display:flex; flex-direction:column; gap:var(--s1); font-weight:600; font-size:.9rem}
.reset-confirm input{min-width:200px; text-transform:uppercase; letter-spacing:.08em}
.undo-form{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--border-soft)}
.undo-form p{margin:0}
.warn-text{color:#ffcf7a !important}
.suspense.is-paused .suspense-icon{animation:none}

/* ---------- registro: pestañas, clave, tarjeta de registro ---------- */
.auth-tabs{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:0 0 var(--s4); border-radius:999px; background:var(--bg-2); border:1px solid var(--border)}
.auth-tab{display:flex; justify-content:center; align-items:center; padding:.6rem .8rem; border-radius:999px; font-weight:700; font-size:.92rem;
  color:var(--muted); text-decoration:none; transition:background .15s, color .15s}
.auth-tab:hover{color:var(--text)}
.auth-tab.is-on{background:var(--amber); color:#1d1406}
.pass-wrap{position:relative; display:block}
.pass-wrap input{width:100%; padding-right:3rem}
.pass-eye{position:absolute; right:.35rem; top:50%; transform:translateY(-50%); width:2.4rem; height:2.4rem; border:0; border-radius:50%;
  background:transparent; color:var(--muted); font-size:1.05rem; cursor:pointer; line-height:1}
.pass-eye:hover, .pass-eye.is-on{background:var(--amber-soft); color:var(--amber-2)}
.field-hint{display:block; margin-top:.3rem; font-weight:400; font-size:.8rem; line-height:1.4; color:var(--faint)}
.forgot{margin:0}
.forgot a{font-weight:700}
.reg-card{margin:var(--s6) auto var(--s2); max-width:620px; scroll-margin-top:90px}
.reg-title{font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:1.7rem; margin:0}
.reg-sub{margin:var(--s2) 0 var(--s4)}
.reg-done{display:flex; gap:var(--s4); align-items:flex-start}
.reg-done h2{margin:0 0 var(--s2); font-size:1.25rem}
.reg-done p{margin:0 0 var(--s3)}
/* panel: control de registros */
.reg-ctl{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border-soft)}
.vote-state-sm strong{font-size:1.15rem}
.seg-2{grid-template-columns:repeat(2,1fr)}
.reg-links{display:flex; gap:var(--s2); flex-wrap:wrap; margin:var(--s3) 0 0}
.mail-test{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border-soft)}
td.row-actions{align-items:center}
td.row-actions form{margin:0}
@media(max-width:560px){ .seg-2{grid-template-columns:1fr} .reg-done{flex-direction:column} }

/* ---------- seguridad del voto + activar cuenta ---------- */
.sec-card{margin-bottom:var(--s8); border-color:rgba(53,201,122,.35)}
.sec-stats{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin:var(--s4) 0; font-size:.9rem; color:var(--muted)}
.sec-stats b{color:var(--text)}
.sec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s5)}
.table-sm td, .table-sm th{padding:.45rem .6rem; font-size:.85rem}
.tag-warn{background:rgba(245,179,1,.15); color:#ffcf7a}
.verify-card{margin:var(--s6) auto var(--s2); max-width:620px; border-color:rgba(245,179,1,.55); scroll-margin-top:90px}
.verify-card p{margin:var(--s3) 0}
.verify-pending{padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--amber-soft); color:var(--amber-2)}
.verify-form{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s3); margin-top:var(--s4)}
.verify-form label{min-width:0}
.verify-form input{width:100%; box-sizing:border-box}
.verify-form .btn{width:100%}
@media(min-width:640px){ .verify-form{grid-template-columns:minmax(0,1fr) auto; align-items:end} .verify-form .btn{width:auto} }
.code-input{font-family:Consolas,monospace; font-size:1.6rem !important; letter-spacing:.3em; text-align:center}
.verify-resend{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s4)}

.bulk-box{margin:var(--s5) 0; padding:var(--s4); border-radius:var(--r-md); border:1px dashed rgba(245,179,1,.5); background:rgba(245,179,1,.05)}
.bulk-box p{margin:var(--s2) 0}
.mail-row{flex-wrap:wrap; align-items:center; margin:var(--s2) 0}
.mail-row form{margin:0}
.bulk-box textarea{width:100%}
.tag-danger{background:rgba(244,102,74,.18); color:#ff8a73}
.tag-amber{background:rgba(245,179,1,.16); color:var(--amber, #f5b301)}

/* ---------- entrar con Google (votar) ---------- */
.g-form{margin:var(--s4) 0}
.g-btn{width:100%; font-size:1.05rem; padding:.95rem; background:#fff; color:#1f1f1f; border-color:#dadce0; cursor:pointer}
.g-btn:hover:not(:disabled){background:#f6f8fc}
.g-btn:disabled{opacity:.7; cursor:wait}
.inapp{margin:var(--s4) 0; display:flex; flex-direction:column; gap:var(--s2)}
.inapp-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s2) 0}
.inapp small{font-size:.8rem}

/* ---------- política de privacidad ---------- */
.legal h2{font-size:1.15rem; margin:var(--s8) 0 var(--s2)}
.legal p, .legal li{line-height:1.65; color:var(--text)}
.legal ul{padding-left:1.2rem; display:flex; flex-direction:column; gap:var(--s2)}
.legal a{color:var(--amber); text-decoration:underline}

/* ---------- auditoría: clave opcional del detector de VPN ---------- */
.pc-key{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s4)}
.pc-key .row-actions{display:flex; flex-wrap:wrap; gap:var(--s2)}
.pc-key input{flex:1; min-width:220px}

/* ---------- panel: foto que ya no está en el servidor ---------- */
.img-missing{display:grid; place-items:center; aspect-ratio:1; padding:var(--s3); text-align:center; font-size:.78rem; line-height:1.35; border:1px dashed var(--border); border-radius:var(--r-md); color:var(--amber-2); background:var(--amber-soft)}

/* ---------- restaurante inhabilitado para la votación (sigue vendiendo) ---------- */
.board-dq-tag{display:none; align-self:flex-start; margin-top:.15rem; background:rgba(244,102,74,.18); color:#ff8a73; font-weight:800;
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border-radius:var(--r-full)}
.board-row.is-dq{opacity:.75}
.board-row.is-dq .board-dq-tag{display:inline-block}
.board-row.is-dq .board-photo{filter:grayscale(1)}
.board-row.is-dq .bar{display:none}
.board-tv .board-dq-tag{font-size:clamp(.6rem,.9vw,1rem)}
.dq-note{margin:var(--s3) 0; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:rgba(244,102,74,.1);
  border:1px solid rgba(244,102,74,.35); color:#ffb4a3; font-size:.86rem; line-height:1.45}
.dq-note b{display:block; color:#ff8a73; margin-bottom:.2rem}
.dq-pill{display:inline-flex; align-items:center; gap:.35rem; background:rgba(244,102,74,.16); color:#ff8a73; font-weight:700;
  font-size:.8rem; padding:.35rem .7rem; border-radius:var(--r-full)}
.vote-card.is-dq .vote-media img, .card.is-dq .card-media img, .contest-card.is-dq img{filter:grayscale(.8)}
.vote-card .dq-note{font-size:.8rem; padding:var(--s2) var(--s3)}

/* ---------- conteo de votos reiniciado (sigue en el concurso: cuentan sus votos desde el reinicio) ---------- */
.board-reset-tag{display:none; align-self:flex-start; margin-top:.15rem; background:rgba(245,179,1,.16); color:#ffcf7a; font-weight:800;
  font-size:.72rem; padding:.12rem .5rem; border-radius:.5rem}
.board-row.is-reset .board-reset-tag{display:inline-block}
.board-tv .board-reset-tag{font-size:clamp(.6rem,.9vw,1rem)}
.reset-note{margin:var(--s3) 0; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:rgba(245,179,1,.08);
  border:1px solid rgba(245,179,1,.35); color:#ffe2a8; font-size:.86rem; line-height:1.45}
.reset-note b{display:block; color:#ffcf7a; margin-bottom:.2rem}
.vote-card .reset-note{font-size:.8rem; padding:var(--s2) var(--s3)}
.reset-when{display:flex; flex-direction:column; gap:var(--s3); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s4)}
.reset-when legend{font-weight:700; font-size:.9rem; padding:0 var(--s2)}
.reset-when input[type=datetime-local]{max-width:16rem}