/* ============================================================
   APP.CSS — Layout público (topnav, footer, flash, badges)
   Usado por: public/layout.php y todas sus vistas hijo
   ============================================================ */

:root {
  --rojo: #ff4d6d;
  --rojo-hov: #e53e63;
  --rojo-s: rgba(255,77,109,.10);
  --rojo-b: rgba(255,77,109,.22);
  --dorado: #ffb703;
  --dorado-s: rgba(255,183,3,.14);
  --dorado-b: rgba(255,183,3,.26);
  --neg: #171227;
  --neg-borde: rgba(82,89,140,.14);
  --texto: #171227;
  --texto-2: #6c6a86;
  --texto-3: #908fa8;
  --verde: #2A8A2A;
  --nav-h: 60px;
  --bn-h: 64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.page-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── Topnav ── */
.topnav{
  position:sticky;top:0;z-index:200;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:0 20px;
  background:rgba(255,255,255,.92);border-bottom:1px solid rgba(82,89,140,.08);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.tn-brand{ display:flex;align-items:center;min-width:0; }
.tn-brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--rojo),#7c3aed);
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.14em;
  box-shadow:0 6px 18px rgba(124,58,237,.20);
}
.tn-pills{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:0;overflow-x:auto;scrollbar-width:none;
}
.tn-pills::-webkit-scrollbar{display:none}
.tn-pill{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  font-size:12px;font-weight:700;border:1px solid var(--neg-borde);
  color:var(--texto-2);background:rgba(255,255,255,.86);white-space:nowrap;
  flex-shrink:0;transition:all .14s ease;
}
.tn-pill svg{width:11px;height:11px;flex-shrink:0}
.tn-pill:hover{ border-color:var(--rojo-b);color:var(--rojo);background:var(--rojo-s); }
.tn-pill-premios{ border-color:rgba(0,209,255,.22);color:#0f87a9;background:rgba(0,209,255,.08); }
.tn-pill-premios:hover{ border-color:rgba(0,209,255,.34);color:#086f8d;background:rgba(0,209,255,.14); }
.tn-pill-tickets{ border-color:rgba(124,58,237,.18);color:#6d43db;background:rgba(124,58,237,.08); }
.tn-pill-tickets:hover{ border-color:rgba(124,58,237,.28);color:#5b32c8;background:rgba(124,58,237,.12); }
.tn-pill-ganadores{ border-color:rgba(255,183,3,.22);color:#b77900;background:rgba(255,183,3,.10); }
.tn-pill-ganadores:hover{ border-color:rgba(255,183,3,.34);color:#9d6700;background:rgba(255,183,3,.16); }
.tn-pill-canal{ border-color:rgba(34,197,94,.20);color:#188f49;background:rgba(34,197,94,.08); }
.tn-pill-canal:hover{ border-color:rgba(34,197,94,.30);color:#0f7a3d;background:rgba(34,197,94,.14); }
.tn-pill-facebook{ border-color:rgba(59,130,246,.22);color:#2563eb;background:rgba(59,130,246,.08); }
.tn-pill-facebook:hover{ border-color:rgba(59,130,246,.34);color:#1d4ed8;background:rgba(59,130,246,.14); }
.tn-pill-tiktok{ border-color:rgba(17,24,39,.18);color:#374151;background:rgba(17,24,39,.06); }
.tn-pill-tiktok:hover{ border-color:rgba(17,24,39,.28);color:#111827;background:rgba(17,24,39,.10); }
.tn-pill.hot,.tn-pill.activo{
  background:var(--rojo);border-color:var(--rojo);color:#fff;
  box-shadow:0 2px 8px rgba(220,31,31,.3);
}
.tn-pill.hot:hover,.tn-pill.activo:hover{ background:var(--rojo-hov);border-color:var(--rojo-hov);color:#fff; }
.tn-right{ display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0; }
.tn-admin{
  font-size:11px;color:var(--dorado);font-weight:600;padding:6px 10px;
  border-radius:8px;border:1px solid var(--dorado-b);
  background:rgba(255,255,255,.88);white-space:nowrap;transition:background .14s;
}
.tn-admin:hover{background:var(--dorado-s)}

/* ── Bottom nav (móvil) ── */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bn-h);
  background:rgba(255,255,255,.97);border-top:1px solid var(--neg-borde);
  backdrop-filter:blur(10px);z-index:200;
  padding:0 4px env(safe-area-inset-bottom,0);
  align-items:center;justify-content:space-around;
}
.bn-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;flex:1;height:100%;padding:7px 2px;color:var(--texto-3);
  transition:color .14s;position:relative;-webkit-tap-highlight-color:transparent;
}
.bn-item svg{width:21px;height:21px;transition:transform .18s}
.bn-item span{font-size:9px;font-weight:500}
.bn-item.activo{color:var(--rojo)}
.bn-item.activo svg{transform:scale(1.1)}
.bn-item.activo::before{
  content:'';position:absolute;top:7px;width:34px;height:34px;
  border-radius:50%;background:var(--rojo-s);z-index:-1;
}

/* ── Flash messages ── */
.flash-ok{
  display:flex;align-items:center;gap:8px;
  background:rgba(42,138,42,.1);border:1px solid rgba(42,138,42,.25);
  border-radius:10px;padding:10px 14px;font-size:13px;color:#6ed26e;margin-bottom:8px;
}
.flash-err{
  display:flex;align-items:center;gap:8px;
  background:rgba(220,31,31,.08);border:1px solid rgba(220,31,31,.2);
  border-radius:10px;padding:10px 14px;font-size:13px;color:#f87171;margin-bottom:8px;
}
.flash-ok svg,.flash-err svg{width:15px;height:15px;flex-shrink:0}

/* ── Footer ── */
.pub-footer{
  background:#111;border-top:1px solid var(--neg-borde);padding:24px;text-align:center;
}
.pub-footer p{font-size:11px;color:var(--texto-3);line-height:1.8}
.pub-footer a{color:var(--texto-2);transition:color .14s}
.pub-footer a:hover{color:var(--rojo)}

/* ── Badges públicos ── */
.badge-rojo{display:inline-flex;align-items:center;gap:4px;background:var(--rojo-s);border:1px solid var(--rojo-b);color:var(--rojo);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
.badge-dorado{display:inline-flex;align-items:center;gap:4px;background:var(--dorado-s);border:1px solid var(--dorado-b);color:var(--dorado);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
.badge-verde{display:inline-flex;align-items:center;gap:4px;background:rgba(42,138,42,.12);border:1px solid rgba(42,138,42,.3);color:var(--verde);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}

@media (max-width:680px){
  .topnav{display:none}
  .bottom-nav{display:flex}
  .page-wrap{padding-bottom:var(--bn-h)}
}