:root{--bg:#050d18;--bg2:#081524;--panel:#0e1c2d;--panel2:#13253a;--panel3:#18314b;--line:rgba(149,184,210,.18);--text:#edf6ff;--muted:#97abc0;--green:#37e0a0;--green2:#5af1b7;--blue:#6b8cff;--blue2:#90a8ff;--red:#ff7d9a;--yellow:#ffd67d;--shadow:0 20px 60px rgba(0,0,0,.32);--radius:22px;color-scheme:dark}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 10% 10%,rgba(45,102,150,.26),transparent 26%),radial-gradient(circle at 88% 12%,rgba(92,44,132,.24),transparent 28%),radial-gradient(circle at 80% 78%,rgba(22,153,122,.17),transparent 24%),linear-gradient(180deg,var(--bg),var(--bg2) 48%,#06111e 100%);overflow-x:hidden;position:relative;overflow-wrap:break-word}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1;filter:blur(40px);opacity:.25;animation:floatBlob 12s ease-in-out infinite}body::before{width:280px;height:280px;left:-40px;top:90px;background:#2d6f9d}body::after{width:340px;height:340px;right:-70px;top:150px;background:#13b778;animation-delay:-5s}
@keyframes floatBlob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(18px) scale(1.04)}}
a{color:#9ee7ff;text-decoration:none}a:hover{text-decoration:none}
.nav{position:sticky;top:0;z-index:9;backdrop-filter:blur(16px);background:linear-gradient(180deg,rgba(6,16,29,.82),rgba(6,16,29,.66));max-width:1280px;margin:0 auto;padding:18px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.nav a{font-size:14px;color:#d6e4ef;transition:opacity .18s ease,transform .18s ease}.nav a:hover{opacity:1;transform:translateY(-1px)}
.brand{display:flex;align-items:center;gap:5px;font-size:27px!important;font-weight:850!important;color:#fff!important;letter-spacing:-1px}.brand span:not(.brandmark){color:var(--green)}.brandmark{color:var(--green);font-size:30px;filter:drop-shadow(0 0 10px rgba(55,224,160,.24))}
.navbtn,.btn{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--green),var(--green2));color:#051420!important;border:0;padding:12px 18px;border-radius:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;text-decoration:none;box-shadow:0 10px 25px rgba(55,224,160,.17);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.navbtn:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(55,224,160,.23);filter:saturate(1.06)}.navbtn:active,.btn:active{transform:translateY(0)}.btn:disabled{opacity:.55;cursor:not-allowed}
.container{max-width:1200px;padding:30px 26px 90px;margin:auto}.footer{border-top:1px solid rgba(255,255,255,.06);color:var(--muted);text-align:center;padding:32px 22px;font-size:13px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}
.card{background:linear-gradient(180deg,rgba(18,34,53,.88),rgba(11,25,40,.93));border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-bottom:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}.card:hover{border-color:rgba(122,167,198,.25)}.card h2{font-size:20px;margin:0 0 10px}.card h1{font-size:29px}
.auth{max-width:520px;margin:40px auto}.wideauth{max-width:650px}.muted{color:var(--muted)}.small{font-size:12px}.tinycode{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#7f9bb6;font-size:11px;margin-top:5px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--green);font-size:11px;font-weight:800}
.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0 34px}.hero h1,.sectiontop h1{font-size:clamp(27px,3vw,40px);margin:7px 0 10px;letter-spacing:-.02em}.hero p,.sectiontop p{color:var(--muted);margin:0;max-width:720px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:28px}.stat{position:relative;padding:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(19,37,58,.95),rgba(12,25,40,.96));border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}.stat::after{content:"";position:absolute;inset:auto 18px 0 18px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(55,224,160,.2),rgba(107,140,255,.4),rgba(55,224,160,.2))}.stat span,.stat small{display:block;font-size:12px;color:var(--muted)}.stat strong{font-size:25px;display:block;margin:10px 0;overflow-wrap:anywhere;letter-spacing:-.03em}
.gridform{display:grid;grid-template-columns:1fr 1fr;gap:17px}.gridform .wide{grid-column:1/-1}.gridform button{width:max-content}.formrow{display:flex;align-items:end;gap:16px}.grow{flex:1}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.tile{background:linear-gradient(180deg,rgba(20,37,58,.92),rgba(13,27,43,.98));padding:24px;border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:9px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.tile:hover{transform:translateY(-4px);border-color:rgba(122,167,198,.32);box-shadow:0 18px 32px rgba(0,0,0,.2)}.tile b{color:var(--text);font-size:18px}.tile span{font-size:13px;color:var(--muted)}
form label,.paycard label{display:block;font-weight:600;font-size:13px;margin:12px 0 8px}input,select,textarea{background:#081726;border:1px solid #2e4961;color:var(--text);border-radius:11px;padding:13px 14px;width:100%;font:inherit;outline:none;margin-top:7px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(55,224,160,.12);transform:translateY(-1px)}.formrow .btn{height:46px;margin-bottom:1px}
button{cursor:pointer}button.ghost{background:#163042;border:1px solid var(--line);color:#fff;border-radius:10px;padding:10px 12px;transition:transform .18s ease,background .18s ease}button.ghost:hover{background:#1c3b50;transform:translateY(-1px)}button.linkbtn{border:0;background:none;color:#a6dfe7;padding:0;font:inherit;font-size:13px}
.inline{display:inline-flex;gap:10px;align-items:center}.inline select{min-width:100px;margin:0}.smallbtn{padding:8px 10px;font-size:12px}
.notice{border-radius:16px;padding:16px 18px;margin:16px 0;font-size:14px;line-height:1.55;border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.notice.warn{border-color:#b18c45;background:linear-gradient(180deg,rgba(98,77,38,.28),rgba(67,52,23,.22));color:#f7deb0}.notice.ok{background:linear-gradient(180deg,rgba(31,104,79,.26),rgba(20,70,55,.22));border-color:#347e69;color:#baf6d9}.notice.error{background:linear-gradient(180deg,rgba(121,43,43,.3),rgba(82,28,28,.24));border-color:#d25757;color:#ffd4d4}
.tablewrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:16px;background:rgba(7,18,30,.4)}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:14px 12px;text-align:left;border-bottom:1px solid rgba(90,117,143,.22);vertical-align:middle}tbody tr:hover{background:rgba(255,255,255,.02)}th{color:var(--muted);font-weight:650;background:rgba(255,255,255,.015)}td small{display:block;color:var(--muted);margin-top:4px}td code{font-size:12px;word-break:break-all}
.pill{font-size:11px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid #536173;color:#e0e9ef;background:#58637430;white-space:nowrap}.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}.pill.paid,.pill.active,.pill.credited{border-color:#287857;color:#7cf1ba;background:#1b5e453f}.pill.pending,.pill.review{border-color:#937339;color:#ffe2a3;background:#68502444}.pill.pending::before,.pill.review::before{animation:pulseDot 1.3s ease-in-out infinite}.pill.expired,.pill.canceled,.pill.suspended{border-color:#80404a;color:#ffb8c0;background:#70384144}@keyframes pulseDot{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.35);opacity:1}}
.sectiontop{padding-bottom:27px}.secret{display:block;padding:12px;margin-top:10px;background:#04101d;color:#55ebad;word-break:break-all;border-radius:10px;border:1px solid rgba(85,235,173,.18)}pre{white-space:pre-wrap;background:#051421;color:#b7e7e1;border:1px solid var(--line);padding:18px;border-radius:14px;overflow-wrap:anywhere}
.checkout{max-width:560px;margin:30px auto}.paycard{padding:30px;position:relative}.paycard::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.025),transparent);pointer-events:none}.checkouthead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:19px}.checkoutmeta{font-size:12px;color:var(--muted);margin-top:6px}.amount{position:relative;overflow:hidden;background:linear-gradient(180deg,#162c3e,#132536);border-radius:16px;padding:26px 23px;margin:24px 0;text-align:center;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.04)}.amount::before{content:"";position:absolute;inset:-40% auto auto -20%;width:160px;height:220%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:shimmer 6s linear infinite}@keyframes shimmer{0%{left:-40%}100%{left:120%}}.amount span,.amount small{color:var(--muted);font-size:13px}.amount strong{font-size:clamp(30px,5vw,42px);letter-spacing:-1.3px}.amount strong small{font-size:16px}
.qrwrap{display:flex;justify-content:center;background:white;width:fit-content;padding:18px;margin:16px auto;border-radius:16px;max-width:100%;box-shadow:0 18px 32px rgba(0,0,0,.18)}.qrwrap img,.qrwrap canvas{max-width:100%;height:auto}.copyrow{display:flex;gap:12px;align-items:center;background:#081826;padding:10px 10px 10px 12px;border-radius:12px;border:1px solid var(--line)}.copyrow code{font-size:12px;word-break:break-all;flex:1}
.timer,.statusbox{padding:15px 16px;text-align:center;color:var(--muted)}.timer{background:rgba(255,255,255,.025);border-radius:12px;border:1px solid rgba(255,255,255,.05)}.timer.urgent{color:#ffd67d;border-color:rgba(255,214,125,.35);box-shadow:0 0 0 1px rgba(255,214,125,.08) inset}.statusbox{background:linear-gradient(180deg,#133043,#11283a);border-radius:14px;color:#d5eff7;margin:14px 0;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600}.statusbox.live::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(255,214,125,.5);animation:livePulse 1.6s infinite}@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,214,125,.45)}70%{box-shadow:0 0 0 12px rgba(255,214,125,0)}100%{box-shadow:0 0 0 0 rgba(255,214,125,0)}}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 18px}.meta-grid>div{background:rgba(255,255,255,.024);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:12px}.meta-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.meta-grid strong{font-size:15px;letter-spacing:-.01em}
.center{text-align:center}.notice p{margin:6px 0}h3{margin-top:25px}
.reveal{animation:revealUp .5s ease both}.reveal-delay-1{animation-delay:.06s}.reveal-delay-2{animation-delay:.12s}.reveal-delay-3{animation-delay:.18s}@keyframes revealUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:820px){.nav{flex-direction:column;align-items:flex-start}.nav nav{gap:12px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cards3{grid-template-columns:1fr}.hero{flex-direction:column;align-items:flex-start}.formrow{display:block}.formrow .btn{margin-top:12px}.gridform{grid-template-columns:1fr}.gridform .wide{grid-column:auto}.meta-grid{grid-template-columns:1fr}}
@media(max-width:460px){.container{padding:18px 13px 60px}.card{padding:18px}.stats{grid-template-columns:1fr 1fr}.stat{padding:14px}.stat strong{font-size:18px}.nav{padding:15px}.checkout{margin:10px auto}.brand{font-size:23px!important}}
/* BRE-PAY v0.3 — mejoras visuales y componentes */
:root{--bg:#040b15;--bg2:#0b182b;--panel:#101f32;--green:#40e8aa;--green2:#83f5cf;--line:rgba(169,204,231,.15);--text:#eff7ff;--radius:22px}
body{background:radial-gradient(circle at 12% 4%,rgba(12,157,129,.11),transparent 33%),radial-gradient(circle at 85% 8%,rgba(72,97,196,.12),transparent 30%),radial-gradient(circle at 73% 76%,rgba(24,119,138,.08),transparent 35%),#07111f}
.nav{max-width:none;padding-left:max(26px,calc((100vw - 1200px)/2));padding-right:max(26px,calc((100vw - 1200px)/2));box-shadow:0 10px 28px rgba(0,0,0,.07);min-height:78px}
.nav .brand{gap:6px}.brand-word{color:#fff!important}.brand-word>span{color:var(--green)!important}.brandmark{font-size:37px;line-height:1}.brand-version{font-size:10px;letter-spacing:.09em;margin-left:5px;color:#a7c0d6;border:1px solid rgba(152,184,206,.2);border-radius:8px;padding:4px 6px;font-weight:700}
.nav-link{border-radius:10px;padding:10px 12px;transition:background .16s, color .16s, transform .16s}.nav nav .nav-link:hover{background:rgba(255,255,255,.05);color:white}.nav nav .nav-link.is-active{background:rgba(64,232,170,.1);color:#65f4be;border:1px solid rgba(64,232,170,.12)}.nav-toggle{display:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:#edf8ff;border-radius:11px;padding:7px 11px;font-size:20px}
.nav-signout .linkbtn{padding:9px 4px}.container{padding-top:28px}.sandbox-banner{display:flex;gap:13px;align-items:center;margin-bottom:22px}.sandbox-banner .sandbox-icon{font-size:21px}.sandbox-banner span{font-size:13px}
.hero{border-radius:21px;padding:32px 30px;margin:10px 0 24px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 90% 30%,rgba(61,226,156,.14),transparent 40%),linear-gradient(135deg,rgba(24,51,71,.95),rgba(12,27,43,.95));border:1px solid rgba(118,173,186,.18)}.hero:before{content:"";position:absolute;right:-80px;top:-140px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(87,219,171,.11);box-shadow:0 0 0 50px rgba(87,219,171,.024),0 0 0 115px rgba(87,219,171,.017);z-index:-1}.hero h1{font-size:clamp(26px,3.8vw,43px)}.hero .btn{white-space:nowrap}
.stats{gap:16px}.stat{padding:23px;background:linear-gradient(150deg,rgba(20,43,59,.95),rgba(12,25,41,.94));min-height:136px}.stat span{font-size:12px;letter-spacing:.01em}.stat strong{color:#f3fbff}.stat:first-child strong{color:#a5ffcf}.stat:nth-child(4) strong{color:#bcd3ff}
.dashboard-chart{padding:25px 27px 24px;margin-bottom:25px}.chart-header{display:flex;gap:15px;justify-content:space-between;align-items:flex-start}.chart-header h2{font-size:21px;margin:7px 0 6px}.chart-header p{font-size:12px;margin:0}.chart-counter{background:rgba(62,226,156,.09);border:1px solid rgba(62,226,156,.17);border-radius:16px;color:#a4f7d1;font-size:22px;font-weight:800;padding:13px 17px;white-space:nowrap}.chart-counter small{font-weight:500;font-size:12px;color:var(--muted)}
.bar-chart{height:205px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:22px;margin-top:26px;padding:4px 7px 0;background:repeating-linear-gradient(to top,rgba(255,255,255,.035) 0 1px,transparent 1px 54px);border-radius:10px}.bar-day{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9px;min-width:0}.bar-value{color:#c7d8e7;font-weight:750;font-size:12px}.bar-track{height:150px;width:100%;max-width:54px;display:flex;align-items:flex-end;justify-content:center}.bar-fill{width:100%;height:var(--bar-height);min-height:3px;border:1px solid rgba(255,255,255,.12);border-radius:9px 9px 5px 5px;background:linear-gradient(180deg,#76fbd0,#25b7a1 80%,#188a96);box-shadow:0 0 18px rgba(57,216,164,.16);transform-origin:bottom;animation:barGrow .65s cubic-bezier(.2,.7,.2,1) both}.bar-label{font-size:12px;color:#9db4c7;font-weight:650;padding-bottom:4px}@keyframes barGrow{from{transform:scaleY(.03);opacity:.2}to{transform:scaleY(1);opacity:1}}
.chart-empty{text-align:center;margin:22px 0 0;min-height:175px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px dashed rgba(136,170,191,.2);border-radius:16px;color:#cce3ee}.chart-empty p{font-size:13px;color:var(--muted);margin:2px 0}.empty-orbit{font-size:38px;color:var(--green);line-height:1}.chart-empty.compact{min-height:135px}
.filterbar{display:grid;grid-template-columns:minmax(170px,1.5fr) minmax(128px,.85fr) repeat(2,minmax(120px,1fr)) auto;gap:11px;align-items:end}.filterbar label{margin:0;color:#bdd0de;font-size:12px}.filterbar input,.filterbar select{margin-top:7px;min-width:0}.filteractions{display:flex;align-items:center;gap:9px;padding-bottom:1px}.filteractions .btn{font-size:13px;padding:13px 15px}.ghostlink{font-size:12px;color:#a6d4de;padding:10px}.list-meta{margin-top:23px;font-size:12px;color:#8eabbf}.pagination{display:flex;justify-content:center;align-items:center;gap:18px;padding:22px 0 3px;font-size:13px;color:#adc7d4}.pagination a{background:rgba(255,255,255,.045);border:1px solid var(--line);padding:9px 13px;border-radius:9px;color:#e4f5fc}
.paycard .checkoutmeta{line-height:1.5;word-break:break-word}.paycard .statusbox{min-height:55px}.paycard .meta-grid{font-family:inherit}.copyrow code{user-select:all}
.js-toast{position:fixed;bottom:22px;right:22px;z-index:100;max-width:min(350px,calc(100vw - 44px));border-radius:13px;padding:14px 18px;background:#143a33;color:#c7fbe3;border:1px solid rgba(118,255,196,.35);box-shadow:0 22px 60px rgba(0,0,0,.35);font-size:13px;transform:translateY(12px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}.js-toast.visible{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.nav{flex-wrap:wrap}.nav nav{gap:5px}.nav nav .nav-link{font-size:13px;padding:9px 8px}.filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}.filteractions{justify-content:flex-start}}
@media(max-width:820px){.nav{position:sticky;flex-direction:row;align-items:center;min-height:68px;padding:14px 18px}.nav-toggle{display:block;margin-left:auto}.nav nav{display:none;flex-direction:column;align-items:stretch;width:100%;flex-basis:100%;padding:10px 0 3px;gap:5px}.nav nav.open{display:flex}.nav nav .nav-link{padding:12px 10px}.nav-signout{padding:12px 10px}.container{padding-top:18px}.hero{padding:25px}.bar-chart{gap:11px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.filterbar{grid-template-columns:1fr}.filteractions{justify-content:space-between}.chart-header{flex-direction:column;align-items:stretch}.chart-counter{width:max-content}.chart-header h2{font-size:19px}.bar-chart{gap:5px}.bar-track{height:130px}.bar-label{font-size:10px}.dashboard-chart{padding:18px}.hero{padding:23px 18px}.hero .btn{width:100%}.meta-grid{grid-template-columns:1fr}.nav .brand{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}