/* ============================================================================
   APP CLIENTE COFEMEL — folha de estilo
   Design alinhado com a Calculadora AIR China (mesmos tokens, botões,
   cards com filete DSV, chips/KPI com ícone, toggles e modais).
   Todos os nomes de classe originais foram preservados.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- paleta DSV (igual à calculadora AIR) --- */
  --dsv:#192862; --dsv-dark:#0D1A45; --dsv-mid:#213278; --dsv-light:#2E45A0;
  --accent:#F5A623; --sky:#3DA5E0; --sky-deep:#1E7BB8; --white:#FFFFFF;
  --bg:#F4F6FB; --card:#FFFFFF; --border:#DDE3F0; --border-strong:#B8C4E0;
  --text:#1A2340; --text-muted:#5A6A8A; --text-light:#8B9CC0;
  --warn:#B4690E; --warn-bg:#FFF6E9; --warn-bd:#F4D9A8;
  --ok:#178048; --ok-light:#22a35a;
  --danger:#D93A31; --danger-dark:#B4231E; --danger-bg:#FDECEA; --danger-bd:#F3B9B4;
  --mono:'IBM Plex Mono','Consolas',monospace;
  --sans:'Inter','Segoe UI',system-ui,sans-serif;
  --shadow:0 1px 3px rgba(25,40,98,.06),0 4px 12px rgba(25,40,98,.08);
  --shadow-lg:0 4px 16px rgba(25,40,98,.12),0 12px 32px rgba(25,40,98,.08);

  /* --- aliases antigos (usados no HTML/JS existente) --- */
  --azul:var(--dsv); --azul2:var(--dsv-light); --claro:var(--bg); --borda:var(--border);
  --texto:var(--text); --cinza:var(--text-muted); --verde:var(--ok);
  --ambar:var(--warn); --vermelho:var(--danger); --fundo:var(--bg); --line:var(--border);
}

body { font-family:var(--sans); background:var(--bg); color:var(--text); min-height:100vh; }

/* ---- Topo ---- */
header.top {
  background:linear-gradient(135deg,var(--dsv-dark) 0%,var(--dsv) 50%,var(--dsv-mid) 100%);
  color:#fff; padding:0 22px; min-height:64px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 20px rgba(13,26,69,.3);
  position:sticky; top:0; z-index:100; overflow:hidden;
}
header.top::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 88% -40%,rgba(61,165,224,.25),transparent 55%),
             repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.04) 26px 27px);
}
header.top .marca {
  font-weight:800; font-size:1.05rem; letter-spacing:.06em;
  position:relative; z-index:1; line-height:1.15;
}
header.top .marca small {
  display:block; font-weight:500; font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:3px;
}
header.top .perfil {
  display:flex; align-items:center; gap:14px; font-size:.82rem;
  position:relative; z-index:1;
}
/* As ações vivem numa barra só, encaixada — quatro botões soltos com emoji de
   tamanhos diferentes liam-se como uma fila de autocolantes. */
header.top .nav-acoes {
  display:flex; align-items:center; gap:2px; padding:3px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
}
header.top .nav-b {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; color:rgba(255,255,255,.82);
  padding:7px 13px; border-radius:9px; cursor:pointer; font-family:var(--sans);
  font-size:.76rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  transition:background .15s, color .15s;
}
header.top .nav-b i { display:block; width:16px; height:16px; opacity:.85; }
header.top .nav-b i svg { width:100%; height:100%; display:block; }
header.top .nav-b:hover { background:rgba(255,255,255,.18); color:#fff; }
header.top .nav-b:hover i { opacity:1; }
header.top .nav-b:focus-visible { outline:2px solid var(--sky); outline-offset:-2px; }

/* Quem está lá dentro: iniciais num disco + nome. */
header.top .nav-user { display:flex; align-items:center; gap:9px; padding-left:4px; }
header.top .nav-av {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--sky-deep));
  font-size:.7rem; font-weight:800; letter-spacing:.02em; color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}
header.top .nav-nome { font-size:.76rem; font-weight:600; color:rgba(255,255,255,.9); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Sair é só o ícone: ocupava o lugar de uma ação de trabalho e não é uma. */
header.top .nav-sair {
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85); border-radius:9px; cursor:pointer; padding:7px;
  transition:background .15s, color .15s, border-color .15s;
}
header.top .nav-sair svg { width:100%; height:100%; display:block; }
header.top .nav-sair:hover { background:rgba(233,90,90,.85); border-color:transparent; color:#fff; }

/* Ecrãs estreitos: os rótulos saem e ficam só os ícones — a barra continua a
   caber sem partir para uma segunda linha por cima do conteúdo. */
@media (max-width:1000px) {
  header.top .nav-b span, header.top .nav-nome { display:none; }
  header.top .nav-b { padding:7px 10px; }
}

/* Botões antigos noutros sítios do topo (mantidos por compatibilidade). */
header.top button:not(.nav-b):not(.nav-sair) {
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2);
  padding:7px 14px; border-radius:8px; cursor:pointer; font-family:var(--sans);
  font-size:.76rem; font-weight:700; letter-spacing:.04em;
  transition:background .15s, border-color .15s;
}
header.top button:not(.nav-b):not(.nav-sair):hover { background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.35); }

main { max-width:1100px; margin:26px auto; padding:0 18px 4rem; }
h2.sec {
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  color:var(--dsv); margin:22px 0 14px; padding-bottom:.7rem;
  border-bottom:2px solid var(--dsv); display:inline-block;
}

/* ---- Cartões de contentor ---- */
/* Cartoes da MESMA linha com a MESMA altura (`stretch`, que ja e' o default).
   Tentou-se o contrario — `align-items:start`, cada cartao com a sua altura —
   e ficava pior: as bases desalinhadas faziam a grelha parecer partida.
   O que estragava o `stretch` nao era o esticar, era o VAZIO que ficava: o
   cartao curto acabava nos botoes a meio da caixa e o resto era branco morto.
   Resolve-se em baixo, no `.card`: o cartao e' uma coluna flex e o bloco de
   accoes leva `margin-top:auto`, portanto o espaco a mais cai ANTES dos botoes
   e estes assentam sempre no fundo. As bases alinham e o branco passa a ser
   respiro, nao um buraco. */
/* `align-items:start` — com cartoes dobraveis, um fechado ao lado de um aberto
   nao pode ser esticado ate' a' altura do aberto: ficaria com meio cartao de
   branco por dentro. Cada um tem a altura do que mostra. */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; align-items:start; }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .12s, box-shadow .15s, border-color .15s;
  /* Coluna flex + `height:100%`: o cartao ocupa a altura toda que a linha do
     grid lhe da, e o `.acoes` (com margin-top:auto) empurra os botoes para o
     fundo. E' isto que faz o cartao curto igualar os outros sem ficar com um
     bloco de branco por baixo dos botoes. */
  display:flex; flex-direction:column; height:100%;
}
.card::before {
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--dsv),var(--dsv-light),var(--sky));
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }
.card .num { font-weight:800; font-size:1.06rem; letter-spacing:.02em; color:var(--text); }
.card .meta { color:var(--text-light); font-size:.78rem; margin:4px 0 12px; }

/* ---- Cartao dobravel -------------------------------------------------------
   Fechado mostra so' o essencial (numero, estado, onde esta', e a localizacao
   ao vivo se vier a caminho). O resto — detalhes, editar, apagar, reportar —
   abre com a setinha. Um cartao fechado tem de poder ser curto: por isso
   `height:100%` so' se aplica ao cartao aberto, senao o grid esticava o
   fechado ate' a' altura do vizinho aberto e voltava a haver buracos. */
.card.fechado { height:auto; }
.card-topo {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  margin:-4px -4px 0; padding:4px; border-radius:10px;
}
.card-topo:hover { background:var(--bg-soft,rgba(10,61,145,.04)); }
.ct-esq { flex:1; min-width:0; }
/* "No ponto · SPC Valongo — a' espera de camiao" nao cabe numa linha de
   telemovel: cortado dava "No ponto · SPC Valongo — a' esp..." e o motorista
   ficava sem saber o que o contentor esta' a' espera. Quebra em duas linhas. */
.ct-onde {
  color:var(--text-light); font-size:.78rem; margin-top:3px;
  white-space:normal; overflow-wrap:anywhere; line-height:1.35;
}
.ct-seta {
  flex:none; color:var(--text-light); font-size:1rem; line-height:1;
  transition:transform .15s; user-select:none;
}
.card.aberto .ct-seta { transform:rotate(180deg); }
.card.fechado .card-corpo { display:none; }
.card.aberto .card-corpo { display:flex; flex-direction:column; flex:1; margin-top:12px; }
.ct-gps { margin-top:10px; }
.linha {
  display:flex; justify-content:space-between; gap:12px; font-size:.8rem;
  padding:5px 0; border-bottom:1px dotted var(--border);
}
.linha span:first-child {
  color:var(--text-light); font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; align-self:center;
}
.linha span:last-child { font-family:var(--mono); color:var(--text); text-align:right; }

.badge {
  display:inline-block; padding:4px 11px; border-radius:999px; font-size:.6rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; box-shadow:var(--shadow);
}
.b-LIVRE{background:linear-gradient(135deg,#93a0b5,#7a8699)}
.b-NO_PONTO{background:linear-gradient(135deg,#5a6bbf,var(--dsv))}
.b-ON_GOING{background:linear-gradient(135deg,#E9A23B,var(--warn))}
.b-DESCARREGADO{background:linear-gradient(135deg,var(--sky),var(--sky-deep))}
.b-ENTREGUE{background:linear-gradient(135deg,var(--ok-light),var(--ok))}

/* ---- Botões ---- */
/* `margin-top:auto` — os botoes assentam sempre no fundo do cartao. Num cartao
   curto, o espaco a mais fica ACIMA deles em vez de ficar por baixo, e as bases
   dos cartoes da mesma linha alinham. `padding-top` garante o afastamento
   minimo do conteudo quando nao sobra espaco nenhum. */
.acoes { margin-top:auto; padding-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.acoes button, .btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--dsv) 0%,var(--dsv-light) 100%);
  color:#fff; border:none; padding:.6rem 1rem; border-radius:10px; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.03em;
  box-shadow:var(--shadow); transition:filter .15s, transform .1s, box-shadow .15s;
}
.acoes button:hover, .btn:hover { filter:brightness(1.1); box-shadow:0 4px 14px rgba(25,40,98,.28); }
.acoes button:active, .btn:active { transform:scale(.98); }
.btn.sec {
  background:transparent; color:var(--dsv);
  border:1px solid var(--border-strong); box-shadow:none;
}
.btn.sec:hover { background:rgba(25,40,98,.06); filter:none; }
.btn.perigo { background:var(--danger-bg); color:var(--danger-dark); border:1px solid var(--danger-bd); box-shadow:none; }
.acoes button.perigo:hover, .btn.perigo:hover {
  background:linear-gradient(135deg,#E8635A,var(--danger)); color:#fff; border-color:var(--danger); filter:none;
}
.btn.ok, .acoes button.ok { background:linear-gradient(135deg,var(--ok-light),var(--ok)); }
.acoes button:disabled, .btn:disabled {
  background:linear-gradient(135deg,#9aa6c2,#b6c0d8); cursor:not-allowed; opacity:.85; box-shadow:none; filter:none;
}

/* ---- Login ---- */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(circle at 20% -10%,rgba(61,165,224,.18),transparent 55%),var(--bg);
}
.login {
  background:var(--card); padding:34px 32px; border-radius:16px; width:370px; max-width:100%;
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.login::before {
  content:''; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--dsv),var(--dsv-light),var(--sky));
}
.login h1 { color:var(--dsv); font-size:1.3rem; font-weight:800; letter-spacing:.02em; margin-bottom:4px; }
.login p.sub { color:var(--text-light); font-size:.82rem; margin-bottom:22px; }
.login label, .form-inline label, .dia-bar label {
  display:block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-muted); margin:12px 0 5px;
}
input, select {
  width:100%; height:44px; padding:0 12px; border:1.5px solid var(--border); border-radius:8px;
  font-size:.9rem; font-family:var(--sans); color:var(--text); background:#fff;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
textarea {
  width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:8px;
  font-size:.9rem; font-family:var(--sans); color:var(--text); background:#fff;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--dsv); box-shadow:0 0 0 3px rgba(25,40,98,.1);
}
input:disabled, select:disabled { background:var(--bg); color:var(--text-light); cursor:not-allowed; border-style:dashed; }
.login button {
  width:100%; margin-top:20px; height:46px; padding:0 24px;
  background:linear-gradient(135deg,var(--dsv) 0%,var(--dsv-light) 100%);
  color:#fff; border:0; border-radius:10px; cursor:pointer;
  font-family:var(--sans); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  box-shadow:0 3px 12px rgba(25,40,98,.3); transition:box-shadow .15s, transform .1s;
}
.login button:hover { box-shadow:0 6px 20px rgba(25,40,98,.4); }
.login button:active { transform:scale(.98); }
.hint {
  margin-top:18px; font-size:.7rem; color:var(--text-light); font-family:var(--mono);
  text-align:center; line-height:1.6;
}
.erro {
  color:var(--danger-dark); font-size:.78rem; font-weight:600; margin-top:10px; min-height:1em;
}

/* ---- Formulário inline ---- */
.form-inline {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; margin-bottom:18px; box-shadow:var(--shadow);
}
.form-inline .row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.form-inline .row > div { flex:1; min-width:130px; }
.mini { font-size:.7rem; color:var(--text-light); font-family:var(--mono); }
.vazio {
  color:var(--text-light); padding:36px; text-align:center; font-size:.85rem;
  background:var(--card); border:1px dashed var(--border-strong); border-radius:14px;
}

/* ---- Modais ---- */
.overlay {
  position:fixed; inset:0; background:rgba(13,26,69,.55); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:fade .15s ease;
}
@keyframes fade { from { opacity:0 } to { opacity:1 } }
.modal {
  background:var(--card); border-radius:18px; width:480px; max-width:94vw; max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 20px 60px rgba(13,26,69,.4); animation:pop .18s ease;
}
@keyframes pop { from { transform:translateY(12px) scale(.97); opacity:0 } to { transform:none; opacity:1 } }
.modal .m-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 24px; flex:0 0 auto; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--dsv-dark),var(--dsv) 58%,var(--dsv-mid));
}
.modal .m-head::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 92% -25%,rgba(61,165,224,.35),transparent 60%);
}
.modal .m-head h3 { color:#fff; font-size:1.02rem; font-weight:800; letter-spacing:.01em; position:relative; }
.modal .m-head .x {
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); width:32px; height:32px;
  border-radius:9px; font-size:1.2rem; line-height:1; color:#fff; cursor:pointer; position:relative;
  transition:background .15s;
}
.modal .m-head .x:hover { background:rgba(255,255,255,.32); }
.modal .m-body { padding:24px; overflow:auto; }
.modal .m-body label {
  display:block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-muted); margin:14px 0 5px;
}
.modal .m-body label:first-child { margin-top:0; }
.modal .m-foot {
  padding:14px 24px; border-top:1px solid var(--border); background:#FAFBFD;
  display:flex; justify-content:flex-end; gap:10px; flex:0 0 auto;
}
.modal .m-foot button {
  padding:.68rem 1.2rem; border-radius:10px; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.8rem; font-weight:700; letter-spacing:.03em;
  transition:filter .15s, background .15s;
}
.modal .m-foot .cancel { background:transparent; color:var(--text); border:1px solid var(--border-strong); }
.modal .m-foot .cancel:hover { background:rgba(0,0,0,.05); }
.modal .m-foot .ok {
  background:linear-gradient(135deg,var(--dsv) 0%,var(--dsv-light) 100%); color:#fff; box-shadow:var(--shadow);
}
.modal .m-foot .ok:hover { filter:brightness(1.1); }
.modal .m-foot .ok.perigo { background:linear-gradient(135deg,#E8635A,var(--danger)); }
.modal .m-foot .ok.perigo:hover { filter:brightness(1.06); }
.modal .m-erro { color:var(--danger-dark); font-size:.78rem; font-weight:600; margin-top:10px; min-height:1em; }
.modal.wide { width:1060px; max-width:96vw; }

/* Detalhe do contentor */
.det-cab { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:4px; }
.det-cab .tp { color:var(--text-light); font-size:.78rem; font-family:var(--mono); }
.det-resumo { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:18px 0; }
.det-resumo .item {
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px;
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.det-resumo .item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--dsv),var(--dsv-light));
}
.det-resumo .item .et {
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);
}
.det-resumo .item .vl { font-size:.95rem; font-weight:800; margin-top:3px; color:var(--text); }
.det-resumo .item .hr { font-size:.68rem; color:var(--text-light); font-family:var(--mono); }

.det-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:760px){ .det-cols { grid-template-columns:1fr; } }

.det-sec {
  margin-top:16px; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:18px; box-shadow:var(--shadow);
}
.det-cols .det-sec { margin-top:0; height:100%; }
.det-sec h4 {
  font-size:.62rem; font-weight:800; color:var(--dsv); text-transform:uppercase; letter-spacing:.14em;
  margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid var(--border);
}
.det-sec .feed, .det-sec .timeline, .det-sec .notas, .det-sec .doc-lista { max-height:none; }
.notas { list-style:none; }
.notas li {
  background:var(--warn-bg); border:1px solid var(--warn-bd); border-left:4px solid var(--warn);
  border-radius:10px; padding:11px 13px; margin-bottom:9px;
}
.notas .txt { font-size:.85rem; color:var(--text); line-height:1.45; }
.notas .quem { font-size:.68rem; color:#9A7B3A; font-family:var(--mono); margin-top:6px; }

/* linha do tempo */
.timeline { list-style:none; }
.timeline li { position:relative; padding:0 0 16px 22px; border-left:2px solid var(--border); }
.timeline li:last-child { border-left-color:transparent; }
.timeline li::before {
  content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,#5a6bbf,var(--dsv)); box-shadow:0 0 0 3px rgba(25,40,98,.1);
}
.timeline .quando { font-size:.66rem; color:var(--text-light); font-family:var(--mono); }
.timeline .oque { font-size:.86rem; margin:2px 0; color:var(--text); }
.timeline .quem { font-size:.7rem; color:var(--text-light); }

.doc-lista { list-style:none; }
.doc-lista li {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px dotted var(--border); font-size:.84rem;
}
.doc-lista li:last-child { border-bottom:none; }
.doc-lista .quem { color:var(--text-light); font-size:.7rem; font-family:var(--mono); }
.doc-lista a { color:var(--dsv-light); text-decoration:none; font-weight:600; }
.doc-lista a:hover { text-decoration:underline; }
.doc-lista .baixar {
  font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(61,165,224,.12); color:var(--sky-deep); border:1px solid rgba(61,165,224,.35);
  padding:2px 8px; border-radius:999px; margin-left:6px;
}

/* ================= Painel Cliente ================= */
.cl-hero {
  background:linear-gradient(135deg,var(--dsv-dark) 0%,var(--dsv) 55%,var(--dsv-mid) 100%);
  color:#fff; border-radius:18px; padding:26px 28px; margin-bottom:18px;
  position:relative; overflow:hidden; box-shadow:0 8px 26px rgba(13,26,69,.28);
}
.cl-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:radial-gradient(circle at 90% -30%,rgba(61,165,224,.32),transparent 58%),
             repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.04) 26px 27px);
}
.cl-hero > * { position:relative; z-index:1; }
.cl-hero h1 { font-size:1.45rem; font-weight:800; letter-spacing:.01em; margin-bottom:5px; }
.cl-hero p { opacity:.8; font-size:.85rem; }
.cl-topo { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.relogio {
  text-align:right; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:12px 18px;
}
.relogio .hora {
  font-size:1.9rem; font-weight:800; font-family:var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; line-height:1;
}
.relogio .data { font-size:.7rem; opacity:.75; margin-top:6px; font-family:var(--mono); }
.relogio .data::first-letter { text-transform:uppercase; }

/* ---- Modal do histórico de atividade ----
   A porta de entrada é o botão "Histórico" na barra de topo (ver `.nav-b`): o
   histórico deixou de ter painel no fundo das páginas, onde só quem rolasse até
   ao fim descobria que existia. */
.lg-barra {
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--border); border-radius:11px;
  padding:7px 12px; margin-bottom:14px;
}
.lg-lupa { font-size:.85rem; opacity:.5; }
.lg-q {
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--sans); font-size:.86rem; color:var(--text);
}
.lg-cnt { font-size:.68rem; font-weight:700; color:var(--sky-deep); background:rgba(61,165,224,.12); border-radius:20px; padding:2px 9px; white-space:nowrap; }
.lg-corpo { max-height:min(62vh,540px); overflow-y:auto; padding-right:4px; }
.lg-dia { margin-bottom:16px; }
.lg-dia[hidden] { display:none; }
/* Cabeçalho do dia colado ao topo enquanto se rola: sem isto perde-se a noção
   de que dia se está a ver a meio de uma lista longa. */
.lg-dia-cab {
  position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:9px;
  background:var(--bg); padding:6px 10px; border-radius:8px; margin-bottom:6px;
}
.lg-dia-cab b { font-size:.78rem; font-weight:800; color:var(--dsv); }
.lg-dia-cab small { margin-left:auto; font-size:.66rem; color:var(--text-light); font-family:var(--mono); }
.lg-dia-n {
  font-size:.62rem; font-weight:800; color:#fff; background:var(--dsv-light);
  border-radius:20px; padding:1px 7px;
}
.lg-lista { list-style:none; }
.lg-li {
  display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:start;
  padding:8px 10px; border-bottom:1px solid var(--border);
}
/* Linhas de alteração trazem o par "de → para" (`.log-dp`) por baixo do campo. */
.lg-oque b { display:block; font-size:.84rem; font-weight:700; margin-bottom:2px; }
.lg-hora { padding-top:2px; }
.lg-li[hidden] { display:none; }
.lg-li:last-child { border-bottom:0; }
.lg-li:hover { background:var(--bg); border-radius:7px; }
.lg-hora { font-family:var(--mono); font-size:.72rem; color:var(--text-light); font-variant-numeric:tabular-nums; }
.lg-oque { font-size:.84rem; color:var(--text); }
.lg-quem {
  font-size:.68rem; font-weight:700; color:var(--text-muted);
  background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:1px 9px;
  white-space:nowrap;
}
@media (max-width:640px) {
  .lg-li { grid-template-columns:46px 1fr; }
  .lg-quem { grid-column:2; justify-self:start; }
}

/* Contagem discreta ao lado do título do painel (substitui o cartão de KPI) */
.painel h3 .h3-n {
  font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--text-light);
  background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:2px 9px;
  margin-left:2px; letter-spacing:0; text-transform:none;
}
/* Chip informativo dentro do hero (ex.: taxa incluída) */
.hero-chip {
  display:inline-block; margin-top:12px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  font-size:.68rem; font-weight:700; color:rgba(255,255,255,.9); letter-spacing:.02em;
}

/* Bloco direito do hero: botão do fluxograma + relógio */
.hero-dir { display:flex; flex-direction:column; align-items:stretch; gap:10px; }
.hero-fx {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3);
  padding:11px 18px; border-radius:11px; cursor:pointer;
  font-family:var(--sans); font-size:.8rem; font-weight:800; letter-spacing:.03em;
  transition:background .15s, transform .1s, box-shadow .15s;
}
.hero-fx:hover { background:rgba(255,255,255,.28); box-shadow:0 4px 16px rgba(0,0,0,.18); }
.hero-fx:active { transform:scale(.98); }

/* ================= FERRAMENTAS DO HUB =================
   Fluxograma, frota, valores, custos e histórico. Eram botões empilhados no
   canto do hero (e dois deles lá em cima na barra), cada um com um emoji de
   tamanho diferente. São todos a mesma coisa — abrir uma vista de consulta —
   por isso vêm todos com o mesmo peso, numa fila por baixo do hero, cada um a
   dizer para que serve em vez de só se anunciar. */
.fer-fila {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:12px; margin:-6px 0 20px;
}
/* O `-6px` de cima existe para os cards encostarem ao hero no painel da COFEMEL,
   que é onde esta fila nasceu. No painel do admin ela vem a seguir a uma dobra
   ("Resumo financeiro") e esse valor negativo passava a puxar os cards para CIMA
   dela — 6px de sobreposição, medidos: a dobra acabava em 648 e os cards
   começavam em 642.
   Corrige-se pelo VIZINHO e não com uma classe nova: a regra só se aplica quando
   a fila vem mesmo a seguir a uma dobra, que é o caso do admin. O painel da
   COFEMEL, onde ela segue o hero, fica exactamente como estava. */
.dobra + .fer-fila { margin-top:22px; }
/* Colunas FIXAS e não `auto-fit`: a certas larguras o auto-fit punha 4 cards em
   cima e 2 em baixo, com um buraco ao lado. Aqui sabe-se quantos são. */
.fer-fila.tres   { grid-template-columns:repeat(3,1fr); }
/* Quatro cards numa linha só (o Resumo financeiro é largo e vive na sua). */
.fer-fila.quatro { grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px) { .fer-fila.quatro { grid-template-columns:repeat(2,1fr); } }
@media (max-width:940px)  { .fer-fila.tres   { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px)  { .fer-fila.tres, .fer-fila.quatro { grid-template-columns:1fr; } }
/* A seguir a um título de secção o `-6px` de encostar ao hero não faz sentido. */
.sec-t + .fer-fila { margin-top:0; }
.fer {
  position:relative; overflow:hidden; text-align:left;
  display:flex; align-items:center; gap:13px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; cursor:pointer; font-family:var(--sans);
  box-shadow:var(--shadow);
  transition:transform .14s, box-shadow .14s, border-color .14s;
}
/* Fio de cor que só aparece no hover: o cartão fica calmo em repouso (são cinco
   lado a lado) e responde quando se vai lá. */
.fer::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--dsv),var(--dsv-light),var(--sky));
  opacity:0; transition:opacity .14s;
}
.fer:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }
.fer:hover::before { opacity:1; }
.fer:active { transform:translateY(-1px); }
.fer:focus-visible { outline:2px solid var(--sky-deep); outline-offset:2px; }
.fer-ic {
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; color:var(--dsv-light);
  background:linear-gradient(135deg,rgba(46,69,160,.09),rgba(61,165,224,.14));
  transition:background .14s, color .14s;
}
.fer-ic svg { width:20px; height:20px; display:block; }
.fer:hover .fer-ic {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:#fff;
}
.fer-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.fer-txt b { font-size:.85rem; font-weight:800; color:var(--dsv); letter-spacing:.01em; }
.fer-txt small { font-size:.7rem; color:var(--text-light); line-height:1.35; }

/* ---- CARD LARGO DE LEITURA (o Resumo financeiro) ----
   Ocupa a fila toda e mostra os números em vez de os esconder atrás de um
   clique. NÃO é `<button>`: não abre nada, porque o que teria lá dentro é
   exactamente o que já se está a ver. Daí o cursor normal e a ausência do fio
   de cor e do salto no hover — o que não responde ao rato não deve fingir que
   responde. */
.fer-larga { grid-column:1 / -1; cursor:default; }
.fer-larga:hover { transform:none; box-shadow:var(--shadow); border-color:var(--border); }
.fer-larga:hover::before { opacity:0; }
.fer-larga:hover .fer-ic {
  background:linear-gradient(135deg,rgba(46,69,160,.09),rgba(61,165,224,.14)); color:var(--dsv-light);
}
/* Largura FIXA para a coluna do título: o aviso do "vazio na rua" é comprido e,
   com flex:auto, esticava a coluna e empurrava o último KPI para uma segunda
   linha. Com largura fixa é o AVISO que quebra linha, não os números. */
.fer-larga .fer-txt { flex:0 0 230px; padding-right:18px; border-right:1px solid var(--border); }
/* Os números encostam à direita e crescem para preencher o que sobra. Em ecrã
   estreito passam para baixo do título em vez de encolherem até não se lerem. */
.fer-nums { flex:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 26px; }
.fer-nums i { display:flex; flex-direction:column; gap:2px; font-style:normal; }
.fer-nums i b {
  font-size:1.02rem; font-weight:800; color:var(--dsv-dark); line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.fer-nums i span {
  font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-light);
}
.fer-nums i.n-verde b { color:var(--ok,#178048); }
.fer-nums i.n-ambar b { color:var(--warn,#B4690E); }
.fer-nums i.n-cinza b { color:var(--text-muted,#5A6478); }
@media (max-width:760px) {
  .fer-larga { flex-wrap:wrap; }
  .fer-larga .fer-txt { border-right:0; padding-right:0; }
  .fer-nums { justify-content:flex-start; gap:10px 18px; }
}

/* Colunas FIXAS, e todas divisoras de 6 (6 → 3 → 2). Com `auto-fit` havia
   sempre uma largura em que cabiam cinco e o sexto ficava sozinho numa fila só
   para ele, com um vazio enorme ao lado. São seis KPIs e são só estes seis
   (único uso de `.kpis` na app), por isso pode-se contar com o número.
   O valor encolhe sozinho para caber na coluna — ver `.kpi b`. */
.kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:18px; }
@media (max-width:1180px) { .kpis { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px)  { .kpis { grid-template-columns:repeat(2,1fr); } }
.kpi {
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px 18px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .12s, box-shadow .15s;
  /* Faz do cartão a referência de medida para o que está lá dentro. É isto que
     permite ao número se dimensionar pela largura DO CARTÃO (`cqw`) e não pela
     da janela: com `vw`, uma janela larga dava fonte grande mesmo quando os seis
     cartões estavam espremidos, e o valor transbordava. */
  container-type:inline-size;
}
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.kpi::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--dsv),var(--dsv-light));
}
.kpi.k-verde::before { background:linear-gradient(180deg,var(--ok-light),var(--ok)); }
.kpi.k-ambar::before { background:linear-gradient(180deg,var(--accent),#d98f14); }
.kpi.k-cinza::before { background:linear-gradient(180deg,#93a0b5,#7a8699); }
.kpi.kpi-taxa::before { background:linear-gradient(180deg,var(--sky),var(--sky-deep)); }
.kpi.k-verde b { color:var(--ok); }
.kpi.k-ambar b { color:var(--warn); }
.kpi.kpi-taxa b { color:var(--sky-deep); }
/* O número NUNCA parte. "4735,00 €" estava a quebrar antes do €, e um valor
   partido em duas linhas lê-se como dois números. Em vez de deixar quebrar,
   encolhe-se: `clamp` faz a fonte acompanhar a largura do cartão, e o cartão
   pede mais espaço à grelha (170px) antes de a grelha o espremer. */
.kpi b {
  display:block; font-size:clamp(1rem, 18cqw, 1.7rem); font-weight:800; line-height:1.1;
  color:var(--text); letter-spacing:-.01em; white-space:nowrap;
}
.kpi span {
  font-size:.6rem; font-weight:800; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.08em;
}

/* Barra de distribuição por estado */
.breakdown {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; margin-bottom:18px; box-shadow:var(--shadow);
}
.breakdown h3 {
  font-size:.62rem; font-weight:800; color:var(--dsv); text-transform:uppercase;
  letter-spacing:.14em; margin-bottom:14px;
}
.bar { display:flex; height:24px; border-radius:9px; overflow:hidden; background:#EEF1F8; box-shadow:inset 0 1px 3px rgba(25,40,98,.08); }
.bar > div { transition:width .35s ease; }
.bar-leg {
  display:flex; flex-wrap:wrap; gap:14px; margin-top:13px;
  font-size:.7rem; color:var(--text-muted); font-family:var(--mono);
}
.bar-leg .dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* Colunas do dashboard */
.cl-cols { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .cl-cols { grid-template-columns:1fr; } }

/* Feed de atividade */
.painel {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; box-shadow:var(--shadow);
}
.painel h3 {
  font-size:.62rem; font-weight:800; color:var(--dsv); text-transform:uppercase; letter-spacing:.14em;
  margin-bottom:15px; padding-bottom:9px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.feed { list-style:none; max-height:520px; overflow:auto; }
.feed li { position:relative; padding:0 0 15px 20px; border-left:2px solid var(--border); }
.feed li:last-child { border-left-color:transparent; padding-bottom:0; }
.feed li::before {
  content:""; position:absolute; left:-6px; top:3px; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,#5a6bbf,var(--dsv)); box-shadow:0 0 0 3px rgba(25,40,98,.1);
}
.feed .quando { font-size:.64rem; color:var(--text-light); font-family:var(--mono); }
.feed .oque { font-size:.84rem; margin:2px 0; color:var(--text); }
.feed .quem { font-size:.68rem; color:var(--text-light); }

/* Vazios + histórico, POR BAIXO da lista e a toda a largura.
   Estiveram numa coluna lateral de 1fr (40% do ecrã) e isso estrangulava a lista:
   com cartoes de minmax(320px) so cabiam DOIS por linha, e com 10 dias escolhidos
   a lista virava uma parede de 30 linhas. Pior, a coluna tinha altura fixa (o feed
   corta aos 520px) ao lado de uma lista infinita — 40% da largura a pagar por
   espaco em branco durante paginas de scroll. Em baixo, a lista respira a 4
   cartoes por linha e este bloco ocupa a largura que ja tinha, deitada. */
.cl-abaixo { display:grid; grid-template-columns:1fr 2fr; gap:18px; align-items:start; margin-top:18px; }
@media (max-width:900px){ .cl-abaixo { grid-template-columns:1fr; } }
/* Sozinho (aba dos vazios, sem o painel de instrucoes) nao fica encolhido a 1/3. */
.cl-abaixo > .painel:only-child { grid-column:1 / -1; }
/* Deitado e largo, o feed le-se em duas colunas em vez de uma tira estreita com
   scroll proprio. `break-inside` para nenhum evento ficar cortado ao meio. */
.cl-abaixo .feed { max-height:420px; columns:2; column-gap:26px; }
.cl-abaixo .feed li { break-inside:avoid; -webkit-column-break-inside:avoid; }
@media (max-width:1100px){ .cl-abaixo .feed { columns:1; } }

/* ---- Vazio a devolver, dentro do cartão da entrega ---- */
.vz {
  display:flex; align-items:center; gap:12px; margin:12px 0 2px; padding:11px 13px;
  background:linear-gradient(135deg,#F5F7FB,#EDF1F8);
  border:1px solid var(--border-strong); border-left:4px solid var(--text-muted); border-radius:11px;
}
.vz.feito { background:#F0FBF4; border-color:#BFE3CD; border-left-color:var(--ok); }
.vz-ic {
  width:34px; height:34px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,#8B9CC0,#5A6A8A);
}
.vz.feito .vz-ic { background:linear-gradient(135deg,var(--ok-light),var(--ok)); }
.vz-ic svg { width:19px; height:19px; }
.vz-txt { min-width:0; flex:1; }
.vz-et {
  font-size:.54rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted);
}
.vz.feito .vz-et { color:var(--ok); }
.vz-n { font-size:.95rem; font-weight:800; color:var(--text); letter-spacing:.02em; margin-top:2px; }
.vz-n small { font-size:.66rem; font-weight:600; color:var(--text-light); font-family:var(--mono); white-space:nowrap; }
.vz-d { font-size:.68rem; color:var(--text-muted); font-family:var(--mono); margin-top:2px; }
.vz-ok {
  flex:none; background:linear-gradient(135deg,var(--ok-light),var(--ok)); color:#fff; border:none;
  padding:.55rem .9rem; border-radius:9px; cursor:pointer;
  font-family:var(--sans); font-size:.72rem; font-weight:800; box-shadow:var(--shadow);
}
.vz-ok:hover { filter:brightness(1.08); }
.vz-tag {
  flex:none; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ok); background:#EAF6EF; border:1px solid #BFE3CD; border-radius:999px; padding:4px 10px;
}

/* ---- Lista de vazios (painel da COFEMEL) ----
   Linhas compactas, não cartões: cada vazio é uma linha de informação.
   O estado só se escreve quando é diferente do normal, e o cancelar é discreto
   (é a acção menos usada — não pode ser o elemento mais vistoso do painel). */
.vz-sub {
  font-size:.85rem; color:var(--text-muted);
  margin:-4px 0 14px; line-height:1.55;
}
.vz-lista { list-style:none; display:flex; flex-direction:column; gap:6px; }
.vz-li {
  position:relative; display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--border-strong);
  border-radius:9px; padding:9px 34px 9px 12px;
}
.vz-li.adj { border-left-color:var(--warn); background:var(--warn-bg); border-color:var(--warn-bd); }
.vz-li.velho { border-left-color:var(--danger); }
.vz-li-p { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.vz-li-p b { font-size:.88rem; font-weight:800; color:var(--text); letter-spacing:.02em; }
.vz-li-med { font-size:.62rem; font-weight:600; color:var(--text-light); font-family:var(--mono); }
.vz-li-dest { font-size:.72rem; font-weight:700; color:var(--dsv); }
.vz-li-s { grid-column:1; font-size:.66rem; color:var(--text-muted); font-family:var(--mono); }
.vz-li-s:empty { display:none; }
.vz-li-t {
  grid-column:2; grid-row:1; font-size:.64rem; font-weight:700; color:var(--text-light);
  font-family:var(--mono); white-space:nowrap;
}
.vz-li.velho .vz-li-t { color:var(--danger-dark); }
.vz-x {
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:22px; height:22px; border:none; border-radius:6px; background:transparent;
  color:var(--text-light); font-size:1.1rem; line-height:1; cursor:pointer; opacity:.5;
  transition:opacity .15s, background .15s, color .15s;
}
.vz-li:hover .vz-x { opacity:1; }
.vz-x:hover { background:var(--danger-bg); color:var(--danger-dark); }
.vz-badge {
  font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-bd);
  border-radius:999px; padding:2px 8px;
}
.vz-badge.adj { color:#fff; background:linear-gradient(135deg,#E9A23B,var(--warn)); border-color:var(--warn); }
/* Abas do topo do painel (Contentores | Levantamento de vazios) */
.abas { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.abas button {
  background:var(--card); border:1px solid var(--border); color:var(--text-muted);
  padding:11px 20px; border-radius:12px; cursor:pointer;
  font-family:var(--sans); font-size:.82rem; font-weight:800; letter-spacing:.02em;
  box-shadow:var(--shadow); transition:border-color .15s, color .15s, background .15s;
}
.abas button:hover { border-color:var(--dsv-light); color:var(--dsv); }
.abas button.ativo {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:#fff;
  border-color:var(--dsv); box-shadow:0 3px 12px rgba(25,40,98,.26);
}
.abas button .c { font-family:var(--mono); font-size:.78rem; opacity:.75; margin-left:4px; }
.abas button.aviso:not(.ativo) { border-color:var(--warn-bd); background:var(--warn-bg); color:var(--warn); }

/* Instruções no ecrã principal: só o que dizer ao próximo camião */
.instr-linha { display:flex; align-items:center; gap:13px; }
.instr-pos {
  flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:11px; font-family:var(--mono); font-size:.86rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light));
}
.instr-n { font-size:1.05rem; font-weight:800; color:var(--text); letter-spacing:.02em; }
.instr-d { font-size:.76rem; color:var(--text-muted); margin-top:1px; }
.instr-d b { color:var(--dsv); font-size:.82rem; }
.instr-sub { font-size:.72rem; color:var(--text-light); line-height:1.5; margin-top:11px; }
.instr-alerta {
  margin-top:11px; padding:8px 11px; border-radius:9px; font-size:.72rem; font-weight:700;
  color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-bd);
}

/* posição na fila de espera */
.vz-pos {
  grid-row:1 / span 3; align-self:center; flex:none; min-width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; margin-right:2px;
  border-radius:8px; font-family:var(--mono); font-size:.7rem; font-weight:800;
  color:var(--text-muted); background:var(--bg); border:1px solid var(--border);
}
.vz-pos.prox { color:#fff; background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); border-color:var(--dsv); }
.vz-pos.falta { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-bd); }
.vz-pos.saiu { color:var(--ok); background:#EAF6EF; border-color:#BFE3CD; }
.vz-li { grid-template-columns:auto 1fr auto; }
.vz-li-p, .vz-li-s { grid-column:2; }
.vz-li.prox { border-left-color:var(--dsv); box-shadow:0 1px 6px rgba(25,40,98,.1); }
.vz-li.saiu { background:#F7FBF8; border-color:#CFE6D6; border-left-color:var(--ok); }
.vz-li-dest.falta { color:var(--warn); font-weight:800; }
.vz-alerta { color:var(--warn); }
.vz-btn {
  background:transparent; border:1px solid var(--border-strong); color:var(--dsv);
  border-radius:7px; padding:3px 9px; cursor:pointer; margin-right:5px;
  font-family:var(--sans); font-size:.66rem; font-weight:700;
}
.vz-btn:hover { background:rgba(25,40,98,.06); }
.vz-btn.sec { color:var(--text-muted); }
.vz-btn.falta { color:#fff; background:linear-gradient(135deg,#E9A23B,var(--warn)); border-color:var(--warn); }
.vz-badge.saiu { color:var(--ok); background:#EAF6EF; border-color:#BFE3CD; }

/* ---- ID do processo (viagem): "V3 · 17/08" ----
   Vive colado ao nº do contentor porque é a outra forma de lhe chamar o nome.
   Em letra de máquina: é um código, lê-se sem ambiguidade.

   DEIXOU DE SER UM CHIP CHEIO E ESCURO (31/08/2026). Era azul-marinho com texto
   branco, e num ecrã cheio de linhas o que saltava à vista era ELE — não o nº do
   contentor ao lado. A hierarquia estava trocada: o nº do contentor é por onde
   toda a gente procura, e o processo é a referência curta para o dizer ao
   telefone. Um serve para ENCONTRAR, o outro para MENCIONAR.

   Agora é um contorno claro, na mesma letra e do mesmo tamanho. Continua a ler-se
   e continua a distinguir-se do número — mas já não lhe rouba o primeiro olhar. */
.vg-chip {
  display:inline-block; vertical-align:middle; margin-left:8px;
  font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.04em;
  color:var(--text-muted,#5A6478); background:var(--bg,#F6F8FB);
  border:1px solid var(--border,#E3E7EE);
  border-radius:20px; padding:2px 8px; white-space:nowrap;
}
.proc-tit b { font-family:var(--mono); color:var(--dsv); letter-spacing:.04em; }

/* ================= FILTRO DE PERÍODO (listas + fluxograma) =================
   Com ~7 serviços por dia, ao fim de um mês são 200. O histograma mostra onde
   está o volume e as duas pegas escolhem o intervalo — é para ser usado com o
   rato, não com 30 cliques dia a dia. */
.fp {
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:0; margin-bottom:14px; box-shadow:var(--shadow);
}
/* Fio de cor no topo, como nos `.card`: dá ao filtro o mesmo estatuto visual do
   resto do painel em vez de parecer uma caixa solta. */
.fp::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--dsv),var(--dsv-light),var(--sky));
}
/* O cabeçalho é uma faixa: separa "o que escolhi" (em cima) de "escolher"
   (a tira de dias, em baixo). Antes era tudo o mesmo branco e lia-se plano. */
.fp-topo {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 16px 12px; margin-bottom:0;
  background:linear-gradient(180deg,#FAFBFF,var(--bg));
  /* Sem risco em baixo: a tira de dias que vivia por baixo saiu (31/08/2026) e
     o filtro passou a ser só esta linha. */
  border-bottom:0;
}
.fp-tit { font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dsv); opacity:.85; }
/* Atalhos como controlo segmentado — um bloco só, e não quatro botões soltos. */
.fp-presets {
  display:flex; gap:2px; padding:3px;
  background:var(--white); border:1px solid var(--border);
  border-radius:22px; box-shadow:inset 0 1px 2px rgba(25,40,98,.04);
}
.fp-presets button {
  border:0; background:transparent; color:var(--text-muted);
  border-radius:18px; padding:5px 14px; font-size:.76rem; font-weight:700;
  font-family:var(--sans); cursor:pointer; transition:background .12s, color .12s;
}
.fp-presets button:hover { background:var(--bg); color:var(--text); }
.fp-presets button.on {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:var(--white);
  box-shadow:0 1px 3px rgba(25,40,98,.28);
}
/* O intervalo escolhido, em texto, ao lado dos atalhos — antes estava no rodapé
   e obrigava a olhar para dois sítios. */
.fp-resumo { display:flex; flex-direction:column; gap:1px; margin-left:4px; padding-left:14px; border-left:1px solid var(--border); }
.fp-lbl { font-size:.95rem; color:var(--dsv); font-weight:800; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
/* Contagem como chip: é um número, e a azul-claro lê-se como estado e não como
   mais uma linha de texto. */
.fp-cnt {
  align-self:flex-start; font-size:.68rem; font-weight:700; color:var(--sky-deep);
  background:rgba(61,165,224,.12); border-radius:20px; padding:1px 8px;
}
/* As duas datas são UM intervalo, não dois campos independentes: vivem dentro da
   mesma cápsula, com uma seta a dizer o sentido. Duas caixas brancas soltas
   liam-se como dois filtros diferentes. */
/* Encostado ao resumo, NÃO empurrado para a direita com `margin-left:auto`: no
   fluxograma (ecrã inteiro) as datas fugiam para o outro extremo do monitor e
   ficavam a metros do intervalo a que dizem respeito. Lê-se da esquerda para a
   direita, tudo junto: atalhos → intervalo → datas exatas. */
.fp-datas {
  display:flex; align-items:stretch; gap:0;
  background:var(--white); border:1px solid var(--border); border-radius:11px;
  box-shadow:inset 0 1px 2px rgba(25,40,98,.04); overflow:hidden;
  transition:border-color .12s, box-shadow .12s;
}
.fp-datas:hover { border-color:var(--border-strong); }
/* O foco acende a cápsula toda — é ela o controlo, não o input lá dentro. */
.fp-datas:focus-within { border-color:var(--dsv); box-shadow:0 0 0 3px rgba(25,40,98,.1); }
/* Cada data é um botão que abre o NOSSO calendário (`.cal`). O `input[type=date]`
   estava fora: o seu popup é chrome do sistema, não se estiliza, vinha em inglês
   e em MM/DD/AAAA. */
.fp-dt {
  position:relative; display:flex; align-items:center; gap:8px;
  border:0; background:transparent; padding:6px 12px; cursor:pointer;
  font-family:var(--sans); font-size:.82rem; font-weight:700;
  color:var(--dsv); font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:background .12s;
}
.fp-dt small {
  font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-light);
}
.fp-dt:hover { background:var(--bg); }
.fp-dt:focus-visible { outline:2px solid var(--sky-deep); outline-offset:-2px; }
/* Seta entre os dois, a dizer o sentido do intervalo. Precisa de folga própria:
   colada ao rótulo lia-se como um travessão pegado ao "ATÉ". */
.fp-dt + .fp-dt { border-left:1px solid var(--border); padding-left:27px; }
.fp-dt + .fp-dt::before {
  content:"→"; position:absolute; left:9px;
  font-size:.78rem; font-weight:700; color:var(--border-strong);
}

/* ---- Calendário próprio (aberto pelos botões das datas) ---- */
.calp {
  /* Acima do fluxograma (#fx-ov está em 9998): o filtro também vive lá dentro e
     um calendário escondido por trás do mapa não se abre a ninguém. */
  position:absolute; z-index:10050; width:252px; padding:10px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); font-family:var(--sans);
  animation:cal-entra .12s ease-out;
}
@keyframes cal-entra { from { opacity:0; transform:translateY(-4px); } }
.calp-topo { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.calp-topo b { font-size:.82rem; font-weight:800; color:var(--dsv); text-transform:capitalize; }
.calp-nav {
  border:1px solid var(--border); background:var(--white); color:var(--dsv);
  width:24px; height:24px; border-radius:7px; cursor:pointer;
  font-size:1rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.calp-nav:hover { background:var(--bg); border-color:var(--border-strong); }
.calp-sem, .calp-grelha { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.calp-sem span {
  text-align:center; font-size:.58rem; font-weight:800; letter-spacing:.06em;
  color:var(--text-light); text-transform:uppercase; padding-bottom:4px;
}
.calp-d {
  position:relative; height:30px; border:0; border-radius:8px;
  background:transparent; cursor:pointer; font-family:var(--sans);
  font-size:.78rem; font-weight:600; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:background .1s, color .1s;
}
.calp-d:hover { background:var(--bg); }
/* Ponto por baixo do número: este dia TEM processos. Poupa o vaivém entre o
   calendário e a lista só para descobrir que se escolheu um dia vazio. */
.calp-d i { position:absolute; bottom:4px; width:3px; height:3px; border-radius:50%; background:transparent; }
.calp-d.tem i { background:var(--sky); }
/* Os outros dias do intervalo já escolhido, em fundo suave. */
.calp-d.faixa { background:rgba(46,69,160,.1); border-radius:0; color:var(--dsv); }
.calp-d.hoje { color:var(--accent); font-weight:800; }
.calp-d.hoje::after {
  content:""; position:absolute; inset:0; border:1px solid var(--accent);
  border-radius:8px; opacity:.55;
}
.calp-d.on {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:#fff; font-weight:800;
  box-shadow:0 2px 6px rgba(25,40,98,.3);
}
.calp-d.on i, .calp-d.on.tem i { background:rgba(255,255,255,.85); }
.calp-d.on.hoje::after { border-color:var(--accent); opacity:1; }
.calp-v { height:30px; }
.calp-pe { display:flex; justify-content:flex-end; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.calp-hoje {
  border:0; background:transparent; color:var(--dsv-light); cursor:pointer;
  font-family:var(--sans); font-size:.72rem; font-weight:800; padding:3px 8px; border-radius:6px;
}
.calp-hoje:hover { background:var(--bg); }

/* A pilha de contentores ao lado da etiqueta. */
.fp-ic { display:inline-flex; width:30px; margin-right:9px; color:var(--dsv-light); opacity:.5; vertical-align:-6px; }
.fp-ic svg { width:100%; height:auto; display:block; }
.fp-tit { display:inline-flex; align-items:center; }

/* A TIRA DE DIAS viveu aqui (`.dp-*`, ~80 linhas) até 31/08/2026. Saiu com o
   markup: duplicava o calendário próprio dos botões de/até e o arrasto sobre
   células não se adivinhava. O filtro é agora só a linha `.fp-topo`. */

@media (max-width:760px) {
  .fp-topo { gap:10px; padding:12px; }
  .fp-resumo { border-left:0; padding-left:0; margin-left:0; }
  .fp-datas { margin-left:0; width:100%; }
  .fp-dt { flex:1; justify-content:center; }
}

/* ================= SIMULAÇÃO DE CUSTOS DE PARQUE =================
   Não é um relatório financeiro: é uma lista de trabalho. O que salta à vista
   tem de ser o que está prestes a ficar mais caro, não o total bonito. */
/* ---- Ilustração ----
   Decoração é decoração: fica atrás do título, muito discreta e sem apanhar
   cliques. Se competir com os números, deixou de estar a ajudar. */
.sim-head { position:relative; overflow:hidden; min-height:74px; }
.sim-head h3 { position:relative; z-index:2; }
.sim-head .x { position:relative; z-index:2; }
/* Ancorada à BASE do cabeçalho: a pilha assenta na aresta de baixo, como no
   parque. Centrada verticalmente ficava cortada a meio de um contentor, que é
   pior do que não ter desenho nenhum. */
.sim-head-art {
  position:absolute; right:64px; bottom:-2px;
  width:118px; color:#fff; opacity:.2; pointer-events:none; z-index:1;
}
.sim-head-art svg { width:100%; height:auto; display:block; }
@media (max-width:760px) { .sim-head-art { display:none; } }

/* Contentor pequeno junto ao tamanho, na etiqueta do cartão. */
.ct-tam { display:inline-flex; align-items:center; gap:5px; }
.ct-ic { display:inline-flex; width:17px; color:var(--text-light); }
.ct-ic.c20 { width:11px; }   /* um 20' é metade de um 40' — vê-se na etiqueta */
.ct-ic svg { width:100%; height:auto; display:block; }

/* Ecrã vazio ilustrado: melhor do que uma linha de texto solta. */
.pl-nada { color:var(--text-muted); font-size:.85rem; padding:44px 30px; text-align:center; }
.pl-nada-art { width:130px; margin:0 auto 16px; color:var(--border-strong); }
.pl-nada-art svg { width:100%; height:auto; display:block; }
.pl-nada b { display:block; font-size:1rem; color:var(--text); margin-bottom:6px; }
.pl-nada span { display:block; max-width:440px; margin:0 auto; font-size:.78rem; line-height:1.6; color:var(--text-light); }

.sim-ov { align-items:flex-start; overflow:auto; padding:24px 12px; }
/* `.modal` tem `width:480px` fixo — sem repor a largura aqui, a tabela de 9
   colunas ficava espremida em 480px e ilegível. */
.sim-modal { width:1680px; max-width:97vw; max-height:94vh; }
.sim-modal .m-body { padding:20px 24px 24px; background:var(--bg); }

.sim-topo { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; }
.sim-kpis { display:flex; gap:10px; flex-wrap:wrap; }
.sim-kpi {
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:8px 14px; min-width:110px;
}
.sim-kpi b { display:block; font-size:1.15rem; color:var(--text); }
.sim-kpi span { font-size:.7rem; color:var(--text-muted); }
.sim-kpi.mau { background:var(--danger-bg); border-color:var(--danger-bd); }
.sim-kpi.mau b { color:var(--danger-dark); }
.sim-kpi.aviso { background:var(--warn-bg); border-color:var(--warn-bd); }
.sim-kpi.aviso b { color:var(--warn); }

.sim-ctrl { margin-left:auto; display:flex; gap:12px; align-items:flex-end; }
/* Especificidade a subir de propósito: `.modal .m-body label` põe estas etiquetas
   a `display:block` com margens grandes, e desalinhava os controlos todos. */
.modal .m-body .sim-ctrl label {
  font-size:.62rem; color:var(--text-muted); display:flex; flex-direction:column;
  gap:4px; margin:0; white-space:nowrap;
}
.sim-ctrl select, .sim-ctrl input {
  border:1px solid var(--border); border-radius:7px; padding:6px 8px;
  font-size:.82rem; font-family:var(--sans); color:var(--text); background:var(--white);
}
.sim-ctrl input[type=number] { width:82px; }
/* Atalhos de dias: os números redondos que se usam quase sempre, sem tirar a
   possibilidade de escrever 4 ou 5 na caixa ao lado. */
.sim-rapidos { display:flex; gap:4px; }
.sim-rapidos button {
  border:1px solid var(--border); background:var(--white); color:var(--text-muted);
  border-radius:20px; padding:5px 10px; font-size:.72rem; font-weight:700; cursor:pointer;
}
.sim-rapidos button:hover { border-color:var(--border-strong); color:var(--text); }
.sim-rapidos button.on { background:var(--dsv); border-color:var(--dsv); color:#fff; }
/* Aviso de que a tabela está em modo "e se fosse este armador" — os números
   deixam de ser a fatura real e isso não pode passar despercebido. */
.sim-forcado {
  background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn);
  border-radius:8px; padding:7px 11px; font-size:.76rem; margin-bottom:10px; line-height:1.45;
}
.sim-troca { font-size:.66rem; color:var(--warn); display:block; }
.sim-nota-topo { font-size:.75rem; color:var(--text-light); margin-bottom:10px; line-height:1.45; }

/* ---- ESTADOS DO CONTENTOR ----
   Paleta validada com o script de daltonismo do guia de visualização. O par que
   eu usava antes (#B4690E laranja vs #D93A31 vermelho) tinha ΔE 1,4 em deutan —
   era literalmente a mesma cor para quem tem essa condição. Estes passam.
   Cada estado leva SEMPRE forma (●▲■) + palavra além da cor. */
:root {
  --st-livre:#178048;   /* verde  — ainda em tempo livre */
  --st-limite:#DE9800;  /* âmbar  — último dia livre */
  --st-pagar:#D93A31;   /* vermelho — já a pagar */
}
.ct-pt { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.ct-pt.livre { background:var(--st-livre); }
.ct-pt.limite { background:var(--st-limite); }
.ct-pt.pagar { background:var(--st-pagar); }

.sim-barra-acoes { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.sim-barra-acoes .pl-legenda { margin:0; flex:1; }
.sim-vista { display:flex; gap:3px; }
.sim-vista button {
  border:1px solid var(--border); background:var(--white); color:var(--text-muted);
  border-radius:8px; padding:7px 12px; font-size:.74rem; font-weight:700;
  font-family:var(--sans); cursor:pointer;
}
.sim-vista button.on { background:var(--dsv); border-color:var(--dsv); color:#fff; }

/* ---- GRELHA DE CARTÕES ---- */
.ct-grelha { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.ct {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px 0; box-shadow:var(--shadow); cursor:pointer;
  display:flex; flex-direction:column; transition:box-shadow .15s, transform .12s;
  position:relative; overflow:hidden;
}
.ct:hover { box-shadow:0 4px 18px rgba(25,40,98,.13); transform:translateY(-1px); }
.ct.on { grid-column:1/-1; cursor:default; }
/* Faixa lateral de estado: dá a leitura à distância sem pintar o cartão todo. */
.ct::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; }
.ct-livre::before { background:var(--st-livre); }
.ct-limite::before { background:var(--st-limite); }
.ct-pagar::before { background:var(--st-pagar); }
.ct-erro { padding:14px 16px; color:var(--danger-dark); font-size:.8rem; }

.ct-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ct-est { display:flex; align-items:center; gap:5px; font-size:.7rem; font-weight:800; letter-spacing:.01em; }
.ct-est i { font-style:normal; font-size:.72rem; }
.ct-est.livre { color:var(--st-livre); }
.ct-est.limite { color:var(--st-limite); }
.ct-est.pagar { color:var(--st-pagar); }
.ct-est-det { font-size:.68rem; color:var(--text-light); }
.ct-sup {
  margin-left:auto; font-size:.6rem; font-weight:700; color:var(--warn);
  background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:20px; padding:1px 7px; cursor:help;
}
.ct-num { font-family:var(--mono); font-size:1rem; font-weight:700; margin-top:7px; letter-spacing:.02em; }
.ct-vg { margin-left:7px; font-size:.62rem; font-family:var(--sans); background:var(--dsv); color:#fff; border-radius:20px; padding:1px 7px; vertical-align:middle; }
.ct-tags { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.pl-tag.imo { color:var(--danger-dark); background:var(--danger-bg); border-color:var(--danger-bd); }
.ct-troca { margin-top:6px; font-size:.64rem; color:var(--warn); font-weight:700; }

/* Curva de custo: linha fina, sem eixos nem grelha. Indica a FORMA (dispara ou
   não), não substitui a projeção — essa abre-se ao clicar. */
.ct-graf { position:relative; margin:10px -16px 0; }
.sp { display:block; width:100%; height:54px; }
.sp-linha { fill:none; stroke:var(--dsv-light); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.sp-area { fill:var(--dsv-light); opacity:.09; stroke:none; }
/* Anel da cor da superfície à volta do ponto: separa-o da linha sem contorno. */
.sp-hoje { fill:var(--dsv); stroke:var(--card); stroke-width:2; vector-effect:non-scaling-stroke; }
.sp-degrau { stroke:var(--border-strong); stroke-width:1; vector-effect:non-scaling-stroke; }
/* Rótulo do fim da curva à ESQUERDA: a curva de custo sobe sempre para a direita,
   por isso o canto superior direito é exactamente onde a linha acaba — o rótulo
   ficava por cima dela. À esquerda a curva está sempre no seu ponto mais baixo. */
.ct-graf-f {
  position:absolute; left:16px; top:0; font-size:.62rem; color:var(--text-light);
  background:var(--card); padding:0 4px; border-radius:3px;
}

.ct-vals { display:flex; gap:14px; padding:10px 0 0; border-top:1px solid var(--border); margin-top:2px; }
.ct-v { display:flex; flex-direction:column; }
.ct-v.dir { margin-left:auto; text-align:right; }
/* Figuras proporcionais nos números grandes (tabular-nums só alinha colunas). */
.ct-v b { font-size:1.18rem; color:var(--text); line-height:1.15; }
.ct-v b.mau { color:var(--st-pagar); }
.ct-v b.aviso { color:var(--st-limite); }
.ct-v b.ok { color:var(--st-livre); }
.ct-v span { font-size:.63rem; color:var(--text-light); margin-top:1px; }

.ct-f {
  margin:11px -16px 0; padding:9px 16px; background:var(--bg);
  border-top:1px solid var(--border); font-size:.72rem; color:var(--text-muted); line-height:1.45;
}
.ct-f b { color:var(--text); }
.ct-f.perto { background:var(--warn-bg); color:var(--warn); }
.ct-f.perto b { color:var(--warn); }
.ct-det { margin:0 -16px; border-top:1px solid var(--border); cursor:default; }

.sim-tab-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.sim-tab { width:100%; border-collapse:collapse; font-size:.82rem; }
.sim-tab th {
  text-align:left; padding:8px 10px; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); border-bottom:2px solid var(--border);
  white-space:nowrap;
}
.sim-tab td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.sim-tab td small { display:block; font-size:.66rem; color:var(--text-light); }
.sim-l { cursor:pointer; }
.sim-l:hover { background:var(--bg); }
.sim-l.on { background:#EEF3FF; }
.sim-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sim-arm { color:var(--text-muted); font-size:.76rem; }
.sim-vg { margin-left:6px; font-size:.66rem; background:var(--dsv); color:#fff; border-radius:20px; padding:1px 7px; }
/* O "?" é discreto mas presente: marca a conta que assenta em suposições. */
.sim-sup {
  margin-left:5px; display:inline-block; width:15px; height:15px; line-height:15px;
  text-align:center; border-radius:50%; background:var(--warn-bg); color:var(--warn);
  border:1px solid var(--warn-bd); font-size:.66rem; font-weight:800; cursor:help;
}
.sim-ok { color:var(--ok); font-weight:700; }
.sim-aviso { color:var(--warn); font-weight:800; }
.sim-mau { color:var(--danger-dark); font-weight:800; }
.sim-nota { color:var(--text-muted); }
.sim-erro { color:var(--danger-dark); }

/* Projeção dia a dia — a gaveta que abre por baixo da linha */
.sim-det > td { background:var(--bg); padding:0 !important; }
.sim-proj { padding:14px 16px; }
.sim-proj-cab { display:flex; align-items:center; gap:12px; font-size:.88rem; margin-bottom:8px; }
.sim-proj-cab .btn { margin-left:auto; }
.sim-alerta {
  background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn);
  border-radius:8px; padding:8px 11px; font-size:.76rem; margin-bottom:10px; line-height:1.45;
}
.sim-dias { width:100%; border-collapse:collapse; font-size:.78rem; background:var(--card); }
.sim-dias th {
  text-align:left; padding:6px 9px; font-size:.64rem; text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid var(--border);
}
.sim-dias td { padding:5px 9px; border-bottom:1px solid var(--border); }
.sim-dias td small { display:block; font-size:.62rem; color:var(--text-light); }
/* A linha de hoje e as linhas em que a tarifa muda: são as duas que se procuram. */
.sim-dias tr.hoje { background:#EEF3FF; }
.sim-dias tr.salto td { border-top:2px solid var(--warn); }
.sim-barra { width:110px; }
.sim-barra span { display:block; height:7px; border-radius:4px; background:var(--sky); }

/* Separadores do popup */
.sim-abas { display:flex; gap:2px; background:var(--dsv-dark); padding:0 20px; flex:0 0 auto; }
.sim-abas button {
  border:0; background:transparent; color:rgba(255,255,255,.6); cursor:pointer;
  padding:10px 18px; font-family:var(--sans); font-size:.82rem; font-weight:700;
  border-bottom:3px solid transparent;
}
.sim-abas button:hover { color:#fff; }
.sim-abas button.on { color:#fff; border-bottom-color:var(--accent); background:rgba(255,255,255,.07); }
.sim-kpi.ok { background:#EDF7F1; border-color:#CDE7D8; }
.sim-kpi.ok b { color:var(--ok); }

/* ---- PLANO DE SAÍDA ----
   Isto é para ser lido em pé, ao balcão, a decidir o que sai hoje. Por isso: a
   data grande à esquerda de cada bloco, o valor grande à direita, e um ponto de
   cor a dizer a urgência sem ser preciso ler o número. */
/* `.pl-nada` (ecrã vazio ilustrado) está definido junto com a ilustração, acima. */

.pl-topo { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
.pl-cards { display:flex; gap:10px; flex-wrap:wrap; flex:1; }
/* O cartão leva uma barra de cor em cima em vez de fundo colorido: distingue
   sem gritar, e quatro cartões com fundo forte competiam entre si. */
.pl-card {
  flex:1; min-width:170px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:13px 15px 12px; position:relative; overflow:hidden;
  box-shadow:var(--shadow);
}
.pl-card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--border-strong); }
.pl-card.bom::before { background:var(--ok); }
.pl-card.aviso::before { background:var(--accent); }
.pl-card.mau::before { background:var(--danger); }
.pl-card-v { font-size:1.32rem; font-weight:800; color:var(--text); line-height:1.15; font-variant-numeric:tabular-nums; }
.pl-card.bom .pl-card-v { color:var(--ok); }
.pl-card.mau .pl-card-v { color:var(--danger-dark); }
.pl-card-e { font-size:.72rem; font-weight:700; color:var(--text); margin-top:3px; }
.pl-card-s { font-size:.66rem; color:var(--text-light); margin-top:2px; line-height:1.35; }

.pl-ctrl { display:flex; gap:10px; align-items:flex-end; }
.modal .m-body .pl-ctrl label {
  display:flex; flex-direction:column; gap:4px; margin:0; white-space:nowrap;
  font-size:.62rem; color:var(--text-muted);
}
.pl-ctrl input {
  width:78px; border:1px solid var(--border); border-radius:8px; padding:7px 9px;
  font-size:.86rem; font-family:var(--sans); font-weight:700; color:var(--text); background:var(--white);
}
.pl-btn {
  border:1px solid var(--border-strong); background:var(--white); color:var(--text);
  border-radius:8px; padding:7px 13px; font-size:.76rem; font-weight:700;
  font-family:var(--sans); cursor:pointer;
}
.pl-btn:hover { background:var(--bg); }
.pl-btn.on { background:var(--dsv); border-color:var(--dsv); color:#fff; }

.pl-semana { display:flex; gap:7px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px; }
.modal .m-body .pl-semana label {
  display:flex; flex-direction:column; gap:3px; margin:0;
  font-size:.62rem; text-transform:uppercase; color:var(--text-muted); font-weight:800;
}
.modal .m-body .pl-semana label.off { opacity:.45; }
.pl-semana input {
  width:52px; border:1px solid var(--border); border-radius:7px; padding:5px 7px;
  font-size:.84rem; font-weight:700; text-align:center; font-family:var(--sans);
}
.pl-semana-n { font-size:.7rem; color:var(--text-light); align-self:center; margin-left:6px; }

.pl-explica {
  display:flex; gap:10px; background:#EEF3FF; border:1px solid #CBD9F5;
  border-radius:10px; padding:11px 14px; font-size:.79rem; line-height:1.55; margin-bottom:14px;
}
.pl-explica-ic { font-size:1rem; line-height:1.4; }

/* Barra do horizonte: a forma do plano num relance. */
.pl-tl { display:flex; align-items:flex-end; gap:12px; margin-bottom:10px; }
.pl-tl-et {
  font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); padding-bottom:16px; white-space:nowrap;
}
/* Largura fixa por dia: com `flex:1` e poucos dias cada barra ficava com meio
   ecrã de largura e deixava de se ler como histograma. */
.pl-tl-dias { display:flex; gap:4px; align-items:flex-end; flex:1; overflow-x:auto; padding-bottom:2px; }
.pl-tl-d {
  flex:0 0 34px; height:52px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:2px; text-decoration:none;
  border-radius:6px 6px 0 0; position:relative; padding-bottom:1px;
}
.pl-tl-d:hover { background:var(--bg); }
.pl-tl-bar { width:100%; min-height:3px; background:var(--sky); border-radius:4px 4px 0 0; }
.pl-tl-d.hoje .pl-tl-bar { background:var(--dsv); }
/* Sábado/domingo NÃO se pintam de cinzento: se o plano lá marcou saídas é
   porque há capacidade nesses dias, e cinzento lia-se como "fechado". */
.pl-tl-d.fds .pl-tl-l { color:var(--sky-deep); font-weight:800; }
.pl-tl-n { position:absolute; top:0; font-size:.6rem; font-weight:800; color:var(--text-muted); }
.pl-tl-l { font-size:.58rem; color:var(--text-light); font-weight:700; }

/* Pontos de urgência — a mesma cor na legenda e nas linhas. */
.pl-legenda { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.pl-legenda span { display:flex; align-items:center; gap:6px; font-size:.68rem; color:var(--text-muted); }
.pl-pt { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.pl-pt.alta { background:var(--danger); }
.pl-pt.media { background:var(--accent); }
.pl-pt.baixa { background:var(--sky); }
.pl-pt.zero { background:var(--ok); }

.pl-dias { display:flex; flex-direction:column; gap:12px; }
.pl-bloco {
  border:1px solid var(--border); border-radius:13px; overflow:hidden; background:var(--card);
  box-shadow:var(--shadow);
}
.pl-bloco.hoje { border-color:var(--dsv-light); box-shadow:0 0 0 2px rgba(46,69,160,.12), var(--shadow); }

.pl-h {
  display:flex; align-items:center; gap:14px; padding:11px 16px;
  background:linear-gradient(180deg,#FAFBFE,#F3F6FC); border-bottom:1px solid var(--border);
}
.pl-bloco.hoje .pl-h { background:linear-gradient(180deg,#EEF3FF,#E4ECFF); }
/* Data em bloco (mesma linguagem do mapa/fluxograma) */
.pl-data {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; background:var(--dsv); color:#fff; flex:none;
}
.pl-bloco.fds .pl-data { background:var(--sky-deep); }   /* marca, não "fechado" */
.pl-dd { font-size:1.05rem; font-weight:800; line-height:1; }
.pl-mm { font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.pl-h-txt { display:flex; flex-direction:column; }
.pl-h-txt b { font-size:.92rem; color:var(--text); }
.pl-h-txt span { font-size:.71rem; color:var(--text-muted); }
.pl-h-num { margin-left:auto; text-align:right; }
.pl-h-num b { font-size:1rem; color:var(--text); }
.pl-h-num span { font-size:.64rem; color:var(--text-light); display:block; }
.pl-h-eur {
  font-size:.95rem; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums;
  min-width:110px; text-align:right;
}

.pl-lista { list-style:none; margin:0; padding:0; }
.pl-li {
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-bottom:1px solid var(--border);
}
.pl-li:last-child { border-bottom:0; }
.pl-li:hover { background:var(--bg); }
.pl-id { display:flex; flex-direction:column; gap:4px; min-width:0; }
.pl-id b { font-family:var(--mono); font-size:.86rem; letter-spacing:.02em; color:var(--text); }
.pl-tags { display:flex; gap:5px; flex-wrap:wrap; }
.pl-tag {
  font-size:.63rem; font-weight:700; color:var(--text-muted);
  background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:1px 8px;
}
.pl-tag.arm { color:var(--dsv-light); border-color:#CBD9F5; background:#F2F6FF; }
.pl-tag.dia { color:var(--text-light); }
.pl-val { margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:2px; }
.pl-val > b { font-size:.95rem; font-variant-numeric:tabular-nums; color:var(--text); }
.pl-urg { font-size:.68rem; font-weight:800; }
.pl-urg.alta { color:var(--danger-dark); }
.pl-urg.media { color:var(--warn); }
.pl-urg.baixa { color:var(--sky-deep); }
.pl-urg.zero { color:var(--ok); }

.pl-sobram {
  margin-top:18px; background:var(--danger-bg); border:1px solid var(--danger-bd);
  border-radius:13px; padding:14px 16px;
}
.pl-sobram h4 { font-size:.9rem; color:var(--danger-dark); margin-bottom:5px; }
.pl-sobram p { font-size:.76rem; color:var(--text-muted); line-height:1.55; margin-bottom:10px; }
.pl-sobram-l { display:flex; gap:7px; flex-wrap:wrap; }
.pl-sobram-c {
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--danger-bd);
  border-radius:8px; padding:5px 11px; font-size:.72rem; color:var(--danger-dark); font-weight:700;
}
.pl-sobram-c b { font-family:var(--mono); font-size:.74rem; color:var(--text); font-weight:700; }

@media (max-width:900px) {
  .pl-ctrl { width:100%; }
  .pl-h-eur { min-width:auto; }
  .pl-li { flex-wrap:wrap; }
}

/* Contentor avulso: o rascunho "e se…". Fundo diferente da tabela real, de
   propósito — não se confunde uma hipótese com o que se está mesmo a pagar. */
.sim-avulso-btn { margin-left:10px; vertical-align:middle; }
.sim-avulso {
  background:#F7F9FE; border:1px dashed var(--border-strong); border-radius:12px;
  padding:14px 16px; margin-bottom:14px;
}
.modal .m-body .sim-ctrl-av { margin-left:0; flex-wrap:wrap; gap:10px; }
.modal .m-body .sim-ctrl-av label { margin:0; }
.sim-avulso-resumo {
  background:var(--card); border:1px solid var(--border); border-radius:9px;
  padding:9px 12px; font-size:.85rem; margin:10px 0; line-height:1.5;
}
.sim-avulso .sim-dias { max-height:340px; }

.sim-saltos { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.sim-chip {
  font-size:.7rem; font-weight:700; background:var(--warn-bg); color:var(--warn);
  border:1px solid var(--warn-bd); border-radius:20px; padding:2px 9px;
}
.sim-chip.passou { background:var(--bg); color:var(--text-light); border-color:var(--border); font-weight:600; }

@media (max-width:900px) {
  .sim-ctrl { margin-left:0; }
  .sim-tab { font-size:.76rem; }
}

/* ---- Identificação do camião que veio buscar a carga ----
   Verde discreto: é informação confirmada, não um alerta nem uma ação. */
.tr-box {
  margin:12px 0 2px; padding:11px 13px; border-radius:11px;
  background:#F4FAF6; border:1px solid #CDE7D8; border-left:4px solid var(--ok);
}
.tr-cab {
  display:flex; align-items:center; gap:7px; margin-bottom:7px;
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ok);
}
.tr-cab svg { width:15px; height:15px; flex:none; }
.tr-cab i { margin-left:auto; font-style:normal; font-weight:700; color:var(--text-light); letter-spacing:0; }
.tr-l { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:2px 0; }
.tr-l span { font-size:.75rem; color:var(--text-muted); }
.tr-l b { font-size:.92rem; color:var(--text); font-weight:700; text-align:right; word-break:break-all; }
.tr-l b.mono { font-family:var(--mono); letter-spacing:.03em; }
.tr-emp { margin-top:5px; font-size:.7rem; color:var(--text-light); }

/* ---- Onde vem o camião (rastreio Cartrack) ----
   Vive dentro da caixa verde "Quem veio buscar", separado por um traço: é a
   mesma matrícula, agora com a posição real. Fica sóbrio de propósito — é uma
   resposta, não um alarme (os alarmes desta app são vermelhos e apitam). */
.tr-gps { margin-top:9px; padding-top:8px; border-top:1px dashed #CDE7D8; }
.gps-espera, .gps-off { font-size:.78rem; color:var(--text-light); font-style:italic; }
.gps-l1 { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; font-size:.85rem; color:var(--text); }
.gps-mov { color:var(--ok); font-weight:800; }
.gps-parado { color:var(--text-muted); font-weight:700; }
.gps-quando { font-style:normal; font-size:.72rem; color:var(--text-light); }
/* Posição da última resposta boa da Cartrack: mostra-se, mas assumidamente velha. */
.gps-obsoleto {
  font-style:normal; font-size:.66rem; font-weight:700; color:#9A6B00;
  background:#FFF4D6; border-radius:20px; padding:1px 7px;
}
.gps-morada { margin-top:3px; font-size:.78rem; color:var(--text-muted); line-height:1.35; }
.gps-mapa { display:inline-block; margin-top:5px; font-size:.75rem; font-weight:700; color:var(--sky-deep); text-decoration:none; }
.gps-mapa:hover { text-decoration:underline; }

/* ================= OCORRÊNCIAS (problemas num serviço) =================
   Um serviço com problema não pode parecer igual a um que correu bem. Vermelho
   é para o que está em aberto; resolvido volta ao cinzento — deixa de gritar. */
.btn.alerta, button.alerta {
  background:linear-gradient(135deg,var(--warn),#D4820F); color:#fff; border:0;
}
.oco-chip {
  display:block; width:100%; margin:10px 0 2px; padding:9px 12px; border-radius:10px;
  font-size:.82rem; font-weight:700; text-align:left; cursor:pointer;
  background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn);
}
.oco-chip:hover { filter:brightness(.97); }
.oco-chip.urg { background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-dark); }
.oco-chip.ok { background:var(--bg); border-color:var(--border); color:var(--text-muted); font-weight:600; }

.oco-cab {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:12px; background:var(--warn-bg); border:1px solid var(--warn-bd);
}
.oco-cab.urg { background:var(--danger-bg); border-color:var(--danger-bd); }
.oco-motivo { font-size:1.15rem; font-weight:800; color:var(--text); }
.oco-meta { font-size:.76rem; color:var(--text-muted); margin-top:2px; }
.oco-badge {
  flex:none; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:#fff; background:var(--warn); border-radius:20px; padding:4px 11px;
}
.oco-badge.urg { background:var(--danger); }
.oco-badge.ok { background:var(--ok); }
.oco-texto {
  margin:14px 0; padding:14px 16px; background:var(--bg); border-radius:10px;
  border-left:4px solid var(--border-strong); font-size:.95rem; line-height:1.55; color:var(--text);
  white-space:pre-wrap;
}
.oco-sec { margin-top:18px; }
.oco-sec h4 {
  font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); margin:0 0 8px;
}
/* Ligar é a acção principal desta janela: o problema resolve-se ao telefone */
.oco-tels { display:flex; flex-wrap:wrap; gap:10px; }
.oco-tel {
  flex:1; min-width:190px; text-decoration:none; padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:#fff;
  box-shadow:0 2px 8px rgba(25,40,98,.22);
}
.oco-tel:hover { filter:brightness(1.08); }
.oco-tel-p {
  display:block; font-size:.58rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; opacity:.75;
}
.oco-tel-n { display:block; font-size:.8rem; opacity:.9; }
.oco-tel b { display:block; font-size:1.05rem; font-family:var(--mono); margin-top:3px; }

.oco-chat { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.oco-chat li {
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:10px 13px; max-width:82%;
}
.oco-chat li.meu { align-self:flex-end; background:#EEF4FD; border-color:#CFDCF5; }
.oco-m-txt { font-size:.9rem; line-height:1.5; color:var(--text); white-space:pre-wrap; }
.oco-m-q { margin-top:4px; font-size:.68rem; color:var(--text-light); }
/* Especificidade a mais de propósito: o `.acoes button` genérico pintava-o de
   azul e o fecho da ocorrência ficava igual a "escrever mensagem". */
.acoes button.oco-resolver, .oco-resolver {
  background:linear-gradient(135deg,var(--ok),var(--ok-light)); color:#fff; border:0;
  padding:12px 18px; font-weight:700;
}
.oco-fecho {
  margin-top:16px; padding:14px 16px; border-radius:12px;
  background:#F2FAF5; border:1px solid #C6E7D3; font-size:.85rem; color:var(--text-muted);
}
.oco-fecho b { color:var(--ok); font-size:.95rem; }
.oco-fecho-t { margin-top:6px; color:var(--text); line-height:1.5; white-space:pre-wrap; }

/* ---- Painel de alertas da DSV: tem de dar nas vistas ---- */
.al-painel { border:2px solid var(--warn); }
.al-painel.urg { border-color:var(--danger); }
.al-painel.calmo { border:1px solid var(--border); }
.al-ok { padding:14px; text-align:center; color:var(--ok); font-weight:700; font-size:.9rem; }
.al-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.al-li {
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:var(--warn-bg); border:1px solid var(--warn-bd); border-left:4px solid var(--warn);
  border-radius:12px; padding:14px 16px;
}
.al-li.urg { background:var(--danger-bg); border-color:var(--danger-bd); border-left-color:var(--danger); }
/* Por ver = ainda ninguém pegou nisto. Pisca até alguém abrir. */
.al-li.novo { animation:al-pisca 1.6s ease-in-out infinite; }
@keyframes al-pisca {
  0%,100% { box-shadow:0 0 0 0 rgba(217,58,49,0); }
  50%     { box-shadow:0 0 0 5px rgba(217,58,49,.18); }
}
.al-corpo { flex:1; min-width:240px; }
.al-topo { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.al-motivo { font-size:1.05rem; font-weight:800; color:var(--text); }
.al-tag {
  font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:#fff; background:var(--danger); border-radius:20px; padding:3px 9px;
}
.al-tag.novo { background:var(--warn); }
.al-serv { margin-top:3px; font-size:.78rem; color:var(--text-muted); }
.al-serv b { font-family:var(--mono); color:var(--dsv); }
.al-txt { margin-top:7px; font-size:.9rem; line-height:1.5; color:var(--text); }
.al-quem { margin-top:5px; font-size:.7rem; color:var(--text-light); }
.al-ac { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.al-tel {
  text-decoration:none; font-size:.74rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light));
  border-radius:10px; padding:9px 13px; box-shadow:0 2px 6px rgba(25,40,98,.2);
}
.al-tel span { display:block; font-family:var(--mono); font-size:.82rem; font-weight:800; }
.al-tel:hover { filter:brightness(1.08); }
.al-btn {
  border:0; border-radius:10px; padding:12px 18px; font-weight:700; font-size:.88rem;
  color:#fff; background:linear-gradient(135deg,var(--danger),var(--danger-dark)); cursor:pointer;
}
.al-btn:hover { filter:brightness(1.08); }

/* ---- Fila de vazios a levantar (painel do transportador) ----
   Linhas a toda a largura, de cima para baixo: é uma FILA, lê-se por ordem.
   Cada linha tem de responder de relance a "qual levo, para onde, há quanto
   tempo espera" — e ter um botão que se acerta com luvas de trabalho. */
.fq { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fq-li {
  display:flex; align-items:center; gap:16px;
  background:var(--card); border:1px solid var(--border); border-left:4px solid var(--border-strong);
  border-radius:12px; padding:14px 16px;
}
.fq-li.prox {
  border-left-color:var(--dsv); background:linear-gradient(135deg,#F5F8FD,#EDF3FC);
  box-shadow:var(--shadow);
}
.fq-pos { flex:none; width:66px; text-align:center; }
.fq-n {
  display:block; font-family:var(--mono); font-size:1.45rem; font-weight:800;
  color:var(--text-light); line-height:1.1;
}
.fq-et {
  display:block; margin-top:2px; font-size:.55rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--text-light);
}
.fq-li.prox .fq-n { color:var(--dsv); }
.fq-li.prox .fq-et { color:var(--accent); }
.fq-corpo { flex:1; min-width:0; }
.fq-topo { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.fq-num {
  font-family:var(--mono); font-size:1.2rem; font-weight:800;
  color:var(--text); letter-spacing:.03em;
}
.fq-chip {
  font-size:.68rem; font-weight:700; color:var(--text-muted);
  background:var(--bg); border:1px solid var(--border); border-radius:20px; padding:2px 9px;
}
.fq-chip.esp { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-bd); }
.fq-dest { margin-top:5px; font-size:.9rem; color:var(--text-muted); }
.fq-dest b { font-size:1.05rem; color:var(--dsv); font-weight:800; }
.fq-obs { margin-top:3px; font-size:.76rem; color:var(--text-light); font-style:italic; }
.fq-ac { flex:none; }
.fq-btn {
  padding:13px 22px; font-size:.95rem; font-weight:700; border:0; border-radius:10px;
  color:#fff; background:linear-gradient(135deg,var(--dsv),var(--dsv-light));
  cursor:pointer; box-shadow:0 2px 8px rgba(25,40,98,.22);
}
.fq-btn:hover { filter:brightness(1.08); }
.fq-nota { font-size:.72rem; color:var(--text-light); max-width:120px; display:block; text-align:right; }
.fq-vazia {
  background:var(--bg); border:1px dashed var(--border-strong); border-radius:12px;
  padding:20px; text-align:center; color:var(--text-muted); font-size:.88rem;
  list-style:none;
}

/* ---- Variantes do painel da COFEMEL (a mesma fila, mas quem MANDA nela) ----
   Aqui a fila não é só para consultar: há linhas que exigem acção (sem parque)
   e linhas que já são história (saiu). Têm de se distinguir de longe. */
.fq-kpis { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.fq-kpi {
  flex:1; min-width:130px; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; padding:11px 14px;
}
.fq-kpi b { display:block; font-size:1.5rem; font-weight:800; color:var(--dsv); line-height:1.1; }
.fq-kpi span {
  display:block; margin-top:2px; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);
}
.fq-kpi.alerta { background:var(--warn-bg); border-color:var(--warn-bd); }
.fq-kpi.alerta b { color:var(--warn); }
.fq-kpi.alerta span { color:var(--warn); }

.fq-li { position:relative; }
.fq-li.falta { border-left-color:var(--warn); background:var(--warn-bg); }
.fq-li.saiu { border-left-color:var(--ok); background:#F5FBF7; opacity:.85; }
.fq-n.falta { color:var(--warn); }
.fq-n.ok { color:var(--ok); }
.fq-et.falta { color:var(--warn); }
.fq-dest.falta { color:var(--warn); }
.fq-dest.falta b { color:var(--warn); font-size:.95rem; }
.fq-saiu { text-align:right; font-size:.76rem; color:var(--text-muted); }
.fq-saiu b { display:block; font-size:.88rem; color:var(--ok); }
.fq-saiu span { display:block; }

.fq-btn.sec {
  background:var(--card); color:var(--dsv); border:1px solid var(--border-strong);
  box-shadow:none; padding:12px 16px;
}
.fq-btn.sec:hover { background:var(--bg); filter:none; }
.fq-btn.alerta { background:linear-gradient(135deg,var(--warn),#D4820F); box-shadow:0 2px 8px rgba(180,105,14,.25); }
.fq-ac { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
/* O cancelar é a acção menos usada: fica discreto no canto, não compete com nada */
.fq-x {
  position:absolute; top:6px; right:8px; border:0; background:none; cursor:pointer;
  font-size:1.1rem; line-height:1; color:var(--text-light); padding:4px 6px; border-radius:6px;
}
.fq-x:hover { color:var(--danger); background:var(--danger-bg); }
.fq-li .fq-ac { padding-right:16px; }
@media (max-width:640px) {
  .fq-li { flex-wrap:wrap; }
  .fq-ac { width:100%; }
  .fq-btn { width:100%; }
  .fq-nota { text-align:center; max-width:none; }
}

/* Fila no painel do transportador (só consulta) */
.fila { list-style:none; display:flex; flex-direction:column; gap:8px; }
.fila-li {
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--border-strong);
  border-radius:10px; padding:11px 13px;
}
.fila-li.prox { border-left-color:var(--dsv); background:linear-gradient(135deg,#F5F8FD,#EEF3FB); }
.fila-pos {
  flex:none; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-family:var(--mono); font-size:.78rem; font-weight:800;
  color:var(--text-muted); background:var(--bg); border:1px solid var(--border);
}
.fila-li.prox .fila-pos { color:#fff; background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); border-color:var(--dsv); }
.fila-txt { flex:1; min-width:0; }
.fila-txt b { font-size:.95rem; font-weight:800; color:var(--text); letter-spacing:.02em; }
.fila-med { font-size:.66rem; color:var(--text-light); font-family:var(--mono); }
.fila-dest { font-size:.74rem; color:var(--text-muted); margin-top:2px; }
.fila-dest b { font-size:.8rem; color:var(--dsv); }
.fila-tag {
  flex:none; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:#fff; background:linear-gradient(135deg,var(--dsv),var(--dsv-light));
  border-radius:999px; padding:4px 10px;
}

.vz-li.vazio-li {
  display:block; color:var(--text-light); font-size:.76rem; line-height:1.5; text-align:center;
  padding:16px 12px; border-style:dashed; border-left-style:dashed;
  border-left-color:var(--border); background:transparent;
}

/* par "de → para" no histórico/feed */
.log-dp { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:4px; }
.log-dp span {
  font-family:var(--mono); font-size:.7rem; font-weight:700; padding:2px 7px; border-radius:6px;
  max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.log-dp .de {
  background:var(--bg); color:var(--text-muted); border:1px solid var(--border);
  text-decoration:line-through; text-decoration-color:var(--border-strong);
}
.log-dp .para { background:#EAF6EF; color:var(--ok); border:1px solid #BFE3CD; }
.log-dp i { color:var(--text-light); font-style:normal; font-weight:800; }

/* Barra de progresso com camião */
.track { position:relative; height:60px; margin:16px 2px 4px; }
.track .rail { position:absolute; left:16px; right:16px; top:18px; height:6px; background:#E7ECF4; border-radius:6px; }
.track .fill {
  position:absolute; left:16px; top:18px; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--dsv-light),var(--sky),var(--ok-light)); transition:width .5s ease;
}
.track .node {
  position:absolute; top:14px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid #CDD6E6; transform:translateX(-50%); z-index:1;
}
.track .node.on { border-color:var(--dsv-light); box-shadow:0 0 0 3px rgba(46,69,160,.14); }
.track .node.done { border-color:var(--ok); background:var(--ok); }
.track .truck {
  position:absolute; top:3px; transform:translateX(-50%); width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid var(--border); box-shadow:0 3px 10px rgba(25,40,98,.2);
  display:flex; align-items:center; justify-content:center; transition:left .5s ease; z-index:2;
}
.track .truck svg { width:20px; height:20px; display:block; }
.track .labels {
  position:absolute; left:16px; right:16px; top:40px; display:flex; justify-content:space-between;
  font-size:.58rem; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.06em;
}
.track .labels span.at { color:var(--dsv); font-weight:800; }

/* Filtros por estado */
.filtros { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.filtros button {
  background:var(--card); border:1px solid var(--border); color:var(--text-muted);
  padding:8px 15px; border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.03em;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.filtros button:hover { border-color:var(--dsv-light); color:var(--dsv); }
.filtros button.ativo {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:#fff;
  border-color:var(--dsv); box-shadow:0 2px 8px rgba(25,40,98,.24);
}
/* O NUMERO E' A INFORMACAO. Era .72rem com 72% de opacidade — a coisa mais
   pequena e mais apagada de uma barra em que e' precisamente o que se procura.
   Passa a ler-se de relance. */
.filtros button .c { opacity:1; font-family:var(--mono); font-size:.86rem;
  font-weight:800; margin-left:3px; }
.filtros button.ativo .c { opacity:.95; }
/* O PONTO DA COR DO ESTADO. E' o mesmo azul/ambar/azul-escuro dos selos das
   linhas: a aba e a linha passam a dizer a mesma coisa da mesma maneira, e
   liga-se uma a' outra sem ler. */
.filtros button .pt { display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:7px; vertical-align:1px; background:var(--tom, #98a0b0); }
.filtros button.t-azul  { --tom:#3d8bd4; }   /* a descarregar */
.filtros button.t-ambar { --tom:#E9A23B; }   /* em transito   */
.filtros button.t-dsv   { --tom:#5a6bbf; }   /* no ponto      */
.filtros button.t-cinza { --tom:#93a0b5; }   /* sem ponto     */
.filtros button.ativo .pt { background:#fff; }
/* O "Em aberto" e' o TOTAL dos quatro do meio e os "Entregues" sao arquivo —
   nao sao irmaos dos estados. Um traco de cada lado chega para o dizer. */
.f-sep { width:1px; align-self:stretch; background:var(--borda); margin:2px 4px; }

/* Pesquisa por dia */
.dia-bar {
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:16px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.dia-bar label { margin:0 0 5px; }
.dia-bar input[type=date] { width:auto; }

/* Calendário mensal */
.cal {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px; margin-bottom:18px; box-shadow:var(--shadow);
}
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.cal-titulo { font-weight:800; color:var(--dsv); font-size:1.02rem; letter-spacing:.01em; }
.cal-titulo::first-letter, .dia-cab::first-letter { text-transform:uppercase; }
.cal-head button {
  width:36px; height:36px; border-radius:10px; border:1px solid var(--border-strong); background:#fff;
  color:var(--dsv); font-size:1.2rem; cursor:pointer; line-height:1; transition:background .15s, border-color .15s;
}
.cal-head button:hover { background:var(--bg); border-color:var(--dsv-light); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { margin-bottom:6px; }
.cal-dow > div {
  text-align:center; font-size:.58rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-light); padding:4px 0;
}
.cal-cell { position:relative; min-height:54px; border:1px solid var(--border); border-radius:10px; padding:6px; }
.cal-cell.empty { border:0; background:transparent; }
.cal-cell .dn { font-size:.78rem; color:var(--text-light); font-family:var(--mono); }
/* HOJE e' um PONTO por baixo do numero, nao um anel. O anel era azul e a seleccao
   passou a ser azul tambem: o dia de hoje aparecia sempre com ar de escolhido,
   mesmo sem ninguem lhe ter tocado. Um ponto diz "e' hoje" sem se confundir com
   "escolhi este", e sobrevive por cima da seleccao em vez de ser tapado por ela. */
.cal-cell.hoje .dn { position:relative; color:var(--dsv); font-weight:800; }
.cal-cell.hoje .dn::after {
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--dsv);
}
.cal-cell.tem { cursor:pointer; background:#EAF6EF; border-color:#BFE3CD; transition:background .15s; }
.cal-cell.tem .dn { color:var(--text); font-weight:700; }
.cal-cell.tem:hover { background:#D8EEDE; }
/* SELECAO POR CONTORNO, NAO POR ENCHIMENTO.
   O verde cheio dava duas coisas mas: escurecia a celula ao ponto de o numero
   se perder, e competia com o proprio verde dos dias que TEM processos — a
   mesma cor a dizer "ha' aqui trabalho" e "escolhi este". Sao perguntas
   diferentes e agora tem marcas diferentes:
     · TEM processos -> fundo verde palido + selo com o numero (nao mexe)
     · ESCOLHIDO     -> anel azul DSV a' volta, fundo praticamente na mesma
   O anel vai em `box-shadow` e nao em `border`: a borda empurrava o conteudo
   meio pixel e as celulas dancavam ao seleccionar. */
.cal-cell.sel {
  border-color:var(--dsv-light);
  box-shadow:0 0 0 2px var(--dsv-light) inset, 0 2px 8px rgba(25,40,98,.10);
}
.cal-cell.sel .dn { color:var(--dsv); font-weight:800; }
/* As PONTAS da faixa sao o anel mais forte e um pouco de elevacao — continua a
   ler-se onde a faixa comeca e acaba, sem pintar a celula de escuro. */
.cal-cell.sel.ini, .cal-cell.sel.fim {
  border-color:var(--dsv);
  box-shadow:0 0 0 2.5px var(--dsv) inset, 0 3px 10px rgba(25,40,98,.18);
}
.cal-cell.sel.ini .dn, .cal-cell.sel.fim .dn { color:var(--dsv); }
/* Um dia SEM entregas continua a ser clicavel — mas nao se pinta de verde: o
   verde e' "ha' aqui alguma coisa". */
.cal-cell { cursor:pointer; transition:box-shadow .14s, background .14s, border-color .14s; }
.cal-cell.empty { cursor:default; }
.cal-cell:not(.tem):hover { background:var(--bg, #f4f7fc); border-color:var(--border-strong); }
.cal-badge {
  position:absolute; right:6px; bottom:6px;
  background:linear-gradient(135deg,var(--ok-light),var(--ok)); color:#fff;
  font-size:.64rem; font-weight:800; min-width:19px; height:19px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
}
/* A FAIXA PARA O REPORT, centrada por baixo do calendario. O calendario responde
   a "que dia foi?"; isto responde a "de quando a quando quero o Excel?". Duas
   perguntas diferentes, dois sitios diferentes — foi por as ter juntado no mesmo
   gesto (1o clique abre, 2o fecha) que o calendario ficou impossivel de usar. */
.cal-faixa {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  margin-top:14px; padding:12px 14px; border-radius:12px;
  background:var(--bg, #f4f7fc); border:1px solid var(--border);
}
/* Os botoes DE/ATE sao os MESMOS do filtro de periodo (.fp-dt) e abrem o mesmo
   calendario. Aqui so' se centram — a aparencia vem de la', para nao haver dois
   seletores de data com ar diferente na mesma aplicacao. */
.cal-faixa .btn { padding:7px 13px; font-size:.72rem; }

/* Painel que so' leva os separadores — e' o caso da vista do Patio, onde o
   conteudo vem no painel proprio dele logo a seguir. Sem o espaco de baixo, que
   e' para o titulo e a lista que aqui nao existem. */
.painel.pn-nav { padding-bottom:14px; margin-bottom:14px; }
.painel.pn-nav .lista-bar { margin-bottom:0; }

/* ---- ARMADOR POR CONFIRMAR, escolhido na propria linha dos custos ----
   A tabela de tarifas e' do armador. Sem ele confirmado a conta sai de um
   palpite, e o unico sitio para corrigir era abrir o contentor e editar o
   formulario todo. Fica ambar (o mesmo "atencao" do resto da app) com um "?" a'
   frente, para se distinguir de uma etiqueta normal — que e' o que uma linha ja'
   confirmada continua a ter. */
/* AS ETIQUETAS NAO SE ESTICAM UMAS A'S OUTRAS.
   `.ct-tags` e' flex sem `align-items`, logo o padrao e' `stretch`: a etiqueta do
   armador, que leva um <select> dentro e por isso e' mais alta, esticava TODAS as
   vizinhas para a altura dela. O cartao inteiro ficava com caixas altas e vazias.
   Basta centrar — cada etiqueta volta a ter a altura do seu proprio texto. */
.ct-tags, .pl-tags { align-items:center; }

.pl-tag.arm.por-conf {
  display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  background:var(--warn-bg); border:1px dashed var(--warn-bd); color:var(--warn);
  /* O MESMO padding e a MESMA forma das outras etiquetas: isto continua a ser uma
     etiqueta, so' que se pode carregar nela. */
  padding:1px 8px; border-radius:20px; position:relative;
}
.pl-tag.arm.por-conf .arm-q { font-weight:900; opacity:.7; }
/* O <select> nativo traz altura, margens e uma seta do sistema que nada disto
   consegue igualar — tira-se tudo e fica so' o texto. A seta e' desenhada aqui em
   baixo, para ter o tamanho certo para uma etiqueta de 10px. */
.pl-tag.arm.por-conf select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:0; background:transparent; color:inherit; cursor:pointer;
  font-family:inherit; font-size:inherit; font-weight:800; line-height:inherit;
  padding:0 11px 0 0; margin:0; height:auto;
}
.pl-tag.arm.por-conf::after {
  content:""; position:absolute; right:8px; top:50%; width:5px; height:5px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg); opacity:.65; pointer-events:none;
}
.pl-tag.arm.por-conf:hover { background:#FDF0D9; border-style:solid; }
.pl-tag.arm.por-conf:focus-within { outline:2px solid var(--sky-deep); outline-offset:2px; }

/* ---- REPORTS ---- */
.rp-lista { display:flex; flex-direction:column; gap:8px; }
.rp-item {
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:12px 14px; border-radius:11px;
  border:1px solid var(--border); background:var(--card); color:var(--text);
  transition:border-color .12s, background .12s, box-shadow .12s;
}
.rp-item:hover { border-color:var(--dsv-light); background:var(--bg); box-shadow:0 2px 8px rgba(25,40,98,.10); }
.rp-txt { display:flex; flex-direction:column; gap:2px; }
.rp-txt b { font-size:.86rem; }
.rp-txt small { color:var(--text-light); font-size:.72rem; }
.rp-ic { margin-left:auto; color:var(--dsv); font-size:1rem; }
.rp-sep { display:flex; align-items:center; gap:10px; margin:16px 0 12px; }
.rp-sep::before, .rp-sep::after { content:""; flex:1; height:1px; background:var(--border); }
.rp-sep span { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-light); }
.rp-faixa { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.rp-faixa label {
  display:flex; align-items:center; gap:7px;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
}
.rp-faixa input[type="date"] {
  font-family:var(--mono); font-size:.8rem; color:var(--text); text-transform:none; letter-spacing:0;
  padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--card);
}

.cal-dica { margin-top:10px; font-size:.72rem; color:var(--text-light); text-align:center; }
.cal-dica b { color:var(--text-muted); }
.dia-grupo { margin-bottom:22px; }
.dia-grupo:first-of-type { margin-top:4px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media (max-width:1100px){ .grid-4 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:800px){ .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .grid-4 { grid-template-columns:1fr; } }
.dia-cab {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.85rem; font-weight:800; color:var(--dsv);
  padding:10px 14px; background:linear-gradient(135deg,#EEF4FD,#E6EEFB);
  border:1px solid #CFDCF5; border-left:4px solid var(--ok);
  border-radius:10px; margin-bottom:12px; box-shadow:var(--shadow);
}
.dia-cab span { font-size:.7rem; font-weight:600; color:var(--text-muted); text-transform:none; font-family:var(--mono); }

/* ================= Painel Admin ================= */
h2.sec-t {
  font-size:1.02rem; font-weight:800; color:var(--dsv); margin:28px 2px 12px;
  display:flex; align-items:baseline; gap:10px; letter-spacing:.01em;
}
h2.sec-t span { font-size:.72rem; font-weight:500; color:var(--text-light); text-transform:none; letter-spacing:0; }

/* ---- ABAS DE SECÇÃO (contentores / pátio) ----
   As duas listas do mesmo trabalho: o cheio que entra e o vazio que sai. O
   pátio esteve numa dobra no fundo da página e ninguém se lembrava dela.
   Mesma cápsula dos presets do filtro (`.fp-presets`) — é a peça que a app já
   usa para "escolher uma de várias vistas", e repeti-la aqui poupa a quem abre
   o painel ter de aprender um controlo novo. */
h2.sec-t.sec-abas { justify-content:space-between; align-items:center; flex-wrap:wrap; }
.sec-abas .abas {
  display:flex; gap:2px; padding:3px; font-size:1rem;   /* anula o .sec-t span */
  background:var(--white); border:1px solid var(--border);
  border-radius:22px; box-shadow:inset 0 1px 2px rgba(25,40,98,.04);
}
.sec-abas .abas button {
  display:flex; align-items:center; gap:7px;
  border:0; background:transparent; color:var(--text-muted);
  border-radius:18px; padding:6px 15px; font-size:.78rem; font-weight:700;
  font-family:var(--sans); cursor:pointer; transition:background .12s, color .12s;
}
.sec-abas .abas button:hover { background:var(--bg); color:var(--text); }
.sec-abas .abas button.on {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:var(--white);
  box-shadow:0 1px 3px rgba(25,40,98,.28);
}
/* O contador vai NO botão: vê-se que há 5 vazios por devolver sem lá ir. Uma
   aba que obriga a clicar para saber se vale a pena clicar não serve de nada. */
.sec-abas .abas button i {
  font-style:normal; font-size:.68rem; font-weight:800; line-height:1;
  padding:3px 7px; border-radius:999px;
  background:var(--bg); color:var(--text-muted);
}
.sec-abas .abas button.on i { background:rgba(255,255,255,.18); color:#fff; }
/* Vermelho = o que trava a devolução (vazios sem parque indicado). É o único
   motivo para largar os contentores e ir ao pátio, por isso vê-se de fora. */
.sec-abas .abas button i.mal { background:var(--danger-bg,#FDECEA); color:var(--danger,#D93A31); }
.sec-abas .abas button.on i.mal { background:var(--danger,#D93A31); color:#fff; }

.adm-hero-stats {
  display:flex; gap:34px; margin-top:18px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18); flex-wrap:wrap;
}
.adm-hero-stats > div b { display:block; font-size:1.5rem; font-weight:800; line-height:1; }
.adm-hero-stats > div span {
  font-size:.62rem; font-weight:700; opacity:.78; text-transform:uppercase; letter-spacing:.08em;
}

/* Editor de preços em cartões */
.tar-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.tar-card {
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:15px;
  box-shadow:var(--shadow); transition:border-color .15s, box-shadow .15s;
}
.tar-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-lg); }
.tar-card.glob { background:linear-gradient(135deg,#EEF4FD,#E6EEFB); border-color:#CFDCF5; }
.tar-card .tc-nome { font-weight:800; color:var(--dsv); font-size:.92rem; margin-bottom:11px; letter-spacing:.01em; }
.tar-card label {
  display:block; font-size:.58rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted); margin-bottom:5px;
}
.tar-card .tc-campos { display:flex; gap:12px; }
.tar-card .tc-campos > div { flex:1; min-width:0; }
.tar-card .tc-inp { display:flex; align-items:center; gap:7px; }
.tar-card .tc-inp input {
  width:100%; min-width:0; height:40px; font-family:var(--mono); font-weight:700;
  color:var(--dsv); font-size:.95rem;
}
.tar-card .tc-inp span { color:var(--text-light); font-weight:800; }
/* Sem risco a separar. A margem já se distingue por ser outra coisa — rótulo
   pequeno, número grande e verde — e o tracejado a meio do cartão cortava a
   leitura em dois sem separar nada que precisasse de ser separado. */
.tar-card .tc-res {
  margin-top:12px;
  font-size:.58rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em;
}
.tar-card .tc-res b {
  display:block; font-size:1.15rem; font-weight:800; color:var(--ok);
  text-transform:none; letter-spacing:0; margin-top:3px;
}
/* Margem negativa: vender abaixo do custo e' quase sempre uma casa decimal
   trocada. Fica vermelho ENQUANTO SE ESCREVE, que e' quando ainda se corrige
   sem consequencias — depois de guardado ja' esta' em todos os contentores. */
.tar-card .tc-res b.neg { color:var(--danger); }
.tar-rodape {
  display:flex; align-items:center; gap:14px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--border); flex-wrap:wrap;
}
.tar-ok { color:var(--ok); font-weight:700; font-size:.82rem; }

/* Pesquisa */
/* ================= Historico de valores (pop-up) =========================
   O unico sitio onde o cliente ve dinheiro. Saiu do cartao porque o painel da
   COFEMEL esta aberto no armazem e na logistica — ver a nota em cartao(). */
.vl-espera { padding:26px 4px; color:var(--text-light); font-size:.85rem; }
.vl-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:700px){ .vl-kpis { grid-template-columns:repeat(2,1fr); } }
.vl-kpi {
  background:var(--bg); border:1px solid var(--border); border-radius:11px;
  padding:11px 13px; display:flex; flex-direction:column; gap:2px;
}
.vl-kpi b { font-family:var(--mono); font-size:1.05rem; font-weight:700; color:var(--dsv); }
.vl-kpi span { font-size:.66rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.06em; }
.vl-aviso {
  padding:9px 12px; border-radius:9px; margin-bottom:12px; font-size:.76rem;
  color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-bd);
}
.vl-barra { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
  font-size:.74rem; color:var(--text-light); }
/* A tabela pode ser longa: rola dentro da propria caixa, com o cabecalho colado
   ao topo. Sem isto perdia-se a coluna a que cada numero pertence. */
.vl-tab-wrap { max-height:52vh; overflow:auto; border:1px solid var(--border); border-radius:11px; }
.vl-tab { width:100%; border-collapse:collapse; font-size:.78rem; }
.vl-tab thead th {
  position:sticky; top:0; z-index:1; background:var(--dsv); color:#fff;
  font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:9px 10px; text-align:left; white-space:nowrap;
}
.vl-tab td { padding:8px 10px; border-top:1px solid var(--border); vertical-align:middle; }
.vl-tab tbody tr:hover { background:var(--bg); }
.vl-c { text-align:center; }
.vl-e { text-align:right; font-family:var(--mono); white-space:nowrap; }
.vl-tab .vl-num { font-family:var(--mono); font-weight:700; color:var(--dsv); white-space:nowrap; }
.vl-tab .vl-num i { display:block; font-style:normal; font-size:.64rem; font-weight:400; color:var(--text-light); }
/* Linha estimada: mesma marca amarela que o Excel leva, para o ecra e o ficheiro
   contarem a mesma historia. */
.vl-tab tr.vl-est { background:#FFF7E6; }
.vl-tab tr.vl-est:hover { background:#FFF1D6; }

/* Barra da lista: separadores a esquerda, procura a direita, sempre a mesma linha.
   A procura andava a saltar de sitio (num dos ramos aparecia por baixo do
   calendario) e fazia os separadores desaparecer enquanto se escrevia. */
.lista-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.lista-bar .filtros { margin-bottom:0; flex:1 1 auto; }
.lista-bar .busca-wrap { margin:0; flex:0 1 300px; min-width:200px; margin-left:auto; }
.lista-bar .busca { height:40px; }
/* Estado sem resultados para a procura actual: apagado, mas NAO escondido — e o
   contador a zero que explica porque e' que aquele separador esta vazio. */
.filtros button.vazio:not(.ativo) { opacity:.45; }

/* "Nao ha aqui, mas ha ali" — com o botao para la ir. */
.busca-dica {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px;
  padding:10px 13px; border-radius:10px; font-size:.78rem; color:var(--text-muted);
  background:var(--warn-bg); border:1px solid var(--warn-bd);
}
.busca-dica b { color:var(--text); }
.bd-ir {
  border:1px solid var(--dsv); background:#fff; color:var(--dsv); cursor:pointer;
  padding:5px 11px; border-radius:999px; font-family:var(--sans); font-size:.74rem; font-weight:700;
}
.bd-ir:hover { background:var(--dsv); color:#fff; }

.busca-wrap { position:relative; display:flex; align-items:center; margin:4px 0 16px; }
.busca-wrap .busca-ico { position:absolute; left:14px; font-size:.95rem; opacity:.6; pointer-events:none; }
.busca-wrap .busca {
  width:100%; height:46px; padding:0 40px; border:1.5px solid var(--border); border-radius:10px;
  font-size:.9rem; background:#fff; color:var(--text); box-shadow:var(--shadow);
}
.busca-wrap .busca:focus { outline:none; border-color:var(--dsv); box-shadow:0 0 0 3px rgba(25,40,98,.1); }
.busca-wrap .busca-x {
  position:absolute; right:10px; width:26px; height:26px; border:none; background:#E9EDF4;
  border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1; color:var(--text-muted);
}
.busca-wrap .busca-x:hover { background:#DBE2EE; color:var(--text); }

/* Paginação */
.pag-bar {
  display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap;
  margin:18px 0 4px; font-size:.78rem; color:var(--text-muted);
}
.pag-bar .pg-info { white-space:nowrap; font-family:var(--mono); font-size:.72rem; }
.pag-bar .pg-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; }
.pag-bar .pg {
  min-width:36px; padding:7px 11px; border:1px solid var(--border); background:#fff;
  border-radius:9px; cursor:pointer; font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--text-muted);
  transition:background .15s, border-color .15s, color .15s;
}
.pag-bar .pg:hover:not(:disabled):not(.ativo) { background:var(--bg); border-color:var(--border-strong); color:var(--dsv); }
.pag-bar .pg.ativo {
  background:linear-gradient(135deg,var(--dsv),var(--dsv-light)); color:#fff;
  border-color:var(--dsv); box-shadow:0 2px 8px rgba(25,40,98,.22);
}
.pag-bar .pg:disabled { opacity:.4; cursor:default; }
.pag-bar .pg-el { padding:0 2px; color:var(--text-light); }

/* Legenda */
.tar-legenda { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.tar-legenda .lg-item {
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:11px 13px;
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.tar-legenda .lg-item::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--sky),var(--sky-deep));
}
.tar-legenda .lg-item b { display:block; font-size:.8rem; font-weight:800; color:var(--dsv); margin-bottom:4px; }
.tar-legenda .lg-item span { display:block; font-size:.74rem; color:var(--text-muted); line-height:1.5; }

/* Tabelas */
table.tabela { width:100%; border-collapse:collapse; font-size:.84rem; }
table.tabela th {
  text-align:left; font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; background:var(--dsv); padding:9px 11px; border-bottom:none;
}
table.tabela th:first-child { border-top-left-radius:9px; }
table.tabela th:last-child { border-top-right-radius:9px; }
table.tabela td { padding:9px 11px; border-bottom:1px solid var(--border); vertical-align:top; }
table.tabela tbody tr:hover { background:#F6F9FE; }
table.tabela td:nth-child(n+4), table.tabela th:nth-child(n+4) { text-align:right; }
table.tabela td:nth-child(n+4) { font-family:var(--mono); white-space:nowrap; }

/* Valor faturado ao cliente */
.valor-box {
  background:#F0F7F1; border:1px solid #CFE6D6; border-left:4px solid var(--ok);
  border-radius:10px; padding:9px 12px; margin:12px 0 2px;
}
.valor-box .vb-topo { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.valor-box .vb-topo span {
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted);
}
.valor-box .vb-topo b { font-size:1.05rem; font-weight:800; color:var(--ok); font-family:var(--sans); }
.valor-box .vb-detalhe { font-size:.66rem; color:var(--text-light); font-family:var(--mono); margin-top:2px; }
.valor-box.vazio-val {
  background:var(--bg); border-color:var(--border); border-left-color:var(--border-strong);
  color:var(--text-light); font-size:.76rem; text-align:center;
}

/* Destaque do levantamento (camionista) */
.levantar {
  background:linear-gradient(135deg,#EEF4FD,#E6EEFB);
  border:1px solid #CFDCF5; border-left:4px solid var(--dsv);
  border-radius:12px; padding:15px 17px; margin:12px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.levantar .lv-linha { display:flex; gap:14px; }
.levantar .lv-bloco { flex:1; min-width:0; }
.levantar .lv-hora { text-align:right; }
.levantar .et {
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); margin-bottom:3px;
}
.levantar .pt { font-size:1.5rem; font-weight:800; color:var(--dsv); line-height:1.15; word-break:break-word; }
.levantar .lv-hora .pt { font-size:1.15rem; color:var(--text); font-family:var(--mono); }
.levantar .lv-dest {
  margin-top:11px; padding-top:11px; border-top:1px dashed #C3D2EC;
  font-size:1rem; font-weight:800; color:var(--ok);
}
.levantar .lv-dest .et { display:inline; color:var(--text-muted); font-weight:700; margin-right:6px; }
/* Campo essencial para o transportador */
.levantar .lv-cofemel {
  background:var(--warn-bg); border:1px solid var(--warn-bd); border-left:4px solid var(--warn);
  border-radius:10px; padding:8px 12px;
}
.levantar .lv-cofemel .et { color:var(--warn); font-weight:800; }
.levantar .lv-cofemel .pt { color:#C26A12; font-weight:800; font-size:1.25rem; }

/* ---- Processo da viagem: 4 passos (levantar → largar → vazio → parque) ----
   O passo em curso é o único destacado e o único com botão: o motorista olha
   para o cartão e vê imediatamente o que lhe falta fazer, sem ler tudo. */
.proc {
  background:linear-gradient(135deg,#EEF4FD,#E6EEFB);
  border:1px solid #CFDCF5; border-radius:12px; padding:12px 14px; margin:12px 0;
}
.proc-cab { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.proc-tit {
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted);
}
.proc-cont {
  font-family:var(--mono); font-size:.72rem; font-weight:700; color:var(--dsv);
  background:#fff; border:1px solid #CFDCF5; border-radius:20px; padding:1px 9px;
}
.proc-lista { list-style:none; margin:0; padding:0; }
.proc-p {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
  border:1px solid transparent; margin-bottom:4px; background:rgba(255,255,255,.55);
}
.proc-p:last-child { margin-bottom:0; }
.proc-n {
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.76rem; font-weight:800; font-family:var(--mono);
  background:#fff; border:1.5px solid var(--border-strong); color:var(--text-muted);
}
.proc-txt { min-width:0; flex:1; }
.proc-txt b { display:block; font-size:.9rem; color:var(--text); line-height:1.25; }
.proc-txt small { display:block; font-size:.76rem; color:var(--text-muted); }
/* Os cartões vêm 3 por linha: se o botão ficasse ao lado do texto, o nº do
   contentor partia-se ao meio ("CMAU4410 023"). A acção leva linha própria. */
/* A acção do passo em curso é o que o motorista vem cá fazer: botão cheio,
   alto e azul — acerta-se de dedo grosso, dentro do camião. */
.proc-ac { flex-basis:100%; padding-left:34px; margin-top:8px; }
.proc-ac button {
  width:100%; padding:12px 16px; font-size:.92rem; font-weight:700; border:0; border-radius:10px;
  color:#fff; background:linear-gradient(135deg,var(--dsv),var(--dsv-light));
  cursor:pointer; box-shadow:0 2px 8px rgba(25,40,98,.22);
}
.proc-ac button:hover { filter:brightness(1.08); }

.proc-p.feito { opacity:.72; }
.proc-p.feito .proc-n { background:var(--ok); border-color:var(--ok); color:#fff; }
.proc-p.feito .proc-txt b { color:var(--text-muted); font-weight:600; }

.proc-p.agora {
  background:#fff; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(245,166,35,.16);
}
.proc-p.agora .proc-n { background:var(--warn); border-color:var(--warn); color:#fff; }
.proc-p.agora .proc-txt b { font-weight:800; color:var(--dsv); }

.proc-p.bloq { opacity:.5; }

/* ================= Painel Transportador ================= */
.tr-hero {
  background:linear-gradient(135deg,var(--dsv-dark) 0%,var(--dsv) 55%,var(--dsv-mid) 100%);
  color:#fff; border-radius:18px; padding:24px 26px; margin-bottom:20px;
  position:relative; overflow:hidden; box-shadow:0 8px 26px rgba(13,26,69,.28);
}
.tr-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:radial-gradient(circle at 90% -30%,rgba(61,165,224,.32),transparent 58%),
             repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.04) 26px 27px);
}
.tr-hero > * { position:relative; z-index:1; }
.tr-hero h1 { font-size:1.5rem; font-weight:800; margin-bottom:5px; letter-spacing:.01em; }
.tr-hero p { opacity:.8; font-size:.85rem; }
.tr-stats { display:flex; gap:26px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); flex-wrap:wrap; }
.tr-stats .st b { display:block; font-size:1.7rem; font-weight:800; line-height:1; }
.tr-stats .st span { font-size:.62rem; font-weight:700; opacity:.78; text-transform:uppercase; letter-spacing:.08em; }

.tr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:18px; }
.tr-card {
  background:var(--card); border:1px solid var(--border-strong); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .12s, box-shadow .15s;
  position:relative;
}
.tr-card::before {
  content:''; position:absolute; left:0; right:0; top:0; height:4px; z-index:1;
  background:linear-gradient(90deg,var(--dsv),var(--dsv-light),var(--sky));
}
.tr-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.tr-card .cab {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px 14px; background:linear-gradient(180deg,#F6FAFF 0%,#FFFFFF 100%);
  border-bottom:1px solid var(--border);
}
.tr-card .cab .n { font-weight:800; font-size:1.08rem; letter-spacing:.03em; color:var(--text); }
.tr-card .cab .tipo { font-size:.68rem; color:var(--text-light); font-family:var(--mono); }
.tr-card .corpo { padding:18px; }

/* Rota levantar -> entregar */
.rota { display:flex; align-items:stretch; gap:12px; }
.rota .col { flex:1; }
.rota .etiq {
  font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-light); margin-bottom:4px;
}
.rota .local { font-size:1.02rem; font-weight:800; color:var(--dsv); display:flex; align-items:center; gap:6px; }
.rota .seta { display:flex; align-items:center; color:var(--sky-deep); font-size:1.3rem; }
.rota .local.dest { color:var(--ok); }

.tr-linha {
  display:flex; justify-content:space-between; gap:12px; font-size:.82rem;
  padding:9px 0 0; margin-top:12px; border-top:1px dotted var(--border);
}
.tr-linha span:first-child {
  color:var(--text-light); font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; align-self:center;
}
.tr-linha span:last-child { font-family:var(--mono); color:var(--text); text-align:right; }

.estado-faixa {
  padding:11px 18px; font-size:.68rem; font-weight:800; color:#fff; text-align:center;
  text-transform:uppercase; letter-spacing:.1em;
}
.disp {
  display:inline-flex; align-items:center; gap:6px; background:#E8F6EE; color:var(--ok);
  border:1px solid #BFE3CD; padding:5px 12px; border-radius:999px;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.aguarda {
  display:inline-flex; align-items:center; gap:6px; background:var(--warn-bg); color:var(--warn);
  border:1px solid var(--warn-bd); padding:5px 12px; border-radius:999px;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}

/* ---- Scrollbar discreta (igual ao look da AIR) ---- */
.feed::-webkit-scrollbar, .modal .m-body::-webkit-scrollbar { width:8px; }
.feed::-webkit-scrollbar-thumb, .modal .m-body::-webkit-scrollbar-thumb {
  background:var(--border-strong); border-radius:8px;
}
.feed::-webkit-scrollbar-track, .modal .m-body::-webkit-scrollbar-track { background:transparent; }

/* ============================================================================
   FLUXOGRAMA DO DIA (mapa SVG em ecrã inteiro) — ver fluxo.js
   ========================================================================== */
body.fx-abre { overflow:hidden; }            /* o fundo não faz scroll com o mapa aberto */
#fx-ov {
  position:fixed; inset:0; z-index:9998; display:flex; flex-direction:column;
  background:var(--bg);
}
.fx-bar {
  flex:0 0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 18px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--dsv-dark) 0%,var(--dsv) 55%,var(--dsv-mid) 100%);
  box-shadow:0 2px 20px rgba(13,26,69,.3);
}
.fx-bar::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 92% -40%,rgba(61,165,224,.28),transparent 55%),
             repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.04) 26px 27px);
}
.fx-bar > * { position:relative; z-index:1; }
.fx-tt { display:flex; align-items:center; gap:12px; }
.fx-tt .fx-ic {
  width:38px; height:38px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:1.15rem; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
}
.fx-t1 { font-size:.95rem; font-weight:800; letter-spacing:.02em; line-height:1.15; }
/* só a primeira letra em maiúscula (capitalize punha "15 De Agosto De 2026") */
.fx-t2 { font-size:.68rem; color:rgba(255,255,255,.7); font-family:var(--mono); margin-top:2px; }
.fx-t2::first-letter { text-transform:uppercase; }
.fx-nav, .fx-acoes { display:flex; align-items:center; gap:8px; }
.fx-acoes { margin-left:auto; }
.fx-b {
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  padding:7px 13px; border-radius:9px; cursor:pointer; font-family:var(--sans);
  font-size:.74rem; font-weight:700; letter-spacing:.03em; transition:background .15s;
}
.fx-b:hover { background:rgba(255,255,255,.28); }
.fx-b.fx-x { background:rgba(217,58,49,.9); border-color:rgba(255,255,255,.3); }
.fx-b.fx-x:hover { background:#D93A31; }
/* A faixa do filtro por baixo da barra escura: é o mesmo `.fp` do painel, só
   encaixado aqui (sem cantos nem margem próprios, para ler como uma faixa da
   janela e não como um cartão a flutuar em cima do mapa). */
.fx-filtro { flex:0 0 auto; background:var(--card); border-bottom:1px solid var(--border); }
.fx-filtro:empty { display:none; }
.fx-filtro .fp {
  margin:0; border:0; border-radius:0; box-shadow:none; background:transparent;
  padding-bottom:8px;
}
.fx-filtro .fp::before { display:none; }
.fx-filtro .fp-topo { background:transparent; border-bottom:0; padding-bottom:0; margin-bottom:8px; }
/* Centrado. No painel o filtro vive num cartão estreito e alinhar à esquerda
   chega; aqui a janela tem a largura do monitor e o mesmo alinhamento deixava
   tudo encostado a um canto, com meio ecrã vazio ao lado. O mapa por baixo é
   simétrico — os controlos que mandam nele também têm de ser. */
.fx-filtro .fp-topo { justify-content:center; }
.fx-zoom { font-family:var(--mono); font-size:.7rem; color:rgba(255,255,255,.7); min-width:44px; text-align:right; }

.fx-legenda {
  flex:0 0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px; background:var(--card); border-bottom:1px solid var(--border);
}
.fx-lg {
  display:inline-flex; align-items:center; gap:7px; font-size:.7rem; font-weight:700;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;
}
.fx-lg i { width:22px; height:15px; border-radius:4px; border:1px solid var(--border-strong); display:inline-block; }
.fx-lg b { font-family:var(--mono); font-size:.8rem; color:var(--text); }
.fx-lg.fx-dica {
  margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500;
  color:var(--text-light); font-family:var(--mono); font-size:.66rem;
}

.fx-palco { flex:1 1 auto; overflow:hidden; cursor:grab; position:relative; }
.fx-palco.a-arrastar { cursor:grabbing; }
.fx-palco > svg { width:100%; height:100%; display:block; }
#fx-cam { transform-origin:0 0; }
/* nós e pastilhas do mapa */
#fx-cam .fx-clic { cursor:pointer; }
.fx-no { transition:opacity .18s; }
.fx-no:hover > rect:first-of-type { filter:brightness(1.18); }
.fx-pastilha:hover > rect { filter:brightness(.96); }

/* textos do mapa (no SVG as classes aplicam-se ao fill, não a color) */
#fx-svg text { font-family:var(--sans); }
/* caixa do sítio (o "pai" da árvore) */
.fx-cab-et { font-size:9px; font-weight:800; fill:#fff; opacity:.62; letter-spacing:.14em; }
.fx-cab-n { font-size:19px; font-weight:800; fill:#fff; letter-spacing:.02em; }
.fx-cab-s { font-size:10px; font-weight:600; fill:#fff; opacity:.72; }
.fx-cab-c { font-size:19px; font-weight:800; fill:#fff; font-family:var(--mono); }
/* cartões dos contentores */
.fx-ct-n { font-size:14px; font-weight:800; fill:var(--text); letter-spacing:.02em; }
.fx-ct-m { font-size:10.5px; font-weight:500; fill:var(--text-muted); font-family:var(--mono); }
.fx-ct-h { font-size:14.5px; font-weight:800; font-family:var(--mono); }
.fx-ct-he { font-size:7.5px; font-weight:800; fill:var(--text-light); letter-spacing:.07em; text-transform:uppercase; }
.fx-ct-vz { font-size:10px; font-weight:700; }
.fx-vazio-t { font-size:11px; font-weight:600; fill:var(--text-light); }

/* A CENA do fluxograma: etiquetas de zona (estrada/volta), placas dos camiões,
   tabuletas dos parques e sub-cabeçalhos (ciclo fechado, pátio). */
.fx-zn-et { font-size:10px; font-weight:800; letter-spacing:.14em; }
.fx-zn-n { font-size:13px; font-weight:800; fill:#fff; letter-spacing:.02em; }
.fx-zn-c { font-size:15px; font-weight:800; fill:#fff; font-family:var(--mono); }
.fx-tk-n { font-size:12.5px; font-weight:800; fill:var(--text); letter-spacing:.02em; }
.fx-tk-h { font-size:11px; font-weight:800; font-family:var(--mono); }
.fx-pq-m { font-size:11px; font-weight:700; fill:var(--text-muted); font-family:var(--mono); }
.fx-cab:hover > rect:first-of-type { filter:brightness(1.16); }
.fx-cartao { transition:opacity .15s; }
.fx-cartao:hover > rect:first-of-type { filter:brightness(.975); }
.fx-vz-t { font-size:11px; font-weight:700; letter-spacing:.01em; }
.fx-nada { font-size:15px; font-weight:600; fill:var(--text-light); }

.fx-limpar {
  background:transparent; border:1px solid var(--border-strong); color:var(--text-muted);
  border-radius:999px; padding:4px 11px; cursor:pointer;
  font-family:var(--sans); font-size:.66rem; font-weight:700;
}
.fx-limpar:hover { background:var(--bg); color:var(--text); }

/* lista de contentores no painel */
.fx-lista { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.fx-li {
  background:var(--card); border:1px solid var(--border); border-left:4px solid var(--border-strong);
  border-radius:10px; padding:10px 12px;
}
.fx-li.clic { cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s; }
.fx-li.clic:hover { box-shadow:var(--shadow); transform:translateX(2px); }
.fx-li-t { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.fx-li-t b { font-size:.92rem; font-weight:800; color:var(--text); letter-spacing:.02em; }
.fx-li-h { font-family:var(--mono); font-size:.86rem; font-weight:800; text-align:right; line-height:1.1; }
.fx-li-h small {
  display:block; font-family:var(--sans); font-size:.52rem; font-weight:800; color:var(--text-light);
  text-transform:uppercase; letter-spacing:.07em; margin-top:2px;
}
.fx-li-m { font-size:.7rem; color:var(--text-muted); font-family:var(--mono); margin-top:3px; }
.fx-li-vz {
  margin-top:7px; padding:5px 9px; border-radius:7px; font-size:.68rem; font-weight:700;
  color:var(--text-muted); background:var(--bg); border:1px solid var(--border);
}
.fx-li-vz.feito { color:var(--ok); background:#F0FBF4; border-color:#C3E4CF; }
.fx-li-tag {
  font-size:.56rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); background:var(--bg); border:1px solid var(--border-strong);
  border-radius:999px; padding:3px 9px; white-space:nowrap;
}
.fx-li-tag.ok { color:var(--ok); background:#EAF6EF; border-color:#BFE3CD; }
.fx-li-tag.esp { color:var(--warn); background:var(--warn-bg); border-color:var(--warn-bd); }
.fx-p-h4 span { font-family:var(--mono); font-size:.8rem; opacity:.7; margin-left:4px; }
.fx-voltar {
  background:transparent; border:none; color:var(--dsv); cursor:pointer; padding:0 0 12px;
  font-family:var(--sans); font-size:.74rem; font-weight:700;
}
.fx-voltar:hover { text-decoration:underline; }

/* vazio no painel lateral */
.fx-p-vz {
  background:#F6F8FC; border:1px solid #D5DDEC; border-left:4px solid var(--text-muted);
  border-radius:10px; padding:10px 12px; margin-bottom:14px;
}
.fx-p-vz.feito { background:#F3FBF6; border-color:#C3E4CF; border-left-color:var(--ok); }
.fx-p-vz-et {
  font-size:.54rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted);
}
.fx-p-vz.feito .fx-p-vz-et { color:var(--ok); }
.fx-p-vz-n { font-size:.92rem; font-weight:800; color:var(--text); margin-top:2px; letter-spacing:.02em; }
.fx-p-vz-d { font-size:.68rem; color:var(--text-muted); font-family:var(--mono); }
.fx-lg i.fx-lg-vz { background:#F6F8FC; border-color:#D5DDEC; box-shadow:inset 3px 0 0 #5A6A8A; }

/* painel lateral do contentor */
.fx-painel {
  position:absolute; top:0; right:0; bottom:0; width:400px; max-width:92vw;
  background:var(--card); border-left:1px solid var(--border); box-shadow:-8px 0 28px rgba(13,26,69,.16);
  display:flex; flex-direction:column; transform:translateX(102%);
  transition:transform .22s ease; z-index:3;
}
.fx-painel.on { transform:none; }
.fx-p-top {
  flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px; color:#fff;
}
.fx-p-num { font-size:1.12rem; font-weight:800; letter-spacing:.03em; }
.fx-p-sub { font-size:.72rem; opacity:.85; font-family:var(--mono); margin-top:3px; }
.fx-p-x {
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.26); color:#fff;
  width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:1rem; line-height:1; flex:none;
}
.fx-p-x:hover { background:rgba(255,255,255,.32); }
.fx-p-corpo { flex:1 1 auto; overflow:auto; padding:16px 18px 28px; }
.fx-p-load, .fx-p-vazio { color:var(--text-light); font-size:.82rem; padding:18px; text-align:center; list-style:none; }
.fx-p-fase {
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid; border-radius:9px; padding:9px 12px; margin-bottom:14px;
}
.fx-moms { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.fx-mom {
  flex:1; min-width:74px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:8px 9px; text-align:center;
}
.fx-mom-h { font-family:var(--mono); font-size:1rem; font-weight:800; color:var(--dsv); line-height:1; }
.fx-mom-e {
  font-size:.54rem; font-weight:800; color:var(--text-light); text-transform:uppercase;
  letter-spacing:.06em; margin-top:4px;
}
.fx-p-l {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:8px 0; border-bottom:1px dotted var(--border);
}
.fx-p-l span {
  font-size:.58rem; font-weight:800; color:var(--text-light);
  text-transform:uppercase; letter-spacing:.07em;
}
.fx-p-l b { font-size:.84rem; font-weight:700; color:var(--text); text-align:right; }
.fx-p-h4 {
  font-size:.62rem; font-weight:800; color:var(--dsv); text-transform:uppercase; letter-spacing:.14em;
  margin:20px 0 12px; padding-bottom:9px; border-bottom:1px solid var(--border);
}
.fx-p-log { list-style:none; }
.fx-p-log li { position:relative; padding:0 0 14px 20px; border-left:2px solid var(--border); }
.fx-p-log li:last-child { border-left-color:transparent; }
.fx-p-log li::before {
  content:""; position:absolute; left:-6px; top:3px; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,#5a6bbf,var(--dsv));
}
.fx-p-log .quando { font-size:.64rem; color:var(--text-light); font-family:var(--mono); }
.fx-p-log .oque { font-size:.82rem; color:var(--text); margin:2px 0; }
.fx-p-log .quem { font-size:.68rem; color:var(--text-light); }
@media (max-width:640px) {
  .fx-acoes { margin-left:0; }
  .fx-painel { width:100%; }
}
/* Imprimir: só o mapa, em paisagem */
@media print {
  body.fx-abre > *:not(#fx-ov) { display:none !important; }
  #fx-ov { position:static; height:auto; }
  .fx-bar .fx-nav, .fx-bar .fx-acoes, .fx-lg.fx-dica, .fx-painel { display:none !important; }
  .fx-palco { overflow:visible; height:auto; }
  #fx-cam { transform:none !important; }
  @page { size:A3 landscape; margin:8mm; }
}

/* ---- Responsivo ---- */
@media (max-width:560px) {
  header.top { flex-direction:column; align-items:flex-start; gap:8px; padding:12px 16px; }
  main { margin:18px auto; }
  .cl-hero, .tr-hero { padding:20px; }
  .relogio { text-align:left; }
}

/* ================= LISTA DE TRABALHO DO OPERACIONAL =========================
   Substitui o Excel que o operacional mantinha a' parte. Duas regras mandam no
   desenho:
     1. edita-se NA CELULA. Se para escrever o transitario fosse preciso abrir um
        modal, ele voltava ao Excel na primeira tarde com pressa.
     2. o AMARELO e' a lista de tarefas. Celula por preencher = coisa por fazer,
        exactamente como a folha dele ja' estava pintada. Nao e' decoracao. */
.lt-cab { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.lt-sub { color:var(--text-light); font-size:.8rem; }
.lt-amostra { background:var(--aviso-bg,#fdf3d3); padding:1px 6px; border-radius:4px; color:var(--text); }
.lt-tarefas {
  margin-left:auto; background:var(--aviso-bg,#fdf3d3); color:var(--text);
  border:1px solid var(--aviso-bd,#e6cf8a); border-radius:999px;
  padding:5px 12px; font-size:.7rem; font-weight:700; white-space:nowrap;
}
/* A tabela e' larga por natureza (9 colunas). Rola DENTRO da sua caixa — a
   pagina nunca rola para o lado. */
.lt-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
.lt-tab { width:100%; border-collapse:collapse; font-size:.8rem; min-width:900px; }
.lt-tab thead th {
  position:sticky; top:0; z-index:2; background:var(--bg); text-align:left;
  padding:9px 10px; font-size:.62rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-light);
  border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
.lt-tab td { padding:3px 6px; border-bottom:1px solid var(--border); vertical-align:middle; }
.lt-tab tbody tr:hover { background:var(--bg); }
.lt-num { font-family:var(--mono); white-space:nowrap; padding-left:10px !important; }
.lt-dt, .lt-mid { white-space:nowrap; }
.lt-mid { text-align:center; }
/* O input nao parece um input ate' se lhe tocar: assim a tabela le^-se como uma
   tabela e nao como um formulario de 90 caixas. */
.lt-in {
  width:100%; min-width:110px; border:1px solid transparent; background:transparent;
  border-radius:6px; padding:6px 7px; font:inherit; color:var(--text);
}
.lt-in:hover { border-color:var(--border); }
.lt-in:focus { outline:none; border-color:var(--dsv); background:var(--card); box-shadow:0 0 0 3px rgba(10,61,145,.12); }
.lt-ck { width:17px; height:17px; cursor:pointer; accent-color:var(--dsv); }
/* Por preencher = por fazer. */
.lt-falta { background:var(--aviso-bg,#fdf3d3); }
.lt-falta .lt-in::placeholder { color:#9a7b2e; opacity:1; }
/* Entregue = fechado. Continua a ver-se (e' o historico do dia) mas para de
   disputar a atencao com o que ainda esta' por fazer. */
.lt-fechada { opacity:.55; }
.lt-fechada .lt-falta { background:transparent; }
.lt-abrir { padding:.35rem .7rem !important; font-size:.66rem !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lt-falta,
  :root:not([data-theme="light"]) .lt-tarefas,
  :root:not([data-theme="light"]) .lt-amostra { background:rgba(233,162,59,.16); }
  :root:not([data-theme="light"]) .lt-falta .lt-in::placeholder { color:#d9ab52; }
}
.lt-export { text-decoration:none; white-space:nowrap; }
.lt-cab .lt-tarefas + .lt-export { margin-left:0; }
.lt-cab .lt-export:not(.lt-tarefas + .lt-export) { margin-left:auto; }

/* ===== A DESCARREGAR (entre "chegou" e "e' um vazio a devolver") ============
   Um contentor recebido NAO e' um vazio: chega cheio e fica ca' a ser esvaziado.
   Esta lista e' o passo que faltava, e o tempo ao lado e' que evita o
   esquecimento — nao ha' relogio nenhum a decidir por ninguem. */
.pe-painel { margin-bottom:16px; }
.pe { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pe-li {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border);
  border-left:4px solid var(--sky); border-radius:10px; padding:10px 14px;
}
/* Passa das horas e ainda ninguem disse nada: a linha comeca a chamar. */
.pe-li.tarda { border-left-color:var(--warn); background:var(--aviso-bg,#fdf3d3); }
.pe-txt { flex:1; min-width:180px; }
.pe-txt b { font-family:var(--mono); font-size:.92rem; }
.pe-med { color:var(--text-light); font-size:.72rem; margin-left:8px; }
.pe-chip {
  margin-left:8px; font-size:.6rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:2px 8px; color:var(--text-light);
}
.pe-q { color:var(--text-light); font-size:.74rem; margin-top:3px; }
.pe-ok {
  background:linear-gradient(135deg,var(--ok-light),var(--ok)); color:#fff; border:none;
  border-radius:9px; padding:.5rem .9rem; cursor:pointer; font-weight:700; font-size:.76rem;
  white-space:nowrap;
}
.pe-ok:hover { filter:brightness(1.08); }

/* Camiao que passa so' para levar um vazio, sem entregar nada. */
.hero-vz {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18);
  font-size:.84rem;
}
/* O aviso "falta marcar a hora" no hero do transportador: ambar sobre o azul,
   para nao haver maneira de entrar na pagina sem o ver. O botao ok herda o
   verde normal e destaca-se sozinho. */
.hero-ag {
  background: rgba(255,179,64,.16); border: 1px solid rgba(255,190,90,.55);
  border-top: 1px solid rgba(255,190,90,.55);
  border-radius: 10px; padding: 10px 14px; color: #ffe3b0;
}
.hero-ag b { color: #ffd27a; }

/* ===== URGENCIA ("preciso deste primeiro") ==================================
   A unica alavanca de prioridade da COFEMEL. Tem de se ver com o cartao FECHADO
   e no meio de uma lista de vinte — e' esse o proposito todo. */
.urg-marca {
  display:inline-block; margin-left:8px; vertical-align:middle;
  background:linear-gradient(135deg,#e5484d,#c2262b); color:#fff;
  border-radius:999px; padding:2px 9px;
  font-size:.58rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.card.urgente { border-color:#e5484d; }
.card.urgente::before { background:linear-gradient(90deg,#e5484d,#f08c8f,#e5484d); }
.btn.urg, .acoes button.urg { background:linear-gradient(135deg,#e5484d,#c2262b); }

/* Na folha de trabalho do operacional a linha inteira acende: ele le' a coluna
   de cima a baixo e o raio tem de o parar. */
.lt-urg { background:rgba(229,72,77,.07); }
.lt-urg .lt-num { box-shadow:inset 3px 0 0 #e5484d; }
.lt-raio { margin-right:6px; }
.lt-urgn {
  background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.4); color:#b3242a;
  border-radius:999px; padding:5px 12px; font-size:.7rem; font-weight:700; white-space:nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lt-urgn { color:#ff9a9d; }
}

/* ===== AGENDAMENTO DO TRANSPORTADOR ========================================
   Ele agenda na plataforma dele, que so' ele ve'. Este chip e' o que a COFEMEL
   ve' — e e' o que substitui o telefonema "a que horas e' que ele vem?".
   Tem de aparecer com o cartao FECHADO, como o estado e a localizacao. */
.ag-chip {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:10px; padding:7px 11px; border-radius:9px;
  font-size:.74rem; line-height:1.35; border:1px solid transparent;
}
.ag-chip.ok   { background:rgba(31,157,85,.10); border-color:rgba(31,157,85,.35); color:var(--text); }
/* Agendado, mas para DEPOIS da hora que a COFEMEL pediu. "Esta' agendado" e
   "esta' agendado para tarde" nao podem parecer a mesma coisa. */
.ag-chip.tarde { background:rgba(233,162,59,.14); border-color:rgba(233,162,59,.5); }
.ag-chip.tarde b { color:#a86a12; }
.ag-chip.por  { background:var(--bg); border-color:var(--border); color:var(--text-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-chip.tarde b { color:#e9a23b; }
}

/* Sem autorizacao de saida = o camiao vai la' e nao sai de la'. E' o aviso mais
   caro de ignorar, por isso e' o unico chip vermelho do cartao. */
.ag-chip.bloq { background:rgba(229,72,77,.10); border-color:rgba(229,72,77,.45); }
.ag-chip.bloq b { color:#b3242a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag-chip.bloq b { color:#ff9a9d; }
}
/* Cadeia da autorizacao na folha de trabalho */
.lt-aut-ok { background:rgba(31,157,85,.10); }
.lt-aut-do { background:rgba(233,162,59,.14); }

/* ===== PERFIL DO CONTENTOR: o percurso desenhado ===========================
   Responde a "o que aconteceu a este contentor?" sem obrigar a cruzar quatro
   sitios de cabeca. Em cima o percurso de relance, em baixo o rasto todo. */
.pf-passos {
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; gap:0; flex-wrap:wrap;
}
.pf-passo {
  flex:1 1 130px; min-width:120px; position:relative;
  padding:0 10px; text-align:center; color:var(--text-light);
}
/* A linha que liga os passos passa POR TRAS das bolas. */
.pf-passo::before {
  content:''; position:absolute; top:15px; left:-50%; right:50%; height:2px;
  background:var(--border); z-index:0;
}
.pf-passo:first-child::before { display:none; }
.pf-passo.feito::before { background:var(--ok); }
.pf-bola {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin:0 auto 7px; border-radius:50%;
  background:var(--card); border:2px solid var(--border);
  font-size:.75rem; font-weight:800; color:var(--text-light);
}
.pf-passo.feito .pf-bola { background:var(--ok); border-color:var(--ok); color:#fff; }
.pf-passo.agora .pf-bola { box-shadow:0 0 0 4px rgba(31,157,85,.18); }
.pf-passo b { display:block; font-size:.78rem; color:var(--text); font-weight:700; }
.pf-passo.feito b { color:var(--text); }
.pf-passo small { display:block; font-size:.66rem; margin-top:2px; }
.pf-passo i { display:block; font-size:.62rem; font-style:normal; color:var(--text-light); opacity:.75; }

.pf-ficha {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px;
  background:var(--bg); border-radius:9px; padding:13px 15px; margin-bottom:18px;
}
.pf-ficha div { display:flex; flex-direction:column; gap:1px; }
.pf-ficha span { font-size:.6rem; font-weight:700; letter-spacing:.06em;
                 text-transform:uppercase; color:var(--text-light); }
.pf-ficha b { font-size:.82rem; font-family:var(--mono); }

.pf-sec { margin-bottom:18px; }
.pf-sec h4 { margin:0 0 9px; font-size:.72rem; font-weight:800; letter-spacing:.08em;
             text-transform:uppercase; color:var(--text-light); }
.pf-sec h4 small { font-weight:600; letter-spacing:0; text-transform:none; opacity:.7; }

.pf-vz { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
         padding:8px 12px; background:var(--bg); border-radius:8px; margin-bottom:6px; font-size:.8rem; }
.pf-vz b { font-family:var(--mono); }
.pf-vz .falta { color:var(--warn); font-weight:600; }
.pf-vz .mono { font-family:var(--mono); color:var(--text-light); }

.pf-oco { padding:10px 12px; background:var(--bg); border-radius:8px; margin-bottom:6px;
          border-left:3px solid var(--border-strong); font-size:.82rem; }
.pf-oco.aberta { border-left-color:#e5484d; }
.pf-oco small { display:block; margin-top:4px; color:var(--text-light); font-size:.7rem; }
.pf-urg { background:#e5484d; color:#fff; border-radius:999px; padding:1px 7px;
          font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }

/* O rasto: uma linha por facto, na ordem em que aconteceu. */
.pf-rasto { list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto;
            border:1px solid var(--border); border-radius:8px; }
.pf-l { display:grid; grid-template-columns:130px 1fr 150px; gap:10px;
        padding:7px 12px; border-bottom:1px solid var(--border); font-size:.76rem; }
.pf-l:last-child { border-bottom:none; }
.pf-q { font-family:var(--mono); color:var(--text-light); font-size:.7rem; }
.pf-w { color:var(--text-light); font-size:.7rem; text-align:right; }
.pf-l.problema { background:rgba(229,72,77,.07); }
.pf-l.problema .pf-o { color:#b3242a; font-weight:600; }
.pf-l.vazio .pf-o, .pf-l.camiao .pf-o { color:var(--dsv); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pf-l.problema .pf-o { color:#ff9a9d; }
}
@media (max-width:620px) {
  .pf-l { grid-template-columns:1fr; gap:2px; }
  .pf-w { text-align:left; }
}

/* Janela larga: o percurso de um contentor tem 5 passos lado a lado e um rasto
   de tres colunas. Na largura normal do modal partia-se todo. */
.modal.largo { max-width:min(940px, 94vw); width:100%; }

/* ===== ANEXAR DOCUMENTOS A VARIOS CONTENTORES DE UMA VEZ ===================
   Chega um email com dois despachos, cada um para o seu contentor. Arrastam-se
   os dois e resolve-se numa passagem — mas QUEM ATRIBUI E' o operacional: um
   documento colado ao contentor errado e' pior do que um por colar. */
.anx-zona {
  border:2px dashed var(--border-strong); border-radius:12px;
  padding:26px 20px; text-align:center; color:var(--text-light);
  display:flex; flex-direction:column; gap:5px; transition:.15s;
}
.anx-zona.sobre { border-color:var(--dsv); background:rgba(10,61,145,.05); color:var(--text); }
.anx-zona b { color:var(--text); font-size:.94rem; }
.anx-zona span { font-size:.82rem; }
.anx-esc { background:none; border:none; padding:0; color:var(--dsv); font:inherit;
           font-weight:700; cursor:pointer; text-decoration:underline; }

.anx-lista { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.anx-li {
  display:grid; grid-template-columns:1fr 150px 1fr 30px; gap:9px; align-items:center;
  background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--warn);
  border-radius:9px; padding:10px 12px;
}
/* Verde so' quando ja' tem contentor escolhido: e' a checklist do que falta. */
.anx-li.pronto { border-left-color:var(--ok); }
.anx-nome { font-size:.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.anx-in {
  border:1px solid var(--border-strong); background:var(--card); color:var(--text);
  border-radius:7px; padding:6px 8px; font:inherit; font-size:.78rem; width:100%;
}
.anx-in.falta { border-color:var(--warn); background:var(--aviso-bg,#fdf3d3); }
.anx-x { background:none; border:none; color:var(--text-light); font-size:1.2rem;
         cursor:pointer; line-height:1; }
.anx-x:hover { color:var(--danger); }
.anx-pista { grid-column:1/-1; font-size:.72rem; color:var(--text-light); }
.anx-pista button { background:none; border:1px solid var(--border-strong); border-radius:999px;
  padding:1px 9px; margin-left:6px; font:inherit; font-size:.68rem; font-weight:700;
  color:var(--dsv); cursor:pointer; }
.anx-pista button:hover { background:var(--card); }

/* Documentos no perfil do contentor */
.pf-doc {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-decoration:none;
  padding:9px 12px; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; margin-bottom:6px; color:var(--text);
}
.pf-doc:hover { border-color:var(--dsv); }
.pf-doc b { font-size:.82rem; font-weight:600; }
.pf-doc small { color:var(--text-light); font-size:.7rem; margin-left:auto; }
.pf-doc-t {
  font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--border); color:var(--text); border-radius:999px; padding:2px 9px; white-space:nowrap;
}
/* O despacho e' o que autoriza a carga a sair — destaca-se dos outros papeis. */
.pf-doc-t.desp { background:var(--ok); color:#fff; }

/* A FOLHA DE TRABALHO DO SIMAO (`table.tabela`) TAMBEM NAO EMPURRA A PAGINA.
   E' a unica tabela sem caixa propria: num telemovel esticava-se e levava a
   pagina inteira atras dela, com o cabecalho azul e o hero fora do ecra. Como
   `display:block` numa <table> corta as larguras automaticas, poe-se o scroll
   na tabela e garante-se que ela nunca encolhe abaixo do que precisa. */
@media (max-width: 700px) {
  /* Sem `>`: a tabela nem sempre e' filha directa do painel (ha' uma <div> pelo
     meio nas listas do admin) e a regra passava ao lado. */
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Os botoes de icone das linhas do admin (✎ 📍 ↩ ✕ ⇄), que nao tem classe. */
  .tabela td button { min-height: 34px; min-width: 34px; }
}
/* Linha de tabela que abre o perfil do contentor (painel do admin) */
.tabela tr.lin-perfil { cursor: pointer; }
.tabela tr.lin-perfil:hover { background: #eef3ff; }

/* Barra de acoes no topo do perfil do contentor. Fica colada ao cimo: e' o
   sitio onde a mao vai depois de ler o percurso, sem ter de rolar de volta. */
.det-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px;
  margin-bottom: 12px; border-bottom: 1px solid var(--borda); }
.det-acoes button { flex: 0 0 auto; }

/* ---- CICLO DE VIDA DO CONTENTOR (dentro do "Abrir") ------------------------
   Os passos em fila com setas, e por cima de cada seta o tempo que se gastou
   entre um passo e o seguinte. Rola na horizontal em vez de partir para varias
   linhas: um diagrama de fluxo que muda de linha deixa de se ler como fluxo. */
.cv-sec h4 { margin-bottom: 10px; }
.cv { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px 12px; }
.cv-passo { flex: 0 0 auto; min-width: 120px; max-width: 150px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px; border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo-2, #f7f9fc); opacity: .5; }
.cv-passo.feito { opacity: 1; }
.cv-passo.agora { border-color: #1c3f94; box-shadow: 0 0 0 2px rgba(28,63,148,.15); }
.cv-passo b { font-size: 13px; }
.cv-passo small { font-size: 11px; color: var(--cinza, #6b7488); line-height: 1.3; }
.cv-passo i { font-size: 10.5px; color: #8a93a5; font-style: normal; }
.cv-bola { width: 24px; height: 24px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: #dfe4ee; color: #5a6478; }
.cv-passo.feito .cv-bola { background: #1c3f94; color: #fff; }
.cv-passo.lugar .cv-bola { background: #e8eefc; }

/* A seta, com o tempo gasto por cima. */
.cv-seta { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 0 4px; min-width: 58px; opacity: .35; }
.cv-seta.feito { opacity: 1; }
.cv-seta svg { width: 40px; height: 12px; stroke: #9aa3b5; fill: #9aa3b5; stroke-width: 1.5; }
.cv-seta.feito svg { stroke: #1c3f94; fill: #1c3f94; }
.cv-t { font-size: 10.5px; font-weight: 700; color: #1c3f94; white-space: nowrap; }

.cv-par { margin-top: 6px; }
.cv-par h5 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--cinza, #6b7488); }
.cv-par h5 small { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* ---- REPORTS (filtro de dias + o que se pode tirar) ---------------------- */
.rp-datas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.rp-datas label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  font-weight: 700; color: var(--cinza, #6b7488); }
.rp-datas input[type=date] { padding: 7px 9px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: inherit; font-size: 13px; }
.rp-atalhos { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-atalhos button { padding: 6px 10px; font-size: 12px; }
.rp-lista { display: grid; gap: 10px; }
.rp-item { display: block; text-decoration: none; color: inherit; padding: 12px 14px;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo-2, #f7f9fc); }
.rp-item:hover { border-color: #1c3f94; background: #eef3ff; }
.rp-item b { display: block; font-size: 14px; margin-bottom: 3px; }
.rp-item small { display: block; font-size: 12px; line-height: 1.5; color: var(--cinza, #6b7488); }
.rp-nota { margin-top: 12px; }
.cv-passo.duvida { border-style: dashed; border-color: #c9a227; }
.cv-passo.duvida .cv-bola { background: #fdf3d4; }
.cv-passo.duvida b { font-size: 12px; }

/* ---- LISTA EM TABELA (painel da COFEMEL / transportador) -----------------
   CADA LINHA E' UMA CAIXA. Uma tabela de linhas coladas com um risco entre elas
   le-se como uma folha de calculo: o olho perde a linha a meio caminho e e'
   preciso o dedo no ecra. Separadas e com sombra propria, cada contentor e' um
   objecto — clica-se num, nao "numa linha".
   Nada a rolar de lado: a tabela tem de caber no ecra.

   AS LARGURAS SAO SUGESTOES, NAO ORDENS (`table-layout: auto`). Com `fixed`,
   cada coluna levava a percentagem que alguem adivinhou e o conteudo que nao
   coubesse era CORTADO com "..." — e bastava mexer numa percentagem para
   rebentar noutra coluna. Foram dias de "..." a aparecer e desaparecer conforme
   a largura da janela e o separador aberto. Com `auto`, o browser da' a cada
   coluna o que ela precisa (os chips e os botoes tem `nowrap`, por isso pedem a
   largura certa) e reparte a folga pelas percentagens abaixo. */
/* A TABELA NUNCA EMPURRA A PAGINA. Com `table-layout:auto` a tabela pede a
   largura de que precisa; num telemovel isso passava dos 390px e era a PAGINA
   INTEIRA que rolava de lado (o cabecalho azul, o hero, tudo desalinhado do
   ecra). Aqui a folga rola DENTRO da caixa: o resto da pagina fica quieto.
   Nos paineis do cliente e do transportador isto quase nao se usa — abrem em
   cartoes no telemovel; e' a rede para quem escolher a tabela e para o painel
   da DSV, que nao tem modo de cartoes. */
.tc-wrap { --tc-pad: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tc-tab { width: 100%; table-layout: auto; font-size: 13px;
  border-collapse: separate; border-spacing: 0 8px; }

/* Reequilibradas quando o botao da linha passou a ter 44px e palavras: o
   "Consigo a esta hora" nao cabia e ficava cortado a meio, mesmo com a coluna a
   17%. Tirou-se aos sitios onde sobrava (transitario, onde esta, vazio). */
.tc-tab th.c-num  { width: 17%; }
/* "A DESCARREGAR" e' o rotulo mais comprido de todos e nao cabia em 10%: o selo
   partia a palavra ao meio e a segunda linha saia' por fora da bolha azul. Agora
   o selo nunca parte (ver .tc-tab .badge) e a coluna tem largura para ele. */
.tc-tab th.c-est  { width: 13%; }
.tc-tab th.c-onde { width: 10%; }
/* A coluna do transitario saiu da tabela (ver tabelaContentores). Fica aqui
   comentada e nao apagada porque ha' paineis com tabelas proprias que ainda a
   usam:  .tc-tab th.c-tr { width: 8%; }  */
.tc-tab th.c-dt   { width: 12%; }
/* O selo do agendamento levava "≠ 25/08 · 20:30" e vinha cortado a meio — o
   travessao do fim era o que mais falta fazia. Coluna propria e mais larga. */
.tc-tab th.c-ag   { width: 15%; }
/* Larga o suficiente para "REPNUNMAR" e para o aviso "⚠ sem parque" inteiros —
   a 8% o nome saia cortado ("REPNU..."). O que se tirou foi a' coluna das
   accoes, que tinha folga. */
.tc-tab th.c-vz   { width: 11%; }
/* Larga o suficiente para o botao levar PALAVRAS. Um icone sozinho cabia em 7%
   e nao se percebia — a largura estava a mandar na clareza, que e' ao contrario. */
/* "Larguei na COFEMEL" e' o botao mais comprido de todos e a 21% saia cortado
   em QUALQUER largura de ecra, ate' num monitor grande — por isso os "..."
   apareciam mesmo com a janela aberta toda. */
.tc-tab th.c-ac   { width: 23%; }

.tc-tab thead th { text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: #7a8496; font-weight: 700;
  padding: 0 var(--tc-pad) 4px; background: none; }

.tc-tab tbody tr { cursor: pointer; background: #fff; }
/* Sem `overflow:hidden`/`text-overflow:ellipsis`: era daqui que saiam os "..."
   Com `table-layout:auto` a celula cresce para o conteudo, por isso nao ha' nada
   para cortar — e se um dia um texto for mesmo enorme, e' preferivel a coluna
   crescer do que o numero do contentor aparecer a meio. */
.tc-tab tbody td { padding: 11px var(--tc-pad); vertical-align: middle;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  background: #fff; }
/* As pontas arredondadas fazem-se na primeira e na ultima celula: uma <tr> nao
   aceita border-radius quando as celulas e' que tem o fundo. */
.tc-tab tbody td:first-child { border-left: 1px solid var(--borda);
  border-radius: 10px 0 0 10px; }
.tc-tab tbody td:last-child  { border-right: 1px solid var(--borda);
  border-radius: 0 10px 10px 0; }
.tc-tab tbody tr:hover td { background: #f4f7ff; border-color: #c6d3f0; }

/* A barra de cor a' esquerda diz o estado sem se ler nada. */
.tc-tab tbody td:first-child { box-shadow: inset 3px 0 0 var(--tc-cor, #d5dbe7); }
.tc-tab tbody tr { --tc-cor: #d5dbe7; }

/* ---- O Nº DO CONTENTOR MANDA NA LINHA ----
   E' por ele que se procura, e' ele que se diz ao telefone e e' ele que se
   compara com o papel. Estava a 13.5px, do mesmo tamanho do resto da linha e
   mais pequeno que o chip do processo ao lado — quem varria a lista a procurar
   um numero tinha de o ler letra a letra.
   Agora e' a maior coisa da linha: 16px, mais escuro, e com o espacamento entre
   letras que um codigo pede. Continua em letra de maquina, que e' o que faz um
   "0" nao se confundir com um "O" e um "1" com um "I". */
.tc-num b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 16px; font-weight: 700; letter-spacing: .6px; color: var(--dsv-dark, #0D1A45);
  display: block; line-height: 1.3; }
/* O mesmo tratamento na folha de trabalho do admin (`table.tabela`), que é outra
   tabela mas a mesma leitura: o nº é o que se procura. Sem isto, o painel onde o
   Simão passa o dia era o único onde o número não se destacava. */
.tabela .adm-num { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var(--dsv-dark, #0D1A45); }
.tc-tipo { color: #8a93a5; font-size: 11.5px; white-space: nowrap; }
.tc-dt { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }
/* Estas duas colunas NAO se cortam: um selo de hora sem o fim ("25/08 · 08:0")
   e' pior do que nao estar la'. Se um dia nao couber, a coluna e' que cresce. */
.tc-ag { white-space: nowrap; overflow: visible; }
.tc-dt { overflow: visible; }
/* O numero do contentor e os seus chips podem passar para a linha de baixo. Sao
   coisas curtas e independentes — nao ha' nada para cortar a meio. */
.tc-num { white-space: normal; }
.tc-onde { font-size: 12.5px; }
.tc-tr { font-size: 12.5px; color: #4a5567; }
.tc-ok { font-weight: 600; }
.tc-sub { color: #8a93a5; font-size: 11.5px; font-style: normal; display: block; }
.tc-vazio { color: #b3bac6; }

/* O botao que abre o mapa, dentro da celula: distancia que falta + hora prevista. */
.tc-mapa { border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: #1c3f94; }
.tc-mapa b { display: block; font-size: 12.5px; }
.tc-mapa:hover b { text-decoration: underline; }

/* A urgencia tem de saltar a' vista no meio de vinte linhas. */
.tc-urg { --tc-cor: #e5484d; }
.tc-urg td { background: #fff8e6; }
.tc-urg:hover td { background: #fdf1cf; }
.tc-raio { margin-right: 3px; }

/* ---- BANDEIRA DE PROBLEMA (uma por linha) ----
   Reportar estava so' dentro do contentor. Quem tem um camiao parado no portao
   nao anda a' procura de menus — e um problema que custa a reportar reporta-se
   pelo telefone, que e' o que esta app existe para evitar.
   Sem problema fica APAGADA: e' um botao que tem de estar la' sempre mas nao
   pode competir com o numero do contentor em vinte linhas seguidas. So' ganha
   cor quando ha' mesmo alguma coisa — e ai' e' para ser visto de longe. */
.bnd {
  float: right; margin-left: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--border); background: var(--card); color: #b3bbc9;
  border-radius: 7px; padding: 2px 6px; cursor: pointer; line-height: 1.4;
  font-family: inherit; font-size: 12px;
  transition: color .12s, border-color .12s, background .12s;
}
.bnd:hover { color: var(--danger); border-color: var(--danger-bd); background: var(--danger-bg); }
.bnd:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 1px; }
/* Ha' problema em aberto. */
.bnd.tem { color: var(--danger-dark); border-color: var(--danger-bd); background: var(--danger-bg); font-weight: 700; }
.bnd.tem:hover { background: #fbdfd8; }
/* Urgente: enche-se. Um contorno nao chega para o caso em que alguem esta' a'
   espera de uma chamada. */
.bnd.tem.urg { color: #fff; background: var(--danger); border-color: var(--danger-dark); }
.bnd.tem.urg:hover { background: var(--danger-dark); }
/* Ja' resolvido: fica o rasto, sem alarme. */
.bnd.ok { color: #4f8a63; border-color: #cfe4d6; background: #f2f9f4; }
.bnd-n, .bnd-v { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Uma linha fechada nao apaga a bandeira: o problema que la' houve continua a
   ser consultavel meses depois, que e' metade da razao de o ter registado. */
.tc-fechada .bnd { opacity: 1; }
.tc-fechada { opacity: .62; }
.tc-fechada td { background: #fafbfd; }

.tc-ac { white-space: nowrap; text-align: right; }
/* O BOTAO DA LINHA. Quem carrega nisto passa o dia a conduzir e nao e' de
   informatica: tinha 32px de altura e 12,5px de letra, que e' pequeno para
   acertar com um dedo e pequeno para ler de relance. 44px e' a medida a partir
   da qual um alvo se acerta sem pontaria. Vem sempre com PALAVRAS: um icone
   sozinho obriga a adivinhar. */
.tc-b { border: 1.5px solid var(--borda); background: #fff; border-radius: 9px; cursor: pointer;
  min-height: 44px; padding: 10px 16px; font-size: 14px; line-height: 1.25; margin-left: 3px;
  font-family: inherit; white-space: nowrap; font-weight: 700; color: #2b3550; }
/* "A bola esta' do lado deles" — melhor do que um travessao que nao explica nada. */
.tc-espera { font-size: 12.5px; color: #8a93a5; font-style: italic; }
.tc-b:hover { border-color: #1c3f94; background: #eef3ff; }
.tc-b.on { background: #ffe9a8; border-color: #d9a400; color: #6b4e00; }
.tc-b.ok { border-color: #2e7d32; color: #1f6b28; background: #f2fbf3; }
.tc-b.ok:hover { background: #e4f4e6; border-color: #1f6b28; }
.tc-b.al { border-color: #c98a00; color: #a86a00; }

/* Colunas por ordem REAL (a do transitario saiu da tabela): 1 contentor,
   2 estado, 3 onde esta, 4 pretendido, 5 agendado, 6 vazio, 7 accoes.
   Os nth-child abaixo contam por esta ordem — se se acrescentar uma coluna,
   ACERTAR AQUI TAMBEM. Estas regras contavam pela ordem ANTIGA de 8 colunas e
   escondiam a celula errada: abaixo de 1100px caia a celula do "Pretendido"
   (a pensar que era o transitario) e as linhas deslizavam uma coluna em
   relacao aos cabecalhos — o agendado lia-se debaixo de "Pretendido" e o
   parque do vazio debaixo de "Agendado". */
/* A coluna do VAZIO fica SEMPRE (pedido do Bruno, 31/08/2026): com o nome do
   parque por inteiro, e um triangulo de aviso quando ainda ninguem o decidiu.
   Quando o ecra aperta caem outras colunas — nunca esta. */
.tc-pq { font-size: 12.5px; white-space: nowrap; }
.tc-pq-falta { display: inline-block; white-space: nowrap; font-size: 11px;
  font-weight: 700; color: #8a5c00; background: #fff3d6;
  border: 1px solid #f0d089; border-radius: 7px; padding: 2px 5px;
  letter-spacing: -.1px; }
@media (max-width: 1100px) {
  /* Cai primeiro o "Pretendido": o que interessa nesse aperto e' a CONFIRMADA. */
  .tc-tab th.c-dt, .tc-tab td:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  /* Depois caem o "Onde esta" (le-se dentro do contentor) e o selo do ESTADO —
     a barra de cor a' esquerda da linha ja o diz. Ficam numero, hora
     confirmada, vazio e o botao, todos com espaco para aparecerem INTEIROS:
     era aqui que os chips vinham cortados com "..." no fim. */
  .tc-tab th.c-onde, .tc-tab tbody td:nth-child(3) { display: none; }
  .tc-tab th.c-est, .tc-tab tbody td:nth-child(2) { display: none; }
  .tc-tab th.c-num { width: 30%; }
}
@media (max-width: 1000px) {
  /* Abaixo dos 1000px os chips encolhem um pelo (e o lapis do selo sai — o
     chip inteiro continua a clicar-se) em vez de sairem cortados com "..." no
     fim. Medido num varrimento de 20 em 20 px: com o tamanho normal havia
     cortes em toda a faixa dos 820–940, que e' onde vivem as janelas reais
     (ecra de portatil com escala do Windows a 125%%). */
  .tc-tab .ag-chip { font-size: 11px; padding: 3px 6px; }
  .tc-tab .ag-lapis { display: none; }
  .tc-b { font-size: 11.5px; padding: 9px 8px; }
  .tc-pq-falta { font-size: 10.5px; padding: 2px 4px; }
  /* O "⚠ sem parque" precisa de mais uns pixels do que o nome de um parque:
     vao da coluna do numero, que aqui ainda tem folga. */
  .tc-tab th.c-vz  { width: 13%; }
  .tc-tab th.c-num { width: 27%; }
}
@media (max-width: 700px) {
  .tc-tipo { display: none; }
}
/* ---- ALVOS PARA UM DEDO, NO TELEMOVEL --------------------------------------
   Os selos que se clicam (a hora agendada, a hora pretendida, o "marcar hora")
   tinham 25-27px de altura: com o rato acerta-se, com o polegar de quem esta' no
   cais falha-se e abre-se o contentor em vez do selo. 34px e' a medida a partir
   da qual um alvo se acerta sem pontaria. So' no telemovel — no computador a
   altura pequena mantem a linha compacta. */
@media (max-width: 700px) {
  .ag-chip, .pr-chip {
    min-height: 34px; display: inline-flex; align-items: center; padding: 4px 9px;
  }
  /* Botoes que sao so' um icone (✎ 📍 ↩ ✕ ⇄) nas linhas e nos cartoes. */
  .ct-acoes button, .fq-b, .btn.mini, .ic-b {
    min-height: 34px; min-width: 34px;
  }
  /* Os restantes alvos pequenos apanhados na varredura: a barra de navegacao do
     topo (Frota, Fluxograma, Valores...), os atalhos de periodo (Hoje/7 dias),
     as abas das listas, a bandeira de ocorrencias e o "Abrir" do despachante. */
  .nav-b, .fp-presets button, .fp-dt, .sec-abas .abas button,
  .bnd, .lt-abrir, .vista-tog button {
    min-height: 34px;
  }
  .bnd { min-width: 34px; justify-content: center; }
  .lt-abrir { padding: .5rem .9rem !important; }
}
/* Alternar entre tabela e cartoes */
.vista-tog { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.vista-tog button { border: 0; background: #fff; padding: 7px 11px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: #5a6478; }
.vista-tog button + button { border-left: 1px solid var(--borda); }
.vista-tog button.on { background: #1c3f94; color: #fff; font-weight: 700; }

/* ---- "ONDE VEM O CAMIAO", dentro do contentor ---------------------------
   Numeros grandes e um botao. Nao ha' mapa encaixado: pequeno de mais para
   explorar, grande de mais para nao empurrar o resto do contentor para fora. */
.det-vem { margin: 12px 0; border: 1px solid var(--borda); border-radius: 12px;
  background: linear-gradient(180deg, #f7faff, #fff); overflow: hidden; }
.vem-nums { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 16px 10px; }
.vem-n { display: flex; flex-direction: column; gap: 1px; }
.vem-n b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #16233d; }
.vem-n span { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #7a8496; }
.vem-n.destaque b { color: #1c3f94; }
.vem-sem { font-size: 12.5px; color: #8a6400; text-transform: none; letter-spacing: 0; }
.vem-pe { display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  border-top: 1px solid var(--borda); background: #f4f7fc; font-size: 12px; color: #6b7488; }
.vem-pe > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vem-mapa { border: 1px solid #1c3f94; background: #1c3f94; color: #fff; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; font-family: inherit; font-size: 13px;
  text-decoration: none; white-space: nowrap; }
.vem-mapa:hover { background: #16337a; }
/* O chip do Patio na fila dos estados. Nao filtra a lista: leva ao painel de
   baixo. O tracinho antes dele diz que faz outra coisa que os vizinhos. */
/* O PATIO COFEMEL vive agora na mesma fila dos estados, nao encostado ao fim
   depois do traco dos "Entregues" — ali lia-se como arquivo, e e' trabalho por
   fazer. O que o distingue passa a ser a COR: e' o unico amarelo da barra, por
   isso encontra-se sem estar exilado.
   Herda a forma dos outros botoes de .filtros (pilula, tamanho, tipo de letra);
   aqui so' se troca a cor, para nao haver duas definicoes da mesma pastilha. */
.filtros .f-patio { border-color: #e3c169; background: #fff8e6; color: #8a6400; }
.filtros .f-patio:hover { border-color: #d9a400; background: #fdefc9; color: #6f5000; }
.filtros .f-patio .c { color: #8a6400; }
/* Ha vazios sem parque decidido: o mesmo amarelo, mas cheio — nao e' outro
   estado, e' o mesmo assunto a pedir atencao. */
.filtros .f-patio.aviso { border-color: #d9a400; background: #f6c344; color: #4a3600; }
.filtros .f-patio.aviso .c { color: #4a3600; }
/* O patio passou a ser uma SECCAO e nao um rodape, por isso tem estado activo
   como os outros separadores. Fica no amarelo dele e nao no azul do `.ativo`
   generico: e' o mesmo assunto seleccionado, nao outro assunto. */
.filtros .f-patio.ativo,
.filtros .f-patio.ativo.aviso {
  background: #d9a400; border-color: #b88a00; color: #fff;
  box-shadow: 0 2px 8px rgba(185,138,0,.30);
}
.filtros .f-patio.ativo .c { color: #fff; }
/* O selo da coluna "Agendado". Verde = a' hora pedida; ambar = a outra hora
   (e' o caso em que e' preciso olhar); vazio = o transportador ainda nao disse. */
.ag-chip { display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.5;
  font-variant-numeric: tabular-nums; }
/* No telemóvel o selo QUEBRA LINHA em vez de sair do ecrã: "Sem autorização ·
   Delivery order enviada — o terminal…" aparecia cortado a meio da palavra
   pelo overflow do cartão, e um selo que se lê pela metade informa metade. */
@media (max-width: 700px) {
  .ag-chip { white-space: normal; max-width: 100%; }
}
.ag-ok  { background: #e4f4e6; color: #1f6b28; border: 1px solid #b9e0be; }
.ag-dif { background: #fff3d6; color: #8a5c00; border: 1px solid #f0d089; }
.ag-nao { background: #f2f4f8; color: #98a0b0; border: 1px dashed #ccd3e0; font-weight: 400; }
/* "marcar hora" — a versao ACIONAVEL do "por agendar", so' para quem pode marcar.
   Ambar cheio, com peso de botao: e' a coisa que falta fazer, nao um estado. */
.ag-marcar { background: #ffb340; color: #4a3000; border: 1px solid #e69a1f;
  font-weight: 700; box-shadow: 0 1px 4px rgba(160,100,0,.25); }
/* O selo clica-se para mudar a hora. Tem de PARECER que se clica: o lapis so'
   aparece quando o rato la' esta', para nao encher a coluna de icones. */
.ag-clic { cursor: pointer; transition: filter .12s, box-shadow .12s; }
.ag-clic:hover { filter: brightness(.96); box-shadow: 0 1px 5px rgba(20,35,80,.16); }
.ag-clic:focus-visible { outline: 2px solid #1c3f94; outline-offset: 2px; }
/* O lapis fica SEMPRE a' vista, como no selo do lado. So' aparecer ao passar o
   rato por cima e' um segredo: quem nao sabe que da' para clicar nunca passa la'
   o rato para descobrir. E o Fernando pode estar num telemovel, onde nao ha'
   "passar por cima" nenhum. */
.ag-lapis { opacity: .5; margin-left: 2px; font-weight: 400; }
.ag-clic:hover .ag-lapis, .ag-clic:focus-visible .ag-lapis { opacity: .9; }
/* A hora PEDIDA pela COFEMEL. Selo com o mesmo peso do "Agendado" do lado, mas
   NEUTRO: o verde/ambar do outro quer dizer "bate certo / nao bate", e isto nao e'
   um estado — e' o pedido. Se levasse cor, roubava o significado ao do lado.
   O lapis fica sempre a' vista, senao ninguem descobre que da' para clicar. */
.pr-chip { cursor: pointer; display: inline-block; padding: 3px 7px;
  border-radius: 999px; background: #f4f6fb; border: 1px solid #dbe2ee;
  color: #26324a; font-weight: 600; white-space: nowrap; line-height: 1.5;
  font-variant-numeric: tabular-nums; font-size: 12px;
  transition: background .12s, border-color .12s, box-shadow .12s; }
.pr-chip:hover { background: #eaf0ff; border-color: #1c3f94;
  box-shadow: 0 1px 5px rgba(20,35,80,.14); }
.pr-chip:focus-visible { outline: 2px solid #1c3f94; outline-offset: 2px; }
.pr-lapis { opacity: .5; font-weight: 400; }
.pr-chip:hover .pr-lapis, .pr-chip:focus-visible .pr-lapis { opacity: .9; }
/* O selo do estado NUNCA se parte. Partido, a palavra mais comprida saltava para
   fora da bolha de cor e lia-se "A" numa linha e "DESCARREGAR" por cima do fundo
   branco. Se um dia nao couber, e' a coluna que tem de crescer — nao o texto que
   se parte. Um pouco mais pequeno para caber com folga. */
.tc-tab .badge { white-space: nowrap; font-size: .58rem; letter-spacing: .05em;
  padding: 4px 9px; }
/* O CAMIAO PREVISTO. Discreto e a cinzento de proposito: e' o plano da vespera,
   nao e' um facto. O camiao que esta' MESMO a levar a carga tem outro peso no
   ecra (o cartao, o mapa) — se este tivesse o mesmo ar, confundiam-se, e o
   ultimo erro de que este projecto precisa e' de pintar um plano como se fosse
   uma coisa que ja' aconteceu. */
.pv-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px;
  background: #f3f5f9; border: 1px dashed #ccd4e2; color: #66718a;
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 600;
  white-space: nowrap; vertical-align: middle; }
.pv-chip i { font-style: normal; font-weight: 400; opacity: .75;
  font-family: var(--fonte, inherit); }
/* POSICAO VELHA. Nao e' verde nem ambar de "esta' a andar devagar" — e' a cor de
   nao saber. Um camiao que nao reporta ha' 20 minutos nao esta' "parado": esta'
   desaparecido, e sao coisas diferentes para quem espera por ele. */
.tc-mapa.velho { color: #8a5c00; }
.tc-mapa.velho b { color: #8a5c00; }
.tc-mapa.velho .tc-sub { color: #a8801f; }
.vem-n.alerta b { color: #8a5c00; }
/* A VOLTA DO VAZIO no ciclo de vida. Depois de "Entregue" ja' nao e' a carga que
   anda — e' a lata a caminho do parque. Sem esta distincao, o desenho lia-se como
   se o contentor cheio continuasse em viagem depois de descarregado. */
.cv-passo.volta { border-style: dashed; }
.cv-passo.volta .cv-bola { background: #5a6577; }
.cv-passo.volta.feito .cv-bola { background: #0f766e; }
.cv-passo.volta b { color: #3d4759; }
/* O vazio que saiu do patio vai A CAMINHO — nao esta' entregue. Ambar de camiao
   na estrada, nunca o verde de "feito": o verde e' para o que ja' chegou. */
.fq-n.indo { background: #fff3d6; color: #8a5c00; border-color: #f0d089; }
.fq-ainda { display: block; font-size: 11px; color: #8a6400; }
/* Vazio que saiu SEM matrícula: o GPS não o consegue seguir e o fecho
   automático não existe para ele. Âmbar (é um aviso, não um erro): resolve-se
   com o botão do motorista ou com o "Dar como entregue" da DSV. */
.fq-sem-mat {
  display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  color: var(--warn, #B4690E); background: var(--warn-bg, #FFF6E9);
  border: 1px solid var(--warn-bd, #F4D9A8);
}
.fq-kpi.feito b { color: #1f6b28; }
/* O transitario e' quem liberta a carga do outro lado: e' a ele que se manda a
   lista e a quem se pedem contas por um atraso. Discreto na tabela, mas presente. */
.tc-tr { font-size: 12.5px; color: #4a5567; }
/* (Havia aqui uma segunda regra a esconder td:nth-child(4) abaixo de 1100px —
   resto da coluna do transitario, que ja nao existe na tabela. Era ela que
   fazia as linhas deslizarem uma coluna em relacao aos cabecalhos. Removida;
   as regras responsivas da tabela vivem todas junto ao .tc-b, acertadas a'
   ordem real das 7 colunas.) */
/* Botoes dentro do cabecalho AZUL. O `.btn.sec` normal e' azul-escuro sobre
   transparente: no fundo escuro do hero ficava azul sobre azul, ou seja, uma
   caixa vazia. Era isso o "botao bugado" — o texto estava la', invisivel. */
.cl-hero .btn.sec, .hero-vz .btn.sec, .cl-topo .btn.sec {
  color: #fff;
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
}
.cl-hero .btn.sec:hover, .hero-vz .btn.sec:hover, .cl-topo .btn.sec:hover {
  background: rgba(255,255,255,.22);
  border-color: #fff;
}
/* ---- "MUDOU DESDE QUE OLHASTE" ------------------------------------------
   O amarelo que o Simao pinta a mao no email, feito sozinho. Apaga-se quando a
   pessoa abre o contentor — e so' para ela. */
.tc-mudou { --tc-cor: #e2a300; }
.tc-mudou td { background: #fffaed; }
.tc-mudou:hover td { background: #fff4d8; }
.tc-mud { display: inline-block; margin-top: 3px; background: #ffdf9e; color: #6b4e00;
  border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .3px;
  /* Este selo era o que rebentava a coluna: 176px numa celula de 173px, e vinha
     cortado a meio da palavra. Pode partir-se em duas linhas — sao tres palavras
     curtas, nao ha' nada aqui que precise de ficar numa linha so'. */
  white-space: normal; max-width: 100%; line-height: 1.35; }
/* A urgencia ganha a' novidade: se e' as duas coisas, o que manda e' "e' o proximo". */
.tc-urg.tc-mudou { --tc-cor: #e5484d; }
/* ===================== VISÃO GERAL / FATURAÇÃO =========================
   A barra de filtros e a de acções. Os filtros ficam em linha e quebram
   sozinhos: são sete e num portátil não cabem todos na mesma fila.
   O resumo por baixo é o que se lê ANTES de carregar em exportar — se
   houver entregues sem valor, o número aparece a vermelho aqui, não só
   dentro do Excel depois de já ter sido mandado ao cliente. */
.vg-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  padding:12px 14px;background:var(--surface-2,#F6F8FB);border:1px solid var(--border,#E3E7EE);
  border-radius:10px;margin-bottom:12px}
.vg-filtros label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;
  font-weight:600;color:var(--text-muted,#5A6478);text-transform:uppercase;letter-spacing:.3px}
.vg-filtros input,.vg-filtros select{border:1px solid var(--border,#CCD3E0);border-radius:7px;
  padding:6px 9px;font-family:inherit;font-size:13.5px;color:var(--text);background:#fff;
  text-transform:none;letter-spacing:0;font-weight:400}
.vg-filtros input:focus,.vg-filtros select:focus{outline:2px solid var(--dsv-light);outline-offset:-1px}
.vg-filtros .btn{padding:6px 12px;font-size:13px}
/* O De e o Até: o botão do calendário da casa em vez do `<input type="date">`,
   que vinha em inglês e com mm/dd/yyyy. Ver a nota em `vgCal`.
   O ✕ só aparece quando há data escolhida — o input do browser trazia um, e sem
   ele não havia como desfazer uma escolha sem limpar os filtros todos. */
.vg-data{display:flex;align-items:center;gap:4px}
.vg-data .fm-dia{font-size:13.5px;padding:6px 10px}
.vg-data-x{border:1px solid var(--border,#CCD3E0);background:#fff;color:var(--text-muted,#5A6478);
  border-radius:7px;width:26px;height:30px;cursor:pointer;font-size:12px;line-height:1;
  font-family:inherit;flex:none}
.vg-data-x:hover{border-color:var(--danger);color:var(--danger);background:#FDECEA}

.vg-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:0 2px 12px;
  font-size:13px;color:var(--text-muted,#5A6478)}
.vg-resumo b{color:var(--text);font-size:15px}
/* Um entregue sem valor é uma linha que não vai na fatura. Vermelho porque
   é dinheiro que se perde sem ninguém dar por falta. */
.vg-resumo .vg-mal{color:var(--danger);font-weight:600}
.vg-resumo .vg-mal b{color:var(--danger)}
.vg-resumo .vg-sel{margin-left:auto;font-weight:600;color:var(--dsv)}

.vg-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 2px 14px;
  padding:11px 14px;background:var(--warn-bg,#FFF6E9);border:1px solid var(--warn-bd,#F4D9A8);
  border-radius:10px}
.vg-acoes b{font-size:13px;color:var(--warn);margin-right:4px}
.vg-acoes .btn{padding:6px 13px;font-size:13px}
.vg-acoes .btn:disabled{opacity:.45;cursor:default}

/* Saída do filtro de período. Só existe quando há filtro — ver a nota em
   montarFiltroPeriodo. Amarelo de aviso e não azul de acção: não é mais uma
   opção a par das outras, é o sinal de que se está a ver uma parte só. */
.fp-todos{border:1px solid var(--warn-bd,#F4D9A8);background:var(--warn-bg,#FFF6E9);
  color:var(--warn,#B4690E);border-radius:8px;padding:7px 12px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;line-height:1}
.fp-todos:hover{background:#FBEAD0;border-color:#E9C489}

/* ===================== SECÇÃO QUE SE DOBRA =============================
   Para o que se mexe de meses a meses (os preços) não ocupar meio ecrã no
   painel que se usa todos os dias.

   FECHADA CONTINUA A DIZER OS VALORES, na linha do título — ver a nota no
   painel de admin. Uma secção que esconde a informação ao fechar obriga a
   abri-la para conferir, e aí mais valia estar sempre aberta. */
.dobra { margin: 22px 0 0; }
.dobra > summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none;
  background: var(--card,#fff); border: 1px solid var(--border,#E3E7EE);
  border-radius: 12px; transition: border-color .15s, background .15s;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary:hover { border-color: var(--border-strong,#CBD5E8); background: #FAFCFF; }
.dobra > summary:focus-visible { outline: 2px solid var(--dsv-light,#2E45A0); outline-offset: 2px; }
/* Aberta, o cabeçalho encosta ao painel de baixo e passam a ler-se como um só. */
.dobra[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.dobra[open] > .painel { border-radius: 0 0 12px 12px; margin-top: 0; }

.db-seta { color: var(--dsv,#192862); font-size: .8rem; transition: transform .18s; flex: none; }
.dobra[open] .db-seta { transform: rotate(90deg); }
.db-tit { font-weight: 800; color: var(--dsv,#192862); font-size: .95rem; flex: none; }
/* O resumo empurra a acção para a direita e encolhe primeiro se faltar espaço. */
.db-resumo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .8rem; color: var(--text-muted,#5A6478);
}
.db-resumo b { font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-weight: 700; color: var(--text,#1B2436); }
.db-resumo i { color: var(--border-strong,#CBD5E8); font-style: normal; }
.db-acao {
  flex: none; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--dsv-light,#2E45A0);
  border: 1px solid var(--border,#E3E7EE); border-radius: 999px; padding: 4px 11px;
}
.dobra > summary:hover .db-acao { border-color: var(--dsv-light,#2E45A0); }
@media (max-width: 640px) { .db-resumo { order: 3; flex-basis: 100%; } }
/* Um número mau na linha fechada (ex.: vazios sem parque indicado). É o que
   torna seguro deixar a secção fechada: o que precisa de atenção vê-se sem
   abrir. */
.db-resumo .db-mal, .db-resumo .db-mal b { color: var(--danger,#D93A31); font-weight: 700; }

/* O filtro de período está agora colado à tabela que filtra: encosta-se ao
   painel de baixo em vez de flutuar por cima dele. */
.dobra + .sec-t { margin-top: 26px; }
#filtro-periodo + .painel { margin-top: 10px; }
/* ============ LISTA DE CONTENTORES: em aberto / ciclo fechado ============
   Duas secções em vez de uma tabela infinita — ver a nota no painel de admin.
   O que está em aberto nunca pagina; os fechados agrupam-se por dia. */
/* ---- Acções no cabeçalho de um painel ----
   Vivia no <style> do painel do admin. Passou para aqui quando o painel do
   cliente precisou do mesmo: duas definições da mesma classe em dois ficheiros é
   o princípio de duas que divergem. */
.h3-accoes { display:inline-flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
/* Num telemovel o "📦 Adicionar contentores" e' mais largo do que o espaco que
   sobra ao lado do titulo e empurrava a PAGINA para fora do ecra. Aqui desce
   para a linha de baixo, a toda a largura, em vez de esticar o painel. */
@media (max-width: 700px) {
  /* O h3 tem de deixar a linha partir, senao o bloco de accoes fica preso ao
     lado do titulo por muito que se lhe de' `width:100%`. */
  .painel > h3, h3:has(> .h3-accoes) { flex-wrap: wrap; }
  .h3-accoes { margin-left:0; width:100%; margin-top:8px; }
  .h3-accoes .btn { flex:1; justify-content:center; min-height:34px; }
}

/* ---- IMPORTAR A FOLHA (painel da COFEMEL) ----
   VERDE, e não azul, de propósito. É o único botão deste painel que ESCREVE
   contentores — todos os outros abrem coisas para ver. Azul, ficava a ser mais
   um no meio dos outros; verde é a cor de acrescentar e lê-se de relance no meio
   de uma lista onde tudo o resto é azul ou cinzento.
   Vive colado ao título "Os meus contentores" porque é essa a lista que ele
   altera — estava três ecrãs acima, na fila das ferramentas de consulta, e nada
   dizia que os contentores em baixo vinham dali. */
.painel h3 .cl-import {
  background:linear-gradient(135deg,var(--ok,#178048),var(--ok-light,#22a35a));
  font-weight:800; letter-spacing:.02em; text-transform:none;
  padding:8px 15px; white-space:nowrap;
}
.painel h3 .cl-import:hover { box-shadow:0 4px 14px rgba(23,128,72,.32); }

.painel h3 .lst-mal {
  margin-left:10px; font-size:.72rem; font-weight:700; color:var(--danger,#D93A31);
  background:var(--danger-bg,#FDECEA); border:1px solid var(--danger-bd,#F3B9B4);
  border-radius:999px; padding:3px 10px; text-transform:none; letter-spacing:0;
}
.painel h3 .lst-tot {
  margin-left:10px; font-family:var(--mono, ui-monospace, Consolas, monospace);
  font-size:.85rem; font-weight:700; color:var(--ok,#178048);
}

/* ---- Um dia de contentores concluídos ---- */
.dia-bl { border:1px solid var(--border,#E3E7EE); border-radius:10px; margin-bottom:8px; background:var(--card,#fff); }
.dia-bl[open] { border-color:var(--border-strong,#CBD5E8); }
.dia-bl > summary {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; cursor:pointer; list-style:none;
}
.dia-bl > summary::-webkit-details-marker { display:none; }
.dia-bl > summary:hover { background:#FAFCFF; border-radius:10px; }
.dia-bl > summary:focus-visible { outline:2px solid var(--dsv-light,#2E45A0); outline-offset:-2px; }
.dia-bl[open] > summary { border-bottom:1px solid var(--border,#E3E7EE); border-radius:10px 10px 0 0; }
.dia-dt { font-weight:800; color:var(--dsv,#192862); font-size:.88rem; flex:none; }
/* O número de contentores e o total empurram-se para as pontas: a data à
   esquerda, o dinheiro à direita, em coluna alinhada de dia para dia. */
.dia-n   { flex:1; font-size:.78rem; color:var(--text-muted,#5A6478); }
.dia-eur { font-family:var(--mono, ui-monospace, Consolas, monospace); font-weight:700;
  font-size:.85rem; color:var(--ok,#178048); flex:none; }
.dia-mg  { font-size:.72rem; color:var(--text-muted,#5A6478); flex:none; min-width:112px; text-align:right; }
.dia-bl > div { padding:4px 10px 10px; }
.dia-bl table.tabela { margin:0; }

/* ---- Paginação ---- */
.pag { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border,#E3E7EE); flex-wrap:wrap; }
.pag .btn { padding:6px 13px; font-size:13px; }
.pag .btn:disabled { opacity:.4; cursor:default; }
.pag-n { font-weight:700; font-size:.82rem; color:var(--dsv,#192862); }
.pag-inf { margin-left:auto; font-size:.75rem; color:var(--text-muted,#5A6478); }
@media (max-width:560px) { .dia-mg { display:none; } }
/* ---- Reports: o que entra no ficheiro ----
   Três botões agarrados, não uma lista pendente: são três e são exclusivos, e
   ver as três hipóteses ao mesmo tempo poupa um clique para descobrir que elas
   existem. Fica em primeiro porque muda o conteúdo de tudo o que vem abaixo. */
.rp-estado { margin-bottom:16px; }
.rp-estado .rp-lbl {
  display:block; font-size:.62rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted,#5A6478); margin-bottom:7px;
}
.rp-seg { display:flex; gap:0; border:1px solid var(--border,#E3E7EE); border-radius:10px; overflow:hidden; }
.rp-seg button {
  flex:1; border:0; border-right:1px solid var(--border,#E3E7EE); background:#fff;
  padding:9px 12px; cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:700;
  color:var(--text-muted,#5A6478); display:flex; flex-direction:column; gap:2px; line-height:1.25;
}
.rp-seg button:last-child { border-right:0; }
.rp-seg button small { font-size:.68rem; font-weight:500; color:var(--text-light,#8A93A5); }
.rp-seg button:hover { background:#F6F8FB; }
.rp-seg button.on { background:var(--dsv,#192862); color:#fff; }
.rp-seg button.on small { color:rgba(255,255,255,.75); }
@media (max-width:560px) {
  .rp-seg { flex-direction:column; }
  .rp-seg button { border-right:0; border-bottom:1px solid var(--border,#E3E7EE); }
  .rp-seg button:last-child { border-bottom:0; }
}
/* O par de datas dos Reports é o MESMO componente do filtro do painel
   (.fp-datas/.fp-dt), para não haver duas maneiras de escolher uma data na
   mesma app — e para não voltar a aparecer aqui o calendário do sistema em
   MM/DD/AAAA. Só se lhe dá o alinhamento desta caixa. */
.rp-datas .rp-cal { align-self:flex-end; }
.rp-datas .rp-cal .fp-dt { padding:8px 14px; }
.rp-datas .rp-cal .fp-dt small {
  font-size:.58rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted,#5A6478); margin-right:2px;
}
/* ---- DIA E HORA NOS FORMULARIOS -------------------------------------------
   Substituem o <input type="datetime-local">, que era chrome do sistema: vinha
   em ingles, com mm/dd/yyyy e AM/PM, e nao aceita CSS nenhum. Estes sao nossos,
   por isso ficam iguais ao resto e em portugues. O calendario que abre e' o
   mesmo do filtro de periodo (.calp). */
.fm-dt { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.fm-dia {
  flex:1; min-width:190px; text-align:left; cursor:pointer; font-family:inherit;
  font-size:.92rem; font-weight:600; color:var(--dsv);
  background:var(--card); border:1px solid var(--border-strong,#CBD5E8); border-radius:9px;
  padding:10px 12px; transition:border-color .14s, background .14s;
  display:flex; align-items:center; gap:8px;
}
.fm-dia::before { content:"\1F4C5"; font-size:.95rem; filter:grayscale(.35); }
.fm-dia:hover { border-color:var(--dsv-light,#2E45A0); background:var(--bg); }
.fm-dia:focus-visible { outline:2px solid var(--dsv-light,#2E45A0); outline-offset:-1px; }
.fm-hora { display:inline-flex; align-items:center; gap:4px; }
/* Os selects da hora sao estreitos de proposito: sao dois numeros, e a largura
   automatica punha-os do tamanho de um campo de texto, a fingir de campo livre. */
.fm-hora select {
  width:auto; min-width:64px; padding:10px 8px; font-family:var(--mono, ui-monospace, Consolas, monospace);
  font-weight:700; font-size:.92rem; text-align:center;
  border:1px solid var(--border-strong,#CBD5E8); border-radius:9px; background:var(--card);
}
.fm-hora b { color:var(--text-muted,#5A6478); font-weight:800; }
/* Falta escolher o dia: o input verdadeiro esta escondido e o browser nao o
   podia assinalar sozinho. */
.fm-dt.falta .fm-dia { border-color:var(--danger,#D93A31); background:var(--danger-bg,#FDECEA); }

/* ---- CARTOES DO RESUMO QUE SE PODEM MUDAR ----------------------------------
   No ecra do contentor, o ponto de levantamento, a hora pretendida e o parque
   do vazio eram texto. Quem os abria via o valor e nao tinha por onde lhe pegar
   — tinha de fechar tudo e ir procurar a linha na tabela. Agora clicam-se, para
   quem manda neles. O lapis fica SEMPRE a' vista: se so' aparecesse ao passar
   por cima, ninguem descobria que dava. */
.det-resumo .item-edit { cursor:pointer; transition:border-color .14s, background .14s, box-shadow .14s; }
.det-resumo .item-edit:hover {
  border-color:var(--dsv-light,#2E45A0); background:var(--bg,#F4F6FA);
  box-shadow:0 2px 8px rgba(25,40,98,.08);
}
.det-resumo .item-edit:focus-visible { outline:2px solid var(--dsv-light,#2E45A0); outline-offset:2px; }
.det-resumo .item-lapis { font-size:.78rem; color:var(--dsv-light,#2E45A0); margin-left:5px; vertical-align:1px; }
.det-resumo .item-edit:hover .item-lapis { color:var(--dsv,#192862); }

/* ---- SEPARADOR DE DIA NA LISTA EM ABERTO -----------------------------------
   A lista atravessa varios dias. Ordenada sem separacoes e' so' uma fila
   comprida: nao se ve' onde acaba o trabalho de hoje e comeca o de amanha. */
/* O separador tem de SEPARAR (31/08/2026): era uma faixa cinzenta quase igual
   as linhas zebradas e perdia-se no meio delas. Agora e' azul da marca, com o
   mesmo peso do cabecalho da tabela, e cada dia novo traz 10px de respiro por
   cima (border-top transparente: uma <tr> nao aceita margem). */
.tabela tr.dia-sep td {
  background:linear-gradient(90deg,var(--dsv,#192862),var(--dsv-light,#2E45A0));
  border-top:10px solid var(--card,#fff); border-bottom:0; padding:8px 12px;
}
.tabela tr.dia-sep:hover td {
  background:linear-gradient(90deg,var(--dsv,#192862),var(--dsv-light,#2E45A0));
}   /* nao reage ao rato: nao e' clicavel */
.tabela tr.dia-sep .dia-nome { font-size:.78rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; }
.tabela tr.dia-sep .dia-n { float:right; margin-left:10px; font-size:.68rem; font-weight:700;
  color:#E7ECFA; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:2px 9px; }
/* HOJE salta a vista sem se procurar: barra grossa na cor de acento a esquerda
   e a etiqueta "Hoje ·" que o fmtDiaSemana ja escreve. */
.tabela tr.dia-sep.sep-hoje td { box-shadow:inset 5px 0 0 var(--accent,#F5A623); }
.tabela tr.dia-sep.sep-hoje .dia-nome { color:var(--accent,#F5A623); }


/* O ÂMBAR DO "VAZIO NA RUA": entregue na COFEMEL mas com a lata ainda por
   chegar ao parque — não conta para a contabilidade até fechar. A mesma régua
   do report "Ciclo fechado 100%". */
.n-rua { color:#B4690E; font-weight:700; }
.txt-rua { color:#B4690E; }
.dia-rua {
  font-size:.68rem; font-weight:800; color:#B4690E; background:#FFF6E9;
  border:1px solid #EFD7AC; border-radius:99px; padding:2px 9px; white-space:nowrap;
}

/* A TROCA na linha: âmbar para o que saiu (está sem hora, é trabalho por
   fazer), cinzento para o que entrou (é só contexto). */
.tc-troca {
  font-size:.64rem; font-weight:800; border-radius:99px; padding:2px 8px;
  margin-left:6px; white-space:nowrap; vertical-align:middle;
}
.tc-troca.saiu { color:#B4690E; background:#FFF6E9; border:1px solid #EFD7AC; }
.tc-troca.entrou { color:var(--text-muted,#5A6478); background:var(--bg,#F4F6FA); border:1px solid var(--border,#E3E7EE); }
/* Na folha de trabalho o nº vive numa célula estreita: o chip em linha própria,
   senão estendia-se por cima da coluna do tipo. */
.lt-num .tc-troca { display:block; width:max-content; margin:3px 0 0; }
/* O chip da troca dentro do CARTÃO (o painel do despachante usa cartões, não
   tabela): numa linha própria, senão colava-se ao selo do estado. */
.ct-troca-l { padding:0 14px 8px; }
.ct-troca-l .tc-troca { margin-left:0; }

/* HISTÓRICO DE REPORTS: todos os problemas, por dia, com procura. */
.al-hist { margin-left:auto; font-size:.72rem; }
.al-painel h3 { display:flex; align-items:center; gap:10px; }
.oh-cab {
  display:flex; align-items:baseline; gap:8px; font-weight:800; font-size:.8rem;
  color:var(--dsv,#192862); margin:14px 0 8px; padding-bottom:4px;
  border-bottom:1px solid var(--border,#E3E7EE);
}
.oh-cab::first-letter { text-transform:uppercase; }
.oh-cab span { font-family:var(--mono); font-size:.72rem; color:var(--text-light); }
.oh-lista { list-style:none; display:flex; flex-direction:column; gap:8px; }
.oh-li {
  display:flex; gap:12px; align-items:flex-start; padding:10px 12px;
  background:var(--card,#fff); border:1px solid var(--border,#E3E7EE);
  border-left:3px solid var(--border,#E3E7EE); border-radius:10px; cursor:pointer;
  transition:box-shadow .13s, transform .1s;
}
.oh-li:hover { box-shadow:var(--shadow); transform:translateX(2px); }
.oh-li.ok { border-left-color:#178048; }
.oh-li.ab { border-left-color:#B4690E; background:#FFFDF7; }
.oh-li.urg { border-left-color:#D93A31; background:#FFF7F6; }
.oh-b {
  flex:0 0 auto; font-size:.62rem; font-weight:800; letter-spacing:.05em;
  padding:3px 9px; border-radius:99px; margin-top:2px; white-space:nowrap;
  color:#B4690E; background:#FFF6E9; border:1px solid #EFD7AC;
}
.oh-b.ok { color:#178048; background:#F0FBF4; border-color:#C3E4CF; }
.oh-b.urg { color:#fff; background:#D93A31; border-color:#D93A31; }
.oh-t { font-size:.82rem; color:var(--text); }
.oh-m { font-size:.72rem; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.oh-q { font-size:.66rem; color:var(--text-light); font-family:var(--mono); margin-top:3px; }
.oh-q i { color:#178048; font-style:normal; }