/* Casamax · Frota — telas no padrão do Sam (decisão de 22/10/2026).
 *
 * A tela de entrar foi refeita copiando as telas de acesso do Sam (antigo Yapp-gps) e o Rodrigo pediu o mesmo padrão
 * em todas as telas e componentes. Esta camada traduz o design system do Sam (frontend/DESIGN.md e components/ui) para
 * as classes que as telas já usam, sem React: tinta quase preta e cinzas quentes, linhas finas, raio de 10 a 14 px,
 * rótulos mono em maiúsculo, campos de 44 px com anel de foco, botão cheio com sombra, chips de 8 px, tabela com
 * cabeçalho em rótulo mono, cartões sem sombra (profundidade só pelo valor da cor) e sombra só no que flutua.
 *
 * O ciano do Sam vira o vermelho da marca (#A60101, vinho #660000 no hover); o tom claro dele (cyan-tint) vira um
 * rosado bem leve, para o item ativo do menu e os chips de destaque. Status (bom, atenção, crítico), as classes d-* da
 * Frota e as cores dos estados dos relatórios não mudam: só o acabamento em volta.
 *
 * Ordem no base.html: app.css → tema.css → menu.css → marca.css → sam.css → CSS da tela.
 */

:root {
  --tinta: #12100B;
  --fundo: #F7F7F5;
  --superficie: #FFFFFF;
  --superficie-2: #FBFBFA;          /* faixa do cabeçalho da tabela, rodapé de cartão */
  --superficie-3: #F2F2EF;          /* chips neutros, botão ao passar o mouse, trilho */
  --bandeja: #EFEFEC;               /* nível 2: bandejas e colunas, entre a página e o cartão */
  --texto: #12100B;
  --texto-2: #5A5A55;
  --texto-3: #6F6F69;
  --texto-4: #9A9A94;               /* placeholder e sobretítulo: nunca texto que precise ser lido */
  --borda: #E9E9E6;                 /* cartões, divisórias */
  --borda-forte: #D8D8D4;           /* campos, botão secundário */
  --borda-linha: #F1F1EF;           /* entre as linhas da tabela */

  --marca-tinta: #FBEFEF;           /* o "cyan-tint" do Sam: item ativo, ícone do título, chip de destaque */
  --marca-texto: #A60101;           /* o "cyan-text": texto sobre a tinta */
  --acao: #A60101;
  --acao-hover: #660000;
  --acao-texto: #FFFFFF;
  --acao-sombra: 0 4px 12px rgba(166, 1, 1, .24);
  --foco: #12100B;
  --anel: 0 0 0 3px rgba(166, 1, 1, .18);
  --selecao: #FBF2F2;
  --selecao-forte: #F3DEDE;
  --link: #A60101;

  --fonte-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  --raio: 6px;
  --raio-g: 6px;
  --controle: 40px;
  --linha: 48px;
  --sombra: none;
  --sombra-alta: 0 24px 60px rgba(18, 16, 11, .18);
  --sombra-menu: 0 12px 32px rgba(18, 16, 11, .12);
  --veu: rgba(18, 16, 11, .45);
}

:root[data-theme="dark"] {
  --tinta: #EDEDEA;
  --fundo: #0F0F0E;
  --superficie: #181817;
  --superficie-2: #1D1D1B;
  --superficie-3: #262624;
  --bandeja: #141413;
  --texto: #EDEDEA;
  --texto-2: #B5B5AF;
  --texto-3: #94948E;
  --texto-4: #6E6E69;
  --borda: #2A2A27;
  --borda-forte: #3B3B37;
  --borda-linha: #222220;

  --marca-tinta: #2C1717;
  --marca-texto: #FF8A80;
  --acao: #A60101;
  --acao-hover: #C21414;
  --acao-texto: #FFFFFF;
  --acao-sombra: 0 4px 12px rgba(0, 0, 0, .4);
  --foco: #F2F2EF;
  --anel: 0 0 0 3px rgba(255, 138, 128, .30);
  --selecao: #261A1A;
  --selecao-forte: #3A2424;
  --link: #FF8A80;
  --sombra-alta: 0 24px 60px rgba(0, 0, 0, .6);
  --sombra-menu: 0 12px 32px rgba(0, 0, 0, .5);
  --veu: rgba(0, 0, 0, .6);
}

body { background: var(--fundo); color: var(--texto); font-size: 14px; line-height: 21px; }
::selection { background: var(--selecao-forte); color: var(--texto); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------------ cabeçalho da página (TopBar do Sam, no fluxo) */

.pagina { padding: 28px 32px 56px; }
.cabecalho-pagina { align-items: flex-end; gap: 12px 24px; margin-bottom: 24px; }
.sobretitulo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font: 500 11px/1 var(--fonte-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
}
.sobretitulo::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--acao); }
.sobretitulo a { color: inherit; text-decoration: none; }
.sobretitulo a:hover { color: var(--texto); }
.cabecalho-pagina h1 {
  font: 700 26px/32px var(--fonte);
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--texto);
}
.icone { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cabecalho-pagina p { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--texto-2); max-width: 80ch; }
.acoes { gap: 8px; align-items: center; }
h2.secao { margin: 28px 0 10px; font: 700 15px/22px var(--fonte); letter-spacing: -.01em; color: var(--texto); }
h2.secao .suave { font-weight: 500; }
.voltar { margin-bottom: 14px; }
/* voltar: o TopBarBack do Sam, um botão fantasma pequeno acima do título */
.voltar a {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: -10px; padding: 0 10px;
  border-radius: 4px; font: 500 13px/1 var(--fonte); color: var(--texto-2);
}
.voltar a:hover { color: var(--texto); background: var(--superficie-3); text-decoration: none; }

/* rótulo mono: o mesmo das telas de acesso (campos, cabeçalho de tabela, sobretítulos de cartão) */
.rotulo-mono, .campo > label, .campo > .rotulo, .painel-cabecalho .rotulo-painel {
  font: 500 11px/1.3 var(--fonte-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

/* ------------------------------------------------------------------ botões */

.btn {
  height: var(--controle);
  padding: 0 16px;
  gap: 8px;
  font: 600 14px/1 var(--fonte);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: none;
  transition: background-color .12s, border-color .12s, box-shadow .12s, color .12s;
}
.btn:hover { background: var(--superficie-3); border-color: var(--borda-forte); color: var(--texto); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--anel); border-color: var(--acao); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primario { color: var(--acao-texto); background: var(--acao); border-color: var(--acao); box-shadow: var(--acao-sombra); }
.btn-primario:hover { color: var(--acao-texto); background: var(--acao-hover); border-color: var(--acao-hover); }
.btn-primario:focus-visible { box-shadow: var(--acao-sombra), var(--anel); }
.btn-fantasma { color: var(--texto-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn-fantasma:hover { color: var(--texto); background: var(--superficie-3); border-color: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--texto-4); background: var(--superficie-2); border-color: var(--borda); box-shadow: none; opacity: 1; }
.btn .selo { height: 20px; padding: 0 7px; border-radius: 6px; }
.link-botao { color: var(--link); font-weight: 600; text-decoration: none; }
.link-botao:hover { text-decoration: underline; }
a { color: var(--link); }
kbd, .kbd { font-family: var(--fonte-mono); border-radius: 6px; border-color: var(--borda-forte); }

/* ------------------------------------------------------------------ campos (44 px, anel de foco no vermelho) */

.campo { gap: 6px; }
.campo .dica { font-size: 12px; line-height: 17px; color: var(--texto-3); }
input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"],
input[type="email"], input[type="time"], input[type="month"], select, textarea {
  height: 44px;
  padding: 0 14px;
  font: 400 14px/1 var(--fonte);
  color: var(--texto);
  background-color: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; min-height: 88px; padding: 10px 14px; line-height: 21px; }
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
select[multiple] { height: auto; padding: 6px; background-image: none; }
input::placeholder, textarea::placeholder { color: var(--texto-4); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #BDBDB7; }
:root[data-theme="dark"] input:hover, :root[data-theme="dark"] select:hover, :root[data-theme="dark"] textarea:hover { border-color: #55554F; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--acao); box-shadow: var(--anel); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--critico); box-shadow: none; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--acao); }
input[type="range"] { accent-color: var(--acao); }
input[type="file"] { max-width: 100%; font: 400 14px/1.4 var(--fonte); color: var(--texto-2); }
input[type="file"]::file-selector-button {
  height: 40px; margin-right: 12px; padding: 0 16px; cursor: pointer;
  font: 600 14px/1 var(--fonte); color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  transition: background-color .12s;
}
input[type="file"]::file-selector-button:hover { background: var(--superficie-3); }
input[type="file"]:focus-visible { outline: none; }
input[type="file"]:focus-visible::file-selector-button { border-color: var(--acao); box-shadow: var(--anel); }
.formulario { gap: 18px; }
.formulario .linha-campos { gap: 14px; }
/* Numa linha de campos, os rótulos ficam no alto e as caixas no pé: campo com dica e campo sem dica não desalinham. */
.formulario .linha-campos > .campo { display: flex; flex-direction: column; }
.formulario .linha-campos > .campo > :is(input, select, textarea, .buscavel) { margin-top: auto; }
.formulario .rodape-form { gap: 8px; padding-top: 18px; border-top: 1px dashed var(--borda-forte); }

/* ------------------------------------------------------------------ lista: filtros + contagem + tabela formam um cartão */

.barra-ferramentas {
  gap: 10px 12px;
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-bottom: 0;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  box-shadow: none;
}
.barra-ferramentas .campo { gap: 6px; }
.barra-ferramentas .campo > label, .barra-ferramentas .campo > .rotulo { font-size: 11px; }
.barra-ferramentas input[type="text"], .barra-ferramentas input[type="search"], .barra-ferramentas input[type="date"],
.barra-ferramentas input[type="number"], .barra-ferramentas input[type="email"], .barra-ferramentas select {
  height: 40px; font-size: 14px; padding-left: 12px;
}
.barra-ferramentas select { padding-right: 32px; background-position: right 10px center; }
.barra-ferramentas .btn { height: 40px; padding-inline: 14px; }
.barra-ferramentas .opcao { height: 40px; font-size: 13px; color: var(--texto-2); }

.contagem {
  padding: 10px 18px;
  font-size: 13px;
  color: var(--texto-3);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-bottom: 0;
}
.barra-lote {
  min-height: 60px;
  padding: 10px 18px;
  color: #FFFFFF;
  background: #12100B;
  border-radius: var(--raio-g) var(--raio-g) 0 0;
}
:root[data-theme="dark"] .barra-lote { background: #2A2A27; }
.barra-lote .btn { color: #FFFFFF; background: transparent; border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.barra-lote .btn:hover { background: rgba(255, 255, 255, .1); }
.barra-lote .btn-primario { background: var(--acao); border-color: var(--acao); }

/* ------------------------------------------------------------------ tabela (cabeçalho em rótulo mono) */

.tabela-caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
  box-shadow: none;
}
.tabela-caixa.solta { border-radius: var(--raio-g); }
.tabela { font-size: 13px; }               /* Montserrat é larga: 13 px mantém as listas cabendo em 1100 px (marca.css) */
.tabela th, .tabela td { height: var(--linha); padding: 0 14px; border-bottom: 1px solid var(--borda-linha); }
.tabela th:first-child, .tabela td:first-child { padding-left: 20px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 20px; }
.tabela thead th {
  height: 40px;
  font: 500 11px/1.2 var(--fonte-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.tabela thead th .sub { font-family: var(--fonte); letter-spacing: 0; text-transform: none; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tbody tr[aria-selected="true"] td { background: var(--selecao); }
.tabela tbody tr.aberta td { background: var(--selecao); box-shadow: none; }
.tabela tbody tr.aberta td:first-child { box-shadow: inset 3px 0 0 var(--acao); }
.tabela td a { color: var(--texto); font-weight: 600; }
.tabela td a:hover { color: var(--link); text-decoration: none; }
.tabela .sub { font-size: 12px; line-height: 16px; color: var(--texto-3); }
.tabela.compacta th, .tabela.compacta td { height: 38px; padding: 0 10px; }
.tabela.compacta thead th { height: 34px; background: transparent; }
.tabela.compacta td:first-child, .tabela.compacta th:first-child { padding-left: 0; }
.tabela.compacta td:last-child, .tabela.compacta th:last-child { padding-right: 0; }
.tabela tr.grupo-linha th {
  height: 34px;
  font: 600 13px/1 var(--fonte);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto);
  background: var(--superficie-3);
  border-bottom-color: var(--borda);
}
.mais-linhas { padding: 12px 20px; border-top: 1px solid var(--borda-linha); font-size: 13px; color: var(--texto-3); }

/* estado vazio: título e uma linha, sem ilustração */
.vazio { padding: 48px 20px; text-align: center; color: var(--texto-3); font-size: 14px; }
.vazio strong { display: block; margin-bottom: 4px; font: 600 15px/22px var(--fonte); letter-spacing: -.01em; color: var(--texto); }
/* ------------------------------------------------------------------ chips de status (forma além da cor) */

.selo {
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  font: 600 12px/1 var(--fonte);
  border-radius: 4px;
  color: var(--neutro);
  background: var(--neutro-fundo);
}
/* a forma diz o estado sem depender da cor: ● bom e neutro, ▲ atenção, ■ crítico */
.selo::before, .selo-bom::before, .selo-neutro::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; font-size: 0; clip-path: none;
}
.selo-atencao::before { width: 8px; height: 7px; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.selo-critico::before { width: 7px; height: 7px; border-radius: 1px; clip-path: none; }
.selo-bom { color: var(--bom); background: var(--bom-fundo); }
.selo-atencao { color: var(--atencao); background: var(--atencao-fundo); }
.selo-critico { color: var(--critico); background: var(--critico-fundo); }
.selo-marca { color: var(--marca-texto); background: var(--marca-tinta); }
.selo-simples { height: auto; padding: 0; font-weight: 500; color: var(--texto-2); background: transparent; }
.btn .selo::before { display: none; }

/* ------------------------------------------------------------------ avisos */

.aviso {
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid color-mix(in srgb, var(--atencao) 22%, transparent);
  border-left-width: 1px;
  border-radius: 6px;
  box-shadow: none;
}
.aviso-critico { border-color: color-mix(in srgb, var(--critico) 22%, transparent); }
.aviso-bom { border-color: color-mix(in srgb, var(--bom) 22%, transparent); }
.aviso-info { background: var(--superficie); border-color: var(--borda); }

/* ------------------------------------------------------------------ abas (variante "line" do Sam: sublinhado na marca) */

/* A linha da barra é uma sombra por dentro, e não uma borda: a barra rola na horizontal e por isso corta
   o que passa da altura dela. Com a régua da aba ativa sobreposta à borda (margin -1px), sobrava menos
   de 1 px visível, e a régua aparecia ou sumia conforme a posição da barra na página. */
.abas { gap: 4px; margin-bottom: 20px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--borda); scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button, .abas a {
  position: relative;
  height: 42px;
  padding: 0 12px;
  margin: 0;
  font: 500 14px/1 var(--fonte);
  color: var(--texto-3);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.abas button:hover, .abas a:hover { color: var(--texto); text-decoration: none; }
.abas button[aria-selected="true"], .abas a[aria-current="page"] { color: var(--texto); font-weight: 600; border-bottom-color: var(--acao); }
.abas .contador {
  margin-left: 6px; padding: 2px 7px;
  font: 500 11px/1.3 var(--fonte-mono); color: var(--texto-2);
  background: var(--superficie-3); border-radius: 6px;
}
.abas [aria-current="page"] .contador, .abas [aria-selected="true"] .contador { color: var(--marca-texto); background: var(--marca-tinta); }

/* alternar visão: o TabsList padrão do Sam (trilho cinza, escolhido em branco) */
.alternar { padding: 3px; gap: 2px; background: var(--superficie-3); border: 0; border-radius: var(--raio); }
.alternar button {
  height: 32px; padding: 0 12px; border: 0; border-radius: 4px;
  font: 500 13px/1 var(--fonte); color: var(--texto-2); background: transparent;
}
.alternar button + button { border-left: 0; }
.alternar button:hover { color: var(--texto); background: transparent; }
.alternar button[aria-pressed="true"] { color: var(--texto); background: var(--superficie); box-shadow: 0 1px 2px rgba(18, 16, 11, .08); font-weight: 600; }

.recolhe > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin-left: -12px;
  font: 600 13px/1.3 var(--fonte); color: var(--link);
  border-radius: 4px; list-style: none;
}
.recolhe > summary:hover { background: var(--marca-tinta); color: var(--link); }

/* ------------------------------------------------------------------ cartões */

.cartao, .bloco-cartao {
  padding: 20px 22px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
}

/* ------------------------------------------------------------------ ficha: janela e gaveta */

.painel-fundo { background: var(--veu); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.painel { background: var(--superficie); border-left: 1px solid var(--borda); box-shadow: -12px 0 40px rgba(18, 16, 11, .15); }
.painel:not(.painel-pagina):not(.painel-largo) {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 6px;
  box-shadow: var(--sombra-alta);
}
.painel.painel-pagina { background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: none; }
.painel-cabecalho { background: var(--superficie); border-bottom: 1px solid var(--borda); }
.painel-cabecalho .rotulo-painel { color: var(--texto-3); }
.painel-cabecalho h2 { margin-top: 6px; font: 700 20px/28px var(--fonte); letter-spacing: -.02em; }
.painel:not(.painel-largo) .painel-cabecalho h2 { font: 700 22px/30px var(--fonte); letter-spacing: -.02em; }
.painel-cabecalho p { margin-top: 4px; color: var(--texto-2); font-size: 14px; }
.painel-navegar { gap: 6px; }
.painel-navegar .btn { width: 40px; padding: 0; }
.painel-navegar .btn.btn-texto { width: auto; padding: 0 14px; }
.painel-rodape { padding: 14px 22px; background: var(--superficie); border-top: 1px solid var(--borda); gap: 8px; }

.ficha-colunas { gap: 20px; }
.ficha-colunas > div { gap: 16px; }
.ficha-colunas section {
  gap: 12px;
  padding: 18px 20px 20px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: none;
}
.painel-corpo h3 { font: 700 14px/20px var(--fonte); letter-spacing: -.01em; color: var(--texto); }
.painel-corpo h3 .direita { font: 500 12px/1.3 var(--fonte); color: var(--texto-3); }
.ficha > div { padding: 10px 0; border-bottom: 1px solid var(--borda-linha); }
.ficha dt { font-size: 13px; color: var(--texto-3); }
.ficha dd { font-weight: 500; color: var(--texto); }

.mapa-vivo { border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; }
.forma-area { border: 1px solid var(--borda); border-radius: 6px; padding: 14px 16px; }
.forma-area legend { font: 500 11px/1.3 var(--fonte-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }

.revisao .resumo { padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); }
.ficha-item { height: 26px; padding: 0 10px; font: 500 12px/1 var(--fonte-mono); background: var(--superficie-3); border-radius: 4px; }

/* barra que aparece com a seleção (Alocação): flutua, então tem sombra */
.barra-selecao {
  padding: 10px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 2px solid var(--acao);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -8px 24px rgba(18, 16, 11, .08);
}

/* atalhos e janelas pequenas */
.atalhos { background: var(--veu); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.atalhos > div { padding: 24px 26px; border: 1px solid var(--borda); border-radius: 6px; box-shadow: var(--sombra-alta); }
.atalhos h3 { font: 500 11px/1.3 var(--fonte-mono); letter-spacing: .12em; }

.lista-movel { border: 1px solid var(--borda); border-radius: var(--raio-g); overflow: hidden; }
.lista-movel li { border-bottom-color: var(--borda-linha); }

/* ------------------------------------------------------------------ celular */

@media (max-width: 767px) {
  :root { --controle: 44px; }
  .pagina { padding: 20px 16px 48px; }
  .cabecalho-pagina h1 { font-size: 22px; line-height: 28px; }
  .barra-ferramentas { padding: 14px 16px; }
  .tabela th:first-child, .tabela td:first-child { padding-left: 16px; }
  .tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
  .tabela.responsiva tbody tr { padding: 12px 16px; border-bottom: 1px solid var(--borda-linha); }
  .painel:not(.painel-pagina):not(.painel-largo) { border-radius: 0; border: 0; }
  .ficha-colunas section { padding: 16px; }
}

/* ------------------------------------------------------------------ mapa (Leaflet): controles no mesmo acabamento */

.leaflet-bar { border: 1px solid var(--borda) !important; border-radius: 6px !important; overflow: hidden; box-shadow: var(--sombra-menu) !important; }
.leaflet-bar a { color: var(--texto) !important; }
.leaflet-control-layers { border: 1px solid var(--borda) !important; border-radius: 6px !important; box-shadow: var(--sombra-menu) !important; }
.leaflet-tooltip, .leaflet-popup-content-wrapper { border-radius: 6px; font-family: var(--fonte); }

/* ------------------------------------------------------------------ página de aviso (sem acesso, não encontrado, em construção) */

.estado-pagina {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 480px; margin: 12vh auto 0; padding: 0 16px;
}
.estado-icone {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px;
  border-radius: 50%; color: var(--marca-texto); background: var(--marca-tinta);
}
.estado-icone .icone { width: 26px; height: 26px; }
.estado-pagina .sobretitulo { margin-bottom: 8px; }
.estado-pagina h1 { font: 700 26px/32px var(--fonte); letter-spacing: -.02em; color: var(--texto); }
.estado-pagina > p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--texto-2); }
.estado-pagina .estado-conta {
  margin-top: 20px; padding: 10px 14px; border: 1px dashed var(--borda-forte); border-radius: var(--raio);
  font-size: 13px; color: var(--texto-2);
}
.estado-pagina .estado-conta strong { color: var(--texto); }
.estado-pagina .estado-acoes { margin-top: 24px; }
.estado-acoes .btn .icone { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ 22/10, segunda rodada: menos "cartão arredondado"
   Pedido do Rodrigo: os cartões soltos e arredondados ainda pareciam tela feita por IA. Cantos de 6 px, os números do
   topo viram uma faixa só com divisórias (como um painel de instrumento), sem fundo colorido no que pede atenção (fica
   o ▲ e um traço em cima), e o aviso de página sem ilustração em círculo. */

.medidas, .rel-indicadores, .op-cartoes, .rq-tiles {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1px !important;
  padding: 0;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.medidas > *, .rel-indicadores > *, .op-cartoes > *, .rq-tiles > * {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
  background: var(--superficie) !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.op-cartoes > * { flex-basis: 140px; }
a.medida:hover { background: var(--superficie-2) !important; }
.medida-atencao, .rel-indicador.rel-atencao { box-shadow: inset 0 2px 0 var(--atencao-traco, var(--atencao)); }
.estado-icone { width: 48px; height: 48px; border-radius: var(--raio); color: var(--texto-2); background: transparent; border: 1px solid var(--borda-forte); }
.estado-icone .icone { width: 22px; height: 22px; }

/* ------------------------------------------------------------------ filtros numa linha só (pedido de 22/10)
   Cada filtro é um controle só, com o rótulo dentro ("FAMÍLIA  Todas ▾"), como nos filtros do Sam e do Linear; as
   caixas de marcar viram botões de alternar. A busca ocupa o que sobra. Faltando espaço (janela estreita, celular), os
   filtros descem para a linha de baixo em vez de sumir cortados na borda (26/10). */

.barra-ferramentas {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.barra-ferramentas .campo, .barra-ferramentas .campo.largo {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 0;
  height: 36px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  transition: border-color .12s, box-shadow .12s;
}
.barra-ferramentas .campo:hover { border-color: #BDBDB7; }
:root[data-theme="dark"] .barra-ferramentas .campo:hover { border-color: #55554F; }
.barra-ferramentas .campo:focus-within { border-color: var(--acao); box-shadow: var(--anel); }
.barra-ferramentas .campo > label, .barra-ferramentas .campo > .rotulo {
  flex: none; padding: 0 2px 0 10px; font-size: 11px; line-height: 1; white-space: nowrap; color: var(--texto-3);
}
.barra-ferramentas .campo input[type="text"], .barra-ferramentas .campo input[type="search"], .barra-ferramentas .campo input[type="date"],
.barra-ferramentas .campo input[type="number"], .barra-ferramentas .campo input[type="email"], .barra-ferramentas .campo select {
  height: 34px; min-width: 0; padding-left: 6px; font-size: 13px; font-weight: 500;
  background-color: transparent; border: 0; border-radius: var(--raio); box-shadow: none;
}
.barra-ferramentas .campo select { width: auto; max-width: 150px; padding-right: 26px; background-position: right 8px center; background-size: 14px; }
.barra-ferramentas .campo input:focus-visible, .barra-ferramentas .campo select:focus-visible { box-shadow: none; }
/* busca: ocupa o que sobra, com a lupa no lugar do rótulo (o rótulo fica para o leitor de tela) */
.barra-ferramentas .campo:not(.largo) { flex-shrink: 0; }
.barra-ferramentas .campo.largo { flex: 1 1 220px; min-width: 150px; }
.barra-ferramentas .campo.largo:has(input[type="search"]) > label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0;
}
.barra-ferramentas .campo input[type="search"] {
  width: 100%; padding-left: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A9A94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 10px center / 15px no-repeat;
}
.barra-ferramentas .campo.largo select { max-width: none; width: 100%; }
/* caixa de marcar como botão de alternar: marcado fica na tinta da marca */
.barra-ferramentas .opcao {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 11px; margin: 0;
  font: 500 13px/1 var(--fonte); color: var(--texto-2); white-space: nowrap;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio); cursor: pointer;
}
.barra-ferramentas .opcao:hover { color: var(--texto); border-color: #BDBDB7; }
.barra-ferramentas .opcao:has(input:checked) { color: var(--marca-texto); background: var(--marca-tinta); border-color: color-mix(in srgb, var(--acao) 35%, var(--borda-forte)); }
.barra-ferramentas .opcao input { width: 14px; height: 14px; margin: 0; }
.barra-ferramentas .direita { flex: none; margin-left: auto; gap: 6px; }
.barra-ferramentas .btn { height: 36px; padding: 0 12px; font-size: 13px; }

/* No celular a busca fica com a linha toda e os outros filtros dividem as de baixo. */
@media (max-width: 767px) {
  .barra-ferramentas .campo.largo { flex: 1 1 100%; }
  .barra-ferramentas .campo:not(.largo) { flex: 1 1 auto; }
  .barra-ferramentas .campo:not(.largo) select { max-width: none; width: 100%; }
  .barra-ferramentas .direita { margin-left: 0; }
}

/* "Mais filtros": os filtros menos usados num painel que abre embaixo do botão, cada um numa linha */
.filtros-mais { position: relative; flex: none; }
.filtros-mais > summary { list-style: none; }
.filtros-mais > summary::-webkit-details-marker { display: none; }
.filtros-mais > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6;
}
.filtros-mais[open] > summary { background: var(--superficie-3); }
.filtros-mais .contador {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  font: 600 11px/1 var(--fonte-mono); color: #FFFFFF; background: var(--acao); border-radius: 4px;
}
.filtros-mais-painel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  display: grid; gap: 8px; width: 300px; padding: 10px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-menu);
}
.barra-ferramentas .filtros-mais-painel .campo, .barra-ferramentas .filtros-mais-painel .opcao { width: 100%; }
.barra-ferramentas .filtros-mais-painel .campo select { flex: 1; max-width: none; }
@media (max-width: 767px) {
  /* no celular a busca vai com Enter e os seletores enviam sozinhos: o "Filtrar" sairia cortado no fim da linha */
  .barra-ferramentas[data-autoenvio] .direita button[type="submit"] { display: none; }
  .filtros-mais-painel { position: fixed; top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; }
}

/* Filtro com busca (filtros.js, decisão de 22/10): o select[data-buscavel] vira campo + lista que aparece ao digitar. */
.buscavel { position: relative; min-width: 12rem; }
.buscavel input[type="search"] { width: 100%; }
/* no campo largo da barra, a busca ocupa a caixa inteira: clicar em qualquer ponto dela abre a escolha (DGP-04) */
.barra-ferramentas .campo.largo > .buscavel { flex: 1 1 auto; min-width: 0; }
.barra-ferramentas .campo { cursor: text; }
.barra-ferramentas .campo:has(select:not([hidden])) { cursor: default; }

/* As opções da lista suspensa seguem o tema: no Windows, sem isto, a lista abre clara com o texto claro do tema
   escuro e só se lê ao passar o mouse (USR-03). Vale para todos os select, inclusive os de fundo transparente. */
option, optgroup { background-color: var(--superficie); color: var(--texto); }

/* Senha com "Mostrar" / "Ocultar" (PER-01; o botão é criado em base.html). O olho do Edge sai para não ficarem dois. */
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 76px; }
.campo-senha input::-ms-reveal, .campo-senha input::-ms-clear { display: none; }
.mostrar-senha {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  height: 26px; padding: 0 8px; border: 0; border-radius: var(--raio); background: none;
  color: var(--texto-2); font: 600 12px/1 var(--fonte); cursor: pointer;
}
.mostrar-senha:hover { background: var(--superficie-3); color: var(--texto); }
.mostrar-senha:focus-visible { outline: 2px solid var(--foco, currentColor); outline-offset: 1px; }
.buscavel-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 18rem; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra-menu);
}
.buscavel-lista li { padding: 7px 10px; border-radius: 4px; font-size: 14px; color: var(--texto); cursor: pointer; }
.buscavel-lista li[data-grupo]::after { content: " · " attr(data-grupo); color: var(--texto-3); font-size: 12px; }
.buscavel-lista li[aria-selected="true"], .buscavel-lista li:hover { background: var(--selecao); }
.buscavel-lista .buscavel-vazio { color: var(--texto-3); cursor: default; }

/* Dica própria (dicas.js, crítica de 23/10): no lugar da dica nativa do Windows, uma caixa no padrão das telas. */
.dica-flutuante {
  position: fixed; z-index: 60; max-width: 18rem; padding: 7px 10px; pointer-events: none;
  background: var(--tinta); color: var(--superficie); border-radius: var(--raio);
  font: 500 13px/1.4 var(--fonte); box-shadow: var(--sombra-menu); white-space: pre-line;
}
.dica-flutuante.larga { max-width: min(28rem, calc(100vw - 16px)); }

/* O "?" do título (dicas.js, pedido de 09/11/2026): a explicação longa e as notas do quadro, sob demanda. */
.ajuda {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; vertical-align: 2px;
  border: 1px solid var(--borda-forte); border-radius: 50%; background: var(--superficie); color: var(--texto-2);
  font: 700 11px/1 var(--fonte); letter-spacing: 0; text-transform: none; cursor: help;
}
.ajuda:hover, .ajuda:focus-visible { color: var(--texto); border-color: var(--texto-2); }
.ajuda:focus-visible { outline: 2px solid var(--foco, currentColor); outline-offset: 2px; }
@media (pointer: coarse) { .ajuda { width: 24px; height: 24px; font-size: 13px; } }

/* O atributo hidden sempre esconde: o display próprio de .btn, .campo etc. vencia o do navegador (o Filtrar que o JS esconde continuava na tela). */
[hidden] { display: none !important; }

/* Cabeçalho que ordena a tabela (pedido de 26/10/2026; static/ordenar.js e a lista de Máquinas, frota.py): o título
 * vira botão (ou link, quando a ordem é do servidor). A seta diz a ordem pela forma, não só pela cor. */
.tabela thead th .ordenar {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.tabela thead th .ordenar:hover { color: var(--texto); }
.tabela thead th .ordenar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
.tabela thead th .ordenar .seta { display: inline-block; width: 10px; font-family: var(--fonte); text-align: center; }
.tabela thead th .ordenar .seta::after { content: "↕"; opacity: 0; }
.tabela thead th .ordenar:hover .seta::after, .tabela thead th .ordenar:focus-visible .seta::after { opacity: .5; }
.tabela thead th[aria-sort] { color: var(--texto); }
.tabela thead th[aria-sort="ascending"] .ordenar .seta::after { content: "↑"; opacity: 1; }
.tabela thead th[aria-sort="descending"] .ordenar .seta::after { content: "↓"; opacity: 1; }

/* Histórico do registro na ficha, de → para e páginas do histórico geral (homologação de 03/11/2026, rodada 6:
 * TRV-08, PRC-04 e HIS-01; partials _historico_registro.html e _historico_mudancas.html). */
.hist-registro { margin-top: var(--e-5); padding-top: 16px; border-top: 1px solid var(--borda-linha); }
.hist-registro > .recolhe > summary .contador {
  padding: 2px 7px; font: 500 11px/1.3 var(--fonte-mono); color: var(--texto-2);
  background: var(--superficie-3); border-radius: 6px;
}
.hist-tabela td { vertical-align: top; }
.hist-tabela td.hist-quando { white-space: nowrap; }
.hist-tabela td.hist-texto { white-space: normal; min-width: 200px; max-width: 520px; padding-block: 8px; line-height: 20px; }
.hist-tabela tr.hist-continua td { border-top: 0; }
.hist-rodape { margin-top: 8px; }
.hist-mudancas { margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--texto-2); }
.hist-mudancas .hist-campo { color: var(--texto-3); }
.hist-mudancas .hist-para { color: var(--texto); font-weight: 500; }
.hist-mudancas .so-leitor, .preco-alteracoes .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hist-filtro-registro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 10px 18px;
  font-size: 13px; background: var(--superficie); border: 1px solid var(--borda); border-top: 0;
}
.hist-paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hist-paginas span { margin-inline: auto; }
/* PRC-04: as alterações de preço numa tabela só, na largura toda, abaixo do preço novo */
.precos-historico { margin-top: var(--e-5); }
.preco-alteracoes td { vertical-align: top; }
.preco-alteracoes td.hist-texto { white-space: normal; min-width: 120px; line-height: 20px; }

/* Homologação, rodada 7: navegação e listas (TRV-01, TRV-05, TRV-07, MAQ-02, ALO-02). */
/* Paginação (_paginacao.html): o intervalo e o total, a quantidade por página e Anterior/Próxima numa linha só. A
 * quantidade escolhida vai em negrito, sublinhada e com fundo: nunca só pela cor. */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.paginacao .pg-por { display: inline-flex; align-items: center; gap: 2px; }
.paginacao .pg-por a { min-width: 28px; padding: 3px 6px; border-radius: 4px; text-align: center; color: var(--texto-2); }
.paginacao .pg-por a:hover { background: var(--superficie-3); text-decoration: none; }
.paginacao .pg-por a.pg-atual { font-weight: 700; color: var(--texto); background: var(--superficie-3); text-decoration: underline; text-underline-offset: 3px; }
.paginacao .pg-navegar { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
/* "Selecionar as N do filtro" e o aviso do limite do lote, na linha da contagem */
.contagem .contagem-acao { height: 26px; margin-left: 8px; padding: 0 10px; font-size: 13px; vertical-align: middle; }
.contagem .contagem-limite { margin-left: 8px; color: var(--texto-2); }
.contagem .contagem-limite::before { content: "▲ "; color: var(--atencao); }
/* Select com busca de vários valores (filtros.js, ALO-02): a escolhida tem ✓ além do fundo; a marcada pelo teclado,
 * contorno. O texto secundário (o nome técnico do projeto, ADC-04) fica numa segunda linha, menor. */
.buscavel-varios { min-width: min(26rem, 90vw); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.buscavel-varios[hidden] { display: none; }
.buscavel-opcoes { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 4px; list-style: none; }
.buscavel-opcoes li[role="option"]::before { content: "☐ "; color: var(--texto-3); }
.buscavel-opcoes li[role="option"][aria-selected="true"]::before { content: "☑ "; color: var(--texto); }
.buscavel-lista .buscavel-opcoes li[aria-selected="true"] { background: none; font-weight: 600; }
.buscavel-lista .buscavel-opcoes li.ativa, .buscavel-lista .buscavel-opcoes li:hover { background: var(--selecao); }
.buscavel-lista .op-sub { display: block; font-size: 12px; font-weight: 400; color: var(--texto-3); }
.buscavel-rodape { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 6px 4px 2px; background: var(--superficie); border-top: 1px solid var(--borda-linha); }
.buscavel-rodape .btn { height: 28px; padding: 0 10px; font-size: 13px; }
/* Valor digitado fora da lista (TRV-05): a recusa aparece junto ao campo, com o símbolo, não só a cor */
.buscavel-erro { display: block; margin-top: 4px; font-size: 13px; line-height: 17px; color: var(--critico); }
.buscavel-erro::before { content: "■ "; }
.barra-ferramentas .buscavel-erro { position: absolute; z-index: 31; top: calc(100% + 2px); left: 0; white-space: nowrap; }
/* MAQ-05: na ficha em janela, o retorno à lista fica à esquerda, acima do título (o mesmo lugar do "←" das páginas) */
.painel-cabecalho .painel-voltar {
  display: inline-flex; align-items: center; height: 28px; margin: 0 0 6px -10px; padding: 0 10px;
  border: 0; border-radius: 4px; background: none; font: 500 13px/1 var(--fonte); color: var(--texto-2);
}
.painel-cabecalho .painel-voltar:hover { color: var(--texto); background: var(--superficie-3); text-decoration: none; }

/* ------------------------------------------------------------------ Régua de UI (10/11/2026)
   Passada pelas regras do repositório ui-ux-pro-max (acessibilidade, tipografia, ícones), a pedido do Rodrigo
   ("menos cara de IA"). Vale para todas as telas; o que é só dos Relatórios está no fim de relatorios.css. */

/* fonte única: campos e botões herdam a da página (o navegador punha Arial neles) */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ícones de traço no lugar dos sinais de texto (▸ ⤓ ▾): a forma vem de uma máscara e a cor é a do texto ao redor */
.ic { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-baixar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0l-4-4m4 4l4-4M5 20h14'/%3E%3C/svg%3E"); }
.ic-seta { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-baixo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* área de clique de pelo menos 24 × 24 px (WCAG 2.2, 2.5.8): o desenho fica do mesmo tamanho, a área cresce */
.ajuda { position: relative; }
.ajuda::after { content: ""; position: absolute; inset: -4px; }
.tabela th button.ordenar { min-height: 24px; }
.link-botao { min-height: 24px; }
/* <small> sem tamanho próprio caía em 10 px (0,83 em): o menor texto de tela é 11 px */
.tabela small { font-size: 11px; }