/* ==========================================================
   Evolubaby — Configurações (etapa 11)

   Arquivo próprio pelo mesmo motivo de agenda-e-menu.css e financas.css:
   é um bloco aditivo, dá para ler inteiro e dá para remover inteiro sem
   caçar regra no meio de setecentas linhas.

   Nada de biblioteca nova. As abas são links normais com ?aba= na URL —
   sem JavaScript, sem estado escondido: recarregar mantém a aba, o botão
   voltar do navegador funciona e o link pode ser compartilhado.
   ========================================================== */

/* ---------- Abas ---------- */

.abas-config {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--pv-borda);
    margin: 0 0 24px;
    padding: 0 0 12px;
}

.aba-config {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--pv-borda);
    border-radius: var(--pv-raio-pilula);
    background: var(--pv-branco);
    color: var(--pv-texto-suave);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.aba-config:hover { border-color: var(--pv-ciano); color: var(--pv-ciano); }

.aba-config.ativa {
    background: var(--pv-ciano);
    border-color: var(--pv-ciano);
    color: var(--pv-branco);
}

/* ---------- Selos de status da assinatura ----------
   Verde, amarelo, vermelho. A cor NUNCA anda sozinha: o rótulo escrito
   ("Ativa", "Atrasada", "Suspensa") está sempre ao lado, porque cerca de um
   em cada doze homens não distingue verde de vermelho. */

.selo-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.selo-ativa     { background: rgba(47, 158, 111, 0.16); color: #1f6b4b; }
.selo-atrasada  { background: rgba(230, 168, 28, 0.20); color: #8a6100; }
.selo-suspensa  { background: rgba(226, 100, 109, 0.18); color: #a8323c; }
.selo-cancelada { background: var(--pv-superficie);     color: var(--pv-texto-suave); }

/* ---------- Identidade visual ---------- */

.caixa-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 18px;
    margin: 0 0 18px;
    border: 1px dashed var(--pv-borda);
    border-radius: var(--pv-raio-cartao);
    background: var(--pv-superficie);
}

.caixa-logo img { max-width: 100%; max-height: 180px; }

.caixa-logo .vazio { text-align: center; font-size: 0.88rem; }

.logo-clinica-topo  { max-height: 45px; max-width: min(225px, 100%); display: block; }
.logo-clinica-ficha { max-height: 72px; max-width: min(270px, 100%); margin: 0 0 8px; display: block; }

/* ---------- Matriz de permissões ---------- */

.matriz-papeis td.sim { color: #1f6b4b; font-weight: 700; }
.matriz-papeis td.nao { color: var(--pv-texto-suave); }
.matriz-papeis td     { text-align: center; }
.matriz-papeis td:first-child,
.matriz-papeis th:first-child { text-align: left; }

/* ---------- Aviso de bloqueio / soft lock ---------- */

.aviso-bloqueio {
    border-left: 3px solid #e2646d;
    background: rgba(226, 100, 109, 0.08);
    border-radius: var(--pv-raio-campo);
    padding: 14px 18px;
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.aviso-atencao {
    border-left: 3px solid #e6a81c;
    background: rgba(230, 168, 28, 0.10);
    border-radius: var(--pv-raio-campo);
    padding: 14px 18px;
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.nota-explicativa {
    font-size: 0.84rem;
    line-height: 1.6;
    padding: 12px 16px;
    border-left: 3px solid var(--pv-ciano);
    background: rgba(61, 184, 198, 0.07);
    margin: 0 0 20px;
}

/* ---------- Variação nas métricas do super admin ---------- */

.variacao { font-size: 0.82rem; font-weight: 700; }
.variacao.sobe  { color: #1f6b4b; }
.variacao.desce { color: #a8323c; }
.variacao.igual { color: var(--pv-texto-suave); }

/* ---------- Ajuste para celular ---------- */

@media (max-width: 600px) {
    .abas-config { gap: 6px; }
    .aba-config { padding: 7px 12px; font-size: 0.8rem; }
}

/* ------------------------------------------------------------------
   Permissões extras por pessoa (aba Equipe)
   ------------------------------------------------------------------
   Um bloco por membro, e dentro dele um fieldset por recurso. O fieldset
   não é enfeite: ele é o que faz o leitor de tela anunciar "Agenda" antes
   de "ver" e "editar" — sem ele as caixas chegam como uma lista de doze
   palavras soltas, iguais entre si.

   A permissão que vem do perfil aparece marcada e desabilitada. Desabilitada
   não viaja no POST, e é justamente isso que se quer: o que o perfil dá não
   é gravado como extra. */

.bloco-permissoes-extras {
    border: 1px solid var(--borda, #e2e8f0);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.titulo-permissoes-extras {
    font-size: 1rem;
    margin-bottom: 12px;
}

.titulo-permissoes-extras small {
    font-weight: 400;
    opacity: .7;
    margin-left: 8px;
}

.grade-permissoes-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.recurso-permissao {
    border: 1px solid var(--borda, #e2e8f0);
    border-radius: 10px;
    padding: 8px 12px 10px;
}

.recurso-permissao legend {
    font-size: .82rem;
    font-weight: 600;
    padding: 0 6px;
    opacity: .85;
}

.opcao-permissao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    font-size: .92rem;
    cursor: pointer;
}

.opcao-permissao.herdada {
    opacity: .6;
    cursor: default;
}

.opcao-permissao small {
    font-size: .75rem;
}