/* Frete — entrega própria (15/10/2026). Tela própria, feita para o celular
   do motorista primeiro (botões grandes, uma coluna) e para o relatório do
   admin no computador (lista + mapa lado a lado). Claro e escuro pelos
   tokens abaixo (html[data-tema], mesma chave do painel). Sem
   backdrop-filter: fundo opaco, texto sempre nítido no WebView do Android. */

:root{
  --fr-bg:#E9EEF5; --fr-card:#FFFFFF; --fr-card-2:#F3F6FA; --fr-line:#D5DEEA;
  --fr-text:#14213A; --fr-text-2:#3F5170; --fr-muted:#73839E;
  --fr-navy:#0F2D5C; --fr-blue:#2F6FED; --fr-ok:#1E9E5A; --fr-ok-ink:#167A45;
  --fr-fim:#D64545; --fr-gold:#F2B705; --fr-warn:#B5611F;
  --fr-shadow:0 1px 2px rgba(20,30,50,0.06), 0 12px 28px -16px rgba(20,30,50,0.30);
  --fr-r:16px;
}
html[data-tema="escuro"]{
  --fr-bg:#0F1621; --fr-card:#18212E; --fr-card-2:#1F2A39; --fr-line:#2B394C;
  --fr-text:#E9EEF6; --fr-text-2:#C2CEDF; --fr-muted:#8A9AB3;
  --fr-ok-ink:#5FD39A; --fr-warn:#E59A5C;
  --fr-shadow:0 1px 2px rgba(0,0,0,0.3), 0 14px 30px -16px rgba(0,0,0,0.7);
}
*{ box-sizing:border-box; }
html, body{ margin:0; background:var(--fr-bg); color:var(--fr-text); font-family:Inter, system-ui, sans-serif; }
.hidden{ display:none !important; }
body.auth-locked .fr-app{ display:none; }
.fr-app{ min-height:100vh; }

/* Topo */
.fr-top{
  position:sticky; top:0; z-index:500; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(90deg, var(--fr-navy), #173E7C); color:#fff;
  box-shadow:0 6px 18px -10px rgba(0,0,0,0.5);
}
.fr-voltar{ color:#fff; text-decoration:none; font-size:30px; line-height:1; padding:0 6px 4px 0; }
.fr-marca{ min-width:0; flex:1; }
.fr-titulo{ font:700 20px/1.1 Oswald, sans-serif; letter-spacing:0.04em; text-transform:uppercase; }
.fr-sub{ font-size:12.5px; opacity:0.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-versao{ font:600 11px 'JetBrains Mono', monospace; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.25); border-radius:999px; padding:3px 8px; }
.fr-icone, .fr-sair{
  height:38px; min-width:38px; border-radius:10px; border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.12); color:#fff; font:700 13px Inter, sans-serif; cursor:pointer; padding:0 12px;
}
.fr-icone{ padding:0; font-size:16px; }
@media (max-width:520px){ .fr-versao{ display:none; } }

/* Abas (admin) */
.fr-abas{ display:flex; gap:6px; padding:12px 16px 0; max-width:1500px; margin:0 auto; overflow-x:auto; }
.fr-abas button{
  border:1px solid var(--fr-line); background:var(--fr-card); color:var(--fr-text-2);
  font:700 13.5px Inter, sans-serif; padding:9px 16px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.fr-abas button[aria-selected="true"]{ background:var(--fr-navy); color:#fff; border-color:var(--fr-navy); }
html[data-tema="escuro"] .fr-abas button[aria-selected="true"]{ background:var(--fr-blue); border-color:var(--fr-blue); }

.fr-main{ padding:14px 16px 40px; max-width:1500px; margin:0 auto; }
.fr-card{
  background:var(--fr-card); border:1px solid var(--fr-line); border-radius:var(--fr-r);
  box-shadow:var(--fr-shadow); padding:18px; max-width:560px; margin:0 auto;
}
.fr-h2{ margin:0 0 12px; font:700 18px Oswald, sans-serif; letter-spacing:0.04em; text-transform:uppercase; color:var(--fr-text); }
.fr-rot{ display:block; margin:14px 0 6px; font-size:13px; font-weight:700; color:var(--fr-text-2); }
.fr-obrig{ color:var(--fr-fim); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; margin-left:4px; }
.fr-campo{
  width:100%; height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--fr-line);
  background:var(--fr-card-2); color:var(--fr-text); font:600 16px Inter, sans-serif;
}
.fr-campo:focus{ outline:none; border-color:var(--fr-blue); box-shadow:0 0 0 3px rgba(47,111,237,0.2); }
.fr-km{ font:700 22px 'JetBrains Mono', monospace; letter-spacing:0.04em; }
.fr-foto{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:120px; border:2px dashed var(--fr-line); border-radius:14px; cursor:pointer;
  background:var(--fr-card-2); padding:10px; text-align:center;
}
.fr-foto img{ max-width:100%; max-height:260px; border-radius:10px; }
.fr-foto-cta{ font-weight:700; color:var(--fr-blue); font-size:15px; }
.fr-gps{ margin:12px 0 0; font-size:13px; color:var(--fr-ok-ink); }
.fr-gps.fr-gps-ruim{ color:var(--fr-warn); }
/* Indicador de gravação em segundo plano (app Android): verde = grava com a
   tela apagada; âmbar = só com a tela aberta. Cores dos tokens, vale nos 2 temas. */
.fr-bg{ margin:10px 0 0; padding:9px 12px; border-radius:12px; font-size:14px; font-weight:700; }
.fr-bg-ok{ background:rgba(30,158,90,0.14); color:var(--fr-ok-ink); }
.fr-bg-ruim{ background:rgba(229,154,92,0.16); color:var(--fr-warn); }
.fr-bg-dica{ margin:8px 0 0; font-size:13px; line-height:1.45; color:var(--fr-text-2); }
#freteBgConfig{ margin-top:10px; }
.fr-erro{ color:var(--fr-fim); font-size:13.5px; font-weight:600; margin:10px 0 0; min-height:0; }
.fr-erro:empty{ display:none; }
.fr-ok{ margin:0 0 10px; padding:10px 12px; border-radius:12px; background:rgba(30,158,90,0.12); color:var(--fr-ok-ink); font-weight:700; }
.fr-aviso{ margin:10px 0 14px; font-size:13px; color:var(--fr-text-2); background:var(--fr-card-2); border-radius:10px; padding:10px 12px; }
.fr-carregando, .fr-vazio{ text-align:center; color:var(--fr-muted); font-size:14px; padding:14px; }

.fr-btn{
  width:100%; height:54px; margin-top:16px; border:0; border-radius:14px; cursor:pointer;
  font:800 16px Inter, sans-serif; letter-spacing:0.02em; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 18px -10px rgba(0,0,0,0.5);
}
.fr-btn span{ position:relative; z-index:1; }
.fr-btn:disabled{ opacity:0.45; cursor:default; }
.fr-btn-ok{ background:linear-gradient(160deg, #27B46A, #178149); }
.fr-btn-fim{ background:linear-gradient(160deg, #E25B5B, #B23535); }
.fr-btn-sec{ background:var(--fr-card-2); color:var(--fr-text); border:1px solid var(--fr-line); box-shadow:none; }
.fr-btn-p{ width:auto; height:42px; margin:0; padding:0 16px; font-size:14px; }
.fr-btn.is-armado{ background:var(--fr-fim); color:#fff; border-color:var(--fr-fim); }
.fr-linha-btns{ display:flex; gap:10px; }
.fr-linha-btns .fr-btn-sec{ flex:0 0 34%; }

/* Andamento */
.fr-andamento-top{ display:flex; align-items:center; gap:10px; }
.fr-andamento-top .fr-h2{ margin:0; }
.fr-pulso{ width:12px; height:12px; border-radius:50%; background:var(--fr-ok); display:inline-block; flex:none; animation:frPulso 1.6s ease-in-out infinite; }
@keyframes frPulso{ 0%,100%{ box-shadow:0 0 0 0 rgba(30,158,90,0.6); } 50%{ box-shadow:0 0 0 8px rgba(30,158,90,0); } }
@media (prefers-reduced-motion:reduce){ .fr-pulso{ animation:none; } }
.fr-placa{
  display:inline-block; margin:14px 0 4px; padding:6px 14px; border:2px solid #111; border-radius:8px;
  background:#fff; color:#111; font:800 26px 'JetBrains Mono', monospace; letter-spacing:0.08em;
}
.fr-placa-p{ font-size:14px; padding:2px 8px; margin:0; border-width:1.5px; border-radius:6px; }
.fr-dados{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 0; }
.fr-dados div{ background:var(--fr-card-2); border-radius:12px; padding:10px 12px; }
.fr-dados dt{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--fr-muted); }
.fr-dados dd{ margin:4px 0 0; font:700 16px Inter, sans-serif; color:var(--fr-text); }
.fr-fechar{ border-top:1px solid var(--fr-line); margin-top:16px; padding-top:4px; }

/* Relatório */
.fr-filtro{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px; font-size:13px; color:var(--fr-text-2); font-weight:600; }
.fr-filtro label{ display:inline-flex; align-items:center; gap:6px; }
.fr-data{ width:auto; height:42px; font-size:14px; color-scheme:light; }
.fr-filtro-sel{ width:auto; max-width:220px; height:42px; font-size:14px; padding:0 10px; }
@media (max-width:640px){ .fr-filtro-sel{ max-width:none; flex:1 1 45%; } }
html[data-tema="escuro"] .fr-data{ color-scheme:dark; }
.fr-relatorio{ display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:14px; align-items:start; }
@media (max-width:900px){ .fr-relatorio{ grid-template-columns:1fr; } }
.fr-lista{ display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 190px); overflow:auto; padding:2px; }
@media (max-width:900px){ .fr-lista{ max-height:none; } }
.fr-item{
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px; text-align:left; cursor:pointer;
  background:var(--fr-card); border:1px solid var(--fr-line); border-radius:14px; padding:12px; color:var(--fr-text);
  font:500 13px Inter, sans-serif; box-shadow:var(--fr-shadow);
}
.fr-item.is-sel{ border-color:var(--fr-blue); box-shadow:0 0 0 2px var(--fr-blue); }
.fr-item-placa{ font:800 15px 'JetBrains Mono', monospace; letter-spacing:0.06em; }
.fr-item-status{ justify-self:end; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--fr-muted); }
.fr-item-aberta .fr-item-status{ color:var(--fr-ok-ink); }
.fr-item-status .fr-pulso{ width:9px; height:9px; }
.fr-item-mot{ grid-column:1 / -1; font-weight:700; color:var(--fr-text-2); }
.fr-item-quando, .fr-item-km{ grid-column:1 / -1; color:var(--fr-muted); }
.fr-item-km b{ color:var(--fr-text); }
.fr-detalhe{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.fr-mapa{
  height:min(62vh, 560px); min-height:320px; border-radius:var(--fr-r); overflow:hidden;
  border:1px solid var(--fr-line); background:var(--fr-card-2); box-shadow:var(--fr-shadow);
}
.fr-mapa-vazio{ height:100%; display:grid; place-items:center; color:var(--fr-muted); font-size:14px; }
.fr-det-info{ background:var(--fr-card); border:1px solid var(--fr-line); border-radius:var(--fr-r); box-shadow:var(--fr-shadow); padding:14px; }
.fr-det-info:empty{ display:none; }
.fr-det-top{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-weight:700; }
.fr-det-status{ margin-left:auto; font-size:12px; padding:4px 10px; border-radius:999px; background:var(--fr-card-2); color:var(--fr-muted); }
.fr-det-status.is-aberta{ background:rgba(30,158,90,0.14); color:var(--fr-ok-ink); }
.fr-dados-det{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:640px){ .fr-dados-det{ grid-template-columns:1fr 1fr; } }
.fr-alerta{ color:var(--fr-warn); font-weight:700; }
.fr-thumbs{ display:flex; gap:10px; margin-top:12px; }
.fr-thumb{
  position:relative; width:150px; height:110px; border-radius:12px; overflow:hidden; border:1px solid var(--fr-line);
  background:var(--fr-card-2); padding:0; cursor:zoom-in; color:var(--fr-muted); display:grid; place-items:center; font-size:13px;
}
.fr-thumb img{ width:100%; height:100%; object-fit:cover; }
.fr-thumb span{ position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:999px; }
.fr-thumb-vazia{ cursor:default; }
.fr-zoom{ position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.85); display:grid; place-items:center; padding:16px; cursor:zoom-out; }
.fr-zoom img{ max-width:100%; max-height:100%; border-radius:12px; }

/* Mapa: veículo com a placa e marcas de início/fim */
.fr-veiculo{ background:none; border:0; }
.fr-veiculo-wrap{ display:flex; align-items:center; gap:4px; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.fr-veiculo-placa{
  background:#fff; color:#111; border:2px solid #111; border-radius:4px; padding:1px 5px;
  font:800 12px 'JetBrains Mono', monospace; letter-spacing:0.05em; white-space:nowrap;
}
/* Alfinete de início/fim: etiqueta acima, ponta encostando no lugar exato. */
.fr-pino-wrap{ background:none; border:0; }
.fr-pino{ position:absolute; left:0; bottom:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; pointer-events:auto; filter:drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
.fr-pino-rot{ display:flex; flex-direction:column; align-items:center; padding:5px 10px; border-radius:10px; color:#fff; font:800 12px Inter, sans-serif; letter-spacing:0.04em; white-space:nowrap; border:2px solid #fff; }
.fr-pino-rot small{ font:600 11px Inter, sans-serif; opacity:0.95; letter-spacing:0; }
.fr-pino-ponta{ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; margin-top:-1px; }
.fr-pino-ini .fr-pino-rot{ background:#1E9E5A; }
.fr-pino-ini .fr-pino-ponta{ border-top:10px solid #1E9E5A; }
.fr-pino-fim .fr-pino-rot{ background:#D64545; }
.fr-pino-fim .fr-pino-ponta{ border-top:10px solid #D64545; }

/* Resumo do período (15/10/2026) */
.fr-resumo:empty{ display:none; }
.fr-resumo{ background:var(--fr-card); border:1px solid var(--fr-line); border-radius:var(--fr-r); box-shadow:var(--fr-shadow); padding:14px; margin:0 0 14px; }
.fr-resumo-totais{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
@media (max-width:640px){ .fr-resumo-totais{ grid-template-columns:1fr 1fr; } }
.fr-resumo-totais div{ background:var(--fr-card-2); border-radius:12px; padding:10px 12px; }
.fr-resumo-totais span{ display:block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--fr-muted); }
.fr-resumo-totais b{ display:block; margin-top:4px; font:800 20px Inter, sans-serif; color:var(--fr-text); }
.fr-resumo-grade{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:900px){ .fr-resumo-grade{ grid-template-columns:1fr; } }
.fr-resumo-tit{ font:700 13px Oswald, sans-serif; letter-spacing:0.05em; text-transform:uppercase; color:var(--fr-text-2); margin:0 0 6px; }
.fr-resumo-tab{ width:100%; border-collapse:collapse; font-size:13.5px; }
.fr-resumo-tab th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--fr-muted); padding:6px 8px; border-bottom:1px solid var(--fr-line); }
.fr-resumo-tab td{ padding:7px 8px; border-bottom:1px solid var(--fr-line); color:var(--fr-text); }
.fr-resumo-tab tr:last-child td{ border-bottom:0; }
.fr-pdf-carga{ margin-top:12px; }

/* Caminhões */
.fr-cam-form{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){ .fr-cam-form{ grid-template-columns:160px 1fr auto; } }
.fr-cam-lista{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.fr-cam{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--fr-card-2); }
.fr-cam-desc{ flex:1; min-width:0; color:var(--fr-text-2); font-size:14px; }
.fr-card:has(.fr-cam-form){ max-width:760px; }
/* Freteiros (15/10/2026) */
.fr-card:has(.fr-mot-form){ max-width:860px; }
.fr-dica{ margin:-4px 0 12px; color:var(--fr-text-2); font-size:13.5px; }
.fr-mot-form{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:640px){ .fr-mot-form{ grid-template-columns:1.4fr 1fr 1fr auto; } .fr-mot-form.is-editando{ grid-template-columns:1.3fr 1fr 1fr auto auto; } }
.fr-senha-wrap{ position:relative; min-width:0; }
.fr-senha-wrap .fr-campo{ width:100%; padding-right:46px; }
.fr-olho{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:10px; background:transparent; color:var(--fr-text-2); cursor:pointer; }
.fr-olho:hover, .fr-olho:focus-visible{ background:var(--fr-card-2); color:var(--fr-text); outline:none; }
.fr-olho[aria-pressed="false"] .fr-olho-risco{ display:none; }
.fr-mot-form + .fr-erro + .fr-ok{ margin:12px 0 0; }
.fr-mot-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fr-mot-nome{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fr-mot-aberta{ color:var(--fr-ok-ink); font-weight:700; }