:root {
  /* Paleta VPA Tecnologia (tirada da logo) */
  --azul-noite: #030C15;
  --azul-noite-2: #0E1C2C;
  --azul-noite-3: #1A2D42;
  --verde: #9DC233;
  --verde-hover: #8CB02A;
  --verde-escuro: #5C7A14;
  --verde-claro: #EEF6DC;
  --anel: linear-gradient(90deg, #C440BA, #DF4F95, #EA756C, #EC923C, #F9BA39, #9DC233);

  /* Cores dos números (aprovadas): custo azul, receita/margem verde, acerto do motorista marrom.
     A primeira vai nos gráficos; a "texto-" vai nos números escritos. */
  --cor-custo: #2F6690;    --texto-custo: #2F6690;   --fundo-custo: #E8F0F7;
  --cor-receita: #9DC233;  --texto-receita: #5C7A14; --fundo-receita: #EEF6DC;
  --cor-acerto: #8B5A2B;   --texto-acerto: #8B5A2B;  --fundo-acerto: #F5EDE4;

  --fundo: #F4F6F8;
  --superficie: #ffffff;
  --borda: #E2E6EB;
  --texto: #0E1C2C;
  --texto-suave: #5B6B7C;
  --primaria: var(--verde-escuro);
  --perigo: #B8335A;
  --perigo-claro: #FBEAF0;
  --alerta: #A8590C;
  --alerta-claro: #FDF1E3;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(3, 12, 21, .06), 0 1px 3px rgba(3, 12, 21, .08);
  --largura-menu: 236px;
  --altura-topo: 60px;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased;
}
h1 { color: var(--azul-noite-2); font-size: 1.5rem; line-height: 1.25; margin: 0 0 .25rem; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
a { color: var(--primaria); }
.sub { color: var(--texto-suave); margin: 0 0 1.25rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.icone { width: 18px; height: 18px; flex-shrink: 0; }
.num, .tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.placa { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
[hidden] { display: none !important; }

/* Marca (logo + nome) — também é o botão de início */
.marca { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.02rem; color: #fff; text-decoration: none; }
.marca img { flex-shrink: 0; }
.marca-link { cursor: pointer; border-radius: 10px; transition: background .15s, opacity .15s; }
.marca-link:hover { background: rgba(255, 255, 255, .06); }
.marca-link:hover img { filter: drop-shadow(0 0 6px rgba(157, 194, 51, .45)); }
.marca-link:focus-visible { outline: 3px solid rgba(157, 194, 51, .6); outline-offset: 2px; }

/* Estrutura com menu lateral */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: var(--largura-menu); flex-shrink: 0; background: var(--azul-noite-2); color: #C9D3DE;
  display: flex; flex-direction: column; padding: 1.25rem .85rem 1rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--anel); }
.lateral > .marca { padding: .45rem .5rem; margin-bottom: .9rem; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a, .menu-titulo {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px;
  color: #C9D3DE; text-decoration: none; font-weight: 500; font-size: .94rem;
}
.menu a:hover { background: var(--azul-noite-3); color: #fff; }
.menu a.ativo { background: rgba(157, 194, 51, .14); color: var(--verde); font-weight: 600; box-shadow: inset 3px 0 0 var(--verde); }
.menu a:focus-visible { outline: 3px solid rgba(157, 194, 51, .6); outline-offset: -3px; }
.menu-titulo { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.menu-titulo:hover { background: var(--azul-noite-3); color: #fff; }
.menu-titulo:focus-visible { outline: 3px solid rgba(157, 194, 51, .6); outline-offset: -3px; }
.menu-titulo span { flex: 1; }
.menu-titulo .seta { width: 15px; height: 15px; flex-shrink: 0; opacity: .7; transition: transform .15s ease; }
.menu-grupo.aberto > .menu-titulo .seta { transform: rotate(90deg); }
.menu-grupo[data-atual] > .menu-titulo { color: #fff; }
.menu-filhos { display: none; flex-direction: column; gap: 1px; }
.menu-grupo.aberto > .menu-filhos { display: flex; }
.menu-grupo { margin: 1px 0; }
/* Recuo por nível: 0 = raiz (com ícone), 1 = dentro de um grupo, 2 = subgrupo */
.menu a.nivel-1, .menu-grupo.nivel-1 > .menu-titulo { padding-left: 2.45rem; font-size: .91rem; }
.menu a.nivel-2 { padding-left: 3.45rem; font-size: .88rem; }
.menu-filhos .menu-filhos { position: relative; }
.menu-filhos .menu-filhos::before { content: ""; position: absolute; left: 2.75rem; top: .3rem; bottom: .3rem; width: 1px; background: var(--azul-noite-3); }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conteudo { padding: 1.75rem 2rem 3rem; max-width: 1100px; width: 100%; }
.conteudo-largo { max-width: 1400px; }
.fundo-menu { display: none; }

/* Barra do topo */
.topo {
  position: sticky; top: 0; z-index: 15; min-height: var(--altura-topo);
  display: flex; align-items: center; gap: .75rem; padding: .55rem 1.5rem;
  padding-top: calc(.55rem + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda);
}
.topo .menu-botao, .topo-marca { display: none; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.contador {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #D93636; color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff;
}
.botao-icone {
  position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--borda);
  background: #fff; color: var(--azul-noite-2); display: grid; place-items: center; cursor: pointer;
}
.botao-icone:hover { background: var(--fundo); }
.ponto-online { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #2FA84F; box-shadow: 0 0 0 2px #fff; }
.botao-usuario {
  display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 600; font-size: .9rem;
  padding: .3rem .55rem .3rem .3rem; border-radius: 999px; border: 1px solid var(--borda); background: #fff; color: var(--texto); cursor: pointer;
}
.botao-usuario:hover { background: var(--fundo); }
.botao-usuario .icone { width: 15px; height: 15px; color: var(--texto-suave); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--verde); color: var(--azul-noite); display: grid; place-items: center; font-weight: 700; }
.usuario-nome { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menus suspensos */
.suspenso { position: relative; }
.suspenso-caixa {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 340px;
  background: #fff; border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 18px 48px rgba(3, 12, 21, .18);
  overflow: hidden;
}
.suspenso-caixa.largo { width: 420px; }
.suspenso-caixa.estreito { width: 240px; }
.suspenso.aberto .suspenso-caixa { display: flex; flex-direction: column; }
.suspenso-cab { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--borda); }
.suspenso-cab strong { flex: 1; }
.caixa-alta { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.link-pequeno { font-size: .85rem; font-weight: 600; text-decoration: none; }
.fechar-suspenso { display: none; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--texto-suave); padding: 0 .25rem; }
.filtro-novidades { display: flex; gap: .35rem; padding: .65rem 1rem; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.filtro-novidades button {
  font: inherit; font-size: .82rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borda); background: #fff; color: var(--texto-suave);
}
.filtro-novidades button.ativo { background: var(--azul-noite-2); border-color: var(--azul-noite-2); color: #fff; }
.lista-novidades, .lista-online { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 460px); overflow-y: auto; }
.lista-novidades li { padding: .85rem 1rem; border-bottom: 1px solid var(--borda); display: grid; gap: .3rem; }
.lista-novidades li.nova { background: #FAFDF4; }
.lista-novidades .linha1 { display: flex; align-items: center; gap: .5rem; }
.lista-novidades time { margin-left: auto; font-size: .78rem; color: var(--texto-suave); }
.lista-novidades strong { font-size: .95rem; }
.lista-novidades p { margin: 0; font-size: .88rem; color: var(--texto-suave); }
.lista-novidades a { font-size: .85rem; font-weight: 600; text-decoration: none; }
.vazio { padding: 1.25rem 1rem; color: var(--texto-suave); font-size: .9rem; text-align: center; }
.suspenso-rodape-link { display: block; text-align: center; padding: .75rem; font-weight: 600; text-decoration: none; border-top: 1px solid var(--borda); }
.suspenso-rodape-link:hover { background: var(--fundo); }
.lista-online li { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .65rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--borda); }
.lista-online .onde { grid-column: 2 / 4; font-size: .84rem; color: var(--texto-suave); }
.lista-online .quando { font-size: .8rem; color: var(--texto-suave); }
.bola { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.bola.verde { background: #2FA84F; }
.bola.amarela { background: #E2B007; }
.legenda-online { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .7rem 1rem; font-size: .78rem; color: var(--texto-suave); background: #fafbfc; }
.conta-quem { padding: .85rem 1rem; border-bottom: 1px solid var(--borda); }
.conta-quem strong, .conta-quem small { display: block; overflow: hidden; text-overflow: ellipsis; }
.conta-quem small { color: var(--texto-suave); }
.suspenso-caixa [role=menuitem] {
  display: block; width: 100%; text-align: left; padding: .7rem 1rem; font: inherit; color: var(--texto);
  background: none; border: 0; text-decoration: none; cursor: pointer;
}
.suspenso-caixa [role=menuitem]:hover { background: var(--fundo); }
.suspenso-caixa form { margin: 0; }

/* Etiquetas coloridas */
.etiqueta { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; letter-spacing: .02em; white-space: nowrap; }
.tipo-novo { background: var(--verde-claro); color: var(--verde-escuro); }
.tipo-melhoria { background: #E8F0F7; color: #2F6690; }
.tipo-correcao { background: var(--alerta-claro); color: var(--alerta); }
.etq-conferido { background: var(--verde-claro); color: var(--verde-escuro); }
.etq-recebido { background: #E8F0F7; color: #2F6690; }
.etq-a-receber { background: var(--alerta-claro); color: var(--alerta); }
.etq-vencido { background: var(--perigo-claro); color: var(--perigo); }
.etq-fazer-agora { background: var(--alerta-claro); color: var(--alerta); }
.etq-ok { background: var(--verde-claro); color: var(--verde-escuro); }
.etq-sem-dados { background: #eef0f3; color: var(--texto-suave); }
.etq-aberto { background: var(--alerta-claro); color: var(--alerta); }
.etq-fechado { background: var(--verde-claro); color: var(--verde-escuro); }

/* Páginas sem menu (entrar, troca obrigatória de senha) */
.sozinho {
  min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 1.75rem;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(60% 45% at 85% 5%, rgba(157, 194, 51, .20), transparent 70%),
    radial-gradient(55% 40% at 8% 100%, rgba(196, 64, 186, .16), transparent 70%),
    var(--azul-noite);
}
.sozinho > .aviso { width: min(400px, calc(100vw - 2rem)); margin: 0; }
.logo-entrada { width: 132px; height: 132px; filter: drop-shadow(0 12px 32px rgba(0, 0, 0, .55)); }
.sozinho .cartao { border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .40); }

/* Cartões e cabeçalhos */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 1.75rem; }
.cartao.estreito { width: min(400px, calc(100vw - 2rem)); }
.cartao.medio { max-width: 560px; }
.cartao.centro { text-align: center; }
.cabecalho { margin-bottom: 1.25rem; }
.cabecalho.com-acao { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.cabecalho.com-acao .sub { margin-bottom: 0; }
.linha-botoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.voltar { display: inline-block; margin-bottom: 1rem; text-decoration: none; color: var(--texto-suave); font-weight: 500; }
.voltar:hover { color: var(--texto); }
.titulo-secao { font-size: 1.05rem; margin: 1.75rem 0 .75rem; color: var(--azul-noite-2); }
.vazio-grande { background: var(--superficie); border: 1px dashed #cfd5dd; border-radius: 14px; padding: 2.5rem 1rem; text-align: center; color: var(--texto-suave); display: grid; gap: 1rem; justify-items: center; }
.vazio-grande p { margin: 0; }

/* Ajuda curta */
.ajuda { background: #F7FAFC; border: 1px solid var(--borda); border-left: 4px solid var(--verde); border-radius: 10px; padding: .6rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; }
.ajuda summary { cursor: pointer; font-weight: 600; color: var(--azul-noite-2); }
.ajuda ul { margin: .5rem 0 .2rem; padding-left: 1.2rem; display: grid; gap: .3rem; color: var(--texto); }

/* Abas */
.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.25rem; overflow-x: auto; }
.abas a { padding: .6rem 1rem; text-decoration: none; color: var(--texto-suave); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--texto); }
.abas a.ativo { color: var(--azul-noite-2); border-bottom-color: var(--verde); }

/* Formulários */
.formulario { display: grid; gap: 1rem; }
.formulario label { display: grid; gap: .35rem; font-weight: 500; font-size: .92rem; }
.formulario small { color: var(--texto-suave); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
  font: inherit; padding: .6rem .75rem; border: 1px solid #cfd5dd; border-radius: 8px;
  background: #fff; color: var(--texto); width: 100%; min-height: 44px;
}
textarea { resize: vertical; min-height: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--verde-escuro); box-shadow: 0 0 0 3px rgba(157, 194, 51, .35); }
.acoes { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .25rem; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem 1.1rem; }
.campo { display: grid; gap: .3rem; align-content: start; }
.campo > label, .campo .rotulo { font-weight: 600; font-size: .88rem; color: var(--azul-noite-2); }
.campo.largo, .campo-textolongo { grid-column: 1 / -1; }
.campo .dica, .dica { font-size: .8rem; color: var(--texto-suave); }
.campo .dica:empty { display: none; }
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea { border-color: var(--perigo); background: #FFF8FA; }
.erro-campo { color: var(--perigo); font-size: .82rem; font-style: normal; font-weight: 600; }
.campo.calculado output {
  display: flex; align-items: center; min-height: 44px; padding: .6rem .75rem; border-radius: 8px;
  background: #F1F4F7; border: 1px dashed #cfd5dd; font-weight: 700; font-variant-numeric: tabular-nums;
}
.campo .rotulo small { font-weight: 400; color: var(--texto-suave); }
.caixa-marcar { display: flex !important; align-items: center; gap: .55rem; font-weight: 600; font-size: .9rem; cursor: pointer; min-height: 44px; align-self: end; }
.caixa-marcar input { width: 20px; height: 20px; accent-color: var(--verde-escuro); }
.grupo-campos { border: 1px solid var(--borda); border-radius: 12px; padding: 1rem 1.1rem; margin: 1.25rem 0 0; }
.grupo-campos legend { font-weight: 700; padding: 0 .35rem; color: var(--azul-noite-2); }
.grupo-campos legend small { font-weight: 400; color: var(--texto-suave); }
.acoes-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.itens-preventiva { border: 1px solid var(--borda); border-radius: 12px; padding: .9rem 1rem; margin-top: 1.25rem; }
.itens-preventiva legend { font-weight: 700; padding: 0 .35rem; }
.lista-marcar { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .25rem 1rem; }
.campo-foto { margin-top: 1.25rem; }
.foto-atual { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.foto-atual img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borda); }
.ia-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .85rem; margin-bottom: 1.25rem; border-radius: 12px; background: linear-gradient(135deg, #F3F8E6, #EEF3F8); border: 1px solid #DCE8C3; }
.botao-ia { cursor: pointer; }
.ia-situacao { font-size: .88rem; color: var(--texto-suave); }
.ia-situacao.ok { color: var(--verde-escuro); font-weight: 600; }
.ia-situacao.erro { color: var(--perigo); font-weight: 600; }
.campo.preenchido-ia input, .campo.preenchido-ia select { background: #F6FBEA; border-color: var(--verde); }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: flex-end; margin-bottom: 1.25rem; }
.filtros label { display: grid; gap: .25rem; font-size: .8rem; font-weight: 600; color: var(--texto-suave); min-width: 140px; flex: 1 1 140px; max-width: 220px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: 8px; min-height: 42px;
  border: 1px solid transparent; background: var(--verde); color: var(--azul-noite);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.botao:hover { background: var(--verde-hover); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao:focus-visible, .link:focus-visible, .botao-icone:focus-visible, .botao-usuario:focus-visible { outline: 3px solid rgba(157, 194, 51, .6); outline-offset: 2px; }
.botao.largo { width: 100%; }
.botao.secundario { background: #fff; color: var(--texto); border-color: #cfd5dd; }
.botao.secundario:hover { background: var(--fundo); }
.botao.perigo { background: var(--perigo); color: #fff; }
.botao.perigo:hover { background: #9C2A4C; }
.botao.perigo-claro { background: #fff; color: var(--perigo); border-color: #F0C6D2; }
.botao.perigo-claro:hover { background: var(--perigo-claro); }
.botao.pequeno { padding: .3rem .65rem; font-size: .84rem; min-height: 34px; }
.botao.botao-grande { padding: .7rem 1.3rem; font-size: 1rem; }
.link { background: none; border: 0; color: var(--texto-suave); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.sair-sozinho { text-align: center; margin-top: 1.25rem; }

/* Avisos */
.aviso { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; border: 1px solid; font-weight: 500; }
.aviso.erro { background: var(--perigo-claro); border-color: #F0C6D2; color: #8E2645; }
.aviso.ok { background: var(--verde-claro); border-color: #D3E6A6; color: #3F5510; }
.aviso.atencao { background: var(--alerta-claro); border-color: #F3D2AE; color: #7A410A; }

/* Tabelas */
.tabela-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); overflow-x: auto; }
.tabela-caixa.sem-borda { border: 0; box-shadow: none; border-radius: 0; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--texto-suave); font-weight: 600; padding: .75rem .85rem; border-bottom: 1px solid var(--borda); background: #fafbfc;
}
.tabela td { padding: .7rem .85rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-dados td { white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tfoot td { font-weight: 700; background: #fafbfc; border-top: 2px solid var(--borda); border-bottom: 0; }
.tabela tr.inativo td:not(.acoes-linha) { color: var(--texto-suave); }
.tabela tr.tem-alerta td { border-bottom: 0; }
.tabela .linha-alerta td { background: var(--alerta-claro); color: #7A410A; font-size: .84rem; font-weight: 600; padding: .4rem .85rem; white-space: normal; }
.tabela-fixos input, .tabela-fixos select { min-height: 38px; padding: .4rem .6rem; }
.tabela-fixos td:nth-child(2) input { text-align: right; max-width: 140px; margin-left: auto; display: block; }
.linha-auto td { color: var(--texto-suave); }
.acoes-linha { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: nowrap; }
.acoes-linha form { margin: 0; }
.selo {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-escuro); margin-left: .35rem; vertical-align: middle;
}
.selo.claro { background: #eef0f3; color: var(--texto-suave); }
.situacao { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; font-size: .9rem; }
.situacao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.situacao.sim::before { background: var(--verde); box-shadow: 0 0 0 2px var(--verde-claro); }
.situacao.nao::before { background: #a0a8b4; }

/* Cores dos números */
.cor-custo { color: var(--texto-custo); }
.cor-receita { color: var(--texto-receita); }
.cor-acerto { color: var(--texto-acerto); }
.cor-negativo { color: var(--perigo); }

/* Cartões de caminhão e listas de dados */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.cartao-caminhao { padding: 1.25rem; display: grid; gap: .5rem; align-content: start; }
.cartao-caminhao header { display: flex; align-items: center; gap: .5rem; }
.cartao-caminhao h2 { margin: 0; font-size: 1.3rem; }
.cartao-caminhao .sub { margin: 0; }
.cartao-caminhao.inativo { opacity: .65; }
.dados-lista { margin: .25rem 0 0; display: grid; gap: .35rem; }
.dados-lista div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--borda); padding-bottom: .3rem; }
.dados-lista dt { color: var(--texto-suave); font-size: .88rem; }
.dados-lista dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.acoes-cartao { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.acoes-cartao form { margin: 0; }

/* Início */
.atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; margin-bottom: 1.5rem; }
.atalho {
  display: grid; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: 14px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra); color: var(--texto);
  transition: border-color .15s, transform .15s;
}
.atalho strong { color: var(--azul-noite-2); }
.atalho span { color: var(--texto-suave); font-size: .88rem; }
.atalho:hover { border-color: var(--verde); transform: translateY(-1px); }

/* Últimas atualizações (página) */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; max-width: 760px; }
.novidade { padding: 1.1rem 1.25rem; display: grid; gap: .35rem; }
.novidade-cab { display: flex; align-items: center; gap: .6rem; }
.novidade-cab time { color: var(--texto-suave); font-size: .85rem; }
.novidade h2 { margin: 0; font-size: 1.05rem; }
.novidade p { margin: 0; color: var(--texto-suave); }
.link-tela { font-weight: 600; text-decoration: none; font-size: .9rem; }
.telas-visitadas { margin-top: .5rem; }
.telas-visitadas summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.telas-visitadas ul { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .2rem; font-size: .88rem; }
.telas-visitadas li { display: flex; justify-content: space-between; gap: .5rem; }
.telas-visitadas small { color: var(--texto-suave); }

/* Janela de confirmação */
.confirmar { border: 0; border-radius: 14px; padding: 1.5rem; width: min(420px, calc(100vw - 2rem)); box-shadow: 0 20px 50px rgba(3, 12, 21, .3); color: var(--texto); }
.confirmar::backdrop { background: rgba(3, 12, 21, .6); }
.confirmar p { color: var(--texto-suave); margin: 0 0 1.25rem; }

/* Computador médio: esconde o texto da pílula se faltar espaço */
@media (max-width: 1100px) and (min-width: 801px) {
  .usuario-nome { max-width: 110px; }
}

/* Celular */
@media (max-width: 800px) {
  .lateral {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: none; padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
  }
  .lateral.aberto { transform: none; box-shadow: 0 0 40px rgba(3, 12, 21, .4); }
  .fundo-menu.aberto { display: block; position: fixed; inset: 0; background: rgba(3, 12, 21, .55); z-index: 45; }
  .topo { background: var(--azul-noite-2); border-bottom: 0; padding-left: max(.75rem, env(safe-area-inset-left, 0px)); padding-right: max(.75rem, env(safe-area-inset-right, 0px)); gap: .5rem; }
  .topo .menu-botao {
    display: grid; width: 40px; height: 40px; border: 1px solid #2A4058; border-radius: 8px; background: transparent;
    place-content: center; gap: 4px; cursor: pointer; flex-shrink: 0;
  }
  .menu-botao span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
  .topo-marca { display: flex; font-size: .95rem; padding: .25rem .35rem; min-width: 0; }
  .topo-marca img { width: 28px; height: 28px; }
  .usuario-nome, .botao-usuario > .icone { display: none; }
  .botao-icone { background: transparent; border-color: #2A4058; color: #fff; }
  .botao-usuario { background: transparent; border: 0; padding: 0; }
  .contador { box-shadow: 0 0 0 2px var(--azul-noite-2); }
  .ponto-online { box-shadow: 0 0 0 2px var(--azul-noite-2); }
  /* Menus suspensos em tela cheia */
  .suspenso.aberto .suspenso-caixa, .suspenso.aberto .suspenso-caixa.largo, .suspenso.aberto .suspenso-caixa.estreito {
    position: fixed; inset: 0; width: auto; border-radius: 0; border: 0; z-index: 60;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .suspenso-caixa .lista-novidades, .suspenso-caixa .lista-online { max-height: none; flex: 1; }
  .fechar-suspenso { display: block; }
  .conteudo { padding: 1.25rem max(1rem, env(safe-area-inset-left, 0px)) 2.5rem max(1rem, env(safe-area-inset-right, 0px)); }
  .cartao { padding: 1.25rem; }
  .logo-entrada { width: 112px; height: 112px; }
  .sozinho { gap: 1.25rem; place-content: start center; padding-top: max(2.5rem, 8vh); }
  .grade-campos { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .campo-texto, .campo-placa, .campo-veiculo, .campo-escolha, .campo-motorista { grid-column: 1 / -1; }
  .acoes-form .botao { flex: 1 1 auto; }
  .filtros label { max-width: none; }
  .cabecalho.com-acao .linha-botoes, .cabecalho.com-acao > .botao { width: 100%; }
  .cabecalho.com-acao .botao-grande { flex: 1; }

  /* Tabela vira cartões */
  .tabela-caixa { background: none; border: 0; box-shadow: none; overflow: visible; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tfoot, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: var(--sombra); margin-bottom: .75rem; padding: .5rem 0;
  }
  .tabela td { border: 0; padding: .3rem 1rem; white-space: normal !important; text-align: left !important; }
  .tabela td[data-rotulo]::before {
    content: attr(data-rotulo); display: block; font-size: .72rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  }
  .tabela td[data-vazio] { display: none; }
  .tabela td[data-rotulo="Nome"]::before { display: none; }
  .tabela tr.tem-alerta { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
  .tabela .linha-alerta { padding: 0; margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; overflow: hidden; }
  .tabela .linha-alerta td { padding: .55rem 1rem; }
  .acoes-linha { justify-content: flex-start; flex-wrap: wrap; padding-top: .6rem !important; }
  .tabela-fixos td:nth-child(2) input { max-width: none; text-align: left; }
}
@media (max-width: 420px) {
  .topo-marca { font-size: 0; gap: 0; }
  .grade-campos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Fechamento, resumo e painéis */
.destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.destaque { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra); padding: 1rem 1.15rem; display: grid; gap: .2rem; border-top: 4px solid var(--borda); }
.destaque .rotulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--texto-suave); }
.destaque strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.destaque small { color: var(--texto-suave); font-size: .82rem; }
.destaque-custo { border-top-color: var(--cor-custo); } .destaque-custo strong { color: var(--texto-custo); }
.destaque-receita { border-top-color: var(--cor-receita); } .destaque-receita strong { color: var(--texto-receita); }
.destaque-negativo { border-top-color: var(--perigo); } .destaque-negativo strong { color: var(--perigo); }
.destaque-acerto { border: 2px solid var(--cor-acerto); border-top-width: 4px; background: var(--fundo-acerto); }
.destaque-acerto strong { color: var(--texto-acerto); font-size: 1.85rem; }
.destaque .variacao { font-size: .8rem; font-weight: 700; }
.variacao.sobe { color: var(--verde-escuro); } .variacao.desce { color: var(--perigo); } .variacao.neutra { color: var(--texto-suave); }
.variacao.sobe.ruim { color: var(--perigo); } .variacao.desce.bom { color: var(--verde-escuro); }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tabela-resumo td { padding: .5rem .25rem; }
.tabela-resumo tr.subtotal td { font-weight: 700; background: #fafbfc; }
.tabela-resumo tr.total td { font-weight: 800; font-size: 1.05rem; border-top: 2px solid var(--borda); }
.acerto { border: 2px solid var(--cor-acerto); margin-bottom: 1rem; }
.acerto h2 { color: var(--texto-acerto); }
.acerto tr.total td { color: var(--texto-acerto); background: var(--fundo-acerto); }
.proximo-fechamento { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; border-left: 4px solid var(--verde); }
.proximo-fechamento .sub { margin: .2rem 0 0; }
.lista-motivos { margin: .4rem 0 0; padding-left: 1.2rem; }
.grafico-caixa { padding: 1rem; margin-bottom: 1.25rem; }
.grafico-caixa h2 { font-size: 1rem; margin-bottom: .75rem; }
.grafico-caixa canvas { width: 100% !important; }
.analise-ia { margin-bottom: 1.25rem; border-left: 4px solid var(--verde); }
.texto-ia { white-space: pre-wrap; line-height: 1.6; }
.bloco-preventiva { margin-bottom: 2rem; }
.bloco-preventiva h2 { margin: 0; font-size: 1.3rem; }
@media (max-width: 800px) {
  .tabela-resumo tr { display: flex !important; justify-content: space-between; gap: .75rem; padding: .35rem .25rem !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--borda) !important; box-shadow: none !important; border-radius: 0 !important; }
  .tabela-resumo td { padding: 0 !important; width: auto !important; }
  .tabela-resumo td.num { text-align: right !important; white-space: nowrap !important; }
  .destaque strong { font-size: 1.3rem; }
}

/* Painel e alertas */
.destaques-5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.chip-alerta { border-color: #F3D2AE; color: #7A410A; background: var(--alerta-claro); }
.bloco-link { display: block; text-decoration: none; }
.bloco-link:hover { filter: brightness(.98); }
.resumo-alertas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.chip { display: inline-flex; gap: .4rem; align-items: center; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--borda); background: #fff; color: var(--texto-suave); text-decoration: none; font-size: .88rem; }
.chip.tem { border-color: #F3D2AE; background: var(--alerta-claro); color: #7A410A; }
.chip strong { font-variant-numeric: tabular-nums; }
.lista-alertas { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.lista-alertas a { display: grid; grid-template-columns: auto auto 1fr; gap: .4rem .75rem; align-items: center; padding: .75rem 1rem; background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: 10px; text-decoration: none; color: var(--texto); }
.lista-alertas a:hover { background: #fafbfc; }
.lista-alertas .nivel-alto a { border-left-color: var(--perigo); }
.lista-alertas .nivel-medio a { border-left-color: #E2A33A; }
.lista-alertas .nivel-baixo a { border-left-color: #9AA8B8; }
.lista-alertas .placa { font-weight: 700; }
.tudo-certo { color: var(--verde-escuro); font-weight: 600; margin: 0; }
@media (max-width: 800px) { .lista-alertas a { grid-template-columns: auto 1fr; } .lista-alertas .texto { grid-column: 1 / -1; } }

/* Configurações e IA */
.bloco-config { margin-bottom: 1.25rem; }
.uso-ia { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 1rem; align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 800px) { .uso-ia { grid-template-columns: 1fr; } }
.carregando::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: .4rem; border: 2px solid var(--verde); border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; vertical-align: -2px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Botão Atualizar (canto de baixo, à direita) */
.atualizar-caixa {
  position: fixed; z-index: 30; display: flex; align-items: center; gap: .6rem;
  right: calc(1.25rem + env(safe-area-inset-right, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.botao-atualizar {
  position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--verde); color: var(--azul-noite);
  box-shadow: 0 6px 18px rgba(3, 12, 21, .25), 0 0 0 3px rgba(255, 255, 255, .9);
  transition: transform .15s ease, background .15s ease;
}
.botao-atualizar:hover { background: var(--verde-hover); transform: translateY(-1px); }
.botao-atualizar:focus-visible { outline: 3px solid var(--azul-noite-2); outline-offset: 3px; }
.botao-atualizar svg { width: 24px; height: 24px; }
.botao-atualizar.girando svg { animation: girar .7s linear infinite; }
.atualizar-dica {
  position: absolute; right: 0; bottom: calc(100% + 8px); white-space: nowrap; pointer-events: none;
  background: var(--azul-noite-2); color: #fff; font-size: .8rem; font-weight: 600; padding: .3rem .6rem; border-radius: 6px;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.botao-atualizar:hover ~ .atualizar-dica, .botao-atualizar:focus-visible ~ .atualizar-dica { opacity: 1; transform: none; }
.nova-versao .atualizar-dica { display: none; }
.ponto-versao { display: none; position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border-radius: 50%; background: #D93636; box-shadow: 0 0 0 2px #fff; }
.nova-versao .ponto-versao { display: block; }
.atualizar-nova {
  background: var(--azul-noite-2); color: #fff; font-size: .85rem; font-weight: 600; padding: .55rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(3, 12, 21, .25); cursor: pointer; max-width: min(320px, calc(100vw - 7rem));
}
.atualizar-nova:hover { background: var(--azul-noite-3); }
/* Espaço no fim das telas para o botão não cobrir os botões de salvar */
.conteudo, .sozinho { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 800px) {
  .atualizar-caixa { right: calc(.85rem + env(safe-area-inset-right, 0px)); bottom: calc(.85rem + env(safe-area-inset-bottom, 0px)); }
  .botao-atualizar { width: 44px; height: 44px; }
  .botao-atualizar svg { width: 20px; height: 20px; }
  .atualizar-dica { display: none; }
  .atualizar-nova { font-size: .78rem; padding: .45rem .75rem; }
  .conteudo { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .botao-atualizar.girando svg { animation-duration: 2s; } }

/* Menu: contador de avisos */
.menu-contador { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #D93636; color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }

/* Chave liga/desliga (Configurações › IA) */
.recursos-ia { display: grid; gap: .75rem; margin: 0 0 .5rem; }
.chave-liga { display: grid !important; grid-template-columns: auto 1fr; gap: .25rem .85rem; align-items: start; cursor: pointer; font-weight: 400 !important; }
.chave-liga input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave-liga .trilho { width: 44px; height: 24px; border-radius: 999px; background: #C7CED6; position: relative; transition: background .15s; margin-top: 2px; }
.chave-liga .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.chave-liga input:checked + .trilho { background: var(--verde-escuro); }
.chave-liga input:checked + .trilho::after { transform: translateX(20px); }
.chave-liga input:focus-visible + .trilho { outline: 3px solid rgba(157, 194, 51, .6); outline-offset: 2px; }
.chave-liga strong, .chave-liga small { display: block; }
.chave-liga small { color: var(--texto-suave); font-size: .82rem; }

/* Sugestões e avisos */
.lista-sugestoes { display: grid; gap: .85rem; max-width: 860px; }
.sugestao h2 { margin-bottom: .6rem; }
.sugestao dl { margin: 0 0 .5rem; display: grid; gap: .5rem; }
.sugestao dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--texto-suave); }
.sugestao dd { margin: 0; }
.lista-pedido { margin-bottom: 1.25rem; border-left: 4px solid var(--verde); }
.lista-pedido textarea { font-size: .9rem; line-height: 1.5; background: #fafbfc; }
.aviso-sistema { display: grid; gap: .5rem; border-left: 4px solid var(--perigo); }
.aviso-sistema.tipo-lentidao { border-left-color: #E2A33A; }
.aviso-sistema .explicacao { margin: 0; }
.aviso-sistema pre { white-space: pre-wrap; font-size: .8rem; background: #F4F6F8; padding: .6rem; border-radius: 8px; overflow-x: auto; margin: .4rem 0 0; }
.aviso-sistema summary { cursor: pointer; font-size: .85rem; color: var(--texto-suave); }

/* Configurações: certificado digital e integrações */
.grade-certificados { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.certificado { display: grid; gap: .85rem; align-content: start; border-top: 4px solid var(--borda); }
.certificado.sit-valido { border-top-color: var(--verde); }
.certificado.sit-vencendo { border-top-color: #E2B007; }
.certificado.sit-vencido { border-top-color: var(--perigo); }
.cert-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.cert-cab h2 { margin: 0; }
.rotulo-pequeno { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; }
.etq-cert-valido { background: var(--verde-claro); color: var(--verde-escuro); }
.etq-cert-vencendo { background: #FFF6D6; color: #7A5B00; }
.etq-cert-vencido { background: var(--perigo-claro); color: var(--perigo); }
.etq-cert-vazio { background: #eef0f3; color: var(--texto-suave); }
.linha-apelido { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.linha-apelido label { font-weight: 600; font-size: .85rem; }
.linha-apelido input { flex: 1 1 160px; min-height: 38px; }
.envio-cert { border-top: 1px dashed var(--borda); padding-top: .85rem; }
.integracao { display: grid; gap: .6rem; align-content: start; }
.integracao.pausada { opacity: .75; }
.integracao .sub { margin: 0; }
.mascarado { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.resultado-teste { margin: 0; font-size: .85rem; padding: .45rem .65rem; border-radius: 8px; }
.resultado-teste.ok { background: var(--verde-claro); color: #3F5510; }
.resultado-teste.erro { background: var(--perigo-claro); color: #8E2645; }
.form-chave { margin: 0; }
.chave-botao { display: inline-flex; align-items: center; gap: .5rem; border: 0; background: none; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; color: var(--texto); padding: .2rem 0; }
.chave-botao .trilho { width: 38px; height: 22px; border-radius: 999px; background: #C7CED6; position: relative; }
.chave-botao .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.chave-botao[aria-checked="true"] .trilho { background: var(--verde-escuro); }
.chave-botao[aria-checked="true"] .trilho::after { transform: translateX(16px); }
.linha-extra { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
@media (max-width: 800px) { .linha-extra { grid-template-columns: 1fr; } }

/* Edoc */
.tabela-edoc tbody tr { cursor: pointer; }
.tabela-edoc tbody tr:hover td { background: #fafbfc; }
.nota-nova td { background: #F6FBEA; }
.nota-nova td:first-child { box-shadow: inset 4px 0 0 var(--verde); }
.barra-lote { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; font-size: .88rem; color: var(--texto-suave); }
.linha-prox { display: block; font-size: .9rem; }
.chave-acesso code { font-size: .85rem; word-break: break-all; }
.lista-simples { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.tem-erro td { background: #FFF8FA; }

/* Botões de ícone da barra do topo: dica ao passar o mouse */
.botao-icone[data-dica]::after {
  content: attr(data-dica); position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; pointer-events: none; z-index: 45;
  background: var(--azul-noite-2); color: #fff; font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: 6px;
  opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s;
}
.botao-icone[data-dica]:hover::after, .botao-icone[data-dica]:focus-visible::after { opacity: 1; transform: none; }
.suspenso.aberto .botao-icone[data-dica]::after { display: none; }
.botao-novidades .icone { color: var(--verde-escuro); }
.botao-novidades .contador { top: -5px; right: -5px; }
@media (max-width: 800px) {
  .botao-novidades .icone { color: var(--verde); }
  .botao-icone[data-dica]::after { display: none; }
}

/* Configurações › Backup */
.lista-backups { display: grid; gap: .75rem; margin-top: 1rem; }
.backup { border: 1px solid var(--borda); border-radius: 12px; padding: .85rem 1rem; }
.backup header { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.backup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.backup li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .3rem 0; border-top: 1px dashed var(--borda); }

/* Programação semanal */
.chips-base { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.chips-base small { color: var(--texto-suave); }
.estado-salvo { margin-left: auto; font-weight: 600; font-size: .88rem; color: var(--texto-suave); }
.estado-salvo.ok { color: var(--verde-escuro); }
.estado-salvo.erro { color: var(--perigo); }
.semana { margin-bottom: 1.25rem; }
.semana-cab { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.semana-cab h2 { margin: 0; font-size: 1.05rem; }
.sub-inline { font-weight: 400; color: var(--texto-suave); font-size: .9rem; }
.tabela-programacao td { padding: .35rem .3rem; white-space: nowrap; vertical-align: top; }
.tabela-programacao th { padding: .55rem .35rem; }
.tabela-programacao input[type=text], .tabela-programacao input[type=date] { min-height: 36px; padding: .35rem .45rem; font-size: .88rem; }
.tabela-programacao input[data-campo=origem], .tabela-programacao input[data-campo=destino] { min-width: 150px; }
.tabela-programacao td.num input[type=text] { text-align: right; width: 96px; }
.tabela-programacao input[data-campo=km] { width: 74px !important; }
.tabela-programacao input.automatico { background: #F1F4F7; border-style: dashed; }
.tabela-programacao input.manual { color: var(--texto-acerto); font-weight: 600; }
.tabela-programacao output.calc { display: inline-block; min-width: 82px; padding: .4rem .45rem; border-radius: 6px; background: #F1F4F7; border: 1px dashed #cfd5dd; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tabela-programacao output.abaixo { background: #FFF6D6; border-color: #E2B007; color: #7A5B00; }
.tabela-programacao output.negativo { background: var(--perigo-claro); border-color: #F0C6D2; color: var(--perigo); }
.marca-manual, .marca-sugerido { display: block; font-size: .7rem; font-weight: 700; text-align: right; }
.marca-manual { color: var(--texto-acerto); }
.marca-sugerido { color: var(--verde-escuro); }
.mini-marcar { display: flex; gap: .25rem; align-items: center; justify-content: flex-end; font-size: .7rem; color: var(--texto-suave); margin-top: .15rem; cursor: pointer; }
.mini-marcar input { width: 14px; height: 14px; accent-color: var(--verde-escuro); }
.linha-folga td { background: #F7F8FA; }
.folga { display: inline-block; padding: .35rem .5rem; font-weight: 700; letter-spacing: .05em; color: var(--texto-suave); }
.linha-erro td { background: #FFF8FA; }
.campo-erro { border-color: var(--perigo) !important; }
.estado-linha { display: block; max-width: 220px; white-space: normal; font-size: .75rem; color: var(--perigo); text-align: right; }
.linha-nova td { animation: destacar 1.8s ease-out; }
@keyframes destacar { from { background: var(--verde-claro); } to { background: transparent; } }
.sem-viagem td { color: var(--texto-suave); text-align: center; padding: 1rem !important; }
.totais-programacao { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 800px) {
  .tabela-programacao td.num input, .tabela-programacao input[data-campo=km] { width: 100% !important; text-align: left; }
  .tabela-programacao output.calc { min-width: 0; text-align: left; }
  .marca-manual, .marca-sugerido, .estado-linha, .mini-marcar { text-align: left; justify-content: flex-start; }
}
.comparacao-previsto { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; background: #fff; border: 1px solid var(--borda); border-left: 4px solid var(--verde); border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; }
.comparacao-previsto small { color: var(--texto-suave); }
.comparacao-previsto a { margin-left: auto; font-weight: 600; text-decoration: none; }

/* ---------- Configurações › Parâmetros ---------- */
.grade-parametros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1rem; align-items: start; }
.campo-linha { display: grid; grid-template-columns: 1fr 7.5rem; gap: .75rem; align-items: center; margin-bottom: .6rem; }
.campo-linha label small { display: block; font-weight: 400; }
.tabela-parametros input, .tabela-parametros select { width: 100%; min-width: 4.5rem; }
.tabela-parametros .acoes-linha { white-space: nowrap; }
.tabela-parametros .acoes-linha form { display: inline-block; }
.texto-suave { color: var(--texto-suave); }
@media (max-width: 900px) { .grade-parametros { grid-template-columns: 1fr; } }

/* ---------- Programação: placas lado a lado ---------- */
.filtro-mes { align-items: flex-end; margin: 0; }
.faixa-placas { display: flex; flex-wrap: wrap; gap: .5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: .75rem .85rem; margin: 0 0 1rem; box-shadow: var(--sombra); }
.placa-botao { display: inline-flex; align-items: center; min-height: 38px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--borda); background: #EEF1F4; color: var(--texto); font-weight: 600; letter-spacing: .03em; text-decoration: none; white-space: nowrap; }
.placa-botao:hover { border-color: var(--verde-escuro); color: var(--texto); }
.placa-botao.sem-viagem { background: transparent; border: 1.5px solid #9AA8B8; color: var(--texto-suave); }
.placa-botao.ativa, .placa-botao.ativa:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; font-weight: 700; }
.placa-botao:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.programacao-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.programacao-titulo h2 { margin: 0; font-size: 1.25rem; letter-spacing: .02em; }
.chip small { color: var(--texto-suave); }
.chip-link { text-decoration: none; color: var(--verde-escuro); font-weight: 600; }
#programacao-area[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
output.calc[title], input.automatico[title] { cursor: help; }
@media (max-width: 700px) {
  .faixa-placas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
}

/* ---------- Conferência de fretes ---------- */
.destaques-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.destaque-alerta { border-top-color: var(--alerta); } .destaque-alerta strong { color: var(--alerta); }
.tabela-conferencia input[type="text"] { min-width: 7rem; width: 100%; }
.tabela-conferencia .mini-marcar { justify-content: flex-start; font-size: .85rem; color: var(--texto); }
.tabela-conferencia .mini-marcar input { width: 18px; height: 18px; }
.tabela-conferencia tr.linha-erro { background: var(--perigo-claro); }
@media (max-width: 700px) { .destaques-3 { grid-template-columns: 1fr; } }

/* ---------- Depreciação: campos necessários ---------- */
.dep-regra { margin: 0 0 .75rem; }
.dep-situacao { margin: .5rem 0 0; font-size: .9rem; font-weight: 600; }
.dep-situacao.falta { color: var(--alerta); }
.dep-situacao.ok { color: var(--verde-escuro); }
.campo.dep-falta input { border-color: var(--alerta); background: var(--alerta-claro); }

/* ======================================================================
   Telas mais largas e organizadas (15/10/2026)
   Conteúdo usa a largura toda (menos o menu), limite de 1800px centralizado;
   tabelas sem rolagem lateral no computador; abas quebram linha.
   ====================================================================== */
.conteudo, .conteudo-largo { max-width: 1800px; margin-inline: auto; padding: 1.75rem clamp(1rem, 2.4vw, 2.5rem) 3rem; }
.abas { flex-wrap: wrap; overflow: visible; row-gap: .15rem; }
.abas a { padding: .6rem .9rem; }
.tabela th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.tabela td, .tabela th { padding-left: .7rem; padding-right: .7rem; }
.tabela td.acoes-linha, .tabela td:has(> .acoes-linha) { white-space: nowrap; }
@media (min-width: 801px) and (max-width: 1500px) {
  .tabela td, .tabela th { padding-left: .55rem; padding-right: .55rem; }
  .tabela-dados td { font-size: .9rem; }
}
@media (max-width: 800px) {
  .conteudo, .conteudo-largo { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
}

/* Parâmetros: Gerais mais estreito, tipos mais largo; um embaixo do outro em tela menor */
.grade-parametros { grid-template-columns: minmax(320px, .8fr) minmax(0, 1.7fr); }
@media (max-width: 1440px) { .grade-parametros { grid-template-columns: 1fr; } }
.tabela-parametros td, .tabela-parametros th { padding: .45rem .45rem; vertical-align: middle; }
.tabela-parametros input, .tabela-parametros select { min-height: 38px; padding: .35rem .5rem; }
.tabela-parametros td.num input { text-align: right; max-width: 7rem; margin-left: auto; display: block; }
.tabela-parametros [name=nome] { min-width: 10rem; }
.tabela-parametros select[name=tipo_id] { min-width: 9.5rem; }
.tabela-parametros .texto-suave { white-space: normal; font-size: .86rem; min-width: 12rem; }
.tabela-parametros .acoes-linha { display: table-cell; text-align: right; }
.tabela-parametros .acoes-linha form + form { margin-left: .35rem; }
.campo-linha { grid-template-columns: minmax(0, 1fr) 7.5rem; }
.campo-linha input { text-align: right; }

/* Botões de ação compactos (ícone) no computador; com texto no celular */
.botao-acao { padding: .35rem .5rem; gap: .35rem; }
.botao-acao .icone { width: 18px; height: 18px; }
.so-celular { display: none; }
@media (max-width: 800px) { .so-celular { display: inline; } }

/* Programação entre 801 e 1599px: Data/Data final e Origem/Destinos ficam um sobre o outro (cabe sem rolagem) */
@media (min-width: 801px) and (max-width: 1799px) {
  .tabela-programacao, .tabela-programacao thead, .tabela-programacao tbody, .tabela-programacao tfoot { display: block; width: 100%; }
  .tabela-programacao tr {
    display: grid; grid-template-columns: 8.8rem minmax(9rem, 1fr) 6.8rem 6.2rem 4.7rem 5.1rem 6.4rem 6.4rem 6.8rem 2.8rem;
    grid-auto-flow: column; border-bottom: 1px solid var(--borda); align-items: start;
  }
  .tabela-programacao tbody tr:last-child { border-bottom: 0; }
  .tabela-programacao th, .tabela-programacao td { border-bottom: 0 !important; min-width: 0; }
  .tabela-programacao tr > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .tabela-programacao tr > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .tabela-programacao tr > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .tabela-programacao tr > :nth-child(4) { grid-column: 1; grid-row: 2; }
  .tabela-programacao tr > :nth-child(5) { grid-column: 3; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(6) { grid-column: 4; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(7) { grid-column: 5; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(8) { grid-column: 6; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(9) { grid-column: 7; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(10) { grid-column: 8; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(11) { grid-column: 9; grid-row: 1 / 3; }
  .tabela-programacao tr > :nth-child(12) { grid-column: 10; grid-row: 1 / 3; }
  .tabela-programacao thead th:nth-child(4), .tabela-programacao thead th:nth-child(3) { padding-top: 0; }
  .tabela-programacao thead th { background: none; }
  .tabela-programacao thead tr { background: #fafbfc; }
  .tabela-programacao tfoot tr { background: #fafbfc; border-top: 2px solid var(--borda); }
  .tabela-programacao tfoot tr > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(2) { grid-column: 3; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(3) { grid-column: 4; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(4) { grid-column: 5; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(5) { grid-column: 6; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(6) { grid-column: 7; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(7) { grid-column: 8; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(8) { grid-column: 9; grid-row: 1; }
  .tabela-programacao tfoot tr > :nth-child(9) { grid-column: 10; grid-row: 1; }
  .tabela-programacao tfoot td { border-top: 0; background: none; white-space: nowrap; font-size: .8rem; }
  .tabela-programacao tr.sem-viagem { display: block; }
  .tabela-programacao td.num input[type=text], .tabela-programacao output.calc { width: 100% !important; min-width: 0; font-size: .85rem; }
  .tabela-programacao tr.linha-folga { background: #F7F8FA; }
  .tabela-programacao tr.linha-folga td { background: none; }
  .tabela-programacao input[data-campo=origem], .tabela-programacao input[data-campo=destino] { min-width: 0; width: 100%; }
  .tabela-programacao input[type=date] { width: 100%; }
  .tabela-programacao .acoes-linha { display: block; }
}
@media (min-width: 1800px) {
  /* Tela larga: colunas como na planilha, mesmas larguras em todas as semanas */
  .tabela-programacao { table-layout: fixed; }
  .tabela-programacao th:nth-child(1), .tabela-programacao th:nth-child(4) { width: 9.8rem; }
  .tabela-programacao th:nth-child(5) { width: 7.2rem; } .tabela-programacao th:nth-child(6) { width: 6.8rem; }
  .tabela-programacao th:nth-child(7) { width: 5.2rem; } .tabela-programacao th:nth-child(8) { width: 6rem; }
  .tabela-programacao th:nth-child(9) { width: 7.4rem; } .tabela-programacao th:nth-child(10) { width: 7.6rem; }
  .tabela-programacao th:nth-child(11) { width: 7.6rem; } .tabela-programacao th:nth-child(12) { width: 3.4rem; }
  .tabela-programacao input[type=text], .tabela-programacao input[type=date], .tabela-programacao output.calc { width: 100% !important; min-width: 0 !important; }
  .tabela-programacao tr.sem-viagem td { display: table-cell; }
}


/* Conferência de fretes: campos empilhados para caber sem rolagem */
.tabela-conferencia td { white-space: normal; vertical-align: top; }
.tabela-conferencia td.num { white-space: nowrap; }
.tabela-conferencia .pilha { display: table-cell; }
.tabela-conferencia .pilha > * + * { margin-top: .35rem; }
.tabela-conferencia .pilha input[type=text], .tabela-conferencia .pilha input[type=date] { display: block; width: 100%; min-width: 9rem; }
.tabela-conferencia td[data-rotulo="Observação"] input { min-width: 9rem; }
.tabela-conferencia td.quebra { min-width: 9rem; }
.tabela-conferencia .mini-marcar { margin-top: .4rem; }
.tabela-conferencia input { min-height: 36px; padding: .35rem .5rem; font-size: .9rem; }
@media (max-width: 800px) { .tabela-conferencia .pilha { display: block; } }

/* Coluna de ações: continua sendo célula da tabela (antes saía do alinhamento); botões lado a lado, nunca cortados */
@media (min-width: 801px) {
  td.acoes-linha { display: table-cell; text-align: right; white-space: nowrap; width: 1%; }
  td.acoes-linha > * { display: inline-flex; vertical-align: middle; }
  td.acoes-linha > * + * { margin-left: .35rem; }
  td.acoes-linha > .estado-linha { display: block; margin-left: 0; }
}