/*
 * Tela 2 · Responsável — cópia fiel do bloco "Tela 2 · Responsáveis" de
 * /mockup/agendador-cardapio-web.html.
 *
 * A única diferença é a normalização de <a class="pessoa">: no mockup o cartão
 * é um <button> que troca de tela por JavaScript; aqui ele é um link, e as duas
 * linhas abaixo devolvem ao <a> a aparência que o <button> já tinha.
 */

.grade-pessoas{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.pessoa{
  position:relative;text-align:left;background:var(--papel);border:2px solid var(--linha);
  border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px;
  transition:var(--transicao);box-shadow:var(--sombra-sm);
}
a.pessoa{text-decoration:none;color:inherit}
.pessoa:hover{border-color:var(--lilas);transform:translateY(-3px);box-shadow:var(--sombra-md)}
.pessoa[aria-pressed="true"],.pessoa[aria-current="true"]{border-color:var(--roxo);background:linear-gradient(180deg,var(--lilas-suave),var(--papel) 58%);box-shadow:0 8px 24px rgba(89,50,122,.16)}
.pessoa-topo{display:flex;align-items:center;gap:14px}
.pessoa-nome{font-size:17px;font-weight:700;letter-spacing:-.3px}
.pessoa-cargo{font-size:13px;color:var(--tinta-media);margin-top:1px}
.pessoa-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tinta-media);border-top:1px solid var(--linha);padding-top:13px}
.pessoa-meta .agenda{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--roxo)}
.marca-check{
  position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
  background:var(--roxo);color:#fff;display:grid;place-items:center;
  opacity:0;transform:scale(.5);transition:var(--transicao);
}
.pessoa[aria-pressed="true"] .marca-check,.pessoa[aria-current="true"] .marca-check{opacity:1;transform:scale(1)}