/* =====================================================================
   Cotanna — identidade "tech" (manual de marca, 29/09/2026)
   Menu em Noite #00072B com o item ativo em menta; conteúdo claro para leitura longa; marca em marinho profundo
   #01257D, links em azul #106EBE, neon (ciano #00FFFF / menta #0FFCBE) só sobre fundo escuro ou como selo com texto
   marinho. IBM Plex Sans no texto e IBM Plex Mono em códigos, números e rótulos. Tema: <html data-tema="escuro">
   (botão no topo; guardado no usuário e no navegador). Neon nunca em texto sobre fundo claro (contraste 1,3:1).
   ===================================================================== */
:root {
  color-scheme: light;
  --bg: #f2f6fb;              /* gelo */
  --card: #ffffff;
  --surface-2: #f7f9fc;       /* barras de ferramentas, editores */
  --th-bg: #f7f9fc;           /* cabeçalho das grades */
  --hover: #eef3fa;           /* linha sob o mouse */
  --zebra: #fafcfe;
  --field: #ffffff;           /* fundo dos campos */
  --ink: #0c111b;
  --ink-2: #394150;
  --muted: #5e6776;
  --placeholder: #7d8696;
  --line: #dce4f0;
  --line-2: #c6d3e6;
  --hair: #e9eff7;            /* separador entre colunas */

  /* menu lateral: sempre em Noite (nos dois temas) */
  --nav: #00072b;
  --nav-line: #111c4a;
  --nav-ink: #c9d6ee;
  --nav-ink-2: #ffffff;
  --nav-sec: #8fa3cc;
  --nav-hover: #0b1540;
  --nav-on-bg: #022441;       /* menta a 12% sobre Noite */
  --nav-on-ink: #0ffcbe;

  --accent: #106ebe;          /* texto, links e ícones em destaque (azul) */
  --accent-strong: #01257d;
  --accent-fill: #01257d;     /* fundos com texto branco (botão principal, barras): marinho profundo */
  --accent-fill-strong: #00072b;
  --accent-soft: #e8f0fb;
  --accent-line: #c3d8f2;
  --accent-ring: rgba(16, 110, 190, .24);
  --envio: #0ffcbe;           /* ação que envia ao portal: menta com texto marinho */
  --envio-ink: #01257d;
  --envio-strong: #0be3ab;
  --azul-fill: #106ebe;       /* selo RESPONDIDO */

  --blue: #01257d;   --blue-soft: #e8f0fb;   --blue-line: #c3d8f2;
  --amber: #93370d;  --amber-soft: #fef0c7;  --amber-line: #fedf89;
  --amber-dot: #dc6803;       /* ponto de aviso (o --amber é cor de texto: escuro demais num ponto) */
  --red: #b42318;    --red-soft: #fee4e2;    --red-line: #fecdca;
  --green: #067647;  --green-soft: #e3f6ea;  --green-line: #abefc6;
  --teal: #01257d;   --teal-soft: #0ffcbe;   --teal-line: #0ffcbe;   /* PRONTO: menta com texto marinho */
  --violet: #6d28d9; --violet-soft: #f3efff; --violet-line: #e4dafd;
  --gray-soft: #eef2f8; --gray-ink: #475467;
  --ok-dot: #0fd8a2;
  --pill: #002f4d; --pill-ink: #00ffff;   /* contador no menu: ciano sobre Noite */
  --msg-ok: #054f31; --msg-erro: #7a271a; --msg-nota: #01257d; --msg-ambar: #7a2e0e;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(1, 37, 125, .06);
  --shadow-pop: 0 12px 32px rgba(1, 37, 125, .18);
  --side-w: 240px;
  --side-min: 60px;
  --top-h: 52px;
  --fonte: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #00072b;              /* Noite */
  --card: #061139;
  --surface-2: #0a1744;
  --th-bg: #0a1744;
  --hover: #0d1c50;
  --zebra: #081440;
  --field: #030b31;
  --ink: #e8eef9;
  --ink-2: #b9c7e2;
  --muted: #8d9ec3;
  --placeholder: #6f80a8;
  --line: #16255c;
  --line-2: #22357a;
  --hair: #0e1b4c;

  --nav: #000520;
  --nav-line: #111c4a;
  --nav-ink: #c9d6ee;
  --nav-ink-2: #ffffff;
  --nav-sec: #8fa3cc;
  --nav-hover: #0b1540;
  --nav-on-bg: #022441;
  --nav-on-ink: #0ffcbe;

  --accent: #00e5ff;          /* ciano: links e destaques sobre o escuro */
  --accent-strong: #0ffcbe;
  --accent-fill: #106ebe;     /* botão principal: azul com texto branco */
  --accent-fill-strong: #0d5ea3;
  --accent-soft: #0a2350;
  --accent-line: #1b3a78;
  --accent-ring: rgba(0, 229, 255, .30);
  --envio: #0ffcbe;
  --envio-ink: #01257d;
  --envio-strong: #5cffd6;
  --azul-fill: #106ebe;

  --blue: #9ccbff;   --blue-soft: #0b2250;   --blue-line: #1b3a78;
  --amber: #f5b76b;  --amber-soft: #33260f;  --amber-line: #5a4219;
  --amber-dot: #f5b76b;
  --red: #ff8a80;    --red-soft: #3a1715;    --red-line: #6b2a25;
  --green: #5bd68f;  --green-soft: #0e2a2a;  --green-line: #1e4d40;
  --teal: #01257d;   --teal-soft: #0ffcbe;   --teal-line: #0ffcbe;
  --violet: #c4b5fd; --violet-soft: #231a4f; --violet-line: #3e2f7e;
  --gray-soft: #0e1b4c; --gray-ink: #b9c7e2;
  --ok-dot: #0ffcbe;
  --pill: #002f4d; --pill-ink: #00ffff;
  --msg-ok: #a6f4c5; --msg-erro: #fecdca; --msg-nota: #bfe0ff; --msg-ambar: #fedf89;

  --shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 13.5px/1.45 var(--fonte);
  color: var(--ink); background: var(--bg);
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
html.side-min body { grid-template-columns: var(--side-min) minmax(0, 1fr); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.ic { width: 18px; height: 18px; flex: none; }
::placeholder { color: var(--placeholder); }

/* ---------- menu lateral ---------- */
nav.side {
  background: var(--nav); color: var(--nav-ink); position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; border-right: 1px solid var(--nav-line); z-index: 20;
}
nav.side .brand { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: var(--top-h); border-bottom: 1px solid var(--nav-line); flex: none; }
nav.side .brand .logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; }
nav.side .brand .logo svg { width: 30px; height: 30px; display: block; }
nav.side .brand-txt { min-width: 0; line-height: 1.1; }
nav.side .brand-txt .versao { display: inline-block; margin-top: 3px; font: 500 10px var(--mono); color: var(--muted); text-decoration: none; }
nav.side .brand-txt .versao:hover { color: var(--accent); text-decoration: underline; }
nav.side .brand b { display: block; color: var(--nav-ink-2); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
nav.side .brand small { display: block; color: var(--nav-sec); font: 500 9px/1.4 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; }
.side-rolagem { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 10px 12px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.grupo { margin-top: 4px; }
.grupo-tit {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: none; border: 0;
  color: var(--nav-sec); font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 12px 10px 6px; cursor: pointer;
}
.grupo-tit:hover { color: var(--nav-ink-2); }
.grupo-tit .seta { width: 14px; height: 14px; transition: transform .15s; }
.grupo.fechado .grupo-tit .seta { transform: rotate(-90deg); }
.grupo.fechado .grupo-itens { display: none; }
nav.side a {
  position: relative; display: flex; align-items: center; gap: 10px; color: var(--nav-ink); padding: 7px 10px; border-radius: 6px;
  margin: 1px 0; font-size: 13px; white-space: nowrap;
}
nav.side a .rot { overflow: hidden; text-overflow: ellipsis; flex: 1; }
nav.side a:hover { background: var(--nav-hover); color: var(--nav-ink-2); text-decoration: none; }
nav.side a.on { background: var(--nav-on-bg); color: var(--nav-on-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--nav-on-ink); }
nav.side a.on .ic { color: var(--nav-on-ink); }
nav.side .pill { background: var(--pill); color: var(--pill-ink); border-radius: 4px; font: 600 10.5px/17px var(--mono); padding: 0 6px; }
.side-toggle {
  flex: none; display: flex; align-items: center; gap: 10px; margin: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  background: var(--nav); border: 1px solid var(--nav-line); color: var(--nav-ink); font: 500 12.5px var(--fonte);
}
.side-rolagem { scrollbar-color: var(--nav-line) transparent; }
.side-toggle:hover { color: var(--nav-ink-2); background: var(--nav-hover); }

/* menu recolhido: só ícones, rótulo aparece ao passar o mouse */
html.side-min nav.side .brand { padding: 0; justify-content: center; }
html.side-min nav.side .brand-txt, html.side-min nav.side .rot, html.side-min .grupo-tit span, html.side-min .grupo-tit .seta { display: none; }
html.side-min .grupo-tit { padding: 6px 0; justify-content: center; cursor: default; pointer-events: none; }
html.side-min .grupo-tit::before { content: ""; display: block; width: 24px; border-top: 1px solid var(--nav-line); }
html.side-min .grupo.fechado .grupo-itens { display: block; }
html.side-min nav.side a { justify-content: center; padding: 9px 0; }
html.side-min nav.side a .pill { position: absolute; top: 2px; right: 4px; font-size: 9.5px; padding: 0 4px; line-height: 14px; }
html.side-min nav.side a:hover::after {
  content: attr(data-label); position: fixed; left: calc(var(--side-min) + 6px); transform: translateY(-2px);
  background: var(--ink); color: var(--card); padding: 5px 10px; border-radius: 6px; font-size: 12.5px; white-space: nowrap;
  box-shadow: var(--shadow-pop); z-index: 50; pointer-events: none;
}
/* a lista rola dentro do menu (o botão de recolher fica sempre visível); a dica ao passar o mouse é position:fixed */
html.side-min .side-rolagem { scrollbar-width: none; }
html.side-min .side-rolagem::-webkit-scrollbar { display: none; }
html.side-min .side-toggle { justify-content: center; padding: 8px 0; }

/* ---------- barra superior ---------- */
.area { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 15; height: var(--top-h); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line);
}
.topbar-esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-topo { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); }
.menu-topo:hover { background: var(--hover); color: var(--ink); }
.menu-topo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.menu-topo .ic { width: 17px; height: 17px; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs .sep { color: var(--line-2); }
.topbar-dir { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 6px; font: 12px var(--mono);
  color: var(--ink-2); background: var(--card); border: 1px solid var(--line); white-space: nowrap;
}
.chip .ic { width: 15px; height: 15px; color: var(--muted); }
.chip.ok { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.chip.ok .ic { color: var(--accent); }
/* dado velho do ERP (etapa 9, D6) */
.chip.ambar, .chip.ambar .ic { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.chip.vermelho, .chip.vermelho .ic { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
a.chip { font-family: var(--fonte); }
a.chip:hover { text-decoration: none; border-color: var(--line-2); background: var(--hover); }
.chip .perfil { font: 600 10.5px var(--mono); color: var(--accent); background: var(--accent-soft); border-radius: 4px;
  padding: 0 6px; margin-left: 2px; }
/* claro / escuro */
.tema { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); }
.tema button { width: 30px; height: 24px; border-radius: 5px; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--muted); }
.tema button .ic { width: 16px; height: 16px; }
.tema button:hover { color: var(--ink); }
.tema button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.tema button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
/* substitutos: direção da troca no grupo */
form.direcao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -2px 0 2px; font-size: 13px; }
form.direcao .check { align-items: center; gap: 6px; }
form.direcao .check input { margin-top: 0; }
.direcao-txt { margin: 2px 0 8px; font-size: 12.5px; }
tr.principal > td { background: var(--accent-soft); }
form.renomear { display: flex; align-items: center; gap: 8px; margin: -2px 0 10px; }
form.renomear input[type=text] { flex: 1; max-width: 480px; height: 30px; }
form.renomear label { font-size: 12px; }
/* grupo de opções (radio) num formulário: cada opção numa linha, botão ao lado do texto */
fieldset.opcoes { border: 0; padding: 0; margin: 10px 0 0; background: none; display: flex; flex-direction: column; gap: 6px; }
fieldset.opcoes legend { font-size: 12px; color: var(--muted); font-weight: 500; padding: 0; margin-bottom: 4px; }
fieldset.opcoes .check { font-size: 13px; color: var(--ink-2); }
.link-sair { padding: 0 8px; }

/* ---------- conteúdo ---------- */
main { padding: 22px 24px 48px; min-width: 0; }
header.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
header.top h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.5px; }
header.top p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.card h2 { font-size: 14px; margin: 0 0 10px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card h2 small { color: var(--muted); font-weight: 400; font-size: 12px; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (max-width: 1100px) { .g2, .g3, .g-2-1 { grid-template-columns: 1fr; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.kpi span { color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.kpi b { display: block; font: 600 26px/1.2 var(--mono); margin-top: 6px; letter-spacing: -.5px; }
.kpi.alerta { border-color: var(--amber-line); }
.kpi.alerta b { color: var(--amber); }
/* Minha carteira › Meu dia: subtexto e lista nos cartões, faixa de dias e a lista */
.kpi small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.kpi .linhas { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; line-height: 1.6; }
.kpi.destaque { border-color: var(--accent-fill); box-shadow: 0 0 0 1px var(--accent-fill) inset, var(--shadow); }
.carteira-periodo { margin-bottom: 14px; }
.carteira-periodo .pilulas { margin-bottom: 8px; }
.carteira-periodo .dica-dias { font-size: 12px; }
.dias { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.dia { display: flex; flex-direction: column; gap: 2px; padding: 8px; min-width: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--ink-2); }
.dia:hover { text-decoration: none; border-color: var(--accent); }
.dia:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.dia.hoje { border-color: var(--accent); }
.dia.on { border-color: var(--accent-fill); box-shadow: 0 0 0 1px var(--accent-fill) inset; background: var(--accent-soft); }
.dia.on:focus-visible { box-shadow: 0 0 0 1px var(--accent-fill) inset, 0 0 0 3px var(--accent-ring); }
.dia .sem { font: 600 10.5px var(--mono); letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.dia b { font-size: 15px; color: var(--ink); }
.dia .n { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dia .v { font: 600 12.5px var(--mono); color: var(--accent); white-space: nowrap; }
a.pilula:hover { text-decoration: none; }
/* link de filtro com o estado no aria-current (aria-pressed é só de botão): o mesmo visual da pílula pressionada */
a.pilula[aria-current="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.kpi b .un { font-size: 12px; letter-spacing: .04em; }
.kpi .kpi-cliente { display: block; color: var(--ink); font-weight: 600; font-size: 13px; margin-bottom: 2px; }
/* mais específico que "table[data-grid]... td" (nowrap), que vem depois */
table[data-grid].fixa tr td.carteira-sit { white-space: normal; text-overflow: clip; line-height: 1.7; }
.carteira-tit { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.carteira-tit h2 { margin: 0; }
.carteira-tit .muted { font-size: 12.5px; }
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 1px 4px 1px 10px;
  border: 1px solid var(--blue-line); border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12.5px; }
.filtro-chip a { padding: 0 6px; border-radius: 999px; color: inherit; }
.filtro-chip a:hover { text-decoration: none; background: var(--blue-line); }
.carteira-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 10px 14px; font-size: 12.5px; }
@media (max-width: 1100px) { .dias { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- tabelas e grades ---------- */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--hair); vertical-align: top; }
th {
  font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--th-bg);
  white-space: nowrap; border-bottom: 1px solid var(--line);
}
tr:hover > td { background: var(--hover); }
td.num, th.num { text-align: right; white-space: nowrap; }
td.num { font-family: var(--mono); font-size: 12.5px; }
td .sub { display: block; color: var(--muted); font-size: 11.5px; }
td.num .sub.nota-preco { white-space: normal; min-width: 14em; }   /* explicação do preço (contrato/normal): quebra */
tr.item-row td { border-bottom: none; }
tr.item-det td { padding-top: 0; }
.empty { color: var(--muted); text-align: center; padding: 24px; }

/* grade de dados: cartão sem margem interna, barra de ferramentas, cabeçalho fixo, zebra, linhas finas entre colunas */
.card.grade { padding: 0; overflow: hidden; }
/* Retorno: pedido sem confirmação de leitura (faixa âmbar na primeira coluna) */
table[data-grid] tr.pedido-novo td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
table[data-grid] tr.pedido-novo td:first-child .btn { margin-left: 6px; }
table[data-grid].fixa tr td.cel-quebra { white-space: normal; text-overflow: clip; }
/* Retorno: selo de status compacto (cabe "CONFIRMADO" em 100px) */
table.retorno-pedidos td .b { padding: 1px 6px; letter-spacing: 0; }
table.retorno-pedidos form.inline { display: inline-block; white-space: nowrap; }   /* motivo + Recusar não se separam */
.card.grade > .tbl-wrap { max-height: calc(100vh - 230px); overflow: auto; }
table[data-grid] { font-size: 12.5px; }
table[data-grid] th { position: sticky; top: 0; z-index: 2; }
table[data-grid] td { padding: 4px 10px; }          /* compacta: mais linhas na tela */
table[data-grid] th { padding-top: 5px; padding-bottom: 5px; }
table[data-grid] .b { line-height: 16px; }
table[data-grid] th + th, table[data-grid] td + td { border-left: 1px solid var(--hair); }
table[data-grid]:not([data-grid="pares"]) > tbody > tr:nth-child(even):not(:hover) > td { background: var(--zebra); }
/* listas: uma linha por registro (detalhes na mesma linha, em cinza); rolagem lateral quando não cabe.
   .quebra = grade com campos de edição ou textos longos (depara em massa, log) */
table[data-grid]:not([data-grid="pares"]):not(.quebra) td { white-space: nowrap; vertical-align: middle; }
table[data-grid]:not([data-grid="pares"]):not(.quebra) td .sub { display: inline; margin-left: 8px; font-size: 11.5px; }
table[data-grid]:not([data-grid="pares"]):not(.quebra) td .sub:empty { display: none; }
/* De-para Síntese › Marcas: cabe na largura do cartão — o nome do Id_Marca e as marcas vistas quebram linha (antes, sem
   quebra, a grade passava de 3.000 px com rolagem lateral) */
#grade-marcas td { vertical-align: top; }
#grade-marcas td:nth-child(1) { min-width: 200px; }
#grade-marcas td:nth-child(3) { width: 170px; }
#grade-marcas td:nth-child(3) .sub { max-width: 220px; overflow-wrap: anywhere; }
#grade-marcas td:nth-child(4) { width: 196px; }
#grade-marcas td:nth-child(5) { min-width: 220px; }
#grade-marcas td:nth-child(5) .b { white-space: normal; text-align: left; margin: 1px 2px 1px 0; }
#grade-marcas td:nth-child(6) { white-space: nowrap; }
/* a grade cabe na largura da tela, sem rolagem lateral: o texto longo é cortado com "…" (inteiro ao passar o mouse).
   .fixa = larguras definidas no <colgroup>; nas demais, só células de texto encolhem (números, datas, campos e
   botões ficam inteiros) */
table.fixa { table-layout: fixed; }
table.fixa td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.fixa th { white-space: normal; line-height: 1.25; vertical-align: bottom; }   /* título longo: 2 linhas, nunca "…" */
table.fixa th, table.fixa td { padding-left: 6px; padding-right: 6px; }              /* compacta: sobra para o Cliente */
table.fixa .barra { width: 30px; }
td.janela-aberta { color: var(--accent); font-weight: 600; }
td.urgente { color: var(--red); font-weight: 700; }
/* cotação: resumo do comprador / resposta automática / condições em 3 linhas compactas */
.card.resumo { padding: 8px 14px; }
.resumo-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font-size: 12.5px; color: var(--ink-2); padding: 3px 0; }
.resumo-linha + .resumo-linha { border-top: 1px dashed var(--line); }
.resumo-linha > b { width: 170px; flex: none; color: var(--ink); font-weight: 600; }
.resumo-linha > span:not(:last-child)::after, .resumo-linha > a:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--line-2); }
.resumo-linha em { font-style: normal; color: var(--muted); }
.resumo-linha details { margin-left: 8px; }
/* "Respondida por" na grade de cotações: o nome corta com "…", o "+N" (outros que responderam) fica sempre à vista */
.quem-cel { display: flex; gap: 4px; min-width: 0; align-items: baseline; }
.quem-cel .quem-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-cel > .muted { flex: none; }
.quem-resp b { white-space: nowrap; }
/* lista longa num pop-up (pagamentos aceitos da cotação): o resumo não cresce; o pop-up rola se for grande */
details.pop { display: inline-block; position: relative; margin-left: 0; }
details.pop > summary { display: inline; cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop > .pop-corpo { position: absolute; z-index: 40; left: 0; top: 100%; margin-top: 4px; min-width: 240px;
  max-width: min(560px, 90vw); max-height: 320px; overflow-y: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow-pop); padding: 8px 12px; }
details.pop .pop-corpo ul { margin: 0; padding: 0; list-style: none; columns: 2 160px; column-gap: 18px; }
details.pop .pop-corpo li { break-inside: avoid; padding: 1px 0; white-space: nowrap; color: var(--ink-2); }
/* qualificar um item: uma linha só */
form.qualificar { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
form.qualificar select, form.qualificar input[type=text] { height: 28px; font-size: 12.5px; }
form.qualificar .q-sug { flex: 2 1 280px; min-width: 200px; }
form.qualificar .q-busca { flex: 1.4 1 220px; min-width: 180px; }
form.qualificar .q-busca input { width: 100%; }
form.qualificar .q-fator { width: 64px; }
form.qualificar .q-escopo { font-size: 12px; }

/* preço: variação sobre a tabela e edição na própria linha da resposta */
.var-pos { color: var(--amber); }
.var-neg { color: var(--red); }
.preco-edit { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.preco-edit label { font-size: 11.5px; color: var(--muted); }
.preco-edit input[type=text] { width: 100px; height: 26px; font-size: 12.5px; text-align: right; font-family: var(--mono); }
td.atencao { color: var(--amber); font-weight: 600; }
table[data-grid]:not([data-grid="pares"]):not(.quebra):not(.fixa) td:not(.num):not(.nowrap):not(:has(form, input, select, button, .barra)):not(:has(> .b:only-child)) {
  max-width: 0; overflow: hidden; text-overflow: ellipsis;
}
th[data-ordenavel]:not([data-ordenavel="nao"]) { cursor: pointer; user-select: none; }
th[data-ordenavel]:not([data-ordenavel="nao"]):hover { color: var(--ink); background: var(--hover); }
th[data-ordenavel]:not([data-ordenavel="nao"])::after { content: "↕"; margin-left: 5px; opacity: .35; font-size: 10px; }
th[aria-sort="ascending"]::after { content: "▲"; opacity: .9; color: var(--accent); }
th[aria-sort="descending"]::after { content: "▼"; opacity: .9; color: var(--accent); }
th[aria-sort] { color: var(--accent); }
tr.selecionada > td, tr.selecionada:hover > td { background: var(--accent-soft) !important; }
.grade-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 12px; background: var(--card);
  border-bottom: 1px solid var(--line);
}
.grade-barra .busca { position: relative; display: flex; align-items: center; }
.grade-barra .busca .ic { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.grade-barra .busca input { padding-left: 30px; height: 30px; width: 280px; font-size: 12.5px; }
.grade-barra .contagem { color: var(--muted); font: 12px var(--mono); margin-left: auto; }
.grade-barra .btn { height: 30px; }
.grade-barra .btn .ic { width: 15px; height: 15px; }
tr.oculta { display: none; }
[hidden] { display: none !important; }                   /* .btn e afins não reaparecem escondidos */
/* filtro por coluna (data-filtro-coluna): funil pequeno no título abre a janela de filtro */
th .th-filtro { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; padding: 0; border: 0;
  border-radius: 3px; background: transparent; color: var(--muted); opacity: .5; cursor: pointer; vertical-align: -3px; }
/* o funil fica no canto direito do título (não quebra linha em coluna estreita); a seta ↕ sai — ▲▼ ao ordenar ficam */
table[data-grid] th.tem-filtro { padding-right: 21px; }
th.tem-filtro .th-filtro { position: absolute; right: 3px; bottom: 5px; margin: 0; }
th.tem-filtro[data-ordenavel]:not([aria-sort])::after { content: none; }
th:hover .th-filtro, th .th-filtro:focus-visible, th .th-filtro[aria-expanded="true"] { opacity: 1; background: var(--hover); color: var(--ink); }
th .th-filtro:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring); }
th .th-filtro .ic { width: 11px; height: 11px; }
th.filtrado { color: var(--accent); }
th.filtrado .th-filtro { opacity: 1; color: #fff; background: var(--accent-fill); }
.filtro-pop { position: absolute; z-index: 60; width: 280px; background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 10px; display: flex; flex-direction: column; gap: 8px;
  font-size: 12.5px; }
.filtro-pop .fp-tit { font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.filtro-pop input[type=search] { width: 100%; height: 30px; }
.fp-lista { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.fp-lista label { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 4px; cursor: pointer; }
.fp-lista label:hover { background: var(--hover); }
.fp-lista label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-lista label input { margin: 0; flex: none; }
.fp-lista small { color: var(--muted); font-family: var(--mono); }
.fp-lista .fp-todos { border-bottom: 1px solid var(--line); border-radius: 4px 4px 0 0; margin-bottom: 2px; font-weight: 600; }
.fp-mais { margin: 4px 6px; color: var(--muted); font-size: 12px; }
.fp-acoes { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* (antigo) linha de caixas de filtro sob os títulos */
tr.filtro-col th { padding: 4px 5px; text-transform: none; letter-spacing: 0; font: 400 12px var(--fonte); vertical-align: middle; }
tr.filtro-col input { width: 100%; height: 26px; padding: 2px 7px; font-size: 12px; border-radius: 4px; border-color: var(--line); box-sizing: border-box; }
tr.filtro-col input.ativo { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* lista suspensa de várias escolhas (ex.: UFs) */
details.multi { position: relative; }
details.multi > summary {
  list-style: none; display: block; height: 32px; line-height: 30px; padding: 0 26px 0 10px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--field); color: var(--ink); font-size: 13px; max-width: 230px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative;
}
details.multi > summary::-webkit-details-marker { display: none; }
details.multi > summary::after { content: "▾"; position: absolute; right: 9px; color: var(--muted); }
details.multi[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.multi-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 8px; display: grid;
  grid-template-columns: repeat(6, 54px); gap: 2px 4px;
}
.multi-lista label { display: flex; align-items: center; gap: 5px; font: 12.5px var(--mono); padding: 3px 5px; border-radius: 4px; cursor: pointer; }
.multi-lista label:hover { background: var(--hover); }
.multi-lista label:has(input:checked) { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.multi-acoes { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line); }
/* portais (Cotações, Retorno): uma coluna com o nome inteiro — a lista cresce até o nome mais longo (sem barra de
   rolagem lateral: minmax(0, 1fr) deixa a coluna caber na largura; nome maior que a tela corta com reticências) */
details.multi.portais > summary { min-width: 140px; }
details.multi.portais .multi-lista { grid-template-columns: minmax(0, 1fr); width: max-content; min-width: 100%;
  max-width: min(520px, calc(100vw - 32px)); max-height: 360px; overflow: hidden auto; }
details.multi.portais .multi-lista label { font: 13px var(--fonte); }
details.multi.portais .multi-lista label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* cotação: "só itens qualificados" esconde o item sem depara e a linha de detalhe que o acompanha */
table.so-qualif > tbody > tr[data-qualif="0"], table.so-qualif > tbody > tr[data-qualif="0"] + tr.item-det { display: none; }
table.so-sug > tbody > tr[data-sug="0"], table.so-sug > tbody > tr[data-sug="0"] + tr.item-det { display: none; }
table.so-resp > tbody > tr[data-resp="0"], table.so-resp > tbody > tr[data-resp="0"] + tr.item-det { display: none; }
.filtros-itens { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.filtros-itens > label { white-space: nowrap; }
table.so-naoqualif > tbody > tr[data-naoqualif="0"], table.so-naoqualif > tbody > tr[data-naoqualif="0"] + tr.item-det { display: none; }
table.so-estoque > tbody > tr[data-estoque="0"], table.so-estoque > tbody > tr[data-estoque="0"] + tr.item-det { display: none; }

/* ---------- selos ---------- */
/* sempre em maiúsculas (pedido do usuário, 29/09): RESPONDIDO, MANUAL, PREÇO DO VENDEDOR, OK… — o texto no HTML e no
   CSV continua como está; só a exibição muda */
.b {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
  white-space: nowrap; background: var(--gray-soft); color: var(--gray-ink); border: 1px solid transparent; line-height: 18px;
  text-transform: uppercase; letter-spacing: .03em;
}
.b.verde, .b.APROVADO, .b.CONFIRMADO, .b.ACEITO { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.b.RESPONDIDO, .b.RESPONDIDA { background: var(--azul-fill); color: #fff; border-color: var(--azul-fill); }
.b.PRONTO { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-line); }
.b.azul, .b.NOVA, .b.AGUARDANDO, .b.A_LANCAR, .b.CONTRATO, .b.INFO { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); }
.b.ambar, .b.SEM_SALDO, .b.PARCIAL, .b.SEM_PRECO, .b.MARCA_NAO_HOMOLOGADA, .b.REVISAR_FATOR, .b.SUBSTITUTO, .b.AVISO { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.b.vermelho, .b.SEM_DEPARA, .b.CANCELADA, .b.CANCELADO, .b.REPROVADO, .b.RECUSADO, .b.SEM_RESPOSTA, .b.ERRO { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.b.IA { background: var(--violet-soft); color: var(--violet); border-color: var(--violet-line); }
.b.NOVA::before, .b.AGUARDANDO::before, .b.PARCIAL::before, .b.A_LANCAR::before, .b.RESPONDIDA::before, .b.SEM_RESPOSTA::before, .b.CANCELADA::before, .b.ENCERRADA::before, .b.IGNORADA::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.score { font-weight: 700; font-family: var(--mono); }
.ufs-grade { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ufs-regiao { display: flex; flex-direction: column; gap: 4px; }
.ufs-lista { display: flex; flex-wrap: wrap; gap: 2px 10px; max-width: 330px; }
.nao-achada p { margin: 0 0 8px; }
/* painel: a coluna da direita acompanha a altura da esquerda; "Últimos pedidos aprovados" fica com todo o espaço que
   sobra (rola por dentro) e Integrações encosta no fim */
.painel-lateral { display: flex; flex-direction: column; }
.card.aprovados { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 240px; }
.card.aprovados .aprovados-lista { flex: 1 1 0; min-height: 0; overflow-y: auto; contain: size; }
.card.aprovados td:first-child { max-width: 0; width: 100%; }
.card.aprovados td:first-child .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nao-achada .aviso-pausa { color: var(--amber); font-weight: 600; }
.nao-achada-portal { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); }
input.busca-select { width: 100%; margin-bottom: 4px; }
.filtros input.busca-select { width: 170px; margin-bottom: 0; }
.filtros select[data-pesquisavel] { max-width: 300px; }       /* a lista aberta mostra o nome inteiro */
input.busca-select.sem-resultado { border-color: var(--red-line); background: var(--red-soft); }
.busca-grupos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.busca-grupos input[type=search] { flex: 1; min-width: 280px; }
details.card.grupo-sub { padding: 0; }
details.grupo-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; padding: 12px 16px; }
details.grupo-sub > summary::-webkit-details-marker { display: none; }
details.grupo-sub > summary::before { content: "▸"; color: var(--muted); display: inline-block; transition: transform .15s; }
details.grupo-sub[open] > summary::before { transform: rotate(90deg); }
details.grupo-sub > summary .grupo-codigos { flex-basis: 100%; margin: 0 0 0 18px; }
details.grupo-sub[open] > summary .grupo-codigos { display: none; }
details.grupo-sub > .grupo-corpo { padding: 0 16px 14px; border-top: 1px solid var(--line); }
/* substitutos › Sugestões: cada sugestão é um formulário (produtos marcados, nome, direção, criar/descartar) */
.sug-secao { font-size: 14px; font-weight: 600; margin: 18px 0 8px; display: flex; align-items: baseline; gap: 8px; }
.sug-secao small { font: 600 11px var(--mono); padding: 0 6px; border-radius: 4px; background: var(--gray-soft); color: var(--gray-ink); }
.sug-resumo { font-size: 12.5px; margin: -4px 0 10px; }
details.sugestao .sug-avisos { margin: 10px 0 8px; }
details.sugestao form[data-sugestao] { margin-top: 10px; }
.sug-acoes { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.sug-acoes input[type=text] { flex: 1 1 260px; max-width: 480px; height: 30px; }
.sug-acoes .check { align-items: center; gap: 6px; }
.sug-acoes .check input { margin-top: 0; }
form[data-sugestao] .btn:disabled { opacity: .5; cursor: not-allowed; }
button.b.alterna { cursor: pointer; font-family: inherit; }
button.b.alterna:hover { border-color: var(--accent); }
input.fator-informar { border-color: var(--amber-line); background: var(--amber-soft); }
.score.alto { color: var(--green); } .score.medio { color: var(--amber); } .score.baixo { color: var(--red); }

/* ---------- formulários ---------- */
input, select, textarea, button { font: inherit; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], input[type=file], select, textarea {
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 5px 9px; background: var(--field); color: var(--ink); min-width: 0;
  font-size: 13px; transition: border-color .12s, box-shadow .12s;
}
input[type=text], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], select { height: 32px; }
input[type=datetime-local] { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 4px 8px; height: 32px;
  background: var(--field); color: var(--ink); font: 12.5px var(--mono); }
.filtro-venc { display: inline-flex; align-items: center; gap: 6px; }
/* relatório de itens: termos de produto numa linha própria do filtro */
.termos-linha { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.termos-linha label { font-size: 12px; color: var(--muted); font-weight: 500; }
.termos-linha > input { flex: 1; min-width: 240px; }
/* grupos de termos na aba Itens: uma coluna, nome e nº de termos */
details.multi.grupos > summary { min-width: 150px; }
details.multi.grupos .multi-lista { grid-template-columns: minmax(0, 1fr); width: 300px; max-height: 360px; overflow: hidden auto; }
details.multi.grupos .multi-lista label { font: 13px var(--fonte); }
details.multi.grupos .multi-lista label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.multi.grupos .multi-lista small { color: var(--muted); font-family: var(--mono); }
details.multi.grupos .multi-lista p { margin: 4px 6px; font-size: 12.5px; }
details.multi.grupos .multi-acoes { flex-wrap: wrap; }
.termos-aviso { flex-basis: 100%; margin: 0; }
/* tela de grupos de termos */
/* a Lista fica com a largura que sobra (o max-width:0 do data-grid põe as reticências); os botões, com a deles */
.grupos-termos td.lista-termos { color: var(--ink-2); font-size: 12px; width: 100%; }
.editor.editor-grupo { flex-direction: column; align-items: stretch; }   /* .editor (mais abaixo) alinha no fim */
.editor-grupo textarea { min-height: 220px; font: 12.5px/1.5 var(--mono); resize: vertical; }
.editor-grupo .linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editor-grupo .linha .campo { flex: 1 1 260px; min-width: 0; }      /* no celular não passa da moldura */
/* dica da regra das pesquisas (% e -), numa linha própria logo abaixo da caixa */
.filtros .dica-busca, .busca-grupos .dica-busca, .painel-topo .dica-busca { flex-basis: 100%; margin: 0; }
.dica-busca b { font-family: var(--mono); color: var(--ink-2); }
.previa-ex { color: var(--muted); font-size: 12px; }
table.itens-rel td.mono { font-size: 11.5px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
textarea { width: 100%; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; font-size: 13px; white-space: nowrap;
  box-shadow: var(--shadow); transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--hover); border-color: var(--line-2); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn.pri { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 600; }
.btn.pri:hover { background: var(--accent-fill-strong); border-color: var(--accent-fill-strong); }
.btn.envio { background: var(--envio); border-color: var(--envio); color: var(--envio-ink); font-weight: 700; }
.btn.envio:hover { background: var(--envio-strong); border-color: var(--envio-strong); color: var(--envio-ink); }
.btn.perigo { color: var(--red); }
.btn.perigo:hover { background: var(--red-soft); border-color: var(--red-line); }
.btn.sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn.link { border: none; background: none; color: var(--accent); padding: 0; font-weight: 500; height: auto; box-shadow: none; }
form.inline { display: inline; }
.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; padding: 8px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 16px; }
.campo label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.campo input, .campo select { width: 100%; }
/* opção (rádio/caixa) dentro de um campo: botão ao lado do texto, não o rótulo de bloco do campo */
.campo label.check { display: flex; font-size: 13px; color: var(--ink-2); font-weight: 400; margin-bottom: 0; }
.campo label.check input { width: auto; flex: none; }
.campo .ajuda, .ajuda { font-size: 12px; color: var(--muted); margin-top: 3px; }
.check { display: flex; gap: 8px; align-items: flex-start; }
.check input { margin-top: 3px; accent-color: var(--accent-fill); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent-fill); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0 0 12px; background: var(--card); }
legend { font-weight: 600; padding: 0 6px; font-size: 13.5px; }

/* ---------- mensagens ---------- */
.flash { padding: 9px 12px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid; font-size: 13px; }
.flash.ok { background: var(--green-soft); border-color: var(--green-line); color: var(--msg-ok); }
.flash.erro { background: var(--red-soft); border-color: var(--red-line); color: var(--msg-erro); }
.nota { background: var(--blue-soft); border: 1px solid var(--blue-line); border-radius: var(--radius); padding: 9px 12px; color: var(--msg-nota); margin-bottom: 12px; font-size: 13px; }
.nota.ambar { background: var(--amber-soft); border-color: var(--amber-line); color: var(--msg-ambar); }
.nota.vermelho { background: var(--red-soft); border-color: var(--red-line); color: var(--msg-erro); }
/* aviso aberto pelo link (#id): o "Responder agora" parado leva ao aviso fixo da cotação, sem repetir o motivo */
.nota:target { scroll-margin-top: calc(var(--top-h) + 12px); border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }

/* ---------- detalhes ---------- */
dl.info { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
dl.info dt { color: var(--muted); }
dl.info dd { margin: 0; }
details summary { cursor: pointer; color: var(--accent); }
.resp-list { margin: 4px 0 0; padding: 0; list-style: none; }
.resp-list li { padding: 5px 9px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 6px; margin: 4px 0; }
.resp-list li.nao-enviado { border-color: var(--line); background: var(--surface-2); }
.editor { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 10px 12px; margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.editor .campo { min-width: 160px; }
.linha-tempo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.barra { height: 6px; background: var(--hair); border-radius: 2px; overflow: hidden; width: 70px; display: inline-block; vertical-align: middle; }
.barra i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* autocomplete */
.ac { position: relative; }
.ac-list { position: absolute; z-index: 1000; top: 100%; left: 0; right: 0; min-width: 380px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); max-height: 280px; overflow-y: auto; }
.ac-list div { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ac-list div:hover, .ac-list div.on { background: var(--accent-soft); }
.ac-list small { color: var(--muted); }

/* abas (ex.: um integrador por aba nas regras) */
.abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
.abas a { padding: 8px 14px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; color: var(--muted); font-weight: 500; margin-bottom: -1px; font-size: 13px; }
.abas a:hover { text-decoration: none; color: var(--ink); background: var(--hover); }
.abas a.on { background: var(--card); border-color: var(--line-2); color: var(--accent); font-weight: 600; box-shadow: 0 -2px 0 var(--accent-fill) inset; }
.abas a.inativo { opacity: .6; }
/* abas com botões (trocam na hora, sem recarregar) */
.abas button { padding: 7px 12px; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; color: var(--muted);
  font-weight: 500; margin-bottom: -1px; font-size: 13px; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.abas button:hover { color: var(--ink); background: var(--hover); }
.abas button.on { background: var(--card); border-color: var(--line-2); color: var(--accent); font-weight: 600; box-shadow: 0 -2px 0 var(--accent-fill) inset; }
.abas button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.abas .n { font: 600 11px var(--mono); padding: 0 6px; border-radius: 4px; background: var(--gray-soft); color: var(--gray-ink); }
.abas button.on .n, .abas a.on .n { background: var(--accent-soft); color: var(--accent); }
.abas.abas-sm { margin-bottom: 10px; }
/* abas em links que trocam na hora (app.js) e, sem ele, abrem a página na aba (Integrações) */
.abas a[role=tab] { display: inline-flex; align-items: center; gap: 6px; }
.abas a[role=tab]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
/* LED de ativo/inativo (sem apagar o texto do inativo: o contraste continua) e ponto de aviso do portal (âmbar:
   suspensão com hora para voltar ou aviso, redondo; vermelho: parado, quadrado — a forma distingue sem a cor) */
.abas .led { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--placeholder); }
.abas .led.ligado { background: var(--green); border-color: var(--green); }
.abas .alerta { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--amber-dot); box-shadow: 0 0 0 2px var(--amber-soft); }
.abas .alerta.vermelho { border-radius: 1px; background: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
/* painel focável (o de Chamadas, sem nada focável dentro): o mesmo anel das abas */
.painel-aba:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: var(--radius); }
/* html.js (base.html, antes de desenhar: sem "piscar"): só o painel da aba aparece; sem JavaScript, todos — como
   antes — e a barra de abas some */
html:not(.js) .so-js, html.js .sem-js { display: none; }
html.js .painel-aba:not(.on) { display: none; }
html.js .paineis-portais { display: block; }
/* dados comerciais por UF */
.tabela-uf input[type=text], .tabela-uf input[type=number], .tabela-uf select { width: 100%; min-width: 80px; height: 28px; }
.tabela-uf td { padding: 3px 8px; vertical-align: middle; }
.tabela-uf tr.geral td { background: var(--blue-soft); }

/* tela de preços de um produto: pílulas de região, valor para as UFs exibidas, grade do novo preço e o Salvar preso
   ao pé da tela (sem overflow no cartão: o rodapé sticky gruda na janela). O layout em blocos vem da largura do
   próprio cartão (container), não da janela: com o menu aberto, a grade aperta antes */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
.pp-volta { margin: 0 0 4px !important; font-size: 12.5px; }
.pp-produto .pp-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 15px; margin-bottom: 4px; }
.pp-produto .pp-nome .mono { color: var(--muted); font-size: 13px; }
.card.pp-editor { padding: 0; position: relative; container: precos / inline-size; }
.pp-editor .tbl-wrap { position: relative; }          /* o texto só para leitor de tela (.sr) não alarga a página */
.pp-barra { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.pp-topo { border-radius: var(--radius) var(--radius) 0 0; }
.pp-massa { background: var(--surface-2); }
.pp-massa > label { font-size: 13px; color: var(--ink-2); }
.pp-rot { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-right: 2px; }
.pilulas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pilula { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 500 12.5px var(--fonte); cursor: pointer; }
.pilula .n { font: 600 11px var(--mono); color: var(--muted); }
.pilula:hover { border-color: var(--accent); color: var(--ink); }
.pilula:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.pilula[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.pilula[aria-pressed="true"] .n { color: #fff; opacity: .85; }
.pilula.com-alteracao::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); border: 2px solid var(--card); }
.pp-por { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
.pp-campo-rs { display: inline-flex; align-items: center; gap: 6px; font: 12.5px var(--mono); color: var(--muted); }
.pp-campo-rs input { width: 140px; text-align: right; font-family: var(--mono); }
.pp-campo-rs input[aria-invalid="true"] { border-color: var(--red); background: var(--red-soft); }
.pp-ajuda { flex-basis: 100%; margin: 0; }
.pp-status { flex-basis: 100%; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.pp-status:empty { display: none; }
.pp-fix { flex-basis: 100%; margin: 0; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.pp-fix[hidden] { display: none; }
.pp-editor .pp-msg { margin: 10px 14px; }
.pp-msg ul { margin: 6px 0 8px; padding-left: 20px; }
table.tabela-precos { font-size: 12.5px; }
table.tabela-precos th, table.tabela-precos td { padding: 4px 10px; vertical-align: middle; }
table.tabela-precos th + th, table.tabela-precos td + td, table.tabela-precos th + td { border-left: 1px solid var(--hair); }
/* o nome da UF quebra linha (o th global é nowrap): "RN Rio Grande do Norte · Nordeste" sozinho alargava a grade */
table.tabela-precos tbody th { font: 400 12.5px var(--fonte); text-transform: none; letter-spacing: 0; color: var(--ink);
  background: transparent; border-bottom: 1px solid var(--hair); white-space: normal; min-width: 130px; }
table.tabela-precos tbody th .sub { display: inline; margin-left: 4px; white-space: nowrap; }
table.tabela-precos tbody tr.pp-unico th .sub { display: block; margin: 1px 0 0; white-space: normal; }
table.tabela-precos tbody tr:nth-child(even):not(:hover) > * { background: var(--zebra); }
table.tabela-precos tbody tr:hover > * { background: var(--hover); }
table.tabela-precos tr.pp-unico > * { background: var(--blue-soft) !important; border-bottom-color: var(--blue-line); }
.tabela-precos td.pp-atual { white-space: nowrap; }
.tabela-precos td.pp-atual .pp-un { display: block; margin: 1px 0 0; }
.tabela-precos .herdado { color: var(--muted); }
/* a dica (erro, aviso, "= R$ …", "/un") fica embaixo do campo: ao lado, com nowrap, alargava a grade */
.tabela-precos td.pp-novo { min-width: 140px; }
.tabela-precos td.pp-novo input { width: 120px; height: 28px; text-align: right; font-family: var(--mono); font-size: 12.5px;
  scroll-margin: 70px 0 90px; }
.tabela-precos td.pp-novo input:disabled { opacity: .45; }
.tabela-precos td.pp-novo .pp-dica { display: block; margin: 2px 0 0; max-width: 340px; line-height: 1.35; }
.tabela-precos td.pp-novo .pp-dica:empty { display: none; }
.tabela-precos input[aria-invalid="true"] { border-color: var(--red); background: var(--red-soft); }
.tabela-precos .pp-dica.erro { color: var(--red); font-weight: 600; }
.tabela-precos .pp-dica.aviso { color: var(--amber); font-weight: 600; }
.tabela-precos td.pp-rem .check { align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.tabela-precos td.pp-rem .check input { margin: 0; scroll-margin: 70px 0 90px; }
table.tabela-precos tbody tr.alterada > * { background: var(--accent-soft) !important; }
table.tabela-precos tbody tr.alterada > th { box-shadow: inset 3px 0 0 var(--accent-fill); }
table.tabela-precos tbody tr.fora-escala > * { background: var(--amber-soft) !important; }
table.tabela-precos tbody tr.fora-escala > th { box-shadow: inset 3px 0 0 var(--amber); }
table.tabela-precos tbody tr.com-erro > * { background: var(--red-soft) !important; }
table.tabela-precos tbody tr.com-erro > th { box-shadow: inset 3px 0 0 var(--red); }
.tabela-precos tr.removendo .pp-atual > span:first-child { text-decoration: line-through; }
.pp-rodape { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 -6px 16px rgba(1, 37, 125, .06); }
.pp-rodape .muted { flex: 1 1 280px; font-size: 12px; }
.pp-rodape .btn { white-space: nowrap; }
.pp-rodape .btn.pri:disabled { opacity: .55; cursor: default; }
/* cartão estreito (celular, menu aberto em janela pequena): cada UF vira um bloco (nome em cima; atual, novo, margem
   e remover embaixo) — nem a página nem a grade rolam de lado */
@container precos (max-width: 620px) {
  .pp-por { margin-left: 0; }
  .pp-rodape { padding: 8px 12px; flex-wrap: nowrap; }
  .pp-rodape .muted, .pp-rodape .pp-longo { display: none; }   /* o rodapé preso fica numa linha: não cobre a lista */
  .pp-campo-rs input { width: 120px; }
  table.tabela-precos thead { display: none; }
  table.tabela-precos, table.tabela-precos tbody { display: block; }
  table.tabela-precos tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 12px;
    border-bottom: 1px solid var(--hair); }
  table.tabela-precos tbody tr[hidden] { display: none; }
  table.tabela-precos tbody tr > * { padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  table.tabela-precos tbody tr.alterada { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent-fill); }
  table.tabela-precos tbody tr.fora-escala { background: var(--amber-soft); box-shadow: inset 3px 0 0 var(--amber); }
  table.tabela-precos tbody tr.com-erro { background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
  table.tabela-precos tbody tr.pp-unico { background: var(--blue-soft); }
  table.tabela-precos tbody th { grid-column: 1 / -1; }
  table.tabela-precos td.pp-atual { text-align: left; white-space: normal; }
  table.tabela-precos td.pp-atual .pp-un { display: inline; margin-left: 6px; }
  table.tabela-precos td.pp-novo { grid-column: 1 / -1; min-width: 0; }
  table.tabela-precos td.pp-novo input { width: 100%; max-width: 200px; }
  table.tabela-precos td.pp-rem { grid-column: 1 / -1; }
  table.tabela-precos td.pp-rem:empty { display: none; }
  table.tabela-precos td[data-rotulo]::before { content: attr(data-rotulo); margin-right: 6px; color: var(--muted);
    font: 500 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
}

/* grade de Produtos: as 27 UFs cabem na largura da tela (~1900 px) sem rolagem lateral — colunas estreitas e, na
   célula de preço, o preço e embaixo a margem (a linha já tem duas: descrição e princípio ativo). O preço único e o de
   cada UF mudam na própria célula (app.js); números nunca são cortados, só os textos ("…", inteiro ao passar o mouse) */
#grade-produtos { font-size: 12px; }
#grade-produtos th { white-space: normal; vertical-align: bottom; line-height: 1.2; font-size: 10px; letter-spacing: .02em; }
#grade-produtos th, #grade-produtos td { padding: 3px 4px; line-height: 1.25; }
#grade-produtos th[data-ordenavel]:not([aria-sort])::after { content: none; }       /* ↕ alargava as colunas estreitas */
#grade-produtos td .sub { display: block; margin-left: 0; font-size: 11px; }
#grade-produtos td.mono { font-size: 11.5px; max-width: none; }                     /* o código nunca é cortado */
#grade-produtos .b { font-size: 9.5px; padding: 0 4px; line-height: 15px; letter-spacing: 0; }
#grade-produtos td.emb { white-space: normal; font-size: 11px; }                   /* "CX c/ 30" / "FA": duas linhas */
#grade-produtos th:first-child, #grade-produtos td:first-child { padding-left: 4px; padding-right: 2px; }
#grade-produtos input[type=checkbox] { margin: 0; vertical-align: middle; }
#grade-produtos col.c-sel { width: 22px; }
#grade-produtos col.c-cod { width: 56px; }
#grade-produtos col.c-marca { width: 72px; }
#grade-produtos col.c-emb { width: 66px; }
#grade-produtos col.c-saldo, #grade-produtos col.c-custo, #grade-produtos col.c-preco { width: 38px; }
#grade-produtos col.c-faixa { width: 56px; }
#grade-produtos col.c-subst { width: 64px; }
/* números: fonte do texto (mais estreita que a mono), 10,5 px; de 1.000 para cima, 9 px — "15.000,00" na largura de
   "999,99" (a coluna é a do maior valor dela) */
#grade-produtos td.num { font: 10.5px/1.25 var(--fonte); }
#grade-produtos th.pg, #grade-produtos td.pg, #grade-produtos td.num { padding-left: 1px; padding-right: 3px; }
#grade-produtos td.num.pg-g { font-size: 9px; }
#grade-produtos td.pg small { display: block; font-size: 9px; color: var(--muted); }
/* a margem vem em data-m, fora do texto da célula: o CSV, a ordenação e o filtro da grade leem só o preço */
#grade-produtos td.pg small::after { content: attr(data-m); }
#grade-produtos td.pg small.var-neg { color: var(--red); }
#grade-produtos[data-preco-url] td.pg { cursor: text; }
#grade-produtos[data-preco-url] td.pg:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
#grade-produtos td.pg input { width: 100%; min-width: 0; height: 18px; padding: 0 2px; border-radius: 3px; font: 10.5px var(--fonte);
  text-align: right; }
#grade-produtos td.pg.gravando { opacity: .5; }
#grade-produtos td.pg.gravado { background: var(--green-soft) !important; }
#grade-produtos td.pg.com-erro { background: var(--red-soft) !important; box-shadow: inset 0 0 0 1px var(--red-line); }
.barra-produtos { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 6px 12px; }
.barra-produtos .lote-faixa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra-produtos .pg-status { margin-left: auto; font-weight: 600; }
.barra-produtos .pg-status.erro { color: var(--red); }
.barra-produtos .pg-status:empty { display: none; }

/* depara em massa: grade de produtos do ERP presa ao pé da tela enquanto a lista de itens rola */
.painel-erp { position: sticky; bottom: 0; z-index: 5; box-shadow: var(--shadow-pop); }
.painel-topo { padding: 9px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.painel-aviso { padding: 5px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.painel-aviso.erro { color: var(--red); font-weight: 600; }
#erp-lista-wrap { max-height: 28vh; overflow-y: auto; }
/* a lista de itens rola com a página, por baixo do painel do ERP preso no rodapé (sem altura fixa própria) */
#form-lote .card.grade > .tbl-wrap { max-height: none; }
#erp-lista-wrap th { position: sticky; top: 0; }
.sem-estoque { color: var(--red); font-weight: 600; }
.com-estoque { color: var(--green); font-weight: 600; }
.prod-info { font-size: 12px; margin-top: 4px; }
tr.aplicado > td { background: var(--accent-soft) !important; }

.login { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; place-items: center; min-height: 100vh;
  background: linear-gradient(140deg, #00072b 0%, #01257d 62%, #106ebe 100%); }
.login-arco { position: absolute; width: 720px; height: 720px; right: -220px; top: -200px; transform: rotate(40deg);
  filter: drop-shadow(0 0 24px rgba(0, 255, 255, .45)); pointer-events: none; }
.login .card { position: relative; width: 380px; padding: 26px 28px; border: 0; box-shadow: 0 24px 60px rgba(0, 7, 43, .45); }
.login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login-marca svg { width: 42px; height: 42px; flex: none; }
.login-marca b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--accent-strong); }
.login-marca small { display: block; margin-top: 5px; font: 500 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.login-marca .arco { stroke: #01257d; } .login-marca .check { stroke: #106ebe; }     /* sobre claro: sem neon */
.versao-login { margin: 14px 0 0; text-align: right; font: 500 10px var(--mono); color: var(--muted); }
.erro-pagina { max-width: 460px; } .erro-pagina h1 { margin: 4px 0 8px; font-size: 20px; }
.erro-codigo { font: 500 13px var(--mono); } .erro-codigo b { color: var(--accent-strong); letter-spacing: .06em; }
:root[data-tema="escuro"] .login-marca b { color: #fff; }
:root[data-tema="escuro"] .login-marca .arco { stroke: #fff; }                     /* sobre escuro: arco branco, check menta */
:root[data-tema="escuro"] .login-marca .check { stroke: #0ffcbe; }

/* tela estreita: menu sempre na barra de ícones (mesmas regras do recolhido) */
@media (max-width: 900px) {
  body, html.side-min body { grid-template-columns: var(--side-min) minmax(0, 1fr); }
  nav.side .brand { padding: 0; justify-content: center; }
  nav.side .brand-txt, nav.side .rot, .grupo-tit span, .grupo-tit .seta { display: none; }
  .grupo-tit { padding: 6px 0; justify-content: center; cursor: default; pointer-events: none; }
  .grupo-tit::before { content: ""; display: block; width: 24px; border-top: 1px solid var(--nav-line); }
  .grupo.fechado .grupo-itens { display: block; }
  nav.side a { justify-content: center; padding: 9px 0; }
  nav.side a .pill { position: absolute; top: 2px; right: 4px; font-size: 9.5px; padding: 0 4px; line-height: 14px; }
  nav.side a:hover::after {
    content: attr(data-label); position: fixed; left: calc(var(--side-min) + 6px); transform: translateY(-2px);
    background: var(--ink); color: var(--card); padding: 5px 10px; border-radius: 6px; font-size: 12.5px; white-space: nowrap;
    box-shadow: var(--shadow-pop); z-index: 50; pointer-events: none;
  }
  .side-toggle, .menu-topo { display: none; }
  .topbar .chip:not(.link-sair) { display: none; }
}

/* impressão: só o conteúdo, grades inteiras, sempre no claro */
@media print {
  :root, :root[data-tema="escuro"] { color-scheme: light; --bg: #fff; --card: #fff; --ink: #000; --ink-2: #222; --muted: #555; --zebra: #fff; --th-bg: #f4f4f4; }
  body { display: block; background: #fff; }
  nav.side, .topbar, .grade-barra, .painel-erp, tr.filtro-col, .th-filtro, .filtro-pop { display: none !important; }
  .card, .card.grade, .card.grade > .tbl-wrap { max-height: none !important; overflow: visible !important; box-shadow: none; }
  table[data-grid] th { position: static; }
}