/* Pactual Sindicaturas — tema do app operacional
   Cole em public/tema.css. Não altera marcação. Logo: public/logo-pactual.png */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy-950:#081422; --navy-800:#16273f; --navy-700:#1e3450; --navy-600:#28425f;
  --brass:#3D7FFF; --brass-soft:#8FC1FF;
  --paper:#eef2f7; --card:#f8fafc; --ink:#101820; --sec:#3a4450; --mist:#93a1b5;
  --hl:rgba(16,24,32,0.12); --hl-dark:rgba(61,127,255,0.3);
  --f-display:'Fraunces',Georgia,serif; --f-body:'Inter',-apple-system,sans-serif; --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:2px; --ease:cubic-bezier(.2,.7,.2,1);
  /* estados (semáforo) — tons sóbrios, mesma família fria */
  --red:#a8322c; --redbg:#f6e7e6; --amber:#86600f; --amberbg:#f5eedd; --green:#1f6a50; --greenbg:#e3efe9;
  /* aliases do protótipo */
  --navy:var(--navy-950); --navy2:var(--navy-800); --mut:#66748a; --accent:var(--brass); --line:var(--hl); --blue:#1f4f99;
}

*{box-sizing:border-box;}
body{margin:0; background:#dfe5ed; color:var(--ink); font-family:var(--f-body); font-size:14.3px; line-height:1.55; -webkit-font-smoothing:antialiased;}
.app{max-width:1120px; margin:0 auto; background:var(--paper); min-height:100vh; box-shadow:none; border-left:1px solid var(--hl); border-right:1px solid var(--hl);}
::selection{background:var(--brass); color:#fff;}
a{color:var(--brass);} a:hover{color:var(--navy-950); text-decoration-color:var(--brass-soft);}

/* cabeçalho + logo */
header{background:var(--navy-950); color:#fff; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; position:sticky; top:0; z-index:5;}
.logo{width:138px; height:45px; background:url('logo-pactual.png') left center/contain no-repeat; font-size:0; color:transparent; overflow:hidden;}
.logo small{display:none;}
.who{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);}
.who select{background:var(--navy-800); color:#fff; border:1px solid var(--hl-dark); border-radius:var(--r); padding:8px 10px; font-family:var(--f-body); font-size:13px; letter-spacing:0; text-transform:none; cursor:pointer; transition:border-color .2s var(--ease);}
.who select:hover,.who select:focus{border-color:var(--brass); outline:none;}

/* navegação */
nav{display:flex; gap:2px; padding:0 20px; background:var(--navy-800); border-bottom:1px solid var(--hl-dark); flex-wrap:wrap; position:sticky; top:77px; z-index:4;}
nav button{background:none; border:none; padding:14px 14px 12px; font-family:var(--f-body); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#c3ccd9; cursor:pointer; border-bottom:2px solid transparent; transition:color .2s var(--ease),border-color .2s var(--ease);}
nav button:hover{color:#fff;}
nav button.on{color:#fff; border-bottom-color:var(--brass); font-weight:600;}

main{padding:32px 32px 56px;}
h2{font-family:var(--f-display); font-weight:500; font-size:30px; letter-spacing:-.01em; line-height:1.1; margin:0 0 8px; color:var(--navy-950);}
.sub{font-family:var(--f-mono); color:var(--mut); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px;}

/* indicadores — grade costurada (gap 1px) */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hl); border:1px solid var(--hl); border-radius:var(--r); overflow:hidden; margin-bottom:20px;}
.kpi{background:var(--card); border-radius:0; padding:18px 20px;}
.kpi .n{font-family:var(--f-mono); font-size:36px; font-weight:500; line-height:1; color:var(--navy-950);}
.kpi .l{font-family:var(--f-mono); font-size:11px; color:var(--sec); text-transform:uppercase; letter-spacing:.14em; margin-top:10px;}
.kpi:first-child .n{color:var(--brass);}
.kpi.red{background:var(--card); box-shadow:inset 0 -2px 0 var(--red);} .kpi.red .n{color:var(--red);}
.kpi.amber{background:var(--card); box-shadow:inset 0 -2px 0 var(--amber);} .kpi.amber .n{color:var(--amber);}
.kpi.green{background:var(--card); box-shadow:inset 0 -2px 0 var(--green);} .kpi.green .n{color:var(--green);}
.kpi.red .l,.kpi.amber .l,.kpi.green .l{color:var(--sec);}

/* cartões */
.card{background:var(--card); border:1px solid var(--hl); border-radius:var(--r); padding:18px 20px; margin-bottom:14px; transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(8,20,34,.35);}
.card h3{font-family:var(--f-mono); font-weight:500; margin:0 0 14px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--navy-700);}
.card [style*="inset:22px"]{background:var(--card)!important;}
.card [style*="inset:22px"] > div:first-child{font-family:var(--f-mono); font-weight:500!important;}
.card [style*="border-radius:2px"]{border-radius:0!important;}

/* barras */
.bar{height:6px; background:#dde4ed; border-radius:0; overflow:hidden; margin-top:6px;}
.bar>i{display:block; height:100%; background:var(--brass)!important;}
.card:nth-child(2) .bar>i{background:var(--navy-700)!important;}
.card:nth-child(3) .bar>i{background:var(--brass)!important;}
.card:nth-child(4) .bar>i{background:var(--navy-600)!important;}
.card:nth-child(5) .bar>i{background:var(--brass-soft)!important;}
.card:nth-child(6) .rowb:last-child .bar>i{background:var(--green)!important;}
.card:nth-child(6) .rowb:first-child .bar>i{background:var(--navy-700)!important;}
.rowb{margin-bottom:12px; font-size:13px;}
.rowb .t{display:flex; justify-content:space-between;}
.rowb .t span:last-child{font-family:var(--f-mono); color:var(--navy-950);}

/* filtros */
.fbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.fbar select,.fbar input,.adv select,.sub select{padding:9px 11px; border:1px solid var(--hl)!important; border-radius:var(--r)!important; font-family:var(--f-body); font-size:13px!important; color:var(--ink); background:#fff; transition:border-color .2s var(--ease);}
.sub select{letter-spacing:0; text-transform:none; margin-left:6px;}
.fbar select:hover,.fbar input:hover,.adv select:hover,.fbar select:focus,.fbar input:focus,.adv select:focus{border-color:var(--brass)!important; outline:none;}
.fbar input{min-width:200px; flex:1;}
.fbar input::placeholder{color:var(--mist);}
.presets{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--hl); border-radius:var(--r); font-family:var(--f-body); font-size:12.5px; font-weight:500; color:var(--sec); cursor:pointer; background:#fff; user-select:none; transition:all .2s var(--ease);}
.chip{white-space:nowrap; line-height:1.2;}
.chip:hover{border-color:var(--brass); color:var(--navy-950); transform:translateY(-1px);}
.chip.on{background:var(--navy-950); color:#fff; border-color:var(--navy-950);}
.adv{background:var(--card); border:1px solid var(--hl); border-radius:var(--r); padding:12px 14px; margin-bottom:12px;}
.adv summary{cursor:pointer; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-700); font-weight:500;}
.adv summary:hover{color:var(--brass);}
.adv .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:14px;}
.adv label{font-family:var(--f-mono); font-size:10.5px; color:var(--mut); text-transform:uppercase; letter-spacing:.12em; display:block; margin-bottom:4px;}
.adv select{width:100%;}
.activef{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut);}
.fchip{font-family:var(--f-body); letter-spacing:0; text-transform:none; font-size:12px; background:#e3ecfb; color:var(--blue); border:1px solid rgba(61,127,255,.35); border-radius:var(--r); padding:4px 9px; cursor:pointer; transition:background .2s var(--ease);}
.fchip:hover{background:#d4e2f8;}
.count{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:8px;}

/* lista */
.tlist{background:var(--card); border:1px solid var(--hl); border-radius:var(--r); overflow:hidden;}
.card .trow{margin:0 -20px; padding-left:20px; padding-right:20px;}
.trow{display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--hl); cursor:pointer; transition:background .18s var(--ease);}
.trow:last-child{border-bottom:0;} .trow:hover{background:#fff; box-shadow:inset 2px 0 0 transparent;}
.trow:hover .ti{color:var(--navy-950);}
.hash{font-family:var(--f-mono); color:var(--brass); font-size:12.5px; min-width:52px;}
.trow .ti{flex:1; font-weight:500; color:var(--ink);}
.trow .cn{font-size:12px; font-weight:400; color:var(--mut); margin-top:2px;}
.badge{font-family:var(--f-mono); font-size:10px; font-weight:500; padding:3px 7px; border-radius:var(--r); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; border:1px solid transparent;}
.b-urg{background:var(--redbg); color:var(--red); border-color:rgba(168,50,44,.25);}
.b-open{background:#e3ecfb; color:var(--blue); border-color:rgba(61,127,255,.3);}
.b-done{background:var(--greenbg); color:var(--green); border-color:rgba(31,106,80,.25);}
.b-old{background:var(--amberbg); color:var(--amber); border-color:rgba(134,96,15,.25);}
.b-gar{background:#e6e9f0; color:var(--navy-700); border-color:rgba(30,52,80,.25);}
.empty{padding:28px; text-align:center; color:var(--mut); font-size:13px;}

/* gaveta de detalhe */
.drawer-bg{display:none; position:fixed; inset:0; background:rgba(8,20,34,.55); backdrop-filter:blur(2px); z-index:10;}
.drawer-bg.show{display:block;}
.drawer{position:absolute; top:0; right:0; width:min(480px,94vw); height:100%; background:var(--paper); padding:28px 28px 32px; overflow-y:auto; box-shadow:-20px 0 40px -10px rgba(8,20,34,.4); border-left:1px solid var(--hl-dark);}
.drawer .sub{margin-bottom:10px;}
.drawer h3{font-family:var(--f-display); font-weight:500; letter-spacing:-.01em; margin:0 0 10px; font-size:24px; line-height:1.15; color:var(--navy-950);}
.drawer h3[style]{font-family:var(--f-mono); font-size:11px!important; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-700); margin-top:26px!important; padding-top:18px; border-top:1px solid var(--hl);}
.x{float:right; width:36px; height:36px; border:1px solid var(--hl); border-radius:var(--r); background:#fff; font-size:20px; cursor:pointer; color:var(--sec); line-height:1; transition:all .2s var(--ease);}
.x:hover{border-color:var(--brass); color:var(--navy-950);}
.tl{list-style:none; padding:0; margin:14px 0 0 4px;}
.tl li{position:relative; padding:0 0 18px 20px; border-left:1px solid var(--hl-dark); font-size:13.5px; color:var(--ink);}
.tl li:last-child{border-left-color:transparent;}
.tl li::before{content:''; position:absolute; left:-5px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--brass);}
.tl li:last-child::before{background:var(--brass);}
.tl .dt{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--mut);}
.acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid var(--hl);}
.acts button{flex:1; min-width:120px; min-height:44px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--hl); background:#fff; color:var(--navy-950); font-family:var(--f-body); font-size:13px; font-weight:500; cursor:pointer; transition:all .2s var(--ease);}
.acts button:hover{border-color:var(--brass); transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(8,20,34,.4);}
.acts .prim{flex-basis:100%; background:var(--navy-950); color:#fff; border-color:var(--navy-950);}
.acts .prim:hover{background:var(--brass); border-color:var(--brass);}
.acts .danger{color:var(--red); border-color:rgba(168,50,44,.35);}
.acts .danger:hover{background:var(--redbg); border-color:var(--red);}

/* inspetor */
table.insp{width:100%; border-collapse:collapse; font-size:13.5px;}
table.insp th,table.insp td{text-align:left; padding:12px 10px; border-bottom:1px solid var(--hl);}
table.insp tr:last-child td{border-bottom:0;}
table.insp th{font-family:var(--f-mono); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--mut);}
table.insp td:first-child{font-weight:500;}
table.insp tr:hover td{background:#fff;}
.pct{font-family:var(--f-mono); font-weight:500;}

/* modo assembleia — tela de projetor */
.asm{background:var(--navy-950); color:#fff; border-radius:var(--r); padding:40px; margin-top:6px; border:1px solid var(--hl-dark);}
.asm .top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px; border-bottom:1px solid var(--hl-dark); padding-bottom:26px; margin-bottom:26px;}
.asm .top>div:first-child::before{content:''; display:block; width:150px; height:49px; background:url('logo-pactual.png') left center/contain no-repeat; margin-bottom:22px;}
.asm h1{font-family:var(--f-display); font-weight:500; font-size:clamp(36px,5vw,60px); letter-spacing:-.01em; line-height:1.05; margin:6px 0 0; color:#fff;}
.asm .ey{font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-soft);}
.asm .top [style*="color:#9fb0c6"]{color:#c3ccd9!important; font-family:var(--f-mono); font-size:12px!important; letter-spacing:.06em;}
.asm .qr{background:#fff; border-radius:var(--r); padding:12px; text-align:center; color:var(--navy-950); font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; width:150px;}
.asm .qr div{font-weight:500!important;}
.asm .big{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--hl-dark); border:1px solid var(--hl-dark); border-radius:var(--r); overflow:hidden; margin-bottom:26px;}
.asm .big div{background:var(--navy-800); border:0; border-radius:0; padding:22px;}
.asm .big .n{font-family:var(--f-mono); font-size:clamp(30px,3.6vw,44px); white-space:nowrap; font-weight:500; line-height:1; color:var(--brass-soft); padding:0; background:none;}
.asm .big .l{font-family:var(--f-mono); font-size:11px; color:#c3ccd9; text-transform:uppercase; letter-spacing:.14em; margin-top:12px; padding:0; background:none;}
.asm .cols{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hl-dark); border:1px solid var(--hl-dark); border-radius:var(--r); overflow:hidden;}
.asm .box{background:var(--navy-800); border:0; border-radius:0; padding:22px 24px;}
.asm .box h3{font-family:var(--f-mono); font-weight:500; margin:0 0 16px; font-size:11px; color:var(--brass-soft); text-transform:uppercase; letter-spacing:.16em;}
.asm .box li{font-size:16.5px; line-height:1.45; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(61,127,255,.15); color:#e6ecf4; list-style:none; display:flex; align-items:center;}
.asm .box li:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0;}
.asm .box li b{color:var(--error,#ff8f8f)!important; font-weight:500; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-left:6px;}
.asm .box li span[style]{color:var(--mist)!important;}
.asm .ph{display:inline-block; flex:none; width:46px; height:36px; background:var(--navy-600); border:1px solid var(--hl-dark); border-radius:var(--r); margin-right:12px; vertical-align:middle;}

@media(max-width:620px){
  header{padding:12px 16px;} .logo{width:112px; height:37px;}
  nav{top:61px; padding:0 8px; overflow-x:auto; flex-wrap:nowrap;} nav button{white-space:nowrap; padding:13px 10px 11px;}
  .who .role-l{display:none;} main{padding:20px 16px 40px;} h2{font-size:26px;}
  .fbar select,.fbar input{flex:1 1 100%;}
  .asm{padding:22px;} .asm .cols{grid-template-columns:1fr;} .asm h1{font-size:32px;}
  .asm .big .n{font-size:34px;}
}