/* Painel Admin — somente o que não existe em estilo.css (pop-up, animação, tabela).
   Mesmas variáveis do sistema; nenhuma regra aqui atinge as 5 abas do cliente. */

/* Cartões verde / vermelho (mesmo .d-card) */
.d-card.painel-verde { border-left-color: var(--green); }
.d-card.painel-verde .d-card-val { color: var(--green); }
.d-card.painel-vermelho { border-left-color: var(--red); }
.d-card.painel-vermelho .d-card-val { color: var(--red); }

/* Cabeçalho do card "Clientes do Sistema" */
.painel-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.painel-topo > div { flex: 1; min-width: 240px; }
.painel-topo > .btn { margin-bottom: 20px; }
#pa-erro { margin-bottom: 16px; }

/* Tabela (rolagem horizontal no celular) */
.painel-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; }
.painel-tabela { width: 100%; min-width: 960px; border-collapse: collapse; font-size: 13px; }
.painel-tabela th { text-align: left; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; background: var(--bg); padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.painel-tabela td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); white-space: nowrap; }
.painel-tabela tbody tr:last-child td { border-bottom: none; }
.painel-tabela td strong { color: var(--navy); font-weight: 700; }
.painel-obs { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: normal; max-width: 260px; }
.painel-vazio { text-align: center; color: var(--muted); padding: 24px !important; }
.painel-acoes { display: flex; gap: 6px; }

/* Esqueleto de carregamento da tabela */
.painel-esqueleto td span { display: block; height: 12px; border-radius: 6px; background: var(--line); animation: painel-pulsar 1.2s ease-in-out infinite; }
@keyframes painel-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Etiquetas de status (mesmo .emp-gender) */
.emp-gender.painel-ativo { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.emp-gender.painel-inativo { color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--surface)); }

/* Botões */
.btn.painel-btn-peq { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.btn.painel-btn-perigo { background: var(--red); color: white; }
.btn.painel-btn-perigo:hover { background: color-mix(in srgb, var(--red) 85%, black); }
#painel-admin .btn:disabled, .painel-pop .btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Pop-up: fundo escurecido + cartão com fade, leve subida e escala (~200 ms) */
.painel-fundo { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; background: color-mix(in srgb, var(--navy) 60%, transparent); opacity: 0; transition: opacity 0.2s ease; }
.painel-fundo.aberto { opacity: 1; }
.painel-pop { width: 100%; max-width: 640px; margin: auto; opacity: 0; transform: translateY(12px) scale(0.97); transition: opacity 0.2s ease, transform 0.2s ease; }
.painel-fundo.aberto .painel-pop { opacity: 1; transform: none; }
.painel-pop.card { margin-bottom: auto; }
.painel-pop-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.painel-pop-topo h2 { margin-bottom: 0; }
.painel-x { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: 0.2s; }
.painel-x:hover { color: var(--navy); background: var(--bg); }

.painel-pop .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font: inherit; font-size: 14px; background: #f8fafc; transition: 0.2s; resize: vertical; }
.painel-pop .field textarea:focus { outline: none; border-color: var(--gold); background: white; }
.painel-campo-largo { margin-top: 16px; }
.painel-senha { display: flex; gap: 8px; }
.painel-senha input { flex: 1; min-width: 0; }
.painel-senha .btn { padding: 0 14px; font-size: 13px; }
.painel-pop .alert { margin-top: 16px; }
.painel-botoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.painel-dados { white-space: pre-line; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 16px; font-size: 14px; line-height: 1.6; color: var(--ink); word-break: break-word; }
.painel-pergunta { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; }

@media (max-width: 600px) {
    .painel-botoes .btn { flex: 1; justify-content: center; }
}