/* Área do assinante — Machina Investimentos. Mesmos tokens do site público. */
:root{
  --ground:#F2F5F8; --surface:#FFFFFF; --surface-2:#E9EEF4; --bone:#ECE8E0;
  --ink:#0E151E; --ink-2:#3A4755; --muted:#65727F;
  --line:#D8E0E8; --line-strong:#B8C5D2;
  --navy:#16355C; --navy-soft:#E3EAF3; --steel:#48729F;
  --good:#1C6A4E; --bad:#9B3B2E; --warn:#8A5A00; --on-navy:#F4F7FB;
  --shadow:0 1px 2px rgba(14,21,30,.05), 0 10px 28px -16px rgba(14,21,30,.35);
  --r:4px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1118; --surface:#121A23; --surface-2:#18222D; --bone:#1A212C;
    --ink:#E9EEF4; --ink-2:#BCC8D4; --muted:#8C9AA8;
    --line:#233040; --line-strong:#35465C;
    --navy:#9CBCE4; --navy-soft:#16222F; --steel:#78A2CF;
    --good:#61BE95; --bad:#E08A7C; --warn:#E0B45C; --on-navy:#0A1018;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1118; --surface:#121A23; --surface-2:#18222D; --bone:#1A212C;
  --ink:#E9EEF4; --ink-2:#BCC8D4; --muted:#8C9AA8;
  --line:#233040; --line-strong:#35465C;
  --navy:#9CBCE4; --navy-soft:#16222F; --steel:#78A2CF;
  --good:#61BE95; --bad:#E08A7C; --warn:#E0B45C; --on-navy:#0A1018;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif; font-weight:600; margin:0; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:var(--navy)}
button{font:inherit; color:inherit}
[hidden]{display:none !important}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.up{color:var(--good)} .dn{color:var(--bad)}
:focus-visible{outline:2px solid var(--steel); outline-offset:2px; border-radius:2px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}

/* ---------- botões e campos ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:var(--r); font-size:.88rem; font-weight:500; text-decoration:none; border:1px solid transparent; cursor:pointer; line-height:1.2; background:none; transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--navy); color:var(--on-navy)}
.btn-primary:hover{background:color-mix(in srgb,var(--navy) 85%,var(--ink))}
.btn-ghost{border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--navy); color:var(--navy)}
.btn-sm{padding:6px 12px; font-size:.8rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.icon-btn{border:1px solid var(--line-strong); background:transparent; color:var(--muted); width:34px; height:34px; border-radius:var(--r); cursor:pointer; display:grid; place-items:center; padding:0; flex:none}
.icon-btn:hover{color:var(--navy); border-color:var(--navy)}
.linkish{background:none; border:0; padding:0; color:var(--navy); cursor:pointer; text-decoration:underline; text-underline-offset:2px; font-size:.86rem}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=search],select{
  font:inherit; font-size:.92rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); padding:9px 11px; width:100%}
input::placeholder{color:var(--muted)}
select{padding-right:28px}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r); padding:2px; gap:2px; background:var(--surface); flex-wrap:wrap}
.seg button{border:0; background:transparent; padding:6px 11px; border-radius:3px; font-size:.8rem; cursor:pointer; color:var(--ink-2); white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--navy); color:var(--on-navy)}
.chip{display:inline-flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-strong); border-radius:2px; padding:2px 7px; color:var(--muted); white-space:nowrap}
.chip.plano{color:var(--navy); border-color:var(--navy)}
.msg{font-size:.86rem; border-radius:var(--r); padding:10px 12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2)}
.msg.erro{border-color:var(--bad); color:var(--bad); background:transparent}
.msg.ok{border-color:var(--good); color:var(--good); background:transparent}

/* ---------- login ---------- */
.login{min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  background:radial-gradient(900px 420px at 85% -10%, color-mix(in srgb,var(--steel) 14%,transparent), transparent 70%), var(--ground)}
.login-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:30px 28px; display:flex; flex-direction:column; gap:16px}
.login-card h1{font-size:1.6rem}
.login-card form{display:flex; flex-direction:column; gap:14px}
.login-links{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.login-foot{font-size:.78rem; color:var(--muted); text-align:center}
.login-foot a{color:var(--muted)}
.dev-box{border:1px dashed var(--line-strong); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px}
.dev-box .row{display:flex; gap:6px; flex-wrap:wrap}

/* ---------- marca ---------- */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand .mark{width:26px; height:26px; border-radius:4px; background:var(--navy); color:var(--on-navy); display:grid; place-items:center; flex:none}
.brand b{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.92rem; letter-spacing:.24em; text-transform:uppercase}
.brand span{font-size:.66rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase}

/* ---------- app ---------- */
.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--ground) 90%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{max-width:1280px; margin:0 auto; padding:0 20px; height:58px; display:flex; align-items:center; gap:16px}
.tabs{display:flex; gap:4px; margin-left:18px}
.tabs a{text-decoration:none; color:var(--ink-2); font-size:.9rem; padding:6px 12px; border-radius:var(--r)}
.tabs a:hover{color:var(--navy)}
.tabs a[aria-current="page"]{background:var(--navy-soft); color:var(--navy); font-weight:500}
.top-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.top-right .email{font-size:.8rem; color:var(--muted); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme .sun{display:block}
  :root:not([data-theme="light"]) .theme .moon{display:none}
}
.wrap{max-width:1280px; margin:0 auto; padding:24px 20px 48px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.page-head h1{font-size:1.7rem}
.page-head p{color:var(--ink-2); font-size:.92rem; max-width:70ch; margin-top:6px}
.toolbar{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:16px}
.toolbar .grow{flex:1 1 220px; max-width:340px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.foot{border-top:1px solid var(--line); padding:18px 20px 28px; font-size:.76rem; color:var(--muted); max-width:1280px; margin:0 auto; line-height:1.6}
.loading{padding:40px 0; color:var(--muted); font-size:.9rem}
.upsell{border:1px solid var(--line); border-left:3px solid var(--steel); background:var(--surface); border-radius:var(--r); padding:18px 20px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.upsell p{color:var(--ink-2); font-size:.9rem; max-width:70ch}

/* ---------- macro ---------- */
.macro{display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; align-items:start}
.cat{position:sticky; top:74px; max-height:calc(100vh - 92px); overflow:auto; padding:14px}
.cat h2{font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:14px 0 6px}
.cat ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.cat li button{width:100%; text-align:left; border:0; background:transparent; padding:6px 8px; border-radius:3px; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-2)}
.cat li button:hover{background:var(--surface-2)}
.cat li button .box{width:14px; height:14px; border:1.5px solid var(--line-strong); border-radius:3px; flex:none; display:grid; place-items:center}
.cat li button[aria-pressed="true"]{color:var(--ink); font-weight:500}
.cat li button[aria-pressed="true"] .box{background:var(--navy); border-color:var(--navy)}
.cat li button[aria-pressed="true"] .box::after{content:""; width:7px; height:4px; border:2px solid var(--on-navy); border-top:0; border-right:0; transform:rotate(-45deg) translate(1px,-1px)}
.cat li button.lock{color:var(--muted)}
.cat li button.lock .box{border-style:dashed}
.cat .count{font-size:.76rem; color:var(--muted); margin-top:10px}
.grid-series{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.serie{padding:16px 16px 12px; display:flex; flex-direction:column; gap:8px; min-width:0}
.serie-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.serie-head h3{font-size:1rem; line-height:1.3}
.serie-head .unit{font-size:.76rem; color:var(--muted); margin-top:2px}
.serie-val{text-align:right; flex:none}
.serie-val b{display:block; font-family:"Source Serif 4",Georgia,serif; font-size:1.45rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums}
.serie-val span{font-size:.74rem; color:var(--muted)}
.serie-foot{display:flex; justify-content:space-between; gap:12px; font-size:.74rem; color:var(--muted); border-top:1px solid var(--line); padding-top:8px; flex-wrap:wrap}
.serie details summary{cursor:pointer; color:var(--navy)}
.serie table{margin-top:6px}
.empty{padding:40px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--r)}

/* ---------- gráfico ---------- */
.chart{position:relative; width:100%; outline:none; touch-action:pan-y}
.chart svg{display:block; width:100%; overflow:visible}
.chart .grid line{stroke:var(--line); stroke-width:1}
.chart .axis text{fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:10px}
.chart .zero{stroke:var(--line-strong); stroke-width:1}
.chart .line{fill:none; stroke:var(--navy); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .area{fill:var(--navy); fill-opacity:.07}
.chart .rule{stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3}
.chart .dot{fill:var(--navy); stroke:var(--surface); stroke-width:2}
.chart .tip{position:absolute; pointer-events:none; background:var(--ink); color:var(--ground); font-size:.74rem; line-height:1.35; padding:6px 9px; border-radius:3px; white-space:nowrap; transform:translate(-50%,-100%); margin-top:-10px; box-shadow:var(--shadow)}
.chart .tip b{font-family:"IBM Plex Mono",monospace; font-weight:500}

/* ---------- tabelas ---------- */
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); max-width:100%}
table.t{border-collapse:collapse; width:100%; font-size:.84rem}
table.t th,table.t td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap}
table.t th{position:sticky; top:0; background:var(--surface-2); font-weight:500; color:var(--ink-2); font-size:.76rem; z-index:1}
table.t th.l,table.t td.l{text-align:left}
table.t td{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:.8rem}
table.t td.l{font-family:"IBM Plex Sans",sans-serif; font-size:.84rem}
table.t tbody tr:hover{background:var(--surface-2)}
table.t th button{all:unset; cursor:pointer; display:inline-flex; gap:4px; align-items:center}
table.t th button:focus-visible{outline:2px solid var(--steel)}
table.t th[aria-sort] button::after{content:"↕"; opacity:.35; font-size:.7rem}
table.t th[aria-sort="ascending"] button::after{content:"↑"; opacity:1}
table.t th[aria-sort="descending"] button::after{content:"↓"; opacity:1}
table.t tr.click{cursor:pointer}
table.t a.tk{font-family:"IBM Plex Mono",monospace; font-weight:500; text-decoration:none}
table.t a.tk:hover{text-decoration:underline}
.emp-nome{max-width:260px; overflow:hidden; text-overflow:ellipsis}
.table-wrap.tall{max-height:calc(100vh - 250px)}

/* ---------- empresa ---------- */
.back{font-size:.84rem; text-decoration:none; color:var(--muted)}
.back:hover{color:var(--navy)}
.emp-head{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-end; margin:10px 0 20px}
.emp-head h1{font-size:1.9rem}
.emp-head .sub{color:var(--muted); font-size:.86rem; margin-top:4px}
.emp-price{text-align:right}
.emp-price b{font-family:"Source Serif 4",Georgia,serif; font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-bottom:20px}
.kpi{padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.kpi:nth-child(4n){border-right:0}
.kpi:nth-last-child(-n+4){border-bottom:0}
.kpi span{display:block; font-size:.74rem; color:var(--muted)}
.kpi b{display:block; font-family:"Source Serif 4",Georgia,serif; font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px}
.sec{margin-top:26px}
.sec-h{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.sec-h h2{font-size:1.15rem}
.pad{padding:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.mini{padding:14px 14px 10px}
.mini h3{font-size:.92rem}
.mini .unit{font-size:.74rem; color:var(--muted)}

/* ---------- proventos ---------- */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:16px}
.stats > div{padding:14px 16px; border-right:1px solid var(--line)}
.stats > div:last-child{border-right:0}
.stats span{display:block; font-size:.74rem; color:var(--muted)}
.stats b{display:block; font-family:"Source Serif 4",Georgia,serif; font-size:1.3rem; font-weight:600; margin-top:2px}
.dia{margin-top:18px}
.dia h3{font-family:"IBM Plex Mono",monospace; font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); padding-bottom:6px; border-bottom:1px solid var(--line-strong); margin-bottom:0}
table.t tr.grupo th{position:static; background:var(--ground); text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); padding-top:14px; border-bottom:1px solid var(--line-strong)}
.tipo{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:2px; background:var(--surface-2); color:var(--ink-2)}
.cal-nav{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.cal-nav h3{font-size:1.1rem; min-width:170px; text-align:center}
.cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.cal .dow{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:6px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2)}
.cal .d{min-height:92px; padding:6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:3px; min-width:0}
.cal .d.fora{background:var(--ground)}
.cal .d.hoje{box-shadow:inset 0 0 0 2px var(--navy)}
.cal .n{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted)}
.cal .ev{font-family:"IBM Plex Mono",monospace; font-size:.68rem; background:var(--navy-soft); color:var(--navy); border-radius:2px; padding:1px 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; border:0; cursor:pointer; text-align:left}
.cal .mais{font-size:.68rem; color:var(--muted)}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .macro{grid-template-columns:1fr}
  .cat{position:static; max-height:none}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(4n){border-right:1px solid var(--line)}
  .kpi:nth-child(2n){border-right:0}
  .kpi:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .kpi:nth-last-child(-n+2){border-bottom:0}
  .grid-3{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-series{grid-template-columns:1fr}
  .top-in{height:auto; flex-wrap:wrap; padding:10px 16px; gap:10px}
  .tabs{order:3; width:100%; margin-left:0; overflow-x:auto}
  .top-right .email{display:none}
  .brand span{display:none}
  .wrap{padding:18px 16px 40px}
  .stats{grid-template-columns:1fr}
  .stats > div{border-right:0; border-bottom:1px solid var(--line)}
  .stats > div:last-child{border-bottom:0}
  .cal .d{min-height:64px; padding:3px}
  .cal .ev{font-size:.6rem}
  .emp-price{text-align:left}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }