* {
  box-sizing: border-box;
}

:root {
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  color: #edf7ef;
  background: #0f1712;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top,
      #213326 0%,
      #101813 50%,
      #090e0b 100%
    );
}

button {
  font: inherit;
}

.app {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 60px;
}

.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.topo-direita {
  display: flex;
  gap: 10px;
  align-items: center;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  color: #82b58a;
}

h1 {
  margin: 3px 0 0;
  font-size: 32px;
}

h2 {
  margin: 0 0 14px;
  font-size: 16px;
}

.linhagem-topo {
  margin-top: 5px;
  color: #9bb6a0;
  font-size: 12px;
}

.moedas {
  background: #1e2d22;
  border: 1px solid #35533c;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
}


.painel-jogo {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 18px;
}


.ambiente {
  position: relative;
  min-height: 620px;
  overflow: hidden;

  border-radius: 26px;
  border: 1px solid #263b2b;

  background:
    linear-gradient(
      #6ea8c3 0 45%,
      #adcf8d 45% 75%,
      #536c3d 75%
    );

  box-shadow:
    inset 0 0 70px rgba(0,0,0,.15);

  transition:
    filter .3s,
    background .3s;
}


.ambiente.sombra {
  filter:
    brightness(.58)
    saturate(.8);
}


.ambiente.artificial {
  background:
    radial-gradient(
      circle at 70% 15%,
      rgba(244,245,190,.72),
      transparent 24%
    ),
    linear-gradient(
      #26303b 0 45%,
      #667b58 45% 75%,
      #34442f 75%
    );
}


.janela {
  position: absolute;

  left: 40px;
  top: 40px;

  width: 180px;
  height: 150px;

  border:
    10px solid #d9ddd3;

  background: #8dc6e1;

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


.ceu {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 75% 20%,
      #fff7b5 0 10%,
      transparent 11%
    ),
    linear-gradient(
      #70badd,
      #b5e4f3
    );
}


.moldura-v {
  position: absolute;
  width: 8px;
  top: 0;
  bottom: 0;
  left: 50%;
  background: #d9ddd3;
}


.moldura-h {
  position: absolute;
  height: 8px;
  left: 0;
  right: 0;
  top: 50%;
  background: #d9ddd3;
}


.lampada {
  position: absolute;
  right: 58px;
  top: 50px;
  font-size: 54px;
  opacity: .22;
  transition: .2s;
}


.lampada.ativa {
  opacity: 1;
  filter:
    drop-shadow(
      0 0 18px #fff7a8
    );
}


.planta-area {
  position: absolute;
  left: 50%;
  bottom: 110px;

  transform:
    translateX(-50%);

  width: 360px;

  text-align: center;
}


.status-estagio {
  margin-bottom: 12px;

  font-size: 12px;
  letter-spacing: .18em;

  color:
    rgba(255,255,255,.82);
}


.planta {
  height: 300px;

  position: relative;

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


/* ==========================================================
   PLANTA PROCEDURAL V0.3
   ========================================================== */


.semente-v3 {
  width: 30px;
  height: 21px;

  margin-bottom: 8px;

  background:
    linear-gradient(
      145deg,
      #8e6747,
      #63422f
    );

  border-radius:
    70% 38% 68% 42%;

  transform:
    rotate(-15deg);

  box-shadow:
    inset -4px -3px 6px
    rgba(0,0,0,.22);
}


.planta-fenotipo {
  position: relative;

  width: 220px;
  height: var(--altura);

  transform:
    scale(var(--escala))
    rotate(var(--inclinacao));

  transform-origin:
    bottom center;

  transition:
    transform .5s,
    height .5s;
}


.caule-fenotipo {
  position: absolute;

  width: var(--caule);
  height: 100%;

  bottom: 0;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius:
    80% 80% 30% 30%;

  background:
    linear-gradient(
      90deg,
      hsl(
        var(--caule-hue),
        var(--caule-sat),
        calc(var(--caule-light) - 5%)
      ),
      hsl(
        var(--caule-hue),
        var(--caule-sat),
        var(--caule-light)
      ),
      hsl(
        var(--caule-hue),
        var(--caule-sat),
        calc(var(--caule-light) - 8%)
      )
    );

  box-shadow:
    3px 0 5px
    rgba(0,0,0,.13);
}


.folha {
  position: absolute;

  width:
    var(--folha-w);

  height:
    var(--folha-h);

  background:
    linear-gradient(
      145deg,
      hsl(
        var(--folha-hue),
        var(--folha-sat),
        calc(var(--folha-light) + 5%)
      ),
      hsl(
        var(--folha-hue),
        var(--folha-sat),
        var(--folha-light)
      )
    );

  border-radius:
    100% 15% 100% 15%;

  box-shadow:
    inset 5px 3px 8px
    rgba(255,255,255,.07),
    2px 3px 6px
    rgba(0,0,0,.13);

  transition:
    width .5s,
    height .5s,
    background .5s;
}


.folha::after {
  content: "";

  position: absolute;

  left: 8%;
  top: 48%;

  width: 78%;
  height: 1px;

  background:
    rgba(30,75,38,.38);

  transform:
    rotate(-4deg);
}


.folha-larga {
  border-radius:
    90% 22% 90% 28%;
}


.folha-estreita {
  border-radius:
    100% 8% 100% 8%;

  height:
    calc(
      var(--folha-h) * .62
    );
}


.ponta-crescimento {
  position: absolute;

  width: 18px;
  height: 24px;

  left: 50%;
  top: -9px;

  transform:
    translateX(-50%);

  background:
    hsl(
      var(--caule-hue),
      var(--caule-sat),
      calc(var(--caule-light) + 9%)
    );

  border-radius:
    80% 15% 80% 20%;

  transform-origin:
    bottom center;
}


.flor-visual {
  position: absolute;

  color: #efe7bc;

  font-size: 25px;

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

  z-index: 8;

  animation:
    nascerFlor .5s ease;
}


.flor-a {
  top: 5px;
  left: -23px;
}


.flor-b {
  top: 38px;
  right: -32px;
}


@keyframes nascerFlor {

  from {
    opacity: 0;
    transform: scale(.3);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


.planta-estressada .folha {
  filter:
    saturate(.7)
    brightness(.88);

  transform-origin:
    center;
}


.planta-estressada
.caule-fenotipo {
  filter:
    saturate(.8);
}


/* ========================================================== */


.vaso {
  width: 165px;
  height: 115px;

  margin: -2px auto 0;

  background: #a75f3f;

  clip-path:
    polygon(
      10% 0,
      90% 0,
      78% 100%,
      22% 100%
    );

  position: relative;

  box-shadow:
    inset 0 -18px 0
    rgba(0,0,0,.12);
}


.terra {
  position: absolute;

  top: 0;
  left: 8%;

  width: 84%;
  height: 20px;

  border-radius: 50%;

  background: #4d3425;
}


.acoes-rapidas {
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 24px;

  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;
}


button {
  border: 1px solid #39533f;
  background: #1d2d21;
  color: #edf7ef;

  border-radius: 12px;

  padding: 11px 14px;

  cursor: pointer;

  transition: .15s;
}


button:hover {
  background: #2a4230;
  transform: translateY(-1px);
}


button:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}


.botao-secundario {
  background: transparent;
  color: #9cb5a1;
}


.lateral {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.card {
  background:
    rgba(19,29,22,.92);

  border:
    1px solid #2d4232;

  border-radius: 18px;

  padding: 18px;
}


.grid-info,
.dna-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}


.dna-grid {
  grid-template-columns:
    repeat(3,1fr);
}


.grid-info div,
.dna-grid div {
  background: #162119;

  padding: 10px;

  border-radius: 10px;
}


.grid-info span,
.dna-grid span {
  display: block;
  color: #78927e;
  font-size: 11px;
  margin-bottom: 3px;
}


.inventario {
  display: grid;
  gap: 6px;
  font-size: 13px;
}


.item-inventario {
  display: flex;
  justify-content: space-between;

  background: #162119;

  padding: 8px 10px;

  border-radius: 9px;
}


.acoes-adultas {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}


.texto-ajuda {
  margin: 0 0 12px;

  color: #91aa97;

  font-size: 12px;

  line-height: 1.5;
}


.card-linhagem button {
  width: 100%;
}


.loja-card {
  margin-top: 18px;
}


.titulo-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.titulo-linha span {
  color: #799380;
  font-size: 12px;
}


.loja-grid {
  display: grid;

  grid-template-columns:
    repeat(5,1fr);

  gap: 10px;
}


.loja-grid button {
  text-align: left;
  min-height: 75px;
}


.loja-grid strong,
.loja-grid small {
  display: block;
}


.loja-grid small {
  margin-top: 6px;
  color: #91aa97;
}


.log-card {
  margin-top: 18px;
}


#log {
  max-height: 260px;

  overflow: auto;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;

  font-size: 12px;
  line-height: 1.6;
  color: #9eb9a3;
}


.modal {
  position: fixed;

  inset: 0;

  background:
    rgba(4,8,5,.82);

  display: grid;

  place-items: center;

  z-index: 100;
}


.modal.escondido {
  display: none;
}


.modal-caixa {
  width:
    min(
      460px,
      calc(100% - 28px)
    );

  background: #142019;

  border:
    1px solid #36513c;

  border-radius: 22px;

  padding: 24px;

  box-shadow:
    0 20px 70px
    rgba(0,0,0,.45);
}


.modal-caixa p {
  color: #9db2a1;

  font-size: 13px;

  line-height: 1.55;
}


.solos-modal {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}


.solos-modal button {
  text-align: left;
}


@media (max-width: 850px) {

  .painel-jogo {
    grid-template-columns: 1fr;
  }

  .ambiente {
    min-height: 570px;
  }

  .loja-grid {
    grid-template-columns: 1fr 1fr;
  }

  .topo {
    align-items: flex-start;
  }

  .topo-direita {
    flex-direction: column;
    align-items: flex-end;
  }

}

/* ==========================================================
   INDICADOR VISUAL DE UMIDADE — V0.4
   ========================================================== */

.umidade-vaso {
  position: absolute;

  left: 50%;
  bottom: 13px;

  transform:
    translateX(-50%);

  width: 118px;

  padding:
    7px 8px 8px;

  border-radius:
    10px;

  background:
    rgba(
      50,
      30,
      21,
      .72
    );

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

  backdrop-filter:
    blur(3px);

  z-index: 4;
}


.umidade-cabecalho {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    5px;

  font-size:
    9px;

  color:
    rgba(
      255,
      255,
      255,
      .78
    );
}


.umidade-cabecalho strong {
  font-size:
    10px;

  color:
    white;
}


.barra-umidade {
  width: 100%;

  height: 7px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(
      0,
      0,
      0,
      .38
    );
}


.barra-umidade-preenchimento {
  width: 55%;
  height: 100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #79c4e8,
      #4c9fd0
    );

  transition:
    width .35s ease,
    background .35s ease;
}


.estado-umidade {
  margin-top:
    4px;

  font-size:
    8px;

  text-transform:
    uppercase;

  letter-spacing:
    .1em;

  color:
    #9ec7a7;
}


.vaso.seco .terra {
  background:
    #76553d;
}


.vaso.seco
.barra-umidade-preenchimento {
  background:
    linear-gradient(
      90deg,
      #c2a56e,
      #99764d
    );
}


.vaso.seco
.estado-umidade {
  color:
    #e0bd77;
}


.vaso.encharcado .terra {
  background:
    #342a25;
}


.vaso.encharcado
.barra-umidade-preenchimento {
  background:
    linear-gradient(
      90deg,
      #5ab8e4,
      #357ca9
    );
}


.vaso.encharcado
.estado-umidade {
  color:
    #79ccec;
}


.terra {
  transition:
    background .35s ease;
}


/* ==========================================================
   SAÚDE / ESTRESSE — V0.4.1
   ========================================================== */

.barra-saude-v041 {
  width: 100%;
  height: 5px;

  margin-top: 6px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(0,0,0,.35);
}


.barra-saude-preenchimento-v041 {
  width: 100%;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #5fae72,
      #8fd17c
    );

  transition:
    width .4s ease,
    background .4s ease;
}


.celula-saude-v041[data-saude="ATENCAO"]
.barra-saude-preenchimento-v041 {
  background:
    linear-gradient(
      90deg,
      #c8a94e,
      #dbc46b
    );
}


.celula-saude-v041[data-saude="FRAGIL"]
.barra-saude-preenchimento-v041 {
  background:
    linear-gradient(
      90deg,
      #c47a42,
      #d99a58
    );
}


.celula-saude-v041[data-saude="CRITICA"]
.barra-saude-preenchimento-v041 {
  background:
    linear-gradient(
      90deg,
      #aa4a45,
      #d36257
    );
}


/*
----------------------------------------------------------
SAÚDE EM ATENÇÃO
----------------------------------------------------------
*/

#plantaVisual.saude-atencao
.planta-fenotipo {

  filter:
    saturate(.90)
    brightness(.96);

}


/*
----------------------------------------------------------
PLANTA FRÁGIL
----------------------------------------------------------
*/

#plantaVisual.saude-fragil
.planta-fenotipo {

  filter:
    saturate(.72)
    brightness(.88);

  transform:
    scale(var(--escala))
    rotate(
      calc(
        var(--inclinacao)
        + 4deg
      )
    )
    !important;

}


#plantaVisual.saude-fragil
.folha {

  opacity: .85;

}


/*
----------------------------------------------------------
PLANTA CRÍTICA
----------------------------------------------------------
*/

#plantaVisual.saude-critica
.planta-fenotipo {

  filter:
    saturate(.48)
    brightness(.72);

  transform:
    scale(var(--escala))
    rotate(
      calc(
        var(--inclinacao)
        + 9deg
      )
    )
    !important;

}


#plantaVisual.saude-critica
.folha {

  opacity: .68;

}


/*
Pequenas manchas visuais.

Ainda NÃO são doenças.
Apenas sinal de dano/estresse.
*/

#plantaVisual.saude-critica
.folha::before {

  content: "";

  position: absolute;

  inset: 15% 20%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 25% 30%,
      rgba(104,72,42,.5)
      0 8%,
      transparent 10%
    ),
    radial-gradient(
      circle at 68% 65%,
      rgba(95,66,38,.42)
      0 7%,
      transparent 9%
    ),
    radial-gradient(
      circle at 50% 18%,
      rgba(110,78,44,.35)
      0 5%,
      transparent 7%
    );

  pointer-events: none;
}


/*
Recuperação visual suave.
*/

#plantaVisual
.planta-fenotipo {

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

}


/* ==========================================================
   V0.4.2 — COLAPSO
   ========================================================== */

#plantaVisual.saude-colapso
.planta-fenotipo {

  filter:
    saturate(.25)
    brightness(.56)
    contrast(.9);

  transform:
    scale(var(--escala))
    rotate(
      calc(
        var(--inclinacao)
        + 15deg
      )
    )
    !important;

}


#plantaVisual.saude-colapso
.folha {

  opacity: .42;

}


#plantaVisual.saude-colapso
.folha:nth-child(even) {

  transform:
    rotate(75deg)
    !important;

}


#plantaVisual.saude-colapso
.folha::before {

  content: "";

  position: absolute;

  inset: 8% 14%;

  background:
    radial-gradient(
      circle at 25% 30%,
      rgba(86,58,36,.65)
      0 9%,
      transparent 11%
    ),
    radial-gradient(
      circle at 68% 65%,
      rgba(90,61,37,.55)
      0 8%,
      transparent 10%
    ),
    radial-gradient(
      circle at 48% 18%,
      rgba(105,73,40,.48)
      0 7%,
      transparent 9%
    );

  pointer-events:
    none;
}


.celula-saude-v042[data-saude="COLAPSO"]
.barra-saude-preenchimento-v041 {

  background:
    linear-gradient(
      90deg,
      #5b3c39,
      #8a4a43
    );

}


/* ==========================================================
   V0.5 — DIA / NOITE
   ========================================================== */

.relogio-v050 {
  position: absolute;

  top: 24px;
  left: 50%;

  transform:
    translateX(-50%);

  z-index: 20;

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 185px;

  padding:
    9px 13px;

  border-radius:
    14px;

  background:
    rgba(
      14,
      24,
      18,
      .60
    );

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

  backdrop-filter:
    blur(8px);

  box-shadow:
    0 5px 20px
    rgba(
      0,
      0,
      0,
      .16
    );
}


.icone-tempo-v050 {
  font-size:
    23px;
}


.relogio-v050 strong {
  display: block;

  font-size:
    14px;
}


.relogio-v050 span {
  display: block;

  margin-top:
    1px;

  font-size:
    8px;

  letter-spacing:
    .12em;

  color:
    rgba(
      255,
      255,
      255,
      .66
    );
}


.dia-v050 {
  margin-left:
    auto;

  padding-left:
    10px;

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      .14
    );

  font-size:
    8px;

  color:
    rgba(
      255,
      255,
      255,
      .65
    );
}


.dia-v050 strong {
  text-align:
    center;

  color:
    white;

  font-size:
    13px;
}


/*
----------------------------------------------------------
MADRUGADA
----------------------------------------------------------
*/

.ambiente.tempo-madrugada {
  background:
    radial-gradient(
      circle at 74% 13%,
      #e7edf1 0 2.2%,
      rgba(230,238,242,.15) 3%,
      transparent 11%
    ),
    linear-gradient(
      #101a31 0 45%,
      #283c42 45% 75%,
      #263327 75%
    );
}


.ambiente.tempo-madrugada
.ceu {
  background:
    radial-gradient(
      circle at 74% 25%,
      #edf3f4 0 10%,
      transparent 11%
    ),
    linear-gradient(
      #14213b,
      #263851
    );
}


/*
----------------------------------------------------------
MANHÃ
----------------------------------------------------------
*/

.ambiente.tempo-manha {
  background:
    linear-gradient(
      #83bdd5 0 45%,
      #add18d 45% 75%,
      #536c3d 75%
    );
}


/*
----------------------------------------------------------
TARDE
----------------------------------------------------------
*/

.ambiente.tempo-tarde {
  background:
    linear-gradient(
      #69a9c8 0 45%,
      #a7c97f 45% 75%,
      #4c6539 75%
    );
}


/*
----------------------------------------------------------
NOITE
----------------------------------------------------------
*/

.ambiente.tempo-noite {
  background:
    radial-gradient(
      circle at 72% 14%,
      #e6edf0 0 2.7%,
      rgba(230,238,242,.15) 3%,
      transparent 12%
    ),
    linear-gradient(
      #17233a 0 45%,
      #34474b 45% 75%,
      #28362a 75%
    );
}


.ambiente.tempo-noite
.ceu {
  background:
    radial-gradient(
      circle at 75% 24%,
      #e8eeee 0 10%,
      transparent 11%
    ),
    linear-gradient(
      #18253c,
      #31465b
    );
}


/*
----------------------------------------------------------
LÂMPADA DURANTE A NOITE
----------------------------------------------------------
*/

.ambiente.tempo-noite.artificial,
.ambiente.tempo-madrugada.artificial {

  background:
    radial-gradient(
      circle at 72% 15%,
      rgba(255,244,176,.42),
      transparent 25%
    ),
    linear-gradient(
      #1c2636 0 45%,
      #48584a 45% 75%,
      #2d392d 75%
    );

}


/*
Transição visual suave.
*/

.ambiente {
  transition:
    background .6s ease,
    filter .5s ease;
}


/* ==========================================================
   V0.6 — SELETOR DAS CINCO SEMENTES
   ========================================================== */

.seletor-sementes-v060 {

  position: fixed;

  inset: 0;

  z-index: 500;

  display: grid;

  place-items: center;

  padding: 18px;

  background:
    rgba(5,10,7,.86);

  backdrop-filter:
    blur(10px);

}


.seletor-sementes-v060.escondido {

  display: none;

}


.caixa-sementes-v060 {

  width:
    min(
      920px,
      100%
    );

  max-height:
    calc(100vh - 36px);

  overflow: auto;

  padding: 24px;

  border-radius: 24px;

  border:
    1px solid
    rgba(127,174,137,.27);

  background:
    linear-gradient(
      145deg,
      rgba(24,37,28,.98),
      rgba(12,21,16,.98)
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.55);

}


.titulo-sementes-v060 {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

}


.titulo-sementes-v060 span {

  font-size: 9px;

  letter-spacing: .18em;

  color: #82b58a;

}


.titulo-sementes-v060 h2 {

  margin: 4px 0 0;

  font-size: 25px;

}


.fechar-sementes-v060 {

  width: 38px;

  height: 38px;

  padding: 0;

  border-radius: 50%;

}


.introducao-sementes-v060 {

  max-width: 600px;

  margin:
    10px 0 22px;

  color: #9db3a1;

  font-size: 13px;

  line-height: 1.55;

}


.grade-sementes-v060 {

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 12px;

}


.cartao-semente-v060 {

  min-height: 235px;

  padding: 16px 12px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  background:
    rgba(20,31,23,.92);

}


.cartao-semente-v060:hover {

  background:
    rgba(34,52,39,.98);

  transform:
    translateY(-4px);

}


.cartao-semente-v060 strong {

  margin-top: 14px;

  font-size: 13px;

  letter-spacing: .08em;

}


.cartao-semente-v060 p {

  flex: 1;

  margin:
    7px 0 13px;

  color: #91a797;

  font-size: 11px;

  line-height: 1.45;

}


.cartao-semente-v060 > span {

  font-size: 10px;

  color: #b9d1be;

}


.visual-semente-v060 {

  width: 82px;

  height: 82px;

  display: grid;

  place-items: center;

  border-radius: 50%;

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

}


.casca-semente-v060 {

  width: 46px;

  height: 33px;

  border-radius:
    70% 38% 68% 42%;

  transform:
    rotate(-15deg);

  background:
    var(
      --cor-semente,
      #70935d
    );

  box-shadow:

    inset -7px -5px 10px
    rgba(0,0,0,.18),

    inset 5px 4px 8px
    rgba(255,255,255,.10),

    0 8px 16px
    rgba(0,0,0,.22);

}


.semente-verde {

  --cor-semente:
    #6e9b61;

}


.semente-vermelha {

  --cor-semente:
    #a9504d;

}


.semente-azul {

  --cor-semente:
    #557f9f;

}


.semente-marrom {

  --cor-semente:
    #806044;

}


.semente-amarela {

  --cor-semente:
    #c7a64e;

}


.rodape-sementes-v060 {

  margin-top: 18px;

  text-align: center;

  color: #718777;

  font-size: 10px;

}


/*
A própria semente no vaso recebe sua cor ancestral.
*/

.semente-v3.semente-verde {

  background:
    linear-gradient(
      145deg,
      #88ad72,
      #567c50
    );

}


.semente-v3.semente-vermelha {

  background:
    linear-gradient(
      145deg,
      #c46a60,
      #883f3e
    );

}


.semente-v3.semente-azul {

  background:
    linear-gradient(
      145deg,
      #7099b6,
      #456c89
    );

}


.semente-v3.semente-marrom {

  background:
    linear-gradient(
      145deg,
      #987353,
      #644831
    );

}


.semente-v3.semente-amarela {

  background:
    linear-gradient(
      145deg,
      #dac065,
      #a58a38
    );

}


@media (
  max-width: 800px
) {

  .grade-sementes-v060 {

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

  }

}


@media (
  max-width: 460px
) {

  .grade-sementes-v060 {

    grid-template-columns: 1fr;

  }


  .cartao-semente-v060 {

    min-height: 190px;

  }

}


/* ==========================================================
   V0.6.1 — SINAIS DO UNIVERSO
   ========================================================== */

.area-sinais-v061 {

  position: absolute;

  top: 28px;

  left: 50%;

  transform:
    translateX(-50%);

  z-index: 60;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  width: 220px;

  pointer-events: none;

}


.sinal-v061 {

  display: flex;

  align-items: center;

  gap: 7px;

  max-width: 210px;

  padding:
    7px 11px;

  border-radius:
    999px;

  font-size:
    10px;

  font-weight: 700;

  backdrop-filter:
    blur(8px);

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

  animation:
    sinalEntradaV061
    .25s ease;

  transition:
    opacity .3s,
    transform .3s;

}


.sinal-v061.saindo {

  opacity: 0;

  transform:
    translateY(-12px)
    scale(.95);

}


.sinal-icone-v061 {

  font-size: 14px;

}


.sinal-buff-v061 {

  background:
    rgba(28,58,34,.88);

  border:
    1px solid
    rgba(118,189,129,.38);

  color:
    #d7f1d9;

}


.sinal-alerta-v061 {

  background:
    rgba(81,55,26,.92);

  border:
    1px solid
    rgba(225,177,82,.42);

  color:
    #ffe2a5;

}


.sinal-evento-v061 {

  background:
    rgba(42,45,78,.94);

  border:
    1px solid
    rgba(157,163,232,.46);

  color:
    #e9ebff;

  box-shadow:
    0 7px 22px
    rgba(72,82,170,.25);

}


@keyframes sinalEntradaV061 {

  from {

    opacity: 0;

    transform:
      translateY(8px)
      scale(.92);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}


/* ==========================================================
   V0.7 — INVENTÁRIO
   ========================================================== */

.abrir-inventario-v070 {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px;

  text-align: left;

}


.abrir-inventario-v070 > span {

  font-size: 24px;

}


.abrir-inventario-v070 div {

  flex: 1;

}


.abrir-inventario-v070 strong {

  display: block;

}


.abrir-inventario-v070 small {

  display: block;

  margin-top: 3px;

  opacity: .65;

}


.abrir-inventario-v070 b {

  font-size: 23px;

}


/* ----------------------------------------------------------
   MODAL PRINCIPAL
   ---------------------------------------------------------- */

.inventario-modal-v070 {

  position: fixed;

  inset: 0;

  z-index: 700;

  display: grid;

  place-items: center;

  padding: 18px;

  background:
    rgba(4,9,6,.88);

  backdrop-filter:
    blur(10px);

}


.inventario-modal-v070.escondido {

  display: none;

}


.inventario-caixa-v070 {

  width:
    min(
      760px,
      100%
    );

  max-height:
    calc(100vh - 36px);

  overflow: auto;

  padding: 22px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(24,37,28,.99),
      rgba(11,19,14,.99)
    );

  border:
    1px solid
    rgba(126,174,137,.25);

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.55);

}


.inventario-topo-v070 {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

}


.inventario-topo-v070 h2 {

  margin: 3px 0 0;

}


.inventario-eyebrow-v070 {

  font-size: 8px;

  letter-spacing: .17em;

  color: #82b38a;

}


.inventario-topo-direita-v070 {

  display: flex;

  align-items: center;

  gap: 10px;

}


.inventario-moedas-v070 {

  padding:
    7px 11px;

  border-radius: 999px;

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

}


.fechar-inventario-v070,
.fechar-ficha-v070 {

  width: 37px;

  height: 37px;

  padding: 0;

  border-radius: 50%;

}


/* ----------------------------------------------------------
   ABAS
   ---------------------------------------------------------- */

.abas-inventario-v070 {

  display: flex;

  gap: 7px;

  margin:
    19px 0 17px;

  overflow-x: auto;

  padding-bottom: 3px;

}


.aba-inventario-v070 {

  flex: 0 0 auto;

  padding:
    8px 12px;

  border-radius: 999px;

  opacity: .65;

}


.aba-inventario-v070.ativa {

  opacity: 1;

  background:
    rgba(86,132,94,.35);

  border-color:
    rgba(125,186,136,.55);

}


/* ----------------------------------------------------------
   LISTA
   ---------------------------------------------------------- */

.lista-inventario-v070 {

  display: grid;

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

  gap: 9px;

}


.item-inventario-v070 {

  min-height: 69px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 11px;

  text-align: left;

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

}


.item-individual-v070 {

  border-color:
    rgba(142,151,227,.28);

  background:
    rgba(68,72,126,.11);

}


.item-icone-v070 {

  width: 42px;

  height: 42px;

  flex: 0 0 42px;

  display: grid;

  place-items: center;

  border-radius: 13px;

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

  font-size: 20px;

}


.item-info-v070 {

  flex: 1;

}


.item-info-v070 strong {

  display: block;

  font-size: 12px;

}


.item-info-v070 span {

  display: block;

  margin-top: 3px;

  font-size: 9px;

  opacity: .6;

}


.item-quantidade-v070 {

  font-size: 15px;

  font-weight: 700;

}


.item-id-v070 {

  font-size: 8px;

  opacity: .48;

}


/* ----------------------------------------------------------
   VAZIO
   ---------------------------------------------------------- */

.inventario-vazio-v070 {

  padding:
    50px 20px;

  text-align: center;

  opacity: .7;

}


.inventario-vazio-v070 > div {

  font-size: 34px;

  margin-bottom: 9px;

}


.inventario-vazio-v070 p {

  max-width: 300px;

  margin:
    7px auto 0;

  font-size: 11px;

  line-height: 1.5;

}


/* ----------------------------------------------------------
   FICHA DO ITEM
   ---------------------------------------------------------- */

.ficha-item-modal-v070 {

  position: fixed;

  inset: 0;

  z-index: 900;

  display: grid;

  place-items: center;

  padding: 18px;

  background:
    rgba(3,8,5,.82);

  backdrop-filter:
    blur(10px);

}


.ficha-item-caixa-v070 {

  position: relative;

  width:
    min(
      430px,
      100%
    );

  max-height:
    calc(100vh - 40px);

  overflow: auto;

  padding: 22px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #1c2b20,
      #101912
    );

  border:
    1px solid
    rgba(131,176,139,.25);

}


.fechar-ficha-v070 {

  position: absolute;

  top: 13px;

  right: 13px;

}


.ficha-item-cabecalho-v070 {

  display: flex;

  align-items: center;

  gap: 14px;

  padding-right: 42px;

}


.ficha-item-icone-v070 {

  width: 53px;

  height: 53px;

  flex: 0 0 53px;

  display: grid;

  place-items: center;

  border-radius: 16px;

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

  font-size: 26px;

}


.ficha-item-cabecalho-v070 h3 {

  margin: 0;

}


.ficha-item-cabecalho-v070 span {

  display: block;

  margin-top: 4px;

  font-size: 9px;

  opacity: .6;

}


.ficha-item-corpo-v070 {

  margin-top: 20px;

}


.ficha-secao-v070 {

  margin-top: 18px;

}


.ficha-secao-v070:first-child {

  margin-top: 0;

}


.ficha-secao-v070 h4 {

  margin:
    0 0 9px;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .1em;

  opacity: .65;

}


.ficha-linha-v070 {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding:
    8px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

}


.ficha-linha-v070 span {

  font-size: 10px;

  opacity: .6;

}


.ficha-linha-v070 strong {

  font-size: 10px;

  text-align: right;

}


.dna-ficha-grid-v070 {

  display: grid;

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

  gap: 8px;

}


.dna-ficha-grid-v070 > div {

  padding: 10px;

  border-radius: 12px;

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

}


.dna-ficha-grid-v070 span {

  display: block;

  font-size: 8px;

  opacity: .55;

}


.dna-ficha-grid-v070 strong {

  display: block;

  margin-top: 3px;

  font-size: 16px;

}


.texto-ficha-v070 {

  margin: 0;

  padding: 11px;

  border-radius: 12px;

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

  font-size: 10px;

  line-height: 1.55;

}


@media (
  max-width: 560px
) {

  .lista-inventario-v070 {

    grid-template-columns: 1fr;

  }


  .inventario-caixa-v070 {

    padding: 17px;

  }

}


/* ==========================================================
   V0.7.1 — COLHEITA INDIVIDUAL
   ========================================================== */

.qualidade-v071 {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 12px;

  border-radius: 13px;

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

}


.qualidade-v071 strong {

  font-size: 17px;

  letter-spacing: .08em;

}


.qualidade-v071 span {

  font-size: 10px;

  opacity: .7;

}


/* ==========================================================
   V0.7.2 — PILHAS INTELIGENTES
   ========================================================== */

.grupo-inventario-v072 {

  border-color:
    rgba(126,168,137,.25);

}


.grupo-quantidade-v072 {

  flex: 0 0 auto;

  min-width: 37px;

  padding:
    6px 8px;

  border-radius: 999px;

  text-align: center;

  font-size: 13px;

  font-weight: 800;

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

}


.grupo-modal-v072 {

  position: fixed;

  inset: 0;

  z-index: 950;

  display: grid;

  place-items: center;

  padding: 18px;

  background:
    rgba(3,8,5,.84);

  backdrop-filter:
    blur(11px);

}


.grupo-caixa-v072 {

  position: relative;

  width:
    min(
      470px,
      100%
    );

  max-height:
    calc(100vh - 40px);

  overflow: auto;

  padding: 22px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #1d2d21,
      #101a13
    );

  border:
    1px solid
    rgba(130,177,140,.27);

}


.fechar-grupo-v072 {

  position: absolute;

  top: 13px;

  right: 13px;

  width: 37px;

  height: 37px;

  padding: 0;

  border-radius: 50%;

}


.grupo-topo-v072 {

  display: flex;

  align-items: center;

  gap: 14px;

  padding-right: 42px;

}


.grupo-icone-v072 {

  width: 54px;

  height: 54px;

  flex: 0 0 54px;

  display: grid;

  place-items: center;

  border-radius: 16px;

  font-size: 27px;

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

}


.grupo-eyebrow-v072 {

  font-size: 8px;

  letter-spacing: .15em;

  opacity: .55;

}


.grupo-topo-v072 h3 {

  margin:
    3px 0 0;

}


.grupo-topo-v072 p {

  margin:
    5px 0 0;

  font-size: 10px;

  opacity: .65;

}


.grupo-acoes-v072 {

  margin-top: 18px;

}


.grupo-acoes-v072 button {

  width: 100%;

}


.lista-individuos-v072 {

  margin-top: 14px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}


.lista-individuos-v072.escondida {

  display: none;

}


.individuo-v072 {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 10px 12px;

  text-align: left;

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

}


.individuo-v072 strong {

  display: block;

  font-size: 10px;

}


.individuo-v072 span {

  display: block;

  margin-top: 3px;

  font-size: 8px;

  opacity: .55;

}


.individuo-v072 b {

  font-size: 18px;

  opacity: .6;

}


/* ==================================================================
   A PLANTINHA V0.8.1
   UNIVERSO VISUAL DO LABORATÓRIO
   ================================================================== */


/* ------------------------------------------------------------------
   INTERFACES ANTIGAS

   Continuam no DOM e funcionando por baixo.
   Apenas deixam de ocupar o espaço principal.
   ------------------------------------------------------------------ */

.painel-legado-v081,
.quarto-legado-v081 {
  display: none !important;
}


/* ------------------------------------------------------------------
   RAIZ
   ------------------------------------------------------------------ */

.universo-laboratorio-v081 {
  width: 100%;
  margin-top: clamp(12px, 2vw, 22px);
}


/* ------------------------------------------------------------------
   CENA BASE
   ------------------------------------------------------------------ */

.ambiente-mundo-v081 {
  position: relative;

  width: 100%;

  min-height:
    clamp(
      590px,
      72vh,
      780px
    );

  overflow: hidden;

  border-radius:
    clamp(
      18px,
      3vw,
      30px
    );

  border:
    1px solid
    rgba(147, 189, 168, .20);

  box-shadow:
    inset 0 0 70px rgba(0,0,0,.22),
    0 18px 50px rgba(0,0,0,.17);

  isolation: isolate;
}


/* ------------------------------------------------------------------
   PERÍODO DO DIA

   Mesma cápsula.
   Luz diferente.
   ------------------------------------------------------------------ */

.ambiente-mundo-v081.periodo-manha {
  --parede-1: #425d58;
  --parede-2: #263d3a;
  --luz-mundo: rgba(194,230,201,.20);
}


.ambiente-mundo-v081.periodo-tarde {
  --parede-1: #3c5751;
  --parede-2: #223733;
  --luz-mundo: rgba(202,220,174,.16);
}


.ambiente-mundo-v081.periodo-noite {
  --parede-1: #273b43;
  --parede-2: #17272e;
  --luz-mundo: rgba(113,154,183,.12);
}


.ambiente-mundo-v081.periodo-madrugada {
  --parede-1: #243640;
  --parede-2: #15242b;
  --luz-mundo: rgba(93,127,161,.11);
}


/* ------------------------------------------------------------------
   LABORATÓRIO
   ------------------------------------------------------------------ */

.laboratorio-v081 {
  background:
    radial-gradient(
      circle at 48% 5%,
      var(--luz-mundo),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--parede-1),
      var(--parede-2)
    );
}


.parede-lab-v081 {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0 32%,
      rgba(255,255,255,.025) 32% 32.3%,
      transparent 32.3% 68%,
      rgba(255,255,255,.025) 68% 68.3%,
      transparent 68.3%
    );

  pointer-events: none;
}


/* ------------------------------------------------------------------
   JANELA
   ------------------------------------------------------------------ */

.janela-lab-v081 {
  position: absolute;

  top:
    clamp(
      76px,
      11vh,
      110px
    );

  right:
    clamp(
      22px,
      6vw,
      74px
    );

  width:
    clamp(
      115px,
      18vw,
      205px
    );

  aspect-ratio: 1.55;

  padding: 8px;

  border-radius: 20px;

  background: #17262a;

  border:
    5px solid
    #64736b;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.07),
    0 10px 25px rgba(0,0,0,.22);
}


.ceu-lab-v081 {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  border-radius: 10px;

  font-size:
    clamp(
      20px,
      4vw,
      35px
    );

  background:
    linear-gradient(
      #83aec0,
      #a6c4ba
    );
}


.periodo-noite .ceu-lab-v081,
.periodo-madrugada .ceu-lab-v081 {
  background:
    linear-gradient(
      #172a46,
      #344d5d
    );
}


.janela-grade-v081 {
  position: absolute;
  inset: 8px;

  background:
    linear-gradient(
      90deg,
      transparent 48%,
      rgba(69,81,77,.8) 48% 52%,
      transparent 52%
    );

  pointer-events: none;
}


/* ------------------------------------------------------------------
   LUZ
   ------------------------------------------------------------------ */

.luz-teto-v081 {
  position: absolute;

  top: 18px;
  left: 50%;

  transform:
    translateX(-50%);

  width:
    clamp(
      130px,
      30vw,
      330px
    );

  height: 17px;

  display: grid;
  place-items: center;

  color:
    rgba(218,239,218,.8);

  border-radius: 999px;

  background:
    rgba(229,246,222,.18);

  box-shadow:
    0 12px 45px
    rgba(214,240,210,.12);
}


/* ------------------------------------------------------------------
   PLACAS
   ------------------------------------------------------------------ */

.placa-lab-v081,
.placa-estacao-v081 {
  position: absolute;

  top:
    clamp(
      24px,
      5vw,
      48px
    );

  left:
    clamp(
      20px,
      5vw,
      55px
    );

  z-index: 3;
}


.placa-lab-v081 span,
.placa-estacao-v081 span {
  display: block;

  font-size:
    clamp(
      7px,
      1vw,
      9px
    );

  letter-spacing: .18em;

  opacity: .55;
}


.placa-lab-v081 strong,
.placa-estacao-v081 strong {
  display: block;

  margin-top: 3px;

  font-size:
    clamp(
      18px,
      3.2vw,
      30px
    );
}


/* ------------------------------------------------------------------
   RELÓGIO
   ------------------------------------------------------------------ */

.relogio-mundo-v081 {
  position: absolute;

  top:
    clamp(
      26px,
      5vw,
      48px
    );

  right:
    clamp(
      20px,
      5vw,
      55px
    );

  text-align: right;

  z-index: 4;
}


.relogio-mundo-v081 strong,
.relogio-mundo-v081 span {
  display: block;
}


.relogio-mundo-v081 strong {
  font-size: 10px;
}


.relogio-mundo-v081 span {
  margin-top: 3px;

  font-size: 9px;

  opacity: .58;
}


/* ------------------------------------------------------------------
   CINCO MÓDULOS
   ------------------------------------------------------------------ */

.modulos-laboratorio-v081 {
  position: absolute;

  left:
    clamp(
      16px,
      4vw,
      52px
    );

  right:
    clamp(
      16px,
      4vw,
      52px
    );

  bottom:
    clamp(
      105px,
      16vh,
      145px
    );

  z-index: 3;

  display: grid;

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

  gap:
    clamp(
      7px,
      1.5vw,
      15px
    );
}


.modulo-cultivo-v081 {
  min-width: 0;

  min-height:
    clamp(
      145px,
      21vw,
      205px
    );

  padding:
    clamp(
      9px,
      1.5vw,
      14px
    );

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-radius:
    clamp(
      12px,
      2vw,
      19px
    );

  border:
    1px solid
    rgba(158,194,171,.16);

  background:
    linear-gradient(
      180deg,
      rgba(15,28,25,.62),
      rgba(10,19,17,.84)
    );

  box-shadow:
    inset 0 1px rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.13);

  color: inherit;
}


button.modulo-cultivo-v081 {
  cursor: pointer;
}


button.modulo-cultivo-v081:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(163,213,177,.34);
}


.numero-modulo-v081 {
  width: 100%;

  display: flex;

  justify-content: space-between;

  font-size:
    clamp(
      6px,
      .8vw,
      8px
    );

  letter-spacing: .11em;

  opacity: .48;
}


.icone-modulo-v081,
.icone-planta-modulo-v081 {
  margin:
    clamp(
      8px,
      1.7vw,
      15px
    )
    0
    6px;

  font-size:
    clamp(
      27px,
      4vw,
      42px
    );
}


.modulo-cultivo-v081 strong {
  font-size:
    clamp(
      9px,
      1.3vw,
      12px
    );
}


.modulo-cultivo-v081 > span {
  margin-top: 4px;

  font-size:
    clamp(
      7px,
      1vw,
      9px
    );

  opacity: .54;
}


.modulo-bloqueado-v081 {
  opacity: .36;
}


.luz-status-v081 {
  color: #77cf8a;

  font-size: 8px;
}


.mini-agua-v081 {
  width: 78%;

  height: 4px;

  margin-top: 9px;

  overflow: hidden;

  border-radius: 999px;

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


.mini-agua-v081 div {
  height: 100%;

  border-radius: inherit;

  background: #6aa9ca;
}


/* ------------------------------------------------------------------
   PORTA DA BANCADA
   ------------------------------------------------------------------ */

.porta-bancada-v081 {
  position: absolute;

  top:
    clamp(
      175px,
      28vh,
      250px
    );

  left:
    clamp(
      20px,
      5vw,
      55px
    );

  width:
    clamp(
      110px,
      16vw,
      155px
    );

  min-height: 95px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius:
    16px 16px 5px 5px;

  background:
    linear-gradient(
      145deg,
      #354b47,
      #223532
    );

  border:
    1px solid
    rgba(170,204,184,.19);
}


.porta-bancada-v081 > span {
  font-size: 25px;
}


.porta-bancada-v081 strong {
  margin-top: 5px;

  font-size: 10px;
}


.porta-bancada-v081 small {
  margin-top: 2px;

  font-size: 7px;

  opacity: .5;
}


/* ------------------------------------------------------------------
   PISO
   ------------------------------------------------------------------ */

.piso-lab-v081 {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height:
    clamp(
      70px,
      12vh,
      105px
    );

  z-index: 0;

  background:
    repeating-linear-gradient(
      90deg,
      #1a2725 0 65px,
      #1e2d2a 65px 67px
    );

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.dica-mundo-v081 {
  position: absolute;

  left: 50%;
  bottom: 30px;

  z-index: 4;

  transform:
    translateX(-50%);

  padding:
    7px 12px;

  border-radius: 999px;

  font-size: 8px;

  white-space: nowrap;

  background:
    rgba(8,15,13,.62);

  opacity: .7;
}


/* ==================================================================
   ESTAÇÃO DE CULTIVO
   ================================================================== */

.estacao-v081 {
  background:
    radial-gradient(
      circle at 50% 25%,
      var(--luz-mundo),
      transparent 37%
    ),
    linear-gradient(
      145deg,
      var(--parede-1),
      var(--parede-2)
    );
}


.voltar-ambiente-v081 {
  position: absolute;

  top: 18px;
  left: 18px;

  z-index: 15;

  min-height: 35px;

  padding: 7px 11px;

  border-radius: 999px;

  font-size: 9px;
}


.estacao-v081
.placa-estacao-v081 {
  top: 73px;
}


.nicho-cultivo-v081 {
  position: absolute;

  left: 50%;

  top:
    clamp(
      125px,
      18vh,
      170px
    );

  transform:
    translateX(-50%);

  width:
    clamp(
      260px,
      46vw,
      500px
    );

  height:
    clamp(
      315px,
      48vh,
      440px
    );

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  padding-bottom: 30px;

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

  background:
    linear-gradient(
      rgba(129,171,147,.06),
      rgba(8,18,15,.28)
    );

  border:
    1px solid
    rgba(172,211,184,.14);

  box-shadow:
    inset 0 0 45px rgba(0,0,0,.17);
}


.luz-nicho-v081 {
  position: absolute;

  top: 14px;

  width: 55%;

  height: 10px;

  border-radius: 999px;

  background:
    rgba(224,240,205,.36);

  box-shadow:
    0 17px 50px
    rgba(221,242,207,.16);
}


.status-flutuante-v081 {
  position: absolute;

  top: 38px;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 8px;

  letter-spacing: .1em;

  background:
    rgba(12,22,18,.52);
}


.planta-estacao-v081 {
  margin-bottom: -4px;

  font-size:
    clamp(
      65px,
      13vw,
      125px
    );

  transform-origin:
    bottom center;

  transition:
    transform .4s ease;
}


.planta-estacao-v081.estagio-semente {
  transform: scale(.28);
}


.planta-estacao-v081.estagio-germinacao {
  transform: scale(.48);
}


.planta-estacao-v081.estagio-broto {
  transform: scale(.7);
}


.planta-estacao-v081.estagio-jovem {
  transform: scale(.86);
}


.planta-estacao-v081.estagio-madura {
  transform: scale(1);
}


.vaso-estacao-v081 {
  width:
    clamp(
      120px,
      20vw,
      190px
    );

  height:
    clamp(
      85px,
      13vw,
      120px
    );

  position: relative;

  background:
    linear-gradient(
      145deg,
      #aa684b,
      #7a4534
    );

  clip-path:
    polygon(
      8% 0,
      92% 0,
      79% 100%,
      21% 100%
    );
}


.terra-estacao-v081 {
  position: absolute;

  top: 5px;
  left: 10%;
  right: 10%;

  height: 15px;

  border-radius: 50%;

  background: #463627;
}


/* ------------------------------------------------------------------
   CONSOLE DA ESTAÇÃO
   ------------------------------------------------------------------ */

.console-cultivo-v081 {
  position: absolute;

  right:
    clamp(
      18px,
      4vw,
      45px
    );

  bottom:
    clamp(
      80px,
      13vh,
      110px
    );

  width:
    clamp(
      190px,
      25vw,
      270px
    );

  z-index: 7;

  padding: 15px;

  border-radius: 18px;

  background:
    rgba(9,18,15,.78);

  border:
    1px solid
    rgba(152,198,166,.16);

  backdrop-filter:
    blur(7px);
}


.linha-agua-estacao-v081 {
  display: flex;

  justify-content: space-between;

  font-size: 9px;
}


.barra-estacao-v081 {
  height: 10px;

  margin-top: 6px;

  overflow: hidden;

  border-radius: 999px;

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


.barra-estacao-v081 > div {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #5195ba,
      #76b8d2
    );

  transition:
    width .08s linear;
}


.velocidade-estacao-v081 {
  margin-top: 13px;
}


.velocidade-estacao-v081 > span {
  display: block;

  margin-bottom: 6px;

  font-size: 8px;

  opacity: .6;
}


.velocidade-estacao-v081 > div {
  display: grid;

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

  gap: 5px;
}


.velocidade-estacao-v081 button {
  padding: 7px;

  font-size: 9px;
}


.velocidade-estacao-v081 button.ativa {
  background:
    rgba(91,145,102,.33);

  border-color:
    rgba(132,197,144,.52);
}


.botao-regar-estacao-v081 {
  width: 100%;

  min-height: 46px;

  margin-top: 9px;

  touch-action: none;

  user-select: none;

  font-size: 16px;
}


.botao-regar-estacao-v081 span {
  margin-left: 4px;

  font-size: 9px;
}


.indicadores-estacao-v081 {
  display: flex;

  justify-content: space-between;

  margin-top: 10px;

  font-size: 8px;

  opacity: .65;
}


/* ------------------------------------------------------------------
   PAINEL LATERAL
   ------------------------------------------------------------------ */

.painel-estacao-lateral-v081 {
  position: absolute;

  left:
    clamp(
      18px,
      4vw,
      45px
    );

  bottom:
    clamp(
      80px,
      13vh,
      110px
    );

  width:
    clamp(
      155px,
      20vw,
      215px
    );

  z-index: 7;

  display: grid;

  gap: 7px;

  padding: 13px;

  border-radius: 17px;

  background:
    rgba(9,18,15,.67);

  border:
    1px solid
    rgba(152,198,166,.13);
}


.painel-estacao-lateral-v081 div {
  display: flex;

  justify-content: space-between;

  gap: 8px;

  font-size: 8px;
}


.painel-estacao-lateral-v081 span {
  opacity: .55;
}


/* ==================================================================
   BANCADA
   ================================================================== */

.bancada-v081 {
  background:
    radial-gradient(
      circle at 68% 25%,
      rgba(215,224,190,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--parede-1),
      var(--parede-2)
    );
}


.bancada-v081
.placa-estacao-v081 {
  top: 73px;
}


/* ------------------------------------------------------------------
   ARMÁRIO
   ------------------------------------------------------------------ */

.armario-v081 {
  position: absolute;

  left:
    clamp(
      20px,
      5vw,
      65px
    );

  top:
    clamp(
      155px,
      22vh,
      195px
    );

  width:
    clamp(
      190px,
      29vw,
      290px
    );

  padding: 15px;

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

  background:
    linear-gradient(
      145deg,
      #354945,
      #233633
    );

  border:
    1px solid
    rgba(171,203,186,.17);

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


.topo-armario-v081 {
  display: flex;

  align-items: center;

  gap: 7px;

  margin-bottom: 11px;

  font-size: 11px;
}


.slots-armario-v081 {
  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 6px;
}


.slot-armario-v081 {
  aspect-ratio: 1;

  display: grid;

  place-items: center;

  border-radius: 8px;

  background:
    rgba(5,15,12,.32);

  border:
    1px solid
    rgba(190,218,198,.09);

  box-shadow:
    inset 0 4px 10px
    rgba(0,0,0,.16);
}


.slot-armario-v081 span {
  font-size: 13px;

  opacity: .14;
}


.abrir-armario-v081 {
  width: 100%;

  margin-top: 12px;

  padding: 9px;

  font-size: 9px;
}


/* ------------------------------------------------------------------
   BANCADA FÍSICA
   ------------------------------------------------------------------ */

.area-bancada-v081 {
  position: absolute;

  right:
    clamp(
      22px,
      6vw,
      75px
    );

  bottom:
    clamp(
      90px,
      14vh,
      125px
    );

  width:
    clamp(
      290px,
      48vw,
      570px
    );

  height:
    clamp(
      300px,
      44vh,
      405px
    );
}


.luz-bancada-v081 {
  width: 55%;

  height: 12px;

  margin: 0 auto;

  display: grid;

  place-items: center;

  border-radius: 999px;

  color:
    rgba(236,240,211,.65);

  background:
    rgba(235,240,210,.16);

  box-shadow:
    0 24px 60px
    rgba(229,235,202,.12);
}


.parede-ferramentas-v081 {
  width: 72%;

  height: 125px;

  margin:
    35px auto 0;

  display: grid;

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

  gap: 9px;

  padding: 12px;

  border-radius: 12px;

  background:
    rgba(8,18,15,.18);

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


.parede-ferramentas-v081 div {
  border-radius: 8px;

  border:
    1px dashed
    rgba(255,255,255,.07);
}


.tampo-bancada-v081 {
  height: 33px;

  margin-top: 20px;

  display: grid;

  place-items: center;

  border-radius: 5px;

  background:
    linear-gradient(
      #758078,
      #4e5d57
    );

  box-shadow:
    0 7px 15px
    rgba(0,0,0,.25);
}


.tampo-bancada-v081 span {
  font-size: 8px;

  opacity: .4;
}


.gavetas-bancada-v081 {
  width: 88%;

  height: 85px;

  margin: auto;

  display: grid;

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

  background: #273936;
}


.gavetas-bancada-v081 div {
  border:
    1px solid
    rgba(255,255,255,.05);
}


.legenda-bancada-v081 {
  position: absolute;

  right:
    clamp(
      20px,
      6vw,
      75px
    );

  bottom: 35px;

  z-index: 5;

  font-size: 8px;

  opacity: .45;
}


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

@media (max-width: 800px) {

  .ambiente-mundo-v081 {
    min-height: 720px;
  }


  .modulos-laboratorio-v081 {
    grid-template-columns:
      repeat(3,1fr);

    bottom: 105px;
  }


  .modulo-cultivo-v081 {
    min-height: 125px;
  }


  .janela-lab-v081 {
    top: 110px;
  }


  .porta-bancada-v081 {
    top: 120px;
  }


  .nicho-cultivo-v081 {
    top: 145px;

    width:
      min(
        82vw,
        430px
      );

    height: 350px;
  }


  .painel-estacao-lateral-v081 {
    left: 15px;

    bottom: 20px;

    width:
      calc(
        50% - 22px
      );
  }


  .console-cultivo-v081 {
    right: 15px;

    bottom: 20px;

    width:
      calc(
        50% - 22px
      );
  }


  .armario-v081 {
    top: 145px;

    left: 18px;

    width:
      min(
        35vw,
        240px
      );
  }


  .area-bancada-v081 {
    right: 18px;

    width:
      56vw;
  }

}


@media (max-width: 520px) {

  .ambiente-mundo-v081 {
    min-height: 780px;

    border-radius: 18px;
  }


  .placa-lab-v081 {
    top: 62px;
  }


  .relogio-mundo-v081 {
    top: 63px;
  }


  .janela-lab-v081 {
    top: 125px;

    right: 16px;

    width: 105px;
  }


  .porta-bancada-v081 {
    top: 128px;

    left: 15px;

    width: 105px;

    min-height: 86px;
  }


  .modulos-laboratorio-v081 {
    left: 12px;
    right: 12px;

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

    bottom: 90px;

    gap: 7px;
  }


  .modulo-cultivo-v081 {
    min-height: 120px;
  }


  .dica-mundo-v081 {
    display: none;
  }


  /* --------------------------------------------------------------
     ESTAÇÃO MOBILE
     -------------------------------------------------------------- */

  .estacao-v081 {
    min-height: 850px;
  }


  .estacao-v081
  .placa-estacao-v081 {
    top: 65px;
  }


  .nicho-cultivo-v081 {
    top: 125px;

    width:
      calc(
        100% - 26px
      );

    height: 380px;
  }


  .painel-estacao-lateral-v081 {
    left: 13px;

    right: 13px;

    bottom: 205px;

    width: auto;
  }


  .console-cultivo-v081 {
    left: 13px;

    right: 13px;

    bottom: 18px;

    width: auto;
  }


  /* --------------------------------------------------------------
     BANCADA MOBILE
     -------------------------------------------------------------- */

  .bancada-v081 {
    min-height: 900px;
  }


  .armario-v081 {
    top: 135px;

    left: 14px;
    right: 14px;

    width: auto;
  }


  .area-bancada-v081 {
    left: 14px;
    right: 14px;

    top: 430px;

    width: auto;

    height: 360px;
  }


  .legenda-bancada-v081 {
    left: 14px;
    right: 14px;

    bottom: 25px;

    text-align: center;
  }

}


/* ==================================================================
   V0.8.2 — ENCAIXE DE INTERFACES
   ================================================================== */

.universo-laboratorio-v081 {
  position: relative;
}


/* ------------------------------------------------------------------
   OVERLAY PRESO AO UNIVERSO
   ------------------------------------------------------------------ */

.overlay-interno-v082 {
  position: absolute;

  inset: 0;

  z-index: 100;

  display: grid;

  place-items: center;

  padding:
    clamp(
      12px,
      3vw,
      28px
    );

  border-radius:
    inherit;

  overflow: hidden;

  background:
    rgba(5,12,10,.75);

  backdrop-filter:
    blur(7px);
}


/* ------------------------------------------------------------------
   JANELA CONTEXTUAL
   ------------------------------------------------------------------ */

.janela-contextual-v082 {
  position: relative;

  width:
    min(
      620px,
      100%
    );

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

  overflow: auto;

  padding:
    clamp(
      17px,
      3vw,
      26px
    );

  border-radius:
    clamp(
      17px,
      3vw,
      24px
    );

  background:
    linear-gradient(
      145deg,
      rgba(31,49,43,.98),
      rgba(15,27,23,.99)
    );

  border:
    1px solid
    rgba(155,205,174,.22);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.32);
}


.fechar-contextual-v082 {
  position: absolute;

  top: 12px;
  right: 12px;

  width: 36px;
  height: 36px;

  padding: 0;

  border-radius: 50%;
}


.titulo-contextual-v082 {
  padding-right: 45px;
}


.titulo-contextual-v082 span {
  display: block;

  font-size: 8px;

  letter-spacing: .14em;

  opacity: .52;
}


.titulo-contextual-v082 strong {
  display: block;

  margin-top: 4px;

  font-size:
    clamp(
      18px,
      4vw,
      27px
    );
}


/* ------------------------------------------------------------------
   ETAPAS DO CULTIVO
   ------------------------------------------------------------------ */

.etapa-contextual-v082 {
  margin-top: 20px;
}


.etapa-contextual-v082 h3 {
  margin: 0 0 9px;

  font-size: 10px;

  font-weight: 600;
}


.grid-contextual-v082 {
  display: grid;

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

  gap: 7px;
}


.opcao-contextual-v082 {
  min-height: 62px;

  display: grid;

  grid-template-columns:
    auto 1fr auto;

  align-items: center;

  gap: 9px;

  padding: 10px;

  text-align: left;

  border-radius: 13px;

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

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


.opcao-contextual-v082.selecionada {
  background:
    rgba(82,139,95,.27);

  border-color:
    rgba(135,204,149,.47);
}


.icone-opcao-v082 {
  font-size: 20px;
}


.opcao-contextual-v082 strong {
  font-size: 9px;
}


.opcao-contextual-v082 small {
  font-size: 7px;

  opacity: .5;
}


.vazio-contextual-v082 {
  grid-column: 1 / -1;

  padding: 18px;

  text-align: center;

  font-size: 9px;

  opacity: .48;
}


.resumo-contextual-v082 {
  margin-top: 20px;

  padding: 11px;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border-radius: 12px;

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

  font-size: 8px;
}


.resumo-contextual-v082 b {
  opacity: .3;
}


.play-contextual-v082 {
  width: 100%;

  min-height: 46px;

  margin-top: 10px;

  font-size: 10px;

  font-weight: 700;
}


.play-contextual-v082:disabled {
  opacity: .3;
}


/* ==================================================================
   INVENTÁRIO DO LABORATÓRIO
   ================================================================== */

.inventario-lab-v082 {
  width:
    min(
      700px,
      100%
    );
}


.abas-inventario-lab-v082 {
  display: grid;

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

  gap: 5px;

  margin-top: 20px;
}


.abas-inventario-lab-v082 button {
  min-width: 0;

  padding:
    8px 5px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

  font-size: 13px;
}


.abas-inventario-lab-v082 button span {
  font-size: 7px;

  opacity: .55;
}


.abas-inventario-lab-v082 button.ativa {
  background:
    rgba(83,139,96,.28);

  border-color:
    rgba(137,203,148,.43);
}


.conteudo-inventario-lab-v082 {
  min-height: 230px;

  margin-top: 11px;

  padding: 10px;

  border-radius: 13px;

  background:
    rgba(4,12,9,.22);
}


.lista-inventario-lab-v082 {
  display: grid;

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

  gap: 7px;
}


.item-inventario-lab-v082 {
  min-width: 0;

  min-height: 56px;

  padding: 9px;

  display: flex;

  align-items: center;

  gap: 10px;

  border-radius: 11px;

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

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


.icone-item-lab-v082 {
  flex: 0 0 auto;

  font-size: 22px;
}


.item-inventario-lab-v082 strong {
  display: block;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 9px;
}


.item-inventario-lab-v082 small {
  display: block;

  margin-top: 3px;

  font-size: 7px;

  opacity: .47;
}


.inventario-lab-vazio-v082 {
  min-height: 205px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;
}


.inventario-lab-vazio-v082 > span {
  font-size: 28px;

  opacity: .6;
}


.inventario-lab-vazio-v082 strong {
  margin-top: 7px;

  font-size: 10px;
}


.inventario-lab-vazio-v082 small {
  margin-top: 4px;

  font-size: 8px;

  opacity: .44;
}


/* ------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------ */

@media (max-width: 540px) {

  .overlay-interno-v082 {
    padding: 8px;
  }


  .janela-contextual-v082 {
    max-height:
      calc(
        100% - 2px
      );

    padding: 17px 13px;
  }


  .grid-contextual-v082 {
    grid-template-columns: 1fr;
  }


  .abas-inventario-lab-v082 {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }


  .lista-inventario-lab-v082 {
    grid-template-columns: 1fr;
  }

}


/* ==================================================================
   V0.8.3 — PLANTA PROCEDURAL POR VASO
   ================================================================== */

.planta-procedural-v083 {
  --cor-planta-v083: #70bd76;
  --escala-v083: 1;
  --opacidade-v083: 1;
  --inclinacao-v083: 0deg;

  position: relative;

  width: 110px;
  height: 150px;

  margin: auto;

  transform:
    scale(
      var(--escala-v083)
    )
    rotate(
      var(--inclinacao-v083)
    );

  transform-origin:
    center bottom;

  opacity:
    var(--opacidade-v083);

  transition:
    transform .4s ease,
    opacity .4s ease;
}


.semente-procedural-v083 {
  position: absolute;

  width: 25px;
  height: 17px;

  left: 50%;
  bottom: 8px;

  transform:
    translateX(-50%)
    rotate(-12deg);

  border-radius:
    70% 40% 65% 45%;

  background:
    var(--cor-planta-v083);

  box-shadow:
    inset -4px -3px 0
    rgba(0,0,0,.17);
}


.caule-v083 {
  position: absolute;

  width: 7px;
  height: 105px;

  bottom: 0;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 8px;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.18),
      var(--cor-planta-v083),
      rgba(255,255,255,.12)
    );
}


.germinacao
.caule-v083 {
  height: 42px;
}


.folha-v083 {
  position: absolute;

  width: 36px;
  height: 20px;

  background:
    var(--cor-planta-v083);

  border-radius:
    90% 15% 90% 15%;

  box-shadow:
    inset -3px -2px 0
    rgba(0,0,0,.12);
}


.folha-a-v083 {
  left: 53%;
  bottom: 30px;

  transform:
    rotate(-24deg);
}


.folha-dinamica-v083 {
  bottom:
    calc(
      23px
      +
      var(--indice-folha)
      *
      12px
    );

  left:
    calc(
      50%
      -
      2px
    );

  transform-origin:
    left center;
}


.folha-v083-0,
.folha-v083-2,
.folha-v083-4,
.folha-v083-6,
.folha-v083-8 {
  transform:
    rotate(-28deg);
}


.folha-v083-1,
.folha-v083-3,
.folha-v083-5,
.folha-v083-7 {
  margin-left: -32px;

  transform:
    scaleX(-1)
    rotate(-28deg);
}


.fruto-procedural-v083 {
  position: absolute;

  right: 18px;
  top: 35px;

  width: 15px;
  height: 15px;

  display: grid;
  place-items: center;

  color: #d88c72;

  font-size: 23px;

  filter:
    drop-shadow(
      0 3px 4px
      rgba(0,0,0,.25)
    );

  animation:
    frutoV083 2.2s
    ease-in-out
    infinite;
}


@keyframes frutoV083 {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-3px);
  }

}


/* ------------------------------------------------------------------
   INFORMAÇÕES DA ESTAÇÃO
   ------------------------------------------------------------------ */

#estadoEstacaoV083 {
  width:
    min(
      500px,
      calc(100% - 20px)
    );

  margin:
    12px auto 0;
}


.estado-estacao-v083 {
  display: grid;

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

  gap: 6px;
}


.estado-estacao-v083 > div {
  min-width: 0;

  padding: 8px 9px;

  border-radius: 10px;

  background:
    rgba(4,12,9,.27);

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


.estado-estacao-v083 span {
  display: block;

  font-size: 6px;

  text-transform: uppercase;

  letter-spacing: .08em;

  opacity: .42;
}


.estado-estacao-v083 strong {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 8px;
}


/* ------------------------------------------------------------------
   ALERTAS / BUFFS
   ------------------------------------------------------------------ */

.alertas-estacao-v083 {
  position: absolute;

  top: 12px;
  left: 50%;

  z-index: 20;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 5px;

  width:
    min(
      90%,
      500px
    );

  transform:
    translateX(-50%);

  pointer-events: none;
}


.alerta-estacao-v083 {
  padding:
    5px 8px;

  border-radius: 999px;

  font-size: 7px;

  white-space: nowrap;

  background:
    rgba(17,28,23,.88);

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

  box-shadow:
    0 4px 12px
    rgba(0,0,0,.17);

  backdrop-filter:
    blur(5px);
}


.alerta-colheita {
  border-color:
    rgba(210,175,103,.38);
}


.alerta-dna {
  border-color:
    rgba(113,174,196,.42);
}


.alerta-agua {
  border-color:
    rgba(96,160,194,.4);
}


.alerta-saude {
  border-color:
    rgba(194,101,101,.38);
}


/* ------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------ */

@media (
  max-width: 540px
) {

  .planta-procedural-v083 {
    width: 88px;
    height: 125px;
  }


  .caule-v083 {
    height: 88px;
  }


  .estado-estacao-v083 {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


/* ==================================================================
   A PLANTINHA — V0.8.4
   ESTAÇÃO VIVA / RESPONSIVA
   ================================================================== */


/* ------------------------------------------------------------------
   CENA
   ------------------------------------------------------------------ */

.estacao-v081.estacao-v084 {
  --v084-gap:
    clamp(12px, 2vw, 22px);

  min-height:
    clamp(650px, 78vh, 820px);

  height: auto;

  padding:
    clamp(14px, 2.5vw, 26px);

  padding-bottom:
    clamp(35px, 5vw, 55px);

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 18%,
      var(--luz-mundo),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      var(--parede-1),
      var(--parede-2)
    );
}


/* ------------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------------ */

.cabecalho-estacao-v084 {
  position: relative;

  z-index: 20;

  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(120px,1fr)
    auto
    minmax(120px,1fr);

  align-items: center;

  gap: 12px;

  min-height: 54px;
}


.voltar-estacao-v084 {
  justify-self: start;

  min-height: 40px;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 8px 12px;

  border-radius: 999px;

  font-size:
    clamp(11px, 1.2vw, 13px);
}


.titulo-estacao-v084 {
  text-align: center;
}


.titulo-estacao-v084 > span {
  display: block;

  font-size:
    clamp(9px, 1vw, 11px);

  letter-spacing: .13em;

  opacity: .48;
}


.titulo-estacao-v084 > strong {
  display: block;

  margin-top: 2px;

  font-size:
    clamp(17px, 2.2vw, 24px);
}


.tempo-estacao-v084 {
  justify-self: end;

  display: flex;

  align-items: center;

  gap: 8px;

  text-align: right;
}


.tempo-estacao-v084 > span {
  font-size:
    clamp(20px, 2.5vw, 28px);
}


.tempo-estacao-v084 strong {
  display: block;

  font-size:
    clamp(11px, 1.2vw, 13px);
}


.tempo-estacao-v084 small {
  display: block;

  margin-top: 1px;

  font-size:
    clamp(9px, 1vw, 11px);

  opacity: .52;
}


/* ------------------------------------------------------------------
   ALERTAS
   ------------------------------------------------------------------ */

.alertas-estacao-v084 {
  position: relative;

  top: auto;
  left: auto;

  z-index: 15;

  width: 100%;

  min-height: 30px;

  margin-top: 7px;

  transform: none;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 6px;

  pointer-events: none;
}


.chip-alerta-v084 {
  display: inline-flex;

  align-items: center;

  min-height: 27px;

  padding: 5px 9px;

  border-radius: 999px;

  white-space: nowrap;

  font-size:
    clamp(10px, 1vw, 11px);

  line-height: 1;

  background:
    rgba(10,20,17,.74);

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

  box-shadow:
    0 3px 10px
    rgba(0,0,0,.13);
}


.chip-agua {
  border-color:
    rgba(91,164,200,.4);
}


.chip-excesso {
  border-color:
    rgba(81,139,185,.45);
}


.chip-saude {
  border-color:
    rgba(196,103,103,.42);
}


.chip-colheita {
  border-color:
    rgba(216,180,101,.43);
}


.chip-dna {
  border-color:
    rgba(115,183,205,.45);
}


/* ------------------------------------------------------------------
   CORPO
   ------------------------------------------------------------------ */

.corpo-estacao-v084 {
  position: relative;

  z-index: 5;

  width: 100%;

  flex: 1;

  min-height: 0;

  margin-top: 8px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, .65fr);

  gap:
    var(--v084-gap);

  align-items: stretch;
}


/* ------------------------------------------------------------------
   CENA DA PLANTA
   ------------------------------------------------------------------ */

.cena-planta-v084 {
  position: relative;

  min-width: 0;

  min-height: 500px;

  display: flex;

  flex-direction: column;

  align-items: center;

  overflow: hidden;

  border-radius:
    clamp(20px, 3vw, 34px);

  border:
    1px solid
    rgba(163,204,177,.13);

  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(190,220,184,.10),
      transparent 35%
    ),
    linear-gradient(
      rgba(78,117,96,.08),
      rgba(4,12,9,.18)
    );

  box-shadow:
    inset 0 0 50px
    rgba(0,0,0,.14);
}


.luz-cultivo-v084 {
  width:
    min(46%, 240px);

  height: 9px;

  margin-top: 17px;

  flex: 0 0 auto;

  border-radius: 999px;

  background:
    rgba(225,240,209,.3);

  box-shadow:
    0 18px 50px
    rgba(220,240,205,.14);
}


.estagio-planta-v084 {
  margin-top: 12px;

  padding: 5px 9px;

  border-radius: 999px;

  font-size:
    clamp(9px, 1vw, 11px);

  letter-spacing: .08em;

  background:
    rgba(5,15,11,.33);
}


.identidade-planta-v084 {
  margin-top: 7px;

  text-align: center;
}


.identidade-planta-v084 strong {
  display: block;

  font-size:
    clamp(14px, 1.8vw, 19px);
}


.identidade-planta-v084 span {
  display: block;

  margin-top: 2px;

  font-size:
    clamp(10px, 1vw, 11px);

  opacity: .46;
}


/* ------------------------------------------------------------------
   PALCO
   ------------------------------------------------------------------ */

.planta-palco-v084 {
  flex: 1;

  width: 100%;

  min-height: 280px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: center;

  padding:
    20px 12px 15px;
}


.planta-v084 {
  position: relative;

  margin: 0;

  width: auto;

  min-height: 150px;

  display: flex;

  justify-content: center;

  align-items: flex-end;

  font-size: inherit;

  transform: none !important;
}


.planta-v084
.planta-procedural-v083 {
  margin: 0 auto;

  transform:
    scale(
      clamp(
        .9,
        var(--escala-v083),
        1.35
      )
    )
    rotate(
      var(--inclinacao-v083)
    );
}


.vaso-estacao-v084 {
  position: relative;

  width:
    clamp(125px, 18vw, 185px);

  height:
    clamp(82px, 10vw, 112px);

  margin-top: -4px;

  flex: 0 0 auto;

  clip-path:
    polygon(
      7% 0,
      93% 0,
      80% 100%,
      20% 100%
    );

  background:
    linear-gradient(
      145deg,
      #a76347,
      #70402f
    );

  box-shadow:
    inset 0 -15px
    rgba(0,0,0,.10);
}


.terra-estacao-v084 {
  position: absolute;

  top: 5px;
  left: 9%;
  right: 9%;

  height: 16px;

  border-radius: 50%;

  background: #4b3627;

  transition:
    background .25s ease;
}


.terra-estacao-v084.terra-seca {
  background: #846344;
}


.terra-estacao-v084.terra-excesso {
  background: #302a27;
}


.rodape-cena-v084 {
  width: 100%;

  min-height: 42px;

  padding:
    9px 14px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  font-size:
    clamp(10px, 1.1vw, 12px);

  background:
    rgba(4,12,9,.16);

  border-top:
    1px solid
    rgba(255,255,255,.04);
}


/* ------------------------------------------------------------------
   CONTROLES
   ------------------------------------------------------------------ */

.controles-estacao-v084 {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 10px;
}


/* ------------------------------------------------------------------
   MÉTRICAS
   ------------------------------------------------------------------ */

.metricas-estacao-v084 {
  display: grid;

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

  gap: 7px;
}


.metrica-v084 {
  min-width: 0;

  padding:
    10px 11px;

  border-radius: 13px;

  background:
    rgba(6,15,12,.48);

  border:
    1px solid
    rgba(151,193,163,.09);
}


.metrica-v084 span {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size:
    clamp(9px, 1vw, 11px);

  opacity: .53;
}


.metrica-v084 strong {
  display: block;

  margin-top: 3px;

  font-size:
    clamp(16px, 2vw, 21px);
}


/* ------------------------------------------------------------------
   BLOCOS
   ------------------------------------------------------------------ */

.controle-bloco-v084 {
  padding:
    clamp(11px, 1.5vw, 15px);

  border-radius: 15px;

  background:
    rgba(6,15,12,.46);

  border:
    1px solid
    rgba(151,193,163,.09);
}


.controle-titulo-v084 {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 9px;
}


.controle-titulo-v084 strong {
  display: block;

  font-size:
    clamp(11px, 1.2vw, 13px);
}


.controle-titulo-v084 span {
  display: block;

  margin-top: 2px;

  font-size:
    clamp(9px, 1vw, 11px);

  opacity: .48;
}


.controle-titulo-v084 > small {
  max-width: 48%;

  text-align: right;

  font-size:
    clamp(9px, 1vw, 10px);

  line-height: 1.3;

  opacity: .42;
}


/* ------------------------------------------------------------------
   ÁGUA
   ------------------------------------------------------------------ */

.barra-agua-v084 {
  width: 100%;

  height: 11px;

  margin-top: 10px;

  overflow: hidden;

  border-radius: 999px;

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


.preenchimento-agua-v084 {
  height: 100%;

  border-radius: inherit;

  transition:
    width .08s linear,
    background .2s ease;
}


.preenchimento-agua-v084.agua-boa {
  background:
    linear-gradient(
      90deg,
      #5193b7,
      #73b6d1
    );
}


.preenchimento-agua-v084.agua-seca {
  background:
    linear-gradient(
      90deg,
      #a27b53,
      #c19a68
    );
}


.preenchimento-agua-v084.agua-excesso {
  background:
    linear-gradient(
      90deg,
      #426f99,
      #5aa0c1
    );
}


.regar-v084 {
  width: 100%;

  min-height: 52px;

  margin-top: 10px;

  padding: 9px 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  touch-action: none;

  user-select: none;
}


.regar-v084 .gota-v084 {
  font-size: 22px;
}


.regar-v084 strong,
.regar-v084 small {
  display: block;

  text-align: left;
}


.regar-v084 strong {
  font-size:
    clamp(11px, 1.2vw, 13px);
}


.regar-v084 small {
  margin-top: 2px;

  font-size:
    clamp(9px, 1vw, 10px);

  opacity: .45;
}


/* ------------------------------------------------------------------
   VELOCIDADE
   ------------------------------------------------------------------ */

.velocidades-v084 {
  display: grid;

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

  gap: 6px;

  margin-top: 10px;
}


.velocidades-v084 button {
  min-width: 0;

  min-height: 48px;

  padding: 7px 5px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 1px;

  border-radius: 11px;
}


.velocidades-v084 button strong {
  font-size:
    clamp(13px, 1.5vw, 16px);
}


.velocidades-v084 button small {
  max-width: 100%;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size:
    clamp(8px, .9vw, 10px);

  opacity: .43;
}


.velocidades-v084 button.ativa {
  background:
    rgba(83,142,95,.31);

  border-color:
    rgba(132,200,145,.48);

  box-shadow:
    inset 0 0 0 1px
    rgba(126,193,140,.06);
}


/* ------------------------------------------------------------------
   AVANÇAR PERÍODO
   ------------------------------------------------------------------ */

.avancar-periodo-v084 {
  width: 100%;

  min-height: 51px;

  padding: 8px 12px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 9px;

  font-size: 20px;
}


.avancar-periodo-v084 strong,
.avancar-periodo-v084 small {
  display: block;

  text-align: left;
}


.avancar-periodo-v084 strong {
  font-size:
    clamp(11px, 1.2vw, 13px);
}


.avancar-periodo-v084 small {
  margin-top: 2px;

  font-size:
    clamp(9px, 1vw, 10px);

  opacity: .45;
}


/* ------------------------------------------------------------------
   DETALHES
   ------------------------------------------------------------------ */

.estado-completo-v084 {
  width: 100%;
}


.detalhes-planta-v084 {
  width: 100%;

  border-radius: 13px;

  background:
    rgba(6,15,12,.34);

  border:
    1px solid
    rgba(151,193,163,.08);
}


.detalhes-planta-v084 summary {
  padding:
    10px 12px;

  cursor: pointer;

  font-size:
    clamp(10px, 1.1vw, 12px);

  user-select: none;
}


.detalhes-grid-v084 {
  padding:
    0 10px 10px;

  display: grid;

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

  gap: 6px;
}


.detalhes-grid-v084 > div {
  min-width: 0;

  padding: 7px;

  border-radius: 8px;

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


.detalhes-grid-v084 span {
  display: block;

  font-size:
    clamp(8px, .9vw, 10px);

  opacity: .42;
}


.detalhes-grid-v084 strong {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size:
    clamp(10px, 1vw, 11px);
}


/* ------------------------------------------------------------------
   SAÚDE VISUAL
   ------------------------------------------------------------------ */

.estacao-v084.saude-critica
.cena-planta-v084 {
  box-shadow:
    inset 0 0 55px
    rgba(120,48,48,.15);
}


.estacao-v084.saude-critica
.planta-v084 {
  filter:
    saturate(.58)
    brightness(.83);
}


.estacao-v084.saude-fragil
.planta-v084 {
  filter:
    saturate(.78)
    brightness(.92);
}


/* ------------------------------------------------------------------
   PISO
   ------------------------------------------------------------------ */

.piso-estacao-v084 {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 38px;

  z-index: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(17,29,26,.85) 0 64px,
      rgba(23,37,33,.85) 64px 66px
    );

  border-top:
    1px solid
    rgba(255,255,255,.04);
}


/* ==================================================================
   TABLET
   ================================================================== */

@media (max-width: 880px) {

  .estacao-v081.estacao-v084 {
    min-height: 720px;
  }


  .corpo-estacao-v084 {
    grid-template-columns:
      minmax(0,1fr)
      minmax(250px,.78fr);
  }


  .cena-planta-v084 {
    min-height: 470px;
  }


  .rodape-cena-v084 {
    flex-direction: column;

    gap: 2px;
  }

}


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

@media (max-width: 620px) {

  .estacao-v081.estacao-v084 {
    min-height: 0;

    height: auto;

    overflow: visible;

    padding:
      12px 11px 45px;
  }


  .cabecalho-estacao-v084 {
    grid-template-columns:
      40px
      1fr
      auto;

    gap: 7px;
  }


  .voltar-estacao-v084 {
    width: 40px;
    height: 40px;

    min-height: 40px;

    justify-content: center;

    padding: 0;
  }


  .voltar-estacao-v084 span {
    display: none;
  }


  .titulo-estacao-v084 {
    text-align: left;
  }


  .titulo-estacao-v084 > span {
    font-size: 9px;
  }


  .titulo-estacao-v084 > strong {
    font-size: 17px;
  }


  .tempo-estacao-v084 {
    gap: 5px;
  }


  .tempo-estacao-v084 > span {
    font-size: 20px;
  }


  .tempo-estacao-v084 strong {
    font-size: 10px;
  }


  .tempo-estacao-v084 small {
    font-size: 9px;
  }


  .alertas-estacao-v084 {
    justify-content: flex-start;

    flex-wrap: nowrap;

    overflow-x: auto;

    min-height: 34px;

    padding-bottom: 3px;

    scrollbar-width: none;
  }


  .alertas-estacao-v084::-webkit-scrollbar {
    display: none;
  }


  .chip-alerta-v084 {
    flex: 0 0 auto;

    font-size: 10px;
  }


  /*
  --------------------------------------------------------------
  Regra principal:
  no celular NÃO EXISTEM cards absolutos.
  --------------------------------------------------------------
  */

  .corpo-estacao-v084 {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 5px;
  }


  .cena-planta-v084 {
    width: 100%;

    min-height: 390px;

    border-radius: 22px;
  }


  .planta-palco-v084 {
    min-height: 230px;

    padding-top: 12px;
  }


  .planta-v084 {
    min-height: 125px;
  }


  .planta-v084
  .planta-procedural-v083 {
    width: 88px;

    height: 125px;
  }


  .vaso-estacao-v084 {
    width: 130px;

    height: 85px;
  }


  .rodape-cena-v084 {
    min-height: 48px;

    flex-direction: row;

    font-size: 10px;
  }


  .controles-estacao-v084 {
    width: 100%;

    gap: 8px;
  }


  .metricas-estacao-v084 {
    grid-template-columns:
      repeat(4,minmax(0,1fr));

    gap: 5px;
  }


  .metrica-v084 {
    padding:
      8px 5px;

    text-align: center;
  }


  .metrica-v084 span {
    font-size: 9px;
  }


  .metrica-v084 strong {
    font-size: 15px;
  }


  .controle-bloco-v084 {
    padding: 11px;
  }


  .controle-titulo-v084 > small {
    max-width: 46%;

    font-size: 9px;
  }


  .velocidades-v084 button {
    min-height: 48px;
  }


  .detalhes-grid-v084 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* ==================================================================
   CELULARES MUITO ESTREITOS
   ================================================================== */

@media (max-width: 390px) {

  .titulo-estacao-v084 > span {
    display: none;
  }


  .tempo-estacao-v084 small {
    display: none;
  }


  .metricas-estacao-v084 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .metrica-v084 {
    text-align: left;

    padding: 8px 9px;
  }


  .controle-titulo-v084 {
    display: block;
  }


  .controle-titulo-v084 > small {
    display: block;

    max-width: none;

    margin-top: 3px;

    text-align: left;
  }


  .cena-planta-v084 {
    min-height: 375px;
  }

}


/*
==========================================================
V0.8.6 — ARMAZENAMENTO
==========================================================
*/

.storage-v086 {
  width: min(860px, 94%);
  max-height: 88%;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(18, 25, 31, .98),
      rgba(10, 15, 19, .98)
    );

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

  border-radius: 20px;

  padding: 18px;

  box-shadow:
    0 24px 70px rgba(0,0,0,.45);

  display: flex;
  flex-direction: column;
  gap: 16px;
}


.storage-topo-v086 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}


.storage-topo-v086 span {
  font-size: 10px;
  letter-spacing: .14em;
  opacity: .65;
}


.storage-topo-v086 h2 {
  margin: 3px 0 2px;
  font-size: clamp(18px, 2.4vw, 24px);
}


.storage-topo-v086 p {
  margin: 0;
  max-width: 480px;
  font-size: 11px;
  line-height: 1.45;
  opacity: .62;
}


.storage-colunas-v086 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    30px
    minmax(0,1fr);

  gap: 10px;

  align-items: stretch;
}


.storage-coluna-v086 {
  min-width: 0;
  min-height: 260px;
  max-height: 480px;

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

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

  border-radius: 14px;

  padding: 12px;

  display: flex;
  flex-direction: column;
}


.storage-coluna-v086 > header {
  display: flex;
  align-items: center;
  gap: 9px;

  padding-bottom: 9px;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


.storage-coluna-v086 header strong {
  display: block;
  font-size: 13px;
}


.storage-coluna-v086 header small {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  opacity: .52;
}


.storage-icone-grande-v086 {
  font-size: 22px;
}


.storage-lista-v086 {
  min-height: 0;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 7px;

  padding-top: 9px;
}


.storage-setas-v086 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  opacity: .45;
}


.item-storage-v086 {
  min-width: 0;

  display: grid;

  grid-template-columns:
    30px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding: 8px;

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

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

  border-radius: 10px;
}


.icone-storage-v086 {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  font-size: 17px;

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

  border-radius: 8px;
}


.dados-storage-v086 {
  min-width: 0;
}


.dados-storage-v086 strong {
  display: block;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 10px;
}


.dados-storage-v086 small {
  display: block;

  margin-top: 2px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 8px;

  opacity: .48;
}


.item-storage-v086 button {
  min-height: 28px;

  padding: 5px 8px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 7px;

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

  color: inherit;

  font-size: 8px;

  cursor: pointer;
}


.item-storage-v086 button:hover {
  background:
    rgba(255,255,255,.10);
}


.storage-vazio-v086 {
  padding: 28px 12px;

  text-align: center;

  font-size: 10px;

  opacity: .38;
}


@media (max-width: 620px) {

  .storage-v086 {
    width: 95%;
    max-height: 92%;
    padding: 13px;
  }


  .storage-colunas-v086 {
    grid-template-columns: 1fr;
  }


  .storage-setas-v086 {
    height: 20px;
    transform: rotate(90deg);
  }


  .storage-coluna-v086 {
    min-height: 160px;
    max-height: 260px;
  }

}


/*
==========================================================
V0.8.6.1 — INVENTÁRIO OPERACIONAL
==========================================================
*/

.botao-global-v0861 {
  position: fixed;
  top: 82px;
  right: 16px;

  z-index: 8500;

  min-height: 38px;

  padding: 7px 11px;

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

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

  border-radius: 999px;

  background:
    rgba(12,20,24,.88);

  color: inherit;

  box-shadow:
    0 8px 24px rgba(0,0,0,.20);

  cursor: pointer;
}


.botao-global-v0861 span {
  font-size: 17px;
}


.botao-global-v0861 strong {
  font-size: 10px;
}


.modal-op-v0861 {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: grid;

  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,9,.74);
}


.caixa-op-v0861 {
  width: min(720px,96vw);

  max-height: 90vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      rgba(18,26,30,.99),
      rgba(9,14,17,.99)
    );

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

  border-radius: 19px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.50);
}


.topo-op-v0861 {
  padding: 15px 17px 11px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


.topo-op-v0861 > div > span {
  font-size: 9px;

  letter-spacing: .14em;

  opacity: .55;
}


.topo-op-v0861 h2 {
  margin: 3px 0 1px;

  font-size: clamp(18px,3vw,24px);
}


.topo-op-v0861 small {
  font-size: 10px;

  opacity: .46;
}


.direita-op-v0861 {
  display: flex;

  align-items: center;

  gap: 8px;
}


.moedas-op-v0861 {
  min-height: 33px;

  padding: 5px 9px;

  display: flex;

  align-items: center;

  gap: 5px;

  border-radius: 999px;

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

  font-size: 11px;
}


.direita-op-v0861 button {
  width: 33px;
  height: 33px;

  border-radius: 50%;
}


.abas-op-v0861 {
  padding: 8px 10px;

  display: grid;

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

  gap: 5px;

  border-bottom:
    1px solid rgba(255,255,255,.055);
}


.abas-op-v0861 button {
  min-width: 0;

  min-height: 43px;

  padding: 5px 3px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 2px;

  border-radius: 9px;

  font-size: 14px;
}


.abas-op-v0861 button span {
  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 8px;

  opacity: .58;
}


.abas-op-v0861 button.ativa {
  background:
    rgba(75,134,91,.22);

  border-color:
    rgba(112,184,132,.30);
}


.conteudo-op-v0861 {
  min-height: 0;

  flex: 1;

  overflow-y: auto;

  padding: 11px;
}


.lista-op-v0861 {
  display: flex;

  flex-direction: column;

  gap: 6px;
}


.item-op-v0861 {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 8px;

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

  border-radius: 10px;

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


.icone-op-v0861 {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;

  place-items: center;

  border-radius: 8px;

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

  font-size: 18px;
}


.dados-op-v0861 {
  min-width: 0;

  flex: 1;
}


.dados-op-v0861 strong {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 11px;
}


.dados-op-v0861 small {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 8px;

  opacity: .47;
}


.item-op-v0861 button {
  flex: 0 0 auto;

  min-height: 29px;

  padding: 5px 7px;

  border-radius: 7px;

  font-size: 9px;
}


.vender-op-v0861 {
  background:
    rgba(168,131,42,.14);

  border-color:
    rgba(216,177,77,.23);
}


.vazio-op-v0861 {
  min-height: 180px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  text-align: center;
}


.vazio-op-v0861 span {
  font-size: 28px;
}


.vazio-op-v0861 strong {
  font-size: 12px;
}


.vazio-op-v0861 small {
  font-size: 9px;

  opacity: .44;
}


.caixa-op-v0861 > footer {
  padding: 9px 13px;

  border-top:
    1px solid rgba(255,255,255,.055);

  font-size: 9px;

  opacity: .45;
}


/*
GRUPO
*/

.modal-grupo-v0861 {
  position: fixed;

  inset: 0;

  z-index: 11000;

  display: grid;

  place-items: center;

  padding: 15px;

  background:
    rgba(2,6,8,.76);
}


.caixa-grupo-v0861 {
  width: min(430px,94vw);

  max-height: 72vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding: 13px;

  background:
    rgba(15,22,26,.99);

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

  border-radius: 15px;
}


.caixa-grupo-v0861 > header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  padding-bottom: 9px;
}


.caixa-grupo-v0861 header span {
  display: block;

  font-size: 8px;

  letter-spacing: .12em;

  opacity: .45;
}


.caixa-grupo-v0861 header strong {
  display: block;

  margin-top: 2px;

  font-size: 13px;
}


.lista-grupo-v0861 {
  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 5px;
}


.lista-grupo-v0861 button {
  width: 100%;

  min-height: 44px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 7px 9px;

  text-align: left;

  border-radius: 8px;
}


.lista-grupo-v0861 button > span {
  font-size: 18px;
}


.lista-grupo-v0861 strong {
  display: block;

  font-size: 10px;
}


.lista-grupo-v0861 small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  opacity: .43;
}


@media (max-width:620px) {

  .botao-global-v0861 {
    top: 70px;
    right: 9px;

    width: 40px;
    height: 40px;

    padding: 0;

    justify-content: center;
  }


  .botao-global-v0861 strong {
    display: none;
  }


  .modal-op-v0861 {
    padding: 7px;
  }


  .caixa-op-v0861 {
    width: 100%;

    max-height: 95vh;
  }


  .topo-op-v0861 {
    padding: 11px;
  }


  .abas-op-v0861 {
    padding: 6px;

    gap: 3px;
  }


  .abas-op-v0861 button {
    min-height: 40px;
  }


  .abas-op-v0861 button span {
    font-size: 7px;
  }


  .item-op-v0861 {
    gap: 5px;

    padding: 7px;
  }


  .item-op-v0861 button {
    padding: 5px;
  }

}


/*
==========================================================
V0.8.6.1 — INVENTÁRIO OPERACIONAL
==========================================================
*/

.botao-global-v0861 {
  position: fixed;
  top: 82px;
  right: 16px;

  z-index: 8500;

  min-height: 38px;

  padding: 7px 11px;

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

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

  border-radius: 999px;

  background:
    rgba(12,20,24,.88);

  color: inherit;

  box-shadow:
    0 8px 24px rgba(0,0,0,.20);

  cursor: pointer;
}


.botao-global-v0861 span {
  font-size: 17px;
}


.botao-global-v0861 strong {
  font-size: 10px;
}


.modal-op-v0861 {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: grid;

  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,9,.74);
}


.caixa-op-v0861 {
  width: min(720px,96vw);

  max-height: 90vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      180deg,
      rgba(18,26,30,.99),
      rgba(9,14,17,.99)
    );

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

  border-radius: 19px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.50);
}


.topo-op-v0861 {
  padding: 15px 17px 11px;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;

  border-bottom:
    1px solid rgba(255,255,255,.06);
}


.topo-op-v0861 > div > span {
  font-size: 9px;

  letter-spacing: .14em;

  opacity: .55;
}


.topo-op-v0861 h2 {
  margin: 3px 0 1px;

  font-size: clamp(18px,3vw,24px);
}


.topo-op-v0861 small {
  font-size: 10px;

  opacity: .46;
}


.direita-op-v0861 {
  display: flex;

  align-items: center;

  gap: 8px;
}


.moedas-op-v0861 {
  min-height: 33px;

  padding: 5px 9px;

  display: flex;

  align-items: center;

  gap: 5px;

  border-radius: 999px;

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

  font-size: 11px;
}


.direita-op-v0861 button {
  width: 33px;
  height: 33px;

  border-radius: 50%;
}


.abas-op-v0861 {
  padding: 8px 10px;

  display: grid;

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

  gap: 5px;

  border-bottom:
    1px solid rgba(255,255,255,.055);
}


.abas-op-v0861 button {
  min-width: 0;

  min-height: 43px;

  padding: 5px 3px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 2px;

  border-radius: 9px;

  font-size: 14px;
}


.abas-op-v0861 button span {
  max-width: 100%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 8px;

  opacity: .58;
}


.abas-op-v0861 button.ativa {
  background:
    rgba(75,134,91,.22);

  border-color:
    rgba(112,184,132,.30);
}


.conteudo-op-v0861 {
  min-height: 0;

  flex: 1;

  overflow-y: auto;

  padding: 11px;
}


.lista-op-v0861 {
  display: flex;

  flex-direction: column;

  gap: 6px;
}


.item-op-v0861 {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 7px;

  padding: 8px;

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

  border-radius: 10px;

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


.icone-op-v0861 {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;

  place-items: center;

  border-radius: 8px;

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

  font-size: 18px;
}


.dados-op-v0861 {
  min-width: 0;

  flex: 1;
}


.dados-op-v0861 strong {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 11px;
}


.dados-op-v0861 small {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 8px;

  opacity: .47;
}


.item-op-v0861 button {
  flex: 0 0 auto;

  min-height: 29px;

  padding: 5px 7px;

  border-radius: 7px;

  font-size: 9px;
}


.vender-op-v0861 {
  background:
    rgba(168,131,42,.14);

  border-color:
    rgba(216,177,77,.23);
}


.vazio-op-v0861 {
  min-height: 180px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  text-align: center;
}


.vazio-op-v0861 span {
  font-size: 28px;
}


.vazio-op-v0861 strong {
  font-size: 12px;
}


.vazio-op-v0861 small {
  font-size: 9px;

  opacity: .44;
}


.caixa-op-v0861 > footer {
  padding: 9px 13px;

  border-top:
    1px solid rgba(255,255,255,.055);

  font-size: 9px;

  opacity: .45;
}


/*
GRUPO
*/

.modal-grupo-v0861 {
  position: fixed;

  inset: 0;

  z-index: 11000;

  display: grid;

  place-items: center;

  padding: 15px;

  background:
    rgba(2,6,8,.76);
}


.caixa-grupo-v0861 {
  width: min(430px,94vw);

  max-height: 72vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding: 13px;

  background:
    rgba(15,22,26,.99);

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

  border-radius: 15px;
}


.caixa-grupo-v0861 > header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 10px;

  padding-bottom: 9px;
}


.caixa-grupo-v0861 header span {
  display: block;

  font-size: 8px;

  letter-spacing: .12em;

  opacity: .45;
}


.caixa-grupo-v0861 header strong {
  display: block;

  margin-top: 2px;

  font-size: 13px;
}


.lista-grupo-v0861 {
  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 5px;
}


.lista-grupo-v0861 button {
  width: 100%;

  min-height: 44px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 7px 9px;

  text-align: left;

  border-radius: 8px;
}


.lista-grupo-v0861 button > span {
  font-size: 18px;
}


.lista-grupo-v0861 strong {
  display: block;

  font-size: 10px;
}


.lista-grupo-v0861 small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  opacity: .43;
}


@media (max-width:620px) {

  .botao-global-v0861 {
    top: 70px;
    right: 9px;

    width: 40px;
    height: 40px;

    padding: 0;

    justify-content: center;
  }


  .botao-global-v0861 strong {
    display: none;
  }


  .modal-op-v0861 {
    padding: 7px;
  }


  .caixa-op-v0861 {
    width: 100%;

    max-height: 95vh;
  }


  .topo-op-v0861 {
    padding: 11px;
  }


  .abas-op-v0861 {
    padding: 6px;

    gap: 3px;
  }


  .abas-op-v0861 button {
    min-height: 40px;
  }


  .abas-op-v0861 button span {
    font-size: 7px;
  }


  .item-op-v0861 {
    gap: 5px;

    padding: 7px;
  }


  .item-op-v0861 button {
    padding: 5px;
  }

}


/*
==========================================================
V0.8.6.2 — PILHAS TAXONÔMICAS
==========================================================
*/

.lista-taxonomica-v0862 {
  display: flex;
  flex-direction: column;
  gap: 7px;
}


.stack-taxonomico-v0862 {
  min-width: 0;

  display: grid;

  grid-template-columns:
    38px
    minmax(0,1fr)
    auto;

  gap: 9px;

  align-items: center;

  padding: 9px 10px;

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

  border-radius: 12px;

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


.stack-icone-v0862 {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 9px;

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

  font-size: 20px;
}


.stack-info-v0862 {
  min-width: 0;
}


.stack-titulo-v0862 {
  display: flex;

  align-items: center;

  gap: 7px;
}


.stack-titulo-v0862 strong {
  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 11px;
}


.stack-titulo-v0862 b {
  font-size: 11px;

  opacity: .64;
}


.stack-linhagem-v0862 {
  margin-top: 2px;

  display: flex;

  gap: 4px;

  align-items: center;

  font-size: 9px;

  opacity: .57;
}


.stack-qualidade-v0862 {
  margin-top: 3px;

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 9px;
}


.estrelas-stack-v0862 {
  letter-spacing: 1px;

  opacity: .82;
}


.stack-propriedades-v0862 {
  margin-top: 5px;

  display: flex;

  flex-wrap: wrap;

  gap: 4px;
}


.stack-propriedades-v0862 span {
  padding: 2px 5px;

  border-radius: 999px;

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

  font-size: 7px;

  opacity: .62;
}


.stack-acoes-v0862 {
  display: flex;

  align-items: center;

  gap: 5px;
}


.stack-acoes-v0862 button {
  width: 31px;
  height: 31px;

  display: grid;

  place-items: center;

  padding: 0;

  border-radius: 8px;

  font-size: 12px;
}


.taxonomia-vazia-v0862 {
  min-height: 110px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  text-align: center;

  opacity: .42;
}


.taxonomia-vazia-v0862 span {
  font-size: 24px;
}


.taxonomia-vazia-v0862 small {
  font-size: 9px;
}


/*
==========================================================
MODAL DO STACK
==========================================================
*/

.modal-stack-v0862 {
  position: fixed;

  inset: 0;

  z-index: 12000;

  display: grid;

  place-items: center;

  padding: 15px;

  background:
    rgba(2,6,8,.76);
}


.caixa-stack-v0862 {
  width:
    min(470px,94vw);

  max-height: 78vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding: 14px;

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

  border-radius: 16px;

  background:
    rgba(14,21,25,.99);
}


.caixa-stack-v0862 > header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 10px;

  padding-bottom: 10px;
}


.caixa-stack-v0862 header span {
  display: block;

  font-size: 8px;

  letter-spacing: .13em;

  opacity: .46;
}


.caixa-stack-v0862 h3 {
  margin: 2px 0 2px;

  font-size: 15px;
}


.caixa-stack-v0862 p {
  margin: 0;

  font-size: 9px;

  opacity: .58;
}


.propriedades-stack-modal-v0862 {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  padding:
    9px 0;

  border-top:
    1px solid rgba(255,255,255,.05);

  border-bottom:
    1px solid rgba(255,255,255,.05);
}


.propriedades-stack-modal-v0862 span {
  padding: 5px 7px;

  border-radius: 8px;

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

  font-size: 8px;
}


.propriedades-stack-modal-v0862 strong {
  margin-left: 3px;
}


.unidades-stack-v0862 {
  min-height: 0;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 5px;

  padding-top: 9px;
}


.unidades-stack-v0862 button {
  width: 100%;

  min-height: 45px;

  display: grid;

  grid-template-columns:
    28px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding: 7px 9px;

  text-align: left;

  border-radius: 9px;
}


.unidades-stack-v0862 button > span {
  font-size: 18px;
}


.unidades-stack-v0862 strong {
  display: block;

  font-size: 10px;
}


.unidades-stack-v0862 small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  opacity: .43;
}


/*
==========================================================
ARMÁRIO
==========================================================
*/

.storage-taxonomico-v0862 {
  width: min(900px,95%);

  max-height: 90%;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  gap: 11px;

  padding: 16px;

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

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(17,24,29,.99),
      rgba(9,14,17,.99)
    );
}


.topo-storage-tax-v0862 {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 12px;
}


.topo-storage-tax-v0862 span {
  font-size: 8px;

  letter-spacing:
    .13em;

  opacity: .48;
}


.topo-storage-tax-v0862 h2 {
  margin: 3px 0 2px;

  font-size:
    clamp(18px,2.4vw,23px);
}


.topo-storage-tax-v0862 p {
  margin: 0;

  font-size: 9px;

  opacity: .48;
}


.abas-storage-tax-v0862 {
  display: grid;

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

  gap: 5px;
}


.abas-storage-tax-v0862 button {
  min-width: 0;

  min-height: 36px;

  padding: 5px;

  border-radius: 8px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-size: 8px;
}


.abas-storage-tax-v0862 button.ativa {
  background:
    rgba(77,134,91,.22);

  border-color:
    rgba(112,184,132,.30);
}


.comparacao-storage-v0862 {
  min-height: 0;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    28px
    minmax(0,1fr);

  gap: 8px;
}


.comparacao-storage-v0862 > section {
  min-width: 0;

  min-height: 300px;

  max-height: 510px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  padding: 10px;

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

  border-radius: 12px;

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


.comparacao-storage-v0862 > section > header {
  padding-bottom: 8px;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}


.comparacao-storage-v0862 header strong {
  display: block;

  font-size: 11px;
}


.comparacao-storage-v0862 header small {
  display: block;

  margin-top: 1px;

  font-size: 8px;

  opacity: .44;
}


#inventarioStorageV0862,
#armarioStorageV0862 {
  min-height: 0;

  overflow-y: auto;

  padding-top: 8px;
}


.seta-storage-tax-v0862 {
  display: grid;

  place-items: center;

  opacity: .35;
}


@media (max-width: 650px) {

  .stack-taxonomico-v0862 {
    grid-template-columns:
      34px
      minmax(0,1fr)
      auto;

    padding: 8px;
  }


  .stack-icone-v0862 {
    width: 34px;
    height: 34px;

    font-size: 18px;
  }


  .stack-propriedades-v0862 {
    display: none;
  }


  .storage-taxonomico-v0862 {
    width: 96%;

    max-height: 94%;

    padding: 12px;
  }


  .comparacao-storage-v0862 {
    grid-template-columns: 1fr;
  }


  .seta-storage-tax-v0862 {
    height: 18px;

    transform:
      rotate(90deg);
  }


  .comparacao-storage-v0862 > section {
    min-height: 180px;

    max-height: 290px;
  }


  .abas-storage-tax-v0862 {
    overflow-x: auto;

    display: flex;
  }


  .abas-storage-tax-v0862 button {
    flex: 0 0 auto;

    min-width: 82px;
  }

}


/* ============================================================
   A PLANTINHA V0.8.6.3
   CAMADAS E VENDA
   ============================================================ */

/*
Hierarquia oficial desta etapa:

Inventário operacional ........ 10000
Grupo .......................... 11000
Detalhes da pilha V0862 ....... 12000
Ficha real do objeto .......... 15000
*/

.ficha-elevada-v0863 {
  z-index: 15000 !important;
}


/*
Se a ficha antiga for um overlay de tela inteira,
ela permanece centralizada e acima de tudo.
*/

.ficha-elevada-v0863 {
  isolation: isolate;
}


/* Venda dentro da pilha inteligente */

.vender-stack-v0863 {
  flex: 0 0 auto;
  min-width: 58px;
  min-height: 34px;
  padding: 6px 9px;

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

  border-radius: 10px;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


/*
A ficha antiga pode ser maior que uma tela de celular.
Limitamos apenas a caixa interna, sem alterar o conteúdo.
*/

.ficha-elevada-v0863 > div {
  max-height: min(88vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}


@media (max-width: 620px) {

  .ficha-elevada-v0863 {
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom));
  }

  .ficha-elevada-v0863 > div {
    width: min(100%, 520px);
    max-height: 88dvh;
    overflow-y: auto;
  }

  .vender-stack-v0863 {
    min-width: 54px;
    min-height: 36px;
  }

}


/*
==========================================================
V0.8.6.4 — OPERAÇÕES DE STACK
==========================================================
*/

.vender-qtd-v0864,
.mover-explicito-v0864 {
  width: auto !important;
  min-width: 64px;
  height: 31px;

  padding: 0 8px !important;

  font-size: 8px !important;

  white-space: nowrap;
}


.vender-qtd-v0864 {
  background:
    rgba(160,126,45,.16);

  border-color:
    rgba(215,180,83,.28);
}


.modal-venda-v0864 {
  position: fixed;

  inset: 0;

  z-index: 17000;

  display: grid;

  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,8,.78);
}


.caixa-venda-v0864 {
  width:
    min(380px,94vw);

  padding: 15px;

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

  border-radius: 16px;

  background:
    rgba(15,22,26,.99);

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.5);
}


.caixa-venda-v0864 > header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 10px;
}


.caixa-venda-v0864 header span {
  display: block;

  font-size: 8px;

  letter-spacing: .13em;

  opacity: .45;
}


.caixa-venda-v0864 h3 {
  margin: 3px 0 2px;

  font-size: 15px;
}


.caixa-venda-v0864 p {
  margin: 0;

  font-size: 9px;

  opacity: .47;
}


.preco-venda-v0864 {
  margin-top: 13px;

  padding: 9px 10px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  border-radius: 10px;

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


.preco-venda-v0864 span {
  font-size: 9px;

  opacity: .53;
}


.preco-venda-v0864 strong {
  font-size: 13px;
}


.atalhos-venda-v0864 {
  margin-top: 10px;

  display: grid;

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

  gap: 5px;
}


.atalhos-venda-v0864 button {
  min-height: 35px;

  border-radius: 8px;

  font-size: 10px;
}


.controle-qtd-v0864 {
  margin-top: 10px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    42px;

  gap: 5px;
}


.controle-qtd-v0864 button {
  min-height: 42px;

  font-size: 18px;
}


.controle-qtd-v0864 input {
  width: 100%;

  min-height: 42px;

  text-align: center;

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

  border-radius: 8px;

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

  color: inherit;

  font-size: 15px;
}


.resumo-venda-v0864 {
  margin-top: 10px;

  padding: 9px 10px;

  display: flex;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,.06);

  font-size: 10px;
}


.confirmar-venda-v0864 {
  width: 100%;

  min-height: 42px;

  margin-top: 10px;

  border-color:
    rgba(215,180,83,.28);

  background:
    rgba(160,126,45,.17);

  font-weight: 700;
}


@media (max-width:620px) {

  .stack-acoes-v0862 {
    flex-wrap: wrap;

    justify-content:
      flex-end;
  }


  .vender-qtd-v0864,
  .mover-explicito-v0864 {
    min-width: 58px;

    height: 30px;
  }

}


/*
==========================================================
V0.8.6.5 — TRANSFERÊNCIA
==========================================================
*/

.transferir-stack-v0865,
.transferir-pilha-v0865,
.transferir-unico-v0865 {
  width: auto !important;
  min-width: 70px !important;
  height: 31px !important;

  padding: 0 8px !important;

  white-space: nowrap;

  font-size: 8px !important;
}


[data-mover-stack-v0862-antigo],
[data-mover-pilha-v0862-antigo] {
  display: none !important;
}


.modal-transferencia-v0865 {
  position: fixed;
  inset: 0;

  z-index: 18000;

  display: grid;
  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,8,.80);
}


.caixa-transferencia-v0865 {
  width: min(390px,94vw);

  padding: 15px;

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

  border-radius: 16px;

  background:
    rgba(15,22,26,.99);
}


.caixa-transferencia-v0865 > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}


.caixa-transferencia-v0865 header span {
  font-size: 8px;
  letter-spacing: .12em;
  opacity: .45;
}


.caixa-transferencia-v0865 h3 {
  margin: 3px 0 2px;
  font-size: 15px;
}


.caixa-transferencia-v0865 p {
  margin: 0;
  font-size: 9px;
  opacity: .45;
}


.atalhos-transferencia-v0865 {
  margin-top: 12px;

  display: grid;

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

  gap: 5px;
}


.atalhos-transferencia-v0865 button {
  min-height: 35px;
}


.controle-transferencia-v0865 {
  margin-top: 10px;

  display: grid;

  grid-template-columns:
    42px
    minmax(0,1fr)
    42px;

  gap: 5px;
}


.controle-transferencia-v0865 button {
  min-height: 42px;
  font-size: 18px;
}


.controle-transferencia-v0865 input {
  width: 100%;
  min-height: 42px;

  text-align: center;

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

  border-radius: 8px;

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

  color: inherit;

  font-size: 15px;
}


.resumo-transferencia-v0865 {
  margin-top: 10px;

  padding: 9px 10px;

  display: flex;
  justify-content: space-between;

  border-top:
    1px solid rgba(255,255,255,.06);

  font-size: 10px;
}


.confirmar-transferencia-v0865 {
  width: 100%;
  min-height: 42px;

  margin-top: 10px;

  font-weight: 700;
}


/*
==========================================================
V0.8.6.6 — INSPEÇÃO
==========================================================
*/

.inspecionar-stack-v0866,
.inspecionar-unico-v0866 {
  width: 31px !important;
  height: 31px !important;

  min-width: 31px !important;

  padding: 0 !important;

  display: grid !important;

  place-items: center;

  font-size: 12px !important;
}


/*
==========================================================
V0.8.6.7 — AÇÕES NA FICHA
==========================================================
*/

.acoes-ficha-v0867 {
  margin-top: 13px;

  padding-top: 11px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.acoes-titulo-v0867 {
  display: block;

  margin-bottom: 7px;

  font-size: 8px;

  letter-spacing: .13em;

  opacity: .45;
}


.acoes-botoes-v0867 {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(85px,1fr)
    );

  gap: 6px;
}


.acoes-botoes-v0867 button {
  min-height: 40px;

  padding: 7px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  border-radius: 9px;

  font-size: 10px;
}


.acoes-botoes-v0867 button span {
  font-size: 14px;
}


.acoes-botoes-v0867 button strong {
  font-size: 9px;
}


@media (max-width:520px) {

  .acoes-botoes-v0867 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/*
==========================================================
V0.8.6.8 — AÇÕES NA FICHA REAL
==========================================================
*/

.acoes-ficha-v0868 {
  margin-top: 18px;

  padding-top: 12px;

  border-top:
    1px solid
    rgba(255,255,255,.08);
}


.titulo-acoes-ficha-v0868 {
  display: block;

  margin-bottom: 8px;

  font-size: 8px;

  letter-spacing: .13em;

  opacity: .48;
}


.botoes-acoes-ficha-v0868 {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(90px,1fr)
    );

  gap: 6px;
}


.botoes-acoes-ficha-v0868 button {
  min-height: 42px;

  padding: 7px 9px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  border-radius: 9px;
}


.botoes-acoes-ficha-v0868 button span {
  font-size: 15px;
}


.botoes-acoes-ficha-v0868 button strong {
  font-size: 9px;
}


@media (max-width:520px) {

  .botoes-acoes-ficha-v0868 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/*
==========================================================
V0.8.7.0 — PROCESSOS DE OBJETO
==========================================================
*/

.feedback-v0870 {
  position: fixed;

  left: 50%;
  bottom: 24px;

  transform:
    translateX(-50%);

  z-index: 22000;

  width:
    min(390px, calc(100vw - 24px));

  pointer-events: none;
}


.feedback-caixa-v0870 {
  display: grid;

  grid-template-columns:
    34px minmax(0,1fr);

  gap: 9px;

  align-items: center;

  padding: 10px 12px;

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

  border-radius: 12px;

  background:
    rgba(15,22,26,.98);

  box-shadow:
    0 14px 40px
    rgba(0,0,0,.45);
}


.feedback-caixa-v0870 > span {
  font-size: 22px;
}


.feedback-caixa-v0870 strong {
  display: block;

  font-size: 11px;
}


.feedback-caixa-v0870 small {
  display: block;

  margin-top: 2px;

  font-size: 9px;

  opacity: .55;
}


/* ======================================================
   PREPARO DO SOLO
   ====================================================== */

.modal-preparo-solo-v0870 {
  position: fixed;

  inset: 0;

  z-index: 21000;

  display: grid;

  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,8,.82);

  backdrop-filter:
    blur(5px);
}


.caixa-preparo-solo-v0870 {
  width:
    min(520px,95vw);

  max-height:
    90vh;

  overflow-y: auto;

  padding: 15px;

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

  border-radius: 17px;

  background:
    rgba(15,22,26,.99);

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.55);
}


.caixa-preparo-solo-v0870 > header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 10px;
}


.caixa-preparo-solo-v0870 header span {
  font-size: 8px;

  letter-spacing:
    .13em;

  opacity: .48;
}


.caixa-preparo-solo-v0870 h3 {
  margin:
    3px 0 2px;

  font-size: 16px;
}


.caixa-preparo-solo-v0870 p {
  margin: 0;

  font-size: 9px;

  opacity: .52;
}


.formula-solo-v0870 {
  margin-top: 15px;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    22px
    minmax(0,1fr)
    22px
    minmax(0,1fr);

  gap: 6px;

  align-items: center;
}


.formula-solo-v0870 > b {
  text-align: center;

  opacity: .38;
}


.ingrediente-solo-v0870,
.resultado-solo-v0870 {
  min-width: 0;

  min-height: 110px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 4px;

  padding: 9px;

  text-align: center;

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

  border-radius: 11px;

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


.ingrediente-solo-v0870 > span,
.resultado-solo-v0870 > span {
  font-size: 25px;
}


.ingrediente-solo-v0870 strong,
.resultado-solo-v0870 strong {
  font-size: 9px;
}


.ingrediente-solo-v0870 small {
  font-size: 8px;

  opacity: .48;
}


.base-solo-v0870.selecionada {
  border-color:
    rgba(112,184,132,.35);

  background:
    rgba(77,134,91,.12);
}


.nota-preparo-v0870 {
  margin-top: 12px;

  display: grid;

  grid-template-columns:
    22px minmax(0,1fr);

  gap: 7px;

  align-items: flex-start;

  padding: 9px;

  border-radius: 9px;

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


.nota-preparo-v0870 p {
  font-size: 9px;

  line-height: 1.45;

  opacity: .65;
}


.alerta-preparo-v0870 {
  background:
    rgba(145,93,49,.10);
}


.confirmar-preparo-solo-v0870 {
  width: 100%;

  min-height: 42px;

  margin-top: 11px;

  border-radius: 10px;

  font-weight: 700;
}


.confirmar-preparo-solo-v0870:disabled {
  opacity: .35;

  cursor: default;
}


@media (max-width: 600px) {

  .formula-solo-v0870 {
    grid-template-columns: 1fr;
  }


  .formula-solo-v0870 > b {
    min-height: 18px;

    display: grid;

    place-items: center;

    transform:
      rotate(90deg);
  }


  .ingrediente-solo-v0870,
  .resultado-solo-v0870 {
    min-height: 78px;
  }

}


/*
==========================================================
V0.8.7.1 — FICHA DO SOLO
==========================================================
*/

.inspecionar-solo-v0871 {
  width: 31px !important;
  height: 31px !important;

  min-width: 31px !important;

  padding: 0 !important;

  display: grid !important;

  place-items: center;

  font-size: 12px !important;
}


.modal-solo-v0871 {
  position: fixed;

  inset: 0;

  z-index: 21500;

  display: grid;

  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,8,.82);

  backdrop-filter:
    blur(5px);
}


.ficha-solo-v0871 {
  width:
    min(430px,94vw);

  max-height:
    88vh;

  overflow-y: auto;

  padding: 15px;

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

  border-radius: 16px;

  background:
    rgba(15,22,26,.99);

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.55);
}


.ficha-solo-v0871 > header {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 10px;
}


.ficha-solo-v0871 header > div > span {
  font-size: 8px;

  letter-spacing: .13em;

  opacity: .45;
}


.ficha-solo-v0871 h3 {
  margin: 3px 0 2px;

  font-size: 16px;
}


.ficha-solo-v0871 p {
  margin: 0;

  font-size: 9px;

  opacity: .5;
}


.propriedades-solo-v0871 {
  margin-top: 13px;

  display: grid;

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

  gap: 6px;
}


.propriedades-solo-v0871 > div {
  min-width: 0;

  padding: 8px;

  border-radius: 9px;

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


.propriedades-solo-v0871 span {
  display: block;

  font-size: 8px;

  opacity: .48;
}


.propriedades-solo-v0871 strong {
  display: block;

  margin-top: 2px;

  font-size: 12px;
}


.acoes-solo-v0871 {
  margin-top: 14px;

  padding-top: 11px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.acoes-solo-v0871 > span {
  display: block;

  margin-bottom: 7px;

  font-size: 8px;

  letter-spacing: .13em;

  opacity: .45;
}


.acoes-solo-v0871 > div {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(100px,1fr)
    );

  gap: 6px;
}


.acoes-solo-v0871 button {
  min-height: 40px;

  font-size: 9px;
}


/* ======================================================
   SELEÇÃO DO ADITIVO
   ====================================================== */

.solo-base-v0871 {
  margin-top: 14px;

  display: grid;

  grid-template-columns:
    36px minmax(0,1fr);

  gap: 8px;

  align-items: center;

  padding: 9px;

  border:
    1px solid
    rgba(112,184,132,.25);

  border-radius: 10px;

  background:
    rgba(77,134,91,.10);
}


.solo-base-v0871 > span {
  font-size: 23px;
}


.solo-base-v0871 strong {
  display: block;

  font-size: 10px;
}


.solo-base-v0871 small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  opacity: .48;
}


.materiais-preparo-v0871 {
  margin-top: 12px;
}


.titulo-materiais-v0871 {
  display: block;

  margin-bottom: 6px;

  font-size: 8px;

  letter-spacing: .12em;

  opacity: .45;
}


.lista-materiais-v0871 {
  max-height: 340px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 5px;
}


.lista-materiais-v0871 button {
  width: 100%;

  min-height: 48px;

  display: grid;

  grid-template-columns:
    30px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 8px;

  padding: 7px 9px;

  text-align: left;

  border-radius: 9px;
}


.lista-materiais-v0871 button > span {
  font-size: 19px;
}


.lista-materiais-v0871 strong {
  display: block;

  font-size: 10px;
}


.lista-materiais-v0871 small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  opacity: .45;
}


.sem-material-v0871 {
  min-height: 120px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  opacity: .45;
}


.sem-material-v0871 > span {
  font-size: 25px;
}


.sem-material-v0871 p {
  max-width: 220px;

  margin-top: 5px;

  font-size: 9px;
}


/*
==========================================================
A PLANTINHA V0.8.8 START
JARDIM
==========================================================
*/

.jardim-v088 {
  width: 100%;

  margin-top:
    clamp(10px,2vw,18px);

  padding:
    clamp(11px,1.8vw,17px);

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

  border-radius:
    16px;

  background:
    linear-gradient(
      180deg,
      rgba(33,55,38,.16),
      rgba(10,18,13,.30)
    );

  box-sizing:
    border-box;
}


.cabecalho-jardim-v088 {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;
}


.cabecalho-jardim-v088 > div:first-child > span {
  display: block;

  font-size:
    clamp(7px,.8vw,9px);

  letter-spacing:
    .13em;

  opacity:
    .45;
}


.cabecalho-jardim-v088 strong {
  display: block;

  margin-top: 2px;

  font-size:
    clamp(13px,1.6vw,17px);
}


.status-jardim-v088 {
  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    rgba(120,165,190,.08);

  font-size:
    clamp(7px,.8vw,9px);

  opacity:
    .65;

  white-space:
    nowrap;
}


.descricao-jardim-v088 {
  max-width:
    600px;

  margin:
    7px 0 10px;

  font-size:
    clamp(8px,.9vw,10px);

  line-height:
    1.4;

  opacity:
    .5;
}


.slots-jardim-v088 {
  display: grid;

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

  gap:
    clamp(6px,1vw,10px);
}


.slot-jardim-v088 {
  position: relative;

  min-width: 0;

  min-height:
    clamp(92px,11vw,122px);

  padding:
    9px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

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

  border-radius:
    12px;

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

  text-align:
    center;

  box-sizing:
    border-box;
}


button.slot-jardim-v088 {
  width: 100%;

  color: inherit;

  cursor: pointer;
}


.slot-jardim-vazio-v088 {
  opacity:
    .46;
}


.slot-jardim-ocupado-v088 {
  border-color:
    rgba(103,165,111,.20);

  background:
    rgba(72,126,79,.07);
}


.icone-jardim-v088 {
  font-size:
    clamp(20px,2.8vw,31px);
}


.slot-jardim-v088 strong {
  max-width: 100%;

  overflow: hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    clamp(9px,1vw,11px);
}


.slot-jardim-v088 small {
  font-size:
    clamp(7px,.8vw,9px);

  opacity:
    .48;
}


.status-congelado-jardim-v088 {
  position: absolute;

  top: 6px;

  right: 7px;

  font-size:
    11px;

  opacity:
    .62;
}


.texto-espera-jardim-v088 {
  margin-top: 2px;

  font-size: 7px;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;

  opacity:
    .42;
}


/*
==========================================================
BOTÃO ESTAÇÃO -> JARDIM
==========================================================
*/

.levar-jardim-v088 {
  width: 100%;

  min-height: 44px;

  margin-top: 8px;

  padding:
    8px 11px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border-radius:
    11px;
}


.levar-jardim-v088 > span {
  text-align: left;
}


.levar-jardim-v088 strong {
  display: block;

  font-size: 10px;
}


.levar-jardim-v088 small {
  display: block;

  margin-top: 1px;

  font-size: 8px;

  opacity: .48;
}


/*
==========================================================
MODAIS
==========================================================
*/

.modal-jardim-v088 {
  position: fixed;

  inset: 0;

  z-index: 23000;

  display: grid;

  place-items: center;

  padding: 14px;

  background:
    rgba(2,6,8,.82);

  backdrop-filter:
    blur(5px);
}


.caixa-modal-jardim-v088 {
  width:
    min(480px,95vw);

  max-height:
    88vh;

  overflow-y:
    auto;

  padding:
    15px;

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

  border-radius:
    17px;

  background:
    rgba(15,22,26,.99);

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.55);
}


.caixa-modal-jardim-v088 > header {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap: 10px;
}


.caixa-modal-jardim-v088 header span {
  display: block;

  font-size: 8px;

  letter-spacing:
    .12em;

  opacity: .45;
}


.caixa-modal-jardim-v088 h3 {
  margin:
    3px 0 2px;

  font-size: 15px;
}


.caixa-modal-jardim-v088 p {
  margin: 0;

  font-size: 9px;

  line-height: 1.45;

  opacity: .55;
}


.aviso-congelamento-v088 {
  margin-top: 12px;

  padding: 9px;

  display: grid;

  grid-template-columns:
    25px minmax(0,1fr);

  gap: 7px;

  align-items: flex-start;

  border-radius:
    10px;

  background:
    rgba(92,133,157,.07);
}


.aviso-congelamento-v088 > span {
  font-size: 17px;
}


.slots-escolha-jardim-v088,
.vasos-retorno-v088 {
  margin-top: 12px;

  display: grid;

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

  gap: 6px;
}


.slot-escolha-jardim-v088,
.vasos-retorno-v088 button {
  min-width: 0;

  min-height: 90px;

  padding: 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

  border-radius:
    10px;
}


.slot-escolha-jardim-v088 > span,
.vasos-retorno-v088 button > span {
  font-size: 21px;
}


.slot-escolha-jardim-v088 strong,
.vasos-retorno-v088 strong {
  font-size: 9px;
}


.slot-escolha-jardim-v088 small,
.vasos-retorno-v088 small {
  font-size: 8px;

  opacity: .45;
}


.slot-escolha-jardim-v088.ocupado {
  opacity: .34;
}


.estado-jardim-v088 {
  margin-top: 12px;

  display: grid;

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

  gap: 6px;
}


.estado-jardim-v088 > div {
  padding: 8px;

  border-radius:
    9px;

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


.estado-jardim-v088 span {
  display: block;

  font-size: 8px;

  opacity: .48;
}


.estado-jardim-v088 strong {
  display: block;

  margin-top: 2px;

  font-size: 12px;
}


.trazer-laboratorio-v088 {
  width: 100%;

  min-height: 42px;

  margin-top: 11px;

  border-radius: 10px;

  font-weight: 700;
}


.jardim-cheio-v088 {
  min-height: 130px;

  margin-top: 12px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  opacity: .55;
}


.jardim-cheio-v088 > span {
  font-size: 28px;
}


/*
==========================================================
BANCADA BLOQUEADA
==========================================================
*/

.bancada-bloqueada-v088 {
  min-height:
    clamp(560px,72vh,760px);

  padding:
    clamp(14px,2vw,22px);
}


.cabecalho-bancada-v088 {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;
}


.cabecalho-bancada-v088 > div {
  text-align: right;
}


.cabecalho-bancada-v088 span {
  display: block;

  font-size: 8px;

  letter-spacing: .13em;

  opacity: .45;
}


.cabecalho-bancada-v088 strong {
  font-size:
    clamp(13px,1.7vw,18px);
}


.corpo-bancada-bloqueada-v088 {
  width:
    min(760px,100%);

  margin:
    clamp(30px,6vh,70px)
    auto 0;

  display: grid;

  grid-template-columns:
    minmax(0,1.5fr)
    minmax(180px,.7fr);

  gap: 12px;
}


.mesa-bancada-v088,
.armario-bancada-v088 {
  padding:
    clamp(13px,2vw,20px);

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

  border-radius: 15px;

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


.mesa-bancada-v088 {
  text-align: center;
}


.slots-experimento-bloqueados-v088 {
  display: grid;

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

  gap: 7px;

  margin-bottom: 15px;
}


.slots-experimento-bloqueados-v088 > div {
  min-height:
    clamp(75px,9vw,105px);

  display: grid;

  place-items: center;

  border:
    1px dashed
    rgba(255,255,255,.10);

  border-radius:
    11px;

  font-size: 20px;

  opacity: .32;
}


.mesa-bancada-v088 > strong {
  display: block;

  font-size: 12px;
}


.mesa-bancada-v088 > p {
  max-width: 380px;

  margin:
    6px auto 0;

  font-size: 9px;

  line-height: 1.5;

  opacity: .48;
}


.armario-bancada-v088 {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}


.armario-bancada-v088 > span {
  font-size: 34px;
}


.armario-bancada-v088 strong {
  display: block;

  margin-top: 4px;

  font-size: 12px;
}


.armario-bancada-v088 small {
  display: block;

  margin-top: 3px;

  font-size: 8px;

  opacity: .45;
}


.armario-bancada-v088 button {
  width: 100%;

  min-height: 38px;

  margin-top: 12px;
}


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

@media (max-width: 620px) {

  .slots-jardim-v088 {
    gap: 5px;
  }


  .slot-jardim-v088 {
    min-height: 90px;

    padding: 6px;
  }


  .slots-escolha-jardim-v088,
  .vasos-retorno-v088 {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }


  .corpo-bancada-bloqueada-v088 {
    grid-template-columns: 1fr;

    margin-top: 22px;
  }


  .armario-bancada-v088 {
    min-height: 140px;
  }

}


@media (max-width: 390px) {

  .status-jardim-v088 {
    display: none;
  }


  .slot-jardim-v088 strong {
    font-size: 8px;
  }


  .slot-jardim-v088 small {
    font-size: 7px;
  }

}

/* Produção por vaso: controles legíveis também em telas pequenas. */
.producao-cultivo p { margin: 0.5rem 0; }
.acoes-producao-cultivo { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.acoes-producao-cultivo button { flex: 1 1 180px; min-height: 44px; padding: 0.75rem; }
.acoes-producao-cultivo button:disabled { opacity: 0.55; cursor: default; }