/* =====================================================================
   Patio — tema (design system Locar Truck)
   Cores e fontes extraídas de https://locartrucksc.com.br/.
   Para ajustar a identidade, troque os HEX deste bloco :root.
   ===================================================================== */
:root {
  /* --- MARCA (Locar Truck) --- */
  --cor-primaria:        #144534;   /* verde-escuro (logo "Locar", topo, títulos) */
  --cor-primaria-escura: #0e3325;
  --cor-acento:          #39b54a;   /* verde (CTA, foco, ativo) */
  --cor-acento-escura:   #2f9c3e;
  --cor-laranja:         #fe7a15;   /* laranja (logo "Truck", destaque secundário) */

  --cor-perigo:          #c0392b;
  --cor-aviso:           #e08a00;
  --cor-ok:              #2f9c3e;

  /* --- NEUTROS --- */
  --fundo:        #f3f5f4;
  --superficie:   #ffffff;
  --borda:        #d5d8dc;
  --texto:        #1c2b25;
  --texto-fraco:  #69727d;

  /* --- ESTRUTURA --- */
  --raio:        10px;
  --raio-sm:     6px;
  --sombra:      0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
  --topo-altura: 62px;
  --fonte:        "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fonte-titulo: "Poppins", var(--fonte);
}

* { box-sizing: border-box; }

/* O atributo `hidden` deve sempre esconder, mesmo em elementos com display
   próprio (.splash usa grid, .app usa flex, .tela-login usa grid). Sem isto,
   o display do autor vence o `[hidden]{display:none}` do navegador. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--fundo);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, .login-titulo, .topo-nome, .pagina-titulo { font-family: var(--fonte-titulo); }

/* ---------- componentes genéricos ---------- */
.btn {
  font: inherit;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  padding: .55rem 1rem;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn:disabled { opacity: .6; cursor: default; }

.btn-primario { background: var(--cor-acento); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--cor-acento-escura); }

.btn-discreto {
  background: transparent;
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .35);
}
.btn-discreto:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.badge {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--cor-acento);
  color: #fff;
}
.badge.badge-usuario { background: rgba(255, 255, 255, .25); color: #fff; }

.erro {
  color: var(--cor-perigo);
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .25);
  border-radius: var(--raio-sm);
  padding: .5rem .75rem;
  margin: 0;
  font-size: .88rem;
}

/* ---------- splash / spinner ---------- */
.splash {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--fundo);
  z-index: 50;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--borda);
  border-top-color: var(--cor-acento);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- LOGIN ---------- */
.tela-login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(20, 69, 52, .14), transparent),
    var(--fundo);
}
.card-login {
  width: 100%;
  max-width: 360px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 4px solid var(--cor-acento);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.login-logo { height: 64px; margin: 0 auto .25rem; object-fit: contain; }
.login-titulo { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; color: var(--cor-primaria); }
.login-sub { margin: -.5rem 0 .5rem; color: var(--texto-fraco); }

.campo { display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.campo span { font-size: .82rem; font-weight: 600; color: var(--texto-fraco); }
.campo input {
  font: inherit;
  padding: .6rem .7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: #fff;
}
.campo input:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px rgba(57, 181, 74, .2);
}

/* ---------- APP / topo ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }

.topo {
  height: var(--topo-altura);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  background: var(--cor-primaria);
  color: #fff;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.topo-marca { display: flex; align-items: center; gap: .55rem; }
.topo-logo { height: 34px; }
.topo-nome { font-weight: 700; font-size: 1.05rem; color: #fff; }

/* nav centralizada (margin auto dos dois lados): marca à esquerda, usuário à direita */
.nav { display: flex; gap: .35rem; margin: 0 auto; }
.nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
  color: rgba(255, 255, 255, .82);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .92rem;
  padding: .45rem .85rem;
  border-radius: var(--raio-sm);
  transition: background .15s, color .15s;
}
.nav a .ico { width: 17px; height: 17px; opacity: .9; }
.nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav a.ativo { color: #fff; background: var(--cor-acento); }
.nav a.ativo .ico { opacity: 1; }

.topo-usuario { display: flex; align-items: center; gap: .6rem; }
.usuario-nome { font-weight: 600; font-size: .9rem; color: #fff; }

/* ---------- conteúdo / páginas ---------- */
.conteudo { padding: 1.5rem; max-width: 1200px; width: 100%; margin: 0 auto; }

.pagina-titulo { margin: 0 0 .35rem; font-size: 1.85rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.15; color: var(--cor-primaria); }
.pagina-sub { margin: 0 0 1.5rem; color: var(--texto-fraco); font-size: .95rem; }

.painel-vazio {
  background: var(--superficie);
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--texto-fraco);
}

.cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.2rem;
}
.cartao-num { font-family: var(--fonte-titulo); font-size: 1.8rem; font-weight: 700; color: var(--cor-primaria); }
.cartao-rotulo { color: var(--texto-fraco); font-size: .85rem; }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--borda); }
.tabela thead th {
  position: sticky; top: 0;
  background: var(--fundo);
  color: var(--texto-fraco);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
}
.tabela tbody tr:hover { background: var(--fundo); }

/* ---------- cadastro: indicadores / filtros ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; color: var(--texto-fraco);
}
.chip b { color: var(--cor-primaria); font-family: var(--fonte-titulo); }

.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.f-input {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: #fff; min-width: 150px;
}
.f-input[type="search"] { flex: 2 1 180px; min-width: 160px; }
#f-tipo { flex: 1 1 150px; }
.f-input:focus { outline: none; border-color: var(--cor-acento); box-shadow: 0 0 0 3px rgba(57,181,74,.18); }
.f-check { display: flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--texto-fraco); }

.btn-mini { padding: .3rem .7rem; font-size: .82rem; background: var(--fundo); border-color: var(--borda); color: var(--texto); }
.btn-mini:hover { background: #fff; border-color: var(--cor-acento); color: var(--cor-acento-escura); }
.tabela-cad td { vertical-align: middle; }
.alerta { color: var(--cor-aviso); font-weight: 600; font-size: .82rem; }

/* ---------- cadastro em largura total (full-bleed) ---------- */
.cad-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 1.5rem 1.5rem; }

/* ---------- layout: painel de colunas + tabela ---------- */
.cad-layout { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.cad-colunas {
  width: 185px; flex-shrink: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  position: sticky; top: calc(var(--topo-altura) + 1rem);
  max-height: calc(100vh - var(--topo-altura) - 2rem); overflow: auto;
}
.cad-colunas-topo {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .85rem; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--superficie);
}
.cad-colunas-topo strong { font-family: var(--fonte-titulo); font-size: .9rem; margin-right: auto; }
.btn-link { background: none; border: none; color: var(--cor-acento-escura); cursor: pointer; font: inherit; font-size: .8rem; padding: 0; }
.btn-link:hover { text-decoration: underline; }
.col-lista { padding: .35rem .5rem; }
.col-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem; border-radius: var(--raio-sm); font-size: .88rem; cursor: pointer; }
.col-item:hover { background: var(--fundo); }
.col-item input { accent-color: var(--cor-acento); }
.col-salvar { padding: .5rem .6rem .7rem; border-top: 1px solid var(--borda); position: sticky; bottom: 0; background: var(--superficie); }
.btn-bloco { width: 100%; }

.cad-tabela-area { flex: 1; min-width: 0; position: relative; }
.cad-tabela-wrap { width: 100%; overflow: auto; max-height: calc(100vh - var(--topo-altura) - 2rem); }
/* alça para redimensionar a largura TOTAL da tabela (borda direita da área) */
.tab-resize {
  position: absolute; top: 0; right: 0; width: 14px; height: 100%;
  cursor: col-resize; display: flex; align-items: center; justify-content: center;
}
.tab-resize::before {
  content: ""; width: 4px; height: 46px; border-radius: 3px; background: var(--borda);
}
.tab-resize:hover::before { background: var(--cor-acento); }
.cad-tabela-wrap .tabela { table-layout: fixed; }
/* quebra só entre palavras (overflow-wrap:normal); palavra única longa é cortada */
.tabela-cad th, .tabela-cad td { padding: .4rem .55rem; font-size: .82rem; vertical-align: middle; overflow-wrap: normal; overflow: hidden; }
.tabela-cad th { white-space: normal; }

/* alça de redimensionamento de coluna (borda direita do cabeçalho) */
.col-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; }
.col-resize:hover { background: var(--cor-acento); opacity: .4; }
body.redimensionando { cursor: col-resize; user-select: none; }

/* coluna "Editar" — sempre a 1ª e fixa (não rola na horizontal) */
.tabela-cad .cad-acao { position: sticky; left: 0; background: var(--superficie); z-index: 1; overflow: visible; }
.tabela-cad tbody tr:hover .cad-acao { background: var(--fundo); }
.tabela-cad thead .cad-acao { background: var(--fundo); z-index: 3; }

/* ---------- gaveta de edição (drawer) ---------- */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-fundo { position: absolute; inset: 0; background: rgba(16,24,40,.35); }
.drawer-painel {
  position: absolute; top: 0; right: 0; height: 100%; width: 640px; max-width: 96vw;
  background: var(--superficie); box-shadow: -4px 0 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column;
}
.drawer-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--borda);
}
.drawer-topo strong { font-family: var(--fonte-titulo); color: var(--cor-primaria); }
.drawer-corpo { padding: 1.1rem 1.25rem; overflow: auto; display: flex; flex-direction: column; gap: .9rem; }
.drawer-rodape { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--borda); }
.drawer-rodape .btn { width: 100%; }
.campo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.divisor { border: none; border-top: 1px solid var(--borda); margin: .2rem 0; }

/* combo de busca (implemento acoplado) */
.combo { position: relative; }
.combo-lista { margin-top: 4px; border: 1px solid var(--borda); border-radius: var(--raio-sm); max-height: 220px; overflow: auto; background: #fff; }
.combo-item { padding: .45rem .6rem; cursor: pointer; font-size: .9rem; }
.combo-item:hover { background: var(--fundo); }
.combo-nenhum { color: var(--texto-fraco); font-style: italic; }
.combo-mais { padding: .4rem .6rem; font-size: .8rem; color: var(--texto-fraco); }
.drawer select, .drawer input, .drawer textarea {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--borda);
  border-radius: var(--raio-sm); background: #fff; width: 100%;
}
.drawer select:focus, .drawer input:focus, .drawer textarea:focus {
  outline: none; border-color: var(--cor-acento); box-shadow: 0 0 0 3px rgba(57,181,74,.18);
}

/* ---------- lançamento diário (grade inline) ---------- */
.lanc-topo { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 0 0 1rem; }
.campo-inline { display: flex; align-items: center; gap: .45rem; }
.campo-inline span { font-size: .8rem; font-weight: 600; color: var(--texto-fraco); }
.lanc-topo .f-input { min-width: auto; }
.lanc-filial-fixa { color: var(--texto-fraco); }
.lanc-filial-fixa strong { color: var(--cor-primaria); }

.lanc-wrap { overflow: auto; max-height: calc(100vh - var(--topo-altura) - 4rem); }
.tabela-lanc { font-size: .82rem; }
.tabela-lanc th, .tabela-lanc td { padding: .3rem .4rem; white-space: nowrap; vertical-align: middle; }
.tabela-lanc thead th { z-index: 2; }
.tabela-lanc select, .tabela-lanc input {
  font: inherit; font-size: .82rem; padding: .28rem .35rem;
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: #fff; max-width: 100%;
}
.tabela-lanc select:focus, .tabela-lanc input:focus {
  outline: none; border-color: var(--cor-acento); box-shadow: 0 0 0 2px rgba(57,181,74,.18);
}
.lanc-input-km { width: 74px; }
.lanc-input-prazo { width: 142px; }
.lanc-input-obs { min-width: 170px; }
.lanc-input-proj { min-width: 160px; }
/* popup único do combo de projeto (posicionado via JS, fixo p/ escapar do scroll) */
.lanc-proj-pop { position: fixed; z-index: 60; }

/* coluna Código fixa à esquerda */
.tabela-lanc .lanc-cod { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.tabela-lanc thead .lanc-cod { z-index: 3; background: var(--fundo); }
.tabela-lanc tbody tr:hover .lanc-cod { background: var(--fundo); }
.lanc-cod strong { display: block; }
.lanc-cod small { color: var(--texto-fraco); font-weight: 400; font-size: .72rem; }

/* linha de exceção (disponibilidade ≠ 100%) destacada */
.tabela-lanc tr.lanc-excecao td { background: rgba(254,122,21,.07); }
.tabela-lanc tr.lanc-excecao .lanc-cod { background: #fdf0e6; }
.tabela-lanc tr.lanc-excecao:hover td { background: rgba(254,122,21,.11); }

/* célula com erro de validação (manutenção ⇒ disp<100% / prazo / grupo×subgrupo) */
.tabela-lanc .lanc-celula-erro {
  border-color: var(--cor-perigo, #d92d20) !important;
  box-shadow: 0 0 0 2px rgba(217,45,32,.18) !important; background: #fef3f2 !important;
}

/* ---------- configurações (abas / áreas) ---------- */
.cfg-abas { display: flex; gap: .4rem; margin: 0 0 1.4rem; border-bottom: 1px solid var(--borda); }
.cfg-aba {
  font: inherit; font-family: var(--fonte-titulo); font-weight: 600;
  background: none; border: none; padding: .6rem .95rem; cursor: pointer;
  color: var(--texto-fraco); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cfg-aba:hover { color: var(--texto); }
.cfg-aba.ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-acento); }
.cfg-cabec { margin-bottom: 1.1rem; }
.cfg-cabec h2 { margin: 0 0 .3rem; font-family: var(--fonte-titulo); font-weight: 700; color: var(--cor-primaria); font-size: 1.3rem; letter-spacing: -.01em; }
.cfg-cat-listas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

/* master-detail das listas controladas */
.cfg-md { display: flex; gap: 1rem; align-items: flex-start; }
.cfg-md-nav {
  width: 235px; flex-shrink: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: .4rem;
  max-height: calc(100vh - var(--topo-altura) - 7rem); overflow: auto;
}
.cfg-nav-cat {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cor-primaria); font-weight: 700;
  padding: .55rem .55rem .4rem; margin-top: .55rem;
}
.cfg-nav-cat::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.cfg-md-nav > .cfg-nav-cat:first-child { margin-top: .15rem; }
.cfg-nav-item { display: block; width: 100%; text-align: left; font: inherit; background: none; border: none; padding: .5rem .65rem; border-radius: var(--raio-sm); cursor: pointer; color: var(--texto); }
.cfg-nav-item:hover { background: var(--fundo); }
.cfg-nav-item.ativa { background: var(--cor-acento); color: #fff; font-weight: 600; }
.cfg-md-det { flex: 1; min-width: 0; }
.cfg-det-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cfg-det-topo h3 { margin: 0; font-family: var(--fonte-titulo); color: var(--cor-primaria); }
.cfg-cont { font-size: .8rem; color: var(--texto-fraco); font-weight: 400; }
.cfg-pai { margin-bottom: .7rem; }

/* "Projetos da filial": resultados da busca no mestre (lista p/ adicionar) */
.fp-resultados:not(:empty) {
  margin-top: .4rem; border: 1px solid var(--borda); border-radius: var(--raio-sm);
  background: #fff; max-height: 260px; overflow: auto;
}
.fp-res-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .4rem .6rem; border-bottom: 1px solid var(--borda); font-size: .86rem;
}
.fp-res-item:last-child { border-bottom: none; }
.fp-res-item small { color: var(--texto-fraco); }
.fp-res-item .btn-mini { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.fp-res-info { padding: .45rem .6rem; font-size: .82rem; color: var(--texto-fraco); }
/* projeto só-leitura no drawer de edição (classificação) */
.fp-projeto-fixo { padding: .4rem .55rem; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--fundo); }
.btn-perigo { color: var(--cor-perigo); background: var(--superficie); border-color: var(--cor-perigo); }
.btn-perigo:hover:not(:disabled) { background: rgba(192,57,43,.08); border-color: var(--cor-perigo); color: var(--cor-perigo); }

/* botão secundário (claro, p/ fundos brancos como drawers) */
.btn-secundario { background: var(--fundo); color: var(--texto); border-color: var(--borda); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-secundario:hover:not(:disabled) { background: #fff; border-color: var(--cor-acento); color: var(--cor-acento-escura); }
.btn .ico { width: 16px; height: 16px; }

/* botões só-ícone (ações de tabela) */
.acoes-cel { display: inline-flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm);
  color: var(--texto-fraco); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn-icone:hover:not(:disabled) { background: var(--fundo); border-color: var(--cor-acento); color: var(--cor-acento-escura); }
.btn-icone:disabled { opacity: .35; cursor: default; }
.btn-icone.perigo:hover:not(:disabled) { border-color: var(--cor-perigo); color: var(--cor-perigo); background: rgba(192,57,43,.06); }

/* ---------- painel compilado ---------- */
.tabela-painel th, .tabela-painel td { white-space: nowrap; vertical-align: middle; }
.tabela-painel tbody tr.st-atrasado td { background: rgba(192,57,43,.07); }
.tabela-painel tbody tr.st-semprazo td { background: rgba(192,57,43,.07); }
.tabela-painel tbody tr.st-noprazo  td { background: rgba(47,156,62,.06); }
.tabela-painel tbody tr.st-atrasado:hover td,
.tabela-painel tbody tr.st-semprazo:hover td { background: rgba(192,57,43,.12); }
.tabela-painel tbody tr.st-noprazo:hover  td { background: rgba(47,156,62,.11); }

/* "dias parado": badge colorido por faixa de severidade (cobrança) */
.dias-badge {
  display: inline-block; min-width: 56px; text-align: center;
  padding: .15rem .5rem; border-radius: 999px; font-weight: 700;
  font-family: var(--fonte-titulo); font-size: .8rem; color: #fff;
}
.dias-ok      { background: var(--cor-ok); }
.dias-medio   { background: var(--cor-aviso); }
.dias-alto    { background: var(--cor-laranja); }
.dias-critico { background: var(--cor-perigo); }

.st-rotulo { font-weight: 600; font-size: .8rem; }
.st-rotulo.st-atrasado, .st-rotulo.st-semprazo { color: var(--cor-perigo); }
.st-rotulo.st-noprazo { color: var(--cor-ok); }

/* ---------- relatórios BI ---------- */
.bi-kpis { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); margin-bottom: 1rem; }
.bi-kpi { padding: .85rem 1rem; }
.bi-kpi .cartao-num { font-size: 1.55rem; line-height: 1.2; }
.bi-num-ok    { color: var(--cor-ok); }
.bi-num-medio { color: var(--cor-aviso); }
.bi-num-ruim  { color: var(--cor-perigo); }
.bi-meta { font-size: .72rem; color: var(--texto-fraco); margin-top: .15rem; }

.bi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.bi-bloco-full { grid-column: 1 / -1; }   /* ocupa a largura toda da grade */
.bi-bloco h3 { margin: 0 0 .2rem; font-family: var(--fonte-titulo); font-size: 1rem; color: var(--cor-primaria); }
.bi-sub { margin: 0 0 .8rem; font-size: .78rem; color: var(--texto-fraco); }
.bi-vazio { color: var(--texto-fraco); font-size: .88rem; margin: .4rem 0; }

/* ícone "i" + tooltip com o método de cálculo de cada indicador */
.bi-info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: .4rem;
  border-radius: 50%; background: var(--texto-fraco); color: #fff;
  font: 700 .68rem/1 var(--fonte-corpo, system-ui, sans-serif); font-style: normal;
  vertical-align: middle; cursor: help; user-select: none;
  opacity: .6; transition: opacity .15s;
}
.cartao-rotulo .bi-info { margin-left: .3rem; }
.bi-info:hover, .bi-info:focus-visible { opacity: 1; outline: none; }
.bi-info::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 9px); left: 50%;
  width: max-content; max-width: 250px;
  background: var(--cor-primaria); color: #fff;
  padding: .55rem .7rem; border-radius: var(--raio); box-shadow: var(--sombra);
  font: 400 .73rem/1.4 var(--fonte-corpo, system-ui, sans-serif);
  text-align: left; white-space: normal; letter-spacing: 0;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-4px);
  transition: opacity .15s, transform .15s; z-index: 70; pointer-events: none;
}
.bi-info::before {
  content: ""; position: absolute; top: calc(100% + 3px); left: 50%;
  border: 6px solid transparent; border-bottom-color: var(--cor-primaria);
  transform: translateX(-50%);
  opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 71; pointer-events: none;
}
.bi-info:hover::after, .bi-info:focus-visible::after {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.bi-info:hover::before, .bi-info:focus-visible::before { opacity: 1; visibility: visible; }

/* grade de adesão do dia ("Lançamento diário") — pílulas por filial */
.hoje-grade { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.hoje-item {
  font-size: .82rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.hoje-pend { background: #fef3f2; color: var(--cor-perigo); border-color: rgba(192,57,43,.35); }
.hoje-ok   { background: #eef9ef; color: var(--cor-acento-escura); border-color: rgba(57,181,74,.35); }

/* barras horizontais (ranking / Pareto / aging) */
.bi-linha { display: flex; align-items: center; gap: .55rem; margin: .35rem 0; font-size: .82rem; }
.bi-rotulo { width: 138px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-trilho { flex: 1; height: 14px; background: var(--fundo); border-radius: 999px; overflow: hidden; }
.bi-fill { display: block; height: 100%; border-radius: 999px; }
.bi-val { width: 86px; flex-shrink: 0; text-align: right; font-weight: 600; font-size: .78rem; color: var(--texto-fraco); }

/* colunas (série diária de disponibilidade) */
.bi-cols { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: .25rem; }
.bi-col { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; }
.bi-col-ok    { background: var(--cor-ok); }
.bi-col-medio { background: var(--cor-aviso); }
.bi-col-alto  { background: var(--cor-laranja); }
.bi-col-ruim  { background: var(--cor-perigo); }
.bi-col-lanc  { background: var(--cor-acento); }   /* lançamentos por dia */
.bi-cols-leg { display: flex; justify-content: space-between; font-size: .72rem; color: var(--texto-fraco); margin-top: .3rem; }

.bi-tabela th, .bi-tabela td { white-space: nowrap; }
/* tabela full-width: preenche o bloco e a última coluna quebra (sem rolagem) */
.bi-tabela-full { width: 100%; }
.bi-tabela-full th:last-child, .bi-tabela-full td:last-child { white-space: normal; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--cor-primaria); color: #fff; padding: .6rem 1.1rem;
  border-radius: var(--raio); box-shadow: var(--sombra); z-index: 60; font-weight: 600;
}

@media (max-width: 720px) {
  .topo { gap: .75rem; padding: 0 .75rem; }
  .topo-nome, .usuario-nome { display: none; }
  .nav a { padding: .45rem .55rem; }
  .campo-2 { grid-template-columns: 1fr; }
}

/* ---------- foto do veículo (cadastro de frota) ---------- */
.foto-bloco { margin-bottom: 1rem; }
.foto-area {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--raio);
  overflow: hidden; background: var(--fundo);
  border: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: center;
}
.foto-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vazia { color: var(--texto-fraco); font-size: .85rem; }
.foto-acoes { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.cad-thumb {
  width: 48px; height: 36px; object-fit: cover;
  border-radius: var(--raio-sm); vertical-align: middle; display: inline-block;
}