/* ZUNNO FROTA: o que é só deste app. O zunno.css (pack de identidade) não muda. */
/* menu e barra do celular: os mesmos do ZUNNO AVARIAS */
#menu a.menu-nova { margin: 6px 0 8px; padding: 11px 12px; border: 1.5px solid var(--z-laranja); color: #FFFFFF; font: 600 14.5px/18px var(--z-fonte);
  background: rgba(255, 90, 0, .14); }
#menu a.menu-nova svg.i { color: var(--z-laranja); width: 20px; height: 20px; }
#menu a.menu-nova:hover, #menu a.menu-nova.ativo { background: var(--z-laranja); border-color: var(--z-laranja); color: #1A1A1A; box-shadow: var(--sb-ativo-sombra); }
#menu a.menu-nova:hover svg.i, #menu a.menu-nova.ativo svg.i { color: #1A1A1A; }
#menu a.menu-nova[hidden] { display: none; }
@media (max-width: 820px) { #menu a.menu-nova { margin: 0; padding: 6px 12px; } }
@media (min-width: 821px) and (max-height: 780px) { #menu a.menu-nova { margin: 4px 0 6px; padding-top: 8px; padding-bottom: 8px; } }

/* ---------- celular (pedido do Pedro, 22/10/2026): a barra fixa embaixo e nada rolando para o lado ---------- */
/* No PC fica o menu da esquerda; no celular, o alto mostra só o logo e as telas vão para a barra de baixo (Início,
   Ocorrências, o "+" da nota nova, Notas e o Mais). O Mais (app.js, abrirMais) abre de baixo com o resto. */
.barra-celular { display: none; }
@media (max-width: 820px) {
  .sistema { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .moldura { flex-wrap: nowrap; padding: max(8px, env(safe-area-inset-top)) 16px 8px; }
  .moldura #menu, .moldura .moldura-pe { display: none; }
  .menu-logo-txt { display: flex; }
  .menu-simbolo { width: 34px; height: 22px; }
  .menu-nome { width: 96px; }
  .conteudo { padding: 16px 16px 24px; }
  /* a barra de estado só aparece sem internet ou com alguma coisa esperando na fila */
  .barra-estado { display: none; }
  html.sem-internet .barra-estado, .barra-estado:has(#fila-sem-internet:not([hidden])) { display: flex; align-items: center; gap: 6px 12px; padding: 6px 16px; }
  .barra-estado #estado-produto, .barra-estado #estado-versao, .barra-estado #instalar-pc { display: none; }

  .barra-celular { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; background: var(--z-moldura);
    border-top: 1px solid var(--z-moldura-borda); padding: 0 4px env(safe-area-inset-bottom); position: relative; z-index: 3; }
  .barra-celular[hidden] { display: none; }
  .barra-celular > a, .barra-celular > button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; min-height: 58px;
    padding: 8px 2px 7px; border: 0; background: none; color: var(--z-moldura-texto-fraco); font: 600 11px/13px var(--z-fonte); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .barra-celular > a > span:last-child, .barra-celular > button > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-celular svg.i { width: 23px; height: 23px; }
  .barra-celular > .ativo { color: #FF7A33; }
  .barra-celular > a:active, .barra-celular > button:active { color: #FFFFFF; }
  .barra-celular > a[hidden] { display: none; }
  .barra-icone { position: relative; display: block; line-height: 0; }
  .barra-contador { position: absolute; top: -5px; left: 14px; min-width: 18px; padding: 1px 5px; border-radius: 99px; background: #FF5A00; color: #FFFFFF; font: 700 10px/14px var(--z-mono); text-align: center; }
  .barra-contador[hidden] { display: none; }
  /* o "+": o botão redondo laranja, um pouco acima da barra */
  .barra-celular > .barra-nova { color: var(--z-moldura-texto); }
  .barra-nova-circulo { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -20px; border-radius: 50%; background: #FF5A00; color: #1A1A1A;
    box-shadow: 0 4px 14px rgba(255, 90, 0, .45), 0 0 0 4px var(--z-moldura); }
  .barra-nova-circulo svg.i { width: 26px; height: 26px; stroke-width: 2.4; }
  .barra-celular > .barra-nova.ativo .barra-nova-circulo { background: #FF7429; }
  .barra-celular > .barra-nova:active .barra-nova-circulo { background: #E04F00; }

  /* os avisos ficam acima da barra de baixo, na largura da tela */
  .toast, .toast[popover] { left: 16px; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); max-width: none; inset: auto 16px calc(74px + env(safe-area-inset-bottom)) 16px; }
  .toast.erro-aviso, .toast.erro-aviso[popover] { inset: max(12px, env(safe-area-inset-top)) 16px auto 16px; transform: none; max-width: none; }
}

/* números do início */
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.numero b.ok { color: var(--ok-texto); }
.numero b.perigo { color: var(--perigo-texto); }
td.ok, span.ok { color: var(--ok-texto); font-weight: 600; }
td.perigo, span.perigo { color: var(--perigo-texto); font-weight: 600; }

/* cartões dos veículos */
.veiculos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.veiculo { cursor: pointer; text-decoration: none; color: inherit; transition: border-color .15s; }
.veiculo:hover { border-color: var(--z-laranja); }
.veiculo h3 { margin: 0; font-size: 17px; }
.veiculo .placa { font: 600 12px var(--z-mono); letter-spacing: .08em; padding: 2px 8px; border: 1px solid var(--z-cartao-borda); border-radius: 4px; }
.veiculo .resultado { display: flex; justify-content: space-between; font-size: 13px; }
.veiculo.inativo { opacity: .55; }

/* barras simples dos meses */
.barras { display: grid; gap: 8px; }
.barra-mes { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; font-size: 12.5px; }
.barra-mes .trilhos { display: grid; gap: 3px; }
.barra-mes .trilho { height: 10px; border-radius: 5px; min-width: 2px; }
.trilho.receita { background: var(--z-sucesso); }
.trilho.custo { background: var(--z-laranja); }
.legenda-barras { display: flex; gap: 14px; font-size: 12px; color: var(--z-rotulo); }
.legenda-barras i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* formulários e janelas */
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--z-texto); }
.form input, .form select, .form textarea { font: 500 14px var(--z-fonte); padding: 8px 10px; border-radius: 8px; border: 1px solid var(--z-cartao-borda); background: var(--z-cartao); color: var(--z-titulo); min-width: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--z-laranja); outline-offset: 1px; }
.form .acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.form .check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
dialog.janela .janela-corpo { padding: 20px; display: grid; gap: 14px; max-height: calc(100dvh - 60px); overflow-y: auto; }
dialog.janela h2 { margin: 0; font-size: 19px; }
.foto-lida { display: flex; gap: 12px; align-items: center; }
.foto-lida img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--z-cartao-borda); }
.qr svg { width: 240px; height: 240px; background: #fff; padding: 8px; border-radius: 8px; }
.token-novo { font: 600 13px var(--z-mono); overflow-wrap: anywhere; user-select: all; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.filtros label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; }
.filtros input, .filtros select { font: 500 13.5px var(--z-fonte); padding: 7px 9px; border-radius: 8px; border: 1px solid var(--z-cartao-borda); background: var(--z-cartao); color: var(--z-titulo); }
.mais-lista { display: grid; gap: 6px; }
.mais-lista a, .mais-lista button { text-align: left; }
@media (max-width: 820px) {
  .tabela td, .tabela th { padding: 8px; }
  dialog.janela { width: calc(100% - 16px); }
}