/* =========================================================
   WheyProtein · Custo por Grama — CSS
   v2.0.0 · Mediahouse Digital

   Conversão do protótipo calculadora-pote.html para o padrão
   (PADRAO_FERRAMENTAS §2, §3, §4, §11 e §12). O que o leitor vê
   não muda; o que muda é de onde vem: cores pelos apelidos curtos
   do tema, raio pelo --r da página, números em Inter com
   tabular-nums (HANDOFF_PLUGINS §10 — o portal não hospeda fonte
   monoespaçada).

   A ARMADILHA DA §12, DESTA VEZ POR ESTRUTURA: o escopo do plugin
   é .wpm-pote, e a raiz que o JS conhece — .wpm-calc-pote — é um
   elemento INTERNO dele, como era no protótipo. Toda regra da raiz
   vive como descendente legítimo, nunca como descendente de si mesma.

   COLUNA: nenhum pixel de largura de página mora aqui (§2). A
   ferramenta publica de quantas colunas precisa no slot, em
   data-wpm-cols, e o tema traduz em --fer-col. A assinatura
   editorial herda a mesma variável e acompanha.

   Nenhum :root, nenhum seletor de elemento nu fora do escopo,
   nenhuma largura de página, nenhuma fonte própria, nenhum hex.
   Mapa de tons (§3.6): acento = --tom (--fer2 da página);
   erro = --claro/--claro2/--vinho; nota = --areia/--areia-b/
   --castanho, o mesmo par do kit das sete calculadoras.
   ========================================================= */

.wpm-pote{
  --tom:var(--fer2);        /* o acento da ferramenta */
  --tom-forte:var(--fer3);  /* hover do que já está em --tom */
  --tom-claro:var(--fer);   /* superfícies e filetes decorativos */
  --num:var(--corpo);       /* número = Inter + tabular-nums */
  --sombra-leve:0 6px 18px rgba(46,45,50,.06); /* PADRAO §3.2 */
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.55;
}
.wpm-pote *{box-sizing:border-box}
.wpm-pote .wpm-oculto{display:none!important}

/* ---------- ABAS (a família do kit das calculadoras) ---------- */
.wpm-pote .wpm-abas{display:flex; gap:2px; border-bottom:1px solid var(--linha); margin:0 0 24px}
.wpm-pote .wpm-aba{flex:0 0 auto; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--tinta2); padding:9px 14px 10px; font-family:var(--corpo); font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap}
.wpm-pote .wpm-aba:hover{color:var(--tinta)}
.wpm-pote .wpm-aba[aria-selected="true"]{color:var(--tom); border-bottom-color:var(--tom)}
.wpm-pote .wpm-aba:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-pote .wpm-tela{display:none}
.wpm-pote .wpm-tela.wpm-on{display:block}

/* ---------- A RAIZ QUE O JS CONHECE ----------
   Descendente de .wpm-pote (não é o mesmo elemento — §12).
   A largura acompanha o número de potes visíveis; quem limita por
   cima é a página, pelo --fer-col do slot e pelo quadro de 1080. */
/* Sem max-width: a coluna é da página (--fer-col), não do plugin.
   As classes n1/n2/n3 continuam na raiz como estado legível, mas não
   carregam pixel nenhum. Ver o CONTRATO DE COLUNA em pote.js. */
.wpm-pote .wpm-calc-pote{margin:0 auto}

/* ---------- O GUIA DO RÓTULO ---------- */
.wpm-pote .wpm-guia{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r);
  box-shadow:var(--sombra-leve); padding:24px 26px; margin:0 0 20px}
.wpm-pote .wpm-guia-tit{font-family:var(--display); font-weight:700; font-size:18px; color:var(--tom); margin:0 0 14px}
.wpm-pote .wpm-guia-corpo{display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start}
.wpm-pote .wpm-rotulo{width:160px; flex:0 0 160px; height:auto}
.wpm-pote .wpm-passos{margin:0; padding-left:20px; flex:1; min-width:220px}
.wpm-pote .wpm-passos li{font-size:14px; color:var(--tinta2); line-height:1.55; margin:0 0 9px}
.wpm-pote .wpm-passos b{color:var(--tinta)}

/* ---------- OS CARTÕES DOS POTES ---------- */
.wpm-pote .wpm-potes{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.wpm-pote .wpm-card{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:22px 24px; flex:1 1 240px}
.wpm-pote .wpm-card-head{display:flex; align-items:center; justify-content:space-between; margin:0 0 14px}
.wpm-pote .wpm-tag{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--tom)}
.wpm-pote .wpm-tirar{background:none; border:none; color:var(--tinta2); font-family:var(--corpo); font-size:12.5px; text-decoration:underline; cursor:pointer}
.wpm-pote .wpm-tirar:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-pote .wpm-card label{display:block; margin:0 0 12px}
.wpm-pote .wpm-lab{display:block; font-size:13.5px; font-weight:600; color:var(--tinta)}
.wpm-pote .wpm-dica{display:block; font-size:12px; color:var(--tinta2); margin:1px 0 6px}
.wpm-pote .wpm-card input,
.wpm-pote .wpm-contexto input{width:100%; padding:11px 13px; font-family:var(--corpo); font-size:15px;
  border:1px solid var(--linha); border-radius:var(--r); background:var(--papel); color:var(--tinta); outline:none}
.wpm-pote .wpm-card input[inputmode="decimal"],
.wpm-pote .wpm-contexto input[inputmode="decimal"]{font-family:var(--num); font-variant-numeric:tabular-nums; font-size:16px}
.wpm-pote .wpm-card input:focus-visible,
.wpm-pote .wpm-contexto input:focus-visible{border-color:var(--tom); outline:2px solid var(--tom); outline-offset:1px}

.wpm-pote .wpm-add{display:block; margin:14px auto 4px; background:transparent; border:1.5px dashed var(--linha2);
  color:var(--tom); border-radius:var(--r); padding:12px; max-width:420px; width:100%;
  font-family:var(--corpo); font-weight:600; font-size:14px; cursor:pointer}
.wpm-pote .wpm-add:hover{border-color:var(--tom-forte); color:var(--tom-forte)}
.wpm-pote .wpm-add:focus-visible{outline:2px solid var(--tom); outline-offset:2px}

.wpm-pote .wpm-contexto{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0}
.wpm-pote .wpm-contexto label{flex:1; min-width:200px}

/* ---------- A LEITURA ---------- */
.wpm-pote .wpm-leitura{margin-top:8px}
.wpm-pote .wpm-tit{font-family:var(--display); font-weight:700; font-size:20px; color:var(--tom); margin:0 0 6px}
.wpm-pote .wpm-stamp{font-size:12.5px; color:var(--tinta2); margin:0 0 14px}
.wpm-pote .wpm-vazio{background:var(--papel); border:1px dashed var(--linha2); border-radius:var(--r);
  padding:22px; text-align:center; font-size:14px; color:var(--tinta2)}
.wpm-pote .wpm-grid-res{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

.wpm-pote .wpm-res{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:20px 22px; flex:1 1 240px}
.wpm-pote .wpm-nome{font-family:var(--display); font-weight:700; font-size:17px; color:var(--tinta); margin:0 0 10px}
.wpm-pote .wpm-destaque{background:var(--tom); border-radius:var(--r); padding:14px 16px; margin:0 0 12px;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.wpm-pote .wpm-n{font-family:var(--num); font-variant-numeric:tabular-nums; font-weight:700; font-size:26px; color:var(--papel)}
.wpm-pote .wpm-u{font-size:12px; color:var(--papel); opacity:.85; font-weight:500}
.wpm-pote .wpm-conta{font-size:13.5px; color:var(--tinta2); line-height:1.5; margin:0 0 12px}
.wpm-pote .wpm-conta b{color:var(--tinta); font-family:var(--num); font-variant-numeric:tabular-nums; font-weight:500}
.wpm-pote .wpm-res dl{display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:0}
.wpm-pote .wpm-res dt{font-size:12.5px; color:var(--tinta2)}
.wpm-pote .wpm-res dd{font-family:var(--num); font-variant-numeric:tabular-nums; font-weight:500; font-size:13.5px;
  color:var(--tom); text-align:right; margin:0}
.wpm-pote .wpm-aviso{border-radius:var(--r); padding:10px 12px; font-size:12.5px; margin-top:12px; line-height:1.5}
.wpm-pote .wpm-erro{background:var(--claro); border:1px solid var(--claro2); color:var(--vinho)}
.wpm-pote .wpm-nota{background:var(--areia); border:1px solid var(--areia-b); color:var(--castanho)}

/* ---------- A RÉGUA ---------- */
.wpm-pote .wpm-regua{margin-top:18px; background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:20px 22px}
.wpm-pote .wpm-regua-tit{font-family:var(--display); font-weight:700; font-size:17px; color:var(--tom); margin:0 0 4px}
.wpm-pote .wpm-sub{font-size:12.5px; color:var(--tinta2); margin:0 0 14px}
.wpm-pote .wpm-barra{margin:0 0 12px}
.wpm-pote .wpm-cap{display:flex; justify-content:space-between; font-size:13px; margin:0 0 5px}
.wpm-pote .wpm-cap b{color:var(--tinta)}
.wpm-pote .wpm-cap span{font-family:var(--num); font-variant-numeric:tabular-nums; color:var(--tinta2); font-size:12px}
.wpm-pote .wpm-trilho{height:9px; background:var(--gesso); border:1px solid var(--linha); border-radius:100px; overflow:hidden}
.wpm-pote .wpm-fill{height:100%; width:0; background:var(--tom); transition:width .3s ease}
.wpm-pote .wpm-veredito{font-size:13.5px; color:var(--tinta); line-height:1.55; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--linha)}

/* ---------- O RODAPÉ DA FERRAMENTA ---------- */
.wpm-pote .wpm-rodape{margin-top:22px; border-top:1px solid var(--linha); padding-top:16px}
.wpm-pote .wpm-rodape p{font-size:13px; color:var(--tinta2); line-height:1.55; margin:0 0 8px}
.wpm-pote .wpm-rodape strong{color:var(--tinta)}
.wpm-pote .wpm-btn{margin-top:6px; background:transparent; color:var(--tom); border:1.5px solid var(--linha);
  border-radius:var(--r); padding:11px 16px; font-family:var(--corpo); font-weight:600; font-size:14px; cursor:pointer}
.wpm-pote .wpm-btn:hover{background:var(--gesso)}
.wpm-pote .wpm-btn:focus-visible{outline:2px solid var(--tom); outline-offset:2px}

/* ---------- O CONTEÚDO EDITORIAL ----------
   Fica no plugin por decisão da Rebeka (9/ago/2026), como está em
   produção hoje. Quando o formato de conteúdo de página for
   validado (HANDOFF_PLUGINS §5 e pendência 3), este bloco inteiro
   — CSS e markup — sai numa v2.1.0, junto com as sete do kit. */
.wpm-pote .wpm-ed{max-width:720px; margin:44px auto 0; padding-top:30px; border-top:1px solid var(--linha)}
.wpm-pote .wpm-ed h2{font-family:var(--display); font-weight:700; font-size:22px; color:var(--tom); margin:26px 0 8px}
.wpm-pote .wpm-ed h2:first-child{margin-top:0}
.wpm-pote .wpm-ed p{font-size:15.5px; color:var(--tinta2); line-height:1.66; margin:0 0 12px}
.wpm-pote .wpm-ed-faq{margin-top:4px}
.wpm-pote .wpm-ed-q{font-weight:600; color:var(--tinta); font-size:15px; margin:0 0 2px}
.wpm-pote .wpm-ed-a{margin:0 0 16px}
.wpm-pote .wpm-ed-aviso{margin-top:28px; background:var(--papel); border:1px solid var(--linha);
  border-left:3px solid var(--sage); border-radius:var(--r); padding:14px 16px; font-size:12.5px;
  color:var(--tinta2); line-height:1.55}

/* ---------- A ABA "COMO FUNCIONA" (para o leitor) ---------- */
.wpm-pote .wpm-como{max-width:720px; margin:0 auto}
.wpm-pote .wpm-como p{font-size:14.5px; color:var(--tinta2); line-height:1.6; margin:0 0 10px}
.wpm-pote .wpm-como h3{font-family:var(--display); font-weight:700; font-size:19px; color:var(--tom); margin:22px 0 6px}
.wpm-pote .wpm-como ul{margin:0 0 10px; padding-left:20px}
.wpm-pote .wpm-como li{font-size:14px; color:var(--tinta2); line-height:1.55; margin:4px 0}
.wpm-pote .wpm-como strong{color:var(--tinta)}

/* ---------- MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  .wpm-pote .wpm-fill{transition:none}
}