/* =========================================================================
   HD Ferragens — Importações
   Sistema de design copiado do Painel de Vendas HD (padrão sistêmico)
   ========================================================================= */

:root {
  /* Cores de marca (Manual da Marca HD Ferragens) */
  --hd-blue: #10318F;
  --hd-blue-dark: #0B2468;
  --hd-blue-2: #1D44B8;
  --hd-blue-soft: rgba(16, 49, 143, 0.10);
  --hd-black: #222222;
  --hd-white: #ffffff;
  --accent: #E57818;
  --accent-dark: #C4630C;
  --accent-soft: rgba(229, 120, 24, 0.12);

  /* Neutros */
  --bg: #f2f2f2;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e6e8eb;
  --border-strong: #d4d7dc;
  --text: #222222;
  --text-muted: #6b7280;
  --text-faint: #9aa0a8;

  /* Status */
  --green: #1f9d55;
  --green-soft: rgba(31, 157, 85, 0.12);
  --amber: #d98a00;
  --amber-soft: rgba(217, 138, 0, 0.12);
  --red: #d23b3b;
  --red-soft: rgba(210, 59, 59, 0.12);
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.12);

  /* Aliases usados pelo app (mantêm o código existente funcionando) */
  --fundo: var(--bg);
  --superficie: var(--surface);
  --borda: var(--border);
  --texto: var(--text);
  --texto-suave: var(--text-muted);
  --primaria: var(--hd-blue);
  --primaria-escura: var(--hd-blue-dark);
  --verde: var(--green);
  --verde-fundo: var(--green-soft);
  --ambar: var(--amber);
  --ambar-fundo: var(--amber-soft);
  --azul-fundo: var(--blue-soft);
  --vermelho: var(--red);
  --vermelho-fundo: var(--red-soft);
  --sombra: 0 1px 3px rgba(16, 17, 20, 0.06), 0 1px 2px rgba(16, 17, 20, 0.04);
  --sombra-lg: 0 8px 30px rgba(16, 17, 20, 0.12);

  --radius: 12px;
  --radius-sm: 8px;
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* TEMA ESCURO — só troca as variáveis (padrão do Painel de Vendas HD) */
:root[data-theme="dark"] {
  --bg: #0e1420;
  --surface: #161d2b;
  --surface-2: #1e2736;
  --border: #2a3446;
  --border-strong: #3b4658;
  --text: #e7eaef;
  --text-muted: #a6b0bd;
  --text-faint: #808b9a;
  --hd-blue-soft: rgba(60, 110, 224, 0.22);
  --accent-soft: rgba(229, 120, 24, 0.20);
  --green-soft: rgba(31, 157, 85, 0.20);
  --amber-soft: rgba(217, 138, 0, 0.22);
  --red-soft: rgba(210, 59, 59, 0.20);
  --blue-soft: rgba(37, 99, 235, 0.24);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-lg: 0 10px 34px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
input, select { font-size: 14px; }   /* mesmo tamanho do Painel de Vendas HD */
.oculto { display: none !important; }

/* =========================================================================
   LOGO (cartão branco segura a logo colorida sobre fundos azuis)
   ========================================================================= */
.logo-card { background: #fff; border-radius: 12px; padding: 9px 14px; display: inline-flex; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.logo-card img { display: block; height: 34px; width: auto; }
.logo-card-lg { padding: 22px 34px; border-radius: 16px; }
.logo-card-lg img { height: 74px; }

/* =========================================================================
   LOGIN — tela dividida, padrão do Painel de Vendas HD
   ========================================================================= */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-brand {
  background: linear-gradient(160deg, var(--hd-blue) 0%, var(--hd-blue-dark) 100%);
  color: var(--hd-white); padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  text-align: center; position: relative; overflow: hidden;
}
.login-brand::after {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px;
  border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 70%);
}
.brand-logo-top { width: 100%; display: flex; justify-content: center; }
.brand-title { font-size: 38px; font-weight: 800; line-height: 1.12; letter-spacing: -0.5px; max-width: 460px; }
.brand-slogan { font-size: 21px; font-weight: 600; font-style: italic; line-height: 1.4; color: rgba(255,255,255,0.92); max-width: 480px; }
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--bg); }
.login-card { width: 100%; max-width: 380px; }
.login-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 20px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
.field input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.field input:focus { outline: none; border-color: var(--hd-blue); box-shadow: 0 0 0 3px var(--hd-blue-soft); }
.login-error {
  background: var(--red-soft); color: var(--red); border: 1px solid rgba(210,59,59,.3);
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px;
}
.login-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin: -6px 0 16px; cursor: pointer; }
.login-check input { width: auto; transform: scale(1.15); }
.link-esqueci {
  display: block; width: 100%; margin: 14px 0 0;
  background: none; border: none; cursor: pointer;
  color: var(--hd-blue); font-size: 13px; font-weight: 600; text-align: center;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-esqueci:hover { color: var(--accent); }
:root[data-theme="dark"] .link-esqueci { color: #7ea2ff; }
.login-aviso {
  margin-top: 12px; padding: 11px 13px;
  background: var(--accent-soft); border: 1px solid rgba(229,120,24,.35);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text); text-align: center; line-height: 1.45;
}
.login-aviso .btn { margin-top: 10px; text-decoration: none; }

/* ---- Recuperação de senha (login) — medidas do Painel de Vendas HD ---- */
.recuperar-box { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.recuperar-box .rec-intro { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.recuperar-box .field { margin-bottom: 12px; }
.btn-primary { background: var(--hd-blue); color: #fff; padding: 12px 18px; }
.btn-primary:hover { background: var(--hd-blue-dark); }
@media (max-width: 820px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-brand { padding: 30px 24px 26px; gap: 14px; justify-content: center; min-height: 0; }
  .brand-title { font-size: 23px; }
  .brand-slogan { font-size: 14.5px; }
  .logo-card-lg { padding: 14px 22px; }
  .logo-card-lg img { height: 50px; }
  .login-form-side { padding: 30px 24px 40px; align-items: flex-start; }
}

/* =========================================================================
   BOTÕES (padrão do Painel de Vendas)
   ========================================================================= */
.btn, .btn-primario, .btn-suave, .btn-perigo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-sm); font-weight: 600;
  transition: background .15s, transform .05s, border-color .15s;
}
.btn:active, .btn-primario:active, .btn-suave:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-primario { background: var(--hd-blue); color: #fff; padding: 10px 16px; font-size: 13px; }
.btn-primario:hover { background: var(--hd-blue-dark); }
.btn-accent { background: var(--accent); color: #fff; padding: 12px 18px; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-suave { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); padding: 6px 11px; font-size: 12px; }
.btn-suave:hover { background: var(--hd-blue-soft); border-color: var(--hd-blue); }
.btn-perigo { background: transparent; color: var(--red); font-size: 13px; padding: 7px 9px; }
.btn-exportar { display: inline-flex; align-items: center; padding: 10px 14px; font-size: 13px; text-decoration: none; }

/* =========================================================================
   LAYOUT / MENU LATERAL — mesmo estilo do Painel de Vendas HD
   ========================================================================= */
#app { display: flex; min-height: 100vh; }
.menu {
  width: 248px; background: linear-gradient(180deg, var(--hd-blue) 0%, var(--hd-blue-dark) 100%);
  color: rgba(255,255,255,0.75);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; flex-shrink: 0;
}
.menu .brand {
  padding: 20px 18px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.menu .brand .logo-card { padding: 9px 14px; }
.menu .brand .logo-card img { height: 34px; }
.menu .brand small { display: block; color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.menu nav { padding: 14px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-weight: 500; margin-bottom: 2px; /* fonte herdada: 14px, igual ao .nav-item do CRM */
  transition: background .12s, color .12s;
}
.menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.menu a.ativo { background: var(--accent); color: #fff; }
.menu .ico { width: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.menu .ico svg { display: block; }
.menu .user {
  padding: 14px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 10px;
}
.menu .user .user-topo { display: flex; align-items: center; gap: 10px; }
.menu .user .user-acesso { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.menu .user .btn-sair-todos {
  width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600;
  transition: background .12s, border-color .12s;
}
.menu .user .btn-sair-todos:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); color: #fff; }
/* autenticador: mesmo botão do menu, com um verde discreto quando está ligado */
.menu .user .btn-2fa-menu.ativo { border-color: rgba(120, 235, 170, 0.55); color: rgba(190, 255, 220, 0.95); }
.menu .user .btn-2fa-menu.ativo:hover { background: rgba(120, 235, 170, 0.16); border-color: rgba(120, 235, 170, 0.8); }
.menu .user .btn-2fa-menu.oculto { display: none; }
.menu .user .avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; padding: 0; border: 0;
  background: var(--accent); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
  transition: box-shadow .12s, filter .12s;
}
.menu .user .avatar:hover { filter: brightness(1.1); box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.menu .user .meta { overflow: hidden; }
.menu .user .meta strong { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .user .meta span { font-size: 11.5px; color: rgba(255,255,255,0.5); }
.menu .user .logout { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,0.6); padding: 6px 9px; border-radius: 6px; font-size: 16px; }
.menu .user .logout:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Coluna de conteúdo com a barra superior (topbar do Painel de Vendas) */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 14px 28px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.topbar .spacer { flex: 1; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: background .12s, border-color .12s;
}
.icon-btn:hover { background: var(--hd-blue-soft); border-color: var(--hd-blue); }
.so-celular { display: none; }

main { flex: 1; padding: 26px 30px; max-width: 1400px; min-width: 0; width: 100%; }
h2 { font-size: 21px; margin-bottom: 18px; font-weight: 700; letter-spacing: -0.3px; }
h3 { font-size: 15px; margin-bottom: 12px; font-weight: 700; }

/* ===== 📺 Modo TV: painel em tela cheia para o telão (padrão Painel de Vendas) ===== */
body.modo-tv .menu, body.modo-tv .topbar { display: none; }
body.modo-tv main { max-width: none; padding: 26px 32px 60px; zoom: 1.12; }
.tv-bar {
  position: fixed; right: 14px; bottom: 14px; z-index: 400;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 6px 8px 6px 16px; font-size: 13px;
  box-shadow: 0 10px 30px rgba(16, 49, 143, .2);
}
.tv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: tvPulse 2s infinite; }
@keyframes tvPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (max-width: 820px) { #btn-tv { display: none; } }

/* =========================================================================
   CARDS DO PAINEL
   ========================================================================= */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--sombra); min-width: 0; overflow: hidden; border-top: 3px solid var(--hd-blue); }
.card .rotulo { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; font-weight: 600; }
.card .valor { font-size: 21px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.card .sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* quadro que fica sozinho na última fileira ocupa as duas colunas */
.duas-colunas .painel-largo { grid-column: 1 / -1; }
@media (max-width: 1000px) { .duas-colunas { grid-template-columns: 1fr; } }
.painel { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--sombra); }
.painel-alerta { border-left: 4px solid var(--red); margin-bottom: 20px; }

/* =========================================================================
   TABELAS
   ========================================================================= */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 2px solid var(--border); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; container-type: inline-size; }

/* Colunas se adaptam ao ESPAÇO disponível da própria tabela */
/* o conjunto completo de colunas + botões precisa de ~1270px — abaixo disso,
   as colunas secundárias cedem ANTES de qualquer botão ser cortado */
@container (max-width: 1290px) { .prio-baixa { display: none; } }
/* o conjunto médio (sem prio-baixa) precisa de ~1015px */
@container (max-width: 1040px) { .prio-media { display: none; } }
/* painéis estreitos do dashboard (metade da largura) */
@container (max-width: 470px) { .prio-painel { display: none; } }
@container (max-width: 800px) {
  .prio-alta { display: none; }
  td, th { padding-left: 6px; padding-right: 6px; }
}
/* degrau intermediário: conjunto mínimo de colunas ainda apertado (tablets) */
@container (max-width: 740px) {
  td { font-size: 12px; padding-left: 5px; padding-right: 5px; }
  th { font-size: 10px; padding-left: 5px; padding-right: 5px; }
  .etq { font-size: 10px; padding: 2px 6px; }
}
@container (max-width: 520px) {
  td { font-size: 11px; padding-left: 4px; padding-right: 4px; }
  th { font-size: 9.5px; padding-left: 4px; padding-right: 4px; }
  .etq { font-size: 9.5px; padding: 2px 5px; }
}

/* =========================================================================
   PÁGINAS / FILTROS
   ========================================================================= */
.cabecalho-pagina { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.cabecalho-pagina h2 { margin-bottom: 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes input[type=search] { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 240px; font-size: 14px; background: var(--surface); color: var(--text); }
.acoes select { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; }
.filtro-data { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 4px 0 10px; }
.filtro-data input { border: 0; padding: 9px 6px; font-size: 13px; background: transparent; color: var(--text); }
.h3-flex { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mini-select { font-size: 12px; font-weight: 400; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); }

.grupo-compra { background: var(--surface); border-radius: var(--radius); box-shadow: var(--sombra); margin-bottom: 18px; overflow: hidden; }
.grupo-compra .titulo-grupo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 18px; background: var(--hd-blue-soft); border-bottom: 1px solid var(--border); }
.grupo-compra .titulo-grupo strong { font-size: 16px; color: var(--hd-blue); }
:root[data-theme="dark"] .grupo-compra .titulo-grupo strong { color: #8fb0ff; }
.grupo-compra .titulo-grupo .meta { color: var(--text-muted); font-size: 12px; }

.linha-processo { cursor: pointer; }
.linha-processo:hover td { background: var(--surface-2); }
/* Invoice ABERTA: a linha e o bloco de pagamentos formam um conjunto visual, com
   fundo azulado e uma faixa lateral, para não se confundir com a invoice de baixo. */
.linha-processo.expandida:not(.linha-alerta) td { background: var(--hd-blue-soft); }
.linha-processo.expandida:not(.linha-alerta) td:first-child { box-shadow: inset 3px 0 0 var(--hd-blue); }
.linha-processo.expandida td strong { color: var(--hd-blue); }
:root[data-theme="dark"] .linha-processo.expandida td strong { color: #8fb0ff; }

.linha-detalhe > td { background: var(--hd-blue-soft); padding: 0 14px 16px; box-shadow: inset 3px 0 0 var(--hd-blue); }
.linha-alerta + .linha-detalhe > td { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.detalhe-pagamentos { background: var(--surface); border: 1px solid var(--hd-blue-soft); border-radius: 10px; padding: 12px 14px; box-shadow: var(--sombra); }
/* Composição do pagamento (inicial x demais) sob a tabela de parcelas */
.composicao-pagamentos.carregando { color: var(--text-faint); font-style: italic; }
.composicao-linha { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.composicao-invoices { margin-top: 6px; font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.composicao-pagamentos { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-strong); font-size: 12px; }
.item-composicao { display: flex; flex-direction: column; gap: 1px; }
.item-composicao .rot { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.item-composicao strong { font-size: 14px; color: var(--hd-blue); }
:root[data-theme="dark"] .item-composicao strong { color: #8fb0ff; }
.detalhe-pagamentos h4 { color: var(--hd-blue); }
:root[data-theme="dark"] .detalhe-pagamentos h4 { color: #8fb0ff; }
.detalhe-pagamentos h4 { font-size: 13px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

/* compra TOTALMENTE PAGA: toda a fonte da linha em vermelho (visual do "já paguei") */
tr.linha-quitada td:not(.acoes-linha),
tr.linha-quitada td:not(.acoes-linha) strong,
tr.linha-quitada td:not(.acoes-linha) span:not(.etq-ambar) { color: var(--red) !important; }
tr.linha-quitada td:not(.acoes-linha) .etq:not(.etq-ambar) { background: var(--red-soft) !important; }
tr.linha-quitada td:not(.acoes-linha) .etq-ambar { background: var(--amber-soft) !important; color: var(--amber) !important; }
tr.linha-quitada td::before { color: var(--red) !important; opacity: .65; }

/* FINIMP com o câmbio JÁ TRAVADO: fonte da linha inteira em vermelho, mesmo
   idioma visual da compra já paga — dá para ver de longe o que está fechado */
tr.linha-travada td:not(.acoes-linha),
tr.linha-travada td:not(.acoes-linha) strong,
tr.linha-travada td:not(.acoes-linha) span:not(.etq-ambar) { color: var(--red) !important; }
tr.linha-travada td:not(.acoes-linha) .etq:not(.etq-ambar) { background: var(--red-soft) !important; }
tr.linha-travada td:not(.acoes-linha) .etq-ambar { background: var(--amber-soft) !important; color: var(--amber) !important; }
tr.linha-travada td::before { color: var(--red) !important; opacity: .65; }

/* invoice com DI/DUIMP mas pago ≠ total: linha inteira vermelha */
tr.linha-alerta td { background: var(--red-soft); }
tr.linha-alerta:hover td { background: rgba(210, 59, 59, 0.22); }
tr.linha-alerta td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.linha-processo.destacada td { background: var(--blue-soft) !important; transition: background .4s; }

/* =========================================================================
   ETIQUETAS
   ========================================================================= */
.etq { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.etq-verde { background: var(--green-soft); color: var(--green); }
.etq-ambar { background: var(--amber-soft); color: var(--amber); }
.etq-azul { background: var(--blue-soft); color: var(--blue); }
:root[data-theme="dark"] .etq-azul { color: #8ab2ff; }
.etq-vermelha { background: var(--red-soft); color: var(--red); }
.etq-cinza { background: var(--hd-blue-soft); color: var(--text-muted); }
.etq-colab { background: var(--accent-soft); color: var(--accent-dark); }
:root[data-theme="dark"] .etq-colab { color: #ffb066; }
/* ação do Colaborador salta aos olhos no Histórico */
tr.linha-colab td { background: var(--accent-soft); }
tr.linha-colab td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.responsiva tr.linha-colab { border-color: var(--accent); background: var(--accent-soft); }
.responsiva tr.linha-colab td { background: transparent; box-shadow: none; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-fundo { position: fixed; inset: 0; background: rgba(11, 20, 40, .55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: var(--surface); color: var(--text); border-radius: 14px; padding: 24px; width: 540px; max-width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--sombra-lg); }
.modal-largo { width: 1000px; }
.modal h3 { font-size: 17px; margin-bottom: 16px; }
.campo { margin-bottom: 12px; }
.situacao-lida { display: flex; align-items: center; min-height: 40px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; background: var(--surface); color: var(--text); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--hd-blue-soft); border-color: var(--hd-blue); }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linha-campos-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.linha-campos-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.modal .rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.modal .rodape button, .modal .rodape a { padding: 11px 18px; font-size: 14px; }
.dica { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; background: var(--hd-blue-soft); padding: 10px 14px; border-radius: var(--radius-sm); }

.finimp-invoice { font-size: 11px; color: var(--hd-blue); font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
:root[data-theme="dark"] .finimp-invoice { color: #7ea2ff; }
/* fluxo de caixa: cores por grupo (compra, numerário, frete, FINIMP por banco) */
.legenda-fluxo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); }
.item-legenda { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.item-legenda strong { color: var(--text); }
.ponto-grupo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-right: 6px; vertical-align: -1px; }
/* grupos de custo saem quadrados: separa "banco" de "tipo de despesa" na mesma legenda */
.ponto-grupo.ponto-custo { border-radius: 2px; }
/* data estimada (invoice quitada sem ETA digitada): mesma leitura, tom mais leve */
.chegada-estimada { font-weight: 600; color: var(--text-muted); }
.link-como-botao { color: var(--hd-blue); text-decoration: underline; cursor: pointer; }
.til-estimado { color: var(--text-faint); font-weight: 600; }
.dica-inline { font-weight: 400; color: var(--text-faint); font-size: 11px; }
:root[data-theme="dark"] .link-como-botao { color: #8fb0ff; }
.pct-grupo { color: var(--text-faint); font-size: 11px; }
.barra-grupos { display: flex; }
.barra-grupos span { display: block; height: 100%; }
.barra { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 6px; }

/* painel "O que fazer hoje" */
.hoje-lista { display: flex; flex-direction: column; gap: 8px; }
.hoje-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.hoje-item.urgente { border-color: var(--red); background: var(--red-soft); }
/* aviso do Colaborador: pendência que se resolve fora do sistema */
.hoje-item.hoje-aviso { border-color: var(--hd-blue); background: var(--hd-blue-soft); }
.hoje-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
/* uma linha por invoice, com o valor que vai ser lançado na planilha */
.aviso-invoices { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 12px; }
.aviso-invoice { display: flex; align-items: baseline; gap: 8px; }
.aviso-inv-id { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.aviso-inv-compra { flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
  color: var(--hd-blue); background: var(--surface); border: 1px solid var(--hd-blue); }
.aviso-inv-nome { font-weight: 600; }
.aviso-inv-val { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aviso-inv-forn { flex: 1; min-width: 0; color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoje-ico { flex-shrink: 0; font-size: 16px; }
.hoje-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hoje-item .btn-suave { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 520px) { .hoje-item { flex-wrap: wrap; } .hoje-item .btn-suave { margin-left: 26px; } }
/* no celular a lista de invoices ganha a largura toda: o botão desce, o número
   da invoice fica numa linha só e fornecedor + valor dividem a linha de baixo */
@media (max-width: 520px) {
  .hoje-aviso .hoje-txt { flex: 1 1 100%; }
  .aviso-invoice { flex-wrap: wrap; row-gap: 0; }
  .aviso-inv-id { flex: 1 1 100%; }
  .aviso-inv-forn { flex: 0 1 auto; }
}
.td-barra { min-width: 90px; }
.td-barra-lg { min-width: 110px; }
@container (max-width: 560px) { .td-barra, .td-barra-lg { min-width: 56px; } }
.barra > div { height: 100%; background: var(--accent); border-radius: 4px; }

/* =========================================================================
   INTERATIVIDADE
   ========================================================================= */
.clicavel { cursor: pointer; }
/* controles exclusivos do administrador somem para o colaborador (o servidor também bloqueia) */
body.papel-colaborador .so-admin { display: none !important; }
.card.clicavel { transition: transform .15s ease, box-shadow .15s ease; }
.card.clicavel:hover { transform: translateY(-2px); box-shadow: var(--sombra-lg); }
.card.clicavel:active { transform: translateY(0); }
tr.clicavel:hover td { background: var(--hd-blue-soft); }

/* busca global */
.res-grupo { margin-top: 16px; }
.res-grupo h4 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.res-item { padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.res-item:hover { background: var(--hd-blue-soft); border-color: var(--hd-blue); }
.res-item small { color: var(--text-muted); }

/* seleção de invoices no modal de novo FINIMP */
.lista-selecao { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.item-selecao { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.item-selecao:hover { background: var(--hd-blue-soft); }
.item-selecao input[type=checkbox] { width: auto; flex-shrink: 0; transform: scale(1.2); }
.item-selecao span { flex: 1; }
.item-selecao:has(input:checked) { background: var(--blue-soft); }

/* =========================================================================
   POLÍTICA DE SENHA (checklist) + AVISO DE SESSÃO — padrão Painel de Vendas
   ========================================================================= */
.pw-reqs { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.pw-reqs li { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.pw-reqs li.ok { color: var(--green); }
.pw-reqs li .mk { display: inline-flex; width: 16px; justify-content: center; font-weight: 700; }
@media (max-width: 480px) { .pw-reqs { grid-template-columns: 1fr; } }

.sessao-aviso {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  z-index: 250; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  background: #1c2430; color: #fff; font-size: 13.5px; line-height: 1.4;
  padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  max-width: min(92vw, 520px); transition: transform .25s ease;
}
.sessao-aviso.show { transform: translate(-50%, 0); }
.sessao-aviso .btn-primario { padding: 8px 12px; font-size: 13px; }

/* =========================================================================
   TABLET (até 1024px): menu compacto só com ícones
   ========================================================================= */
@media (max-width: 1024px) {
  .menu { width: 64px; }
  .menu .brand { padding: 14px 8px; align-items: center; }
  .menu .brand .logo-card { padding: 5px 6px; }
  .menu .brand .logo-card img { height: 20px; }
  .menu .brand small { display: none; }
  .menu nav { padding: 10px 8px; }
  .menu a { justify-content: center; padding: 12px 0; }
  .menu a .rot { display: none; }
  .menu .ico svg { width: 20px; height: 20px; }
  .menu .user { padding: 10px 8px; align-items: center; }
  .menu .user .meta, .menu .user .user-acesso, .menu .user .btn-sair-todos, .menu .user .btn-2fa-menu { display: none; }
  /* o avatar fica: é por ele que se chega à senha e ao autenticador */
  .menu .user .user-topo { justify-content: center; flex-direction: column; gap: 8px; }
  .menu .user .logout { margin: 0; }
  .topbar { padding: 12px 16px; }
  main { padding: 20px 18px; }
  .duas-colunas { grid-template-columns: 1fr; }
}

/* =========================================================================
   TELAS ESTREITAS (até 800px): tabelas viram cartões empilhados
   (abaixo de ~800px nem o conjunto mínimo de colunas cabe sem cortar)
   ========================================================================= */
@media (max-width: 800px) {
  .responsiva, .responsiva tbody { display: block; }
  .responsiva tr.cab { display: none; }
  .responsiva tr { display: block; border: 1px solid var(--border); border-radius: 12px;
    margin: 0 0 10px; background: var(--surface); padding: 6px 0; }
  .responsiva tr.linha-alerta { border-color: var(--red); background: var(--red-soft); }
  .responsiva tr.linha-alerta td { background: transparent; box-shadow: none; }
  .responsiva td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    border: 0; padding: 6px 14px; text-align: right; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
  .responsiva td::before { content: attr(data-l); font-weight: 600; color: var(--text-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; text-align: left; }
  .responsiva td:not([data-l])::before { content: none; }
  .responsiva td:not([data-l]) { justify-content: flex-end; }
  .responsiva td:empty { display: none; }
  .responsiva td .barra { flex: 1; min-width: 70px; align-self: center; }
  .responsiva td.prio-baixa, .responsiva td.prio-media, .responsiva td.prio-painel, .responsiva td.prio-alta:not(.so-desktop) { display: flex !important; }
  .responsiva td.prio-baixa:empty, .responsiva td.prio-media:empty, .responsiva td.prio-painel:empty, .responsiva td.prio-alta:empty { display: none !important; }
  .responsiva button.prio-alta { display: inline-block !important; }
  .responsiva td.num { white-space: normal; }
  .responsiva .so-desktop { display: none; }
  .responsiva td[data-l="Invoice"], .responsiva td[data-l="Número"], .responsiva td[data-l="Fornecedor"] { font-size: 15px; }
  .responsiva .acoes-linha { justify-content: flex-end; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 4px; }
  .responsiva .acoes-linha .btn-suave { padding: 9px 16px; font-size: 13px; }
  .responsiva .acoes-linha .btn-perigo { padding: 9px 12px; }

  .responsiva tr.linha-detalhe { border: 0; background: transparent; padding: 0; margin: -4px 0 12px; }
  .responsiva .linha-detalhe > td { display: block; background: transparent; padding: 0; }
  .responsiva .linha-detalhe > td::before { content: none; }
  .detalhe-pagamentos { padding: 10px; background: var(--hd-blue-soft); border-left: 3px solid var(--hd-blue); border-color: var(--hd-blue-soft); border-left-color: var(--hd-blue); }
  .detalhe-pagamentos .responsiva tr { background: var(--surface); }
}

/* =========================================================================
   CELULAR (até 760px): menu no rodapé
   ========================================================================= */
@media (max-width: 760px) {
  body { font-size: 15px; }
  #app { flex-direction: column; }
  .menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: auto;
    flex-direction: row; align-items: center; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    z-index: 40; box-shadow: 0 -4px 16px rgba(11, 20, 40, .35); }
  .menu .brand { display: none; }
  /* na barra de baixo sobra só o avatar, encostado à direita: é o acesso à conta
     (o botão de sair já está no topo, em .so-celular) */
  .menu .user { display: flex; padding: 0 4px 0 8px; border: 0; border-left: 1px solid rgba(255,255,255,0.10); }
  .menu .user .logout { display: none; }
  .menu .user .user-topo { flex-direction: row; }
  .menu .user .avatar { width: 32px; height: 32px; font-size: 12px; }
  .menu nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; padding: 0; overflow: visible; }
  .menu a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 10px; flex: 1 1 0; min-width: 0; align-items: center; }
  .menu a .rot { display: block; font-size: 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu .ico svg { width: 20px; height: 20px; }
  .so-celular { display: inline-flex; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar h1 { font-size: 16px; }
  .icon-btn { width: 36px; height: 36px; }
  main { padding: 16px 12px calc(86px + env(safe-area-inset-bottom)); }

  h2 { font-size: 19px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 13px 14px; }
  .card .valor { font-size: 17px; }

  .cabecalho-pagina { flex-direction: column; align-items: stretch; }
  .acoes { width: 100%; }
  .acoes input[type=search] { width: 100%; order: -1; font-size: 16px; }
  .acoes select { flex: 1; font-size: 16px; }
  .btn-primario { padding: 12px 16px; }

  .modal-fundo { padding: 0; align-items: stretch; }
  .modal, .modal-largo { width: 100%; max-height: none; height: 100%; height: 100dvh; border-radius: 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .linha-campos, .linha-campos-3, .linha-campos-4 { grid-template-columns: 1fr; }
  .campo input, .campo select, .campo textarea { font-size: 16px; padding: 12px; }
  .modal .rodape { position: sticky; bottom: 0; background: var(--surface); padding-top: 12px; margin-top: 14px; border-top: 1px solid var(--border); }
  .modal .rodape button { flex: 1; padding: 13px; }
}

/* ---- ativação do aplicativo autenticador (2FA) ---- */
.passos-2fa { margin: 0 0 12px 18px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.passos-2fa li { padding-left: 2px; }
/* QR à esquerda, chave manual à direita: cabe na tela sem rolagem */
.modal.modal-2fa { width: 720px; }
.ativa-2fa { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.ativa-2fa .qr-caixa { margin: 0; flex: none; }
.ativa-2fa-lado { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ativa-2fa-lado .chave-2fa { width: 100%; margin: 0; }
.qr-caixa { display: flex; justify-content: center; margin: 0 0 14px; padding: 12px;
  background: var(--hd-white); border: 1px solid var(--border-strong); border-radius: 12px; }
/* o lado do QR acompanha a altura da janela para nunca estourar a tela */
.qr-caixa img { display: block; width: min(300px, 36vh); height: min(300px, 36vh); max-width: 100%; }
/* telas baixas (notebook): aperta as folgas em vez de cortar o conteúdo */
@media (max-height: 720px) {
  .modal.modal-2fa { padding: 16px 20px; }
  .modal.modal-2fa h3 { margin-bottom: 10px; }
  .passos-2fa { gap: 3px; margin-bottom: 10px; }
  .ativa-2fa { margin-bottom: 10px; }
  .modal.modal-2fa .rodape { margin-top: 12px; }
}
/* estreito: volta para uma coluna só, com o QR centralizado */
@media (max-width: 700px) {
  .modal.modal-2fa { width: 540px; }
  .ativa-2fa { flex-direction: column; }
  .ativa-2fa .qr-caixa { align-self: center; }
}
.chave-2fa { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; letter-spacing: 1px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.link-2fa { color: var(--hd-blue); text-decoration: underline; }
.qr-caixa img { cursor: zoom-in; }
/* QR em tela cheia: fundo branco puro e o maior quadrado que couber */
.qr-ampliado { position: fixed; inset: 0; z-index: 80; background: #ffffff; cursor: zoom-out;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.qr-ampliado img { display: block; width: min(84vh, 84vw); height: min(84vh, 84vw); }
.qr-ampliado p { color: #6b7280; font-size: 13px; text-align: center; }
/* "Confirmar e ativar" ocupa a linha; "Cancelar" fica ao lado, como no padrão */
/* textos de apoio da ativação: cinza simples, sem caixa (como no padrão) */
.texto-2fa { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.texto-2fa strong { color: var(--text); }
.rodape.rodape-2fa { display: flex; gap: 10px; }
.rodape.rodape-2fa .btn-primario { flex: 1; }
:root[data-theme="dark"] .link-2fa { color: #8fb0ff; }
input.codigo-6 { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 26px; font-weight: 700;
  letter-spacing: 10px; text-align: center; padding: 12px 8px; }
input.codigo-6::placeholder { color: var(--text-faint); font-weight: 400; }
/* celular: tudo mais junto para a tela caber sem rolagem */
@media (max-width: 520px) {
  .qr-caixa img { width: min(224px, 27vh); height: min(224px, 27vh); }
  .qr-caixa { padding: 8px; }
  input.codigo-6 { font-size: 22px; letter-spacing: 6px; padding: 10px 8px; }
  .modal.modal-2fa { padding: 14px 16px; }
  .modal.modal-2fa h3 { margin-bottom: 10px; }
  .passos-2fa { margin: 0 0 10px 18px; gap: 4px; }
  .ativa-2fa { gap: 10px; margin-bottom: 10px; }
  .ativa-2fa-lado { gap: 6px; }
  /* no celular a câmera nem entra em cena: o atalho do link resolve */
  .dica-ampliar { display: none; }
  .modal.modal-2fa .rodape { margin-top: 12px; }
}

/* ---- manual (botão Como usar o sistema) ---- */
/* O manual foi cortado em abas que cabem inteiras numa janela normal. Mas numa
   janela baixa (notebook pequeno, navegador dividido) sempre vai faltar espaço
   para algum trecho — e aí o que não pode acontecer é perder de vista as abas e
   o botão de fechar. Por isso a moldura é fixa e só o texto rola por dentro. */
.modal.modal-ajuda { width: 760px; display: flex; flex-direction: column; overflow: hidden; }
.modal.modal-ajuda .ajuda-corpo { flex: 1; min-height: 0; overflow-y: auto; }
.modal.modal-ajuda .ajuda-abas, .modal.modal-ajuda .rodape { flex-shrink: 0; }
.ajuda-abas { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ajuda-aba { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); border-radius: 6px 6px 0 0; }
.ajuda-aba:hover { background: var(--surface-2); color: var(--text); }
.ajuda-aba.ativa { color: var(--hd-blue); border-bottom-color: var(--hd-blue); }
:root[data-theme="dark"] .ajuda-aba.ativa { color: #8fb0ff; border-bottom-color: #8fb0ff; }
.ajuda-corpo { font-size: 13px; line-height: 1.5; }
.ajuda-corpo h4 { margin: 16px 0 5px; font-size: 13.5px; }
.ajuda-corpo h4:first-child { margin-top: 4px; }
.ajuda-corpo p { margin-bottom: 4px; }
.ajuda-abre { background: var(--hd-blue-soft); border-left: 3px solid var(--hd-blue); padding: 10px 12px;
  border-radius: 0 8px 8px 0; margin-bottom: 6px; }
.ajuda-passos { margin: 6px 0 4px 20px; display: flex; flex-direction: column; gap: 7px; }
.ajuda-passos li { padding-left: 3px; }
.ajuda-tag { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; padding: 1px 7px; border-radius: 20px; vertical-align: 1px;
  background: var(--hd-blue-soft); color: var(--hd-blue); }
:root[data-theme="dark"] .ajuda-tag { color: #8fb0ff; }
.ajuda-vermelho { color: var(--red); font-weight: 600; }
@media (max-width: 700px) { .modal.modal-ajuda { width: 540px; } .ajuda-aba { padding: 8px; font-size: 12px; } }

/* ---- confirmação própria (substitui o confirm() do navegador) ---- */
.confirma-fundo { position: fixed; inset: 0; background: rgba(11, 20, 40, .55); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirma { background: var(--surface); color: var(--text); border-radius: 14px; padding: 22px 24px;
  width: 460px; max-width: 100%; box-shadow: var(--sombra-alta, 0 18px 50px rgba(11,20,40,.30)); }
.confirma h4 { font-size: 16px; margin-bottom: 8px; }
.confirma p { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.confirma-detalhe { margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.confirma-aviso { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.confirma-rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.confirma-rodape button { padding: 10px 18px; font-size: 14px; }
@media (max-width: 520px) { .confirma-rodape { flex-direction: column-reverse; } .confirma-rodape button { width: 100%; } }

/* bloco do pagamento inicial dentro da Nova Compra */
.bloco-inicial { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 4px;
  margin-bottom: 14px; background: var(--surface-2); }
.bloco-inicial legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.bloco-inicial .campo input:disabled, .bloco-inicial .campo select:disabled { opacity: .5; }

/* janela de Nova Compra: mais larga para os campos curtos ficarem lado a lado */
.modal.modal-compra { width: 760px; max-height: 94vh; }
@media (max-width: 800px) { .modal.modal-compra { width: 540px; } .modal-compra .linha-campos-4 { grid-template-columns: 1fr 1fr; } }
/* telas baixas: aperta as folgas em vez de empurrar o conteudo para fora */
@media (max-height: 860px) {
  .modal.modal-compra { padding: 16px 20px; }
  .modal.modal-compra h3 { margin-bottom: 10px; }
  .modal.modal-compra .campo { margin-bottom: 8px; }
  .modal.modal-compra .bloco-inicial { padding: 6px 12px 0; margin-bottom: 10px; }
  .modal.modal-compra .rodape { margin-top: 12px; }
  .modal.modal-compra textarea { height: 46px; }
}

/* janela muito baixa (notebook com barras): aperta mais um degrau */
@media (max-height: 700px) {
  .modal.modal-compra { padding: 12px 18px; max-height: 96vh; }
  .modal.modal-compra h3 { margin-bottom: 6px; font-size: 16px; }
  .modal.modal-compra .campo { margin-bottom: 6px; }
  .modal.modal-compra .dica { padding: 6px 9px; font-size: 11.5px; margin-bottom: 8px !important; }
  .modal.modal-compra .bloco-inicial { padding: 4px 10px 0; margin-bottom: 8px; }
  .modal.modal-compra textarea { height: 34px; }
  .modal.modal-compra .rodape { margin-top: 8px; }
  .modal.modal-compra .rodape button { padding: 8px 16px; }
}


/* ---- impressão bloqueada ---- */
#aviso-impressao { display: none; }
@media print {
  html, body { background: #ffffff !important; }
  body * { visibility: hidden !important; }
  #aviso-impressao, #aviso-impressao * { visibility: visible !important; }
  #aviso-impressao { display: flex !important; position: fixed; inset: 0; z-index: 99999;
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    text-align: center; padding: 40px; background: #ffffff; color: #222222;
    font-family: Segoe UI, Arial, sans-serif; }
  #aviso-impressao strong { font-size: 22px; }
  #aviso-impressao span { font-size: 13px; color: #555555; }
  #aviso-impressao small { font-size: 12px; color: #777777; max-width: 460px; line-height: 1.5; }
  @page { margin: 12mm; }
}

/* ---- faixa de servidor fora do ar ---- */
#sem-conexao { position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  background: var(--red); color: #ffffff; text-align: center;
  padding: 9px 14px; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); }
@media print { #sem-conexao { display: none; } }

/* ---- lista alta dentro de um modal: rola a LISTA, não a janela ----
   Um modal com 60 linhas empurrava o total e os botões para fora da vista, e
   era preciso rolar a janela inteira só para achar "Salvar". Aqui a lista ganha
   a própria rolagem, com o cabeçalho grudado no topo e o total no rodapé — o
   modal em si não rola mais. */
.tabela-modal { max-height: 54vh; overflow-y: auto; }
.tabela-modal table { border-collapse: separate; border-spacing: 0; }
.tabela-modal th, .tabela-modal td { border-bottom: 1px solid var(--border); }
.tabela-modal tr.cab th { position: sticky; top: 0; z-index: 2; background: var(--surface);
  border-bottom: 2px solid var(--border); }
.tabela-modal tr.linha-total td { position: sticky; bottom: 0; z-index: 2; background: var(--surface);
  border-top: 1px solid var(--border-strong); border-bottom: 0; }
/* Com esta classe a tabela deixa de ter altura chutada em vh e passa a ocupar
   exatamente o que sobrar depois do título, do resumo e dos botões — o modal
   encaixa na janela seja ela alta ou baixa, sem sobra de 9px nem folga demais. */
.modal.modal-tabela { display: flex; flex-direction: column; overflow: hidden; }
.modal.modal-tabela .tabela-modal { flex: 1; min-height: 120px; max-height: none; }
.modal.modal-tabela > h3, .modal.modal-tabela > .rodape,
.modal.modal-tabela > .dica, .modal.modal-tabela > .legenda-fluxo { flex-shrink: 0; }

/* no modo cartão (telas estreitas) a tabela vira blocos e a rolagem interna
   atrapalharia mais do que ajuda — a janela volta a rolar por inteiro */
@media (max-width: 800px) {
  .tabela-modal { max-height: none; overflow-y: visible; }
  .modal.modal-tabela { display: block; overflow-y: auto; }
}

/* ---- modal cuja lista se estica para preencher o que sobra ----
   Antes, a lista tinha altura fixa (260px) e o modal transbordava em telas
   menores. Aqui a lista é o único pedaço elástico: os campos e os botões ficam
   com o tamanho que precisam e ela ocupa exatamente o resto — o modal cabe
   sempre, sem rolagem, seja a janela alta ou baixa. */
.modal.modal-lista { display: flex; flex-direction: column; overflow: hidden; }
.modal.modal-lista > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal.modal-lista .campo-lista { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal.modal-lista .campo-lista .lista-selecao { flex: 1; min-height: 110px; max-height: none; }
@media (max-width: 800px) { .modal.modal-lista { display: block; overflow-y: auto; }
  .modal.modal-lista .campo-lista .lista-selecao { max-height: 260px; } }