/* ================================================================
   VELQERIX MODS — Diseño unificado con velqerix.com
   Se carga DESPUÉS del <style> inline de cada página,
   así gana la cascada y reestiliza todo.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ---------- variables globales (idénticas a velqerix.com) ---------- */
:root{
  --bg:#08080E!important;
  --surface:#0F0F1A!important;
  --card:rgba(23,24,44,.82)!important;
  --card2:rgba(15,15,26,.9)!important;
  --border:rgba(255,255,255,.14)!important;
  --blue:#2D6BFF!important;
  --violet:#7B2FFF!important;
  --cyan:#00D4FF!important;
  --white:#F4F4FF!important;
  --text:#F4F4FF!important;
  --muted:rgba(226,228,245,.74)!important;
  --ok:#2BD576!important;
  --warn:#FFB020!important;
  --bad:#FF4D6D!important;
  --secondary:#7B2FFF!important;
  --green:#2BD576!important;
  --danger:#FF4D6D!important;
  --line:rgba(255,255,255,.14)!important;
  --grad:linear-gradient(135deg,#2D6BFF 0%,#7B2FFF 100%);
  --grad2:linear-gradient(135deg,#00D4FF 0%,#2D6BFF 60%,#7B2FFF 100%);
  --glow:0 0 40px rgba(45,107,255,.35);
  --shadow:0 20px 60px rgba(0,0,0,.45)!important;
  --r:16px;
  --input-bg:rgba(0,0,0,.3);
}

/* ---------- reset base ---------- */
*,*::before,*::after{box-sizing:border-box}

/* ---------- body ---------- */
body{
  background:var(--bg)!important;
  color:var(--white)!important;
  font-family:Inter,system-ui,Arial,sans-serif!important;
  font-size:16px!important;
  line-height:1.6!important;
  overflow-x:hidden!important;
  min-height:100vh!important;
  margin:0!important;
}

/* ---------- fondo animado (aurora + grid) — igual que velqerix.com ---------- */
body::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:-2!important;
  background:
    radial-gradient(circle at 20% 20%,rgba(45,107,255,.12),transparent 40%),
    radial-gradient(circle at 80% 30%,rgba(123,47,255,.12),transparent 40%),
    radial-gradient(circle at 50% 80%,rgba(0,212,255,.08),transparent 45%)!important;
  animation:vqx-aurora 18s ease-in-out infinite alternate!important;
  filter:blur(40px)!important;
  background-image:none!important;
  background-size:auto!important;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);
}
@keyframes vqx-aurora{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-4%,3%) scale(1.1)}
}

/* ---------- tipografía ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:'Space Grotesk',Inter,sans-serif!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:-.5px;
}
a{color:inherit;text-decoration:none}

/* ---------- topbar / navbar ---------- */
.topbar,header.topbar{
  background:rgba(8,8,14,.7)!important;
  backdrop-filter:blur(14px)!important;
  border-bottom:1px solid var(--border)!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
}
.topbar-inner{
  height:66px!important;
}

/* ---------- logo ---------- */
.logo{
  font-family:'Space Grotesk',Inter,sans-serif!important;
  font-weight:800!important;
  font-size:20px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
.logo::before{
  content:"";
  display:inline-block;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--grad);
  box-shadow:var(--glow);
  flex-shrink:0;
}
.logo span{
  background:var(--grad2)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}

/* ---------- topbar layout ---------- */
.top-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-shrink:0!important;
}
.topbar-inner{
  height:66px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
/* Todos los controles de la barra (saldo, campana, menú) a la MISMA altura y
   verticalmente centrados, para que nada quede chueco. */
.top-actions>*{
  height:40px!important;
  align-self:center!important;
  margin:0!important;
  vertical-align:middle!important;
}

/* ---------- balance pill ---------- */
.balance-pill{
  background:var(--card)!important;
  border:1px solid rgba(0,212,255,.25)!important;
  border-radius:999px!important;
  color:var(--cyan)!important;
  font-weight:700!important;
  font-size:13px!important;
  font-family:Inter,sans-serif!important;
  padding:0 14px!important;
  height:40px!important;
  min-height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  backdrop-filter:blur(10px)!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

/* ---------- back button ---------- */
.back-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  background:var(--card)!important;
  color:var(--white)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  padding:0!important;
  margin:0!important;
  font-size:24px!important;
  font-weight:600!important;
  line-height:1!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
  flex-shrink:0!important;
}
.back-btn:hover{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
  transform:translateY(-2px)!important;
}

/* ---------- notif button (campana) ---------- */
.notif-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  background:var(--card)!important;
  color:var(--white)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  padding:0!important;
  margin:0!important;
  line-height:0!important;
  font-size:0!important;
  position:relative!important;
  vertical-align:middle!important;
  flex-shrink:0!important;
  box-sizing:border-box!important;
}
.notif-btn:hover{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
  transform:translateY(-2px)!important;
}
.notif-btn svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
  margin:auto!important;
  flex-shrink:0!important;
}
.notif-dot{
  position:absolute!important;
  top:-5px!important;
  right:-5px!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 4px!important;
  display:none;
  place-items:center!important;
  background:linear-gradient(135deg,#FF4D6D,#7B2FFF)!important;
  border:2px solid var(--bg)!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:700!important;
  color:#fff!important;
  line-height:1!important;
}

/* ---------- menu hamburguesa ---------- */
.menu-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:10px!important;
  border:1px solid var(--border)!important;
  background:var(--card)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  flex-shrink:0!important;
  box-sizing:border-box!important;
}
.menu-btn:hover{
  border-color:var(--blue)!important;
}
.menu-btn i,.menu-btn i::before,.menu-btn i::after{
  background:var(--white)!important;
  height:2px!important;
  width:20px!important;
  border-radius:4px!important;
}

/* ---------- dropdown menú ---------- */
.dropdown{
  background:rgba(15,15,26,.96)!important;
  backdrop-filter:blur(16px)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  box-shadow:var(--shadow)!important;
}
.dropdown a{
  color:var(--muted)!important;
  font-weight:500!important;
  font-family:Inter,sans-serif!important;
  font-size:14px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  padding:13px 18px!important;
  transition:.2s!important;
}
.dropdown a:hover{
  color:var(--white)!important;
  background:var(--card)!important;
}

/* ---------- hero ---------- */
.hero-box{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
  overflow:hidden!important;
  position:relative!important;
}
.hero-box::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(circle at 20% 20%,rgba(45,107,255,.08),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(123,47,255,.06),transparent 50%);
  z-index:0;
  pointer-events:none;
}
.hero-box>*{position:relative;z-index:1}
.hero-title{
  font-family:'Space Grotesk',sans-serif!important;
  font-weight:800!important;
  letter-spacing:-1px!important;
}
.hero-title span{
  background:var(--grad2)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.hero-text{
  color:var(--muted)!important;
}

/* ---------- botones (principal) ---------- */
.btn,.buy-btn,.buy-final,.video-btn,
.btn-yellow,.btn-dark{
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  border:none!important;
  cursor:pointer!important;
  transition:.2s!important;
}
.btn-yellow,.buy-btn,.buy-final{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:var(--glow)!important;
  border-radius:12px!important;
}
.btn-yellow:hover,.buy-btn:hover,.buy-final:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 0 50px rgba(123,47,255,.5)!important;
}
.btn-dark{
  background:var(--card)!important;
  color:var(--white)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
}
.btn-dark:hover{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
}
.video-btn{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  color:var(--muted)!important;
}
.video-btn:hover{
  color:var(--white)!important;
  border-color:var(--blue)!important;
}

/* ---------- tabs (categorías) ---------- */
.tab{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  color:var(--muted)!important;
  border-radius:12px!important;
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  font-size:14px!important;
  padding:10px 16px!important;
  transition:.2s!important;
}
.tab:hover{
  color:var(--white)!important;
  border-color:var(--blue)!important;
}
.tab.active{
  background:var(--grad)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:var(--glow)!important;
}

/* ---------- search box ---------- */
.search-box input{
  background:var(--input-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  font-weight:500!important;
  padding:0 15px!important;
  transition:.2s!important;
}
.search-box input:focus{
  outline:none!important;
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
}
.search-box input::placeholder{
  color:var(--muted)!important;
}

/* ---------- section heads ---------- */
.section-head h2{
  font-family:'Space Grotesk',sans-serif!important;
  background:var(--grad2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.section-head p{
  color:var(--muted)!important;
}

/* ---------- product cards ---------- */
.card,.product-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(14px)!important;
  overflow:hidden!important;
  transition:.2s!important;
}
.card:hover,.product-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.25),0 22px 60px rgba(0,0,0,.5)!important;
}
.product-img{
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:var(--surface)!important;
}
.name{
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  text-transform:none!important;
  font-size:14px!important;
}
.price-pill{
  background:rgba(0,212,255,.06)!important;
  border:1px solid rgba(0,212,255,.25)!important;
  border-radius:999px!important;
  color:var(--cyan)!important;
  font-weight:700!important;
}
.price-pill span{
  color:var(--white)!important;
}

/* ---------- badges ---------- */
.badge{
  background:var(--grad)!important;
  color:#fff!important;
  font-weight:600!important;
  border-radius:999px!important;
  box-shadow:var(--glow)!important;
  font-family:Inter,sans-serif!important;
  border:none!important;
}
.promo-badge{
  background:linear-gradient(135deg,#00D4FF,#7B2FFF)!important;
  color:#fff!important;
  font-weight:600!important;
  border-radius:999px!important;
}

/* ---------- modals ---------- */
.modal{
  background:rgba(8,8,14,.8)!important;
  backdrop-filter:blur(8px)!important;
}
.modal-box{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(14px)!important;
}
.modal-title{
  font-family:'Space Grotesk',sans-serif!important;
}
.close{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  color:var(--white)!important;
}
.close:hover{
  border-color:var(--bad)!important;
}
.modal-img{
  border:1px solid var(--border)!important;
  border-radius:12px!important;
}

/* ---------- plan buttons ---------- */
.plan-btn{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  transition:.2s!important;
}
.plan-btn:hover{
  border-color:var(--blue)!important;
}
.plan-btn.active{
  border-color:var(--violet)!important;
  background:rgba(123,47,255,.1)!important;
  box-shadow:0 0 30px rgba(123,47,255,.2)!important;
}

/* ---------- quantity controls ---------- */
.qty-control button{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  color:var(--white)!important;
  font-weight:700!important;
  transition:.2s!important;
}
.qty-control button:hover{
  border-color:var(--blue)!important;
}
.qty-control input{
  background:var(--input-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  color:var(--white)!important;
  font-family:'Space Grotesk',sans-serif!important;
}
.qty-control input:focus{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
}

/* ---------- summary box ---------- */
.summary{
  background:rgba(0,0,0,.2)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
}
.summary-row{
  color:var(--muted)!important;
}
.summary-row b{
  color:var(--cyan)!important;
}

/* ---------- warning ---------- */
.warning{
  background:rgba(255,77,109,.1)!important;
  border:1px solid rgba(255,77,109,.3)!important;
  color:var(--bad)!important;
  border-radius:12px!important;
}

/* ---------- empty state ---------- */
.empty{
  background:var(--card)!important;
  border:1px dashed var(--border)!important;
  border-radius:var(--r)!important;
  color:var(--muted)!important;
}

/* ---------- promo hero ---------- */
.promo-hero{
  background:var(--card)!important;
  border:1px solid rgba(123,47,255,.3)!important;
  border-radius:12px!important;
  box-shadow:0 0 30px rgba(123,47,255,.15)!important;
}
.promo-hero b{
  color:var(--cyan)!important;
}
.promo-hero span{
  color:var(--muted)!important;
}

/* ---------- announcement cards ---------- */
.ann-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  backdrop-filter:blur(10px)!important;
}
.ann-card h3{
  color:var(--cyan)!important;
}
.ann-card p{
  color:var(--muted)!important;
}
.ann-card img{
  border-radius:12px!important;
}

/* ---------- socials ---------- */
.vq-socials a{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
  transition:.2s!important;
}
.vq-socials a:hover{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
  transform:translateY(-2px)!important;
}

/* ---------- footer ---------- */
.footer,footer{
  border-top:1px solid var(--border)!important;
  color:var(--muted)!important;
  font-family:Inter,sans-serif!important;
}

/* ---------- forms (login, register, etc) ---------- */
input,textarea,select,.inp{
  background:var(--input-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:11px!important;
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  transition:.2s!important;
}
input:focus,textarea:focus,select:focus,.inp:focus{
  outline:none!important;
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
}
input::placeholder,textarea::placeholder{
  color:var(--muted)!important;
}
label{
  color:var(--muted)!important;
  font-size:13px!important;
}

/* ---------- auth cards (login/register/recuperar) ---------- */
.card[style*="max-width"],
body>div>.card:only-child,
.auth-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  backdrop-filter:blur(14px)!important;
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(123,47,255,.4);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- reduce motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- fade reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(10px);transition:.5s}
[data-reveal].fade{opacity:1;transform:none}

/* ================================================================
   PÁGINA: micuenta.php  —  overrides específicos
   ================================================================ */
.back-btn{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  color:var(--white)!important;
  width:40px!important;height:40px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:22px!important;
  backdrop-filter:blur(10px)!important;
  transition:.2s!important;
}
.back-btn:hover{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
}
.page-title{
  font-family:'Space Grotesk',sans-serif!important;
  font-weight:700!important;
  color:var(--white)!important;
}
.balance-mini{
  background:var(--card)!important;
  border:1px solid rgba(0,212,255,.25)!important;
  color:var(--cyan)!important;
  font-weight:700!important;
  font-family:Inter,sans-serif!important;
  backdrop-filter:blur(10px)!important;
}

/* stats grid */
.stat{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(14px)!important;
  padding:14px!important;
}
.stat span{
  color:var(--muted)!important;
  font-weight:600!important;
  font-family:Inter,sans-serif!important;
}
.stat b{
  font-family:'Space Grotesk',sans-serif!important;
  background:var(--grad2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* section panels */
.section{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(14px)!important;
}
.section h2{
  font-family:'Space Grotesk',sans-serif!important;
}

/* hero (micuenta) */
.hero{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
  backdrop-filter:blur(14px)!important;
}
.hero h1{
  font-family:'Space Grotesk',sans-serif!important;
}
.hero h1 span{
  background:var(--grad2)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.hero p{
  color:var(--muted)!important;
}

/* tables */
.table-wrap{
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  overflow:auto!important;
}
table{
  font-family:Inter,sans-serif!important;
}
th{
  color:var(--muted)!important;
  background:rgba(45,107,255,.06)!important;
  font-weight:500!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  border-bottom:1px solid var(--border)!important;
}
td{
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  color:var(--white)!important;
}
td small{
  color:var(--muted)!important;
}

/* badges (micuenta/comprar) */
.ok{
  background:rgba(43,213,118,.12)!important;
  color:var(--ok)!important;
  border:1px solid rgba(43,213,118,.3)!important;
}
.warn{
  background:rgba(123,47,255,.12)!important;
  color:#c4b5fd!important;
  border:1px solid rgba(123,47,255,.3)!important;
}
.bad{
  background:rgba(255,77,109,.12)!important;
  color:var(--bad)!important;
  border:1px solid rgba(255,77,109,.3)!important;
}

/* key boxes */
.key-box{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
}
.key-text{
  color:var(--cyan)!important;
  font-family:'Space Grotesk',monospace!important;
}
.key-copy{
  background:var(--grad)!important;
  color:#fff!important;
  border-radius:10px!important;
  border:none!important;
  box-shadow:var(--glow)!important;
  transition:.2s!important;
}
.key-copy:hover{
  transform:translateY(-2px)!important;
}

/* notifications */
.noti{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  backdrop-filter:blur(10px)!important;
  transition:.2s!important;
}
.noti.unread{
  border-color:var(--blue)!important;
  box-shadow:0 0 20px rgba(45,107,255,.15)!important;
}
.noti p{
  color:var(--muted)!important;
}

/* alerts / messages */
.msg{
  border-radius:12px!important;
  font-weight:600!important;
  font-family:Inter,sans-serif!important;
}
.msg-ok,.alert{
  background:rgba(43,213,118,.1)!important;
  border:1px solid rgba(43,213,118,.3)!important;
  color:var(--ok)!important;
  border-radius:12px!important;
}
.alert.hidden{display:none!important}

/* quick action btns */
.quick-actions .btn{
  font-family:Inter,sans-serif!important;
}

/* ================================================================
   PÁGINAS: login.php / register.php / recuperar.php
   ================================================================ */
body>.card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
}
.sub{
  color:var(--muted)!important;
}

/* ================================================================
   PÁGINA: comprar.php
   ================================================================ */
.checkout-card,.pay-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
}

/* ================================================================
   PÁGINA: recargarsaldo*.php
   ================================================================ */
.method-card,.recharge-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
  transition:.2s!important;
}
.method-card:hover,.recharge-card:hover{
  border-color:var(--blue)!important;
  box-shadow:var(--glow)!important;
}

/* ================================================================
   PÁGINA: serviciosredessociales.php
   ================================================================ */
.service-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
  transition:.2s!important;
}
.service-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.25),0 22px 60px rgba(0,0,0,.5)!important;
}

/* ================================================================
   PÁGINA: adm.php (admin panel)
   ================================================================ */
.admin-card,.panel-card{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
}

/* ================================================================
   GLOBAL: Gradient text utility
   ================================================================ */
.text-gradient,.grad-text{
  background:var(--grad2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ================================================================
   PANEL ADMIN DE LA TIENDA (mods/adm.php) — mismo diseño que el
   panel del acortador. El <style> inline del admin usa morados
   viejos (#a78bfa/#7c6cf0) y radios grandes; aquí los reescribimos
   con !important para que herede el sistema azul/violeta.
   ================================================================ */

/* --- login del admin --- */
.box{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
}

/* --- topbar del admin --- */
.top{
  background:rgba(8,8,14,.7)!important;
  border-bottom:1px solid var(--border)!important;
  backdrop-filter:blur(14px)!important;
}
.topin{height:66px!important}
.top .logo span{
  background:var(--grad2)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.pill{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  transition:.2s!important;
}
.pill:hover{border-color:var(--blue)!important;box-shadow:var(--glow)!important}
.pill.logout{color:var(--bad)!important;border-color:rgba(255,77,109,.4)!important}
.pill.logout:hover{border-color:var(--bad)!important;box-shadow:0 0 20px rgba(255,77,109,.25)!important}

/* --- nav de secciones (chips) --- */
.nav a{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  color:var(--muted)!important;
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  transition:.2s!important;
}
.nav a:hover{color:var(--white)!important;border-color:var(--blue)!important}

/* --- hero + secciones + tarjetas --- */
.hbox,.section,.miniCard,.stat{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
}
.hbox h1,.section h2,.miniCard h3{
  font-family:'Space Grotesk',sans-serif!important;
  color:var(--white)!important;
}
.hbox p,.sub,.muted{color:var(--muted)!important}
.stat b{
  font-family:'Space Grotesk',sans-serif!important;
  background:var(--grad2)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.stat span{color:var(--muted)!important;font-family:Inter,sans-serif!important}
.yellow{color:var(--cyan)!important}
.oktxt{color:var(--ok)!important}
.badtxt{color:var(--bad)!important}

/* --- botones del admin --- */
.btn{
  background:var(--grad)!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  box-shadow:var(--glow)!important;
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  transition:.2s!important;
}
.btn:hover{transform:translateY(-2px)!important;box-shadow:0 0 50px rgba(123,47,255,.5)!important}
.btn.dark{
  background:var(--card)!important;
  color:var(--white)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
.btn.dark:hover{border-color:var(--blue)!important;box-shadow:var(--glow)!important}
.btn.red{background:linear-gradient(135deg,#FF4D6D,#7B2FFF)!important;color:#fff!important}
.btn.green{background:linear-gradient(135deg,#2BD576,#2D6BFF)!important;color:#06210f!important}
.btn.blue{background:var(--grad)!important;color:#fff!important}

/* --- inputs del admin --- */
.inp,.box .inp,.section textarea,.section select,.section .inp{
  background:var(--input-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:11px!important;
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  transition:.2s!important;
}
.inp:focus,textarea:focus,select:focus{
  outline:none!important;border-color:var(--blue)!important;box-shadow:var(--glow)!important;
}
.top label,.section label{color:var(--muted)!important;font-family:Inter,sans-serif!important}

/* --- tablas del admin --- */
.tableWrap{border:1px solid var(--border)!important;border-radius:12px!important}
.section table,.tableWrap table{background:transparent!important}
.section th,.tableWrap th{
  color:var(--muted)!important;
  background:rgba(45,107,255,.06)!important;
  font-family:Inter,sans-serif!important;
  font-weight:500!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  border-bottom:1px solid var(--border)!important;
}
.section td,.tableWrap td{
  border-bottom:1px solid rgba(255,255,255,.05)!important;
  color:var(--white)!important;
}

/* --- tags y flashes --- */
.tag{
  background:rgba(45,107,255,.12)!important;
  border:1px solid rgba(45,107,255,.3)!important;
  border-radius:999px!important;
  color:var(--blue)!important;
  font-family:Inter,sans-serif!important;
}
.flash,.toast{border-radius:12px!important;font-family:Inter,sans-serif!important}
.flash.ok,.toast.ok{background:rgba(43,213,118,.1)!important;border:1px solid rgba(43,213,118,.3)!important;color:var(--ok)!important}
.flash.bad,.toast.bad{background:rgba(255,77,109,.1)!important;border:1px solid rgba(255,77,109,.3)!important;color:var(--bad)!important}
.preview{border:1px solid var(--border)!important;border-radius:12px!important}

/* ================================================================
   UNIFICACIÓN GLOBAL DE PÁGINAS DE LA TIENDA
   (login, register, recuperar, verificar, comprar, micuenta,
    recargarsaldo*, serviciosredessociales)
   Estas páginas traen <style> inline con morados viejos
   (#a78bfa/#7c6cf0/#a855f7), azules crudos (#2563ff) y radios
   grandes. Al cargarse este override DESPUÉS, mapeamos sus clases
   propias al sistema de diseño del acortador. Todo con !important.
   ================================================================ */

/* --- botón amarillo/morado viejo -> gradiente azul/violeta --- */
.btn:not(.btn-dark):not(.dark):not(.ghost):not(.red):not(.green):not(.blue),
.buy-btn,.buy-final,.action:not(.dark),.plan-btn:not(.active),
.filter-btn.active,.kg-btn:not(.ghost){
  background:var(--grad)!important;
  color:#fff!important;
  border:none!important;
  border-radius:12px!important;
  box-shadow:var(--glow)!important;
  font-family:Inter,sans-serif!important;
  font-weight:600!important;
  transition:.2s!important;
}
.btn:not(.btn-dark):not(.dark):not(.ghost):not(.red):not(.green):not(.blue):hover,
.buy-btn:hover,.buy-final:hover,.action:not(.dark):hover{
  transform:translateY(-2px)!important;
  box-shadow:0 0 50px rgba(123,47,255,.5)!important;
}
/* variantes oscuras/fantasma coherentes */
.btn.dark,.btn-dark,.action.dark,.btn.ghost,.filter-btn{
  background:var(--card)!important;
  color:var(--white)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  transition:.2s!important;
}
.btn.dark:hover,.btn-dark:hover,.action.dark:hover,.btn.ghost:hover,.filter-btn:hover{
  border-color:var(--blue)!important;box-shadow:var(--glow)!important;
}
.btn.blue{background:var(--grad)!important;color:#fff!important;border:none!important}
.btn.red{background:linear-gradient(135deg,#FF4D6D,#7B2FFF)!important;color:#fff!important;border:none!important}

/* --- inputs de auth (usa .input además de .inp) --- */
.input{
  background:var(--input-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:11px!important;
  color:var(--white)!important;
  font-family:Inter,sans-serif!important;
  font-weight:500!important;
  transition:.2s!important;
}
.input:focus{outline:none!important;border-color:var(--blue)!important;box-shadow:var(--glow)!important}
.input.input-error{border-color:var(--bad)!important;box-shadow:0 0 0 3px rgba(255,77,109,.12)!important}

/* --- logo (Vel[qerix]) coherente en todas --- */
.logo span,.brand span{
  background:var(--grad2)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.brand{font-family:'Space Grotesk',sans-serif!important;font-weight:800!important}

/* --- botón "atrás" (.back) idéntico al del acortador --- */
.back{
  width:40px!important;height:40px!important;
  border-radius:10px!important;
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  color:var(--white)!important;
  box-shadow:none!important;
  font-size:22px!important;
  backdrop-filter:blur(10px)!important;
  transition:.2s!important;
}
.back:hover{border-color:var(--blue)!important;box-shadow:var(--glow)!important;transform:translateY(-2px)!important}

/* --- píldora de saldo (.balance) --- */
.balance,.balance-box{
  background:var(--card)!important;
  border:1px solid rgba(0,212,255,.25)!important;
  border-radius:999px!important;
  color:var(--cyan)!important;
  font-weight:700!important;
  font-family:Inter,sans-serif!important;
  backdrop-filter:blur(10px)!important;
}

/* --- tarjetas/paneles propios (comprar, recargas, servicios) --- */
.card,.panel,.product,.saldo-card,.method-card,.recharge-card,.service-card,
.obox,.modal-box,.copy-box,.hero,.section,.miniCard,.confirm-data{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r)!important;
  backdrop-filter:blur(14px)!important;
}
.card,.panel,.product,.hero{
  box-shadow:0 0 0 1px rgba(123,47,255,.15),0 20px 60px rgba(0,0,0,.45)!important;
}
/* títulos con la tipografía del acortador */
.panel h1,.product h1,.head h1,.card h1,.card h2,.section-head h2,.otitle,.title{
  font-family:'Space Grotesk',sans-serif!important;
}
.head h1 span,.hero-title span,.card h1 span{
  background:var(--grad2)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}

/* --- planes de compra (.plan) --- */
.plan{
  background:var(--input-bg)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
}
.plan span,.plan strong{color:var(--white)!important}
.plan span{color:var(--cyan)!important}

/* --- badge de categoría --- */
.badge{
  background:var(--grad)!important;color:#fff!important;
  border-radius:999px!important;box-shadow:var(--glow)!important;border:none!important;
}

/* --- loader spinner con color del acortador --- */
.loader{border-top-color:var(--violet)!important;border-color:rgba(123,47,255,.22)!important}

/* --- key-box / caja de resultado copiable --- */
.key-box{
  background:rgba(0,212,255,.06)!important;
  border:1px solid rgba(0,212,255,.25)!important;
  border-radius:12px!important;
  color:var(--cyan)!important;
}

/* --- notas/avisos suaves --- */
.note,.notice,.mini{
  background:rgba(45,107,255,.08)!important;
  border:1px solid rgba(45,107,255,.24)!important;
  border-radius:12px!important;
  color:var(--muted)!important;
}

/* --- links de auth --- */
.links a,.later a,.gotoacc{color:var(--cyan)!important}

/* --- estados/badges de pedidos (servicios, micuenta) --- */
.state.ok,.aprobado{background:rgba(43,213,118,.12)!important;color:var(--ok)!important;border:1px solid rgba(43,213,118,.3)!important}
.state.no,.error{background:rgba(255,77,109,.12)!important;color:var(--bad)!important;border:1px solid rgba(255,77,109,.3)!important}
.pendiente{background:rgba(255,176,32,.12)!important;color:var(--warn)!important;border:1px solid rgba(255,176,32,.3)!important}

/* ================================================================
   RENDIMIENTO EN MÓVIL — fluidez sin cambiar el look en PC
   El mayor causante de lag en teléfonos es backdrop-filter:blur
   (vidrio esmerilado): obliga al GPU a re-desenfocar el fondo en
   cada scroll. En pantallas táctiles/pequeñas lo desactivamos y
   dejamos fondos sólidos equivalentes: se ve casi igual, pero
   fluido. En escritorio (>900px) se mantiene el efecto completo.
   ================================================================ */
@media (max-width:900px){
  /* 1) Quitar TODOS los blur de vidrio (lo más pesado) */
  .card,.product-card,.hero-box,.topbar,header.topbar,.dropdown,
  .modal,.modal-box,.balance-pill,.back-btn,.notif-btn,.menu-btn,
  .stat,.section,.miniCard,.hbox,.top,.box,.panel,.product,.saldo-card,
  .method-card,.recharge-card,.service-card,.obox,.copy-box,.hero,
  .ann-card,.vq-socials a,.balance,.balance-box,.note,.notice,.mini,
  .nav,.footer,.key-box,body::before,body::after{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  /* Fondos sólidos para compensar el blur perdido (siguen oscuros) */
  .card,.product-card,.stat,.section,.miniCard,.hbox,.box,.panel,
  .product,.saldo-card,.method-card,.recharge-card,.service-card,
  .obox,.modal-box,.copy-box,.hero,.ann-card,.miniCard{
    background:#12132a!important;
  }
  .topbar,header.topbar,.top,.nav{background:#0a0b18!important}
  .dropdown{background:#12132a!important}

  /* 2) Aurora animada de fondo: menos blur y sin animación (batería) */
  body::before{
    filter:blur(20px)!important;
    animation:none!important;
  }

  /* 3) Sombras más livianas (blur radius alto = repintado caro) */
  .card,.product-card,.stat,.section,.hero,.product,.panel{
    box-shadow:0 6px 20px rgba(0,0,0,.35)!important;
  }

  /* 4) En táctil no hay hover real: quitar transformaciones de hover
        que causan “saltos” y repintados al tocar */
  .card:hover,.product-card:hover,.btn:hover,.buy-btn:hover,
  .back:hover,.back-btn:hover,.notif-btn:hover,.menu-btn:hover,
  .service-card:hover,.method-card:hover,.recharge-card:hover,
  .btn-yellow:hover,.buy-final:hover,.pill:hover{
    transform:none!important;
    box-shadow:0 6px 20px rgba(0,0,0,.35)!important;
  }
}

/* En móviles pequeños, además, el grid de fondo se nota poco y suma
   trabajo: lo ocultamos para ganar fluidez. */
@media (max-width:600px){
  body::after{display:none!important}
}

/* Usuarios que piden menos movimiento: cero animaciones/transiciones */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}