/* Sistema de Frota — estilo. Uma cor de marca por empresa (data-empresa no <html>). */
:root {
  --fundo: #EEF1F4;
  --superficie: #FFFFFF;
  --tinta: #1A2230;
  --tinta-2: #5B6676;
  --linha: #D5DBE3;
  --linha-forte: #AEB7C3;
  --ok: #1E7F52;
  --ok-fundo: #E3F3EA;
  --alerta: #9A6412;
  --alerta-fundo: #FBF0D9;
  --erro: #B42A25;
  --erro-fundo: #FBE6E4;
  --marca: #1B2A6B;
  --marca-tinta: #FFFFFF;
  --acento: #E30613;
  --raio: 6px;
  --fonte: "Barlow", system-ui, sans-serif;
  --fonte-num: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  color-scheme: light;
}
html[data-empresa="tecnocargas"] { --marca: #1F5FAD; --acento: #63B3EA; }
html[data-empresa="tecnobrisa"] { --marca: #2B7CC2; --acento: #9BD3F2; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--tinta);
  font: 400 15px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--marca); }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.num, td.num, .valor { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; font-weight: 500; }
td.num, th.num { text-align: right; }
.mudo { color: var(--tinta-2); }
.oculto { display: none !important; }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.lateral {
  background: var(--marca);
  color: var(--marca-tinta);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh;
}
.logo-empresa {
  background: #fff; border-radius: var(--raio); padding: 10px;
  display: flex; align-items: center; justify-content: center; height: 76px;
}
.logo-empresa img { max-height: 56px; max-width: 100%; }
.seletor-empresa select {
  width: 100%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: var(--raio); padding: 8px 10px;
}
.seletor-empresa select option { color: var(--tinta); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  color: #fff; text-decoration: none; padding: 9px 12px; border-radius: var(--raio);
  font-weight: 500; opacity: .86; border-left: 3px solid transparent;
}
.menu a:hover { background: rgba(255,255,255,.10); opacity: 1; }
.menu a[aria-current="page"] { background: rgba(255,255,255,.16); opacity: 1; border-left-color: var(--acento); }
.usuario-rodape { margin-top: auto; font-size: 13px; opacity: .9; }
.usuario-rodape button { background: none; border: 0; color: #fff; text-decoration: underline; padding: 0; cursor: pointer; }

.conteudo { padding: 28px 32px 64px; min-width: 0; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
h1 { font: 600 28px/1.15 var(--fonte); margin: 0; letter-spacing: -.01em; }
h2 { font: 600 19px/1.25 var(--fonte); margin: 0 0 12px; }
h3 { font: 600 16px/1.3 var(--fonte); margin: 0 0 8px; }
.subtitulo { color: var(--tinta-2); margin: 4px 0 0; }

.bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 18px; }
.bloco > h2:first-child { margin-top: 0; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grade-2 > *, .grade-3 > * { min-width: 0; }
td.num, td.data { white-space: nowrap; }
.linha-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Números do mês (faixa do painel) ---------- */
.faixa-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); margin-bottom: 18px; }
.faixa-numeros > div { padding: 14px 18px; border-right: 1px solid var(--linha); }
.faixa-numeros > div:last-child { border-right: 0; }
.faixa-numeros .grande { font: 600 30px/1.1 var(--fonte-num); font-variant-numeric: tabular-nums; display: block; }
.faixa-numeros .rotulo { color: var(--tinta-2); font-size: 13px; }

/* ---------- Placa Mercosul ---------- */
.placa {
  display: inline-flex; flex-direction: column; align-items: stretch;
  border: 2px solid #1A1A1A; border-radius: 4px; background: #fff; overflow: hidden;
  min-width: 92px; line-height: 1; vertical-align: middle;
}
.placa .faixa { background: #003399; color: #fff; font: 600 7px/1 var(--fonte); letter-spacing: .12em; text-align: center; padding: 2px 0 1px; }
.placa .letras { font: 600 20px/1 var(--fonte-num); letter-spacing: .06em; text-align: center; padding: 3px 7px 3px; color: #111; }
.placa.pequena { min-width: 74px; }
.placa.pequena .letras { font-size: 16px; padding: 2px 6px; }
.placa.grande { min-width: 150px; border-width: 3px; }
.placa.grande .faixa { font-size: 10px; padding: 3px 0 2px; }
.placa.grande .letras { font-size: 34px; padding: 5px 12px; }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--tinta-2); font-size: 13px; padding: 8px 10px; border-bottom: 1px solid var(--linha-forte); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: #F6F8FA; }
tfoot td { font-weight: 600; border-top: 1px solid var(--linha-forte); }

/* ---------- Situação ---------- */
.selo { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo.erro { background: var(--erro-fundo); color: var(--erro); }
.selo.neutro { background: #E8ECF1; color: var(--tinta-2); }
.positivo { color: var(--ok); }
.negativo { color: var(--erro); }
.destaque-vermelho { color: var(--erro); font-weight: 600; }

/* ---------- Formulários ---------- */
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }
.campo label, .campo .rotulo { font-size: 13px; color: var(--tinta-2); font-weight: 500; }
.campo .ajuda { font-size: 12.5px; color: var(--tinta-2); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=month], select, textarea {
  width: 100%; border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 8px 10px; background: #fff; min-height: 38px;
}
input:focus, select:focus, textarea:focus { border-color: var(--marca); outline: 2px solid color-mix(in srgb, var(--marca) 25%, transparent); outline-offset: 0; }
input.num { text-align: right; }
.cabecalho > input[type], .cabecalho > select, .linha-acoes > select, .linha-acoes > input[type] { width: auto; max-width: 100%; }
.linha-acoes > select.largo { min-width: 220px; }
.interruptor { display: flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--marca); }

.botao {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  border: 1px solid var(--marca); background: var(--marca); color: #fff;
  border-radius: var(--raio); padding: 8px 14px; font-weight: 600; cursor: pointer; min-height: 38px; text-decoration: none;
}
.botao:hover { filter: brightness(1.08); }
.botao:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.botao.secundario { background: #fff; color: var(--marca); }
.botao.perigo { background: #fff; color: var(--erro); border-color: var(--erro); }
.botao.leve { background: none; border-color: transparent; color: var(--marca); padding: 6px 8px; min-height: 0; }
.botao.pequeno { padding: 4px 10px; min-height: 30px; font-size: 13.5px; }

/* ---------- Fechamento: etapas e livro de conferência ---------- */
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); margin-bottom: 18px; }
.etapa { padding: 14px 18px; border-right: 1px solid var(--linha); display: flex; flex-direction: column; gap: 8px; }
.etapa:last-child { border-right: 0; }
.etapa .ordem { font: 600 13px var(--fonte); color: var(--tinta-2); }
.etapa.feita .ordem { color: var(--ok); }
.etapa input[type=file] { font-size: 13px; max-width: 100%; }

.livro td.status { text-align: center; width: 1%; }
.livro td.acoes .linha-acoes { flex-wrap: nowrap; gap: 2px; }
.livro .lado-cartao { color: var(--tinta-2); }
.livro tr.pendente td { background: #FFF8F7; }
.livro tr.pendente td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
.livro tr.baixa-confianca td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.livro .descricao { font-size: 13px; color: var(--tinta-2); display: block; }
.resolucao { font-size: 12.5px; color: var(--ok); display: block; }

.resumo-fechamento { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; }
.resumo-fechamento dt { color: var(--tinta-2); }
.resumo-fechamento dd { margin: 0; text-align: right; font-family: var(--fonte-num); font-weight: 500; font-variant-numeric: tabular-nums; }
.resumo-fechamento .total { font-weight: 600; color: var(--tinta); border-top: 1px solid var(--linha); padding-top: 6px; }

/* ---------- Avisos, modal, toast ---------- */
.aviso { border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; border: 1px solid; }
.aviso.alerta { background: var(--alerta-fundo); border-color: #E9CF97; color: #5E3E0A; }
.aviso.erro { background: var(--erro-fundo); border-color: #EDB3AF; color: #6E1916; }
.aviso.ok { background: var(--ok-fundo); border-color: #A9D8BF; color: #0F4A2F; }
.aviso p { margin: 2px 0; }

.vazio { text-align: center; padding: 34px 16px; color: var(--tinta-2); }
.vazio .botao { margin-top: 10px; }

dialog.modal { border: 0; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(20, 30, 45, .28); }
dialog.modal::backdrop { background: rgba(20, 30, 45, .45); }
.modal-cabeca { padding: 16px 20px 0; }
.modal-corpo { padding: 12px 20px 4px; max-height: 70vh; overflow-y: auto; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }

.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--tinta); color: #fff; border-radius: var(--raio); padding: 10px 14px; max-width: 360px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.toast.erro { background: var(--erro); }

/* ---------- Login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--fundo); }
.cartao-login { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 28px; width: min(400px, 100%); }
.cartao-login .logos { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.cartao-login .logos img { height: 34px; max-width: 30%; object-fit: contain; }
.cartao-login form { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Gráfico de média ---------- */
.barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; padding-top: 18px; }
.barras .coluna { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.barras .barra { width: 100%; max-width: 34px; background: var(--marca); border-radius: 3px 3px 0 0; min-height: 2px; }
.barras .barra.alerta { background: var(--erro); }
.barras .barra.sem { background: var(--linha); }
.barras .rot { font-size: 12px; color: var(--tinta-2); }
.barras .val { font: 500 12.5px var(--fonte-num); }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lateral { position: sticky; top: 0; height: auto; z-index: 20; flex-direction: row; align-items: center; padding: 8px 16px; gap: 10px; }
  .logo-empresa { height: 40px; padding: 4px 8px; width: 92px; flex: none; }
  .logo-empresa img { max-height: 30px; }
  .seletor-empresa { flex: 1; min-width: 0; }
  .menu { position: fixed; bottom: 0; left: 0; right: 0; flex-direction: row; background: var(--marca); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; z-index: 30; overflow-x: auto; scrollbar-width: none; }
  .menu a { padding: 8px 8px; font-size: 13px; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .menu a[aria-current="page"] { border-bottom-color: var(--acento); }
  .usuario-rodape { margin: 0; font-size: 12px; white-space: nowrap; }
  .usuario-rodape .nome { display: none; }
  .conteudo { padding: 18px 16px 96px; }
  h1 { font-size: 23px; }
  .grade-2, .grade-3, .etapas { grid-template-columns: 1fr; }
  .etapa { border-right: 0; border-bottom: 1px solid var(--linha); }
  .etapa:last-child { border-bottom: 0; }
  .faixa-numeros > div { border-right: 0; border-bottom: 1px solid var(--linha); }
  .esconde-celular { display: none; }
  .livro thead { display: none; }
  .livro tr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; padding: 10px 6px; border-bottom: 1px solid var(--linha); }
  .livro td { border: 0; padding: 0; }
  .livro td.status, .livro td.lado-cartao, .livro td.acoes { grid-column: 1 / -1; text-align: left; width: auto; }
  .livro td.esconde-celular { display: none; }
  .livro tr.pendente td:first-child { box-shadow: none; }
  .livro tr.pendente { box-shadow: inset 3px 0 0 var(--erro); background: #FFF8F7; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
::placeholder { color: #9AA4B1; opacity: 1; }

/* ---------- Tela do motorista (celular) ---------- */
.app-motorista { max-width: 520px; margin: 0 auto; padding: 0 14px 40px; }
.mot-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; position: sticky; top: 0; background: var(--fundo); z-index: 5; }
.mot-topo strong { font-size: 18px; display: block; }
.mot-saldo { font-size: 13px; color: var(--tinta-2); }
.mot-titulo { font-size: 16px; margin: 20px 2px 10px; }
.mot-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mot-atalho {
  min-height: 64px; border: 1px solid var(--linha-forte); background: var(--superficie); border-radius: 10px;
  font: 600 15px/1.15 var(--fonte); color: var(--marca); cursor: pointer; padding: 6px; hyphens: manual;
}
.mot-atalho:active { background: color-mix(in srgb, var(--marca) 10%, white); }
.mot-atalho:last-child { color: var(--tinta-2); }
.mot-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mot-item { width: 100%; display: flex; justify-content: space-between; gap: 10px; text-align: left; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 12px; cursor: pointer; }
.mot-item-tipo { font-weight: 600; }
.mot-item-valor { text-align: right; white-space: nowrap; }
.mot-principal { width: 100%; min-height: 50px; font-size: 16px; margin-top: 14px; }
select.mot-grande, input.mot-grande { min-height: 48px; font-size: 16px; }
.mot-valor { min-height: 56px; font: 600 28px var(--fonte-num); }
.mot-form { display: flex; flex-direction: column; gap: 12px; }
.mot-form .mot-principal { margin-top: 0; }
.mot-foto { color: var(--tinta-2); font-size: 13px; }
.mot-foto img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 6px; border: 1px solid var(--linha); }
.mot-viagem .resumo-fechamento { margin-top: 12px; }
@media (max-width: 600px) {
  dialog.modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; max-height: 92vh; }
  .modal-corpo { max-height: 68vh; }
  .modal-acoes { flex-wrap: wrap; }
  .modal-acoes .botao { flex: 1 1 auto; min-height: 46px; }
}
.mot-item .descricao { display: block; font-size: 12.5px; font-weight: 400; color: var(--tinta-2); margin-top: 2px; }