/* ---------------------------------------------------------------
   Identidade Cesto — troque as 4 variaveis abaixo e o site inteiro
   muda de cor. Nada mais precisa ser editado.
   --------------------------------------------------------------- */
:root {
  --marca:      #16a34a;   /* verde cesto */
  --marca-esc:  #15803d;
  --tinta:      #10231a;   /* texto principal */
  --fundo:      #f4f6f3;   /* fundo da pagina */

  --papel:      #ffffff;
  --linha:      #e2e7e1;
  --suave:      #6b7a70;
  --erro:       #b91c1c;
  --raio:       14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 60px;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------ topo */

.topo { max-width: 860px; margin: 0 auto; padding: 44px 0 28px; }

.marca { display: flex; align-items: baseline; gap: 8px; }

.logo {
  font-size: 34px; font-weight: 800; letter-spacing: -1px;
  color: var(--marca);
}

.sub {
  font-size: 20px; font-weight: 500; color: var(--suave);
  letter-spacing: -.3px;
}

.tagline { margin: 10px 0 0; color: var(--suave); max-width: 620px; }

main { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; }

/* ----------------------------------------------------------- cards */

.card {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px;
}

.card h2 {
  margin: 0 0 16px;
  font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--suave);
  display: flex; align-items: center; gap: 10px;
}

.passo {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--marca); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0;
}

/* -------------------------------------------------------- dropzone */

.drop {
  display: grid; place-items: center; gap: 6px; text-align: center;
  padding: 34px 20px; cursor: pointer;
  border: 2px dashed var(--linha); border-radius: var(--raio);
  background: var(--fundo);
  transition: border-color .15s, background .15s;
}

.drop:hover, .drop.sobre { border-color: var(--marca); background: #f0f7f2; }
.drop.cheio { border-style: solid; border-color: var(--marca); background: #f0f7f2; }
.drop input { display: none; }
.drop strong { font-size: 16px; }
.drop span { font-size: 13px; color: var(--suave); word-break: break-all; }

/* ------------------------------------------------------- operacoes */

.ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.op {
  display: grid; gap: 3px; text-align: left;
  padding: 12px 13px; cursor: pointer; font: inherit;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 10px;
  transition: border-color .15s, background .15s;
}

.op:hover { border-color: var(--marca); }
.op b { font-size: 14px; }
.op span { font-size: 12px; color: var(--suave); line-height: 1.35; }

.op.ativo {
  background: var(--marca); border-color: var(--marca); color: #fff;
}
.op.ativo span { color: #d9f2e2; }

/* --------------------------------------------------------- campos */

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.campo { display: grid; gap: 5px; }
.campo.oculto { display: none; }

.rotulo { font-size: 13px; font-weight: 600; }
.rotulo em, .campo > em {
  font-style: normal; font-weight: 400; color: var(--suave); font-size: 12px;
}
.campo > em { margin-top: -1px; }

select, input[type="number"] {
  width: 100%; padding: 9px 10px; font: inherit;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 9px;
}

select:focus, input:focus { outline: 2px solid var(--marca); outline-offset: -1px; }

input::placeholder { color: #9aa89f; }

.campo.check {
  grid-template-columns: auto 1fr; align-items: center; gap: 9px;
  align-self: end; padding-bottom: 9px; cursor: pointer;
}
.campo.check input { width: 17px; height: 17px; accent-color: var(--marca); }
.campo.check span { font-size: 14px; }

/* mensagem de quando a ferramenta nao tem nenhuma escolha a fazer */
.vazio {
  grid-column: 1 / -1; margin: 0;
  font-size: 14px; color: var(--suave);
}

/* ------------------------------------------------- opcoes avancadas */

.avancado { margin-top: 4px; }

.avancado summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 2px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--suave);
  user-select: none;
}

.avancado summary::-webkit-details-marker { display: none; }

.avancado summary::before {
  content: "›"; font-size: 17px; line-height: 1;
  transition: transform .15s;
}

.avancado[open] summary::before { transform: rotate(90deg); }
.avancado summary:hover { color: var(--marca); }

.avancado .grid {
  padding: 14px 0 2px;
  border-top: 1px solid var(--linha);
  margin-top: 4px;
}

/* ---------------------------------------------------------- acoes */

.acao {
  display: block; width: 100%; margin-top: 18px;
  padding: 13px; font: inherit; font-weight: 700; text-align: center;
  color: #fff; background: var(--marca); text-decoration: none;
  border: 0; border-radius: 10px; cursor: pointer;
  transition: background .15s;
}

.acao:hover:not(:disabled) { background: var(--marca-esc); }
.acao:disabled { background: #c3cdc6; cursor: not-allowed; }

.nota { margin: 10px 0 0; font-size: 13px; color: var(--suave); text-align: center; }
.nota.ruim { color: var(--erro); }

/* ------------------------------------------------------- progresso */

.barra {
  height: 9px; background: var(--fundo);
  border: 1px solid var(--linha); border-radius: 99px; overflow: hidden;
}

#preenche {
  height: 100%; width: 0; background: var(--marca);
  transition: width .3s ease;
}

#estado { margin: 12px 0 0; font-size: 14px; }
#estado.ruim { color: var(--erro); }

.oculto { display: none !important; }

footer {
  max-width: 860px; margin: 34px auto 0;
  font-size: 12.5px; color: var(--suave); text-align: center;
}

/* ---------------------------------------------------------- mobile */

@media (max-width: 720px) {
  .ops { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .topo { padding: 28px 0 20px; }
}