/* Casamax · Frota — visual novo (proposta de 07/10/2026).
 *
 * Camada por cima do app.css: troca os tokens e o acabamento dos componentes, sem mexer na
 * estrutura das telas. Pedido do Rodrigo: o visual anterior (denso, cinza, cantos retos, código
 * em fonte de máquina) estava com cara de sistema antigo. Direção: claro e arejado, Inter,
 * cantos arredondados, tabela sem grade, selo em pílula, ficha em cartões. O vermelho da marca
 * continua só no logo. Tirar este arquivo do base.html volta ao visual anterior.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  --fundo: #F5F6F8;
  --superficie: #FFFFFF;
  --superficie-2: #F9FAFB;
  --superficie-3: #F0F2F5;
  --texto: #111827;
  --texto-2: #4B5563;
  --texto-3: #6B7280;
  --borda: #E6E8EC;
  --borda-forte: #D3D7DD;

  --acao: #111827;
  --acao-hover: #2B3442;
  --acao-texto: #FFFFFF;
  --foco: #2563EB;
  --selecao: #EEF4FF;
  --selecao-forte: #DBE7FF;
  --link: #1D4ED8;

  --bom: #15803D;
  --bom-fundo: #E7F6EC;
  --atencao: #9A6700;
  --atencao-fundo: #FFF4D6;
  --critico: #B42318;
  --critico-fundo: #FDECEA;
  --neutro: #4B5563;
  --neutro-fundo: #EEF0F3;

  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-marca: var(--fonte);
  --t-20: 22px;

  --linha: 46px;
  --controle: 38px;
  --raio: 8px;
  --raio-g: 14px;
  --topo-altura: 60px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-alta: 0 24px 64px rgba(16, 24, 40, .22), 0 4px 12px rgba(16, 24, 40, .08);
  --anel: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fundo: #0D0F12; --superficie: #15181C; --superficie-2: #1A1E23; --superficie-3: #22272E;
  --texto: #ECEEF1; --texto-2: #AEB5BF; --texto-3: #8B94A1; --borda: #262B33; --borda-forte: #363D47;
  --acao: #F2F4F7; --acao-hover: #D5DAE1; --acao-texto: #0D0F12; --foco: #6EA8FF;
  --selecao: #162844; --selecao-forte: #1F3A63; --link: #8DB9FF;
  --bom: #6FD08C; --bom-fundo: #12301D; --atencao: #F2C55C; --atencao-fundo: #3A2C0B;
  --critico: #FF9388; --critico-fundo: #3F1512; --neutro: #AEB5BF; --neutro-fundo: #22272E;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3); --sombra-alta: 0 24px 64px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

body {
  font: 14px/22px var(--fonte);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.003em;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

/* código e placa: a mesma fonte da tela, com algarismos alinhados; nada de fonte de máquina */
.cod {
  font-family: var(--fonte);
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ------------------------------------------------------------------ página */

.pagina { padding: var(--e-6) var(--e-6) 56px; max-width: 1560px; }
.cabecalho-pagina { margin-bottom: var(--e-5); align-items: center; }
.cabecalho-pagina h1 { font: 700 26px/34px var(--fonte); letter-spacing: -.022em; }
.cabecalho-pagina p { margin-top: 4px; font-size: 15px; line-height: 22px; color: var(--texto-2); max-width: 78ch; }
h2.secao { font-size: 15px; }
.voltar a { color: var(--texto-2); font-weight: 500; }

/* ------------------------------------------------------------------ botões e campos */

.btn {
  padding: 0 14px;
  font-weight: 600;
  border-color: var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--superficie-2); border-color: var(--texto-3); text-decoration: none; }
.btn-primario { box-shadow: none; }
.btn-primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.btn-fantasma { box-shadow: none; }

.campo > label, .campo > .rotulo { font-size: 13px; font-weight: 500; color: var(--texto-2); }
input[type="text"], input[type="search"], input[type="date"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"],
input[type="email"], select, textarea {
  padding: 0 12px;
  border-color: var(--borda-forte);
  border-radius: var(--raio);
  transition: border-color .12s, box-shadow .12s;
}
textarea { padding: 8px 12px; }
input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: .8; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--foco);
  box-shadow: var(--anel);
}
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; border-radius: 5px; }

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

.barra-ferramentas {
  gap: var(--e-3) var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-color: var(--borda);
  border-radius: var(--raio-g) var(--raio-g) 0 0;
  box-shadow: var(--sombra);
}
.barra-ferramentas .opcao { font-size: 14px; color: var(--texto-2); }
.contagem {
  padding: 10px var(--e-5);
  font-size: 13px;
  color: var(--texto-3);
  background: var(--superficie-2);
  border-color: var(--borda);
}
.tabela-caixa {
  border-color: var(--borda);
  border-radius: 0 0 var(--raio-g) var(--raio-g);
  box-shadow: var(--sombra);
}
.tabela-caixa.solta { border-radius: var(--raio-g); }

.tabela th, .tabela td { padding: 0 var(--e-4); border-bottom-color: var(--borda); }
.tabela th:first-child, .tabela td:first-child { padding-left: var(--e-5); }
.tabela th:last-child, .tabela td:last-child { padding-right: var(--e-5); }
.tabela thead th {
  height: 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--texto-3);
  background: var(--superficie-2);
  border-bottom-color: var(--borda);
}
/* número alinhado à direita, como o cabeçalho (no app.css a célula ficava à esquerda) */
.tabela td.num { text-align: right; }
.tabela tbody tr { transition: background-color .08s; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tbody tr.aberta td,
.tabela tbody tr.aberta td:first-child { background: var(--selecao); box-shadow: none; }
.tabela td a { color: var(--texto); font-weight: 600; }
.tabela td a:hover { color: var(--link); }
.tabela td.cod, .tabela td .cod { color: var(--texto-2); }
.tabela td.cod a, .tabela td a .cod { color: var(--texto); }
.tabela .sub { margin-top: 1px; font-size: 13px; line-height: 16px; }
.tabela.compacta th, .tabela.compacta td { height: 36px; padding: 0 var(--e-3); }
.tabela.compacta thead th { height: 32px; background: transparent; }
.mais-linhas { padding: var(--e-3) var(--e-5); border-top-color: var(--borda); }
.vazio { padding: 56px var(--e-5); text-align: center; }
.vazio strong { font-size: 15px; }

/* ------------------------------------------------------------------ selo em pílula */

.selo {
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}
.selo::before, .selo-atencao::before, .selo-critico::before, .selo-neutro::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  font-size: 0;
}
.selo-simples { padding: 0; font-weight: 500; color: var(--texto-2); }
.selo-simples::before { background: var(--bom); }
.btn .selo { height: 20px; padding: 0 8px; }
.btn .selo::before { display: none; }

/* ------------------------------------------------------------------ avisos, abas, recolhe */

.aviso {
  padding: var(--e-3) var(--e-4);
  border-left: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 18%, transparent);
}
.aviso-critico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--critico) 18%, transparent); }
.aviso-bom { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bom) 18%, transparent); }
.aviso-info { box-shadow: inset 0 0 0 1px var(--borda); }

.abas { gap: var(--e-2); margin-bottom: var(--e-4); border-bottom-color: var(--borda); }
.abas button, .abas a { height: 40px; padding: 0 4px; margin-right: var(--e-4); font-weight: 500; color: var(--texto-3); }
.abas a:hover { text-decoration: none; }
.abas button[aria-selected="true"], .abas a[aria-current="page"] { color: var(--texto); font-weight: 600; border-bottom-color: var(--texto); }
.abas .contador {
  margin-left: 6px; padding: 1px 8px;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
  background: var(--superficie-3); border-radius: 999px;
}

.recolhe > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin-left: -10px;
  font-size: 13px; font-weight: 500; color: var(--link);
  border-radius: 8px; list-style: none;
}
.recolhe > summary::-webkit-details-marker { display: none; }
.recolhe > summary::before { content: "+"; font-weight: 600; }
.recolhe[open] > summary::before { content: "–"; }
.recolhe > summary:hover { color: var(--link); background: var(--selecao); }
.recolhe[open] > summary { margin-bottom: var(--e-3); }

/* ------------------------------------------------------------------ ficha: janela e cartões */

.painel-fundo { background: rgba(17, 24, 39, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.painel:not(.painel-pagina):not(.painel-largo) {
  border-color: var(--borda);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  background: var(--fundo);
}
.painel.painel-pagina { border-radius: var(--raio-g); border-color: var(--borda); box-shadow: var(--sombra); background: var(--fundo); overflow: hidden; }
.painel-cabecalho { background: var(--superficie); border-bottom-color: var(--borda); }
.painel:not(.painel-pagina):not(.painel-largo) .painel-cabecalho { padding: var(--e-5) var(--e-6); }
.painel-cabecalho .rotulo-painel { font-size: 12px; letter-spacing: .06em; color: var(--texto-3); }
.painel:not(.painel-largo) .painel-cabecalho h2 { font: 700 22px/30px var(--fonte); letter-spacing: -.02em; }
.painel-cabecalho p { margin-top: 2px; color: var(--texto-2); }
.painel-navegar { gap: var(--e-2); }
.painel:not(.painel-pagina):not(.painel-largo) .painel-corpo { padding: var(--e-5) var(--e-6) var(--e-6); }
.painel.painel-pagina:not(.painel-largo) .painel-corpo { padding: var(--e-5); }

.ficha-colunas { gap: var(--e-5); }
.ficha-colunas > div { gap: var(--e-4); }
.ficha-colunas section {
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5) var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.painel-corpo h3 { font-size: 14px; font-weight: 600; color: var(--texto); }
.painel-corpo h3 .direita { font-size: 13px; color: var(--texto-3); }
.destaque-linha { font-size: 17px; line-height: 26px; font-weight: 600; }
.destaque-linha .suave { font-size: 14px; font-weight: 400; }

.ficha { border-top: 0; }
.ficha > div { padding: 9px 0; border-bottom-color: var(--borda); }
.ficha > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha dt { color: var(--texto-3); }
.ficha dd { font-weight: 500; }

.mapa-vivo { border-color: var(--borda); border-radius: 10px; overflow: hidden; }
.dica { color: var(--texto-3); }

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

@media (max-width: 767px) {
  .pagina { padding: var(--e-4) var(--e-4) 48px; }
  .barra-ferramentas, .contagem, .tabela-caixa { border-radius: 0; }
  .barra-ferramentas { border-radius: var(--raio-g) var(--raio-g) 0 0; }
  .tabela-caixa { border-radius: 0 0 var(--raio-g) var(--raio-g); }
  .painel:not(.painel-pagina):not(.painel-largo) { border-radius: 0; }
  .ficha-colunas section { padding: var(--e-4); }
}


/* ------------------------------------------------------------------ ajustes de 15/10/2026 */

/* Barra de filtros compacta, igual em todas as telas (Frota, Obras, Alocação, Preços, Geofences, Relatórios, Saúde,
   Administração): campos de 34 px, uma linha só no computador, busca larga e selects estreitos. */
.barra-ferramentas { align-items: end; gap: 8px 12px; padding: 10px var(--e-4); }
.barra-ferramentas .campo { flex: 0 1 148px; gap: 3px; }
.barra-ferramentas .campo.largo { flex: 1 1 220px; }
.barra-ferramentas .campo > label, .barra-ferramentas .campo > .rotulo { font-size: 12px; }
.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: 34px; font-size: 14px; padding: 0 10px;
}
.barra-ferramentas .opcao { height: 34px; font-size: 13px; white-space: nowrap; align-self: end; }   /* na linha dos campos, não no meio da barra */
.barra-ferramentas .btn { height: 34px; padding-inline: 12px; }
.barra-ferramentas .direita { gap: 6px; }

/* o nome da obra é o link da linha: sem sublinhado, em destaque */
.nome-obra { font-weight: 600; color: var(--texto); }
.nome-obra:hover { color: var(--link); }