:root { --azul: #08045A; --ouro: #C99B40; --creme: #F7F4ED; --linha: #E6E6EE; --texto: #1B1B2F; --suave: #6B6B80;
  --ok: #E2F0D9; --ok-t: #27500A; --env: #E3EEFB; --env-t: #0C447C; --ag: #FAEEDA; --ag-t: #6B3D06; --err: #FCE8E8; --err-t: #8A1C1C; --atr: #F9C9C9; --atr-t: #7A1010; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--texto); font: 14px/1.45 "Segoe UI", Arial, sans-serif; }
header { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 3px solid var(--ouro); flex-wrap: wrap; }
header img { height: 44px; }
.marca { font-size: 22px; color: var(--azul); }
.sub { color: var(--suave); }
.esp { flex: 1; }
.comp { color: var(--suave); font-size: 13px; }
nav { display: flex; gap: 4px; }
button, .arq { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--azul); background: #fff; color: var(--azul); cursor: pointer; white-space: nowrap; }
button:hover, .arq:hover { background: var(--creme); }
button.pri { background: var(--azul); color: #fff; }
button.pri:hover { background: #17127a; }
button.ativo { background: var(--azul); color: #fff; }
button.mini { padding: 3px 9px; font-size: 12px; }
button.liso { border-color: transparent; color: var(--suave); }
input, select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #C9C9D6; border-radius: 6px; background: #fff; color: var(--texto); }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }
h2 { font-size: 14px; font-weight: 600; color: var(--azul); margin: 0 0 10px; }
h2 small { font-weight: 400; color: var(--suave); margin-left: 6px; }
main { padding: 0 20px 30px; }

.barra { background: var(--creme); padding: 12px 20px; border-bottom: 1px solid var(--linha); }
#fcmd { display: flex; gap: 8px; }
#cmd { flex: 1; font-size: 15px; padding: 9px 12px; border-color: var(--azul); }
#plano { margin-top: 10px; background: #fff; border: 1px solid var(--ouro); border-radius: 8px; padding: 12px 14px; }
#plano h3 { margin: 0 0 6px; font-size: 14px; color: var(--azul); }
#plano ul { margin: 6px 0 10px; padding-left: 18px; max-height: 220px; overflow: auto; font-size: 13px; }
#plano .acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.erro-txt { color: var(--err-t); }

.resumo { display: flex; gap: 28px; padding: 16px 0; flex-wrap: wrap; }
.bloco.cresce { flex: 1; min-width: 380px; }
.rosca { display: flex; align-items: center; gap: 16px; }
#legenda { display: grid; gap: 3px; }
.leg { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 2px 8px 2px 4px; border-radius: 5px; cursor: pointer; border: 1px solid transparent; background: none; color: var(--texto); text-align: left; }
.leg:hover { background: var(--creme); }
.leg.sel { border-color: var(--azul); background: var(--creme); font-weight: 600; }
.pt { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
#barras { display: grid; grid-template-columns: repeat(2, 128px minmax(80px, 1fr) 82px 44px); gap: 6px 10px; align-items: center; font-size: 12.5px; white-space: nowrap; }
#barras > span:nth-child(8n+5) { padding-left: 18px; }
.bar { display: flex; height: 13px; border-radius: 4px; overflow: hidden; background: #EEE; }
.bar i { display: block; cursor: pointer; }
.bar i:hover { filter: brightness(0.9); }
#rosca circle.seg { cursor: pointer; }

.filtros { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--creme); border-radius: 8px; flex-wrap: wrap; }
#busca { min-width: 240px; flex: 1; max-width: 360px; }
#cont { color: var(--suave); font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--azul); color: #fff; border-radius: 14px; padding: 2px 6px 2px 10px; font-size: 12px; margin-right: 4px; }
.chip button { border: none; background: none; color: #fff; padding: 0 4px; font-size: 14px; line-height: 1; }

.rolagem { overflow: auto; margin-top: 10px; border: 1px solid var(--linha); border-radius: 8px; max-height: 72vh; min-height: 320px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th { position: sticky; top: 0; z-index: 2; background: var(--azul); color: #fff; font-weight: 600; padding: 8px 6px; white-space: nowrap; cursor: pointer; user-select: none; }
th small { display: block; font-weight: 400; opacity: 0.8; font-size: 11px; }
td { padding: 6px; border-bottom: 1px solid var(--linha); text-align: center; white-space: nowrap; }
td.l, th.l { text-align: left; padding-left: 12px; }
td.emp { position: sticky; left: 0; background: #fff; z-index: 1; max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
th.emp { left: 0; z-index: 3; }
td.emp small { color: var(--suave); display: block; font-size: 11px; }
tbody tr:hover td { background: #FBFAF6; }
.s { display: inline-block; min-width: 62px; padding: 3px 7px; border-radius: 5px; font-size: 12px; border: 1px solid transparent; cursor: pointer; background: #fff; }
.s.ok { background: var(--ok); color: var(--ok-t); } .s.enviar { background: var(--env); color: var(--env-t); border-color: #9CC3F0; }
.s.fazer { border-color: #C9C9D6; color: #555; } .s.aguard { background: var(--ag); color: var(--ag-t); }
.s.erro { background: var(--err); color: var(--err-t); border-color: #EBA9A9; } .s.atras { background: var(--atr); color: var(--atr-t); font-weight: 600; }
.na { color: #C4C4CC; }
.nota { color: var(--suave); font-size: 12px; margin: 8px 2px; }
.nota .s { cursor: default; margin: 0 4px 0 10px; min-width: 0; }

dialog { border: 1px solid var(--ouro); border-radius: 10px; padding: 0; width: min(520px, 94vw); box-shadow: 0 10px 40px rgba(8, 4, 90, 0.25); }
dialog::backdrop { background: rgba(8, 4, 90, 0.25); }
dialog.largo { width: min(760px, 96vw); }
#dlgf { padding: 18px 20px; display: grid; gap: 10px; }
#dlgf h3 { margin: 0; color: var(--azul); font-size: 16px; }
#dlgf p { margin: 0; color: var(--suave); font-size: 13px; }
#dlgf label { display: grid; gap: 3px; font-size: 12.5px; color: var(--suave); }
#dlgf .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#dlgf .tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#dlgf .ops { display: flex; flex-wrap: wrap; gap: 6px; }
#dlgf .ops label { display: flex; flex-direction: row; align-items: center; gap: 5px; border: 1px solid #C9C9D6; border-radius: 6px; padding: 5px 9px; color: var(--texto); cursor: pointer; }
#dlgf .ops label:has(input:checked) { border-color: var(--azul); background: var(--creme); }
#dlgf .rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
#dlgf .hist { font-size: 12px; color: var(--suave); border-top: 1px solid var(--linha); padding-top: 8px; }
#aviso { position: fixed; right: 20px; bottom: 20px; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 8px; border-left: 4px solid var(--ouro); max-width: 420px; z-index: 20; }
#aviso.ruim { background: var(--err-t); }
.cab { display: flex; gap: 10px; align-items: center; padding: 16px 0 10px; flex-wrap: wrap; }
.cab h2 { margin: 0; font-size: 16px; }
.cartao { border: 1px solid var(--linha); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; max-width: 760px; }
.cartao p { margin: 4px 0; }
code { background: var(--creme); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.s.marcado { outline: 3px solid var(--azul); outline-offset: 1px; }
body.selecionando .s { cursor: cell; }
body.selecionando #tab th[data-col] { background: #2A2590; }
body.selecionando #tab th[data-col]::after { content: " ☐"; opacity: 0.8; }
#bsel.ativo { background: var(--ouro); border-color: var(--ouro); color: #fff; }
#lotebar { position: fixed; left: 12px; right: 12px; bottom: 18px; margin: 0 auto; width: fit-content; z-index: 15; background: #fff; border: 2px solid var(--azul); border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: 0 8px 30px rgba(8, 4, 90, 0.3); max-width: calc(100vw - 24px); }
#lotebar b { color: var(--azul); }
#lotebar .dica { color: var(--suave); font-size: 12px; }
#lfechar { font-size: 16px; padding: 2px 8px; margin-left: 4px; }
#lfechar:hover { color: var(--err-t); }
#lotebar { padding-right: 46px; }
#lfechar { position: absolute; top: 6px; right: 8px; margin: 0; }
#sair { font-size: 12px; }
body.tela-entrar { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--creme); }
.entrar { background: #fff; border: 1px solid var(--linha); border-top: 4px solid var(--ouro); border-radius: 12px; padding: 28px 30px; width: min(380px, 92vw); display: grid; gap: 12px; }
.entrar img { height: 52px; justify-self: start; }
.entrar h1 { margin: 6px 0 0; font-size: 18px; color: var(--azul); }
.entrar p { margin: 0; color: var(--suave); font-size: 13px; }
.entrar label { display: grid; gap: 4px; font-size: 12.5px; color: var(--suave); }
.entrar input { font-size: 15px; padding: 9px 10px; }
.entrar button { padding: 10px; font-size: 15px; }
.entrar #msg:empty { display: none; }
[hidden] { display: none !important; }

/* ---------- tabelas sem rolagem lateral, com filtros no cabeçalho ---------- */
/* clip, e não hidden: hidden transforma a página em área de rolagem própria e o cabeçalho deixa de ficar fixo */
html, body { overflow-x: clip; }
.rolagem { overflow-x: hidden; overflow-y: auto; }
table { table-layout: fixed; }
th, td { overflow: hidden; text-overflow: ellipsis; }
th { white-space: normal; line-height: 1.2; padding: 7px 18px 7px 5px; position: sticky; cursor: default; }
th .tit { display: block; overflow: hidden; text-overflow: ellipsis; }
th.l { padding-left: 12px; }
th.filtrado { background: #2A2590; box-shadow: inset 0 -3px 0 var(--ouro); }
th .fil { position: absolute; right: 2px; top: 5px; width: 17px; height: 17px; padding: 0; line-height: 15px; font-size: 11px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 3px; background: transparent; color: #fff; }
th .fil:hover { background: rgba(255, 255, 255, 0.2); }
th .fil.on { background: var(--ouro); border-color: var(--ouro); }
th input[type=checkbox] { vertical-align: -2px; }
td.emp { position: static; max-width: none; }
/* o título da coluna Empresa fica parado no topo como os demais, com a setinha de filtro sempre à vista */
th.emp { position: sticky; top: 0; left: auto; max-width: none; z-index: 2; }
td.emp small, td small { display: block; color: var(--suave); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
td.vazio { padding: 30px; color: var(--suave); }
td.quebra { white-space: normal; }
tr.clicavel { cursor: pointer; }
.s { min-width: 0; max-width: 100%; padding: 3px 5px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
td.ob { padding-left: 3px; padding-right: 3px; }
table.fixa input[type=number], table.fixa select { width: 100%; }
#popfil { position: absolute; z-index: 30; width: 250px; background: #fff; border: 1px solid var(--azul); border-radius: 8px; padding: 10px; box-shadow: 0 8px 28px rgba(8, 4, 90, 0.28); font-size: 13px; display: grid; gap: 7px; }
#popfil .pf-ord { display: flex; gap: 6px; }
#popfil .pf-ord button { flex: 1; padding: 4px; }
#popfil input[type=search] { width: 100%; }
#popfil .pf-lista { max-height: 230px; overflow: auto; border: 1px solid var(--linha); border-radius: 6px; padding: 4px; display: grid; gap: 1px; grid-auto-rows: max-content; }
#popfil label { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#popfil label:hover { background: var(--creme); }
#popfil label i { margin-left: auto; color: var(--suave); font-style: normal; font-size: 11px; padding-left: 8px; }
#popfil .pf-todos { font-weight: 600; color: var(--azul); }
#popfil .pf-rod { display: flex; justify-content: space-between; }
.chip.fraco { background: var(--creme); color: var(--azul); border: 1px solid var(--azul); padding-right: 10px; }
.cab .nota { margin: 0; }

/* ---------- resumo e prazos ---------- */
.resumo { gap: 22px; padding: 12px 0; }
#prazos { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.prazo { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--linha); border-left: 4px solid #C9C9D6; background: #fff; color: var(--texto); white-space: normal; }
.prazo:hover { background: var(--creme); }
.prazo.sel { border-color: var(--azul); background: var(--creme); }
.prazo.perto { border-left-color: var(--ouro); }
.prazo.ruim { border-left-color: #D63B3B; }
.prazo.feito { border-left-color: #639922; opacity: 0.72; }
.pz-nome { font-weight: 600; color: var(--azul); font-size: 13px; }
.pz-data { font-size: 11.5px; color: var(--suave); }
.prazo.perto .pz-data { color: #7A5A12; font-weight: 600; }
.prazo.ruim .pz-data { color: var(--atr-t); font-weight: 600; }
.pz-num { font-size: 12px; }
.pz-barra { height: 5px; border-radius: 3px; background: #E8E8EE; overflow: hidden; margin-top: 2px; }
.pz-barra i { display: block; height: 100%; background: #639922; }
.pz-det { font-size: 11px; color: var(--suave); }
#soltar { display: none; position: fixed; inset: 12px; z-index: 40; border: 3px dashed var(--ouro); border-radius: 16px; background: rgba(8, 4, 90, 0.82); color: #fff; font-size: 22px; align-items: center; justify-content: center; pointer-events: none; }
body.soltando #soltar { display: flex; }
#plano small { font-size: 11.5px; }

textarea { font: inherit; font-size: 13px; padding: 8px; border: 1px solid #C9C9D6; border-radius: 6px; width: 100%; resize: vertical; }
#femail { display: grid; gap: 10px; max-width: 980px; }
#femail label { display: grid; gap: 3px; font-size: 12.5px; color: var(--suave); }
#femail .tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#femail .ops { display: flex; flex-wrap: wrap; gap: 8px; }
#femail .ops label { display: flex; flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 13px; }
#femail .rodape { display: flex; gap: 8px; flex-wrap: wrap; }

/* botão de copiar ao lado da razão social e do CNPJ */
.cpl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cpl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cp { flex: none; padding: 0 6px; height: 16px; line-height: 14px; font-size: 10px; border-radius: 8px; border: 1px solid #C9C9D6; color: var(--suave); background: #fff; }
.cp:hover { border-color: var(--azul); color: var(--azul); background: var(--creme); }
.cp.feito { border-color: #639922; color: var(--ok-t); background: var(--ok); }

/* ponto de observação ao lado do nome da empresa */
.obsp { flex: none; width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px dashed transparent; background: transparent; }
.obsp.tem { background: #E8891C; border: 1px solid #C76F0C; cursor: pointer; }
.obsp.tem:hover { box-shadow: 0 0 0 3px rgba(232, 137, 28, 0.25); }
tr:hover .obsp:not(.tem) { border-color: #B9B9C6; }
.obsp:not(.tem):hover { border-color: #E8891C; background: #FBE5CC; }
.obsp.fixo { display: inline-block; margin-right: 6px; cursor: default; }
#dlgf textarea { min-height: 110px; }

/* notas fiscais */
.arq.pri { background: var(--azul); color: #fff; }
.arq.pri:hover { background: #17127a; }
.cartao.largo { max-width: none; font-size: 13px; }
.cartao.largo ul { margin: 6px 0; padding-left: 18px; }
#tela-notas details { margin: 4px 0 6px; }
#tela-notas summary { cursor: pointer; font-size: 13px; color: var(--azul); padding: 4px 0; }
table.pacotes { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
table.pacotes td, table.pacotes th { overflow: hidden; text-overflow: ellipsis; }
table.pacotes small { display: block; color: var(--suave); font-size: 11px; }
table.pacotes select { width: 100%; font-size: 12px; }
tr.apagado td { color: #A9A9B6; }
.s.so { cursor: default; }
#tnotas td.emp small { white-space: normal; }
button.met { max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; padding: 2px 4px; color: var(--azul); }
#tnotas tr.dif td { background: #FBE3E3; color: #8E1F1F; }
#tnotas tr.dif td small { color: #8E1F1F; }
i.tag { display: inline-block; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .3px; padding: 0 5px; border-radius: 4px; margin-left: 5px; vertical-align: 1px; }
i.tag.jet { background: #E8E6F7; color: var(--azul); } i.tag.pg { background: #F6EEDC; color: #7A5A12; } i.tag.ou { background: #EEE; color: #555; }
#tnotas td small { display: block; color: var(--suave); font-size: 11px; }

/* cabeçalho fixo no topo: logotipo, competência e abas sempre à vista */
header { position: sticky; top: 0; z-index: 30; background: #fff; }
button.ajuda { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-weight: 700; line-height: 24px; }

/* botão Anexar da aba Notas */
details.anexar { position: relative; }
#tela-notas details.anexar > summary { list-style: none; display: inline-block; color: #fff; padding: 6px 12px; font-size: 13px; }
details.anexar > summary::-webkit-details-marker { display: none; }
details.anexar .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 6px 20px rgba(8, 4, 90, 0.15); padding: 4px; min-width: 150px; display: grid; }
details.anexar .menu label { padding: 7px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--azul); white-space: nowrap; }
details.anexar .menu label:hover { background: var(--creme); }

/* manual de uso */
.manual { font-size: 13px; color: var(--texto); max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.manual h4 { margin: 12px 0 4px; color: var(--azul); font-size: 13.5px; }
.manual p { color: var(--texto) !important; margin: 4px 0 !important; }
.manual ul { margin: 4px 0; padding-left: 18px; }
.manual li { margin: 3px 0; }
.manual .s { cursor: default; min-width: 0; }
.manual-outras { font-size: 12px; }

/* sino de vencimentos, ao lado da competência */
button.sino { padding: 4px 10px; font-size: 12.5px; border-radius: 14px; font-weight: 600; }
button.sino.perto { background: #FFF4D6; border-color: #E0A64B; color: #7A5A12; }
button.sino.hoje { background: #FDE7C8; border-color: #E8891C; color: #8A4B06; }
button.sino.ruim { background: var(--err); border-color: #D63B3B; color: var(--err-t); }
.alertas { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
button.alerta { display: grid; text-align: left; gap: 1px; white-space: normal; padding: 8px 10px; border-left-width: 4px; }
button.alerta span { font-size: 12.5px; }
button.alerta small { color: var(--suave); font-size: 11.5px; }
button.alerta.perto { border-color: #E0A64B; } button.alerta.hoje { border-color: #E8891C; } button.alerta.ruim { border-color: #D63B3B; }
/* lote: guias com caixa de marcar e tipo, cadastro do Domínio */
#plano label.lin { cursor: pointer; }
#plano label.lin input { vertical-align: -2px; margin: 0 4px 0 0; }
#plano select { font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid #C9C9D6; border-radius: 5px; }
#plano li { margin-bottom: 3px; }
#femail details { margin: 8px 0; }
#femail details summary { cursor: pointer; color: var(--azul); }

/* ---------- tela do mês: OK verde escuro; OK zerada / sem movimento verde claro ---------- */
#tela-mes .s.ok, .manual .s.ok { background: #2E7D32; color: #fff; }
#tela-mes .s.ok.zer, .manual .s.ok.zer { background: #DDF0D2; color: #27500A; border-color: #B5DA9E; }

/* ---------- vencimentos personalizados ---------- */
.rolagem.baixa { min-height: 0; max-height: 40vh; }
#tagenda tr.clicavel { cursor: pointer; }
#dlgf .aggrupo { display: grid; gap: 6px; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; }
#dlgf .aggrupo p, #dlgf .ag-pers p { margin: 0; color: var(--azul); font-size: 12.5px; font-weight: 600; }
#dlgf .aggrupo p small { font-weight: 400; color: var(--suave); margin-left: 4px; }
#dlgf .aggrupo .ops { max-height: 150px; overflow: auto; }
#dlgf .ops label small { color: var(--suave); font-size: 11px; }
#dlgf .ops label.grupo { background: #F2F8EE; border-color: #B5DA9E; cursor: default; }
#dlgf .rodape .esp { flex: 1; }

/* sócios no cadastro da empresa */
#socios { display: grid; gap: 6px; }
.socio { display: grid; grid-template-columns: 1fr 170px 150px auto; gap: 6px; align-items: center; }
.socio .cpf { display: flex; gap: 4px; align-items: center; }
.socio .cpf input { flex: 1; min-width: 0; }
@media (max-width: 640px) { .socio { grid-template-columns: 1fr 1fr; } .socio input[data-s=nome] { grid-column: 1 / -1; } }

/* comunicado para clientes */
.cfiltros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cfiltros input, .cfiltros select { font: inherit; font-size: 12.5px; padding: 4px 6px; }
.clista { max-height: 34vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: 6px; padding: 4px; display: grid; gap: 1px; grid-auto-rows: max-content; }
#dlgf .clista label { display: flex; flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 12.5px; padding: 3px 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dlgf .clista label:hover { background: var(--creme); }
#dlgf .clista label small { color: var(--suave); margin-left: auto; padding-left: 8px; }
#dlgf .clista label.sem { color: #A9A9B6; cursor: default; }

/* aviso dentro da janela aberta (o do canto fica escondido atrás dela) */
#dlgaviso { margin: 0; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
#dlgaviso.bom { background: var(--ok); color: var(--ok-t) !important; }
#dlgaviso.ruim { background: var(--err); color: var(--err-t) !important; }

/* emissor de NFS-e */
.amb { font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 5px; }
.amb.teste { background: var(--ag); color: var(--ag-t); border: 1px solid #E9C98E; }
.amb.prod { background: #2E7D32; color: #fff; }
.pend { background: var(--ag); color: var(--ag-t); border: 1px solid #E9C98E; border-radius: 8px; padding: 9px 12px; margin-bottom: 10px; }
form.emitir { border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; background: var(--creme); max-width: 980px; }
form.emitir label { display: grid; gap: 3px; font-size: 12.5px; color: var(--suave); }
form.emitir input, form.emitir textarea { font-size: 15px; padding: 8px 10px; }
form.emitir textarea { font: inherit; font-size: 14px; border: 1px solid #C9C9D6; border-radius: 6px; resize: vertical; }
.emcampos { display: grid; grid-template-columns: 220px 1fr 170px; gap: 10px 12px; }
.emcampos .emnome { grid-column: 2 / 4; }
.emcampos .emdesc { grid-column: 1 / 3; }
.emcampos .emvalor input { font-size: 18px; font-weight: 600; color: var(--azul); }
details.mais { margin-top: 8px; font-size: 12.5px; color: var(--suave); }
details.mais summary { cursor: pointer; }
details.mais .linha2 { display: grid; grid-template-columns: 200px 1fr; gap: 10px; margin-top: 6px; max-width: 620px; }
.emacoes { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.emacoes button { font-size: 14px; padding: 8px 18px; }
.emacoes button:disabled { opacity: .45; cursor: not-allowed; }
.s.canc { background: #EEE; color: #666; text-decoration: line-through; }
#tnfse td small { color: var(--suave); }
dl.confere { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 6px 0 12px; font-size: 13px; }
dl.confere dt { color: var(--suave); } dl.confere dd { margin: 0; } dl.confere small { color: var(--suave); }
ul.erros { margin: 6px 0; padding-left: 18px; color: var(--err-t); font-size: 13px; } ul.erros small { color: var(--suave); }
.chave { font-family: Consolas, monospace; font-size: 11.5px; word-break: break-all; color: var(--texto); }
.buscatab { position: relative; display: block; }
.buscatab input[data-busca] { width: 100%; }
.buscatab .res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid var(--ouro); border-radius: 6px; max-height: 240px; overflow: auto; box-shadow: 0 6px 20px rgba(8, 4, 90, .15); }
.buscatab .res button { display: block; width: 100%; text-align: left; border: none; border-radius: 0; white-space: normal; color: var(--texto); padding: 6px 9px; font-size: 12.5px; }
.buscatab .res button:hover { background: var(--creme); }
.buscatab .res em { display: block; padding: 6px 9px; color: var(--suave); }
fieldset.certif { border: 1px solid var(--linha); border-radius: 8px; padding: 8px 12px 12px; margin: 4px 0; display: grid; gap: 8px; }
fieldset.certif legend { color: var(--azul); font-weight: 600; font-size: 13px; padding: 0 4px; }
fieldset.certif p { margin: 0; font-size: 12.5px; }
fieldset.certif > button { justify-self: start; }
@media (max-width: 720px) { .emcampos { grid-template-columns: 1fr; } .emcampos .emnome, .emcampos .emdesc { grid-column: auto; } details.mais .linha2 { grid-template-columns: 1fr; } }
.certok { font-size: 12px; color: var(--ok-t); background: var(--ok); border-radius: 5px; padding: 3px 8px; }
.certok.vencido { color: var(--err-t); background: var(--err); }
#tela-mes .rolagem { max-height: calc(100vh - 110px); min-height: 420px; }
.semcliente { background: var(--err); color: var(--err-t); border: 1px solid #EBA9A9; border-radius: 8px; padding: 9px 12px; margin: 4px 0 10px; font-size: 13px; }
.emtom { display: block; min-height: 15px; font-size: 11.5px; color: var(--suave); margin-top: 2px; }
.emtom .mini { padding: 0 6px; font-size: 11px; }
#ttom tr.clicavel:hover td, #tnfse tr:hover td { background: var(--creme); }
.emcampos .emserv { grid-column: 1 / 4; } .emcampos .emserv select { font-size: 14px; padding: 7px 8px; }
table.servs { font-size: 12.5px; } table.servs td { padding: 4px 6px; white-space: normal; }
@media (max-width: 720px) { .emcampos .emserv { grid-column: auto; } }

/* entrada: código por e-mail */
.entrar label.lembrar { display: flex; align-items: center; gap: 6px; color: var(--texto); }
/* portal do cliente */
body.portal header #pempresa { max-width: 320px; }
body.portal main { padding-top: 6px; }
#frel label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); }
.relcards { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.relcards > div { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 16px; min-width: 160px; display: grid; gap: 2px; background: #fff; }
.relcards small { color: var(--suave); font-size: 12px; } .relcards b { font-size: 20px; color: var(--azul); }
h3.relh { font-size: 14px; color: var(--azul); margin: 8px 0 0; }
/* notas no sistema nacional (emitidas e recebidas) */
i.tag.emi { background: #E8E6F7; color: var(--azul); margin-left: 0; } i.tag.rec { background: #F6EEDC; color: #7A5A12; margin-left: 0; }
.adntot { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 13px; margin: -4px 0 8px; color: var(--texto); }
.adntot:empty { display: none; }
.adntot small { color: var(--suave); }
/* certificados em lote */
table.ltcert td { font-size: 12px; } table.ltcert input.ltsenha1 { width: 120px; padding: 2px 6px; font-size: 12px; margin-left: 4px; }
/* cabeçalho: menu Configurações */
nav { align-items: center; flex-wrap: wrap; }
nav details.mais { position: relative; }
nav details.mais > summary { list-style: none; font-size: 13px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--azul); color: var(--azul); background: #fff; cursor: pointer; white-space: nowrap; }
nav details.mais > summary::-webkit-details-marker { display: none; }
nav details.mais.ativo > summary { background: var(--azul); color: #fff; }
nav details.mais .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 6px; box-shadow: 0 8px 24px rgba(8, 4, 90, 0.15); min-width: 180px; }
nav details.mais .menu button { border: 0; text-align: left; }
nav details.mais .menu button:hover { background: var(--creme); }
nav details.mais .menu button.ativo { background: var(--azul); color: #fff; }
/* tela Início */
#tela-inicio { padding-bottom: 24px; }
.inigrade { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
section.ini { background: #fff; border: 1px solid var(--linha); border-top: 3px solid var(--ouro); border-radius: 8px; padding: 12px 14px; }
section.ini h2 { display: flex; align-items: center; gap: 8px; }
section.ini h2 small { color: var(--suave); font-weight: 400; }
section.ini .qtd { background: var(--azul); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 8px; }
.inilista { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
button.iniitem { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; white-space: normal; border: 1px solid var(--linha); border-left: 4px solid #ccc; background: #fff; color: var(--texto); padding: 8px 10px; }
button.iniitem b { color: var(--azul); }
button.iniitem span { grid-column: 1; font-size: 12px; color: var(--suave); }
button.iniitem i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 12px; color: var(--azul); }
button.iniitem:hover { background: var(--creme); }
button.iniitem.ruim { border-left-color: #D63B3B; } button.iniitem.hoje { border-left-color: #E8891C; } button.iniitem.perto { border-left-color: #E0A64B; }
.inivazio { color: #2E7D4F; font-size: 13px; margin: 4px 0; }
/* rodapé de diálogo com muitos botões quebra de linha em tela estreita */
#dlgf .rodape { flex-wrap: wrap; }
/* emissor: abas internas, menu de ações e últimas notas */
.abas { display: flex; gap: 2px; border-bottom: 2px solid var(--linha); margin: 4px 0 12px; }
.abas button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--suave); padding: 8px 16px; font-weight: 600; margin-bottom: -2px; }
.abas button.ativo { color: var(--azul); border-bottom-color: var(--ouro); background: none; }
.abas button small { background: var(--creme); color: var(--azul); border-radius: 10px; padding: 0 7px; font-weight: 600; }
.abas button small:empty { display: none; }
button.tres { font-weight: 700; letter-spacing: 1px; padding: 2px 8px; }
#menuacoes { position: fixed; z-index: 60; background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(8, 4, 90, 0.18); display: flex; flex-direction: column; min-width: 170px; }
#menuacoes button { border: 0; text-align: left; border-radius: 5px; }
#menuacoes button:hover, #menuacoes button:focus { background: var(--creme); outline: none; }
#menuacoes button.perigo { color: #B3261E; }
#menuacoes hr { border: 0; border-top: 1px solid var(--linha); margin: 3px 0; }
table.ultimas { width: 100%; font-size: 13px; }
table.ultimas td { padding: 6px; border-bottom: 1px solid var(--linha); }
table.ultimas td.acoes { text-align: right; white-space: nowrap; }
#emultimas { margin-top: 18px; }
/* "Emitir" em destaque: bloquinho azul com letra branca (aba do emissor e menu do portal) */
/* diálogo de confirmação da marca (abre por cima de outro diálogo) */
#dlgconf { width: min(440px, 94vw); padding: 0; }
#dlgconf form.conf { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
#dlgconf h3 { margin: 0; color: var(--azul); font-size: 16px; }
#dlgconf p { margin: 0; font-size: 13.5px; line-height: 1.45; }
#dlgconf label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
#dlgconf .rodape { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
button.perigo { background: #B3261E; border-color: #B3261E; color: #fff; }
button.perigo:hover { background: #8E1B15; }
/* cores de situação, iguais em todo o sistema: verde = concluído; âmbar = aguardando alguém; vermelho = erro ou atraso;
   azul = falta enviar; contorno cinza = a fazer ou sem dados; cinza tachado = encerrado (cancelada, substituída, não gerada) */
/* ficha da empresa */
.fcab { align-items: flex-start; } .fcab h2 { font-size: 17px; margin-bottom: 2px; } .fcab .nota { display: block; }
.inivazio.neutro { color: var(--suave); }
.fitens { display: flex; flex-direction: column; gap: 4px; }
button.fitem { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; text-align: left; white-space: normal; border: 1px solid var(--linha); background: #fff; color: var(--texto); padding: 6px 8px; }
button.fitem small { grid-column: 1; color: var(--suave); font-size: 11.5px; } button.fitem .s { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
button.fitem:hover:not(:disabled) { background: var(--creme); } button.fitem:disabled { cursor: default; opacity: 1; }
table.ftab { width: 100%; font-size: 12.5px; border-collapse: collapse; } table.ftab th { position: static; padding: 5px 6px; text-align: right; } table.ftab th.l, table.ftab td.l { text-align: left; }
table.ftab td { padding: 5px 6px; border-bottom: 1px solid var(--linha); text-align: right; } table.ftab td small { display: block; color: var(--suave); font-size: 11px; }
table.ftab tr.dif td { background: var(--err); color: var(--err-t); }
dl.fdl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; } dl.fdl dt { color: var(--suave); } dl.fdl dd { margin: 0; }
ul.flista { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 40vh; overflow: auto; } ul.flista li { padding: 5px 0; border-bottom: 1px solid var(--linha); } ul.flista small { display: block; color: var(--suave); font-size: 11.5px; }
/* busca rápida */
#brq { width: 100%; font-size: 15px; padding: 8px 10px; }
.brres { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.brres button { text-align: left; border: 1px solid var(--linha); white-space: normal; display: flex; flex-direction: column; }
.brres button small { color: var(--suave); } .brres button:hover, .brres button:focus { background: var(--creme); }
/* ---------- portal do cliente no celular ---------- */
@media (max-width: 720px) {
  .emcampos .emserv { grid-column: auto; }
  form.emitir select, form.emitir input, form.emitir textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  form.emitir { padding: 12px; }
  body.portal { padding-bottom: 120px; }
  body.portal header { padding: 8px 12px; gap: 8px; }
  body.portal header img { height: 30px; }
  body.portal header .sub, body.portal #pquem { display: none; }
  body.portal header #pempresa { order: 9; flex: 1 1 100%; max-width: none; font-size: 15px; padding: 8px; }
  body.portal main { padding: 8px 12px 24px; }
  /* menu do portal vira barra fixa no rodapé, com botões grandes */
  body.portal #pnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 2px solid var(--ouro); display: flex; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(8, 4, 90, .08); }
  body.portal #pnav { flex-wrap: wrap; } body.portal #pnav button { flex: 1 1 30%; padding: 11px 4px; font-size: 14px; margin: 0; }
  body.portal .emacoes button.pri { width: 100%; padding: 13px; font-size: 16px; }
  body.portal .emacoes { flex-direction: column; align-items: stretch; gap: 6px; }
  body.portal .cab { flex-wrap: wrap; gap: 6px; }
  body.portal input, body.portal select, body.portal textarea { font-size: 16px; }   /* evita o zoom automático do iPhone */
  /* clientes em cartões; notas em tabela compacta (ordenar e filtrar), só com as colunas essenciais */
  body.portal #tcli { table-layout: auto; }
  body.portal #tcli colgroup, body.portal #tcli thead { display: none; }
  body.portal #tcli tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 2px; border-bottom: 1px solid var(--linha); }
  body.portal #tcli td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; overflow: visible; }
  body.portal #tnotas { table-layout: fixed; width: 100%; font-size: 12px; }
  body.portal #tnotas th, body.portal #tnotas td { padding: 6px 3px; }
  body.portal #tnotas th { font-size: 11px; }
  body.portal #tnotas th:nth-child(2), body.portal #tnotas td:nth-child(2), body.portal #tnotas th:nth-child(3), body.portal #tnotas td:nth-child(3),
  body.portal #tnotas th:nth-child(4), body.portal #tnotas td:nth-child(4), body.portal #tnotas th:nth-child(8), body.portal #tnotas td:nth-child(8),
  body.portal #tnotas col:nth-child(2), body.portal #tnotas col:nth-child(3), body.portal #tnotas col:nth-child(4), body.portal #tnotas col:nth-child(8) { display: none; }
  body.portal #tnotas col:nth-child(1) { width: 12% !important; } body.portal #tnotas col:nth-child(5) { width: auto !important; }
  body.portal #tnotas col:nth-child(6) { width: 23% !important; } body.portal #tnotas col:nth-child(7) { width: 16% !important; } body.portal #tnotas col:nth-child(9) { width: 17% !important; }
  body.portal #tnotas td:nth-child(5) small, body.portal #tnotas .ano { display: none; }
  body.portal #tnotas td:nth-child(6) { text-align: right; white-space: nowrap; font-weight: 600; }
  body.portal #tnotas td:nth-child(5) { text-align: left; white-space: normal; overflow-wrap: anywhere; }
  body.portal #tnotas .s { min-width: 0; padding: 2px 4px; font-size: 10.5px; }
  body.portal #tnotas td:nth-child(9) [data-ac="pdf"] { display: none; }
  body.portal #tnotas td:nth-child(9) { text-align: right; }
  .so-mobile { display: inline-block !important; }
  body.portal dialog, body.portal dialog.largo { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  body.portal #dlgf { min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 0; box-sizing: border-box; }
  body.portal #dlgf .linha, body.portal #dlgf .tres { grid-template-columns: 1fr; }
  body.portal #dlgf input, body.portal #dlgf select, body.portal #dlgf textarea { font-size: 16px; padding: 11px 10px; width: 100%; box-sizing: border-box; }
  body.portal #dlgf .rodape { position: sticky; bottom: 0; background: #fff; margin: auto -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); }
  body.portal #dlgf .rodape button { flex: 1; padding: 12px 8px; }
  body.portal button.mini { padding: 7px 12px; font-size: 13px; }
}
/* portal: guias e instalação */
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 8px; }
.guia { background: #fff; border: 1px solid var(--linha); border-top: 3px solid var(--ouro); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.guia .gtop { display: flex; justify-content: space-between; gap: 8px; } .guia .gtop b { color: var(--azul); } .guia .gvalor { font-weight: 700; color: var(--azul); }
.guia .gmeio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .guia .gmeio small { color: var(--suave); }
.guia .gbaixar { display: flex; gap: 6px; flex-wrap: wrap; }
ol.passos { margin: 6px 0; padding-left: 20px; line-height: 1.7; }
@media (max-width: 720px) { body.portal #pinstalar { order: 2; } }
/* portal: resumo do mês (indicadores e medidor do limite) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; }
.tile small { display: block; color: var(--suave); font-size: 12.5px; } .tile b { display: block; font-size: 22px; font-weight: 600; color: var(--texto); margin: 2px 0; } .tile span { color: var(--suave); font-size: 12px; }
.barra-lim { position: relative; height: 10px; border-radius: 5px; background: #DCE3F5; margin: 8px 0; overflow: visible; }
.barra-lim .enche { height: 100%; border-radius: 5px; background: var(--azul); }
.medidor.alerta .barra-lim { background: #F6E7C8; } .medidor.alerta .enche { background: #C98A12; }
.medidor.perigo .barra-lim { background: #F5D5D5; } .medidor.perigo .enche { background: #B3261E; }
.barra-lim .marca { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--texto); opacity: .55; }
.medidor p { margin: 4px 0; font-size: 13px; }
/* emissão: enviar ao cliente final */
label.chkenv { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 10px 0 2px; color: var(--texto); cursor: pointer; }
label.chkenv input { width: 18px; height: 18px; }
label.chkenv small { color: var(--suave); }

/* notas mensais (recorrentes) */
section.recs { background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--ouro); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; max-width: 980px; }
section.recs .cab { margin: 0 0 6px; }
.rec { display: grid; grid-template-columns: 1fr auto auto auto; gap: 4px 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linha); }
.rec small { display: block; color: var(--suave); font-size: 12px; } .rec .recv { font-weight: 600; } .rec.emitida { opacity: .75; }
p.recvazio { margin: 0 0 10px; } p.recvazio small { color: var(--suave); }
@media (max-width: 720px) { .rec { grid-template-columns: 1fr auto; } .rec .reca { grid-column: 1 / -1; text-align: right; } }

/* documentos do mês */
.docp { background: #fff; border: 1px solid var(--linha); border-top: 3px solid var(--ouro); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.docp.outro { margin-top: 10px; max-width: 520px; border-top-color: var(--linha); }
.docp .gtop { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .docp .gtop b { color: var(--azul); }
.docp .gbaixar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
button.link { border: 0; background: none; padding: 0; color: var(--azul); text-decoration: underline; cursor: pointer; font: inherit; white-space: normal; text-align: left; }
label.arq.mini { font-size: 12px; padding: 4px 10px; } label.arq.pri { background: var(--azul); color: #fff; }

/* botão dourado (Emitir NFS-e e Simulador); o texto azul-escuro mantém a leitura sobre o dourado */
button.ouro, .abas button[data-emaba="emitir"], #pnav button[data-aba="emitir"] { background: var(--ouro); color: var(--azul); border: 1px solid #A97F2E; border-radius: 6px; font-weight: 700; }
button.ouro:hover, .abas button[data-emaba="emitir"]:hover, #pnav button[data-aba="emitir"]:hover { background: #D8AB52; }
.abas button[data-emaba="emitir"].ativo, #pnav button[data-aba="emitir"].ativo { box-shadow: 0 3px 0 var(--azul); }
.tile button.ouro { margin-top: 8px; }
/* lista suspensa de clientes */
.comboraiz { position: relative; }
.combo { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; background: #fff; border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 8px 24px rgba(8, 4, 90, .18); max-height: 260px; overflow-y: auto; margin-top: 2px; }
.combo button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; text-align: left; white-space: normal; padding: 9px 10px; }
.combo button:last-child { border-bottom: 0; } .combo button small { color: var(--suave); } .combo button:hover, .combo button.ativo { background: var(--creme); }
/* simulador */
.segs { display: flex; gap: 0; border: 1px solid var(--azul); border-radius: 8px; overflow: hidden; } .segs .seg { flex: 1; border: 0; border-radius: 0; padding: 9px 6px; }
.segs .seg.ativo { background: var(--azul); color: #fff; }
.simres { background: var(--creme); border-radius: 8px; padding: 8px 12px; } .simres div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; }
.simres div.forte { border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 8px; font-size: 16px; color: var(--azul); } .simres p { margin: 4px 0; }
/* filtros das notas */
.fbarra { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px 12px; align-items: end; margin: 6px 0 10px; }
.fbarra label { display: grid; gap: 3px; font-size: 12px; color: var(--suave); } .fbarra input, .fbarra select { font-size: 14px; padding: 7px 8px; min-width: 0; }
.fbarra .fpers { display: contents; } .fbarra .fpers[hidden] { display: none; }
.so-mobile { display: none; }
@media (max-width: 720px) { .fbarra { grid-template-columns: 1fr 1fr; } .fbarra .fcli { grid-column: 1 / -1; } .fbarra #fpers { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fbarra #fpers[hidden] { display: none; } }
/* guias pagas */
.guia.paga { border-top-color: #2E7D32; } .guia .gpago { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-txt { color: #2E7D4F; font-weight: 600; } .aviso-txt { color: #7A5A12; }

@media (max-width: 720px) { body.portal #tnotas td:nth-child(9) .mini { padding: 4px 6px; font-size: 11px; } }

/* filtros das notas em botões e folhas de escolha */
.fpills { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 8px; margin: 8px 0 6px; }
.fp { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 28px 7px 10px; border: 1px solid #C9C9D6; background: #fff; border-radius: 10px; text-align: left; min-width: 0; }
.fp small { color: var(--suave); font-size: 11px; } .fp b { font-size: 13px; color: var(--azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fp::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--suave); }
.fp.on { background: var(--azul); border-color: var(--azul); } .fp.on small, .fp.on b { color: #fff; } .fp.on::after { content: none; }
.fp .fx { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; line-height: 22px; text-align: center; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-style: normal; font-size: 16px; }
.fp .fx[hidden] { display: none; }
.fres { font-size: 13px; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: center; } .fres small { color: var(--suave); }
.atualiz { font-size: 12px; color: var(--suave); margin: 0 0 2px; }
.opcoes { display: flex; flex-direction: column; gap: 6px; max-height: 50dvh; overflow-y: auto; margin: 8px 0; }
.opc { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; text-align: left; white-space: normal; background: #fff; }
.opc span { color: var(--suave); font-size: 12px; text-align: right; } .opc.on { border-color: var(--azul); background: var(--creme); } .opc.on b { color: var(--azul); }
@media (max-width: 720px) {
  body.portal dialog.folha { width: 100vw; max-width: 100vw; height: auto; max-height: 88dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  body.portal dialog.folha #dlgf { min-height: 0; }
  body.portal .rolagem { max-height: none; overflow: visible; border: 0; }
  body.portal #tnotas .fil { display: none; }
  body.portal #tnotas th { position: sticky; top: var(--hdr, 60px); z-index: 6; }
  body.portal #tnotas .nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body.portal #tnotas tr.aberta .nm { display: inline; -webkit-line-clamp: unset; }
}