/* =========================================================
   Bebidário — estados de escrita na ficha
   ========================================================= */

/* a minha resenha, destacada no topo da lista */
.review-minha{border-color:var(--green-3);background:#f7faf8}
.review-who .selo{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
  background:var(--green);color:#fff;font-size:9.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;
}
.review-foot [data-acao="apagar"]:hover{color:var(--wine)}


/* controle ocupado enquanto o servidor responde */
.act:disabled,.rate-input button:disabled,.review-foot button:disabled,
.review-new button:disabled{opacity:.55;cursor:progress}

/* estrela já dada continua marcada mesmo sem o mouse em cima */
.rate-input button.on svg{fill:var(--gold)}
.score-vote p{min-height:17px}

.review-new{position:relative}

/* =========================================================
   Votação do perfil sensorial e das enquetes
   ========================================================= */

.perfil-dica{font-size:12.5px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.perfil-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.perfil-nota{font-size:11.5px;color:var(--muted-2)}
.convite-voto{font-size:13px;color:var(--muted);line-height:1.6}

/* o traço do meu voto sobre a barra da média */
.bar-track{position:relative}
.marca-minha{
  position:absolute;top:-3px;width:2px;height:13px;border-radius:1px;
  background:var(--ink);transform:translateX(-1px);
  box-shadow:0 0 0 2px var(--panel);
}

/* linha em modo de edição: o controle ocupa o lugar da barra */
.bar-row-edit{grid-template-columns:104px minmax(0,1fr) 34px}
.bar-row-edit input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:var(--r-pill);
  background:var(--line-2);cursor:pointer;outline:none;
}
.bar-row-edit input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(43,99,73,.25)}
.bar-row-edit input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--green);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab;
}
.bar-row-edit input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--green);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:grab;
}
.bar-row-edit .valor-eixo{
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);text-align:right;font-size:12.5px;
}

/* opção de enquete clicável */
.vote-row-btn{
  width:100%;border:0;background:none;padding:4px 6px;margin:0 -6px;cursor:pointer;
  border-radius:var(--r-sm);text-align:left;font:inherit;color:inherit;
  transition:background .14s;
}
.vote-row-btn:hover{background:var(--bg-soft)}
.vote-row-btn:disabled{opacity:.6;cursor:progress}
.vote-row-btn span:first-child{color:var(--ink-2);font-size:12.5px}
.vote-row-btn b{font-size:11.5px;color:var(--muted);font-weight:500;text-align:right}
.vote-row-btn[aria-pressed="true"] span:first-child{color:var(--green);font-weight:600}
.vote-row-btn[aria-pressed="true"] .bar-fill{background:linear-gradient(90deg,var(--green-3),var(--green))}
.vote-row-btn[aria-pressed="true"] b{color:var(--green);font-weight:600}
.vote-row-btn[aria-pressed="true"]::after{
  content:"✓";position:absolute;right:-2px;font-size:11px;color:var(--green);
}
.vote-card{position:relative}
.vote-row-btn{position:relative}

/* Dentro de <button> só cabe conteúdo de frase, então a barra teve de
   virar <span> — e span inline ignora height e width. Sem isto as
   barras das enquetes ficavam invisíveis. */
.vote-row-btn .bar-track{display:block;width:100%;height:7px}
.vote-row-btn .bar-fill{display:block;height:100%}

/* ---------- sugestões da comunidade ---------- */
/* A janela usa a grade de campos do painel (`.adm-grade`, `.campo`),
   que já existe e já é responsiva. O que muda aqui é só o que o painel
   não tem: o texto de convite, o aviso da fila e a tela de agradecer. */
.caixa-sugerir{max-width:600px}
.caixa-sugerir h2{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:6px}
.sug-intro{font-size:13.5px;line-height:1.55;color:var(--muted);margin-bottom:18px;text-wrap:pretty}
.caixa-sugerir .adm-grade{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.caixa-sugerir .campo > span small{font-weight:400;color:var(--muted-2)}
.caixa-sugerir select,
.caixa-sugerir textarea{
  width:100%;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--bg-soft);padding:10px 12px;font-size:13.5px;line-height:1.5;color:var(--ink);
}
.caixa-sugerir select{height:42px;padding:0 11px;cursor:pointer}
.caixa-sugerir textarea{resize:vertical}
.caixa-sugerir select:focus,
.caixa-sugerir textarea:focus{
  outline:none;border-color:var(--green-3);background:#fff;box-shadow:0 0 0 3px rgba(43,99,73,.12);
}
.sug-observacao{margin-top:13px}
.sug-aviso{
  font-size:11.5px;line-height:1.5;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:9px 11px;margin-top:14px;
}
.caixa-sugerir .modal-erro a{color:var(--green);font-weight:500;white-space:nowrap}

#sug-pronto{text-align:center;padding:14px 0 0}
.sug-pronto-icone svg{
  width:40px;height:40px;color:var(--green-3);
  background:#eef3ef;border-radius:50%;padding:9px;
}
.sug-recado{font-size:14px;line-height:1.6;color:var(--ink-2);margin:14px auto 4px;max-width:38ch}
#sug-pronto .adm-editor-acoes{justify-content:center}

/* convite no vazio da busca */
.vazio-acoes{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* convite na barra lateral da ficha */
.painel-corrigir{padding:15px 16px;text-align:center}
.painel-corrigir p{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.painel-corrigir .btn{display:inline-flex;align-items:center;gap:7px}
.painel-corrigir svg{width:13px;height:13px}

@media (max-width:560px){
  .caixa-sugerir .adm-grade{grid-template-columns:1fr}
}