/* ===========================================================================
 * Vertrum · camada de experiência do portal
 *
 * Padrão visual atualizado pelo dono em 25/10/2026 (prévia cinza,
 * docs/ux/referencia-aprovada/ e docs/ux/padrao-visual-aprovado-2026-10-22.md):
 *   · papel #F4F4F3, cinza #E2E2E2, petróleo #075E69, Inter local;
 *   · barra lateral clara, item atual petróleo sólido com texto branco;
 *   · cartões brancos de 12px; destaques cinza com limites nítidos;
 *     cores semânticas nos selos e ícones (crítico continua vermelho);
 *   · valores nítidos e tabulares, textos de apoio breves;
 *   · movimento sutil só em gráficos e indicadores, desligado por
 *     prefers-reduced-motion;
 *   · em toque: campos de 16px, alvos de 44px e áreas seguras.
 *
 * Esta folha é a fonte de verdade do tema claro e do layout (DESIGN.md). Ela
 * veste o HTML que o produto já escreve: não existe markup exclusivo daqui
 * além do que `portal-ux.js` monta (menu, barra de topo, busca global).
 * É UMA camada: cada componente é definido uma vez, na sua seção. Quem for
 * mudar algo muda na seção do componente — não acrescenta revisão no fim.
 *
 * Seções
 *   0 · fontes e tokens          7 · selos, chips e abas
 *   1 · base e escala de texto   8 · tabelas
 *   2 · barra lateral            9 · avisos e vereditos
 *   3 · barra de topo           10 · lista + detalhe
 *   4 · cabeçalho de tela       11 · módulos (Precificação, Contratos,
 *   5 · cartões e indicadores        Concorrentes, Preços, Agenda, demais)
 *   6 · botões e campos         12 · diálogos, autenticação, página pública
 *                               13 · movimento · 14 · responsivo · 15 · impressão
 * ======================================================================== */

/* =======================================================================
 * 0 · fontes e tokens
 * ===================================================================== */
@font-face { font-family: "Inter"; src: url("./fontes/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fontes/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fontes/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("./fontes/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* forma e medidas */
  --ux-sidebar: 260px;
  --ux-command: 64px;
  --ux-content: 1320px;
  --ux-radius-xs: 6px;    /* selo, tecla */
  --ux-radius-sm: 8px;    /* botão, campo, aba */
  --ux-radius: 12px;      /* cartão, painel, tabela */
  --ux-radius-lg: 16px;   /* diálogo */
  --ux-alvo: 44px;        /* alvo mínimo de toque */
  --ux-safe-top: env(safe-area-inset-top, 0px);
  --ux-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ux-safe-left: env(safe-area-inset-left, 0px);
  --ux-safe-right: env(safe-area-inset-right, 0px);
  --font-body: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);   /* serifa só na marca, que é imagem */
}

:root:not([data-theme="dark"]) {
  color-scheme: light;
  /* Neutros aprovados: fundo, apoio e destaque possuem funções distintas. */
  --bg: #F4F4F3;
  --surface: #FFFFFF;
  --surface-2: #EFEFED;
  --ux-cabeca: #E2E2E2;
  --ux-highlight: #E2E2E2;
  --ux-border: #92928E;
  --ux-border-strong: #5C5C5C;
  --ink: #262626;
  --ink-2: #383838;
  --ink-3: #505050;
  --muted: var(--ink-3);
  --ux-icone: #3D5259;
  --line: #B8B8B5;
  --ux-linha-campo: #82827E;
  --brand: #075E69;
  --brand-strong: #103E4D;
  --brand-soft: #E7EEED;
  --ux-tinta-suave: #EFEFED;
  --ux-linha-sel: #E2E2E2;
  --ux-linha-hover: #EFEFED;
  --on-brand: #FFFFFF;
  --ux-sobre-verde: #E0ECEF;
  --ux-anel: var(--brand);
  /* Dourado reservado à marca e aos pequenos sinais de atenção. */
  --accent: #A87C35;
  --accent-strong: #713700;
  --accent-soft: #FFDF9D;
  --ux-ouro-fundo: var(--ux-highlight);
  --ux-ouro-linha: var(--ux-border-strong);
  --ux-ouro-icone: #825000;
  --ok: #145C34;   --ok-bg: #D3ECD9;
  --warn: #713700; --warn-bg: #FFDF9D;
  --crit: #A62222; --crit-bg: #FCE1DE;
  --shadow: none;
  --radius: 12px;
  --ux-shadow: var(--shadow);
  --ux-shadow-lift: 0 5px 14px rgb(20 39 45 / .09);
}

:root[data-theme="dark"] { --on-brand: #102724; }

/* =======================================================================
 * 1 · base e escala de texto
 *
 * Escala (padrão aprovado, com o ajuste de leitura do portal real):
 *   título de tela 30 · título de painel 17 · valor de indicador 28
 *   corpo 15 · célula de tabela 14 · rótulo de campo 14
 *   legenda e metadado 13 · rótulo de grupo em caixa alta 12
 *   campos em toque 16 (sem zoom no iOS)
 * ===================================================================== */
body.ux-portal {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  caret-color: var(--brand);
  accent-color: var(--brand);
  scrollbar-color: color-mix(in srgb, var(--ink-3) 40%, transparent) transparent;
}
body.ux-portal button,
body.ux-portal input,
body.ux-portal select,
body.ux-portal textarea { font-family: inherit; scroll-margin-top: calc(var(--ux-command) + 18px); }
body.ux-portal h1,
body.ux-portal h2,
body.ux-portal h3 { font-family: var(--font-body); }
body.ux-portal ::selection { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--ink); }
body.ux-portal :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body.ux-portal a { color: var(--brand); text-underline-offset: 3px; }
body.ux-portal a:hover { color: var(--brand-strong); }

/* No portal do cliente, número não usa fonte monoespaçada: a pilha "mono"
   vira a do texto, com algarismos tabulares onde há valor. */
body.ux-portal main[data-app] { --font-mono: var(--font-body); }
body.ux-portal main[data-app] :is(.mono, .tbl td, .t-value, .lic-side .vm, input.mono, input[inputmode="decimal"], input[inputmode="decimal"]::placeholder) {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

/* ---- tamanhos embutidos ------------------------------------------------
 * Há `font-size` de 9 a 12px no atributo `style`, quase todo dentro de
 * literais de template do JS (notas da Precificação, legendas). A regra
 * abaixo é o piso de legenda: nada de conteúdo fica abaixo de 13px.
 * Substitui o antigo piso de 16px, que achatava a hierarquia. Dívida
 * declarada: some no dia em que os literais forem limpos.               */
body.ux-portal main[data-app] :is(
  [style*="font-size:9px"], [style*="font-size: 9px"],
  [style*="font-size:10"], [style*="font-size: 10"],
  [style*="font-size:11"], [style*="font-size: 11"],
  [style*="font-size:12"], [style*="font-size: 12"]) {
  font-size: 13px !important;
}

body.ux-portal a.ux-skip {
  position: fixed;
  z-index: 200;
  top: calc(10px + var(--ux-safe-top));
  left: 12px;
  transform: translateY(-200%);
  padding: 12px 16px;
  border-radius: var(--ux-radius-sm);
  background: var(--brand-strong);
  color: var(--on-brand);
  text-decoration: none;
}
body.ux-portal a.ux-skip:focus { transform: none; }

/* =======================================================================
 * 2 · barra lateral (o elemento `.topbar` do HTML)
 * ===================================================================== */
body.ux-portal .topbar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 55;
  width: var(--ux-sidebar);
  height: 100dvh;
  padding: var(--ux-safe-top) 0 var(--ux-safe-bottom) var(--ux-safe-left);
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
}
body.ux-portal .topbar > .brand {
  min-height: calc(var(--ux-command) + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
}
/* A marca é o render original aprovado: não se recria, não se tinge. */
body.ux-portal .brand img {
  display: block;
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
body.ux-portal .brand svg { width: 32px; height: 32px; flex: 0 0 auto; }
body.ux-portal .brand-word { font-size: 21px; }
body.ux-portal .brand-tag { font-size: 10px; }

body.ux-portal .nav {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 12px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
body.ux-portal .ux-nav-section { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Grupo: rótulo, não botão. Nada se expande no desktop. */
.ux-grupo { margin: 0 0 clamp(12px, 2.2vh, 22px); }
.ux-grupo[hidden] { display: none; }
.ux-grupo:last-of-type { margin-top: auto; margin-bottom: 0; }
.ux-grupo > h2 {
  margin: 0 11px 6px;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.ux-portal .nav button {
  position: relative;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  margin: 1px 0;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
body.ux-portal .nav button .ux-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ux-icone); }
body.ux-portal .nav button:hover { background: var(--ux-linha-hover); color: var(--ink); }
/* Ícones distinguem assuntos; a seleção continua identificada também pelo texto. */
body.ux-portal .nav button:is([data-goto="qualificacao"], [data-goto="perfis"]) .ux-ic { color: #0B6874; }
body.ux-portal .nav button:is([data-goto="busca"], [data-goto="funil"], [data-goto="mercado"]) .ux-ic { color: #215EC3; }
body.ux-portal .nav button:is([data-goto="docs"], [data-goto="habilitacao"], [data-goto="alertas"]) .ux-ic { color: #A35300; }
body.ux-portal .nav button:is([data-goto="contratos"], [data-goto="juridico"], [data-goto="usuarios"]) .ux-ic { color: #7840BA; }
body.ux-portal .nav button:is([data-goto="analise"], [data-goto="concorrentes"]) .ux-ic { color: #176645; }
body.ux-portal .nav button[data-goto="precificacao"] .ux-ic { color: #3D5291; }
/* Item atual: petróleo sólido, texto branco e contorno pelo foco. */
body.ux-portal .nav button[aria-current="page"] {
  background: var(--brand-strong);
  color: var(--on-brand);
  font-weight: 700;
}
body.ux-portal .nav button[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-strong);
}
body.ux-portal .nav button[aria-current="page"] .ux-ic { color: var(--on-brand); }
/* Contagem de alertas legível e separada do item atual. */
body.ux-portal .nav .nbadge {
  margin-left: auto;
  min-width: 24px;
  padding: 0 7px;
  border-radius: var(--ux-radius-xs);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--ux-ouro-linha);
  color: var(--accent-strong);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}

body.ux-portal .ux-nav-close[hidden] { display: none !important; }
body.ux-portal .ux-nav-close { align-self: flex-end; margin: 8px 12px 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--brand); cursor: pointer; font: inherit; }

/* =======================================================================
 * 3 · barra de topo: trilha, busca e conta
 * ===================================================================== */
.ux-commandbar {
  position: fixed;
  z-index: 45;
  inset: 0 0 auto var(--ux-sidebar);
  height: calc(var(--ux-command) + var(--ux-safe-top));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--ux-safe-top) calc(24px + var(--ux-safe-right)) 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ux-menu-button { display: none; }
.ux-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-3); font-size: 13px; }
.ux-breadcrumb strong { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.ux-breadcrumb small { display: none; }
.ux-search-button {
  margin-left: auto;
  min-width: 230px;
  min-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--ux-linha-campo);
  border-radius: var(--ux-radius-sm);
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ux-search-button:hover { border-color: var(--brand); background: var(--ux-linha-hover); color: var(--ink-2); }
.ux-search-button kbd {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ux-cabeca);
  color: var(--ink-3);
  font: 12px var(--font-body);
}

/* A conta mora na barra de topo. */
body.ux-portal .ux-commandbar .usermenu { position: relative; flex: 0 0 auto; margin-left: 2px; }
body.ux-portal .subscriber {
  margin: 0;
  min-height: var(--ux-alvo);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
body.ux-portal .subscriber:hover { background: var(--surface-2); }
body.ux-portal .subscriber .avatar { width: 34px; height: 34px; background: var(--ux-tinta-suave); color: var(--brand-strong); font-size: 12.5px; font-weight: 600; }
body.ux-portal .subscriber .sub-txt { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ux-portal .usermenu-pop {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  bottom: auto;
  width: 280px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--ux-radius);
  background: var(--surface);
  box-shadow: 0 18px 44px rgb(10 31 36 / .12);
}
body.ux-portal .usermenu-pop .um-nome { font-size: 15px; font-weight: 600; }
body.ux-portal .usermenu-pop .um-email { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
body.ux-portal .usermenu-pop .um-papel { font-size: 13px; color: var(--ink-3); }
body.ux-portal .um-item { min-height: var(--ux-alvo); font-size: 14.5px; border-radius: var(--ux-radius-sm); }
body.ux-portal .um-item:hover { background: var(--ux-linha-hover); }

/* =======================================================================
 * 4 · área de conteúdo e cabeçalho de tela
 * ===================================================================== */
body.ux-portal main[data-app] {
  width: calc(100% - var(--ux-sidebar));
  max-width: none;
  min-height: calc(100vh - 70px);
  margin: 0 0 0 var(--ux-sidebar);
  padding: calc(var(--ux-command) + var(--ux-safe-top) + 32px) calc(32px + var(--ux-safe-right)) calc(56px + var(--ux-safe-bottom)) 32px;
}
body.ux-portal main[data-app] > .view { width: min(100%, var(--ux-content)); margin: 0 auto; }

/* Grade, e não `flex`: sobretítulo, título e linha de apoio continuam filhos
   diretos de `.view-head` (há teste que conta esses filhos) e empilham na
   primeira coluna; a ação principal ocupa a segunda. */
body.ux-portal .view-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  align-items: start;
  margin: 0 0 30px;
}
body.ux-portal .view-head > * { grid-column: 1; min-width: 0; }
body.ux-portal .eyebrow,
body.ux-portal .view-head .eyebrow {
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.ux-portal .view-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 2.5vw, 34px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.035em;
}
body.ux-portal .view-head p {
  max-width: 72ch;
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}
body.ux-portal .view-head p.sub { color: var(--ink-3); font-size: 14px; }
body.ux-portal .view-head p:empty { display: none; }
/* Slot da ação principal (montado em portal-ux.js a partir de `data-ux-acao`). */
body.ux-portal .view-head > .ux-head-acoes {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ux-head-acoes:empty { display: none; }
.ux-head-data { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
#view-busca .view-head #cobertura-abrir { justify-self: start; margin: 4px 0 2px; padding: 0; min-height: 32px; font-size: 14px; }

/* módulo de qualificação (Seleção diária, Acervo, Análise, Perfis) */
body.ux-portal .q-app { max-width: var(--ux-content); padding: 0; font-size: 15px; }
body.ux-portal .q-app h1,
body.ux-portal .q-app h2,
body.ux-portal .q-app h3 { font-family: var(--font-body); letter-spacing: -.02em; }
body.ux-portal .q-app h2 { font-size: 20px; }
body.ux-portal .q-app h3 { font-size: 17px; }
body.ux-portal .q-app .q-eyebrow { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
body.ux-portal .q-app :focus-visible { outline: 2px solid var(--brand); }
body.ux-portal .q-view-intro { margin: 0 0 24px; }
body.ux-portal .q-view-intro h1 { margin: 0; color: var(--ink); font-size: clamp(28px, 2.5vw, 34px); letter-spacing: -.035em; }
body.ux-portal .q-view-intro p { max-width: 72ch; margin-top: 6px; color: var(--ink-2); font-size: 15px; }
@media (min-width: 1100px) {
  #qualificacao-app { position: relative; }
  #qualificacao-app > .q-acoes { position: absolute; right: 0; top: -82px; margin: 0; }
  #view-qualificacao > .view-head { padding-right: 410px; }
}

/* O primeiro passo usa o registro visível; nenhuma prioridade é inventada. */
body.ux-portal .ux-start-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .48fr);
  align-items: center;
  gap: 28px;
  margin: 0 0 30px;
  padding: 28px;
  border: 1px solid var(--ux-border-strong);
  border-radius: var(--ux-radius-lg);
  background: var(--ux-highlight);
  color: var(--ink);
}
body.ux-portal .q-app .ux-start-task h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
.ux-start-copy { min-width: 0; }
.ux-start-copy > p { max-width: 64ch; margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.ux-start-copy .ux-start-context { margin-top: 16px; }
.ux-start-context strong { display: block; color: var(--ink); font-weight: 650; }
.ux-start-context span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 14px; }
.ux-start-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
body.ux-portal .q-app .ux-start-action > .q-primary { min-height: 50px; padding: 13px 18px; line-height: 1.4; }
.ux-start-deadline { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
  body.ux-portal .ux-start-task { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .ux-start-action { align-items: stretch; }
  body.ux-portal .q-app .ux-start-task h2 { font-size: 24px; }
}
@media (max-width: 380px) { body.ux-portal .ux-start-task { padding: 20px; } }

/* =======================================================================
 * 5 · cartões e indicadores
 * ===================================================================== */
body.ux-portal :is(.panel, .tile, .callout, .guia, .lic-card, .ux-ld-lista, .ux-ld-detalhe, .q-card, .q-stat, .auth-card, #sc-app .cartao, #sc-app .kpi) {
  border: 1px solid var(--ux-border);
  border-radius: var(--ux-radius);
  background-color: var(--surface);
  box-shadow: var(--shadow);
}
/* Assuntos: o cabeçalho e o divisor delimitam o bloco, mesmo sem cor. */
body.ux-portal {
  --ux-panel-pad: 24px;
  --ux-topic: #536479;
  --ux-topic-soft: var(--surface-2);
  --ux-topic-line: var(--ux-border);
  --ux-topic-operation: #245B85;
  --ux-topic-operation-soft: var(--surface-2);
  --ux-topic-market: #65428B;
  --ux-topic-market-soft: var(--surface-2);
  --ux-topic-relationship: #24675E;
  --ux-topic-relationship-soft: var(--surface-2);
}
body.ux-portal .panel { padding: var(--ux-panel-pad); }
body.ux-portal .view .panel { border-color: var(--ux-border); }
body.ux-portal .view .panel > h3:first-child,
body.ux-portal .view .panel > .ce-topo,
body.ux-portal #ci-concorrentes > [data-bloco="lista"] > div:first-child {
  margin: calc(-1 * var(--ux-panel-pad)) calc(-1 * var(--ux-panel-pad)) 20px !important;
  padding: 16px var(--ux-panel-pad);
  border-bottom: 1px solid var(--ux-topic-line);
  border-radius: 9px 9px 0 0;
  background: var(--ux-topic-soft);
}
body.ux-portal .view .panel > h3 { color: var(--ink); }
body.ux-portal .view .panel + .panel { margin-top: 32px; }
body.ux-portal #view-contratos {
  --ux-topic: var(--ux-topic-operation);
  --ux-topic-soft: var(--ux-topic-operation-soft);
  --ux-topic-line: var(--ux-border);
}
body.ux-portal #view-concorrentes {
  --ux-topic: var(--ux-topic-market);
  --ux-topic-soft: var(--ux-topic-market-soft);
  --ux-topic-line: var(--ux-border);
}
body.ux-portal #cc-restricoes {
  --ux-topic: #536479;
  --ux-topic-soft: var(--surface-2);
  --ux-topic-line: var(--ux-border);
  margin-top: 44px;
}
body.ux-portal #cc-crm {
  --ux-topic: var(--ux-topic-relationship);
  --ux-topic-soft: var(--ux-topic-relationship-soft);
  --ux-topic-line: var(--ux-border);
  margin-top: 44px;
}
body.ux-portal #ci-mercado { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ux-border); }
body.ux-portal #cc-crm h4 {
  margin-top: 28px !important;
  padding-top: 18px;
  border-top: 1px solid var(--ux-topic-line);
  color: var(--ink) !important;
}
body.ux-portal #ct-antecedencia { margin-top: 40px; }
body.ux-portal #view-precificacao { --ux-topic: #3D5291; --ux-topic-soft: var(--surface-2); --ux-topic-line: var(--ux-border); }

body.ux-portal .panel + .panel { margin-top: 18px; }
body.ux-portal .panel h3 { color: var(--ink); font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -.02em; }
body.ux-portal .panel h4 { font-size: 15px; font-weight: 600; }
body.ux-portal .panel p { font-size: 15px; line-height: 1.55; }
body.ux-portal .sub,
body.ux-portal .panel .sub { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
body.ux-portal .obs,
body.ux-portal .f-ajuda { color: var(--ink-3); font-size: 13px; }

/* Indicadores: rótulo curto, valor nítido, apoio breve. */
body.ux-portal .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
body.ux-portal .tile {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
}
body.ux-portal .t-label,
body.ux-portal .tile .t-label,
body.ux-portal #sc-app .kpi .rotulo {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
body.ux-portal .t-value,
body.ux-portal .tile .t-value {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.ux-portal .tile .t-value small { font-size: 17px; font-weight: 500; color: var(--ink-2); }
body.ux-portal .t-sub,
body.ux-portal .tile .t-sub { color: var(--ink-3); font-size: 13px; line-height: 1.45; }

/* Indicador prioritário no cinza aprovado. Só onde a primeira leitura da tela
   está clara — Agenda, Contratos, Concorrentes e o resumo da Precificação —
   ou onde o markup pedir com `.tile-primary`. Indicador que já carrega cor
   de estado no próprio valor (Alertas) preserva essa cor: ela é a mensagem. */
body.ux-portal .tile.tile-primary,
body.ux-portal :is(#tri-kpis, #cc-tiles, #ct-app > .tiles) > .tile:first-child:not(.tile-accent):not(:has([style*="color"])),
body.ux-portal #pf-totais > div:first-child > div:first-child {
  border-color: var(--ux-border-strong);
  background: var(--ux-highlight);
  color: var(--ink);
  box-shadow: none;
}
body.ux-portal :is(.tile.tile-primary, :is(#tri-kpis, #cc-tiles, #ct-app > .tiles) > .tile:first-child:not(.tile-accent):not(:has([style*="color"])), #pf-totais > div:first-child > div:first-child) :is(.t-label, .t-sub) { color: var(--ink-2); }
body.ux-portal :is(.tile.tile-primary, :is(#tri-kpis, #cc-tiles, #ct-app > .tiles) > .tile:first-child:not(.tile-accent):not(:has([style*="color"])), #pf-totais > div:first-child > div:first-child) .t-value { color: var(--ink); }

/* Destaque neutro; o valor e os selos conservam o significado do estado. */
body.ux-portal .tile.tile-accent {
  border-color: var(--ux-ouro-linha);
  background: var(--ux-highlight);
}
body.ux-portal .tile.tile-accent .t-label { color: var(--ink-2); }

body.ux-portal .hero {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  margin-bottom: 24px;
  padding: 28px;
  border-radius: var(--ux-radius);
  border: 1px solid var(--ux-border-strong);
  background: var(--ux-highlight);
  color: var(--ink);
  box-shadow: none;
}
body.ux-portal .hero h1 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; line-height: 1.14; letter-spacing: -.04em; }
body.ux-portal .hero .lede { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
body.ux-portal .hero .eyebrow { color: var(--ink-2); }
body.ux-portal .hero .callout { background: var(--surface); border-color: var(--ux-border); box-shadow: none; }
body.ux-portal .hero .callout h3,
body.ux-portal .hero .callout p { color: var(--ink); }
body.ux-portal .hero .callout .when { color: var(--ink-2); }
body.ux-portal .hero .btn { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
body.ux-portal .hero .btn:hover { background: var(--brand-strong); }
body.ux-portal .hero .btn.ghost { background: var(--surface); border-color: var(--ux-linha-campo); color: var(--brand-strong); }

body.ux-portal .callout { padding: 20px; border-color: var(--ux-border-strong); background: var(--ux-highlight); }
body.ux-portal .callout .when { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--accent-strong); }
body.ux-portal .callout p { font-size: 14.5px; }

/* Cartão de licitação (Busca). */
body.ux-portal .lic-card { padding: 20px 22px; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
body.ux-portal .lic-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: var(--ux-shadow-lift); }
body.ux-portal .lic-card .orgao { font-size: 16px; font-weight: 650; }
body.ux-portal .lic-card .num { font-size: 13px; }
body.ux-portal .lic-card .objeto { font-size: 15px; }
body.ux-portal .lic-card .meta { font-size: 13.5px; }
body.ux-portal .lic-side .vm-l { font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
body.ux-portal .lic-side .vm { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
body.ux-portal .lic-side .vg { font-size: 13px; }
body.ux-portal .lic-card.destaque { outline: 2px solid var(--brand); outline-offset: 2px; }
body.ux-portal .match { font-size: 13.5px; }

/* Barras e trilhas (gráficos simples do portal). */
body.ux-portal .barlist .row { font-size: 14px; }
body.ux-portal .barlist .track { height: 10px; border-radius: 0 5px 5px 0; background: var(--surface-2); }
body.ux-portal .barlist .fill { border-radius: 0 5px 5px 0; background: var(--brand); }
body.ux-portal .barlist .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
body.ux-portal .pstep { border-radius: var(--ux-radius-sm); background: var(--surface-2); font-size: 13px; }
body.ux-portal .pstep .n { font-family: var(--font-body); font-size: 12px; font-variant-numeric: tabular-nums; }
body.ux-portal .pstep b { font-size: 14px; }
body.ux-portal .pstep.human { border-color: var(--ux-ouro-linha); background: var(--ux-ouro-fundo); }

/* Área de envio. */
body.ux-portal .dropzone {
  margin-bottom: 18px;
  padding: 30px 24px;
  border: 1.5px dashed var(--ux-linha-campo);
  border-radius: var(--ux-radius);
  background: var(--surface);
  font-size: 15px;
  transition: border-color .15s ease, background-color .15s ease;
}
body.ux-portal .dropzone .big { font-size: 17px; }
body.ux-portal .dropzone .hint { font-size: 13.5px; }
body.ux-portal .dropzone:hover,
body.ux-portal .dropzone.drag,
body.ux-portal .dropzone:focus-visible { border-color: var(--brand); background: var(--ux-tinta-suave); }
body.ux-portal .upitem { border-radius: var(--ux-radius-sm); font-size: 14px; }
body.ux-portal .upitem .fname { font-size: 13.5px; }
body.ux-portal .upitem .bar,
body.ux-portal .cota-barra { height: 6px; border-radius: 3px; background: var(--surface-2); }
body.ux-portal .upitem .bar i,
body.ux-portal .cota-barra i { border-radius: 3px; background: var(--brand); }
body.ux-portal .cota-linha { font-size: 13px; }

body.ux-portal .empty {
  padding: 32px 20px;
  border: 1px dashed var(--ux-linha-campo);
  border-radius: var(--ux-radius);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--ink-3);
  font-size: 14.5px;
}
body.ux-portal .rescount { font-size: 14px; }
body.ux-portal .rescount b { font-size: 15px; }

/* Guia de primeiro uso: três passos, cada um com selo e palavra. */
.guia { margin: 0 0 22px; padding: 18px 20px; }
.guia[hidden] { display: none; }
#perfil-app { margin-top: 18px; }
.guia-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 16px; }
.guia-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.guia-passo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 15px; }
.guia-passo.feito { background: var(--surface-2); }
.guia-passo.feito .sub { display: none; }   /* passo cumprido: o selo e o nome bastam */
.guia-passo .sub { line-height: 1.45; font-size: 14px; }
.guia > p.sub { margin: 10px 0 0; font-size: 14px; }

/* Indicadores e cartões do módulo de qualificação. */
body.ux-portal .q-app .q-stats { gap: 14px; }
body.ux-portal .q-app .q-stat { padding: 18px 20px; }
body.ux-portal .q-app .q-stat strong { font-size: 28px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
body.ux-portal .q-app .q-stat span { font-size: 13px; color: var(--ink-3); }
/* O espaço do relatório inclui a navegação lateral e pode ser menor que a tela. */
body.ux-portal .q-app .q-rel { container: relatorio-diario / inline-size; }
body.ux-portal .q-app .q-rel .q-stats { grid-template-columns: minmax(0, 1fr); }
body.ux-portal .q-app .q-stat strong { max-width: 100%; overflow-wrap: anywhere; }
body.ux-portal .q-app .q-stat .q-stat-money { font-size: clamp(1.125rem, 3cqi, 1.4375rem); }
@container relatorio-diario (min-width: 520px) {
  body.ux-portal .q-app .q-rel .q-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container relatorio-diario (min-width: 1040px) {
  body.ux-portal .q-app .q-rel .q-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.ux-portal .q-app .q-card { padding: 22px; }

/* =======================================================================
 * 6 · botões e campos
 * ===================================================================== */
/* primário: petróleo, um por área */
body.ux-portal :is(.btn, .q-app .q-primary, #sc-app button, #sc-app .botao) {
  min-height: var(--ux-alvo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--brand);
  border-radius: var(--ux-radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 1px 2px rgb(16 87 91 / .12);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.ux-portal :is(.btn, .q-app .q-primary, #sc-app button, #sc-app .botao):hover {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  color: var(--on-brand);
}
body.ux-portal a.btn { text-decoration: none; }

/* secundário: folha branca, borda de campo, texto petróleo */
body.ux-portal :is(.btn.ghost, .q-app button:where(:not(.q-primary, .ux-link, .ux-item)), .q-app .q-link:where(:not(.ux-link)), #sc-app button.secundario, #sc-app .botao.secundario) {
  border: 1px solid var(--ux-linha-campo);
  background: var(--surface);
  color: var(--brand-strong);
  font-weight: 600;
  box-shadow: none;
}
body.ux-portal :is(.btn.ghost, .q-app button:where(:not(.q-primary, .ux-link, .ux-item)), .q-app .q-link:where(:not(.ux-link)), #sc-app button.secundario, #sc-app .botao.secundario):hover {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--ux-linha-campo));
  background: var(--ux-tinta-suave);
  color: var(--brand-strong);
}
body.ux-portal .q-app button,
body.ux-portal .q-app .q-link { min-height: var(--ux-alvo); border-radius: var(--ux-radius-sm); font-size: 14.5px; padding: 10px 18px; }
body.ux-portal :is(.btn.small, #sc-app button.pequeno, #sc-app .botao.pequeno) { min-height: 40px; padding: 7px 13px; font-size: 14px; }
body.ux-portal :is(.btn, .q-app button, #sc-app button):disabled {
  opacity: 1;
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  box-shadow: none;
  cursor: not-allowed;
}

/* Link-ação: o caminho secundário nunca compete com a ação principal. */
body.ux-portal .ux-link,
body.ux-portal .q-app .ux-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--brand);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}
body.ux-portal .ux-link:hover { background: none; color: var(--brand-strong); text-decoration-color: currentColor; }
body.ux-portal .q-app .q-link.q-link-emissao { color: var(--brand); }
.ux-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* campos */
body.ux-portal .field { gap: 6px; }
body.ux-portal :is(.field label, .q-app label, #sc-app label, .f-rotulo, .pf-campo, .ct-filtros label, .auth-card label) {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}
body.ux-portal :is(.field input, .field select, .field textarea,
  .q-app input:not([type="checkbox"]):not([type="radio"]), .q-app select, .q-app textarea,
  #sc-app input:not([type="checkbox"]):not([type="radio"]), #sc-app select, #sc-app textarea,
  .pf-campo input, .pf-campo select, .ct-grade .campo :is(input, select, textarea), .ct-filtros select,
  .auth-card input, .convite-form input, .convite-form select, #ps-nome, #ct-antec,
  main[data-app] table select) {
  min-height: var(--ux-alvo);
  padding: 9px 12px;
  border: 1px solid var(--ux-linha-campo);
  border-radius: var(--ux-radius-sm);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.ux-portal :is(.field input, .field select, .field textarea, .q-app input, .q-app select, .q-app textarea,
  #sc-app input, #sc-app select, #sc-app textarea, .pf-campo input, .pf-campo select, .ct-grade .campo :is(input, select, textarea),
  .ct-filtros select, .auth-card input, .convite-form input, .convite-form select, #ps-nome, #ct-antec, main[data-app] table select, .ux-search-card > input):focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
  box-shadow: none;
}
body.ux-portal :is(input, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
body.ux-portal :is(input, select, textarea):disabled { background-color: var(--surface-2); color: var(--ink-3); }
body.ux-portal .field textarea { min-height: 72px; }
/* O campo de valor mínimo era dourado: o ouro agora é só marca e atenção. */
body.ux-portal .field.minval label { color: var(--ink); }
body.ux-portal .field.minval input { border-color: var(--ux-linha-campo); }
body.ux-portal .field.f-falta select { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }
body.ux-portal .f-obrig { color: var(--accent-strong); font-size: 13px; }
body.ux-portal .filterbar { display: flex; flex-wrap: wrap; gap: 14px; }
body.ux-portal .filterbar > label { min-width: 0; max-width: 100%; }
body.ux-portal .filterbar select { min-width: 0; max-width: 100%; }
body.ux-portal .filter-foot { padding-top: 4px; gap: 10px; }
body.ux-portal .f-grupo { font-size: 14px; font-weight: 600; color: var(--ink); }
body.ux-portal .f-mais > summary { min-height: var(--ux-alvo); display: flex; align-items: center; }

body.ux-portal input[type="checkbox"],
body.ux-portal input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--brand);
}
/* Seletores nativos com a mesma seta em todo o portal. */
body.ux-portal :is(.field select, .q-app select, .pf-campo select, .ct-filtros select, .convite-form select, main[data-app] table select) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B7076' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
body.ux-portal select[multiple] { background-image: none; padding-right: 12px; }

/* interruptor */
body.ux-portal .switch .track2 { background: var(--ux-linha-campo); }
body.ux-portal .switch input:checked + .track2 { background: var(--brand); }
body.ux-portal .switch input:focus-visible + .track2 { outline: 2px solid var(--brand); outline-offset: 2px; }

/* =======================================================================
 * 7 · selos, chips e abas
 * ===================================================================== */
/* Selo: estado com palavra e fundo do par. */
body.ux-portal :is(.pill, .q-badge),
body.ux-portal #sc-app .etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--ux-radius-xs);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}
body.ux-portal .pill.ok { background: var(--ok-bg); color: var(--ok); }
body.ux-portal .pill.warn { background: var(--warn-bg); color: var(--warn); }
body.ux-portal .pill.crit { background: var(--crit-bg); color: var(--crit); }
body.ux-portal :is(.pill.neutral, .q-badge.q-neutro) { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
body.ux-portal .pill.brand { background: var(--brand-soft); color: var(--brand-strong); }
body.ux-portal .pill.accent { background: var(--accent-soft); color: var(--accent-strong); }
body.ux-portal .verificar { color: var(--warn); }

/* Chip: filtro ou escolha. Ligado = petróleo sólido com texto branco. */
body.ux-portal .chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.ux-portal .chip:hover { border-color: var(--ux-linha-campo); background: var(--ux-linha-hover); color: var(--ink); }
body.ux-portal :is(.chip[aria-pressed="true"], .chip.on),
body.ux-portal .f-multi label:has(input:checked),
body.ux-portal :is(.q-app, #sc-app) .q-chips label:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}
body.ux-portal .f-multi { gap: 6px; }
body.ux-portal .f-multi label {
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
body.ux-portal .f-multi label:not(:has(input:checked)):hover { border-color: var(--ux-linha-campo); color: var(--ink); }
body.ux-portal :is(.f-multi, .q-chips) label:has(input:checked) input { accent-color: var(--on-brand); outline: 1px solid var(--on-brand); outline-offset: 1px; }
body.ux-portal .f-multi input { width: 14px; height: 14px; accent-color: var(--brand); }
body.ux-portal .f-multi .f-multi-acao { min-height: 34px; color: var(--brand); font-size: 13.5px; }

/* Abas: troca de seção dentro da tela. Ativa = petróleo sólido + traço dourado
   embaixo, como no protótipo aprovado. Valem para as abas do módulo de
   qualificação, as seções da ficha do contrato, a sub-navegação de
   Esclarecimentos e da Gestão antiga e os filtros de lista. */
body.ux-portal :is(.q-tabs, .ct-secoes, #jr-sub, #gs-sub, .ux-ld-ferramentas:has(> button[aria-pressed])) {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 18px 0 20px;
  padding: 0 0 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-padding-inline: 10px;
}
body.ux-portal .ux-ld-ferramentas:has(> button[aria-pressed]) { margin: 0; border-bottom: 0; flex-wrap: wrap; }
body.ux-portal :is(.q-tabs button, .ct-secoes .chip, #jr-sub .chip, #jr-sub button, #gs-sub .chip, #gs-sub button, .ux-ld-ferramentas button) {
  flex: 0 0 auto;
  min-height: var(--ux-alvo);
  padding: 8px 14px;
  border: 0;
  border-radius: var(--ux-radius-sm) var(--ux-radius-sm) 0 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
body.ux-portal .ux-ld-ferramentas button { border-radius: var(--ux-radius-sm); min-height: 38px; }
body.ux-portal :is(.q-tabs button, .ct-secoes .chip, #jr-sub .chip, #jr-sub button, #gs-sub .chip, #gs-sub button, .ux-ld-ferramentas button):hover {
  background: var(--ux-linha-hover);
  color: var(--ink);
}
body.ux-portal :is(.q-tabs button, .ct-secoes .chip, #jr-sub .chip, #jr-sub button, #gs-sub .chip, #gs-sub button, .ux-ld-ferramentas button)[aria-pressed="true"],
body.ux-portal #gs-sub :is(.chip, button).on {
  border-color: transparent;
  background: var(--brand);
  box-shadow: inset 0 -3px #76BCC4;
  color: var(--on-brand);
  font-weight: 600;
}
body.ux-portal .ux-ld-ferramentas button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); font-weight: 700; }

/* Seleção sobrevive ao hover; foco tem separação branca e contorno real. */
@media (hover: hover) and (pointer: fine) {
  body.ux-portal :is(.nav button[aria-current="page"], .chip[aria-pressed="true"], .chip.on, .q-tabs button[aria-pressed="true"], #jr-sub button[aria-pressed="true"], #gs-sub button[aria-pressed="true"], .ux-ld-ferramentas button[aria-pressed="true"]):hover {
    background: var(--brand-strong); color: var(--on-brand);
  }
}
body.ux-portal :is(.nav button, .chip, .q-tabs button, .ux-ld-ferramentas button):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; box-shadow: 0 0 0 3px var(--surface);
}
@media (forced-colors: active) {
  body.ux-portal :is([aria-current="page"], [aria-pressed="true"], [aria-selected="true"], .chip.on) {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
}

body.ux-portal #view-mercado .mc-marca b { color: var(--ink-2); background: var(--surface); }

/* Seletor de perfil (Concorrentes, Preços): grupo segmentado discreto. */
body.ux-portal :is(#ci-perfil, .mc-perfis) .chip { min-height: 36px; }

/* menu de seções do módulo antigo de contratos = abas em linha */
body.ux-portal #sc-app #sc-menu {
  gap: 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  flex-wrap: nowrap;
}
body.ux-portal #sc-app #sc-menu a {
  min-height: var(--ux-alvo);
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--ux-radius-sm) var(--ux-radius-sm) 0 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}
body.ux-portal #sc-app #sc-menu a:hover { background: var(--ux-linha-hover); color: var(--ink); }
body.ux-portal #sc-app #sc-menu :is(a[aria-current="page"], a.ativo) { background: var(--brand); box-shadow: inset 0 -3px #76BCC4; color: var(--on-brand); font-weight: 700; }

/* =======================================================================
 * 8 · tabelas
 * ===================================================================== */
body.ux-portal :is(.tablewrap, .rolagem, .q-rolagem, .panel > div[style*="overflow-x:auto"]) {
  border: 1px solid var(--line);
  border-radius: var(--ux-radius);
  overflow: auto;
  box-shadow: none;
}
/* Onde houver rolagem lateral (matrizes largas), uma sombra na borda avisa
   que há mais à direita. */
body.ux-portal main[data-app] :is(.tablewrap, .q-rolagem) {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(10 31 36 / .14), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(10 31 36 / .14), transparent) right / 10px 100% no-repeat scroll,
    var(--surface);
}
body.ux-portal :is(.tbl, #sc-app table, .q-tabela) { border-collapse: separate; border-spacing: 0; font-size: 14px; }
body.ux-portal :is(.tbl thead th, .tbl th, #sc-app thead th, .q-tabela th) {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--ux-cabeca);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  white-space: nowrap;
}
body.ux-portal :is(.tbl tbody td, .tbl td, #sc-app tbody td, .q-tabela td) {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
  vertical-align: middle;
}
body.ux-portal .tbl td strong,
body.ux-portal .tbl .docname { color: var(--ink); font-weight: 600; }
body.ux-portal .tbl tr:last-child td { border-bottom: 0; }
body.ux-portal .tbl .obs { font-size: 13px; }
body.ux-portal .tbl .mono { font-size: 14px; }
body.ux-portal :is(.tbl tbody tr:hover, #sc-app tbody tr:hover) td { background: var(--ux-linha-hover); }
/* Linha clicável e linha escolhida (Contratos, Concorrentes, módulo antigo). */
body.ux-portal :is(tr.clicavel, tr.ct-row, tr[data-ni], tr[data-ct-abrir]) { cursor: pointer; }
body.ux-portal :is(tr[aria-current], tr.selected, tr.ct-row.aberto) td { background: var(--ux-linha-sel); }
body.ux-portal :is(tr[aria-current], tr.selected, tr.ct-row.aberto) td:first-child { box-shadow: inset 3px 0 var(--brand); }
body.ux-portal :is(tr.clicavel, tr[data-ni], tr[data-ct-abrir]):focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* tabela de chave e valor */
body.ux-portal .kv { font-size: 14.5px; }
body.ux-portal .kv td { padding: 10px 12px; }
body.ux-portal .kv td:first-child { color: var(--ink-3); font-weight: 500; }

/* Usuários: as ações quebram linha em vez de empurrar a coluna para fora. */
body.ux-portal #tbl-usuarios td.us-acoes { text-align: right; white-space: normal; min-width: 200px; }
body.ux-portal #tbl-usuarios td.us-acoes .btn { margin: 2px 0 2px 6px; }
body.ux-portal #tbl-usuarios td.us-acoes .obs { display: inline-block; max-width: 22ch; text-align: right; }

/* =======================================================================
 * 9 · avisos e vereditos
 *
 * Destaques e orientações usam o cinza aprovado. O título e os selos
 * conservam os estados; erros críticos continuam vermelhos. Nenhum aviso
 * é recolhido, cortado ou escondido aqui.
 * ===================================================================== */
body.ux-portal .verdict {
  margin: 16px 0;
  padding: 20px;
  border: 1px solid var(--ux-border-strong);
  border-radius: var(--ux-radius);
  background: var(--surface);
}
body.ux-portal .verdict .v-title { color: var(--ink); font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -.015em; }
body.ux-portal .verdict p { max-width: 72ch; font-size: 14.5px; color: var(--ink-2); }
body.ux-portal .verdict > .btn { margin-top: 12px; }
body.ux-portal .verdict.warn { border-color: var(--ux-border-strong); background: var(--ux-highlight); }
body.ux-portal .verdict.warn .v-title { color: var(--ink); }
body.ux-portal .verdict.ok { border-color: var(--ux-border-strong); background: var(--ux-highlight); }
body.ux-portal .verdict.ok .v-title { color: var(--ok); }
body.ux-portal .verdict.crit { border-color: color-mix(in srgb, var(--crit) 25%, var(--line)); border-left-color: var(--crit); background: var(--crit-bg); }
body.ux-portal .verdict.crit .v-title { color: var(--crit); }

body.ux-portal .ux-atencao {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--ux-ouro-linha);
  border-radius: var(--ux-radius-sm);
  background: var(--ux-highlight);
  color: var(--ink);
}
body.ux-portal .ux-atencao strong { display: block; font-size: 15px; font-weight: 650; }
body.ux-portal .ux-atencao p { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }
body.ux-portal .ux-atencao.ux-atencao-ok { border-color: var(--ux-border-strong); background: var(--ux-highlight); color: var(--ok); }
body.ux-portal .q-app .q-note:not(.q-error) { border: 1px solid var(--ux-border-strong); background: var(--ux-highlight); color: var(--ink); }
body.ux-portal .q-app .q-reason { border: 1px solid var(--ux-border); border-radius: var(--ux-radius-sm); padding: 16px; background: var(--surface-2); }
body.ux-portal .q-app .q-note.q-alerta-validade { background: var(--ux-highlight); color: var(--ink); }
body.ux-portal .q-app .q-erro-texto { color: var(--crit); font-weight: 600; }

/* Agenda por dia: faixa na cor da urgência. */
body.ux-portal .agenda-bloco { border-radius: var(--ux-radius-sm); background: var(--surface); }
body.ux-portal .agenda-bloco.warn { border-left-color: var(--accent); background: var(--ux-ouro-fundo); }
body.ux-portal .agenda-dia { font-size: 14px; }
body.ux-portal :is(.agenda-item, .obs-item, .ps-item, .timeline .what) { font-size: 14.5px; }
body.ux-portal .agenda-item .obj { font-size: 13.5px; }
body.ux-portal :is(.obs-item .quem, .ps-item .sub, .tri-quem) { font-size: 13px; }
body.ux-portal .tri-linha { font-size: 14px; border-top-style: solid; }
body.ux-portal .timeline .when { font-family: var(--font-body); font-size: 13px; font-variant-numeric: tabular-nums; }
body.ux-portal .timeline li.manual::before { background: var(--accent); }
body.ux-portal #toasts { max-width: min(360px, calc(100vw - 36px)); }
body.ux-portal .toast {
  font-size: 14.5px;
  border-radius: var(--ux-radius-sm);
  max-height: 40dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}
body.ux-portal :is(.doc-group h4, .extrato h4) { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .1em; }

/* =======================================================================
 * 10 · lista + detalhe
 *
 * Três telas usam isto, renderizadas por três códigos diferentes (módulo de
 * qualificação, renderDocs, renderFunil). O vocabulário comum é o que as
 * mantém iguais depois da próxima alteração de qualquer um dos três.
 * ===================================================================== */
.ux-ld {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.ux-ld.ux-ld-larga { grid-template-columns: minmax(440px, 54%) minmax(0, 1fr); }
.ux-ld-lista,
.ux-ld-detalhe { min-width: 0; }
.ux-ld-lista { padding: 20px 16px; }
/* Ficha em branco delimitada pelo cinza, com respiro para a leitura. */
body.ux-portal .ux-ld-detalhe { padding: 26px; border-color: var(--ux-border); outline: none; scroll-margin-top: 90px; }

.ux-ld-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ux-ld-cab h2,
.ux-ld-cab h3 { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.ux-ld-cab select { min-height: 40px; max-width: 220px; }
.ux-ld-ferramentas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ux-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ux-alvo);
  margin-bottom: 12px;
  padding: 6px 12px;
  border: 1px solid var(--ux-linha-campo);
  border-radius: var(--ux-radius-sm);
  background: var(--surface);
  color: var(--ink-3);
}
.ux-busca > svg { flex: 0 0 auto; }
.ux-busca:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); box-shadow: none; }
.ux-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; }
.ux-busca input:focus-visible { outline: 0; }

/* Separador de categoria dentro da lista: agrupa sem esconder. */
.ux-ld-grupo { margin: 16px 0 2px; padding: 0 12px; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ux-ld-grupo:first-of-type { margin-top: 6px; }

/* Cabeçalho de colunas da lista (Acervo). */
.ux-ld-colunas {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 130px 120px;
  gap: 12px;
  align-items: center;
  margin-bottom: 4px;
  padding: 10px 14px;
  border-radius: var(--ux-radius-sm);
  background: var(--ux-cabeca);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

/* O item da lista. É botão porque seleciona, não navega. */
body.ux-portal .ux-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 14px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}
.ux-ld-lista > .ux-item:first-of-type,
body.ux-portal .ux-item:first-child { border-top: 0; }
body.ux-portal .ux-item:hover { background: var(--ux-linha-hover); }
body.ux-portal .ux-item[aria-pressed="true"] { border-left-color: var(--brand); border-radius: 0 var(--ux-radius-xs) var(--ux-radius-xs) 0; background: var(--ux-linha-sel); }
.ux-item-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #7EA2D8;
  border-radius: 9px;
  background: #DDEAFF;
  color: #194B99;
}
.ux-item-ic .ux-ic { width: 20px; height: 20px; }
#view-docs .ux-item-ic { background: #FFDF9D; color: #713700; border-color: #BC811E; }
#view-funil .ux-item-ic { background: #EEE2FF; color: #6832B4; border-color: #AA85CD; }
.ux-item-corpo { flex: 1; min-width: 0; }
.ux-item-corpo strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
/* Na lista, o objeto resume em duas linhas; a ficha mostra o texto inteiro. */
.ux-item-corpo .ux-item-obj {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 2px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 400;
}
.ux-item-corpo small { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; color: var(--ink-3); font-size: 13px; }
.ux-item > .pill,
.ux-item > .q-badge { flex: 0 0 auto; margin-top: 2px; }
body.ux-portal .ux-ld-lista .ux-item-docs { display: flex; margin: -8px 0 0; padding: 0 12px 12px 63px; font-size: 13.5px; }
.ux-fonte { font-size: 13px; color: var(--ink-3); }

/* A linha do Acervo é uma grade de três colunas, não uma pilha. */
body.ux-portal .ux-item-doc {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 130px 120px;
  gap: 12px;
  align-items: center;
  padding: 14px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.ux-item-doc .ux-item-ic { width: 34px; height: 34px; }
.ux-item-doc .ux-item-corpo small { margin-top: 4px; }
.ux-item-doc .ux-doc-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ux-item-doc .ux-doc-data { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
body.ux-portal .ux-item-doc .pill { white-space: normal; max-width: 100%; }

/* A ficha. */
body.ux-portal .ux-voltar { display: none; }
.ux-reg-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ux-reg-cab h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(21px, 1.9vw, 24px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.ux-reg-cab p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ux-reg-cab > .pill,
.ux-reg-cab > .q-badge { flex: 0 0 auto; margin-top: 4px; }

body.ux-portal :is(.ux-secao, .pf-secao) {
  --ux-section-pad: 20px;
  margin-top: 32px;
  padding: var(--ux-section-pad);
  border: 1px solid var(--ux-topic-line);
  border-radius: 12px;
  background: var(--surface);
  min-width: 0;
}
body.ux-portal :is(.ux-secao, .pf-secao) > h3 {
  margin: calc(-1 * var(--ux-section-pad)) calc(-1 * var(--ux-section-pad)) 18px !important;
  padding: 14px var(--ux-section-pad);
  border-bottom: 1px solid var(--ux-topic-line);
  border-radius: 9px 9px 0 0;
  background: var(--ux-topic-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px !important;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.ux-dados { display: flex; gap: 18px; margin: 14px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ux-dados > div { flex: 1; min-width: 0; padding-right: 12px; border-right: 1px solid var(--line); }
.ux-dados > div:last-child { border-right: 0; padding-right: 0; }
.ux-dados dt { margin: 0 0 4px; color: var(--ink-3); font-size: 13px; }
.ux-dados dd { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ux-secao > .ux-dados:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* Acervo: dados em linhas de rótulo e valor. */
body.ux-portal #view-docs .ux-dados { display: block; }
body.ux-portal #view-docs .ux-dados > div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
body.ux-portal #view-docs .ux-dados dd { text-align: right; font-size: 16px; }

.ux-comparacao { margin: 0; }
.ux-comparacao > div {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.ux-comparacao dt { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; }
.ux-comparacao dd { margin: 0; color: var(--ink-2); font-size: 14.5px; }

.ux-evidencia { display: flex; align-items: center; gap: 16px; padding: 12px 4px; }
.ux-evidencia strong { font-size: 15px; line-height: 1.4; }
.ux-evidencia p { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; }

.ux-nota { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
.ux-nota.ux-nota-direita { margin-top: 12px; padding-top: 0; border-top: 0; text-align: right; }
body.ux-portal .ux-ld-detalhe :is(.btn, .q-primary).ux-principal { width: 100%; justify-content: center; min-height: 48px; }
body.ux-portal .ux-detalhes-tecnicos { padding-top: 12px; border-top: 1px solid var(--line); }
body.ux-portal .ux-detalhes-tecnicos summary { min-height: var(--ux-alvo); display: flex; align-items: center; color: var(--ink-2); font-weight: 600; cursor: pointer; }

.ux-vazio { padding: 32px 12px; color: var(--ink-2); text-align: center; }
.ux-vazio h3 { margin: 0 0 6px; color: var(--ink); font-size: 17px; }
.ux-vazio p { margin: 0; font-size: 14.5px; }

/* Acervo: a lista abre a tela; o envio permanece disponível no cabeçalho. */
body.ux-portal #doc-groups { margin-bottom: 24px; }
body.ux-portal #fn-conteudo { display: flex; flex-direction: column; gap: 24px; }
body.ux-portal #fn-conteudo > .tiles { order: 2; }

/* =======================================================================
 * 11 · módulos
 * ===================================================================== */

/* ---- Precificação (#view-precificacao) ---------------------------------
 * O editor é longo e denso: rótulos de 13px, campos de 15px (16 em toque),
 * subtítulos de seção legíveis e o resumo de preço como no protótipo —
 * quatro cartões, o preço mensal como indicador primário.              */
body.ux-portal #pf-conteudo h2 { font-size: 21px !important; letter-spacing: -.025em; }
body.ux-portal #pf-conteudo h3[style*="font-size:14px"] { font-size: 16px !important; font-weight: 650; color: var(--ink); }
body.ux-portal .pf-campo { gap: 5px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
body.ux-portal .pf-campo :is(input, select) { min-height: 40px; padding: 7px 10px; }
body.ux-portal .pf-linha { gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
body.ux-portal .pf-nota { color: var(--ink-3); line-height: 1.45; }
body.ux-portal .pf-confira { color: var(--accent-strong); font-weight: 600; }
body.ux-portal #pf-conteudo details > summary { min-height: var(--ux-alvo); display: flex; align-items: center; gap: 8px; }
body.ux-portal #pf-totais > div:first-child { gap: 14px !important; }
body.ux-portal #pf-totais > div:first-child > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--ux-radius);
  background: var(--surface);
}
body.ux-portal #pf-totais > div:first-child > div .t-value { font-size: 24px !important; }

body.ux-portal .ux-help-note { margin: 10px 0 16px; padding: 0 12px; border-radius: 8px; background: var(--surface-2); }
body.ux-portal .ux-help-note > summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--brand); font-size: 14px; font-weight: 500; }
body.ux-portal .ux-help-note > :not(summary) { display: block; margin: 0; padding-bottom: 14px; }

/* ---- Contratos (#view-contratos) -------------------------------------- */
body.ux-portal .ct-barra { gap: 14px; margin-bottom: 14px; }
body.ux-portal .ct-filtros { gap: 12px; }
body.ux-portal .ct-filtros label { display: grid; gap: 5px; color: var(--ink-2); font-size: 13px; }
body.ux-portal .ct-filtros select { min-width: 180px; }
body.ux-portal .ct-temas { gap: 8px; margin: 4px 0 16px; }
body.ux-portal .ct-natureza { gap: 8px; }
body.ux-portal .ct-grade { gap: 14px; }
body.ux-portal .ct-grade .campo { gap: 5px; font-size: 13.5px; color: var(--ink-2); }
body.ux-portal #ct-ficha { border-color: var(--ux-border); }
body.ux-portal #ct-ficha .ux-reg-cab { margin-bottom: 14px; }
body.ux-portal .ct-mes { padding: 10px 14px; border-radius: 10px; background: var(--surface); }
body.ux-portal .ct-mes > summary { min-height: 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
body.ux-portal .ct-calc { border-top-color: var(--line); }
body.ux-portal .ct-ev { font-size: 13.5px; }
body.ux-portal .ct-ag-tit { font-size: 15px; font-weight: 600; }
body.ux-portal #ct-antecedencia #ct-antec { width: 96px; }

/* ---- Concorrentes (#view-concorrentes) -------------------------------- */
body.ux-portal #ci-concorrentes > .panel[data-bloco="lista"] { padding: var(--ux-panel-pad); }
body.ux-portal #ci-ficha > .panel:first-child { border-color: var(--ux-border); }
body.ux-portal :is(#ci-secoes, #ci-ficha-blocos, #ci-mercado) > .panel { margin-top: 32px; }
body.ux-portal #view-concorrentes [data-cobertura],
body.ux-portal #view-mercado .mc-cob { color: var(--ink-3); font-size: 13.5px; }
body.ux-portal #view-concorrentes .tile .t-value[style*="font-size:18px"] { font-size: 20px !important; }

/* ---- Preços e futuras (#view-mercado) --------------------------------- */
body.ux-portal #view-mercado .panel h3 { gap: 8px; }
/* Links das fontes também precisam de uma área de clique confortável. */
body.ux-portal #view-mercado .tbl td > a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
body.ux-portal #view-mercado .panel h3 svg { color: var(--ux-icone); flex: 0 0 auto; }
body.ux-portal #view-mercado .mc-regua { border-bottom-color: var(--line); }

/* ---- Agenda: calendário do mês --------------------------------------- */
#agenda-calendario { margin: 14px 0 18px; }
.agc-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.agc-titulo { margin: 0 6px; font-size: 17px; font-weight: 650; min-width: 11ch; }
.agc-legenda { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-left: auto; color: var(--ink-3); font-size: 13px; }
.agc-legenda i { display: inline-block; width: 10px; height: 10px; margin-right: -6px; border-radius: 3px; }
#agenda-ics { margin-left: 8px; }
.agc-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--ux-radius); background: var(--line); }
.agc-sem { padding: 7px 8px; background: var(--ux-cabeca); color: var(--ink-3); font-size: 13px; font-weight: 600; text-align: center; }
.agc-dia { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 92px; padding: 6px; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; text-align: left; box-shadow: none; }
body.ux-portal button.agc-dia { cursor: pointer; }
body.ux-portal button.agc-dia:hover { background: var(--ux-linha-hover); }
.agc-fora { background: var(--bg); }
.agc-n { font-size: 13px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.agc-hoje .agc-n { align-self: flex-start; padding: 0 7px; border-radius: var(--ux-radius-xs); background: var(--brand); color: #fff; }
.agc-ev { display: block; overflow: hidden; padding: 1px 6px; border-radius: 4px; font-size: 12.5px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.agc-mais { font-size: 12.5px; color: var(--ink-3); }
.agc-proposta { background: var(--brand-soft); color: var(--brand-strong); } .agc-legenda .agc-proposta { background: var(--brand); }
.agc-pedido { background: #EAF0F4; color: #33506A; }                    .agc-legenda .agc-pedido { background: #5A7C99; }
.agc-vistoria { background: var(--accent-soft); color: var(--accent-strong); } .agc-legenda .agc-vistoria { background: var(--accent); }
.agc-contrato { background: var(--surface-2); color: var(--ink-2); }    .agc-legenda .agc-contrato { background: #9AABA7; }
.agc-crit { background: var(--crit-bg); color: var(--crit); }           .agc-legenda .agc-crit { background: var(--crit); }
.agc-outro { background: var(--surface-2); color: var(--ink-2); }
.agc-destaque { outline: 2px solid var(--brand); outline-offset: 2px; transition: outline-color .3s; }

/* ---- Perfis, Busca, Acervo, Análise ----------------------------------- */
body.ux-portal .q-app .q-chips { align-items: center; }
body.ux-portal .q-app .q-chips :is(.q-check, .q-chips-acao) { min-height: 36px; box-sizing: border-box; line-height: 1.2; }
body.ux-portal .q-app .q-form textarea { field-sizing: content; min-height: 3.2lh; max-height: 16lh; }
body.ux-portal .q-app .q-rel-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
body.ux-portal .q-app .q-analise-sel { display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.ux-portal .q-app .q-analise-sel select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
body.ux-portal .q-app .q-empty { margin-bottom: 16px; }
body.ux-portal .q-app .q-badge { font-size: 13px; }
body.ux-portal #jr-conteudo .tbl .mono { font-family: inherit; }
/* O texto das opções não pode impor uma largura mínima ao pedido. */
body.ux-portal #view-juridico .jr-linha > select { min-width: 0; max-width: 100%; }
body.ux-portal #view-juridico .jr-grade { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
body.ux-portal #view-juridico .campo { min-width: 0; }
body.ux-portal #view-juridico .campo :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
body.ux-portal .jr-previa { border-radius: var(--ux-radius-sm); font-size: 13.5px; }

/* ---- módulo antigo de contratos (#sc-app, só leitura) ----------------- */
body.ux-portal #sc-app { font-size: 15px; }
body.ux-portal #sc-app .sc-status { border-radius: var(--ux-radius); padding: 12px 14px; font-size: 14px; }
body.ux-portal #sc-app :is(.sc-meta, .sub, .obs, .dica, .kpi .nota) { font-size: 13.5px; }
body.ux-portal #sc-app .kpi .valor { font-size: 26px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
body.ux-portal #sc-app .cabecalho-pagina h2 { font-size: 24px; letter-spacing: -.03em; }
body.ux-portal #sc-app .cabecalho-pagina .sub { font-size: 14px; }
body.ux-portal #sc-app .dado dt { color: var(--ink-3); font-size: 13px; letter-spacing: 0; text-transform: none; }
body.ux-portal #sc-app .dado dd { font-size: 15px; }

body.ux-portal footer[data-app] {
  margin-left: var(--ux-sidebar);
  padding-bottom: calc(18px + var(--ux-safe-bottom));
  background: var(--surface);
  color: var(--ink-3);
  font-size: 13.5px;
}

/* =======================================================================
 * 12 · gaveta, busca global, cobertura, autenticação e página pública
 * ===================================================================== */
.ux-nav-shade { position: fixed; z-index: 50; inset: 0; border: 0; background: rgb(10 31 36 / .4); }

.ux-search-dialog {
  position: fixed;
  z-index: 120;
  inset: 0;
  padding: max(min(14vh, 120px), calc(var(--ux-safe-top) + 16px)) 18px 18px;
  background: rgb(10 31 36 / .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ux-search-card {
  width: min(640px, 100%);
  max-height: min(680px, 76vh);
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ux-radius-lg);
  background: var(--surface);
  box-shadow: 0 30px 80px rgb(10 31 36 / .26);
}
.ux-search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ux-search-head strong { display: block; font-size: 18px; font-weight: 650; }
.ux-search-head span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 14px; }
.ux-search-head button { min-height: var(--ux-alvo); padding: 0 6px; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 14.5px; cursor: pointer; }
.ux-search-card > label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 500; }
.ux-search-card > input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--ux-radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.ux-search-results { max-height: 48vh; margin-top: 10px; overflow-y: auto; }
.ux-search-results button {
  width: 100%;
  min-height: var(--ux-alvo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ux-radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.ux-search-results button:hover,
.ux-search-results button:focus-visible { background: var(--brand-soft); }
.ux-search-results strong,
.ux-search-results small { display: block; }
.ux-search-results strong { font-weight: 600; }
.ux-search-results small { margin-top: 2px; color: var(--ink-3); font-size: 13.5px; }
.ux-search-results em { color: var(--ink-3); font-size: 13px; font-style: normal; }
.ux-search-empty { padding: 24px 10px; color: var(--ink-3); text-align: center; font-size: 14.5px; }
body.ux-dialog-open { overflow: hidden; }

/* Cobertura da busca: gaveta à direita, <dialog> nativo. */
dialog.cobertura {
  margin: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: min(520px, 100vw);
  padding: 0 var(--ux-safe-right) var(--ux-safe-bottom) 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: -18px 0 50px rgb(10 43 49 / .12);
}
dialog.cobertura::backdrop { background: rgb(10 20 24 / .32); }
dialog.cobertura header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px + var(--ux-safe-top)) 22px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
dialog.cobertura h2 { margin: 0; font-size: 18px; font-weight: 650; }
.cobertura-fechar { min-width: var(--ux-alvo); min-height: var(--ux-alvo); border: 0; background: transparent; color: var(--ink-3); font-size: 24px; line-height: 1; cursor: pointer; }
.cobertura-fechar:hover { color: var(--ink); }
.cobertura-corpo { padding: 6px 22px 28px; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.cobertura-corpo h3 { margin: 22px 0 8px; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cobertura-corpo p { margin: 0 0 10px; }
.cobertura-corpo b { color: var(--ink); font-weight: 600; }
.cobertura-lista { margin: 0 0 10px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; }
.cobertura-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink); }
.cobertura-lista li:first-child { border-top: 0; }
.cobertura-lista span { color: var(--ink-3); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cobertura-nota { color: var(--ink-3); font-size: 13.5px; }

/* Autenticação. */
body.ux-portal .auth-wrap { gap: 22px; padding-bottom: var(--ux-safe-bottom); background: var(--bg); }
body.ux-portal .auth-brand { padding: 8px 14px; }
body.ux-portal .auth-brand img { display: block; width: 300px; height: auto; max-width: 100%; mix-blend-mode: multiply; }
body.ux-portal .auth-card { padding: 30px; border-radius: var(--ux-radius-lg); box-shadow: 0 24px 64px rgb(10 43 49 / .09); }
body.ux-portal .auth-card h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
body.ux-portal .auth-card .sub { color: var(--ink-2); font-size: 15px; }
body.ux-portal .auth-card input { min-height: 48px; font-size: 16px; }
body.ux-portal .auth-card .btn { min-height: 48px; }
body.ux-portal .auth-links { font-size: 14.5px; }
body.ux-portal .auth-links a { min-height: var(--ux-alvo); display: inline-flex; align-items: center; }
body.ux-portal :is(.auth-erro, .auth-ok, .auth-note) { font-size: 14.5px; }
body.ux-portal .auth-note { max-width: 520px; }

/* A página pública usa a mesma escala do portal. */
body.ux-portal .ab { font-size: 15px; }
body.ux-portal :is(.ab-nav a, .ab-rodape, .ab-linha small, .ab-edital small, .ab-dica, .ab-nota, .ab-trecho, .ab-abas button, .ab-exemplo, .ab-veredito span, .ab-linha .ab-doc, .ab-linha strong) { font-size: 14.5px; }
body.ux-portal .ab-marca img { display: block; width: 210px; height: auto; }

/* =======================================================================
 * 13 · movimento
 *
 * Sutil e com propósito: a tela entra sem salto, indicadores surgem, barras
 * crescem da esquerda. Nada pisca, nada se move sozinho depois de chegar.
 * Com prefers-reduced-motion: reduce, nada se move.
 * ===================================================================== */
@keyframes ux-entra { from { opacity: .55; } }
@keyframes ux-surge { from { opacity: 0; transform: translateY(6px); } }
@keyframes ux-cresce { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: no-preference) {
  body.ux-portal :is(.btn, .q-primary, .ux-head-acoes button):not(:disabled):active { transform: translateY(1px); }
  /* só opacidade: transform aqui viraria bloco de contenção dos modais fixos */
  body.ux-portal main[data-app] > .view.is-active { animation: ux-entra .2s ease-out; }
  body.ux-portal :is(.tiles > .tile, .q-stats > .q-stat, #pf-totais > div:first-child > div) {
    animation: ux-surge .32s cubic-bezier(.2, .7, .2, 1) both;
  }
  body.ux-portal :is(.tiles > .tile, .q-stats > .q-stat, #pf-totais > div:first-child > div):nth-child(2) { animation-delay: .04s; }
  body.ux-portal :is(.tiles > .tile, .q-stats > .q-stat, #pf-totais > div:first-child > div):nth-child(3) { animation-delay: .08s; }
  body.ux-portal :is(.tiles > .tile, .q-stats > .q-stat, #pf-totais > div:first-child > div):nth-child(n+4) { animation-delay: .12s; }
  body.ux-portal :is(.barlist .fill, .cota-barra i, .upitem .bar i, .evidence-distribution span) {
    transform-origin: left center;
    animation: ux-cresce .6s cubic-bezier(.2, .7, .2, 1) both;
  }
  body.ux-portal #view-mercado .mc-marca { transition: left .4s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.ux-portal :is(.lic-card, .milestone-shortcuts button) { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  body.ux-portal .lic-card:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  body.ux-portal *,
  body.ux-portal *::before,
  body.ux-portal *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =======================================================================
 * 14 · responsivo
 * ===================================================================== */
/* O menu lateral é fixo; em captura de página inteira (e em página mais
   longa que a janela) o fundo branco dele precisa ir até o fim. */
@media (min-width: 1101px) {
  body.ux-portal:has(.topbar:not([hidden])) {
    background: linear-gradient(to right, var(--surface) calc(var(--ux-sidebar) - 1px), var(--line) calc(var(--ux-sidebar) - 1px), var(--line) var(--ux-sidebar), var(--bg) var(--ux-sidebar));
  }
  body.ux-portal .nav button { min-height: clamp(38px, 4.8vh, 44px); }
}

@media (max-width: 1300px) {
  :root { --ux-sidebar: 240px; }
  .ux-ld.ux-ld-larga { grid-template-columns: minmax(380px, 53%) minmax(0, 1fr); }
  body.ux-portal main[data-app] { padding-left: 22px; padding-right: calc(22px + var(--ux-safe-right)); }
  .ux-commandbar { padding-left: 20px; padding-right: calc(20px + var(--ux-safe-right)); }
  body.ux-portal .subscriber .sub-txt { max-width: 150px; }
  body.ux-portal .brand img { width: 186px; }
}
/* Notebook: documento usa duas linhas e a ficha empilha os dados. */
@media (min-width: 1001px) and (max-width: 1300px) {
  body.ux-portal .ux-item-doc { grid-template-columns: minmax(0, 1fr) auto; }
  .ux-item-doc .ux-doc-id { grid-column: 1 / -1; }
  .ux-ld-colunas { display: none; }
  .ux-reg-cab { flex-wrap: wrap; }
  .ux-reg-cab > div { flex-basis: 100%; }
}
@media (max-width: 1300px), (max-width: 600px) {
  body.ux-portal .ux-dados { display: block; }
  body.ux-portal .ux-dados > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  body.ux-portal .ux-dados dt { margin: 0; }
  body.ux-portal .ux-dados dd { text-align: right; font-size: 16px; overflow-wrap: normal; }
}
@media (max-width: 1099px) {
  .ux-ld:not(.ux-ld-larga) { grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); }
}

/* Abaixo de 1000px o par vira uma coisa só: a lista ocupa a tela, escolher
   abre a ficha, e a ficha abre com "Voltar à lista". */
@media (max-width: 1000px) {
  .ux-ld,
  .ux-ld.ux-ld-larga,
  .ux-ld:not(.ux-ld-larga) { display: block; }
  .ux-ld-detalhe { display: none; }
  .ux-ld.mostra-detalhe .ux-ld-lista { display: none; }
  .ux-ld.mostra-detalhe .ux-ld-detalhe { display: block; }
  body.ux-portal .ux-voltar { display: inline-flex; margin: 0 0 16px; }
  .ux-ld-colunas,
  body.ux-portal .ux-item-doc { grid-template-columns: minmax(180px, 1fr) 120px 130px; }
}

/* Toque: campos de 16px (sem zoom do iOS) e alvos de 44px. */
@media (pointer: coarse), (max-width: 1100px) {
  body.ux-portal input:not([type="checkbox"]):not([type="radio"]),
  body.ux-portal select,
  body.ux-portal textarea { font-size: 16px !important; min-height: var(--ux-alvo); }
  body.ux-portal :is(.field input, .field select, .field textarea,
    .q-app input:not([type="checkbox"]):not([type="radio"]), .q-app select, .q-app textarea,
    #sc-app input:not([type="checkbox"]):not([type="radio"]), #sc-app select, #sc-app textarea,
    .pf-campo input, .pf-campo select, .ct-grade .campo :is(input, select, textarea), .ct-filtros select,
    .convite-form input, .convite-form select, #ps-nome, #ct-antec, main[data-app] table select, .ux-busca input) {
    min-height: var(--ux-alvo);
    font-size: 16px;
  }
  body.ux-portal :is(.btn.small, #sc-app button.pequeno, #sc-app .botao.pequeno, .chip, .f-multi label, .ux-link, .ux-ld-ferramentas button, .q-app .q-chips :is(.q-check, .q-chips-acao)) {
    min-height: var(--ux-alvo);
  }
  body.ux-portal input[type="checkbox"],
  body.ux-portal input[type="radio"] { width: 20px; height: 20px; }
  body.ux-portal .f-mais > summary,
  body.ux-portal #pf-conteudo details > summary,
  body.ux-portal .ct-mes > summary { min-height: var(--ux-alvo); }
}

@media (max-width: 1100px) {
  :root { --ux-sidebar: min(300px, 86vw); --ux-command: 60px; }
  body.ux-portal .topbar {
    visibility: hidden;
    transform: translateX(-102%);
    transition: transform .22s ease, visibility 0s linear .22s;
    box-shadow: 18px 0 50px rgb(10 31 36 / .16);
  }
  body.ux-nav-open .topbar { visibility: visible; transform: none; transition: transform .22s ease; }
  body.ux-portal .nav { padding-bottom: calc(18px + var(--ux-safe-bottom)); }
  /* Na gaveta, itens largos e de dedo. */
  body.ux-portal .nav button { min-height: 48px; font-size: 16px; }
  body.ux-portal .nav button[aria-current="page"]::before { left: -12px; }
  .ux-grupo { margin-bottom: 18px; }
  .ux-grupo:last-of-type { margin-top: 8px; }

  .ux-commandbar { left: 0; gap: 8px; padding-left: calc(12px + var(--ux-safe-left)); padding-right: calc(12px + var(--ux-safe-right)); }
  .ux-menu-button {
    display: inline-flex;
    align-items: center;
    min-height: var(--ux-alvo);
    min-width: var(--ux-alvo);
    padding: 8px 14px;
    border: 1px solid var(--ux-linha-campo);
    border-radius: var(--ux-radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }
  .ux-breadcrumb { display: none; }
  .ux-search-button { min-width: 0; min-height: var(--ux-alvo); margin-left: auto; font-size: 15px; }
  .ux-search-button kbd { display: none; }
  body.ux-portal .subscriber { padding-right: 4px; }
  body.ux-portal .subscriber .sub-txt { display: none; }
  body.ux-portal .usermenu-pop { width: min(300px, calc(100vw - 24px)); }

  body.ux-portal main[data-app] {
    width: 100%;
    margin-left: 0;
    padding: calc(var(--ux-command) + var(--ux-safe-top) + 20px) calc(16px + var(--ux-safe-right)) calc(48px + var(--ux-safe-bottom)) calc(16px + var(--ux-safe-left));
  }
  body.ux-portal footer[data-app] { margin-left: 0; }
  body.ux-portal .hero { grid-template-columns: 1fr; padding: 22px; }
  body.ux-portal .view-head { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  body.ux-portal .view-head > .ux-head-acoes { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; }
  body.ux-portal .view-head h2 { font-size: 26px; }
  body.ux-portal .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ux-portal .tile { padding: 14px 15px; }
  body.ux-portal .tile .t-value { font-size: 24px; }
  body.ux-portal #pf-totais > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.ux-portal #pf-totais > div:first-child > div { padding: 14px; }
  body.ux-portal #pf-totais > div:first-child > div .t-value { font-size: 21px !important; }
  body.ux-portal .ct-filtros { width: 100%; }
  body.ux-portal .ct-filtros label { flex: 1 1 160px; }
  body.ux-portal .ct-filtros select { min-width: 0; width: 100%; }
  .agc-dia { min-height: var(--ux-alvo); }
  .agc-ev { height: 6px; padding: 0; font-size: 0; }
  .agc-legenda { margin-left: 0; }
}

/* Celular: cada linha de tabela vira um cartão, com o nome da coluna ao lado
   do valor — a coluna de ação nunca fica escondida atrás de rolagem lateral.
   O rótulo vem de `data-rotulo`, posto pelo portal a partir do cabeçalho. */
@media (max-width: 640px) {
  body.ux-portal main[data-app] table.tbl-cartao { min-width: 0; width: 100%; }
  body.ux-portal main[data-app] :is(table.tbl-cartao, table.tbl-cartao > tbody, table.tbl-cartao > tbody > tr) { display: block; }
  body.ux-portal main[data-app] table.tbl-cartao > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.ux-portal main[data-app] table.tbl-cartao > tbody > tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  /* O rótulo fica à esquerda, em posição absoluta: o conteúdo da célula
     (texto, <br>, selos, botões) segue o fluxo normal à direita. */
  body.ux-portal main[data-app] table.tbl-cartao > tbody > tr > td {
    display: flow-root; padding: 4px 0 4px 124px; border: 0; background: transparent;
    text-align: left !important; white-space: normal !important; overflow-wrap: anywhere; font-family: inherit;
  }
  body.ux-portal main[data-app] table.tbl-cartao > tbody > tr > td::before {
    content: attr(data-rotulo); float: left; width: 114px; margin-left: -124px;
    color: var(--ink-3); font-size: 13px; font-weight: 600;
  }
  body.ux-portal main[data-app] table.tbl-cartao > tbody > tr > :is(td[data-rotulo=""], td[colspan]) { padding-left: 0; }
  body.ux-portal main[data-app] table.tbl-cartao > tbody > tr > :is(td[data-rotulo=""], td[colspan])::before { display: none; }
  body.ux-portal main[data-app] .tablewrap:has(> table.tbl-cartao) { overflow: visible; }
  body.ux-portal main[data-app] table.tbl-cartao .acoes-linha { flex-wrap: wrap; }

  /* Lista: o selo desce para baixo do texto e não corta o título. */
  body.ux-portal .ux-item { flex-wrap: wrap; }
  body.ux-portal .ux-item > .ux-item-corpo { flex: 1 1 calc(100% - 60px); }
  body.ux-portal .ux-item > :is(.pill, .q-badge) { order: 3; margin-left: 48px; }
  body.ux-portal .ux-item-corpo .ux-item-obj { -webkit-line-clamp: 3; }
  /* Selos longos ("válida por mais 300 dias") quebram em vez de vazar. */
  body.ux-portal main[data-app] :is(.pill, .q-badge) { white-space: normal; max-width: 100%; }
  body.ux-portal .q-app .q-doc-card .q-card-top { gap: 8px; }
  body.ux-portal .q-app .q-doc-card .q-card-top p { margin-bottom: 0; }
  body.ux-portal .q-app .q-doc-card .q-badges { justify-content: flex-start; }
  body.ux-portal .q-app .q-doc-card > p { margin: 10px 0; }
  body.ux-portal .q-app .q-doc-card .q-row { margin-top: 12px; }
  body.ux-portal main[data-app] .upitem .fname { overflow-wrap: anywhere; white-space: normal; text-overflow: clip; max-width: 100%; }
}

@media (max-width: 600px) {
  body.ux-portal .ux-comparacao dd { padding-left: 0; }
  body.ux-portal .ux-comparacao > div { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .guia-passo { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 12px; }
  .guia-passo .sub { flex-basis: 100%; }
  body.ux-portal main[data-app] { padding-left: calc(12px + var(--ux-safe-left)); padding-right: calc(12px + var(--ux-safe-right)); }
  .ux-commandbar { padding-left: calc(10px + var(--ux-safe-left)); padding-right: calc(10px + var(--ux-safe-right)); }
  body.ux-portal .view-head h2 { font-size: 24px; }
  body.ux-portal { --ux-panel-pad: 16px; }
  body.ux-portal .panel { padding: var(--ux-panel-pad); }
  body.ux-portal :is(.ux-secao, .pf-secao) { --ux-section-pad: 16px; margin-top: 24px; }
  body.ux-portal .view .panel + .panel { margin-top: 24px; }
  body.ux-portal :is(#cc-restricoes, #cc-crm, #ci-mercado) { margin-top: 32px; }
  body.ux-portal .hero { padding: 20px; }
  body.ux-portal .hero h1 { font-size: 27px; }
  body.ux-portal .lic-card { padding: 16px; }
  .ux-ld-lista { padding: 14px 10px; }
  body.ux-portal .ux-ld-detalhe { padding: 16px 14px; }
  .ux-reg-cab { flex-wrap: wrap; }
  .ux-reg-cab h2 { font-size: 21px; }
  .ux-ld-colunas { display: none; }
  body.ux-portal .ux-item-doc { grid-template-columns: minmax(0, 1fr) auto; }
  .ux-item-doc .ux-doc-id { grid-column: 1 / -1; }
  .ux-item-doc :is(.pill, .q-badge) { justify-self: end; }
  .ux-search-dialog { padding: calc(var(--ux-safe-top) + 64px) 10px 10px; }
  .ux-search-card { padding: 14px; border-radius: var(--ux-radius); }
  body.ux-portal .q-app .q-rel-item { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  /* Em tela muito estreita, o indicador primário ocupa a linha inteira. */
  body.ux-portal .tiles > .tile:first-child,
  body.ux-portal #pf-totais > div:first-child > div:first-child { grid-column: 1 / -1; }
}

/* =======================================================================
 * 15 · impressão
 * ===================================================================== */
@media print {
  body.ux-portal :is(.topbar, .ux-commandbar, .ux-nav-shade, footer[data-app]) { display: none !important; }
  body.ux-portal { background: #fff; }
  body.ux-portal main[data-app] { width: 100%; margin: 0; padding: 0; }
  body.ux-portal :is(.panel, .tile, .ux-ld-lista, .ux-ld-detalhe) { box-shadow: none; }
  .ux-ld { display: block; }
  .ux-ld-detalhe { display: block; }
}

/* Movimento com significado: dados finais legíveis durante a entrada. */
body.ux-portal .ux-chart { margin:24px 0; padding:20px; border:1px solid var(--ux-topic-line); border-radius:14px; background:var(--ux-topic-soft); }
body.ux-portal .ux-chart h3, body.ux-portal .ux-chart h4 { margin:0 0 8px; color:var(--ink); }
body.ux-portal .ux-chart-row { display:block; width:100%; text-align:left; padding:14px; margin:8px 0; border:1px solid transparent; border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer; transition:transform .18s,box-shadow .18s,border-color .18s; }
body.ux-portal .ux-chart-row:hover, body.ux-portal .ux-chart-row:focus-visible { transform:translateY(-2px); border-color:var(--ux-topic); box-shadow:0 5px 16px #182c4012; }
body.ux-portal .ux-chart-row:active { transform:scale(.99); }
.ux-chart-label { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ux-chart-label strong { flex:1; min-width:120px; }
.ux-track { display:block; overflow:hidden; height:10px; margin:12px 0; border-radius:20px; background:#D2D2CE; }
.ux-fill { display:block; height:100%; border-radius:inherit; background:var(--ux-topic,#705c91); transform-origin:left; animation:ux-bar-grow .8s cubic-bezier(.16,1,.3,1) both; }
.ux-lifecycle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
dialog.ux-side-sheet { --ux-topic:#705c91; --ux-topic-soft:var(--surface-2); --ux-topic-line:var(--ux-border); position:fixed; inset:0 0 0 auto; margin:0; width:min(760px,70vw); height:100dvh; max-height:100dvh; max-width:100vw; box-sizing:border-box; border:0; border-left:1px solid var(--ux-border-strong); padding:24px; background:var(--bg); color:var(--ink); overflow-y:auto; overscroll-behavior:contain; }
dialog.ux-side-sheet[open] { animation:ux-sheet-enter .28s cubic-bezier(.16,1,.3,1); }
dialog.ux-side-sheet::backdrop { background:rgb(15 27 35 / .18); }
dialog.ux-side-sheet > .panel:first-of-type { position:sticky; top:-24px; z-index:2; box-shadow:0 5px 16px #182c4012; }
.ux-analysis-state { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; }
.ux-analysis-orbit { width:40px; height:40px; border:3px solid #d8cfe4; border-top-color:#705c91; border-radius:50%; animation:ux-analysis-turn 1s linear infinite; }
@keyframes ux-bar-grow { from {transform:scaleX(0)} to {transform:scaleX(1)} }
@keyframes ux-sheet-enter { from {transform:translateX(100%);opacity:.5} to {transform:translateX(0);opacity:1} }
@keyframes ux-analysis-turn { to {transform:rotate(360deg)} }
@media(max-width:900px) { .ux-lifecycle-grid {grid-template-columns:1fr} }
@media(max-width:600px) { dialog.ux-side-sheet {width:100%; padding:16px; padding-bottom:max(16px,env(safe-area-inset-bottom));} dialog.ux-side-sheet > .panel:first-of-type {top:-16px;} body.ux-portal .ux-chart {padding:12px;} }
@media(prefers-reduced-motion:reduce) { .ux-fill,dialog.ux-side-sheet[open],.ux-analysis-orbit {animation:none!important;} body.ux-portal .ux-chart-row {transition:none;transform:none!important;} }

.ux-evolution-row { padding:12px 0; }
.ux-evolution-fill { animation:none; transition:width .5s cubic-bezier(.16,1,.3,1); }
.ux-sheet-context { margin-top:16px; padding-top:12px; border-top:1px solid var(--ux-topic-line); font-size:13px; }
.ux-sheet-switch { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.ux-sheet-switch button { max-width:100%; white-space:normal; }
.ux-next-deadline { display:block; padding-top:8px; border-top:1px solid var(--ux-topic-line); margin-top:12px; }
body:has(dialog.ux-side-sheet[open]) { overflow:hidden; }
@media(prefers-reduced-motion:reduce) { .ux-evolution-fill {transition:none!important;} }

@media(max-width:900px) { dialog.ux-side-sheet {width:100%;} }
@media(max-width:600px) { dialog.ux-side-sheet > .panel:first-of-type {position:relative;top:auto;} }
.ux-price-comparison { display:grid; gap:12px; }

.ux-source-status {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.ux-evolution-track {position:relative;overflow:visible;}
.ux-ghost-mark {position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed #394457;z-index:1;transform:translateX(-2px);}

/* Painéis acoplados: contexto e edição permanecem lado a lado. */
body.ux-portal .ux-workspace {display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:20px;align-items:start;margin-top:20px;min-width:0;}
.ux-workspace-summary {grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--ux-topic-line);border-radius:12px;background:var(--ux-highlight);}
.ux-workspace-ref {flex:1 1 200px;overflow-wrap:anywhere;}
.ux-workspace-value {font-weight:650;}
.ux-workspace-state {font-size:13px;color:var(--ink-3);}
.ux-workspace-context,.ux-workspace-panel {min-width:0;}
.ux-workspace-context {position:sticky;top:86px;max-height:calc(100dvh - 120px);overflow:auto;scrollbar-gutter:stable;}
.ux-workspace-panel {border:1px solid var(--ux-topic-line);border-radius:12px;background:var(--surface);box-shadow:none;animation:ux-sheet-enter .3s cubic-bezier(.16,1,.3,1);overflow:clip;}
.ux-workspace-panel[hidden] {display:none!important;}
.ux-workspace-panel-head {display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--ux-topic-soft);border-bottom:1px solid var(--ux-topic-line);}
body.ux-portal .ux-workspace-panel-head h3 {font-size:16px;margin:0;flex:1 1 140px;}
.ux-workspace-panel-body {padding:18px;max-height:calc(100dvh - 220px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
body.ux-portal .ux-workspace-panel-body .filterbar {display:flex;flex-wrap:wrap;}
body.ux-portal .ux-workspace-panel-body :is(input,select,textarea) {max-width:100%;min-width:0;box-sizing:border-box;}
.ux-workspace-context #pf-totais {margin-top:0!important;}
body.ux-portal .ux-workspace-context #pf-totais > div:first-child {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
body.ux-portal .ux-workspace-context #pf-totais > div:first-child > div:first-child {grid-column:1/-1;}
body.ux-portal .ux-workspace-context #pf-totais .t-value {overflow-wrap:anywhere;}
.ux-contract-reference {padding:20px;border:1px solid var(--ux-topic-line);border-radius:12px;background:var(--ux-topic-soft);}
.ux-contract-reference dt {font-size:13px;color:var(--ink-3);margin-top:16px;}
.ux-contract-reference dd {margin:4px 0;font-weight:650;}
.ux-workspace.is-collapsed {grid-template-columns:1fr;}
.ux-workspace.is-collapsed .ux-workspace-context {position:static;max-height:none;}
.ux-context-toggle {display:none;}
@media(max-width:1000px) {
 body.ux-portal .ux-workspace {grid-template-columns:minmax(0,1fr);gap:12px;}
 .ux-workspace-summary {position:sticky;top:64px;z-index:5;padding:10px;gap:6px;background:var(--surface);box-shadow:0 3px 12px #182c4010;}
 .ux-workspace-ref {flex-basis:100%;font-size:13px;}
 .ux-workspace-value {font-size:13px;}
 .ux-workspace-context {display:none;position:static;max-height:none;}
 .ux-workspace.show-context .ux-workspace-context,.ux-workspace.is-collapsed .ux-workspace-context {display:block;}
 .ux-context-toggle {display:inline-flex;}
 .ux-workspace-panel-body {max-height:none;overflow:visible;padding:14px;}
 .ux-workspace-panel-head {padding:12px;}
 .ux-workspace-panel {overflow:clip;}
}
@media(prefers-reduced-motion:reduce) {.ux-workspace-panel {animation:none!important;}}
@media print {.ux-workspace-panel[hidden],.ux-workspace-context {display:block!important;max-height:none!important;} .ux-workspace-panel-body {max-height:none;overflow:visible;} .ux-workspace {display:block!important;} .ux-workspace-summary button,.ux-workspace-panel-head button {display:none!important;}}

body.ux-portal #ct-ficha .ux-workspace {grid-template-columns:minmax(230px,.6fr) minmax(0,1.4fr);}
body.ux-portal #ct-ficha .ux-workspace.is-collapsed {grid-template-columns:minmax(0,1fr);}
@media(max-width:1000px) {body.ux-portal #ct-ficha .ux-workspace {grid-template-columns:minmax(0,1fr);} }
@media(max-width:1000px) {
 .ux-workspace:has(.ux-workspace-panel input:focus,.ux-workspace-panel textarea:focus,.ux-workspace-panel select:focus) .ux-workspace-summary {position:static;}
 .ux-workspace-panel-body :is(input,select,textarea,button) {scroll-margin-top:160px;}
}

.ux-workspace-summary {scroll-margin-top:84px;}
/* campo focado ao adicionar/remover item não fica colado na borda de baixo */
body.ux-portal .ux-workspace-panel-body :is(input,select,textarea,button) {scroll-margin-bottom:16px;}

.ux-workspace-summary .ux-context-toggle {display:none!important;}
@media(max-width:1000px){.ux-workspace-summary .ux-context-toggle{display:inline-flex!important;}}
.ux-panel-alerts {color:var(--warning,#8a5310)!important;}

.ux-workspace {overflow-x:clip;}

/* Valores em reais não se partem no meio dos dígitos (auditoria de 29/10/2026).
 * Indicadores: no celular estreito, um por linha; o valor só quebra no espaço
 * entre "R$" e o número, nunca dentro dele. Dados em colunas (Agenda › Preço,
 * Seleção › Dados da oportunidade): as colunas descem para a linha de baixo
 * em vez de espremer o valor. */
body.ux-portal .tile .t-value { overflow-wrap: normal; word-break: normal; }
@media (max-width: 480px) {
  body.ux-portal .tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1301px) {
  body.ux-portal .ux-dados { flex-wrap: wrap; row-gap: 12px; }
  body.ux-portal .ux-dados > div { flex: 1 1 170px; }
  body.ux-portal .ux-dados dd { overflow-wrap: break-word; }
}
/* Termômetro de preço: marcas vizinhas alternam o rótulo acima e abaixo da
 * régua, para "Nosso preço" e "Estimado" não se sobreporem. */
body.ux-portal #view-mercado .mc-regua { margin-bottom: 34px; }
body.ux-portal #view-mercado .mc-marca:nth-child(even) b { bottom: auto; top: 26px; }
/* Modal de cadastro: a ação principal fica visível sem rolar o miolo. */
body.ux-portal #pg-modal-miolo div:has(> #ct-novo-salvar) { position: sticky; bottom: 0; z-index: 1; padding: 10px 0; background: var(--surface); border-top: 1px solid var(--line); }
/* Tabelas em desktop: a primeira coluna (documento, edital) não encolhe a ponto
 * de virar uma palavra por linha (auditoria de 29/10/2026, Certidões e
 * Esclarecimentos a 1280 px). A tabela já rola dentro do próprio quadro. */
@media (min-width: 1101px) {
  body.ux-portal :is(#view-habilitacao, #view-juridico) table.tbl > tbody > tr > td:first-child { min-width: 26ch; }
}