/* =====================================================================
   Inflary · Midnight 2026
   Oscuro y elegante: negro profundo con auroras de luz, vidrio esmerilado,
   bordes de luz finos, tipografía Geist y acentos eléctricos índigo → cian.
   Va DESPUÉS de app.css: solo cambia lo visual.
   ===================================================================== */
:root {
  color-scheme: dark;
  --font: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --x-bg: #06070B; --x-bg2: #0B0D14;
  --x-line: rgba(255,255,255,.08); --x-line2: rgba(255,255,255,.14);
  --x-t1: #F2F3F7; --x-t2: #A1A7B3; --x-t3: #6B7280;
  --x-a: #7C8CFF; --x-b: #22D3EE; --x-c: #A78BFA;
  --x-grad: linear-gradient(120deg, #7C8CFF 0%, #A78BFA 45%, #22D3EE 100%);
  --x-ok: #34D399; --x-bad: #FB7185; --x-warn: #FBBF24;
  /* variables que usa app.css */
  --bg: var(--x-bg); --bg2: var(--x-bg2); --card: rgba(255,255,255,.035); --card2: rgba(255,255,255,.06); --card-solid: #11131B;
  --linea: var(--x-line); --linea2: var(--x-line2);
  --texto: var(--x-t1); --gris: var(--x-t2); --gris2: var(--x-t3);
  --rosa: var(--x-a); --rosa2: var(--x-c); --morado: var(--x-c); --morado2: #8B5CF6; --lila: var(--x-a);
  --grad: var(--x-grad); --grad-txt: var(--x-grad);
  --verde: var(--x-ok); --verde-bg: rgba(52,211,153,.10); --rojo: var(--x-bad); --rojo-bg: rgba(251,113,133,.10);
  --ambar: var(--x-warn); --ambar-bg: rgba(251,191,36,.10); --azul: var(--x-a); --azul-bg: rgba(124,140,255,.12);
  --b-in: rgba(255,255,255,.06); --b-out: rgba(124,140,255,.16); --b-owner: rgba(34,211,238,.12);
  --glow: none; --r: 16px;
}

/* ---------- fondo: negro profundo + auroras + grano ---------- */
html, body { background: var(--x-bg) !important; }
body { font-family: var(--font); color: var(--x-t1); font-size: 14.5px; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
body::before {
  content: '' !important; position: fixed; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 35% at 15% 0%, rgba(124,140,255,.22), transparent 70%),
    radial-gradient(35% 30% at 90% 10%, rgba(34,211,238,.14), transparent 70%),
    radial-gradient(45% 40% at 60% 110%, rgba(167,139,250,.14), transparent 70%);
  animation: x-aurora 24s ease-in-out infinite alternate;
}
body::after {
  content: '' !important; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
#app { position: relative; z-index: 1; }
@keyframes x-aurora { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-3%,2%,0) scale(1.06); } }
::selection { background: rgba(124,140,255,.35); }
a { color: #A5B4FF; }
.muted, .small.muted, .hint { color: var(--x-t2) !important; }
b, strong { font-weight: 600; }

/* ---------- títulos ---------- */
.page > h2:first-child, .page > h2[style] { font-size: 30px !important; font-weight: 600 !important; letter-spacing: -.035em !important; background: linear-gradient(180deg, #fff 30%, #9AA3B5) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; }
.card h2 { font-size: 15px; font-weight: 600; color: var(--x-t1); letter-spacing: -.015em; }
.card h2 small { color: var(--x-t3); font-weight: 500; }
.eyebrow { font-family: var(--mono); font-weight: 500 !important; font-size: 11px !important; letter-spacing: .14em !important; color: var(--x-t3) !important; }

/* ---------- tarjetas de vidrio con borde de luz ---------- */
.card, .sw-row, .alert, .tile, .menu-grid a, .notif, .aviso-w {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--x-line) !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px -24px rgba(0,0,0,.8) !important;
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  color: var(--x-t1);
}
.card { position: relative; }
.card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(124,140,255,.38), transparent 30%, transparent 70%, rgba(34,211,238,.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.card.comp { overflow: hidden; }
.card.comp::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 16px var(--c); }

/* ---------- barra de arriba ---------- */
.top { background: rgba(6,7,11,.62) !important; border-bottom: 1px solid var(--x-line) !important; box-shadow: none !important; backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.top h1 { color: var(--x-t1); font-weight: 600; }
.top .back { color: var(--x-t1) !important; }
.top .search { background: rgba(255,255,255,.04) !important; border: 1px solid var(--x-line) !important; border-radius: 12px !important; height: 40px !important; color: var(--x-t3) !important; }
.top .search:focus-within { border-color: rgba(124,140,255,.55) !important; box-shadow: 0 0 0 4px rgba(124,140,255,.12) !important; }
.top .search input[type=search]:not(.sw):not(.zz), .top .search input:not(.sw):not(.zz):not(.zy):not(.zx) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: var(--x-t1) !important; }
.ibtn { background: rgba(255,255,255,.04) !important; border: 1px solid var(--x-line) !important; border-radius: 12px !important; color: var(--x-t2) !important; box-shadow: none !important; }
.ibtn:hover { background: rgba(255,255,255,.08) !important; color: var(--x-t1) !important; }
img.logo-i { background: transparent !important; border: 0 !important; box-shadow: 0 0 24px rgba(124,140,255,.35) !important; border-radius: 10px !important; padding: 0 !important; }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 12px !important; font-weight: 500 !important; font-size: 14px; letter-spacing: -.01em; padding: 10px 16px; gap: 8px;
  color: var(--x-t1) !important; background: rgba(255,255,255,.05) !important; border: 1px solid var(--x-line2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4) !important; text-shadow: none !important;
  transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .25s ease;
}
.btn:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.22) !important; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,140,255,.35) !important; }
.btn::before { content: none !important; }
/* luz que sigue al dedo o al mouse */
.btn::after { content: '' !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%); transform: none !important; animation: none !important; }
.btn:hover::after { opacity: 1; }

/* principal: blanco luminoso */
.btn.primary, .btn.ambar {
  color: #07080C !important; background: linear-gradient(180deg, #FFFFFF, #E6E9F2) !important; border-color: rgba(255,255,255,.9) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 30px -6px rgba(124,140,255,.55), inset 0 -1px 0 rgba(0,0,0,.08) !important; font-weight: 600 !important;
}
.btn.primary:hover, .btn.ambar:hover { background: #fff !important; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 40px -6px rgba(124,140,255,.75) !important; }
.btn.primary::after, .btn.ambar::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(124,140,255,.25), transparent 60%); }
/* aprobar: esmeralda luminosa */
.btn.verde { color: #D1FAE5 !important; background: linear-gradient(180deg, rgba(52,211,153,.22), rgba(16,185,129,.12)) !important; border-color: rgba(52,211,153,.45) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 26px -10px rgba(52,211,153,.6) !important; font-weight: 600 !important; }
.btn.verde:hover { background: linear-gradient(180deg, rgba(52,211,153,.32), rgba(16,185,129,.18)) !important; border-color: rgba(52,211,153,.7) !important; }
.btn.verde::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(52,211,153,.3), transparent 60%); }
/* rechazar: rubí */
.btn.rojo { color: #FFE4E6 !important; background: linear-gradient(180deg, rgba(251,113,133,.16), rgba(244,63,94,.08)) !important; border-color: rgba(251,113,133,.4) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; }
.btn.rojo:hover { background: linear-gradient(180deg, rgba(251,113,133,.26), rgba(244,63,94,.14)) !important; border-color: rgba(251,113,133,.65) !important; }
.btn.rojo::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(251,113,133,.3), transparent 60%); }
.btn.sm { padding: 7px 12px !important; font-size: 13px !important; border-radius: 10px !important; }
.btn.block { padding: 13px 16px !important; font-size: 15px !important; border-radius: 14px !important; }
.savebar { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 16px 50px -10px rgba(124,140,255,.8) !important; }
.btn:disabled { opacity: .45; }
.linkbtn, .pill-link { color: #A5B4FF !important; background: rgba(124,140,255,.08) !important; border: 1px solid rgba(124,140,255,.25) !important; border-radius: 10px !important; font-weight: 500 !important; }

/* ---------- pestañas: segmentos de vidrio ---------- */
.tabs { gap: 2px !important; background: rgba(255,255,255,.04); border: 1px solid var(--x-line); border-radius: 14px; padding: 4px !important; width: max-content; max-width: 100%; }
.tabs button { border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 10px !important; padding: 7px 13px !important; font-weight: 500 !important; font-size: 13.5px !important; color: var(--x-t2) !important; transition: color .2s, background .2s; }
.tabs button:hover { color: var(--x-t1) !important; }
.tabs button.on { color: var(--x-t1) !important; background: rgba(255,255,255,.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px -6px rgba(124,140,255,.6) !important; }
.tabs .cnt { font-family: var(--mono); font-size: 12px; color: var(--x-t3); font-weight: 500 !important; }
.tabs button.on .cnt { color: #A5B4FF; }

/* ---------- interruptor ---------- */
.sw { width: 42px !important; height: 24px !important; background: rgba(255,255,255,.12) !important; box-shadow: inset 0 0 0 1px var(--x-line2) !important; }
.sw::after { width: 18px !important; height: 18px !important; top: 3px !important; left: 3px !important; background: #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,.5) !important; }
.sw:checked { background: var(--x-grad) !important; box-shadow: 0 0 18px -2px rgba(124,140,255,.7) !important; }
.sw:checked::after { transform: translateX(18px) !important; }

/* ---------- campos ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.sw), textarea, select {
  background: rgba(255,255,255,.035) !important; border: 1px solid var(--x-line2) !important; color: var(--x-t1) !important; border-radius: 12px !important; box-shadow: none !important; font-family: var(--font);
}
input::placeholder, textarea::placeholder { color: var(--x-t3) !important; }
select option { background: #11131B; color: var(--x-t1); }
input:focus, textarea:focus, select:focus { outline: none !important; border-color: rgba(124,140,255,.6) !important; box-shadow: 0 0 0 4px rgba(124,140,255,.12) !important; }
label, .field label { color: var(--x-t2); font-weight: 500; }
.inp { background: rgba(255,255,255,.035) !important; border: 1px solid var(--x-line2) !important; border-radius: 12px !important; }
.inp input { background: transparent !important; border: 0 !important; }

/* ---------- chips, pastillas y alertas ---------- */
.chip, .pill { font-weight: 500 !important; border-radius: 999px !important; font-size: 12px !important; }
.badge { background: linear-gradient(180deg, #FB7185, #E11D48) !important; box-shadow: 0 0 12px rgba(251,113,133,.6) !important; font-weight: 600 !important; color: #fff !important; }
.alert.amar, .alert.amar.banner { background: linear-gradient(180deg, rgba(251,191,36,.10), rgba(251,191,36,.04)) !important; border-color: rgba(251,191,36,.3) !important; color: #FDE68A !important; }
.alert.amar b, .alert.amar .go { color: #FCD34D !important; font-weight: 600 !important; }
.alert.verde { background: rgba(52,211,153,.08) !important; border-color: rgba(52,211,153,.3) !important; color: #A7F3D0 !important; }
.alert.rojo { background: rgba(251,113,133,.08) !important; border-color: rgba(251,113,133,.3) !important; color: #FECDD3 !important; }
.banner .ico, .alert .ico { width: 38px !important; height: 38px !important; border-radius: 12px !important; background: rgba(251,191,36,.12) !important; color: #FCD34D !important; box-shadow: inset 0 0 0 1px rgba(251,191,36,.3) !important; }
.alert .ico svg { stroke: #FCD34D !important; }
.banner .ico.ok { background: rgba(124,140,255,.14) !important; box-shadow: inset 0 0 0 1px rgba(124,140,255,.35) !important; } .banner .ico.ok svg { stroke: #A5B4FF !important; }
.toast { background: rgba(17,19,27,.92) !important; color: var(--x-t1) !important; border: 1px solid var(--x-line2) !important; border-radius: 14px !important; backdrop-filter: blur(16px); box-shadow: 0 20px 50px -10px rgba(0,0,0,.8) !important; }

/* ---------- menú de abajo (celular): isla de vidrio ---------- */
.nav {
  left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; padding: 0 !important;
  border-radius: 22px; border: 1px solid var(--x-line2) !important;
  background: rgba(14,16,24,.72) !important; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.nav a { color: var(--x-t3) !important; font-weight: 500 !important; font-size: 11px !important; padding: 10px 0 11px !important; transition: color .2s; }
.nav a svg { stroke-width: 1.6; }
.nav a.on { color: var(--x-t1) !important; }
.nav a.on svg { filter: drop-shadow(0 0 8px rgba(124,140,255,.9)) !important; stroke: #C7D2FE; animation: none !important; }
.nav a.on::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--x-grad); box-shadow: 0 0 10px rgba(124,140,255,.9); }
.nav a.on::before { content: none !important; }

/* ---------- menú lateral (PC) ---------- */
@media (min-width: 960px) {
  .main { padding-bottom: 0; }
  .side { background: rgba(8,9,14,.7) !important; border-right: 1px solid var(--x-line) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: none !important; }
  .side .logo { color: var(--x-t1); font-weight: 600 !important; letter-spacing: -.02em; }
  .side a { color: var(--x-t2) !important; font-weight: 500 !important; border-radius: 10px !important; transition: background .2s, color .2s; }
  .side a svg { stroke: var(--x-t3); stroke-width: 1.6; }
  .side a:hover { background: rgba(255,255,255,.04) !important; color: var(--x-t1) !important; }
  .side a.on { color: var(--x-t1) !important; background: linear-gradient(90deg, rgba(124,140,255,.16), rgba(124,140,255,.03)) !important; box-shadow: inset 0 0 0 1px rgba(124,140,255,.22), inset 2px 0 0 #8B9BFF !important; }
  .side a.on svg { stroke: #A5B4FF; filter: drop-shadow(0 0 6px rgba(124,140,255,.8)); }
  .side .marcador { display: none !important; }
  .side .wa { background: rgba(255,255,255,.03) !important; border: 1px solid var(--x-line) !important; color: var(--x-t2) !important; border-radius: 14px !important; }
}

/* ---------- inicio ---------- */
.neon-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(124,140,255,.20), transparent 50%), radial-gradient(120% 140% at 100% 100%, rgba(34,211,238,.12), transparent 50%), rgba(255,255,255,.03) !important; border: 1px solid var(--x-line2) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.9) !important; padding: 24px !important; display: block !important; }
.neon-hero::before, .neon-hero::after { content: none !important; }
.neon-hero .nh-dia { font-family: var(--mono); font-weight: 500 !important; letter-spacing: .16em !important; font-size: 11px !important; color: var(--x-t3) !important; }
.neon-hero h2 { font-family: var(--font) !important; font-weight: 600 !important; font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -.04em !important; text-transform: none !important; margin: 6px 0 6px !important; color: #fff !important; text-shadow: none !important; }
.neon-hero h2 .brilla { background: var(--x-grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: none !important; }
.neon-hero .nh-sub { color: var(--x-t2) !important; font-weight: 400 !important; }
.neon-hero .nh-capas { position: static !important; height: auto !important; transform: none !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.nh-c { position: static !important; width: auto !important; inset: auto !important; transform: none !important; animation: none !important; border-radius: 14px !important; background: rgba(255,255,255,.04) !important; border: 1px solid var(--x-line) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; padding: 12px !important; min-width: 0; }
.nh-c small { font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 12px !important; color: var(--x-t2) !important; }
.nh-c b { font-family: var(--mono); font-weight: 500 !important; font-size: 18px !important; color: #fff !important; letter-spacing: -.02em; }
.nh-c.c3 b { color: #FDA4AF !important; }
.nh-chip { position: static !important; transform: none !important; display: inline-flex !important; width: max-content; margin-top: 14px; font-weight: 500 !important; background: rgba(52,211,153,.10) !important; color: #6EE7B7 !important; border: 1px solid rgba(52,211,153,.3); box-shadow: 0 0 20px -6px rgba(52,211,153,.6) !important; animation: none !important; }
.earn .big { font-family: var(--mono); font-weight: 500 !important; font-size: 40px !important; letter-spacing: -.05em !important; background: linear-gradient(180deg, #fff 35%, #8C95A8) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.earn .msg { font-weight: 400 !important; color: var(--x-t2) !important; }
.earn .row { flex-wrap: wrap; gap: 8px; }
.tile { text-align: left !important; padding: 12px !important; }
.tile small { font-weight: 500 !important; color: var(--x-t2) !important; }
.tile b { font-family: var(--mono); font-weight: 500 !important; color: #fff; }
.tile.hl { border-color: rgba(124,140,255,.35) !important; background: linear-gradient(180deg, rgba(124,140,255,.12), rgba(124,140,255,.03)) !important; }
.tile.hl b { color: #C7D2FE !important; }
.bar { background: rgba(255,255,255,.06) !important; } .bar i { background: var(--x-grad) !important; box-shadow: 0 0 12px rgba(124,140,255,.6) !important; }
.inclina { transform: none !important; } .inclina::after { content: none !important; }
.flota { animation: none !important; }
.page.entra .nh-c, .page.entra .nh-chip { animation: none !important; }

/* ---------- chats ---------- */
.msgs { background: transparent !important; }
.m { color: var(--x-t1); border: 1px solid var(--x-line); }
.m .t { color: rgba(255,255,255,.4) !important; }
.m.out { background: linear-gradient(180deg, rgba(124,140,255,.20), rgba(124,140,255,.12)) !important; border-color: rgba(124,140,255,.25); }
.m.owner { background: rgba(34,211,238,.12) !important; border-color: rgba(34,211,238,.25); }
.note { color: var(--x-t2) !important; background: rgba(255,255,255,.04) !important; border: 1px solid var(--x-line) !important; }
.conv, .compose { background: transparent !important; border-color: var(--x-line) !important; }

/* ---------- comprobantes ---------- */
.comp-img { border-radius: 12px !important; border: 1px solid var(--x-line2) !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.9) !important; background: rgba(255,255,255,.03) !important; }
.comp-info .price { font-family: var(--mono); font-weight: 500 !important; font-size: 16px; background: none !important; -webkit-text-fill-color: #fff; color: #fff !important; }
.det { color: var(--x-t2) !important; }

/* ---------- vista previa de WhatsApp (catálogos) ---------- */
.wa-prev { background: #0B141A !important; border: 1px solid var(--x-line); }
.wa-b { background: #005C4B !important; color: #E9EDEF; }

/* ---------- modales y login ---------- */
.modal-bg { background: rgba(0,0,0,.55) !important; backdrop-filter: blur(8px); }
.modal { background: #0E1018 !important; border: 1px solid var(--x-line2) !important; color: var(--x-t1); box-shadow: 0 40px 80px -20px rgba(0,0,0,.9) !important; }
.login { background: transparent !important; }
.login .box { background: rgba(255,255,255,.04) !important; border: 1px solid var(--x-line2) !important; backdrop-filter: blur(20px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08) !important; }
.login .sub { color: #A5B4FF !important; }
.login .go { background: linear-gradient(180deg, #fff, #E6E9F2) !important; color: #07080C !important; box-shadow: 0 10px 40px -8px rgba(124,140,255,.7) !important; font-weight: 600 !important; }
.login .shield { border-color: rgba(124,140,255,.5) !important; color: #A5B4FF !important; box-shadow: 0 0 30px rgba(124,140,255,.35) !important; }

/* ---------- menú Más ---------- */
.menu-grid a { color: var(--x-t1) !important; font-weight: 500 !important; }
.menu-grid a svg { stroke: #A5B4FF; filter: drop-shadow(0 0 8px rgba(124,140,255,.45)); }

/* ---------- conexiones ---------- */
.dc-logo { background: rgba(124,140,255,.14) !important; box-shadow: inset 0 0 0 1px rgba(124,140,255,.35) !important; }
.dc-logo svg { stroke: #C7D2FE !important; }
.mono { font-family: var(--mono) !important; color: var(--x-t2) !important; }

* { scrollbar-color: rgba(255,255,255,.15) transparent; scrollbar-width: thin; }
#rayos-fondo { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- ajustes finos ---------- */
.login .hero .brand-logo { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; width: min(280px, 66vw) !important; filter: drop-shadow(0 20px 40px rgba(124,140,255,.25)); }
.login h1 { font-weight: 600 !important; letter-spacing: -.03em; }
.inp input:not(.sw):not(.zz):not(.zy):not(.zx):not(.zw) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; }
.inp:focus-within { border-color: rgba(124,140,255,.6) !important; box-shadow: 0 0 0 4px rgba(124,140,255,.12) !important; }
.savebar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 960px) { .savebar { bottom: 16px !important; } }