/* ERP Chapéu — folha única, sem framework externo.
   Densidade alta de propósito: as telas de estoque e conciliação mostram
   muitas linhas e quem usa passa o dia nelas. */

:root {
  --tinta: #16181d;
  --tinta-fraca: #5b6472;
  --papel: #f5f6f8;
  --papel-alto: #ffffff;
  --borda: #dfe3e9;
  --acento: #1f5f8b;
  --acento-claro: #e8f1f8;
  --verde: #1a7f4b;
  --amarelo: #a97400;
  --laranja: #c25a1a;
  --vermelho: #b3261e;
  --cinza: #7a8290;
  --raio: 6px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--papel);
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- layout */

.layout { display: flex; min-height: 100vh; }

.menu {
  width: 218px;
  flex: 0 0 218px;
  background: #1b2430;
  color: #c9d1dc;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  padding: 16px 16px 12px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  border-bottom: 1px solid #2b3644;
}
.marca .chapeu { margin-right: 4px; }

.menu nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.menu nav a {
  display: block;
  padding: 7px 16px;
  color: #c9d1dc;
  font-size: 13.5px;
}
.menu nav a:hover { background: #232f3d; color: #fff; text-decoration: none; }
.menu nav a.ativo {
  background: #232f3d;
  color: #fff;
  box-shadow: inset 3px 0 0 var(--acento);
}
/* Título do grupo. Onde não há mouse (celular, gaveta) ele é só o rótulo de
   seção de sempre e os itens ficam abertos embaixo — o menu de antes, intacto.
   No desktop com mouse ele vira item de navegação e o submenu abre ao lado;
   ver "submenus que abrem na lateral", mais abaixo. */
.menu .titulo-grupo {
  display: block;
  width: 100%;
  padding: 14px 16px 4px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 10.5px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6f7d8f;
  cursor: default;
}
.menu .titulo-grupo .seta,
.menu .titulo-submenu { display: none; }

.rodape-menu {
  border-top: 1px solid #2b3644;
  padding: 12px 16px;
  font-size: 12px;
}
.rodape-menu .quem { color: #fff; font-weight: 500; }
.rodape-menu .papel { color: #7f8b9b; margin-bottom: 6px; }
.rodape-menu .sair { color: #9fb3c8; }

.conteudo { flex: 1; padding: 20px 26px 60px; min-width: 0; }

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.topo h1 { font-size: 20px; margin: 0; font-weight: 600; }
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- cards */

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }

.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}
.cartao .rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-fraca); }
.cartao .valor { font-size: 24px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cartao .nota { font-size: 12px; color: var(--tinta-fraca); margin-top: 2px; }

.painel-caixa {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 18px;
  overflow: hidden;
}
.painel-caixa > h2 {
  font-size: 14px;
  margin: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--borda);
  background: #fafbfc;
  font-weight: 600;
}
.painel-caixa .corpo { padding: 16px; }

/* ---------------------------------------------------------------- tabela */

.rolagem { overflow-x: auto; }

table.dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--papel-alto);
}
table.dados th, table.dados td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  white-space: nowrap;
}
table.dados th {
  background: #fafbfc;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-fraca);
  position: sticky;
  top: 0;
}
table.dados tbody tr:hover { background: #f8fafc; }
table.dados td.num, table.dados th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dados td.livre { white-space: normal; min-width: 200px; }

.vazio { padding: 28px 16px; text-align: center; color: var(--tinta-fraca); }

/* ------------------------------------------------------------ formulário */

form.formulario { background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra); }

.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin-bottom: 14px; }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 12px; font-weight: 500; color: var(--tinta-fraca); }
.campo .dica { font-size: 11.5px; color: var(--tinta-fraca); }

/* Por EXCLUSÃO, não por lista de tipos: `<input name="nome">` sem `type` é um
   campo de texto para o navegador, mas `input[type=text]` não o alcançava e ele
   saía sem borda no meio dos outros — havia ~140 assim espalhados pelas telas.
   Pela exclusão entram também tel, month e o que vier depois; ficam de fora só
   os controles que não são caixa de digitar. */
input:not([type=checkbox], [type=radio], [type=range], [type=color],
           [type=submit], [type=button], [type=reset], [type=image], [type=hidden]),
select, textarea {
  padding: 7px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font: inherit;
  background: #fff;
  color: var(--tinta);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento-claro);
  border-color: var(--acento);
}

fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin: 0 0 14px; }
fieldset legend { font-size: 12px; font-weight: 600; color: var(--tinta-fraca); padding: 0 6px; }

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

.botao {
  display: inline-block;
  padding: 7px 13px;
  border-radius: var(--raio);
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.botao:hover { background: #19506f; text-decoration: none; }
.botao.secundario { background: #fff; color: var(--tinta); border-color: var(--borda); }
.botao.secundario:hover { background: #f2f4f7; }
.botao.perigo { background: var(--vermelho); border-color: var(--vermelho); }
.botao.pequeno { padding: 4px 9px; font-size: 12px; }

/* ------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 500;
  background: #eef1f5;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.etiqueta.verde { background: #e4f4ea; color: var(--verde); }
.etiqueta.amarelo { background: #fdf3dd; color: var(--amarelo); }
.etiqueta.laranja { background: #fdeade; color: var(--laranja); }
.etiqueta.vermelho { background: #fbe6e5; color: var(--vermelho); }
.etiqueta.cinza { background: #eef0f3; color: var(--cinza); }
.etiqueta.azul { background: var(--acento-claro); color: var(--acento); }

/* ----------------------------------------------------------------- abas */

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; flex-wrap: wrap; }
.abas a {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--tinta-fraca);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--raio) var(--raio) 0 0;
}
.abas a:hover { background: #eef1f5; text-decoration: none; }
.abas a.ativo {
  background: var(--papel-alto);
  color: var(--tinta);
  border-color: var(--borda);
  font-weight: 500;
  margin-bottom: -1px;
  padding-bottom: 9px;
}

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

.aviso {
  padding: 10px 14px;
  border-radius: var(--raio);
  border: 1px solid;
  margin-bottom: 16px;
  font-size: 13px;
}
.aviso.info { background: var(--acento-claro); border-color: #bcd8ea; color: #14496b; }
.aviso.alerta { background: #fdf3dd; border-color: #f0dcae; color: #7a5400; }
.aviso.erro { background: #fbe6e5; border-color: #f3c9c6; color: #8c1d18; }
.aviso.ok { background: #e4f4ea; border-color: #b9e0c8; color: #12603a; }

.busca { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }

/* Campo SOLTO numa barra em linha (busca, filtro, criação rápida) é irmão do
   botão: com o `width: 100%` da regra geral cada um vira uma linha inteira e o
   botão desce sozinho. Campo dentro de `.campo`/`<label>` não entra aqui — lá o
   item da linha é o embrulho e o 100% é justamente o que alinha a coluna. */
.busca > input, .busca > select,
.formulario.inline > input, .formulario.inline > select { width: auto; }
.busca > input[type=search] { width: 320px; max-width: 100%; }

.barra { height: 5px; background: #eef1f5; border-radius: 3px; overflow: hidden; min-width: 60px; }
.barra > span { display: block; height: 100%; background: var(--acento); }

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; }
.fraco { color: var(--tinta-fraca); }
.pequeno { font-size: 12px; }

/* ----------------------------------------------------------------- login */

.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.caixa-login {
  width: 100%;
  max-width: 360px;
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .08);
}
.caixa-login h1 { font-size: 19px; margin: 0 0 4px; }
.caixa-login .sub { color: var(--tinta-fraca); font-size: 13px; margin-bottom: 20px; }
.caixa-login .campo { margin-bottom: 13px; }
.caixa-login .botao { width: 100%; padding: 9px; margin-top: 4px; }

/* ------------------------------------------------------------- celular */
/* Empilhamento: o Leaflet põe os próprios painéis em z-index 400 e os
   controles em 1000, no MESMO contexto do resto da página. A gaveta precisa
   ficar acima disso, senão o mapa é desenhado por cima dela — foi o que
   aconteceu na primeira tentativa. Daí os números altos abaixo. */
/* O painel nasceu só para desktop: barra lateral de 218px fixos comendo 56%
   de uma tela de 390px, e o conteúdo espremido numa fresta. Aqui a lateral
   vira gaveta.

   Sem JavaScript de propósito: o painel inteiro é renderizado no servidor e
   `base.html` não carrega script nenhum. Um checkbox escondido com `label`
   segura o estado da gaveta, e a navegação (que recarrega a página) fecha
   sozinha — não há estado para sincronizar. */

.alternador-menu,
.barra-mobile,
.cortina { display: none; }

@media (max-width: 860px) {
  .barra-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 1100;  /* acima dos controles do Leaflet (1000) */
    padding: 10px 14px;
    background: #1b2430;
    color: #eef2f7;
    font-weight: 600;
  }

  .botao-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px é o alvo de toque abaixo do qual o dedo erra. */
    width: 44px;
    height: 44px;
    margin: -6px 0 -6px -8px;
    border-radius: var(--raio);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
  }
  .botao-menu:active { background: rgba(255, 255, 255, .12); }

  /* Fora da tela, mas ainda focável pelo teclado. */
  .alternador-menu {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .alternador-menu:focus-visible ~ .barra-mobile .botao-menu {
    outline: 2px solid #8ab4d8;
    outline-offset: -2px;
  }

  .layout { flex-direction: column; }

  .menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 82vw;
    max-width: 300px;
    flex-basis: auto;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .35);
  }
  .alternador-menu:checked ~ .layout .menu { transform: none; }

  /* Toque em qualquer lugar fora da gaveta fecha — o mesmo `label`. */
  .alternador-menu:checked ~ .layout .cortina {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: rgba(10, 14, 20, .5);
  }

  .conteudo { padding: 14px 14px 48px; }

  .topo { gap: 10px; }
  .topo h1 { font-size: 20px; }

  .cartoes { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* Tabela larga rola dentro de si mesma. Sem isto ela estica a página e o
     layout inteiro anda para o lado junto. */
  .conteudo table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .busca > select,
  .busca > input { min-width: 0; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

/* ------------------------------------- submenus que abrem na lateral (hover)

   De tablet grande para cima, e só onde existe mouse de verdade (`hover: hover`
   — em tela de toque o :hover fica grudado depois do toque e o painel não
   fecharia), a barra encolhe para a lista de grupos e os itens de cada grupo
   aparecem num painel colado à direita quando o ponteiro para no grupo.

   O painel é FILHO do grupo: o ponteiro que entra nele mantém o :hover do pai,
   e como ele começa exatamente em `left: 100%` não há vão no caminho para o
   mouse escapar. `:focus-within` faz o mesmo pelo teclado — Tab foca o botão do
   grupo, o painel abre, o Tab seguinte entra nos links. Continua sem JS. */
@media (min-width: 861px) and (hover: hover) {
  /* Acima dos painéis do Leaflet (1000): o submenu invade a área do conteúdo e
     sem isto o mapa em tela cheia seria pintado por cima dele. */
  .menu { z-index: 1200; }

  /* O painel escapa da barra; rolagem no nav o decepava. A lista compacta cabe
     na tela de pé — por isso os itens de raiz ficam mais baixos aqui. */
  .menu nav { overflow: visible; }
  .menu nav > a,
  .menu .titulo-grupo { padding-top: 6px; padding-bottom: 6px; }

  .menu .grupo { position: relative; }

  .menu .titulo-grupo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: 0;
    color: #c9d1dc;
    cursor: pointer;
  }
  .menu .titulo-grupo .seta { display: inline; font-size: 15px; line-height: 1; color: #6f7d8f; }
  .menu .grupo:hover > .titulo-grupo,
  .menu .grupo:focus-within > .titulo-grupo { background: #232f3d; color: #fff; }
  .menu .grupo:hover > .titulo-grupo .seta,
  .menu .grupo:focus-within > .titulo-grupo .seta { color: #fff; }

  /* Com os itens escondidos, sumiria a pista de onde se está: o grupo que
     contém a página aberta se marca igual ao link ativo. */
  .menu .grupo:has(a.ativo) > .titulo-grupo {
    background: #232f3d;
    color: #fff;
    box-shadow: inset 3px 0 0 var(--acento);
  }

  /* Centrado no item, não colado no topo dele: numa tela de 1366×768 (viewport
     de ~600px, o que muita gente usa) o painel do último grupo alinhado por
     cima descia para fora da janela e os últimos itens ficavam inalcançáveis —
     sem JS não há como virá-lo para cima. Centrado, o transbordo cai pela
     metade para os dois lados e todos os painéis cabem. */
  .menu .submenu {
    position: absolute;
    left: 100%;
    top: 50%;
    z-index: 2500;
    min-width: 214px;
    padding: 6px 0 8px;
    background: #232f3d;
    border: 1px solid #33404f;
    border-left: 0;
    border-radius: 0 var(--raio) var(--raio) 0;
    box-shadow: 6px 6px 20px rgba(0, 0, 0, .35);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translate(-6px, -50%);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
  }
  .menu .grupo:hover > .submenu,
  .menu .grupo:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
  }

  .menu .submenu .titulo-submenu {
    display: block;
    padding: 4px 16px 6px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7c8a9c;
  }
  .menu .submenu a { white-space: nowrap; }
  /* O realce padrão do menu é o próprio fundo do painel — dentro dele, hover e
     ativo precisam de um tom acima para aparecer. */
  .menu .submenu a:hover,
  .menu .submenu a.ativo { background: #2d3b4c; }
}

@media (prefers-reduced-motion: reduce) {
  .menu .submenu { transition: none; transform: translateY(-50%); }
}

/* --- ERP Alimentos: cadeia de frio e validade -------------------------- */
.etiqueta.temp-seco { background: #f3e9d2; color: #6b4e16; }
.etiqueta.temp-refrigerado { background: #d7ecf7; color: #0f4c75; }
.etiqueta.temp-congelado { background: #dbe4ff; color: #1e3a8a; }
.etiqueta.ok { background: #d8f3dc; color: #1b4332; }
.etiqueta.alerta { background: #ffe0e0; color: #9b1c1c; }
tr.vencido td { background: #fff1f1; }
tr.vence-logo td { background: #fff8e6; }
tr.abaixo-minimo td:nth-child(6) { color: #9b1c1c; font-weight: 600; }
tr.divergente td { background: #fff8e6; }
tr.bloqueado td { background: #fff4f4; }
tr.inativo td { color: #888; }
.num.positivo { color: #1b4332; }
.num.negativo { color: #9b1c1c; }
.cartao.alerta { border-color: #e57373; }
.aviso.sucesso { background: #d8f3dc; color: #1b4332; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .duas-colunas { grid-template-columns: 1fr; } }
.abas { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; }
.abas a { padding: 6px 12px; border-radius: 6px; background: #f0f0f0; color: #333; text-decoration: none; }
.abas a.ativa { background: #1f6f43; color: #fff; }
.abas.pequeno a { padding: 3px 8px; font-size: 12px; }
.formulario.inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.formulario.inline input, .formulario.inline select { margin: 0; }
.grade-permissoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bloco-permissao h4 { margin: 0 0 6px; }
label.checkbox, label.radio { display: block; margin: 4px 0; }
label.checkbox.pequeno { font-size: 12px; margin: 0; }
.lista-simples { margin: 0; padding-left: 18px; }
details.painel-caixa summary { cursor: pointer; padding: 10px 14px; }
.botao.perigo { background: #b23a3a; }
.botao.pequeno { padding: 3px 9px; font-size: 12px; }

/* --- CRM / modo campo -------------------------------------------------- */
.etiqueta.rec-novo { background: #e0f2fe; color: #075985; }
.etiqueta.rec-novo_nao_recomprou { background: #ffe0e0; color: #9b1c1c; font-weight: 600; }
.etiqueta.rec-ativo { background: #d8f3dc; color: #1b4332; }
.etiqueta.rec-atencao { background: #fff3cd; color: #7a5a00; }
.etiqueta.rec-em_risco { background: #ffe0b2; color: #8a4b00; }
.etiqueta.rec-inativo { background: #ffe0e0; color: #9b1c1c; }
.etiqueta.rec-perdido { background: #e5e5e5; color: #555; }
.tarefa { padding: 8px 0; border-bottom: 1px solid #eee; }
.barra { display: inline-block; width: 80px; height: 8px; background: #eee; border-radius: 4px; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.barra .preenchido { height: 100%; background: #1f6f43; }
tr.ok td { background: #f2fbf4; }
.campo-grande { font-size: 17px; max-width: 760px; }
.campo-grande .cartao .valor { font-size: 26px; }
.linha-campo { display: block; padding: 12px 10px; border-bottom: 1px solid #eee; color: inherit; text-decoration: none; }
.linha-campo:active { background: #f0f7f2; }
.botoes-campo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.botoes-campo form { margin: 0; }
.botao.grande { display: block; width: 100%; padding: 16px; font-size: 18px; text-align: center; box-sizing: border-box; }
@media (max-width: 700px) { .botoes-campo { grid-template-columns: 1fr; } }

/* Itens da parada no celular do motorista: cada linha vira um cartão com
   produto, lote, quantidade e campo de devolução visíveis sem rolar de lado. */
@media (max-width: 700px) {
  table.itens-parada, table.itens-parada tbody, table.itens-parada tr, table.itens-parada td { display: block; width: 100%; }
  table.itens-parada thead { display: none; }
  table.itens-parada tr { border: 1px solid var(--borda); border-radius: 8px; margin: 0 0 8px; padding: 6px 10px; background: var(--papel-alto); }
  table.itens-parada tbody tr:hover { background: var(--papel-alto); }
  table.itens-parada td { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border: 0; white-space: normal; text-align: left; }
  table.itens-parada td::before { content: attr(data-rotulo); color: var(--tinta-fraca); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  table.itens-parada td.produto { display: block; font-weight: 600; padding-bottom: 6px; border-bottom: 1px dashed var(--borda); }
  table.itens-parada td.produto::before { display: none; }
  table.itens-parada td.num { font-size: 15px; }
  table.itens-parada td input { width: 110px !important; }
}

/* ------------------------------------------------------- rastreio (F4) */

.rastreio { display: grid; grid-template-columns: 340px 1fr; gap: 12px; min-height: 520px; }
.rastreio-mapa { height: 560px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--papel-alto); }
.rastreio-lista { overflow-y: auto; max-height: 560px; display: flex; flex-direction: column; gap: 8px; }
.rastreio-veiculo { background: var(--papel-alto); border: 1px solid var(--borda); border-left: 4px solid var(--cinza); border-radius: var(--raio); padding: 8px 10px; cursor: pointer; }
.rastreio-veiculo.movendo { border-left-color: var(--verde); }
.rastreio-veiculo.parado { border-left-color: var(--amarelo); }
.rastreio-veiculo.alerta { border-left-color: var(--vermelho); background: #fff7f6; }
.rastreio-veiculo.sem_sinal { border-left-color: var(--cinza); opacity: .85; }
.rastreio-veiculo.sem_posicao { border-left-color: var(--borda); opacity: .7; }
.rastreio-veiculo.foco { box-shadow: 0 0 0 2px var(--acento); }
.rastreio-veiculo .linha1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rastreio-veiculo .idade { margin-left: auto; }
.alerta-linha { color: var(--amarelo); }
.alerta-linha.grave { color: var(--vermelho); font-weight: 600; }
.temp-fora { color: var(--vermelho); font-weight: 600; }
.replay { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
@media (max-width: 900px) { .rastreio { grid-template-columns: 1fr; } .rastreio-lista { max-height: 260px; order: 2; } .rastreio-mapa { height: 380px; } }

/* ---- Atendimento (WhatsApp, Fase 6) ---- */
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; padding: 12px; background: #eef2ee; border-radius: 8px; }
.balao { max-width: 78%; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.06); white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
.balao.saida { align-self: flex-end; background: #dcf5d0; }
.balao.sistema { align-self: center; background: #fff8e1; font-size: 12px; color: #6b5b16; max-width: 90%; }
.balao .quem { font-size: 11px; color: var(--tinta-fraca); margin-bottom: 2px; }
.balao .quando { font-size: 10.5px; color: var(--tinta-fraca); text-align: right; margin-top: 2px; }
.balao .quando .falhou { color: #b3261e; }
.balao img { max-width: 260px; border-radius: 6px; display: block; margin: 4px 0; }
.balao details { font-size: 11px; color: var(--tinta-fraca); }
.fila-conversa td.nao-lidas { font-weight: 600; }
.pill { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 9px; background: #b3261e; color: #fff; font-size: 11px; text-align: center; }
.modo-ia { color: #4b3ea6; font-weight: 600; }
.acoes-conversa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acoes-conversa form { display: inline; }

/* ---- BI (Fase 7) ---- */
.grafico { margin: 0; }
.grafico svg { display: block; font-family: inherit; }
.grafico text { font-variant-numeric: tabular-nums; }

/* --- Prontidão / edição de filial ------------------------------------- */
.prontidao h2 .etiqueta { margin-left: 8px; vertical-align: middle; }
/* Tabela de diagnóstico: a situação e o que trava são frases — quebram
   linha; só a etiqueta e o link ficam numa linha. */
.prontidao table.dados td { white-space: normal; vertical-align: top; }
.prontidao table.dados td.situacao { white-space: nowrap; width: 1%; }
.prontidao td.trava { color: var(--tinta-fraca); font-size: 12.5px; }
.prontidao table.dados td.resolver { white-space: nowrap; text-align: right; }
.prontidao tr.bloqueia td { background: #fff6f5; }
details.filial-edicao { margin-top: 10px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 0 12px; background: var(--papel-alto); }
details.filial-edicao summary { cursor: pointer; padding: 9px 0; font-weight: 500; }
details.filial-edicao form { padding: 4px 0 12px; }

/* --- Parâmetros por grupo --------------------------------------------- */
.parametros h2 .tela-do-modulo { float: right; font-size: 12.5px; font-weight: 400; }
.parametros .campo.largo { grid-column: 1 / -1; }
.parametros .campo .dica code.chave { color: var(--cinza); font-size: 11px; margin-left: 4px; }
.parametros details.avancado { margin: 4px 0 12px; }
.parametros details.avancado summary { cursor: pointer; color: var(--tinta-fraca); font-size: 12.5px; padding: 6px 0; }
.parametros textarea { min-height: 64px; resize: vertical; }

/* --- Segurança visível ------------------------------------------------- */
.selo-seguranca {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 16px; padding: 10px 12px;
  border: 1px solid #cfe3d6; border-radius: var(--raio);
  background: #f2faf5; color: #1f4d33; font-size: 12.5px; line-height: 1.45;
}
.selo-seguranca .cadeado { font-size: 18px; line-height: 1; }
.selo-seguranca.compacto { display: inline-flex; margin-top: 10px; padding: 6px 10px; font-size: 12px; align-items: center; gap: 6px; }
.rodape-menu .selo { color: #8fb39c; font-size: 11.5px; margin-bottom: 6px; }
.painel-caixa.conta h2 { border-left: 3px solid var(--verde); }
.seguranca td.situacao { white-space: nowrap; width: 1%; }
.seguranca table.dados td { white-space: normal; vertical-align: top; }
.seguranca td.trava { color: var(--tinta-fraca); font-size: 12.5px; }

/* --- Pessoas (RH) ------------------------------------------------------ */
.cartao .valor.pequeno { font-size: 17px; }
.duas-colunas.larga-esquerda { grid-template-columns: 3fr 2fr; }

/* --- RH: escala e ponto ----------------------------------------------- */
table.escala th.hoje, table.escala td.hoje { background: #eef6fb; }
table.escala th.fds, table.escala td.fds { background: #f7f7f9; }
table.escala td.celula { vertical-align: top; min-width: 112px; white-space: normal; }
table.escala td.folga { color: var(--tinta-fraca); }
table.escala td.conflito { background: #fff1f1; }
table.escala details.editar-celula summary { cursor: pointer; color: var(--acento); font-size: 12px; list-style: none; margin-top: 4px; }
table.escala details.editar-celula form { margin-top: 6px; display: grid; gap: 4px; }
table.escala details.editar-celula input, table.escala details.editar-celula select { width: 100%; font-size: 12px; padding: 4px 6px; }
.dias-semana { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.botoes-ponto { display: grid; gap: 10px; margin: 12px 0; }
.botoes-ponto .botao.grande { width: 100%; padding: 16px; font-size: 17px; }

/* --- RH: conformidade ------------------------------------------------- */
table.conformidade th { font-size: 11px; white-space: normal; min-width: 96px; }
table.conformidade td.celula-conf { white-space: normal; text-align: center; }

/* --- RH: avaliação de desempenho ------------------------------------- */
.notas { display: inline-flex; gap: 6px; }
.notas .nota-opcao { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--papel-alto); cursor: pointer; font-size: 13px; }
.notas .nota-opcao:has(input:checked) { background: var(--acento-claro); border-color: var(--acento); color: var(--acento); font-weight: 600; }
table.avaliacao td, table.criterios td { white-space: normal; vertical-align: top; }

/* --- segunda etapa (2FA) ---------------------------------------------- */
.qr-2fa { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.qr-2fa .qr { background: #fff; padding: 8px; border: 1px solid var(--borda); border-radius: var(--raio); line-height: 0; }
.qr-2fa .qr svg { width: 176px; height: 176px; }
.chave-manual { display: inline-block; font-size: 15px; letter-spacing: 1px; padding: 6px 10px; background: var(--papel-alto); border: 1px solid var(--borda); border-radius: var(--raio); user-select: all; }
.passos-2fa { display: grid; gap: 6px; margin: 8px 0; }
.passos-2fa .numero { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 700; font-size: 12px; margin-right: 6px; }
.codigos-reserva { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 10px 0; }
.codigos-reserva code { font-size: 16px; letter-spacing: 1px; padding: 8px 10px; background: var(--papel-alto); border: 1px dashed var(--borda); border-radius: var(--raio); text-align: center; user-select: all; }
td.acoes-linha form { display: inline-block; }

/* ---- Relatórios (F12): chips de filtro, atalhos de período ---- */
.chips { margin: -4px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips .etiqueta a { color: inherit; text-decoration: none; margin-left: 4px; font-weight: 700; }
.atalhos-periodo a { margin-left: 8px; }
.atalhos-periodo a.ativo { font-weight: 700; text-decoration: underline; }
table.dados.relatorio tfoot th { border-top: 2px solid var(--borda); font-variant-numeric: tabular-nums; }
.periodo-impresso, .cabecalho-impressao { font-size: 12px; margin-bottom: 6px; }

/* ---- Impressão (qualquer tela): sai só o conteúdo, sem menu nem controles.
   `.so-tela` esconde na impressão; `.so-impressao` só aparece nela. ---- */
.so-impressao { display: none; }
@media print {
  .menu, .barra-mobile, .cortina, .acoes-topo, .so-tela, .aviso.sucesso, button, .botao { display: none !important; }
  .so-impressao { display: block !important; }
  .layout { display: block; min-height: 0; }
  .conteudo { padding: 0; }
  body { background: #fff; color: #000; font-size: 11px; }
  a { color: inherit; text-decoration: none; }
  .topo { margin: 0 0 8px; border: 0; }
  .topo h1 { font-size: 16px; }
  .cartoes { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
  .cartao { padding: 6px 8px; box-shadow: none; break-inside: avoid; }
  .cartao .valor { font-size: 15px; }
  .rolagem { overflow: visible; }
  table.dados { font-size: 10px; }
  table.dados th, table.dados td { padding: 2px 4px; white-space: normal; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
}