/* =====================================================================
   Painel administrativo.
   Herda as cores da marca (tema.css), mas com densidade maior:
   aqui a artesã trabalha, não navega.
   ===================================================================== */

body.painel { background: #F3F0EA; }

/* --- Telas de autenticação: cartão centrado --- */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--esp-4);
}

.auth__cartao {
    background: var(--superficie);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-g);
    padding: var(--esp-6);
    width: 100%;
    max-width: 460px;
}

.auth__logo { width: 96px; margin: 0 auto var(--esp-4); }
.auth__cartao h1 { font-size: 1.6rem; text-align: center; margin-bottom: var(--esp-2); }
.auth__sub { text-align: center; color: var(--texto-suave); font-size: 0.92rem; margin-bottom: var(--esp-5); }

/* --- Estrutura do painel --- */
.painel__topo {
    background: var(--marrom);
    color: var(--cru);
    padding: var(--esp-3) 0;
}

.painel__topo a { color: var(--cru); text-decoration: none; }
.painel__topo .container { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.painel__marca { font-family: var(--fonte-titulo); font-size: 1.3rem; font-weight: 600; }

.painel__menu { display: flex; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.painel__menu a { font-size: 0.93rem; font-weight: 600; opacity: 0.85; padding: var(--esp-1) 0; }
.painel__menu a:hover, .painel__menu a[aria-current="page"] { opacity: 1; border-bottom: 2px solid var(--rosa-antigo); }

.painel__conteudo { padding-block: var(--esp-6); }

.painel__cartao {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: var(--esp-5);
    margin-bottom: var(--esp-5);
}

/* --- Código do 2FA: campo grande, monoespaçado, fácil de conferir --- */
.codigo-otp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 1.8rem !important;
    letter-spacing: 0.4em;
    text-align: center;
    padding-inline: 0.5rem !important;
}

.segredo-manual {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    background: var(--cru);
    border: 1.5px dashed var(--rosa-escuro);
    border-radius: var(--raio);
    padding: var(--esp-4);
    text-align: center;
    word-break: break-all;
    user-select: all;   /* um clique seleciona tudo */
}

.codigos-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--esp-2);
    list-style: none;
    margin: var(--esp-4) 0;
    padding: 0;
}

.codigos-lista li {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 1.05rem;
    background: var(--cru);
    border-radius: var(--raio-p);
    padding: var(--esp-2) var(--esp-3);
    text-align: center;
    user-select: all;
}

/* --- Passo a passo numerado --- */
.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0 0 var(--esp-5); }

.passos li {
    counter-increment: passo;
    position: relative;
    padding-left: 2.6rem;
    margin-bottom: var(--esp-4);
}

.passos li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -0.1rem;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    background: var(--rosa-antigo);
    color: var(--marrom);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.92rem;
}

/* --- Tabelas --- */
.tabela { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.tabela th, .tabela td { padding: var(--esp-3); text-align: left; border-bottom: 1px solid var(--borda); }
.tabela th { font-weight: 700; color: var(--texto-suave); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tabela tbody tr:hover { background: var(--papel); }

/* Tabela em celular: rola em vez de espremer as colunas. */
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
    .auth__cartao { padding: var(--esp-5) var(--esp-4); }
    .painel__topo .container { flex-direction: column; align-items: flex-start; gap: var(--esp-3); }
}