/* Chiguipay: paleta y tipografías del Brand Book v1.0 */
:root{--bg:#F4E8D1;--bg-2:#F8F0DF;--card:#FFF9F0;--field:#F5E7C8;--line:#231815;--txt:#231815;--mut:#6E5F55;
--accent:#F8C441;--acc-ink:#231815;--brown:#B87038;--cacao:#5B3A2E;--silver:#BBBBBB;--ok:#2F7D5B;--ok-ink:#fff;--bad:#C2452D;
--butter:#FBE7A9;--okbg:#CFE6DA;--badbg:#F4C9BE;--sun:var(--accent);--ink:var(--acc-ink);
--k1:#FBE7A9;--k2:#CFE6DA;--k3:#EBCBAE;--k4:#E3DED3;--shadow:0 12px 28px rgba(32, 21, 14, .14);--bw:2px;--sh-btn:0 8px 0 rgba(35,24,21,.88);--sh-btn-h:0 12px 0 rgba(35,24,21,.88);--input:#FFFBF3;--link:var(--cacao);--focus:0 0 0 4px rgba(248,196,65,.28);
--head:'Poppins',system-ui,Arial,sans-serif;--body:'Nunito',system-ui,Arial,sans-serif;--mono:'Poppins',system-ui,Arial,sans-serif;--glass:rgba(255,255,255,.28)}
*{box-sizing:border-box;transition:background-color .25s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .16s ease}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at top, rgba(255,255,255,.46), transparent 30%), linear-gradient(180deg,var(--bg-2),var(--bg));color:var(--txt);font:16px/1.55 var(--body)}
main{max-width:460px;margin:0 auto;padding:1rem 1rem 5rem}
main.wide{max-width:820px}
h1,h2{font-family:var(--head);color:var(--txt)}
h1{font-size:2rem;font-weight:800;margin:1.4rem 0 .3rem;letter-spacing:-.02em;line-height:1.15}
h2{font-size:1.15rem;font-weight:700;margin:0 0 .6rem}
.sub{color:var(--mut);margin:0 0 .8rem}
.card{background:var(--card);border:var(--bw) solid var(--line);border-radius:18px;padding:1.2rem;margin:1rem 0;box-shadow:var(--shadow)}
a.card{display:block;color:inherit;text-decoration:none}
a{color:var(--link);text-underline-offset:3px}
label{display:block;font:700 .75rem var(--head);text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:1rem 0 .35rem}
input,textarea,select{width:100%;background:var(--input);color:var(--txt);border:var(--bw) solid var(--line);border-radius:12px;padding:.7rem .8rem;font:inherit}
input:focus,textarea:focus,select:focus{outline:0;box-shadow:var(--focus)}
:focus-visible{outline:2px dashed var(--brown);outline-offset:3px}
input[type=color]{padding:.2rem;height:2.9rem}
input[type=checkbox]{width:auto;margin-right:.5rem;accent-color:var(--brown)}
button,.btn{font:inherit;font-family:var(--head);font-weight:600;cursor:pointer;border:var(--bw) solid var(--line);border-radius:12px;background:var(--card);color:var(--txt);padding:.6rem 1rem;box-shadow:var(--sh-btn);text-decoration:none;display:inline-block;text-align:center;transition:transform .08s,box-shadow .08s}
button:hover,.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--sh-btn-h)}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:none}
button:disabled{opacity:.5;cursor:wait;transform:none}
.main{background:var(--accent);color:var(--acc-ink);width:100%;margin-top:1.1rem;padding:.8rem 1rem;font-weight:700}
.oauth-row{display:grid;gap:.7rem}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;padding:.78rem 1rem;border-radius:12px;border:var(--bw) solid rgba(0,0,0,.08);box-shadow:none;font-weight:800;letter-spacing:.01em;transition:filter .2s ease,transform .12s ease,box-shadow .12s ease}
.oauth-btn:hover{transform:translateY(-1px);filter:brightness(1.03)}
.oauth-btn:active{transform:translateY(0)}
.oauth-btn .oauth-logo{display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;flex:none}
.oauth-btn .oauth-logo svg{display:block;width:100%;height:100%}
.oauth-btn--twitch{background:#9146ff;color:#fff;border-color:#7a39f3}
.oauth-btn--kick{background:#53fc18;color:#0a1307;border-color:#41d910}
.oauth-btn--kick .oauth-logo{color:#0a1307}
.oauth-btn--twitch .oauth-logo{color:#fff}
.btn.main{width:auto;margin:0}
.ok{background:var(--ok);color:var(--ok-ink)}
.no{color:var(--bad)}
.tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.3rem;background:var(--field);padding:.3rem;border:var(--bw) solid var(--line);border-radius:14px;margin:.2rem 0}
.tabs button{border-color:transparent;background:transparent;box-shadow:none;color:var(--mut)}
.tabs button:hover{transform:none;box-shadow:none;color:var(--txt)}
.tabs button.on{background:var(--accent);color:var(--acc-ink);border-color:var(--line)}
.chips{display:flex;gap:.4rem}
.chips button{flex:1;padding:.4rem .7rem;font-size:.9rem}
.chips button.on{background:var(--accent);color:var(--acc-ink)}
.top{display:flex;justify-content:space-between;align-items:center;gap:.8rem}
.bal,.kv,.big,.amt{font-family:var(--head);font-variant-numeric:tabular-nums}
.bal{font-size:2.3rem;font-weight:800;line-height:1.15}
.badge{font:700 .7rem var(--head);text-transform:uppercase;padding:.1rem .55rem;border:var(--bw) solid var(--line);border-radius:99px;white-space:nowrap;color:var(--txt)}
.b-pendiente{background:var(--butter)}.b-aprobada{background:var(--okbg)}.b-rechazada{background:var(--badbg)}
.row{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.65rem 0;border-top:var(--bw) dashed color-mix(in srgb,var(--line) 25%,transparent)}
.row:first-child{border-top:0}
.pay{background:var(--field);border:var(--bw) solid var(--line);border-radius:12px;padding:.1rem .85rem;margin:.6rem 0}
.pay .row button{padding:.2rem .6rem;font-size:.85rem}
.step{display:flex;gap:.7rem;align-items:center}
.step h2{margin:0}
.step b{background:var(--accent);border:var(--bw) solid var(--line);border-radius:50%;width:1.9rem;height:1.9rem;display:grid;place-items:center;flex:none;font:800 .85rem var(--head);color:var(--acc-ink)}
.note{color:var(--mut);font-size:.88rem;margin:.4rem 0 0}
.warn{background:var(--butter)}
.acts{display:grid;grid-template-columns:1fr 1.4fr;gap:.6rem;margin-top:.9rem}
.big{font-size:1.5rem;font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.chk{display:flex;align-items:center;font:inherit;text-transform:none;letter-spacing:0;color:var(--txt);font-size:1rem;margin-top:.9rem}
.kpis,.cols{display:grid;gap:.8rem;margin:1rem 0}
.kpis{grid-template-columns:1fr 1fr}
.kpis .card,.cols .card{margin:0}
.kpi{padding:1rem}
.kpis .card:nth-child(1){background:var(--k1)}.kpis .card:nth-child(2){background:var(--k2)}.kpis .card:nth-child(3){background:var(--k3)}.kpis .card:nth-child(4){background:var(--k4)}
.kpi .sub{font:700 .7rem var(--head);text-transform:uppercase;margin:0;color:var(--txt);opacity:.75}
.kv{font-size:1.5rem;font-weight:800}
.chart{display:flex;align-items:flex-end;gap:2px;height:150px;margin-top:.8rem;border-bottom:var(--bw) solid var(--line)}
.chart i{flex:1;background:var(--brown);border:1.5px solid var(--line);border-bottom:0;border-radius:3px 3px 0 0}
.chart i.z{background:transparent;border:0;border-top:2px solid color-mix(in srgb,var(--line) 25%,transparent)}
.axis{display:flex;justify-content:space-between;color:var(--mut);font:.75rem var(--head);margin-top:.4rem}
.amt{font-weight:700}
@media (min-width:640px){.kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.cols{grid-template-columns:1fr 1fr}}
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,160%);background:var(--txt);color:var(--bg);border:var(--bw) solid var(--line);box-shadow:var(--shadow);padding:.75rem 1.1rem;border-radius:12px;max-width:90vw;transition:transform .25s;font-weight:700;z-index:9}
#toast.show{transform:translate(-50%,0)}
#toast.err{background:var(--bad);color:#fff}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* marca, encabezado, registro y página de inicio */
.hdr{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;margin:.4rem 0 1.3rem}
.hdr .tabs{min-width:13rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--txt);padding:.25rem .4rem;border-radius:12px}
.brand-logo{height:38px;width:auto;display:block;filter:drop-shadow(0 2px 0 rgba(0,0,0,.08));}
.brand:hover{background:rgba(255,255,255,.12)}
.pill{display:inline-block;font:700 .72rem var(--head);background:var(--accent);border:var(--bw) solid var(--line);border-radius:99px;padding:.1rem .65rem;margin-left:.6rem;color:var(--acc-ink)}
.btn{font-family:var(--head)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.role{text-align:left;padding:.9rem;line-height:1.35}
.role b{display:block}.role span{font-family:var(--body);font-weight:400;color:var(--mut);font-size:.85rem}
.role.on{background:var(--accent);color:var(--acc-ink)}.role.on span{color:var(--acc-ink)}
.nav{display:flex;justify-content:space-between;align-items:center;margin:.4rem 0;gap:.6rem;flex-wrap:wrap}
.tag{display:inline-block;font:700 .72rem var(--head);text-transform:uppercase;background:var(--accent);border:var(--bw) solid var(--line);border-radius:99px;padding:.15rem .75rem;margin-bottom:.8rem;color:var(--acc-ink)}
mark{background:linear-gradient(transparent 58%,var(--accent) 58%);color:inherit;padding:0 .1em}
.hero{text-align:center;padding:3rem 0 2rem}
.hero h1{font-size:clamp(2.1rem,7vw,3.3rem);max-width:14ch;margin:0 auto 1rem;letter-spacing:-.03em;line-height:1.08}
.hero p{max-width:36rem;margin:0 auto 1.5rem;color:var(--mut);font-size:1.1rem}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.cta .btn{padding:.8rem 1.6rem}
.mock{display:inline-flex;align-items:center;gap:.9rem;text-align:left;transform:rotate(-2deg);background:var(--accent);color:var(--acc-ink);border:var(--bw) solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:.8rem 1.4rem .8rem .8rem;margin-top:2rem}
.mock img{width:60px;height:auto;display:block}
.mock b{display:block;font:700 1.15rem var(--head)}
.grid3{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid3 .card{margin:0}
.grid3 p{margin:0;color:var(--mut);font-size:.95rem}
.how{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:640px){.how{grid-template-columns:1fr 1fr}}
.how .card{margin:0}
.flow{display:grid;gap:.9rem;margin:1rem 0}
@media (min-width:640px){.flow{grid-template-columns:repeat(4,1fr)}}
.flow .card{margin:0}
.flow .step{margin-bottom:.6rem;flex-direction:column;align-items:flex-start;gap:.5rem}
.flow p{margin:0;color:var(--mut);font-size:.92rem}
.sec{font:700 .75rem var(--head);text-transform:uppercase;color:var(--brown);margin:2.4rem 0 .8rem;letter-spacing:.06em}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.pills span{border:var(--bw) solid var(--line);border-radius:99px;padding:.15rem .8rem;background:var(--card);font-weight:600;font-size:.9rem}
.steps{margin:.3rem 0 0;padding-left:1.2rem;color:var(--mut)}
.steps li{margin:.5rem 0}
.steps li::marker{color:var(--brown);font:800 1rem var(--head)}
.foot{text-align:center;color:var(--mut);font-size:.85rem;margin-top:3rem}
.pw{position:relative}
.pw input{padding-right:5.6rem}
.pw button{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);padding:.2rem .6rem;font-size:.78rem;box-shadow:none;border-width:1.5px}
.pw button:hover,.pw button:active{transform:translateY(-50%);box-shadow:none}

/* ---- Modo oscuro consistente con el claro ---- */
:root[data-theme=dark]{color-scheme:dark;--bg:#0f1115;--bg-2:#171b22;--card:#1d242d;--field:#262d35;--input:#1d232a;--line:rgba(232,223,209,.14);--txt:#f7f3ee;--mut:#bfb5a7;
--accent:#f0c75e;--acc-ink:#1a1209;--brown:#f0c75e;--cacao:#f5ead7;--link:#f5ead7;--ok:#91d39a;--ok-ink:#102417;--bad:#e38e7e;--butter:#433a23;--okbg:#23372d;--badbg:#3b2a2b;
--k1:#2e2a1f;--k2:#1f2d2a;--k3:#2a2b2e;--k4:#262a2e;--shadow:0 14px 32px rgba(0,0,0,.28);--bw:2px;--sh-btn:0 8px 0 rgba(0,0,0,.45);--sh-btn-h:0 12px 0 rgba(0,0,0,.5);--focus:0 0 0 4px rgba(240,199,94,.2);--glass:rgba(18,20,24,.52)}
[data-theme=dark] body{background:radial-gradient(circle at top, rgba(240,199,94,.12), transparent 28%), linear-gradient(180deg,var(--bg-2),var(--bg));}
[data-theme=dark] .brand-logo{filter:brightness(1.12) contrast(1.06) saturate(1.1);}
[data-theme=dark] .brand:hover{background:rgba(255,255,255,.04)}
[data-theme=dark] .tbtn{background:var(--field);color:var(--txt);border-color:var(--line);box-shadow:var(--sh-btn)}
[data-theme=dark] .tbtn:hover{transform:translateY(-1px);box-shadow:var(--sh-btn-h)}
[data-theme=dark] .tabs button.on,[data-theme=dark] .chips button.on,[data-theme=dark] .role.on{background:var(--accent);color:var(--acc-ink);border-color:var(--line)}
[data-theme=dark] .mock{box-shadow:var(--shadow)}
[data-theme=dark] .main{background:var(--accent);color:var(--acc-ink)}
[data-theme=dark] .main:hover,[data-theme=dark] .main:active{background:var(--accent);border-color:var(--line);transform:none;box-shadow:var(--sh-btn)}
.tbtn{font-size:.8rem;padding:.35rem .75rem;border-radius:999px;min-width:7.6rem;background:var(--field);color:var(--txt);transition:transform .18s ease,opacity .2s ease}
.tbtn:hover{transform:translateY(-1px)}
.gbar{height:14px;background:var(--field);border:var(--bw) solid var(--line);border-radius:99px;overflow:hidden;margin:.6rem 0}
.gbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s}
@media (max-width:480px){#nav button{padding:.5rem .15rem;font-size:.8rem}}
.hdr .note{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}