/* =========================================================
   GLP CUBAGEM C3.9
   OPERACAO PREMIUM
   ========================================================= */

:root{
  --c39-bg:#f4f8fc;
  --c39-card:#ffffff;
  --c39-line:#dbe5ef;
  --c39-navy:#102a56;
  --c39-blue:#235bd4;
  --c39-cyan:#0eb0c1;
  --c39-green:#198754;
  --c39-amber:#d98a12;
  --c39-red:#d94343;
  --c39-muted:#6f8498;
  --c39-dark:#0a1d34;
}

#glpC39{
  margin-top:20px;
}

.glp-c39-grid{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(320px,.9fr);
  gap:18px;
  align-items:start;
}

.glp-c39-card{
  background:var(--c39-card);
  border:1px solid var(--c39-line);
  border-radius:22px;
  box-shadow:
    0 12px 32px rgba(28,54,82,.065);
  overflow:hidden;
}

.glp-c39-head{
  padding:20px 22px 15px;
  border-bottom:1px solid #e6edf3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.glp-c39-head h3{
  margin:0;
  color:#102f4b;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.015em;
}

.glp-c39-head p{
  margin:5px 0 0;
  color:var(--c39-muted);
  font-size:12px;
  line-height:1.45;
}

.glp-c39-mode{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:999px;
  background:#edf3ff;
  color:#2457c9;
  font-size:10px;
  font-weight:900;
  letter-spacing:.05em;
}

.glp-c39-body{
  padding:20px 22px 22px;
}

/* MAPA */

.glp-c39-stage{
  position:relative;
  min-height:410px;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(21,169,189,.17),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #07182b 0%,
      #0c2940 55%,
      #103c55 100%
    );
  padding:34px 26px 58px;
}

.glp-c39-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );
  background-size:42px 42px;
}

.glp-c39-cabin{
  position:absolute;
  left:26px;
  top:158px;
  width:98px;
  height:128px;
  border-radius:22px 10px 10px 22px;
  background:
    linear-gradient(
      160deg,
      #edf4f9 0%,
      #bdd0de 100%
    );
  box-shadow:
    0 10px 30px rgba(0,0,0,.20);
  z-index:2;
}

.glp-c39-cabin::before{
  content:"";
  position:absolute;
  right:15px;
  top:20px;
  width:41px;
  height:37px;
  border-radius:7px;
  background:#24455e;
}

.glp-c39-cabin::after{
  content:"";
  position:absolute;
  left:17px;
  bottom:-9px;
  width:65px;
  height:18px;
  border-radius:999px;
  background:#071420;
}

.glp-c39-trailer{
  position:relative;
  z-index:2;
  margin-left:115px;
  min-height:275px;
  padding:16px;
  border:2px solid rgba(126,174,205,.62);
  border-radius:14px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.055)
    );
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:repeat(5,1fr);
  gap:6px;
}

.glp-c39-cell{
  position:relative;
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  color:#fff;
  font-size:9px;
  font-weight:900;
  text-align:center;
  box-shadow:
    inset 0 -10px 20px rgba(0,0,0,.08);
}

.glp-c39-cell.empty{
  background:rgba(255,255,255,.045);
  border:1px dashed rgba(255,255,255,.07);
  box-shadow:none;
}

.glp-c39-stage-footer{
  position:absolute;
  left:28px;
  right:28px;
  bottom:20px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#edf7ff;
  font-size:11px;
  font-weight:700;
}

.glp-c39-stage-footer b{
  color:#fff;
}

.glp-c39-label{
  position:absolute;
  z-index:3;
  color:rgba(235,247,255,.64);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.glp-c39-label.fundo{
  top:18px;
  left:145px;
}

.glp-c39-label.porta{
  bottom:53px;
  right:31px;
}

.glp-c39-legend{
  display:flex;
  flex-wrap:wrap;
  gap:9px 14px;
  margin-top:17px;
  color:#687f93;
  font-size:11px;
}

.glp-c39-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.glp-c39-legend i{
  width:11px;
  height:11px;
  border-radius:3px;
}

.glp-c39-note{
  margin-top:16px;
  padding:13px 15px;
  border:1px solid #dde7ee;
  border-radius:14px;
  background:#f7fafc;
  color:#657d90;
  font-size:11px;
  line-height:1.55;
}

.glp-c39-note strong{
  color:#274b66;
}

/* LATERAL */

.glp-c39-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.glp-c39-kpi{
  padding:15px;
  border:1px solid #dfe8ef;
  border-radius:15px;
  background:#fbfdff;
}

.glp-c39-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.glp-c39-kpi-title{
  color:#173650;
  font-size:12px;
  font-weight:900;
}

.glp-c39-kpi-sub{
  margin-top:3px;
  color:#8294a4;
  font-size:10px;
}

.glp-c39-kpi-value{
  margin-top:10px;
  color:#102e4a;
  font-size:21px;
  line-height:1.15;
  font-weight:900;
}

.glp-c39-chip{
  padding:6px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  white-space:nowrap;
}

.glp-c39-chip.info{
  background:#edf3ff;
  color:#255ac8;
}

.glp-c39-chip.ok{
  background:#e9f8f0;
  color:#19764b;
}

.glp-c39-chip.warn{
  background:#fff3df;
  color:#966000;
}

.glp-c39-chip.bad{
  background:#fdeaea;
  color:#ac3030;
}

.glp-c39-bar{
  height:8px;
  margin-top:11px;
  overflow:hidden;
  border-radius:999px;
  background:#e8eef4;
}

.glp-c39-bar i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #2457d2,
      #0cb0c1
    );
  transition:width .35s ease;
}

.glp-c39-instruction{
  padding:14px;
  border:1px solid #dfe8ef;
  border-radius:15px;
  background:#f7fafc;
}

.glp-c39-instruction-label{
  color:#72879a;
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.glp-c39-instruction-text{
  margin-top:6px;
  color:#24455e;
  font-size:11px;
  line-height:1.5;
  font-weight:700;
}

.glp-c39-seq{
  padding:15px;
  border:1px solid #dfe8ef;
  border-radius:15px;
  background:#fff;
}

.glp-c39-seq h4{
  margin:0 0 11px;
  color:#173650;
  font-size:12px;
}

.glp-c39-seq ol{
  margin:0;
  padding-left:18px;
}

.glp-c39-seq li{
  margin-bottom:9px;
  color:#486478;
  font-size:11px;
  line-height:1.45;
}

/* TABELA */

.glp-c39-items{
  margin-top:18px;
}

.glp-c39-table-wrap{
  overflow:auto;
  max-height:540px;
}

.glp-c39-table{
  width:100%;
  min-width:1180px;
  border-collapse:collapse;
}

.glp-c39-table th{
  position:sticky;
  top:0;
  z-index:2;
  padding:13px 14px;
  text-align:left;
  border-bottom:1px solid #dce6ee;
  background:#f7fafc;
  color:#6c8295;
  font-size:9px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.glp-c39-table td{
  padding:13px 14px;
  border-bottom:1px solid #edf2f6;
  color:#27445a;
  font-size:11px;
  vertical-align:middle;
}

.glp-c39-table tbody tr:hover{
  background:#f9fcfe;
}

.glp-c39-code{
  font-weight:900;
  color:#123a5a;
}

.glp-c39-status{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  background:#eaf8ef;
  color:#19764b;
  font-size:9px;
  font-weight:900;
}

.glp-c39-status.off{
  background:#eef2f5;
  color:#718394;
}

.glp-c39-empty-row{
  padding:30px !important;
  text-align:center;
  color:#8a9aa8 !important;
}

@media(max-width:1200px){

  .glp-c39-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:760px){

  .glp-c39-stage{
    min-height:520px;
  }

  .glp-c39-cabin{
    top:34px;
    left:28px;
    width:86px;
    height:68px;
  }

  .glp-c39-cabin::after{
    bottom:-7px;
  }

  .glp-c39-trailer{
    margin-left:0;
    margin-top:100px;
  }

  .glp-c39-label.fundo{
    top:122px;
    left:28px;
  }

}

/* =========================================================
   GLP_CUBAGEM_C39B_LAYOUT_FIX
   ========================================================= */

#glpC39{
  width:100%;
  margin:
    18px 0 20px !important;
  padding:0 !important;
}

#glpC39 + *{
  margin-top:0;
}

.glp-c39-grid{
  margin:0;
}

.glp-c39-items{
  margin-bottom:18px;
}

/* evita altura fantasma de containers antigos */
#cubagemTabOperacao{
  min-height:0 !important;
  height:auto !important;
}


/* =========================================================
   C3.9C - FIX DEFINITIVO
   ========================================================= */

#glpC39{
  display:block !important;
  visibility:visible !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  opacity:1 !important;
}

#glpC39 > .glp-c39-grid{
  display:grid !important;
  visibility:visible !important;
  height:auto !important;
}

#glpC39 > .glp-c39-items{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
}

/*
 * A estrutura antiga permanece no HTML
 * somente por seguranca/rollback.
 */
main > section.main-grid{
  display:none !important;
}

main > section.main-grid + section.panel{
  display:none !important;
}


/* =========================================================
   GLP C3.10 - VEICULO DINAMICO
   ========================================================= */

#glpC39 .glp-c39-stage{
  --c310-trailer-width:860px;
  --c310-trailer-height:270px;
  --c310-grid-cols:12;
}

#glpC39 .glp-c39-trailer{
  width:
    min(
      var(--c310-trailer-width),
      calc(100% - 125px)
    );

  max-width:
    calc(100% - 125px);

  min-height:
    var(--c310-trailer-height);

  height:
    var(--c310-trailer-height);

  grid-template-columns:
    repeat(
      var(--c310-grid-cols),
      minmax(0,1fr)
    );

  grid-template-rows:
    repeat(
      5,
      minmax(0,1fr)
    );

  transition:
    width .35s ease,
    height .35s ease,
    background .25s ease,
    border-color .25s ease;
}


/* -----------------------------------------
   FIORINO / KOMBI
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-vehicle-class="FIORINO"
] .glp-c39-trailer,

#glpC39 .glp-c39-stage[
  data-vehicle-class="KOMBI"
] .glp-c39-trailer{

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(190,213,229,.23),
      rgba(96,132,159,.18)
    );

}


/* -----------------------------------------
   HR / LEVE / UTILITÁRIO
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-vehicle-class="HR"
] .glp-c39-trailer,

#glpC39 .glp-c39-stage[
  data-vehicle-class="LEVE"
] .glp-c39-trailer,

#glpC39 .glp-c39-stage[
  data-vehicle-class="UTILITARIO"
] .glp-c39-trailer{

  border-radius:14px;

}


/* -----------------------------------------
   TOCO / TRUCK
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-vehicle-class="TOCO"
] .glp-c39-trailer,

#glpC39 .glp-c39-stage[
  data-vehicle-class="TRUCK"
] .glp-c39-trailer{

  border-width:2px;

}


/* -----------------------------------------
   CARRETA
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-vehicle-class="CARRETA"
] .glp-c39-trailer{

  border-radius:11px;

}


/* -----------------------------------------
   CONTAINER
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-body-type="container"
] .glp-c39-trailer{

  border-radius:5px;

  border-color:
    rgba(
      129,
      174,
      197,
      .88
    );

  background:
    repeating-linear-gradient(
      90deg,
      rgba(43,76,99,.75) 0,
      rgba(43,76,99,.75) 18px,
      rgba(31,62,84,.78) 19px,
      rgba(31,62,84,.78) 23px
    );

}


/* -----------------------------------------
   BAÚ
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-body-type="bau"
] .glp-c39-trailer{

  background:
    linear-gradient(
      180deg,
      rgba(79,111,137,.35),
      rgba(37,67,91,.48)
    );

  border-color:
    rgba(132,184,217,.75);

}


/* -----------------------------------------
   SIDER
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-body-type="sider"
] .glp-c39-trailer{

  background:
    repeating-linear-gradient(
      90deg,
      rgba(53,99,124,.35) 0,
      rgba(53,99,124,.35) 58px,
      rgba(102,151,176,.22) 59px,
      rgba(102,151,176,.22) 62px
    );

}


/* -----------------------------------------
   ABERTA
   ----------------------------------------- */

#glpC39 .glp-c39-stage[
  data-body-type="aberta"
] .glp-c39-trailer{

  border-top-color:
    rgba(117,176,208,.28);

  background:
    linear-gradient(
      180deg,
      rgba(18,43,62,.15),
      rgba(42,82,106,.32)
    );

  box-shadow:
    inset 0 -7px 0
    rgba(139,171,187,.18);

}


/* -----------------------------------------
   CABINE
   ----------------------------------------- */

#glpC39 .glp-c39-cabin{
  transition:
    width .35s ease,
    height .35s ease,
    top .35s ease;

}


/* -----------------------------------------
   BADGE DE DIMENSÃO
   ----------------------------------------- */

.glp-c310-size{

  position:absolute;
  top:15px;
  right:22px;
  z-index:5;

  display:flex;
  align-items:center;
  gap:8px;

  padding:
    6px 10px;

  border:
    1px solid
    rgba(169,210,232,.16);

  border-radius:
    999px;

  background:
    rgba(4,25,43,.52);

  backdrop-filter:
    blur(5px);

  color:
    #dcecf6;

  font-size:
    9px;

}

.glp-c310-size strong{

  color:#fff;

  font-size:9px;

  letter-spacing:.05em;

}

.glp-c310-size span{

  color:
    #9fc0d3;

}


/* pequenos veículos */
#glpC39 .glp-c39-stage[
  data-vehicle-class="FIORINO"
],

#glpC39 .glp-c39-stage[
  data-vehicle-class="KOMBI"
]{

  min-height:360px;

}


/* carretas / containers */
#glpC39 .glp-c39-stage[
  data-vehicle-class="CARRETA"
],

#glpC39 .glp-c39-stage[
  data-vehicle-class="CONTAINER_40"
]{

  min-height:430px;

}


@media(max-width:900px){

  #glpC39 .glp-c39-trailer{

    width:100% !important;
    max-width:100% !important;

  }

  .glp-c310-size{

    top:12px;
    right:12px;

  }

}

/* =========================================================
   GLP C3.11
   ========================================================= */

.glp-c311-missing{
  color:#a27135 !important;
  font-style:italic;
  font-size:10px !important;
}


/* BATIDA */

#glpC39 .glp-c39-mode[
  data-load-type="BATIDA"
]{
  background:#edf3ff;
  color:#2459ca;
}

#glpC39 .glp-c39-stage[
  data-load-type="BATIDA"
] .glp-c39-cell:not(.empty){
  border-radius:4px;
}


/* PALETIZADA */

#glpC39 .glp-c39-mode[
  data-load-type="PALETIZADA"
]{
  background:#eaf8ef;
  color:#18764a;
}

#glpC39 .glp-c39-stage[
  data-load-type="PALETIZADA"
] .glp-c39-cell:not(.empty){
  border-radius:8px;
  outline:
    2px solid
    rgba(255,255,255,.18);

  outline-offset:-3px;
}


/* MISTA */

#glpC39 .glp-c39-mode[
  data-load-type="MISTA"
]{
  background:#fff1dd;
  color:#9a6100;
}

#glpC39 .glp-c39-stage[
  data-load-type="MISTA"
] .glp-c39-trailer{
  box-shadow:
    inset 0 0 0 2px
    rgba(245,174,67,.12);
}


/* NÃO CLASSIFICADA */

#glpC39 .glp-c39-mode[
  data-load-type="NÃO CLASSIFICADA"
]{
  background:#eef2f5;
  color:#667b8d;
}


/* melhora leitura da tabela */

#glpC39 .glp-c39-table td{
  white-space:nowrap;
}

#glpC39 .glp-c39-table td:nth-child(2){
  white-space:normal;
  min-width:260px;
}


/* =========================================================
   GLP C3.12 - PLANO PALETIZADO
   ========================================================= */

.glp-c312-plan{
  display:none;
  padding:15px;
  border:1px solid #dfe8ef;
  border-radius:15px;
  background:#f9fcfd;
}

.glp-c312-title{
  color:#173650;
  font-size:12px;
  font-weight:900;
}

.glp-c312-sub{
  margin-top:3px;
  color:#8093a3;
  font-size:10px;
}

.glp-c312-metrics{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:13px;
}

.glp-c312-metrics > div{
  padding:9px;
  border:1px solid #e2eaf0;
  border-radius:10px;
  background:#fff;
}

.glp-c312-metrics span{
  display:block;
  color:#8597a6;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.glp-c312-metrics strong{
  display:block;
  margin-top:5px;
  color:#183b55;
  font-size:12px;
}

.glp-c312-status{
  margin-top:10px;
  padding:9px 10px;
  border-radius:9px;
  color:#667d8f;
  background:#eef3f7;
  font-size:9px;
  line-height:1.4;
  font-weight:700;
}

.glp-c312-status.ok{
  background:#e9f8f0;
  color:#18764a;
}

.glp-c312-status.warn{
  background:#fff2dd;
  color:#966000;
}

.glp-c312-status.bad{
  background:#fdeaea;
  color:#a93131;
}

.glp-c312-status.info{
  background:#edf3ff;
  color:#315dab;
}


/* MAPA DE PALLETS */

#glpC39 .glp-c39-trailer.glp-c312-pallet-map{
  display:grid !important;

  grid-template-columns:
    repeat(
      var(--c312-pallet-rows),
      minmax(42px,1fr)
    ) !important;

  grid-template-rows:
    repeat(
      2,
      minmax(70px,1fr)
    ) !important;

  grid-auto-flow:column;

  gap:8px;

  align-items:stretch;
}

.glp-c312-pallet{
  position:relative;
  min-width:0;
  min-height:68px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px dashed
    rgba(190,216,231,.30);

  border-radius:7px;

  background:
    rgba(255,255,255,.04);

  overflow:hidden;
}

.glp-c312-pallet.occupied{
  border:
    1px solid
    rgba(76,180,131,.75);

  background:
    linear-gradient(
      180deg,
      rgba(40,164,107,.55),
      rgba(22,112,74,.65)
    );

  box-shadow:
    inset 0 -8px 0
    rgba(41,61,43,.20);
}

.glp-c312-pallet-top{
  position:relative;
  z-index:2;

  color:
    rgba(231,243,250,.66);

  font-size:9px;
  font-weight:900;
}

.glp-c312-pallet.occupied
.glp-c312-pallet-top{
  color:#fff;
}

.glp-c312-pallet-base{
  position:absolute;
  left:7px;
  right:7px;
  bottom:6px;

  height:5px;

  border-radius:2px;

  background:
    rgba(184,133,63,.50);
}

.glp-c312-leg{
  display:inline-block;
  width:11px;
  height:11px;
  border-radius:3px;
}

.glp-c312-leg.occupied{
  background:#268f61;
}

.glp-c312-leg.free{
  background:#506778;
  border:1px dashed #8195a3;
}

.glp-c312-critical{
  color:#a63232 !important;
}


@media(max-width:900px){

  #glpC39
  .glp-c39-trailer.glp-c312-pallet-map{

    overflow-x:auto;

    grid-template-columns:
      repeat(
        var(--c312-pallet-rows),
        minmax(55px,70px)
      ) !important;

  }

}

/* =========================================================
   GLP C3.12 - PLANO PALETIZADO
   ========================================================= */

.glp-c312-plan{
  display:none;
  padding:15px;
  border:1px solid #dfe8ef;
  border-radius:15px;
  background:#f9fcfd;
}

.glp-c312-title{
  color:#173650;
  font-size:12px;
  font-weight:900;
}

.glp-c312-sub{
  margin-top:3px;
  color:#8093a3;
  font-size:10px;
}

.glp-c312-metrics{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:13px;
}

.glp-c312-metrics > div{
  padding:9px;
  border:1px solid #e2eaf0;
  border-radius:10px;
  background:#fff;
}

.glp-c312-metrics span{
  display:block;
  color:#8597a6;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.glp-c312-metrics strong{
  display:block;
  margin-top:5px;
  color:#183b55;
  font-size:12px;
}

.glp-c312-status{
  margin-top:10px;
  padding:9px 10px;
  border-radius:9px;
  color:#667d8f;
  background:#eef3f7;
  font-size:9px;
  line-height:1.4;
  font-weight:700;
}

.glp-c312-status.ok{
  background:#e9f8f0;
  color:#18764a;
}

.glp-c312-status.warn{
  background:#fff2dd;
  color:#966000;
}

.glp-c312-status.bad{
  background:#fdeaea;
  color:#a93131;
}

.glp-c312-status.info{
  background:#edf3ff;
  color:#315dab;
}


/* MAPA DE PALLETS */

#glpC39 .glp-c39-trailer.glp-c312-pallet-map{
  display:grid !important;

  grid-template-columns:
    repeat(
      var(--c312-pallet-rows),
      minmax(42px,1fr)
    ) !important;

  grid-template-rows:
    repeat(
      2,
      minmax(70px,1fr)
    ) !important;

  grid-auto-flow:column;

  gap:8px;

  align-items:stretch;
}

.glp-c312-pallet{
  position:relative;
  min-width:0;
  min-height:68px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px dashed
    rgba(190,216,231,.30);

  border-radius:7px;

  background:
    rgba(255,255,255,.04);

  overflow:hidden;
}

.glp-c312-pallet.occupied{
  border:
    1px solid
    rgba(76,180,131,.75);

  background:
    linear-gradient(
      180deg,
      rgba(40,164,107,.55),
      rgba(22,112,74,.65)
    );

  box-shadow:
    inset 0 -8px 0
    rgba(41,61,43,.20);
}

.glp-c312-pallet-top{
  position:relative;
  z-index:2;

  color:
    rgba(231,243,250,.66);

  font-size:9px;
  font-weight:900;
}

.glp-c312-pallet.occupied
.glp-c312-pallet-top{
  color:#fff;
}

.glp-c312-pallet-base{
  position:absolute;
  left:7px;
  right:7px;
  bottom:6px;

  height:5px;

  border-radius:2px;

  background:
    rgba(184,133,63,.50);
}

.glp-c312-leg{
  display:inline-block;
  width:11px;
  height:11px;
  border-radius:3px;
}

.glp-c312-leg.occupied{
  background:#268f61;
}

.glp-c312-leg.free{
  background:#506778;
  border:1px dashed #8195a3;
}

.glp-c312-critical{
  color:#a63232 !important;
}


@media(max-width:900px){

  #glpC39
  .glp-c39-trailer.glp-c312-pallet-map{

    overflow-x:auto;

    grid-template-columns:
      repeat(
        var(--c312-pallet-rows),
        minmax(55px,70px)
      ) !important;

  }

}

/* =========================================================
   GLP C3.12.1
   ========================================================= */

.glp-c3121-conversion{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #dfe8ef;
}

.glp-c3121-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.glp-c3121-head strong{
  color:#173650;
  font-size:11px;
}

.glp-c3121-head span{
  color:#8395a5;
  font-size:8px;
}

.glp-c3121-summary{
  display:grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap:6px;
  margin-top:10px;
}

.glp-c3121-summary > div{
  padding:8px;
  border:1px solid #e3ebf1;
  border-radius:9px;
  background:#fff;
}

.glp-c3121-summary small{
  display:block;
  color:#8598a8;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}

.glp-c3121-summary strong{
  display:block;
  margin-top:4px;
  color:#173b56;
  font-size:12px;
}

.glp-c3121-message{
  margin-top:9px;
  padding:8px 9px;
  border-radius:8px;
  font-size:8px;
  font-weight:700;
  line-height:1.4;
  background:#eef3f7;
  color:#687d8d;
}

.glp-c3121-message.ok{
  background:#e9f8f0;
  color:#18764a;
}

.glp-c3121-message.warn{
  background:#fff2dc;
  color:#956000;
}

.glp-c3121-message.bad{
  background:#fde9e9;
  color:#a52e2e;
}

.glp-c3121-message.info{
  background:#edf3ff;
  color:#315eab;
}

.glp-c3121-table-wrap{
  margin-top:10px;
  max-height:230px;
  overflow:auto;
  border:1px solid #e1e9ef;
  border-radius:9px;
}

.glp-c3121-table{
  width:100%;
  min-width:700px;
  border-collapse:collapse;
}

.glp-c3121-table th{
  position:sticky;
  top:0;
  z-index:1;
  padding:7px;
  background:#f5f8fb;
  border-bottom:1px solid #dfe8ee;
  color:#768b9c;
  font-size:7px;
  text-align:left;
  text-transform:uppercase;
}

.glp-c3121-table td{
  padding:7px;
  border-bottom:1px solid #edf2f5;
  color:#38566c;
  font-size:8px;
}

.glp-c3121-table td:first-child{
  min-width:170px;
}

.glp-c3121-table td:first-child strong{
  display:block;
  color:#173b57;
  font-size:8px;
}

.glp-c3121-table td:first-child span{
  display:block;
  margin-top:2px;
  color:#8b9ba8;
  font-size:7px;
}

.glp-c3121-row-warn td{
  background:#fffaf1;
  color:#916327;
}

@media(max-width:900px){

  .glp-c3121-summary{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}

/* =========================================================
   GLP C3.12.2
   ========================================================= */

.glp-c3122-rule{
  padding:14px;
  border:1px solid #dfe8ef;
  border-radius:15px;
  background:#f7fafc;
}

.glp-c3122-title{
  color:#173650;
  font-size:11px;
  font-weight:900;
}

.glp-c3122-text{
  margin-top:6px;
  color:#627b8e;
  font-size:9px;
  line-height:1.5;
}

.glp-c3122-text strong{
  color:#23475f;
  font-size:10px;
}

/* =========================================================
   GLP C3.12.3
   MAPA PALLET REAL
   ========================================================= */

#glpC39
.glp-c39-trailer.glp-c3123-map{

  display:grid !important;

  grid-template-columns:
    repeat(
      var(--c3123-cols),
      minmax(54px,1fr)
    ) !important;

  grid-template-rows:
    repeat(
      2,
      minmax(105px,1fr)
    ) !important;

  grid-auto-flow:
    column !important;

  gap:7px !important;

  overflow-x:auto;

  padding:
    27px 14px 17px !important;

  position:relative;
}


/* FUNDO */

#glpC39
.glp-c39-trailer.glp-c3123-map::before{

  content:"FUNDO";

  position:absolute;

  top:7px;
  left:14px;

  color:
    rgba(213,231,240,.65);

  font-size:8px;

  font-weight:900;

  letter-spacing:.09em;
}


/* PORTA */

#glpC39
.glp-c39-trailer.glp-c3123-map::after{

  content:"PORTA";

  position:absolute;

  top:7px;
  right:14px;

  color:
    rgba(213,231,240,.65);

  font-size:8px;

  font-weight:900;

  letter-spacing:.09em;
}


.glp-c3123-pallet{

  position:relative;

  min-width:52px;
  min-height:100px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:3px;

  padding:
    8px 5px 12px;

  border-radius:7px;

  overflow:hidden;

  text-align:center;

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.glp-c3123-pallet:hover{

  transform:
    translateY(-2px);

  z-index:5;
}


.glp-c3123-pallet.occupied{

  border:
    1px solid
    color-mix(
      in srgb,
      var(--pallet-color),
      white 25%
    );

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color),
        #0c2d42 18%
      ),
      color-mix(
        in srgb,
        var(--pallet-color),
        #071e2e 42%
      )
    );

  box-shadow:
    inset 0 -7px 0
    rgba(105,69,27,.26);
}


.glp-c3123-pallet.partial{

  border:
    1px dashed
    #f5b54a;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color),
        #24303a 38%
      ),
      rgba(37,52,66,.93)
    );

  box-shadow:
    inset 0 -7px 0
    rgba(121,78,25,.34);
}


.glp-c3123-pallet.free{

  border:
    1px dashed
    rgba(190,215,229,.18);

  background:
    rgba(255,255,255,.035);
}


.glp-c3123-code{

  color:
    rgba(255,255,255,.96);

  font-size:9px;

  font-weight:900;
}


.glp-c3123-material{

  max-width:100%;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:#fff;

  font-size:7px;

  font-weight:800;
}


.glp-c3123-data,
.glp-c3123-weight{

  color:
    rgba(236,246,251,.83);

  font-size:7px;
}


.glp-c3123-free-text{

  color:
    rgba(190,215,229,.42);

  font-size:7px;
}


.glp-c3123-partial-label{

  position:absolute;

  bottom:4px;

  padding:
    2px 5px;

  border-radius:999px;

  background:
    rgba(255,183,61,.18);

  color:#ffd184;

  font-size:6px;

  font-weight:900;

  letter-spacing:.05em;
}


.glp-c3123-leg{

  display:inline-block;

  width:10px;
  height:10px;

  border-radius:3px;
}


.glp-c3123-leg.full{
  background:#1b9f70;
}


.glp-c3123-leg.partial{

  background:#273b4a;

  border:
    1px dashed #f2b64b;
}


.glp-c3123-leg.free{

  background:#415766;

  opacity:.45;
}


/* SEQUÊNCIA */

.glp-c3123-seq{

  display:grid !important;

  grid-template-columns:
    42px
    minmax(120px,1fr)
    55px
    70px
    55px;

  gap:7px;

  align-items:center;

  padding:
    7px 0 !important;

  border-bottom:
    1px solid #edf2f5;
}


.glp-c3123-seq strong{

  color:#173b55;
}


.glp-c3123-seq span{

  color:#5d7588;

  font-size:8px;
}


.glp-c3123-seq em{

  justify-self:end;

  padding:
    3px 6px;

  border-radius:999px;

  background:#fff2dc;

  color:#926000;

  font-size:7px;

  font-style:normal;

  font-weight:900;
}


.glp-c3123-seq em.full{

  background:#e9f8f0;

  color:#19774c;
}


.glp-c3123-overflow{

  margin-top:7px !important;

  padding:
    9px !important;

  border-radius:8px;

  background:#fdeaea;

  color:#a22f2f !important;

  font-size:8px;
}


/* RESUMO */

.glp-c3123-summary{

  margin-top:13px;

  padding-top:13px;

  border-top:
    1px solid #e1e9ef;
}


.glp-c3123-summary-title{

  color:#173650;

  font-size:10px;

  font-weight:900;
}


.glp-c3123-summary-grid{

  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:6px;

  margin-top:9px;
}


.glp-c3123-summary-grid > div{

  padding:8px;

  border:
    1px solid #e2eaf0;

  border-radius:9px;

  background:#fff;
}


.glp-c3123-summary-grid small{

  display:block;

  color:#8798a6;

  font-size:6px;

  font-weight:900;

  text-transform:uppercase;
}


.glp-c3123-summary-grid strong{

  display:block;

  margin-top:3px;

  color:#173b56;

  font-size:11px;
}


.glp-c3123-alert{

  margin-top:8px;

  padding:
    8px 9px;

  border-radius:8px;

  font-size:8px;

  font-weight:800;
}


.glp-c3123-alert.ok{

  background:#e9f8f0;

  color:#18764a;
}


.glp-c3123-alert.bad{

  background:#fdeaea;

  color:#a12d2d;
}


.glp-c3123-note{

  margin-top:8px;

  color:#8899a6;

  font-size:7px;

  line-height:1.45;
}


@media(max-width:900px){

  .glp-c3123-summary-grid{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

  }

}

/* =========================================================
   GLP C3.12.5 TABELA
   ========================================================= */

#glpC39 table{
  min-width:1650px;
}

#glpC39 table th{
  white-space:nowrap;
}

#glpC39 table td{
  vertical-align:middle;
  white-space:nowrap;
}

#glpC39 table
.glp-c3125-description{
  min-width:240px;
  white-space:normal;
}

#glpC39 table
.glp-c3125-number{
  font-variant-numeric:
    tabular-nums;

  font-weight:700;

  color:#264d66;
}

#glpC39 table
.glp-c3125-missing{
  color:#a87531 !important;

  font-size:9px;

  font-style:italic;
}

.glp-c3125-status{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:68px;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:8px;

  font-weight:900;
}

.glp-c3125-status.ok{
  background:#e8f7ef;
  color:#18764a;
}

.glp-c3125-status.warn{
  background:#fff2dd;
  color:#946000;
}


/* =========================================================
   GLP C3.12.7
   ========================================================= */

#glpC312Planned,
#glpC312Capacity,
#glpC312Occupancy,
#glpC3121Equivalent,
#glpC3121Positions,
#glpC3121Available{
  font-variant-numeric:
    tabular-nums;
}

.glp-c312-status.ok{
  background:#e9f8f0 !important;
  color:#18764a !important;
}

.glp-c312-status.warn{
  background:#fff1d9 !important;
  color:#965d00 !important;
}

.glp-c312-status.bad{
  background:#fdeaea !important;
  color:#a12e2e !important;
}


/* =========================================================
   GLP C3.12.8 LAYOUT SEQUENCIA
   ========================================================= */


/*
 * CARD DA SEQUÊNCIA
 */

#glpC39
.glp-c3128-sequence-card{

  width:100% !important;

  box-sizing:border-box !important;

  margin:
    14px 0 18px !important;

  padding:
    18px 20px !important;

  border:
    1px solid
    #dbe7ef !important;

  border-radius:
    16px !important;

  background:
    #fff !important;

  box-shadow:
    0 8px 26px
    rgba(14,56,83,.045) !important;
}


/*
 * TÍTULO
 */

#glpC39
.glp-c3128-sequence-card
h1,

#glpC39
.glp-c3128-sequence-card
h2,

#glpC39
.glp-c3128-sequence-card
h3,

#glpC39
.glp-c3128-sequence-card
h4{

  margin:
    0 0 13px !important;

  color:
    #173650 !important;

  font-size:
    12px !important;

  font-weight:
    900 !important;
}


/*
 * LISTA PASSA A SER GRADE HORIZONTAL
 */

#glpC39
#glpC39Sequence{

  display:grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;

  gap:
    8px 10px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  max-height:
    none !important;

  overflow:
    visible !important;

  list-style:
    none !important;
}


/*
 * CADA POSIÇÃO
 */

#glpC39
#glpC39Sequence > li{

  box-sizing:border-box !important;

  min-width:0 !important;

  margin:
    0 !important;

  padding:
    9px 10px !important;

  border:
    1px solid
    #e2ebf0 !important;

  border-radius:
    10px !important;

  background:
    #f9fbfc !important;
}


/*
 * SOBRESCREVE O GRID ANTIGO DO C3.12.3
 */

#glpC39
#glpC39Sequence
.glp-c3123-seq{

  display:grid !important;

  grid-template-columns:
    34px
    minmax(0,1fr)
    42px
    54px !important;

  gap:
    5px !important;

  align-items:center !important;

  border-bottom:
    0 !important;
}


/*
 * P01 / P02...
 */

#glpC39
#glpC39Sequence
.glp-c3123-seq strong{

  color:
    #123e5b !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


/*
 * MATERIAL
 */

#glpC39
#glpC39Sequence
.glp-c3123-seq span{

  min-width:0;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #657d8f !important;

  font-size:
    7px !important;
}


/*
 * BADGE COMPLETO / PARCIAL
 *
 * Colocamos na segunda linha para não alargar
 * demais o card.
 */

#glpC39
#glpC39Sequence
.glp-c3123-seq em{

  grid-column:
    2 / -1;

  justify-self:start !important;

  margin-top:
    1px;

  padding:
    2px 6px !important;

  font-size:
    6px !important;
}


/*
 * EXCEDENTE OCUPA TODA A LARGURA
 */

#glpC39
#glpC39Sequence
.glp-c3123-overflow{

  grid-column:
    1 / -1 !important;
}


/*
 * COMO A SEQUÊNCIA SAIU DA COLUNA DIREITA,
 * O GRID SUPERIOR PASSA A TERMINAR NA ALTURA
 * REAL DO MAPA/ANÁLISE.
 */

#glpC39
.glp-c39-grid{

  align-items:
    start !important;
}


#glpC39
.glp-c39-side{

  align-self:
    start !important;
}


/*
 * Evita que algum container lateral mantenha
 * altura mínima antiga.
 */

#glpC39
.glp-c39-side{

  min-height:
    0 !important;

  height:
    auto !important;
}


/*
 * ITENS FICAM MAIS PRÓXIMOS
 */

#glpC39
.glp-c3128-sequence-card
+ *{

  margin-top:
    0 !important;
}


/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

@media(max-width:1450px){

  #glpC39
  #glpC39Sequence{

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

  }

}


@media(max-width:1050px){

  #glpC39
  #glpC39Sequence{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

  }

}


@media(max-width:650px){

  #glpC39
  #glpC39Sequence{

    grid-template-columns:
      1fr !important;

  }

}


/* =========================================================
   GLP C3.12.9 VISUAL VEICULO
   ========================================================= */


/* =========================================================
   STAGE
   ========================================================= */

#glpC39
.glp-c39-stage.glp-c3129-stage{

  position:relative !important;

  display:block !important;

  box-sizing:border-box !important;

  width:100% !important;

  min-height:445px !important;

  height:auto !important;

  padding:
    72px 28px 66px !important;

  overflow:hidden !important;

  border-radius:
    22px !important;

  background:

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    radial-gradient(
      circle at 80% 15%,
      rgba(19,132,164,.18),
      transparent 31%
    ),

    linear-gradient(
      135deg,
      #07263e 0%,
      #092f4a 54%,
      #083752 100%
    ) !important;

  background-size:
    52px 52px,
    52px 52px,
    auto,
    auto !important;

}


/* =========================================================
   CONJUNTO DO VEÍCULO
   ========================================================= */

#glpC39
.glp-c3129-rig{

  --c3129-cab:
    112px;

  position:relative;

  display:grid;

  grid-template-columns:
    var(--c3129-cab)
    minmax(0,1fr);

  align-items:center;

  gap:0;

  width:100%;

  margin:
    0 auto;

  padding-top:
    26px;

}


/* -----------------------------------------
   TAMANHO POR CLASSE DO VEÍCULO
   ----------------------------------------- */

#glpC39
.glp-c39-stage[
  data-vehicle-class="FIORINO"
]
.glp-c3129-rig{

  width:58%;

  --c3129-cab:
    82px;

}


#glpC39
.glp-c39-stage[
  data-vehicle-class="KOMBI"
]
.glp-c3129-rig{

  width:62%;

  --c3129-cab:
    84px;

}


#glpC39
.glp-c39-stage[
  data-vehicle-class="UTILITARIO"
]
.glp-c3129-rig,

#glpC39
.glp-c39-stage[
  data-vehicle-class="HR"
]
.glp-c3129-rig{

  width:68%;

  --c3129-cab:
    90px;

}


#glpC39
.glp-c39-stage[
  data-vehicle-class="LEVE"
]
.glp-c3129-rig{

  width:73%;

  --c3129-cab:
    94px;

}


#glpC39
.glp-c39-stage[
  data-vehicle-class="TOCO"
]
.glp-c3129-rig{

  width:82%;

  --c3129-cab:
    102px;

}


#glpC39
.glp-c39-stage[
  data-vehicle-class="TRUCK"
]
.glp-c3129-rig{

  width:92%;

  --c3129-cab:
    108px;

}


#glpC39
.glp-c39-stage[
  data-vehicle-class="CARRETA"
]
.glp-c3129-rig,

#glpC39
.glp-c39-stage[
  data-vehicle-class="CONTAINER_40"
]
.glp-c3129-rig{

  width:100%;

  --c3129-cab:
    118px;

}


/* =========================================================
   CABINE
   ========================================================= */

#glpC39
.glp-c3129-stage
.glp-c39-cabin{

  position:relative !important;

  inset:auto !important;

  width:
    calc(
      var(--c3129-cab) - 10px
    ) !important;

  height:176px !important;

  box-sizing:border-box !important;

  justify-self:end;

  margin:0 !important;

  z-index:6;

  border:
    1px solid
    #a9bbc8 !important;

  border-radius:
    34px 18px 18px 34px !important;

  background:

    linear-gradient(
      90deg,
      #edf3f6 0%,
      #d8e3e9 46%,
      #f5f8fa 78%,
      #b8c8d2 100%
    ) !important;

  box-shadow:

    inset
    -6px 0 9px
    rgba(87,111,126,.20),

    inset
    4px 0 7px
    rgba(255,255,255,.75),

    0 12px 20px
    rgba(0,13,24,.34) !important;

}


/*
 * Parte traseira da cabine / acoplamento
 */

#glpC39
.glp-c3129-stage
.glp-c39-cabin::before{

  content:"";

  position:absolute;

  right:-9px;

  top:20px;

  width:14px;

  height:
    calc(100% - 40px);

  border-radius:
    0 6px 6px 0;

  background:
    linear-gradient(
      180deg,
      #6e8493,
      #c5d0d7,
      #607887
    );

  box-shadow:
    2px 0 4px
    rgba(0,0,0,.22);

}


/*
 * Para-choque frontal
 */

#glpC39
.glp-c3129-stage
.glp-c39-cabin::after{

  content:"";

  position:absolute;

  left:-5px;

  top:21px;

  width:8px;

  height:
    calc(100% - 42px);

  border-radius:
    10px 3px 3px 10px;

  background:
    linear-gradient(
      180deg,
      #879aa7,
      #e8eef1,
      #879aa7
    );

}


/* TETO */

.glp-c3129-cab-roof{

  position:absolute;

  left:17%;

  top:15%;

  width:58%;

  height:70%;

  border-radius:
    24px;

  border:
    1px solid
    rgba(106,131,146,.45);

  background:

    linear-gradient(
      90deg,
      #f4f7f8,
      #dce6eb 52%,
      #f8fafb
    );

  box-shadow:
    inset
    0 0 10px
    rgba(70,98,114,.13);

}


/* PARA-BRISA */

.glp-c3129-windshield{

  position:absolute;

  left:30%;

  top:31%;

  width:34%;

  height:38%;

  border-radius:
    11px;

  border:
    2px solid
    #7690a1;

  background:

    linear-gradient(
      135deg,
      #173b50,
      #294f65 50%,
      #123246
    );

  box-shadow:
    inset
    0 3px 8px
    rgba(255,255,255,.08);

}


/* CAPÔ */

.glp-c3129-hood{

  position:absolute;

  left:4px;

  top:31%;

  width:22%;

  height:38%;

  border-radius:
    17px 7px 7px 17px;

  background:
    linear-gradient(
      90deg,
      #cfdce3,
      #f1f5f7
    );

}


/* VIDROS LATERAIS */

.glp-c3129-side-window{

  position:absolute;

  left:32%;

  width:30%;

  height:13%;

  border-radius:
    5px;

  background:#244b61;

}


.glp-c3129-side-window.left{

  top:16%;

}


.glp-c3129-side-window.right{

  top:auto;

  bottom:16%;

}


/* ESPELHOS */

.glp-c3129-mirror{

  position:absolute;

  left:19%;

  width:13px;

  height:7px;

  z-index:10;

  border-radius:3px;

  background:#263f4f;

  box-shadow:
    0 2px 3px
    rgba(0,0,0,.25);

}


.glp-c3129-mirror.left{

  top:-6px;

}


.glp-c3129-mirror.right{

  top:auto;

  bottom:-6px;

}


/* FARÓIS */

.glp-c3129-light{

  position:absolute;

  left:1px;

  width:5px;

  height:19px;

  border-radius:4px;

  background:
    #dcecf5;

  box-shadow:
    0 0 8px
    rgba(219,239,248,.36);

}


.glp-c3129-light.left{

  top:22%;

}


.glp-c3129-light.right{

  bottom:22%;

}


/* =========================================================
   ACOPLAMENTO
   ========================================================= */

.glp-c3129-coupling{

  position:absolute;

  left:
    calc(
      var(--c3129-cab) - 2px
    );

  top:50%;

  z-index:4;

  width:25px;

  height:38px;

  transform:
    translateY(-50%);

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      #455d6d,
      #96a9b5,
      #415967
    );

}


/* =========================================================
   CARROCERIA
   ========================================================= */

#glpC39
.glp-c3129-stage
.glp-c39-trailer{

  position:relative !important;

  inset:auto !important;

  box-sizing:border-box !important;

  width:100% !important;

  max-width:none !important;

  min-width:0 !important;

  height:260px !important;

  min-height:260px !important;

  margin:0 !important;

  padding:
    22px 13px 15px !important;

  z-index:5;

  display:grid !important;

  grid-template-columns:
    repeat(
      var(--c3123-cols),
      minmax(0,1fr)
    ) !important;

  grid-template-rows:
    repeat(
      2,
      minmax(0,1fr)
    ) !important;

  grid-auto-flow:
    column !important;

  gap:
    6px !important;

  overflow:
    hidden !important;

  border:
    5px solid
    #b5c7d1 !important;

  border-radius:
    7px !important;

  background:

    linear-gradient(
      90deg,
      rgba(163,194,209,.09) 1px,
      transparent 1px
    ),

    linear-gradient(
      #203d50,
      #183448
    ) !important;

  background-size:
    44px 100%,
    auto !important;

  box-shadow:

    inset
    0 0 0 2px
    #546d7c,

    inset
    0 0 30px
    rgba(0,0,0,.35),

    0 13px 22px
    rgba(0,10,18,.29) !important;

}


/*
 * Remove os pseudo-labels antigos,
 * pois agora usamos a barra superior.
 */

#glpC39
.glp-c3129-stage
.glp-c39-trailer::before,

#glpC39
.glp-c3129-stage
.glp-c39-trailer::after{

  display:none !important;

}


/* =========================================================
   ORIENTAÇÃO FUNDO → PORTA
   ========================================================= */

.glp-c3129-orientation{

  position:absolute;

  top:0;

  left:
    calc(
      var(--c3129-cab) + 15px
    );

  right:17px;

  display:grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:center;

  gap:13px;

  color:
    #afc5d2;

  font-size:8px;

  font-weight:900;

  letter-spacing:.08em;

}


.glp-c3129-orientation-line{

  position:relative;

  display:block;

  height:1px;

  background:
    rgba(180,210,224,.55);

}


.glp-c3129-orientation-line::before{

  content:"";

  position:absolute;

  left:-1px;

  top:-4px;

  border-top:
    4px solid transparent;

  border-bottom:
    4px solid transparent;

  border-right:
    7px solid
    #a9c3d1;

}


.glp-c3129-orientation-line::after{

  content:"";

  position:absolute;

  right:-1px;

  top:-4px;

  border-top:
    4px solid transparent;

  border-bottom:
    4px solid transparent;

  border-left:
    7px solid
    #a9c3d1;

}


/* =========================================================
   EIXOS / RODAS DA CARRETA
   ========================================================= */

.glp-c3129-wheel-set{

  position:absolute;

  right:28px;

  bottom:-7px;

  z-index:3;

  display:grid;

  grid-template-columns:
    repeat(3,18px);

  grid-template-rows:
    repeat(2,8px);

  gap:
    4px 5px;

}


.glp-c3129-wheel-set span{

  display:block;

  width:18px;

  height:8px;

  border-radius:
    5px;

  background:
    #08131a;

  box-shadow:
    inset
    0 0 0 2px
    #192b35;

}


/* =========================================================
   PALLETS
   ========================================================= */

#glpC39
.glp-c3129-stage
.glp-c3123-pallet{

  box-sizing:
    border-box !important;

  min-width:
    0 !important;

  width:
    100% !important;

  min-height:
    0 !important;

  height:
    100% !important;

  padding:
    6px 3px 10px !important;

  border-radius:
    6px !important;

  overflow:
    hidden !important;

  box-shadow:
    inset
    0 -5px 0
    rgba(62,38,17,.26) !important;

}


#glpC39
.glp-c3129-stage
.glp-c3123-pallet.occupied{

  border:
    1px solid
    rgba(255,255,255,.23) !important;

}


#glpC39
.glp-c3129-stage
.glp-c3123-pallet.partial{

  border:
    1px dashed
    #f0b94e !important;

}


#glpC39
.glp-c3129-stage
.glp-c3123-pallet.free{

  border:
    1px dashed
    rgba(185,213,227,.20) !important;

  background:
    rgba(255,255,255,.025) !important;

  box-shadow:none !important;

}


/* =========================================================
   DENSIDADE NORMAL
   ========================================================= */

#glpC39
.glp-c3129-stage[
  data-c3129-density="normal"
]
.glp-c3123-code{

  font-size:
    8px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="normal"
]
.glp-c3123-material{

  font-size:
    6px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="normal"
]
.glp-c3123-data,

#glpC39
.glp-c3129-stage[
  data-c3129-density="normal"
]
.glp-c3123-weight{

  font-size:
    6px !important;

}


/* =========================================================
   MODO COMPACTO - EX.: CARRETA 60 PALLETS
   ========================================================= */

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c39-trailer{

  gap:
    3px !important;

  padding-left:
    8px !important;

  padding-right:
    8px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-pallet{

  padding:
    5px 1px !important;

  border-radius:
    4px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-code{

  font-size:
    6px !important;

  letter-spacing:
    -.02em;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-material,

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-data,

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-weight{

  display:none !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-partial-label{

  font-size:
    4px !important;

  padding:
    1px 2px !important;

}


/* =========================================================
   DIMENSÕES / BADGE
   ========================================================= */

#glpC39
.glp-c3129-stage
#glpC310VehicleSize{

  top:14px !important;

  right:20px !important;

  z-index:15 !important;

  padding:
    7px 12px !important;

  border:
    1px solid
    rgba(170,204,220,.25) !important;

  background:
    rgba(5,28,43,.68) !important;

  box-shadow:
    0 7px 16px
    rgba(0,0,0,.12);

}


/* =========================================================
   RODAPÉ ORIGINAL
   ========================================================= */

#glpC39
.glp-c3129-stage
.glp-c39-truck-name,

#glpC39
.glp-c3129-stage
.glp-c39-stage-footer{

  z-index:12;

}


/* =========================================================
   HOVER NO MODO COMPACTO
   ========================================================= */

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-pallet:hover{

  transform:
    scale(1.08)
    translateY(-2px);

  z-index:20;

  box-shadow:
    0 8px 18px
    rgba(0,0,0,.35) !important;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1100px){

  #glpC39
  .glp-c39-stage.glp-c3129-stage{

    padding-left:
      16px !important;

    padding-right:
      16px !important;

  }


  #glpC39
  .glp-c3129-rig{

    --c3129-cab:
      90px;

  }


  #glpC39
  .glp-c3129-stage
  .glp-c39-cabin{

    height:
      150px !important;

  }


  #glpC39
  .glp-c3129-stage
  .glp-c39-trailer{

    height:
      230px !important;

    min-height:
      230px !important;

  }

}


@media(max-width:760px){

  #glpC39
  .glp-c39-stage.glp-c3129-stage{

    min-height:
      360px !important;

    padding:
      65px 10px 55px !important;

  }


  #glpC39
  .glp-c3129-rig{

    width:
      100% !important;

    --c3129-cab:
      62px;

  }


  #glpC39
  .glp-c3129-stage
  .glp-c39-cabin{

    height:
      115px !important;

  }


  #glpC39
  .glp-c3129-stage
  .glp-c39-trailer{

    height:
      190px !important;

    min-height:
      190px !important;

    border-width:
      3px !important;

  }


  .glp-c3129-orientation{

    left:
      75px;

  }


  .glp-c3129-wheel-set{

    display:none;

  }

}


/* =========================================================
   GLP C3.12.10 TABELA DEFINITIVA
   ========================================================= */


/*
 * Tabela antiga fica disponível para os scripts
 * legados, mas não participa mais do layout.
 */

#glpC39
.glp-c31210-legacy-table{

  display:none !important;

}


/*
 * Container oficial.
 */

#glpC39
.glp-c31210-table-wrap{

  width:100%;

  max-width:100%;

  box-sizing:border-box;

  overflow-x:auto;
  overflow-y:visible;

  border-top:
    1px solid #dbe6ed;

  background:#fff;

  scrollbar-width:
    thin;

  scrollbar-color:
    #b5c9d6 #eef4f7;

}


#glpC39
.glp-c31210-table{

  width:100% !important;

  min-width:1720px !important;

  table-layout:auto !important;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;

  background:#fff;

}


/* CABEÇALHO */

#glpC39
.glp-c31210-table thead th{

  position:sticky;

  top:0;

  z-index:4;

  height:43px;

  box-sizing:border-box;

  padding:
    0 13px !important;

  vertical-align:middle;

  white-space:nowrap;

  border-bottom:
    1px solid #d8e4eb !important;

  background:
    #f5f8fa !important;

  color:
    #617a8f !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .035em;

  text-transform:
    uppercase;

}


/* LINHAS */

#glpC39
.glp-c31210-table tbody td{

  height:54px;

  box-sizing:border-box;

  padding:
    9px 13px !important;

  vertical-align:middle;

  white-space:nowrap;

  border-bottom:
    1px solid #e5edf2 !important;

  background:#fff;

  color:#36566d !important;

  font-size:
    9px !important;

}


#glpC39
.glp-c31210-table tbody tr:hover td{

  background:
    #f8fbfd !important;

}


/* CÓDIGO */

#glpC39
.glp-c31210-code{

  color:
    #173b56 !important;

  font-weight:
    900 !important;

}


/* DESCRIÇÃO */

#glpC39
.glp-c31210-description{

  min-width:240px;

  max-width:300px;

  white-space:normal !important;

  line-height:1.35;

}


/* NÚMEROS */

#glpC39
.glp-c31210-table
.number{

  color:
    #274f68 !important;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;

}


/* CAMPOS SEM CADASTRO */

#glpC39
.glp-c31210-table
.missing{

  color:
    #9c6b2a !important;

  font-size:
    8px !important;

  font-style:
    italic;

}


/* STATUS */

.glp-c31210-status{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-width:70px;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    7px;

  font-weight:
    900;

}


.glp-c31210-status.ok{

  background:
    #e7f7ef;

  color:
    #17764a;

}


.glp-c31210-status.warn{

  background:
    #fff0d7;

  color:
    #946000;

}


.glp-c31210-empty{

  height:100px !important;

  text-align:center;

  color:#7890a1 !important;

}


/*
 * Evita que alguma largura antiga do bloco
 * de itens continue limitada.
 */

#glpC39
.glp-c31210-table-wrap{

  margin-left:0 !important;
  margin-right:0 !important;

}


/*
 * Scroll visual somente quando necessário.
 */

#glpC39
.glp-c31210-table-wrap::-webkit-scrollbar{

  height:9px;

}


#glpC39
.glp-c31210-table-wrap::-webkit-scrollbar-track{

  background:#eef4f7;

}


#glpC39
.glp-c31210-table-wrap::-webkit-scrollbar-thumb{

  border:
    2px solid #eef4f7;

  border-radius:
    999px;

  background:#b7cad6;

}


/* =========================================================
   GLP C3.12.11 SEQUENCIA BATIDA
   ========================================================= */


/* CABEÇALHO OPERACIONAL */

#glpC39
.glp-c31211-head{

  margin:
    0 0 15px;

  padding:
    14px 16px;

  border:
    1px solid
    #dce8ef;

  border-radius:
    13px;

  background:
    linear-gradient(
      100deg,
      #f5f9fc,
      #f9fcfd
    );

}


.glp-c31211-head-main{

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:25px;

}


.glp-c31211-kicker{

  display:block;

  margin-bottom:4px;

  color:#1e8fa6;

  font-size:7px;

  font-weight:900;

  letter-spacing:.12em;

  text-transform:uppercase;

}


.glp-c31211-head-main
> div:first-child
> strong{

  display:block;

  color:#163d59;

  font-size:12px;

  font-weight:900;

}


.glp-c31211-head-main
> div:first-child
> small{

  display:block;

  margin-top:4px;

  color:#758b9b;

  font-size:8px;

  line-height:1.45;

}


/* FUNDO → MEIO → PORTA */

.glp-c31211-direction{

  display:flex;

  align-items:center;

  gap:8px;

  flex:0 0 auto;

}


.glp-c31211-direction span{

  padding:
    6px 9px;

  border-radius:
    999px;

  font-size:7px;

  font-weight:900;

}


.glp-c31211-direction .fundo{

  background:#e9f2ff;

  color:#2859ad;

}


.glp-c31211-direction .meio{

  background:#e8f7f4;

  color:#187761;

}


.glp-c31211-direction .porta{

  background:#fff1dc;

  color:#9a6100;

}


.glp-c31211-direction i{

  position:relative;

  width:24px;

  height:1px;

  background:#a9bbc7;

}


.glp-c31211-direction i::after{

  content:"";

  position:absolute;

  right:-1px;

  top:-3px;

  border-top:
    3px solid transparent;

  border-bottom:
    3px solid transparent;

  border-left:
    5px solid #9fb2c0;

}


/* RESUMO */

.glp-c31211-resumo{

  display:flex;

  gap:18px;

  margin-top:12px;

  padding-top:10px;

  border-top:
    1px solid #e2ebf0;

}


.glp-c31211-resumo span{

  color:#8193a0;

  font-size:7px;

}


.glp-c31211-resumo strong{

  margin-right:3px;

  color:#264b64;

  font-size:9px;

}


/* =========================================================
   GRID
   ========================================================= */

#glpC39
#glpC39Sequence.glp-c31211-batida{

  display:grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    ) !important;

  gap:
    10px !important;

}


/* =========================================================
   CARD
   ========================================================= */

#glpC39
#glpC39Sequence
.glp-c31211-item{

  position:relative;

  display:grid !important;

  grid-template-columns:
    45px
    minmax(0,1fr) !important;

  gap:0 !important;

  min-height:136px;

  padding:
    0 !important;

  overflow:hidden;

  border:
    1px solid
    #dce7ed !important;

  border-radius:
    12px !important;

  background:
    #fff !important;

  box-shadow:
    0 5px 16px
    rgba(18,62,90,.045);

}


/*
 * Barra de zona
 */

#glpC39
#glpC39Sequence
.glp-c31211-item::before{

  content:"";

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:3px;

}


#glpC39
#glpC39Sequence
.glp-c31211-item.fundo::before{

  background:#3477d8;

}


#glpC39
#glpC39Sequence
.glp-c31211-item.meio::before{

  background:#20a684;

}


#glpC39
#glpC39Sequence
.glp-c31211-item.porta::before{

  background:#dfa329;

}


/* ORDEM */

.glp-c31211-order{

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border-right:
    1px solid #e5edf2;

  background:
    #f7fafc;

}


.glp-c31211-order span{

  color:#91a2ae !important;

  font-size:5px !important;

  font-weight:900;

  letter-spacing:.08em;

}


.glp-c31211-order strong{

  margin-top:3px;

  color:#163f5c !important;

  font-size:17px !important;

  line-height:1;

}


/* CONTEÚDO */

.glp-c31211-content{

  min-width:0;

  padding:
    11px 11px 9px;

}


.glp-c31211-item-head{

  display:flex;

  justify-content:
    space-between;

  align-items:flex-start;

  gap:8px;

}


.glp-c31211-item-head
> div{

  min-width:0;

}


.glp-c31211-code{

  display:block;

  color:#173d58 !important;

  font-size:9px !important;

  font-weight:900 !important;

}


.glp-c31211-desc{

  display:block;

  margin-top:3px;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:#6f8495 !important;

  font-size:7px !important;

}


/* ZONA */

.glp-c31211-zone{

  flex:0 0 auto;

  padding:
    4px 6px;

  border-radius:
    999px;

  font-size:
    6px !important;

  font-weight:
    900;

}


.glp-c31211-zone.fundo{

  background:#eaf2ff;

  color:#315faa !important;

}


.glp-c31211-zone.meio{

  background:#e8f7f3;

  color:#16745d !important;

}


.glp-c31211-zone.porta{

  background:#fff1dc;

  color:#966000 !important;

}


/* MÉTRICAS */

.glp-c31211-metrics{

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:
    5px 10px;

  margin-top:11px;

}


.glp-c31211-metrics span{

  min-width:0;

}


.glp-c31211-metrics small{

  display:block;

  color:#93a2ad;

  font-size:5px;

  font-weight:900;

  text-transform:uppercase;

}


.glp-c31211-metrics strong{

  display:block;

  margin-top:2px;

  color:#35566d !important;

  font-size:8px !important;

  font-weight:800;

}


/* RODAPÉ */

.glp-c31211-footer{

  display:flex;

  justify-content:
    space-between;

  align-items:center;

  gap:8px;

  margin-top:10px;

  padding-top:7px;

  border-top:
    1px solid #edf2f5;

  color:#8496a3;

  font-size:6px;

}


.glp-c31211-footer
span:first-child{

  font-weight:900;

}


.glp-c31211-footer strong{

  color:#536f82;

  font-size:6px;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1450px){

  #glpC39
  #glpC39Sequence.glp-c31211-batida{

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

  }

}


@media(max-width:1050px){

  .glp-c31211-head-main{

    flex-direction:column;

    align-items:flex-start;

  }


  #glpC39
  #glpC39Sequence.glp-c31211-batida{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

  }

}


@media(max-width:650px){

  .glp-c31211-direction{

    width:100%;

  }


  .glp-c31211-direction span{

    flex:1;

    text-align:center;

  }


  #glpC39
  #glpC39Sequence.glp-c31211-batida{

    grid-template-columns:
      1fr !important;

  }

}


/* =========================================================
   GLP C3.12.12 PALLETS VISIVEIS
   ========================================================= */


/*
 * Garante contraste dos pallets ocupados.
 */

#glpC39
.glp-c3129-stage
.glp-c3123-pallet.occupied{

  opacity:1 !important;

  background:

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color),
        white 4%
      ),
      color-mix(
        in srgb,
        var(--pallet-color),
        #081c28 28%
      )
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.28) !important;

}


#glpC39
.glp-c3129-stage
.glp-c3123-pallet.partial{

  opacity:1 !important;

  background:

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color),
        white 5%
      ),
      color-mix(
        in srgb,
        var(--pallet-color),
        #17212a 32%
      )
    ) !important;

  border:
    1px dashed
    #ffc55d !important;

}


/*
 * Código P01 / P02 sempre visível.
 */

#glpC39
.glp-c3129-stage
.glp-c3123-code{

  display:block !important;

  position:relative;

  z-index:2;

  color:#fff !important;

  font-weight:900 !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.35);

}


/*
 * No modo compacto mantemos material abreviado
 * escondido para não poluir, mas mostramos
 * código + caixas.
 */

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c3123-data{

  display:block !important;

  margin-top:4px;

  color:
    rgba(255,255,255,.86) !important;

  font-size:
    5px !important;

  font-weight:
    700;

}


/*
 * Posição livre fica realmente discreta.
 */

#glpC39
.glp-c3129-stage
.glp-c3123-pallet.free{

  opacity:.42 !important;

}


#glpC39
.glp-c3129-stage
.glp-c3123-pallet.free
.glp-c3123-code{

  color:
    rgba(205,224,234,.6) !important;

}


#glpC39
.glp-c3129-stage
.glp-c3123-free-text{

  color:
    rgba(190,216,229,.45) !important;

  font-size:
    5px !important;

}


/* =========================================================
   GLP C3.12.13 MAPA BATIDA SKU
   ========================================================= */


/*
 * A carroceria BATIDA deixa de usar
 * posições de pallet.
 */

#glpC39
.glp-c3129-stage
.glp-c39-trailer.glp-c31213-batida-map{

  display:grid !important;

  grid-template-columns:
    repeat(
      var(--c31213-cols),
      minmax(0,1fr)
    ) !important;

  grid-template-rows:
    repeat(
      var(--c31213-rows),
      minmax(0,1fr)
    ) !important;

  grid-auto-flow:
    row !important;

  gap:
    6px !important;

  padding:
    18px 13px !important;

  overflow:
    hidden !important;

}


/* =========================================================
   BLOCO SKU
   ========================================================= */

.glp-c31213-sku{

  position:relative;

  min-width:0;
  min-height:0;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:2px;

  box-sizing:border-box;

  overflow:hidden;

  padding:
    5px 4px 10px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:
    7px;

  background:

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--sku-color),
        white 3%
      ),
      color-mix(
        in srgb,
        var(--sku-color),
        #09202f 25%
      )
    );

  box-shadow:

    inset
    0 -5px 0
    rgba(36,25,13,.22),

    0 2px 5px
    rgba(0,0,0,.10);

  color:#fff;

  text-align:center;

  transition:
    transform .16s ease,
    box-shadow .16s ease;

}


.glp-c31213-sku:hover{

  transform:
    translateY(-2px)
    scale(1.025);

  z-index:20;

  box-shadow:
    0 8px 18px
    rgba(0,0,0,.30);

}


/* ORDEM VISUAL */

.glp-c31213-sku-index{

  position:absolute;

  top:4px;
  left:5px;

  width:18px;
  height:18px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:
    50%;

  background:
    rgba(7,30,43,.50);

  color:
    rgba(255,255,255,.92);

  font-size:
    5px;

  font-weight:
    900;

}


/* CÓDIGO */

.glp-c31213-sku-code{

  max-width:100%;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:#fff;

  font-size:
    6px;

  font-weight:
    900;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.25);

}


/* CAIXAS */

.glp-c31213-sku-boxes{

  margin-top:3px;

  color:
    rgba(255,255,255,.94);

  font-size:
    7px;

  font-weight:
    800;

}


/* PESO */

.glp-c31213-sku-weight{

  color:
    rgba(233,244,249,.82);

  font-size:
    6px;

}


/*
 * Pequena barra que representa a participação
 * volumétrica relativa do SKU.
 */

.glp-c31213-share{

  position:absolute;

  left:4px;
  bottom:4px;

  width:
    var(--sku-share);

  max-width:
    calc(100% - 8px);

  height:3px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.64);

}


/* =========================================================
   MUITOS SKUs
   ========================================================= */

#glpC39
.glp-c39-stage[
  data-c31213-skus
]
.glp-c31213-batida-map{

  font-variant-numeric:
    tabular-nums;

}


/*
 * Reduz a informação automaticamente
 * em grades muito densas.
 */

#glpC39
.glp-c39-stage[
  data-c31213-skus="20"
]
.glp-c31213-sku-code{

  font-size:5px;

}


/* =========================================================
   LEGENDA
   ========================================================= */

.glp-c31213-legend-item{

  display:inline-flex;

  align-items:center;

  gap:5px;

}


.glp-c31213-legend-item i{

  display:inline-block;

  width:10px;
  height:10px;

  flex:0 0 auto;

  border-radius:3px;

}


.glp-c31213-legend-more{

  display:inline-flex;

  align-items:center;

  min-height:18px;

  padding:
    2px 7px;

  border-radius:
    999px;

  background:#eef4f7;

  color:#617a8c;

  font-size:7px;

  font-weight:900;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:900px){

  #glpC39
  .glp-c3129-stage
  .glp-c39-trailer.glp-c31213-batida-map{

    gap:4px !important;

    padding:
      12px 8px !important;

  }


  .glp-c31213-sku-code{

    font-size:
      5px;

  }


  .glp-c31213-sku-boxes{

    font-size:
      6px;

  }


  .glp-c31213-sku-weight{

    display:none;

  }

}


/* =========================================================
   GLP C3.12.14 TEMPO CARREGAMENTO
   ========================================================= */

.glp-c31214-card{

  padding:
    16px !important;

  border:
    1px solid
    #dce7ee !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7fbfd
    ) !important;

}


.glp-c31214-head{

  display:flex;

  justify-content:
    space-between;

  align-items:center;

}


.glp-c31214-head span{

  display:block;

  color:#158ba2;

  font-size:7px;

  font-weight:900;

  letter-spacing:.12em;

}


.glp-c31214-head strong{

  display:block;

  margin-top:3px;

  color:#173d59;

  font-size:12px;

  font-weight:900;

}


.glp-c31214-input-area{

  margin-top:14px;

}


.glp-c31214-input-area label{

  display:block;

  margin-bottom:6px;

  color:#687f90;

  font-size:7px;

  font-weight:900;

  text-transform:uppercase;

}


#glpC31214Agenda{

  width:100%;

  height:42px;

  box-sizing:border-box;

  padding:
    0 12px;

  border:
    1px solid
    #cedde7 !important;

  border-radius:
    10px !important;

  background:
    #f7fafc !important;

  color:#173d58 !important;

  font-size:14px;

  font-weight:800;

}


#glpC31214Agenda:focus{

  outline:none;

  border-color:
    #39a3c1 !important;

  background:
    #fff !important;

  box-shadow:
    0 0 0 3px
    rgba(30,160,191,.08) !important;

}


.glp-c31214-results{

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:8px;

  margin-top:10px;

}


.glp-c31214-results > div{

  padding:
    11px;

  border:
    1px solid
    #e1e9ee;

  border-radius:
    11px;

  background:#fff;

}


.glp-c31214-results small{

  display:block;

  color:#8798a5;

  font-size:6px;

  font-weight:900;

  text-transform:uppercase;

}


.glp-c31214-results strong{

  display:block;

  margin-top:5px;

  color:#143b58;

  font-size:16px;

  font-weight:900;

  letter-spacing:-.02em;

  font-variant-numeric:
    tabular-nums;

}


.glp-c31214-type{

  margin-top:9px;

  padding:
    7px 9px;

  border-radius:
    8px;

  font-size:7px;

  font-weight:900;

}


.glp-c31214-type.ok{

  background:#e8f7ef;

  color:#18774b;

}


.glp-c31214-type.warn{

  background:#fff1dc;

  color:#976000;

}


@media(max-width:650px){

  .glp-c31214-results{

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   GLP C3.12.15 VEICULO PALETIZADO
   ========================================================= */

#glpC312Status.bad{

  background:
    #fdeaea !important;

  color:
    #a12e2e !important;

  border:
    1px solid
    #f1caca !important;

}


#glpC3122RuleText strong{

  font-weight:
    900;

}


/*
 * Opções incompatíveis ficam visivelmente indisponíveis
 * nos navegadores que suportam estilização de option.
 */

#glpCubagemVeiculoSelect
option:disabled{

  color:#a8b3bb;

}


/* =========================================================
   GLP C3.12.19 CARD VEICULO OFICIAL
   ========================================================= */


/*
 * Valor do recomendador antigo.
 *
 * Ele continua existindo para não quebrar
 * scripts legados, mas deixa de aparecer
 * quando o card oficial paletizado está ativo.
 */

.glp-c31219-official-card
.glp-c31219-legacy-value{

  display:none !important;

}


/*
 * Valor realmente exibido.
 */

.glp-c31219-official-value{

  display:block;

  margin-top:17px;

  color:#153b57;

  font-size:18px;

  font-weight:900;

  line-height:1.15;

  letter-spacing:-.025em;

}


/*
 * Informação curta.
 */

.glp-c31219-official-info{

  margin-top:8px;

  color:#7890a1;

  font-size:8px;

  font-weight:600;

}


/*
 * Evita que o texto oficial fique comprimido.
 */

.glp-c31219-official-card{

  min-width:0;

}


/* =========================================================
   GLP C3.12.20 CARD OFICIAL
   ========================================================= */

.glp-c31220-card-oficial
.glp-c31220-legado{

  display:none !important;

}


#glpC31220Vehicle{

  display:block !important;

  margin-top:15px;

  color:#153b57;

  font-size:18px;

  font-weight:900;

  line-height:1.15;

  letter-spacing:-.03em;

}


#glpC31220Info{

  margin-top:7px;

  color:#71899a;

  font-size:8px;

  font-weight:700;

}


/* =========================================================
   GLP C3.12.20 PALLET PREMIUM
   ========================================================= */


/*
 * Um pouco mais de espaço interno para a
 * representação visual.
 */

#glpC39
.glp-c39-trailer.glp-c31220-premium-map{

  gap:
    4px !important;

  padding:
    20px 10px 14px !important;

}


/*
 * PALLET OCUPADO
 *
 * ::before = pallet de madeira
 * ::after  = carga sobre o pallet
 */

#glpC39
.glp-c31220-premium-map
.glp-c31220-real-pallet{

  position:relative !important;

  isolation:isolate;

  overflow:visible !important;

  padding:
    9px 3px 12px !important;

  border:
    0 !important;

  border-radius:
    5px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transition:
    transform .15s ease,
    filter .15s ease;

}


/* BASE DE MADEIRA */

#glpC39
.glp-c31220-premium-map
.glp-c31220-real-pallet::before{

  content:"";

  position:absolute;

  inset:
    2px 1px 1px;

  z-index:-2;

  border-radius:
    5px;

  background:

    linear-gradient(
      90deg,
      transparent 0 7%,
      rgba(70,39,15,.45) 7% 11%,
      transparent 11% 44%,
      rgba(70,39,15,.45) 44% 48%,
      transparent 48% 82%,
      rgba(70,39,15,.45) 82% 86%,
      transparent 86%
    ),

    repeating-linear-gradient(
      90deg,
      #9c6b38 0 5px,
      #bc8950 5px 9px,
      #8a5b30 9px 12px
    );

  border:
    1px solid
    rgba(60,34,17,.60);

  box-shadow:

    inset
    0 1px 1px
    rgba(255,255,255,.18),

    0 2px 4px
    rgba(0,0,0,.22);

}


/* CARGA EM CIMA DO PALLET */

#glpC39
.glp-c31220-premium-map
.glp-c31220-real-pallet::after{

  content:"";

  position:absolute;

  top:5px;
  left:3px;
  right:3px;
  bottom:12px;

  z-index:-1;

  border-radius:
    4px;

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color),
        white 8%
      ),
      color-mix(
        in srgb,
        var(--pallet-color),
        #091d2a 24%
      )
    );

  border:
    1px solid
    rgba(255,255,255,.20);

  box-shadow:

    inset
    0 0 0 1px
    rgba(0,0,0,.08),

    0 2px 3px
    rgba(0,0,0,.13);

}


/* EFEITO DE DIVISÃO DAS CAIXAS */

#glpC39
.glp-c31220-premium-map
.glp-c31220-real-pallet
.glp-c3123-material{

  position:absolute;

  inset:
    7px 5px 15px;

  z-index:0;

  display:block !important;

  overflow:hidden;

  color:transparent !important;

  font-size:0 !important;

  pointer-events:none;

  background:

    repeating-linear-gradient(
      90deg,
      transparent 0 24%,
      rgba(255,255,255,.13) 24% 26%,
      transparent 26% 49%
    ),

    repeating-linear-gradient(
      0deg,
      transparent 0 31%,
      rgba(0,0,0,.10) 31% 33%,
      transparent 33% 65%
    );

  border-radius:
    3px;

}


/* P01 / P02 */

#glpC39
.glp-c31220-premium-map
.glp-c3123-code{

  position:relative !important;

  z-index:5 !important;

  display:inline-flex !important;

  align-items:center;
  justify-content:center;

  min-width:18px;

  margin:0 auto 5px !important;

  padding:
    2px 3px;

  border-radius:
    4px;

  background:
    rgba(4,25,37,.55);

  color:#fff !important;

  font-size:
    6px !important;

  font-weight:
    900 !important;

  line-height:1;

  text-shadow:none !important;

}


/* QUANTIDADE DE CAIXAS */

#glpC39
.glp-c31220-premium-map
.glp-c3123-data{

  position:relative !important;

  z-index:5 !important;

  display:block !important;

  margin-top:1px !important;

  color:
    rgba(255,255,255,.96) !important;

  font-size:
    6px !important;

  font-weight:
    900 !important;

  text-align:center;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.38);

}


/*
 * Peso fica no tooltip.
 * Evita poluição na carreta de 60 posições.
 */

#glpC39
.glp-c31220-premium-map
.glp-c3123-weight{

  display:none !important;

}


/* PALLET PARCIAL */

#glpC39
.glp-c31220-premium-map
.glp-c3123-pallet.partial::after{

  border:
    2px dashed
    #ffd15a !important;

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.14),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color),
        white 10%
      ),
      color-mix(
        in srgb,
        var(--pallet-color),
        #172129 31%
      )
    );

}


#glpC39
.glp-c31220-premium-map
.glp-c3123-partial-label{

  position:absolute !important;

  left:50% !important;
  right:auto !important;
  bottom:13px !important;
  top:auto !important;

  z-index:8;

  transform:
    translateX(-50%);

  padding:
    2px 3px !important;

  border-radius:
    3px;

  background:
    #ffbf32 !important;

  color:
    #382400 !important;

  font-size:
    4px !important;

  font-weight:
    900 !important;

}


/* POSIÇÕES LIVRES */

#glpC39
.glp-c31220-premium-map
.glp-c3123-pallet.free{

  position:relative;

  opacity:
    .34 !important;

  border:
    1px dashed
    rgba(159,194,211,.31) !important;

  border-radius:
    5px !important;

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.045)
    ) !important;

  box-shadow:
    inset 0 0 10px
    rgba(0,0,0,.08) !important;

}


#glpC39
.glp-c31220-premium-map
.glp-c3123-pallet.free
.glp-c3123-code{

  background:
    transparent !important;

  color:
    rgba(174,205,220,.48) !important;

}


/* HOVER */

#glpC39
.glp-c31220-premium-map
.glp-c31220-real-pallet:hover{

  transform:
    translateY(-3px)
    scale(1.07);

  z-index:30;

  filter:
    brightness(1.08);

}


/* =========================================================
   DENSIDADE COMPACTA
   ========================================================= */

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c31220-premium-map
.glp-c31220-real-pallet{

  padding:
    7px 1px 10px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c31220-premium-map
.glp-c3123-code{

  min-width:
    16px;

  padding:
    2px;

  font-size:
    5px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
.glp-c31220-premium-map
.glp-c3123-data{

  font-size:
    5px !important;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1000px){

  #glpC39
  .glp-c31220-premium-map
  .glp-c3123-code{

    font-size:
      5px !important;

  }


  #glpC39
  .glp-c31220-premium-map
  .glp-c3123-data{

    font-size:
      4px !important;

  }

}


/* =========================================================
   GLP C3.12.21 PALETTE REALISTA
   ========================================================= */

/* espaço interno um pouco melhor */
#glpC39 .glp-c31220-premium-map{
  padding: 18px 12px 16px !important;
  gap: 5px !important;
}

/* pallet ocupado / parcial */
#glpC39 .glp-c31221-wood-pallet{
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 4px 14px !important;
  transform-origin: center;
  transition: transform .15s ease, filter .15s ease;
}

/* base do pallet - madeira vista de cima */
#glpC39 .glp-c31221-wood-pallet::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:3px;
  bottom:3px;
  z-index:-3;
  border-radius:6px;
  border:1px solid rgba(84,53,24,.78);
  background:
    /* blocos inferiores */
    linear-gradient(90deg,
      transparent 0 10%,
      rgba(82,55,28,.55) 10% 17%,
      transparent 17% 41%,
      rgba(82,55,28,.55) 41% 48%,
      transparent 48% 72%,
      rgba(82,55,28,.55) 72% 79%,
      transparent 79% 100%
    ),
    /* ripas de madeira */
    repeating-linear-gradient(
      0deg,
      #d3a16a 0 4px,
      #bf8a55 4px 8px,
      #d9ad75 8px 12px,
      #ba8450 12px 16px
    ),
    /* leve variação */
    linear-gradient(
      135deg,
      rgba(255,255,255,.18),
      rgba(0,0,0,.08)
    );
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    inset 0 -1px 1px rgba(0,0,0,.08),
    0 2px 4px rgba(0,0,0,.22);
}

/* apoios/blocos do pallet embaixo */
#glpC39 .glp-c31221-wood-pallet > .glp-c31221-feet{
  display:none;
}

#glpC39 .glp-c31221-wood-pallet .glp-c3123-material{
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  bottom:16px;
  z-index:-1;
  border-radius:4px;
  overflow:hidden;
  color:transparent !important;
  font-size:0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.00) 0 23%,
      rgba(255,255,255,.13) 23% 25%,
      rgba(255,255,255,.00) 25% 49%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.00) 0 31%,
      rgba(0,0,0,.10) 31% 33%,
      rgba(0,0,0,.00) 33% 65%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pallet-color), white 16%),
      color-mix(in srgb, var(--pallet-color), #1a2230 22%)
    );
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 2px 3px rgba(0,0,0,.16);
}

/* pequena sombra da carga sobre a madeira */
#glpC39 .glp-c31221-wood-pallet .glp-c3123-material::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:4px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.16),
      transparent 35%
    );
}

/* código do pallet */
#glpC39 .glp-c31221-wood-pallet .glp-c3123-code{
  position:relative !important;
  z-index:6 !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:20px;
  margin:0 auto 4px !important;
  padding:2px 4px;
  border-radius:999px;
  background:rgba(10,24,34,.72);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14);
  font-size:6px !important;
  font-weight:900 !important;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* caixas */
#glpC39 .glp-c31221-wood-pallet .glp-c3123-data{
  position:relative !important;
  z-index:6 !important;
  display:block !important;
  margin-top:1px !important;
  color:#ffffff !important;
  font-size:6px !important;
  font-weight:900 !important;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* esconde peso para não poluir */
#glpC39 .glp-c31221-wood-pallet .glp-c3123-weight{
  display:none !important;
}

/* pallet parcial */
#glpC39 .glp-c31221-wood-pallet.partial::before{
  border:2px dashed #ffcf59 !important;
}

#glpC39 .glp-c31221-wood-pallet .glp-c3123-partial-label{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%);
  bottom:16px !important;
  z-index:8;
  padding:2px 4px !important;
  border-radius:4px;
  background:#ffc933 !important;
  color:#4b3300 !important;
  font-size:5px !important;
  font-weight:900 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}

/* posições livres */
#glpC39 .glp-c31220-premium-map .glp-c3123-pallet.free{
  position:relative;
  opacity:.28 !important;
  border:1px dashed rgba(181,205,217,.34) !important;
  border-radius:6px !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.02),
      rgba(255,255,255,.04)
    ) !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,.06) !important;
}

#glpC39 .glp-c31220-premium-map .glp-c3123-pallet.free .glp-c3123-code{
  background:transparent !important;
  border:0 !important;
  color:rgba(183,207,220,.42) !important;
  box-shadow:none !important;
}

/* hover */
#glpC39 .glp-c31221-wood-pallet:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.05);
  z-index:30;
}

/* densidade compacta */
#glpC39 .glp-c3129-stage[data-c3129-density="compact"] .glp-c31221-wood-pallet{
  padding:7px 3px 12px !important;
}

#glpC39 .glp-c3129-stage[data-c3129-density="compact"] .glp-c31221-wood-pallet .glp-c3123-code{
  min-width:16px;
  font-size:5px !important;
  padding:2px 3px;
}

#glpC39 .glp-c3129-stage[data-c3129-density="compact"] .glp-c31221-wood-pallet .glp-c3123-data{
  font-size:5px !important;
}

/* telas menores */
@media (max-width: 1100px){
  #glpC39 .glp-c31221-wood-pallet .glp-c3123-code{
    font-size:5px !important;
  }

  #glpC39 .glp-c31221-wood-pallet .glp-c3123-data{
    font-size:5px !important;
  }
}


/* =========================================================
   GLP C3.12.22 PALLET DEFINITIVO
   Aplica diretamente em occupied / partial.
   ========================================================= */


/* ---------------------------------------------------------
   ÁREA INTERNA DA CARRETA
   --------------------------------------------------------- */

#glpC39
#glpC39Trailer{

  gap:
    5px !important;

  padding:
    20px 11px 15px !important;

}


/* ---------------------------------------------------------
   PALLET OCUPADO
   --------------------------------------------------------- */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.occupied,

#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial{

  position:relative !important;

  isolation:isolate !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  min-width:0 !important;

  min-height:0 !important;

  overflow:visible !important;

  box-sizing:border-box !important;

  padding:
    8px 3px 18px !important;

  border:
    0 !important;

  border-radius:
    7px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

}


/* =========================================================
   BASE DE MADEIRA
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.occupied::before,

#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial::before{

  content:"" !important;

  display:block !important;

  position:absolute !important;

  inset:
    1px 1px 2px !important;

  z-index:
    -3 !important;

  border:
    1px solid
    #72502d !important;

  border-radius:
    6px !important;

  /*
   * Desenho superior de pallet:
   * ripas + travessas + madeira.
   */
  background:

    /* travessa esquerda */
    linear-gradient(
      90deg,
      transparent 0 8%,
      rgba(86,53,25,.75) 8% 13%,
      transparent 13% 44%,
      rgba(86,53,25,.72) 44% 49%,
      transparent 49% 80%,
      rgba(86,53,25,.75) 80% 85%,
      transparent 85% 100%
    ),

    /* separação entre ripas */
    repeating-linear-gradient(
      0deg,
      transparent 0 8px,
      rgba(78,47,23,.38) 8px 10px,
      transparent 10px 18px
    ),

    /* textura de madeira */
    repeating-linear-gradient(
      90deg,
      #c9975d 0 5px,
      #deb27b 5px 9px,
      #bd8750 9px 13px,
      #d2a16a 13px 18px
    ) !important;

  box-shadow:

    inset
    0 1px 0
    rgba(255,255,255,.28),

    inset
    0 -2px 3px
    rgba(62,38,18,.22),

    0 3px 5px
    rgba(0,0,0,.27) !important;

}


/* =========================================================
   CARGA SOBRE O PALLET
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.occupied::after,

#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial::after{

  content:"" !important;

  display:block !important;

  position:absolute !important;

  left:
    4px !important;

  right:
    4px !important;

  top:
    5px !important;

  bottom:
    19px !important;

  z-index:
    -1 !important;

  border:
    1px solid
    rgba(255,255,255,.24) !important;

  border-radius:
    5px !important;

  background:

    /* efeito de caixas */
    repeating-linear-gradient(
      90deg,
      transparent 0 24%,
      rgba(255,255,255,.13) 24% 26%,
      transparent 26% 49%
    ),

    repeating-linear-gradient(
      0deg,
      transparent 0 31%,
      rgba(0,0,0,.11) 31% 33%,
      transparent 33% 65%
    ),

    /* brilho superior */
    linear-gradient(
      145deg,
      rgba(255,255,255,.19),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color, #c52b84),
        white 7%
      ),
      color-mix(
        in srgb,
        var(--pallet-color, #c52b84),
        #071d2a 23%
      )
    ) !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(0,0,0,.07),

    0 3px 5px
    rgba(0,0,0,.19) !important;

}


/* =========================================================
   MADEIRA VISÍVEL NA PARTE INFERIOR
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.occupied{

  /*
   * A base fica maior que a carga,
   * deixando a madeira claramente visível.
   */

}


/* =========================================================
   TAG P01 / P02
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet
.glp-c3123-code{

  position:relative !important;

  inset:auto !important;

  z-index:
    10 !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:
    22px !important;

  height:
    15px !important;

  margin:
    0 auto 6px !important;

  padding:
    0 5px !important;

  border:
    1px solid
    rgba(255,255,255,.18) !important;

  border-radius:
    999px !important;

  background:
    rgba(4,25,37,.76) !important;

  color:
    #fff !important;

  font-size:
    6px !important;

  font-weight:
    900 !important;

  line-height:
    15px !important;

  text-shadow:
    none !important;

  box-shadow:
    0 2px 4px
    rgba(0,0,0,.20) !important;

}


/* =========================================================
   QUANTIDADE DE CAIXAS
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet
.glp-c3123-data{

  position:relative !important;

  z-index:
    10 !important;

  display:block !important;

  margin:
    0 !important;

  color:
    #fff !important;

  font-size:
    6px !important;

  font-weight:
    900 !important;

  line-height:
    1.15 !important;

  text-align:
    center !important;

  text-shadow:
    0 1px 3px
    rgba(0,0,0,.48) !important;

}


/* material continua servindo como camada visual */
#glpC39
#glpC39Trailer
.glp-c3123-pallet
.glp-c3123-material{

  display:none !important;

}


/* peso continua disponível no title/tooltip */
#glpC39
#glpC39Trailer
.glp-c3123-pallet
.glp-c3123-weight{

  display:none !important;

}


/* =========================================================
   PALLET PARCIAL
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial::after{

  left:
    7px !important;

  right:
    7px !important;

  /*
   * visualmente mostra uma carga menor
   * sobre o mesmo pallet de madeira.
   */
  top:
    25% !important;

  border:
    2px dashed
    #ffd058 !important;

}


#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial
.glp-c3123-partial-label{

  position:absolute !important;

  left:
    50% !important;

  right:
    auto !important;

  top:
    auto !important;

  bottom:
    20px !important;

  z-index:
    20 !important;

  transform:
    translateX(-50%) !important;

  display:block !important;

  padding:
    2px 4px !important;

  border:
    0 !important;

  border-radius:
    4px !important;

  background:
    #ffc43d !important;

  color:
    #4d3100 !important;

  font-size:
    4px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  box-shadow:
    0 2px 4px
    rgba(0,0,0,.25) !important;

}


/* =========================================================
   POSIÇÃO LIVRE
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.free{

  position:relative !important;

  opacity:
    .22 !important;

  box-sizing:
    border-box !important;

  border:
    1px dashed
    rgba(166,198,214,.34) !important;

  border-radius:
    6px !important;

  background:

    linear-gradient(
      135deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.045)
    ) !important;

  box-shadow:
    inset 0 0 10px
    rgba(0,0,0,.08) !important;

}


#glpC39
#glpC39Trailer
.glp-c3123-pallet.free
.glp-c3123-code{

  border:
    0 !important;

  background:
    transparent !important;

  color:
    rgba(188,215,228,.50) !important;

  box-shadow:
    none !important;

}


#glpC39
#glpC39Trailer
.glp-c3123-free-text{

  display:none !important;

}


/* =========================================================
   HOVER
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.occupied:hover,

#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial:hover{

  z-index:
    40 !important;

  transform:
    translateY(-3px)
    scale(1.055) !important;

  filter:
    brightness(1.06);

}


/* =========================================================
   DETALHE DE RIPAS INFERIORES
   ========================================================= */

#glpC39
#glpC39Trailer
.glp-c3123-pallet.occupied
.glp-c3123-code::after,

#glpC39
#glpC39Trailer
.glp-c3123-pallet.partial
.glp-c3123-code::after{

  content:"";

  position:absolute;

  left:
    -3px;

  right:
    -3px;

  top:
    23px;

  height:
    3px;

  pointer-events:none;

  background:

    linear-gradient(
      90deg,
      #895b31 0 24%,
      transparent 24% 38%,
      #a67440 38% 63%,
      transparent 63% 76%,
      #895b31 76% 100%
    );

  border-radius:
    2px;

  opacity:
    .88;

}


/* =========================================================
   MODO COMPACTO - CARRETA 60 POSIÇÕES
   ========================================================= */

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
#glpC39Trailer
.glp-c3123-pallet.occupied,

#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
#glpC39Trailer
.glp-c3123-pallet.partial{

  padding:
    6px 2px 15px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
#glpC39Trailer
.glp-c3123-pallet
.glp-c3123-code{

  min-width:
    17px !important;

  height:
    12px !important;

  line-height:
    12px !important;

  padding:
    0 3px !important;

  font-size:
    5px !important;

}


#glpC39
.glp-c3129-stage[
  data-c3129-density="compact"
]
#glpC39Trailer
.glp-c3123-pallet
.glp-c3123-data{

  font-size:
    5px !important;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

  #glpC39
  #glpC39Trailer{

    gap:
      3px !important;

  }


  #glpC39
  #glpC39Trailer
  .glp-c3123-pallet
  .glp-c3123-code{

    min-width:
      14px !important;

    font-size:
      4px !important;

  }


  #glpC39
  #glpC39Trailer
  .glp-c3123-pallet
  .glp-c3123-data{

    font-size:
      4px !important;

  }

}