/* ============================================================
   BLACKLINK V2 · Estilos premium (complemento de Tailwind)
   Variables oficiales + loader + animaciones + utilidades
   ============================================================ */

:root {
  --bl-brand:   #FF2D2D;
  --bl-brand-2: #E11414;
  --bl-bg:      #0B0B0B;
  --bl-card:    #121212;
  --bl-border:  rgba(255, 255, 255, .08);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

/* Fondo negro con glow rojo sutil en las esquinas */
body {
  background:
    radial-gradient(900px 520px at 85% -12%, rgba(255,45,45,.14), transparent 60%),
    radial-gradient(760px 460px at -12% 108%, rgba(225,20,20,.10), transparent 58%),
    var(--bl-bg);
  background-attachment: fixed;
}

/* --- Utilidades de marca ----------------------------------- */
.text-gradient {
  background: linear-gradient(90deg, var(--bl-brand), var(--bl-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-brand-gradient { background: linear-gradient(135deg, var(--bl-brand), var(--bl-brand-2)); }
.border-soft { border: 1px solid var(--bl-border); }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--bl-card);
  border: 1px solid var(--bl-border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7);
}

.btn-brand {
  background: linear-gradient(135deg, var(--bl-brand), var(--bl-brand-2));
  color: #ffffff;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-brand:hover { transform: translateY(-1px); box-shadow: 0 0 40px -10px rgba(255,45,45,.6); filter: brightness(1.05); }
.btn-brand:active { transform: translateY(0); }

/* --- LOADER premium ---------------------------------------- */
#bl-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem;
  background:
    radial-gradient(600px 400px at 50% 40%, rgba(255,45,45,.10), transparent 70%),
    var(--bl-bg);
  transition: opacity .55s ease, visibility .55s ease;
}
#bl-loader.hidden-loader { opacity: 0; visibility: hidden; }

/* Núcleo: ícono con doble anillo giratorio */
#bl-loader .bl-core {
  position: relative; width: 104px; height: 104px;
  display: grid; place-items: center;
}
#bl-loader .bl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--bl-brand-2) 82%, var(--bl-brand) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: bl-spin 1s linear infinite;
}
#bl-loader .bl-ring--2 {
  inset: 12px; opacity: .35;
  animation: bl-spin 1.6s linear infinite reverse;
}
#bl-loader .bl-core-icon {
  animation: bl-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255,45,45,.55));
}
#bl-loader .bl-word { opacity: .95; animation: bl-fade .8s ease both .1s; }

#bl-loader .loader-bar {
  width: min(220px, 62vw); height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.08); overflow: hidden; position: relative;
}
#bl-loader .loader-bar > span {
  position: absolute; inset: 0; width: 0;
  background: linear-gradient(90deg, var(--bl-brand-2), var(--bl-brand));
  border-radius: 999px; animation: bl-fill 2.4s cubic-bezier(.45,0,.15,1) forwards;
  box-shadow: 0 0 12px rgba(255,45,45,.6);
}
/* Brillo que recorre la barra */
#bl-loader .loader-bar::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: bl-shimmer 1.2s ease-in-out infinite;
}
@keyframes bl-fill    { to { width: 100%; } }
@keyframes bl-spin    { to { transform: rotate(360deg); } }
@keyframes bl-pulse   { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .82; } }
@keyframes bl-fade    { from { opacity: 0; transform: translateY(6px); } to { opacity: .95; transform: none; } }
@keyframes bl-shimmer { 0% { left: -40%; } 100% { left: 100%; } }

/* --- Animaciones de entrada -------------------------------- */
@keyframes bl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.animate-rise { animation: bl-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .4s; }

/* --- Scrollbar --------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bl-bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 999px; border: 2px solid var(--bl-bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* --- Calculadora: botón de nivel activo -------------------- */
.calc-level.is-active {
  border-color: var(--bl-brand);
  background: linear-gradient(135deg, var(--bl-brand), var(--bl-brand-2));
  color: #fff;
  box-shadow: 0 0 24px -8px rgba(255,45,45,.55);
}

/* Slider (range) en color de marca */
input[type="range"] { accent-color: var(--bl-brand); height: 6px; }

/* --- Formularios (inputs con ícono) ------------------------ */
.input-wrap { position: relative; }
.input-wrap > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #6b7280; font-size: .95rem; pointer-events: none;
}
.input-wrap input,
.input-wrap select {
  width: 100%; height: 46px; padding: 0 14px 0 42px;
  background: var(--bl-ink-800, #1A1A1A);
  border: 1px solid var(--bl-border);
  border-radius: .75rem; color: #fff; font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.input-wrap select { cursor: pointer; }
/* Cuando el campo lleva botón dentro (ej: ver contraseña) hay que dejarle
   sitio, o el texto escrito se mete por debajo del icono. */
.input-wrap:has(> button) input { padding-right: 46px; }
.input-wrap input::placeholder { color: #4b5563; }
.input-wrap input:focus,
.input-wrap select:focus {
  outline: none; border-color: var(--bl-brand);
  box-shadow: 0 0 0 3px rgba(255,45,45,.15);
}
/* Flecha del select */
.input-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280;
  transform: translateY(-70%) rotate(45deg); pointer-events: none; display: none;
}
.input-wrap:has(select)::after { display: block; }
.err { margin-top: 6px; font-size: .78rem; color: #f87171; }
.err::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; }

/* Opciones del select legibles en tema oscuro */
select option { background: #1A1A1A; color: #fff; }

/* ============================================================
   DASHBOARD · layout responsive (sidebar + menú inferior)
   ============================================================ */
.dash-avatar {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bl-brand), var(--bl-brand-2));
  color: #fff; font-weight: 700; font-size: .82rem;
}
.dash-avatar--sm { width: 32px; height: 32px; font-size: .72rem; }

/* Sidebar (escritorio) */
.dash-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  width: 260px; display: none; flex-direction: column;
  padding: 1.25rem 1rem;
  background: #101010; border-right: 1px solid var(--bl-border);
}
.dash-navlink {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .85rem; border-radius: .8rem;
  color: #9ca3af; font-size: .92rem; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.dash-navlink:hover { background: rgba(255,255,255,.04); color: #fff; }
.dash-navlink.is-active {
  background: rgba(255,255,255,.055); color: #fff; position: relative;
}
.dash-navlink.is-active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--bl-brand);
}
.dash-navlink.is-active i { color: var(--bl-brand); }

/* Top bar (móvil) */
.dash-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.1rem;
  background: rgba(11,11,11,.8); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bl-border);
}

/* Contenido principal */
.dash-main { padding: 1.1rem; padding-bottom: 6rem; }

/* Menú inferior (móvil) */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around;
  padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  background: rgba(18,18,18,.92); backdrop-filter: blur(16px);
  border-top: 1px solid var(--bl-border);
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1; padding: .35rem 0; border-radius: .6rem;
  color: #6b7280; font-size: .66rem; font-weight: 600;
}
.bottom-nav-item i { font-size: 1.05rem; }
.bottom-nav-item.is-active { color: var(--bl-brand); }

/* Página del flujo (l.php / p.php) — pantalla completa branded */
.flow-screen {
  min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background-size: cover; background-position: center;
}
.flow-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.82)); }
.flow-card { position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.flow-logo { max-height: 64px; max-width: 180px; object-fit: contain; }
.flow-title { font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.2; }
.flow-msg { font-size: .9rem; color: rgba(255,255,255,.82); }
.flow-file {
  display: flex; align-items: center; gap: .85rem; width: 100%; padding: 1rem 1.15rem;
  border-radius: 1.1rem; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px); text-align: left;
}
.flow-fileico { width: 46px; height: 46px; flex: none; border-radius: .8rem; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 1.2rem; }
.flow-btn { width: 100%; padding: 1rem; border-radius: 1rem; font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--brand); box-shadow: 0 14px 30px -10px var(--brand); transition: filter .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.flow-btn:hover { filter: brightness(1.08); }
/* Sin subrayado: son enlaces por dentro, pero se ven y se usan como botones
   (con el subrayado parecían un enlace a medio terminar). */
.flow-btn, .flow-social, .flow-gatebtn { text-decoration: none; }
.flow-socials { display: flex; gap: .7rem; }
.flow-social { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; transition: background .15s ease; }
.flow-social:hover { background: var(--brand); }
.flow-mark { font-size: .7rem; color: rgba(255,255,255,.45); margin-top: .4rem; }

/* Notificaciones en vivo (toasts) */
.bl-toasts { position: fixed; z-index: 9990; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 24px)); pointer-events: none; }
.bl-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(20,20,22,.92); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.6), 0 0 26px -6px rgba(230,30,45,.35);
  transform: translateY(-16px); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease; }
.bl-toast.in { transform: translateY(0); opacity: 1; }
.bl-toast-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.05rem; background: rgba(255,45,45,.14); color: var(--bl-brand); }
.bl-toast.earn .bl-toast-ico { background: rgba(34,197,94,.16); color: #22c55e; }
.bl-toast-body { min-width: 0; flex: 1; }
.bl-toast-title { font-size: .86rem; font-weight: 800; color: #fff; }
.bl-toast-msg { font-size: .74rem; color: #9aa3b2; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes bellRing { 0%,100%{transform:rotate(0)} 20%{transform:rotate(16deg)} 40%{transform:rotate(-14deg)} 60%{transform:rotate(9deg)} 80%{transform:rotate(-5deg)} }
.notif-bell.ring { animation: bellRing .7s ease; }

/* Kit de promoción · botones de compartir */
.promo-share { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #fff; font-size: .7rem; font-weight: 600;
  text-decoration: none; transition: border-color .15s ease, transform .12s ease; }
.promo-share:hover { border-color: var(--pc); transform: translateY(-2px); }
.promo-share i { font-size: 1.2rem; color: var(--pc); }

/* Tutorial de bienvenida (onboarding) */
.bl-tour { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(120% 120% at 50% 20%, rgba(20,20,22,.86), rgba(6,6,7,.92));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.bl-tour.is-on { opacity: 1; visibility: visible; }
.bl-tour.is-hidden { opacity: 0; visibility: hidden; }
.bl-tour-card { position: relative; width: 100%; max-width: 380px; border-radius: 22px; padding: 30px 24px 22px;
  background: linear-gradient(180deg, rgba(30,30,34,.96), rgba(16,16,18,.98));
  border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,45,45,.06);
  text-align: center; overflow: hidden; }
.bl-tour-card::before { content: ""; position: absolute; top: -60%; left: 50%; width: 260px; height: 260px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,45,45,.22), transparent 65%); pointer-events: none; }
.bl-tour-skip { position: absolute; top: 12px; right: 14px; z-index: 2; background: none; border: 0; cursor: pointer;
  color: #8a8a92; font-size: .74rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; transition: color .15s, background .15s; }
.bl-tour-skip:hover { color: #fff; background: rgba(255,255,255,.06); }
.bl-tour-slide { display: none; animation: blTourIn .4s cubic-bezier(.2,.7,.3,1) both; }
.bl-tour-slide.is-active { display: block; }
.bl-tour-icon { width: 84px; height: 84px; margin: 6px auto 18px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: #fff; background: linear-gradient(145deg, #FF2D2D, #B3121E);
  box-shadow: 0 16px 40px -8px rgba(230,30,45,.55); }
.bl-tour-title { font-size: 1.28rem; font-weight: 800; color: #fff; margin: 0 0 8px; line-height: 1.2; }
.bl-tour-text { font-size: .9rem; line-height: 1.55; color: #b7b7bf; margin: 0 auto; max-width: 300px; }
.bl-tour-text b { color: #fff; font-weight: 700; }
.bl-tour-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0 18px; }
.bl-tour-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); cursor: pointer; transition: all .2s ease; }
.bl-tour-dot.is-active { width: 22px; border-radius: 4px; background: #FF2D2D; }
.bl-tour-nav { display: flex; align-items: center; gap: 12px; }
.bl-tour-back { flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); color: #cfcfd6; cursor: pointer; transition: background .15s; }
.bl-tour-back:hover { background: rgba(255,255,255,.1); }
.bl-tour-next { flex: 1; height: 46px; border-radius: 14px; font-weight: 700; font-size: .95rem; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@keyframes blTourIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Ruleta de la suerte */
.wheel-card { overflow-x: clip; }              /* el resplandor nunca genera scroll lateral en móvil */
.wheel-wrap { position: relative; width: min(340px, 78vw); aspect-ratio: 1; margin: 4px auto 0; }
.wheel-glow { position: absolute; inset: -8%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,45,45,.22), transparent 62%); filter: blur(6px); animation: wheelPulse 3.2s ease-in-out infinite; }
@keyframes wheelPulse { 0%,100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.wheel-spin { position: absolute; inset: 0; z-index: 1; will-change: transform; transform: rotate(0deg);
  border-radius: 50%; box-shadow: 0 0 0 7px #14141a, 0 0 0 10px rgba(255,255,255,.06), 0 0 0 14px rgba(255,45,45,.3), 0 26px 60px -18px rgba(0,0,0,.85); }
.wheel-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 22px; border: 0; cursor: pointer;
  border-radius: 18px; font-size: 1.02rem; font-weight: 800; color: #fff; letter-spacing: .01em;
  background: linear-gradient(145deg, #ff3b3b, #c11414); box-shadow: 0 12px 30px -8px rgba(230,30,45,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease, box-shadow .2s ease; }
.wheel-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 40px -8px rgba(230,30,45,.7), inset 0 1px 0 rgba(255,255,255,.25); }
.wheel-cta:active:not(:disabled) { transform: translateY(0) scale(.98); }
.wheel-cta:disabled { opacity: .4; cursor: not-allowed; }
.wheel-cta i { animation: ctaBolt 1.6s ease-in-out infinite; }
@keyframes ctaBolt { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.wheel-spin--legacy { box-shadow: 0 0 0 8px rgba(255,255,255,.04), 0 0 0 12px rgba(255,45,45,.25), 0 26px 60px -18px rgba(0,0,0,.8); }

/* Ver todas (panel de notificaciones) */
.notif-all { display:block; text-align:center; padding:10px; font-size:12px; font-weight:600; color:#FF2D2D;
  border-top:1px solid rgba(255,255,255,.06); text-decoration:none; }
.notif-all:hover { background:rgba(255,45,45,.06); }
.notif-all i { font-size:10px; margin-left:3px; }

/* Festejo de meta cumplida */
.goal-party { display:inline-block; animation: goalBounce 1.1s ease-in-out infinite; }
@keyframes goalBounce { 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-6px) rotate(6deg);} }

/* Búsqueda global (command palette) */
.gsearch-trigger { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 14px; padding: 9px 12px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); color: #8a8a92;
  font-size: .82rem; cursor: pointer; transition: border-color .15s, color .15s; }
.gsearch-trigger:hover { border-color: rgba(255,45,45,.4); color: #cfcfd6; }
.gsearch-trigger span { flex: 1; text-align: left; }
.gsearch-trigger kbd { font-family: inherit; font-size: .7rem; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 1px 6px; color: #9a9aa2; }
.gsearch { position: fixed; inset: 0; z-index: 9995; display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px;
  background: rgba(4,4,6,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.gsearch.is-on { opacity: 1; visibility: visible; }
.gsearch-box { width: 100%; max-width: 560px; border-radius: 18px; overflow: hidden;
  background: #16161a; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px -20px rgba(0,0,0,.85);
  transform: translateY(-10px); transition: transform .2s ease; }
.gsearch.is-on .gsearch-box { transform: none; }
.gsearch-inputwrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.gsearch-lens { color: #FF2D2D; font-size: 1rem; }
.gsearch-inputwrap input { flex: 1; background: none; border: 0; outline: none; color: #fff; font-size: 1rem; }
.gsearch-inputwrap input::placeholder { color: #6b6b73; }
.gsearch-x { background: none; border: 0; color: #7a7a82; cursor: pointer; padding: 4px; border-radius: 8px; }
.gsearch-x:hover { color: #fff; background: rgba(255,255,255,.06); }
.gsearch-results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.gsearch-hint { padding: 22px 12px; text-align: center; color: #7a7a82; font-size: .85rem; }
.gsearch-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; }
.gsearch-item:hover, .gsearch-item.is-active { background: rgba(255,45,45,.1); }
.gsearch-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: #FF2D2D; }
.gsearch-txt { min-width: 0; flex: 1; }
.gsearch-name { display: block; font-weight: 600; color: #fff; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-sub { display: block; font-size: .76rem; color: #8a8a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-bal { flex: none; font-weight: 700; color: #22C55E; font-size: .82rem; }
.gsearch-code { flex: none; font-family: ui-monospace, monospace; font-size: .72rem; color: #9a9aa2; background: rgba(255,255,255,.05); padding: 2px 7px; border-radius: 6px; }

/* Menú agrupado por categorías */
.dash-navgroup { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #6b6b73; padding: 13px 12px 4px; }
.dock-sheet-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #7a7a82; padding: 13px 16px 5px; }
.dock-sheet-scroll { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Soporte · burbujas de chat */
.chat-thread { max-height: 60vh; overflow-y: auto; }
.chat-bubble { max-width: 82%; border-radius: 16px; padding: 9px 13px; }
.chat-me { background: linear-gradient(145deg, #ff3b3b, #c11414); color: #fff; border-bottom-right-radius: 5px; }
.chat-them { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: #e6e6ea; border-bottom-left-radius: 5px; }
.chat-input { max-height: 140px; }

/* Centro de ayuda (FAQ) */
.faq-item > summary { list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item[open] > summary { color: #fff; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: #FF2D2D; }
.faq-chevron { transition: transform .2s ease, color .2s ease; }
.faq-item[open] .faq-a { animation: faqIn .25s ease both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Admin · filas de premios de la ruleta */
.seg-select { flex: none; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25);
  color: #e6e6ea; font-size: .82rem; font-weight: 600; padding: 8px 8px; cursor: pointer; }
.seg-row .seg-boost { display: none; }
.seg-row.is-boost .seg-money { display: none; }
.seg-row.is-boost .seg-boost { display: flex; }
.wheel-svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wheel-pointer { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 40px; line-height: 1; color: #FF2D2D; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.wheel-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #26262c, #0d0d10); border: 3px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.6); }
.wheel-result { position: fixed; inset: 0; z-index: 9991; display: flex; align-items: center; justify-content: center; padding: 22px;
  background: radial-gradient(120% 120% at 50% 25%, rgba(20,20,22,.82), rgba(6,6,7,.92)); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.wheel-result.is-on { opacity: 1; visibility: visible; }
.wheel-result-card { width: 100%; max-width: 340px; border-radius: 22px; padding: 30px 24px 22px; text-align: center;
  background: linear-gradient(180deg, rgba(30,30,34,.96), rgba(16,16,18,.98)); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); animation: blTourIn .4s cubic-bezier(.2,.7,.3,1) both; }
.wheel-result.is-on .wheel-result-card #wr-emoji { animation: wrPop .5s cubic-bezier(.2,.75,.3,1) both; }
@keyframes wrPop { from { transform: scale(.3) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Verificador de suscripción (gate) del flujo */
.flow-gate { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 2px 0 6px; }
.flow-gatebtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.flow-gatebtn:hover { border-color: var(--gc); }
.flow-gateico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem;
  background: color-mix(in srgb, var(--gc) 22%, transparent); color: var(--gc); }
.flow-gatetxt { flex: 1; text-align: left; }
.flow-gatechk { flex: none; font-size: .85rem; color: rgba(255,255,255,.4); white-space: nowrap; }
.flow-gatebtn.checking { border-color: var(--gc); }
.flow-gatebtn.verified { border-color: #22c55e; background: rgba(34,197,94,.1); pointer-events: none; }
.flow-gatebtn.verified .flow-gateico { background: rgba(34,197,94,.18); color: #22c55e; }
.flow-gatebtn.verified .flow-gatechk { color: #22c55e; }
.flow-timer { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.7); }

/* Vista previa de la página de descarga (personalización) */
.dl-preview {
  position: relative; overflow: hidden; border-radius: 1.25rem; min-height: 460px;
  background-size: cover; background-position: center; border: 1px solid var(--bl-border);
}
.dl-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.78)); }
.dl-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; padding: 2.2rem 1.5rem; }
.dl-logo { max-height: 56px; max-width: 160px; object-fit: contain; }
.dl-title { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1.2; }
.dl-message { font-size: .85rem; color: rgba(255,255,255,.8); max-width: 320px; }
.dl-filecard {
  display: flex; align-items: center; gap: .75rem; width: 100%; max-width: 320px;
  padding: .9rem 1rem; border-radius: 1rem; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px);
}
.dl-fileico { width: 40px; height: 40px; flex: none; border-radius: .7rem; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 1.05rem; }
.dl-btn { width: 100%; max-width: 320px; padding: .85rem; border-radius: .9rem; font-weight: 700; color: #fff; background: var(--brand); box-shadow: 0 12px 26px -10px var(--brand); transition: filter .15s ease; }
.dl-btn:hover { filter: brightness(1.08); }
.dl-socials { display: flex; gap: .6rem; margin-top: .3rem; }
.dl-social { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font-size: .95rem; transition: background .15s ease; }
.dl-social:hover { background: var(--brand); }

/* Selector de color */
.bl-color { width: 46px; height: 30px; border: none; background: none; border-radius: 8px; cursor: pointer; padding: 0; }
.bl-color::-webkit-color-swatch-wrapper { padding: 0; }
.bl-color::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.25); border-radius: 8px; }

/* Modal (crear/editar enlace) */
.bl-modal {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.62); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.bl-modal.open { opacity: 1; visibility: visible; }
.bl-modal-card {
  width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto;
  background: #141416; border: 1px solid var(--bl-border); border-radius: 1.25rem; padding: 1.5rem;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.85);
  transform: translateY(12px) scale(.98); transition: transform .2s ease;
}
.bl-modal.open .bl-modal-card { transform: none; }

/* Miniatura del enlace */
.link-thumb {
  width: 52px; height: 52px; flex: none; border-radius: .8rem; overflow: hidden;
  display: grid; place-items: center; background: rgba(255,45,45,.10); color: var(--bl-brand); font-size: 1.1rem;
}
.link-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Notificaciones */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute; top: -5px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--bl-brand); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px #101010;
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 300px; max-width: 86vw;
  background: #141416; border: 1px solid var(--bl-border); border-radius: 14px;
  box-shadow: 0 22px 55px -14px rgba(0,0,0,.85); z-index: 60; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.notif-panel.open { opacity: 1; visibility: visible; transform: none; }
.notif-panel--left { right: auto; left: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--bl-border); font-size: .85rem; font-weight: 700; color: #fff; }
.notif-readall { font-size: .72rem; font-weight: 600; color: var(--bl-brand); }
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: left; }
.notif-item.is-unread { background: rgba(255,45,45,.06); }
.notif-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255,45,45,.12); color: var(--bl-brand); }
.notif-title { font-size: .82rem; font-weight: 700; color: #fff; }
.notif-msg { font-size: .75rem; color: #9ca3af; margin-top: 1px; }
.notif-time { font-size: .68rem; color: #6b7280; margin-top: 3px; }
.notif-empty { padding: 26px 14px; text-align: center; font-size: .8rem; color: #6b7280; }

/* Tarjeta de métrica del dashboard (glass) */
.stat-card {
  position: relative;
  background: rgba(20, 20, 22, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.15rem; padding: 1.15rem 1.25rem;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 12px 34px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Selector de periodo (segmentado) */
.seg { display: flex; width: 100%; gap: 3px; padding: 4px;
  background: var(--bl-card); border: 1px solid var(--bl-border); border-radius: .9rem; }
.seg button {
  flex: 1; padding: .5rem .3rem; border-radius: .65rem;
  font-size: .74rem; font-weight: 700; color: #9ca3af; white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg button.is-active {
  background: linear-gradient(135deg, var(--bl-brand), var(--bl-brand-2));
  color: #fff; box-shadow: 0 8px 18px -10px rgba(255,45,45,.7);
}

/* Badge de tendencia */
.trend { display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.trend.up   { color: #4ade80; background: rgba(74,222,128,.12); }
.trend.down { color: #f87171; background: rgba(248,113,113,.12); }
.trend.flat { color: #9ca3af; background: rgba(255,255,255,.06); }

/* Toggle de la gráfica */
.chart-toggle { display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.04); border-radius: .6rem; }
.chart-toggle button {
  padding: .3rem .7rem; border-radius: .45rem; font-size: .72rem; font-weight: 700; color: #9ca3af;
}
.chart-toggle button.is-active { background: rgba(255,45,45,.15); color: var(--bl-brand); }

/* ---- Refinamiento premium de tarjetas ---- */
.stat-card { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.stat-card:hover {
  border-color: rgba(255,45,45,.28);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.82), 0 0 0 1px rgba(255,45,45,.10), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Aparición escalonada del bento */
@keyframes bl-rise2 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.bento > * { min-width: 0; animation: bl-rise2 .55s cubic-bezier(.2,.7,.2,1) both; }   /* min-width:0 evita el desborde del grid en móvil */
.heat-scroll { max-width: 100%; }

/* --- Optimización móvil: menos carga de GPU en Android (blur pesa mucho) --- */
@media (max-width: 820px) {
  .gsearch, .wheel-result, .bl-tour, .bl-splash { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .gsearch { background: rgba(4,4,6,.92); }
  .wheel-result, .bl-tour { background: rgba(6,6,7,.94); }
  .wheel-glow { animation: none; opacity: .5; }        /* sin pulso constante en móvil */
  .bento > * { animation: none; }                       /* sin entrada escalonada (menos jank al cargar) */
}
/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.bento > *:nth-child(1){animation-delay:.03s}   .bento > *:nth-child(2){animation-delay:.07s}
.bento > *:nth-child(3){animation-delay:.11s}   .bento > *:nth-child(4){animation-delay:.15s}
.bento > *:nth-child(5){animation-delay:.19s}   .bento > *:nth-child(6){animation-delay:.23s}
.bento > *:nth-child(7){animation-delay:.27s}   .bento > *:nth-child(8){animation-delay:.31s}
.bento > *:nth-child(9){animation-delay:.35s}   .bento > *:nth-child(10){animation-delay:.39s}
.bento > *:nth-child(11){animation-delay:.43s}  .bento > *:nth-child(12){animation-delay:.47s}
.bento > *:nth-child(13){animation-delay:.51s}  .bento > *:nth-child(14){animation-delay:.55s}

/* Encabezado de sección con acento */
.sec-title { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 1rem; }
.sec-title::before {
  content: ""; width: 4px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, var(--bl-brand), var(--bl-brand-2));
}
.sec-title h2 { font-size: .95rem; font-weight: 700; color: #e5e7eb; letter-spacing: .01em; }
.sec-title .spacer { flex: 1; }

/* Tarjeta hero de saldo */
.balance-hero { position: relative; overflow: hidden; border: 0 !important;
  background: linear-gradient(135deg, #FF2D2D, #C21212); color: #fff; }
.balance-hero .halo { position: absolute; pointer-events: none; }
.balance-hero .halo-1 { top: -46px; right: -34px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.12); }
.balance-hero .halo-2 { bottom: -60px; left: -20px; width: 130px; height: 130px; border-radius: 50%; background: rgba(0,0,0,.10); }

/* ===== Retiros · hero de lujo ===== */
.balance-hero.hero-lux {
  padding: 1.7rem 1.6rem;
  background:
    radial-gradient(130% 150% at 88% -25%, #ff6060 0%, transparent 52%),
    linear-gradient(135deg, #FF2D2D 0%, #A70E0E 100%);
  box-shadow: 0 30px 64px -26px rgba(230,30,45,.62), inset 0 1px 0 rgba(255,255,255,.16);
}
.balance-hero.hero-lux::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  background-size: 250% 100%; background-repeat: no-repeat;
  animation: heroShine 6.5s ease-in-out infinite;
}
@keyframes heroShine { 0%, 55% { background-position: 165% 0; } 100% { background-position: -65% 0; } }
.balance-hero.hero-lux .halo-1 { top: -64px; right: -44px; width: 220px; height: 220px; background: rgba(255,255,255,.15); }
.balance-hero.hero-lux .halo-2 { bottom: -74px; left: -34px; width: 160px; height: 160px; background: rgba(0,0,0,.13); }
.hero-amount {
  font-size: clamp(2.7rem, 13vw, 3.5rem); letter-spacing: -.02em;
  text-shadow: 0 6px 26px rgba(0,0,0,.28);
}
.hero-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
  padding: .3rem .7rem; border-radius: 999px; font-weight: 600; font-size: .72rem;
}
/* Nombres borrosos (intriga del Top de Hoy fuera de horario) */
.blur-name { filter: blur(6px); -webkit-filter: blur(6px); user-select: none; pointer-events: none; }

/* Tile de métrica (ganancias / clics del periodo) */
.metric-ico {
  width: 36px; height: 36px; border-radius: .65rem; display: grid; place-items: center;
  background: rgba(255,45,45,.12); color: var(--bl-brand); font-size: .85rem;
}
.metric-val { font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1.05; }
.metric-label { font-size: .72rem; color: #9ca3af; }

/* Fila compacta de 3 métricas (Ganancias · Clics · eCPM) */
.metrics-3 .stat-card { padding: 1rem .75rem; }
.metrics-3 .metric-ico { width: 30px; height: 30px; font-size: .72rem; border-radius: .55rem; }
.metrics-3 .metric-val { font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
.metrics-3 .metric-label { font-size: .68rem; margin-top: .35rem; }
.metrics-3 .trend { font-size: .58rem; padding: 1px 5px; gap: 2px; }
@media (min-width: 640px) {
  .metrics-3 .metric-val { font-size: 1.6rem; }
  .metrics-3 .stat-card { padding: 1.15rem 1.25rem; }
  .metrics-3 .metric-ico { width: 36px; height: 36px; font-size: .85rem; }
}

/* Accesos rápidos */
.qa {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.05rem .5rem; border-radius: 1rem;
  background: rgba(255,255,255,.02); border: 1px solid var(--bl-border);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.qa:hover { border-color: rgba(255,45,45,.35); background: rgba(255,45,45,.06); transform: translateY(-3px); }
.qa-ico {
  width: 42px; height: 42px; border-radius: .8rem; display: grid; place-items: center;
  background: rgba(255,45,45,.12); color: var(--bl-brand); font-size: 1rem;
}
.qa-label { font-size: .72rem; font-weight: 600; color: #cbd5e1; }

/* Racha diaria (7 segmentos) */
.streak-track { display: flex; gap: 4px; }
.streak-seg { flex: 1; height: 9px; border-radius: 5px; background: rgba(255,255,255,.10); transition: background .2s ease; }
.streak-seg.is-met  { background: linear-gradient(90deg, #22C55E, #16A34A); box-shadow: 0 0 8px rgba(34,197,94,.45); }
.streak-seg.is-miss { background: rgba(255,255,255,.10); }
/* Días de ANTES del último cambio de rango: no cuentan ni a favor ni en
   contra, eran de otro nivel. Se ven apagados y a rayas para que se note
   que no son un fallo. */
.streak-seg.is-off {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3px, transparent 3px 6px);
  opacity: .55;
}

/* Camino de niveles (página Niveles) */
.path-node {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.1rem; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: #6b7280; transition: transform .2s ease;
}
.path-node.current { transform: scale(1.12); }
.path-line { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.10); margin: 0 6px 22px; }
.rule-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border-radius: 1rem;
  background: rgba(255,255,255,.02); border: 1px solid var(--bl-border); }
.rule-ico { width: 38px; height: 38px; border-radius: .7rem; display: grid; place-items: center; font-size: .95rem; }

/* Insignia de nivel */
.level-badge { width: 48px; height: 48px; border-radius: .85rem; display: grid; place-items: center;
  font-size: 1.25rem; background: rgba(255,255,255,.04); border: 1px solid var(--bl-border); }

/* Barra de progreso genérica */
.bl-progress { height: 10px; width: 100%; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bl-progress > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bl-brand-2), var(--bl-brand)); box-shadow: 0 0 12px rgba(255,45,45,.5); }
.stat-card .stat-ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: .7rem; background: rgba(255,45,45,.12); color: var(--bl-brand);
}

/* Escritorio: muestra sidebar, oculta chrome móvil */
@media (min-width: 1024px) {
  .dash-sidebar { display: flex; }
  .dash-topbar  { display: none; }
  .bottom-nav   { display: none; }
  .dash-main    { margin-left: 260px; padding: 2rem 2.5rem; padding-bottom: 2.5rem; }
}

/* ===== Dock flotante premium del admin (móvil) ===== */
@keyframes dockRise {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.admin-dock {
  position: fixed; z-index: 50;
  left: 50%; transform: translateX(-50%);
  bottom: calc(.9rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .3rem;
  padding: .5rem .55rem;
  border-radius: 999px;
  background: rgba(20,20,22,.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 30px rgba(230,30,45,.20), inset 0 1px 0 rgba(255,255,255,.14);
  animation: dockRise .55s cubic-bezier(.2,.75,.3,1) both;
}
.dock-item {
  position: relative; z-index: 2; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  color: #9ca3af; font-size: 1.12rem;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease,
              transform .24s cubic-bezier(.2,.75,.3,1);
}
.dock-item:active { transform: scale(.86); }
.dock-item.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--bl-brand), #b3121e);
  transform: translateY(-7px) scale(1.06);
  animation: dockPulse 2.6s ease-in-out infinite;
}
.dock-item.is-active:active { transform: translateY(-7px) scale(.98); }
@keyframes dockPulse {
  0%, 100% { box-shadow: 0 9px 22px rgba(230,30,45,.5); }
  50%      { box-shadow: 0 11px 32px rgba(230,30,45,.8); }
}
/* Brillo que recorre el vidrio del dock */
.admin-dock::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%);
  background-size: 220% 100%; background-repeat: no-repeat;
  animation: dockShine 6s ease-in-out infinite;
}
@keyframes dockShine {
  0%, 55% { background-position: 145% 0; }
  100%    { background-position: -45% 0; }
}
/* Etiqueta flotante del ítem activo */
.dock-label {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap; font-size: .62rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: linear-gradient(145deg, var(--bl-brand), #b3121e);
  padding: 3px 9px; border-radius: 999px;
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
  box-shadow: 0 6px 16px rgba(230,30,45,.45);
}
.dock-item.is-active .dock-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-label::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #b3121e;
}
.dock-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--bl-brand);
  color: #fff; font-size: .6rem; font-weight: 700; line-height: 1;
  border: 2px solid #141416;
}
.dock-item.is-active .dock-badge { border-color: #b3121e; }
.dock-dot {
  position: absolute; top: 7px; right: 9px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--bl-brand); border: 2px solid #141416;
}

/* Hoja "más" que emerge del dock */
.dock-sheet-backdrop {
  position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.dock-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.dock-sheet {
  position: fixed; z-index: 51;
  left: 50%; transform: translateX(-50%) translateY(18px);
  bottom: calc(5.4rem + env(safe-area-inset-bottom));
  width: min(320px, calc(100vw - 2rem));
  padding: .55rem;
  border-radius: 1.2rem;
  background: rgba(20,20,22,.94);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 30px rgba(230,30,45,.15);
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease;
}
.dock-sheet.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dock-sheet-grip {
  width: 38px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.18); margin: .1rem auto .55rem;
}
.dock-sheet { max-height: 72vh; overflow-y: auto; }
.dock-sheet-title {
  padding: .1rem .55rem .5rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #6b7280;
}
.dock-sheet-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .6rem; border-radius: .85rem;
  color: #cbd0d8; font-size: .92rem; font-weight: 500;
  opacity: 0; transform: translateY(7px);
  transition: background .15s ease, color .15s ease, opacity .3s ease, transform .3s ease;
}
.dock-sheet.is-open .dock-sheet-item { opacity: 1; transform: none; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(1){ transition-delay: .04s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(2){ transition-delay: .07s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(3){ transition-delay: .10s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(4){ transition-delay: .13s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(5){ transition-delay: .16s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(6){ transition-delay: .19s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(7){ transition-delay: .22s; }
.dock-sheet.is-open .dock-sheet-item:nth-of-type(8){ transition-delay: .25s; }
.dock-sheet-item:hover, .dock-sheet-item:active { background: rgba(255,255,255,.05); color: #fff; }
.dock-sheet-item.is-active { background: rgba(230,30,45,.12); color: #fff; }
.dock-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: .65rem;
  background: rgba(255,255,255,.06); color: #e5e7eb; font-size: .9rem;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.dock-sheet-item:hover .dock-chip, .dock-sheet-item:active .dock-chip { background: rgba(230,30,45,.18); color: #fff; }
.dock-sheet-item.is-active .dock-chip {
  background: linear-gradient(145deg, var(--bl-brand), #b3121e); color: #fff;
  box-shadow: 0 4px 12px rgba(230,30,45,.4);
}
.dock-chev { font-size: .7rem; color: #565c66; }
.dock-sheet-item.is-active .dock-chev { color: var(--bl-brand); }
.dock-divider { height: 1px; margin: .35rem .5rem; background: rgba(255,255,255,.07); }
.dock-sheet-item--danger { color: #fca5a5; }
.dock-sheet-item--danger .dock-chip { background: rgba(230,30,45,.14); color: #f87171; }
.dock-sheet-item--danger:hover, .dock-sheet-item--danger:active { background: rgba(230,30,45,.12); color: #fff; }
.dock-sheet-item--danger:hover .dock-chip, .dock-sheet-item--danger:active .dock-chip {
  background: linear-gradient(145deg, var(--bl-brand), #b3121e); color: #fff;
}

/* ===== Bola deslizable (glider) estilo WhatsApp ===== */
.dock-glider {
  position: absolute; top: 50%; left: 0; z-index: 0;
  width: 46px; height: 46px; margin-top: -23px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--bl-brand), #b3121e);
  transform: translateX(0); transform-origin: center;
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), width .3s ease;
  animation: dockPulse 2.6s ease-in-out infinite;
  opacity: 0; pointer-events: none;
}
.admin-dock.has-glider .dock-glider { opacity: 1; }
.admin-dock.is-dragging .dock-glider { transition: transform .07s linear, width .12s ease; animation: none; }
/* Con glider activo, el ítem ya no pinta su propia burbuja: la bola manda */
.admin-dock.has-glider .dock-item.is-active {
  background: transparent; transform: none; animation: none; box-shadow: none;
}
.admin-dock.has-glider .dock-item.is-on { color: #fff; }
.admin-dock.has-glider .dock-item.is-on .dock-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.admin-dock.has-glider .dock-item.is-active:not(.is-on) { color: #9ca3af; }
.admin-dock.has-glider .dock-item.is-active:not(.is-on) .dock-label {
  opacity: 0; transform: translateX(-50%) translateY(6px);
}

@media (min-width: 1024px) {
  .admin-dock, .dock-sheet, .dock-sheet-backdrop { display: none; }
}

/* ---- Raspadita: el símbolo salta al descubrirse ---- */
.rs-pop { animation: rsPop .45s cubic-bezier(.2,.75,.3,1) both; }
@keyframes rsPop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rs-pop { animation: none; } }

/* ---- Reloj de la plataforma -----------------------------------------
 * Vidrio oscuro + acento de marca. El punto late para que se note EN VIVO.
 * Los dígitos van en tabular-nums y con ancho fijo: si no, el número baila
 * cada segundo (el "1" es más angosto que el "8") y se ve barato.
 * ------------------------------------------------------------------ */
.bl-clock-card{
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem .95rem .6rem .8rem; border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,45,45,.10), rgba(255,255,255,.02) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px -12px rgba(0,0,0,.9);
}
.bl-clock-dot{
  width:8px; height:8px; border-radius:50%; flex:none; background:#FF2D2D;
  box-shadow:0 0 0 0 rgba(255,45,45,.6); animation:blClockPulse 2s ease-out infinite;
}
@keyframes blClockPulse{
  0%   { box-shadow:0 0 0 0 rgba(255,45,45,.55); }
  70%  { box-shadow:0 0 0 9px rgba(255,45,45,0); }
  100% { box-shadow:0 0 0 0 rgba(255,45,45,0); }
}
.bl-clock-body{ line-height:1.15; }
.bl-clock-time{
  display:flex; align-items:baseline; gap:1px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  font-size:1.35rem; font-weight:800; color:#fff; letter-spacing:.01em;
}
.bl-clock-time > span{ display:inline-block; min-width:1.28ch; text-align:center; }
.bl-clock-sep{ opacity:.7; font-weight:700; color:#FF2D2D; margin:0 1px; animation:blClockBlink 2s ease-in-out infinite; }
@keyframes blClockBlink{ 50%{ opacity:.25; } }
.bl-clock-ampm{
  margin-left:.32rem; font-size:.62rem; font-weight:800; font-style:normal;
  letter-spacing:.08em; color:#FF2D2D; align-self:center;
}
.bl-clock-date{ font-size:.66rem; color:#6b7280; letter-spacing:.02em; }
.bl-clock-date::first-letter{ text-transform:uppercase; }
@media (prefers-reduced-motion: reduce){
  .bl-clock-dot, .bl-clock-sep { animation:none; }
}

/* ---- Reloj: variantes según dónde vive -------------------------------
 * --side : en la barra lateral (escritorio), ancho completo.
 * --mini : en la barra de arriba (móvil), solo hora, sin segundos ni fecha.
 * ------------------------------------------------------------------ */
.bl-clock-card--side{ width:100%; }
.bl-clock-card--mini{
  gap:.45rem; padding:.34rem .6rem; border-radius:11px;
  background:linear-gradient(135deg, rgba(255,45,45,.12), rgba(255,255,255,.02) 60%);
}
.bl-clock-card--mini .bl-clock-dot{ width:6px; height:6px; }
.bl-clock-card--mini .bl-clock-time{ font-size:.82rem; font-weight:700; }
.bl-clock-card--mini .bl-clock-time > span{ min-width:1.2ch; }
.bl-clock-card--mini .bl-clock-ampm{ font-size:.5rem; margin-left:.22rem; }

/* ---- Raspadita: cartón premium -------------------------------------
 * El anterior eran 9 cuadros grises: parecía una tabla, no un cartón.
 * Ahora: marco tipo ticket con dentado, casillas con brillo y la capa de
 * rascar con textura plateada como las raspaditas de verdad.
 * ------------------------------------------------------------------ */
.rs-ticket{
  position:relative; border-radius:20px; padding:1.1rem;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,45,45,.16), transparent 60%),
    linear-gradient(160deg, #1a1a1f 0%, #121216 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 60px -28px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Dentado de ticket a los lados */
.rs-ticket::before, .rs-ticket::after{
  content:""; position:absolute; top:0; bottom:0; width:12px;
  background-image:radial-gradient(circle at center, #0B0B0B 5px, transparent 5.5px);
  background-size:12px 20px; background-repeat:repeat-y;
}
.rs-ticket::before{ left:-6px; }
.rs-ticket::after { right:-6px; }

.rs-cell{
  position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.rs-cell.is-win{
  border-color:rgba(34,197,94,.55);
  background:linear-gradient(150deg, rgba(34,197,94,.16), rgba(34,197,94,.03));
  box-shadow:0 0 0 1px rgba(34,197,94,.35), 0 0 26px -4px rgba(34,197,94,.55);
}
.rs-sym{ font-size:clamp(1.6rem, 8vw, 2.4rem); filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)); }
.rs-scratch{ cursor:grab; }
.rs-scratch:active{ cursor:grabbing; }

/* Cabecera del ticket */
.rs-head{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding-bottom:.85rem; margin-bottom:.85rem;
  border-bottom:1px dashed rgba(255,255,255,.13);
}
.rs-head-title{ font-weight:800; font-size:.92rem; color:#fff; letter-spacing:.01em; }
.rs-head-sub{ font-size:.66rem; color:#6b7280; }

/* Premio: número grande al ganar */
.rs-prize{ animation:rsPrize .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes rsPrize{
  0%   { transform:scale(.5) translateY(8px); opacity:0; }
  60%  { transform:scale(1.12); }
  100% { transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .rs-prize{ animation:none; } }

/* ---------------------------------------------------------------------------
   El recuadro azul al pulsar

   Chrome le dibuja un marco azul a los botones cuando los pulsas y ese azul
   no tiene nada que ver con la plataforma: se veía feísimo en la campanita.

   No se quita del todo a propósito. Quien navega con el teclado (Tab) NECESITA
   ver dónde está parado; si se borra, queda dando saltos a ciegas. Por eso:
     · con el ratón  -> no sale nada (:focus:not(:focus-visible))
     · con el teclado -> sale, pero en el rojo de la marca
   --------------------------------------------------------------------------- */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--bl-brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPTIMIZACIÓN ANDROID  ·  solo aplica cuando <html class="dark is-android">
   ---------------------------------------------------------------------------
   Chrome en Android rasteriza en CPU el blur de fondo (backdrop-filter) y las
   sombras/brillos animados MUCHO más caro que Safari en iPhone (que lo hace en
   la GPU Metal). Por eso en Android de gama media/baja se siente "raro" y con
   tirones. Aquí NO se borra el diseño: el "vidrio" se cambia por un fondo
   sólido casi idéntico (el tema ya es negro) y los brillos decorativos se
   CONGELAN (se ven, pero dejan de repintarse 60 veces por segundo).
   iPhone y escritorio NO ven este bloque: quedan exactamente igual.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Fuera el blur de fondo en TODO (es lo más caro en Android).
      Un solo selector universal; el navegador lo resuelve una vez. */
.is-android *,
.is-android *::before,
.is-android *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2) Compensación: donde el blur daba sensación de "vidrio", ponemos el mismo
      color pero sólido para que no se transparente el contenido de atrás.
      (Los rgba de origen tienen estos mismos tonos, solo subimos la opacidad.) */
.is-android .dash-topbar { background: #0b0b0b; }
.is-android .bottom-nav  { background: #141414; }
.is-android .admin-dock,
.is-android .dock-sheet  { background: #141416; }
.is-android .stat-card,
.is-android .paso-card   { background: #141416; }
.is-android .bl-modal-card,
.is-android .bl-tour-card,
.is-android .wheel-result,
.is-android .gsearch     { background: #141418; }
.is-android .flow-file,
.is-android .dl-filecard,
.is-android .hero-chip,
.is-android .bl-toast    { background: rgba(20,20,24,.98); }

/* 3) Brillos y pulsos decorativos que corren SIEMPRE: se congelan en Android.
      Se quedan en su estado base (visibles), pero sin repintar cada frame. */
.is-android .balance-hero.hero-lux::after,  /* heroShine  (destello del saldo) */
.is-android .admin-dock::after,             /* dockShine  (destello del dock)  */
.is-android .dock-item.is-active,           /* dockPulse  (sombra pulsante)    */
.is-android .dock-glider,                   /* dockPulse                        */
.is-android .bl-clock-dot,                  /* blClockPulse (anillo del reloj) */
.is-android .bl-clock-sep,                  /* blClockBlink (":" parpadeante)  */
.is-android .wheel-glow,                    /* wheelPulse (solo ruleta)        */
.is-android .wheel-cta i,                   /* ctaBolt    (solo ruleta)        */
.is-android .goal-party {                   /* goalBounce (solo al ganar meta) */
  animation: none !important;
}
/* Estado fijo bonito para lo que quedó sin animación: */
.is-android .dock-item.is-active { box-shadow: 0 10px 26px -6px rgba(230,30,45,.55); }
.is-android .bl-clock-sep { opacity: 1; }

/* Los spinners de carga (bl-spin/bl-pulse/bl-shimmer) NO se tocan:
   son breves y dan feedback de "cargando". */

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN · CAMBIOS DE PASOS  (admin/pasos.php)
   ═══════════════════════════════════════════════════════════════════════════ */
.pasos-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pasos-head-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:1.15rem;color:#ff5a5a;background:linear-gradient(150deg,rgba(255,45,45,.18),rgba(255,45,45,.05));
  border:1px solid rgba(255,45,45,.22);box-shadow:0 8px 24px -12px rgba(255,45,45,.5)}
.pasos-count{flex:none;text-align:center;padding:6px 14px;border-radius:14px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25)}
.pasos-count-n{display:block;font-size:1.35rem;font-weight:800;color:#fbbf24;line-height:1}
.pasos-count-l{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#b7791f;margin-top:2px;font-weight:700}

.paso-card{position:relative;background:rgba(20,20,22,.55);border:1px solid rgba(255,255,255,.08);
  border-radius:1.15rem;padding:1.15rem 1.25rem;backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 12px 34px -16px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06)}
.paso-card.is-pending{border-color:rgba(245,158,11,.22)}
.paso-card.is-pending::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;
  background:linear-gradient(#fbbf24,#f59e0b)}
.paso-card.is-done{opacity:.9}

.paso-change{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:14px 18px}
.paso-num{display:flex;flex-direction:column;align-items:center;min-width:58px}
.paso-num-v{font-size:2rem;font-weight:800;line-height:1;color:#e5e7eb;font-variant-numeric:tabular-nums}
.paso-num-l{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#6b7280;margin-top:5px;font-weight:700}
.paso-num.to-up .paso-num-v{color:#4ade80}
.paso-num.to-down .paso-num-v{color:#fbbf24}
.paso-arrow{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;padding:0 4px}
.paso-arrow i{font-size:1.05rem}
.paso-arrow.up{color:#4ade80}
.paso-arrow.down{color:#fbbf24}
.paso-warn{flex:1 1 100%;font-size:11px;color:#fbbf24;margin-top:2px}
.paso-warn i{margin-right:4px}

.paso-reason{margin-top:14px;border-radius:12px;border:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.2);padding:10px 14px;font-size:.875rem;color:#cbd5e1;line-height:1.5}
.paso-reason i{margin-right:8px;font-size:10px;color:#4b5563}

.paso-links{margin-top:14px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);overflow:hidden}
.paso-links>summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:12px;font-weight:600;color:#cbd5e1;
  display:flex;align-items:center;gap:8px;user-select:none}
.paso-links>summary::-webkit-details-marker{display:none}
.paso-links>summary>i:first-child{color:#94a3b8}
.paso-chev{margin-left:auto;font-size:10px;color:#64748b;transition:transform .2s}
.paso-links[open] .paso-chev{transform:rotate(180deg)}
.paso-links-body{padding:2px 14px 13px}
.paso-link-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid rgba(255,255,255,.04)}
.paso-link-tag{flex:none;font-size:10px;font-weight:700;color:#cbd5e1;background:rgba(255,255,255,.06);border-radius:6px;padding:3px 8px}
.paso-link-row code{flex:1;min-width:0;font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paso-copy{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);color:#94a3b8;cursor:pointer;transition:.15s}
.paso-copy:hover{background:rgba(255,255,255,.08);color:#fff}
.paso-copy.ok{color:#4ade80;border-color:rgba(74,222,128,.3)}

.paso-form{margin-top:14px;display:flex;flex-direction:column;gap:12px;
  border-top:1px dashed rgba(255,255,255,.08);padding-top:16px}
.paso-lbl{display:block;margin-bottom:6px;font-size:11px;font-weight:600;color:#94a3b8}
.paso-reject{border-radius:.75rem;border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.1);
  padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;color:#f87171;transition:.15s;cursor:pointer}
.paso-reject:hover{background:rgba(239,68,68,.2)}

.paso-resolved{margin-top:12px;display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#94a3b8;
  border-radius:10px;background:rgba(0,0,0,.2);padding:9px 12px}
.paso-resolved>i{margin-top:2px;color:#64748b}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING (index.php) · ritmo vertical más compacto en MÓVIL.
   En escritorio queda igual (py-20). Evita la sensación de página larga/vacía.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  section.lp-hero { padding-bottom: 2.5rem; }      /* menos hueco antes de la 1ª sección */
  section.lp-sec { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  section.lp-sec .mt-14 { margin-top: 2.5rem; }    /* header → grilla */
  section.lp-sec .mt-12 { margin-top: 2rem; }
  /* La grilla de métricas del hero también más pegada en móvil. */
  section.lp-hero .mt-14 { margin-top: 2.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING (index.php) · PULIDO VISUAL COMPLETO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tarjetas: elevación suave al pasar el mouse (solo donde hay puntero real). */
@media (hover: hover) {
  .lp-hero .card, .lp-sec .card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
  .lp-hero .card:hover, .lp-sec .card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,45,45,.35);
    box-shadow: 0 22px 44px -24px rgba(255,45,45,.5);
  }
}

/* Badge del hero: glow + puntito "en vivo" latiendo. */
.lp-badge { box-shadow: 0 0 34px -10px rgba(255,45,45,.55); }
.lp-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #FF2D2D; animation: lpPulse 1.8s ease-out infinite;
}
@keyframes lpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,45,45,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,45,45,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,45,45,0); }
}
.is-android .lp-dot { animation: none; }   /* respeta la optimización Android */

/* Chip de ícono con tinte de marca (stats, pasos, features). */
.lp-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255,45,45,.20), rgba(255,45,45,.04));
  border: 1px solid rgba(255,45,45,.22);
  box-shadow: 0 8px 22px -14px rgba(255,45,45,.6);
}
/* Chip de nivel: el color va inline por cada nivel (bronce/plata/oro/diamante). */
.lp-lvchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 18px; border: 1px solid;
}

/* Caja de resultado de la calculadora: glow suave para que resalte. */
.lp-result { box-shadow: 0 0 50px -18px rgba(255,45,45,.5); }

/* Slider premium (solo en la calculadora, no toca otros range del sistema). */
#calculadora input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.12); cursor: pointer;
}
#calculadora input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #FF2D2D; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(255,45,45,.55);
  transition: transform .15s ease;
}
#calculadora input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
#calculadora input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%;
  background: #FF2D2D; box-shadow: 0 3px 10px rgba(255,45,45,.55); cursor: pointer;
}
#calculadora input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); }

/* Íconos sociales del footer en chips redondos con hover. */
.lp-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  transition: all .18s ease;
}
.lp-social:hover { background: rgba(255,45,45,.15); border-color: rgba(255,45,45,.4); color: #FF2D2D; transform: translateY(-2px); }