:root {
  --azul: #0b4687;
  --azul-esc: #0b2e5c;
  --verde: #17968c;
  --fundo: #eef2f6;
  --borda: #d3dbe4;
  --texto: #1b2633;
  --suave: #5f6f80;
  --erro: #c62828;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Abertura 3D (4s) ---------- */
#abertura {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  background: radial-gradient(ellipse at 50% 40%, #12305a 0%, #070d18 70%);
  perspective: 900px;
  overflow: hidden;
  animation: sumir .5s ease-in 3.5s forwards;
}
.palco { transform-style: preserve-3d; animation: flutuar 4s ease-in-out; }
.cubo {
  position: relative; width: 132px; height: 132px;
  transform-style: preserve-3d;
  animation: girar 2s cubic-bezier(.2,.8,.2,1) both;
}
.cubo .face, .cubo .camada {
  position: absolute; inset: 0; border-radius: 28px;
}
.cubo .face {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ffffff, #e3eaf2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.cubo .face img { width: 76%; height: 76%; }
.cubo .camada { background: #8fa3ba; }
.cubo .camada.fundo { background: #5d7392; }
.reflexo {
  width: 150px; height: 18px; margin: 18px auto 0;
  background: radial-gradient(ellipse, rgba(23,150,140,.45), transparent 70%);
  filter: blur(4px);
  animation: aparecer .8s ease-out .9s both;
}
.titulo3d {
  text-align: center; transform-style: preserve-3d;
  animation: levantar 1.1s cubic-bezier(.2,.8,.2,1) 1.1s both;
}
.titulo3d .elo {
  display: block; font: 900 64px/1 Georgia, "Times New Roman", serif; letter-spacing: 4px;
  color: #fff;
  text-shadow:
    0 1px 0 #c9d6e6, 0 2px 0 #a9bdd6, 0 3px 0 #8aa3c4, 0 4px 0 #6b89b2,
    0 5px 0 #4f70a0, 0 6px 0 #355a8d, 0 7px 0 #1f477a, 0 8px 0 #0b2e5c,
    0 12px 18px rgba(0,0,0,.6);
}
.titulo3d .mot {
  display: block; margin-top: 12px;
  font: 700 20px/1 system-ui, sans-serif; letter-spacing: 10px; padding-left: 10px;
  color: var(--verde);
  text-shadow: 0 1px 0 #0f6e67, 0 2px 0 #0b5550, 0 4px 10px rgba(0,0,0,.6);
}
.brilho {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: varrer 1s ease-in-out 2.3s forwards;
}
@keyframes girar {
  0%   { transform: rotateY(-200deg) rotateX(30deg) scale(.3); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: rotateY(0) rotateX(0) scale(1); }
}
@keyframes flutuar {
  0%, 50% { transform: translateY(0) rotateY(0); }
  75% { transform: translateY(-6px) rotateY(12deg); }
  100% { transform: translateY(0) rotateY(0); }
}
@keyframes levantar {
  from { transform: rotateX(-90deg) translateY(30px); opacity: 0; }
  to   { transform: rotateX(0) translateY(0); opacity: 1; }
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes varrer { to { transform: translateX(100%); } }
@keyframes sumir { to { opacity: 0; visibility: hidden; } }

/* Modo leve (celular fraco): logo parado + nome, some em 1 s; sem 3D, sombras pesadas nem desfoque */
.leve #abertura { background: #0b1a30; perspective: none; animation: sumir .3s ease-in .7s forwards; }
.leve .palco, .leve .titulo3d, .leve .cubo { animation: none; transform: none; transform-style: flat; }
.leve .cubo { width: 110px; height: 110px; border-radius: 24px; background: #fff url(../logo-icone.png) center / 76% no-repeat; }
.leve .reflexo, .leve .brilho { display: none; }
.leve .titulo3d .elo { text-shadow: none; font-size: 56px; }
.leve .titulo3d .mot { text-shadow: none; }
.leve .pulso { animation: none; }

/* ---------- App ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: #fff; border-bottom: 3px solid var(--verde);
}
header img { width: 38px; height: 38px; }
header h1 { margin: 0; font-size: 18px; color: var(--azul-esc); }
header p { margin: 0; font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }

main { max-width: 640px; margin: 0 auto; padding: 14px 12px 40px; }

.card {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 14px; margin-bottom: 14px;
}
.card h2 {
  margin: -14px -14px 12px; padding: 10px 14px;
  font-size: 15px; color: #fff; background: var(--azul);
  border-radius: 11px 11px 0 0;
  display: flex; justify-content: space-between; align-items: center;
}
.card h3 { margin: 14px 0 8px; font-size: 13px; color: var(--azul); text-transform: uppercase; letter-spacing: .5px; }

.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade > * { min-width: 0; }
.grade .inteiro { grid-column: 1 / -1; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--suave); margin-bottom: 4px; }
input[type=text], input[type=date], input[type=time], input[type=number], textarea {
  width: 100%; padding: 11px 10px; font: inherit; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--verde); outline-offset: -1px; border-color: transparent; }
textarea { min-height: 60px; resize: vertical; }
.invalido { border-color: var(--erro) !important; background: #fff5f5 !important; }

.btn-agora {
  display: block; width: 100%; margin-top: 6px; padding: 11px 6px;
  border: 0; border-radius: 8px; background: var(--azul); color: #fff;
  font: 600 13px system-ui, sans-serif; cursor: pointer;
}
.btn-agora:active { transform: scale(.97); }
.btn-agora.salvo, .btn-agora:disabled { background: #1b7f4b; }
.btn-agora:disabled { cursor: default; transform: none; }
.travado { background: #eef1f5 !important; color: var(--texto); }

.ocorrencias { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ocorrencias label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 9px; border: 1px solid var(--borda); border-radius: 8px;
  font-weight: 500; color: var(--texto); font-size: 13px; cursor: pointer;
}
.ocorrencias input { width: 18px; height: 18px; accent-color: var(--verde); }

.assinatura { position: relative; }
.assinatura canvas {
  display: block; width: 100%; height: 150px;
  border: 1px dashed #9fb0c2; border-radius: 8px; background: #fbfcfd;
  touch-action: none;
}
.assinatura .linha {
  position: absolute; left: 16px; right: 16px; bottom: 30px;
  border-bottom: 1px solid #c3cfdb; pointer-events: none;
}
.assinatura button {
  position: absolute; top: 6px; right: 6px;
  padding: 4px 10px; font-size: 12px; border: 1px solid var(--borda);
  border-radius: 6px; background: #fff; color: var(--suave); cursor: pointer;
}

.btn {
  display: block; width: 100%; padding: 15px; border: 0; border-radius: 10px;
  font: 700 16px system-ui, sans-serif; cursor: pointer;
}
.btn-add { background: #fff; color: var(--azul); border: 2px dashed var(--azul); margin-bottom: 14px; }
.btn-enviar { background: var(--verde); color: #fff; }
.btn-enviar:disabled { opacity: .6; }
.btn-remover {
  background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer;
}

.fila {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 12px 14px; border-radius: 10px; background: #fff4e0; border: 1px solid #f0c987;
  color: #7a4b00; font-size: 14px; font-weight: 600;
}
.fila span { flex: 1; }
.fila button {
  flex: none; padding: 8px 12px; border: 0; border-radius: 8px;
  background: #c77d0a; color: #fff; font-weight: 700; cursor: pointer;
}
.dica { margin: 0 0 12px; font-size: 14px; color: var(--suave); }
.btn-voltar { background: transparent; color: var(--suave); margin-top: 8px; }
.perfil {
  padding: 10px 12px; background: #f1f7f6; border-left: 4px solid var(--verde);
  border-radius: 6px; font-size: 14px; line-height: 1.5;
}
.perfil b { color: var(--azul-esc); }
.perfil-linha { margin-bottom: 12px; font-size: 13px; }

.data-envio { font-size: 15px; font-weight: 600; padding: 11px 10px; background: #f4f7fa; border-radius: 8px; }

#aviso {
  position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 50;
  max-width: 600px; margin: 0 auto; padding: 14px 16px; border-radius: 10px;
  color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  transform: translateY(150%); transition: transform .25s;
}
#aviso.ver { transform: none; }
#aviso.ok { background: #1b7f4b; }
#aviso.erro { background: var(--erro); }

#sucesso { display: none; text-align: center; padding: 40px 20px; }
#sucesso .check {
  width: 74px; height: 74px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--verde); color: #fff; font-size: 40px; line-height: 74px;
}
#sucesso strong { display: block; font-size: 20px; color: var(--azul-esc); }

@media (max-width: 380px) { .ocorrencias { grid-template-columns: 1fr; } }

.maiusculas { text-transform: uppercase; }
.espaco-acima { margin-top: 16px; }
.espaco-acima-p { margin-top: 10px; }
.texto-suave { color: var(--suave); }
.link-privacidade { text-align: center; font-size: 13px; margin: 14px 0 0; }
.link-privacidade a { color: var(--suave); }

/* ---------- Seleção de unidade (cadastro) ---------- */
select {
  width: 100%; min-height: 48px; padding: 11px 10px; font: inherit; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; background: #fff;
}
select:focus { outline: 2px solid var(--verde); outline-offset: -1px; border-color: transparent; }
.aviso-caixa {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  background: #fff4e0; border: 1px solid #f0c987; color: #7a4b00; font-size: 14px; font-weight: 600;
}
.btn-claro { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--suave); margin-bottom: 4px; }
.centro { text-align: center; }

/* ---------- Abas ---------- */
.abas {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 14px;
}
.aba {
  min-height: 56px; padding: 10px 8px; border: 2px solid var(--azul); border-radius: 12px;
  background: #fff; color: var(--azul); font: 700 15px/1.2 system-ui, sans-serif; cursor: pointer;
}
.aba[aria-selected="true"] { background: var(--azul); color: #fff; box-shadow: 0 3px 10px rgba(11,70,135,.25); }
.aba { position: relative; padding: 10px 4px; font-size: 14px; }
.contador {
  position: absolute; top: -8px; right: 2px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: var(--erro); color: #fff; border: 2px solid #fff;
  font: 700 13px/20px system-ui, sans-serif; text-align: center;
}

/* ---------- Agenda ---------- */
#agenda .card h2 { justify-content: flex-start; }
.bloco-pendentes { border: 2px solid #e0a100; }
.bloco-pendentes h2 { background: #c77d0a; }
.pedido {
  margin: 0 0 12px; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; background: #fff;
  border-left: 5px solid var(--azul);
}
.pedido:last-child { margin-bottom: 0; }
.pedido-pendente { border-left-color: #c77d0a; background: #fffaf0; }
.pedido-aceita { border-left-color: #1b7f4b; }
.pedido-recusada, .pedido-cancelada { border-left-color: var(--erro); }
.pedido-concluida { border-left-color: var(--suave); }
.pedido-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.pedido-dia { font-weight: 700; color: var(--azul-esc); }
.pedido-hora { font-size: 18px; font-weight: 800; color: var(--azul-esc); }
.pedido-rota { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--texto); }
.pedido-linha { margin: 0 0 4px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.pedido-linha b { color: var(--suave); }
.pedido-contato, .pedido-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.btn-contato { display: flex; align-items: center; justify-content: center; padding: 10px 6px; font-size: 15px; text-decoration: none; text-align: center; overflow-wrap: anywhere; }
.btn-whats { background: #1b7f4b; color: #fff; }
.btn-aceitar { background: #1b7f4b; color: #fff; font-size: 18px; min-height: 56px; }
.btn-recusar { background: var(--erro); color: #fff; font-size: 18px; min-height: 56px; }
.btn-aceitar:disabled, .btn-recusar:disabled { opacity: .6; }
.pedido-recusa { margin-top: 10px; padding: 10px; border-radius: 8px; background: #fff5f5; }
.pedido-espera {
  margin: 0 0 8px; padding: 8px 12px; border-radius: 8px;
  background: #fff4e0; border: 1px solid #f0c987; color: #7a4b00; font-weight: 700; font-size: 14px;
}
.pedido-conflito {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #fff4e0; border: 1px solid #f0c987; color: #7a4b00; font-weight: 700;
}
.card .dia-agenda {
  margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--borda);
  font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--azul-esc);
}
.card .dia-agenda:first-of-type { margin-top: 0; }
.selo { padding: 2px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; background: var(--suave); }
.selo-recusada, .selo-cancelada { background: var(--erro); }
.selo-concluida { background: #1b7f4b; }
.historico summary { padding: 4px 0; font-weight: 700; color: var(--azul); cursor: pointer; font-size: 16px; min-height: 32px; }
.historico[open] summary { margin-bottom: 10px; }
.selo-aceita { background: #1b7f4b; }
.selo-pendente { background: #c77d0a; }
.espaco-abaixo { margin-bottom: 12px; }

/* Calendário (estilo agenda de celular) */
.cal {
  padding: 16px 12px 14px; border: 0; border-radius: 18px;
  box-shadow: 0 6px 22px rgba(11, 46, 92, .10), 0 1px 3px rgba(11, 46, 92, .08);
}
.cal-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cal-titulo { margin: 0; flex: 1; text-align: center; font-size: 19px; font-weight: 800; color: var(--azul-esc); }
.cal-seta {
  flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: #eef3f9; color: var(--azul-esc); font: 700 28px/1 system-ui, sans-serif; cursor: pointer;
}
.cal-seta:active { transform: scale(.94); background: #dfe8f3; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-semana span {
  padding: 4px 0 6px; text-align: center; font-size: 12px; font-weight: 700;
  color: var(--suave); text-transform: uppercase; letter-spacing: .3px;
}
.cal-dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 48px; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 14px;
  background: transparent; color: var(--texto); font: 600 16px/1 system-ui, sans-serif; cursor: pointer;
  transition: background .15s;
}
.cal-dia:hover { background: #f1f5fa; }
.cal-passado { color: #98a5b3; }
.cal-dia[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--azul); color: var(--azul); font-weight: 800; }
.cal-dia[aria-pressed="true"] {
  background: var(--azul-esc); color: #fff; font-weight: 800;
  box-shadow: 0 4px 12px rgba(11, 46, 92, .35);
}
.cal-dia:focus-visible, .cal-seta:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.cal-pontos { display: flex; gap: 3px; height: 7px; }
.ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.ponto-aceita { background: #1b9e5a; }
.ponto-pendente { background: #e8890c; }
.ponto-concluida { background: #98a5b3; }
.cal-dia[aria-pressed="true"] .ponto { box-shadow: 0 0 0 1.5px #fff; }
.cal-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 12px; font-size: 13px; color: var(--suave); }
.cal-leg { display: inline-flex; align-items: center; gap: 6px; }
.cal-leg .ponto { width: 10px; height: 10px; }
.cal-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.btn-cal { padding: 10px; font-size: 15px; }
.btn-cal:disabled { opacity: .45; cursor: default; }

/* Linha do tempo do dia */
.bloco-dia { border-radius: 18px; box-shadow: 0 6px 22px rgba(11, 46, 92, .08); }
.bloco-dia h2 { border-radius: 17px 17px 0 0; background: var(--azul-esc); }
.tl-vazio { margin: 6px 0; padding: 18px 10px; text-align: center; font-size: 16px; color: var(--suave); background: #f6f8fb; border-radius: 12px; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
.tl-hora { padding-top: 12px; text-align: right; font-size: 17px; font-weight: 800; color: var(--azul-esc); }
.tl-hora small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--suave); }
.tl-corpo { position: relative; padding: 0 0 14px 16px; border-left: 3px solid #dbe4ef; }
.tl-item:last-child .tl-corpo { padding-bottom: 0; }
.tl-corpo::before {
  content: ''; position: absolute; left: -10px; top: 14px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--cor-tl, var(--azul)); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cor-tl, var(--azul));
}
.tl-aceita { --cor-tl: #1b9e5a; }
.tl-pendente { --cor-tl: #e8890c; }
.tl-concluida { --cor-tl: #98a5b3; }
.tl-corpo .pedido { margin: 0; border-radius: 14px; box-shadow: 0 3px 12px rgba(11, 46, 92, .08); }
.tl-aceita .pedido { background: #f3fbf6; }
.tl-concluida .pedido { background: #f6f8fa; }
@media (max-width: 380px) {
  .tl-item { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
  .tl-hora { font-size: 15px; }
  .tl-corpo { padding-left: 12px; }
}

/* Localização compartilhada com quem pediu */
.faixa-local { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.faixa-local p { margin: 0; }
.faixa-ok { background: #e3f5ea; color: #145c37; border: 1px solid #a6d9bb; }
.faixa-espera { background: #eef3f9; color: var(--azul-esc); border: 1px solid #cfdbe8; }
.faixa-erro { background: #fdecec; color: #8f1b1b; border: 1px solid #f1b3b3; }
.faixa-erro .faixa-dica { margin-top: 4px; font-size: 14px; font-weight: 500; }
.btn-gps { margin-top: 10px; background: var(--erro); color: #fff; }
.compartilhando {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: 14px; background: #1b7f4b; color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(27, 127, 75, .3);
}
.pulso { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: pulso 1.6s ease-out infinite; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
#agenda-lista > .faixa-erro { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } .cal-dia { transition: none; } }

/* ---------- Controle de combustível ---------- */
.opcoes-comb { display: grid; grid-template-columns: 1fr; gap: 8px; }
.opcoes-comb label {
  display: flex; align-items: center; gap: 12px; margin: 0; min-height: 52px;
  padding: 10px 14px; border: 2px solid var(--borda); border-radius: 10px;
  font-size: 16px; font-weight: 600; color: var(--texto); cursor: pointer;
}
.opcoes-comb label:has(input:checked) { border-color: var(--verde); background: #e9f6f4; }
.opcoes-comb input { width: 22px; height: 22px; accent-color: var(--verde); }
.opcoes-comb.invalido { border-radius: 10px; outline: 2px solid var(--erro); outline-offset: 3px; }
.consumo {
  display: block; padding: 11px 10px; border-radius: 8px; background: #f4f7fa;
  font-size: 16px; font-weight: 700; color: var(--azul-esc);
}
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.foto-slot {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1px dashed #9fb0c2; border-radius: 10px; background: #fbfcfd;
}
.foto-slot.invalido { border: 2px solid var(--erro); }
.foto-mini { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: #000; }
.btn-foto { min-height: 48px; padding: 10px 6px; font-size: 14px; background: var(--azul); color: #fff; }
.btn-foto.refazer { background: #fff; color: var(--azul); border: 2px solid var(--azul); }
.hora input[type=time] + .btn-agora { margin-top: 6px; }
.btn-agora { min-height: 48px; }
.btn { min-height: 48px; }
@media (max-width: 380px) { .fotos { grid-template-columns: 1fr; } }

/* ---------- Câmera em tela cheia ---------- */
body.sem-rolagem-camera, body.bloqueado { overflow: hidden; }
.camera {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; background: #000; color: #fff;
}
.camera-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(0,0,0,.6);
}
.camera-titulo { font-size: 16px; }
.camera-cancelar {
  min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 8px;
  background: transparent; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer;
}
.camera-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.camera-area video, .camera-previa { width: 100%; height: 100%; object-fit: contain; }
.camera-erro {
  margin: 20px; padding: 16px; border-radius: 12px; background: #fff; color: var(--texto);
  font-size: 16px; line-height: 1.5;
}
.camera-acoes {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: rgba(0,0,0,.6);
}
.camera-acoes .btn { max-width: 420px; }
.camera-capturar {
  width: 78px; height: 78px; border-radius: 50%; cursor: pointer;
  border: 5px solid #fff; background: #fff; box-shadow: inset 0 0 0 4px #000;
}
.camera-capturar:active { transform: scale(.94); }

/* ---------- Bloqueio de segunda-feira (hodômetro) ---------- */
.bloqueio {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--fundo); padding: 16px; padding-top: max(16px, env(safe-area-inset-top));
}
.bloqueio-caixa {
  max-width: 520px; margin: 20px auto; padding: 18px; background: #fff;
  border: 1px solid var(--borda); border-top: 6px solid var(--verde); border-radius: 14px;
}
.bloqueio-caixa h2 { margin: 0 0 8px; font-size: 20px; color: var(--azul-esc); }
.bloqueio-caixa .btn + .btn, .foto-grande + .btn { margin-top: 10px; }
.foto-grande { display: block; width: 100%; max-height: 50vh; object-fit: contain; border-radius: 10px; background: #000; margin-bottom: 4px; }
#aviso { z-index: 90; }

/* Fotos extras do abastecimento */
.fotos-extras:empty { display: none; }
.btn-add-extra { margin-top: 10px; }
.opcional-extra { text-transform: none; font-weight: 400; color: #5b6b7d; letter-spacing: 0; }

/* Interruptor: localização com a tela bloqueada (só no app Android) */
.local-fundo { border: 2px solid var(--verde); }
.interruptor { display: flex; align-items: center; gap: 14px; min-height: 56px; margin: 0 0 6px; cursor: pointer;
  font-size: 17px; font-weight: 700; color: var(--azul-esc); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-trilho { flex: none; position: relative; width: 64px; height: 36px; border-radius: 18px;
  background: #b7c2ce; transition: background .2s; }
.interruptor-bola { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.interruptor input:checked + .interruptor-trilho { background: var(--verde); }
.interruptor input:checked + .interruptor-trilho .interruptor-bola { transform: translateX(28px); }
.interruptor input:focus-visible + .interruptor-trilho { outline: 3px solid var(--azul); outline-offset: 2px; }
.interruptor-rotulo { line-height: 1.3; }
.local-fundo-estado { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--suave); }
.local-fundo-estado.ligado { color: #145c37; }
@media (prefers-reduced-motion: reduce) { .interruptor-trilho, .interruptor-bola { transition: none; } }

/* ---------- Sem internet (faixa no topo) ---------- */
header { flex-wrap: wrap; }
header .offline {
  flex-basis: 100%; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: #fff4e0; border: 1px solid #f0c987; color: #7a4b00;
  font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
}