/* ==========================================================================
   Kamaro — sistema visual do Portal Expedição
   Tokens, base e componentes compartilhados por todas as páginas.
   ========================================================================== */

:root{
  /* tipografia */
  --fonte: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --fonte-num: 'IBM Plex Mono', ui-monospace, monospace;

  /* marca — verde industrial da Kamaro, escala própria */
  --verde-900:#0f1d1a;
  --verde-800:#16302b;
  --verde-700:#1c332f;
  --verde-600:#284c47;
  --verde-500:#3c655e;
  --verde-200:#c4d7d1;
  --verde-100:#e2ece8;
  --verde-050:#eef3f1;

  /* acento — laranja de segurança, uso deliberado e restrito */
  --accent:#b85f1f;
  --accent-600:#a2531b;
  --accent-100:#f7e3d1;

  /* neutros */
  --ink:#16211e;
  --ink-2:#42504b;
  --ink-3:#71807a;
  --line:#d7ddd8;
  --line-2:#e7ebe7;
  --bg:#f2f4f1;
  --panel:#ffffff;

  /* semânticos — uma só definição para o site inteiro */
  --ok:#1f6e51; --ok-bg:#e5f1e9; --ok-line:#b9dac6;
  --warn:#93600a; --warn-bg:#fbf0da; --warn-line:#ecd193;
  --crit:#a12e2a; --crit-bg:#fae9e8; --crit-line:#edc0be;
  --info:#1c5a86; --info-bg:#e6eff6; --info-line:#bfd8ea;
  --pip:#7a5200; --pip-bg:#faf1d9; --pip-line:#e9d192;

  /* fluxo de estoque (entradas/saídas) — cores fixas do site inteiro */
  --entradas:#1c5a86;
  --saidas:#b85f1f;
  --estoque:#1f6e51;

  /* forma */
  --raio:10px;
  --raio-sm:6px;
  --raio-lg:14px;
  --sombra:0 2px 7px rgba(22,31,29,.11);
  --sombra-lg:0 10px 28px rgba(15,29,26,.16);
  --foco:#2c7a63;
}

@media (prefers-color-scheme: dark){
  :root{ color-scheme: light; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--fonte); font-size:14.5px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--fonte); margin:0; }
input[type=checkbox], input[type=radio]{ accent-color:var(--ok); }
:focus-visible{ outline:2.5px solid var(--foco); outline-offset:2px; border-radius:3px; }
::selection{ background:var(--verde-200); color:var(--verde-900); }
.num, .tabular{ font-family:var(--fonte-num); font-variant-numeric:tabular-nums; }

/* ---------- utilidades ---------- */
.wrap{ max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,28px) 28px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
[hidden]{ display:none !important; }
.rotulo-secao{ font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }

/* ---------- ícones ---------- */
.i{ width:1em; height:1em; display:inline-block; vertical-align:-.15em; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.i-lg{ width:22px; height:22px; }
.i-xl{ width:28px; height:28px; }

/* ---------- topo ---------- */
.topbar{
  background:var(--verde-800); color:#fff; padding:10px clamp(16px,4vw,28px);
  display:flex; align-items:center; gap:12px; border-bottom:3px solid var(--accent);
}
.topbar img.marca{ height:30px; display:block; border-radius:4px; }
.topbar .nome{ font-size:14.5px; font-weight:600; line-height:1.2; }
.topbar .sub{ font-size:10.5px; color:#a9c0b8; letter-spacing:.2px; }
.topbar .data{ margin-left:auto; font-size:11.5px; color:#a9c0b8; text-align:right; font-family:var(--fonte-num); }
.topbar .voltar-home{ color:#dce9e4; text-decoration:none; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:5px; padding:9px 4px; }
.topbar .voltar-home:hover{ text-decoration:underline; }
/* links do topo (voltar à Home e atalhos): área de toque de pelo menos ~34px de altura no celular */
.topbar > a{ padding-top:9px; padding-bottom:9px; }
@media (max-width:560px){ .topbar .data{ display:none; } }

/* menu dropdown (usado em Estoque, PCP etc) */
.dropdown{ position:relative; margin-left:auto; }
.dropdown-toggle{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:var(--raio-sm); width:38px; height:34px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dropdown-toggle:hover{ background:rgba(255,255,255,.18); }
.dropdown-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra-lg); min-width:230px; padding:6px; display:none; z-index:60; }
.dropdown-menu.show{ display:block; }
.dropdown-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:500; border:none; background:none; width:100%; text-align:left; cursor:pointer; }
.dropdown-item:hover{ background:var(--verde-050); }
.dropdown-item .i{ color:var(--ink-3); }
.menu-badge{ margin-left:auto; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:20px; }

/* ---------- faixa hero (Home) ---------- */
.hero{ background:linear-gradient(155deg,var(--verde-900) 0%,var(--verde-700) 100%); color:#fff; padding:clamp(20px,4vw,36px) clamp(16px,4vw,28px) 72px; position:relative; }
.hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent); }
.hero-in{ max-width:1100px; margin:0 auto; }
.perfil-chip{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:4px 11px; border-radius:20px; background:rgba(255,255,255,.12); color:#dce9e4; margin:0 0 12px; border:1px solid rgba(255,255,255,.2); }
.perfil-chip:empty{ display:none; }
.hero h1{ font-size:clamp(21px,3.6vw,29px); margin:0 0 6px; font-weight:600; letter-spacing:-.2px; }
.hero p.desc{ margin:0 0 20px; font-size:14px; color:#c3d6ce; line-height:1.5; max-width:600px; }

.busca{ position:relative; max-width:680px; }
.busca .i-lupa{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none; }
.busca input[type=text]{ width:100%; font:inherit; font-size:15px; padding:13px 42px 13px 42px; border-radius:var(--raio); border:2px solid transparent; background:#fff; color:var(--ink); box-shadow:0 6px 18px rgba(0,0,0,.18); min-height:48px; }
.busca input::placeholder{ color:var(--ink-3); }
.busca input[type=text]:focus{ outline:none; border-color:var(--foco); }
.busca .limpar{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:var(--bg); color:var(--ink-2); width:30px; height:30px; border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; }
.busca.tem .limpar{ display:flex; }
.dica{ font-size:11.5px; color:#a9c0b8; margin-top:8px; }
.res{ background:#fff; color:var(--ink); border-radius:var(--raio); margin-top:8px; box-shadow:var(--sombra-lg); overflow:hidden; display:none; text-align:left; border:1px solid var(--line); }
.res.show{ display:block; }
.res-msg{ padding:14px 16px; font-size:13px; color:var(--ink-2); }
.res-sum{ padding:9px 16px; background:var(--ok-bg); color:var(--ok); font-size:12.5px; font-weight:600; border-bottom:1px solid var(--ok-line); }
.res-tit{ padding:9px 16px 4px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-3); }
.res-item{ display:flex; align-items:center; gap:11px; padding:9px 16px; text-decoration:none; border-top:1px solid var(--line-2); color:var(--ink); }
.res-item:hover, .res-item:focus-visible{ background:var(--verde-050); }
.pos{ font-family:var(--fonte-num); font-weight:600; font-size:11.5px; background:var(--verde-100); color:var(--verde-800); padding:3px 8px; border-radius:var(--raio-sm); white-space:nowrap; flex:0 0 auto; }
.pos.pip{ background:var(--pip-bg); color:var(--pip); border:1px solid var(--pip-line); }
.res-txt{ min-width:0; flex:1; }
.res-l1{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res-l2{ font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.res-l2 .venc{ color:var(--crit); font-weight:700; }
.res-seta{ color:var(--ink-3); flex:0 0 auto; }
.res-mais{ padding:9px 16px; font-size:11.5px; color:var(--ink-3); border-top:1px solid var(--line-2); }

main, .wrap{ max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,28px) 24px; }

/* ---------- painel "agora" (tiles de números) ---------- */
.agora{ margin-top:-46px; position:relative; z-index:2; }
.tiles{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
@media (max-width:900px){ .tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tile:nth-child(5){ grid-column:1/-1; } }
.tile{ background:var(--panel); padding:13px 15px; min-width:0; text-decoration:none; display:block; color:var(--ink); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); }
a.tile{ transition:box-shadow .12s ease, border-color .12s ease; }
a.tile:hover{ border-color:var(--verde-500); box-shadow:var(--sombra-lg); }
.tile .rot{ font-size:11.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.tile .rot i{ width:8px; height:8px; border-radius:50%; display:inline-block; font-style:normal; }
.tile .rot svg.i{ width:13px; height:13px; }
.tile .val{ font-family:var(--fonte-num); font-size:25px; font-weight:600; line-height:1.15; margin:5px 0 2px; color:var(--verde-800); }
.tile .sub{ font-size:11.5px; color:var(--ink-3); }
.sk{ display:inline-block; width:60px; height:23px; border-radius:4px; background:linear-gradient(90deg,var(--line-2),#f6f8f6,var(--line-2)); background-size:200% 100%; animation:brilho 1.4s linear infinite; vertical-align:middle; }
@keyframes brilho{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.alertas{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; min-height:30px; }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; border:1px solid transparent; text-decoration:none; }
.chip.crit{ background:var(--crit-bg); border-color:var(--crit-line); color:var(--crit); }
.chip.warn{ background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.chip.ok{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok); }
.chip.neutro{ background:var(--line-2); border-color:var(--line); color:var(--ink-2); }
a.chip:hover{ filter:brightness(.97); text-decoration:underline; }
.offline-nota{ font-size:11.5px; color:var(--ink-3); margin-top:10px; }

/* ---------- badge de status (nome único: substitui selo/st/pill/badge) ---------- */
.badge{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; letter-spacing:.2px; padding:2px 9px; border-radius:20px; background:var(--line-2); color:var(--ink-2); white-space:nowrap; border:1px solid transparent; }
.badge:empty{ display:none; }
.badge--ok{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); }
.badge--warn{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.badge--crit{ background:var(--crit-bg); color:var(--crit); border-color:var(--crit-line); }
.badge--info{ background:var(--info-bg); color:var(--info); border-color:var(--info-line); }
.badge--pip{ background:var(--pip-bg); color:var(--pip); border-color:var(--pip-line); }
.badge--vivo{ background:var(--accent); color:#fff; }
.badge--marca{ background:var(--verde-100); color:var(--verde-800); }

/* aviso "novidade" */
.novo{ display:none; align-items:center; gap:11px; margin-top:20px; background:var(--pip-bg); border:1px solid var(--pip-line); color:var(--pip); border-radius:var(--raio); padding:13px 16px; font-size:13px; line-height:1.45; }
.novo.show{ display:flex; }
.novo strong{ font-weight:700; }
.novo a{ font-weight:700; }
.novo button.fechar{ margin-left:auto; border:none; background:transparent; color:var(--pip); cursor:pointer; padding:4px; border-radius:6px; display:flex; min-width:34px; justify-content:center; }
.novo button.fechar:hover{ background:rgba(0,0,0,.06); }

/* ---------- meu dia (resumo pessoal, Home) ---------- */
.meudia{ display:none; margin-top:20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); padding:16px 20px; gap:18px 28px; align-items:center; flex-wrap:wrap; }
.meudia.show{ display:flex; }
.meudia .md-tit{ font-size:12px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--ink-3); flex:0 0 auto; }
.meudia .md-nums{ display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); }
.meudia .md-nums span{ display:flex; flex-direction:column; }
.meudia .md-nums b{ font-family:var(--fonte-num); font-size:22px; line-height:1.2; font-weight:600; color:var(--verde-800); }
.meudia .md-treino{ margin-left:auto; text-decoration:none; color:var(--ink-2); font-size:12.5px; min-width:190px; flex:0 1 240px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.meudia .md-treino b{ color:var(--verde-800); }
.meudia .md-bar{ display:block; width:100%; height:7px; background:var(--line-2); border-radius:6px; margin-top:6px; overflow:hidden; }
.meudia .md-bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:6px; transition:width .6s ease; }
@media (max-width:600px){ .meudia .md-treino{ margin-left:0; flex:1 1 100%; } }

/* ---------- módulos (tiles clicáveis de navegação, Home) ---------- */
.secao{ margin-top:36px; }
.secao h2{ font-size:18px; font-weight:600; color:var(--ink); margin:0 0 14px; }
.mods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:14px; }
.tile-link{ background:var(--panel); padding:16px; text-decoration:none; display:flex; gap:13px; align-items:flex-start; position:relative; cursor:pointer; color:var(--ink); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); transition:box-shadow .12s ease, border-color .12s ease; }
.tile-link:hover{ border-color:var(--verde-500); box-shadow:var(--sombra-lg); }
.tile-link .ico{ width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 38px; background:var(--verde-100); color:var(--verde-700); }
.tile-link .ico.ambar{ background:var(--pip-bg); color:var(--pip); }
.tile-link .ico.laranja{ background:var(--accent-100); color:var(--accent-600); }
.tile-link .ico.cinza{ background:var(--line-2); color:var(--ink-2); }
.tile-link .ico.azul{ background:var(--info-bg); color:var(--info); }
.tile-link h3{ margin:0 0 3px; font-size:14.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tile-link p{ margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.4; }
.tile-link .go{ margin-left:auto; align-self:center; color:var(--ink-3); flex:0 0 auto; }
.tile-link.breve{ background:var(--bg); cursor:default; opacity:.8; }
.tile-link.breve .badge{ background:var(--line-2); color:var(--ink-2); }

.app-footer{ text-align:center; font-size:10.5px; color:var(--ink-3); padding:16px 12px 70px; }

/* ---------- cartão genérico ---------- */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); }
.card > .card-corpo{ padding:16px; }

/* ---------- botões ---------- */
button, .btn{ font-family:inherit; font-size:13px; font-weight:600; border:1px solid var(--line); border-radius:var(--raio-sm); padding:9px 15px; cursor:pointer; background:var(--panel); color:var(--ink); min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1.2; transition:background .12s ease, border-color .12s ease; }
button:hover, .btn:hover{ background:var(--verde-050); border-color:var(--verde-200); }
button:disabled, .btn:disabled{ opacity:.5; cursor:not-allowed; }
button.primary, .btn.primario, .btn--primario{ background:var(--verde-700); border-color:var(--verde-700); color:#fff; }
button.primary:hover, .btn.primario:hover, .btn--primario:hover{ background:var(--verde-800); border-color:var(--verde-800); }
.btn--accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-600); border-color:var(--accent-600); }
.btn--perigo{ background:var(--crit-bg); border-color:var(--crit-line); color:var(--crit); }
.btn--perigo:hover{ background:#f4d8d6; }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--verde-700); }
.btn--ghost:hover{ background:var(--verde-050); }

/* ---------- modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,29,26,.55); display:none; align-items:center; justify-content:center; z-index:80; padding:20px 20px 64px; }
.modal-overlay.show{ display:flex; }
/* Caixa do diálogo: só quando é filha direta do overlay. As páginas com .modal próprio (Cargas, Motoristas, Qualidade, Perfis) usam .modal como camada em tela cheia e não devem herdar largura/altura. */
.modal-overlay > .modal{ background:#fff; border-radius:var(--raio-lg); padding:20px; max-width:460px; width:100%; max-height:calc(100vh - 110px); overflow-y:auto; }
.modal h3{ margin:0 0 6px; font-size:16px; font-weight:600; color:var(--verde-800); }
.modal p{ font-size:13px; color:var(--ink-2); line-height:1.5; margin:0 0 14px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }

/* ---------- formulários ---------- */
.field{ margin-bottom:12px; }
label{ font-size:12px; font-weight:600; color:var(--ink-2); display:block; margin-bottom:4px; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=password], input[type=search], select, textarea{
  font-family:inherit; font-size:15px; border:1px solid var(--line); border-radius:6px; padding:9px 10px; width:100%; background:#fff; color:var(--ink);
}
textarea{ min-height:92px; resize:vertical; font-size:14px; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--foco); box-shadow:0 0 0 3px rgba(44,122,99,.15); }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:64px; left:50%; transform:translateX(-50%); background:var(--verde-900); color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:90; max-width:86vw; text-align:center; }
.toast.show{ opacity:1; }

/* ---------- indicador "ao vivo" (dados atualizando sozinhos) ---------- */
.vivo{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); }
.vivo .ponto{ width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block; animation:pulsar 2s ease-out infinite; }
.vivo.off .ponto{ background:var(--warn); animation:none; }
@keyframes pulsar{ 0%{ box-shadow:0 0 0 0 rgba(31,110,81,.5); } 70%{ box-shadow:0 0 0 8px rgba(31,110,81,0); } 100%{ box-shadow:0 0 0 0 rgba(31,110,81,0); } }
.atualizado{ font-size:12px; color:var(--ink-3); }

/* ---------- kpi ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.kpi{ background:var(--panel); padding:14px 16px; border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); }
.kpi .rot{ font-size:11px; font-weight:600; color:var(--ink-2); }
.kpi .val{ font-family:var(--fonte-num); font-size:22px; font-weight:600; color:var(--verde-800); margin-top:3px; }

@keyframes sobe{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }