/* ==========================================================================
   SGIA — painel web (ETAPA_14). Sem framework, sem fonte externa; sem estilo
   inline (CSP style-src 'self'): tudo por classe. Responsivo até 360 px sem
   rolagem horizontal da página (T-14-172).
   Linguagem visual do Portal de Cotações SISTEMMA: menu lateral verde-escuro,
   cabeçalho branco, cartões de 12 px, botões primário/secundário/perigo e
   selos em pílula. Os nomes de classe são os que os JS do painel usam.
   Acabamento: grade de espaçamento (--esp-*), campos e botões da mesma altura
   (--alt-controle), escala tipográfica (--fs-*) e contraste AA.
   ========================================================================== */
:root {
    /* tema SISTEMMA (mesmos valores do Portal de Cotações) */
    --primary-dark: #1e5631;
    --primary: #2a7d43;
    --primary-light: #38a95c;
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-2: #f8fafc;      /* cabeçalho de tabela, grupos, campos somente leitura */
    --border: #e2e8f0;
    --border-input: #c3ccd8;
    --text: #1f2937;
    --text-2: #374151;         /* rótulos: 10,3:1 no branco */
    --text-muted: #556070;     /* auxiliar: 6,3:1 no branco, 5,8:1 no --bg (AA) */
    --ok: #15803d;      --ok-bg: #dcfce7;
    --warn: #8a5300;    --warn-bg: #fef3c7;
    --danger: #b91c1c;  --danger-bg: #fee2e2;
    --info: #1d4ed8;    --info-bg: #dbeafe;
    --neutral: #4b5563; --neutral-bg: #e5e7eb;
    --sidebar-w: 248px;
    --topo-h: 56px;
    --raio: 12px;
    --raio-controle: 8px;

    /* espaçamento (grade de 4 px) */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 24px;
    /* altura única de campo e botão; o celular sobe para 44 px (alvo de toque) */
    --alt-controle: 40px;
    --alt-mini: 32px;
    /* escala tipográfica */
    --fs-titulo: 1.5rem;    /* 24 px: título da página */
    --fs-sub: 1.125rem;     /* 18 px: seção (h2) */
    --fs-cartao: 1rem;      /* 16 px: título de cartão (h3) */
    --fs-corpo: .9375rem;   /* 15 px: corpo, campos, tabelas */
    --fs-aux: .8125rem;     /* 13 px: rótulos, ajuda, notas */
    --fs-mini: .75rem;      /* 12 px: cabeçalho de tabela, selos */
    --lh: 1.55;

    /* nomes antigos do painel, mantidos como apelidos */
    --verde: var(--primary); --verde-claro: #eef7f0; --cinza: var(--text-muted);
    --borda: var(--border); --fundo: var(--bg); --texto: var(--text);
    --aviso: var(--warn); --aviso-fundo: var(--warn-bg);
    --erro: var(--danger); --erro-fundo: var(--danger-bg);
    --ok-fundo: var(--ok-bg); --alerta: #dc2626;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font: var(--fs-corpo)/var(--lh) "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    color: var(--text); background: var(--bg); overflow-x: hidden;
}
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }
h1 { font-size: var(--fs-titulo); font-weight: 650; line-height: 1.25; margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--fs-sub); font-weight: 650; line-height: 1.3; margin: var(--esp-5) 0 var(--esp-3); }
h3 { font-size: var(--fs-cartao); font-weight: 650; line-height: 1.35; margin: 0 0 var(--esp-3); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- botões (Portal: .btn, .btn-sec, .btn-danger, .btn-sm) ---------- */
button, input, select, textarea { font: inherit; }
button {
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    min-height: var(--alt-controle); border-radius: var(--raio-controle); padding: 0 var(--esp-4);
    font-size: var(--fs-corpo); font-weight: 600; line-height: 1.2; white-space: nowrap;
    border: 1px solid var(--border-input); background: var(--surface); color: var(--text);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
button:hover { background: var(--surface-2); border-color: #94a3b8; }
button:disabled, button[aria-busy="true"] { opacity: .55; cursor: not-allowed; }
button.primario { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primario:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
button.secundario { background: #fff; color: var(--primary-dark); border-color: var(--primary); }
button.secundario:hover:not(:disabled) { background: #eef7f0; }
button.perigo { background: #fff; color: var(--danger); border-color: var(--danger); }
button.perigo:hover:not(:disabled) { background: var(--danger-bg); }
button.mini { min-height: var(--alt-mini); padding: 0 var(--esp-3); font-size: var(--fs-aux); }

/* ---------- campos (Portal: .fz-input / .form-control) ---------- */
input, select, textarea {
    width: 100%; padding: 0 var(--esp-3); font-size: var(--fs-corpo); color: var(--text);
    border: 1px solid var(--border-input); border-radius: var(--raio-controle); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input, select { height: var(--alt-controle); min-height: var(--alt-controle); line-height: 1.2; }
textarea { resize: vertical; min-height: 84px; padding: var(--esp-2) var(--esp-3); line-height: var(--lh); }
input::placeholder, textarea::placeholder { color: #6b7685; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42, 125, 67, .18);
}
input[readonly] { background: var(--surface-2); }
select:disabled, input:disabled { background: var(--surface-2); color: var(--text-muted); }
input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--primary);
}
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="file"] { height: auto; padding: 6px; }

/* ---------- layout: menu lateral + cabeçalho (Portal: .app/.sidebar/.topbar) ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--primary-dark); color: #fff;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: var(--esp-4) 0;
}
.sidebar .marca {
    display: flex; flex-direction: column; gap: 2px; padding: 0 20px var(--esp-4); color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.marca-nome { font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.marca-sub { font-size: 11px; opacity: .8; letter-spacing: 1.6px; }
.menu { padding: var(--esp-2) var(--esp-2) var(--esp-4); flex: 1; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu a {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 36px;
    padding: 6px 14px; border-radius: var(--raio-controle); text-decoration: none; color: rgba(255, 255, 255, .9);
    font-size: var(--fs-corpo); line-height: 1.3;
}
.menu a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.menu a.ativo { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
.menu a:focus-visible { outline-color: #fff; }
/* Grupos do menu bem separados e recolhíveis (como o TOTVS): divisória, título em destaque
   (verde claro, seta ▸/▾), itens recuados; fechado, mostra a soma dos contadores */
button.menu-grupo {
    display: flex; align-items: center; gap: 8px; width: calc(100% - 12px); min-height: 34px;
    margin: var(--esp-3) 6px var(--esp-1); padding: var(--esp-3) 8px 0 4px;
    border: 0; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0; background: transparent;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
    color: #9fe0b0; justify-content: flex-start; white-space: nowrap; cursor: pointer;
}
button.menu-grupo:hover { background: transparent; color: #c6f0d1; border-color: rgba(255, 255, 255, .12); }
button.menu-grupo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.menu > button.menu-grupo:first-child { border-top: 0; padding-top: 0; margin-top: var(--esp-2); }
.menu-grupo-titulo { flex: 1; text-align: left; }
.menu-grupo-seta { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; transition: transform .15s; flex: 0 0 auto; }
button.menu-grupo[aria-expanded="true"] .menu-grupo-seta { transform: rotate(90deg); }
.menu-grupo + ul { margin-left: 10px; padding-left: 6px !important; border-left: 1px solid rgba(255, 255, 255, .10); }
.menu ul[hidden] { display: none; }
.contador-grupo { margin-left: auto; }

.contador {
    background: #dc2626; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; font-weight: 700;
    min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums;
}

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo {
    background: var(--surface); border-bottom: 1px solid var(--border); min-height: var(--topo-h);
    padding: var(--esp-2) var(--esp-5); display: flex; align-items: center; gap: var(--esp-3); position: sticky; top: 0; z-index: 30;
}
.topo-titulo { margin: 0; flex: 1; min-width: 0; font-size: var(--fs-corpo); font-weight: 600; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-marca { color: var(--primary-dark); font-weight: 700; }
.topo-usuario { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.usuario-nome { font-size: var(--fs-aux); color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 40vw; }
.menu-alternar { display: none; width: var(--alt-controle); padding: 0; font-size: 18px; line-height: 1; border-color: var(--border); }
.conteudo { flex: 1; min-width: 0; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--esp-5) var(--esp-5) 48px; }
.conteudo:focus, .conteudo:focus-visible { outline: none; }

/* ---------- blocos ---------- */
.titulo-tela {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); min-height: var(--alt-controle);
}
.titulo-tela .sub { flex-basis: 100%; margin: 0; }
.titulo-tela > .acoes { margin-top: 0; }
.titulo-tela > .filtros { margin: 0; width: min(100%, 300px); }
.titulo-tela > .filtros > .campo { flex: 1 1 100%; }
.sub { color: var(--text-muted); margin: var(--esp-1) 0 0; font-size: var(--fs-aux); line-height: 1.5; }
.cartao {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 20px; min-width: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.conteudo > .cartao + .cartao, .conteudo > .cartao + .tabela-rolagem, .conteudo > .tabela-rolagem + .cartao { margin-top: var(--esp-4); }

/* início: cartões da mesma altura, números grandes alinhados */
.grade-cartoes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    grid-auto-rows: 1fr; gap: var(--esp-4);
}
.cartao-numero { display: flex; flex-direction: column; padding: 0; transition: border-color .15s, box-shadow .15s; }
.cartao-numero > a { display: flex; flex-direction: column; flex: 1; border-radius: inherit; color: var(--text); text-decoration: none; }
.cartao-numero > a, .cartao-numero:not(:has(> a)) { padding: 20px; gap: var(--esp-1); }
.cartao-numero:has(a):hover { border-color: var(--primary-light); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.cartao-numero .numero {
    font-size: 2.25rem; font-weight: 700; color: var(--primary-dark); line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cartao-numero .rotulo { font-size: var(--fs-corpo); color: var(--text-2); font-weight: 500; line-height: 1.4; }
.cartao-numero .nota { font-size: var(--fs-aux); color: var(--text-muted); margin-top: auto; }
.cartao-destaque { border-color: #f2c94c; border-left: 4px solid var(--warn); background: #fffcf0; }
.cartao-destaque .numero { color: var(--warn); }

/* detalhe: os dois cartões do topo com a mesma altura */
.detalhe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-4); align-items: stretch; }
.grade-lado { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: var(--esp-4); }
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.cartao-foto-area { min-width: 0; }
.cartao-valores { min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); }

/* pares rótulo/valor: 2 colunas alinhadas */
.dados {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--esp-4);
    margin: 0; align-items: stretch;
}
.dados dt, .dados dd { padding: var(--esp-2) 0; border-bottom: 1px solid var(--border); min-height: 38px; }
.dados dt { color: var(--text-muted); font-size: var(--fs-aux); font-weight: 600; line-height: 1.4; padding-top: 10px; }
.dados dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.dados dt:last-of-type, .dados dd:last-of-type { border-bottom: none; }
.cartao-valores .dados { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--esp-3); }
.valor-alerta { color: var(--danger); font-weight: 700; }
.valor-destaque { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- fotos (zoom e giro por classe): moldura de proporção fixa, igual em todos os cartões ---------- */
.visor { display: flex; flex-direction: column; gap: var(--esp-2); }
.moldura {
    overflow: hidden; border-radius: var(--raio-controle); background: #e9edf1; aspect-ratio: 4 / 3; width: 100%;
    display: flex; align-items: center; justify-content: center; border: 1px solid var(--border);
}
.moldura.ampliada { aspect-ratio: auto; overflow: auto; }
.foto { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; transition: transform .2s; display: block; }
.moldura.ampliada .foto { width: auto; height: auto; max-width: 100%; max-height: 80vh; cursor: zoom-out; }
.foto.giro-90 { transform: rotate(90deg) scale(.75); }
.foto.giro-180 { transform: rotate(180deg); }
.foto.giro-270 { transform: rotate(270deg) scale(.75); }
.moldura.ampliada .foto.giro-90, .moldura.ampliada .foto.giro-270 { transform-origin: center; margin: 12% 0; }
.visor-acoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-2); }
.visor-acoes > button { width: 100%; }
.foto-ausente, .foto-falha {
    aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2);
    padding: var(--esp-4); text-align: center; color: var(--text-muted); background: #eef1f4; border-radius: var(--raio-controle);
    border: 1px dashed var(--border-input); margin: 0; font-size: var(--fs-aux);
}

/* ---------- mensagens (Portal: .status-message) e selos (Portal: .badge) ---------- */
.aviso { padding: var(--esp-3) 14px; border-radius: var(--raio-controle); border-left: 4px solid; margin: var(--esp-2) 0; font-size: var(--fs-corpo); }
.aviso-erro { background: #fdeaea; color: #842029; border-color: #dc3545; }
.aviso-aviso { background: #fff4d6; color: #5c4400; border-color: #d39e00; }
.aviso-info { background: var(--info-bg); color: #1e3a8a; border-color: var(--info); }
.aviso-ok { background: #d1e7dd; color: #0f5132; border-color: var(--primary); }
.destaque-rastreador { border-left: 4px solid #dc3545; background: #fdeaea; color: #842029; padding: var(--esp-3) 14px; border-radius: var(--raio-controle); }
.destaque-rastreador .justificativa { margin: var(--esp-1) 0 0; font-weight: 600; }
.selo {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-mini); font-weight: 600;
    line-height: 1.5; white-space: nowrap; margin: 0 var(--esp-1) 3px 0; background: var(--info-bg); color: var(--info);
}
.selo-info { background: var(--info-bg); color: var(--info); }
.selo-ok { background: var(--ok-bg); color: var(--ok); }
.selo-aviso { background: var(--warn-bg); color: var(--warn); }
.selo-alerta, .selo-erro { background: var(--danger-bg); color: var(--danger); }
.selo-neutro { background: var(--neutral-bg); color: var(--neutral); }
.motivo { margin: var(--esp-1) 0 0; font-size: var(--fs-aux); color: var(--text-muted); overflow-wrap: anywhere; line-height: 1.45; }
.vazio, .carregando { color: var(--text-muted); }
.carregando { padding: var(--esp-5); text-align: center; }
.erro-form:not(:empty), .acoes-aviso:not(:empty) { margin-top: var(--esp-2); }

/* ---------- tabelas (Portal: .tbl dentro de .tbl-scroll) ---------- */
.tabela-rolagem {
    width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cartao .tabela-rolagem { border-radius: var(--raio-controle); box-shadow: none; }
.tabela { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--fs-corpo); line-height: 1.45; }
.tabela th, .tabela td { text-align: left; padding: var(--esp-3) 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela th {
    color: var(--text-2); font-weight: 650; font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: .5px;
    background: var(--surface-2); border-bottom: 1px solid #d5dce5; white-space: nowrap; padding-top: 10px; padding-bottom: 10px;
}
.tabela tbody tr:nth-child(even) td { background: #fafbfc; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: #f0f6f2; }
.tabela th.num, .tabela td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela td.destaque { font-weight: 650; font-variant-numeric: tabular-nums; }
.tabela td .selo:last-child { margin-bottom: 0; }
.tabela-rolagem > .tabela { border: none; }
.paginacao {
    display: flex; align-items: center; justify-content: center; gap: var(--esp-3); margin-top: var(--esp-4); flex-wrap: wrap;
    color: var(--text-muted); font-size: var(--fs-aux); font-variant-numeric: tabular-nums;
}
.paginacao > button { min-width: 110px; }

/* ---------- formulários ----------
   Grade de colunas iguais: todo campo da linha com a mesma largura e altura,
   rótulo sempre acima. Nas barras de filtro o grupo de botões ocupa a(s)
   última(s) coluna(s) e fica alinhado na base dos campos. */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: end; margin-bottom: var(--esp-4); }
.grade-form {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: var(--esp-4); margin: var(--esp-2) 0; align-items: start;
}
.filtros.grade-form {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--raio); padding: 20px;
    margin: 0 0 var(--esp-4); align-items: end; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > span { font-size: var(--fs-aux); font-weight: 600; color: var(--text-2); line-height: 1.3; }
.campo small { color: var(--text-muted); font-size: var(--fs-mini); line-height: 1.4; }
.campo:has(> textarea) { grid-column: 1 / -1; }
fieldset.status {
    border: 1px solid var(--border); border-radius: var(--raio-controle); grid-column: 1 / -1; display: flex; flex-wrap: wrap;
    align-items: center; gap: var(--esp-1) var(--esp-5); padding: var(--esp-1) var(--esp-4) var(--esp-2); margin: 0;
    background: var(--surface-2); min-width: 0;
}
fieldset.status legend { font-size: var(--fs-aux); font-weight: 600; color: var(--text-2); padding: 0 var(--esp-1); }
.caixa { display: inline-flex; gap: var(--esp-2); align-items: center; font-size: var(--fs-corpo); min-height: 32px; cursor: pointer; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; margin-top: var(--esp-4); }
.filtros > .acoes, .grade-form > .acoes { margin-top: 0; align-self: end; }
/* barra de filtros: botões na(s) última(s) coluna(s); um grupo de caixas divide a linha com eles */
.filtros.grade-form > .acoes { grid-column: -2 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.filtros.grade-form > .acoes > button { width: 100%; }
.filtros.grade-form > .acoes:has(> :nth-child(2)) { grid-column: -3 / -1; }
.filtros.grade-form > fieldset.status:has(+ .acoes) { grid-column: 1 / -2; }
.filtros.grade-form > fieldset.status + .acoes:has(> :nth-child(2)) { grid-column: -2 / -1; grid-auto-flow: row; }
.correcao { margin-top: var(--esp-4); }
.correcao summary { cursor: pointer; font-weight: 600; color: var(--primary-dark); min-height: 24px; }
.correcao[open] summary { margin-bottom: var(--esp-3); }
.form-estreito { max-width: 460px; display: flex; flex-direction: column; gap: var(--esp-3); }
.abas { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.abas a, .aba {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--esp-4); border: 1px solid var(--border);
    border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text); font-size: var(--fs-aux); font-weight: 500;
}
.abas a:hover, .aba:hover { border-color: var(--primary-light); }
.abas a.ativo, .aba.ativo { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ações dentro de cartão (decisão, correção, bomba): botões do mesmo tamanho, agrupados */
.cartao > .acoes, .detalhe .acoes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); justify-content: stretch;
}
/* texto longo (ex.: "Reprovar tanque GASOLINA") quebra DENTRO do botão, nunca vaza do cartão */
.cartao > .acoes > button, .detalhe .acoes > button {
    width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: center;
    padding-top: 6px; padding-bottom: 6px; line-height: 1.25;
}
.detalhe .correcao .grade-form { margin: 0; }

/* ---------- diálogo (Portal: .modal) ---------- */
.dialogo {
    border: none; border-radius: var(--raio); padding: 0; width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem); overflow: auto; color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.dialogo::backdrop { background: rgba(15, 23, 42, .5); }
.dialogo-form { padding: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-2); }
.dialogo-form h2, .dialogo-form h3 { margin: 0 0 var(--esp-1); font-size: var(--fs-sub); }
.dialogo-form p { margin: 0; }
.dialogo-form > label:not(.caixa) { font-size: var(--fs-aux); font-weight: 600; color: var(--text-2); margin-top: var(--esp-2); }
.dialogo-form fieldset.status { margin: var(--esp-1) 0; }
.dialogo-form .acoes button { min-width: 120px; }

/* ---------- login (Portal: auth/login.html + login.css) ---------- */
.pagina-login {
    display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4ebe6 100%); color: #2c3e50;
}
.login-container {
    width: 100%; max-width: 450px; overflow: hidden; background: #fff; border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .10);
}
.login-header {
    padding: 30px 20px; text-align: center; color: #fff;
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
}
.login-header .brand { display: inline-block; padding: 15px 20px; margin-bottom: 15px; background: #fff; border-radius: 10px; }
.brand-name { color: var(--primary); font-size: 28px; font-weight: 700; line-height: 1; }
.brand-subtitle { margin-top: 5px; color: #2c3e50; font-size: 14px; font-weight: 600; }
.login-header p { margin: 5px 0 0; font-size: 16px; }
.login-body { padding: 32px; }
.login-title { margin: 0 0 var(--esp-3); text-align: center; font-size: var(--fs-titulo); font-weight: 650; }
.login-description { margin: 0 auto var(--esp-5); color: #556366; font-size: var(--fs-corpo); line-height: 1.6; text-align: center; }
.login-body .aviso { margin: 0 0 20px; }
.form-group { margin-bottom: 18px; text-align: left; }
.form-label { display: block; margin-bottom: var(--esp-2); font-weight: 600; font-size: 14px; color: #2c3e50; }
.form-control {
    height: 48px; min-height: 48px; padding: 0 var(--esp-4); border: 1px solid #c9d3cd; border-radius: 10px;
    font-size: 16px; color: #2c3e50;
}
.form-control:focus { border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(56, 169, 92, .2); }
.btn-login {
    display: flex; width: 100%; min-height: 52px; padding: 0 20px; border: none; border-radius: 10px; color: #fff;
    background: linear-gradient(90deg, var(--primary) 0%, #2f9150 100%); font-size: 16px; font-weight: 600;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-login:hover:not(:disabled) {
    transform: translateY(-2px); color: #fff; background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
    box-shadow: 0 5px 15px rgba(42, 125, 67, .3);
}
.btn-login:focus-visible { outline: 3px solid rgba(56, 169, 92, .35); outline-offset: 3px; }
.btn-login:disabled { opacity: .7; cursor: not-allowed; }
.login-rodape { margin-top: 30px; color: #5f6b6e; font-size: var(--fs-aux); line-height: 1.6; text-align: center; }

/* ---------- celular e tablet ---------- */
@media (max-width: 1100px) {
    .lado-a-lado { grid-template-columns: minmax(0, 1fr); }
    .cartao-valores .dados { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (max-width: 900px) {
    .detalhe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    /* o menu lateral vira gaveta recolhível abaixo do cabeçalho (app.js alterna .aberto no #menu) */
    .menu-alternar { display: inline-flex; }
    .sidebar {
        position: fixed; left: 0; top: var(--topo-h); z-index: 80; height: calc(100vh - var(--topo-h));
        width: min(var(--sidebar-w), 85vw); transform: translateX(-105%); transition: transform .2s ease; visibility: hidden;
    }
    .sidebar:has(.menu.aberto) { transform: translateX(0); visibility: visible; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .45); }
    .menu a { min-height: 44px; }
    .topo { padding: var(--esp-2) 14px; height: var(--topo-h); }
    .conteudo { padding: var(--esp-4) var(--esp-4) 48px; }
}
@media (max-width: 760px) {
    /* alvo de toque de 44 px; campos e botões em 100% da largura */
    :root { --alt-controle: 44px; --alt-mini: 44px; --fs-titulo: 1.3125rem; --fs-sub: 1.0625rem; }
    input, select, textarea { font-size: 16px; }   /* sem zoom automático no iOS */
    .usuario-nome { display: none; }
    .topo-titulo { font-size: var(--fs-aux); }
    .cartao, .filtros.grade-form { padding: var(--esp-4); }
    .grade-form { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); }
    .filtros.grade-form > .acoes, .filtros.grade-form > .acoes:has(> :nth-child(2)),
    .filtros.grade-form > fieldset.status, .filtros.grade-form > fieldset.status:has(+ .acoes),
    .filtros.grade-form > fieldset.status + .acoes:has(> :nth-child(2)) { grid-column: 1 / -1; }
    .titulo-tela > .filtros { width: 100%; }
    .caixa, .abas a, .aba { min-height: 44px; }
    fieldset.status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--esp-3); }
    .dialogo-form fieldset.status { grid-template-columns: minmax(0, 1fr); }
    .grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
    .cartao-numero > a, .cartao-numero:not(:has(> a)) { padding: var(--esp-4); }
    .cartao-numero .numero { font-size: 2rem; }
    .cartao-numero .rotulo { font-size: var(--fs-aux); }

    .tabela-rolagem { border: none; background: transparent; border-radius: 0; overflow-x: visible; box-shadow: none; }
    .tabela thead { display: none; }
    .tabela, .tabela tbody { display: block; width: 100%; }
    .tabela { background: transparent; }
    /* cada linha vira um cartão com os pares em 2 colunas iguais */
    .tabela tr {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-3) var(--esp-4);
        border: 1px solid var(--border); border-radius: 10px; margin-bottom: var(--esp-3); background: var(--surface);
        padding: 14px var(--esp-4);
    }
    .tabela tbody tr:nth-child(even) td, .tabela tbody tr:hover td { background: transparent; }
    .tabela td { display: block; border: none; padding: 0; overflow-wrap: anywhere; min-width: 0; }
    .tabela td::before {
        content: attr(data-rotulo); display: block; color: var(--text-muted); font-size: var(--fs-mini); font-weight: 600;
        text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px;
    }
    .tabela td.num { text-align: left; }
    .tabela td[data-rotulo="Divergências"], .tabela td[data-rotulo="Ações"], .tabela td[data-rotulo="Motivo"],
    .tabela td[data-rotulo="Mensagem"], .tabela td[data-rotulo="Descrição"], .tabela td[data-rotulo="Dados"] { grid-column: 1 / -1; }
    .tabela td[data-rotulo="Ações"] .acoes-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acoes-linha button { width: 100%; }

    .dados, .cartao-valores .dados { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--esp-3); }
    .acoes, .cartao > .acoes, .detalhe .acoes { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .acoes:has(> button + button) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acoes > button { width: 100%; white-space: normal; }
    .paginacao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .paginacao > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
    .paginacao > button { min-width: 0; width: 100%; }
    .login-body { padding: var(--esp-5) 20px; }
}
@media (max-width: 380px) {
    .grade-cartoes { grid-template-columns: minmax(0, 1fr); }
}

/* marco M2: bomba, alertas e relatório C */
.oculto { display: none; }

/* marco M3: cadastros */
.acoes-linha { justify-content: flex-start; margin-top: 0; gap: 6px; }
.acoes-linha button { min-height: var(--alt-mini); padding: 0 10px; font-size: var(--fs-aux); flex: 0 0 auto; }
pre.json {
    background: #f1f5f9; border: 1px solid var(--border); border-radius: var(--raio-controle); padding: 10px; overflow: auto;
    max-height: 360px; font-size: var(--fs-mini); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
}
.segredo-uma-vez { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; }