/* 1001Financeiro — interface corporativa para operação diária. */
[hidden] { display: none !important; }
:root {
color-scheme: light;
--fundo: #f3f6f8; --superficie: #fff; --texto: #14283c; --texto-forte: #0a1c2e;
--secundario: #4f6376; --placeholder: #5d7185; --borda: #d8e0e7; --borda-forte: #bdc9d4; --borda-campo: #7a8c9e; --suave: #edf2f5; --suave-2: #f7f9fb;
--navy: #0b2843; --navy-claro: #143b5a; --navy-linha: #2a4e6b; --ciano: #61d7e9;
--texto-no-navy: #e7f0f6; --texto-no-navy-2: #a9c0d2;
--acao: #087996; --acao-hover: #05647d; --acao-suave: #e6f6fa; --foco: #0893b5;
--erro: #a82d3d; --erro-texto: #8a1020; --erro-fundo: #fdecee; --erro-borda: #e1aeb5;
--sucesso: #18704e; --sucesso-fundo: #edf8f2; --sucesso-borda: #a9d8c1;
--atencao: #7a4b00; --atencao-fundo: #fff6e0; --atencao-borda: #e0b44a;
--info: #05586d; --info-fundo: #e6f6fa; --info-borda: #a9dbe7;
--neutro: #4f6376; --neutro-fundo: #edf2f5; --neutro-borda: #c9d4dd;
/* 🖨️ A caixa do número na folha: o RT (saída) vermelho, o RTE (entrada) verde — o número, branco (📌 dono, 25/09/2026). */
--cor-do-rtr: #b42318; --cor-do-rte: #15803d;
--sombra: 0 1px 2px rgb(11 40 67 / 5%), 0 10px 30px rgb(11 40 67 / 6%);
--sombra-baixa: 0 -6px 20px rgb(11 40 67 / 12%);
--raio: 10px; --raio-pequeno: 7px; --raio-cartao: 12px;
--alvo: 44px; --alvo-decidir: 56px; --largura-leitura: 68ch; --largura-menu: 16.5rem;
--fonte: "Segoe UI", Aptos, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-family: var(--fonte);
font-size: 16px; line-height: 1.5; background: var(--fundo); color: var(--texto);
accent-color: var(--acao); caret-color: var(--acao);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--fundo); }
body { margin: 0; min-height: 100vh; background: var(--fundo); }
button, input, select, textarea { font: inherit; }
a { color: var(--acao); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
::selection { color: var(--navy); background: #bcecf3; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.somente-leitor, .pular-conteudo:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular-conteudo:focus { position: fixed; inset: 1rem auto auto 1rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--raio-pequeno); background: var(--superficie); box-shadow: var(--sombra); }
/* Estrutura */
.area-interna { display: grid; grid-template-columns: var(--largura-menu) minmax(0, 1fr); min-height: 100vh; }
.barra-lateral { position: sticky; top: 0; z-index: 20; display: flex; flex-direction: column; height: 100vh; padding: 1.7rem 1rem 1rem; overflow-y: auto; color: #e7f0f6; background: radial-gradient(circle at 12% 8%, rgb(97 215 233 / 13%), transparent 24%), linear-gradient(180deg, #0b2b47 0%, #081f35 100%); border-right: 1px solid #193c58; }
/* A barra de rolagem do menu escuro: fina, clara e translúcida sobre o navy,
e só forte quando a pessoa encosta nela. ⛔ Não esconder: em tela baixa o
menu PRECISA rolar, senão "Sair da conta" some sem aviso. `scrollbar-*` é o
padrão (Firefox, Chrome 121+); o `::-webkit-scrollbar` cobre o Safari e o
Chrome antigo, que ignoram o padrão. */
.barra-lateral, .barra-lateral nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 22%) transparent; }
.barra-lateral:hover, .barra-lateral nav:hover { scrollbar-color: rgb(255 255 255 / 38%) transparent; }
.barra-lateral::-webkit-scrollbar, .barra-lateral nav::-webkit-scrollbar { width: 8px; height: 8px; }
.barra-lateral::-webkit-scrollbar-track, .barra-lateral nav::-webkit-scrollbar-track { background: transparent; }
.barra-lateral::-webkit-scrollbar-thumb, .barra-lateral nav::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgb(255 255 255 / 22%); background-clip: padding-box; }
.barra-lateral::-webkit-scrollbar-thumb:hover, .barra-lateral nav::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / 40%); }
.barra-lateral::-webkit-scrollbar-corner, .barra-lateral nav::-webkit-scrollbar-corner { background: transparent; }
.marca { display: block; padding: .2rem .75rem .8rem; }
.marca-imagem { display: block; width: 174px; max-width: 100%; height: auto; }
.marca-produto { display: grid; gap: .1rem; margin: .5rem .75rem 1.75rem; padding: 1rem 0 0; border-top: 1px solid var(--navy-linha); }
.marca-produto strong { color: #fff; font-size: .95rem; letter-spacing: .01em; }
.marca-produto span { color: #a9c0d2; font-size: .8125rem; letter-spacing: .055em; text-transform: uppercase; }
.barra-lateral nav { display: grid; gap: 1.35rem; }
.grupo-menu { display: grid; gap: .15rem; }
.grupo-menu + .grupo-menu { margin-top: 0; }
.titulo-menu { margin: 0 .75rem .35rem; color: #7f9caf; font-size: .8125rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.grupo-menu a { position: relative; display: flex; align-items: center; min-height: 39px; padding: .55rem .75rem .55rem 1rem; border-radius: var(--raio-pequeno); color: #d8e5ee; font-size: .86rem; font-weight: 520; text-decoration: none; transition: background-color 140ms ease, color 140ms ease, transform 140ms ease; }
.grupo-menu a::before { content: ""; position: absolute; left: .35rem; width: 3px; height: 0; border-radius: 99px; background: var(--ciano); transition: height 140ms ease; }
.grupo-menu a:hover { color: #fff; background: rgb(255 255 255 / 7%); transform: translateX(2px); }
.grupo-menu a[aria-current="page"] { color: #fff; background: rgb(97 215 233 / 13%); font-weight: 680; }
.grupo-menu a[aria-current="page"]::before { height: 20px; }
/* ⚙️ Administração: o título leva ao painel, e as duas seções ganham um
subtítulo menor — é a mesma hierarquia do Configurações do Odoo. */
.grupo-menu .titulo-menu-link { display: inline; min-height: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; }
.grupo-menu .titulo-menu-link::before { display: none; }
.grupo-menu .titulo-menu-link:hover { color: #fff; background: none; transform: none; }
.subtitulo-menu { margin: .55rem .75rem .15rem 1rem; color: #9fb7c8; font-size: .8125rem; font-weight: 650; }
/* 📚 "Contabilidade" recolhido: o título é o botão que abre e fecha. */
.menu-recolhido > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 32px; margin-bottom: 0; padding: .3rem .75rem; border-radius: var(--raio-pequeno); cursor: pointer; list-style: none; }
.menu-recolhido > summary::-webkit-details-marker { display: none; }
.menu-recolhido > summary::after { content: "▸"; font-size: .8125rem; letter-spacing: 0; transition: transform 140ms ease; }
.menu-recolhido[open] > summary::after { transform: rotate(90deg); }
.menu-recolhido > summary:hover { color: #fff; background: rgb(255 255 255 / 7%); }
/* 🏠 Tela inicial de quem lança: o "Novo RT" é o botão da casa. */
.inicio-novo-rt { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: .5rem 0 1.5rem; }
.botao.botao-grande { min-height: 56px; padding: .9rem 1.75rem; font-size: 1.1rem; }
.barra-lateral :focus-visible { outline-color: var(--ciano); }
.rodape-menu { display: grid; gap: .65rem; margin-top: auto; padding-top: 1.75rem; }
.link-manual { padding: .5rem .75rem; color: #b7cad8; font-size: .8125rem; text-decoration: none; }
.link-manual:hover, .link-manual[aria-current="page"] { color: #fff; }
.identidade-usuario { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .65rem; padding: .75rem; border: 1px solid rgb(255 255 255 / 9%); border-radius: var(--raio-pequeno); background: rgb(255 255 255 / 4%); }
.avatar-usuario { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--navy); background: var(--ciano); font-size: .8125rem; font-weight: 800; letter-spacing: .04em; }
.identidade-usuario > span:last-child { min-width: 0; display: grid; }
.identidade-usuario strong { overflow: hidden; color: #fff; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.identidade-usuario small { color: #9fb5c5; font-size: .8125rem; }
.rodape-menu .button_to { margin: 0; }
.rodape-menu button { width: 100%; color: #c4d4df; background: transparent; border-color: #45637a; }
.rodape-menu button:hover { color: #fff; background: rgb(255 255 255 / 7%); border-color: #70899c; }
.area-principal { display: flex; min-width: 0; flex-direction: column; }
.cabecalho-app { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; padding: .8rem 2.25rem; border-bottom: 1px solid var(--borda); background: rgb(255 255 255 / 94%); backdrop-filter: blur(14px); }
.contexto-pagina { display: grid; gap: .05rem; }
.contexto-pagina span { color: var(--secundario); font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.contexto-pagina strong { color: var(--texto-forte); font-size: 1rem; }
.acoes-cabecalho { display: flex; align-items: center; gap: 1.25rem; }
/* A lista já oferece Novo RT ao lado do título; mantém-se o atalho no HTML
para navegação e testes, mas a apresentação mostra uma única ação. */
body:has(#novo-rtr) .acoes-cabecalho > .botao { display: none; }
.data-operacao { color: var(--secundario); font-size: .8125rem; }
main { width: 100%; max-width: 1540px; min-width: 0; flex: 1; margin: 0 auto; padding: 2.5rem 2.25rem 3.5rem; }
.rodape-app { padding: 1rem 2.25rem; color: #8090a0; font-size: .8125rem; }
/* Tipografia */
h1, h2, h3 { color: var(--texto-forte); }
h1 { margin: 0; font-size: clamp(1.8rem, 2.7vw, 2.45rem); font-weight: 690; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
h2 { margin: 2rem 0 1rem; font-size: 1.2rem; font-weight: 680; line-height: 1.35; }
p { margin: 0 0 1rem; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.75rem; }
.grafismo-painel { display: none; }
.sobretitulo { margin: 0 0 .4rem; color: var(--acao); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.descricao-pagina { max-width: 48rem; margin: .65rem 0 0; color: var(--secundario); font-size: .9rem; }
.acoes-pagina { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: .65rem; }
.texto-secundario { color: var(--secundario); font-size: .88rem; }
/* Controles e formulários */
button, input[type="submit"], .botao { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .62rem 1rem; border: 1px solid transparent; border-radius: var(--raio-pequeno); color: #fff; background: var(--acao); box-shadow: 0 1px 2px rgb(11 40 67 / 12%); font-size: .82rem; font-weight: 700; line-height: 1.35; text-decoration: none; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
button:hover, input[type="submit"]:hover, .botao:hover { background: var(--acao-hover); box-shadow: 0 5px 14px rgb(8 121 150 / 18%); transform: translateY(-1px); }
button:active, input[type="submit"]:active, .botao:active { transform: translateY(0); }
button:disabled, input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
form[aria-busy="true"] input[type="submit"] { opacity: .65; cursor: progress; }
main > form:not(.button_to), .painel-filtros { padding: 1.4rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 1px 2px rgb(11 40 67 / 3%); }
label { display: inline-block; margin-bottom: .38rem; color: var(--texto); font-size: .8125rem; font-weight: 700; }
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width: 100%; max-width: 36rem; min-height: 43px; padding: .58rem .75rem; border: 1px solid var(--borda-forte); border-radius: 6px; color: var(--texto-forte); background: #fff; box-shadow: inset 0 1px 1px rgb(11 40 67 / 3%); transition: border-color 140ms ease, box-shadow 140ms ease; }
input:hover, select:hover, textarea:hover { border-color: #93a7b7; }
input:focus, select:focus, textarea:focus { border-color: var(--foco); box-shadow: 0 0 0 3px rgb(8 147 181 / 12%); outline: none; }
input::placeholder, textarea::placeholder { color: #8493a2; opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.08rem; height: 1.08rem; vertical-align: middle; }
input[type="checkbox"] { margin-left: .5rem; }
input[type="radio"] { margin: 0 .5rem 0 0; }
input[type="date"] { max-width: 13rem !important; }
input[type="file"] { max-width: 100% !important; padding: .35rem !important; }
input::file-selector-button { margin-right: .75rem; padding: .4rem .7rem; border: 0; border-radius: 4px; color: var(--texto); background: var(--suave); cursor: pointer; }
fieldset { margin: 0 0 1.25rem; padding: 1rem 1.2rem .3rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
legend { padding: 0 .4rem; color: var(--secundario); font-size: .8125rem; font-weight: 700; }
.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors select { border-color: var(--erro) !important; }
.escolha { margin: 0 0 1rem; }
.escolha label { margin: 0; cursor: pointer; }
.ajuda { display: block; max-width: 40rem; margin: .4rem 0 0; color: var(--secundario); font-size: .8125rem; font-weight: 400; line-height: 1.5; }
.escolha .ajuda { margin-left: 1.65rem; }
.segredo { display: inline-block; font-size: 1.3rem; font-weight: 750; letter-spacing: .08em; }
.filtros p, .painel-filtros p { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.filtros label, .painel-filtros label { margin: 0; }
.filtros select, .filtros input[type="date"], .painel-filtros select, .painel-filtros input[type="date"] { width: auto; }
/* 📱 O select do filtro não passa da tela: o nome longo do empreendimento
("E04 — RESIDENCIAL BOULEVARD - TRES IRMÃS") levava a lista de RTs a 451px
num celular de 375px. */
.filtros select { max-width: min(100%, 36rem); min-width: 0; }
.filtros .escolha { display: flex; align-items: center; gap: .4rem; margin: 0 1.2rem .4rem 0; }
.filtros fieldset { display: flex; flex-wrap: wrap; align-items: center; }
.filtros fieldset legend { width: 100%; }
.paginacao { display: flex; gap: 1.25rem; }
/* Formulário em seções (fornecedor completo) e o painel de Administração. */
.campos-em-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1.25rem; }
.campos-em-grade p { margin: 0 0 1rem; }
.lista-de-marcar { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0 0 1rem; }
.lista-de-marcar label { margin: 0; font-weight: 520; cursor: pointer; }
.lista-de-marcar input[type="checkbox"] { margin: 0 .35rem 0 0; }
.painel-administracao { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.painel-administracao li { padding: 1rem 1.1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.painel-administracao a { font-weight: 700; }
.painel-administracao p { margin: .35rem 0 0; color: var(--secundario); font-size: .82rem; }
.form-em-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.form-em-linha input:not([type="submit"]):not([type="hidden"]) { width: auto; min-width: 9rem; }
/* Mensagens e tabelas */
.aviso { margin-bottom: 1.5rem; padding: .9rem 1rem; border: 1px solid var(--borda); border-left: 4px solid #7190a6; border-radius: var(--raio-pequeno); color: var(--texto); background: var(--superficie); box-shadow: 0 1px 2px rgb(11 40 67 / 3%); }
ul.aviso { padding-left: 2.5rem; }
.aviso-erro { color: var(--erro); background: var(--erro-fundo); border-color: #e1aeb5; border-left-color: var(--erro); }
.aviso-sucesso { color: var(--sucesso); background: var(--sucesso-fundo); border-color: #a9d8c1; border-left-color: var(--sucesso); }
.tabela-rolagem { margin: 1.35rem 0; overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: .82rem; }
th, td { padding: .85rem 1rem; border-bottom: 1px solid #e5eaee; vertical-align: middle; }
thead th { position: sticky; top: 0; z-index: 1; color: #5f7181; background: #f5f7f9; font-size: .8125rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; }
tbody tr { transition: background-color 100ms ease; }
tbody tr:hover { background: #f7fafb; }
tbody tr:last-child td { border-bottom: 0; }
tfoot th { border-bottom: 0; color: var(--texto-forte); background: #edf2f5; }
td { min-width: 100px; max-width: 32rem; overflow-wrap: anywhere; color: #2a4054; }
.valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td:first-child, .data { font-variant-numeric: tabular-nums; }
td.data, th.data { white-space: nowrap; }
.acao-tabela { text-align: right; white-space: nowrap; }
.acao-tabela a { font-weight: 700; text-decoration: none; }
td select { min-width: 10rem; }
td input[type="text"] { min-width: 7rem; }
td form:not(.button_to) { display: grid; min-width: 15rem; gap: .5rem; }
td .button_to { display: inline-block; margin: .35rem 0 0 .5rem; }
td .button_to button { padding: .4rem .65rem; color: var(--erro); background: transparent; border-color: var(--borda); font-size: .8125rem; box-shadow: none; }
td .button_to button:hover { background: var(--erro-fundo); border-color: var(--erro); }
.status { display: inline-flex; align-items: center; min-height: 24px; padding: .2rem .55rem; border-radius: 99px; font-size: .8125rem; font-weight: 750; white-space: nowrap; }
.status-neutro { color: #566a7c; background: #e8edf1; }
/* Filas */
nav.filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.25rem; padding: .35rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
nav.filtros a { padding: .55rem .75rem; border-radius: 6px; color: var(--secundario); font-size: .8125rem; font-weight: 650; text-decoration: none; }
nav.filtros a:hover { color: var(--texto); background: var(--suave); }
.filtros a.atual { color: #fff; background: var(--navy-claro); text-decoration: none; }
/* Manual de uso — o texto de `docs/` lido por dentro do sistema */
.manual { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.manual-sumario { position: sticky; top: 100px; display: grid; gap: 1.25rem; padding: 1.1rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 1px 2px rgb(11 40 67 / 3%); }
.manual-sumario .titulo-menu { color: var(--secundario); }
.manual-sumario a { display: block; padding: .35rem .55rem; border-radius: 6px; color: var(--texto); font-size: .82rem; text-decoration: none; }
.manual-sumario a:hover { background: var(--suave); }
.manual-sumario a[aria-current="page"] { color: #fff; background: var(--navy-claro); font-weight: 680; }
.manual-inicio { font-weight: 700; }
.manual-abertura { max-width: 48rem; }
.manual-abertura p { margin-bottom: 0; }
.manual-capa-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem; align-items: start; }
.manual-bloco { padding: 1.4rem 1.6rem 1.6rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.manual-bloco h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
.manual-bloco .manual-lista li { margin-bottom: .6rem; }
.manual-grupo { display: grid; gap: .1rem; }
.manual-conteudo { max-width: 46rem; padding: 2rem 2.25rem 2.5rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.manual-conteudo > :first-child { margin-top: 0; }
.manual-conteudo h2 { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); }
.manual-conteudo h3 { margin: 1.5rem 0 .6rem; font-size: 1rem; }
.manual-conteudo ul, .manual-conteudo ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.manual-conteudo li { margin-bottom: .45rem; }
.manual-conteudo li > ul, .manual-conteudo li > ol { margin: .45rem 0 0; }
.manual-conteudo code { padding: .1rem .3rem; border-radius: 4px; background: var(--suave); font-size: .85em; }
.manual-conteudo figure { width: max-content; max-width: 100%; margin: 1.5rem 0; }
/* A foto do manual nunca é cortada: no tamanho em que foi tirada, até a
largura da coluna (📸 HANDOFF §81: a foto do passo é um RECORTE — esticá-la
até a coluna borrava o recorte pequeno); altura pela proporção (os
`width`/`height` do ![]()
só reservam o lugar), sem altura fixa e sem
overflow escondendo pedaço. `object-fit: contain` garante que, se alguém
um dia puser altura, a foto encolhe inteira em vez de ser recortada. */
.manual-conteudo img { display: block; width: auto; max-width: 100%; height: auto; max-height: none; object-fit: contain; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--suave); }
.manual-conteudo .foto-do-manual { display: block; cursor: zoom-in; }
.manual-conteudo figcaption { margin-top: .5rem; color: var(--secundario); font-size: .8125rem; }
.manual-lista { list-style: none; padding-left: 0; }
.manual-lista a { font-weight: 650; }
.manual-passos { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); font-size: .85rem; }
.manual-proxima { margin-left: auto; text-align: right; }
/* Entrada */
.area-acesso { min-height: 100vh; background: #eaf0f4; }
.area-acesso .area-principal { min-height: 100vh; }
.area-acesso main { display: grid; min-height: calc(100vh - 45px); max-width: none; place-items: center; padding: 2.5rem; }
.acesso { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(360px, .82fr); width: min(1020px, 100%); min-height: 590px; overflow: hidden; border: 1px solid #cdd8e1; border-radius: 16px; background: var(--superficie); box-shadow: 0 28px 80px rgb(11 40 67 / 16%); }
.apresentacao-acesso { display: flex; flex-direction: column; justify-content: space-between; padding: 3.25rem; color: #dbe7ef; background: radial-gradient(circle at 18% 18%, rgb(97 215 233 / 20%), transparent 30%), linear-gradient(145deg, #103b5b 0%, #081f35 76%); }
.marca-acesso img { display: block; width: 220px; max-width: 100%; height: auto; }
.apresentacao-acesso h1 { max-width: 30rem; margin-bottom: 1.1rem; color: #fff; font-size: clamp(2rem, 4vw, 3.15rem); }
.apresentacao-acesso p:last-child { max-width: 27rem; margin: 0; color: #b9cbd7; }
.apresentacao-acesso .sobretitulo { color: var(--ciano); }
.formulario-acesso { align-self: center; padding: 3.5rem; }
.formulario-acesso h2 { margin: 0 0 .55rem; font-size: 1.6rem; letter-spacing: -.025em; }
.formulario-acesso form { margin-top: 1.75rem; padding: 0; border: 0; box-shadow: none; }
.formulario-acesso label { display: block; }
.formulario-acesso input { max-width: none !important; }
.formulario-acesso input[type="submit"] { width: 100%; margin-top: .5rem; }
.area-acesso .rodape-app { padding: .8rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 1080px) {
.area-interna { grid-template-columns: 224px minmax(0, 1fr); }
.barra-lateral { padding-inline: .75rem; }
.marca-imagem { width: 150px; }
main { padding: 2rem 1.5rem 3rem; }
.cabecalho-app { padding-inline: 1.5rem; }
.data-operacao { display: none; }
}
@media (max-width: 430px) {
.marca-produto span { display: none; }
.contexto-pagina strong { font-size: .88rem; }
.acoes-cabecalho .botao { font-size: .8125rem; }
.apresentacao-acesso { min-height: 210px; }
.apresentacao-acesso p:last-child { display: none; }
}
/* 🖨️ IMPRIMIR EM A4 (HANDOFF §59). 📌 Dono, 24/09/2026: "o formato de folha
padrão que usamos no Brasil é A4". Quem imprime é o navegador; o que sai no
papel é decidido aqui. A folha é A4 em pé; a tela larga (mapa de gastos,
razão, lista de RTs...) pede a folha DEITADA pela página nomeada
`paisagem` (`main.impressao-paisagem`, ligada por `documento_para_imprimir`).
📏 Número da página: o Chrome ignora `counter(page)` na margem do `@page`
— quem numera é "Cabeçalhos e rodapés" no diálogo de imprimir. */
@page { size: A4; margin: 12mm; }
@page paisagem { size: A4 landscape; margin: 10mm; }
.so-no-papel { display: none; }
.imprimir-no-fim { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--borda); }
.imprimir-no-fim .ajuda { flex: 1 1 18rem; margin: 0; }
@media print {
:root { --fundo: #fff; --superficie: #fff; --texto: #000; --texto-forte: #000; --secundario: #333; --borda: #bbb; --suave: #eee; }
html, body { min-width: 0; background: #fff; }
/* ⛔ Fora do papel: menu, cabeçalho de navegação, filtros, botões e avisos
de tela. O formulário que EMBRULHA a tabela (a lista de contas a pagar,
com as caixas de marcar) leva `.imprime-o-conteudo`: some só o controle. */
.barra-lateral, .cabecalho-app, .rodape-app, .pular-conteudo, .botao, .acoes-pagina, nav.filtros,
form:not(.imprime-o-conteudo), .imprime-o-conteudo :is(input, select, button, textarea) { display: none !important; }
.so-no-papel { display: block; }
.area-interna { display: block; }
main { max-width: none; padding: 0; }
main.impressao-paisagem { page: paisagem; }
/* Com o cabeçalho de impressão, o título da tela seria o mesmo duas vezes. */
main:has(> .cabecalho-de-impressao) > :is(.cabecalho-pagina, h1) { display: none; }
.cabecalho-pagina { margin-bottom: 1rem; }
a { color: inherit; text-decoration: none; }
h2 { margin: 1rem 0 .5rem; break-after: avoid; }
h3 { break-after: avoid; }
/* Sem rolagem cortando coluna: a tabela ocupa a largura da folha e quebra
o texto; o cabeçalho da tabela se repete em cada página e a linha não se
parte ao meio. */
.tabela-rolagem { margin: .5rem 0; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
table { width: 100%; min-width: 0; font-size: 9pt; }
thead { display: table-header-group; }
/* 🪤 O total sai UMA vez, no fim: como `table-footer-group` o Chrome o
repete no pé de cada folha — medido no livro diário, "Total (32
lançamentos)" em todas as quatro, e quem lê toma por subtotal da folha. */
tfoot { display: table-row-group; }
.lancamento-do-livro { break-inside: avoid; }
thead th { position: static; color: #000; font-size: 9pt; letter-spacing: 0; white-space: normal; }
th, td { padding: .25rem .35rem; border-bottom-color: #ccc; }
/* 🪤 A regra geral do `td` quebra em QUALQUER letra (`anywhere`): no papel
o "CMP/2026/00001" saía "CMP/2026/0000 / 1" e o "17952-1", "17 / 95 / 2-1"
— medido no PDF. No papel quebra-se entre palavras. */
td { min-width: 0; max-width: none; color: #000; overflow-wrap: break-word; }
tr { break-inside: avoid; }
tbody tr:hover { background: none; }
/* ✏️ Fonte legível: nada abaixo de 9pt no papel. */
/* 🪤 `html body` na frente: as regras dos selos moram MAIS ABAIXO no
arquivo, e com o mesmo peso a de baixo vence — medido no Chrome, o
"ATRASADO" da lista de RTs saía com 8,4pt. */
html body :is(.ajuda, small, .texto-secundario, .sobretitulo, .descricao-pagina, .status, .selo-estado, .marca-urgente,
.marca-atrasado, .marca-pagar-hoje, .selo-pagar-dia, .selo-pagar-hoje, .selo-pagar-urgente-passado) { font-size: 9pt; }
.ajuda { max-width: none; }
/* 🪤 `.quando-pagar` também é a caixa do formulário (borda arredondada):
na célula da lista, no papel, ela virava um quadro dentro da tabela. */
html body td.quando-pagar { white-space: normal; margin: 0; border-width: 0 0 1px; border-radius: 0; }
/* ATRASADO, URGENTE e "Pagar hoje" dizem algo com a cor: sem isto saíam
em branco sobre branco (o navegador corta o fundo para poupar tinta). */
html body :is(.marca-atrasado, .marca-urgente, .marca-pagar-hoje) { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
/* A lista de RTs tem doze colunas: os selos quebram em linhas, senão a
tabela passa da folha deitada (1.101 px numa de 1.046, medido); o número
e a data, nunca. */
#tabela-rtrs td:first-child, #tabela-rtrs td:nth-child(7) { white-space: nowrap; }
#tabela-rtrs :is(.selo-pagar, .selo-estado) { white-space: normal; }
}
/* O cabeçalho de impressão (`impressao/_cabecalho`): a casa, o título do
documento e os dados que fazem a folha solta dizer de onde veio. */
.cabecalho-de-impressao { margin: 0 0 .8rem; padding: 0 0 .5rem; border-bottom: 2px solid #000; color: #000; font-size: 10pt; }
.cabecalho-de-impressao-marca { display: flex; align-items: center; gap: .6rem; font-size: 9pt; }
.cabecalho-de-impressao-logo { width: auto; height: 9mm; }
.cabecalho-de-impressao-titulo { margin: .3rem 0 .2rem; font-size: 15pt; font-weight: 700; line-height: 1.2; }
.cabecalho-de-impressao-dados { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; margin: 0; }
.cabecalho-de-impressao-dados div { display: flex; gap: .3rem; }
.cabecalho-de-impressao-dados dt { font-weight: 700; }
.cabecalho-de-impressao-dados dt::after { content: ":"; }
.cabecalho-de-impressao-dados dd { margin: 0; }
/* Cadastro rápido (fornecedor e centro de custo) dentro do lançamento */
[data-controller="cadastro-rapido"] > form { padding: 1.4rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: 0 1px 2px rgb(11 40 67 / 3%); }
.campo-com-atalho { display: flex; align-items: center; gap: .5rem; max-width: 36rem; }
.campo-com-atalho select { flex: 1; min-width: 0; }
button.botao-atalho { min-height: 38px; padding: .45rem .7rem; color: var(--acao); background: transparent; border-color: var(--borda-forte); box-shadow: none; white-space: nowrap; }
button.botao-atalho:hover { color: #fff; background: var(--acao); }
dialog.dialogo { width: min(32rem, calc(100vw - 2rem)); padding: 1.4rem; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto); background: var(--superficie); box-shadow: var(--sombra); }
dialog.dialogo::backdrop { background: rgb(11 40 67 / 45%); }
dialog.dialogo h2 { margin-top: 0; }
.acoes-dialogo { display: flex; flex-wrap: wrap; gap: .6rem; }
/* 📚 Livro contábil: relatórios em árvore e impressão */
.tabela-arvore .conta-mae td { font-weight: 600; }
.tabela-arvore tfoot th, .linha-total td { font-weight: 700; border-top: 2px solid var(--borda-forte); }
.relatorio-secao { margin-top: 2rem; }
.relatorio-secao h3 { margin-bottom: .4rem; }
.igualdade { font-weight: 600; }
.selo { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8125rem; word-break: break-all; }
@media print {
[data-controller="imprimir"], .so-na-tela, button.botao-atalho { display: none !important; }
.relatorio-secao { margin-top: 1rem; }
/* A seção pequena (um grupo do balanço, a conta do razão com poucas
partidas) não se parte; a grande quebra entre linhas — pedir para não
partir uma seção maior que a folha só a empurraria para a página
seguinte, deixando um buraco. */
.relatorio-secao:not(:has(tbody tr:nth-child(10))) { break-inside: avoid-page; }
}
/* 🧾 RTR — relatório-recibo: o formulário e a via impressa no formato da folha */
.explicacao-rtr { max-width: 44rem; margin-top: 0; color: var(--secundario); }
.cabecalho-rtr { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline; margin-bottom: 1rem; }
.cabecalho-rtr p { margin: 0; }
.cabecalho-rtr #numero-previsto { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
/* 🔢 O Nº do RT editável: grande como o da folha, estreito como a data. */
.cabecalho-rtr #rtr_numero { max-width: 11rem; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rotulo-rtr { font-weight: 600; }
.formulario-rtr small.ajuda { color: var(--secundario); }
.mais-opcoes-rtr, .dados-pagamento-rtr { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.mais-opcoes-rtr > summary, .dados-pagamento-rtr > summary { cursor: pointer; font-weight: 600; }
.dados-pagamento-rtr > legend { font-weight: 600; }
/* 🖨️ O aviso de que o quadro vai inteiro na folha impressa (HANDOFF §75). */
.vai-na-folha { margin: .2rem 0 .6rem; padding: .45rem .7rem; border: 1px solid var(--info-borda); border-left: 4px solid var(--info); border-radius: var(--raio-pequeno); color: var(--info); background: var(--info-fundo); }
.empresa-pagadora-rtr select { min-width: min(100%, 26rem); max-width: 100%; font-weight: 600; }
/* 📲 O aviso para o grupo do WhatsApp — o verde do WhatsApp, escuro o bastante para o texto branco. */
.botao.botao-whatsapp { background: #15803d; border-color: #15803d; }
.botao.botao-whatsapp:hover { background: #166534; box-shadow: 0 5px 14px rgb(21 128 61 / 22%); }
/* 📲 A saída para quem não tem o app no computador (HANDOFF §76). */
.link-whatsapp-web { align-self: center; font-size: .875rem; }
.aviso-no-grupo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .8rem; margin-top: .6rem; }
.aviso-no-grupo details { flex: 1 1 16rem; min-width: 0; }
.aviso-no-grupo pre { margin: .4rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8125rem; }
#rtr_centro_de_custo_id { max-width: 100%; }
.o-que-aconteceu p { margin: .25rem 0; }
.acoes-rtr input[type=submit] { font-size: 1.05rem; }
/* 📝 A observação: à vista, logo abaixo de "Mais opções", mas sem destaque. */
.observacao-rtr { margin: 0 0 1rem; }
.observacao-rtr label { display: block; margin-bottom: .25rem; color: var(--secundario); font-weight: 400; }
.observacao-rtr textarea { min-height: 0; padding: .4rem .65rem; font-size: .9rem; resize: vertical; }
.item-adiantamento { display: block; margin: .2rem 0; }
/* 🧾 Os itens do RT (HANDOFF §73): um cartão por linha, "+ item" e o total. */
.itens-rtr { min-width: 0; margin: .6rem 0; padding: .7rem .9rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--suave-2); }
.itens-rtr > legend { font-weight: 700; }
.itens-rtr > .ajuda { margin: 0 0 .5rem; }
.item-rtr { margin: 0 0 .6rem; padding: .55rem .8rem; border: 1px solid var(--borda); border-left: 4px solid var(--acao); border-radius: var(--raio-pequeno); background: var(--superficie); }
.item-rtr p { margin: .3rem 0; }
.item-rtr textarea { max-width: 100%; }
.cabecalho-do-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.acoes-dos-itens { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .4rem 0; }
.total-dos-itens-rtr { margin: .4rem 0 0; }
.total-dos-itens-rtr output { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.liquido-rtr output { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.valor-negativo { color: var(--erro); }
/* 🧾 O ciclo do RT: o selo do estado, a marca de urgente, as ações e o
formulário que mostra só o que o tipo pede. */
.selo-estado { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; color: var(--texto); background: var(--suave); border: 1px solid var(--borda); }
.selo-aguardando { color: #7a4b00; background: #fff6e0; border-color: #efd28f; }
.selo-autorizado { color: var(--acao-hover); background: #e6f6fa; border-color: #a9dbe7; }
.selo-pago { color: var(--sucesso); background: var(--sucesso-fundo); border-color: #a9d8c1; }
.selo-nao-autorizado, .selo-cancelado { color: var(--erro); background: var(--erro-fundo); border-color: #e1aeb5; }
.marca-urgente { display: inline-block; margin-left: .4rem; white-space: nowrap; padding: .05rem .4rem; border-radius: 4px; color: #fff; background: var(--erro); font-size: .8125rem; letter-spacing: .05em; vertical-align: middle; }
tr.linha-urgente td { background: #fff7f7; }
/* ⏰ Quando pagar: o selo (urgente · hoje · dia), o destaque do que já foi
autorizado (ATRASADO, Pagar hoje) e os três botões grandes do formulário. */
.selo-pagar { display: inline-block; white-space: nowrap; vertical-align: middle; }
.selo-pagar-dia, .selo-pagar-hoje, .selo-pagar-urgente-passado { padding: .05rem .45rem; border-radius: 4px; font-size: .8125rem; font-weight: 700; border: 1px solid var(--borda); background: var(--suave); color: var(--texto); }
.selo-pagar-hoje { color: #7a4b00; background: #fff6e0; border-color: #efd28f; }
.marca-atrasado { display: inline-block; margin-left: .3rem; white-space: nowrap; padding: .05rem .4rem; border-radius: 4px; color: #fff; background: #8a1020; font-size: .8125rem; letter-spacing: .05em; vertical-align: middle; }
.marca-pagar-hoje { display: inline-block; margin-left: .3rem; white-space: nowrap; padding: .05rem .4rem; border-radius: 4px; color: #5c3900; background: #ffd873; font-size: .8125rem; vertical-align: middle; }
tr.linha-atrasado td { background: #fdecee; }
tr.linha-pagar-hoje td { background: #fffbea; }
td.quando-pagar { white-space: nowrap; }
.cartao-atrasado { border-color: #d88a95; border-left: 5px solid #8a1020; background: #fff5f6; }
.cartao-pagar-hoje { border-left: 5px solid #e0a800; background: #fffdf3; }
.quando-pagar { min-width: 0; margin: .6rem 0; padding: .6rem .8rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
.quando-pagar legend { font-weight: 700; }
.opcoes-quando-pagar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .5rem; }
.opcao-quando-pagar { display: flex; align-items: center; gap: .5rem; min-height: 48px; margin: 0; padding: .45rem .7rem; border: 2px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); cursor: pointer; }
.opcao-quando-pagar input[type=radio] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; }
.opcao-quando-pagar span { display: flex; flex-direction: column; line-height: 1.2; }
.opcao-quando-pagar small { color: var(--secundario); font-size: .8125rem; }
.opcao-quando-pagar:has(input:checked) { border-color: var(--acao); background: #e6f6fa; }
.opcao-urgente:has(input:checked) { border-color: var(--erro); background: #fff5f5; }
.dia-de-pagar { margin: .5rem 0 0; }
.contagem-de-pagar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.contagem-de-pagar .tem-atrasado a { color: #8a1020; font-weight: 700; }
.contagem-de-pagar .tem-algo a { font-weight: 700; }
.folha-rtr-pagamento { margin-top: .2rem; font-size: .85rem; }
.tipo-rtr { color: var(--secundario); font-size: .9rem; font-weight: 600; }
.acoes-do-ciclo { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.acoes-do-ciclo h2 { margin-top: 0; font-size: 1rem; }
.acoes-do-ciclo > summary { cursor: pointer; font-weight: 600; }
.botoes-do-ciclo { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.form-do-ciclo p { margin: .4rem 0; }
.pagar-parcela > summary { cursor: pointer; color: var(--acao); font-weight: 700; }
.campos-do-tipo, .parcelas-rtr { margin: .6rem 0; padding: .6rem .8rem; border-left: 3px solid var(--acao); background: var(--suave); border-radius: var(--raio-pequeno); }
/* 📱 O fieldset nasce com `min-width: min-content`: a tabela de parcelas
(ou um select de nome longo) o alargava a 523px num celular de 375px. */
.essencial-rtr { min-width: 0; }
.parcelas-rtr table { margin: .3rem 0; }
.pagar-parcelas-rt { display: grid; gap: .5rem; max-width: 36rem; margin: .8rem 0; }
.sem-envio-pelo-enter { display: none !important; }
.parcelas-rtr .soma-das-parcelas { font-weight: 700; font-variant-numeric: tabular-nums; }
.pagina-impressao { background: #fff; }
.pagina-impressao main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
.acoes-impressao { display: flex; gap: 1rem; align-items: center; }
.folha-rtr { padding: 1.2rem; border: 2px solid #000; color: #000; background: #fff; }
.folha-rtr h1 { margin: 0; font-size: 1.4rem; letter-spacing: .04em; }
.folha-rtr h2 { margin: .8rem 0 .3rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.folha-rtr-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 2px solid #000; }
.folha-rtr-casa { margin: 0; font-size: .85rem; }
.folha-rtr-numero { display: flex; flex-direction: column; align-items: flex-end; }
/* 🪤 `>`: o "PAGAMENTO: IMEDIATO (05/09)" também é um `strong` dentro do
número, e saía com 2,2rem — a folha de 12 pessoas da gratificação passava
para a segunda página só por isso (medido no PDF do Chrome, HANDOFF §59). */
.folha-rtr-numero > strong { font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.folha-rtr-bloco { margin-top: .6rem; }
.folha-rtr-empreendimentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .15rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.folha-rtr-empreendimentos li { display: flex; gap: .4rem; align-items: center; }
.folha-rtr-empreendimentos .caixa { display: inline-flex; width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; border: 1px solid #000; font-weight: 700; }
.folha-rtr-empreendimentos .numero { min-width: 2rem; font-variant-numeric: tabular-nums; }
.folha-rtr-empreendimentos .marcado { font-weight: 700; }
.folha-rtr-tabela { width: 100%; margin-top: .4rem; border-collapse: collapse; }
.folha-rtr-rolagem { overflow-x: auto; }
.folha-rtr-tabela th, .folha-rtr-tabela td { padding: .3rem .45rem; border: 1px solid #000; text-align: left; vertical-align: top; }
.folha-rtr-tabela th { width: 1%; white-space: nowrap; font-size: .8125rem; text-transform: uppercase; }
.folha-rtr-tabela td.valor { text-align: right; }
.folha-rtr-tabela .linha-total th, .folha-rtr-tabela .linha-total td { font-weight: 700; }
.folha-rtr-duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.folha-rtr-observacao { min-height: 2.5rem; margin: 0; padding: .3rem .45rem; border: 1px solid #000; }
.folha-rtr-assinaturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; margin-top: 2.5rem; font-size: .8125rem; text-align: center; }
.folha-rtr-assinaturas span { display: block; margin-bottom: .2rem; border-top: 1px solid #000; }
.folha-rtr-rodape { margin: .8rem 0 0; font-size: .8125rem; color: #444; }
@media print {
.pagina-impressao main { max-width: none; padding: 0; }
.folha-rtr { border-width: 1px; }
.folha-rtr-bloco, .folha-rtr-assinaturas { break-inside: avoid; }
.folha-rtr-rolagem { overflow: visible; }
.folha-rtr-rodape, .folha-rtr-casa, .folha-rtr-empreendimentos, .folha-rtr-assinaturas { font-size: 9pt; }
.folha-rtr { padding: .8rem; }
.folha-rtr-cabecalho { padding-bottom: .3rem; }
.folha-rtr-numero > strong { font-size: 1.8rem; }
.folha-rtr-assinaturas { margin-top: 1.6rem; }
.folha-rtr-rodape { margin-top: .4rem; }
}
/* 🖨️ A FOLHA DO RT NUMA PÁGINA (HANDOFF §73). 📌 Dono, 25/09/2026: o NÚMERO
no canto de cima (o maior), depois "RTR", depois a data e a hora; só o
centro escolhido; "colorido e compreensível"; o que está em branco fora;
a imagem anexada no papel; "tudo em uma única página".
⛔ Mora em `.folha-rt-uma-pagina`: a via do RTE usa o `.folha-rtr` base,
que não muda. 🎨 As cores são tokens que o `@media print` não troca
(--navy, --acao, --info-*, --sucesso-*, --erro), e o `print-color-adjust`
faz o fundo sair mesmo com "gráficos de plano de fundo" desmarcado.
📏 No papel, a folha é uma coluna da altura da página: os blocos ficam com
a altura deles, as IMAGENS com o que sobra (encolhem para caber) e as
assinaturas no pé. Só um RT com muitos itens e imagens passa da página. */
@page folha-rt { size: A4; margin: 8mm; }
.folha-rt-uma-pagina, .folha-rt-uma-pagina * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.folha-rt-uma-pagina { padding: 1rem 1.2rem; border: 1px solid var(--info-borda); border-radius: var(--raio); color: var(--texto); line-height: 1.35; }
.folha-rt-cabecalho { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem 1rem; margin: -1rem -1.2rem .9rem; padding: .8rem 1.2rem; border-bottom: 3px solid var(--navy); border-radius: var(--raio) var(--raio) 0 0; background: var(--info-fundo); }
.folha-rt-identificacao { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.folha-rt-numero { padding: .05rem .6rem; border-radius: var(--raio-pequeno); color: #fff; background: var(--cor-do-rtr); font-size: 2rem; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* 🟢 O RTE (entrada) na mesma folha, com a caixa VERDE (HANDOFF §76–§77). */
.folha-rte .folha-rt-numero { background: var(--cor-do-rte); }
.folha-rt-titulo { color: var(--navy); font-size: 1.35rem; font-weight: 800; letter-spacing: .06em; }
.folha-rt-data { color: var(--navy); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.folha-rt-casa { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; max-width: 24rem; text-align: right; }
.folha-rt-situacao { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .2rem .5rem; }
.folha-rt-logo { width: auto; height: 2.2rem; }
.folha-rt-empresa { font-weight: 700; }
.folha-rt-pagamento { font-size: .875rem; }
.folha-rt-pagamento.folha-rt-urgente strong { padding: .05rem .4rem; border-radius: 4px; color: #fff; background: var(--erro); }
.folha-rt-duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 1.2rem; }
.folha-rt-bloco { min-width: 0; margin: 0 0 .7rem; }
.folha-rt-uma-pagina h2 { margin: 0 0 .3rem; padding: .15rem .5rem; border-left: 4px solid var(--acao); color: var(--navy); background: var(--suave-2); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.folha-rt-dados { display: grid; grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr); gap: .1rem .6rem; margin: 0; }
.folha-rt-dados > div { display: contents; }
.folha-rt-dados dt { color: var(--secundario); font-size: .8125rem; font-weight: 600; }
.folha-rt-dados dd { margin: 0; overflow-wrap: anywhere; }
.folha-rt-destaque dd { color: var(--navy); font-weight: 700; }
/* 💳 O dado para pagamento que falta sai escrito, em destaque — quem aprova vê o buraco (HANDOFF §75). */
.folha-rt-dados dd.nao-informado { color: var(--atencao); font-style: italic; font-weight: 600; }
.folha-rt-coluna { min-width: 0; }
.folha-rt-placa { margin-left: .4rem; color: var(--secundario); }
.folha-rt-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.folha-rt-tabela th, .folha-rt-tabela td { padding: .25rem .5rem; border-bottom: 1px solid var(--info-borda); text-align: left; vertical-align: top; }
.folha-rt-tabela thead th { color: #fff; background: var(--navy); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.folha-rt-tabela tbody tr:nth-child(even) td { background: var(--suave-2); }
.folha-rt-tabela .valor { text-align: right; white-space: nowrap; }
.folha-rt-tabela .numero-do-item { width: 2rem; }
.folha-rt-tabela td.numero-do-item { color: var(--secundario); }
.folha-rt-tabela .quantidade { white-space: nowrap; }
.folha-rt-totais th { font-weight: 600; }
.folha-rt-totais .linha-total th, .folha-rt-totais .linha-total td { border-top: 0; border-bottom: 0; color: var(--sucesso); background: var(--sucesso-fundo); font-size: 1.1rem; font-weight: 800; }
.folha-rt-nota { margin: .2rem 0 0; color: var(--secundario); font-size: .8125rem; }
.folha-rt-uma-pagina .folha-rtr-observacao { min-height: 0; padding: .3rem .5rem; border: 1px solid var(--atencao-borda); border-radius: var(--raio-pequeno); background: var(--atencao-fundo); }
.folha-rt-uma-pagina .folha-rtr-anexos { margin: 0; padding-left: 1.2rem; font-size: .875rem; }
.folha-rt-imagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; margin-top: .5rem; }
.folha-rt-imagens figure { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: .3rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: #fff; }
.folha-rt-imagens img { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.folha-rt-imagens figcaption { margin-top: .2rem; color: var(--secundario); font-size: .8125rem; }
@media screen and (max-width: 560px) {
.folha-rt-uma-pagina { padding: .8rem; }
.folha-rt-cabecalho { margin: -.8rem -.8rem .8rem; padding: .7rem .8rem; }
.folha-rt-cabecalho { grid-template-columns: minmax(0, 1fr); }
.folha-rt-casa { align-items: flex-start; text-align: left; }
.folha-rt-situacao { justify-content: flex-start; }
.folha-rt-numero { font-size: 1.6rem; }
}
@media print {
html body .folha-rt-uma-pagina { page: folha-rt; display: flex; flex-direction: column; height: 279mm; margin: 0; padding: 0; border: 0; border-radius: 0; font-size: 10pt; }
html body .folha-rt-uma-pagina > * { flex: none; }
html body .folha-rt-cabecalho { margin: 0 0 3mm; padding: 2.5mm 4mm; border-radius: 0; }
html body .folha-rt-numero { font-size: 24pt; }
html body .folha-rt-titulo { font-size: 15pt; }
html body .folha-rt-casa { max-width: 75mm; }
html body .folha-rt-data { font-size: 12pt; }
html body .folha-rt-logo { height: 10mm; }
html body :is(.folha-rt-empresa, .folha-rt-pagamento) { font-size: 10pt; }
html body .folha-rt-uma-pagina h2 { margin: 0 0 1.2mm; font-size: 9pt; break-after: avoid; }
html body .folha-rt-bloco { margin: 0 0 2.5mm; break-inside: avoid; }
html body .folha-rt-duas-colunas { grid-template-columns: 1fr 1fr; gap: 0 5mm; }
html body :is(.folha-rt-dados dt, .folha-rt-nota, .folha-rt-imagens figcaption, .folha-rt-placa) { font-size: 9pt; }
html body .folha-rt-uma-pagina .folha-rtr-anexos { font-size: 9pt; }
html body .folha-rt-tabela { font-size: 9.5pt; }
html body .folha-rt-tabela :is(th, td) { padding: .6mm 1.6mm; }
html body .folha-rt-tabela thead th { color: #fff; font-size: 9pt; }
html body .folha-rt-totais .linha-total :is(th, td) { font-size: 11pt; }
html body .folha-rt-anexos.com-imagens { display: flex; flex: 1 1 0; flex-direction: column; min-height: 40mm; }
html body .folha-rt-anexos.com-imagens .folha-rt-imagens { flex: 1 1 0; min-height: 0; grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); margin-top: 2mm; }
html body .folha-rt-anexos.com-imagens .folha-rt-imagens:is(.com-2, .com-3, .com-4) { grid-template-columns: 1fr 1fr; }
html body .folha-rt-imagens figure { min-height: 0; overflow: hidden; }
html body .folha-rt-imagens img { flex: 1 1 0; min-height: 0; height: 100%; max-height: none; }
html body .folha-rt-uma-pagina .folha-rtr-assinaturas { margin-top: auto; padding-top: 9mm; font-size: 9pt; }
html body .folha-rt-uma-pagina .folha-rtr-rodape { margin-top: 1.5mm; font-size: 9pt; }
}
/* ✅ Autorizar RTs — o 👍 do grupo no CELULAR do diretor: cartões em vez de
tabela larga, botões grandes (48px), urgentes destacados. */
.total-pendente { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.total-pendente p { margin: 0; font-size: 1rem; }
.total-pendente p + p { margin-top: .35rem; }
.texto-urgente { color: var(--erro); }
.cartoes-rt { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr)); gap: .9rem; margin: 1rem 0; }
.cartao-rt { display: grid; align-content: start; gap: .55rem; min-width: 0; padding: 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.cartao-rt p { margin: 0; }
.cartao-urgente { border-color: #e1aeb5; border-left: 5px solid var(--erro); background: #fffafa; }
.cartao-rt-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.marcar-rt { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0; font-size: 1rem; cursor: pointer; }
.marcar-rt input[type="checkbox"], .marcar-todos input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: 0; }
.numero-rt { font-weight: 800; font-variant-numeric: tabular-nums; }
.valor-rt { margin-left: auto; color: var(--texto-forte); font-size: 1.35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.favorecido-rt { font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.descricao-rt { overflow-wrap: anywhere; }
.dados-rt { display: grid; gap: .3rem; margin: 0; font-size: .86rem; }
.dados-rt div { display: grid; grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr); gap: .5rem; }
.dados-rt dt { color: var(--secundario); }
.dados-rt dd { margin: 0; overflow-wrap: anywhere; }
.vencimento-rt { font-weight: 700; }
.quem-rt, .autorizado-rt, .ver-rt { color: var(--secundario); font-size: .82rem; }
.pagamento-rt { padding: .5rem .7rem; border-radius: var(--raio-pequeno); background: var(--suave); font-size: .88rem; overflow-wrap: anywhere; }
.bloqueio-rt { padding: .6rem .75rem; border-left: 3px solid #7190a6; border-radius: var(--raio-pequeno); color: var(--texto); background: var(--suave); font-size: .88rem; }
.acoes-cartao, .parcelas-a-pagar, .conferencia-rt { display: grid; gap: .5rem; }
.cartao-rt button, .cartao-rt input[type="submit"], .barra-do-lote button, .resumo-autorizar .botao { width: 100%; min-height: 48px; font-size: .95rem; }
button.botao-nao-autorizar { color: var(--erro); background: #fff; border-color: var(--erro); box-shadow: none; }
button.botao-nao-autorizar:hover { color: #fff; background: var(--erro); }
button.botao-conferir { color: var(--acao); background: #fff; border-color: var(--borda-forte); box-shadow: none; }
button.botao-conferir:hover { color: #fff; background: var(--acao); }
.nao-autorizar-rt > summary, .pagar-parcela-rt > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; min-height: 48px; padding: .5rem .8rem; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); font-weight: 700; text-align: center; cursor: pointer; list-style: none; }
.nao-autorizar-rt > summary::-webkit-details-marker, .pagar-parcela-rt > summary::-webkit-details-marker { display: none; }
.nao-autorizar-rt > summary { color: var(--erro); }
.pagar-parcela-rt > summary { color: #fff; background: var(--acao); border-color: var(--acao); }
.nao-autorizar-rt[open] > summary, .pagar-parcela-rt[open] > summary { margin-bottom: .5rem; }
.nao-autorizar-rt p, .pagar-parcela-rt p { margin: 0 0 .5rem; }
.conferido-rt { color: var(--sucesso); font-weight: 650; }
.lista-de-autorizacao form { margin: 0; }
/* A barra do lote fica no fim da lista e só GRUDA no rodapé da tela quando há
RT marcado — sem nada marcado, não cobre cartão nenhum. */
.barra-do-lote { position: static; z-index: 5; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5rem; margin-top: 1rem; padding: .6rem; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: rgb(255 255 255 / 97%); }
[data-marcados]:not([data-marcados="0"]) > .barra-do-lote { position: sticky; bottom: 0; box-shadow: 0 -8px 24px rgb(11 40 67 / 14%); }
.barra-do-lote .nao-autorizar-rt[open] { grid-column: 1 / -1; }
.barra-do-lote output { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.marcar-todos { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0; font-size: .95rem; cursor: pointer; }
.barra-do-lote button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.resumo-autorizar { margin: 0 0 1.5rem; padding: 1rem; border: 1px solid #efd28f; border-left: 5px solid #d99a00; border-radius: var(--raio); background: #fffbf0; }
.resumo-autorizar h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.resumo-autorizar p { margin: .6rem 0 0; }
.lista-resumo-rt { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.lista-resumo-rt li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; padding: .55rem .7rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); }
.lista-resumo-rt li span { overflow-wrap: anywhere; }
.lista-resumo-rt .valor-rt { font-size: 1rem; }
.lista-resumo-rt .espera-rt { width: 100%; color: var(--secundario); }
@media (min-width: 761px) {
.barra-do-lote { grid-template-columns: auto minmax(0, 1fr) minmax(12rem, auto) minmax(14rem, auto); align-items: start; }
.barra-do-lote .nao-autorizar-rt[open] { grid-column: auto; }
.acoes-cartao { grid-template-columns: 1fr 1fr; align-items: start; }
.resumo-autorizar .botao { width: auto; }
}
@media print { .barra-do-lote, .acoes-cartao, .parcelas-a-pagar, .conferencia-rt { display: none !important; } }
/* 🎁 Gratificação — a folha do mês das pessoas de obra (o RTR em lote) */
.forma-gratificacao { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; margin: 0; padding: 0; border: 0; }
.forma-gratificacao legend { float: left; margin-right: .4rem; padding: 0; }
/* 🪤 Pelo id: a regra geral dos campos (`input:not(...)...`, largura 100%)
pesa mais que qualquer classe, e cada campo da linha ocuparia a célula. */
#linhas-da-gratificacao td, #linhas-da-gratificacao th { min-width: 0; padding: .45rem .5rem; vertical-align: middle; }
/* O `button` da casa é `inline-flex`, e isso vence o atributo `hidden`. */
#linhas-da-gratificacao [hidden] { display: none !important; }
#linhas-da-gratificacao input:not([type="hidden"]), #linhas-da-gratificacao select { width: auto; min-width: 0; max-width: none; min-height: 34px; padding: .3rem .4rem; font-size: .86rem; }
#linhas-da-gratificacao .linha-gratificacao input:disabled, #linhas-da-gratificacao .linha-gratificacao select:disabled { padding-left: 0; border-color: transparent; color: var(--texto-forte); background: transparent; box-shadow: none; opacity: 1; -webkit-text-fill-color: var(--texto-forte); appearance: none; cursor: default; }
/* O líquido travado é `readonly`, e não `disabled` (o travado VAI no envio da
folha): a mesma cara de texto, à direita como o total. No foco pelo
teclado, volta a ter cara de campo — quem navega vê onde está. */
#linhas-da-gratificacao .linha-gratificacao input[readonly]:not(:focus) { padding-right: 0; border-color: transparent; color: var(--texto-forte); background: transparent; box-shadow: none; cursor: default; }
#linhas-da-gratificacao input[data-valor] { text-align: right; font-variant-numeric: tabular-nums; }
.botao-lapis { font-size: 1rem; line-height: 1; }
.linha-gratificacao.editando { background: var(--suave); }
/* 📏 Cinco colunas, com os dados EMPILHADOS dentro da célula (pessoa;
pagamento = depósito + PIX): oito colunas lado a lado passavam da tela e
cortavam o banco, a conta e o botão "Alterar" (23/09/2026). */
.pessoa-gratificacao, .pagamento-gratificacao { text-align: left; font-weight: 400; }
.nome-gratificacao { display: block; font-weight: 600; }
.campos-empilhados { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin-top: .1rem; }
.campos-empilhados small:has([data-texto="admissao"]:empty) { display: none; }
/* 🚜 O que está atrelado à pessoa no inventário ("PIPA AZUL · ABC-1D23 ·
azul"), debaixo da função; o "Máquina/veículo" só aparece com a linha
aberta no ✏️ (HANDOFF §48). */
.equipamentos-da-pessoa { display: block; color: var(--secundario); font-size: .8125rem; overflow-wrap: anywhere; }
.equipamentos-da-pessoa:empty { display: none; }
.linha-gratificacao:not(.editando) .campo-equipamento { display: none; }
#linhas-da-gratificacao .campo-equipamento select { max-width: 16rem; }
.equipamento-do-centro:not([hidden]) { display: block; margin: .3rem 0 0; font-size: .86rem; font-weight: 600; color: var(--texto-forte); overflow-wrap: anywhere; }
/* 🏷️ A categoria sugerida pelo sistema (HANDOFF §57): texto pequeno ao lado, que quebra no celular. */
.sugestao-de-categoria:not([hidden]) { display: block; margin: .3rem 0 0; font-size: .82rem; font-style: italic; color: var(--secundario); overflow-wrap: anywhere; }
/* 🏷️ O PATRIMÔNIO (HANDOFF §60): a miniatura da 1ª foto na lista e a galeria
da ficha. Largura FIXA e `object-fit: cover` — sem `libvips` (a máquina de
quem desenvolve) a "miniatura" é a foto inteira, e é o CSS que a encolhe;
na produção ela já vem com 480 px. A galeria quebra em colunas e cabe em
375 px sem rolar de lado. */
.grupo-do-patrimonio h2 { margin-top: 1.6rem; }
.tabela-patrimonio td.miniatura { width: 72px; padding-top: .25rem; padding-bottom: .25rem; }
.miniatura-do-bem { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: var(--raio-pequeno); border: 1px solid var(--borda); background: var(--suave); }
.tabela-patrimonio td.valor, .tabela-patrimonio th.valor { text-align: right; white-space: nowrap; }
.galeria-do-bem { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .9rem; margin: .8rem 0 1.2rem; padding: 0; list-style: none; }
.galeria-do-bem figure { margin: 0; padding: .5rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.galeria-do-bem img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-pequeno); background: var(--suave); }
.galeria-do-bem figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; margin-top: .4rem; font-size: .85rem; overflow-wrap: anywhere; }
.galeria-do-bem figcaption form { margin-left: auto; }
.nome-da-foto { font-weight: 600; min-width: 0; }
#gastos-por-categoria td.valor, #gastos-por-categoria th.valor, #ultimos-rts-do-equipamento td.valor { text-align: right; white-space: nowrap; }
/* 🪤 O campo do mês pega o `width: 100%` geral dos inputs (§54): aqui, largura do conteúdo. */
#filtro-patrimonio input[type="month"], #filtro-patrimonio input[type="search"], #filtro-gastos input[type="month"] { width: auto; }
#filtro-patrimonio .escolha { margin: 0; }
.grupo-do-patrimonio h2 small { display: inline; font-size: .8125rem; font-weight: 500; }
.tabela-patrimonio td:nth-child(2) { min-width: 8rem; overflow-wrap: normal; }
.tabela-patrimonio td.placa { white-space: nowrap; }
/* 🗂️ A conta do plano que a categoria simples usa (HANDOFF §62): uma linha discreta, para o contador. */
/* ⚠️ O par centro × categoria estranho (HANDOFF §62): discreto, sem bloquear. */
.aviso-do-par:not([hidden]) { display: block; margin: .2rem 0 0; font-size: .85rem; color: var(--erro); overflow-wrap: anywhere; }
.conta-do-contador:not([hidden]) { display: block; margin: .2rem 0 0; font-size: .8125rem; color: var(--secundario); overflow-wrap: anywhere; }
.historico { padding-left: 1.1rem; }
.historico li { margin-bottom: .35rem; }
.ficha { margin-bottom: 1.25rem; }
.obra-gratificacao select { max-width: none; }
#formulario-gratificacao .cabecalho-rtr select { width: auto; max-width: 24rem; }
.acoes-linha { white-space: nowrap; }
.erro-linha { margin: .2rem 0 0; padding-left: 1rem; color: var(--erro); font-size: .8125rem; white-space: normal; }
.valor-invalido { outline: 2px solid var(--erro); }
.acoes-linhas { display: flex; flex-wrap: wrap; gap: .6rem; }
.campos-lado-a-lado { display: flex; flex-wrap: wrap; gap: .6rem; }
.pagar-gratificacao h2 { margin-top: 0; }
/* 🖨️ A folha da gratificação sai DEITADA: a mesma página nomeada `paisagem`
das telas largas (HANDOFF §59 — antes era uma página nomeada só dela). */
.folha-gratificacao { page: paisagem; }
.folha-gratificacao-pagador { margin: .2rem 0 0; font-weight: 700; }
.folha-gratificacao-tabela { font-size: .8125rem; }
.folha-gratificacao-tabela thead th, .folha-gratificacao-tabela tfoot th { width: auto; }
.folha-gratificacao-tabela td { min-width: 0; overflow-wrap: normal; }
.folha-gratificacao-tabela td.obra { text-align: center; }
.folha-gratificacao-tabela td.valor, .folha-gratificacao-tabela td.cpf, .folha-gratificacao-tabela td.pix { white-space: nowrap; }
.folha-gratificacao-ref { font-size: 1.05rem; font-weight: 700; }
.folha-gratificacao-legenda { margin: .5rem 0 0; font-size: .8125rem; }
.folha-gratificacao-faixa { margin: .8rem 0 0; padding: .4rem; border: 2px solid #000; font-weight: 700; letter-spacing: .05em; text-align: center; }
@media print {
.folha-gratificacao-tabela tr { break-inside: avoid; }
/* 📌 No papel, justa para caber numa folha deitada — mas legível: 9pt, o
piso de todo papel da casa (HANDOFF §59; antes eram 7,5pt e 7pt). */
.folha-gratificacao-tabela { font-size: 9pt; }
.folha-gratificacao-tabela th, .folha-gratificacao-tabela td { padding: .12rem .3rem; line-height: 1.2; }
/* 📏 Medido no PDF do Chrome: 12 pessoas com a linha de 1,5 deixavam as
assinaturas sozinhas na 2ª folha. A faixa e as assinaturas andam juntas. */
.folha-gratificacao-faixa { margin-top: .5rem; break-after: avoid; }
.folha-gratificacao-legenda { font-size: 9pt; }
}
/* 📎 Anexos identificados (HANDOFF §49): na lista, o que cada arquivo É, o nome
que veio do computador discreto ao lado e o ✏️ para corrigir; no formulário,
um tipo e uma descrição ao lado de cada arquivo escolhido. Mobile-first: no
celular tudo empilha, botões de 44px. */
.campo-de-anexos { display: block; max-width: 44rem; }
/* 📋 Onde colar (Ctrl+V) a imagem — HANDOFF §73. */
.colar-anexo { display: block; width: 100%; min-height: 3.4rem; margin: .5rem 0 0; padding: .6rem .75rem; border: 2px dashed var(--borda-forte); border-radius: var(--raio-pequeno); color: var(--texto); background: var(--acao-suave); resize: none; cursor: copy; }
.colar-anexo:focus { border-color: var(--acao); border-style: solid; }
.aviso-de-colar { display: block; margin-top: .25rem; color: var(--secundario); font-size: .8125rem; }
.aviso-de-colar:empty { display: none; }
.miniatura-do-anexo { width: 3rem; height: 3rem; margin-right: .5rem; object-fit: cover; vertical-align: middle; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
.identificacoes-de-anexos { display: grid; gap: .5rem; margin-top: .5rem; }
.identificacoes-de-anexos:empty { display: none; }
.identificacao-de-anexo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem .6rem; padding: .6rem .7rem; border: 1px solid var(--borda); border-left: 3px solid var(--acao); border-radius: var(--raio-pequeno); background: var(--suave); }
.arquivo-escolhido { font-size: .85rem; font-weight: 700; overflow-wrap: anywhere; }
.identificacao-de-anexo label, .campos-da-identificacao label { display: grid; gap: .2rem; min-width: 0; margin: 0; font-size: .8125rem; }
.identificacao-de-anexo label > span, .campos-da-identificacao label > span { color: var(--secundario); }
.lista-de-anexos { display: grid; gap: .45rem; margin: .5rem 0 1rem; padding: 0; list-style: none; }
.anexo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; padding: .5rem .75rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); }
.anexo-o-que-e { display: flex; flex: 1 1 14rem; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; min-width: 0; }
.anexo-link { font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.anexo-link .anexo-rotulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.anexo-link:hover .anexo-rotulo { text-decoration-thickness: 2px; }
.anexo-formato { color: var(--secundario); font-weight: 400; white-space: nowrap; }
.nome-original, .quando-anexo { color: var(--secundario); font-size: .8125rem; overflow-wrap: anywhere; }
.anexo-sem-identificacao { border-style: dashed; }
.anexo-sem-identificacao .anexo-rotulo { font-style: italic; }
.identificar-anexo { flex: 0 0 auto; }
.identificar-anexo > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); background: var(--superficie); cursor: pointer; list-style: none; }
.identificar-anexo > summary::-webkit-details-marker { display: none; }
.identificar-anexo[open] { flex-basis: 100%; }
.identificar-anexo[open] > summary { margin-bottom: .5rem; background: var(--suave); }
.campos-da-identificacao { display: grid; gap: .5rem; }
.lista-de-anexos-compacta { margin: 0; }
.lista-de-anexos-compacta .anexo { padding: .45rem .6rem; font-size: .88rem; }
/* 🖼️ VER A IMAGEM SEM BAIXAR (HANDOFF §74): a miniatura na lista, a prévia
grande ao passar o mouse (só em tela com mouse — no celular, o toque abre a
janela), a galeria da tela do RT e a janela da página. */
.miniatura-de-anexo { position: relative; display: inline-flex; flex: none; width: 3.25rem; height: 3.25rem; padding: 0; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); background: var(--suave); cursor: zoom-in; }
.miniatura-de-anexo > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* 🪤 Achado da revisão do §74: centrada na miniatura e com 70vh, a prévia saía
da tela no alto (e à direita, nos cartões). Ela abre a partir do TOPO da
miniatura, mais baixa; nos cartões de "Autorizar RTs", embaixo dela. */
.previa-do-anexo { display: none; position: absolute; z-index: 40; top: 0; left: calc(100% + .6rem); width: min(22rem, 60vw); padding: .35rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); pointer-events: none; }
.previa-do-anexo img { display: block; width: 100%; max-height: min(55vh, 26rem); object-fit: contain; }
.cartao-rt .previa-do-anexo { top: calc(100% + .4rem); left: 0; width: min(20rem, 80vw); }
@media (hover: hover) and (pointer: fine) {
.miniatura-de-anexo:is(:hover, :focus-visible) .previa-do-anexo { display: block; }
}
.galeria-de-anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.galeria-de-anexos figure { display: grid; gap: .3rem; margin: 0; padding: .4rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.galeria-de-anexos a { display: block; border-radius: var(--raio-pequeno); background: var(--suave); cursor: zoom-in; }
.galeria-de-anexos img { display: block; width: 100%; height: 13rem; border-radius: var(--raio-pequeno); object-fit: contain; }
.galeria-de-anexos figcaption { color: var(--secundario); font-size: .8125rem; overflow-wrap: anywhere; }
dialog.visualizador-de-anexo { width: min(64rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); padding: .75rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
dialog.visualizador-de-anexo::backdrop { background: rgb(11 40 67 / 70%); }
.visualizador-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.visualizador-topo h2 { flex: 1 1 14rem; margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.visualizador-topo form { margin: 0; }
.visualizador-de-anexo img { display: block; width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; background: var(--suave); }
.visualizador-aviso { margin: 1.5rem 0; color: var(--secundario); text-align: center; }
/* 👀 O arquivo do grupo ao passar o mouse (Histórico × sistema, o mês): a
caixa é `fixed` — a tabela rola, e uma caixa `absolute` lá dentro era
cortada. O Stimulus `previa-de-documento` a põe ao lado do link. */
.documento-com-previa { display: inline; }
.previa-de-documento { position: fixed; z-index: 60; width: min(40rem, calc(100vw - 1rem)); height: min(80vh, 52rem); padding: .35rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.previa-de-documento[hidden] { display: none; }
.previa-de-documento iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--suave); }
.previa-de-documento img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--suave); }
@media print { .previa-do-anexo, .previa-de-documento, dialog.visualizador-de-anexo { display: none !important; } }
.folha-rtr-anexos { margin: 0; padding-left: 1.2rem; }
@media (min-width: 640px) {
.identificacao-de-anexo { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); }
.arquivo-escolhido { grid-column: 1 / -1; }
.campos-da-identificacao { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) auto; align-items: end; }
}
@media print { .identificar-anexo, .identificacoes-de-anexos { display: none !important; } }
/* 🗺️ Mapa de gastos (HANDOFF §54): escala SEQUENCIAL de um tom só, a cor de
ação da casa misturada ao branco em cinco passos. ⚠️ A cor nunca é a única
informação — o valor vai escrito em cada célula. O texto é o navy forte até
a faixa 4 (contraste ≥ 5:1) e branco na 5 (5:1 sobre --acao). */
:root { --mapa-1: #e1eff2; --mapa-2: #b5d7e0; --mapa-3: #84bccb; --mapa-4: #469bb0; --mapa-5: var(--acao); }
.periodo-do-mapa { margin: 0 0 1rem; padding: 0; border: 0; }
/* 🪤 O campo do mês pegava a largura da regra geral dos inputs (100%, até
36rem — especificidade 0,4,1), e a da casa para o filtro só fala em
`type="date"`: o rótulo "Empresa" ficava de um lado e o select caía na
linha de baixo, e o painel empurrava a grade para fora da primeira tela. */
#filtro-mapa input[type="month"] { width: auto; }
.legenda-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .25rem; color: var(--secundario); font-size: .8125rem; }
.legenda-mapa ul { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; padding: 0; list-style: none; }
.legenda-mapa li { display: inline-flex; align-items: center; gap: .35rem; }
.legenda-mapa .amostra { display: inline-block; width: 1.5rem; height: .95rem; border: 1px solid var(--borda-forte); border-radius: 3px; }
/* 🪤 `position: relative` na caixa: o "sem gasto" do leitor de tela
(`.somente-leitor`, absoluto) das células lá do fim da grade escapava da
rolagem e alargava a PÁGINA — medido no Chrome, 2.154 px de largura numa
janela de 1.280. */
.mapa-rolagem { position: relative; }
.mapa-de-gastos { width: auto; min-width: 100%; }
.mapa-de-gastos th, .mapa-de-gastos td { padding: .55rem .7rem; }
.mapa-de-gastos thead th.categoria { min-width: 7.5rem; max-width: 10rem; font-size: .8125rem; letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: bottom; }
.mapa-de-gastos thead .grupo-do-plano { display: block; margin-bottom: .15rem; color: var(--secundario); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.mapa-de-gastos thead .conta-inativa { display: block; color: var(--secundario); font-weight: 500; font-style: italic; }
.mapa-de-gastos tbody th { font-size: .8125rem; font-weight: 650; text-align: left; }
/* A obra fica presa à esquerda enquanto as categorias rolam por baixo. */
.mapa-de-gastos .coluna-obra { position: sticky; left: 0; z-index: 2; min-width: 11rem; max-width: 16rem; background: var(--superficie); box-shadow: 1px 0 0 var(--borda); white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.mapa-de-gastos thead .coluna-obra { z-index: 3; background: #f5f7f9; }
.mapa-de-gastos tfoot .coluna-obra, .mapa-de-gastos tfoot td { background: #edf2f5; font-weight: 700; }
.mapa-de-gastos .coluna-total { font-weight: 700; white-space: nowrap; border-right: 2px solid var(--borda); }
.mapa-de-gastos td.celula-mapa { min-width: 7.5rem; padding: 0; border-left: 2px solid var(--superficie); text-align: right; }
.celula-mapa a { display: block; padding: .6rem .7rem; color: var(--texto-forte); font-variant-numeric: tabular-nums; font-weight: 600; text-decoration: none; white-space: nowrap; }
.celula-mapa a:hover { text-decoration: underline; }
.celula-mapa a:focus-visible { outline-offset: -3px; }
.faixa-1 { background: var(--mapa-1); }
.faixa-2 { background: var(--mapa-2); }
.faixa-3 { background: var(--mapa-3); }
.faixa-4 { background: var(--mapa-4); }
.faixa-5 { background: var(--mapa-5); }
.celula-mapa.faixa-5 a { color: #fff; }
.celula-mapa.faixa-5 a:focus-visible { outline-color: var(--navy); }
.celula-negativa a { color: var(--erro); }
.celula-aberta { margin-top: 2rem; }
/* A regra geral do `td` quebra em qualquer letra ("SPE BOULEVAR/D"); na lista
da célula, quebra entre palavras e a tabela rola dentro da caixa. */
.celula-aberta td { overflow-wrap: break-word; }
.celula-aberta .empresa { min-width: 10rem; }
.celula-aberta .historico { min-width: 16rem; }
@media print {
.mapa-de-gastos .coluna-obra { position: static; min-width: 0; max-width: none; box-shadow: none; }
/* 🎨 A cor carrega informação no mapa: sem isto o navegador economiza
tinta e a grade sai em branco. */
.faixa-1, .faixa-2, .faixa-3, .faixa-4, .faixa-5, .legenda-mapa .amostra { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
/* Na folha deitada, sem as larguras mínimas da tela: a grade cabe na
largura do papel, e o nome da categoria quebra em linhas. */
.mapa-de-gastos { min-width: 0; }
.mapa-de-gastos td.celula-mapa, .mapa-de-gastos thead th.categoria { min-width: 0; max-width: none; }
.mapa-de-gastos th, .mapa-de-gastos td, .celula-mapa a { padding: .2rem .3rem; }
/* 📏 Medido no Chrome com a demonstração (9 categorias, ano até setembro):
com o valor numa linha só a grade dava 1.274 px numa folha de 1.046. O
"R$" pode descer para a linha de cima do número. */
.mapa-de-gastos .valor, .celula-mapa a { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
.mapa-de-gastos td.valor, .mapa-de-gastos td.celula-mapa { overflow-wrap: normal; }
/* O grupo do plano ("4.E EQUIPAMENTOS E TRANSPORTE") em cima de cada
categoria quebrava letra a letra na folha: no papel ele sai, e o código
da conta (4.12) já diz o grupo. */
.mapa-de-gastos thead .grupo-do-plano { display: none; }
.mapa-de-gastos thead th { hyphens: auto; overflow-wrap: anywhere; }
.mapa-de-gastos thead th.categoria, .mapa-de-gastos tbody th, .legenda-mapa { font-size: 9pt; }
#dica-da-celula { display: none; }
}
/* 📊 HANDOFF §66: o que abre embaixo de cada categoria do Histórico × sistema. */
.detalhe-da-categoria > td { padding-top: 0; }
.detalhe-da-categoria details > summary { cursor: pointer; color: var(--acao); font-size: .85rem; }
.detalhe-da-categoria details[open] { padding: .5rem 0 1rem; }
.detalhe-da-categoria h3 { margin: .9rem 0 .4rem; font-size: .85rem; color: var(--texto-forte); }
.resumo-do-historico { max-width: 52rem; margin: .6rem 0 0; line-height: 1.6; }
.graficos-do-detalhe { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2rem; }
.barras { margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.barras li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .15rem 0; }
.barra-rotulo { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.barra { display: block; height: .7rem; background: var(--suave); border-radius: 0 4px 4px 0; }
.barra > span { display: block; height: 100%; min-width: 2px; background: var(--acao); border-radius: 0 4px 4px 0; }
.barra-valor { font-variant-numeric: tabular-nums; text-align: right; }
.maiores-pagamentos { margin: 0; padding-left: 1.2rem; font-size: .82rem; }
.maiores-pagamentos li { padding: .15rem 0; }
/* Componentes compartilhados do sistema visual. */
.icone { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.painel, .estado-vazio, .zona-de-perigo { padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-cartao); background: var(--superficie); box-shadow: var(--sombra); }
.estado-vazio { display: flex; align-items: center; gap: .75rem; border-style: dashed; border-color: var(--borda-forte); color: var(--secundario); font-size: 1rem; }
.zona-de-perigo { border-color: var(--erro-borda); }
.zona-de-perigo h2 { color: var(--erro-texto); }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.0625rem; font-weight: 700; }
.sobretitulo { font-size: .8125rem; letter-spacing: .02em; text-transform: none; }
.descricao-pagina { max-width: 70ch; font-size: 1rem; }
.ajuda, small { font-size: .875rem; color: var(--secundario); }
.titulo-menu { color: var(--texto-no-navy-2); font-size: .8125rem; letter-spacing: .02em; text-transform: none; }
.subtitulo-menu { color: var(--texto-no-navy-2); font-size: .8125rem; }
.grupo-menu a { display: flex; align-items: center; gap: .75rem; min-height: var(--alvo); padding: .625rem .875rem; font-size: .875rem; }
.grupo-menu a[aria-current="page"] { border-left: 4px solid var(--ciano); padding-left: calc(.875rem - 4px); background: rgb(97 215 233 / 14%); font-weight: 700; }
.grupo-menu a::before { display: none; }
.menu-recolhido > summary { min-height: var(--alvo); font-size: .875rem; }
.barra-lateral { background: radial-gradient(circle at 12% 8%, rgb(97 215 233 / 10%), transparent 28%), var(--navy); }
.barra-lateral .link-manual, .rodape-menu button { display: flex; align-items: center; gap: .75rem; min-height: var(--alvo); font-size: .875rem; }
.rodape-menu button { justify-content: flex-start; }
.rodape-app { font-size: .8125rem; }
.cabecalho-app { min-height: 4.5rem; }
.contexto-pagina span { font-size: .8125rem; }
.contexto-pagina strong { font-size: 1.0625rem; }
.data-operacao { font-size: .875rem; }
button, input[type="submit"], .botao { min-height: var(--alvo); padding: .625rem 1.125rem; font-size: 1rem; font-weight: 650; }
.botao-secundario, button.botao-secundario, input[type="submit"].botao-secundario { color: var(--acao); background: white; border-color: var(--acao); box-shadow: none; }
.botao-secundario:hover, button.botao-secundario:hover, input[type="submit"].botao-secundario:hover { color: white; background: var(--acao); }
.botao-perigo, button.botao-perigo, input[type="submit"].botao-perigo { color: var(--erro); background: white; border-color: var(--erro); box-shadow: none; }
.botao-perigo:hover, button.botao-perigo:hover { color: white; background: var(--erro); }
form:has(input[name="_method"][value="delete"]) button { color: var(--erro); background: white; border-color: var(--erro); box-shadow: none; }
form:has(input[name="_method"][value="delete"]) button:hover { color: white; background: var(--erro); }
.botao-texto { min-height: var(--alvo); color: var(--acao); background: transparent; box-shadow: none; }
.botao.botao-grande { min-height: var(--alvo-decidir); font-size: 1.0625rem; }
.botao-autorizar, button.botao-autorizar, input[type="submit"].botao-autorizar { color: #fff; background: var(--sucesso); border-color: var(--sucesso); }
.botao-autorizar:hover, button.botao-autorizar:hover, input[type="submit"].botao-autorizar:hover { background: #10583c; border-color: #10583c; }
.botao-nao-autorizar, button.botao-nao-autorizar, .nao-autorizar-rt > summary { min-height: var(--alvo-decidir); color: var(--erro); background: #fff; border-color: var(--erro); }
td .button_to button { color: var(--acao); border-color: var(--borda-campo); }
td .button_to button.botao-perigo { color: var(--erro); border-color: var(--erro); }
label { display: block; margin-bottom: .25rem; color: var(--texto-forte); font-size: .9375rem; font-weight: 650; }
input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: var(--alvo); padding: .625rem .75rem; border-color: var(--borda-campo); font-size: 1rem; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; }
.field_with_errors input, .field_with_errors select, .field_with_errors textarea { border-color: var(--erro) !important; background: var(--erro-fundo); }
.campo { margin: 0 0 1rem; }
.campos-em-grade { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.formulario-em-secoes fieldset { padding: 1.25rem; background: white; }
.formulario-em-secoes legend { color: var(--texto-forte); font-size: 1.125rem; font-weight: 700; }
.barra-de-envio { padding: .75rem 0; }
nav.filtros { flex-wrap: nowrap; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; }
nav.filtros a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: var(--alvo); padding: .625rem 1rem; scroll-snap-align: start; font-size: .875rem; }
nav.filtros a.atual { color: var(--texto-forte); background: white; border-bottom: 3px solid var(--acao); font-weight: 700; }
nav.filtros a.atual:hover { color: var(--acao); }
.tabela-rolagem { max-width: 100%; background: linear-gradient(to right, white 30%, transparent), linear-gradient(to left, white 30%, transparent), linear-gradient(to right, rgb(11 40 67 / 8%), transparent 1rem), linear-gradient(to left, rgb(11 40 67 / 8%), transparent 1rem); background-attachment: local, local, scroll, scroll; }
table { font-size: .9375rem; }
thead th { color: var(--secundario); background: var(--suave); font-size: .8125rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.valor, .data, .numero-rt, .valor-rt, output, tfoot { font-variant-numeric: tabular-nums; }
.valor { text-align: right; white-space: nowrap; }
.linha-total td, tfoot th, tfoot td { border-top: 2px solid var(--borda-forte); background: var(--suave); font-weight: 700; }
.status, .selo-estado, .selo-pagar, .marca-urgente, .marca-atrasado, .marca-pagar-hoje { min-height: 1.75rem; padding: .25rem .6rem; border: 1px solid transparent; font-size: .8125rem; font-weight: 700; }
.status-ok, .selo-pago { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso-borda); }
.status-espera, .selo-aguardando, .marca-pagar-hoje { color: var(--atencao); background: var(--atencao-fundo); border-color: var(--atencao-borda); }
.status-alerta, .selo-nao-autorizado, .marca-urgente { color: var(--erro-texto); background: var(--erro-fundo); border-color: var(--erro-borda); }
.status-info, .selo-autorizado { color: var(--info); background: var(--info-fundo); border-color: var(--info-borda); }
.status-neutro, .selo-cancelado, .selo-pagar-dia { color: var(--neutro); background: var(--neutro-fundo); border-color: var(--neutro-borda); }
.marca-atrasado { color: white; background: var(--erro); border-color: var(--erro); }
.aviso { padding: 1rem 1.25rem; border-left: 4px solid var(--info); font-size: 1rem; }
.aviso-erro { color: var(--erro-texto); background: var(--erro-fundo); border-left-color: var(--erro); }
.aviso-sucesso { color: var(--sucesso); background: var(--sucesso-fundo); border-left-color: var(--sucesso); }
.cartao-rt { gap: .75rem; padding: 1rem 1.125rem; border-radius: var(--raio-cartao); }
.cartao-rt .valor-rt { font-size: 1.5rem; }
.favorecido-rt { font-size: 1.125rem; }
.cartao-atrasado { border-left: 5px solid var(--erro); background: var(--erro-fundo); }
.cartao-pagar-hoje { border-left: 5px solid var(--atencao-borda); }
.cartao-urgente { border-left: 5px solid var(--erro); background: white; }
.cartao-rt button, .cartao-rt input[type="submit"], .barra-do-lote button, .resumo-autorizar .botao, .pagar-parcela-rt > summary { min-height: var(--alvo-decidir); }
.pagar-parcela-rt > summary { color: white; background: var(--sucesso); border-color: var(--sucesso); }
.total-pendente { padding: 1.25rem; border-radius: var(--raio-cartao); }
.total-pendente strong { font-variant-numeric: tabular-nums; }
.barra-do-lote { border-top: 3px solid var(--ciano); }
[data-marcados]:not([data-marcados="0"]) > .barra-do-lote { box-shadow: var(--sombra-baixa); }
.barra-do-lote output { font-size: 1.125rem; }
.marcar-rt, .marcar-todos { min-height: 48px; }
.nao-autorizar-rt > summary, .pagar-parcela-rt > summary, .mais-opcoes-rtr > summary, .acoes-do-ciclo > summary, .identificar-anexo > summary { min-height: var(--alvo); cursor: pointer; }
/* 📸 A foto do passo é mais LARGA que o texto (HANDOFF §81): o texto fica na
medida de leitura, e a foto usa a largura do cartão — no monitor grande, o
recorte aparece quase em tamanho real. A foto dentro do passo () sai
da margem da lista até a borda do cartão (`cqi` = a largura do cartão). */
.manual-conteudo { max-width: min(100%, 64rem); container-type: inline-size; }
.manual-conteudo > :is(p, ul, ol) { max-width: var(--largura-leitura); }
.manual-conteudo li > figure { max-width: calc(100cqi - 1.3rem); margin: .75rem 0 1.1rem; }
.manual-conteudo li li > figure { max-width: calc(100cqi - 2.6rem); }
.manual > *, .manual-conteudo table { min-width: 0; }
.manual-sumario a { overflow-wrap: anywhere; }
.sumario-recolhivel { position: sticky; top: 100px; min-width: 0; }
.sumario-recolhivel > summary { display: none; }
.sumario-recolhivel .manual-sumario { position: static; }
.manual-conteudo p, .manual-conteudo li { font-size: 1.0625rem; line-height: 1.65; }
.manual-conteudo h2 { font-size: 1.35rem; }
.manual-conteudo h3 { font-size: 1.1rem; }
.manual-conteudo a { text-decoration: underline; }
.manual-conteudo figcaption { font-size: .875rem; }
.manual-conteudo figure { padding: .5rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.manual-conteudo table { display: block; max-width: 100%; overflow-x: auto; font-size: .9375rem; }
.manual-conteudo th { position: static; text-transform: none; }
.manual-conteudo td { overflow-wrap: break-word; vertical-align: top; }
.manual-passos a { display: inline-flex; align-items: center; min-height: var(--alvo); padding: .75rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: white; }
.manual-passos a:not(.manual-proxima)::before { content: "Anterior · "; }
.manual-passos a.manual-proxima::before { content: "Próxima · "; }
.manual-capa-blocos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.manual-conteudo code { font-family: var(--fonte-mono); }
.resumo-autorizar { padding: 1.25rem; border-radius: var(--raio-cartao); }
.lista-resumo-rt li { gap: .5rem .75rem; min-height: 3.5rem; }
.lista-resumo-rt .valor-rt { font-size: 1.25rem; }
.painel-administracao li { min-width: 0; padding: 1.25rem; border-radius: var(--raio-cartao); }
.painel-administracao li strong { font-variant-numeric: tabular-nums; }
.painel-administracao li:hover { border-color: var(--borda-campo); box-shadow: 0 4px 20px rgb(11 40 67 / 10%); }
.painel-administracao a { display: inline-flex; align-items: center; gap: .6rem; min-height: var(--alvo); font-size: 1rem; }
.formulario-rtr .essencial-rtr { min-width: 0; padding: 1.25rem; border-color: var(--borda); background: var(--superficie); }
.opcao-quando-pagar { min-height: var(--alvo-decidir); border-color: var(--borda-campo); }
.opcao-quando-pagar:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); }
.liquido-rtr { padding: 1rem 1.25rem; border-left: 4px solid var(--sucesso); border-radius: var(--raio); background: var(--sucesso-fundo); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
/* 🛒 Compra pela internet (HANDOFF §72): os campos só aparecem com a marca — sem JavaScript. */
.compra-pela-internet { margin: .5rem 0 1rem; padding: 0; border: 0; min-width: 0; }
.marcar-compra-pela-internet { display: flex; align-items: center; gap: .6rem; min-height: var(--alvo, 44px); cursor: pointer; }
.campos-da-compra-pela-internet { display: none; }
.compra-pela-internet:has(input[type="checkbox"]:checked) .campos-da-compra-pela-internet { display: block; margin-top: .5rem; padding: 1rem 1.25rem; border: 1px solid var(--borda); border-left: 4px solid var(--acao); border-radius: var(--raio); background: var(--superficie); }
.campos-da-compra-pela-internet input[type="url"], .campos-da-compra-pela-internet textarea { width: 100%; max-width: 46rem; }
.o-que-aconteceu { border-left-width: 6px; }
.o-que-aconteceu.estado-aguardando { color: var(--atencao); background: var(--atencao-fundo); border-color: var(--atencao-borda); }
.o-que-aconteceu.estado-autorizado { color: var(--info); background: var(--info-fundo); border-color: var(--info-borda); }
.o-que-aconteceu.estado-pago { color: var(--sucesso); background: var(--sucesso-fundo); border-color: var(--sucesso-borda); }
.o-que-aconteceu.estado-nao-autorizado { color: var(--erro-texto); background: var(--erro-fundo); border-color: var(--erro-borda); }
.o-que-aconteceu.estado-cancelado { color: var(--neutro); background: var(--neutro-fundo); border-color: var(--neutro-borda); }
#decidir, #autorizar-folha, #pagar { padding: 1.25rem; border: 2px solid var(--acao); border-radius: var(--raio-cartao); background: var(--superficie); }
.painel-decisao { padding: 1.25rem; border: 2px solid var(--acao); border-radius: var(--raio-cartao); background: var(--superficie); box-shadow: var(--sombra); }
.painel-decisao form > p:last-of-type { display: flex; flex-wrap: wrap; gap: .75rem; }
.ficha:has(> dl) { padding: 1.25rem; border: 1px solid var(--borda); border-radius: var(--raio-cartao); background: var(--superficie); box-shadow: var(--sombra); }
#quando-pagar, #conferencia, #mais-acoes { border-radius: var(--raio-cartao); }
.tabela-ficha { max-width: 100%; }
.tabela-ficha th { width: 38%; white-space: normal; }
.resumo-saldos-mobile { display: none; }
.recuo[data-nivel="0"] { padding-left: .6rem; }
.recuo[data-nivel="1"] { padding-left: 1.8rem; }
.recuo[data-nivel="2"] { padding-left: 3rem; }
.recuo[data-nivel="3"] { padding-left: 4.2rem; }
.recuo[data-nivel="4"] { padding-left: 5.4rem; }
.recuo[data-nivel="5"] { padding-left: 6.6rem; }
.recuo[data-nivel="6"] { padding-left: 7.8rem; }
.recuo[data-nivel="7"] { padding-left: 9rem; }
.recuo[data-nivel="8"] { padding-left: 10.2rem; }
.lista-de-anexos-compacta a, .anexo-link { display: inline-flex; align-items: center; min-height: var(--alvo); gap: .5rem; overflow-wrap: anywhere; }
.anexo-sem-identificacao { border: 1px dashed var(--borda-forte); border-radius: var(--raio); }
.campo-de-anexos { min-width: 0; }
.campo-de-anexos input[type="file"] { min-height: 48px; }
.campo-de-anexos select, .campo-de-anexos input[type="text"] { max-width: 100%; }
.identificar-anexo > summary { display: inline-flex; align-items: center; gap: .5rem; min-width: var(--alvo); }
.linha-gratificacao.editando { outline: 2px solid var(--foco); outline-offset: -2px; }
.acoes-impressao { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.acoes-impressao a, .acoes-impressao button { min-height: var(--alvo); }
.vencida, .estourou { color: var(--erro-texto); font-weight: 700; }
tr.subtotal { background: var(--suave); font-weight: 700; }
.sugestao-de-categoria { border-left: 4px solid var(--info); background: var(--info-fundo); }
.aviso-do-par, #aviso-dados-de-pagamento { border-left: 4px solid var(--atencao-borda); background: var(--atencao-fundo); }
.botao-menu, .fechar-menu { display: none; align-items: center; gap: .5rem; min-height: var(--alvo); padding: .5rem .75rem; color: var(--acao); background: white; border: 1px solid var(--borda-campo); box-shadow: none; }
.barra-lateral .fechar-menu, .barra-lateral .fechar-menu:hover { color: white; background: #28506e; border-color: #718fa5; box-shadow: none; }
.atalho-pendencia { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--alvo); padding: .5rem .75rem; border: 1px solid var(--atencao-borda); border-radius: var(--raio-pequeno); color: var(--atencao); background: var(--atencao-fundo); font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mostrar-senha { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 1.25rem; }
.mostrar-senha label { margin: 0; }
.formulario-acesso input[type="submit"] { min-height: var(--alvo-decidir); }
.area-acesso { background: radial-gradient(circle at 15% 15%, var(--acao-suave), transparent 32%), var(--fundo); }
.apresentacao-acesso { background: radial-gradient(circle at 16% 20%, rgb(97 215 233 / 14%), transparent 32%), var(--navy); }
@media (max-width: 1080px) {
.area-interna { display: block; }
.area-interna .barra-lateral { position: relative; width: 100%; height: auto; max-height: none; }
body[data-menu-pronto] .barra-lateral { position: fixed; inset: 0 auto 0 0; width: min(20rem, 88vw); height: 100dvh; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility .2s; z-index: 50; }
body[data-menu-aberto] .barra-lateral { transform: none; visibility: visible; }
body[data-menu-aberto] { overflow: hidden; }
body[data-menu-aberto]::after { content: ""; position: fixed; inset: 0; background: rgb(11 40 67 / 45%); z-index: 40; }
body[data-menu-pronto] .botao-menu, body[data-menu-pronto] .fechar-menu { display: inline-flex; }
.barra-lateral nav { display: grid; gap: 1.25rem; overflow-x: visible; }
.grupo-menu { display: grid; }
.barra-lateral .titulo-menu, .barra-lateral .subtitulo-menu { display: block; }
.rodape-menu { display: grid; }
.cabecalho-app { position: sticky; top: 0; }
.manual { grid-template-columns: minmax(0, 1fr); }
.sumario-recolhivel { position: static; }
.sumario-recolhivel > summary { display: flex; align-items: center; min-height: var(--alvo); padding: .75rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto-forte); background: white; font-weight: 700; cursor: pointer; }
.sumario-recolhivel[open] > summary { border-radius: var(--raio) var(--raio) 0 0; }
.sumario-recolhivel .manual-sumario { border-radius: 0 0 var(--raio) var(--raio); }
}
@media (max-width: 760px) {
.area-interna { display: block; }
.barra-lateral { position: relative; height: auto; padding: 1rem; overflow: visible; }
.marca { display: inline-block; padding: 0; }
.marca-imagem { width: 128px; }
.marca-produto { display: inline-grid; margin: 0 0 0 1rem; padding: 0 0 0 1rem; border-top: 0; border-left: 1px solid var(--navy-linha); vertical-align: middle; }
.barra-lateral nav { display: grid; gap: 1.25rem; margin-top: 1rem; overflow-x: visible; }
.grupo-menu { display: grid; }
.barra-lateral .titulo-menu, .barra-lateral .subtitulo-menu { display: block; }
.menu-recolhido { display: block; }
.menu-recolhido > summary.titulo-menu { display: flex; }
.grupo-menu a { min-height: var(--alvo); }
.cabecalho-app { position: static; min-height: 64px; padding: .65rem 1rem; }
.contexto-pagina span { display: none; }
.acoes-cabecalho .botao { min-height: 38px; padding: .5rem .75rem; }
main { padding: 1.5rem 1rem 2.5rem; }
.manual { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.manual-sumario { position: static; }
.manual-conteudo { padding: 1.25rem; }
.cabecalho-pagina { align-items: flex-start; flex-direction: column; gap: 1rem; }
.acoes-pagina { width: 100%; }
.acoes-pagina .botao { width: 100%; }
main > form:not(.button_to), .painel-filtros { padding: 1rem; }
.painel-filtros p { align-items: stretch; flex-direction: column; }
.painel-filtros select, .painel-filtros input[type="date"] { width: 100%; max-width: none !important; }
nav.filtros { flex-wrap: nowrap; overflow-x: auto; }
nav.filtros a { flex: 0 0 auto; }
th, td { padding: .75rem .8rem; }
/* 📱 As parcelas do RT empilham: uma linha por parcela, cada campo com o
seu rótulo (a tabela de três colunas não cabe no celular). */
.parcelas-rtr thead { display: none; }
.parcelas-rtr tr { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .35rem .5rem; padding: .5rem 0; border-bottom: 1px solid var(--borda); }
.parcelas-rtr td { display: block; min-width: 0; padding: 0; border: 0; }
.parcelas-rtr td.numero-da-parcela { grid-row: span 2; align-self: center; font-weight: 700; }
.parcelas-rtr td[data-rotulo]::before { content: attr(data-rotulo); display: block; margin-bottom: .2rem; color: var(--secundario); font-size: .8125rem; font-weight: 700; }
.rodape-app { padding: 1rem; }
.area-acesso main { padding: 1rem; }
.acesso { grid-template-columns: 1fr; min-height: 0; }
.apresentacao-acesso { min-height: 240px; padding: 2rem; }
.apresentacao-acesso h1 { font-size: 2rem; }
.marca-acesso img { width: 165px; }
.formulario-acesso { width: 100%; padding: 2rem; }
#filtro-patrimonio .escolha { flex-wrap: wrap; width: 100%; }
#filtro-patrimonio .escolha select, #filtro-patrimonio .escolha input { width: 100%; max-width: none !important; }
#filtro-mapa input[type="month"] { width: 100%; max-width: none !important; }
.mapa-de-gastos .coluna-obra { min-width: 8rem; max-width: 9.5rem; }
.mapa-de-gastos td.celula-mapa, .mapa-de-gastos thead th.categoria { min-width: 6.5rem; }
.cabecalho-app { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; }
.acoes-cabecalho { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.acoes-cabecalho > * { flex: 1 1 auto; }
.acoes-cabecalho .atalho-pendencia { justify-content: center; }
.acoes-cabecalho .botao { min-height: var(--alvo); }
.barra-lateral .marca-produto { display: grid; }
main { padding: 1.25rem 1rem 3rem; }
.cabecalho-pagina { gap: .75rem; }
.barra-de-envio { position: sticky; z-index: 10; bottom: 0; margin: 1.5rem -1rem -1rem; padding: .75rem 1rem; background: white; box-shadow: var(--sombra-baixa); }
.barra-de-envio input[type="submit"], .barra-de-envio button { width: 100%; min-height: var(--alvo-decidir); }
.tabela-empilhavel, .tabela-empilhavel tbody, .tabela-empilhavel tr, .tabela-empilhavel td { display: block; width: 100%; }
.tabela-empilhavel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tabela-empilhavel tr { margin: .75rem 0; padding: .75rem; border: 1px solid var(--borda); border-radius: var(--raio); background: white; }
.tabela-empilhavel td { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: .5rem; min-width: 0; max-width: none; padding: .5rem 0; }
.tabela-empilhavel td[data-rotulo]::before { content: attr(data-rotulo); color: var(--secundario); font-weight: 650; }
#saldos-bancarios tfoot { display: none; }
.resumo-saldos-mobile { display: grid; gap: .45rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--suave); }
.resumo-saldos-mobile span { display: flex; justify-content: space-between; gap: 1rem; }
.cartoes-rt { grid-template-columns: minmax(0, 1fr); }
.cartao-rt-topo { align-items: flex-start; }
.cartao-rt .valor-rt { width: 100%; margin: .25rem 0; font-size: 1.5rem; }
.dados-rt div { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
.marcar-rt { padding: .25rem .5rem; border: 1px solid var(--borda-campo); border-radius: var(--raio-pequeno); }
.barra-do-lote { grid-template-columns: minmax(0, 1fr); }
[data-marcados]:not([data-marcados="0"]) > .barra-do-lote { max-height: 48dvh; overflow-y: auto; }
.barra-do-lote .nao-autorizar-rt[open] { grid-column: auto; }
.resumo-autorizar .botao { width: 100%; }
.inicio-novo-rt .botao { width: 100%; }
.formulario-acesso { padding: 1.5rem; }
.formulario-rtr .essencial-rtr { padding: 1rem; }
.opcoes-quando-pagar { display: grid; grid-template-columns: minmax(0, 1fr); }
.tabela-ficha th, .tabela-ficha td { display: block; width: 100%; min-width: 0; border-bottom: 0; }
.tabela-ficha td { padding-top: 0; border-bottom: 1px solid var(--borda); }
.acoes-impressao a, .acoes-impressao button { width: 100%; }
.painel-administracao { grid-template-columns: minmax(0, 1fr); }
.manual-passos { flex-direction: column; }
.apresentacao-acesso { min-height: 150px; padding: 1.5rem; }
.apresentacao-acesso h1, .apresentacao-acesso p { display: none; }
.marca-acesso img { width: 180px; }
}
/* Desktop: leitura de grande volume sem transformar cada RT em uma página. */
@media screen and (min-width: 1081px) {
:root { --largura-menu: 17rem; }
.area-interna { background: linear-gradient(180deg, #f8fbfd, var(--fundo) 28rem); }
.barra-lateral { padding: 1.55rem 1.05rem 1rem; background: radial-gradient(circle at 100% 0, rgb(97 215 233 / 13%), transparent 20rem), linear-gradient(180deg, #102f49, #09243c 72%); }
.barra-lateral .marca { padding: .15rem .8rem .65rem; }
.barra-lateral .marca-imagem { width: 184px; }
.barra-lateral .marca-produto { margin: .45rem .8rem 1.45rem; }
.barra-lateral nav { gap: 1.15rem; }
.barra-lateral .grupo-menu a { border-radius: 8px; }
.cabecalho-app { min-height: 72px; padding-inline: clamp(2rem, 3vw, 3.5rem); border-bottom-color: #dce5eb; }
.contexto-pagina span { letter-spacing: .08em; }
main { max-width: 1800px; padding: 2.2rem clamp(2rem, 3vw, 3.5rem) 4rem; }
.rodape-app { padding-inline: clamp(2rem, 3vw, 3.5rem); }
main > .cabecalho-pagina { align-items: center; min-height: 5.25rem; margin-bottom: 1.3rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--borda); }
.cabecalho-pagina .acoes-pagina { align-self: center; }
.cabecalho-pagina h1 { font-size: 2.15rem; letter-spacing: -.025em; }
.grafismo-painel { display: block; width: 230px; max-width: 25%; height: auto; opacity: .85; }
.sobretitulo { color: #176f86; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tabela-rolagem { border-radius: var(--raio-cartao); box-shadow: 0 2px 6px rgb(11 40 67 / 4%), 0 14px 34px rgb(11 40 67 / 5%); }
table { font-size: .875rem; }
th, td { padding: .78rem .8rem; }
thead th { background: #edf3f7; border-bottom: 1px solid var(--borda-forte); }
tbody tr:hover td { background-color: #f0f8fa; }
td.quando-pagar { margin: 0; border: 0; border-bottom: 1px solid #e5eaee; border-radius: 0; }
nav.filtros { margin-bottom: 1rem; border-radius: var(--raio-cartao); box-shadow: 0 1px 3px rgb(11 40 67 / 4%); }
nav.filtros a { padding-inline: 1.15rem; }
.painel-filtros-rtr { padding: 1.15rem 1.3rem; border-radius: var(--raio-cartao); box-shadow: 0 1px 3px rgb(11 40 67 / 4%); }
.grade-filtros-rtr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: .8rem 1rem; }
.campo-filtro { min-width: 0; }
.campo-filtro label { display: block; margin: 0 0 .3rem; color: var(--secundario); font-size: .8125rem; }
.campo-filtro > select, .campo-filtro > input[type="date"] { width: 100%; max-width: none !important; min-width: 0; }
.acao-filtro { align-self: end; }
.acao-filtro input[type="submit"] { width: 100%; }
#soma-da-aba { max-width: none; margin: 1.2rem 0 .5rem; font-size: .9375rem; }
#soma-da-aba strong { color: var(--texto-forte); font-size: 1.18rem; font-variant-numeric: tabular-nums; }
#tabela-rtrs { width: 1888px; min-width: 100%; table-layout: fixed; }
#tabela-rtrs th:nth-child(1) { width: 96px; }
#tabela-rtrs th:nth-child(2) { width: 188px; }
#tabela-rtrs th:nth-child(3) { width: 169px; }
#tabela-rtrs th:nth-child(4) { width: 230px; }
#tabela-rtrs th:nth-child(5) { width: 245px; }
#tabela-rtrs th:nth-child(6) { width: 126px; }
#tabela-rtrs th:nth-child(7) { width: 106px; }
#tabela-rtrs th:nth-child(8) { width: 150px; }
#tabela-rtrs th:nth-child(9) { width: 240px; }
#tabela-rtrs th:nth-child(10) { width: 118px; }
#tabela-rtrs th:nth-child(11) { width: 100px; }
#tabela-rtrs th:nth-child(12) { width: 120px; }
#tabela-rtrs td { min-width: 0; max-width: none; overflow-wrap: normal; }
#tabela-rtrs td:is(:nth-child(4), :nth-child(5), :nth-child(8), :nth-child(9), :nth-child(10)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tabela-rtrs td:nth-child(7) { white-space: nowrap; }
#tabela-rtrs td:first-child a { font-weight: 750; }
#tabela-rtrs .selo-estado { white-space: normal; }
#tabela-rtrs tr.linha-atrasado td { background: #fff; }
#tabela-rtrs tr.linha-atrasado td:first-child { box-shadow: inset 4px 0 var(--erro); }
#tabela-rtrs tr.linha-atrasado:hover td { background: #fff6f7; }
#inicio-aprova .resumo-autorizar:has(.lista-resumo-rt) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--borda); border-top: 4px solid var(--atencao-borda); background: white; box-shadow: var(--sombra); }
#inicio-aprova .resumo-autorizar h2 { grid-column: 1; margin: 0; font-size: 1.25rem; }
#inicio-aprova .resumo-autorizar > p:first-of-type { grid-column: 2; grid-row: 1; margin: 0; }
#inicio-aprova .resumo-autorizar .lista-resumo-rt, #inicio-aprova .resumo-autorizar #resumo-a-pagar, #inicio-aprova .resumo-autorizar .contagem-de-pagar { grid-column: 1 / -1; }
#inicio-aprova .lista-resumo-rt { gap: .35rem; }
#inicio-aprova .lista-resumo-rt li { display: grid; grid-template-columns: 6.5rem 11.5rem minmax(0, 1fr) 9rem 6.5rem; align-items: center; gap: .75rem; min-height: 3.3rem; padding: .55rem .8rem; }
#inicio-aprova .lista-resumo-rt li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inicio-aprova .lista-resumo-rt .valor-rt { margin: 0; text-align: right; font-size: 1.0625rem; }
#inicio-aprova .lista-resumo-rt .espera-rt { width: auto; text-align: right; white-space: nowrap; }
#inicio-aprova .tabela-empilhavel { width: 100%; min-width: 1200px; table-layout: fixed; }
#inicio-aprova .tabela-empilhavel th:nth-child(1) { width: 7%; }
#inicio-aprova .tabela-empilhavel th:nth-child(2) { width: 13%; }
#inicio-aprova .tabela-empilhavel th:nth-child(3) { width: 9%; }
#inicio-aprova .tabela-empilhavel th:nth-child(4) { width: 17%; }
#inicio-aprova .tabela-empilhavel th:nth-child(5) { width: 15%; }
#inicio-aprova .tabela-empilhavel th:nth-child(6) { width: 16%; }
#inicio-aprova .tabela-empilhavel th:nth-child(7) { width: 10%; }
#inicio-aprova .tabela-empilhavel th:nth-child(8) { width: 13%; }
#inicio-aprova .tabela-empilhavel td { min-width: 0; max-width: none; }
#inicio-aprova .tabela-empilhavel td:is(:nth-child(4), :nth-child(5), :nth-child(6)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inicio-aprova .tabela-empilhavel td:nth-child(3) { white-space: nowrap; }
.explicacao-rtr, .formulario-rtr { max-width: 1280px; margin-inline: auto; }
.formulario-rtr .essencial-rtr { padding: 1.5rem 1.75rem; }
.total-pendente { padding: 1.1rem 1.35rem; border-left: 4px solid var(--acao); box-shadow: 0 1px 3px rgb(11 40 67 / 4%); }
.cartoes-rt { grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: 1rem; }
.cartao-rt { padding: 1.35rem; }
.cartao-rt .dados-rt div { grid-template-columns: minmax(8.5rem, 29%) minmax(0, 1fr); }
}
@media screen and (min-width: 1350px) {
.formulario-rtr .essencial-rtr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .8rem 1.75rem; }
.formulario-rtr .essencial-rtr > p { min-width: 0; margin-bottom: 0; }
.formulario-rtr .essencial-rtr > :is(#aviso-dados-de-pagamento, #rtr-quando-pagar, #campos-do-documento, #parcelas-rtr, #dados-para-pagamento, #itens-rtr, .liquido-rtr),
.formulario-rtr .essencial-rtr > p:has(input[type="file"]) { grid-column: 1 / -1; }
}
@media screen and (min-width: 1600px) {
.grade-filtros-rtr { grid-template-columns: 9rem 9rem repeat(4, minmax(0, 1fr)) 7rem; }
.cartoes-rt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 1080px) {
.grade-filtros-rtr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.campo-filtro { min-width: 0; }
.campo-filtro label { display: block; }
.campo-filtro > select, .campo-filtro > input[type="date"] { width: 100%; max-width: none !important; }
.acao-filtro { align-self: end; }
.acao-filtro input[type="submit"] { width: 100%; }
}
@media screen and (max-width: 760px) {
.grade-filtros-rtr { grid-template-columns: minmax(0, 1fr); }
}
@media print {
.botao-menu, .fechar-menu, .atalho-pendencia { display: none !important; }
html body[data-menu-aberto]::after { display: none !important; }
.barra-de-envio { position: static; box-shadow: none; }
.tabela-empilhavel, .tabela-empilhavel tbody, .tabela-empilhavel tr, .tabela-empilhavel td { display: revert; }
.tabela-empilhavel thead { position: static; width: auto; height: auto; clip-path: none; }
.manual { display: block; }
.manual-sumario, .sumario-recolhivel, .manual-passos { display: none; }
.manual-conteudo { max-width: none; padding: 0; border: 0; box-shadow: none; }
.manual-conteudo figure { break-inside: avoid; }
}