:root { --forest:#123c2d; --forest-2:#1f5943; --leaf:#40865d; --lime:#c5e17a; --gold:#e9b44c; --ink:#17221d; --muted:#6a756e; --bg:#f4f7f2; --card:#fff; --line:#e3e9e2; --danger:#c84a40; --orange:#d8822e; --blue:#367bb9; --shadow:0 8px 24px rgba(24,54,38,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--bg); }
[hidden], .modal-backdrop[hidden] { display:none !important; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(64,134,93,.35); outline-offset:2px; }
.app-shell { min-height:100dvh; max-width:760px; margin:0 auto; padding:env(safe-area-inset-top) 16px calc(94px + env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:18px 2px 14px; }
.topbar > :first-child { min-width:0; flex:1 1 auto; }
#page-title { overflow-wrap:anywhere; }
/* ============================================================================
TELA DE ENTRADA
==========================================================================
A marca, os diferenciais e o rodape moram no index.html, fora do espaco que
o JavaScript reescreve. `app.js` e `sync-client.js` trocam so o cartao, e
os tres markups (estatico, local e nuvem) compartilham estas regras. */
.login-screen {
min-height:100dvh; display:grid; align-content:center; justify-content:center; grid-template-columns:minmax(0,460px);
padding:max(34px, calc(env(safe-area-inset-top) + 22px)) 16px max(22px, env(safe-area-inset-bottom));
color:#fff;
/* A foto do pasto ja existe no projeto e e reaproveitada aqui. Ela cobre so
a faixa superior; o verde assume o resto para o formulario nunca disputar
leitura com a imagem. Se o arquivo faltar, sobra o degrade. */
position:relative; overflow:hidden; isolation:isolate; background:#0c3023;
}
/* A foto entra DESFOCADA de proposito. Ela e a mesma do Inicio e carrega o
texto do mockup queimado na imagem; nitida, essa escrita aparecia como
fantasma atras da marca. O desfoque apaga as letras, disfarca a origem de
baixa resolucao e deixa so a mancha verde de pasto, que e o que se quer. */
.login-screen::before, .login-screen::after { content:""; position:absolute; inset:0; }
.login-screen::before { inset:0 0 auto auto; width:68%; height:47vh; min-height:310px; background:url("img/login-pasto.webp") right top / contain no-repeat; }
.login-screen::after { background:linear-gradient(90deg, #0c3023 0%, rgba(12,48,35,.96) 30%, rgba(12,48,35,.5) 44%, rgba(12,48,35,.12) 56%, rgba(12,48,35,0) 68%), linear-gradient(180deg, rgba(8,44,31,.06) 0%, rgba(8,44,31,.06) 24%, rgba(10,46,33,.8) 44%, #0c3023 58%); }
/* A casca precisa subir: o degrade e o ULTIMO filho e cobriria o conteudo. */
.login-shell { position:relative; z-index:1; width:100%; min-width:0; display:grid; gap:22px; }
/* Herói */
/* O texto do heroi passa por cima da foto na ponta direita; a sombra o mantem
legivel sem escurecer a imagem inteira. */
.login-hero { display:grid; justify-items:start; gap:10px; text-shadow:0 1px 10px rgba(6,30,21,.75); }
.login-mark { display:grid; place-items:center; width:72px; height:72px; border-radius:20px; background:var(--gold); box-shadow:0 14px 34px rgba(0,0,0,.34); }
.login-mark svg { width:52px; height:52px; fill:#1b2c12; }
.login-wordmark { margin:2px 0 0; font-size:2.6rem; line-height:1.02; letter-spacing:-.035em; }
.login-wordmark span:first-child { color:#fff; }
.login-wordmark span:last-child { color:var(--lime); }
.login-tagline { margin:0; max-width:20ch; color:#dcebe1; font-size:1.05rem; line-height:1.3; }
.login-highlights { display:flex; flex-wrap:wrap; gap:10px 16px; margin:6px 0 0; padding:0; list-style:none; }
.login-highlights li { display:flex; align-items:center; gap:8px; color:#dcece2; font-size:.72rem; line-height:1.25; }
.login-highlights svg { flex:0 0 auto; width:30px; height:30px; padding:6px; border-radius:50%; border:1px solid rgba(255,255,255,.28); fill:none; stroke:var(--lime); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Cartão */
.login-card { color:var(--ink); }
.login-panel { background:#fff; border-radius:24px; padding:22px; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.login-panel h2 { margin:0 0 7px; font-size:1.9rem; letter-spacing:-.025em; }
.login-panel > p { margin:0 0 18px; color:var(--muted); font-size:.84rem; line-height:1.45; }
.login-panel .field { margin-bottom:14px; }
.login-panel .field > label { font-size:.82rem; font-weight:700; }
.login-panel .field > .helper { margin-top:5px; font-size:.7rem; line-height:1.35; color:var(--muted); }
.login-panel .field input { min-height:54px; padding-block:14px; border-radius:14px; font-size:.95rem; }
.login-panel .action-primary { position:relative; width:100%; min-height:54px; margin-top:6px; border-radius:14px; font-size:1rem; box-shadow:0 10px 24px rgba(18,60,45,.28); transition:transform .12s ease, box-shadow .12s ease; }
.login-panel .action-primary[type="submit"]::after { content:""; position:absolute; right:18px; top:50%; width:22px; height:22px; margin-top:-11px; background:url('data:image/svg+xml;utf8,') center / contain no-repeat; }
.login-panel .action-primary:hover { box-shadow:0 14px 30px rgba(18,60,45,.34); }
.login-panel .action-primary:active { transform:translateY(1px); }
.login-panel .text-button { display:block; width:100%; margin-top:12px; padding:10px; min-height:var(--touch); font-weight:750; }
/* Ícone dentro do campo: CSS puro, para valer nos tres markups e antes mesmo
de o JavaScript carregar. `:has` nao sendo suportado, perde-se so o enfeite. */
.login-panel .field:has(> input) input { background-repeat:no-repeat; background-position:14px center; background-size:18px 18px; padding-left:42px; }
.login-panel .field:has(> #auth-cnpj) input { background-image:url('data:image/svg+xml;utf8,'); }
.login-panel .field:has(> #auth-username) input { background-image:url('data:image/svg+xml;utf8,'); }
.login-panel .field:has(> #auth-password) input, .login-panel .field:has(> #auth-confirm) input { background-image:url('data:image/svg+xml;utf8,'); }
/* Mostrar/ocultar senha */
.login-panel .field-with-toggle { position:relative; }
.login-panel .field-with-toggle input { padding-right:46px; }
.password-toggle { position:absolute; right:5px; bottom:5px; display:grid; place-items:center; width:var(--touch); min-height:var(--touch); height:var(--touch); padding:0; border:0; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; }
.password-toggle:hover { background:#eef3ee; color:var(--ink); }
.password-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* O campo com ajuda embaixo e mais alto: o botao se alinha pela caixa do input. */
.login-panel .field-with-toggle:has(> .helper) .password-toggle { bottom:auto; top:29px; }
/* Erro: nunca so pela cor -- vem com icone e papel de alerta. */
.login-error { min-height:0; margin:2px 0 0; color:var(--danger); font-size:.78rem; font-weight:650; line-height:1.35; }
.login-error:not(:empty) { display:flex; gap:7px; align-items:flex-start; margin:10px 0 0; padding:10px 12px; border-radius:12px; background:#fdeeec; }
.login-error:not(:empty)::before { content:"!"; flex:0 0 auto; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:var(--danger); color:#fff; font-size:.68rem; }
/* Bloco de confiança */
.login-security { display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:13px 14px; border-radius:16px; background:#eaf3ec; color:#2c4a3a; font-size:.74rem; line-height:1.45; }
.login-security svg { flex:0 0 auto; width:20px; height:20px; margin-top:1px; fill:none; stroke:var(--forest); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.login-security strong { display:block; margin-bottom:2px; color:var(--forest); font-size:.8rem; }
/* Rodapé */
.login-footer { display:grid; justify-items:center; gap:2px; text-align:center; color:#b9d2c3; font-size:.7rem; }
.login-footer strong { color:#fff; font-size:.82rem; }
.login-footer-site { position:relative; margin-top:9px; padding-top:11px; color:#cfe3d6; }
.login-footer-site::before { content:""; position:absolute; top:0; left:50%; width:34px; height:2px; margin-left:-17px; border-radius:2px; background:var(--gold); }
@media (max-width:360px) {
.login-wordmark { font-size:1.8rem; }
.login-highlights { gap:8px 12px; }
.login-highlights li { font-size:.68rem; }
.login-panel { padding:18px; }
}
/* `capitalize` estragava a data em português: "09 De Setembro". Só a primeira
letra sobe, que é o que a referência mostra. */
.eyebrow { margin:0 0 4px; color:var(--muted); font-size:.78rem; font-weight:650; text-transform:none; }
.eyebrow::first-letter { text-transform:uppercase; }
h1 { margin:0; font-size:1.46rem; letter-spacing:-.04em; }
h2 { font-size:1.15rem; margin:0; letter-spacing:-.025em; }
h3 { font-size:1rem; margin:0; }
p { line-height:1.45; }
.topbar-actions { display:flex; flex:0 0 auto; gap:8px; align-items:center; }
.icon-button,.avatar { width:40px; height:40px; border-radius:50%; background:#e2eddf; color:var(--forest); font-weight:800; font-size:1.25rem; }
.avatar { background:var(--forest); color:white; font-size:.76rem; }
.notification-button { position:relative; font-size:1.35rem; line-height:1; }.notification-count { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:999px; background:var(--danger); color:#fff; border:2px solid var(--bg); font-size:.62rem; line-height:1; }.notification-list { display:grid; gap:10px; }.notification-card { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; border:1px solid #f1cdc5; background:#fff9f7; border-radius:14px; padding:13px; }.notification-card.overdue { border-color:#e7aa9d; background:#fff5f2; }.notification-icon { font-size:1.2rem; }.notification-card h3 { font-size:.92rem; }.notification-card p { margin:3px 0 8px; color:var(--muted); font-size:.78rem; }.notification-card .action-primary { min-height:36px; padding:7px 10px; font-size:.76rem; }
.notification-card.is-unread { border-color:#9fc7a7; background:#f5fbf3; }.notification-card.is-read { opacity:.72; background:#fbfcfb; }.notification-new { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:#dff0df; color:#21623a; font-size:.62rem; font-weight:800; }.notification-actions { margin-top:8px; justify-content:flex-start; }.notification-actions .action-secondary { flex:0 1 auto; min-height:36px; padding:7px 10px; font-size:.75rem; }
.main-content { display:grid; gap:16px; }
.hero { color:white; border-radius:24px; padding:22px; background:linear-gradient(135deg,var(--forest),var(--forest-2)); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.hero:after { content:'🐂'; font-size:104px; opacity:.12; position:absolute; right:-15px; bottom:-36px; transform:rotate(-8deg); }
.hero > * { position:relative; z-index:1; }
.hero p { margin:0 0 3px; font-size:.84rem; opacity:.76; }
.hero-value { margin:0; font-size:1.85rem; font-weight:800; letter-spacing:-.055em; }
.hero-row { display:flex; gap:24px; padding-top:20px; margin-top:18px; border-top:1px solid rgba(255,255,255,.18); }
.hero-row strong { display:block; font-size:1.02rem; }
.hero-row small { opacity:.7; font-size:.73rem; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 0; }
.section-head button,.text-button { color:var(--forest-2); background:transparent; font-weight:750; font-size:.82rem; padding:8px 0; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.metric-card { border:1px solid var(--line); background:var(--card); border-radius:17px; padding:14px; min-height:104px; box-shadow:0 2px 7px rgba(31,52,41,.025); }
.metric-card .metric-icon { font-size:1.12rem; }
.metric-card p { margin:7px 0 2px; color:var(--muted); font-size:.75rem; }
.metric-card strong { display:block; font-size:1.05rem; letter-spacing:-.035em; }
.metric-card small { color:var(--leaf); font-size:.71rem; font-weight:650; }
.dashboard-link { width:100%; text-align:left; color:var(--ink); }.dashboard-link:active,.attention-item:active { transform:scale(.99); }.dashboard-attention { border-left:4px solid var(--gold); }.attention-list { display:grid; gap:8px; margin-top:12px; }.attention-item { width:100%; min-height:46px; text-align:left; border-radius:11px; padding:10px 12px; background:#f5f8f2; color:#385744; font-weight:760; font-size:.78rem; }.attention-item.overdue { background:#fff2ef; color:#9b4039; }
.card { background:var(--card); border:1px solid var(--line); border-radius:19px; padding:16px; box-shadow:0 2px 7px rgba(31,52,41,.025); }
.chart { display:flex; align-items:flex-end; gap:11px; height:142px; padding:14px 3px 0; border-bottom:1px solid var(--line); }
.bar-column { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; }
.bar { width:min(100%,31px); min-height:4px; border-radius:8px 8px 2px 2px; background:linear-gradient(var(--lime),var(--leaf)); }
.bar.purchase { background:linear-gradient(#fb8b62,#b93824); }
.financial-charts { display:grid; grid-template-columns:1fr; gap:12px; margin:14px 0; }
.billing-chart { display:flex; align-items:stretch; gap:11px; height:158px; padding:8px 3px 0; border-bottom:1px solid var(--line); }
.billing-column { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; }
.billing-bars { flex:1; width:100%; display:flex; align-items:flex-end; gap:3px; }
.billing-bar { flex:1; min-height:4px; border-radius:7px 7px 2px 2px; background:linear-gradient(var(--lime),var(--leaf)); }
.billing-bar.pending { background:linear-gradient(#78b9f0,#246aa5); }.billing-bar.cost { background:linear-gradient(#fb8b62,#b93824); }
.billing-column small { font-size:.67rem; color:var(--muted); }.billing-legend { display:flex; flex-wrap:wrap; gap:10px; padding-top:11px; color:var(--muted); font-size:.77rem; }.legend-dot.received { color:var(--leaf); }.legend-dot.pending { color:#246aa5; }.legend-dot.cost { color:#b93824; }
.bar-column small { font-size:.67rem; color:var(--muted); }
.chart-legend { display:flex; justify-content:space-between; padding-top:11px; color:var(--muted); font-size:.77rem; }
.legend-dot { color:var(--leaf); font-size:1.1rem; vertical-align:-1px; }
.action-primary,.action-secondary,.action-danger { min-height:48px; padding:0 18px; border-radius:14px; font-weight:800; font-size:.9rem; }
.action-primary { background:var(--forest); color:#fff; box-shadow:0 5px 12px rgba(18,60,45,.18); }
.action-primary:hover { background:#0e3024; }
.action-secondary { background:#e6f0e3; color:var(--forest); }
.action-danger { background:#fff0ee; color:var(--danger); }
.wide { width:100%; }
.quick-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.quick-row button { min-height:75px; background:#edf4eb; color:var(--forest); border-radius:15px; font-size:1.45rem; }
.quick-row small { font-size:.7rem; display:block; margin-top:5px; font-weight:750; }
.operation-list { display:grid; gap:10px; }
.operation-card { width:100%; text-align:left; background:var(--card); border:1px solid var(--line); padding:14px; border-radius:17px; box-shadow:0 2px 7px rgba(31,52,41,.025); }
.operation-card:active { transform:scale(.99); }
.operation-top,.list-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.operation-title { font-weight:800; font-size:.98rem; }
.operation-subtitle { margin:4px 0 11px; font-size:.79rem; color:var(--muted); }
.list-meta { border-top:1px solid var(--line); padding-top:10px; font-size:.78rem; }
.list-meta strong { color:var(--forest); }
.pill { display:inline-flex; align-items:center; gap:5px; font-size:.69rem; line-height:1; font-weight:760; padding:6px 8px; border-radius:999px; white-space:nowrap; }.pill.finalized { background:#e8edf0; color:#53626c; }.pill.returned { background:#f2e9fb; color:#7952a1; }
.pill.available,.pill.active { background:#e6f5e9; color:#27703c; }.pill.fattening { background:#fff5d6; color:#93720b; }.pill.reserved { background:#e6f0fa; color:#28689d; }.pill.partial { background:#fff0e0; color:#a85c17; }.pill.sold { background:#f2e9e9; color:#895050; }.pill.dead { background:#efe9e9; color:#5e5555; }.pill.transferred { background:#ebedf0; color:#56606d; }
.empty { text-align:center; padding:31px 15px; color:var(--muted); }
.empty .empty-icon { display:block; font-size:2.3rem; margin-bottom:8px; }
.empty p { font-size:.85rem; margin:4px 0 16px; }
.bottom-nav { display:flex; position:fixed; z-index:8; bottom:0; left:0; right:0; min-height:70px; padding:7px max(12px,calc((100vw - 730px)/2)) calc(7px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); backdrop-filter:blur(18px); border-top:1px solid var(--line); justify-content:space-around; }
.nav-item { min-width:49px; color:#7a837d; background:transparent; font-size:1.16rem; padding:3px 6px; border-radius:13px; }.nav-item small { display:block; margin-top:2px; font-size:.61rem; font-weight:680; }.nav-item.active { color:var(--forest); background:#eaf3e7; }
.fab { position:fixed; z-index:9; right:max(18px,calc((100vw - 730px)/2)); bottom:79px; height:52px; padding:0 15px 0 12px; display:flex; align-items:center; gap:6px; border-radius:999px; background:var(--gold); color:#392600; box-shadow:0 8px 18px rgba(92,67,13,.25); font-weight:850; }.fab span { font-size:1.6rem; line-height:1; }.fab small { font-size:.71rem; }
.fab.fab-in-topbar { position:static; flex:0 0 auto; height:40px; min-width:40px; padding:0 11px; justify-content:center; box-shadow:0 4px 12px rgba(92,67,13,.2); }
.fab.fab-in-topbar[hidden] { display:none; }
.fab.fab-in-topbar span { font-size:1.35rem; }
.modal-backdrop { position:fixed; z-index:20; inset:0; background:rgba(12,28,20,.52); display:flex; align-items:flex-end; justify-content:center; padding:12px 12px calc(12px + env(safe-area-inset-bottom)); }
.modal { background:#fff; width:min(100%,680px); max-height:calc(100dvh - 24px); overflow:auto; border-radius:24px; padding:18px; animation:rise .2s ease-out; }.modal.narrow { max-width:490px; }.modal-header { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:18px; }.modal-header p { margin:3px 0 0; font-size:.8rem; color:var(--muted); }.close { background:#eef2ed; width:36px; height:36px; border-radius:50%; color:var(--ink); font-size:1.3rem; }
@keyframes rise { from { transform:translateY(18px); opacity:.4; } to { transform:translateY(0); opacity:1; } }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.form-grid .full { grid-column:1/-1; }.field { display:grid; gap:6px; }.field label { color:#47534c; font-size:.75rem; font-weight:750; }.field input,.field select,.field textarea { width:100%; min-height:44px; border:1px solid #d9e1d8; background:#fbfdfb; border-radius:11px; padding:9px 11px; color:var(--ink); }.field textarea { min-height:75px; resize:vertical; }.field input[type=number] { appearance:textfield; }.form-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:20px; }.form-actions .action-primary,.form-actions .action-secondary { flex:1; }.helper { margin:0; color:var(--muted); font-size:.75rem; }.steps { display:flex; gap:5px; margin:-4px 0 17px; }.step { height:5px; border-radius:5px; background:#e2e8e1; flex:1; }.step.active { background:var(--leaf); }
.operation-wizard-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:-3px 0 18px; padding-bottom:3px; }.operation-wizard-tabs.expense-mode { grid-template-columns:repeat(2,minmax(0,1fr)); }.operation-wizard-tab { min-height:58px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); border-radius:13px; padding:8px 6px; background:#f7faf6; color:var(--muted); font-size:.69rem; font-weight:800; text-align:center; }.operation-wizard-tab b { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:#dfe9dc; color:var(--forest); font-size:.7rem; }.operation-wizard-tab.active { background:var(--forest); border-color:var(--forest); color:#fff; }.operation-wizard-tab.active b { background:var(--gold); color:#392600; }.operation-wizard-tab span { line-height:1.1; }
.check-field { min-height:44px; display:flex; align-items:center; gap:9px; color:#47534c; font-size:.77rem; font-weight:750; grid-column:1/-1; }.check-field input { width:19px; height:19px; accent-color:var(--forest); }
.operation-status-checks { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:5px; grid-column:1/-1; }.operation-status-checks .check-field { min-height:29px; width:auto; padding:4px 7px; border:1px solid var(--line); border-radius:9px; font-size:.62rem; gap:4px; }.operation-status-checks .check-field input { width:13px; height:13px; }
.quick-sheet h2 { margin-bottom:14px; }.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.quick-actions button { display:flex; align-items:center; gap:10px; padding:14px; border-radius:15px; background:#f2f6f0; text-align:left; color:var(--ink); font-weight:760; }.quick-actions span { font-size:1.45rem; }.quick-actions small { display:block; color:var(--muted); font-size:.69rem; font-weight:550; margin-top:2px; }
.operation-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tabs { display:flex; gap:7px; overflow:auto; padding-bottom:3px; }.tab { border:1px solid var(--line); background:white; color:var(--muted); padding:8px 11px; border-radius:99px; font-size:.76rem; font-weight:750; white-space:nowrap; }.tab.active { background:var(--forest); color:#fff; border-color:var(--forest); }
.filter-bar { display:flex; gap:9px; }.filter-bar input { flex:1; min-width:0; border:1px solid var(--line); background:white; border-radius:12px; padding:10px 12px; }.filter-bar select { border:1px solid var(--line); background:white; border-radius:12px; padding:8px; color:var(--ink); }
.detail-hero { border-radius:19px; background:#e7f1e3; padding:16px; }.detail-hero p { margin:4px 0 0; color:var(--muted); font-size:.8rem; }.detail-number { margin:15px 0 0; font-weight:850; color:var(--forest); font-size:1.48rem; letter-spacing:-.05em; }.stat-line { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.84rem; }.stat-line:last-child { border-bottom:0; }.stat-line span { color:var(--muted); }.timeline { display:grid; gap:0; }.timeline-item { position:relative; display:grid; grid-template-columns:43px 1fr; gap:10px; padding:0 0 16px; }.timeline-item:before { content:''; position:absolute; left:20px; top:36px; height:calc(100% - 20px); width:1px; background:#dbe5d8; }.timeline-item:last-child:before { display:none; }.timeline-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#edf4eb; font-size:1rem; }.timeline-content { padding:5px 0; }.timeline-content strong { font-size:.84rem; }.timeline-content p { margin:2px 0 0; color:var(--muted); font-size:.75rem; }.timeline-content .amount { color:var(--forest); font-weight:800; }
.operation-history { min-width:0; overflow-wrap:anywhere; }.operation-history .timeline-item { min-width:0; }.operation-history .timeline-content { min-width:0; }.operation-history-details { line-height:1.45; }.operation-history-system { padding:8px 10px; border-left:3px solid var(--leaf); border-radius:8px; background:#f1f7ee; color:#385744!important; }.operation-history-changes { display:grid; gap:5px; margin:8px 0 0; padding:0; list-style:none; }.operation-history-changes li { padding:7px 9px; border-radius:8px; background:#f7faf6; color:#47534c; font-size:.73rem; line-height:1.35; overflow-wrap:anywhere; }
.finance-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.finance-summary .card { padding:14px; }.finance-summary p { margin:0 0 6px; color:var(--muted); font-size:.75rem; }.finance-summary strong { font-size:1.15rem; letter-spacing:-.04em; }.finance-list { display:grid; gap:8px; }.finance-item { background:white; border:1px solid var(--line); border-left:4px solid var(--gold); padding:12px; border-radius:13px; display:flex; justify-content:space-between; align-items:center; gap:10px; }.finance-item.receivable { border-left-color:var(--leaf); }.finance-item.overdue { border-left-color:var(--danger); }.finance-item p { margin:3px 0 0; font-size:.72rem; color:var(--muted); }.finance-item strong { font-size:.87rem; }.finance-item button { background:#eaf3e7; color:var(--forest); padding:7px 8px; border-radius:8px; font-size:.7rem; font-weight:800; white-space:nowrap; }
.finance-item.settled { border-left-color:#718077; background:#fbfcfb; }.finance-item-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; margin-top:7px; }
.report-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.report-card { padding:14px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:16px; min-height:100px; }.report-card span { font-size:1.45rem; }.report-card strong { margin-top:8px; display:block; font-size:.83rem; }.report-card small { color:var(--muted); font-size:.7rem; }.notice { display:flex; gap:10px; align-items:flex-start; border-radius:14px; background:#fff8e9; padding:12px; color:#6d5416; font-size:.78rem; }.notice span { font-size:1.1rem; }.notice p { margin:0; }.sync-chip { display:inline-flex; align-items:center; gap:5px; color:var(--muted); background:#edf2ed; border-radius:99px; padding:5px 8px; font-size:.69rem; font-weight:700; }.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--leaf); }.sync-dot.offline { background:var(--orange); }.sync-dot.pending { background:var(--gold); }
.report-table { width:100%; min-width:530px; border-collapse:collapse; font-size:.76rem; }.report-table th { color:var(--muted); font-size:.69rem; text-align:right; padding:11px 8px; border-bottom:1px solid var(--line); }.report-table th:first-child,.report-table td:first-child { text-align:left; }.report-table td { text-align:right; padding:11px 8px; border-bottom:1px solid var(--line); font-weight:650; }.report-table tr:last-child td { border-bottom:0; }.report-table tr.cancelled-movement td { color:#7a625e; opacity:.72; text-decoration:line-through; }.rule { border:0; border-top:1px solid var(--line); margin:20px 0; }.settings-section h3 { margin-bottom:5px; }.settings-section .helper { display:block; margin-bottom:8px; }
.person-picker-selected { display:flex; align-items:center; justify-content:space-between; gap:9px; border:1px solid var(--line); border-radius:12px; padding:9px; background:#fafcf9; font-size:.77rem; font-weight:700; }.person-picker-selected span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.person-picker-selected button { flex:0 0 auto; padding:8px 9px; font-size:.7rem; }.person-picker-panel { margin-top:9px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#f8fbf7; }.person-picker-list { display:grid; gap:6px; max-height:220px; overflow:auto; margin-top:8px; }.person-picker-option { display:grid; gap:2px; text-align:left; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }.person-picker-option small { color:var(--muted); font-size:.68rem; }.supplier-picker > .check-field { margin-top:9px; }.supplier-picker > .full { margin-top:8px; }
.sex-composition { grid-column:1/-1; padding:10px; border:1px dashed #b9ccb7; border-radius:12px; background:#f7fbf5; }.sex-composition .section-head { margin-bottom:7px; }.sex-composition h3 { font-size:.8rem; }.sex-composition .muted { font-size:.67rem; }
.sale-without-stock-check { margin:0 0 2px; font-size:.76rem; }.sale-without-stock-check input { width:15px; height:15px; }.sale-manual-deficit { margin-top:10px; padding:12px; border:1px dashed #d8aaa5; border-radius:14px; background:#fff9f8; }.sale-manual-deficit h3 { margin:0; font-size:.82rem; color:#8f3f39; }.sale-manual-deficit .section-head { margin-bottom:8px; }.wizard-sale-lots { display:grid; gap:10px; }.wizard-sale-lots > .helper { padding:2px 1px; }.sale-age-group { display:grid; gap:9px; padding:11px; border:1px solid #cddcc9; border-radius:15px; background:#f4f8f2; }.sale-age-group.negative-stock { border-color:#d8aaa5; background:#fff6f5; }.sale-age-head { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }.sale-age-head h3 { margin:0; color:var(--forest); font-size:.86rem; }.sale-age-head p { margin:3px 0 0; color:var(--muted); font-size:.68rem; }.sale-age-stock { flex:0 0 auto; border-radius:99px; background:#dcebd8; color:var(--forest); padding:5px 8px; font-size:.68rem; font-weight:800; }.negative-stock .sale-age-stock { background:#f5d9d5; color:#9f4039; }.sale-age-lots { display:grid; gap:8px; }.sale-lot-row { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }.sale-lot-row.negative-stock { border-color:#d8aaa5; background:#fffafa; }.sale-lot-head { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }.sale-lot-head strong { font-size:.84rem; }.sale-lot-head p { margin:3px 0 0; color:var(--muted); font-size:.7rem; }.sale-lot-row .sex-composition { margin:0; }.wizard-sale-total { min-height:20px; color:var(--forest); font-size:.78rem; font-weight:700; }.sale-selection-age { display:grid; gap:5px; margin-top:9px; }.sale-selection-age-head { display:flex; justify-content:space-between; gap:9px; color:var(--forest); font-size:.73rem; }.sale-selection-age-head span { color:#516158; font-weight:700; }.sale-selection-list { display:grid; gap:5px; }.sale-selection-line,.sale-selection-grand-total { display:flex; justify-content:space-between; gap:9px; padding:7px 9px; border-radius:9px; background:#eef5eb; }.sale-selection-line span { color:#47534c; }.sale-selection-grand-total { margin-top:9px; background:#dcebd8; font-size:.82rem; }.notice .sale-selection-list { min-width:220px; }.notice .sale-selection-grand-total { color:var(--forest); }
.toast-region { pointer-events:none; position:fixed; z-index:50; bottom:92px; left:50%; transform:translateX(-50%); width:min(calc(100% - 32px),430px); display:grid; gap:7px; }.toast { background:#1e3428; color:#fff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); font-size:.8rem; animation:toast .25s ease-out; }.toast.error { background:#9f4039; } @keyframes toast { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
.age-stock-editor { display:grid; gap:10px; }.age-stock-editor .check-field { margin:0; }.age-stock-table th,.age-stock-table td { white-space:nowrap; }.age-stock-table select,.age-stock-table input { min-width:104px; padding:8px; font-size:.75rem; }.hidden { display:none!important; }.muted { color:var(--muted); }.positive { color:#26733e!important; }.negative { color:var(--danger)!important; }.warning { color:#a96d11!important; }.spacer-top { margin-top:8px; }
.stock-sex-values { display:grid; gap:3px; text-align:left; }.stock-sex-values strong { font-size:.72rem; }.stock-sex-values small { color:var(--muted); font-size:.65rem; line-height:1.25; }.age-mixed-composition td { background:#f4f8f2; }.age-mixed-fields { display:grid; grid-template-columns:repeat(2,minmax(108px,1fr)); gap:8px; align-items:end; padding:4px 0; }.age-mixed-fields > span,.age-mixed-fields > small { grid-column:1/-1; }.age-mixed-fields > span { color:var(--forest); font-weight:800; font-size:.75rem; }.age-mixed-fields label { display:grid; gap:5px; color:#47534c; font-size:.7rem; font-weight:750; }.age-mixed-fields input { min-width:0!important; width:100%; min-height:40px; border:1px solid #d9e1d8; background:#fff; border-radius:9px; padding:8px; color:var(--ink); }.age-mixed-fields small,.sale-selection-grand-total small { color:var(--muted); font-size:.68rem; font-weight:650; }.sale-selection-grand-total { flex-wrap:wrap; }
.installment-plan { border:1px dashed #b9ccb7; border-radius:13px; padding:11px; background:#f7fbf5; }.installment-plan h3 { margin:0; font-size:.85rem; }.installment-list { display:grid; gap:8px; margin-top:9px; }.installment-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:9px; border:1px solid var(--line); border-radius:10px; background:#fff; }.installment-row > span { grid-column:1/-1; color:var(--forest); font-size:.72rem; font-weight:800; }.installment-row label { display:grid; gap:4px; color:#47534c; font-size:.68rem; font-weight:750; }.installment-row input { min-height:39px; border:1px solid #d9e1d8; border-radius:9px; padding:7px; color:var(--ink); }.installment-row button { grid-column:1/-1; justify-self:end; color:#8d443e; font-size:.7rem; }.finance-generator { display:grid; gap:7px; margin:11px 0; }.finance-generator .action-primary { width:100%; }
.installment-row { grid-template-columns:minmax(0,1fr); overflow:hidden; }
.installment-row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.installment-row-head .text-danger { grid-column:auto; justify-self:auto; flex:0 0 auto; }
.installment-row > .form-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-width:0; }
.installment-row > .form-grid > * { min-width:0; }
.installment-row .field input,.installment-row .field select { min-width:0; width:100%; }
.installment-row .installment-date,.installment-row .installment-date input { min-width:0; max-width:100%; overflow:hidden; }
.installment-row .installment-cash { grid-column:1/-1; margin:0; }
.installment-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:10px; }
.installment-actions .action-secondary { min-width:0; white-space:normal; }
.installment-feedback { margin:9px 0 0; padding:12px 14px; border:1px solid #b7d5b2; border-radius:12px; background:#e7f4e3; color:#174f37; font-size:.76rem; font-weight:700; line-height:1.4; }
.installment-feedback.error { border-color:#e1aaa4; background:#fff0ee; color:#9f4039; }
.installment-feedback.info { border-color:#d8c684; background:#fff8e9; color:#6d5416; }
.commission-note { margin-top:8px; padding:9px; border-left:3px solid #d4ad46; border-radius:8px; background:#fffbf0; }
.profile-menu { display:grid; gap:9px; }.profile-menu > button { display:grid; grid-template-columns:36px 1fr auto; gap:11px; align-items:center; width:100%; padding:13px; border:1px solid var(--line); border-radius:14px; background:#fbfdfb; color:var(--ink); text-align:left; }.profile-menu > button:hover,.profile-menu > button:focus-visible { border-color:#a9c3a6; background:#f1f7ee; }.profile-menu > button > span:first-child { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:#eaf3e7; font-size:1.05rem; }.profile-menu > button > span:last-child { color:var(--forest); font-size:1.4rem; }.profile-menu strong,.profile-menu small { display:block; }.profile-menu strong { font-size:.84rem; }.profile-menu small { margin-top:3px; color:var(--muted); font-size:.69rem; }
.parameters-form { overflow:hidden; }.parameter-grid { display:grid; gap:14px; }.parameter-number { display:grid; grid-template-columns:minmax(0,150px) auto; gap:9px; align-items:center; }.parameter-number input { min-height:48px; font-size:1rem; font-weight:800; }.parameter-number span { color:var(--muted); font-size:.78rem; font-weight:750; }.parameter-example { padding:13px; border-radius:13px; background:#f5f8f2; border-left:4px solid var(--gold); }.parameter-example strong { color:var(--forest); font-size:.76rem; }.parameter-example p { margin:5px 0 0; color:#47534c; font-size:.76rem; }.parameters-future { border-style:dashed; }
.parameter-tabs { display:flex; gap:8px; overflow-x:auto; padding:1px 1px 5px; scrollbar-width:thin; }.parameter-tabs :is(a,button) { flex:0 0 auto; color:var(--forest); border:1px solid var(--line); border-radius:999px; background:#fff; padding:8px 11px; font-size:.76rem; font-weight:800; text-decoration:none; }.parameter-tabs :is(a,button):focus-visible,.parameter-tabs :is(a,button):hover { border-color:#9dbb9e; background:#edf5ea; }.parameter-tabs button.active { border-color:var(--forest); background:var(--forest); color:#fff; }.parameter-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; padding:0; list-style:none; }.parameter-list li { padding:10px; border-radius:11px; background:#f5f8f2; color:#385744; font-size:.78rem; font-weight:750; }.parameter-info-grid,.sequence-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:14px 0; }.parameter-info-grid > div,.sequence-grid > div { min-width:0; padding:11px; border:1px solid var(--line); border-radius:12px; background:#fbfdfb; }.parameter-info-grid small,.sequence-grid span,.sequence-grid small { display:block; color:var(--muted); font-size:.67rem; line-height:1.3; }.parameter-info-grid strong,.sequence-grid strong { display:block; overflow-wrap:anywhere; color:var(--forest); font-size:.8rem; margin-top:5px; }.sequence-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }.sequence-grid strong { font-size:1rem; }.parameter-alert-form { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.issuer-readiness-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.issuer-readiness { min-width:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; }.issuer-readiness small,.issuer-readiness strong,.issuer-readiness span { display:block; }.issuer-readiness small { color:var(--muted); font-size:.68rem; font-weight:800; text-transform:uppercase; }.issuer-readiness strong { margin-top:6px; overflow-wrap:anywhere; font-size:.8rem; }.issuer-readiness span { margin-top:4px; color:var(--muted); font-size:.66rem; }.issuer-readiness.complete { border-color:#a8c9ad; background:#f2f8f1; }.issuer-readiness.complete strong { color:var(--forest); }.issuer-readiness.pending { border-color:#e5d29c; background:#fffbef; }.issuer-readiness.pending strong { color:#725713; }.issuer-tab-panel { display:grid; gap:14px; }.issuer-tab-panel[hidden] { display:none; }.issuer-property-form { border-left:4px solid #b6cbb3; }.issuer-property-flags { display:flex; flex-wrap:wrap; gap:8px 16px; padding:5px 0; }.issuer-property-flags .check-field { width:auto; grid-column:auto; }.issuer-gta-fields { margin:18px 0 0; padding:14px; border:1px solid var(--line); border-radius:14px; }.issuer-gta-fields legend { padding:0 6px; color:var(--forest); font-size:.8rem; font-weight:850; }.issuer-gta-fields > .helper { margin-bottom:13px; }.issuer-integration-state { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:12px; padding:10px; border-radius:11px; background:#f5f8f2; font-size:.7rem; }.issuer-integration-state small,.issuer-integration-state span { color:var(--muted); }.issuer-integration-state strong { color:var(--forest); }.issuer-integration-list { display:grid; gap:9px; margin-top:13px; }.issuer-integration-list > div { padding:11px; border:1px solid var(--line); border-radius:12px; }.issuer-integration-list small,.issuer-integration-list strong,.issuer-integration-list span { display:block; }.issuer-integration-list small,.issuer-integration-list span { color:var(--muted); font-size:.68rem; }.issuer-integration-list strong { margin:4px 0; color:var(--forest); font-size:.8rem; }
.global-user-metrics .metric-card { min-height:88px; }.global-user-tabs { margin-top:4px; }.global-user-filters { display:flex; align-items:flex-end; gap:12px; }.global-user-filters .form-grid { flex:1; }.global-table-wrap { overflow:auto; padding:0; }.global-user-table { width:100%; min-width:900px; border-collapse:collapse; font-size:.74rem; }.global-user-table th { padding:11px 12px; color:var(--muted); text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }.global-user-table td { padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }.global-user-table tbody tr:last-child td { border-bottom:0; }.global-user-table td strong,.global-user-table td small { display:block; }.global-user-table td small { margin-top:3px; color:var(--muted); font-size:.66rem; }.global-user-status.blocked { background:#fff0ee; color:var(--danger); }.global-user-status.inactive { background:#edf0ee; color:#59645e; }.global-user-pager { display:flex; align-items:center; justify-content:center; gap:12px; padding:4px 0 8px; color:var(--muted); font-size:.74rem; }.global-user-pager button { min-height:40px; }.global-user-pager button:disabled { opacity:.45; }
@media (min-width:620px) { .app-shell{padding-left:24px;padding-right:24px}.metric-grid{grid-template-columns:repeat(3,1fr)}.modal-backdrop{align-items:center}.form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid .span-2{grid-column:span 2}.quick-row{grid-template-columns:repeat(6,1fr)}.report-grid{grid-template-columns:repeat(3,1fr)}.financial-charts{grid-template-columns:repeat(2,minmax(0,1fr))}.parameter-grid{grid-template-columns:minmax(0,1fr) minmax(230px,.8fr);align-items:start} }
@media (max-width:619px) { .installment-plan{overflow:hidden}.installment-plan .installment-row,.installment-plan .installment-row-head,.installment-plan .installment-row > .form-grid{width:100%;max-width:100%;min-width:0}.installment-row > .form-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}.installment-row > .form-grid > .field:nth-child(3){grid-column:1}.installment-row .installment-date input{display:block;inline-size:100%;max-inline-size:100%}.installment-actions{grid-template-columns:1fr}.installment-actions .action-secondary{width:100%}body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea,[contenteditable="true"]){font-size:16px} }
@media (max-width:520px) { .topbar{gap:8px}.topbar-actions{gap:6px}.fab.fab-in-topbar small{display:none}.fab.fab-in-topbar{width:40px;padding:0}.global-user-filters{display:grid}.global-user-pager{flex-wrap:wrap}.global-user-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:619px) { .parameter-info-grid,.issuer-readiness-grid { grid-template-columns:1fr; }.sequence-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.parameter-tabs { margin:0 -1px; }.parameters-form .form-actions { position:sticky; bottom:0; padding:11px 0 calc(2px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 24%); }.issuer-property-flags { display:grid; grid-template-columns:1fr; gap:3px; }.issuer-gta-fields { padding:11px; } }
@media (max-width:390px) { .app-shell{padding-left:12px;padding-right:12px}.hero{padding:18px}.hero-row{gap:17px}.fab small{display:none}.fab{width:52px;padding:0;justify-content:center}.fab.fab-in-topbar{width:40px}.metric-card{padding:12px}.form-grid{grid-template-columns:1fr} }
/* Relatórios: os componentes usam a largura do painel, nunca a da viewport. */
.main-content > *, .card, .notice, .metric-grid, .financial-charts, .report-grid { min-width:0; max-width:100%; }
.section-head > * { min-width:0; }
.section-head h2, .notice p, .metric-card, .metric-card p, .metric-card small { overflow-wrap:anywhere; }
.report-table-wrap { width:100%; max-width:100%; min-width:0; }
.report-table-wrap--responsive { overflow:hidden; }
.report-table-wrap--movement { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding-bottom:4px; }
.chart, .billing-chart { min-width:0; max-width:100%; }
.chart .bar-column small, .billing-column small { min-width:0; overflow-wrap:anywhere; text-align:center; }
@media (max-width:619px) {
.report-filters { grid-template-columns:1fr; }
.report-filters > .field, .report-filters .action-secondary { min-width:0; width:100%; }
.report-filters input, .report-filters select { min-width:0; max-width:100%; }
.report-table-wrap--responsive .report-table { width:100%; min-width:0; table-layout:fixed; }
.report-table-wrap--responsive .report-table th, .report-table-wrap--responsive .report-table td { padding:9px 5px; white-space:normal; overflow-wrap:anywhere; }
.report-table-wrap--responsive .report-table th { font-size:.66rem; }
.report-table-wrap--responsive .report-table td { font-size:.71rem; }
.report-table-wrap--stock .report-table th, .report-table-wrap--stock .report-table td { text-align:center; }
.report-table-wrap--stock .report-table th:first-child, .report-table-wrap--stock .report-table td:first-child { width:39%; text-align:left; }
.report-table-wrap--movement .report-table { min-width:900px; table-layout:auto; }
}
/* Ficha única de clientes, fornecedores e produtores. */
.client-readiness-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.client-readiness{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:3px;background:var(--card)}.client-readiness small,.client-readiness span{color:var(--muted);font-size:.78rem}.client-readiness.complete{border-color:#a8c9ad;background:#f2f8f1}.client-readiness.pending{border-color:#e5d29c;background:#fffbef}.client-tabs{display:flex;gap:6px;overflow-x:auto;padding:3px;margin:0 0 14px;scrollbar-width:thin}.client-tabs button{white-space:nowrap;border:0;border-radius:999px;background:var(--card);padding:10px 14px;color:var(--muted);font-weight:700}.client-tabs button.active{background:var(--forest);color:#fff}.client-role-fieldset,.client-sanitary-fields{border:1px solid var(--line);border-radius:14px;padding:14px}.client-role-fieldset legend,.client-sanitary-fields legend{padding:0 6px;font-weight:800}.client-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.client-property-form{margin-bottom:12px}.client-property-flags{display:flex;gap:14px;flex-wrap:wrap}.client-sanitary-fields{margin-top:14px}.client-official-state{display:grid;grid-template-columns:1fr auto;gap:3px 12px;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.client-official-state span{grid-column:1/-1;color:var(--muted);font-size:.82rem}.client-card-status{display:flex;gap:8px;flex-wrap:wrap;margin:9px 0}.client-card-status span{font-size:.76rem;border-radius:999px;padding:4px 8px;background:#f5f8f2;color:var(--muted)}.client-card-status .ok{color:var(--forest);background:#eef7ee}.client-card-status .pending{color:#9b6500;background:#fff7df}.counterparty-property-field{border-top:1px dashed var(--line);padding-top:12px;margin-top:4px}.client-property-form-error{padding:10px 12px;border:1px solid rgba(182,66,58,.24);border-radius:10px;background:#fff2f0;font-size:.82rem}
@media (max-width:619px){.client-readiness-grid{grid-template-columns:1fr}.client-role-grid{grid-template-columns:1fr}.client-tabs{margin-inline:-4px}.client-property-flags{display:grid;grid-template-columns:1fr}.client-official-state{grid-template-columns:1fr}.client-card-status{gap:5px}}
/* Módulo Fiscal: documentos oficiais separados do estoque operacional. */
.fiscal-property-selector{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}.fiscal-property-selector>div{min-width:0}.fiscal-property-selector small,.fiscal-property-selector strong{display:block}.fiscal-property-selector small{color:var(--muted);font-size:.68rem;text-transform:uppercase;font-weight:800}.fiscal-property-selector strong{margin-top:4px;color:var(--forest);overflow-wrap:anywhere}.fiscal-property-selector label{flex:0 1 280px}.fiscal-property-selector select{width:100%;min-height:42px;border:1px solid var(--line);border-radius:11px;background:#fbfdfb;padding:8px;color:var(--ink)}.fiscal-status-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border:1px solid #e5d29c;border-left:5px solid var(--gold);border-radius:18px;background:#fffbef;padding:16px}.fiscal-status-banner.ready{border-color:#a8c9ad;border-left-color:var(--leaf);background:#f2f8f1}.fiscal-status-banner h2{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.fiscal-status-banner p{margin:7px 0 0;color:var(--muted);font-size:.78rem}.fiscal-status-banner>strong{font-size:.72rem;color:#725713;text-align:right}.fiscal-metrics article{min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.fiscal-metrics span,.fiscal-metrics small{display:block;color:var(--muted);font-size:.7rem}.fiscal-metrics strong{display:block;margin:7px 0 4px;color:var(--forest);font-size:1.2rem}.fiscal-flow{display:grid;gap:8px;margin:14px 0 0;padding-left:23px;color:#47534c;font-size:.8rem}.fiscal-stock-list{display:grid;gap:8px}.fiscal-stock-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:11px;border-radius:12px;background:#f5f8f2}.fiscal-stock-list strong{color:var(--forest)}.fiscal-stock-list small{grid-column:1/-1;color:var(--muted)}.fiscal-document-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.fiscal-document-row>div{display:grid;gap:4px;min-width:0}.fiscal-document-row>div:last-child{justify-items:end}.fiscal-document-row small,.fiscal-document-row span{color:var(--muted);font-size:.7rem}.fiscal-document-row button{color:var(--forest);background:#e6f0e3;border-radius:9px;padding:8px;font-size:.72rem;font-weight:800}.fiscal-empty{box-shadow:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:619px){.nav-item{min-width:42px;padding-inline:3px}.nav-item small{font-size:.56rem}.fiscal-property-selector,.fiscal-status-banner{display:grid}.fiscal-property-selector label{width:100%}.fiscal-status-banner>strong{text-align:left}.fiscal-document-row{align-items:flex-start}.fiscal-document-row>div:last-child{justify-items:end}.fiscal-tabs{margin-inline:-2px}}
/* Processamento fiscal: criação, transmissão, documento oficial e evento são etapas distintas. */
.fiscal-property-selector>div>span{display:block;margin-top:3px;color:var(--muted);font-size:.68rem}.fiscal-property-selector>button{flex:0 0 auto;min-height:40px;padding:7px 11px;border-radius:10px;background:#e6f0e3;color:var(--forest);font-size:.72rem;font-weight:800}.fiscal-processing-card{display:grid;gap:13px}.fiscal-processing-card .parameter-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.fiscal-processing-card .form-actions{flex-wrap:wrap;margin-top:0}.fiscal-processing-card .form-actions button{min-height:40px;padding:8px 12px;border-radius:11px;background:#e6f0e3;color:var(--forest);font-weight:800}.fiscal-processing-card .form-actions .action-primary{background:var(--forest);color:#fff}.fiscal-return{display:grid;gap:4px;padding:11px;border-left:4px solid var(--danger);border-radius:10px;background:#fff4f2;color:#8b3c36}.fiscal-return strong{font-size:.74rem}.fiscal-return span{font-size:.76rem;overflow-wrap:anywhere}.fiscal-context-notice{display:flex;align-items:center;gap:10px}.fiscal-context-notice p{flex:1}.fiscal-context-notice button{white-space:nowrap}.fiscal-status.draft{background:#edf0ee;color:#59645e}.fiscal-status.awaiting_transmission,.fiscal-status.unknown{background:#fff5d6;color:#806309}.fiscal-status.transmitting{background:#e6f0fa;color:#28689d}.fiscal-status.authorized,.fiscal-status.cancelled{background:#e6f5e9;color:#27703c}.fiscal-status.rejected,.fiscal-status.transmission_error{background:#fff0ee;color:#a34139}.fiscal-history ol{display:grid;gap:0;margin:13px 0;padding:0;list-style:none}.fiscal-history li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:3px 12px;padding:10px 0;border-bottom:1px solid var(--line)}.fiscal-history li time{grid-row:span 2;color:var(--muted);font-size:.7rem}.fiscal-history li span{color:var(--muted);font-size:.74rem}.fiscal-attempts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.fiscal-attempts article{display:grid;gap:3px;padding:10px;border:1px solid var(--line);border-radius:11px}.fiscal-attempts small,.fiscal-attempts span{color:var(--muted);font-size:.7rem}.fiscal-cancellable-list{display:grid;gap:8px;margin-top:12px}.fiscal-cancellable-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:11px;background:#f5f8f2}.fiscal-cancellable-list button{color:var(--danger);background:#fff0ee;padding:8px;border-radius:9px;font-weight:800;font-size:.72rem}
@media(max-width:619px){.fiscal-property-selector>button{width:100%}.fiscal-processing-card .parameter-info-grid{grid-template-columns:1fr}.fiscal-processing-card .form-actions{display:grid;grid-template-columns:1fr}.fiscal-context-notice{align-items:flex-start;flex-wrap:wrap}.fiscal-context-notice button{width:100%;text-align:left}.fiscal-history li{grid-template-columns:1fr}.fiscal-history li time{grid-row:auto}.fiscal-attempts{grid-template-columns:1fr}.fiscal-cancellable-list>div{align-items:flex-start;flex-direction:column}.fiscal-cancellable-list button{width:100%}}
/* Permissões granulares e exportação: grupos legíveis em telas pequenas. */
.permission-groups { display:grid; gap:10px; }
.permission-groups fieldset { min-width:0; margin:0; padding:10px; border:1px solid var(--line, #d9e3db); border-radius:12px; }
.permission-groups legend { padding:0 5px; font-weight:800; font-size:.86rem; color:var(--forest, #0f5132); }
.permission-modules { display:grid; gap:10px; }
.permission-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.permission-tabs button { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:var(--touch); padding:0 12px; border:1px solid var(--line, #d9e3db); border-radius:999px; background:var(--color-surface, #fff); color:var(--color-text-secondary, #40514a); font-weight:700; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.permission-tabs button.active { background:var(--forest, #0f5132); border-color:var(--forest, #0f5132); color:#fff; }
.permission-tabs button i { font-style:normal; font-size:.74rem; opacity:.75; }
.permission-panel { border:1px solid var(--line, #d9e3db); border-radius:12px; padding:12px; display:grid; gap:8px; }
.permission-panel .helper { margin:0; }
.permission-panel-list { display:grid; gap:6px; }
.check-row--gate { align-items:center; padding:9px 10px; border-radius:10px; background:var(--color-surface-muted, #f3f8f1); border:1px solid var(--forest, #0f5132); font-weight:800; }
.permission-panel--locked .permission-panel-list { opacity:.5; }
.check-row--disabled { cursor:not-allowed; }
.report-export-actions .form-actions { flex-wrap:wrap; }
@media (max-width:640px) { .permission-groups fieldset { padding:8px; } .report-export-actions .form-actions > * { flex:1 1 145px; } }
/* Erros de validação ficam próximos ao campo responsável no cadastro/login. */
.field-error { display:block; margin-top:5px; color:var(--danger); font-size:.76rem; font-weight:650; }
/* Ponte Fiscal -> Operacional: referências oficiais são somente leitura. */
.fiscal-operation-link,.fiscal-sale-reference{display:grid;gap:5px;padding:12px;border:1px solid #a8c9ad;border-radius:14px;background:#f2f8f1}.fiscal-operation-link.pending{border-color:#e5d29c;background:#fffbef}.fiscal-operation-link small,.fiscal-operation-link span{color:var(--muted);font-size:.72rem}.fiscal-operation-link strong{color:var(--forest)}.fiscal-sale-reference{margin:12px 0;border-left:5px solid var(--leaf)}.fiscal-sale-reference .parameter-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0}.fiscal-sale-reference>.check-field{margin-top:6px}.fiscal-sale-animal-map{display:grid;gap:6px;margin:6px 0;padding:0;list-style:none}.fiscal-sale-animal-map li{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:#fff;font-size:.74rem}.fiscal-sale-animal-map span{color:var(--muted);text-align:right}
@media(max-width:619px){.fiscal-sale-reference .parameter-info-grid{grid-template-columns:1fr}.fiscal-sale-animal-map li{display:grid}.fiscal-sale-animal-map span{text-align:left}}
/* Endereço principal 1:1 da propriedade e lista rural recolhida. */
.property-list-head{align-items:flex-end}.property-list-head .action-primary{flex:0 0 auto;min-height:42px;padding:8px 13px}.property-summary-list{display:grid;gap:9px}.property-summary-card{width:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;text-align:left;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 7px rgba(31,52,41,.025)}.property-summary-card:hover{border-color:#a8c9ad;background:#fbfdfb}.property-summary-card>span{min-width:0;display:grid;gap:5px}.property-summary-card strong,.property-summary-card small{display:block;overflow-wrap:anywhere}.property-summary-card strong{font-size:.94rem}.property-summary-card small{color:var(--muted);font-size:.74rem}.property-summary-card>b{flex:0 0 auto;color:var(--forest);font-size:1.55rem}.property-summary-badges{display:flex;flex-wrap:wrap;gap:5px}.property-summary-badges i{padding:4px 7px;border-radius:999px;background:#edf5ea;color:var(--forest);font-size:.64rem;font-style:normal;font-weight:800}.property-form-group{min-width:0;margin:0 0 14px;padding:14px;border:1px solid var(--line);border-radius:15px}.property-form-group legend{padding:0 6px;color:var(--forest);font-size:.82rem;font-weight:850}.property-form-group>.helper{margin:0 0 12px}.property-address-empty{padding:9px;border-radius:10px;background:#fffbef;color:#725713}.property-dialog-form{display:grid;gap:0}.property-dialog-actions{position:sticky;z-index:2;bottom:-18px;margin:2px -18px -18px;padding:14px 18px calc(14px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(10px)}.address-property-selector{margin-bottom:14px}.address-property-selector select{font-weight:750}.property-modal{width:min(100%,760px)}
@media(max-width:619px){.property-list-head{align-items:stretch;flex-direction:column}.property-list-head .action-primary{width:100%}.property-modal{width:100%;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);border-radius:22px 22px 0 0}.property-form-group{padding:11px}.property-dialog-actions{display:grid;grid-template-columns:1fr 1fr}.property-dialog-actions>*{width:100%;padding-inline:8px}.property-summary-card{padding:12px}.address-property-selector{margin-bottom:11px}}
.lookup-field-status{display:block;margin-top:.4rem;font-size:.8rem;line-height:1.35;color:var(--muted,#64748b)}
.lookup-field-status:empty{display:none}
.lookup-field-status.loading{color:#1d4ed8}
.lookup-field-status.success{color:#166534}
.lookup-field-status.error{color:#b91c1c}
.lookup-retry{display:inline;padding:.1rem .25rem;font-size:inherit;text-decoration:underline}
.lookup-company-action{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.8rem}
.company-registry-result{display:grid;gap:.25rem;margin:1rem 0;padding:.8rem 1rem;border:1px solid #bbf7d0;border-radius:.75rem;background:#f0fdf4;color:#166534}
.company-registry-result.warning{border-color:#fde68a;background:#fffbeb;color:#92400e}
.company-registry-result span{font-size:.84rem;line-height:1.4}
.lookup-dialog-backdrop{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:1rem;background:rgba(15,23,42,.62);backdrop-filter:blur(2px)}
.lookup-dialog{width:min(100%,30rem);max-height:calc(100vh - 2rem);overflow:auto;padding:1.35rem;border-radius:1rem;background:var(--surface,#fff);box-shadow:0 24px 70px rgba(15,23,42,.3)}
.lookup-dialog h2{margin:0 0 .65rem;font-size:1.25rem}
.lookup-dialog p{margin:0;color:var(--muted,#64748b);line-height:1.55}
.lookup-dialog .form-actions{position:static;margin-top:1.25rem;padding:0;background:transparent}
@media(max-width:600px){.lookup-dialog-backdrop{align-items:end;padding:0}.lookup-dialog{width:100%;max-height:92vh;border-radius:1rem 1rem 0 0;padding:1.1rem}.lookup-dialog .form-actions{display:grid;grid-template-columns:1fr}.lookup-dialog .form-actions button{width:100%}.lookup-company-action{align-items:stretch}.lookup-company-action button{width:100%}}
/* Design System BoiGestor — base visual compartilhada entre todos os módulos. */
:root {
--color-primary:#123c2d;
--color-primary-hover:#0d3023;
--color-primary-soft:#eaf3e7;
--color-accent:#e9b44c;
--color-background:#f4f7f2;
--color-surface:#ffffff;
--color-surface-muted:#f7faf6;
--color-border:#dfe7de;
--color-border-strong:#cbd8ca;
--color-text:#17221d;
--color-text-secondary:#657169;
--color-success:#27703c;
--color-success-soft:#eaf6ec;
--color-warning:#806309;
--color-warning-soft:#fff8e3;
--color-danger:#b6423a;
--color-danger-soft:#fff0ee;
--color-info:#28689d;
--color-info-soft:#edf6fd;
--control-height:44px;
--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;
--radius-xl:24px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--shadow-sm:0 2px 8px rgba(24,54,38,.045);
--shadow-md:0 12px 32px rgba(24,54,38,.09);
--forest:var(--color-primary);
--forest-2:#1f5943;
--ink:var(--color-text);
--muted:var(--color-text-secondary);
--bg:var(--color-background);
--card:var(--color-surface);
--line:var(--color-border);
--danger:var(--color-danger);
--shadow:var(--shadow-md);
}
html { color-scheme:light; scroll-behavior:smooth; }
body { color:var(--color-text); background:var(--color-background); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button,input,select,textarea { font:inherit; }
button { transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease; }
button:disabled,[aria-disabled="true"] { cursor:not-allowed; opacity:.56; box-shadow:none!important; }
:is(button,input,select,textarea,a):focus-visible { outline:2px solid rgba(64,134,93,.58); outline-offset:2px; }
.app-shell { width:100%; max-width:1200px; padding:env(safe-area-inset-top) 28px calc(110px + env(safe-area-inset-bottom)); }
.topbar { padding:var(--space-5) 2px var(--space-5); }
.main-content { gap:var(--space-5); }
#page-title { font-size:var(--text-page); line-height:1.12; }
.eyebrow { margin-bottom:var(--space-1); color:var(--color-text-secondary); font-size:.76rem; font-weight:700; letter-spacing:.015em; }
h2 { font-size:1.18rem; line-height:1.25; }
h3 { font-size:1rem; line-height:1.3; }
.card,.metric-card,.operation-card,.report-card,.property-summary-card {
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
background:var(--color-surface);
box-shadow:var(--shadow-sm);
}
.card { padding:var(--space-5); }
.metric-card { min-height:112px; padding:var(--space-4); }
.operation-card,.property-summary-card { padding:var(--space-4); }
.report-card { min-height:112px; padding:var(--space-4); }
:is(.operation-card,.report-card,.property-summary-card):hover { border-color:var(--color-border-strong); box-shadow:0 6px 18px rgba(24,54,38,.07); transform:translateY(-1px); }
.section-head { align-items:flex-start; gap:var(--space-4); padding:0; }
.section-head > div { min-width:0; }
.section-head :is(h2,h3) { margin:0; }
.section-head button:not(.action-primary):not(.action-secondary):not(.action-danger),.text-button { min-height:var(--touch); padding:6px 10px; border-radius:var(--radius-sm); }
.section-head button:not(.action-primary):not(.action-secondary):not(.action-danger):hover,.text-button:hover { background:var(--color-primary-soft); }
.action-primary,.action-secondary,.action-danger {
min-height:var(--control-height);
padding:0 var(--space-4);
border-radius:var(--radius-md);
font-size:.86rem;
font-weight:780;
line-height:1.15;
}
.action-primary { color:#fff; background:var(--color-primary); box-shadow:0 4px 12px rgba(18,60,45,.16); }
.action-primary:hover { background:var(--color-primary-hover); }
.action-secondary,.form-actions > button:not([class]) { color:var(--color-primary); background:var(--color-primary-soft); }
.action-secondary:hover,.form-actions > button:not([class]):hover { background:#dcebd8; }
.action-danger { color:var(--color-danger); background:var(--color-danger-soft); }
.action-danger:hover { background:#f9dedb; }
.form-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:var(--space-4); }
.form-grid > * { min-width:0; grid-column:span 4; }
.form-grid .span-2 { grid-column:span 8; }
.form-grid .full { grid-column:1/-1; }
.field { min-width:0; align-content:start; gap:6px; }
.field label { min-height:18px; color:#445249; font-size:.78rem; font-weight:720; line-height:1.35; }
.field :is(input,select,textarea),.filter-bar :is(input,select),.age-mixed-fields input {
width:100%; min-width:0; min-height:var(--control-height); margin:0;
border:1px solid var(--color-border-strong); border-radius:var(--radius-md);
background:var(--color-surface); color:var(--color-text); padding:9px 12px;
font-size:.9rem; line-height:1.25;
transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.field select { height:var(--control-height); padding-top:0; padding-bottom:0; }
.field textarea { min-height:96px; line-height:1.45; resize:vertical; }
.field :is(input,select,textarea):hover { border-color:#aec1ad; }
.field :is(input,select,textarea):focus { border-color:var(--leaf); box-shadow:0 0 0 3px rgba(64,134,93,.13); outline:0; }
.field :is(input,select,textarea):disabled,.field :is(input,select,textarea)[readonly] { color:#6f7973; background:#f0f3ef; border-color:var(--color-border); }
.field :is(input,select,textarea)[aria-invalid="true"] { border-color:var(--color-danger); box-shadow:0 0 0 3px rgba(182,66,58,.1); }
.helper,.lookup-field-status { color:var(--color-text-secondary); font-size:.75rem; line-height:1.4; }
.field-error { margin-top:2px; color:var(--color-danger); font-size:.75rem; line-height:1.35; }
.check-field { min-height:var(--control-height); color:#445249; font-size:.8rem; }
.check-field input { flex:0 0 auto; width:19px; height:19px; }
/* Linha de permissão: a caixa fica ao lado do rótulo, que quebra sozinho. */
.check-row { display:flex; align-items:center; gap:9px; min-height:var(--touch); padding:4px 2px; color:#47534c; font-size:.8rem; font-weight:700; cursor:pointer; }
.check-row input[type="checkbox"] { flex:0 0 auto; width:18px; height:18px; min-height:0; min-width:0; margin-top:1px; padding:0; accent-color:var(--forest, #0f5132); }
.check-row span { flex:1 1 auto; min-width:0; }
.address-grid > .field:nth-child(1) { grid-column:span 3; }
.address-grid > .field:nth-child(2) { grid-column:span 2; }
.address-grid > .field:nth-child(3) { grid-column:span 5; }
.address-grid > .field:nth-child(4) { grid-column:span 2; }
.address-grid > .field:nth-child(5) { grid-column:span 3; }
.address-grid > .field:nth-child(6) { grid-column:span 3; }
.address-grid > .field:nth-child(7) { grid-column:span 4; }
.address-grid > .field:nth-child(8) { grid-column:span 2; }
.form-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:var(--space-2); margin-top:var(--space-5); }
.form-actions .action-primary,.form-actions .action-secondary,.form-actions .action-danger,.form-actions > button:not([class]) { flex:0 0 auto; }
:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs) { display:flex; align-items:center; gap:6px; overflow-x:auto; padding:3px 2px 6px; scrollbar-width:thin; }
:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs) :is(button,a),.tab {
flex:0 0 auto; min-height:38px; padding:8px 13px; border:1px solid var(--color-border);
border-radius:999px; background:var(--color-surface); color:var(--color-text-secondary);
font-size:.78rem; font-weight:740; line-height:1; text-decoration:none; white-space:nowrap;
}
:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs) :is(button,a):hover,.tab:hover { border-color:#a9c3a6; background:var(--color-primary-soft); color:var(--color-primary); }
:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs) :is(button,a).active,.tab.active { border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
.pill,.fiscal-status,.property-summary-badges i,.client-card-status span {
min-height:25px; display:inline-flex; align-items:center; padding:5px 9px;
border-radius:999px; font-size:.69rem; font-weight:760; line-height:1.1;
}
.pill.active,.pill.available,.fiscal-status.authorized,.client-card-status .ok { color:var(--color-success); background:var(--color-success-soft); }
.pill.fattening,.fiscal-status.awaiting_transmission,.fiscal-status.unknown,.client-card-status .pending { color:var(--color-warning); background:var(--color-warning-soft); }
.pill.reserved,.fiscal-status.transmitting { color:var(--color-info); background:var(--color-info-soft); }
.pill.sold,.pill.dead,.fiscal-status.rejected,.fiscal-status.transmission_error { color:var(--color-danger); background:var(--color-danger-soft); }
.notice { gap:var(--space-3); padding:var(--space-4); border:1px solid #ecdcae; border-radius:var(--radius-md); background:var(--color-warning-soft); color:#6d5416; }
.notice.info { border-color:#c8dff0; background:var(--color-info-soft); color:#255d86; }
.notice.success { border-color:#b8d8bd; background:var(--color-success-soft); color:var(--color-success); }
.notice.error { border-color:#efc3bf; background:var(--color-danger-soft); color:var(--color-danger); }
.empty { display:grid; justify-items:center; align-content:center; min-height:170px; padding:var(--space-5); color:var(--color-text-secondary); }
.empty .empty-icon { margin:0 0 var(--space-2); font-size:2rem; }
.empty :is(h2,h3) { color:var(--color-text); }
.empty p { max-width:520px; margin:var(--space-2) 0 var(--space-4); }
.modal-backdrop { align-items:center; padding:var(--space-5); background:rgba(12,28,20,.6); backdrop-filter:blur(4px); }
.modal { width:min(100%,720px); max-height:calc(100dvh - 48px); padding:var(--space-5); border:1px solid rgba(255,255,255,.65); border-radius:var(--radius-xl); box-shadow:0 28px 80px rgba(12,28,20,.28); }
.modal.narrow { max-width:520px; }
.modal.property-modal { width:min(100%,860px); }
.modal-header { position:relative; align-items:flex-start; margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); }
.modal-header p { margin-top:var(--space-1); font-size:.8rem; }
.close { flex:0 0 auto; width:38px; height:38px; background:#f0f4ef; }
.property-form-group,.client-role-fieldset,.client-sanitary-fields { margin-bottom:var(--space-4); padding:var(--space-4); border-color:var(--color-border); border-radius:var(--radius-lg); }
.property-dialog-actions { bottom:calc(-1 * var(--space-5)); margin:var(--space-2) calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding:var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.report-table-wrap,.global-table-wrap { overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); }
.report-table,.global-user-table { width:100%; border-collapse:separate; border-spacing:0; }
.report-table th,.global-user-table th { padding:12px; border-bottom:1px solid var(--color-border); background:var(--color-surface-muted); color:var(--color-text-secondary); font-size:.7rem; font-weight:760; }
.report-table td,.global-user-table td { padding:12px; border-bottom:1px solid var(--color-border); }
.report-table tbody tr:hover td,.global-user-table tbody tr:hover td { background:#fbfdfb; }
.report-table tbody tr:last-child td,.global-user-table tbody tr:last-child td { border-bottom:0; }
.metric-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--space-3); }
.report-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-3); }
.finance-summary { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-3); }
.quick-row { gap:var(--space-2); }
.operation-list,.finance-list,.property-summary-list { gap:var(--space-3); }
.bottom-nav { min-height:72px; border-color:var(--color-border); }
.nav-item { min-height:48px; border-radius:var(--radius-md); }
.nav-item.active { color:var(--color-primary); background:var(--color-primary-soft); }
.desktop-nav-brand { display:none; }
.property-address-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.property-address-tools .helper { margin:0; }
.property-address-tools .action-secondary { min-height:38px; padding:0 12px; white-space:nowrap; }
/* Endereço mora somente na propriedade: os cadastros gerais apenas apontam para lá. */
.issuer-address-notice .action-secondary { align-self:flex-start; margin-top:var(--space-3); }
.client-address-notice { border:1px dashed var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); }
.client-address-notice .helper { margin:0; }
.counterparty-property-missing { margin:var(--space-2) 0 0; }
.counterparty-property-missing .text-button { padding:0; }
.age-operation-breed { max-width:360px; margin:var(--space-4) 0; }
.age-stock-table input[type="number"] { width:110px; min-width:86px; }
.table-scroll { overflow:auto; }
.toast { padding:13px 15px; border-radius:var(--radius-md); }
@media (min-width:1024px) {
/* No desktop a apresentacao fica ao lado do formulario, em vez de esticar a
versao do celular. O rodape atravessa as duas colunas. */
.login-screen { grid-template-columns:minmax(0,980px); }
.login-shell { grid-template-columns:minmax(0,1fr) minmax(380px,436px); align-items:center; gap:24px 64px; }
.login-hero { grid-column:1; grid-row:1; gap:14px; }
.login-wordmark { font-size:2.6rem; }
.login-tagline { font-size:1.05rem; max-width:26ch; }
.login-highlights { flex-direction:column; gap:12px; }
.login-highlights li { font-size:.8rem; }
.login-card-slot { grid-column:2; grid-row:1; }
.login-footer { grid-column:1/-1; grid-row:2; }
.app-shell { max-width:none; margin:0; padding:0 32px 48px 252px; }
.topbar,.main-content { width:min(100%,1280px); margin-inline:auto; }
.topbar { padding-block:24px 18px; }
.bottom-nav { inset:0 auto 0 0; width:220px; min-height:100dvh; padding:22px 14px; transform:none; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:5px; border:0; border-right:1px solid var(--color-border); border-radius:0; box-shadow:8px 0 30px rgba(18,60,45,.05); background:rgba(255,255,255,.98); }
.desktop-nav-brand { display:flex; align-items:center; gap:10px; min-height:54px; margin:0 4px 18px; padding:0 10px; color:var(--color-primary); font-size:1rem; }
.desktop-nav-brand span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--color-primary-soft); font-size:1.25rem; }
.bottom-nav .nav-item { flex:0 0 auto; width:100%; display:grid; grid-template-columns:30px 1fr; align-items:center; min-height:46px; padding:8px 12px; text-align:left; font-size:1rem; }
.bottom-nav .nav-item small { margin:0; font-size:.78rem; }
.bottom-nav .nav-more { display:none; }
}
@media (min-width:641px) and (max-width:1023px) {
.app-shell { padding-inline:24px; }
.form-grid > * { grid-column:span 6; }
.form-grid .span-2,.form-grid .full { grid-column:1/-1; }
.address-grid > .field:nth-child(1) { grid-column:span 4; }
.address-grid > .field:nth-child(2) { grid-column:span 2; }
.address-grid > .field:nth-child(3) { grid-column:span 6; }
.address-grid > .field:nth-child(4) { grid-column:span 3; }
.address-grid > .field:nth-child(5) { grid-column:span 4; }
.address-grid > .field:nth-child(6) { grid-column:span 5; }
.address-grid > .field:nth-child(7) { grid-column:span 7; }
.address-grid > .field:nth-child(8) { grid-column:span 5; }
}
@media (max-width:640px) {
.operation-type-grid { grid-template-columns:1fr; }
.app-shell { max-width:none; padding-inline:14px; padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
.topbar { gap:var(--space-2); padding:var(--space-4) 0; }
.topbar-actions { gap:var(--space-1); }
.main-content { gap:var(--space-4); }
.card { padding:var(--space-4); border-radius:var(--radius-lg); }
.form-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-3); }
.form-grid > *,.form-grid .span-2,.form-grid .full,.address-grid > .field:nth-child(n) { grid-column:1/-1; }
.form-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:var(--space-2); }
.form-actions > button { width:100%; }
.metric-grid,.finance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.report-grid { grid-template-columns:1fr; }
.modal-backdrop { align-items:flex-end; padding:0; }
.modal,.modal.property-modal { width:100%; max-height:94dvh; padding:var(--space-4); border-radius:22px 22px 0 0; }
.modal-header { margin-bottom:var(--space-4); }
.property-form-group,.client-role-fieldset,.client-sanitary-fields { padding:var(--space-3); }
.property-dialog-actions { bottom:calc(-1 * var(--space-4)); margin:var(--space-2) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)); padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.bottom-nav { overflow-x:auto; justify-content:flex-start; padding-inline:8px; }
.bottom-nav .nav-item { flex:1 0 49px; }
.bottom-nav .nav-secondary { display:none; }
.bottom-nav .nav-more { display:block; }
.property-address-tools { align-items:stretch; flex-direction:column; }
.property-address-tools .action-secondary { width:100%; }
.empty { min-height:150px; padding:var(--space-4); }
.client-readiness-grid,.issuer-readiness-grid { display:flex; gap:var(--space-2); overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; scrollbar-width:none; }
.client-readiness-grid::-webkit-scrollbar,.issuer-readiness-grid::-webkit-scrollbar,:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs)::-webkit-scrollbar { display:none; }
.client-readiness,.issuer-readiness { flex:0 0 min(78vw,250px); scroll-snap-align:start; }
:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs) { scrollbar-width:none; }
}
@media (max-width:420px) {
.metric-grid,.finance-summary { grid-template-columns:1fr 1fr; }
.metric-card { min-height:104px; padding:var(--space-3); }
.hero { padding:var(--space-4); }
.hero-row { gap:var(--space-4); flex-wrap:wrap; }
.property-dialog-actions { grid-template-columns:1fr 1fr; }
}
/* Filtros do Financeiro — layout compacto.
Tudo escopado em .finance-filters de proposito: .form-grid aparece em 98
lugares do app.js e .operation-filters e compartilhada com a tela Fiscal.
Alterar qualquer uma das duas para arrumar esta tela quebraria as outras. */
.finance-filters { padding-block: var(--space-4); }
.finance-filters .section-head { margin-bottom: 10px; }
.finance-filter-grid { display: grid; gap: 10px; }
/* Dois campos lado a lado. min-width:0 e o que impede o input de date, que tem
largura minima propria, de estourar a coluna e criar rolagem horizontal. */
.finance-filters .filter-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.finance-filters .filter-pair > * { min-width: 0; }
/* Agrupamento com um rotulo so para os dois campos (Periodo, Valor). */
.finance-filters .filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.finance-filters .filter-group > legend { padding: 0; margin-bottom: 5px; color: #445249; font-size: .78rem; font-weight: 720; line-height: 1.35; }
/* "De" e "Ate" como prefixo curto, sem roubar largura do campo. */
.finance-filters .filter-inline { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.finance-filters .filter-inline > span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.finance-filters .filter-inline input { min-width: 0; width: 100%; padding-inline: 8px; }
/* Rotulos dos campos que mantem label proprio ficam mais justos que o padrao. */
.finance-filters .field { gap: 4px; }
.finance-filters .field > label { min-height: 0; }
.finance-filters .helper { margin-top: 2px; font-size: .72rem; line-height: 1.4; }
/* Abaixo de 360px o campo de data nao cabe ao lado do prefixo: o ano fica
cortado ("01/09/20"). Ai o par quebra em duas linhas em vez de esconder texto.
O limite veio de inspecao VISUAL, nao de medicao. `scrollWidth` reporta zero
corte em input[type=date] porque o conteudo e desenhado no shadow DOM do
navegador -- a 320px a medicao dizia "cabe" e a tela mostrava o ano faltando.
Conferido a 320px (corta) e a 360px (mostra inteiro). */
@media (max-width: 359px) {
.finance-filters .filter-pair { grid-template-columns: 1fr; }
}
/* Consulta fiscal: seletor de tipo, sub-abas, paginação.
Escopado em .fiscal-* de proposito. .operation-filters e compartilhada com o
Financeiro e .parameter-tabs com Parametros; mexer nelas para arrumar esta
tela quebraria as outras. */
.fiscal-kind-label { display:block; margin-bottom:var(--space-2); color:#46524b; font-size:.76rem; font-weight:750; }
.fiscal-kind-switch { display:flex; gap:0; padding:4px; border-radius:999px; background:var(--color-primary-soft); border:1px solid var(--color-border); }
.fiscal-kind-switch button { flex:1 1 0; min-width:0; min-height:40px; padding:9px 14px; border-radius:999px; background:transparent; color:#4b574f; font-size:.84rem; font-weight:750; }
.fiscal-kind-switch button:hover { color:var(--color-primary); }
.fiscal-kind-switch button.active { background:var(--color-primary); color:#fff; font-weight:800; box-shadow:0 2px 6px rgba(18,60,45,.2); }
.fiscal-query-filters .form-grid,.fiscal-transmit-filters + .operation-filters .form-grid { margin-top:var(--space-3); }
.fiscal-query-filters .form-actions { margin-top:var(--space-3); }
.fiscal-transmit-filters { margin-bottom:calc(var(--space-3) * -1 + 2px); }
.fiscal-query-banner { margin-top:calc(var(--space-1) * -1); }
.fiscal-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 2px 2px; }
.fiscal-pager small { color:var(--muted); font-size:.75rem; }
.fiscal-pager-nav { display:flex; align-items:center; gap:5px; }
.fiscal-pager-nav button { min-width:34px; min-height:34px; padding:0 8px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); color:#6d786f; font-size:.78rem; font-weight:750; }
.fiscal-pager-nav button:hover:not(:disabled) { border-color:#a9c3a6; background:var(--color-primary-soft); color:var(--color-primary); }
.fiscal-pager-nav button.active { border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
.fiscal-pager-nav button:disabled { opacity:.4; cursor:default; }
/* Consulta fiscal, parte 2: as duas datas dividem uma linha.
Mesma correção do card do Financeiro — sete campos empilhados empurravam a
lista para fora da tela do celular. */
.fiscal-query-filters .fiscal-period { min-width:0; margin:0; padding:0; border:0; display:grid; gap:6px; }
.fiscal-query-filters .fiscal-period > legend { padding:0; color:#47534c; font-size:.75rem; font-weight:750; }
.fiscal-query-filters .fiscal-period-pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
.fiscal-query-filters .fiscal-period-pair > label { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; min-width:0; }
.fiscal-query-filters .fiscal-period-pair > label > span { color:var(--muted); font-size:.72rem; font-weight:700; }
.fiscal-query-filters .fiscal-period-pair input { min-width:0; width:100%; min-height:44px; border:1px solid #d9e1d8; background:#fbfdfb; border-radius:11px; padding:9px 8px; color:var(--ink); }
/* Abaixo de 360px o campo de data não cabe ao lado do prefixo: o ano some. */
@media (max-width:359px) { .fiscal-query-filters .fiscal-period-pair { grid-template-columns:1fr; } }
/* O banner da Consulta é informativo; o de inconsistências é que alerta.
.notice sozinha é amarela, o que fazia toda consulta parecer um aviso. */
.fiscal-query-banner { border:1px solid #cfe3c8; background:#eef5ea; color:#385744; }
.fiscal-query-banner.warning { border-color:#f0cfc9; background:#fdf1ef; color:#9b4039; }
/* O cabeçalho da Consulta tem título e "Nova GTA": em tela estreita o botão
ia para fora da borda em vez de descer uma linha. */
.fiscal-query-head { flex-wrap:wrap; row-gap:var(--space-2); }
.fiscal-query-head > div { flex:1 1 auto; min-width:0; }
.fiscal-query-head > .action-primary { flex:0 0 auto; max-width:100%; }
/* Folha de conclusão da venda.
O modal do app já sobe do rodapé no celular (.modal-backdrop usa
align-items:flex-end), então a folha só acrescenta a alça e o canto reto
embaixo, em vez de criar uma segunda camada com regras próprias. */
.modal-sheet { border-radius:24px 24px 0 0; padding-top:10px; }
.modal-sheet-handle { display:block; width:44px; height:4px; margin:0 auto 14px; border-radius:99px; background:#d3ddd1; }
@media (min-width:620px) { .modal-sheet { border-radius:24px; } }
.sale-sheet { display:grid; gap:var(--space-3); }
.sale-sheet-head { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:2px 2px 4px; }
.sale-sheet-check { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--color-success-soft); color:var(--color-success); font-size:1.45rem; font-weight:800; }
.sale-sheet-head h2 { font-size:1.32rem; letter-spacing:-.035em; }
.sale-sheet-head p { margin:3px 0 0; color:var(--muted); font-size:.83rem; line-height:1.4; }
.sale-sheet-block { padding:var(--space-4); background:var(--color-surface-muted); }
.sale-sheet-block h3 { margin:0 0 var(--space-3); font-size:.95rem; font-weight:800; }
.sale-sheet-lines { display:grid; }
.sale-sheet-line { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--color-border); }
.sale-sheet-line:last-child { border-bottom:0; padding-bottom:0; }
.sale-sheet-line > span { flex:0 1 auto; min-width:0; color:var(--muted); font-size:.82rem; }
.sale-sheet-line > strong { flex:0 1 auto; min-width:0; text-align:right; overflow-wrap:anywhere; font-size:.87rem; font-weight:700; font-variant-numeric:tabular-nums; }
.sale-sheet-pill { gap:6px; padding:8px 13px; font-size:.8rem; }
.sale-sheet-notice { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:13px; border:1px solid #cfe3c8; border-radius:var(--radius-md); background:#eef5ea; }
.sale-sheet-notice > span { color:var(--color-success); font-size:1.1rem; line-height:1.2; }
.sale-sheet-notice strong { display:block; color:#2c5540; font-size:.83rem; font-weight:750; line-height:1.4; }
.sale-sheet-notice > div > span { display:block; margin-top:4px; color:#4a5a50; font-size:.79rem; line-height:1.45; }
/* Empilhados e de largura cheia: no celular a área de toque vale mais que a
economia de altura, e a ação principal fica sob o polegar. */
.sale-sheet-actions { display:grid; gap:var(--space-2); margin-top:var(--space-2); }
.sale-sheet-actions > button { width:100%; }
.sale-sheet-close { min-height:44px; }
/* "Emitir depois" é contornado, não preenchido: com dois botões cheios
empilhados, o olho não distingue qual é a ação principal. */
.sale-sheet-actions .action-secondary { border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-primary); }
.sale-sheet-actions .action-secondary:hover { border-color:#a9c3a6; background:var(--color-primary-soft); }
/* Próximas ações depois de salvar compra/venda (operation-saved-ui.js).
O modal é mais largo que o padrão porque os cartões de ação ficam lado a
lado no computador; no celular tudo empilha e segue a largura da folha. */
.modal:has(> .op-saved:not(.op-saved-processing)) { width:min(100%,960px); }
.op-saved { display:grid; gap:var(--space-4); }
.op-saved-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:start; }
.op-saved-head h2 { font-size:1.32rem; letter-spacing:-.035em; }
.op-saved-head p { margin:4px 0 0; color:var(--muted); font-size:.85rem; line-height:1.5; }
.op-saved-head p strong { color:var(--ink); }
.op-saved-sync { display:inline-flex; margin-left:4px; font-size:.72rem; vertical-align:middle; }
.op-saved-x { width:38px; height:38px; border-radius:50%; font-size:1.25rem; line-height:1; }
.op-saved-note { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; margin:0; padding:12px 14px; border:1px solid #cfe3c8; border-radius:var(--radius-md); background:#eef5ea; color:#2c5540; font-size:.82rem; line-height:1.45; }
.op-saved-note.warning { border-color:#ecd9a0; background:var(--color-warning-soft); color:var(--color-warning); }
.op-saved-note > span { font-weight:800; }
.op-saved-summary { padding:var(--space-4); background:var(--color-surface-muted); }
.op-saved-summary h3, .op-saved-question { margin:0 0 var(--space-3); font-size:1rem; font-weight:800; }
.op-saved-question { margin:0; }
.op-saved-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; }
.op-saved-field { display:grid; align-content:start; gap:3px; min-width:0; }
.op-saved-field small { color:var(--muted); font-size:.76rem; }
.op-saved-field strong { overflow-wrap:anywhere; font-size:.92rem; font-variant-numeric:tabular-nums; }
.op-saved-field .pill { justify-self:start; }
.op-saved-total { color:var(--color-success); font-size:1.18rem !important; }
.op-saved-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-3); }
.op-saved-action { display:grid; align-content:start; gap:6px; min-height:132px; padding:14px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.op-saved-action:hover:not([disabled]) { border-color:#a9c3a6; box-shadow:0 6px 18px rgba(18,60,45,.08); transform:translateY(-1px); }
.op-saved-action:focus-visible { outline:3px solid rgba(64,134,93,.35); outline-offset:2px; }
.op-saved-action[disabled] { cursor:not-allowed; opacity:.62; }
.op-saved-action strong { font-size:.92rem; }
.op-saved-action small { color:var(--muted); font-size:.78rem; line-height:1.4; }
.op-saved-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#fff; font-size:1rem; font-weight:800; }
.tone-green .op-saved-icon { background:#2f8a4c; }
.tone-blue .op-saved-icon { background:#2f6fd0; }
.tone-purple .op-saved-icon { background:#7b4ad0; }
.tone-orange .op-saved-icon { background:#e8892a; }
.tone-neutral .op-saved-icon { background:var(--color-primary); }
.op-saved-actions > .op-saved-note { grid-column:1 / -1; }
.op-saved-later { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.op-saved-later > span { font-size:1.1rem; color:var(--muted); }
.op-saved-later p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.45; }
.op-saved-later p strong { color:var(--ink); margin-right:6px; }
.op-saved-processing { justify-items:center; text-align:center; padding:12px 4px; }
.op-saved-processing h2 { font-size:1.15rem; }
.op-saved-processing p { margin:0; color:var(--muted); font-size:.85rem; }
.op-saved-progress { width:min(100%,260px); height:6px; overflow:hidden; border-radius:999px; background:var(--color-border); }
.op-saved-progress span { display:block; width:40%; height:100%; border-radius:inherit; background:var(--color-success); animation:op-saved-progress 1.1s ease-in-out infinite; }
@keyframes op-saved-progress { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
.op-saved-titles { display:grid; gap:var(--space-3); }
.op-saved-title { padding:14px; border:1px solid var(--color-border); border-left:4px solid var(--color-success); border-radius:var(--radius-md); background:#fff; }
.op-saved-title.payable { border-left-color:var(--color-danger); }
.op-saved-title-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.op-saved-title-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 14px; }
.op-saved-title-grid div { display:grid; gap:2px; min-width:0; }
.op-saved-title-grid small { color:var(--muted); font-size:.74rem; }
.op-saved-title-grid span { font-size:.86rem; font-weight:650; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.op-saved-title .helper { margin:8px 0 0; }
.op-saved-empty { padding:24px; text-align:center; border:1px dashed var(--color-border-strong); border-radius:var(--radius-md); color:var(--muted); }
.op-saved-footer { justify-content:space-between; }
.op-fiscal-history-title { margin:var(--space-4) 0 var(--space-2); font-size:.95rem; font-weight:800; }
/* Conflito de sessão no login e sessão encerrada no aparelho antigo. */
.session-conflict { position:relative; display:grid; justify-items:center; gap:var(--space-3); padding:8px 4px 2px; text-align:center; }
.session-conflict-close { position:absolute; top:-4px; right:-4px; width:36px; height:36px; font-size:1.2rem; }
.session-conflict-icon, .session-ended-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; font-size:1.5rem; font-weight:800; }
.session-conflict-icon { background:#fff4d6; color:#b7791f; box-shadow:inset 0 0 0 2px #f2c14e; }
.session-conflict h2 { margin:0; font-size:1.3rem; letter-spacing:-.03em; }
.session-conflict > p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.5; }
.session-conflict-notice, .session-ended-notice { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; width:100%; padding:12px 14px; border:1px solid #ecd9a0; border-radius:var(--radius-md); background:var(--color-warning-soft); color:var(--color-warning); text-align:left; }
.session-conflict-notice > span, .session-ended-notice > span { font-weight:800; }
.session-conflict-notice p, .session-ended-notice p { margin:0; font-size:.83rem; line-height:1.45; }
.session-conflict-error { width:100%; margin:0; padding:10px 12px; border-radius:var(--radius-md); background:var(--color-danger-soft); color:var(--color-danger); font-size:.83rem; text-align:left; }
.session-conflict-actions { display:grid; grid-template-columns:1fr 1.6fr; gap:var(--space-2); width:100%; margin-top:var(--space-2); }
.session-conflict-actions > button { min-height:46px; }
.session-conflict-actions .action-secondary { border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-primary); }
.session-conflict-actions button[aria-busy="true"] { cursor:progress; }
.session-ended { display:grid; justify-items:center; gap:var(--space-3); text-align:center; }
.session-ended-icon { background:var(--color-danger-soft); color:var(--color-danger); }
.session-ended h2 { font-size:1.6rem; }
.session-ended > p { margin:0; color:var(--muted); font-size:.9rem; }
.session-ended > .action-primary { width:100%; min-height:46px; }
@media (max-width:619px) {
/* Empilhados: a ação principal fica em cima, sob o polegar. */
.session-conflict-actions { grid-template-columns:1fr; }
.session-conflict-actions > [data-session-conflict-confirm] { order:-1; }
}
@media (max-width:619px) {
.op-saved-grid, .op-saved-title-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.op-saved-actions { grid-template-columns:1fr 1fr; }
.op-saved-action { min-height:0; }
.op-saved-later { grid-template-columns:auto minmax(0,1fr); }
.op-saved-later > button { grid-column:1 / -1; width:100%; }
.op-saved-footer { display:grid; grid-template-columns:1fr; }
}
@media (max-width:340px) {
.op-saved-grid, .op-saved-actions { grid-template-columns:1fr; }
}
/* Documento de simulação: precisa saltar aos olhos.
Âmbar e caixa alta de propósito — é o único lugar do app onde o alarme visual
vale mais que a harmonia, porque confundir documento de teste com documento
fiscal é o erro caro deste módulo. */
.fiscal-simulation {
display:inline-flex; align-items:center; gap:6px; margin-top:var(--space-2);
padding:6px 11px; border:1px solid #e0b64a; border-radius:999px;
background:#fff6e0; color:#7a5a07;
font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.fiscal-status-banner .fiscal-simulation { margin-top:0; }
/* O cartão fiscal é grid: sem isto a faixa estica na largura toda e perde a
forma de etiqueta. */
.fiscal-processing-card > .fiscal-simulation { justify-self:start; width:auto; }
/* Revisão fiscal: uma coluna em telas pequenas, sem alterar o layout legado. */
.fiscal-journey { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.fiscal-journey label { display: grid; gap: .35rem; min-width: 0; margin-bottom: .8rem; font-weight: 600; }
.fiscal-journey input, .fiscal-journey select, .fiscal-journey textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
.fiscal-journey textarea { resize: vertical; font-family: inherit; }
.fiscal-journey input, .fiscal-journey select, .fiscal-journey textarea { padding: .65rem .75rem; border: 1px solid #c9d8cf; border-radius: 10px; background: #fff; color: #152c22; font-family: inherit; }
.fiscal-journey input[readonly] { background: #f2f6f3; color: #41564b; }
.fiscal-journey [aria-invalid="true"] { border-color: #a51d28; }
.journey-field-error { color: #a51d28; font-size: .85rem; font-weight: 500; }
.fiscal-journey :is(input,select,textarea,button):focus-visible { outline: 2px solid #167256; outline-offset: 2px; }
.fiscal-journey fieldset { min-width: 0; padding: 1rem; margin: 1rem 0; border: 1px solid #dce5df; border-radius: 12px; }
.fiscal-journey legend { font-weight: 700; padding: 0 .3rem; }
.journey-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.journey-grid > fieldset { grid-column: 1 / -1; }
.fiscal-journey .form-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.fiscal-journey button { min-height: 44px; max-width: 100%; white-space: normal; }
.fiscal-journey details { margin: 1rem 0; }
.fiscal-journey summary { padding: .6rem 0; min-height: 44px; cursor: pointer; }
.journey-error { color: #a51d28; font-weight: 600; }
.journey-history article { border-left: 3px solid #167256; padding: .8rem 1rem; margin: .7rem 0; }
.journey-history time, .journey-history strong { display: block; }
.journey-remote-change { padding: .8rem; background: #fff7dc; border-radius: 8px; }
@media(max-width: 600px) { .journey-grid { grid-template-columns: minmax(0, 1fr); } .fiscal-journey fieldset { padding: .7rem; } }
/* ============================================================================
REDESIGN MOBILE — LOTE 1: escala tipográfica e componentes compartilhados
O cofre de tokens (--color-*, --space-*, --radius-*) já existia e já batia
com os mockups; não recriei nada. O que faltava era escala de texto declarada
e os componentes que as referências repetem em toda tela. Cada um aqui é
NOVO: nenhuma regra existente foi redefinida, para não deslocar tela alguma
sem eu ter olhado.
========================================================================== */
:root {
/* Escala de texto. Os mockups usam títulos de página bem maiores que o atual
(1.46rem) — é o que dá a hierarquia forte que a referência tem. */
--text-page: 1.75rem;
--text-section: 1.06rem;
--text-body: .875rem;
--text-label: .78rem;
--text-meta: .72rem;
/* Alvo de toque mínimo confortável, usado pelos componentes novos. */
--touch: 44px;
}
/* Título de página, no corpo da tela e não na barra do topo — é assim nas
referências, e libera a barra para marca e propriedade. */
.page-title { margin:0 0 var(--space-3); font-weight:800; letter-spacing:-.03em; }
.page-title + .page-subtitle { margin:calc(var(--space-3) * -1) 0 var(--space-4); color:var(--muted); font-size:var(--text-body); line-height:1.45; }
/* Chip de filtro em forma de cartão: ícone em cima, rótulo embaixo. Aparece na
fileira de tipo de operação (Entrada / Saída / Ajuste / Despesa). */
.chip-row { display:flex; gap:var(--space-2); overflow-x:auto; padding:2px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar { display:none; }
.chip-card {
flex:0 0 auto; min-width:76px; min-height:var(--touch);
display:grid; justify-items:center; gap:5px;
padding:10px 12px; border:1px solid var(--color-border); border-radius:var(--radius-md);
background:var(--color-surface); color:var(--color-text-secondary);
font-size:var(--text-meta); font-weight:700; line-height:1.1; text-align:center;
}
.chip-card > .chip-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--color-primary-soft); font-size:.9rem; }
.chip-card[aria-pressed="true"], .chip-card.active { border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
.chip-card[aria-pressed="true"] > .chip-icon, .chip-card.active > .chip-icon { background:rgba(255,255,255,.18); }
/* Bloco de número: ícone em selo, valor grande, rótulo embaixo. Nas referências
o VALOR vem antes do rótulo — é o que se lê primeiro de relance. */
.stat-tile { display:grid; gap:2px; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.stat-tile > .stat-icon { display:grid; place-items:center; width:32px; height:32px; margin-bottom:var(--space-2); border-radius:var(--radius-sm); background:var(--color-primary-soft); font-size:1rem; }
.stat-tile > strong { font-size:1.32rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.stat-tile > small { color:var(--muted); font-size:var(--text-meta); line-height:1.3; }
/* Linha de lista com valores e seta. Toda a área é clicável e tem altura de
alvo confortável, porque no celular a seta sozinha é pequena demais. */
.list-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-3); align-items:center; width:100%; min-height:var(--touch); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); text-align:left; color:inherit; }
.list-row > .list-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-sm); background:var(--color-primary-soft); font-size:1rem; }
.list-row > .list-body { min-width:0; display:grid; gap:3px; }
.list-row .list-title { font-size:var(--text-body); font-weight:750; }
.list-row .list-values { display:flex; flex-wrap:wrap; gap:2px var(--space-4); }
.list-row .list-values > span { display:grid; gap:1px; }
.list-row .list-values strong { font-size:var(--text-body); font-weight:800; font-variant-numeric:tabular-nums; }
.list-row .list-values small { color:var(--muted); font-size:var(--text-meta); }
.list-row > .list-chevron { flex:0 0 auto; color:var(--muted); font-size:1.1rem; line-height:1; }
/* Faixa de aviso suave. Amarelo para atenção, verde para informação — a cor
nunca é o único sinal: o ícone e o texto dizem a mesma coisa. */
.soft-note { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:start; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-muted); color:var(--color-text-secondary); font-size:var(--text-label); line-height:1.45; }
.soft-note.is-warning { border-color:#e8d9a4; background:var(--color-warning-soft); color:#6d5416; }
.soft-note.is-success { border-color:#bcdcc3; background:var(--color-success-soft); color:#245c36; }
.soft-note.is-danger { border-color:#eec4bf; background:var(--color-danger-soft); color:#8f3a33; }
/* Todo controle tem alvo de toque confortável e foco visível — vale para os
ícones sem texto, que eram os menores da tela. */
.chip-card, .list-row, .stat-tile[role="button"] { cursor:pointer; }
.chip-card:focus-visible, .list-row:focus-visible { outline:3px solid rgba(64,134,93,.4); outline-offset:2px; }
@media (max-width:400px) {
:root { --text-page:1.6rem; }
.stat-tile { padding:var(--space-3); }
.list-row { padding:var(--space-3); }
}
/* Os pares De/Até do Financeiro e da Consulta fiscal ficaram com 27px de altura
quando compactei os cards: eles não descendem de `.field`, então nunca
receberam os 44px. Altura de toque vale mais que os ~34px de card que isso
devolve — errar o campo e ter de tocar de novo custa mais tempo do que rolar. */
.finance-filters .filter-inline input,
.fiscal-query-filters .fiscal-period-pair input { min-height:var(--touch); }
/* ============================================================================
REDESIGN MOBILE — LOTE 2: cabeçalho, título de página, navegação e folhas
O título saiu da barra do topo e desceu para o corpo, como nas referências.
A barra passa a carregar marca e empresa. `#page-title` e `#today-label`
continuam existindo com os mesmos ids — só mudaram de lugar, porque `app.js`
escreve neles por id e não por posição.
========================================================================== */
.topbar { padding:14px 2px 10px; }
.brand-block { display:flex; align-items:center; gap:9px; min-width:0; }
.brand-block > .brand-mark { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:var(--color-primary-soft); font-size:1.15rem; line-height:1; }
.brand-text { display:grid; min-width:0; }
.brand-name { font-size:1.02rem; font-weight:800; letter-spacing:-.03em; color:var(--color-primary); line-height:1.15; }
.brand-company { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:var(--text-meta); line-height:1.25; }
.brand-company:empty { display:none; }
/* Título grande no corpo. É a hierarquia das referências: a barra identifica o
aplicativo, o corpo diz em que tela você está. */
.page-head { padding:2px 2px 0; margin-bottom:var(--space-4); }
.page-head > .eyebrow { margin:0 0 2px; }
.page-head > .page-title { margin:0; }
/* Navegação inferior: o item ativo ganha a pastilha verde atrás do ícone, com
o rótulo verde embaixo — sinal duplo, não só cor. */
/* Sem declarar `display` aqui: `.nav-secondary { display:none }` recolhe os
itens extras no celular, e uma regra posterior com a mesma especificidade os
traria de volta -- foi exatamente o que aconteceu na primeira versao. */
.bottom-nav .nav-item { min-height:var(--touch); padding:5px 6px; background:transparent; text-align:center; }
.bottom-nav .nav-item > span:first-child { display:grid; place-items:center; min-width:42px; height:26px; border-radius:999px; transition:background .14s; }
.bottom-nav .nav-item.active { background:transparent; }
.bottom-nav .nav-item.active > span:first-child { background:var(--color-primary-soft); }
.bottom-nav .nav-item.active > small { color:var(--color-primary); font-weight:800; }
/* Folha inferior padrão para todo modal no celular. O modal do app já sobe do
rodapé; isto só uniformiza a alça, o canto e a rolagem interna, para nenhum
conteúdo alto ficar sem como rolar. */
.modal { overscroll-behavior:contain; }
.modal-sheet-handle { cursor:grab; }
@media (max-width:619px) {
.modal { max-height:calc(100dvh - 18px); border-radius:22px 22px 0 0; }
.modal-backdrop { padding:0; }
.modal-sheet { padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); }
}
/* Alvos de toque da barra do topo e dos chips de tipo: estavam em 40px e 38px.
Os 4px que faltavam são justamente a diferença entre acertar e errar o toque
com o polegar, e aqui há folga de sobra para dá-los. */
.topbar-actions .icon-button, .topbar-actions .avatar, .fab.fab-in-topbar { width:var(--touch); height:var(--touch); }
:is(.tabs,.parameter-tabs,.client-tabs,.fiscal-tabs,.global-user-tabs) :is(button,a), .tab { min-height:var(--touch); }
/* ============================================================================
REDESIGN MOBILE — LOTE 3: Início e Notificações
Nenhuma marcação foi tocada aqui. Os cartões de número já vinham com ícone,
rótulo, valor e nota nessa ordem; as referências leem o VALOR primeiro, e
`order` resolve isso sem mexer no `metric()` do app.js — que é gerado em oito
pontos e não vale o risco de reescrever por causa de ordem visual.
========================================================================== */
.metric-card { display:flex; flex-direction:column; gap:1px; min-height:0; padding:var(--space-4); border-radius:var(--radius-lg); }
.metric-card > .metric-icon { order:1; display:grid; place-items:center; width:32px; height:32px; margin-bottom:var(--space-2); border-radius:var(--radius-sm); background:var(--color-primary-soft); font-size:1rem; line-height:1; }
.metric-card > strong { order:2; font-size:1.28rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.metric-card > p { order:3; margin:0; color:var(--muted); font-size:var(--text-meta); line-height:1.3; }
.metric-card > small { order:4; margin-top:3px; color:var(--color-primary); font-size:var(--text-meta); font-weight:700; }
/* O herói mantém o dado financeiro real — as referências mostram só uma saudação,
e trocar número por decoração seria perder informação. O que muda é a forma:
respiro maior, canto do token e a marca d'água mais discreta. */
.hero { padding:var(--space-5); border-radius:var(--radius-xl); }
.hero:after { font-size:88px; opacity:.09; }
.hero-value { font-size:1.95rem; }
.hero-row { gap:var(--space-5); padding-top:var(--space-4); margin-top:var(--space-4); }
/* Acesso rápido no formato das referências: ícone em selo e rótulo embaixo. */
.quick-row button { min-height:78px; display:grid; justify-items:center; align-content:center; gap:6px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); font-size:1.25rem; }
.quick-row button:hover { border-color:#a9c3a6; background:var(--color-primary-soft); }
.quick-row small { margin:0; font-size:var(--text-meta); font-weight:750; color:var(--color-text-secondary); }
/* "Precisa de atenção": o aviso é dito pelo ícone e pelo texto, não só pela cor. */
.dashboard-attention { border-left:0; border-top:3px solid var(--color-accent); }
.attention-item { min-height:var(--touch); display:flex; align-items:center; gap:var(--space-2); border:1px solid #e8d9a4; border-radius:var(--radius-md); background:var(--color-warning-soft); color:#6d5416; }
.attention-item.overdue { border-color:#eec4bf; background:var(--color-danger-soft); color:#8f3a33; }
/* Notificação: cartão limpo, com a ação de marcar como lida sempre alcançável. */
.notification-card { border-radius:var(--radius-lg); padding:var(--space-4); }
.notification-card h3 { font-size:var(--text-body); font-weight:750; }
.notification-card p { font-size:var(--text-label); line-height:1.45; }
.notification-card .action-primary,.notification-actions .action-secondary { min-height:var(--touch); }
/* ============================================================================
REDESIGN MOBILE — LOTE 4: Operações, detalhe e histórico
========================================================================== */
/* Fileira de tipo (Entrada / Saída / Ajuste / Despesa) no formato de cartão das
referências. `.tab` continua sendo `.tab` — só a forma mudou. */
:is(.tabs,.parameter-tabs,.fiscal-tabs,.fiscal-subtabs) :is(button,a),.tab { padding:10px 15px; border-radius:var(--radius-md); font-size:var(--text-label); }
.tabs { gap:var(--space-2); }
/* Cartão de operação: título, subtítulo e rodapé de valores com respiro maior e
área de toque cheia — o cartão inteiro é o alvo, não só o texto. */
.operation-card { min-height:var(--touch); padding:var(--space-4); border-radius:var(--radius-lg); }
.operation-title { font-size:var(--text-body); font-weight:800; }
.operation-subtitle { margin:4px 0 var(--space-3); font-size:var(--text-label); }
.list-meta { padding-top:var(--space-3); font-size:var(--text-label); }
.list-meta strong { font-variant-numeric:tabular-nums; }
/* Detalhe da operação: o número é o dado principal da tela. */
.detail-hero { border-radius:var(--radius-lg); padding:var(--space-4); }
.detail-number { margin-top:var(--space-4); font-size:1.6rem; }
.stat-line { min-height:var(--touch); padding:var(--space-3) 0; font-size:var(--text-body); }
/* Linha do tempo com respiro e alvo confortável. */
.timeline-item { padding-bottom:var(--space-4); }
.timeline-icon { width:38px; height:38px; border-radius:var(--radius-md); background:var(--color-primary-soft); }
.timeline-content strong { font-size:var(--text-body); }
.timeline-content p { font-size:var(--text-label); }
/* ============================================================================
REDESIGN MOBILE — LOTE 5: Nova operação (assistente em etapas)
========================================================================== */
/* As três etapas ficam legíveis e tocáveis; a ativa é verde e mantém o número
em destaque, para a posição no fluxo não depender só da cor. */
.operation-wizard-tab { min-height:60px; border-radius:var(--radius-md); font-size:var(--text-meta); }
.operation-wizard-tab b { width:22px; height:22px; font-size:var(--text-meta); }
.steps { margin-bottom:var(--space-4); }
.step { height:6px; }
/* Campos do assistente: rótulo acima, campo com altura de toque, ajuda logo
abaixo do campo a que pertence. */
.field label { font-size:var(--text-label); }
.field input,.field select,.field textarea { min-height:var(--touch); border-radius:var(--radius-md); }
.check-field { min-height:var(--touch); }
.check-field input { width:20px; height:20px; }
/* As ações do formulário ficam ao alcance do polegar e nunca escondidas pelo
teclado: no celular elas grudam no rodapé da folha. */
@media (max-width:619px) {
.modal .form-actions { position:sticky; bottom:0; z-index:2; margin-inline:calc(var(--space-4) * -1); padding:var(--space-3) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background:linear-gradient(to bottom, rgba(255,255,255,0), var(--color-surface) 28%); }
.modal .form-actions .action-primary,.modal .form-actions .action-secondary { min-height:var(--touch); }
}
/* ============================================================================
REDESIGN MOBILE — LOTE 6: Pessoas e cadastro de pessoa
========================================================================== */
.person-picker-selected { min-height:var(--touch); padding:var(--space-3); border-radius:var(--radius-md); font-size:var(--text-label); }
.person-picker-option { min-height:var(--touch); padding:var(--space-3); border-radius:var(--radius-md); }
.person-picker-option small { font-size:var(--text-meta); }
.person-picker-list { gap:var(--space-2); }
/* Abas do cadastro (Dados gerais / Propriedades / Fiscal) com alvo confortável.
A aba bloqueada continua bloqueada — só fica legível que ela está. */
.client-tabs :is(button,a)[disabled],.parameter-tabs button[disabled] { opacity:.5; cursor:not-allowed; }
.issuer-property-flags .check-field { min-height:var(--touch); }
.issuer-gta-fields { border-radius:var(--radius-lg); padding:var(--space-4); }
.issuer-gta-fields legend { font-size:var(--text-label); }
/* ============================================================================
REDESIGN MOBILE — LOTE 7: Financeiro
========================================================================== */
/* Cartões-resumo com o valor primeiro, igual aos de Início. */
.finance-summary .card { padding:var(--space-4); border-radius:var(--radius-lg); }
.finance-summary p { order:2; margin:2px 0 0; font-size:var(--text-meta); }
.finance-summary .card { display:flex; flex-direction:column; }
.finance-summary strong { order:1; font-size:1.28rem; font-variant-numeric:tabular-nums; }
/* Conta: a faixa colorida à esquerda diz o tipo, e o texto repete a informação. */
.finance-item { min-height:var(--touch); padding:var(--space-4); border-radius:var(--radius-md); border-left-width:4px; }
.finance-item strong { font-size:var(--text-body); }
.finance-item p { font-size:var(--text-meta); }
.finance-item button { min-height:var(--touch); padding:0 var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-meta); }
.finance-item-actions { gap:var(--space-2); margin-top:var(--space-2); }
/* ============================================================================
REDESIGN MOBILE — LOTE 8: Relatórios
========================================================================== */
.report-card { min-height:104px; padding:var(--space-4); border-radius:var(--radius-lg); }
.report-card strong { margin-top:var(--space-2); font-size:var(--text-label); }
.report-card small { font-size:var(--text-meta); }
/* Tabela larga rola no próprio contêiner: a página nunca anda de lado. */
.report-table-wrap--movement { border-radius:var(--radius-md); }
.report-table { font-size:var(--text-label); }
.report-table th { font-size:var(--text-meta); padding:var(--space-3) var(--space-2); }
.report-table td { padding:var(--space-3) var(--space-2); }
/* Barras do gráfico com raio do token, para combinar com os cartões. */
.bar,.billing-bar { border-radius:var(--radius-sm) var(--radius-sm) 2px 2px; }
.chart-legend,.billing-legend { font-size:var(--text-meta); }
/* ============================================================================
REDESIGN MOBILE — LOTE 9: Equipe e permissões
========================================================================== */
/* A tabela de usuários rola no próprio contêiner; nenhum dado foi retirado. */
.global-table-wrap { border-radius:var(--radius-lg); }
.global-user-table { font-size:var(--text-label); }
.global-user-table th { font-size:var(--text-meta); }
.global-user-pager button { min-height:var(--touch); min-width:var(--touch); border-radius:var(--radius-sm); }
/* Cada permissão é uma linha tocável inteira, não só a caixinha. */
.parameter-list li { min-height:var(--touch); display:flex; align-items:center; padding:var(--space-3); border-radius:var(--radius-md); font-size:var(--text-label); }
/* ============================================================================
REDESIGN MOBILE — LOTE 10: Fiscal
========================================================================== */
.fiscal-property-selector { padding:var(--space-4); border-radius:var(--radius-lg); }
.fiscal-property-selector > button { min-height:var(--touch); border-radius:var(--radius-sm); font-size:var(--text-meta); }
.fiscal-status-banner { border-radius:var(--radius-lg); padding:var(--space-4); }
.fiscal-processing-card { padding:var(--space-4); border-radius:var(--radius-lg); }
.fiscal-processing-card h3 { font-size:var(--text-body); }
.fiscal-cancellable-list > div { min-height:var(--touch); gap:var(--space-3); }
.fiscal-cancellable-list button { min-height:var(--touch); }
.fiscal-return { border-radius:var(--radius-md); padding:var(--space-3); font-size:var(--text-label); }
/* ============================================================================
REDESIGN MOBILE — LOTE 11: estados vazios, avisos e ergonomia final
========================================================================== */
/* Estado vazio: ícone, o que aconteceu e o que fazer a seguir. */
.empty { padding:var(--space-6) var(--space-4); border-radius:var(--radius-lg); }
.empty .empty-icon { font-size:2rem; margin-bottom:var(--space-3); opacity:.7; }
.empty h2 { font-size:var(--text-section); }
.empty p { max-width:34ch; margin:var(--space-2) auto var(--space-4); font-size:var(--text-label); }
.empty .action-primary { min-height:var(--touch); }
/* Aviso: ícone + texto dizem o mesmo que a cor, para quem não distingue tons. */
.notice { align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); font-size:var(--text-label); line-height:1.45; }
/* Os últimos alvos pequenos: a caixa de status tinha 13px e o botão de texto 36.
A caixa cresce junto com a linha, então a linha inteira vira o alvo. */
.operation-status-checks .check-field { min-height:var(--touch); padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-meta); gap:var(--space-2); }
.operation-status-checks .check-field input { width:18px; height:18px; }
.fiscal-property-selector select { min-height:var(--touch); }
/* Foco visível em tudo que recebe teclado, inclusive o que não é