/* Portal do Fornecedor: estilo comum. Cores do mockup de 17/10/2026
   (docs/mockups/portal-fornecedor/). Tema claro e escuro. */
:root {
  --fundo: #f4f2ee;
  --cartao: #ffffff;
  --borda: #e7e2da;
  --borda-suave: #eeeae4;
  --borda-campo: #d6d3d1;
  --fundo-suave: #faf8f5;
  --texto: #1f2937;
  --texto-2: #44403c;
  --texto-3: #57534e;
  --acao: #b45309;
  --acao-hover: #92400e;
  --acao-texto: #ffffff;
  --link: #92400e;
  --link-hover: #78350f;
  --erro: #b91c1c;
  --erro-fundo: #fef2f2;
  --erro-borda: #fecaca;
  --ok: #166534;
  --ok-fundo: #ecf7ef;
  --ok-borda: #b7e0c3;
  --avatar-fundo: #fdf6ee;
  --avatar-borda: #e8c9a4;
  --avatar-texto: #92400e;
  --sombra-menu: 0 12px 32px rgba(41, 37, 36, 0.18);
  --cabecalho: #ffffff;
  --foco: #1d4ed8;
  /* Selos e avisos da cotação (F2.3), as cores do mockup; contraste ≥ 4,5:1 conferido pelo cdp_cotacao. */
  --selo-aberta-fg: #1d4ed8; --selo-aberta-bg: #e8efff; --selo-aberta-bd: #bfd0fb;
  --selo-enviado-fg: #166534; --selo-enviado-bg: #ecf7ef; --selo-enviado-bd: #b7e0c3;
  --selo-prazo-fg: #92400e; --selo-prazo-bg: #fef3c7; --selo-prazo-bd: #f3d38a;
  --selo-encerrada-fg: #44403c; --selo-encerrada-bg: #f1efeb; --selo-encerrada-bd: #d6d3d1;
  --aviso-fg: #9a3412; --aviso-bg: #fff7ed; --aviso-bd: #f7c49b;
  color-scheme: light;
}
/* Tema escuro (escolha no menu da conta; data-theme no <html>, pelo fornecedor.js).
   Mesmos valores do tema escuro do portal interno (portal/index.html e a casca do
   portal.js, 23/10/2026), só copiados: fundo da página (--chao), cartões
   (--superficie), cabeçalho (--bfc-lateral), bordas (--borda e --borda-controle),
   hover (--trilho), texto (--texto) e secundário (--suave); mensagens de ok e erro
   (--ok*, --erro*). A cor da marca (laranja) continua a do fornecedor.
   Contraste mínimo de 4,5:1 conferido pelo cdp_fornecedor nos dois temas. */
:root[data-theme="dark"] {
  --fundo: #141518;
  --cartao: #1f2125;
  --cabecalho: #1b1c20;
  --borda: #2e3036;
  --borda-suave: #2e3036;
  --borda-campo: #6b6e75;
  --fundo-suave: #2e3036;
  --texto: #f2f2f3;
  --texto-2: #f2f2f3;
  --texto-3: #a9abb1;
  --acao: #b45309;
  --acao-hover: #92400e;
  --acao-texto: #ffffff;
  --link: #f5a35c;
  --link-hover: #fbbf77;
  --erro: #f2675f;
  --erro-fundo: #3a1f20;
  --erro-borda: #5c2b2c;
  --ok: #6fcf97;
  --ok-fundo: #17301f;
  --ok-borda: #24492f;
  --avatar-fundo: #3a2b1d;
  --avatar-borda: #7a4a1f;
  --avatar-texto: #fbbf77;
  --sombra-menu: 0 12px 32px rgba(0, 0, 0, 0.45);
  --foco: #93c5fd;
  --selo-aberta-fg: #a9c1ff; --selo-aberta-bg: #1e2a4a; --selo-aberta-bd: #34477a;
  --selo-enviado-fg: #6fcf97; --selo-enviado-bg: #17301f; --selo-enviado-bd: #24492f;
  --selo-prazo-fg: #fbbf77; --selo-prazo-bg: #3a2a12; --selo-prazo-bd: #5c4220;
  --selo-encerrada-fg: #d4d4d8; --selo-encerrada-bg: #2e3036; --selo-encerrada-bd: #45474e;
  --aviso-fg: #fbbf77; --aviso-bg: #3a2a12; --aviso-bd: #5c4220;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Marca */
.marca { display: flex; align-items: center; gap: 12px; }
.marca-ico {
  width: 38px; height: 38px; border-radius: 9px; background: var(--acao);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.marca-nome { font-weight: 700; }
.marca-sub { font-size: 12px; color: var(--texto-3); }

/* Campos e botões */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.campo input, .campo select {
  min-height: 42px; padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: 8px;
  font: inherit; font-weight: 400; color: var(--texto); background: var(--cartao); width: 100%;
}
.campo input[readonly] { background: var(--fundo-suave); border-color: var(--borda); color: var(--texto-2); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.campo-erro { font-size: 12px; font-weight: 400; color: var(--erro); }
.dica { font-size: 12px; color: var(--texto-3); margin: 0; }
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.btn {
  min-height: 42px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--borda-campo);
  background: var(--cartao); color: var(--texto); font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.btn:hover { border-color: var(--texto-3); }
.btn-acao { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); font-weight: 600; }
.btn-acao:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
/* Botão que é link (<a class="btn">): a cor de link (a, a:hover, a:visited) não
   vale nele. Sem isto, o "Responder" da lista ficava com o texto marrom do
   a:hover sobre o laranja (F2.3, 23/10/2026). */
a.btn, a.btn:hover, a.btn:visited { color: var(--texto); text-decoration: none; }
.btn-acao, .btn-acao:hover, a.btn-acao, a.btn-acao:hover, a.btn-acao:visited { color: var(--acao-texto); }
.btn:disabled { cursor: not-allowed; background: var(--fundo-suave); border: 1px dashed var(--borda-campo); color: var(--texto-3); }
.btn-largo { width: 100%; min-height: 46px; }
.btn-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--link);
  text-decoration: underline; cursor: pointer;
}
.btn-link:hover { color: var(--link-hover); }

/* Mensagens */
.msg { border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.msg:empty { display: none; }
.msg-erro { background: var(--erro-fundo); border: 1px solid var(--erro-borda); color: var(--erro); }
.msg-ok { background: var(--ok-fundo); border: 1px solid var(--ok-borda); color: var(--ok); }

/* Página de entrada (index) */
/* Mesmo centro, largura e espaçamento do login do painel de vendas
   (paineis/vendas: .login-overlay e .login-card). */
.entrada {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cartao-entrada {
  width: 100%; max-width: 380px; background: var(--cartao); border: 1px solid var(--borda);
  border-radius: 14px; padding: 32px 30px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 1px 2px rgba(32, 38, 51, 0.05), 0 1px 1px rgba(32, 38, 51, 0.04);
}
/* "Criar seu acesso" tem mais campos: um pouco mais largo, sempre no centro. */
.cartao-entrada.cartao-largo { max-width: 460px; }
.cartao-entrada > .marca { justify-content: center; }
.cartao-entrada > section, .cartao-entrada > article { display: flex; flex-direction: column; gap: 14px; }
.cartao-entrada > section[hidden] { display: none; }
.cartao-entrada h1 { margin: 4px 0 0; font-size: 20px; text-align: center; }
.cartao-entrada form { display: flex; flex-direction: column; gap: 14px; }
.linha-acoes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.empresa-convite { background: var(--fundo-suave); border: 1px solid var(--borda-suave); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.empresa-convite .rotulo { color: var(--texto-3); font-size: 12px; }
.empresa-convite .valor { font-weight: 600; overflow-wrap: anywhere; }
.sem-quebra { white-space: nowrap; }
.aceite { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.aceite input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--acao); flex: none; }

/* Casca da tela única (Main) */
.casca {
  position: relative; background: var(--cabecalho); border-bottom: 1px solid var(--borda); padding: 12px 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
}
.casca .marca-nome { font-size: 16px; }
/* Entre "empresa · CNPJ · pessoa" e o círculo, o mesmo espaço entre o ícone da
   marca e "Bahia Ferro" (o gap da .marca: 12 px), em todas as larguras. */
.casca-dir { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; min-width: 0; }
.quem { text-align: right; min-width: 0; }
.quem-empresa { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.quem-cnpj, .quem-pessoa { font-size: 12px; color: var(--texto-3); }
.quem select { min-height: 32px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--borda-campo); border-radius: 6px; max-width: 280px; background: var(--cartao); color: var(--texto); }

/* Conta: o círculo com as iniciais abre o menu; a rodinha dentada no canto
   indica que há menu (inspirado no menu da conta do portal interno). */
.conta { position: relative; flex: none; }
.avatar-btn {
  position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--avatar-fundo); border: 1px solid var(--avatar-borda); color: var(--avatar-texto);
  font: inherit; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--borda); }
.engrenagem {
  position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cartao); border: 1px solid var(--borda-campo); color: var(--texto-2);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.menu-conta {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: 268px; max-width: calc(100vw - 32px);
  padding: 6px; background: var(--cartao); color: var(--texto); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: var(--sombra-menu); text-align: left;
}
.menu-cab { display: flex; flex-direction: column; padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--borda-suave); min-width: 0; }
.menu-cab .nome { font-weight: 600; overflow-wrap: anywhere; }
.menu-cab .email { font-size: 12px; color: var(--texto-3); overflow-wrap: anywhere; }
.mi {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0;
  border-radius: 6px; background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.mi:hover, .mi:focus-visible { background: var(--fundo-suave); }
.mi svg { flex: none; color: var(--texto-3); }
.mi-tema { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.mi-tema .rot { flex: 1; }
.seg { display: inline-flex; }
.seg button {
  min-height: 32px; padding: 0 12px; border: 1px solid var(--borda-campo); background: var(--cartao); color: var(--texto);
  font: inherit; font-size: 12px; cursor: pointer;
}
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button + button { margin-left: -1px; border-radius: 0 6px 6px 0; }
.seg button[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); font-weight: 600; position: relative; }
.menu-conta .sep { height: 1px; background: var(--borda-suave); margin: 6px 4px; }

.principal { max-width: 1280px; margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 22px; }
.principal h1 { margin: 0; font-size: 24px; }
.principal .sub { margin: 6px 0 0; color: var(--texto-3); }
.colunas { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.painel { flex: 1 1 420px; min-width: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; display: flex; flex-direction: column; }
.painel-cab { padding: 18px 20px 12px; border-bottom: 1px solid var(--borda-suave); }
.painel-cab h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.vazio { padding: 28px 20px; color: var(--texto-3); font-size: 13px; }
.vazio strong { display: block; color: var(--texto-2); font-size: 14px; margin-bottom: 4px; }
.rodape {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12px;
  color: var(--texto-3); border-top: 1px solid var(--borda); padding-top: 16px;
}

/* Trocar senha */
dialog.janela {
  border: 1px solid var(--borda); border-radius: 16px; padding: 28px; width: min(440px, calc(100vw - 32px));
  box-shadow: 0 12px 32px rgba(41, 37, 36, 0.18); color: var(--texto); background: var(--cartao);
}
dialog.janela::backdrop { background: rgba(31, 41, 55, 0.45); }
dialog.janela form { display: flex; flex-direction: column; gap: 14px; }
.janela-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.janela-cab h2 { margin: 0; font-size: 20px; }
.btn-fechar { width: 36px; height: 36px; padding: 0; border-radius: 8px; }
.janela-pe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }

/* ── Cotações (F2.3) ───────────────────────────────────────────────────────── */
.selo {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; border-radius: 999px;
  padding: 3px 10px; border: 1px solid; white-space: nowrap;
}
.selo-aberta { color: var(--selo-aberta-fg); background: var(--selo-aberta-bg); border-color: var(--selo-aberta-bd); }
.selo-enviado { color: var(--selo-enviado-fg); background: var(--selo-enviado-bg); border-color: var(--selo-enviado-bd); }
.selo-prazo { color: var(--selo-prazo-fg); background: var(--selo-prazo-bg); border-color: var(--selo-prazo-bd); }
.selo-encerrada { color: var(--selo-encerrada-fg); background: var(--selo-encerrada-bg); border-color: var(--selo-encerrada-bd); }
.contador { margin: 6px 0 0; font-size: 13px; color: var(--texto-2); }
.filtros { display: inline-flex; flex-wrap: wrap; margin-top: 12px; }
.filtros button {
  min-height: 34px; padding: 0 14px; border: 1px solid var(--borda-campo); background: var(--cartao); color: var(--texto);
  font: inherit; font-size: 13px; cursor: pointer;
}
.filtros button:first-child { border-radius: 8px 0 0 8px; }
.filtros button:last-child { border-radius: 0 8px 8px 0; }
.filtros button + button { margin-left: -1px; }
.filtros button[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--acao-texto); font-weight: 600; position: relative; }
.painel > .msg { margin: 12px 20px 0; }
.lista-cot { list-style: none; margin: 0; padding: 0; }
.cot { padding: 14px 20px; border-bottom: 1px solid var(--borda-suave); display: flex; flex-direction: column; gap: 4px; }
.cot:last-child { border-bottom: 0; }
.cot-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cot-num { font-weight: 700; font-size: 15px; }
.cot-empresa { font-size: 13px; font-weight: 600; color: var(--texto-2); overflow-wrap: anywhere; }
.cot-linha { font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.cot-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 4px; }
.cot-datas { font-size: 12px; color: var(--texto-3); }
.cot-prazo { font-weight: 600; color: var(--texto-2); }
.cot-urgente { color: var(--aviso-fg); }

/* Responder cotação */
.principal-cot { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tab-itens tfoot td { font-weight: 700; border-bottom: 0; }
.voltar { font-size: 13px; text-decoration: none; align-self: flex-start; }
.cot-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: flex-start; }
.principal .cot-cab h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cot-sub { margin: 6px 0 0; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.caixa-prazo {
  background: var(--aviso-bg); border: 1px solid var(--aviso-bd); border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: var(--aviso-fg); font-weight: 600;
}
.bloco {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.bloco h2 { margin: 0; font-size: 15px; }
.bloco-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.obs-forn { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.faixa { border-radius: 10px; padding: 12px 14px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.faixa:empty { display: none; }
.faixa-ok { background: var(--ok-fundo); border: 1px solid var(--ok-borda); color: var(--ok); }
.faixa-aviso { background: var(--aviso-bg); border: 1px solid var(--aviso-bd); color: var(--aviso-fg); }
.condicoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: start; }
.condicoes .campo { font-size: 12px; color: var(--texto-2); }
.marca-sem { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; color: var(--texto-2); }
.marca-sem input { width: 16px; height: 16px; accent-color: var(--acao); margin: 0; flex: none; }
.leitura { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.leitura dt { font-size: 12px; color: var(--texto-3); }
.leitura dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.rolagem { overflow-x: auto; }
.tab-itens { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 13px; }
.tab-itens th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--texto-3);
  padding: 8px 6px; border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tab-itens td { padding: 10px 6px; border-bottom: 1px solid var(--borda-suave); vertical-align: top; }
.tab-itens tr.sem-estoque > td { background: var(--fundo-suave); }
.tab-itens .num { text-align: right; white-space: nowrap; }
.tab-itens .prod-nome { font-weight: 600; overflow-wrap: anywhere; }
.tab-itens .prod-cod, .tab-itens .lojas-item { font-size: 12px; color: var(--texto-3); }
.tab-itens .lojas-item { list-style: none; margin: 4px 0 0; padding: 0; }
.tab-itens input[type="text"], .un-editor input[type="text"] {
  min-height: 38px; padding: 0 8px; border: 1px solid var(--borda-campo); border-radius: 6px;
  font: inherit; width: 100%; color: var(--texto); background: var(--cartao);
}
.tab-itens input[type="text"]:disabled, .un-editor input[type="text"]:disabled { background: var(--fundo-suave); color: var(--texto-3); }
.tab-itens input[aria-invalid="true"], .un-editor input[aria-invalid="true"],
.condicoes input[aria-invalid="true"], .condicoes select[aria-invalid="true"] { border-color: var(--erro); }
.tab-itens .qtd { font-weight: 600; white-space: nowrap; }
.tab-itens .pendente { color: var(--aviso-fg); font-weight: 600; font-size: 12px; }
.centro { text-align: center; }
.centro input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--acao); }
.un-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 10px 12px; background: var(--fundo-suave); border-radius: 8px; }
.un-editor label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.un-editor .curto { width: 90px; }
.un-editor .medio { width: 120px; }
.un-editor .conta-nec { font-size: 12px; color: var(--texto-2); flex-basis: 100%; margin: 0; }
.un-editor .un-falta { font-size: 12px; font-weight: 600; color: var(--aviso-fg); flex-basis: 100%; margin: 0; }
.un-editor .un-falta:empty { display: none; }
.arr-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.arr-op {
  min-height: 40px; padding: 4px 12px; border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--cartao);
  color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start;
}
.arr-op span { font-size: 11px; color: var(--texto-3); }
.arr-op[aria-pressed="true"] { border: 2px solid var(--acao); background: var(--avatar-fundo); }
.arr-op:disabled { cursor: not-allowed; color: var(--texto-3); border-style: dashed; }
.pe-cot {
  position: sticky; bottom: 0; z-index: 5; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px;
  padding: 14px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px;
  box-shadow: 0 -6px 20px rgba(41, 37, 36, 0.08);
}
.pe-resumo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.pe-resumo .total { font-size: 16px; }
.pe-motivo { font-size: 12px; color: var(--aviso-fg); font-weight: 600; margin: 0; }
.pe-motivo:empty { display: none; }
.pe-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
textarea.obs { font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--borda-campo); border-radius: 8px; resize: vertical;
               color: var(--texto); background: var(--cartao); width: 100%; }

@media (max-width: 767px) {
  .casca { padding: 12px 16px; }
  /* O círculo fica logo depois dos dados (12 px), então o menu abre pela
     largura do cabeçalho, para nunca sair da tela. */
  .conta { position: static; }
  .menu-conta { left: 16px; right: 16px; width: auto; max-width: none; top: calc(100% + 6px); }
  .quem { text-align: left; }
  .principal { padding: 20px 16px 32px; }
  /* No celular o rodapé da cotação não fica preso embaixo: cobriria o formulário. */
  .pe-cot { position: static; box-shadow: none; }
  .painel { flex-basis: 100%; }
}
/* Abaixo de 480 px, os campos em duas colunas viram uma. */
@media (max-width: 479px) {
  .par { grid-template-columns: minmax(0, 1fr); }
}