/* =====================================================================
   STAR<GATE> SUPRA — Consola SupraAdmin (pantalla completa, /supra)
   Estética "galáctica": nebulosa, estrellas, vidrio y oro.
   Todas las clases van prefijadas con .sx- para no chocar con el shell.
   ===================================================================== */
.sx-root { --sx-bg: #04060d; --sx-panel: rgba(14, 20, 40, .66); --sx-line: rgba(148, 163, 184, .12);
  --sx-brand: #6366f1; --sx-cyan: #22d3ee; --sx-gold: #f0b429; --sx-pink: #ec4899; --sx-ok: #22c55e; --sx-warn: #eab308; --sx-danger: #ef4444;
  --sx-text: #e2e8f0; --sx-text2: #94a3b8; --sx-text3: #64748b;
  min-height: 100vh; background: var(--sx-bg); color: var(--sx-text); font-family: Inter, system-ui, sans-serif; position: relative; overflow-x: hidden; }
.sx-root * { box-sizing: border-box; }
.sx-cosmos { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(34,211,238,.12), transparent 55%),
    radial-gradient(800px 600px at 60% 120%, rgba(236,72,153,.10), transparent 60%),
    radial-gradient(500px 400px at 30% 10%, rgba(240,180,41,.06), transparent 60%); }
.sx-stars, .sx-stars2 { position: fixed; inset: -50%; pointer-events: none; z-index: 0; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cbd5e1, transparent),
    radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent), radial-gradient(1px 1px at 300px 40px, #93c5fd, transparent),
    radial-gradient(1px 1px at 380px 220px, #fff, transparent), radial-gradient(1.2px 1.2px at 460px 120px, #fde68a, transparent);
  background-size: 500px 300px; animation: sx-drift 180s linear infinite; }
.sx-stars2 { background-size: 700px 420px; opacity: .45; animation-duration: 260s; animation-direction: reverse; }
@keyframes sx-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-500px, -300px, 0); } }
@media (prefers-reduced-motion: reduce) { .sx-stars, .sx-stars2 { animation: none; } }

.sx-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 960px) { .sx-layout { grid-template-columns: 1fr; } .sx-side { position: sticky; top: 0; z-index: 20; flex-direction: row !important; overflow-x: auto; height: auto !important; } .sx-side .sx-nav { display: flex; gap: .25rem; } .sx-side .sx-side-foot, .sx-side .sx-logo small { display: none; } }

.sx-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem .8rem; height: 100vh; position: sticky; top: 0;
  background: linear-gradient(180deg, rgba(10,14,30,.85), rgba(6,9,20,.92)); border-right: 1px solid var(--sx-line); backdrop-filter: blur(14px); }
.sx-logo { display: flex; align-items: center; gap: .65rem; padding: .3rem .5rem .8rem; }
.sx-logo-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; color: #fff;
  background: conic-gradient(from 210deg, var(--sx-brand), var(--sx-cyan), var(--sx-gold), var(--sx-pink), var(--sx-brand)); box-shadow: 0 0 24px rgba(99,102,241,.55); }
.sx-logo b { font-family: Orbitron, 'Space Grotesk', sans-serif; letter-spacing: .08em; font-size: .95rem; display: block; }
.sx-logo b em { font-style: normal; color: var(--sx-cyan); } .sx-logo b span { color: var(--sx-gold); }
.sx-logo small { color: var(--sx-text3); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.sx-nav { display: flex; flex-direction: column; gap: .2rem; }
.sx-nav button { all: unset; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: 10px; color: var(--sx-text2); font-size: .84rem; font-weight: 500; white-space: nowrap; transition: .15s; }
.sx-nav button i { width: 18px; text-align: center; }
.sx-nav button:hover { background: rgba(99,102,241,.10); color: #fff; }
.sx-nav button.is-on { background: linear-gradient(90deg, rgba(99,102,241,.28), rgba(34,211,238,.06)); color: #fff; box-shadow: inset 2px 0 0 var(--sx-cyan); }
.sx-side-foot { margin-top: auto; font-size: .7rem; color: var(--sx-text3); display: flex; flex-direction: column; gap: .4rem; padding: 0 .4rem; }
.sx-side-foot a, .sx-side-foot button { all: unset; cursor: pointer; color: var(--sx-text2); display: flex; gap: .5rem; align-items: center; padding: .35rem .4rem; border-radius: 8px; }
.sx-side-foot a:hover, .sx-side-foot button:hover { color: #fff; background: rgba(255,255,255,.04); }

.sx-main { padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 4rem; min-width: 0; }
.sx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.sx-eyebrow { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sx-cyan); font-weight: 700; }
.sx-title { font-family: 'Space Grotesk', Inter, sans-serif; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; margin: .2rem 0 0; color: #fff; letter-spacing: -.01em; }
.sx-sub { color: var(--sx-text2); font-size: .85rem; margin-top: .3rem; max-width: 70ch; }

.sx-card { background: var(--sx-panel); border: 1px solid var(--sx-line); border-radius: 16px; padding: 1.1rem; backdrop-filter: blur(12px); position: relative; }
.sx-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, transparent, rgba(148,163,184,.35), transparent); }
.sx-card h3 { margin: 0 0 .8rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sx-text2); font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.sx-grid { display: grid; gap: 1rem; }
.sx-g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sx-g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sx-kpi { display: flex; gap: .9rem; align-items: center; }
.sx-kpi-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.sx-kpi b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.sx-kpi span { font-size: .72rem; color: var(--sx-text2); }
.k-brand .sx-kpi-ic { background: rgba(99,102,241,.16); color: #a5b4fc; } .k-ok .sx-kpi-ic { background: rgba(34,197,94,.14); color: #86efac; }
.k-danger .sx-kpi-ic { background: rgba(239,68,68,.14); color: #fca5a5; } .k-gold .sx-kpi-ic { background: rgba(240,180,41,.14); color: #fde68a; }
.k-cyan .sx-kpi-ic { background: rgba(34,211,238,.14); color: #67e8f9; }

.sx-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .58rem 1rem; border-radius: 11px; font-size: .82rem; font-weight: 600; border: 1px solid var(--sx-line); color: var(--sx-text); background: rgba(255,255,255,.03); transition: .15s; white-space: nowrap; }
.sx-btn:hover { border-color: rgba(148,163,184,.35); background: rgba(255,255,255,.06); }
.sx-btn:disabled { opacity: .5; cursor: not-allowed; }
.sx-btn-primary { border: none; color: #fff; background: linear-gradient(135deg, var(--sx-brand), #8b5cf6 55%, var(--sx-cyan)); box-shadow: 0 6px 24px rgba(99,102,241,.35); }
.sx-btn-primary:hover { filter: brightness(1.1); }
.sx-btn-gold { border: none; color: #1a1205; background: linear-gradient(135deg, #fde68a, var(--sx-gold)); }
.sx-btn-danger { color: #fca5a5; border-color: rgba(239,68,68,.35); }
.sx-btn-sm { padding: .35rem .65rem; font-size: .74rem; border-radius: 9px; }
.sx-icon-btn { all: unset; cursor: pointer; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; color: var(--sx-text2); }
.sx-icon-btn:hover { background: rgba(255,255,255,.07); color: #fff; }

.sx-input, .sx-select, .sx-textarea { width: 100%; background: rgba(4,6,13,.7); border: 1px solid var(--sx-line); color: var(--sx-text); border-radius: 10px; padding: .6rem .75rem; font-size: .85rem; outline: none; font-family: inherit; }
.sx-input:focus, .sx-select:focus, .sx-textarea:focus { border-color: var(--sx-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.sx-label { display: block; font-size: .7rem; color: var(--sx-text2); font-weight: 600; margin-bottom: .35rem; letter-spacing: .02em; }
.sx-field { margin-bottom: .85rem; }
.sx-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.sx-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sx-table th { text-align: left; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sx-text3); font-weight: 700; padding: .55rem .7rem; border-bottom: 1px solid var(--sx-line); }
.sx-table td { padding: .7rem; border-bottom: 1px solid rgba(148,163,184,.06); vertical-align: middle; }
.sx-table tr:hover td { background: rgba(99,102,241,.05); }
.sx-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; letter-spacing: .02em; }
.b-ok { background: rgba(34,197,94,.14); color: #86efac; } .b-danger { background: rgba(239,68,68,.14); color: #fca5a5; }
.b-warn { background: rgba(234,179,8,.14); color: #fde047; } .b-muted { background: rgba(148,163,184,.12); color: var(--sx-text2); }
.b-brand { background: rgba(99,102,241,.18); color: #c7d2fe; } .b-gold { background: rgba(240,180,41,.16); color: #fde68a; }
.sx-swatch { display: inline-flex; gap: 2px; } .sx-swatch i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Tarjetas de plantilla */
.sx-tpls { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sx-tpl { all: unset; cursor: pointer; border-radius: 16px; overflow: hidden; border: 1px solid var(--sx-line); background: rgba(10,14,28,.7); transition: .18s; display: flex; flex-direction: column; position: relative; }
.sx-tpl:hover { transform: translateY(-3px); border-color: rgba(148,163,184,.4); box-shadow: 0 14px 40px rgba(0,0,0,.4); }
.sx-tpl.is-on { border-color: var(--sx-cyan); box-shadow: 0 0 0 2px rgba(34,211,238,.35), 0 14px 40px rgba(34,211,238,.15); }
.sx-tpl.is-on::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sx-cyan); color: #04060d; font-size: .75rem; }
.sx-tpl-art { height: 112px; position: relative; overflow: hidden; }
.sx-tpl-art .mini-side { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 26%; border-radius: 8px; }
.sx-tpl-art .mini-bar { position: absolute; left: 34%; right: 10px; top: 10px; height: 14px; border-radius: 6px; }
.sx-tpl-art .mini-card { position: absolute; top: 32px; height: 34px; border-radius: 8px; }
.sx-tpl-art .mini-chart { position: absolute; left: 34%; right: 10px; bottom: 10px; height: 26px; border-radius: 8px; }
.sx-tpl-art .mini-ic { position: absolute; right: 14px; bottom: 14px; font-size: 1.6rem; opacity: .9; }
.sx-tpl-body { padding: .75rem .85rem .9rem; }
.sx-tpl-body b { display: block; font-size: .9rem; color: #fff; }
.sx-tpl-body small { display: block; font-size: .7rem; color: var(--sx-text2); margin-top: .15rem; }
.sx-tpl-meta { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }

/* Asistente */
.sx-steps { display: flex; gap: .4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sx-step { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; font-size: .74rem; color: var(--sx-text3); border: 1px solid var(--sx-line); background: rgba(255,255,255,.02); cursor: pointer; }
.sx-step b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; background: rgba(148,163,184,.15); }
.sx-step.is-on { color: #fff; border-color: var(--sx-cyan); background: rgba(34,211,238,.08); } .sx-step.is-on b { background: var(--sx-cyan); color: #04060d; }
.sx-step.is-done { color: var(--sx-text2); } .sx-step.is-done b { background: var(--sx-ok); color: #04060d; }
.sx-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.2rem; align-items: start; }
@media (max-width: 1200px) { .sx-wizard { grid-template-columns: 1fr; } }
.sx-sticky { position: sticky; top: 1rem; }

/* Vista previa en vivo de la cuenta */
.sx-preview { border-radius: 18px; overflow: hidden; border: 1px solid var(--sx-line); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.sx-pv { --p-bg: #0a0e1a; --p-panel: #111827; --p-brand: #3b82f6; --p-accent: #8b5cf6; --p-gold: #d4af37; --p-text: #e5e7eb; --p-text2: #94a3b8; --p-r: 14px;
  background: var(--p-bg); color: var(--p-text); display: grid; grid-template-columns: 92px 1fr; min-height: 380px; font-size: 11px; position: relative; }
.sx-pv-pattern { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.sx-pv-side { background: color-mix(in srgb, var(--p-panel) 85%, black); padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; border-right: 1px solid rgba(148,163,184,.1); }
.sx-pv-logo { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 9px; color: var(--p-text); margin-bottom: 6px; overflow: hidden; }
.sx-pv-logo i, .sx-pv-logo img { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--p-brand); color: #fff; flex: none; object-fit: contain; }
.sx-pv-nav { height: 16px; border-radius: 5px; background: rgba(148,163,184,.12); display: flex; align-items: center; gap: 4px; padding: 0 5px; font-size: 7.5px; color: var(--p-text2); overflow: hidden; white-space: nowrap; }
.sx-pv-nav.on { background: color-mix(in srgb, var(--p-brand) 30%, transparent); color: var(--p-text); }
.sx-pv-main { padding: 12px; display: flex; flex-direction: column; gap: 9px; position: relative; z-index: 1; min-width: 0; }
.sx-pv-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.sx-pv-tag { color: var(--p-text2); font-size: 9px; margin-top: 2px; }
.sx-pv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sx-pv-kpi { background: var(--p-panel); border-radius: var(--p-r); padding: 7px; border: 1px solid rgba(148,163,184,.1); }
.sx-pv-kpi b { display: block; font-size: 14px; }
.sx-pv-kpi small { font-size: 7.5px; color: var(--p-text2); }
.sx-pv-card { background: var(--p-panel); border-radius: var(--p-r); padding: 8px; border: 1px solid rgba(148,163,184,.1); }
.sx-pv-bars { display: flex; align-items: flex-end; gap: 4px; height: 54px; }
.sx-pv-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--p-brand), var(--p-accent)); opacity: .9; }
.sx-pv-btns { display: flex; gap: 5px; }
.sx-pv-btn { padding: 5px 9px; border-radius: calc(var(--p-r) * .6); background: var(--p-brand); color: #fff; font-weight: 700; font-size: 8.5px; }
.sx-pv-btn.ghost { background: transparent; border: 1px solid rgba(148,163,184,.3); color: var(--p-text); }
.sx-pv-btn.gold { background: var(--p-gold); color: #111; }
.sx-pv-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.sx-pv-chips span { font-size: 7px; padding: 2px 5px; border-radius: 99px; background: color-mix(in srgb, var(--p-brand) 18%, transparent); color: var(--p-text); }

/* Módulos */
.sx-mods { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sx-mod { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem; border-radius: 13px; border: 1px solid var(--sx-line); background: rgba(255,255,255,.02); cursor: pointer; transition: .15s; user-select: none; }
.sx-mod:hover { border-color: rgba(148,163,184,.3); }
.sx-mod.is-on { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.06); }
.sx-mod-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(148,163,184,.1); color: var(--sx-text2); flex: none; }
.sx-mod.is-on .sx-mod-ic { background: linear-gradient(135deg, rgba(99,102,241,.4), rgba(34,211,238,.3)); color: #fff; }
.sx-mod b { display: block; font-size: .8rem; color: #fff; }
.sx-mod small { display: block; font-size: .68rem; color: var(--sx-text3); line-height: 1.35; margin-top: .1rem; }
.sx-toggle { margin-left: auto; width: 34px; height: 19px; border-radius: 99px; background: rgba(148,163,184,.25); position: relative; flex: none; transition: .15s; }
.sx-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .15s; }
.sx-mod.is-on .sx-toggle { background: var(--sx-cyan); } .sx-mod.is-on .sx-toggle::after { left: 17px; }

.sx-colors { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sx-color { display: flex; align-items: center; gap: .5rem; padding: .4rem; border: 1px solid var(--sx-line); border-radius: 10px; background: rgba(4,6,13,.6); }
.sx-color input[type=color] { width: 34px; height: 34px; border: none; padding: 0; background: none; border-radius: 8px; cursor: pointer; flex: none; }
.sx-color span { font-size: .68rem; color: var(--sx-text2); line-height: 1.2; } .sx-color code { display: block; font-size: .64rem; color: var(--sx-text3); }
.sx-range { width: 100%; accent-color: var(--sx-cyan); }
.sx-seg { display: inline-flex; border: 1px solid var(--sx-line); border-radius: 10px; overflow: hidden; }
.sx-seg button { all: unset; cursor: pointer; padding: .45rem .8rem; font-size: .76rem; color: var(--sx-text2); }
.sx-seg button.is-on { background: rgba(34,211,238,.14); color: #fff; }

.sx-cred { background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(240,180,41,.08)); border: 1px solid rgba(240,180,41,.35); border-radius: 16px; padding: 1.1rem; }
.sx-cred-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed rgba(148,163,184,.15); font-size: .82rem; }
.sx-cred-row:last-child { border: none; }
.sx-cred-row code { font-family: 'JetBrains Mono', monospace; color: var(--sx-gold); word-break: break-all; }
.sx-empty { text-align: center; padding: 2.5rem 1rem; color: var(--sx-text3); font-size: .85rem; }
.sx-empty i { font-size: 2rem; display: block; margin-bottom: .6rem; opacity: .5; }
.sx-bar { height: 7px; border-radius: 99px; background: rgba(148,163,184,.12); overflow: hidden; }
.sx-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sx-brand), var(--sx-cyan)); }
.sx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .sx-dot.ok { background: var(--sx-ok); box-shadow: 0 0 10px var(--sx-ok); } .sx-dot.bad { background: var(--sx-danger); box-shadow: 0 0 10px var(--sx-danger); } .sx-dot.mid { background: var(--sx-warn); }
.sx-ai { border: 1px solid rgba(139,92,246,.4); background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(34,211,238,.05)); border-radius: 16px; padding: 1rem; }
.sx-drawer-bg { position: fixed; inset: 0; background: rgba(2,4,10,.65); backdrop-filter: blur(4px); z-index: 60; display: flex; justify-content: flex-end; }
.sx-drawer { width: min(920px, 100%); height: 100%; overflow-y: auto; background: #070b16; border-left: 1px solid var(--sx-line); padding: 1.4rem; animation: sx-in .22s ease-out; }
@keyframes sx-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sx-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--sx-line); margin: 1rem 0; overflow-x: auto; }
.sx-tabs button { all: unset; cursor: pointer; padding: .6rem .9rem; font-size: .8rem; color: var(--sx-text2); border-bottom: 2px solid transparent; white-space: nowrap; }
.sx-tabs button.is-on { color: #fff; border-color: var(--sx-cyan); }
.sx-toast { position: fixed; bottom: 22px; right: 22px; z-index: 90; padding: .8rem 1.1rem; border-radius: 12px; font-size: .84rem; background: #0e1a33; border: 1px solid rgba(34,211,238,.4); color: #cffafe; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: sx-in .2s; }
.sx-toast.err { background: #2a0f12; border-color: rgba(239,68,68,.5); color: #fecaca; }

/* Arranque / login con marca */
.sx-boot { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; position: relative; z-index: 1; }
.sx-boot-card { width: min(460px, 100%); }
.sx-hero-word { font-family: Orbitron, 'Space Grotesk', sans-serif; font-weight: 900; letter-spacing: .1em; font-size: clamp(1.6rem, 4vw, 2.4rem); text-align: center;
  background: linear-gradient(90deg, #c7d2fe, var(--sx-cyan), var(--sx-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-login { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; position: relative; }
.brand-login-card { width: min(430px, 100%); border-radius: var(--bl-r, 18px); padding: 2rem; background: var(--bl-panel, #111827); border: 1px solid rgba(148,163,184,.14); box-shadow: 0 30px 80px rgba(0,0,0,.45); position: relative; z-index: 1; }
.brand-login-card input { width: 100%; padding: .7rem .85rem; border-radius: calc(var(--bl-r, 18px) * .55); border: 1px solid rgba(148,163,184,.25); background: var(--bl-bg, #0a0e1a); color: var(--bl-text, #e5e7eb); font-size: .9rem; outline: none; }
.brand-login-card input:focus { border-color: var(--bl-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-brand) 30%, transparent); }
.brand-login-card button[type=submit] { width: 100%; padding: .8rem; border: none; border-radius: calc(var(--bl-r, 18px) * .55); background: linear-gradient(135deg, var(--bl-brand), var(--bl-accent)); color: #fff; font-weight: 700; cursor: pointer; font-size: .9rem; }

/* Patrones de fondo por tema (cliente) */
html[data-pattern="stars"] #bg-fx { background-image: radial-gradient(1px 1px at 30px 40px, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 150px 120px, rgba(255,255,255,.4), transparent), radial-gradient(1.5px 1.5px at 260px 60px, rgba(255,255,255,.55), transparent), radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%); background-size: 320px 200px, 320px 200px, 320px 200px, auto; }
html[data-pattern="aurora"] #bg-fx { background: radial-gradient(1000px 520px at 80% -10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%), radial-gradient(800px 500px at 0% 40%, color-mix(in srgb, var(--violet) 25%, transparent), transparent 60%), radial-gradient(700px 500px at 60% 120%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%); }
html[data-pattern="circuit"] #bg-fx::after { background-image: linear-gradient(color-mix(in srgb, var(--brand) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand) 10%, transparent) 1px, transparent 1px); background-size: 28px 28px; }
html[data-pattern="none"] #bg-fx { background: none; } html[data-pattern="none"] #bg-fx::after { display: none; }