/* `hidden` tem que esconder — sempre. Um display: de classe (flex, grid) ganha
   do padrão do navegador, e o bloco marcado como escondido aparece assim mesmo.
   Já apanhamos disso duas vezes (.us-body, .user-menu); esta é a regra geral. */
[hidden]{display:none !important}

:root{
  --navy:#0f1d33; --navy2:#16294a; --navy3:#1d3357;
  --gold:#c8a24a; --gold2:#e6c66e; --gold3:#f2dd94;
  --ink:#1a2230; --muted:#7d8aa0; --line:#d8c07f; --line-soft:#ece0bd;
  --bg:#ffffff; --card:#ffffff;
  --mesa:#f4eee0;      /* o tom quente que sobrou: fundo de "mesa" atrás de folha de documento */
  /* moldura da ÁREA BRANCA — a marca d'água se centra por ela, não pela tela */
  --lateral:240px; --barra:49px;
  /* ouro polido: os mesmos tons das colunas e do botão de salvar */
  --ouro-luz:#fbeec2; --ouro-alto:#f0d98a; --ouro-meio:#dcb75f; --ouro-fundo:#b08c33;
  --tinta-ouro:#3f2c05;
  --green:#1f9d6b; --green-bg:#e6f6ef;
  --red:#d24b4b; --red-bg:#fbe9e9;
  --amber:#cf9b1f; --amber-bg:#fbf2dc;
  --blue:#2f6fd6; --blue-bg:#e8f0fc;
  --radius:12px; --shadow:0 1px 3px rgba(74,56,14,.13),0 10px 28px rgba(74,56,14,.10);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased;
  /* Fundo BRANCO (pedido do dono, 20/08). O calor da casa segue no ouro da
     barra, na lateral navy e nos filetes — não no papel de parede. */
  background:var(--bg)}
#app{display:flex; min-height:100vh}

/* ============ Sidebar — navy profundo + dourado ornamentado ============ */
#sidebar{width:240px; color:#c9b381; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0;
  background:
    radial-gradient(120% 46% at 50% 2%, rgba(201,162,74,.10), transparent 55%),
    linear-gradient(180deg,#0a1a33 0%, #071528 42%, #040e1f 100%);
  border-right:1px solid rgba(201,162,74,.22);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.35), 2px 0 22px -8px rgba(0,0,0,.5)}
#sidebar>*{position:relative; z-index:1}

/* o botão de recolher mora no ALTO, sozinho; o padding de cima abre a faixa
   dele para que nem um nome de Loja em duas linhas encoste no botão */
.brand{position:relative; padding:34px 12px 4px}
.brand-mark{width:44px;height:44px;border:1.5px solid var(--gold); flex:none; overflow:hidden;
  border-radius:50%; display:grid; place-items:center; padding:0; background:#f7f4ec;
  box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 4px 16px -5px rgba(201,162,74,.55)}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block}
/* O recuo de 30px existia por causa do botão de recolher — e era ele que
   espremia o nome da Loja até virar "Rui Bar…". Agora só o TÍTULO desvia do
   botão; o nome usa a largura inteira e, se for comprido, quebra em duas
   linhas com as colunas acompanhando a altura. */
.brand-head{text-align:center; padding:0 8px}
.brand-title{padding:0 6px}
.brand-title{display:flex; align-items:center; justify-content:center; font-weight:700; color:#f3e7c6;
  font-size:19px; letter-spacing:.2px; font-family:Georgia,"Times New Roman",serif}
.brand-title>span{white-space:nowrap}
.coluna{width:14px; height:33px; flex:none;
  fill:var(--gold2); filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.coluna .col-l{fill:#0a1a33; font-family:Georgia,"Times New Roman",serif; letter-spacing:0}
.auth-title .coluna{width:15px; height:35px}
/* O pórtico ladeia o NOME DA LOJA: Boaz e Jaquim miúdos, um de cada lado. */
.brand-sub{font-size:12px; color:var(--gold2); letter-spacing:.2px; margin-top:3px;
  display:flex; align-items:center; justify-content:center; gap:5px; min-width:0}
/* o nome INTEIRO: quebra em duas linhas em vez de truncar, e as colunas ficam
   coladas a ele (a distância entre elas segue o tamanho do nome) */
.brand-sub>span{min-width:0; line-height:1.25; text-wrap:balance}
.col-mini{height:19px; width:auto; flex:none; display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* No alto da lateral vai a marca do SISTEMA (HiramOS). O esquadro e compasso
   da Loja saiu daqui: virou marca d'água da área de trabalho. */
.brand-frame{display:flex; align-items:center; justify-content:center; margin-top:10px; padding:0 10px}
.marca-app{width:100%; max-width:190px; height:auto; display:block;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
/* fatias antigas da arte (colunas grandes/emblema) seguem definidas para telas
   que ainda as usam (login, landing) */
.col-img{height:100px; width:auto; flex:none; display:block; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.crest{width:104px; height:auto; aspect-ratio:1/1; object-fit:contain; flex:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.brand-div{margin:9px auto 0; width:64%; text-align:center; color:var(--gold2); font-size:9px; line-height:1;
  padding-top:9px; background:linear-gradient(90deg,transparent,rgba(201,162,74,.45),transparent) top/100% 1px no-repeat}
.brand-div::before{content:"✦"}

#nav{display:flex; flex-direction:column; gap:3px; padding:6px 12px 12px; flex:1 1 auto; min-height:0; overflow-y:auto}
#nav button{display:flex; align-items:center; gap:12px; background:none; border:1px solid transparent; color:#c2ad7d;
  padding:10px 12px; border-radius:10px; font-size:14.5px; cursor:pointer; text-align:left; width:100%;
  transition:background .14s, color .14s, border-color .14s}
.nav-ico{width:21px; height:21px; flex:none; stroke:var(--gold); stroke-width:1.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round; opacity:.92}
#nav button:hover{background:rgba(201,162,74,.08); color:#f3e7c6; border-color:rgba(201,162,74,.18)}
#nav button:hover .nav-ico{stroke:var(--gold2); opacity:1}
#nav button.active{color:#f8edd2; border-color:rgba(201,162,74,.55);
  background:linear-gradient(90deg, rgba(201,162,74,.18), rgba(201,162,74,.04));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 14px -5px rgba(201,162,74,.45)}
#nav button.active .nav-ico{stroke:var(--gold3); opacity:1}
#nav::-webkit-scrollbar{width:9px}
#nav::-webkit-scrollbar-thumb{background:rgba(201,162,74,.28); border-radius:8px; border:2px solid transparent; background-clip:padding-box}

/* Ano + estado do salvamento moraram no rodapé da lateral até 18/08; agora
   vivem na barra superior direita (#topbar), no tema claro do conteúdo. */
.year-pick{display:flex; align-items:center; gap:6px}
.year-pick label{font-size:12px; color:#4a3407; font-weight:600}
.year-pick select{background:rgba(255,255,255,.85); color:var(--navy); border:1px solid rgba(120,90,20,.42);
  border-radius:7px; padding:3px 7px; font-size:12.5px; font-weight:600}
.year-pick select{flex:none; width:auto; text-align:center}
.year-pick select:hover{border-color:rgba(120,90,20,.8); background:#fff}
.save-state{font-size:12px; color:#6b5b3e; white-space:nowrap}
.save-state.saving{color:var(--amber)}
#btnSalvar{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; cursor:pointer;
  background:linear-gradient(180deg,#f0d98a 0%, #c9a24a 52%, #a8842f 100%);
  color:#2a1e06; border:1px solid #f2dd94; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:700;
  box-shadow:0 3px 12px -3px rgba(201,162,74,.6), inset 0 1px 0 rgba(255,255,255,.45)}
#btnSalvar svg{width:16px; height:16px; stroke:#2a1e06; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
#btnSalvar:hover{filter:brightness(1.06)}
#btnSalvar:active{transform:translateY(1px)}
/* ramos de louro dos dois lados (igual ao mockup) */
#btnSalvar::before,#btnSalvar::after{content:""; width:14px; height:22px; flex:none; opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30' fill='none' stroke='%232a1e06' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M10 29V2'/%3E%3Cpath d='M10 24c-3.2 0-5.4-2.2-5.4-4.4 3.2 0 5.4 2.2 5.4 4.4z'/%3E%3Cpath d='M10 24c3.2 0 5.4-2.2 5.4-4.4-3.2 0-5.4 2.2-5.4 4.4z'/%3E%3Cpath d='M10 18.5c-3 0-5-2-5-4 3 0 5 2 5 4z'/%3E%3Cpath d='M10 18.5c3 0 5-2 5-4-3 0-5 2-5 4z'/%3E%3Cpath d='M10 13c-2.7 0-4.6-1.8-4.6-3.6 2.7 0 4.6 1.8 4.6 3.6z'/%3E%3Cpath d='M10 13c2.7 0 4.6-1.8 4.6-3.6-2.7 0-4.6 1.8-4.6 3.6z'/%3E%3Cpath d='M10 8c-2.3 0-3.9-1.5-3.9-3 2.3 0 3.9 1.5 3.9 3z'/%3E%3Cpath d='M10 8c2.3 0 3.9-1.5 3.9-3-2.3 0-3.9 1.5-3.9 3z'/%3E%3C/svg%3E") center/contain no-repeat}
body.side-collapsed #btnSalvar::before,body.side-collapsed #btnSalvar::after{display:none}

/* ---- botão recolher a lateral ---- */
#btnColapsar{position:absolute; top:6px; right:8px; width:26px; height:26px; display:grid; place-items:center; z-index:2;
  padding:0; background:rgba(0,0,0,.18); border:1px solid rgba(201,162,74,.25); border-radius:8px; color:var(--gold2); cursor:pointer;
  transition:color .13s,border-color .13s,background .13s}
#btnColapsar svg{width:16px; height:16px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round}
#btnColapsar:hover{color:var(--gold3); border-color:rgba(201,162,74,.6); background:rgba(201,162,74,.14)}
#btnColapsar:focus-visible{outline:2px solid var(--gold2); outline-offset:2px}
/* lateral recolhida — só os ícones (rótulo vira title=) */
body.side-collapsed #sidebar{width:66px}
body.side-collapsed{--lateral:66px}
body.side-collapsed .brand{padding:14px 0 8px; text-align:center}
body.side-collapsed .brand-head,body.side-collapsed .brand-frame,body.side-collapsed .brand-div{display:none}
body.side-collapsed #btnColapsar{position:static; margin:0 auto; width:30px; height:26px}
body.side-collapsed #nav{padding:10px 8px}
body.side-collapsed #nav button{justify-content:center; padding:11px 0; gap:0; font-size:0; border-color:transparent}
body.side-collapsed #btnSalvar{padding:9px 0; width:100%; gap:0}
body.side-collapsed #btnSalvar span{display:none}

/* ---- login / primeiro acesso (Fase 1 multi-loja) ---- */
#authRoot{display:none}
#authRoot.open{display:flex; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 46% at 50% 2%, rgba(201,162,74,.10), transparent 55%),
    linear-gradient(180deg,#0a1a33 0%, #071528 42%, #040e1f 100%)}
.auth-card{width:min(392px,92vw); background:#fff; border-radius:16px; padding:26px 26px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.5)}
.auth-brand{display:flex; gap:12px; align-items:center; margin-bottom:18px}
.auth-brand .brand-mark{width:42px;height:42px;border:1.5px solid var(--gold); color:var(--gold);
  border-radius:11px; display:grid; place-items:center; font-size:21px;
  background:linear-gradient(160deg,#12294f,#0a1a38)}
.auth-title{font-weight:700; font-size:20px; font-family:Georgia,"Times New Roman",serif; color:var(--navy)}
.auth-sub{font-size:12.5px; color:var(--muted)}
.auth-loja{font-weight:700; color:var(--navy); margin:-4px 0 12px; font-size:14.5px}
.auth-err{color:var(--red); font-size:13px; margin:4px 0 10px; font-weight:600}
.auth-btn{width:100%; padding:11px; border:0; border-radius:10px; cursor:pointer; font-size:14.5px; font-weight:700;
  background:linear-gradient(180deg,#f0d98a 0%, #c9a24a 52%, #a8842f 100%); color:#2a1e06;
  border:1px solid #f2dd94; box-shadow:0 3px 12px -3px rgba(201,162,74,.6), inset 0 1px 0 rgba(255,255,255,.45)}
.auth-btn:hover{filter:brightness(1.06)}
.auth-btn:active{transform:translateY(1px)}
/* console do desenvolvedor */
.dev-card{width:min(1060px,96vw); max-height:92vh; overflow:auto}
/* grid de telas liberadas (modal de usuários) */
.telas-row td{background:#f8f1de; padding:7px 12px 9px}
.tela-chk{display:inline-flex; align-items:center; gap:4px; margin:2px 10px 2px 0; font-size:12px; color:#48526a; cursor:pointer; white-space:nowrap}
.tela-chk input{width:auto; margin:0}
/* checkbox/rádio de LINHA INTEIRA (frases longas): o marcador fica absoluto à
   esquerda e o TEXTO FLUI normalmente (sem flex, que quebrava as palavras) */
.chk-block{display:block; position:relative; padding-left:27px; margin:8px 0; font-size:13px;
  color:#48526a; cursor:pointer; line-height:1.5; white-space:normal}
.chk-block>input{position:absolute; left:1px; top:2px; width:auto; margin:0}
.chk-block .hint{white-space:normal; display:inline}

/* ============ toggles / cartões de usuário (permissões) ============ */
.us-list{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.us-card{border:1px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--card)}
.us-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.us-card-head b{font-size:14.5px}
.us-card-acts{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.us-card-acts select{padding:6px 8px; font-size:13px; border:1px solid var(--line); border-radius:8px; background:#fff}
.us-sec-lbl{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:13px 0 3px}
.us-list-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 8px}
.us-perm-btn{display:flex; align-items:center; gap:7px; width:100%; margin-top:10px; padding:7px 10px;
  border:1px solid var(--line); border-radius:9px; background:#f7f8fb; cursor:pointer;
  font-size:12.5px; font-weight:700; color:var(--ink); text-align:left}
.us-perm-btn:hover{background:#eef1f6}
.us-perm-btn.aberto{background:#eef4ff; border-color:#cddcff}
.us-perm-caret{display:inline-block; width:12px; color:var(--muted); font-weight:400}
.us-perm-resumo{font-weight:400}
.us-body[hidden]{display:none}
/* seção recolhível (acordeão) — cabeçalho com resumo + seta que gira; usado no portal do irmão */
details.acc{overflow:hidden}
details.acc>summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 16px; user-select:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::marker{content:""}
details.acc>summary:hover{background:var(--line-soft,#f6f7f9)}
.acc-title{font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; color:var(--ink)}
.acc-resumo{margin-left:auto; font-size:13px; font-weight:600; white-space:nowrap}
.acc-resumo.ok{color:var(--green)}
.acc-resumo.alerta{color:var(--amber,#b8860b)}
.acc-caret{flex:none; color:var(--muted); font-size:15px; transition:transform .18s ease; transform:rotate(0deg)}
details.acc[open]>summary .acc-caret{transform:rotate(90deg)}
.acc-body{padding:0 16px 16px}
.sw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1px}
.sw{position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; color:var(--ink);
  padding:7px 8px; border-radius:9px; user-select:none; transition:background .12s}
.sw:hover{background:#f2f5fb}
.sw>input{position:absolute; opacity:0; width:0; height:0}
.sw .track{position:relative; width:38px; height:22px; border-radius:11px; background:#ccd3e0; flex:none; transition:background .16s}
.sw .track::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .16s}
.sw>input:checked+.track{background:var(--green)}
.sw>input:checked+.track::after{transform:translateX(16px)}
.sw>input:focus-visible+.track{box-shadow:0 0 0 3px rgba(47,111,214,.35)}

/* badge do usuário logado (rodapé da lateral) */
/* ---- barra superior: usuário/config no canto direito (padrão dos apps) ---- */
/* A barra de cima é FILETE, não faixa pintada. O barroco de verdade é ouro em
   LINHA — filete duplo de papel timbrado, letra pequena e espaçada, ornamento
   miúdo. A tarja maciça de ouro era grossa e chapada; aqui o ouro aparece nos
   fios, no aro do medalhão e nas letras, sobre marfim. */
#topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:flex-end; gap:14px;
  padding:5px 26px; min-height:44px;
  /* FOLHEADO A OURO: folha fina, clara e luminosa — brilho no alto, tom quente
     descendo, e as juntas da folha em riscos quase invisíveis. Não é a tarja
     maciça de antes: a barra continua fina e fechada pelo filete duplo. */
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.16) 0 1px, rgba(255,255,255,0) 1px 34px),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#f8ebc6 0%, #efdca4 48%, #e5ca86 100%);
  border-bottom:3px double rgba(140,106,26,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 0 rgba(255,255,255,.5)}
.topbar-right{display:flex; align-items:center; gap:12px; min-width:0}
#userBox{position:relative; flex:none}
.user-chip{display:flex; align-items:center; gap:8px; border:1px solid #e6c66e;
  background:linear-gradient(180deg,#1b3055,#0a1a33);
  border-radius:999px; padding:2px 10px 2px 3px; cursor:pointer; color:#f3e7c6; font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 8px -4px rgba(20,14,2,.5);
  transition:border-color .13s, box-shadow .13s}
.user-chip:hover{border-color:#f7e7ae}
.user-chip .user-txt small{color:#c9b381}
.user-av{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#3f2c05; background:linear-gradient(180deg,#f6e6b4,#d9b45f);
  box-shadow:0 0 0 1px rgba(168,132,47,.55)}
/* Troca de visualização: cargo · irmão. Dois campos num aro fino de ouro —
   quem tem cargo TAMBÉM é irmão, e alternar não pode custar três cliques. */
.modo-switch{display:inline-flex; align-items:center; border:1px solid rgba(120,90,20,.42);
  border-radius:999px; overflow:hidden; background:rgba(255,255,255,.85); height:26px}
.modo-switch button{border:0; background:none; font:inherit; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; color:#7a6a4a; padding:0 11px; height:100%; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px}
.modo-switch button+button{border-left:1px solid rgba(168,132,47,.35)}
.modo-switch button:hover{color:var(--navy); background:rgba(201,162,74,.12)}
.modo-switch button.on{background:linear-gradient(180deg,#16294a,#0a1a33); color:#f3e7c6; cursor:default}
.modo-switch svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.user-txt{display:flex; flex-direction:column; line-height:1.15; text-align:left; min-width:0}
.user-txt b{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px}
.user-txt small{font-size:10.5px; color:var(--muted); letter-spacing:.03em}
.user-chip .chev{width:13px; height:13px; flex:none; stroke:#d9c188; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.user-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:248px; padding:8px; z-index:60;
  background:var(--card); border:1px solid rgba(168,132,47,.45); border-radius:14px; box-shadow:var(--shadow)}
.user-menu[hidden]{display:none}
.um-head{padding:8px 12px 12px; margin-bottom:6px; border-bottom:3px double rgba(201,162,74,.4)}
.um-nome{font-weight:700}
.um-sub{font-size:12px; color:var(--muted); margin-top:2px}
.um-item{display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:9px;
  background:none; font:inherit; font-size:13.5px; color:var(--ink); cursor:pointer; text-align:left}
.um-item:hover{background:#f8f1de}
.um-item svg{width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.um-item.danger{color:var(--red)}
.um-item.danger:hover{background:var(--red-bg)}

/* Tela estreita (não é celular ainda): o aviso de salvamento sai antes de
   espremer o seletor do ano e o chip. */
@media (max-width:1080px){ .save-state{display:none} }

/* Main */
/* O esquadro e compasso com o G vira a MARCA D'ÁGUA do fundo branco: fixa na
   tela, clara, atrás de tudo. A lateral e a barra são opacas, então ela só
   aparece na área de trabalho — que é onde o dono queria ver. */
#main{flex:1; min-width:0; position:relative}
#main::before{content:""; position:fixed; z-index:0; pointer-events:none;
  top:var(--barra); left:var(--lateral); right:0; bottom:0;
  background:url("emblema.png") center center / min(72vh, 720px) no-repeat;
  opacity:.085}
#view{position:relative; z-index:1}
#sidebar{z-index:3}
#topbar{z-index:40}
#view{padding:26px 30px 60px; max-width:1180px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px;
  flex-wrap:wrap; padding-bottom:12px; border-bottom:3px double rgba(201,162,74,.5)}
.page-head h1{font-size:24px; margin:0 0 4px; font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.2px; color:var(--navy)}
.page-head .sub{color:var(--muted); font-size:13px}
/* O título e a linha de explicação ENCOLHEM; os botões, não.
   Sem isto o bloco da esquerda toma a largura do texto corrido, empurra as
   ações para baixo, e lá elas quebram de novo — a busca numa linha e o botão
   noutra, cada um num lugar. A explicação passar para duas linhas não custa
   nada; o cabeçalho desmontado custa. */
.page-head > :first-child{flex:1 1 300px; min-width:0}
.head-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  justify-content:flex-end; flex:1 1 auto}
/* Faltando espaço, quem cede é a BUSCA — não o botão. Uma caixa de busca mais
   estreita continua servindo; o botão caindo para a linha de baixo é o que
   desmonta o cabeçalho. */
.head-actions .search{height:38px; flex:1 1 170px; min-width:130px}
.head-actions .btn{height:38px; display:inline-flex; align-items:center; gap:6px}

/* Buttons */
.btn{border:1px solid var(--line); background:#fff; color:var(--ink); padding:8px 14px; border-radius:9px;
  font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.btn:hover{border-color:var(--gold); background:#fdfaf1}
.btn.primary{background:var(--navy); color:#fff; border-color:#8a6d24;
  box-shadow:inset 0 0 0 1px rgba(242,221,148,.28)}
.btn.primary:hover{background:var(--navy2)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#3a2c08}
.btn.gold:hover{background:var(--gold2)}
.btn.ghost{background:none;border-color:transparent}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.danger{color:var(--red);border-color:#eccaca}
.btn.danger:hover{background:var(--red-bg)}

/* Data em três caixas: dia · mês · ano (ver dataSelHTML no app.js) */
/* Uma data é uma data: não cresce com a largura do formulário. Sem o teto, o
   popup largo esticava o "mês" por meia tela e o trio ficava desengonçado. */
.data-sel{display:flex; gap:6px; align-items:center; max-width:340px}
.data-sel select{padding:9px 8px; font-size:14px; min-width:0}
.data-sel .ds-d{flex:0 0 74px}
.data-sel .ds-m{flex:1 1 auto; max-width:160px}
.data-sel .ds-a{flex:0 0 92px}

/* Etiquetas da ata: o que faz uma ata ser achável um ano depois */
.ata-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ata-tag{display:inline-flex;align-items:center;gap:5px;background:#f8f1de;border:1px solid rgba(201,162,74,.55);
  color:#5a4413;border-radius:999px;padding:3px 10px;font-size:12.5px;font-weight:600;line-height:1.5}
.ata-tag.mini{font-size:11.5px;padding:2px 8px;margin:0 4px 4px 0}
.ata-tag-x{border:0;background:none;color:#a3873f;cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 2px}
.ata-tag-x:hover{color:var(--red)}

/* Editor de texto: a barra padrão de qualquer app, no cromo da casa */
.rt-barra{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:6px 8px;
  border:1px solid var(--line);border-bottom:0;border-radius:9px 9px 0 0;
  background:linear-gradient(180deg,#fffdf6,#f8f2e2)}
.rt-b{border:1px solid transparent;background:none;border-radius:6px;cursor:pointer;
  min-width:28px;height:26px;padding:0 6px;font-size:13px;color:var(--navy);line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.rt-b:hover{background:#fff;border-color:rgba(168,132,47,.5)}
.rt-b:active{background:#f3e6c7}
.rt-sel{height:26px;padding:0 4px;font-size:12px;border:1px solid rgba(168,132,47,.45);
  border-radius:6px;background:#fff;color:var(--navy);max-width:150px}
.rt-sel.rt-pt{max-width:74px}
.rt-sep{width:1px;height:18px;background:rgba(168,132,47,.4);margin:0 4px}
.rt-cor{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:26px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:700;color:var(--navy)}
.rt-cor:hover{background:#fff;box-shadow:0 0 0 1px rgba(168,132,47,.5)}
.rt-cor.rt-marca{color:#d9b45f}
.rt-cor input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.rt-campo{border:1px solid var(--line);border-radius:0 0 9px 9px;background:#fff;
  padding:12px 14px;font-size:14px;line-height:1.6;overflow:auto;max-height:52vh}
.rt-campo:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,.16)}
.rt-campo ul,.rt-campo ol{margin:.3em 0 .3em 1.4em;padding-left:1em}
.rt-campo p,.rt-campo div{margin:0 0 .15em}

.fil-desc ul,.fil-desc ol{margin:.4em 0 .4em 1.3em;padding-left:1em}
.fil-desc p,.fil-desc div{margin:0 0 .35em}

/* Cards & KPIs */
.cards{display:grid; gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card.pad{padding:18px 20px;
  box-shadow:inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(201,162,74,.22), var(--shadow)}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow)}
.kpi .label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600}
.kpi .value{font-size:25px; font-weight:700; margin-top:6px; letter-spacing:-.5px}
.kpi .meta{font-size:12px; margin-top:4px; color:var(--muted)}
.kpi .meta.up{color:var(--green)} .kpi .meta.down{color:var(--red)}
.kpi.accent{background:linear-gradient(135deg,var(--navy),var(--navy3)); border-color:var(--navy)}
.kpi.accent .label{color:var(--gold2)} .kpi.accent .value{color:#fff} .kpi.accent .meta{color:#aebfd8}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.card h3{margin:0 0 14px; font-size:16px; font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.2px; color:var(--navy)}
.card.pad>h3::before, .card.pad>.card-head h3::before{content:"\2726"; color:rgba(168,132,47,.75); font-size:9px;
  margin-right:9px; vertical-align:3px; font-family:-apple-system,sans-serif}
.card .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card .card-head h3{margin:0}

/* Tables */
.tbl-wrap{overflow:auto; border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:9px 12px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line)}
thead th{background:#fdf9ee; color:#7a6122; font-weight:700; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.12em; position:sticky; top:0; z-index:2; border-bottom:1px solid rgba(168,132,47,.5);
  box-shadow:0 2px 0 -1px rgba(201,162,74,.28)}
tbody tr:hover{background:#fdf8ec}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.total-row td{font-weight:700; background:#fdf9ee; border-top:3px double rgba(168,132,47,.55)}
.name-cell{position:sticky; left:0; background:#fff; z-index:1; font-weight:600}
tbody tr:hover .name-cell{background:#fdf8ec}
thead .name-cell{background:#fdf9ee; z-index:3}
/* Chancelaria → Frequência/Votação: tabela compacta (colunas estreitas) */
.freq-tbl th,.freq-tbl td{padding:6px 8px}
.freq-tbl .name-cell{white-space:normal; max-width:200px; min-width:120px; line-height:1.25}
.freq-tbl td.num,.freq-tbl th.num{padding-left:6px; padding-right:8px}
/* convite + notificar lado a lado (sem quebrar linha) */
.acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap}
.acts .btn{white-space:nowrap}
/* KPI clicável (ex.: card "Faltas seguidas" abre a lista) */
.kpi[data-act]{cursor:pointer; transition:box-shadow .12s ease, transform .12s ease}
.kpi[data-act]:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
/* colunas ordenáveis: cabeçalho clicável + seta de direção */
th.th-sort{cursor:pointer; user-select:none; -webkit-user-select:none}
th.th-sort:hover{background:#f3ead0}
th.th-sort::after{content:"⇅"; margin-left:5px; font-size:9px; opacity:.3; font-weight:400}
th.th-sort[data-sortdir="asc"]::after{content:"▲"; opacity:.85}
th.th-sort[data-sortdir="desc"]::after{content:"▼"; opacity:.85}
/* editor das cartas */
.ec-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.ec-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.ec-col textarea{width:100%; font-family:inherit; line-height:1.5; font-size:13px}
.ec-prev{white-space:pre-wrap; background:#faf8f2; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; line-height:1.5; max-height:190px; overflow:auto; color:#333}
@media (max-width:760px){ .ec-grid{grid-template-columns:1fr} .acts{flex-wrap:wrap} }

/* Mensalidades matrix cells */
.mcell{width:34px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;
  cursor:pointer;font-size:12px;font-weight:700;user-select:none}
.mcell.paid{background:var(--green-bg); color:var(--green)}
.mcell.unpaid{background:#f1f3f8; color:#c2c8d4}
.mcell.isento{background:#33405c; color:#aeb9d0}
.mcell.future{background:transparent;color:#dfe3ec;cursor:default}
.mcell:hover:not(.future){outline:2px solid var(--gold)}
.mcell.paid::after{content:"\2713"} .mcell.unpaid::after{content:"\2022"} .mcell.isento::after{content:"\2014"}

/* badges */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:700}
.badge{white-space:nowrap}
.badge.ok{background:var(--green-bg);color:var(--green)}
.badge.warn{background:var(--amber-bg);color:var(--amber)}
.badge.bad{background:var(--red-bg);color:var(--red)}
.badge.info{background:var(--blue-bg);color:var(--blue)}
.badge.grau{background:#eef1f7;color:#56627a}

/* forms */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
/* botão dentro de campo não é campo: não estica com a largura do formulário
   (num popup largo, "＋ Adicionar filho(a)" virava uma faixa de ponta a ponta) */
.field > .btn{align-self:flex-start}
.field label{font-size:12px;font-weight:600;color:#48526a}
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);width:100%}
/* altura de linha FIXA nos campos de uma linha: com `normal` cada fonte dá
   uma altura, e o campo de data (abaixo) precisa de um número para igualar */
input,select{line-height:1.25}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.15)}
/* <input type="date"> no Safari não é um campo de texto: no iPhone vira um
   "botão" cinza com a data centralizada e mais baixo que os vizinhos; no Mac
   fica mais ALTO que eles (o miolo ::-webkit-datetime-edit tem altura
   própria) — foi o que o dono viu no "Registrar tronco" (16/09/2026): a caixa
   da Data descendo abaixo das de dinheiro e PIX. Sem a aparência nativa ele
   obedece ao mesmo padding/borda/altura dos outros campos e a data fica à
   esquerda como qualquer texto. O calendário continua abrindo ao tocar. */
input[type="date"],input[type="time"],input[type="month"]{
  -webkit-appearance:none;appearance:none;display:block;text-align:left;background-color:#fff;
  /* a MESMA altura do campo de texto (linha + 9px de padding e 1px de borda
     em cima e embaixo), em vez da que o miolo nativo inventa em cada motor */
  height:calc(1.25em + 20px);min-height:0;line-height:1.25}
input[type="date"]::-webkit-date-and-time-value,input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value{text-align:left;min-height:1.25em;margin:0}
input[type="date"]::-webkit-datetime-edit,input[type="time"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit{padding:0;line-height:1.25}
input[type="date"]::-webkit-calendar-picker-indicator{padding:0;margin:0;width:1.1em;height:1.1em;cursor:pointer}
/* checkbox "inverter colunas" do console: escapa do input width:100%/padding/borda global */
.dv-inv{width:auto;padding:0;border:0;background:none;box-shadow:none;margin:0;vertical-align:-1px}
.dv-invlbl{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.row-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* TRÊS campos irmãos cabem numa linha só. Com as duas colunas fixas, o terceiro
   caía sozinho numa segunda linha ocupando METADE dela — é o que se via no
   "Registrar tronco" (Data | Em dinheiro / Em PIX e meia linha vazia). São 21
   telas assim no app, então o conserto é aqui e não em cada uma.
   Vale só onde o bloco NÃO declara as próprias colunas (a ficha do irmão
   declara: `150px 1fr 260px`), e só com EXATAMENTE três campos — quatro já
   ficam bem em 2x2. Navegador sem `:has()` simplesmente mantém o de hoje. */
.row-fields:not([style*="grid-template-columns"]):has(> .field:nth-child(3)):not(:has(> .field:nth-child(4))){
  grid-template-columns:repeat(3,minmax(0,1fr));
}
/* LINHA REPETIDA COM BOTÃO DE TIRAR (filhos, graus filosóficos): dois campos e
   o ✕. Na grade de 2 colunas o botão caía sozinho na 2ª linha com 521px de
   largura — um ✕ do tamanho de um campo. Coluna própria para ele, do tamanho
   dele. No celular a linha vira 1 coluna (regra geral, abaixo) e o botão
   continua pequeno, encostado à esquerda. */
/* a linha da indicação: em que passo o processo está, sem alargar a tabela */
.ind-linha-resumo{margin-top:4px;max-width:300px;font-weight:400;white-space:normal}
.linha-tirar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.linha-tirar>.btn{width:auto;justify-self:start}
.search{max-width:260px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .spacer{flex:1}

/* modal */
#modalRoot{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:200;
  background:rgba(15,29,51,.45)}
#modalRoot.open{display:flex}
.modal{background:#fff;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(30,20,4,.38);width:min(540px,94vw);
  max-height:90vh;overflow:auto;padding:24px}
.modal.wide{width:min(1100px,94vw);max-height:92vh}
/* Nota de direção (18/08, depois do "ficou grosseiro"): barroco aqui é OURO EM
   LINHA — filete duplo, aro fino, fleurão miúdo, letra pequena e espaçada.
   Faixa maciça de ouro e traço grosso é cartaz, não talha. Ao acrescentar algo
   novo, prefira `3px double rgba(168,132,47,.5)` a uma barra pintada. */

/* Documento longo (ata, prancha). A leitura é quase sempre no computador, e
   isso aqui vai virar papel assinado — então mostramos como FOLHA: janela
   larga, e dentro dela uma página com margem, medida de linha de documento
   (~96 caracteres) e entrelinha de leitura. */
.doc-page{background:var(--mesa);border:1px solid var(--line-soft);border-radius:12px;
  max-height:70vh;overflow:auto;padding:18px}
.doc-folha{white-space:pre-wrap;background:var(--card);border:1px solid var(--line-soft);
  border-radius:8px;box-shadow:0 6px 20px rgba(16,30,54,.07);
  max-width:84ch;margin:0 auto;padding:30px 38px;
  font-size:15.5px;line-height:1.75;letter-spacing:.1px}
/* A ATA NA TELA é a mesma do papel: título, "A Gl∴", quadro de cargos em duas
   colunas com o fio, corpo corrido e justificado com as aberturas em negrito.
   Antes era o texto cru (um cargo por linha, tudo à esquerda) e o Secretário
   via uma coisa na tela e outra na impressão. */
.doc-folha.doc-ata{white-space:normal;line-height:1.55}
.doc-ata .par{margin:0 0 .6em;text-align:justify}
.doc-ata .par.pre{white-space:pre-wrap}
.doc-ata .ata-titulo{font-weight:700;text-decoration:underline;margin:0 0 .5em}
.doc-ata .ata-gl{font-weight:700;text-align:center;margin:0 0 .5em}
.doc-ata table.cargos{border-collapse:collapse;margin:.3em 0 1em 14%;width:72%;max-width:100%}
/* a tela é o papel: mesma linha estreita da impressão (ver table.cargos em secretaria.js) */
.doc-ata table.cargos td{border-bottom:1px solid var(--line-soft);padding:1px 8px;line-height:1.15;vertical-align:bottom}
.doc-ata table.cargos td.cg{width:34%;white-space:nowrap}
.doc-ata .rico{white-space:normal}
.modal h2{margin:0 0 4px;font-size:20px;font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.2px;color:var(--navy)}
.modal .modal-sub{color:var(--muted);font-size:13px;margin-bottom:16px;
  padding-bottom:12px;border-bottom:3px double rgba(201,162,74,.42)}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:30px;font-size:13.5px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.25);transition:.25s;z-index:300;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)} #toast.ok{background:var(--green)}

/* misc */
.empty{text-align:center;color:var(--muted);padding:50px 20px}
.empty .big{font-size:40px;margin-bottom:8px}
.hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.pill-tabs{display:inline-flex;background:#eef1f7;border-radius:10px;padding:3px}
.pill-tabs button{border:0;background:none;padding:7px 15px;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;color:var(--muted)}
.pill-tabs button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#48526a;margin-top:10px}
.legend span{display:inline-flex;align-items:center}
.mono{font-variant-numeric:tabular-nums}
.right{text-align:right}
.bar-track{background:#eef1f7;border-radius:6px;height:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:6px;background:var(--green)}
a.link{color:var(--blue);cursor:pointer;text-decoration:none}
a.link:hover{text-decoration:underline}
.conf{font-weight:700}
.conf.hi{color:var(--green)} .conf.md{color:var(--amber)} .conf.lo{color:var(--muted)}

/* miniatura do GM (pixel-art estilo Tibia) */
.gm-ico{width:18px;height:18px;image-rendering:pixelated;vertical-align:-4px}
.gm-ico-lg{width:30px;height:30px;image-rendering:pixelated}
#userBox .gm-ico{width:16px;height:16px;vertical-align:-3px}
/* GM girando no topo do console */
.gm-spin{width:34px;height:34px;image-rendering:pixelated;animation:gmspin 2.8s linear infinite}
@keyframes gmspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.gm-gif{width:34px;height:34px;image-rendering:pixelated}
/* ícone SVG inline (substitui emoji na interface) — herda a cor do texto */
.ic{width:1.05em; height:1.05em; vertical-align:-.14em; flex:none;
  stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round}
h1 .ic,h2 .ic{vertical-align:-.08em; opacity:.92}
.btn .ic,.auth-btn .ic{margin-right:.35em}
.ic.solid{fill:currentColor; stroke:none}
/* jóia oficial do cargo (imagem dourada) no título das telas */
.joia{height:1.5em; width:1.5em; object-fit:contain; vertical-align:-.45em; margin-right:.14em; flex:none}
h1 .joia{height:1.5em; width:1.5em}
/* jóia no botão do menu lateral (troca o ícone de linha) */
.nav-joia{width:26px; height:26px; object-fit:contain; flex:none; opacity:.9; transition:opacity .15s}
#nav button:hover .nav-joia,#nav button.active .nav-joia{opacity:1}

/* ============ Secretaria (sub-abas) ============ */
/* Tesouraria: menu horizontal (azul marinho) das subseções financeiras */
/* As 11 abas somavam 1147px e o #view tem teto de 1180px (1120 úteis): faltavam
   27px e a "Prestação" caía sozinha na segunda linha — e como o teto é do
   CONTEÚDO, abrir a janela ou usar um monitor maior nunca ajudava, só aumentava
   o branco à direita. Padding e vão menores devolvem 77px: cabe em uma linha,
   com folga para mais uma aba. Continua com flex-wrap: acima disso ela quebra
   em duas linhas em vez de vazar. */
.tes-nav{display:flex; flex-wrap:wrap; gap:3px; background:var(--navy); border:1px solid #0b1526;
  border-radius:12px; padding:6px; margin-bottom:18px; box-shadow:0 8px 22px rgba(15,29,51,.20)}
.tes-tab{border:0; background:transparent; color:#c9b381; font-weight:600; font-size:13px;
  padding:9px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; letter-spacing:.2px}
.tes-tab:hover{background:rgba(255,255,255,.08); color:#fff}
.tes-tab.active{background:linear-gradient(180deg,var(--ouro-alto),var(--ouro-meio)); color:var(--tinta-ouro);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

.sec-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 16px; border-bottom:1px solid var(--line); padding-bottom:0}
.sec-tab{display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid transparent;
  border-bottom:2px solid transparent; color:var(--muted); padding:8px 12px; border-radius:8px 8px 0 0;
  font-size:13.5px; cursor:pointer; transition:color .12s, border-color .12s, background .12s}
.sec-tab:hover{color:var(--ink); background:#f0f3f9}
.sec-tab.active{color:var(--navy); border-bottom-color:var(--gold); font-weight:600}
.sec-tab .ic{width:1.05em;height:1.05em}
.sec-count{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; font-size:11px;
  font-weight:700; border-radius:9px; background:#e9edf5; color:#5b6577}
.sec-tab.active .sec-count{background:var(--gold); color:#3a2c08}
.sec-ordem{margin:8px 0 0; padding-left:22px} .sec-ordem li{margin:3px 0; line-height:1.4}

/* ============ Filantropia Unificada ============ */
.fil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px;margin-top:16px}
.fil-card{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;border-left:3px solid var(--gold)}
.fil-card:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(16,30,54,.10),0 12px 32px rgba(16,30,54,.10)}
.fil-card *{pointer-events:none}   /* o card inteiro é o clique */
.fil-card-tit{font-weight:700;font-size:15px;line-height:1.25}
.fil-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.fil-prog{position:relative;height:10px;border-radius:6px;background:#edf0f6;margin-top:10px;overflow:hidden}
.fil-prog-conf{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--green),#27b57e);border-radius:6px}
.fil-prog-inf{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(45deg,#cfe4da 0 6px,#e2efe9 6px 12px);border-radius:6px}
.fil-alert{background:var(--red-bg);border:1px solid #eccaca;color:#7a2f2f;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13px}
.fil-alert.warn{background:var(--amber-bg);border-color:#ecd9a8;color:#6d5310}
.fil-alert .link{cursor:pointer;text-decoration:underline}
.pix-box{background:linear-gradient(160deg,#fdf8ec,#f5ecd8);border:1px solid var(--line);border-radius:10px;padding:12px}
.pix-chave{font-size:15px;font-weight:700;margin-top:2px;word-break:break-all}
/* SUGESTÃO DE CONTA FIXA: o cartão mostra a conta inteira (mediana, média,
   menor, maior) porque o Tesoureiro decide pelo número, não pelo nome. */
.sg-item-box{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;cursor:pointer;background:#fff}
.sg-item-box:hover{background:#fdf8ec}
.sg-item-box.instavel{border-color:#ecd9a8;background:#fffdf7}
.sg-item-box input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.sg-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sg-valor{font-size:16px;font-weight:700;white-space:nowrap}
.sg-nums{width:auto;margin:6px 0 2px;font-size:12px}
.sg-nums td{border:0;padding:1px 14px 1px 0;white-space:nowrap;color:var(--muted,#666)}
.sg-nums td.num{text-align:right;padding-right:22px;color:inherit}
.sg-grupo{margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--line)}
.sg-grupo:first-child{margin-top:2px;padding-top:0;border-top:0}
.sg-grupo h3{margin:0 0 2px;font-size:14.5px}
.sg-grupo.aviso h3{color:var(--amber)}

/* o irmão escolhendo o que pagar: linha larga, dedo-amigável (ele usa no celular) */
.pix-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);
  border-radius:9px;margin-bottom:6px;cursor:pointer;background:#fff;font-size:14px}
.pix-item:hover{background:#fdf8ec}
.pix-item input{width:18px;height:18px;flex:0 0 auto}

/* portal do irmão: sem menu lateral, conteúdo centrado */
body.portal #sidebar #nav, body.portal .year-pick, body.portal #btnSalvar, body.portal .save-state{display:none}
body.portal #view{max-width:940px;margin:0 auto}

/* eventos: linha de quem NÃO foi fica discreta (o quadro inteiro aparece) */
.ev-nao td{opacity:.5}
.ev-nao:hover td{opacity:.8}

/* ============ HiramOS: landing da raiz (a página do sistema) ============ */
.landing{width:min(560px,94vw);max-height:92vh;overflow:auto;display:flex;flex-direction:column;align-items:center;
  background:#fff;border-radius:18px;padding:34px 26px 26px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.landing-logo{width:min(380px,82%);height:auto}
.landing-tag{margin-top:12px;text-align:center;color:#4a5568;font-size:14px;line-height:1.6;max-width:420px}
.landing-sec{margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a94a6}
.landing-lojas{width:100%;display:flex;flex-direction:column;gap:10px}
.landing-card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid #e3d9c2;border-radius:12px;
  text-decoration:none;background:linear-gradient(180deg,#fffdf8,#faf6ec);transition:box-shadow .15s,border-color .15s}
.landing-card:hover{border-color:var(--gold,#c9a24a);box-shadow:0 6px 18px rgba(160,130,60,.18)}
.landing-card .lc-nome{font-weight:700;color:#14213d;font-size:15px}
.landing-card .lc-end{font-size:12.5px;color:#a5842e;font-weight:600}

/* ============ Filantropia: cartão-estrela do portal ============ */
.fil-star{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid #e0d5ba;background:linear-gradient(135deg,#fffdf6,#f8f0dc)}
.fil-star-btn{font-size:15px;padding:12px 22px}


/* ---- Biblioteca: a capa da obra ao lado do nome ----
   Miniatura da primeira página, gerada uma vez no envio. Proporção fixa de
   folha (3:4) para a linha da tabela não dançar conforme o formato do PDF, e
   um marcador com a inicial quando não há capa — a coluna tem de ter sempre a
   mesma largura, senão a lista fica serrilhada. */
.bib-linha{display:flex; gap:11px; align-items:flex-start}
.so-estreito{display:none}   /* só aparece no celular (ver o bloco de 640px) */
.bib-linha-txt{min-width:0}
.bib-capa{
  flex:0 0 auto; width:42px; height:56px; border-radius:3px; object-fit:cover;
  object-position:top center; background:#fff;
  border:1px solid var(--linha,#e6ddc8); box-shadow:0 1px 3px rgba(60,45,15,.16);
}
.bib-capa.vazia{
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-size:19px; color:var(--gold,#a8863a);
  background:linear-gradient(160deg,#fbf7ec,#f2ead6);
}
/* no cartão do resultado da pesquisa ela é um pouco menor: ali o título manda */
.card-head .bib-capa{width:34px; height:45px}

/* régua dos 12 meses do portal (mensalidades do irmão) */
.pt-meses{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;max-width:560px}
.pq-k{white-space:nowrap}

.ata-cargos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
/* ===== TRÂMITE DA INDICAÇÃO DE PROFANO =====
   O semáforo do Secretário. Verde/amarelo/vermelho tem que ser legível de
   relance E fora da cor: quem não distingue vermelho de verde lê o símbolo na
   bolha (✓ / número / !) e o texto da nota. Cor sozinha nunca é o recado. */
.aviso{border:1px solid var(--line-soft);background:var(--mesa);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:14px;line-height:1.55}
.aviso.bad{border-color:var(--red);background:var(--red-bg)}
.ind-resumo-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.ind-barra{height:7px;border-radius:20px;background:#eef1f7;overflow:hidden}
.ind-barra-in{height:100%;background:linear-gradient(90deg,var(--ouro-meio),var(--ouro-alto));transition:width .25s}
.ind-fase{margin-top:16px}
.ind-fase h3{margin:0 0 8px;font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.ind-passo{display:flex;gap:12px;padding:12px 14px;margin-bottom:8px;background:var(--card);
  border:1px solid var(--line-soft);border-left:4px solid #d6dae3;border-radius:var(--radius)}
.ind-passo.cor-verde{border-left-color:var(--green)}
.ind-passo.cor-amarelo{border-left-color:var(--amber)}
.ind-passo.cor-vermelho{border-left-color:var(--red);background:var(--red-bg)}
.ind-passo.cor-cinza{opacity:.62}
.ind-bolha{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;background:#eef1f7;color:#56627a}
.ind-passo.cor-verde .ind-bolha{background:var(--green-bg);color:var(--green)}
.ind-passo.cor-amarelo .ind-bolha{background:var(--amber-bg);color:var(--amber)}
.ind-passo.cor-vermelho .ind-bolha{background:var(--red);color:#fff}
.ind-corpo{flex:1;min-width:0}
.ind-topo{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ind-lei{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.ind-det{font-size:12.5px;color:#4a5568;line-height:1.55;margin-top:3px}
.ind-nota{font-size:12.5px;font-weight:600;margin-top:5px}
.ind-passo.cor-vermelho .ind-nota{color:var(--red)}
.ind-passo.cor-amarelo .ind-nota{color:var(--amber)}
.ind-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ind-chip{font-size:11.5px;padding:2px 8px;border-radius:20px;background:#eef1f7;color:#56627a;
  max-width:100%;overflow-wrap:anywhere}
.ind-chip.ok{background:var(--green-bg);color:var(--green)}
.ind-chip.falta{background:var(--amber-bg);color:var(--amber)}
.ind-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
/* a regra global põe width:100% em todo input — aqui a data é um campo curto
   dentro de uma linha de ações, não um campo de formulário */
.ind-data{padding:4px 8px;font-size:12.5px;width:auto;flex:0 0 auto}
.ind-arq{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
tr.ind-falta td:first-child{color:var(--amber);font-weight:600}
/* o <label class="btn"> que embrulha o input de arquivo tem que parecer botão */
label.btn{cursor:pointer;display:inline-flex;align-items:center}


@media(max-width:640px){.ata-cargos{grid-template-columns:1fr}}

/* ============ celular: cara de aplicativo ============ */
@media(max-width:640px){
  /* o trâmite no celular: a bolha e o texto empilham antes de espremer */
  .ind-passo{padding:10px 11px;gap:9px}
  .ind-acoes{gap:6px}
  .ind-acoes .btn{flex:1 1 auto}
  .ind-data{flex:1 1 130px;min-width:0;width:auto}
  /* Os documentos do dossiê no celular: quatro colunas viravam 1900px de
     rolagem lateral, e é justamente aqui que o Secretário trabalha pelo
     telefone (fotografa a certidão e anexa). Vira lista. */
  .ind-docs table, .ind-docs tbody{display:block;width:100%}
  .ind-docs thead{display:none}
  .ind-docs tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
    padding:10px 2px;border-bottom:1px solid var(--line-soft)}
  .ind-docs tr:last-child{border-bottom:0}
  .ind-docs td{display:block;border:0;padding:0}
  .ind-docs td.name-cell{flex:1 1 100%;min-width:0;font-weight:600}
  .ind-docs td.ind-lei-td{flex:0 0 auto;font-size:11.5px}
  .ind-docs td.num{flex:1 1 auto;text-align:right;white-space:normal}
  .ind-docs .ind-arq{justify-content:flex-start}
  .auth-card{width:min(392px,94vw);padding:22px 18px 18px}
  .landing{padding:26px 16px 20px}
  .fil-star{flex-direction:column;align-items:stretch}
  .fil-star-btn{width:100%;padding:15px 0;font-size:16px}
  /* proporções do celular: 60px de padding e cartões que não podiam encolher
     (min-width:auto da grade) empurravam a página além da tela — daí a rolagem
     lateral. minmax(0,1fr) deixa a coluna encolher; o resto é escala. */
  #view{padding:14px 12px 44px}
  .page-head{gap:10px; margin-bottom:14px}
  .page-head h1{font-size:19px}
  .page-head .sub{font-size:12.5px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px}
  .kpi{min-width:0; padding:12px 13px}
  .kpi .label{font-size:11px; letter-spacing:.2px}
  /* 17px mantém 'R$ 137.240,00' em UMA linha no cartão de 145px — em 19px
     o valor quebrava depois do 'R$', que fica feio. */
  .kpi .value{font-size:17px; letter-spacing:-.2px; overflow-wrap:anywhere}
  .kpi .meta{font-size:11px}
  .card.pad{padding:14px}
  /* título + selo do cartão numa linha só não cabem no celular */
  .card-head{flex-wrap:wrap; row-gap:6px}
  /* portal do irmão: 12 meses viram 2 linhas de 6; tabelas quebram texto */
  .pt-meses{grid-template-columns:repeat(6,1fr); max-width:none; gap:8px 6px}
  .pq-k{white-space:normal}
  .tb{width:100%; table-layout:fixed}
  .tb td{overflow-wrap:anywhere; white-space:normal}
  .grid2>*,.grid3>*{min-width:0}
  .empty{padding:34px 12px}
  .empty .big{font-size:32px}
  /* no celular todo formulário vira 1 coluna. O !important vence os
     grid-template-columns INLINE de algumas linhas (Graus com 3 seletores de
     data, endereço CEP/rua/compl, bairro/cidade/UF) — sem ele, 3 date-pickers
     de ~340px cada estouravam a tela e se sobrepunham no portal do irmão. */
  .row-fields{grid-template-columns:1fr !important}
  /* CAMPO DE FORMULÁRIO NÃO PODE TER MENOS DE 16px: abaixo disso o Safari do
     iPhone dá zoom na página inteira quando o dedo toca a caixa, e não desfaz.
     A busca da Biblioteca começava com a tela pulando. */
  input,select,textarea{font-size:16px}
  /* Biblioteca no celular: a tabela do acervo tem 7 colunas e media 1251px
     dentro de uma faixa de 365px. `.tb` faz o texto quebrar (o th continua
     nowrap pelo seletor global, daí a linha abaixo), a coluna do título deixa
     de ser fixa (sozinha ela era mais larga que a tela e cobria o botão "ler")
     e o secundário sai — o mesmo remédio de `.save-state` lá em cima. */
  .bib-tbl th{white-space:normal}
  .bib-tbl .name-cell{position:static}
  .bib-tbl .so-largo{display:none}
  /* A capa come 53px da célula do nome. Com a coluna do grau ainda de pé, o
     título ficava com 17px e quebrava UMA LETRA POR LINHA. No celular o grau e
     o rito descem para dentro da célula, a coluna deles sai, e a miniatura
     encolhe um pouco — a lista tem de caber, e é ela que serve para escolher. */
  .bib-tbl .so-estreito{display:block; margin-top:4px}
  .bib-linha{gap:9px}
  .bib-capa{width:38px; height:51px}
  .bib-capa.vazia{font-size:16px}
  /* NO CELULAR A TABELA VIRA LISTA. Com sete colunas viradas em três, a coluna
     do nome ficava com 73px e o título quebrava em quatro linhas ao lado da
     capa. Aqui cada obra é uma FAIXA: capa e texto à esquerda, ações à direita,
     e o título fica com a largura que sobra de verdade. Mesmo HTML — só o
     display muda, que é o que mantém uma render function só. */
  .bib-tbl, .bib-tbl tbody{display:block; width:100%}
  .bib-tbl thead{display:none}
  .bib-tbl tr{display:flex; align-items:center; gap:10px; padding:10px 2px;
              border-bottom:1px solid var(--linha,#e6ddc8)}
  .bib-tbl tr:last-child{border-bottom:0}
  .bib-tbl td{display:block; border:0; padding:0}
  .bib-tbl td.name-cell{flex:1 1 auto; min-width:0}
  /* a coluna de ações precisa PODER encolher: com o rótulo longo ("devolver ao
     acervo") ela empurrava o título para 35px na aba das retiradas, a 320px */
  .bib-tbl td.num{flex:0 1 auto; min-width:0; max-width:44%; text-align:right}
  .bib-tbl .tbl-vazia{flex:1 1 auto}
  /* os botões "citar" e "abrir na página" ficavam colados e com 26px de alto,
     bem abaixo do alvo de toque; aqui (e só aqui) eles crescem e respiram */
  .bib-passagem{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .bib-passagem .btn.sm{padding:9px 12px;font-size:13px}
  /* A coluna de ações traz `white-space:nowrap` INLINE, e inline vence media
     query — por isso o !important, pelo mesmo motivo do .row-fields logo acima.
     Sem ele, na tela do CARGO (onde a lateral come 92px) a faixa da tabela fica
     com 283px para 304px de conteúdo e o lápis nasce fora da área visível. */
  .bib-tbl td.num{white-space:normal !important}
  .bib-tbl td.num .btn.sm{margin-top:4px}
  /* o piso de 16px não alcançava os seletores de data (regra própria, mais
     específica): o zoom do Safari continuava em "Meus dados" e na ficha */
  .data-sel select{font-size:16px}
  .head-actions{flex-wrap:wrap; gap:6px}
  .head-actions .btn{flex:1 1 auto; justify-content:center}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal{width:96vw;max-height:92vh;max-height:92dvh;overflow:auto}
  .modal.wide{width:96vw}
  /* no celular não há espaço para margem de folha: a página é a tela */
  .doc-page{padding:0;background:transparent;border:0;max-height:64vh}
  .doc-folha{padding:16px;font-size:14px;line-height:1.65;max-width:none}
  .doc-ata table.cargos{margin-left:0;width:100%}
  body.portal #view{padding:0 max(4px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom))}
  /* no portal a lateral é só a marca (o nav some) — num aparelho de 375px
     ela comia 240px e deixava 135 pro conteúdo. No celular, some inteira. */
  body.portal #sidebar{display:none}
  body.portal{--lateral:0px}
  :root{--barra:42px}
  /* barra superior no celular: só o essencial em linha */
  #topbar{padding:4px 10px; gap:8px; min-height:42px}
  .modo-switch button{padding:0 8px; font-size:0}          /* só os ícones cabem */
  .modo-switch svg{width:15px;height:15px}
  .topbar-right{gap:8px}
  .user-txt{display:none}
  .user-chip{padding:4px; border-radius:999px}
  .user-chip .chev{display:none}
  /* fixed NÃO serve aqui: o backdrop-filter da barra vira bloco de contenção.
     Absoluto ancorado à direita, com largura limitada à tela. */
  .user-menu{right:0; min-width:0; width:min(260px, calc(100vw - 20px))}
  .year-pick label{display:none}
  .save-state{display:none}
}

/* aparelhos bem estreitos (iPhone SE antigo, 320px): dois cartões lado a lado
   não cabem com valores de milhares — vira uma coluna só. */
@media(max-width:345px){
  .kpis{grid-template-columns:1fr}
  #view{padding:12px 10px 40px}
}

/* Seleção múltipla nas tabelas do Orçamento: a coluna da caixinha fica estreita
   e sem ordenação (clicar no cabeçalho dela não reordena nada), e a barra de
   ação só aparece quando há linha marcada. */
.sel-cell{width:34px;text-align:center;vertical-align:middle;padding-right:0}
.sel-cell input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--navy)}
.sel-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  padding:8px 12px;border:1px solid var(--line-soft);border-left:3px solid var(--red);
  background:var(--mesa);border-radius:var(--radius);font-size:13px}
.sel-bar[hidden]{display:none}

/* GASTOS DO PERÍODO: a rosca em cima com os três maiores ao lado, e a lista
   inteira embaixo ocupando a largura toda. A regra global `th,td{white-space:
   nowrap}` é o que fazia esta tela rolar para o lado — as dicas longas de cada
   categoria não quebravam linha e empurravam a tabela. Aqui elas quebram, e as
   colunas de número têm largura fixa para a descrição ficar com o resto. */
.gp-topo{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.gp-top3{flex:1 1 260px;min-width:230px}
.gp-rank{list-style:none;margin:8px 0 0;padding:0}
.gp-rank li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.gp-rank li:last-child{border-bottom:0}
.gp-rank .pos{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--mesa);
  color:#7a6a4a;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.gp-rank .cor{flex:0 0 auto;width:11px;height:11px;border-radius:50%}
.gp-rank .nome{flex:1 1 auto;min-width:0;font-weight:600;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-rank .nome .hint{display:block;font-weight:400}
.gp-rank .val{flex:0 0 auto;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;font-size:13.5px}
.tbl-gastos table{table-layout:fixed;width:100%}
.tbl-gastos th,.tbl-gastos td{white-space:normal;overflow-wrap:anywhere}
.tbl-gastos .c-cor{width:28px}
.tbl-gastos .c-n{width:62px}
.tbl-gastos .c-tot{width:122px;white-space:nowrap}
.tbl-gastos .c-ver{width:104px}
.tbl-gastos .c-data{width:94px;white-space:nowrap}
.tbl-gastos .c-val{width:112px;white-space:nowrap}
.tbl-gastos .c-ed{width:52px}
/* a descrição do lançamento abre o editor: o cursor e o sublinhado no hover
   dizem isso antes do clique */
.tbl-gastos .gp-abrir{cursor:pointer}
.tbl-gastos .gp-abrir:hover{text-decoration:underline;text-decoration-color:var(--line)}
@media (max-width:620px){
  .tbl-gastos .c-n,.tbl-gastos .c-ver{width:auto}
  .tbl-gastos .c-tot{width:100px}
}