.app{--bg:#EAEAE5;--surface:#FFFFFF;--surface2:#F5F5F4;--line:#D6D3D1;--line-soft:#E7E5E4;--text:#1C1917;--text2:#44403C;--muted:#57534E;--btn-bg:#1C1917;--btn-fg:#FFFFFF;--btn-hover:#44403C;--focus:#1C1917;--ok-bg:#ECFDF5;--ok-fg:#065F46;--err-bg:#FEF2F2;--err-fg:#991B1B;--warn-bg:#FFFBEB;--warn-fg:#92400E;--info-bg:#EFF6FF;--info-fg:#1E40AF;--neutral-bg:#F5F5F4;--neutral-fg:#44403C;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}
.app.escuro{--bg:#0F0E0D;--surface:#1C1917;--surface2:#292524;--line:#44403C;--line-soft:#292524;--text:#F5F5F4;--text2:#E7E5E4;--muted:#A8A29E;--btn-bg:#F5F5F4;--btn-fg:#1C1917;--btn-hover:#D6D3D1;--focus:#F5F5F4;--ok-bg:#052E24;--ok-fg:#6EE7B7;--err-bg:#3B0D0D;--err-fg:#FCA5A5;--warn-bg:#3A2305;--warn-fg:#FCD34D;--info-bg:#0E1F4A;--info-fg:#93C5FD;--neutral-bg:#292524;--neutral-fg:#D6D3D1}
.app *{box-sizing:border-box}
.app :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.disp{font-family:'Space Grotesk',Inter,sans-serif;letter-spacing:-0.02em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.lbl{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px}
.nav{display:flex;align-items:center;gap:8px;padding:0 8px;min-height:32px;border-radius:2px;color:var(--text2);text-decoration:none;font-size:12px;font-weight:500}
.nav:hover{background:var(--surface2);color:var(--text)}
.nav.ativo{background:var(--btn-bg);color:var(--btn-fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:0 13px;border-radius:2px;border:1px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);font:600 12px Inter,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;padding:0 10px;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--text);font:500 12px Inter,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn2:hover{background:var(--surface2)}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:999px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill.err{background:var(--err-bg);color:var(--err-fg)}
.pill.warn{background:var(--warn-bg);color:var(--warn-fg)}
.pill.info{background:var(--info-bg);color:var(--info-fg)}
.pill.neutro{background:var(--neutral-bg);color:var(--neutral-fg);border:1px solid var(--line)}
.th{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* === efeitos · nfse.app (v19) === */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.app{--accent:#2563EB;--accent-soft:rgba(37,99,235,.14);--glow:rgba(37,99,235,.32);--aurora2:#7C3AED;--shine:rgba(255,255,255,.35);--ease:cubic-bezier(.16,1,.3,1);--ease-mola:cubic-bezier(.34,1.56,.64,1)}
.app.escuro{--accent:#3B82F6;--accent-soft:rgba(59,130,246,.16);--glow:rgba(59,130,246,.42);--shine:rgba(96,165,250,.35)}
@keyframes surge{0%{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes beam{to{--ang:360deg}}
@keyframes flutua{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-30px,25px)}}
@keyframes brilho{0%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes pulso{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 14px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
@keyframes respira{0%,100%{opacity:.55}50%{opacity:1}}
/* fundo vivo: grade que some nas bordas + dois brilhos flutuando */
.fundo-vivo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fundo-vivo::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;opacity:.28;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 75% 0%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 75% 0%,#000 0%,transparent 75%)}
.aurora{position:absolute;border-radius:999px;filter:blur(90px);opacity:.2;animation:flutua 24s ease-in-out infinite}
.aurora.a1{width:560px;height:560px;right:-140px;top:-200px;background:var(--accent)}
.aurora.a2{width:440px;height:440px;left:32%;bottom:-240px;background:var(--aurora2);opacity:.12;animation-duration:30s;animation-delay:-8s}
.app>aside,.app>main{position:relative;z-index:1}
.app>main{background:transparent}
/* surgimento em cascata */
.app main>*,.app main>div>*,.app main>section>*,.app [style*="grid-template-columns: repeat"]>*{animation:surge .8s var(--ease) backwards}
.app main>*:nth-child(2),.app main>div>*:nth-child(2),.app main>section>*:nth-child(2),.app [style*="grid-template-columns: repeat"]>*:nth-child(2){animation-delay:.07s}
.app main>*:nth-child(3),.app main>div>*:nth-child(3),.app main>section>*:nth-child(3),.app [style*="grid-template-columns: repeat"]>*:nth-child(3){animation-delay:.14s}
.app main>*:nth-child(4),.app main>div>*:nth-child(4),.app main>section>*:nth-child(4),.app [style*="grid-template-columns: repeat"]>*:nth-child(4){animation-delay:.21s}
.app main>*:nth-child(5),.app main>div>*:nth-child(5),.app [style*="grid-template-columns: repeat"]>*:nth-child(5){animation-delay:.28s}
.app main>*:nth-child(n+6),.app main>div>*:nth-child(n+6),.app [style*="grid-template-columns: repeat"]>*:nth-child(n+6){animation-delay:.35s}
.app nav a{animation:surge .6s var(--ease) backwards}
.app nav a:nth-child(2){animation-delay:.05s}.app nav a:nth-child(3){animation-delay:.1s}.app nav a:nth-child(4){animation-delay:.15s}.app nav a:nth-child(5){animation-delay:.2s}.app nav a:nth-child(6){animation-delay:.25s}
/* navegação */
.nav{transition:background .2s,color .2s,transform .25s var(--ease)}
.nav:hover{transform:translateX(2px)}
.nav.ativo{box-shadow:0 6px 18px -8px var(--glow)}
/* botão principal: borda que gira + brilho que passa no hover */
.btn{position:relative;overflow:hidden;border:1.5px solid transparent;background:linear-gradient(var(--btn-bg),var(--btn-bg)) padding-box,conic-gradient(from var(--ang),var(--btn-bg) 0 62%,var(--accent) 82%,var(--btn-bg) 100%) border-box;animation:beam 4s linear infinite;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{background:linear-gradient(var(--btn-hover),var(--btn-hover)) padding-box,conic-gradient(from var(--ang),var(--btn-hover) 0 62%,var(--accent) 82%,var(--btn-hover) 100%) border-box;border-color:transparent;transform:translateY(-1px);box-shadow:0 10px 24px -10px var(--glow)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,transparent,var(--shine),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
.btn:hover::after{animation:brilho .9s var(--ease)}
.btn:active{transform:translateY(0) scale(.98)}
/* botão secundário */
.btn2{transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.btn2:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 6px 16px -10px var(--glow)}
.btn2:active{transform:scale(.98)}
/* cards */
.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 14px 34px -18px var(--glow)}
[style*="grid-template-columns: repeat"]>.card:hover{transform:translateY(-3px)}
/* campos */
.campo{transition:border-color .2s,box-shadow .2s}
.campo:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* selos */
.pill{transition:transform .2s var(--ease-mola)}
.pill:hover{transform:scale(1.05)}
.pill.warn::before,.pill.err::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;animation:respira 1.8s ease-in-out infinite}
/* assistente */
.fab{animation:pulso 2.8s ease-out infinite;transition:transform .25s var(--ease-mola)}
.fab:hover{transform:scale(1.07)}
.painel-ia{animation:surge .45s var(--ease) backwards;transform-origin:bottom right}
/* dica (tooltip) */
.dica{position:relative}
.dica::before{content:attr(data-dica);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;padding:5px 8px;border-radius:4px;background:var(--text);color:var(--surface);font:500 11px Inter,sans-serif;letter-spacing:0;text-transform:none;transition:opacity .2s,transform .25s var(--ease);box-shadow:0 8px 20px -8px rgba(0,0,0,.45);z-index:20}
.dica:hover::before,.dica:focus-visible::before{opacity:1;transform:translate(-50%,0)}
/* faixa que corre */
@keyframes corre{to{transform:translateX(-50%)}}
.faixa{display:flex;width:max-content;animation:corre 48s linear infinite}
/* menu lateral recolhível (24/09/2026) */
.app>aside{transition:width .3s var(--ease),padding .3s var(--ease)}
.lateral-botao{margin-left:auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--muted);cursor:pointer}
.lateral-botao:hover{color:var(--text);background:var(--surface2)}
.lateral-botao svg{transition:transform .3s var(--ease)}
.app.recolhido>aside{z-index:3;width:64px !important;padding-left:8px !important;padding-right:8px !important}
.app.recolhido>aside>div:first-child{flex-direction:column;gap:10px !important;padding:0 !important}
.app.recolhido .lateral-botao{margin-left:0}
.app.recolhido .lateral-botao svg{transform:rotate(180deg)}
.app.recolhido .lateral-texto{display:none !important}
.app.recolhido .nav{font-size:0;gap:0;padding:0;justify-content:center}
.app:not(.recolhido) .nav.dica::before{display:none}
.app.recolhido .nav.dica::before{left:calc(100% + 10px);bottom:auto;top:50%;transform:translate(0,-50%);font-size:11px}
.app.recolhido>aside>div:last-child{justify-content:center;padding-left:0 !important;padding-right:0 !important}
@media (prefers-reduced-motion: reduce){.app *,.app *::before,.app *::after{animation:none !important;transition:none !important}}

/* campos finos e fonte 12 em todas as telas (25/09/2026) */
.app .campo{min-height:28px;padding:4px 8px;font-size:12px;line-height:1.3}
.app select.campo{padding:3px 6px}

/* tamanho do texto: 10 a 16 px, padrão 12 (25/09/2026) */
.app>aside>*,.app>main>*{zoom:var(--z,1)}
.app>main{overflow:auto}
.tam-b{min-height:26px !important;min-width:30px;padding:0 6px !important;font-size:12px !important}
.tam-b:disabled{opacity:.4;cursor:not-allowed}
.app>aside>[aria-label="Tamanho do texto"]{zoom:1}
.app .lbl,.app .th,.app .pill{font-size:max(10px,calc(10px / var(--z,1)))}
.app [style*="font-size: 10px"]{font-size:max(10px,calc(10px / var(--z,1))) !important}
/* === menu do usuário (25/09/2026) — clicar no nome abre para cima === */
.menu-usuario-area{position:relative;display:flex;flex-direction:column;padding-top:8px;border-top:1px solid var(--line)}
.app>aside>.menu-usuario-area{zoom:1}
.usuario-botao{display:flex;align-items:center;gap:6px;width:100%;padding:4px;border:1px solid transparent;border-radius:2px;background:transparent;color:var(--text);cursor:pointer;text-align:left;font:inherit}
.usuario-botao:hover,.usuario-botao[aria-expanded="true"]{background:var(--surface2);border-color:var(--line)}
.usuario-botao .seta{margin-left:auto;color:var(--muted);transition:transform .25s var(--ease)}
.usuario-botao[aria-expanded="true"] .seta{transform:rotate(180deg)}
.menu-usuario{position:absolute;left:0;bottom:calc(100% + 6px);width:236px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px -14px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;gap:2px;animation:surge .25s var(--ease) backwards}
.menu-item{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 8px;border:none;border-radius:2px;background:transparent;color:var(--text2);text-decoration:none;font:500 12px Inter,sans-serif;cursor:pointer;text-align:left;width:100%}
.menu-item:hover{background:var(--surface2);color:var(--text)}
.menu-item.atual{background:var(--btn-bg);color:var(--btn-fg)}
.menu-item .pill{margin-left:auto}
.menu-sep{height:1px;background:var(--line);margin:4px 2px}
.app.recolhido .usuario-botao{justify-content:center;padding:4px 0}

/* ===== nfse-app (web) — extraído do protótipo v63 (prototipo/telas/Main.dc.html) + o que o app real precisa ===== */
html,body{margin:0;background:#0F0E0D}
body{font-family:Inter,system-ui,sans-serif}
.app{min-height:100vh;display:flex;color:var(--text);background:var(--bg);font-size:12px}
.app>aside{width:232px;flex-shrink:0;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;padding:13px 10px;gap:18px;position:sticky;top:0;height:100vh;box-sizing:border-box}
.app>main{flex-grow:1;min-width:0;display:flex;flex-direction:column}
.topo{display:flex;align-items:center;justify-content:space-between;padding:12px 26px;border-bottom:1px solid var(--line);background:var(--surface)}
.conteudo{padding:18px 26px;display:flex;flex-direction:column;gap:13px}
.marca{display:flex;align-items:center;gap:6px;padding:0 4px}
.marca .n{width:32px;height:32px;background:var(--btn-bg);color:var(--btn-fg);display:flex;align-items:center;justify-content:center;border-radius:2px;font:500 13px 'JetBrains Mono',monospace}
.nav svg{flex-shrink:0}
.grade4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.grade2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.tile{padding:10px 13px;display:flex;flex-direction:column;gap:3px}
.tile .num{font:500 26px 'Space Grotesk',Inter,sans-serif;letter-spacing:-.02em}
.sub{font-size:10px;color:var(--muted)}
table.lista{width:100%;border-collapse:collapse;font-size:12px}
table.lista th{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 13px;background:var(--surface2);border-bottom:1px solid var(--line)}
table.lista td{padding:7px 13px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.lista tr.cancelada td{color:var(--muted)}
table.lista tr.cancelada td.valor{text-decoration:line-through}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.dir{text-align:right}
.filtros{padding:10px 13px;display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.filtros label{display:flex;flex-direction:column;gap:4px}
.campo{min-height:28px;padding:4px 8px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--text);font:400 12px Inter,sans-serif}
.seg{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:2px;background:var(--surface2)}
.seg a{min-height:24px;padding:3px 10px;border-radius:2px;color:var(--muted);text-decoration:none;font:500 12px Inter,sans-serif;display:inline-flex;align-items:center}
.seg a.sel{background:var(--btn-bg);color:var(--btn-fg)}
a{color:var(--accent)}
.ficha{display:grid;grid-template-columns:150px minmax(0,1fr);gap:7px 12px;margin:0;font-size:12px}
.ficha dt{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.ficha dd{margin:0}
.aviso{padding:8px 10px;border-radius:2px;font-size:12px;line-height:1.5}
.aviso.err{background:var(--err-bg);color:var(--err-fg)}
.aviso.info{background:var(--info-bg);color:var(--info-fg)}
.aviso.ok{background:var(--ok-bg);color:var(--ok-fg)}
.cartao-login{width:380px;max-width:calc(100vw - 32px);margin:10vh auto;padding:24px;display:flex;flex-direction:column;gap:14px}
.cartao-login label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}
.cartao-login .campo{min-height:36px;font-size:14px}
.qr{background:#fff;padding:10px;border-radius:4px;align-self:center;line-height:0}
.usuario{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.paginas{display:flex;gap:6px;align-items:center;padding:8px 13px;font-size:11px;color:var(--muted)}
@media (max-width: 900px){.app>aside{display:none}.grade4{grid-template-columns:repeat(2,minmax(0,1fr))}.grade2{grid-template-columns:1fr}.conteudo,.topo{padding-left:16px;padding-right:16px}}

/* app: tabela larga rola dentro do cartão, não vaza */
.card{min-width:0;overflow-x:auto}