/* ==========================================================
   ConectaCP2 - identidade visual (login + área logada)
   baseada no design do PgInicial.html
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; }

:root {
    --blue-50: #e8f0fe;
    --blue-100: #c5d8fc;
    --blue-200: #93b8f9;
    --blue-400: #3a7ef6;
    --blue-500: #1a5cf0;
    --blue-600: #1248c9;
    --blue-700: #0d35a0;
    --blue-900: #06175a;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-border: rgba(255, 255, 255, 0.22);
    --glass-card: rgba(255, 255, 255, 0.90);
    --text-dark: #08144a;
    --text-mid: #2c3e7a;
    --text-light: rgba(255, 255, 255, 0.82);
    --shadow-blue: 0 24px 64px rgba(18, 72, 201, 0.28);
    --shadow-card: 0 8px 48px rgba(18, 72, 201, 0.14);
    --radius: 18px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --fonte-titulo: 'Bricolage Grotesque', 'DM Sans', Arial, sans-serif;
    --fonte-corpo: 'DM Sans', Arial, sans-serif;
    --borda-suave: #e3e9f7;
}

html { scroll-behavior: smooth; }

/* Nome "ConectaCP2": mesmo estilo em todas as telas (login, card e topo da área logada) */
.logo-texto {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

body {
    font-family: var(--fonte-corpo);
    background: linear-gradient(135deg, #0d35a0 0%, #1a5cf0 40%, #3a7ef6 75%, #5b9bff 100%);
    min-height: 100vh;
    color: var(--white);
    overflow-x: hidden;
    position: relative;
}

/* Tela inicial (grade dos 5 quadrados) não deve ter scroll.
   Assim que uma seção é aberta (.secao-ativa no body), o scroll volta ao normal. */
body:not(.pagina-login):not(.secao-ativa) {
    overflow-y: hidden;
    height: 100vh;
    height: 100dvh;
}

/* Background da tela inicial (padrão de brasões do Colégio Pedro II).
   Só aparece na tela inicial: quando uma seção abre (.secao-ativa) volta ao gradiente padrão. */
body:not(.pagina-login):not(.secao-ativa) {
    background-color: #0d35a0 !important; /* cor de reserva enquanto a imagem carrega */
    background-image: url('Imagens/telainicio.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    /* sem background-attachment: fixed: a tela inicial não rola, e no celular (iOS) o fixed quebra o cover */
}

/* Blobs animados de fundo, em toda página do app */
body::before {
    content: '';
    position: fixed;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}
body::after {
    content: '';
    position: fixed;
    bottom: -150px; left: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

h1 { font-family: 'DM Sans', sans-serif;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 1000;
    line-height: 1.08;
    letter-spacing: -0.03em;
    width: 100%;
    max-width: 400px;
    margin-bottom: 1.4rem; }
    

/* ==========================================================
   PÁGINA DE LOGIN / CADASTRO (login.php)
   layout no estilo do PgInicial.html: nav + hero + card de login
   Tudo escopado em "body.pagina-login" para não afetar a área logada
   ========================================================== */

body.pagina-login {
    display: block;
    padding: 0;
    overflow-x: clip; /* nada na tela de login cria rolagem lateral nem faz o celular diminuir o zoom */
}

/* ----- Nav (topo) ----- */
.pagina-login nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 5%;
    background: rgba(13, 53, 160, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    animation: fadeDown 0.7s ease both;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pagina-login .nav-logo {
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagina-login .nav-logo img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.pagina-login .nav-toggle {
    display: none;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    cursor: pointer;
    color: white;
    font-size: 1.2rem;
    line-height: 1;
}

/* ----- Layout principal (hero + card) ----- */
.pagina-login main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 4rem 5%;
    max-width: 1280px;
    margin: 0 auto;
}

.pagina-login .hero h1 {
    font-family: var(--fonte-titulo);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    width: 100%;
    max-width: 400px;
    margin-bottom: 1.4rem;
    animation: fadeLeft 0.7s ease both;
}

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to { opacity: 1; transform: translateX(0); }
}

.pagina-login .hero h1 span {
    background: linear-gradient(90deg, #a8d4ff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----- Card de login/cadastro ----- */
.pagina-login .login-side {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeRight 0.9s 0.25s ease both;
}

@keyframes fadeRight {
    from { opacity: 0; transform: translateX(32px); }
    to { opacity: 1; transform: translateX(0); }
}

.pagina-login .login-card {
    position: relative;
    background: var(--glass-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 2.6rem 2.4rem;
    border-radius: var(--radius);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-card);
    color: var(--text-dark);
}

.pagina-login .card-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.8rem;
}

.pagina-login .card-logo img {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
}

.pagina-login .card-logo-text {
    color: var(--text-dark);
}

.pagina-login .tabs {
    display: flex;
    background: #f0f4ff;
    border-radius: var(--radius-sm);
    padding: 4px;
    gap: 4px;
    margin-bottom: 1.8rem;
}

.pagina-login .tab {
    flex: 1;
    padding: 0.55rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-family: var(--fonte-titulo);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #6b7db3;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.pagina-login .tab.active {
    background: var(--white);
    color: var(--blue-600);
    box-shadow: 0 2px 8px rgba(18, 72, 201, 0.12);
}

.pagina-login .form-group {
    margin-bottom: 1.1rem;
}

.pagina-login label {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-mid);
    margin-bottom: 0.45rem;
    letter-spacing: -0.02em;
}

.pagina-login .input-wrap {
    position: relative;
}

.pagina-login .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94a3b8;
}

.pagina-login .input-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.pagina-login input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    border: 1.5px solid #dde4f0;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #f8faff;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pagina-login input:focus {
    border-color: var(--blue-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

.pagina-login select {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    border: 1.5px solid #dde4f0;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #f8faff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pagina-login select:focus {
    border-color: var(--blue-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

/* aviso pequeno embaixo de um campo do cadastro (ex.: matrícula inválida) */
.pagina-login .aviso-campo {
    color: #d63b3b;
    font-size: 0.78rem;
    margin: 6px 2px 0;
}

.pagina-login .aviso-campo[hidden] {
    display: none;
}

.pagina-login .btn,
.pagina-login .btn-submit {
    width: 100%;
    padding: 0.9rem;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: white;
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(18, 72, 201, 0.3);
    letter-spacing: -0.02em;
    margin-top: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pagina-login .btn:hover,
.pagina-login .btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(18, 72, 201, 0.4);
}

.pagina-login .btn:active,
.pagina-login .btn-submit:active {
    transform: scale(0.99);
}

.pagina-login .lembrar-linha {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 2px 0 14px;
    font-size: 0.86rem;
    color: var(--text-mid);
    cursor: pointer;
    user-select: none;
}

.pagina-login .lembrar-linha input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--blue-400);
    cursor: pointer;
}

.pagina-login .erro {
    color: #d63b3b;
    text-align: center;
    font-size: 0.86rem;
    margin: 4px 0 14px;
}

.pagina-login .register-prompt {
    text-align: center;
    font-size: 0.86rem;
    color: #64748b;
    margin-top: 1.2rem;
}

.pagina-login .register-prompt a {
    color: var(--blue-500);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.pagina-login .register-prompt a:hover {
    text-decoration: underline;
}

/* ----- Rodapé simples da landing ----- */
.pagina-login footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.5rem 5%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.pagina-login footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

.pagina-login footer a:hover {
    color: white;
}

/* ----- Responsivo ----- */
@media (max-width: 900px) {
    .pagina-login main {
        grid-template-columns: minmax(0, 1fr);
        padding: 2.5rem 5%;
        gap: 3rem;
        min-height: auto;
    }
    .pagina-login .login-card {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }
    .pagina-login .nav-toggle {
        display: block;
    }
}

@media (max-width: 480px) {
    .pagina-login nav {
        padding: 0.9rem 4%;
    }
    .pagina-login .hero h1 {
        font-size: 2rem;
    }
}

/* ==========================================================
   ÁREA LOGADA (index.php + Forum/Direct/Busca/Perfil/Eventos)
   ========================================================== */

/* ----- Topo, estilo nav com efeito vidro ----- */
.topbar {
    /* fica sempre no alto da tela enquanto a pessoa rola a página (acima do conteúdo, abaixo das janelas) */
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 5%;
    background: rgba(13, 53, 160, 0.9);   /* mais opaco: o conteúdo passa por baixo ao rolar */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    color: white;
}

.topbar .marca {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
}

.topbar h1 {
    /* zera o que vem do h1 global (margin-bottom: 1.4rem e width: 400px),
       que empurrava o texto pra cima e desalinhava da logo.
       A fonte vem da classe .logo-texto */
    margin: 0;
    width: auto;
}

.btn-voltar {
    display: none;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: white;
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-voltar:hover {
    background: rgba(255, 255, 255, 0.22);
}

.btn-voltar.ativo {
    display: block;
}

/* ← e 🏠 lado a lado (a casinha leva ao menu inicial) */
.topbar-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.btn-casa { padding: 0; }
.btn-casa.ativo { display: grid; place-items: center; }
/* com ← e 🏠 aparecendo (dentro de uma aba), o nome encolhe no celular para tudo caber no topo */
@media (max-width: 430px) {
    body.secao-ativa .topbar { padding-left: 12px; padding-right: 12px; }
    body.secao-ativa .topbar .marca { gap: 7px; min-width: 0; }
    body.secao-ativa .topbar .logo-texto { font-size: 1.08rem; }
    .topbar-nav { gap: 6px; }
    .topbar-nav .btn-voltar { width: 36px; height: 36px; font-size: 1.25rem; }
}
@media (max-width: 370px) {
    body.secao-ativa .topbar .logo-texto { display: none; }   /* fica só a logo */
}

/* ----- Tela inicial (3 botões empilhados) ----- */
#tela-inicio {
    position: relative;
    z-index: 1;
    /* centraliza saudação + botões na altura que sobra abaixo do topo (~74px) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 74px);
    min-height: calc(100dvh - 74px);
    padding: 20px 20px 48px; /* folga maior embaixo deixa o conjunto um pouco acima do centro exato */
}

.boas-vindas {
    color: white;
    text-align: center;
    margin-bottom: 22px;
    font-size: 1.5rem;
    font-family: var(--fonte-titulo);
    letter-spacing: -0.02em;
    font-weight: 800;
}

/* Os 3 botões têm sempre a mesma largura e altura, em qualquer aparelho:
   largura = o que couber até 420px; altura acompanha a tela (com mínimo e máximo). */
.grid-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(100%, 420px);
    margin: 0 auto;
}

.quadrado {
    width: 100%;
    height: clamp(112px, 21dvh, 180px);
    flex: 0 0 auto;
    padding: 12px;
    font: inherit;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quadrado:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-blue);
}

.quadrado:active {
    transform: scale(0.96);
}

.quadrado .icone {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--blue-400), var(--blue-600));
    color: #fff;
    box-shadow: 0 8px 20px rgba(18, 72, 201, 0.32);
    font-size: 2rem;
}

.quadrado .rotulo {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.15rem;
    font-family: var(--fonte-titulo);
    letter-spacing: -0.02em;
}

/* Tela inicial em telas muito baixas (ex.: celular deitado): libera a rolagem pra nada ficar cortado */
@media (max-height: 560px) {
    body:not(.pagina-login):not(.secao-ativa) {
        overflow-y: auto;
    }
}

/* ----- Telas internas (fórum, direct, busca, perfil, eventos) ----- */
.tela-secao {
    position: relative;
    z-index: 1;
    display: none;
    background: var(--glass-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 26px 26px 0 0;
    min-height: calc(100vh - 90px);
    padding: 30px 24px 120px;
    max-width: 860px;
    margin: 0 auto;
    box-shadow: 0 -10px 50px rgba(6, 23, 90, 0.18);
}

.tela-secao.ativa {
    display: block;
}

.tela-secao h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.tela-secao .descricao {
    color: var(--text-mid);
    font-size: 0.95rem;
    margin-bottom: 20px;
    max-width: 60ch;
}

/* Aviso de "nada por aqui" (busca vazia, sem posts, sem eventos...):
   cartão suave, sem borda pontilhada */
.placeholder {
    margin-top: 12px;
    padding: 36px 20px;
    border-radius: var(--radius);
    background: var(--blue-50);
    text-align: center;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--text-mid);
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .placeholder {
        padding: 26px 16px;
        font-size: 0.9rem;
        border-radius: 14px;
    }
}
/* ///////// */
.btn-sair {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    display: inline-block;
}

.btn-sair:hover {
    text-decoration: underline;
}

body.secao-ativa .btn-sair {
    visibility: hidden;
}
/* ///////// */


/* ----- Resultados da busca de perfis ----- */
.lista-perfis {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.perfil-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.perfil-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--borda-suave);
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.perfil-card-link:hover .perfil-card {
    border-color: var(--blue-200);
    box-shadow: 0 4px 18px rgba(18, 72, 201, 0.12);
    transform: translateY(-1px);
}

.perfil-avatar-foto {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.perfil-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.perfil-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.perfil-nome {
    font-weight: bold;
    color: var(--text-dark);
    font-size: 0.98rem;
}

.perfil-detalhe {
    font-size: 0.85rem;
    color: #7c8ba8;
}

/* ----- Cabeçalho e formulário da aba Perfil ----- */
.perfil-cabecalho {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.perfil-foto-grande {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.perfil-avatar-grande {
    width: 68px;
    height: 68px;
    font-size: 1.6rem;
}

.perfil-nome-grande {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    color: var(--text-dark);
    font-size: 1.15rem;
}

.mensagem-perfil {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.perfil-visualizacao {
    margin-bottom: 20px;
}

.perfil-campo-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-mid);
    margin-top: 14px;
    margin-bottom: 4px;
}

.perfil-campo-valor {
    color: var(--text-dark);
    font-size: 0.98rem;
}

.perfil-vazio {
    color: #9aa8c7;
    font-style: italic;
}

.perfil-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5eaf5;
}

/* Tamanho único dos 5 botões do perfil (mude aqui pra ajustar todos de uma vez) */
.perfil-links {
    --perfil-btn-largura: 220px;
    --perfil-btn-altura: 42px;
}

/* Botão de amizade (desenhado pelo amizades.js) com o mesmo tamanho dos links */
.perfil-links .amizade-bloco .btn,
.perfil-links .amizade-bloco button {
    box-sizing: border-box;
    width: var(--perfil-btn-largura);
    min-height: var(--perfil-btn-altura);
    margin-top: 0;
}

/* Links do perfil com o mesmo visual compacto do botão "Adicionar amigo" */
.perfil-link-editar,
.perfil-link-sair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: flex-start;
    box-sizing: border-box;
    width: var(--perfil-btn-largura);
    min-height: var(--perfil-btn-altura);
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 72, 201, 0.25);
    transition: box-shadow 0.2s, transform 0.15s, background 0.2s;
}

.perfil-link-editar:hover,
.perfil-link-sair:hover {
    box-shadow: 0 8px 24px rgba(18, 72, 201, 0.32);
    transform: translateY(-1px);
}

.perfil-link-editar:active,
.perfil-link-sair:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(18, 72, 201, 0.22);
}

/* Sair da conta: mesmo formato, mas vermelho */
.perfil-link-sair {
    background: linear-gradient(135deg, #e14b4b, #c42d2d);
    box-shadow: 0 6px 18px rgba(196, 45, 45, 0.25);
}

.perfil-link-sair:hover {
    box-shadow: 0 8px 24px rgba(196, 45, 45, 0.32);
}

.perfil-link-sair:active {
    box-shadow: 0 4px 12px rgba(196, 45, 45, 0.22);
}

.form-perfil textarea,
.form-perfil select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #dde4f0;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #f8faff;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-perfil textarea:focus,
.form-perfil select:focus {
    border-color: var(--blue-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

.form-perfil textarea {
    resize: vertical;
}

/* campo travado (ex.: tipo de conta de professor/servidor, ou ex-aluno) */
.form-perfil select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* uma formação do professor: nível (select) + nome do curso (input) */
.formacao-linha select {
    margin-bottom: 8px;
}

/* aviso amarelo no perfil (ex.: "virar ex-aluno é para sempre") */
.aviso-perfil {
    background: #fff4e0;
    color: #8a5a00;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 8px 0 0;
}

.form-perfil input[type="file"] {
    width: 100%;
    padding: 8px 0;
    border: none;
    background: none;
}

/* ----- Campo genérico com label (form-perfil e painel de filtro da Busca) ----- */
.form-group {
    margin-bottom: 1.1rem;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 0.45rem;
    letter-spacing: 0.02em;
}

.form-perfil input[type="text"],
.form-perfil input[type="number"],
.painel-filtro select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #dde4f0;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #f8faff;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-perfil input[type="text"]:focus,
.form-perfil input[type="number"]:focus,
.painel-filtro select:focus {
    border-color: var(--blue-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

/* ----- Busca: botão de filtro e painel de faculdade/curso ----- */
.btn-filtro {
    flex-shrink: 0;
    background: #eef2fb;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0 18px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue-500);
    cursor: pointer;
    transition: background 0.15s;
}

.btn-filtro:hover {
    background: var(--blue-100);
}

.painel-filtro {
    background: #f8faff;
    border: 1px solid #e5eaf5;
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.painel-filtro-acoes {
    display: flex;
    gap: 8px;
}

.painel-filtro-acoes .btn {
    flex: 1;
    margin-top: 0;
}

.btn-limpar-filtro {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-pill);
    background: none;
    border: 1.5px solid #dde4f0;
    color: #7c8ba8;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s;
}

.btn-limpar-filtro:hover {
    border-color: var(--blue-200);
    color: var(--blue-500);
}

/* ----- Botão sólido padrão (usado em Fórum, Perfil, Eventos etc.) ----- */
.btn {
    display: inline-block;
    width: 100%;
    padding: 0.8rem 1.2rem;
    margin-top: 6px;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 72, 201, 0.25);
    transition: box-shadow 0.2s, transform 0.15s, background 0.2s;
}

.btn:hover {
    box-shadow: 0 8px 24px rgba(18, 72, 201, 0.32);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(18, 72, 201, 0.22);
}

/* ----- Fórum: formulário de post ----- */
.form-post textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #dde4f0;
    border-radius: var(--radius-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #f8faff;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-post textarea:focus {
    border-color: var(--blue-400);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

.form-post {
    margin-bottom: 26px;
    padding: 18px 18px 20px;
    background: #f8faff;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(18, 72, 201, 0.08);
}

/* ----- Fórum: lista de posts ----- */
.lista-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-card {
    position: relative;
    padding: 22px 22px 18px;
    background: #ffffff;
    border: 1px solid var(--borda-suave);
    border-radius: 18px;
    box-shadow: 0 2px 14px rgba(18, 72, 201, 0.06);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.post-card:hover {
    box-shadow: 0 8px 26px rgba(18, 72, 201, 0.12);
    border-color: var(--blue-100);
}

.post-conteudo {
    min-width: 0;
}

.post-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    color: var(--text-dark);
    font-size: 1.25rem;
    text-decoration: none;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.post-meta {
    font-size: 0.8rem;
    color: #93a1c2;
    margin-bottom: 8px;
}

.post-texto {
    color: #2c3e50;
    font-size: 0.94rem;
    line-height: 1.55;
    margin-bottom: 12px;
    white-space: pre-wrap;
    max-width: 70ch;
}

.post-comentarios-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--blue-600);
    background: #eef2fb;
    text-decoration: none;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    transition: background 0.15s;
}

.post-comentarios-link:hover {
    background: var(--blue-100);
}

/* ----- Fórum: linha de ações do post (curtir + comentários) ----- */
.post-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.post-acoes form {
    margin: 0;
}

.btn-curtir-post {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eef2fb;
    border: none;
    color: var(--blue-600);
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
}

.btn-curtir-post .icone-curtir {
    transition: transform 0.25s ease;
}

.btn-curtir-post:hover {
    background: var(--blue-100);
    transform: translateY(-1px);
}

.btn-curtir-post.ativo {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(18, 72, 201, 0.35);
}

.btn-curtir-post.ativo .icone-curtir {
    transform: scale(1.18);
}

.btn-curtir-post:active .icone-curtir {
    transform: scale(0.85);
}

/* ----- Fórum: comentários ----- */
.lista-comentarios {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f6f8fd;
    border-radius: var(--radius-sm);
    padding: 16px;
}

.comentario-card {
    background: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(18, 72, 201, 0.07);
}

.comentario-autor {
    font-weight: 800;
    color: var(--text-dark);
    font-size: 0.88rem;
}

.comentario-texto {
    color: #2c3e50;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 4px 0 8px;
}

.comentario-data {
    font-size: 0.75rem;
    color: #a9b6d4;
}

/* ----- Fórum: galeria de mídias do post (fotos/vídeos guardados no banco) ----- */
.post-midias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 160px));
    gap: 8px;
    margin-bottom: 10px;
}

.post-midia-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #e8edfa;
}

.post-midia-item img,
.post-midia-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-midia-remover {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 2px solid transparent;
}

.post-midia-remover:has(input:checked) {
    border-color: #d63b3b;
    opacity: 0.55;
}

.post-midia-remover-marca {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(8, 20, 74, 0.65);
    color: white;
    font-size: 0.72rem;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ----- Fórum: formulário rápido de comentário ----- */
.form-comentario {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.form-comentario input[type="text"] {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 1.5px solid #e5eaf5;
    border-radius: var(--radius-pill);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text-dark);
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-comentario input[type="text"]:focus {
    border-color: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

.form-comentario .btn {
    width: auto;
    padding: 0.65rem 1.2rem;
    margin-top: 0;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
}

/* ----- Fórum: avatar pequeno (autor do post / de um comentário) ----- */
.avatar-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #ffffff, 0 2px 6px rgba(18, 72, 201, 0.18);
}

.avatar-mini-inicial {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-mini-comentario {
    width: 26px;
    height: 26px;
}

/* Avatar clicável que leva ao perfil do usuário (Fórum, Eventos, Direct) */
.link-perfil {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.link-perfil:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

.evento-avatar-foto {
    object-fit: cover;
}

.post-autor-linha {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.post-autor-linha .post-meta {
    margin-bottom: 0;
}

/* ----- Fórum: dropdown "Ordenar por" dos comentários ----- */
.ordenar-comentarios {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5eaf5;
}

.ordenar-comentarios label {
    font-size: 0.78rem;
    color: #7c8ba8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ordenar-comentarios select {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    background: #ffffff;
    border: 1.5px solid #e5eaf5;
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 8px rgba(18, 72, 201, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ordenar-comentarios select:focus,
.ordenar-comentarios select:hover {
    border-color: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.14);
}

/* ----- Fórum: cabeçalho do comentário (avatar + nome + data) ----- */
.comentario-cabecalho {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 2px;
}

.comentario-cabecalho > div {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

/* ----- Fórum: ações do comentário (curtir / responder / excluir) ----- */
.comentario-acoes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.comentario-acoes form {
    margin: 0;
}

.btn-curtir,
.btn-responder,
.btn-excluir-comentario {
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    transition: background 0.15s, color 0.15s;
}

.btn-curtir {
    background: #f6f8fd;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: #7c8ba8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-curtir:hover {
    background: #ffe9e9;
    color: #d63b3b;
}

.btn-curtir.ativo {
    background: #ffe9e9;
    color: #d63b3b;
    font-weight: 700;
}

.btn-responder {
    background: #eef2fb;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--blue-500);
}

.btn-responder:hover {
    background: var(--blue-100);
}

.btn-excluir-comentario {
    background: none;
    border: none;
    color: #d63b3b;
    font-size: 0.78rem;
    cursor: pointer;
    opacity: 0.75;
}

.btn-excluir-comentario:hover {
    background: #ffe9e9;
    opacity: 1;
}

/* ----- Fórum: respostas a um comentário ("mini lobby" estilo TikTok) ----- */
.comentario-resposta {
    margin-left: 30px;
    margin-top: 10px;
    background: #fbfcff;
    border-left: 3px solid var(--blue-200);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: none;
}

.btn-ver-respostas {
    background: none;
    border: none;
    color: var(--blue-500);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0 4px 30px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-ver-respostas::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--blue-200);
    display: inline-block;
}

.lista-respostas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.form-resposta {
    margin-left: 30px;
    margin-top: 10px !important;
}


/* ----- Eventos: layout de feed ----- */
.btn-novo-evento {
    display: inline-block;
    width: auto;
    padding: 0.7rem 1.4rem;
    margin-bottom: 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 14px;
}

.lista-eventos {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;   /* card mais largo */
    margin: 0 auto;
}

.evento-card {
    background: #ffffff;
    border: 1px solid var(--borda-suave);
    border-radius: 18px;
    overflow: hidden;
}

.evento-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
}

.evento-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    flex-shrink: 0;
}

.evento-autor-bloco {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.evento-autor-nome {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.92rem;
}

.evento-tempo {
    font-size: 0.78rem;
    color: #9aa8c7;
}

/* Menu "..." nativo em HTML (details/summary), sem precisar de JS */
.evento-menu {
    position: relative;
    flex-shrink: 0;
}

.evento-menu summary {
    list-style: none;
    cursor: pointer;
    font-size: 1.3rem;
    color: #9aa8c7;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}

.evento-menu summary::-webkit-details-marker {
    display: none;
}

.evento-menu[open] summary {
    background: #eef2fb;
    color: var(--blue-500);
}

.evento-menu-opcoes {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
    background: white;
    border: 1px solid #e5eaf5;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    min-width: 140px;
    overflow: hidden;
}

.evento-menu-opcoes a,
.evento-menu-opcoes button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    font-size: 0.88rem;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
}

.evento-menu-opcoes a {
    color: var(--blue-500);
}

.evento-menu-opcoes button {
    color: #d63b3b;
}

.evento-menu-opcoes a:hover,
.evento-menu-opcoes button:hover {
    background: #f8faff;
}

.evento-menu-opcoes form {
    margin: 0;
}

.evento-corpo {
    padding: 12px 16px 14px;
}

.evento-titulo-bloco {
    padding: 0 16px 8px;
}

.evento-titulo {
    display: block;
    font-family: var(--fonte-titulo);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-weight: 900;
    color: var(--text-dark);
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 0;
}

.evento-descricao {
    color: #2c3e50;
    font-size: 0.92rem;
    margin-bottom: 8px;
}

.evento-data-evento {
    font-size: 0.85rem;
    color: var(--blue-600);
    font-weight: 600;
    display: inline-block;
    background: #eef2fb;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.evento-imagem {
    display: block;
    width: 100%;
    height: auto;          /* mantém a proporção original da imagem */
    max-height: 640px;     /* evita imagens muito altas */
    object-fit: contain;   /* mostra a imagem inteira, sem cortar nem esticar */
    object-position: center;
    /* sobras laterais/verticais mostram o mesmo fundo da tela inicial (brasões do CP2) */
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.evento-link-editar {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--blue-500);
    text-decoration: none;
}

/* ----- Rodapé, mesmo estilo de vidro do topo ----- */
.rodape {
    display: none;
    position: fixed;
    z-index: 3;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    right: auto;
    width: min(560px, calc(100% - 24px));
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(6, 23, 90, 0.28);
    padding: 8px;
    gap: 2px;
    justify-content: space-around;
    align-items: center;
}

.rodape.ativo {
    display: flex;
}

.rodape button {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #9aa8c7;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
    flex: 1;
    border-radius: 16px;
    transition: background 0.18s, color 0.18s;
}

.rodape button .icone-rodape {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}

.rodape button.ativo {
    color: var(--blue-600);
    background: var(--blue-50);
    font-weight: 700;
}

/* 7 botões (Fórum, Direct, Momentos, Busca, Jogos, Eventos, Perfil): em celular, texto e espaços
   menores para caber sem cortar ("Momentos" é o nome mais comprido) */
@media (max-width: 480px) {
    .rodape { padding: 6px 4px; gap: 0; width: calc(100% - 16px); }
    .rodape button { padding: 7px 0; font-size: 0.64rem; gap: 3px; min-width: 0; letter-spacing: -0.01em; }
    .rodape button .icone-rodape { font-size: 1.35rem; }
}
@media (max-width: 350px) {
    .rodape { padding: 5px 2px; width: calc(100% - 12px); }
    .rodape button { font-size: 0.55rem; letter-spacing: -0.02em; }
    .rodape button .icone-rodape { font-size: 1.25rem; }
}

/* ----- Ícones SVG de traço (tamanho = font-size do elemento pai) ----- */
.ico {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* ----- Fórum: comentários com rolagem própria (ajuste a altura em max-height) ----- */
.comentarios-rolagem {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 6px 4px 0;
    margin-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--blue-200) transparent;
}

.comentarios-rolagem::-webkit-scrollbar { width: 8px; }

.comentarios-rolagem::-webkit-scrollbar-thumb { background: var(--blue-200); border-radius: 999px; }

/* ----- Fórum: barra de pesquisa ----- */
.busca-forum {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.busca-forum-icone {
    position: absolute;
    left: 16px;
    font-size: 1.25rem;
    color: #7c8ba8;
    pointer-events: none;
}

.busca-forum input[type="search"] {
    width: 100%;
    height: 50px;
    padding: 0 48px 0 46px;
    border: 1.5px solid var(--borda-suave);
    border-radius: var(--radius-pill);
    background: #f8faff;
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.busca-forum input[type="search"]::-webkit-search-cancel-button { display: none; }

.busca-forum input[type="search"]:focus {
    border-color: var(--blue-400);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(58, 126, 246, 0.14);
}

.busca-forum-limpar {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--blue-50);
    color: var(--blue-600);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.busca-forum-resumo { margin: 0 0 14px 6px; font-size: 0.88rem; color: var(--text-mid); }

.post-titulo mark { background: #cfe0ff; color: inherit; padding: 0 2px; border-radius: 4px; }

@media (max-width: 600px) {
    .tela-secao { padding: 24px 14px 120px; border-radius: 22px 22px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================
   Cores dos avatares (a bolinha com a inicial)
   A classe .av-CHAVE é colocada pelo script do index.php (e pelo direct.js).
   O seletor repetido (.av-x.av-x) serve para ganhar do azul padrão de cada tela.
   Para criar uma cor nova: crie a classe aqui e adicione a chave no index.php.
   ========================================================== */
.av-azul.av-azul { background: linear-gradient(135deg, #3b6fe0, #274fb8); }
.av-turquesa.av-turquesa { background: linear-gradient(135deg, #0f9d94, #0b756f); }
.av-verde.av-verde { background: linear-gradient(135deg, #2f9e55, #217a40); }
.av-amarelo.av-amarelo { background: linear-gradient(135deg, #d98a0b, #b06a05); }
.av-laranja.av-laranja { background: linear-gradient(135deg, #e8692a, #c24e16); }
.av-vermelho.av-vermelho { background: linear-gradient(135deg, #d94444, #b32f2f); }
.av-rosa.av-rosa { background: linear-gradient(135deg, #d6407f, #b02a66); }
.av-roxo.av-roxo { background: linear-gradient(135deg, #8b5cd6, #6c41b3); }
.av-cinza.av-cinza { background: linear-gradient(135deg, #66758c, #4a576b); }

/* ----- Seletor de cor do avatar (Perfil > Editar) ----- */
.cores-avatar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cor-opcao { position: relative; cursor: pointer; }
.cor-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }

.cor-bolinha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    border: 3px solid transparent;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}

.cor-bolinha-auto {
    background: conic-gradient(#d94444, #e8692a, #d98a0b, #2f9e55, #0f9d94, #3b6fe0, #8b5cd6, #d6407f, #d94444);
    font-size: 0.7rem;
}

.cor-opcao:hover .cor-bolinha { transform: scale(1.08); }
.cor-opcao input:checked + .cor-bolinha { box-shadow: 0 0 0 2px var(--text-dark, #08144a); border-color: #ffffff; }
.cor-opcao input:focus-visible + .cor-bolinha { box-shadow: 0 0 0 3px var(--blue-400); }
html[data-theme="dark"] .cor-opcao input:checked + .cor-bolinha { box-shadow: 0 0 0 2px #ffffff; border-color: #0e1429; }

/* ----- Fórum: coração vazio quando NÃO curtiu, cheio quando curtiu ----- */
.btn-curtir-post .icone-curtir path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill 0.2s ease;
}

.btn-curtir-post.ativo .icone-curtir path {
    fill: currentColor;
}

/* ----- Fórum: link "Ver curtidas" ao lado do botão de curtir ----- */
.btn-ver-curtidas {
    background: none;
    border: none;
    padding: 4px 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-mid);
    cursor: pointer;
    border-radius: var(--radius-pill);
}

.btn-ver-curtidas[hidden] {
    display: none;
}

.btn-ver-curtidas:hover {
    color: var(--blue-500);
    text-decoration: underline;
}

/* ----- Janela "Curtidas" (parecida com a do Instagram, sem botão de seguir) ----- */
.curtidas-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 23, 90, 0.55);
}

.curtidas-overlay[hidden] {
    display: none;
}

.curtidas-janela {
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-height: 80vh;
    max-height: 80dvh;
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow-blue);
    overflow: hidden;
}

.curtidas-topo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 14px 48px;
    border-bottom: 1px solid var(--blue-100);
    font-size: 1rem;
}

.curtidas-fechar {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 50%;
}

.curtidas-fechar:hover {
    background: var(--blue-50);
}

.curtidas-lista {
    overflow-y: auto;
    padding: 6px 0;
}

.curtidas-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
}

.curtidas-item:hover {
    background: var(--blue-50);
}

.curtidas-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}

.curtidas-nome {
    font-weight: 700;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curtidas-vazio {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-mid);
}

/* ----- Busca de pessoas: pesquisa automática (usa o visual da pesquisa do Fórum) ----- */
.busca-pessoas-linha {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 14px;
}
.busca-pessoas-linha .busca-forum {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.busca-pessoas-linha .btn-filtro {
    border-radius: var(--radius-pill);
}
.btn-limpar-filtro {
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
}
.perfil-nome mark {
    background: #cfe0ff;
    color: inherit;
    padding: 0 2px;
    border-radius: 4px;
}

/* ----- Busca de pessoas: contas sugeridas (tela vazia) -----
   Uma coluna só, em qualquer tamanho de tela: o texto corta com "…" em vez de
   empurrar o botão para fora, e o botão tem altura boa para o toque. */
.sug { margin-top: 4px; }
.sug[hidden] { display: none; }

.sug-titulo {
    font-family: var(--fonte-titulo);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-mid);
    margin: 0 0 10px 6px;
}

.sug-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sug-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid var(--borda-suave);
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sug-item:hover {
    border-color: var(--blue-200);
    box-shadow: 0 4px 18px rgba(18, 72, 201, 0.12);
}

.sug-perfil {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;              /* essencial: deixa o texto encolher e cortar com "…" */
    text-decoration: none;
    color: inherit;
}

.sug-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.sug-nome,
.sug-detalhe,
.sug-comum {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sug-detalhe { font-size: 0.82rem; }
.sug-comum {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-500);
}

.sug-btn {
    flex-shrink: 0;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(18, 72, 201, 0.22);
    transition: box-shadow 0.2s, opacity 0.2s;
}
.sug-btn:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(18, 72, 201, 0.34); }
.sug-btn:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 2px; }
.sug-btn:disabled { cursor: default; opacity: 0.7; }
.sug-btn.sug-btn-feito {
    background: var(--blue-50);
    color: var(--blue-600);
    box-shadow: none;
    opacity: 1;
}

@media (max-width: 400px) {
    .sug-item { padding: 9px 10px; gap: 8px; }
    .sug-perfil { gap: 10px; }
    .sug-btn { padding: 0 12px; font-size: 0.78rem; }
}


/* ==========================================================
   Momentos (fotos do perfil) — grade quadrada ao lado da bio,
   janela da foto expandida e janela "Poste seus momentos"
   ========================================================== */

/* Perfil em duas colunas: dados à esquerda, fotos no espaço que sobra à direita */
.perfil-layout.com-momentos {
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.perfil-col-momentos {
    min-width: 0;
    padding-left: 24px;
    border-left: 1px solid #e5eaf5;
}

.momentos-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.momentos-titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.momentos-btn-postar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 72, 201, 0.25);
    transition: box-shadow 0.2s, transform 0.15s;
}

.momentos-btn-postar:hover {
    box-shadow: 0 8px 24px rgba(18, 72, 201, 0.32);
    transform: translateY(-1px);
}

.momentos-btn-postar:active { transform: translateY(0); }

.momentos-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.momento-quadrado {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background: var(--blue-50);
    cursor: pointer;
}

.momento-quadrado img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease, filter 0.2s;
}

.momento-quadrado:hover img { transform: scale(1.05); filter: brightness(0.92); }
.momento-quadrado:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.momentos-vazio {
    border: 2px dashed var(--blue-100);
    border-radius: var(--radius-sm);
    padding: 36px 16px;
    text-align: center;
    color: #7c8ba8;
    font-size: 0.92rem;
}

/* ----- Janelas (foto expandida e postar) ----- */
body.momento-aberto { overflow: hidden; }

.momento-overlay {
    position: fixed;
    inset: 0;
    z-index: 900; /* abaixo da janela "Curtidas" (1000), que abre por cima */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 23, 90, 0.72);
}

.momento-overlay[hidden] { display: none; }

.momento-fechar {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #08144a;
    font-size: 1.05rem;
    cursor: pointer;
}

.momento-fechar:hover { background: #ffffff; }

.momento-janela {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    width: min(980px, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow-blue);
    overflow: hidden;
}

.momento-imagem-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: #0b1233;
}

.momento-imagem-wrap img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    max-height: 90dvh;
    object-fit: contain;
}

.momento-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #08144a;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3px;
}

.momento-nav[hidden] { display: none; }
.momento-nav:hover { background: #ffffff; }
.momento-prev { left: 10px; }
.momento-next { right: 10px; }

.momento-lateral {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    overflow-y: auto;
}

.momento-autor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 36px; /* espaço pro X de fechar no celular */
    color: var(--text-dark);
    font-weight: 700;
    text-decoration: none;
}

.momento-autor:hover span { text-decoration: underline; }

.momento-autor-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.momento-data {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-mid);
}

.momento-desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.momento-desc[hidden] { display: none; }

.momento-acoes {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e5eaf5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.momento-excluir {
    margin-left: auto;
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: var(--radius-pill);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #c42d2d;
    cursor: pointer;
}

.momento-excluir[hidden] { display: none; }
.momento-excluir:hover { background: rgba(196, 45, 45, 0.1); }
.momento-excluir:disabled { opacity: 0.5; cursor: wait; }

/* ----- Janela "Poste seus momentos" ----- */
.postar-janela {
    width: min(440px, 100%);
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    box-shadow: var(--shadow-blue);
}

.postar-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf5;
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
}

.postar-fechar {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-mid);
    font-size: 1rem;
    cursor: pointer;
}

.postar-fechar:hover { background: var(--blue-50); }

.postar-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
}

.postar-escolher {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    border: 2px dashed var(--blue-200);
    border-radius: var(--radius-sm);
    background: var(--blue-50);
    color: var(--blue-600);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.postar-escolher:hover { border-color: var(--blue-400); }
.postar-escolher:focus-within { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.postar-escolher span[hidden],
.postar-escolher img[hidden] { display: none; }

.postar-escolher > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.postar-escolher small { font-weight: 500; color: var(--text-mid); }

.postar-escolher img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.postar-label {
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
}

.postar-label span { font-weight: 500; color: var(--text-mid); }

.postar-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1.5px solid var(--blue-100);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    resize: vertical;
}

.postar-form textarea:focus { outline: none; border-color: var(--blue-400); }

.postar-contador {
    margin: -4px 2px 0 0;
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-mid);
}

.postar-erro {
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: #fdecea;
    color: #b3261e;
    font-size: 0.88rem;
}

.postar-erro[hidden] { display: none; }
.postar-form .btn:disabled { opacity: 0.65; cursor: wait; }

/* ----- Celular / telas estreitas ----- */
@media (max-width: 720px) {
    .perfil-layout.com-momentos {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .perfil-col-momentos {
        padding-left: 0;
        border-left: none;
        padding-top: 18px;
        border-top: 1px solid #e5eaf5;
    }

    .momento-janela {
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }

    .momento-imagem-wrap img { max-height: 58vh; max-height: 58dvh; }
}


/* ----- Imagem ampliada (lightbox.js): perfil, fotos do chat do Direct e dos posts do Fórum -----
   Pensado para celular: respeita o "notch"/barra do sistema, ocupa a tela toda (dvh),
   não deixa a página de trás rolar e aceita pinça / arrastar / deslizar (veja lightbox.js). */
img[data-lightbox] { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
body.lightbox-aberto { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100; /* acima de todas as outras janelas */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background: rgba(6, 10, 30, 0.88);
    cursor: zoom-out;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;                 /* os gestos são tratados pelo lightbox.js */
    -webkit-user-select: none;
    user-select: none;
    animation: lightbox-entra 0.16s ease-out;
}
.lightbox[hidden] { display: none; }

@keyframes lightbox-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    max-height: calc(100dvh - 32px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    touch-action: none;
    will-change: transform;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;        /* sem o menu "salvar imagem" ao segurar o dedo */
}

.lightbox-fechar,
.lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #08144a;
    cursor: pointer;
    touch-action: manipulation;
}
.lightbox-fechar:hover,
.lightbox-nav:hover { background: #ffffff; }
.lightbox-fechar:focus-visible,
.lightbox-nav:focus-visible {
    outline: 3px solid #a8d4ff;
    outline-offset: 2px;
}
.lightbox-fechar {
    top: max(12px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 44px;                        /* alvo de toque confortável no celular */
    height: 44px;
    font-size: 1.1rem;
    z-index: 2;
}
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding-bottom: 3px;
    font-size: 1.7rem;
    line-height: 1;
    z-index: 2;
}
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { left: max(12px, env(safe-area-inset-left)); }
.lightbox-next { right: max(12px, env(safe-area-inset-right)); }

/* celular: as setas laterais ficam mais discretas (dá para deslizar para trocar de foto) */
@media (hover: none) and (pointer: coarse) {
    .lightbox-nav { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox { animation: none; }
}

/* foto de perfil do cartão: clicável, com foco visível para quem usa teclado */
.perfil-foto-grande[data-lightbox] { cursor: zoom-in; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.perfil-foto-grande[data-lightbox]:active { transform: scale(0.97); }
.perfil-foto-grande[data-lightbox]:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }
@media (hover: hover) {
    .perfil-foto-grande[data-lightbox]:hover { box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.35); }
}


/* ==========================================================
   Cartão do perfil (PerfilCartao.php): avatar, nome, campus,
   respostas à direita, tags, caixa de conexões e abas
   ========================================================== */
.pf-card {
    /* sem cor nem borda próprias: o cartão e o quadrado do Perfil são uma coisa só,
       assim o fundo escolhido (cor, imagem ou padrão) corre por trás de tudo */
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 4px 0 0;
    margin-bottom: 8px;
}

.pf-topo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 16px;
}

.pf-ident { flex: 1 1 220px; min-width: 0; }

/* nome + etiqueta do Instagram lado a lado (a etiqueta desce pra baixo do nome em telas estreitas) */
.pf-nome-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pf-insta {
    --ig-grad: linear-gradient(45deg, #fdc468 0%, #f58529 22%, #dd2a7b 55%, #8134af 80%, #515bd4 100%);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 13px 5px 7px;
    border-radius: 999px;
    background: rgba(221, 42, 123, 0.08);
    color: #b0166f;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
/* borda em degradê (só a borda, o miolo continua transparente) */
.pf-insta::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--ig-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
.pf-insta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-insta-ico { flex: 0 0 auto; width: 20px; height: 20px; }
.pf-insta:hover {
    transform: translateY(-1px);
    background: rgba(221, 42, 123, 0.16);
    box-shadow: 0 4px 14px rgba(221, 42, 123, 0.32);
    color: #b0166f;
}
.pf-insta:focus-visible { outline: 3px solid #dd2a7b; outline-offset: 2px; }
/* fundos escuros (modo escuro ou fundo escuro escolhido no perfil): miolo claro translúcido e texto rosado claro */
html[data-theme="dark"] .pf-insta,
.tela-secao.pers-bg-escuro .pf-insta { background: rgba(255, 255, 255, 0.07); color: #ffd3ea; }
html[data-theme="dark"] .pf-insta:hover,
.tela-secao.pers-bg-escuro .pf-insta:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.pf-nome { margin: 0; font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.pf-sub { margin: 3px 0 0; font-size: 0.88rem; color: var(--text-mid); }
.pf-campus { margin: 2px 0 0; font-size: 0.88rem; font-weight: 600; color: var(--blue-600); }

.pf-card .tags-perfil { margin: 12px 0 0; }

/* caixa de conexões: à direita do topo do cartão */
.pf-stat {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 150px;
    padding: 12px 22px;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}
.pf-stat strong {
    display: block;
    font-family: var(--fonte-titulo);
    font-size: 1.35rem;
    color: var(--blue-600);
}
.pf-stat span { font-size: 0.86rem; color: var(--text-mid); }

.pf-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-top: 14px;
}
.pf-abas { display: flex; flex-wrap: wrap; gap: 8px; }

/* ações (Adicionar amigo / Mensagem) à direita das abas */
.pf-acoes { display: flex; align-items: center; gap: 8px; }
.pf-acoes .amizade-bloco { align-items: stretch; gap: 4px; }
.pf-acoes .amz-btn,
.pf-btn-msg {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}
.pf-btn-msg {
    border: 1px solid var(--blue-500);
    background: #ffffff;
    color: var(--blue-600);
    text-decoration: none;
}
.pf-btn-msg:hover { background: var(--blue-50); }
.pf-aba {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #ffffff;
    color: var(--text-dark);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pf-aba:hover { background: #dbe6ff; }
.pf-aba.ativa {
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
}

.pf-painel[hidden] { display: none; }

@media (max-width: 720px) {
    .pf-stat { margin-left: 0; min-width: 0; width: 100%; }
    /* celular: abas numa linha e, logo abaixo, os dois botões dividindo a largura */
    .pf-barra { flex-direction: column; align-items: stretch; }
    .pf-acoes { width: 100%; }
    .pf-acoes .amizade-bloco,
    .pf-acoes .pf-btn-msg { flex: 1 1 0; min-width: 0; }
    .pf-acoes .amz-btn { width: 100%; }
}


/* ==========================================================
   Comentários dos Momentos (momentoscomentarios.js)
   PC: ficam na coluna da direita, abaixo das curtidas.
   Celular: viram uma gaveta que sobe de baixo (.mc.aberta).
   ========================================================== */
.momento-acoes { margin-top: 0; }

.momento-btn-comentar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-pill);
    background: #eef2fb;
    color: var(--blue-600);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s;
}
.momento-btn-comentar:hover { background: var(--blue-100); transform: translateY(-1px); }

.mc {
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--text-dark);
}

.mc-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0 6px;
}
.mc-titulo { font-size: 0.95rem; }
.mc-titulo span { font-weight: 500; color: var(--text-mid); }

.mc-fechar {
    display: none; /* só no celular */
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #f1f4fb;
    color: var(--text-mid);
    font-size: 1rem;
    cursor: pointer;
}

.mc-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 8px;
}

.mc-vazio {
    margin: 0;
    padding: 28px 8px;
    text-align: center;
    color: #7c8ba8;
    font-size: 0.9rem;
}
.mc-vazio-erro { color: #c42d2d; }

.mc-bloco { margin-bottom: 4px; }

.mc-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 8px 0;
    border-radius: 12px;
}

.mc-av-link { display: block; text-decoration: none; }

.mc-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
}

.mc-corpo { min-width: 0; }

.mc-linha {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.mc-nome {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}
.mc-nome:hover { text-decoration: underline; }
.mc-marca { color: var(--blue-600); font-weight: 600; }
.mc-texto { white-space: pre-wrap; }

.mc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    margin-top: 2px;
    font-size: 0.78rem;
    color: #7c8ba8;
}
.mc-tempo { margin-right: 6px; }

.mc-acao {
    padding: 6px 8px;
    margin: -4px 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: #6a7aa0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.mc-acao:hover { background: rgba(26, 92, 240, 0.08); color: var(--blue-600); }
.mc-acao-excluir:hover,
.mc-acao-excluir.confirmar { background: rgba(196, 45, 45, 0.1); color: #c42d2d; }
.mc-acao:disabled { opacity: 0.5; cursor: wait; }

.mc-curtir {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 44px;
    min-height: 44px;
    margin: -6px -6px 0 0;
    padding: 4px;
    border: none;
    border-radius: 12px;
    background: none;
    color: #9aa8c7;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.mc-curtir svg { transition: transform 0.2s; }
.mc-curtir:hover { color: #e53935; }
.mc-curtir.ativo { color: #e53935; }
.mc-curtir.ativo svg { transform: scale(1.12); filter: drop-shadow(0 0 4px rgba(229, 57, 53, 0.45)); }
.mc-curtir:active svg { transform: scale(0.85); }
.mc-curtir-n:empty { display: none; }

.mc-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px 44px;
    padding: 6px 0;
    border: none;
    background: none;
    color: #6a7aa0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}
.mc-toggle::before {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.mc-toggle:hover { color: var(--blue-600); }

.mc-respostas { margin-left: 44px; }
.mc-resposta .mc-avatar { width: 26px; height: 26px; font-size: 0.72rem; }
.mc-resposta { gap: 8px; }

.mc-novo { animation: mc-destaque 1.6s ease-out; }
@keyframes mc-destaque {
    0%   { background: rgba(26, 92, 240, 0.16); }
    100% { background: transparent; }
}

/* ----- caixa de escrever ----- */
.mc-form {
    flex: 0 0 auto;
    padding-top: 8px;
    border-top: 1px solid #e5eaf5;
}

.mc-respondendo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 6px 6px 12px;
    border-radius: 10px;
    background: var(--blue-50);
    color: var(--text-mid);
    font-size: 0.82rem;
}
.mc-respondendo[hidden],
.mc-erro[hidden],
.mc-contador[hidden] { display: none; }
.mc-respondendo strong { color: var(--text-dark); }
.mc-respondendo button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.mc-respondendo button:hover { background: rgba(0, 0, 0, 0.06); }

.mc-erro {
    margin: 0 0 6px;
    padding: 7px 10px;
    border-radius: 10px;
    background: #fdecea;
    color: #b3261e;
    font-size: 0.82rem;
}

.mc-campo {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 4px 4px 4px 14px;
    border: 1px solid #dde4f0;
    border-radius: 24px;
    background: #f7f9fe;
}
.mc-campo:focus-within { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(26, 92, 240, 0.14); }

.mc-campo textarea {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 120px;
    padding: 9px 0;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    line-height: 1.35;
}

.mc-enviar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.mc-enviar:disabled { opacity: 0.35; cursor: default; }
.mc-enviar:not(:disabled):active { transform: scale(0.92); }

.mc-contador {
    margin: 4px 12px 0 0;
    text-align: right;
    font-size: 0.72rem;
    color: #7c8ba8;
}

.mc button:focus-visible,
.mc a:focus-visible,
.momento-btn-comentar:focus-visible {
    outline: 3px solid rgba(26, 92, 240, 0.45);
    outline-offset: 2px;
}

/* ----- PC: janela com altura fixa, comentários rolam por dentro ----- */
@media (min-width: 721px) {
    .momento-janela { height: min(680px, 88vh); height: min(680px, 88dvh); }
    .momento-imagem-wrap { min-height: 0; }
    .momento-imagem-wrap img { max-height: min(680px, 88vh); max-height: min(680px, 88dvh); }
    .mc { flex: 1 1 auto; min-height: 220px; }
}

/* ----- Celular: gaveta ----- */
@media (max-width: 720px) {
    .mc {
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--mc-teclado, 0px);
        z-index: 950;
        height: min(76vh, 620px);
        height: min(76dvh, 620px);
        max-height: calc(100dvh - var(--mc-teclado, 0px) - 16px);
        padding: 6px 16px 0;
        background: var(--white);
        border-radius: 20px 20px 0 0;
        /* o 100vmax escurece o resto da tela atrás da gaveta */
        box-shadow: 0 0 0 100vmax rgba(6, 23, 90, 0.45), 0 -10px 40px rgba(6, 23, 90, 0.35);
    }
    .mc.aberta {
        display: flex;
        animation: mc-sobe 0.22s ease-out;
    }
    /* "alça" da gaveta */
    .mc-topo { position: relative; padding-top: 16px; }
    .mc-topo::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 50%;
        width: 38px;
        height: 4px;
        margin-left: -19px;
        border-radius: 4px;
        background: #cdd6ea;
    }
    .mc-fechar { display: block; }
    .mc-form {
        padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    }
    /* 16px evita o zoom automático do iPhone ao tocar no campo */
    .mc-campo textarea { font-size: 16px; }
    .mc-linha { font-size: 0.95rem; }
    .momento-acoes { gap: 8px; }
    .momento-btn-comentar,
    .momento-acoes .btn-curtir-post { min-height: 42px; }
    body.mc-gaveta-aberta .momento-janela { overflow: hidden; }
}

@keyframes mc-sobe {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mc.aberta, .mc-novo { animation: none; }
}


/* ----- Aviso "novos posts" do fórum (forumlive.js) ----- */
.forum-novidades {
    position: sticky;
    top: 12px;
    z-index: 30;
    display: block;
    margin: 0 auto 14px;
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--blue-500);
    color: #fff;
    font-family: var(--fonte-corpo);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(18, 72, 201, 0.35);
    animation: forum-novidades-entra 0.25s ease-out;
}

.forum-novidades:hover { background: var(--blue-600); }

@keyframes forum-novidades-entra {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ----- Editar perfil: aviso do envio automático da foto (perfilfoto.js) ----- */
.foto-status {
    margin: 8px 0 0;
    font-size: 0.85rem;
    font-weight: 700;
}
.foto-status[hidden] { display: none; }
.foto-status-enviando { color: var(--text-mid); }
.foto-status-ok       { color: #2e9d5b; }
.foto-status-erro     { color: #d64545; }
html[data-theme="dark"] .foto-status-ok   { color: #5fd08a; }
html[data-theme="dark"] .foto-status-erro { color: #ff8a80; }

/* ----- Fórum: abas "Para você" / "Recentes" e rótulo do motivo ----- */
.feed-abas {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: rgba(120, 140, 190, 0.12);
}
.feed-aba {
    flex: 1;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #7c8ba8;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.feed-aba:hover { color: var(--blue-500); }
.feed-aba.ativa { background: var(--blue-500); color: #fff; }

.post-motivo {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: rgba(60, 110, 220, 0.12);
    color: var(--blue-500);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}


/* ==========================================================
   Teclado virtual (celular) — veja teclado.js
   Enquanto o teclado está aberto: some a barra inferior (ela flutuava
   sobre o teclado) e as janelas acompanham a área realmente visível.
   ========================================================== */
@media (pointer: coarse) {
    html.teclado-aberto .rodape { display: none !important; }
    html.teclado-aberto .tela-secao { padding-bottom: 24px; }

    html.teclado-aberto .curtidas-overlay,
    html.teclado-aberto .grp-overlay {
        top: var(--vv-top, 0px);
        bottom: auto;
        height: var(--vv-h, 100%);
    }
    html.teclado-aberto .curtidas-janela,
    html.teclado-aberto .grp-modal {
        max-height: calc(var(--vv-h, 100dvh) - 24px);
    }
}

/* ----- Fórum: "Carregar mais posts" e envio sem recarregar (forummais.js) ----- */
.forum-mais {
    display: flex;
    justify-content: center;
    margin: 18px 0 8px;
}
.forum-mais .forum-mais-btn {
    width: auto;
    min-width: 220px;
    text-align: center;
    text-decoration: none;
}
.forum-mais .forum-mais-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.forum-erro-envio {
    flex-basis: 100%;
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: #c62828;
}
.comentario-card.comentario-novo { animation: comentario-novo-brilho 1.6s ease-out; }
@keyframes comentario-novo-brilho {
    from { box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.45); }
    to   { box-shadow: 0 0 0 3px rgba(58, 126, 246, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .comentario-card.comentario-novo { animation: none; }
}
.comprimir-aviso { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-mid); }

/* ----- Seções sob demanda (index.php + Secao.php) ----- */
.secao-carregando {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-mid);
    font-size: 0.95rem;
}
.secao-carregando a { color: var(--blue-500); font-weight: 600; }

/* ==========================================================
   Denúncias (denuncias.js) e Dev Access (AdminUsuarios.php)
   ========================================================== */
.pf-btn-denunciar {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--borda-suave);
    background: transparent;
    color: var(--text-mid);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pf-btn-denunciar:hover { color: #c62828; border-color: #f2b8b5; }
.btn-denunciar { color: var(--text-mid); }
.btn-denunciar:hover { color: #c62828; }
.chat-denunciar:hover { background: #fdecea; color: #c62828; }
.evento-menu-opcoes button[data-denunciar] { color: #c62828; }

.den-fundo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(6, 23, 90, 0.45);
}
.den-fundo[hidden] { display: none; }
.den-janela {
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--glass-card);
    color: var(--text-dark);
    box-shadow: var(--shadow-card);
}
.den-titulo { margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 1.2rem; }
.den-explica { margin: 0 0 12px; font-size: 0.85rem; color: var(--text-mid); }
.den-motivos { border: 0; margin: 0 0 10px; padding: 0; }
.den-motivos legend { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.den-motivo {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
}
.den-motivo:hover { background: var(--blue-50); }
.den-motivo input { accent-color: var(--blue-500); width: 18px; height: 18px; }
.den-detalhe {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--borda-suave);
    background: transparent;
    color: inherit;
    font: inherit;
    resize: vertical;
}
.den-aviso { margin: 8px 0 0; font-size: 0.85rem; }
.den-aviso.den-erro { color: #c62828; }
.den-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.den-botoes button {
    font: inherit;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 0;
    cursor: pointer;
}
.den-cancelar { background: transparent; color: var(--text-mid); }
.den-enviar { background: #c62828; color: #fff; }
.den-enviar:disabled { opacity: 0.6; cursor: progress; }
.den-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 2100;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    background: var(--text-dark);
    color: var(--glass-card);
    font-size: 0.9rem;
    box-shadow: var(--shadow-card);
    transition: opacity 0.4s;
}
.den-toast.saindo { opacity: 0; }

.dev-abas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 6px 0 16px;
    padding-bottom: 4px;
}
.dev-aba {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--borda-suave);
    background: transparent;
    color: var(--text-mid);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.dev-aba.ativa { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.dev-aba-n {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}
.dev-den-filtro { display: flex; gap: 14px; margin-bottom: 12px; font-size: 0.9rem; }
.dev-den-filtro a { color: var(--text-mid); text-decoration: none; font-weight: 600; }
.dev-den-filtro a.ativo { color: var(--blue-500); text-decoration: underline; }
.dev-den {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--borda-suave);
    background: var(--glass-card);
    color: var(--text-dark);
}
.dev-den-topo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 0.85rem; }
.dev-den-tipo { font-weight: 800; }
.dev-den-qtd { padding: 1px 8px; border-radius: 999px; background: #fdecea; color: #c62828; font-weight: 700; }
.dev-den-autor a { color: var(--blue-500); }
.dev-den-conteudo { padding: 10px 12px; border-radius: 10px; background: var(--blue-50); overflow-wrap: anywhere; }
.dev-den-conteudo p { margin: 6px 0; }
.dev-den-sub { font-size: 0.8rem; color: var(--text-mid); margin: 6px 0 0; }
.dev-den-link { display: inline-block; margin-top: 6px; font-size: 0.85rem; color: var(--blue-500); font-weight: 600; }
.dev-den-conversa { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.dev-den-conversa li { padding: 4px 0; border-bottom: 1px dashed var(--borda-suave); }
.dev-den-conversa li small { color: var(--text-mid); font-size: 0.72rem; }
.dev-den-conversa .dev-den-alvo { background: #fff3cd; color: #5c4400; margin: 0 -6px; padding: 6px; border-radius: 8px; border-bottom: 0; }
.dev-den-midia {
    position: relative;
    display: block;
    margin: 8px 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    max-width: 260px;
}
.dev-den-midia img { display: block; width: 100%; filter: blur(22px); opacity: 0.7; }
.dev-den-midia span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}
.dev-den-midia.revelada img { filter: none; opacity: 1; }
.dev-den-midia.revelada span { display: none; }
.dev-den-motivos { margin: 10px 0; padding-left: 18px; font-size: 0.86rem; }
.dev-den-motivos q { display: block; color: var(--text-mid); margin-top: 2px; }
.dev-den-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-btn-neutro {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--borda-suave);
    background: transparent;
    color: var(--text-mid);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.perfil-link-dev .dev-aba-n { margin-left: 4px; }

/* ---------- Termos / Privacidade (links no perfil e no cadastro) ---------- */
.perfil-links-legal { margin: 4px 0 0; font-size: 0.85rem; text-align: center; color: var(--text-mid); }
.perfil-links-legal a { color: var(--blue-500); font-weight: 600; }
.termos-linha { align-items: flex-start; }
.termos-linha a { color: var(--blue-500); font-weight: 700; }
footer a { color: inherit; font-weight: 600; }
.perfil-titulo-botoes { display: flex; gap: 8px; }
.perfil-config { text-decoration: none; }
.perfil-config .ico { width: 22px; height: 22px; }
.aviso-conta-apagada { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #e7f6ec; color: #1b7a3d; font-weight: 600; font-size: 0.9rem; }
/* cadastro que ainda não confirmou o e-mail (CadastroPendente.php): esperando (azul), cancelado (verde), venceu (laranja) */
.aviso-cadastro { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #eaf1ff; color: #1748b8; font-weight: 600; font-size: 0.9rem; line-height: 1.4; }
.aviso-cadastro.aviso-cadastro-ok { background: #e7f6ec; color: #1b7a3d; }
.aviso-cadastro.aviso-cadastro-fim { background: #fff4e5; color: #9a4a06; }
html[data-theme="dark"] .aviso-cadastro { background: rgba(80, 130, 255, 0.16); color: #a9c4ff; }
html[data-theme="dark"] .aviso-cadastro.aviso-cadastro-ok { background: rgba(60, 180, 100, 0.16); color: #8fe0aa; }
html[data-theme="dark"] .aviso-cadastro.aviso-cadastro-fim { background: rgba(240, 150, 40, 0.16); color: #fbc77a; }

/* ---------- Republicar (posts do Fórum) ---------- */
.post-acoes { flex-wrap: wrap; }
.btn-republicar {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef2fb; border: none; color: var(--blue-600);
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 0.85rem;
    padding: 8px 14px; min-height: 36px; border-radius: var(--radius-pill);
    cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.btn-republicar:hover { background: var(--blue-100); transform: translateY(-1px); }
.btn-republicar:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.btn-republicar .icone-republicar { transition: transform 0.35s ease; }
.btn-republicar.ativo {
    background: linear-gradient(135deg, #17a35a, #0e8044); color: #ffffff;
    box-shadow: 0 4px 14px rgba(14, 128, 68, 0.32);
}
.btn-republicar.ativo .icone-republicar { transform: rotate(180deg); }
.btn-republicar[disabled] { opacity: 0.75; cursor: progress; }
.btn-republicar-info { cursor: default; }
.btn-republicar-info:hover { transform: none; background: #eef2fb; }
.contagem-republicar { font-variant-numeric: tabular-nums; }
@media (max-width: 430px) {
    .republicar-rotulo { display: none; }
}

/* aba "Republicados" do perfil */
.pf-aba-rep-ico { font-size: 0.9em; }
.pf-aba-n {
    display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 7px;
    border-radius: 999px; background: rgba(18, 72, 201, 0.12); font-size: 0.75rem; font-weight: 700; text-align: center;
}
.pf-aba.ativa .pf-aba-n { background: rgba(255, 255, 255, 0.25); }
.rep-lista { display: flex; flex-direction: column; gap: 12px; }
.rep-vazio { text-align: center; padding: 24px 12px; }
.rep-item {
    background: #ffffff; border: 1px solid #e5eaf5; border-radius: 16px; padding: 12px 14px;
}
.rep-quando { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; color: #0e8044; }
.rep-autor { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; min-width: 0; }
.rep-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rep-avatar-letra { display: grid; place-items: center; background: var(--blue-500); color: #fff; font-weight: 700; font-size: 0.8rem; }
.rep-autor-nome { font-weight: 700; color: var(--text-dark); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-autor-nome:hover { text-decoration: underline; }
.rep-data { color: #6b7699; white-space: nowrap; }
.rep-corpo { display: flex; gap: 12px; margin-top: 8px; text-decoration: none; color: inherit; }
.rep-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rep-titulo { color: var(--text-dark); font-size: 0.98rem; line-height: 1.3; overflow-wrap: anywhere; }
.rep-resumo { color: #4a5578; font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; }
.rep-thumb { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #eef2fb; }
.rep-corpo:hover .rep-titulo { color: var(--blue-600); }
.rep-rodape { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 0.85rem; color: #6b7699; flex-wrap: wrap; }
.rep-rodape .btn-republicar { margin-left: auto; padding: 6px 12px; min-height: 32px; }
@media (max-width: 720px) {
    /* 3 abas numa linha só no celular */
    .pf-abas { flex-wrap: nowrap; gap: 6px; }
    .pf-aba { flex: 1 1 auto; padding: 9px 8px; font-size: 0.85rem; white-space: nowrap; text-align: center; }
    .pf-aba-n { margin-left: 2px; padding: 1px 6px; }
    /* Denunciar vira só a bandeirinha, para "Adicionar amigo" e "Mensagem" caberem */
    .pf-den-txt { display: none; }
    .pf-acoes .pf-btn-denunciar { flex: 0 0 auto; }
}
@media (max-width: 400px) {
    .pf-aba-rep-ico { display: none; }
}

/* aba "Posts" do perfil (PerfilPostsForum.php) */
.ppf-quando { margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; color: var(--blue-600); }
.ppf-fixado { color: #b26a00; }
.ppf-item .rep-corpo { margin-top: 2px; }
html[data-theme="dark"] .ppf-quando { color: var(--dm-link); }
html[data-theme="dark"] .ppf-fixado { color: #ffc46b; }
/* 4 abas no celular: 2 linhas de 2 (todas inteiras, sem cortar texto) */
@media (max-width: 560px) {
    .pf-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .pf-aba { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
}

/* Dev Access > Comunidades */
.dev-com-nova { margin: 6px 0 16px; border: 1px solid #e5eaf5; border-radius: 14px; background: #fff; }
.dev-com-nova summary { cursor: pointer; padding: 12px 14px; font-weight: 700; color: var(--blue-600); }
.dev-com-form { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; }
.dev-com-form label { font-weight: 700; font-size: 0.88rem; margin-top: 6px; }
.dev-com-form label small { font-weight: 400; color: #6b7699; }
.dev-com-form input[type="text"], .dev-com-form textarea {
    font: inherit; padding: 10px 12px; border: 1.5px solid #dfe6f5; border-radius: 10px; background: #fff; color: var(--text-dark); width: 100%; box-sizing: border-box;
}
.dev-com-form button { align-self: flex-start; margin-top: 10px; }
.dev-com-dica { font-size: 0.85rem; color: #6b7699; margin: -4px 0 10px; }
.dev-com-lista { display: flex; flex-direction: column; gap: 8px; }
.dev-com-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e5eaf5; border-radius: 14px; background: #fff; }
.dev-com-foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; }
.dev-com-letra { display: grid; place-items: center; background: var(--blue-500); color: #fff; font-weight: 700; }
.dev-com-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dev-com-info small { color: #6b7699; }
.dev-com-info p { margin: 4px 0 0; font-size: 0.85rem; color: #4a5578; overflow-wrap: anywhere; }
.dev-com-item form { margin: 0; }
.dev-btn-perigo { border: 1.5px solid #f0c4c4; background: #fff; color: #c62828; border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; }
.dev-btn-perigo:hover { background: #fdecec; }
html[data-theme="dark"] .dev-com-nova,
html[data-theme="dark"] .dev-com-item { background: var(--dm-surface-2); border-color: var(--dm-borda); }
html[data-theme="dark"] .dev-com-form input[type="text"],
html[data-theme="dark"] .dev-com-form textarea { background: var(--dm-surface-3); border-color: var(--dm-borda); color: #e6ebff; }
html[data-theme="dark"] .dev-com-info p { color: #b9c3e6; }
html[data-theme="dark"] .dev-btn-perigo { background: transparent; border-color: #7a3a3a; color: #ff8a8a; }
.dev-com-info strong { color: var(--text-dark); font-size: 1rem; }
html[data-theme="dark"] .dev-com-info strong { color: #e6ebff; }
.dev-com-form label { color: var(--text-dark); }
html[data-theme="dark"] .dev-com-form label { color: #e6ebff; }

/* Dev Access > Códigos de moedas */
.dev-com-form input[type="number"], .dev-com-form select {
    font: inherit; padding: 10px 12px; border: 1.5px solid #dfe6f5; border-radius: 10px; background: #fff; color: var(--text-dark); width: 100%; box-sizing: border-box;
}
.dev-cod-linha { display: flex; gap: 8px; }
.dev-cod-linha input { flex: 1; min-width: 0; }
.dev-cod-linha select { width: auto; flex: 0 0 auto; }
.dev-com-form .dev-cod-gerar { margin-top: 0; flex: 0 0 auto; border: 1.5px solid #dfe6f5; background: #fff; color: var(--blue-600); border-radius: 10px; padding: 0 12px; font-weight: 700; cursor: pointer; align-self: stretch; }
#codTexto { text-transform: uppercase; }
#codTexto::placeholder { text-transform: none; }
.dev-cod-item { flex-direction: column; align-items: stretch; gap: 10px; }
.dev-cod-texto { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.dev-cod-status { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.dev-cod-on { background: rgba(31, 191, 99, .14); color: #12804a; }
.dev-cod-off { background: #eef1f7; color: #6b7699; }
.dev-cod-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.dev-cod-acoes form { margin: 0; }
html[data-theme="dark"] .dev-com-form input[type="number"],
html[data-theme="dark"] .dev-com-form select,
html[data-theme="dark"] .dev-com-form .dev-cod-gerar { background: var(--dm-surface-3); border-color: var(--dm-borda); color: #e6ebff; }
html[data-theme="dark"] .dev-cod-on { background: rgba(31, 191, 99, .18); color: #6fe3a3; }
html[data-theme="dark"] .dev-cod-off { background: var(--dm-surface-3); color: #b9c3e6; }

/* ---------- Rankings ---------- */
.rk-abas { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.rk-aba { padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; background: #fff; font: inherit; font-weight: 700; font-size: 0.9rem; color: var(--text-dark); cursor: pointer; }
.rk-aba.ativa { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; }
.rk-aba-breve { cursor: default; opacity: 0.55; font-weight: 600; background: transparent; border: 1px dashed var(--blue-200); }
.rk-sub { margin: 0 0 12px; color: var(--text-mid); font-size: 0.9rem; }
.rk-sub a { color: var(--blue-600); font-weight: 700; }
.rk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rk-item {
    --rk-cor: transparent;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #e5eaf5;
}
.rk-pos { flex: 0 0 34px; text-align: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.05rem; color: #6b7699; }
.rk-pessoa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-dark); }
.rk-avatar-wrap { position: relative; flex: 0 0 auto; }
.rk-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.rk-avatar-letra { background: var(--blue-500); color: #fff; font-weight: 700; }
.rk-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-nome small { font-weight: 500; color: #6b7699; }
.rk-moedas { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-weight: 800; color: #b26a00; font-variant-numeric: tabular-nums; }
.rk-eu { outline: 2px solid var(--blue-400); outline-offset: -2px; }
.rk-minha { margin-top: 12px; }
.rk-rodape { margin: 10px 0 0; font-size: 0.78rem; color: #6b7699; text-align: center; }

/* pódio: 1 ouro (com coroa), 2 prata, 3 bronze */
.rk-ouro, .rk-prata, .rk-bronze { border-width: 2px; }
.rk-ouro   { background: linear-gradient(100deg, #fff6d1, #ffe58a); border-color: #e3b500; padding: 14px; }
.rk-prata  { background: linear-gradient(100deg, #f4f6fa, #dde3ec); border-color: #a8b3c4; }
.rk-bronze { background: linear-gradient(100deg, #fbeee4, #f0cfb2); border-color: #c98a55; }
.rk-ouro .rk-pos   { color: #a67c00; font-size: 1.5rem; }
.rk-prata .rk-pos  { color: #6d7a8c; font-size: 1.3rem; }
.rk-bronze .rk-pos { color: #9a5b2a; font-size: 1.2rem; }
.rk-ouro .rk-avatar   { width: 52px; height: 52px; box-shadow: 0 0 0 3px #f2c200; }
.rk-prata .rk-avatar  { width: 46px; height: 46px; box-shadow: 0 0 0 3px #b8c2d0; }
.rk-bronze .rk-avatar { width: 44px; height: 44px; box-shadow: 0 0 0 3px #cd8a52; }
.rk-ouro .rk-nome { font-size: 1.05rem; }
.rk-coroa { position: absolute; top: -17px; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: 1.3rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.rk-ouro .rk-pessoa, .rk-prata .rk-pessoa, .rk-bronze .rk-pessoa { color: #2a2410; }
@media (max-width: 420px) {
    .rk-item { gap: 8px; padding: 9px 10px; }
    .rk-pos { flex-basis: 26px; }
    .rk-moedas { font-size: 0.9rem; }
}
html[data-theme="dark"] .rk-aba:not(.ativa) { background: var(--dm-surface-3); color: #e6ebff; border-color: var(--dm-borda); }
html[data-theme="dark"] .rk-aba-breve { background: transparent !important; }
html[data-theme="dark"] .rk-sub { color: #b9c3e6; }
html[data-theme="dark"] .rk-sub a { color: var(--dm-link); }
html[data-theme="dark"] .rk-item { background: var(--dm-surface-2); border-color: var(--dm-borda); }
html[data-theme="dark"] .rk-pessoa { color: #e6ebff; }
html[data-theme="dark"] .rk-moedas { color: #ffd166; }
html[data-theme="dark"] .rk-ouro   { background: linear-gradient(100deg, #4a3a05, #7a5c00); border-color: #f2c200; }
html[data-theme="dark"] .rk-prata  { background: linear-gradient(100deg, #2e3542, #4a5466); border-color: #b8c2d0; }
html[data-theme="dark"] .rk-bronze { background: linear-gradient(100deg, #3d2512, #6b3f1d); border-color: #cd8a52; }
html[data-theme="dark"] .rk-ouro .rk-pessoa, html[data-theme="dark"] .rk-prata .rk-pessoa, html[data-theme="dark"] .rk-bronze .rk-pessoa { color: #fff; }
html[data-theme="dark"] .rk-ouro .rk-pos { color: #ffd84d; }
html[data-theme="dark"] .rk-prata .rk-pos { color: #dfe5ee; }
html[data-theme="dark"] .rk-bronze .rk-pos { color: #f0b07a; }
#grupo-convite[hidden] { display: none; }
.dica-campo { margin: 4px 2px 0; font-size: 0.78rem; color: var(--text-mid); }
.form-group label small { font-weight: 400; opacity: 0.75; }
.rk-pos-coroa { display: grid; place-items: center; }
.rk-pos-coroa svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.tags-perfil .tag-bolha[hidden] { display: none !important; }
.post-card.post-saindo { opacity: 0; transform: scale(0.98); transition: opacity 0.25s, transform 0.25s; }
@media (max-width: 420px) { .feed-aba { padding: 8px 6px; font-size: 0.85rem; } }
.evento-menu-opcoes button[data-salvar] { color: var(--blue-600); }
html[data-theme="dark"] .evento-menu-opcoes button[data-salvar] { color: var(--dm-link); }
.admin-tag-loja { margin-top: 10px; padding: 10px 12px; border: 1.5px dashed rgba(245, 179, 1, 0.6); border-radius: 12px; }
.admin-tag-loja.bloqueada { opacity: 0.6; border-color: rgba(128, 140, 170, 0.4); }

/* Fórum: comentário/resposta aberto por uma notificação pisca de leve (Forum.php) */
.comentario-destacado { animation: com-destaque 2.4s ease-out; border-radius: 12px; }
@keyframes com-destaque {
    0%, 35% { background: rgba(58, 126, 246, 0.18); box-shadow: 0 0 0 3px rgba(58, 126, 246, 0.35); }
    100% { background: transparent; box-shadow: 0 0 0 0 rgba(58, 126, 246, 0); }
}
@media (prefers-reduced-motion: reduce) { .comentario-destacado { animation: none; outline: 2px solid var(--blue-400); } }

/* login.php: "Esqueci minha senha" */
.link-esqueci { display: block; margin: 14px auto 0; text-align: center; font-size: 0.9rem; font-weight: 600; color: var(--blue-600); }
.link-esqueci:hover { text-decoration: underline; }
html[data-theme="dark"] .link-esqueci { color: var(--dm-link); }

/* Menu dos 3 pontinhos (fórum e eventos): o cartão corta o que passa da borda (overflow: hidden);
   com o menu aberto, ele deixa o menu sair por baixo e fica por cima do cartão seguinte */
.post-card:has(> .post-conteudo .evento-menu[open]),
.evento-card:has(.evento-menu[open]) { overflow: visible; z-index: 30; }
.evento-menu-opcoes { z-index: 31; }

/* ---------- Marcar pessoas com @ (mencoes.js / MencoesLib.php) ---------- */
.mencao {
    color: var(--blue-600); font-weight: 600; text-decoration: none;
    background: rgba(26, 92, 240, 0.09); border-radius: 5px; padding: 0 2px;
    overflow-wrap: anywhere;
}
.mencao:hover, .mencao:focus-visible { background: rgba(26, 92, 240, 0.16); text-decoration: none; }
.chat-linha.minha .mencao { color: #fff; background: rgba(255, 255, 255, 0.22); }
html[data-theme="dark"] .mencao { color: #9dbaff; background: rgba(157, 186, 255, 0.14); }
html[data-theme="dark"] .chat-linha.minha .mencao { color: #fff; background: rgba(255, 255, 255, 0.2); }

.mencao-caixa {
    position: fixed; z-index: 100000; max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid #e2e8f6; border-radius: 14px; padding: 4px;
    box-shadow: 0 10px 30px rgba(16, 32, 80, 0.18);
    -webkit-tap-highlight-color: transparent;
}
.mencao-item {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer;
    color: var(--text-dark); font-size: 0.95rem; min-height: 44px; box-sizing: border-box;
}
.mencao-item.ativo, .mencao-item:hover { background: #eef3ff; }
.mencao-av {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: var(--blue-500); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.mencao-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mencao-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
html[data-theme="dark"] .mencao-caixa { background: var(--dm-surface-2); border-color: var(--dm-borda); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .mencao-item { color: #e6ebff; }
html[data-theme="dark"] .mencao-item.ativo, html[data-theme="dark"] .mencao-item:hover { background: var(--dm-surface-3); }

/* ---------- "(Dev)" ao lado do nome de Desenvolvedor (Fórum, Eventos; nas comunidades é .grp-marca-dev) ---------- */
.marca-dev { font-weight: 800; color: #b26a00; }
html[data-theme="dark"] .marca-dev { color: #ffd166; }

/* com o topo fixo, pular para um post/comentário (#post-12) não esconde o item atrás do topo */
html { scroll-padding-top: 84px; }

/* Rankings > ❤️ Mais curtidos / 🔁 Mais republicados */
.rk-post-txt { min-width: 0; display: flex; flex-direction: column; }
.rk-post-autor { font-size: 0.78rem; color: #6b7699; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-post-thumb { border-radius: 10px; }
.rk-post-total { color: var(--blue-600); }
.rk-painel[hidden] { display: none; }
html[data-theme="dark"] .rk-post-autor { color: #b9c3e6; }
html[data-theme="dark"] .rk-post-total { color: #9dbaff; }
.rk-ouro .rk-post-autor, .rk-prata .rk-post-autor, .rk-bronze .rk-post-autor { color: #5a5030; }
html[data-theme="dark"] .rk-ouro .rk-post-autor, html[data-theme="dark"] .rk-prata .rk-post-autor, html[data-theme="dark"] .rk-bronze .rk-post-autor { color: #e8e2cc; }

/* ----- Fórum: aviso de campus obrigatório para postar ----- */
.forum-sem-campus { display: flex; gap: 14px; align-items: flex-start; max-width: 720px; margin: 0 auto 20px; padding: 16px 18px;
    background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius); color: var(--text-dark); }
.forum-sem-campus-ico { font-size: 1.8rem; line-height: 1; }
.forum-sem-campus strong { font-family: var(--fonte-titulo); font-size: 1.05rem; }
.forum-sem-campus p { margin: 4px 0 12px; color: var(--text-mid); }
.forum-sem-campus .btn-novo-evento { margin-bottom: 0; }
html[data-theme="dark"] .forum-sem-campus { background: rgba(58, 126, 246, 0.12); border-color: rgba(147, 184, 249, 0.25); color: #e8eeff; }
html[data-theme="dark"] .forum-sem-campus p { color: #b9c6ea; }

/* Dev Access > Códigos: seletor de prêmios (adereços e tags) */
.cod-pr-rotulo { font-weight: 700; font-size: 0.88rem; margin-top: 10px; color: var(--text-dark); }
.cod-pr-rotulo small { font-weight: 400; color: #6b7699; }
.cod-pr { border: 1.5px solid #dfe6f5; border-radius: 14px; background: #f7f9fe; overflow: hidden; }
.cod-pr-escolhidos { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-bottom: 1px solid #e5eaf5; background: #fff; max-height: 112px; overflow-y: auto; }
.cod-pr-vazio { color: #6b7699; font-size: 0.85rem; margin: 0; }
.dev-com-form .cod-pr-chip { margin: 0; align-self: auto; border: 0; border-radius: 999px; padding: 5px 10px; background: var(--blue-50); color: var(--blue-700); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.dev-com-form .cod-pr-chip:hover { background: #fde8e8; color: #c62828; }
.cod-pr-abas { display: flex; gap: 4px; padding: 8px 8px 0; overflow-x: auto; scrollbar-width: none; }
.dev-com-form .cod-pr-aba { margin: 0; flex: 1 0 auto; border: 0; border-radius: 10px 10px 0 0; padding: 9px 10px; background: transparent; color: #4a5578; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.dev-com-form .cod-pr-aba.ativa { background: #fff; color: var(--blue-600); box-shadow: 0 -1px 0 #e5eaf5 inset; }
.cod-pr-aba small { font-weight: 400; color: #8a93b3; }
.cod-pr-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e5eaf5; color: #6b7699; font-size: 0.72rem; text-align: center; }
.cod-pr-n.tem { background: var(--blue-500); color: #fff; }
.cod-pr-busca { display: flex; gap: 6px; padding: 10px; background: #fff; }
.cod-pr-busca input { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border: 1.5px solid #dfe6f5; border-radius: 10px; background: #fff; color: var(--text-dark); }
.dev-com-form .cod-pr-mini { margin: 0; align-self: stretch; border: 1.5px solid #dfe6f5; background: #fff; color: #6b7699; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.cod-pr-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; padding: 0 10px 10px; background: #fff; max-height: 330px; overflow-y: auto; overscroll-behavior: contain; }
.cod-pr-grade[hidden] { display: none; }
.cod-pr-grade[data-cod-grade="tag"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cod-pr-grade .cod-pr-vazio { grid-column: 1 / -1; padding: 8px 2px; }
.dev-com-form .cod-pr-item { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border: 1.5px solid #e5eaf5; border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; text-align: center; transition: border-color .12s, background .12s; }
.cod-pr-item[hidden] { display: none !important; }
.cod-pr-item input { position: absolute; opacity: 0; pointer-events: none; }
.cod-pr-item img { width: 56px; height: 56px; object-fit: contain; }
.cod-pr-nome { font-size: 0.76rem; line-height: 1.15; color: var(--text-dark); overflow-wrap: anywhere; }
.cod-pr-preco, .cod-pr-poder { font-size: 0.7rem; color: #8a93b3; }
.cod-pr-poder { color: #b45309; }
.cod-pr-item:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); }
.cod-pr-item:has(input:checked)::after { content: '✓'; position: absolute; top: 4px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-500); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.cod-pr-item:has(input:disabled:not(:checked)) { opacity: .45; cursor: not-allowed; }
.cod-pr-item:has(input:focus-visible) { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.dev-com-form .cod-pr-item-tag { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; text-align: left; padding: 10px; }
.cod-pr-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; border: 1.5px solid rgba(var(--tag-rgb), .55); background: rgba(var(--tag-rgb), .1); color: rgb(var(--tag-rgb)); font-size: 0.78rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cod-pr-tag i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--tag-rgb)); flex: 0 0 7px; }
.cod-pr-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 2px; }
.cod-pr-lista img { width: 30px; height: 30px; object-fit: contain; border-radius: 8px; background: #f2f5fc; }
html[data-theme="dark"] .cod-pr-rotulo { color: #e6ebff; }
html[data-theme="dark"] .cod-pr { background: var(--dm-surface-3); border-color: var(--dm-borda); }
html[data-theme="dark"] .cod-pr-escolhidos,
html[data-theme="dark"] .cod-pr-busca,
html[data-theme="dark"] .cod-pr-grade,
html[data-theme="dark"] .dev-com-form .cod-pr-aba.ativa { background: var(--dm-surface-2); border-color: var(--dm-borda); box-shadow: none; }
html[data-theme="dark"] .dev-com-form .cod-pr-aba { color: #b9c3e6; }
html[data-theme="dark"] .dev-com-form .cod-pr-aba.ativa { color: #9fc0ff; }
html[data-theme="dark"] .cod-pr-busca input,
html[data-theme="dark"] .dev-com-form .cod-pr-mini { background: var(--dm-surface-3); border-color: var(--dm-borda); color: #e6ebff; }
html[data-theme="dark"] .dev-com-form .cod-pr-item { background: var(--dm-surface-3); border-color: var(--dm-borda); }
html[data-theme="dark"] .cod-pr-item:has(input:checked) { border-color: #5b8cff; background: rgba(58, 126, 246, .18); }
html[data-theme="dark"] .cod-pr-nome { color: #e6ebff; }
html[data-theme="dark"] .cod-pr-n { background: var(--dm-surface-3); color: #b9c3e6; }
html[data-theme="dark"] .dev-com-form .cod-pr-chip { background: rgba(58, 126, 246, .2); color: #cfe0ff; }
html[data-theme="dark"] .cod-pr-tag { color: color-mix(in srgb, rgb(var(--tag-rgb)) 60%, #fff); }
html[data-theme="dark"] .cod-pr-lista img { background: var(--dm-surface-3); }
html[data-theme="dark"] .cod-pr-n.tem { background: var(--blue-500); color: #fff; }
/* 👁️ Ver/esconder senha (senha-olho.js) */
.senha-olho-caixa { position: relative; display: block; margin-bottom: 10px; }
.senha-olho-caixa > input { margin-bottom: 0 !important; padding-right: 48px !important; }
.input-wrap.tem-olho > input { padding-right: 48px !important; }
.senha-olho {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 10px;
    display: grid; place-items: center; background: transparent; color: #7a86a8; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.senha-olho:hover { color: #1a5cf0; background: rgba(26, 92, 240, .08); }
.senha-olho:focus-visible { outline: 2px solid #3a7ef6; outline-offset: -2px; }
.senha-olho[aria-pressed="true"] { color: #1a5cf0; }
.senha-olho svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme="dark"] .senha-olho { color: #9aa6cc; }
html[data-theme="dark"] .senha-olho:hover,
html[data-theme="dark"] .senha-olho[aria-pressed="true"] { color: #8fb4ff; background: rgba(143, 180, 255, .1); }
/* esconde o olho próprio do Edge, para não ficarem dois */
input::-ms-reveal, input::-ms-clear { display: none; }

/* ⚠️ Janela "Dar aviso" da moderação (aviso.js) */
.av-niveis { border: 0; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.av-niveis legend { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.av-nivel { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #e5eaf5; cursor: pointer; }
.av-nivel input { width: 18px; height: 18px; flex: 0 0 18px; }
.av-nivel-1 input { accent-color: #1a5cf0; }
.av-nivel-2 input { accent-color: #d97706; }
.av-nivel-3 input { accent-color: #c62828; }
.av-nivel-txt { display: flex; flex-direction: column; }
.av-nivel-txt strong { font-size: 0.92rem; }
.av-nivel-txt small { font-size: 0.8rem; color: var(--text-mid); }
.av-nivel-1:has(input:checked) { border-color: #93b8f9; background: #e8f0fe; }
.av-nivel-2:has(input:checked) { border-color: #f0b44c; background: #fff7e6; }
.av-nivel-3:has(input:checked) { border-color: #ef9a9a; background: #fdecec; }
.av-rot-motivo { display: block; font-weight: 700; font-size: 0.9rem; margin: 4px 0 6px; }
.av-conta { display: block; text-align: right; font-size: 0.75rem; color: var(--text-mid); margin-top: 2px; }
.av-nota { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--blue-50); font-size: 0.8rem; color: var(--text-mid); }
.av-enviar { background: #d97706 !important; }
html[data-theme="dark"] .av-nivel { border-color: var(--dm-borda, #2a3566); }
html[data-theme="dark"] .av-nivel-1:has(input:checked) { background: rgba(58, 126, 246, .15); border-color: rgba(147, 184, 249, .5); }
html[data-theme="dark"] .av-nivel-2:has(input:checked) { background: rgba(217, 119, 6, .15); border-color: rgba(240, 180, 76, .6); }
html[data-theme="dark"] .av-nivel-3:has(input:checked) { background: rgba(198, 40, 40, .18); border-color: rgba(239, 154, 154, .5); }
html[data-theme="dark"] .av-nota { background: rgba(58, 126, 246, .12); }

/* ⚠️ Botão de aviso no Fórum (comentários) e no Direct */
.btn-aviso-mod { color: #b45309 !important; }
.chat-aviso-mod { color: #d97706; }

/* ⭐ Dev Access > Usuários: estrelas e avisos (só Desenvolvedor) */
.av-dev { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 1px solid #f3e2b8; display: flex; flex-direction: column; gap: 6px; }
.av-dev-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.av-estrelas { font-size: 1.05rem; letter-spacing: 1px; color: #f5a623; white-space: nowrap; }
.av-estrelas .apagada { color: #d6dbe8; }
.av-estrelas small { font-size: 0.78rem; letter-spacing: 0; color: #8a6d2b; margin-left: 4px; }
.av-dev-sub { font-size: 0.78rem; color: #8a6d2b; }
.av-dev-btn { border: 1.5px solid #f0c27a; background: #fff; color: #b45309; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.av-dev-btn:hover { background: #fff3dc; }
.av-dev details summary { cursor: pointer; font-size: 0.85rem; font-weight: 700; color: #8a5a00; }
.av-dev-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.av-dev-item { padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid #f0e3c4; font-size: 0.84rem; overflow-wrap: anywhere; }
.av-dev-item.desfeito { opacity: .55; }
.av-dev-nivel { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; margin-right: 4px; }
.av-dev-n1 { background: #e8f0fe; color: #1248c9; }
.av-dev-n2 { background: #fff1d6; color: #b45309; }
.av-dev-n3 { background: #fde2e2; color: #b71c1c; }
.av-dev-item p { margin: 4px 0; }
.av-dev-item blockquote { margin: 4px 0; padding: 6px 8px; border-left: 3px solid #e5d3a5; background: #fffaf0; color: #5a5f78; font-size: 0.8rem; }
.av-dev-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; margin-right: 4px; }
.av-dev-item form { display: inline; margin: 0; }
.av-dev-item button { border: 0; background: none; color: #1a5cf0; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; padding: 0; }
html[data-theme="dark"] .av-dev { background: rgba(245, 166, 35, .07); border-color: rgba(245, 166, 35, .25); }
html[data-theme="dark"] .av-estrelas .apagada { color: #3a4470; }
html[data-theme="dark"] .av-estrelas small,
html[data-theme="dark"] .av-dev-sub,
html[data-theme="dark"] .av-dev details summary { color: #f2cf8a; }
html[data-theme="dark"] .av-dev-btn { background: transparent; border-color: rgba(240, 194, 122, .5); color: #f5c065; }
html[data-theme="dark"] .av-dev-item { background: var(--dm-surface-3, #1b2550); border-color: rgba(245, 166, 35, .2); }
html[data-theme="dark"] .av-dev-item blockquote { background: rgba(255, 255, 255, .04); color: #b9c3e6; border-color: rgba(245, 166, 35, .35); }
html[data-theme="dark"] .av-dev-item button { color: #8fb4ff; }
.dev-den-aviso { margin-top: 10px; }
.pf-btn-aviso:hover { color: #b45309; border-color: #f0c27a; }
.eventos-mais { text-align: center; margin: 18px 0 6px; }

/* Dev Access > Comunidades: o que os participantes podem mandar */
.dev-com-perms { border: 1.5px solid #dfe6f5; border-radius: 12px; padding: 10px 12px 12px; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.dev-com-perms legend { font-weight: 700; font-size: 0.88rem; padding: 0 4px; color: var(--text-dark); }
.dev-com-form .dev-com-perm { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.dev-com-perm input { width: 18px; height: 18px; accent-color: var(--blue-500); flex: 0 0 18px; }
.dev-com-perms small { grid-column: 1 / -1; color: #6b7699; font-size: 0.78rem; }
html[data-theme="dark"] .dev-com-perms { border-color: var(--dm-borda); }
html[data-theme="dark"] .dev-com-perms legend { color: #e6ebff; }
html[data-theme="dark"] .dev-com-perms small { color: #b9c3e6; }
/* Direct: comunidade que não permite algum tipo de mensagem */
#chatTexto:disabled { opacity: .7; cursor: not-allowed; }

/* 🟢 Tela inicial: quantos alunos estão online (OnlineLib.php) */
.online-agora {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: fit-content; max-width: 100%; margin: 22px auto 8px; padding: 10px 20px;
    border-radius: 999px; border: 1.5px solid rgba(74, 222, 128, 0.55);
    background: rgba(5, 46, 22, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 6px 22px rgba(34, 197, 94, 0.25);
    color: #4ade80; font-weight: 700; font-size: 1.02rem; letter-spacing: .01em;
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.45);
}
.online-agora strong { font-family: var(--fonte-titulo); font-size: 1.25rem; font-weight: 800; color: #86efac; }
.online-bola {
    position: relative; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 10px #22c55e;
}
.online-bola::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; background: #22c55e;
    animation: online-pulsar 1.8s ease-out infinite;
}
@keyframes online-pulsar { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .online-bola::after { animation: none; } }

/* ----- Topo: "ConectaCP2" sempre centralizado de verdade -----
   3 colunas iguais nas pontas (← 🏠 | marca | sino Sair tema): a marca fica no meio da tela,
   não importa a largura dos botões de cada lado. No celular a marca vai para a esquerda
   (não cabe no meio sem encostar nos botões), igual aos apps. */
.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
}
.topbar-nav { grid-column: 1; justify-self: start; min-width: 0; }
.topbar .marca { grid-column: 2; justify-self: center; min-width: 0; }
.topbar-direita { grid-column: 3; justify-self: end; }
.topbar .logo-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) {
    .topbar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
    .topbar .marca { justify-self: start; }
    .topbar-nav:not(:has(.ativo)) { display: none; }   /* tela inicial: sem ← e 🏠, nada sobrando à esquerda */
}
@media (max-width: 360px) {
    .topbar { padding-left: 12px; padding-right: 12px; }
    .topbar .marca { gap: 7px; }
    .topbar .logo-texto { font-size: 1.05rem; }
    .topbar-direita { gap: 10px; }
}
@media (max-width: 330px) {
    body:not(.secao-ativa) .topbar .logo-texto { display: none; }   /* telas bem estreitas: fica só a logo */
}
/* Tela inicial: total de usuários registrados (embaixo do "alunos online") */
.total-registrados { margin: 4px auto 0; text-align: center; font-size: 0.92rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.total-registrados strong { color: #fff; font-weight: 800; }

/* ----- Perfil: campos obrigatórios para participar (PerfilRequisitos.php) ----- */
.obrigatorio { color: #d93636; font-weight: 800; }
.obrigatorio-nota { font-size: 0.82rem; margin: 4px 0 14px; }
.perfil-pendente {
    margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4;
    background: #fff4e0; border: 1px solid #ffd59a; color: #7a4a00;
}
html[data-theme="dark"] .obrigatorio { color: #ff8a8a; }
html[data-theme="dark"] .perfil-pendente { background: #3a2a10; border-color: #6b4a14; color: #ffd8a0; }

/* Rankings dos jogos (Termo do dia por nível e recordes do 2048) */
.rk-subabas { display: flex; gap: 6px; margin: 0 0 10px; }
.rk-subaba { flex: 1; padding: 7px 10px; border: 1px solid var(--borda-suave); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; font-size: 0.85rem; color: var(--text-dark); cursor: pointer; }
.rk-subaba.ativa { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-600); }
.rk-jogo-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-termo-tempo { font-size: 0.78rem; font-weight: 600; opacity: 0.8; }
html[data-theme="dark"] .rk-subaba { background: var(--dm-surface-3); border-color: var(--dm-borda); color: #e6ebff; }
html[data-theme="dark"] .rk-subaba.ativa { background: var(--dm-surface-2); border-color: var(--dm-link); color: var(--dm-link); }

/* Cadastro: aviso fixo embaixo da matrícula (login.php) */
.aviso-matricula-real {
    margin: 8px 0 0;
    padding: 9px 12px;
    border: 1.5px solid #f5b8b8;
    border-radius: 12px;
    background: #fff1f1;
    color: #b42318;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
}
html[data-theme="dark"] .aviso-matricula-real { background: rgba(190, 30, 45, 0.18); border-color: rgba(255, 138, 128, 0.45); color: #ffb4b4; }

/* Dev Access: registrados x verificados (AdminUsuarios.php) */
.admin-contas-resumo { margin: -4px 0 12px; font-size: 0.9rem; color: var(--text-mid); }
html[data-theme="dark"] .admin-contas-resumo { color: #b9c3e6; }

/* ===== Login/cadastro mais compacto (login.php) =====
   O cadastro tem 5 campos + avisos: com os espaços de antes passava da altura da tela.
   Aqui só diminuem espaços e alturas; os campos continuam do mesmo tamanho de toque (≥ 44 px). */
.pagina-login .login-card { padding: 2rem 2.2rem 1.7rem; }
.pagina-login .card-logo { margin-bottom: 1.2rem; }
.pagina-login .tabs { margin-bottom: 1.25rem; }
.pagina-login #form-register .form-group { margin-bottom: 0.8rem; }
.pagina-login #form-register label { margin-bottom: 0.3rem; }
.pagina-login #form-register input:not([type="checkbox"]),
.pagina-login #form-register select { padding-top: 0.66rem; padding-bottom: 0.66rem; }
.pagina-login #form-register .dica-campo { margin-top: 3px; font-size: 0.75rem; }
.pagina-login #form-register .aviso-matricula-real { margin-top: 6px; padding: 6px 10px; border-radius: 10px; font-size: 0.82rem; }
.pagina-login #form-register .termos-linha { margin: 4px 0 10px; font-size: 0.82rem; }
.pagina-login .register-prompt { margin-top: 0.9rem; }
/* avisos do cadastro: embaixo do próprio campo, com a borda do campo em vermelho */
.pagina-login .input-wrap.campo-erro input,
.pagina-login .input-wrap.campo-erro select { border-color: #e05252; background: #fff7f7; }
.pagina-login #form-register .aviso-campo { margin: 5px 2px 0; font-weight: 600; line-height: 1.35; }
.pagina-login #form-register .aviso-campo a { color: inherit; font-weight: 800; text-decoration: underline; }
.pagina-login .erro.erro-topo { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #fff1f1; border: 1px solid #f5b8b8; }
html[data-theme="dark"] .pagina-login .input-wrap.campo-erro input,
html[data-theme="dark"] .pagina-login .input-wrap.campo-erro select { border-color: rgba(255, 120, 120, 0.75); background: rgba(190, 30, 45, 0.12); }
html[data-theme="dark"] .pagina-login #form-register .aviso-campo { color: #ff9a9a; }
html[data-theme="dark"] .pagina-login .erro.erro-topo { background: rgba(190, 30, 45, 0.18); border-color: rgba(255, 138, 128, 0.45); color: #ffb4b4; }
@media (max-width: 900px) {
    .pagina-login .login-card { padding: 1.6rem 1.25rem 1.4rem; }
}