/* Battallog · design system das páginas do painel (index, clientes, motoristas,
   operacoes, fechamento) — edição MAXIMALISTA: cenário fotográfico noturno fixo
   (porto/estrada) sob véu navy, auroras animadas, folhas brancas flutuando com
   listra de marca, vidro fosco no topo e no painel da conta, botões com brilho.
   Cada página mantém no próprio <style> apenas o layout dela (.wrap) e o que é
   exclusivo (kanban, régua de faixas, blocos de impressão).
   Não usar em apresentacao-proposta.html (variáveis próprias). */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

:root{
  --blue-950:#061834;
  --blue-900:#0a2a5e; --blue-800:#123772; --blue-700:#1c4f96; --blue-600:#2360b8;
  --blue-100:#e8f0fb;
  --orange:#f47c20; --orange-600:#df620c; --orange-100:#fdf0e3;
  --ink:#16202e; --slate:#5b6779; --line:#e6ebf3; --line-strong:#d3dce8;
  --ok:#1a7f4e; --warn:#a06a00; --bad:#c0392b;
  --bg:#081c3e; --surface:#ffffff; --surface-2:#f4f6fa;
  --radius:20px; --radius-sm:10px;
  --font-display:'Sora','Manrope',system-ui,sans-serif;
  --listra:linear-gradient(90deg, var(--blue-600) 0%, var(--blue-900) 45%, var(--orange) 100%);
  --shadow-card:0 2px 6px rgba(3,10,26,.25), 0 28px 64px -24px rgba(3,10,26,.6);
  --ring:0 0 0 3px rgba(35,96,184,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  --z-sticky:10; --z-toast:20;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:92px}
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:16px; line-height:1.55;
}
/* cenário: foto noturna sob véu navy (fixa — o conteúdo desliza sobre ela).
   Cada página pode trocar a foto sobrepondo --foto no próprio <style>
   (ex.: :root{--foto:url("assets/fundo-frota.png")}) */
:root{--foto:url("fundo-noite.png")}
/* variações por tela via classe no <body> — declaradas AQUI para a url resolver
   sempre contra assets/ (url() relativa dentro de var() no <style> da página
   quebra: o navegador resolve contra este arquivo e vira assets/assets/...) */
body.foto-frota{--foto:url("fundo-frota.png")}
body.foto-patio{--foto:url("fundo-patio.png")}
body.foto-rodovia{--foto:url("fundo-rodovia.png")}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(8,25,55,.5) 0%, rgba(8,24,52,.32) 45%, rgba(6,18,40,.58) 100%),
    var(--foto) center / cover no-repeat var(--bg);
}
/* auroras da marca em movimento lento */
body::after{
  content:""; position:fixed; inset:-22%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 30% at 80% 10%, rgba(244,124,32,.2), transparent 70%),
    radial-gradient(44% 36% at 8% 82%, rgba(35,96,184,.3), transparent 70%);
  animation:bt-aurora 16s ease-in-out infinite alternate;
}
@keyframes bt-aurora{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to{transform:translate3d(2%,1.6%,0) scale(1.06)}
}
::selection{background:rgba(244,124,32,.35)}

/* ============ topo (vidro escuro) ============ */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(7,22,48,.66);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(150,180,230,.16);
  padding:12px clamp(16px,4vw,48px);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--listra);
}
.topbar img{height:40px; width:auto; background:#fff; padding:5px 10px; border-radius:10px}
.topbar .titulo{font-family:var(--font-display); font-size:1rem; font-weight:700;
  color:#fff; letter-spacing:-.01em}
.topbar .titulo small{display:block; font-family:'Manrope',system-ui,sans-serif;
  font-weight:500; color:#9db4dd; font-size:.76rem}
.topbar .orc{
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  color:#fff; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:8px 15px;
}
.abas{display:flex; align-items:center; gap:4px; margin-left:auto; flex-wrap:wrap}
.abas a{
  display:flex; align-items:center; min-height:38px;
  text-decoration:none; font-weight:600; font-size:.88rem; color:#b9c9e8;
  padding:7px 14px; border-radius:999px;
  transition:color .15s var(--ease), background .15s var(--ease);
}
.abas a:hover{color:#fff; background:rgba(255,255,255,.1)}
.abas a[aria-current=page]{
  color:var(--blue-950); font-weight:800;
  background:linear-gradient(135deg,#ffb35c 0%, var(--orange) 60%, #e96f12 100%);
  box-shadow:0 8px 20px -8px rgba(244,124,32,.7);
}

/* ============ folhas flutuantes ============ */
.folha, .cartao, .lista, .memoria{
  position:relative;
  background:var(--surface);
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
/* listra de marca no topo de cada folha */
.folha::before, .cartao::before, .lista::before, .memoria::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:var(--listra); z-index:1;
}
.folha, .cartao, .memoria{overflow:hidden}
.lista{overflow:hidden}

/* rede de segurança: fieldset FORA de uma .folha ainda vira folha própria
   (página nova que esquecer a classe não fica com texto solto no escuro) */
fieldset{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:30px 34px 34px;
}

/* a coluna de formulário é UMA superfície contínua:
   seções emendadas por divisórias, sem cards soltos */
.folha{display:flex; flex-direction:column; gap:0}
div.folha, form.folha{gap:0}
.folha > fieldset{
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:34px 34px 36px;
}
.folha > fieldset + fieldset{border-top:1px solid var(--line)}
.folha > fieldset:nth-child(even){background:linear-gradient(180deg,#fbfcfe, #fff)}
/* float tira a legenda da "área de borda" do fieldset: ela passa a respeitar o
   padding do card em vez de colar no topo */
legend{
  float:left; width:100%;
  font-family:var(--font-display); font-size:1.08rem; font-weight:700;
  color:var(--blue-900); letter-spacing:-.01em;
  display:flex; align-items:center; padding:0 0 22px; margin:0;
}
legend + *{clear:both}
legend::before{
  content:""; display:inline-block; width:22px; height:6px; border-radius:4px;
  margin-right:12px; flex:none;
  background:linear-gradient(90deg,#ffb35c, var(--orange-600));
}

/* ---- seção que abre e fecha ----------------------------------------------
   O tracinho laranja já era a marca da seção; agora ele é a aba: o título
   inteiro vira botão e a seta à direita diz o estado. O corpo é embrulhado
   por JS (bt-secoes) para não precisar mexer no HTML de cada fieldset. */
legend .fs-toggle{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;
  flex:1; display:flex; align-items:center; gap:10px; cursor:pointer;
  text-align:left; min-height:32px;
}
legend .fs-toggle:hover{color:var(--blue-600)}
legend .fs-toggle:focus-visible{outline:2px solid var(--blue-600); outline-offset:6px; border-radius:6px}
.fs-chev{
  margin-left:auto; width:9px; height:9px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);        /* aberta: aponta para baixo */
  transition:transform .18s var(--ease);
}
legend .fs-toggle[aria-expanded="false"] .fs-chev{
  transform:rotate(-45deg) translate(-2px,-2px);       /* fechada: aponta para cima */
}
/* fechada: o card encolhe até virar só o título */
fieldset.fs-fechado{padding-bottom:0}
fieldset.fs-fechado legend{padding-bottom:22px}
.fs-corpo[hidden]{display:none}

/* ---- conta inversa dentro do painel escuro -------------------------------
   O painel é azul-escuro; a caixa usa fundo translúcido e a cor do nível na
   borda esquerda, em vez dos pastéis claros que ela tinha no formulário. */
.alvo-box{
  margin-top:12px; border-radius:10px; padding:12px 14px;
  font-size:.85rem; line-height:1.6; color:#eaf1fb;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-left:4px solid var(--ok);
}
.alvo-box b{color:#fff}
.alvo-box[data-nivel=warn]{border-left-color:#ffb35c}
.alvo-box[data-nivel=bad]{border-left-color:#ff8f80; background:rgba(255,120,100,.14)}

/* selos de contexto (uso interno × sai na proposta) */
.tag{
  display:inline-block; font-size:.62rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-left:10px; vertical-align:2px;
}
.tag-cli{background:var(--blue-100); color:var(--blue-700)}
.tag-int{background:var(--orange-100); color:#9a4008}
.painel .tag{background:rgba(255,255,255,.16); color:#fff}

/* ============ campos de formulário ============ */
.campos{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:20px 22px; margin-top:18px}
.campo{display:flex; flex-direction:column; gap:7px}
.campo.largo{grid-column:1/-1}
label{font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.45}
label .dica{font-weight:500; color:var(--slate); font-size:.78rem}
label .obr{color:var(--orange-600)}

input[type=text], input[type=number], input[type=date], input[type=month],
input[type=search], input[type=email], input[type=tel], select, textarea{
  font:inherit; font-size:.95rem; color:var(--ink); width:100%;
  background:#fbfcfe;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:10px 13px; min-height:45px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
textarea{min-height:92px; resize:vertical}
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230a2a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
  padding-right:38px; cursor:pointer;
}
input:hover, select:hover, textarea:hover{border-color:#a9b9d0}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--blue-600); box-shadow:var(--ring); background:#fff;
}
button:focus-visible, a:focus-visible, summary:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
}
input::placeholder, textarea::placeholder{color:#8b95a5}

/* validação */
.campo.erro input{border-color:var(--bad); box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.campo .msg-erro{display:none; font-size:.82rem; font-weight:600; color:var(--bad); line-height:1.45}
.campo.erro .msg-erro{display:block}
.msg-erro button{font:inherit; font-size:.82rem; font-weight:800; color:var(--blue-800);
  background:none; border:0; cursor:pointer; text-decoration:underline; padding:0}
.campo .msg-ok{display:none; font-size:.82rem; font-weight:600; color:var(--ok)}
.campo.valido .msg-ok{display:block}

/* ============ botões (com varredura de brilho) ============ */
.btn, .btn-pdf{position:relative; overflow:hidden}
.btn::after, .btn-pdf::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease); pointer-events:none;
}
.btn:hover::after, .btn-pdf:hover::after{left:125%}

.btn{
  font:inherit; font-size:.98rem; font-weight:800; cursor:pointer;
  min-height:48px; border:0; border-radius:12px; padding:12px 26px;
  color:#fff;
  background:linear-gradient(135deg,#1c4f96 0%, var(--blue-900) 55%, #082250 100%);
  box-shadow:0 14px 30px -10px rgba(10,42,94,.7), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .15s var(--ease), filter .18s var(--ease);
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.08)}
.btn:active{transform:translateY(0) scale(.99)}
.btn.sec{background:#fff; color:var(--blue-800); border:1px solid var(--line-strong);
  box-shadow:0 2px 6px rgba(16,24,40,.08)}
.btn.sec:hover{background:var(--surface-2); filter:none}
.btn.sec::after{display:none}

.acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.aviso{margin-top:18px; font-size:.8rem; color:var(--slate); line-height:1.6}

/* botão fantasma de "adicionar" */
.add-rota, .btn-add{
  width:fit-content; cursor:pointer; font:inherit; font-size:.85rem; font-weight:700;
  color:var(--blue-800); background:var(--blue-100);
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:10px 16px; min-height:40px;
  transition:background .15s var(--ease), box-shadow .15s var(--ease);
}
.add-rota{margin-top:10px}
.add-rota:hover, .btn-add:hover{background:#d9e7fa; box-shadow:0 4px 12px -6px rgba(35,96,184,.4)}

/* cartões de rotas salvas */
.rotas{display:flex; gap:8px; flex-wrap:wrap; min-height:20px}
.rota-card{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font:inherit; font-size:.86rem; font-weight:700; color:var(--blue-800);
  border:1px solid var(--line-strong); border-radius:999px;
  background:#fff; padding:8px 14px; min-height:38px;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.rota-card:hover{border-color:var(--blue-600); transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(10,42,94,.4)}
.rota-card .x{color:var(--slate); font-weight:700; padding:0 2px}
.rota-card .x:hover{color:var(--bad)}

/* ============ segmento (toggle) ============ */
.segmento{
  display:inline-flex; gap:4px; width:fit-content;
  padding:4px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px;
}
.segmento button{
  font:inherit; font-weight:700; font-size:.88rem; cursor:pointer;
  border:0; border-radius:9px; background:transparent; color:var(--slate);
  padding:9px 18px; min-height:38px;
  transition:background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.segmento button:not([aria-pressed=true]):hover{color:var(--ink); background:rgba(255,255,255,.8)}
.segmento button[aria-pressed=true]{
  background:linear-gradient(135deg,#1c4f96, var(--blue-900)); color:#fff; font-weight:800;
  box-shadow:0 6px 14px -6px rgba(10,42,94,.6);
}

/* ============ chips (margem / complexidade) ============ */
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chips button{
  font:inherit; font-weight:800; cursor:pointer; min-height:46px; text-align:left;
  border:1px solid var(--line-strong); border-radius:13px;
  background:#fff; color:var(--ink); padding:10px 20px;
  transition:transform .15s var(--ease), border-color .15s var(--ease),
             background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.chips button small{display:block; font-weight:600; font-size:.7rem; color:var(--slate);
  transition:color .15s var(--ease)}
.chips button:hover{transform:translateY(-2px); border-color:var(--blue-600);
  box-shadow:0 10px 22px -10px rgba(10,42,94,.45)}
.chips button:active{transform:translateY(0) scale(.98)}
.chips button[aria-pressed=true]{
  background:linear-gradient(135deg,#1c4f96, var(--blue-900)); border-color:transparent; color:#fff;
  box-shadow:0 12px 26px -10px rgba(10,42,94,.7);
}
.chips button[aria-pressed=true] small{color:#b7c8e8}

/* ============ card com número editável (mesma família dos chips) ============ */
.card-num{
  display:inline-flex; flex-direction:column; gap:3px; min-height:46px;
  border:1px solid var(--line-strong); border-radius:13px; background:#fff;
  padding:10px 18px; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.card-num:focus-within{border-color:var(--blue-600);
  box-shadow:0 10px 22px -10px rgba(10,42,94,.45)}
.card-num .card-num-lab{font-weight:800; font-size:.95rem; color:var(--ink)}
.card-num .card-num-row{display:flex; align-items:baseline; gap:1px}
.card-num .card-num-row input{
  font:inherit; font-weight:800; font-size:1.55rem; color:var(--blue-900);
  border:0; background:transparent; padding:0; width:2.6em; min-height:0;
  text-align:left; -moz-appearance:textfield;
}
.card-num .card-num-row input:focus{outline:none}
.card-num .card-num-row input::-webkit-outer-spin-button,
.card-num .card-num-row input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.card-num .card-num-suf{font-weight:800; font-size:1.2rem; color:var(--blue-900)}
.card-num small{font-weight:600; font-size:.7rem; color:var(--slate)}

/* ============ tabelas internas ============ */
table.mem, table.ops, table.viagens{width:100%; border-collapse:collapse; font-size:.88rem}
.mem th, .ops th, .viagens th{
  text-align:left; color:var(--slate); font-size:.72rem; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  padding:9px 10px; border-bottom:2px solid var(--line-strong);
}
.mem th.num{text-align:right}
.mem td, .ops td, .viagens td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.mem td.num, .ops td.num, .viagens td.num{
  text-align:right; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.mem td.formula{color:var(--slate); font-size:.84rem}
.mem tr.grupo td{background:var(--blue-100); font-weight:800; color:var(--blue-900); font-size:.78rem}
.mem tr.destaque td{font-weight:800; color:var(--blue-900); border-bottom:2px solid var(--blue-900)}
.ops tr.linha{cursor:pointer; transition:background .12s var(--ease)}
.ops tr.linha:hover{background:var(--surface-2)}
.ops .empresa, .ops .nome{font-weight:700; color:var(--blue-900)}
.ops .men{color:var(--slate); font-size:.82rem}
.ops button.rm, .viagens button.rm{
  font:inherit; cursor:pointer; border:1px solid var(--line-strong); background:#fff;
  border-radius:8px; padding:4px 10px; color:var(--slate); min-height:32px; min-width:32px;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.ops button.rm:hover, .viagens button.rm:hover{color:var(--bad); border-color:var(--bad)}
.viagens button.abrir{
  font:inherit; font-weight:700; cursor:pointer; border:1px solid var(--line-strong);
  background:#fff; color:var(--blue-800); border-radius:8px; padding:4px 14px; min-height:32px;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.viagens button.abrir:hover{background:var(--blue-900); border-color:var(--blue-900); color:#fff}
.vazio{color:var(--slate); font-size:.9rem; padding:14px 4px; line-height:1.6}

/* ============ painel escuro (vidro sobre o cenário) ============ */
.painel{
  position:sticky; top:92px; z-index:var(--z-sticky);
  color:#fff; overflow:hidden;
  background:
    radial-gradient(280px 280px at calc(100% + 70px) -70px, rgba(244,124,32,.32), transparent 72%),
    linear-gradient(160deg, rgba(18,55,114,.82) 0%, rgba(10,42,94,.86) 45%, rgba(7,25,58,.92) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(150,185,240,.35);
  border-radius:var(--radius); padding:28px 28px 26px;
  box-shadow:0 32px 70px -24px rgba(2,8,20,.8), inset 0 1px 0 rgba(255,255,255,.18);
}
.painel h2{font-family:var(--font-display); font-size:1.02rem; font-weight:700;
  letter-spacing:-.01em; margin-bottom:14px}
.linhas{display:flex; flex-direction:column}
/* escopado ao painel: as tabelas também usam class="linha" nas <tr> */
.painel .linha{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 0; font-size:.91rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.painel .linha .rotulo{color:#b9c9e8}
.painel .linha .valor{font-weight:700; font-variant-numeric:tabular-nums; transition:opacity .2s}
.painel .linha.sub{border-bottom:1px solid rgba(255,255,255,.38)}
.painel .linha.sub .rotulo, .painel .linha.sub .valor{color:#fff; font-weight:800}
.total{margin-top:18px}
.total .rotulo{font-size:.75rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#b9c9e8}
.total .valor-final{
  font-family:var(--font-display); letter-spacing:-.02em;
  font-size:clamp(2rem,4vw,2.6rem); font-weight:800; line-height:1.2;
  color:var(--orange); font-variant-numeric:tabular-nums;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .total .valor-final{
    background:linear-gradient(90deg,#ffb35c, var(--orange), #ff8c33, #ffb35c);
    background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:bt-brilho 7s linear infinite;
  }
}
@keyframes bt-brilho{to{background-position:250% 0}}
.semaforo{
  margin-top:14px; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:11px; padding:10px 14px; font-size:.86rem;
}
.semaforo .luz{width:11px; height:11px; border-radius:50%; flex:none;
  transition:background .25s, box-shadow .25s}
.semaforo[data-nivel=ok] .luz{background:#3ddc84; box-shadow:0 0 12px 2px rgba(61,220,132,.6)}
.semaforo[data-nivel=warn] .luz{background:#ffc247; box-shadow:0 0 12px 2px rgba(255,194,71,.6)}
.semaforo[data-nivel=bad] .luz{background:#ff6b57; box-shadow:0 0 12px 2px rgba(255,107,87,.6);
  animation:bt-pulso 1.6s ease-in-out infinite}
@keyframes bt-pulso{50%{box-shadow:0 0 4px 0 rgba(255,107,87,.3)}}
.premissas, .nota, .nota-fiscal{margin-top:14px; font-size:.74rem; line-height:1.6; color:#9fb4d9}

/* botões do painel escuro */
.btn-pdf{
  margin-top:20px; width:100%; min-height:54px; cursor:pointer;
  font:inherit; font-size:1rem; font-weight:800; color:var(--blue-950);
  background:linear-gradient(135deg,#ffb35c 0%, var(--orange) 55%, #e96f12 100%);
  border:0; border-radius:13px;
  box-shadow:0 16px 36px -10px rgba(244,124,32,.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s var(--ease), filter .18s var(--ease);
}
.btn-pdf:hover{transform:translateY(-2px); filter:brightness(1.06)}
.btn-pdf:active{transform:translateY(0) scale(.99)}
.btn-salvar, .btn-csv{
  margin-top:10px; width:100%; min-height:48px; cursor:pointer;
  font:inherit; font-size:.93rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35); border-radius:13px;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.btn-salvar:hover, .btn-csv:hover{border-color:#fff; background:rgba(255,255,255,.14)}

/* ============ cartão de cadastro (clientes/motoristas) ============ */
.cartao-cab{padding:28px 34px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(120deg, var(--blue-100) 0%, #fff 55%)}
.cartao-cab h1{
  font-family:var(--font-display); font-size:1.5rem; font-weight:800;
  letter-spacing:-.02em; line-height:1.25; text-wrap:balance;
  color:var(--blue-900);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cartao-cab h1{
    background:linear-gradient(100deg, var(--blue-900) 30%, var(--blue-600) 75%, var(--orange) 110%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
.cartao-cab p{font-size:.88rem; color:var(--slate); margin-top:6px}
.cartao-cab .editando{display:none; margin-top:10px; font-size:.84rem; font-weight:700;
  color:var(--orange-600); background:var(--orange-100); border-radius:9px; padding:8px 12px}
.cartao-corpo{padding:30px 34px 34px}
.grupo{margin-bottom:34px}
.grupo:last-of-type{margin-bottom:0}
.grupo h2{
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  color:var(--blue-900); letter-spacing:-.01em;
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.grupo h2::before{content:""; width:22px; height:6px; border-radius:4px; flex:none;
  background:linear-gradient(90deg,#ffb35c, var(--orange-600))}
.grupo h2::after{content:""; flex:1; height:1px; background:var(--line)}

/* ============ lista (cadastros) ============ */
.lista{padding:26px 30px 30px}
.lista h2{font-family:var(--font-display); font-size:1.02rem; font-weight:700;
  color:var(--blue-900); letter-spacing:-.01em; margin-bottom:14px}
.lista h2 span{color:var(--slate); font-weight:600}
.busca{margin-bottom:14px}

/* ============ details recolhível (memória de cálculo etc.) ============ */
.memoria summary{
  cursor:pointer; padding:20px 28px; min-height:44px;
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  color:var(--blue-900); letter-spacing:-.01em;
  list-style:none; display:flex; align-items:center; gap:10px;
}
.memoria summary::-webkit-details-marker{display:none}
.memoria summary::after{content:"+"; margin-left:auto; font-size:1.4rem;
  font-family:'Manrope',system-ui,sans-serif; font-weight:400; color:var(--slate)}
.memoria[open] summary{border-bottom:1px solid var(--line)}
.memoria[open] summary::after{content:"−"}
.memoria .conteudo{padding:20px 28px 28px; overflow-x:auto}

/* impressão: o cenário e os efeitos NUNCA vão para o PDF */
@media print{
  body{background:#fff}
  body::before, body::after{display:none !important}
  .topbar{display:none !important}
}

/* telas estreitas */
@media (max-width:640px){
  .folha > fieldset{padding:24px 20px 28px}
  .cartao-cab{padding:24px 20px 20px}
  .cartao-corpo{padding:24px 20px 28px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
  body::after, .total .valor-final, .semaforo .luz{animation:none !important}
  .topbar{position:static}
}
