/* ============================================================
   Design system do painel AMC, Blocos 38 a 43.
   Unico arquivo novo de estilo, carregado por todas as telas
   internas DEPOIS do app.css. O app.css guarda a base historica
   das telas com os mesmos valores de cor nos nomes antigos de
   variavel; aqui vivem os tokens com os nomes do design system,
   os componentes e a casca de navegacao.
   As fontes (DM Sans e IBM Plex Mono) sao declaradas no app.css,
   porque a tela publica e as folhas de impressao tambem as usam
   e nao carregam este arquivo.
   ============================================================ */

/* ===== Bloco 38: tokens ===== */

:root {
  /* Neutros em branco e cinza desde 22/08, pedido do Andre no lugar do
     creme do conceito; o nome --cimento ficou pelo papel (fundo do app).
     Desde 23/08 o acento de acao tambem e cinza: sistema minimalista,
     sem laranja. Os nomes --cobre ficam pelo historico, so o valor
     mudou para a familia grafite; verde e ambar seguem semanticos. */
  --cimento: #F3F4F6;
  --superficie: #FFFFFF;
  --antracite: #1F2124;
  --texto: #26282B;
  --texto-sec: #646973;
  /* Mesmo ajuste de contraste do --tinta-fraca do app.css, 24/08/2026. */
  --texto-mudo: #696F78;
  /* 28/08/2026: acento de acao em azul tecnico da marca, o mesmo do
     site. Ver a nota longa em app.css. Os nomes --cobre ficam pelo
     historico; so o valor mudou, agora pela terceira vez. */
  --cobre: #1D5C86;
  --cobre-escuro: #164A6C;
  --cobre-fundo: #E6EBEF;
  /* Azul que funciona SOBRE o antracite do trilho e da barra. O azul
     tecnico ali mede 2.25 e reprova; este mede 8.98. */
  --azul-claro: #7FCBEE;
  --verde: #35705A;
  --ambar: #9A6210;
  --ambar-fundo: #FBF3E4;
  --verde-fundo: #E9F2EE;
  --borda: #E4E7EB;

  /* Cores mnemonicas, pedido do Andre em 22/08: toda acao de WhatsApp
     e verde porque verde e a cor do WhatsApp; vermelho e o que passou
     do limite (vencido, recusado, quebrado), ambar e aviso a caminho. */
  --whatsapp: #0E7A43;
  --whatsapp-escuro: #0B6636;
  --whatsapp-fundo: #E7F6EC;

  --raio-cartao: 14px;
  --raio-pilula: 999px;
  --sombra-cartao: 0 2px 4px rgba(31, 33, 36, 0.05), 0 8px 20px rgba(31, 33, 36, 0.07);
  --sombra-botao: 0 1px 2px rgba(31, 33, 36, 0.12), 0 3px 8px rgba(31, 33, 36, 0.14);

  --trilho-largura: 56px;
  --barra-altura: 62px;
}

/* ===== Base tipografica das telas internas =====
   Corpo 13px e 400, rotulos secundarios 11.5px, titulos de cartao
   12px e 600, numeros de indicador 21px em IBM Plex Mono 500. */

.painel_app, .pagina_solta {
  font-size: 13px;
  line-height: 1.55;
  background: var(--cimento);
  color: var(--texto);
}
.painel_app h1, .pagina_solta h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.painel_app h2, .pagina_solta h2 { font-size: 13.5px; font-weight: 600; }
.painel_app h3, .pagina_solta h3 { font-size: 12.5px; font-weight: 600; }
.painel_app .subtitulo_pagina, .painel_app .texto_apoio { font-size: 12px; }

/* Links na propria tinta do texto: o sublinhado e quem diz que e link.
   No hover o tom sobe um degrau para o grafite medio. */
.painel_app a, .pagina_solta a { color: var(--texto); }
.painel_app a:hover, .pagina_solta a:hover { color: var(--cobre); }
/* A regra generica de link acima tem especificidade maior que a dos
   componentes; ancoras vestidas de botao ou selo recuperam aqui a cor
   do proprio componente. */
.painel_app a.botao_primario, .painel_app a.botao_primario:hover,
.painel_app a.botao_whatsapp, .painel_app a.botao_whatsapp:hover { color: #FFFFFF; }
.painel_app a.botao_secundario { color: var(--texto); }
.painel_app a.botao_secundario:hover { color: var(--superficie); }
.painel_app a.botao_perigo { color: var(--perigo, #A03028); }
.painel_app a.botao_perigo:hover { color: #FFFFFF; }
.painel_app a.selo, .painel_app a.selo:hover { color: #5D6066; }
.painel_app a.selo_verde, .painel_app a.selo_verde:hover { color: #1F4A39; }
.painel_app a.selo_ambar, .painel_app a.selo_ambar:hover { color: #6B440A; }
.painel_app a.selo_vermelho, .painel_app a.selo_vermelho:hover { color: #8E2B24; }
.painel_app a.selo_whatsapp, .painel_app a.selo_whatsapp:hover { color: #0B5C33; }

:where(.painel_app, .pagina_solta) :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 2px;
}

/* ===== Bloco 39: botoes ===== */

.botao_primario, .botao_secundario, .botao_perigo, .botao_whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
/* Acao primaria em antracite desde 23/08: branco sobre #1F2124 mede
   15.9 de contraste. O hover sobe para o grafite medio, nunca escurece
   alem do que o olho percebe. */
.botao_primario {
  background: var(--cobre);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(31, 33, 36, 0.18);
}
.botao_primario:hover:not(:disabled) { background: #3E4249; color: #FFFFFF; }
.botao_secundario {
  background: transparent;
  color: var(--texto);
  border-color: var(--antracite);
}
.botao_secundario:hover:not(:disabled) { background: var(--cobre); color: var(--superficie); }
.botao_perigo {
  background: transparent;
  color: var(--perigo, #A03028);
  border-color: var(--perigo, #A03028);
}
.botao_perigo:hover:not(:disabled) { background: var(--perigo, #A03028); color: #FFFFFF; }
/* Acao de WhatsApp: verde da marca do aplicativo, com contraste 5.4. */
.botao_whatsapp {
  background: var(--whatsapp);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(31, 33, 36, 0.18);
}
.botao_whatsapp:hover:not(:disabled) { background: var(--whatsapp-escuro); color: #FFFFFF; }
.botao_whatsapp svg { flex: none; }
/* Versao discreta para linha de tabela e link de telefone. */
.painel_app a.acao_whatsapp, .painel_app button.acao_whatsapp, .acao_whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--whatsapp);
  font-weight: 600;
}
.painel_app a.acao_whatsapp:hover, .painel_app button.acao_whatsapp:hover { color: var(--whatsapp-escuro); }
.acao_whatsapp svg { flex: none; }
.botao_primario:disabled, .botao_secundario:disabled, .botao_perigo:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.botao_primario:active:not(:disabled), .botao_secundario:active:not(:disabled), .botao_perigo:active:not(:disabled) {
  transform: translateY(1px);
}

/* ===== Bloco 39: cartoes ===== */

.cartao {
  background: var(--superficie);
  border: 0.5px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 14px;
}
.cartao_clicavel {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cartao_clicavel:hover {
  color: inherit;
  border-color: #CBD0D6;
  box-shadow: var(--sombra-cartao);
  transform: translateY(-1px);
}
.cartao_clicavel:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 2px;
}
.cartao_titulo {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto);
}

/* ===== Bloco 39: indicador kpi =====
   Titulo pequeno, numero em mono, regua grafite de 26 por 2
   (assinatura do sistema) e nota de rodape com variacoes. */

.kpi { display: block; }
.kpi_titulo {
  display: block;
  margin: 0;
  font-size: 11.5px;
  color: var(--texto-sec);
}
.kpi_numero {
  display: block;
  margin: 3px 0 0;
  font-family: var(--fonte-mono, 'IBM Plex Mono', monospace);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.kpi_regua {
  display: block;
  width: 26px;
  height: 2px;
  margin: 8px 0 0;
  background: var(--cobre);
  border-radius: 1px;
}
.kpi_nota {
  display: block;
  margin: 7px 0 0;
  font-size: 11.5px;
  color: var(--texto-sec);
}
.kpi_nota_verde { color: var(--verde); }
.kpi_nota_ambar { color: var(--ambar); }
/* A variacao muda fica no cinza secundario, nao no mudo: 11.5px em
   texto-mudo daria 2.6 de contraste e reprovaria no AA. */
.kpi_nota_muda { color: var(--texto-sec); }
/* Borda de atencao no tom suave do conceito, nao no ambar de texto. */
.kpi_alerta { border-color: #D9A755; }

/* ===== Bloco 39: selos =====
   Substituem os textos de status soltos. Quando ha acao, o selo e um
   link ou botao com a mesma aparencia e alvo de toque garantido. */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--raio-pilula);
  background: #EEF0F2;
  color: #5D6066;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
/* Textos dos selos nos tons fundos do conceito: verde 8.8 e ambar 7.7
   de contraste sobre os proprios fundos, bem acima do AA. */
.selo_verde { background: var(--verde-fundo); color: #1F4A39; }
.selo_ambar { background: var(--ambar-fundo); color: #6B440A; }
.selo_neutro { background: #EEF0F2; color: #5D6066; }
/* Azul da marca para o selo de troca: mede 8.1 de contraste sobre o
   proprio fundo. Fica no acento de acao porque a troca e uma decisao
   tomada no campo, nao um alerta. */
.selo_azul { background: var(--cobre-fundo); color: #164A6C; }
/* Mnemonicos: vermelho para o que passou do limite (vencido, recusado,
   quebrado) e o verde do WhatsApp para selo que abre o aplicativo. */
.selo_vermelho { background: var(--perigo-fundo, #FAECEA); color: #8E2B24; }
.selo_whatsapp { background: var(--whatsapp-fundo); color: #0B5C33; }
a.selo, button.selo { cursor: pointer; position: relative; }
/* Alvo de toque de 44px sem inflar o desenho do selo. */
a.selo::after, button.selo::after { content: ''; position: absolute; inset: -11px 0; }
a.selo:hover, button.selo:hover { filter: brightness(0.96); text-decoration: underline; }
a.selo:focus-visible, button.selo:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }

/* ===== Bloco 39: tabela adaptavel =====
   Em 768px ou mais, tabela com cabecalho fixo ao rolar. Abaixo disso,
   cada linha vira um cartao com o rotulo da coluna vindo do atributo
   data-rotulo de cada celula. Nenhuma rolagem horizontal no celular. */

.tabela_adaptavel { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabela_adaptavel th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie);
  padding: 9px 12px;
  border-block-end: 1px solid var(--borda);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-sec);
  text-align: start;
}
.tabela_adaptavel td {
  padding: 10px 12px;
  border-block-end: 1px solid var(--borda);
  font-size: 12.5px;
  vertical-align: middle;
}
.tabela_adaptavel tbody tr:last-child td { border-block-end: 0; }
.tabela_adaptavel .coluna_numero { text-align: end; font-variant-numeric: tabular-nums; }
/* A celula de acoes herda nowrap do app.css; aqui ela pode quebrar
   linha, senao a tabela estoura a pagina entre 768 e 990px. */
.tabela_adaptavel .celula_acoes { white-space: normal; }
@media (min-width: 768px) and (max-width: 990px) {
  .tabela_adaptavel th, .tabela_adaptavel td { padding: 8px 7px; }
  .tabela_adaptavel td { font-size: 12px; }
}

@media (max-width: 767.98px) {
  .tabela_adaptavel, .tabela_adaptavel tbody, .tabela_adaptavel tfoot, .tabela_adaptavel tr, .tabela_adaptavel td { display: block; }
  /* No modo cartao o rotulo de cada dado vem do data-rotulo da celula;
     o thead some de vez, senao as th largas esticam a pagina. */
  .tabela_adaptavel thead { display: none; }
  .tabela_adaptavel tr {
    background: var(--superficie);
    border: 0.5px solid var(--borda);
    border-radius: var(--raio-cartao);
    padding: 4px 12px;
    margin-block-end: 10px;
  }
  .tabela_adaptavel td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 14px;
    padding: 8px 0;
    border-block-end: 0.5px solid var(--borda);
    text-align: end;
  }
  .tabela_adaptavel td > .apoio { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
  .tabela_adaptavel td:last-child { border-block-end: 0; }
  .tabela_adaptavel td[data-rotulo]::before {
    content: attr(data-rotulo);
    flex: none;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--texto-sec);
    text-align: start;
  }
  .tabela_adaptavel .coluna_numero { text-align: end; }
  .tabela_adaptavel td.celula_acoes { justify-content: flex-end; }
  /* Dentro do cartao a linha nao precisa do fundo proprio da tabela. */
  .tabela_adaptavel .linha_pendente, .tabela_adaptavel .linha_avaria { border-inline-start: 3px solid var(--ambar); }
  .tabela_adaptavel .linha_avaria { border-inline-start-color: var(--perigo, #A03028); }
}

/* ===== Bloco 39: campos de formulario ===== */

.painel_app .campo label, .pagina_solta .campo label { font-size: 11.5px; font-weight: 600; color: var(--texto-sec); }
.painel_app .campo input, .painel_app .campo select, .painel_app .campo textarea,
.pagina_solta .campo input, .pagina_solta .campo select, .pagina_solta .campo textarea {
  border: 0.5px solid #CBD0D6;
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  font-size: 13px;
  min-height: 44px;
  padding: 8px 12px;
}
.painel_app .campo input:focus-visible, .painel_app .campo select:focus-visible, .painel_app .campo textarea:focus-visible,
.pagina_solta .campo input:focus-visible, .pagina_solta .campo select:focus-visible, .pagina_solta .campo textarea:focus-visible {
  outline: 2px solid var(--cobre);
  outline-offset: 1px;
  border-color: var(--cobre);
}
/* Mensagem de erro de campo em ambar, abaixo do campo. */
.painel_app .erro_campo, .pagina_solta .erro_campo { color: var(--ambar); font-size: 11.5px; }

/* ===== Bloco 40: trilho lateral do desktop ===== */

.trilho { display: none; }

@media (min-width: 768px) {
  .trilho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--trilho-largura);
    background: var(--antracite);
    padding-block: 14px;
    z-index: 40;
  }
  .trilho_marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-block-end: 10px;
    border-radius: 8px;
    background: #F3F4F6;
    color: var(--antracite);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .trilho_menu { display: flex; flex-direction: column; gap: 6px; flex: 1; width: 100%; align-items: center; }
  .trilho_base { width: 100%; display: flex; justify-content: center; }
  /* Icones do trilho em branco, pedido do Andre em 23/08: o cinza
     medio sumia sobre o antracite. O item ativo se distingue pelo
     marcador branco na borda, nao pela cor do icone. A cor sai com
     .painel_app a na frente, senao a regra generica de link (0,1,1)
     vence esta (0,1,0) e pinta o icone de escuro sobre escuro. */
  .painel_app a.trilho_item, .painel_app a.trilho_item:hover { color: #FFFFFF; }
  .trilho_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 140ms ease;
    opacity: 0.85;
  }
  .trilho_item:hover { opacity: 1; }
  .trilho_item:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: -2px; }
  .trilho_item[aria-current="page"] { opacity: 1; }
  .painel_app a.trilho_item[aria-current="page"],
  .painel_app a.trilho_item[aria-current="page"]:hover { color: var(--azul-claro); }
  /* Marcador branco de 3px a esquerda do item ativo, sobre o trilho
     escuro: o unico ponto de destaque do menu. */
  .trilho_item[aria-current="page"]::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--azul-claro);
  }
  /* Rotulo em tooltip simples de CSS, no hover e no foco de teclado. */
  .trilho_item::after {
    content: attr(data-rotulo);
    position: absolute;
    inset-inline-start: calc(100% + 2px);
    top: 50%;
    translate: 0 -50%;
    background: var(--antracite);
    color: #F5F4F1;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
    pointer-events: none;
    z-index: 50;
  }
  .trilho_item:hover::after, .trilho_item:focus-visible::after { opacity: 1; visibility: visible; }
}

/* ===== Bloco 40: moldura do conteudo ===== */

.app_moldura {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
@media (min-width: 768px) {
  .app_moldura { margin-inline-start: var(--trilho-largura); }
}
/* O conteudo herda max-width e paddings do app.css; aqui so se reserva
   o espaco da barra inferior no celular. */
@media (max-width: 767.98px) {
  .app_moldura .conteudo, .app_moldura .rodape {
    padding-block-end: calc(var(--barra-altura) + 18px + env(safe-area-inset-bottom));
  }
  .app_moldura .rodape { padding-block-end: calc(var(--barra-altura) + 10px + env(safe-area-inset-bottom)); }
}

/* Cabecalho de conteudo: saudacao, data por extenso e a acao primaria
   contextual da tela a direita. */
.topo_conteudo {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding: 18px 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 900px) {
  .topo_conteudo { padding-inline: 1rem; }
}
.saudacao { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto); }
.saudacao_data { margin: 0; font-size: 12px; color: var(--texto-sec); }
/* flex: none fazia o bloco todo recusar encolher: em 320px um rotulo
   longo na acao primaria empurrava o sino e o atalho de ajustes para
   fora da tela e a pagina inteira andava 36px para o lado. Agora o
   bloco pode encolher e quem cede primeiro e o botao de texto, que
   corta o rotulo com reticencia em vez de estourar a largura. */
.topo_acoes { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.topo_acoes .botao_primario {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topo_acoes .sino_topo, .topo_acoes .atalho_ajustes { flex: none; }
/* Atalho de ajustes que so aparece no celular, onde a barra inferior
   tem quatro abas e nao carrega a area de ajustes. */
.atalho_ajustes {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-pilula);
  border: 0.5px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-sec);
}
@media (max-width: 767.98px) {
  .atalho_ajustes { display: inline-flex; }
}

/* ===== Bloco 40: barra inferior do celular ===== */

.barra_inferior { display: none; }
@media (max-width: 767.98px) {
  .barra_inferior {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: grid;
    /* Colunas geradas pela quantidade de abas, nao por um numero fixo:
       com repeat(5) a sexta aba caia para uma segunda linha e vazava
       para fora da barra. Assim a barra acompanha o menu sem manutencao. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    height: calc(var(--barra-altura) + env(safe-area-inset-bottom));
    padding-block-end: env(safe-area-inset-bottom);
    background: var(--superficie);
    border-block-start: 0.5px solid var(--borda);
  }
  .barra_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--barra-altura);
    color: var(--texto-sec);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
  }
  /* O rotulo nunca vaza para a aba vizinha nem quebra em duas linhas:
     em 320px, com sete abas, "Propostas" nao cabe inteiro e passa a
     cortar com reticencia. O icone continua identificando a aba, e o
     alvo de toque nao muda. */
  .barra_item > span {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
  }
  .barra_item[aria-current="page"] { color: var(--cobre); }
  .barra_item:focus-visible { outline: 2px solid var(--cobre); outline-offset: -2px; }
  /* Botao central circular em antracite, elevado sobre a barra, com o
     anel branco e sombra neutra. */
  .barra_mais {
    justify-self: center;
    align-self: start;
    translate: 0 -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 3px solid var(--superficie);
    border-radius: 50%;
    background: var(--cobre);
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(31, 33, 36, 0.3);
  }
  .barra_mais:active { background: #3E4249; }
  .barra_mais:focus-visible { outline: 2px solid var(--antracite); outline-offset: 2px; }
}

/* Folha inferior de acoes rapidas do botao central. */
.folha_fundo {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(31, 33, 36, 0.45);
}
.folha_menu {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 46;
  background: var(--superficie);
  border-radius: 16px 16px 0 0;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(31, 33, 36, 0.18);
}
.folha_alca {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--borda);
  margin: 0 auto 10px;
}
.folha_titulo { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--texto-sec); }
.folha_menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.folha_menu a:hover { background: var(--cimento); color: var(--texto); }
.folha_menu a svg { color: var(--cobre-escuro); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .folha_menu { animation: subir_folha 180ms cubic-bezier(0.2, 0.8, 0.3, 1); }
  @keyframes subir_folha {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
}

/* O formulario de filtros ocupava a linha inteira por estilo embutido,
   que a CSP bloqueia; a classe faz o mesmo do lado certo. */
.formulario_filtros { flex: 1 1 100%; }

/* ===== Bloco 42: home do painel ===== */

/* Colunas explicitas como no conceito: quatro iguais no desktop, duas
   no celular. O auto-fit anterior quebrava em contagens irregulares e
   deixava os cartoes tortos. */
.grade_kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-block-end: 14px;
}
@media (min-width: 900px) {
  .grade_kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grade_home_graficos {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 10px;
  margin-block-end: 14px;
}
@media (max-width: 900px) {
  .grade_home_graficos { grid-template-columns: minmax(0, 1fr); }
}
/* Nota de contexto acima de um grafico, no cinza secundario. */
.apoio_grafico { margin: 0 0 8px; font-size: 11.5px; color: var(--texto-sec); }

/* Grafico de card largo desenhado em duas proporcoes no servidor: a
   larga vale no desktop, a estreita no celular. So uma existe por vez. */
.grafico_largo { display: none; }
@media (min-width: 900px) {
  .grafico_largo { display: block; }
  .grafico_estreito { display: none; }
}

.lista_atividade { list-style: none; margin: 0; padding: 0; }
.lista_atividade li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 9px;
  border-block-end: 0.5px solid var(--borda);
}
.lista_atividade li:last-child { border-block-end: 0; }
.atividade_corpo { min-width: 0; }
.atividade_que { margin: 0; font-size: 12.5px; font-weight: 500; }
.atividade_quando { margin: 1px 0 0; font-size: 11px; color: var(--texto-sec); }
.lista_atividade .selo { flex: none; }
@media (max-width: 480px) {
  .lista_atividade li { flex-wrap: wrap; }
}

/* ===== Bloco 41: graficos em SVG ===== */

.grafico_vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--borda);
  border-radius: 10px;
  background: var(--cimento);
}
.grafico_vazio p { margin: 0; font-size: 11.5px; color: var(--texto-sec); }

.grafico_rosca_par {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.grafico_rosca_par svg { flex: none; }
.grafico_legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grafico_legenda li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--texto-sec); }
.grafico_legenda li svg { flex: none; }
.grafico_legenda strong {
  margin-inline-start: auto;
  font-family: var(--fonte-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  color: var(--texto);
}

/* ===== Avarias: miniatura da foto ===== */

.foto_avaria { display: inline-block; border-radius: 8px; overflow: hidden; line-height: 0; }
.foto_avaria img { object-fit: cover; border-radius: 8px; border: 0.5px solid var(--borda); }
.foto_avaria:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }

/* ===== Tela de Ajustes: cartoes de area ===== */

.grade_ajustes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) {
  .grade_ajustes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cartao_ajuste { display: flex; align-items: center; gap: 12px; }
.cartao_ajuste_icone {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--cimento);
  color: var(--cobre-escuro);
}
.cartao_ajuste_texto { min-width: 0; }
.cartao_ajuste .cartao_titulo { margin-block-end: 2px; }
.cartao_ajuste_descricao { display: block; font-size: 11.5px; color: var(--texto-sec); }
.cartao_ajuste_seta { margin-inline-start: auto; color: var(--texto-mudo); flex: none; }

/* ===== Pagina de teste interna do design system (ui_teste.php) =====
   As cores saem por atributo porque a CSP bloqueia estilo embutido. */

.teste_grade_tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.teste_token { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.teste_token code { font-family: var(--fonte-mono, monospace); font-size: 11px; color: var(--texto); }
.teste_token_papel { color: var(--texto-sec); }
.teste_token_cor { display: block; width: 100%; height: 34px; border-radius: 8px; border: 0.5px solid var(--borda); }
.teste_token_cor[data-cor="F3F4F6"] { background: #F3F4F6; }
.teste_token_cor[data-cor="FFFFFF"] { background: #FFFFFF; }
.teste_token_cor[data-cor="1F2124"] { background: #1F2124; }
.teste_token_cor[data-cor="26282B"] { background: #26282B; }
.teste_token_cor[data-cor="646973"] { background: #646973; }
.teste_token_cor[data-cor="9CA3AF"] { background: #9CA3AF; }
.teste_token_cor[data-cor="3E4249"] { background: #3E4249; }
.teste_token_cor[data-cor="35705A"] { background: #35705A; }
.teste_token_cor[data-cor="9A6210"] { background: #9A6210; }
.teste_token_cor[data-cor="FBF3E4"] { background: #FBF3E4; }
.teste_token_cor[data-cor="E9F2EE"] { background: #E9F2EE; }
.teste_token_cor[data-cor="E4E7EB"] { background: #E4E7EB; }
.teste_linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.teste_nota { font-size: 11.5px; color: var(--texto-sec); }
.teste_lista_contraste { list-style: none; margin: 0; padding: 0; }
.teste_lista_contraste li { display: flex; gap: 10px; align-items: baseline; padding-block: 4px; border-block-end: 0.5px solid var(--borda); font-size: 12px; }
.teste_lista_contraste li:last-child { border-block-end: 0; }
.teste_lista_contraste strong { font-family: var(--fonte-mono, monospace); font-weight: 500; margin-inline-start: auto; }
.teste_lista_contraste em { font-style: normal; color: var(--texto-sec); font-size: 11.5px; }
.teste_icones { gap: 16px; }
.teste_icone { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: var(--texto); }
.teste_icone small { font-size: 10px; color: var(--texto-sec); }
.teste_grade_kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 10px; margin-block: 14px; }
.grade_graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 10px; margin-block-start: 14px; }

/* Espaco entre cartoes soltos empilhados. Dentro de uma grade o vao e
   da propria grade: a margem aqui desalinharia a fileira. */
.painel_app .cartao + .cartao { margin-block-start: 14px; }
.painel_app :where(.grade_kpis, .grade_home_graficos, .grade_ajustes, .grade_veiculos, .teste_grade_kpi, .grade_graficos) .cartao + .cartao { margin-block-start: 0; }

/* ===== Frota: cards de veiculo com foto ===== */

.grade_veiculos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .grade_veiculos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .grade_veiculos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* O cartao do veiculo abre com a foto sangrando ate as bordas; o
   padding vive so no corpo. */
.cartao_veiculo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cartao_veiculo:hover {
  border-color: #CBD0D6;
  box-shadow: var(--sombra-cartao);
  transform: translateY(-1px);
}
.veiculo_foto {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--cimento);
  overflow: hidden;
  text-decoration: none;
}
.veiculo_foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.veiculo_foto_vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  color: var(--texto-mudo);
}
.veiculo_foto_vazia small { font-size: 10.5px; font-weight: 600; }
.veiculo_corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  flex: 1;
}
.veiculo_topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.veiculo_nome { margin: 0; font-size: 13.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.painel_app .veiculo_nome a { text-decoration: none; }
.painel_app .veiculo_nome a:hover { text-decoration: underline; }
.veiculo_topo .selo { flex: none; }
.veiculo_ficha { margin: 0; font-size: 11.5px; color: var(--texto-sec); }
.veiculo_placa {
  font-family: var(--fonte-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.veiculo_dados {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.veiculo_dados dt {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-mudo);
}
.veiculo_dados dd {
  margin: 1px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.veiculo_alerta { align-self: flex-start; }
.cartao_veiculo .cartao_obra_acoes { padding-block-start: 4px; }

/* ===== Casca: rodape e impressao ===== */

.painel_app .rodape { font-size: 11.5px; }

@media print {
  .trilho, .barra_inferior, .folha_menu, .folha_fundo, .topo_conteudo, .rodape { display: none !important; }
  .app_moldura { margin: 0; }
  .painel_app { background: #FFFFFF; }
}

/* ============================================================
   Bloco 53: entrada do modulo Equipe na casca de navegacao.
   O trilho do desktop e a barra do celular ganharam um item.
   Aqui so mora o que a casca precisa para caber com seis
   colunas; os componentes do modulo vivem em assets/css/rh.css,
   carregado apenas pelas telas dele.
   ============================================================ */

@media (max-width: 767.98px) {
  /* 02/09/2026: quatro abas, o botao central e a aba Menu, seis colunas
     de 62px em 375px. As colunas continuam vindo do grid-auto-columns
     da regra da barra, sem contagem fixa aqui. */
  .barra_item { font-size: 10px; letter-spacing: -0.01em; }
  .barra_item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Alvo de toque de 44px sem mudar o desenho, mesma tecnica ja usada nos
   selos: a area clicavel cresce por pseudo elemento, o texto continua do
   tamanho que era. Vale para a marca do trilho (28px de desenho) e para
   os links de nome dentro das tabelas. */
.trilho_marca, .tabela_adaptavel td > a:not(.selo):not(.botao):not(.acao_discreta) { position: relative; }
.trilho_marca::after {
  content: '';
  position: absolute;
  inset: -8px;
}
.tabela_adaptavel td > a:not(.selo):not(.botao):not(.acao_discreta)::after {
  content: '';
  position: absolute;
  inset-block: -14px;
  inset-inline: 0;
}

/* ===== Casca: sino de mensagens e alvo do cabecalho de cartao =====
   Blocos 64 a 66. Estas duas regras vivem aqui, e nao em agenda.css,
   porque valem para TODA tela do painel: o sino esta no topo comum e o
   cabecalho de cartao existe desde as telas antigas. Enquanto moravam na
   folha da agenda, o sino ficava sem estilo em toda tela que nao a
   carregava, com 28px de alvo de toque em vez de 44. */

/* Sino do topo com o contador de nao lidas. */
.sino_topo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 12px;
  color: var(--texto-sec);
  flex: none;
}
.painel_app a.sino_topo { color: var(--texto-sec); }
.sino_topo:hover { background: var(--superficie); }
.painel_app a.sino_topo:hover { color: var(--texto); }
.sino_topo:focus-visible { outline: 2px solid var(--antracite); outline-offset: 2px; }
.sino_contador {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-end: 4px;
  min-inline-size: 17px;
  block-size: 17px;
  padding-inline: 4px;
  border-radius: var(--raio-pilula);
  /* 30/08/2026: era #C25548, que com o branco por cima media 4.48 e
     REPROVA no AA por dois centesimos. O contador de mensagens por ler e
     justamente o numero que interrompe: precisa ser lido de relance.
     Passou para o vermelho de limite que o projeto ja tem em token, que
     mede 7.52 com branco por cima. Achado pelo medidor de contraste do
     scripts/qa_ponto.mjs, que roda em toda tela do painel. */
  background: var(--perigo);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Mesma ampliacao para a acao do cabecalho de cartao. O app.css desliga
   ali o min-height de 44px de proposito, para o cabecalho nao ficar alto;
   o toque volta ao tamanho certo sem desfazer essa escolha. Vale tambem
   para os cabecalhos antigos do painel, que tinham o mesmo alvo curto. */
.cartao_secao_titulo { position: relative; }
.cartao_secao_titulo .acao_discreta { position: static; }
.cartao_secao_titulo .acao_discreta::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: auto;
  right: -6px;
  width: 60%;
  max-width: 12rem;
}


/* ============================================================
   Casca do celular, 02/09/2026: aba Menu e folha com todas as areas.
   A barra tinha sete abas e ainda escondia Estoque e Ajustes. Agora
   tem quatro abas do dia de campo, o botao central e a aba Menu, que
   abre a folha com as nove areas em grade de icones, mais mensagens
   e sair. A aba Menu e um botao vestido de aba: mesma altura, mesma
   tipografia, e acende quando a tela atual e de uma area que nao
   esta na barra.
   ============================================================ */

@media (max-width: 767.98px) {
  .barra_menu {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    width: 100%;
  }
  .barra_menu[data-ativo="1"], .barra_menu[aria-expanded="true"] { color: var(--cobre); }
}
.folha_menu_completo { padding-block-end: calc(18px + env(safe-area-inset-bottom)); }
.folha_grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-block-end: 10px;
}
.painel_app a.folha_area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--cimento);
  color: var(--texto);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.painel_app a.folha_area svg { color: var(--texto-sec); }
.painel_app a.folha_area:hover { background: var(--borda); color: var(--texto); }
.painel_app a.folha_area[aria-current="page"] { background: var(--antracite); color: #FFFFFF; }
.painel_app a.folha_area[aria-current="page"] svg { color: var(--azul-claro); }
.painel_app a.folha_area:focus-visible { outline: 2px solid var(--cobre); outline-offset: 2px; }
.folha_secundario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border-block-start: 0.5px solid var(--borda);
  padding-block-start: 8px;
}
.folha_secundario a { min-height: 44px; }