/* NANDA V22.119.00 | NOVA CAÇAMBA : quadro 3D isométrico
   Tudo prefixado com c3- de propósito: esta tela não pode encostar em nenhuma
   classe do resto do ERP, e nenhuma regra global pode vazar para dentro dela.
   Tema claro é o principal; o escuro segue o tema do ERP via [data-theme]. */

/* O ERP e escuro por padrao (html sem classe) e claro com html.theme-light.
   Esta tela segue o tema do ERP, senao viraria um bloco branco no meio do escuro. */
#page-cacambas3d {
  --c3-fundo:#111614; --c3-carta:#182020; --c3-linha:#26302d;
  --c3-tx:#e9efec; --c3-tx2:#93a49e; --c3-tx3:#6b7a75;
  --c3-lima:#a5d63c;
  --c3-livre:#7cc45c; --c3-patio:#e7ae42; --c3-jundi:#d08a55;
  --c3-cliente:#5e9fd0; --c3-rota:#ec8845; --c3-ruim:#e2695a;
  --c3-sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -12px rgba(0,0,0,.6);
  --c3-sombra2:0 2px 6px rgba(0,0,0,.5), 0 22px 40px -16px rgba(0,0,0,.7);

  --c3-pa:clamp(54px,7.4vh,92px);
  --c3-pr:clamp(49px,6.4vh,80px);
  --c3-cl:clamp(45px,5.85vh,71px);
  --c3-cam:clamp(94px,11.6vh,148px);

  --c3-disp:"Bahnschrift","DIN Alternate","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --c3-texto:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
html.theme-light #page-cacambas3d {
  --c3-fundo:#eef1ef; --c3-carta:#ffffff; --c3-linha:#e2e7e4;
  --c3-tx:#18211e; --c3-tx2:#5f6f6a; --c3-tx3:#93a29c;
  --c3-lima:#6f9a15;
  --c3-livre:#5da345; --c3-patio:#d9982a; --c3-jundi:#c2703a;
  --c3-cliente:#3c7fb5; --c3-rota:#e0702a; --c3-ruim:#d1503c;
  --c3-sombra:0 1px 2px rgba(24,33,30,.05), 0 8px 22px -10px rgba(24,33,30,.14);
  --c3-sombra2:0 2px 6px rgba(24,33,30,.08), 0 20px 38px -14px rgba(24,33,30,.24);
}

#c3-raiz, #c3-raiz * { box-sizing: border-box; }
#c3-raiz {
  background: var(--c3-fundo);
  color: var(--c3-tx);
  font-family: var(--c3-texto);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border-radius: 14px;
  padding: clamp(10px,1.5vh,20px) clamp(13px,1.4vw,24px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px,1.1vh,15px);
  min-height: 60vh;
}
#c3-raiz .c3-vazio { color: var(--c3-tx3); padding: 40px; text-align: center; }

/* ── topo ─────────────────────────────────────────────────────── */
.c3-topo { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.c3-marca { display:flex; align-items:center; gap:14px; }
.c3-ico { width:clamp(42px,5.6vh,62px); flex:none; }
.c3-ico .c3-im { width:100%; background-repeat:no-repeat; background-position:center;
  background-size:contain; filter:drop-shadow(0 4px 7px rgba(0,0,0,.45)); }
html.theme-light #page-cacambas3d .c3-im { filter:drop-shadow(0 5px 5px rgba(24,33,30,.16)); }
html.theme-light #page-cacambas3d .c3-pc:hover .c3-im { filter:drop-shadow(0 13px 10px rgba(24,33,30,.22)); }
.c3-marca h2 { margin:0; font-family:var(--c3-disp); font-size:clamp(19px,2.6vh,27px);
  font-weight:700; letter-spacing:-.01em; line-height:1.1; color:var(--c3-tx); }
.c3-marca p { margin:2px 0 0; color:var(--c3-tx3); font-size:11.5px; letter-spacing:.04em; }

.c3-kpis { display:flex; gap:24px; margin-left:auto; align-items:center; }
.c3-kp { text-align:right; line-height:1; }
.c3-kp b { display:block; font-family:var(--c3-disp); font-size:clamp(22px,3vh,31px);
  font-weight:700; letter-spacing:-.02em; }
.c3-kp span { display:block; margin-top:5px; font-size:10.5px; color:var(--c3-tx3); letter-spacing:.04em; }

.c3-sino { display:flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:rgba(209,80,60,.1); color:var(--c3-ruim); border-radius:11px;
  padding:8px 13px; font-family:var(--c3-texto);
  transition:background .16s cubic-bezier(.22,1,.32,1), transform .16s cubic-bezier(.22,1,.32,1); }
.c3-sino:hover { background:rgba(209,80,60,.18); transform:translateY(-1px); }
.c3-sino:active { transform:none; }
.c3-sn { font-family:var(--c3-disp); font-size:clamp(19px,2.5vh,26px); font-weight:700; line-height:1; }
.c3-st { font-size:9.5px; line-height:1.2; text-align:left; letter-spacing:.03em; }

/* ── zonas ────────────────────────────────────────────────────── */
.c3-grade { display:grid; grid-template-columns:minmax(280px,29fr) minmax(0,66fr);
  gap:clamp(9px,1.2vh,15px); align-items:start; flex:1; min-height:0; }
.c3-coluna { display:flex; flex-direction:column; gap:clamp(9px,1.2vh,15px); min-width:0; }
.c3-zona { background:var(--c3-carta); border-radius:16px; box-shadow:var(--c3-sombra);
  padding:clamp(11px,1.5vh,18px) clamp(13px,1.4vw,20px) clamp(12px,1.7vh,20px); min-width:0; }
.c3-zc { display:flex; align-items:center; gap:10px; margin-bottom:clamp(9px,1.3vh,15px); }
.c3-pt { width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.c3-zc h3 { margin:0; font-family:var(--c3-disp); font-size:clamp(13.5px,1.8vh,17px);
  font-weight:700; letter-spacing:.01em; color:var(--c3-tx); }
.c3-sub { color:var(--c3-tx3); font-size:11.5px; }
.c3-q { margin-left:auto; font-family:var(--c3-disp); font-size:clamp(19px,2.5vh,26px);
  font-weight:700; line-height:1; color:var(--c); }
.c3-linha-baixo { display:grid; grid-template-columns:minmax(200px,auto) 1fr;
  gap:clamp(9px,1.2vh,15px); }
.c3-linha-baixo:has(> :only-child) { grid-template-columns:minmax(220px,340px); }

/* ── a caçamba ────────────────────────────────────────────────── */
.c3-fila { display:flex; flex-wrap:wrap; gap:clamp(9px,1.3vh,16px) clamp(7px,.6vw,12px); }
.c3-pc { width:var(--w); padding:0; border:0; background:none; cursor:pointer;
  font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px;
  position:relative; animation:c3sobe .5s cubic-bezier(.22,1,.32,1) var(--d) backwards; }
@keyframes c3sobe { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.c3-im { display:block; width:100%; background-repeat:no-repeat; background-position:center bottom;
  background-size:contain; filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));
  transition:transform .19s cubic-bezier(.22,1,.32,1), filter .19s cubic-bezier(.22,1,.32,1); }
.c3-nb { font-family:var(--c3-disp); font-size:clamp(10.5px,1.35vh,13px); font-weight:700;
  color:var(--c3-tx2); line-height:1.15; text-align:center; max-width:118%;
  word-break:break-word; transition:color .19s; }
.c3-pc:hover .c3-im { transform:translateY(-7px) scale(1.05);
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.55)); }
.c3-pc:hover .c3-nb { color:var(--c3-tx); }
.c3-pc:active .c3-im { transform:translateY(-2px) scale(1.01); }
.c3-pc:focus-visible { outline:2px solid var(--c3-lima); outline-offset:4px; border-radius:10px; }
.c3-al { position:absolute; top:-2px; right:6px; width:17px; height:17px; border-radius:50%;
  background:var(--c3-ruim); color:#fff; font:700 12px/17px var(--c3-disp); text-align:center;
  box-shadow:0 2px 5px rgba(209,80,60,.45); }
.c3-ruim .c3-nb { color:var(--c3-ruim); }

/* ── ilhas de cliente ─────────────────────────────────────────── */
.c3-ilhas { display:flex; flex-wrap:wrap; gap:clamp(11px,1.5vh,18px) clamp(14px,1.3vw,22px); }
.c3-ilha { min-width:0; }
.c3-ic { display:flex; align-items:baseline; gap:7px; margin-bottom:9px; padding-bottom:6px;
  border-bottom:1px solid var(--c3-linha); }
.c3-ic b { font-family:var(--c3-disp); font-size:clamp(12px,1.6vh,15px); font-weight:700;
  white-space:nowrap; color:var(--c3-tx); }
.c3-ic i { font-style:normal; font-size:10.5px; color:var(--c3-lima); }
.c3-ic u { text-decoration:none; margin-left:auto; font-family:var(--c3-disp);
  font-size:13px; font-weight:700; color:var(--c3-tx3); }
.c3-ig { display:grid; gap:clamp(8px,1.1vh,14px) clamp(6px,.5vw,10px);
  grid-template-columns:repeat(var(--n), var(--c3-cl)); }
.c3-ilha-ruim .c3-ic b { color:var(--c3-ruim); }
.c3-ilha-ruim .c3-ic { border-bottom-color:var(--c3-ruim); }
.c3-mini { border-top:1px solid var(--c3-linha); margin-top:clamp(11px,1.5vh,18px);
  padding-top:clamp(11px,1.5vh,18px); }

/* ── rodapé ───────────────────────────────────────────────────── */
.c3-rod { display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--c3-tx3);
  font-size:10.5px; padding:0 2px; margin-top:auto; }
.c3-leg { display:flex; gap:15px; flex-wrap:wrap; }
.c3-leg i { font-style:normal; display:inline-flex; align-items:center; gap:6px; }
.c3-leg i s { text-decoration:none; width:8px; height:8px; border-radius:50%; background:var(--c); }
.c3-dt { margin-left:auto; }

/* ── avisos ───────────────────────────────────────────────────── */
.c3-avisos { position:fixed; right:22px; bottom:22px; z-index:1200; width:min(400px,calc(100vw - 44px));
  background:var(--c3-carta); color:var(--c3-tx); border-radius:14px; box-shadow:var(--c3-sombra2);
  padding:15px 17px 17px; animation:c3entra .22s cubic-bezier(.22,1,.32,1); }
@keyframes c3entra { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.c3-avisos[hidden] { display:none; }
.c3-av-cab { display:flex; align-items:center; margin-bottom:11px; }
.c3-av-cab b { font-family:var(--c3-disp); font-size:15px; color:var(--c3-ruim); }
.c3-av-cab button { margin-left:auto; border:0; background:none; cursor:pointer;
  font-size:21px; line-height:1; color:var(--c3-tx3); padding:0 4px; }
.c3-av-cab button:hover { color:var(--c3-tx); }
.c3-av { display:flex; gap:11px; align-items:flex-start; padding:7px 0;
  border-top:1px solid var(--c3-linha); }
.c3-av:first-of-type { border-top:0; }
.c3-av b { font-family:var(--c3-disp); font-size:17px; font-weight:700; color:var(--c3-ruim);
  line-height:1.25; min-width:30px; text-align:right; flex:none; }
.c3-av span { font-size:12px; line-height:1.42; color:var(--c3-tx2); }
.c3-av span em { font-style:normal; font-weight:600; color:var(--c3-tx); }

/* ── sprites: uma vez cada ────────────────────────────────────── */
.c3-s-cac-vazia    { aspect-ratio:1.2667; background-image:url(../assets/cac3d/cac-vazia.png); }
.c3-s-cac-mista    { aspect-ratio:1.2838; background-image:url(../assets/cac3d/cac-mista.png); }
.c3-s-cac-papelao  { aspect-ratio:1.2838; background-image:url(../assets/cac3d/cac-papelao.png); }
.c3-s-cac-plastico { aspect-ratio:1.2667; background-image:url(../assets/cac3d/cac-plastico.png); }
.c3-s-cac-madeira  { aspect-ratio:1.2583; background-image:url(../assets/cac3d/cac-madeira.png); }
.c3-s-cam-cheio    { aspect-ratio:1.2258; background-image:url(../assets/cac3d/cam-cheio.png); }
.c3-s-cam-vazio    { aspect-ratio:1.2258; background-image:url(../assets/cac3d/cam-vazio.png); }

@media (max-width:1100px) {
  .c3-grade { grid-template-columns:1fr; }
  .c3-kpis { width:100%; margin-left:0; justify-content:space-between; }
  .c3-kp { text-align:left; }
  .c3-linha-baixo { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .c3-pc, .c3-im, .c3-sino, .c3-avisos { animation:none !important; transition-duration:.01ms !important; }
}

/* ── em rota: caçamba + motorista + caminhão ─────────────────────
   Bloco mais rico que uma peça solta, porque aqui interessa saber
   QUEM está levando, não só que a caçamba saiu. */
.c3-rotas { display:flex; flex-wrap:wrap; gap:clamp(10px,1.4vh,18px); }
.c3-rt { display:flex; align-items:center; gap:13px; padding:0; border:0; background:none;
  cursor:pointer; font-family:inherit; text-align:left; min-width:0;
  animation:c3sobe .5s cubic-bezier(.22,1,.32,1) var(--d) backwards; }
.c3-rt .c3-im { width:clamp(88px,10.5vh,134px); flex:none; }
.c3-rt:hover .c3-im { transform:translateY(-6px) scale(1.04); }
.c3-rt:focus-visible { outline:2px solid var(--c3-lima); outline-offset:4px; border-radius:12px; }
.c3-rt-info { display:flex; flex-direction:column; gap:7px; min-width:0; }
.c3-rt-cac { font-family:var(--c3-disp); font-size:clamp(15px,2vh,20px); font-weight:700;
  color:var(--c3-tx); line-height:1; }
.c3-rt-cac em { font-style:normal; font-weight:400; font-size:.66em; color:var(--c3-tx3);
  margin-left:5px; letter-spacing:.02em; }
.c3-mot { display:flex; align-items:center; gap:9px; min-width:0; }
.c3-av-i, .c3-av-f { width:30px; height:30px; border-radius:50%; flex:none; }
.c3-av-i { background:var(--c3-rota); color:#fff; font:700 11.5px/30px var(--c3-disp);
  text-align:center; letter-spacing:.02em; }
.c3-av-f { background-size:cover; background-position:center; box-shadow:0 0 0 2px var(--c3-linha); }
.c3-mot-tx { display:flex; flex-direction:column; gap:1px; min-width:0; }
.c3-mot-tx b { font-size:12.5px; font-weight:600; color:var(--c3-tx); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c3-vc { font-size:11px; color:var(--c3-tx3); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c3-vc.c3-falta { color:var(--c3-patio); }