/* Página do cliente (tools.omeros.com.br). Celular primeiro: a pessoa chega pelo WhatsApp. */
.tools-pagina { max-width: 640px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
.tools-topo { display: flex; align-items: center; gap: 16px; }
.tools-topo .rotulo-pequeno { margin: 0 0 4px; }
.tools-topo .titulo-grande { font-size: clamp(2rem, 7vw, 2.75rem); }
.tools-avatar-moldura { flex: none; display: flex; }
.tools-avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--superficie-2); }
.tools-lista { margin-top: 28px; display: grid; gap: 32px; }
.tools-grupo { display: grid; gap: 12px; }
.tools-cartao { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.tools-cartao summary { display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; list-style: none; }
.tools-cartao summary::-webkit-details-marker { display: none; }
.tools-cartao summary img { flex: none; width: 44px; height: 44px; padding: 8px; border-radius: var(--raio-pequeno); background: #eef2fd; }
.tools-titulo { display: grid; gap: 2px; }
.tools-titulo span { color: var(--texto-2); font-size: 0.9375rem; }
.tools-corpo { padding: 0 16px 16px; color: var(--texto-2); }
.tools-corpo p { margin: 0 0 12px; }
.tools-rotulo { color: var(--texto); font-weight: 700; font-size: 0.875rem; }
.tools-exemplos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tools-exemplos li { display: grid; gap: 8px; padding: 12px; border-radius: var(--raio-pequeno); background: var(--superficie-2); color: var(--texto); }
.tools-pedir { justify-self: start; }
.tools-sessao { margin-top: 28px; display: grid; gap: 12px; }
.tools-rodape { margin-top: 40px; }
/* Telas do servidor (entrar, link vencido, saída). */
.tools-aviso { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }
.tools-caixa { max-width: 420px; display: grid; gap: 16px; }