/* ==========================================================================
   Intranet Quanthus — COMEX · Painel de Importações (mapa-múndi)
   PORTADO da Área Interna da Global Qomex (painel-comex.css, 20/08/2026).
   Prefixo renomeado pc- → cxm-: a intranet já usa .pc-* no plano de contas
   da Controladoria (mesma lição da colisão ctrl- do kanban).
   O painel tem TEMA PRÓPRIO (claro/escuro no botão, data-cxm-theme): é tela
   de parede/TV — de propósito ele NÃO segue a cor da BU.
   ========================================================================== */
.cxm-scope{
  --cxm-serif:'Georgia','Times New Roman',serif;
  --cxm-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --cxm-mono:'Menlo','Monaco','Courier New',monospace;
}
/* ---------- ESCURO (padrão) ---------- */
.cxm-scope[data-cxm-theme="dark"]{
  --cxm-bg:#10141d; --cxm-bg2:#1a1f2e;
  --cxm-ocean-a:#161c2a; --cxm-ocean-b:#0d1018;
  --cxm-land:#222a3c; --cxm-land-edge:#3a435c; --cxm-land-origin:#2c3753; --cxm-land-dest:#2d3b3a;
  --cxm-graticule:rgba(200,170,130,.06);
  --cxm-txt:#ece8df; --cxm-muted:#a6abba; --cxm-faint:#717892;
  --cxm-accent:#d4a574; --cxm-accent-2:#c8956d; --cxm-gold:#e0b676;
  --cxm-sea:#7ba6bc; --cxm-air:#d8a86b; --cxm-road:#cf9a5e;
  --cxm-panel:rgba(22,27,40,.90); --cxm-panel-edge:rgba(212,165,116,.22);
  --cxm-card:rgba(20,25,37,.94);
  --cxm-port:#dfe0d6; --cxm-port-dest:#e0b676;
  --cxm-halo:rgba(8,10,16,.85);
}
/* ---------- CLARO ---------- */
.cxm-scope[data-cxm-theme="light"]{
  --cxm-bg:#f5f5f0; --cxm-bg2:#ecece4;
  --cxm-ocean-a:#e7ece9; --cxm-ocean-b:#dde4e3;
  --cxm-land:#fbfaf4; --cxm-land-edge:#dad5c6; --cxm-land-origin:#f0ead8; --cxm-land-dest:#e7efe6;
  --cxm-graticule:rgba(60,60,50,.07);
  --cxm-txt:#1a1f2e; --cxm-muted:#6b6b5e; --cxm-faint:#9a9a90;
  --cxm-accent:#a67550; --cxm-accent-2:#c8956d; --cxm-gold:#b8860b;
  --cxm-sea:#557e92; --cxm-air:#a9743f; --cxm-road:#a67550;
  --cxm-panel:rgba(255,255,255,.92); --cxm-panel-edge:rgba(26,31,46,.12);
  --cxm-card:rgba(255,255,255,.96);
  --cxm-port:#2c3344; --cxm-port-dest:#a67550;
  --cxm-halo:rgba(255,255,255,.92);
}
.cxm-scope{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--cxm-panel-edge);
  box-shadow:0 22px 60px rgba(0,0,0,.25)}
.cxm-app{display:flex;flex-direction:column;height:calc(100vh - 215px);min-height:540px;
  color:var(--cxm-txt);font-family:var(--cxm-sans);
  background:radial-gradient(1400px 900px at 76% -12%, var(--cxm-bg2), transparent 55%), var(--cxm-bg)}
/* Tela cheia: painel puro, sem menu nem navegador */
.cxm-scope:fullscreen{border-radius:0;border:0}
.cxm-scope:fullscreen .cxm-app{height:100vh}

/* ---------- TOPO ---------- */
.cxm-header{display:flex;align-items:center;gap:2vw;padding:1.1vh 2vw .9vh;
  border-bottom:1px solid var(--cxm-panel-edge);
  background:linear-gradient(180deg,var(--cxm-panel),transparent)}
.cxm-brand h1{margin:0;font-family:var(--cxm-serif);font-weight:700;
  font-size:clamp(15px,1.2vw,27px);letter-spacing:.01em;line-height:1;color:var(--cxm-txt)}
.cxm-brand .cxm-sub{font-family:var(--cxm-mono);font-size:clamp(7px,.43vw,9px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--cxm-accent-2);margin-top:.5vh}
.cxm-stats{display:flex;gap:2.4vw;margin:0 auto}
.cxm-stats .cxm-s{text-align:center}
.cxm-stats .cxm-s b{display:block;font-family:var(--cxm-serif);font-weight:700;
  font-size:clamp(15px,1.4vw,32px);line-height:1;letter-spacing:-.01em}
.cxm-stats .cxm-s.cxm-money b{color:var(--cxm-accent)}
.cxm-stats .cxm-s span{font-family:var(--cxm-mono);font-size:clamp(6px,.42vw,8px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--cxm-muted)}
.cxm-ctrls{display:flex;align-items:center;gap:.8vw}
.cxm-clock{text-align:right;line-height:1.1;margin-right:.4vw}
.cxm-clock .t{font-family:var(--cxm-mono);font-weight:600;font-size:clamp(13px,.9vw,21px)}
.cxm-clock .d{font-size:clamp(7px,.43vw,10px);color:var(--cxm-muted)}
.cxm-clock .d::first-letter{text-transform:uppercase}
.cxm-btn{display:flex;align-items:center;gap:.5vw;padding:.7vh 1vw;border-radius:9px;cursor:pointer;
  border:1px solid var(--cxm-panel-edge);background:transparent;color:var(--cxm-txt);
  font-family:var(--cxm-sans);font-weight:600;font-size:clamp(8px,.5vw,11px);
  transition:border-color .2s,background .2s,transform .12s}
.cxm-btn:hover{border-color:var(--cxm-accent);transform:translateY(-1px)}
.cxm-btn svg{width:.85vw;height:.85vw;min-width:13px;min-height:13px}
.cxm-updated{font-family:var(--cxm-mono);font-size:clamp(6px,.4vw,8px);color:var(--cxm-muted);text-align:right;line-height:1.35}
.cxm-updated b{color:var(--cxm-txt)}
.cxm-spin svg.ref{animation:cxmSpin .9s linear infinite}
@keyframes cxmSpin{to{transform:rotate(360deg)}}

/* ---------- MAPA ---------- */
.cxm-map-wrap{position:relative;flex:1;min-height:0}
svg#cxmMap{width:100%;height:100%;display:block}
.cxm-ocean{fill:url(#cxmOceanGrad)}
.cxm-grat{stroke:var(--cxm-graticule);stroke-width:.6;fill:none}
.cxm-country{fill:var(--cxm-land);stroke:var(--cxm-land-edge);stroke-width:.5;stroke-linejoin:round}
.cxm-country.origin{fill:var(--cxm-land-origin)}
.cxm-country.dest{fill:var(--cxm-land-dest)}
.cxm-route-halo{fill:none;stroke-linecap:round;stroke-width:9;opacity:.10}
.cxm-route-base{fill:none;stroke-linecap:round;opacity:.32}
.cxm-route-base.sea{stroke:var(--cxm-sea);stroke-width:2}
.cxm-route-base.air{stroke:var(--cxm-air);stroke-width:1.6;stroke-dasharray:1 7}
.cxm-route-flow{fill:none;stroke-linecap:round}
.cxm-route-flow.sea{stroke:var(--cxm-sea);stroke-width:3.4;stroke-dasharray:11 25;animation:cxmFlow 3.1s linear infinite}
.cxm-route-flow.air{stroke:var(--cxm-air);stroke-width:3;stroke-dasharray:7 29;animation:cxmFlow 2.3s linear infinite}
.cxm-route-flow.road{stroke:var(--cxm-road);stroke-width:3;stroke-dasharray:10 26;animation:cxmFlow 3s linear infinite}
@keyframes cxmFlow{to{stroke-dashoffset:-36}}
.cxm-portdot{stroke:var(--cxm-bg);stroke-width:1.5}
.cxm-portlabel{font-family:var(--cxm-sans);font-weight:600;font-size:15.4px;fill:var(--cxm-port);
  paint-order:stroke;stroke:var(--cxm-halo);stroke-width:4px;stroke-linejoin:round}
.cxm-portlabel.dest{fill:var(--cxm-port-dest);font-weight:700}
.cxm-region{font-family:var(--cxm-serif);font-style:italic;font-size:26.4px;letter-spacing:.04em;
  fill:var(--cxm-faint);paint-order:stroke;stroke:var(--cxm-halo);stroke-width:4px}
.cxm-guide{stroke:var(--cxm-panel-edge);stroke-width:1.4;fill:none}
.cxm-pulse{transform-box:fill-box;transform-origin:center;animation:cxmPulse 2.8s ease-in-out infinite}
@keyframes cxmPulse{0%,100%{opacity:.5;r:5}50%{opacity:1;r:8}}
.cxm-ic-shadow{filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
/* cards */
.cxm-card-rect{fill:var(--cxm-card);stroke:var(--cxm-panel-edge);stroke-width:1.2}
.cxm-card-tail{fill:none;stroke:var(--cxm-accent);stroke-width:1.6;opacity:.8}
.cxm-card-anchor{fill:var(--cxm-accent)}
.cxm-c-title{font-family:var(--cxm-serif);font-weight:700;font-size:16.5px;fill:var(--cxm-txt)}
.cxm-c-meta{font-family:var(--cxm-mono);font-size:12.1px;fill:var(--cxm-muted)}
.cxm-c-route{font-family:var(--cxm-mono);font-size:11px;fill:var(--cxm-faint)}
.cxm-c-fat{font-family:var(--cxm-mono);font-weight:700;font-size:13.2px;fill:var(--cxm-accent)}

/* ---------- FILTRO POR CLIENTE (canto superior esquerdo do mapa) ---------- */
.cxm-filter{position:absolute;left:1.6vw;top:1.6vh;z-index:5;display:flex;flex-direction:column;gap:.5vh;
  padding:1vh 1.1vw;border-radius:12px;background:var(--cxm-panel);border:1px solid var(--cxm-panel-edge)}
.cxm-filter-lbl{font-family:var(--cxm-mono);font-size:clamp(6px,.42vw,9px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--cxm-muted)}
.cxm-filter-sel{font-family:var(--cxm-sans);font-weight:600;font-size:clamp(9px,.55vw,13px);color:var(--cxm-txt);
  background:var(--cxm-bg2);border:1px solid var(--cxm-panel-edge);border-radius:8px;padding:.6vh 1.8vw .6vh .8vw;
  cursor:pointer;min-width:200px;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a6abba' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7vw center}
.cxm-filter-sel:focus{outline:none;border-color:var(--cxm-accent)}
.cxm-filter-sel option{color:#1a1f2e;background:#fff}

/* ---------- LEGENDA ---------- */
.cxm-legend{position:absolute;left:1.6vw;bottom:1.6vh;display:flex;flex-direction:column;gap:.7vh;
  padding:1.1vh 1.2vw;border-radius:12px;background:var(--cxm-panel);border:1px solid var(--cxm-panel-edge);
  font-family:var(--cxm-mono);font-size:clamp(7px,.46vw,10px);color:var(--cxm-muted)}
.cxm-legend div{display:flex;align-items:center;gap:.6vw}
.cxm-legend .ln{width:26px;height:3px;border-radius:9px;display:inline-block;flex:0 0 auto}
.cxm-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}

/* ==========================================================================
   TOOLBAR fora do painel (voltar + copiar report p/ WhatsApp).
   Usa os tokens globais da área interna (não é escopo cxm-).
   ========================================================================== */
.cxm-wa-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;
  font-family:var(--font-body);font-weight:600;font-size:13px;color:#fff;background:#1f9d78;
  border:1px solid #1f9d78;box-shadow:var(--shadow);transition:background .15s,transform .12s}
.cxm-wa-btn:hover{background:#17805f;transform:translateY(-1px)}
.cxm-wa-btn.ok{background:var(--accent-dark);border-color:var(--accent-dark)}
.cxm-wa-btn svg{width:17px;height:17px;flex-shrink:0}