@font-face { font-family: "Montserrat"; font-weight: 400; src: url("/publico/fontes/Montserrat-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; src: url("/publico/fontes/Montserrat-SemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; src: url("/publico/fontes/Montserrat-Bold.otf") format("opentype"); font-display: swap; }

:root {
  color-scheme: light;
  /* Tokens do manual da marca. */
  --odara-azul: #006975;
  --odara-cinza: #696c6d;
  --odara-branco: #ffffff;
  /* Apoio da interface. */
  --azul-escuro: #00525c;
  --tinta: #1d2b2e;
  --linha: #dfe4e5;
  --fundo-suave: #f5f8f8;
  --rosa-claro: #fbf1ec;
  /* Status: só em marcadores e bordas, sempre com ícone e rótulo. */
  --critico: #d03b3b;
  --atencao: #fab219;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--odara-branco); color: var(--tinta); font-family: "Montserrat", sans-serif; font-size: 16px; line-height: 1.45; }
h1, h2, h3 { color: var(--odara-azul); margin: 0; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 20px; }
h3 { font-size: 14px; }
[hidden] { display: none !important; }
main { max-width: 1240px; margin: 0 auto; padding: 8px 24px 64px; display: grid; gap: 48px; }
main > section { min-width: 0; }

/* Cabeçalho */
.cabecalho { max-width: 1240px; margin: 0 auto; padding: 24px; display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.logo { display: block; height: 40px; width: auto; }
.cabecalho h1 { padding-left: 20px; border-left: 1px solid var(--linha); }
.selo { margin: 0 0 0 auto; font-size: 14px; color: var(--odara-cinza); font-variant-numeric: tabular-nums; }
.selo-amarelo::before { content: "●\00a0"; color: var(--atencao); font-size: 16px; line-height: 1; }
.selo-vermelho::before { content: "▲\00a0"; color: var(--critico); font-size: 16px; line-height: 1; }

/* Avisos */
.aviso, .nota-carga { width: min(1192px, calc(100% - 48px)); margin: 0 auto 24px; border-radius: 12px; font-size: 14px; }
.aviso { display: flex; gap: 10px; padding: 14px 18px; border: 1px solid var(--linha); border-left-width: 6px; font-weight: 600; color: var(--tinta); }
.aviso-vermelho { border-color: var(--critico); }
.aviso-amarelo { border-color: var(--atencao); }
.nota-carga { padding: 12px 18px; background: var(--rosa-claro); }

/* Marcadores */
.marca { flex: none; font-size: 16px; line-height: 1; }
.marca-mais_30, .marca-vermelho { color: var(--critico); }
.marca-5_a_30, .marca-amarelo { color: var(--atencao); }
.marca-ate_5 { color: var(--odara-cinza); }
.marca-selo { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; border-radius: 50%; background: var(--odara-branco); font-size: 15px; vertical-align: -1px; }

/* Resumo: número grande só para o que exige ação */
.resumo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); gap: 16px; }
.destaque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 24px 32px; border-radius: 16px; background: var(--odara-azul); color: var(--odara-branco); }
.destaque h2 { color: var(--odara-branco); font-size: 14px; }
.valor { margin: 10px 0 0; font-size: 72px; font-weight: 700; line-height: 1; }
.valor-nota { margin: 6px 0 0; font-size: 13px; }
.discreto { padding: 24px 28px; border: 1px solid var(--linha); border-radius: 16px; }
.discreto h2 { color: var(--odara-cinza); font-size: 14px; }
.valor-discreto { margin: 12px 0 0; font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--odara-azul); }
.apoio { color: var(--odara-cinza); font-size: 13px; margin: 8px 0 0; overflow-wrap: anywhere; }
.apoio:empty { display: none; }

/* Barras e controles */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.controles { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.abas { display: inline-flex; border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.aba { border: 0; background: transparent; color: var(--odara-azul); font: inherit; font-weight: 600; font-size: 14px; padding: 7px 16px; border-radius: 999px; cursor: pointer; min-height: 38px; font-variant-numeric: tabular-nums; }
.aba[aria-pressed="true"] { background: var(--odara-azul); color: var(--odara-branco); }
.filtro { font-size: 14px; color: var(--odara-cinza); display: inline-flex; align-items: center; gap: 8px; }
select, input { font: inherit; padding: 8px 12px; border: 1px solid var(--odara-cinza); border-radius: 10px; background: var(--odara-branco); color: var(--tinta); min-height: 44px; }

/* Fila */
.fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lead { display: grid; grid-template-columns: 160px minmax(0, 1.5fr) 124px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 18px; border: 1px solid var(--linha); border-left-width: 6px; border-radius: 14px; }
.faixa-mais_30 { border-left-color: var(--critico); }
.faixa-5_a_30 { border-left-color: var(--atencao); }
.lead-tempo { display: grid; gap: 2px; }
.lead-faixa { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--odara-cinza); }
.espera { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lead-quem, .lead-dona { display: grid; min-width: 0; }
.lead-quem .apoio, .lead-dona .apoio { margin: 0; }
.lead-nome { font-weight: 600; overflow-wrap: anywhere; }
.lead-etapa { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--fundo-suave); }
.etiqueta-destaque { background: var(--rosa-claro); font-weight: 600; }
.vazio { padding: 32px; text-align: center; color: var(--odara-cinza); border: 1px dashed var(--linha); border-radius: 14px; }

/* Botões */
.botao-primario, .botao-secundario { display: inline-block; font: inherit; font-weight: 600; font-size: 14px; border-radius: 10px; padding: 9px 16px; cursor: pointer; text-decoration: none; text-align: center; white-space: nowrap; }
.botao-primario { background: var(--odara-azul); color: var(--odara-branco); border: 1px solid var(--odara-azul); }
.botao-primario:hover { background: var(--azul-escuro); border-color: var(--azul-escuro); }
.botao-secundario { background: transparent; color: var(--odara-azul); border: 1px solid var(--odara-azul); }
.botao-secundario:hover { background: var(--odara-azul); color: var(--odara-branco); }
.botao-qualidade { display: inline-grid; justify-items: end; background: none; border: 0; padding: 2px 0; font: inherit; color: var(--odara-azul); cursor: pointer; text-align: right; font-variant-numeric: tabular-nums; }
.indice { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--odara-azul); outline-offset: 2px; }
.rolagem:focus-visible { outline-offset: -2px; }

/* Tabela */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 14px; }
.tabela { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); font-weight: 400; }
.tabela thead th { font-size: 13px; line-height: 1.3; color: var(--odara-cinza); font-weight: 600; vertical-align: bottom; }
.tabela tbody th { font-weight: 600; background: var(--odara-branco); }
.tabela .num { text-align: right; }
.tabela[aria-busy="true"] { cursor: progress; }
.tabela tfoot th, .tabela tfoot td { font-weight: 700; border-bottom: 0; background: var(--odara-branco); }
.nota-celula { display: block; font-size: 12px; font-weight: 400; color: var(--odara-cinza); white-space: nowrap; }
.linha-especial th, .linha-especial td { color: var(--odara-cinza); background: var(--fundo-suave); }
.tabela tbody .linha-especial th { font-weight: 400; background: var(--fundo-suave); }
.detalhe td { padding: 20px 24px 24px; background: var(--fundo-suave); }
.detalhe-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 16px 56px; }
.detalhe-grade ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.detalhe-grade li { display: flex; justify-content: space-between; gap: 16px; }
.detalhe-grade strong { font-weight: 600; }
.detalhe-grade .apoio { grid-column: 1 / -1; margin: 0; }
.dica-rolagem { display: none; margin: 0 0 8px; }

/* Login */
.pagina-login { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 16px; background: var(--odara-azul); }
.cartao-login { width: min(400px, 100%); padding: 40px; background: var(--odara-branco); border-radius: 16px; display: grid; gap: 16px; }
.cartao-login form { display: grid; gap: 6px; }
.cartao-login label { font-size: 14px; font-weight: 600; margin-top: 10px; }
.cartao-login input { width: 100%; }
.cartao-login .botao-primario { margin-top: 20px; padding: 12px; font-size: 16px; }
.logo-login { display: block; height: 56px; width: auto; justify-self: start; margin-bottom: 8px; }
.erro-login { margin: 0; padding: 10px 14px; border: 1px solid var(--critico); border-left-width: 6px; border-radius: 12px; color: var(--tinta); font-size: 14px; }
.erro-login::before { content: "▲\00a0"; color: var(--critico); }
.erro-login:empty { display: none; }

@media (max-width: 960px) {
  .resumo { grid-template-columns: minmax(0, 1fr); }
  .discreto { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 16px 20px; }
  .discreto .valor-discreto { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .discreto .apoio { margin-top: 2px; }
  /* Flexível: a consultora e as etiquetas dividem a linha quando cabem, e as etiquetas descem quando não cabem. */
  .lead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 12px; }
  .lead-tempo { order: 1; }
  .lead-abrir { order: 2; }
  .lead-quem { order: 3; flex: 1 1 100%; }
  .lead-dona { order: 4; }
  .lead-etapa { order: 5; margin-left: auto; justify-content: flex-end; }
  /* A tabela rola de lado e o botão da qualidade fica no fim: o detalhe acompanha a rolagem para abrir à vista. */
  .dica-rolagem { display: block; }
  .tabela tbody th, .tabela thead th:first-child, .tabela tfoot th { position: sticky; left: 0; z-index: 1; background: var(--odara-branco); border-right: 1px solid var(--linha); }
  .tabela tbody .linha-especial th { background: var(--fundo-suave); }
  .detalhe td { padding: 16px; }
  .detalhe-grade { position: sticky; left: 16px; width: calc(100vw - 84px); }
}

@media (max-width: 640px) {
  main { padding: 0 16px 48px; gap: 36px; }
  .cabecalho { padding: 16px; justify-content: space-between; }
  .logo { height: 32px; }
  .cabecalho h1 { order: 3; width: 100%; padding-left: 0; border-left: 0; font-size: 16px; }
  .selo { order: 4; width: 100%; margin: -8px 0 0; }
  .aviso, .nota-carga { width: calc(100% - 32px); margin-bottom: 16px; }
  .destaque { gap: 16px; padding: 20px; }
  .destaque h2 { font-size: 13px; line-height: 1.35; }
  .marca-selo { display: grid; margin: 0 0 8px; }
  .valor { font-size: 56px; margin-top: 8px; }
  .barra { align-items: stretch; flex-direction: column; }
  .controles { flex-direction: column; align-items: stretch; }
  .abas { display: flex; }
  .aba { flex: 1 1 auto; min-height: 44px; padding: 7px 10px; white-space: nowrap; }
  .filtro { display: flex; }
  .filtro select { flex: 1; min-width: 0; }
  .botao-primario, .botao-secundario { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .detalhe-grade { width: calc(100vw - 68px); grid-template-columns: minmax(0, 1fr); }
  .cartao-login { padding: 28px 24px; }
}