/* =========================================================
PHS SYSTEM - STYLE.CSS
Versão leve, limpa e dinâmica
Tema: preto, azul PHS, branco e detalhes dourados
========================================================= */

/* =========================================================

1. VARIÁVEIS E BASE GERAL
   ========================================================= */

:root{
--azul:#2e86ff;
--azul-escuro:#0f4f9f;
--azul-suave:rgba(46,134,255,.18);

--dourado:#d7aa45;
--dourado-suave:rgba(215,170,69,.20);

--preto:#070707;
--preto-2:#0d0d0d;
--card:#111111;
--card-2:#151515;

--borda:#242424;
--borda-azul:rgba(46,134,255,.35);
--borda-dourada:rgba(215,170,69,.35);

--texto:#ffffff;
--texto-2:#d5d5d5;
--texto-3:#a8a8a8;

--verde:#4cd97b;
--vermelho:#ff5c5c;

--radius:16px;
--radius-lg:24px;

--sombra:0 10px 26px rgba(0,0,0,.35);
--sombra-azul:0 0 20px rgba(46,134,255,.18);

--transicao:.22s ease;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
min-height:100vh;
background:
    linear-gradient(rgba(0,0,0,.86), rgba(0,0,0,.92)),
    url("../assets/images/fundo-phs.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

color:var(--texto);
font-family:Arial, Helvetica, sans-serif;

overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

button,
input,
select,
textarea{
font-family:Arial, Helvetica, sans-serif;
}

button{
cursor:pointer;
}

.container{
width:100%;
}

.content{
width:100%;
max-width:1450px;
margin:0 auto;
padding:32px;
}

/* =========================================================
2. ELEMENTOS GERAIS
========================================================= */

.linha{
width:220px;
height:3px;
margin:22px auto 35px auto;

background:linear-gradient(90deg, transparent, var(--azul), var(--dourado), transparent);
border-radius:999px;
}

.subtitulo,
.subtitulo-home,
.rh-aulas-subtitulo,
.ouvidoria-subtitulo,
.perfil-historico-subtitulo{
color:var(--texto-3);
line-height:1.6;
}

p{
line-height:1.6;
}

a{
color:var(--azul);
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/* =========================================================
3. BOTÕES PADRÃO
========================================================= */

button,
.btn-enviar,
.btn-documento,
.btn-aula,
.aba-btn,
.acao-aba,
.rh-doc-btn,
.btn-gerar-codigo{
border:none;
outline:none;
}

button{
background:var(--card-2);
color:var(--texto);
border:1px solid var(--borda);
border-radius:14px;

padding:14px 18px;

font-size:15px;
font-weight:700;

transition:var(--transicao);
}

button:hover{
color:var(--azul);
border-color:var(--borda-azul);
background:#181818;
transform:translateY(-2px);
}

button:active{
transform:scale(.98);
}

.btn-enviar,
.btn-gerar-codigo{
width:100%;
border-color:var(--borda-azul);
}

/* =========================================================
4. INPUTS, SELECTS E TEXTAREAS
========================================================= */

input,
select,
textarea{
width:100%;

background:#0b0b0b;
color:var(--texto);

border:1px solid var(--borda);
border-radius:14px;

padding:14px 15px;

font-size:15px;

outline:none;
transition:var(--transicao);
}

textarea{
min-height:125px;
resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
border-color:var(--borda-azul);
box-shadow:0 0 0 3px rgba(46,134,255,.10);
}

input::placeholder,
textarea::placeholder{
color:#777;
}

/* =========================================================
5. CARDS E CAIXAS REUTILIZÁVEIS
========================================================= */

.card-base,
.boas-vindas,
.ministerios-home,
.form-box,
.rh-hero,
.rh-documentos,
.rh-aulas,
.ouvidoria,
.acoes-hero,
.area-acoes,
.historico-acoes,
.perfil-topo,
.perfil-historico,
.seguranca-editor,
.logs-seguranca,
.classe-membros-box{
background:rgba(10,10,10,.78);
border:1px solid var(--borda);
border-radius:var(--radius-lg);
box-shadow:var(--sombra);
}

.card-hover,
.card-home,
.rh-card,
.perfil-card-info,
.membro-card,
.rh-aula-card,
.log-admin-card,
.item-acao,
.item-ouvidoria,
.item-historico-perfil,
.membro-resumo-card,
.documento-rh-box{
background:rgba(17,17,17,.90);
border:1px solid var(--borda);
border-radius:var(--radius);
transition:var(--transicao);
}

.card-hover:hover,
.card-home:hover,
.rh-card:hover,
.perfil-card-info:hover,
.membro-card:hover,
.rh-aula-card:hover{
border-color:var(--borda-azul);
box-shadow:var(--sombra-azul);
transform:translateY(-3px);
}

/* =========================================================
6. IMAGENS COM EFEITO LEVE
========================================================= */

.auth-logo,
.marca img,
.rh-imagem img,
.documentos-imagem img,
.requerimentos-imagem img,
.historia-imagem img,
.cabecalho-home img,
.logo-educacional{
transition:var(--transicao);
}

.auth-logo:hover,
.marca img:hover,
.rh-imagem img:hover,
.documentos-imagem img:hover,
.requerimentos-imagem img:hover,
.historia-imagem img:hover,
.cabecalho-home img:hover,
.logo-educacional:hover{
transform:scale(1.03);
}

.marca img,
.auth-logo,
.cabecalho-home img,
.logo-educacional{
filter:drop-shadow(0 0 10px rgba(46,134,255,.35));
}

.rh-imagem img,
.documentos-imagem img,
.requerimentos-imagem img,
.historia-imagem img{
border-radius:22px;
filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
}

/* =========================================================
7. LOGIN, REGISTRO E RECUPERAÇÃO
========================================================= */

.auth-page{
min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:28px;

background:
    linear-gradient(rgba(0,0,0,.88), rgba(0,0,0,.94)),
    url("../assets/images/fundo-phs.png");

background-size:cover;
background-position:center;
}

.auth-card{
width:100%;
max-width:430px;
background:rgba(8,8,8,.86);
border:1px solid var(--borda-azul);
border-radius:26px;

padding:34px;

text-align:center;

box-shadow:var(--sombra);
}

.registro-card{
max-width:500px;
}

.auth-logo{
width:112px;
margin:0 auto 20px auto;
}

.auth-card h1{
margin-bottom:10px;

font-size:36px;
color:var(--texto);

text-shadow:
    -1px -1px 0 var(--azul),
    1px -1px 0 var(--azul),
    -1px 1px 0 var(--azul),
    1px 1px 0 var(--azul),
    0 0 10px rgba(215,170,69,.35);
}

.auth-subtitulo{
margin-bottom:24px;
color:var(--texto-3);
}

.auth-card input,
.auth-card select{
margin-bottom:14px;
}

.auth-card button{
width:100%;
margin-top:4px;
border-color:var(--borda-azul);
}

.auth-link{
margin-top:20px;
color:var(--texto-3);
}

.auth-link a{
font-weight:700;
}

.auth-aviso{
margin:16px 0;
padding:14px;

text-align:left;
color:var(--texto-2);

background:rgba(46,134,255,.10);
border:1px solid var(--borda-azul);
border-left:4px solid var(--azul);
border-radius:14px;
}

.auth-aviso h2{
text-align:center;
color:var(--dourado);
margin:10px 0;
}

/* =========================================================
8. CAMPO DE SENHA E BOTÃO DO OLHO
========================================================= */

.senha-box{
width:100%;
position:relative;
display:flex;
align-items:center;

margin-bottom:14px;
}

.senha-box input{
margin-bottom:0;
padding-right:52px;
}

.senha-box.simples input{
padding-right:15px;
}

.btn-ver-senha{
position:absolute;
right:7px;
top:50%;
transform:translateY(-50%);
width:38px;
height:38px;

display:flex;
align-items:center;
justify-content:center;

padding:0;

border:1px solid rgba(255,255,255,.10);
border-radius:12px;

background:#151515;
}

.btn-ver-senha:hover{
background:#1b1b1b;
border-color:var(--borda-azul);
transform:translateY(-50%);
}

.icone-olho{
position:relative;
display:block;

width:20px;
height:12px;

border:2px solid #dbeaff;
border-radius:50%;
}

.icone-olho::before{
content:"";

position:absolute;
top:50%;
left:50%;

width:6px;
height:6px;

background:#dbeaff;
border-radius:50%;

transform:translate(-50%, -50%);
}

.icone-olho.olho-fechado::after{
content:"";

position:absolute;
top:50%;
left:50%;

width:25px;
height:2px;

background:#dbeaff;
border-radius:999px;

transform:translate(-50%, -50%) rotate(-35deg);
}

/* =========================================================
9. TOPO / MENU
========================================================= */

.topbar{
width:100%;
min-height:86px;

display:flex;
align-items:center;
justify-content:space-between;
gap:22px;

padding:0 30px;

background:rgba(7,7,7,.96);
border-bottom:1px solid var(--borda);
}

.marca{
display:flex;
align-items:center;
gap:16px;
flex-shrink:0;
}

.marca img{
width:68px;
border-radius:12px;
cursor:pointer;
}

.marca h2{
font-size:38px;
letter-spacing:1px;
color:var(--texto);

text-shadow:
    -1px -1px 0 var(--azul),
    1px -1px 0 var(--azul),
    -1px 1px 0 var(--azul),
    1px 1px 0 var(--azul),
    0 0 10px rgba(215,170,69,.45),
    0 0 1px var(--dourado);
}

.topbar ul{
list-style:none;

display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;

gap:8px;
}

.topbar li{
padding:10px 14px;

border:1px solid transparent;
border-radius:12px;

color:var(--texto-2);
font-size:15px;

cursor:pointer;
transition:var(--transicao);

}

.topbar li:hover{
color:var(--texto);
border-color:var(--borda-azul);
background:rgba(46,134,255,.08);
}

.btn-sair{
margin-top:16px;

padding:9px 16px;

color:var(--texto-3);

border:1px solid var(--borda);
background:#101010;
}

.btn-sair:hover{
color:var(--vermelho);
border-color:rgba(255,92,92,.45);
}

/* =========================================================
10. LOADER
========================================================= */

.loader{
display:none;

min-height:70vh;
padding-top:90px;

text-align:center;

}

.loader img{
width:110px;
margin:0 auto 22px auto;
animation:pulsarLeve 1.8s infinite ease-in-out;
}

.loader h2{
color:var(--texto);
letter-spacing:3px;
margin-bottom:12px;
}

.loader p{
color:var(--texto-3);
margin-bottom:22px;
}

.barra{
width:380px;
max-width:90%;
height:14px;

margin:auto;

background:#111;
border:1px solid var(--borda);
border-radius:999px;

overflow:hidden;

}

.progresso{
width:0%;
height:100%;

background:linear-gradient(90deg, var(--azul), var(--dourado));

animation:carregar 1.1s linear forwards;

}

@keyframes carregar{
from{ width:0%; }
to{ width:100%; }
}

@keyframes pulsarLeve{
0%,100%{ transform:scale(1); opacity:.9; }
50%{ transform:scale(1.04); opacity:1; }
}

/* =========================================================
11. FOOTER
========================================================= */

.footer{
margin-top:70px;

background:rgba(5,5,5,.92);
border-top:1px solid var(--borda);

}

.footer-container{
max-width:1400px;
margin:auto;
padding:36px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:28px;
}

.footer-col img{
width:74px;
margin-bottom:14px;
}

.footer-col h3{
color:var(--azul);
margin-bottom:12px;
}

.footer-col p,
.footer-col li{
color:var(--texto-3);
line-height:1.7;
}

.footer-col ul{
list-style:none;
}

.footer-bottom{
padding:18px;

text-align:center;
color:#777;

border-top:1px solid var(--borda);
}

/* =========================================================
12. HOME
========================================================= */

.home-page{
max-width:1200px;
margin:0 auto;
}

.cabecalho-home{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;

margin-bottom:28px;

}

.cabecalho-home img{
width:115px;
margin-bottom:14px;
}

.cabecalho-home h1{
font-size:42px;
color:var(--texto);
margin-bottom:10px;
}

.cabecalho-home p{
color:var(--texto-3);
font-size:18px;
}

.banner-home{
width:100%;
max-width:980px;

margin:0 auto 30px auto;

border-radius:22px;
border:1px solid var(--borda-dourada);

box-shadow:var(--sombra);

}

.boas-vindas{
padding:30px;
margin-bottom:28px;

text-align:center;

}

.boas-vindas h2{
color:var(--azul);
font-size:32px;
margin-bottom:14px;
}

.boas-vindas p{
max-width:900px;
margin:0 auto 18px auto;

color:var(--texto-2);
font-size:17px;

}

.frase-home,
.rh-frase,
.acoes-frase{
display:inline-block;

padding:12px 18px;

color:var(--texto);
font-weight:700;

background:rgba(46,134,255,.10);
border:1px solid var(--borda-azul);
border-radius:14px;

}

.cards-home{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;

margin-bottom:34px;

}

.card-home{
padding:22px;
}

.card-home h3{
color:var(--azul);
font-size:21px;
margin-bottom:10px;
}

.card-home p{
color:var(--texto-3);
}

.ministerios-home{
padding:30px;
margin-bottom:45px;
}

.ministerios-home h2{
text-align:center;
font-size:32px;
margin-bottom:8px;
}

.subtitulo-home{
text-align:center;
margin-bottom:24px;
}

.tabela-ministerios{
display:grid;
gap:14px;
}

.linha-ministerio{
display:grid;
grid-template-columns:85px 1fr 2fr;
gap:18px;
align-items:center;

padding:17px;

background:rgba(17,17,17,.90);
border:1px solid var(--borda);
border-radius:16px;

transition:var(--transicao);

}

.linha-ministerio:hover{
border-color:var(--borda-azul);
background:#151515;
}

.linha-ministerio strong{
color:var(--dourado);
font-size:19px;
}

.linha-ministerio span{
color:var(--texto);
font-weight:700;
}

.linha-ministerio p{
color:var(--texto-3);
}

/* =========================================================
13. ENSINO E FORMAÇÃO
========================================================= */

.educacional{
max-width:1200px;
margin:0 auto;
text-align:center;
}

.logo-educacional{
width:135px;
margin:0 auto 18px auto;
}

.educacional h1{
font-size:44px;
margin-bottom:10px;
}

.educacional h2{
color:var(--texto-2);
margin-bottom:24px;
}

.abas-educacional{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;

gap:12px;
margin:30px auto;

}

.abas-educacional .aba-btn{
min-width:155px;
padding:14px 20px;
}

.abas-educacional .aba-btn.active,
.abas-educacional .aba-btn:hover{
color:var(--azul);
border-color:var(--borda-azul);
background:rgba(46,134,255,.08);
}

.area-aulas{
max-width:1050px;
margin:0 auto 35px auto;
text-align:center;
}

.area-aulas h2{
color:var(--azul);
font-size:32px;
margin-bottom:8px;
}

.descricao-area{
color:var(--texto-3);
margin-bottom:24px;
}

.aulas-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:16px;

margin-bottom:35px;

}

.btn-aula{
width:100%;

padding:22px;

background:rgba(17,17,17,.92);
border:1px solid var(--borda);
border-radius:16px;

font-size:16px;

}

.btn-aula:hover{
color:var(--azul);
border-color:var(--borda-azul);
background:#151515;
}

#conteudo-aula,
#conteudo-aula-rh{
width:100%;
max-width:1050px;

margin:26px auto 0 auto;

}

#texto-aula,
#texto-aula-rh{
max-height:650px;
overflow-y:auto;

padding:24px;

text-align:left;
white-space:pre-wrap;

color:var(--texto-2);
line-height:1.8;
font-size:16px;

background:rgba(10,10,10,.86);
border:1px solid var(--borda);
border-radius:18px;

}

/* =========================================================
14. DOCUMENTOS E HISTÓRIA
========================================================= */

.documentos-page{
min-height:70vh;

display:flex;
align-items:center;
justify-content:space-between;
gap:42px;

}

.documentos-info{
width:52%;
}

.documentos-info h1{
font-size:43px;
margin-bottom:14px;
}

.documentos-info p{
color:var(--texto-3);
font-size:17px;
margin-bottom:26px;
}

.documentos-botoes{
display:flex;
flex-direction:column;
gap:13px;
}

.btn-documento{
width:100%;

padding:16px 18px;

text-align:left;
color:var(--texto);

background:rgba(17,17,17,.92);
border:1px solid var(--borda);
border-radius:16px;

}

.btn-documento:hover{
color:var(--azul);
border-color:var(--borda-azul);
background:#151515;
}

.documentos-imagem{
width:42%;
display:flex;
justify-content:flex-end;
}

.documentos-imagem img{
width:100%;
max-width:400px;
}

.documento-conteudo{
width:92%;
max-width:1050px;

margin:36px auto;
padding:30px;

color:var(--texto);

background:rgba(10,10,10,.88);
border:1px solid var(--borda-azul);
border-radius:20px;
box-shadow:var(--sombra);

}

.documento-conteudo h1{
text-align:center;

color:var(--azul);
font-size:30px;
text-transform:uppercase;
letter-spacing:1px;

margin-bottom:24px;

}

.documento-conteudo pre{
white-space:pre-wrap;
overflow-x:auto;

color:var(--texto-2);
font-size:14px;
line-height:1.7;

}

.btn-voltar{
margin-bottom:22px;
border-color:var(--borda-azul);
}

.erro-documento{
width:92%;
max-width:800px;

margin:55px auto;
padding:30px;

text-align:center;

background:rgba(30,10,10,.86);
border:1px solid rgba(255,92,92,.42);
border-radius:20px;

}

.historia-imagem{
width:100%;

display:flex;
align-items:center;
justify-content:center;

margin:30px 0;

}

.historia-imagem img{
width:78%;
max-width:900px;

border:1px solid var(--borda-azul);

}

/* =========================================================
15. REQUERIMENTOS
========================================================= */

.requerimentos-page{
min-height:72vh;

display:flex;
align-items:center;
justify-content:center;
gap:42px;

}

.requerimentos-imagem{
width:35%;
display:flex;
justify-content:center;
}

.requerimentos-imagem img{
width:100%;
max-width:390px;
}

.requerimentos-area{
width:60%;
text-align:center;
}

.requerimentos-area h1{
font-size:43px;
margin-bottom:10px;
}

.requerimentos-botoes{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;

margin-bottom:30px;

}

.requerimentos-botoes button{
min-height:58px;
}

.form-box{
padding:25px;
text-align:left;
}

.form-box h2{
text-align:center;
color:var(--azul);
margin-bottom:16px;
}

.aviso,
.aviso-acoes,
.aviso-rh-aula{
padding:13px 14px;
margin-bottom:18px;

color:var(--texto-2);

background:rgba(46,134,255,.10);
border:1px solid var(--borda-azul);
border-left:4px solid var(--azul);
border-radius:14px;

}

.form-box input,
.form-box select,
.form-box textarea{
margin-bottom:14px;
}

/* =========================================================
16. RECURSOS HUMANOS
========================================================= */

.rh-page{
max-width:1200px;
margin:0 auto;
}

.rh-hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:36px;

padding:32px;
margin-bottom:28px;

}

.rh-texto{
width:60%;
}

.rh-texto h1{
color:var(--azul);
font-size:40px;
margin-bottom:14px;
}

.rh-texto p{
color:var(--texto-2);
font-size:17px;
margin-bottom:18px;
}

.rh-imagem{
width:34%;
display:flex;
justify-content:center;
}

.rh-imagem img{
width:100%;
max-width:285px;
}

.rh-cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:18px;

margin-bottom:32px;

}

.rh-card{
padding:22px;
}

.rh-card h3{
color:var(--azul);
margin-bottom:10px;
}

.rh-card p{
color:var(--texto-3);
}

.rh-documentos,
.rh-aulas,
.ouvidoria{
padding:28px;
margin-bottom:32px;
}

.rh-documentos h2,
.rh-aulas h2,
.ouvidoria h2{
text-align:center;

color:var(--texto);
font-size:32px;

margin-bottom:10px;

}

.rh-doc-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
gap:14px;

margin:24px 0;

}

.rh-doc-btn{
min-height:56px;
}

.documento-rh-box{
padding:22px;
}

.documento-rh-box h3{
color:var(--azul);
margin-bottom:10px;
}

.documento-rh-box p,
.documento-rh-box li{
color:var(--texto-2);
line-height:1.7;
}

.documento-rh-box ul{
margin-left:20px;
}

.rh-aula-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;

padding:22px;
margin-bottom:16px;

}

.rh-aula-card h3{
color:var(--azul);
margin-bottom:8px;
}

.rh-aula-card p{
color:var(--texto-3);
}

.rh-aula-card button,
.btn-copiar-rh,
.registro-aula-rh button{
border-color:var(--borda-azul);
}

.aula-rh-box{
margin-top:26px;
padding:26px;

text-align:left;

background:rgba(10,10,10,.82);
border:1px solid var(--borda-azul);
border-radius:20px;

}

.aula-rh-box h2{
text-align:center;
color:var(--azul);
margin-bottom:14px;
}

.registro-aula-rh{
display:grid;
grid-template-columns:1fr auto;
gap:12px;

margin-bottom:18px;

}

.registro-aula-rh input{
min-height:48px;
}

.ouvidoria-form{
display:flex;
flex-direction:column;
gap:14px;

margin-bottom:28px;

}

.ouvidoria-form button{
border-color:var(--borda-azul);
}

.historico-ouvidoria h3{
color:var(--azul);
margin-bottom:14px;
}

.item-ouvidoria{
padding:16px;
margin-bottom:12px;

border-left:4px solid var(--azul);

}

.item-ouvidoria strong{
color:var(--texto);
}

.item-ouvidoria span{
color:var(--azul);
}

.item-ouvidoria p{
color:var(--texto-2);
margin-top:8px;
}

.item-ouvidoria small{
color:#777;
}

/* =========================================================
17. AÇÕES
========================================================= */

.acoes-page{
max-width:1200px;
margin:0 auto;
}

.acoes-hero{
display:flex;
align-items:center;
justify-content:space-between;
gap:34px;

padding:32px;
margin-bottom:28px;

}

.acoes-hero h1{
color:var(--azul);
font-size:40px;
margin-bottom:14px;
}

.acoes-hero p{
color:var(--texto-2);
font-size:17px;
margin-bottom:18px;
}

.acoes-hero img{
width:250px;
max-width:35%;
}

.acoes-abas{
display:flex;
justify-content:center;
flex-wrap:wrap;

gap:12px;
margin-bottom:28px;

}

.acao-aba{
min-width:190px;
}

.acao-aba.active,
.acao-aba:hover{
color:var(--azul);
border-color:var(--borda-azul);
background:rgba(46,134,255,.08);
}

.area-acoes,
.historico-acoes{
padding:28px;
margin-bottom:32px;
}

.form-acoes{
max-width:850px;
margin:0 auto;
}

.form-acoes h2,
.historico-acoes h2{
text-align:center;
color:var(--texto);

font-size:30px;
margin-bottom:14px;

}

.form-acoes input,
.form-acoes select,
.form-acoes textarea{
margin-bottom:14px;
}

.form-acoes button{
width:100%;
border-color:var(--borda-azul);
}

.item-acao{
padding:17px;
margin-bottom:13px;

border-left:4px solid var(--azul);

}

.item-acao h3{
color:var(--azul);
margin-bottom:8px;
}

.item-acao p{
color:var(--texto-2);
}

.item-acao strong{
color:var(--texto);
}

.item-acao small{
color:#777;
}

/* =========================================================
18. PERFIL
========================================================= */

.perfil-page{
max-width:1200px;
margin:0 auto;
}

.perfil-topo{
display:flex;
align-items:center;
gap:32px;

padding:32px;
margin-bottom:28px;

}

.perfil-avatar-area{
position:relative;

width:175px;
height:175px;

display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;

border-radius:50%;

background:radial-gradient(circle, rgba(46,134,255,.18), rgba(0,0,0,.78) 68%);
border:1px solid var(--borda-azul);

}

.perfil-avatar-area img{
width:145px;
height:145px;

object-fit:cover;
object-position:center;

border-radius:50%;
background:#050505;

padding:6px;

border:1px solid rgba(255,255,255,.08);

}

.perfil-info h1{
color:var(--azul);
font-size:42px;
margin-bottom:8px;
}

.perfil-info p{
color:var(--texto-2);
font-size:21px;
margin-bottom:16px;
}

.perfil-tags{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.perfil-tags span,
.ministerio-tag{
display:inline-block;

padding:8px 13px;

color:var(--texto);
font-weight:700;

background:rgba(46,134,255,.10);
border:1px solid var(--borda-azul);
border-radius:12px;

}

.pontos-tag{
color:var(--dourado) !important;
background:var(--dourado-suave) !important;
border-color:var(--borda-dourada) !important;
}

.acesso-badge{
display:inline-block;
padding:8px 13px;

color:var(--dourado);
font-weight:800;
font-size:12px;
letter-spacing:.5px;
text-transform:uppercase;

background:var(--dourado-suave);
border:1px solid var(--borda-dourada);
border-radius:12px;
}

.perfil-recado{
padding:22px 24px;
margin-bottom:26px;

background:rgba(10,10,10,.78);
border:1px solid var(--borda);
border-left:4px solid var(--azul);
border-radius:18px;

}

.perfil-recado h3{
color:var(--azul);
margin-bottom:8px;
}

.perfil-recado p{
color:var(--texto-2);
}

.perfil-dados{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:18px;

margin-bottom:28px;

}

.perfil-card-info{
padding:22px;
}

.perfil-card-info h3{
color:var(--azul);
margin-bottom:12px;
}

.perfil-card-info p{
color:var(--texto-2);
line-height:1.8;
}

.perfil-card-info strong{
color:var(--texto);
}

.perfil-historico{
padding:30px;
margin-bottom:45px;
}

.perfil-historico h2{
text-align:center;
color:var(--texto);
font-size:32px;
margin-bottom:10px;
}

.perfil-historico-subtitulo{
text-align:center;
margin-bottom:26px;
}

.item-historico-perfil{
padding:17px;
margin-bottom:13px;

border-left:4px solid var(--azul);

}

.item-historico-perfil h3{
color:var(--azul);
margin-bottom:8px;
}

.item-historico-perfil p{
color:var(--texto-2);
}

.item-historico-perfil strong{
color:var(--texto);
}

.item-historico-perfil small{
color:#777;
}

.status-aprovado{
color:var(--verde);
font-weight:700;
}

.status-reprovado{
color:var(--vermelho);
font-weight:700;
}

/* =========================================================
19. PERFIL FLUTUANTE
========================================================= */

.perfil-flutuante{
position:fixed;
right:22px;
bottom:22px;
z-index:999;

display:flex;
align-items:center;
gap:11px;

padding:11px 14px;

background:rgba(8,8,8,.90);
border:1px solid var(--borda-azul);
border-radius:18px;

box-shadow:var(--sombra);

cursor:pointer;
transition:var(--transicao);

}

.perfil-flutuante:hover{
transform:translateY(-3px);
background:#101010;
}

.perfil-flutuante img{
width:52px;
height:52px;

border-radius:50%;
object-fit:cover;
object-position:center;

background:#050505;
border:1px solid var(--borda-azul);
padding:4px;

}

.perfil-flutuante h4{
color:var(--texto);
margin-bottom:2px;
font-size:15px;
}

.perfil-flutuante p{
color:var(--azul);
font-size:13px;
}

/* =========================================================
20. MEMBROS DA PHS
========================================================= */

.membros-page{
max-width:1300px;
margin:0 auto;
}

.membros-topo{
text-align:center;
margin-bottom:32px;
}

.membros-topo h1{
color:var(--texto);
font-size:44px;
letter-spacing:2px;
margin-bottom:10px;
}

.membros-topo p{
color:var(--texto-3);
font-size:17px;
}

.membros-filtros{
display:grid;
grid-template-columns:2fr 1fr;
gap:14px;

margin-bottom:26px;

}

.membros-resumo{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;

margin-bottom:30px;

}

.membro-resumo-card{
padding:21px;
text-align:center;
}

.membro-resumo-card h3{
color:var(--azul);
font-size:34px;
margin-bottom:6px;
}

.membro-resumo-card p{
color:var(--texto-3);
}

.lista-membros-phs{
width:100%;
}

.classe-membros-box{
padding:26px;
margin-bottom:30px;
}

.classe-membros-box h2{
text-align:center;
color:var(--azul);
font-size:30px;
margin-bottom:20px;
}

.membros-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:16px;
}

.membro-card{
position:relative;

display:flex;
align-items:flex-start;
gap:14px;

padding:17px;

cursor:pointer;

}

.membro-card::after{
content:"Ver perfil";

position:absolute;
right:16px;
bottom:14px;

color:var(--azul);
font-size:12px;
opacity:.75;

}

.membro-card:hover::after{
opacity:1;
}

.membro-card img{
width:62px;
height:62px;

flex-shrink:0;

border-radius:50%;
object-fit:cover;
object-position:center;

background:#050505;
border:1px solid var(--borda-azul);
padding:4px;

}

.membro-info h3{
color:var(--texto);
font-size:21px;
margin-bottom:7px;
}

.membro-info p{
color:var(--texto-3);
font-size:14px;
margin-bottom:4px;
}

/* =========================================================
21. PAINEL DE SEGURANÇA
========================================================= */

.seguranca-page{
max-width:1200px;
margin:0 auto;
}

.seguranca-topo{
text-align:center;
margin-bottom:32px;
}

.seguranca-topo h1{
color:var(--texto);
font-size:44px;
letter-spacing:2px;
margin-bottom:10px;
}

.seguranca-topo p{
color:var(--texto-3);
font-size:17px;
}

.seguranca-busca{
display:grid;
grid-template-columns:1fr auto;
gap:14px;

margin-bottom:30px;

}

.seguranca-busca button{
min-width:150px;
border-color:var(--borda-azul);
}

.seguranca-resultado{
margin-bottom:30px;
}

.seguranca-editor{
padding:28px;
}

.seguranca-membro-topo{
display:flex;
align-items:center;
gap:16px;

margin-bottom:24px;

}

.seguranca-membro-topo img{
width:76px;
height:76px;

border-radius:50%;
object-fit:cover;
object-position:center;

background:#050505;
border:1px solid var(--borda-azul);
padding:5px;

}

.seguranca-membro-topo h2{
color:var(--azul);
font-size:30px;
margin-bottom:4px;
}

.seguranca-membro-topo p{
color:var(--texto-2);
}

.seguranca-form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;

margin-bottom:24px;

}

.seguranca-form-grid label{
display:block;

color:var(--azul);
font-weight:700;

margin-bottom:7px;

}

.seguranca-form-grid textarea{
min-height:90px;
}

.seguranca-permissoes-box{
grid-column:1 / -1;
}

/* =========================================================
22. LOGS ADMINISTRATIVOS
========================================================= */

.logs-seguranca{
padding:26px;
margin-top:32px;
}

.logs-topo{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;

margin-bottom:22px;

}

.logs-topo h2{
color:var(--azul);
font-size:27px;
}

.logs-topo button{
border-color:var(--borda-azul);
}

.log-admin-card{
padding:18px;
margin-bottom:13px;
}

.log-admin-card h3{
color:var(--texto);
margin-bottom:8px;
}

.log-admin-card p{
color:var(--texto-3);
margin-bottom:5px;
}

.log-admin-card ul{
margin:10px 0;
padding-left:20px;
}

.log-admin-card li{
color:var(--texto-2);
margin-bottom:5px;
}

.log-admin-card small{
color:#777;
}

/* =========================================================
23. BOTÃO GERAR CÓDIGO
========================================================= */

.btn-gerar-codigo{
min-height:54px;

margin:8px 0 18px 0;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

color:var(--texto);

background:rgba(46,134,255,.10);
border:1px solid var(--borda-azul);

}

.btn-gerar-codigo:hover{
background:rgba(46,134,255,.15);
color:var(--texto);
}

.registro-card input,
.registro-card select{
margin-bottom:14px;
}

/* =========================================================
24. RESPONSIVO GERAL
========================================================= */

@media(max-width:1050px){

.topbar{
    flex-direction:column;
    height:auto;
    padding:18px 20px;
}

.topbar ul{
    justify-content:center;
}

.marca{
    justify-content:center;
}

}

@media(max-width:900px){

.documentos-page,
.requerimentos-page,
.rh-hero,
.acoes-hero{
    flex-direction:column;
    text-align:center;
}

.documentos-info,
.documentos-imagem,
.requerimentos-imagem,
.requerimentos-area,
.rh-texto,
.rh-imagem{
    width:100%;
}

.documentos-imagem{
    justify-content:center;
}

.btn-documento{
    text-align:center;
}

.rh-aula-card{
    flex-direction:column;
    text-align:center;
}

.registro-aula-rh{
    grid-template-columns:1fr;
}

.acoes-hero img{
    max-width:230px;
    width:80%;
}

}

@media(max-width:850px){

.linha-ministerio{
    grid-template-columns:1fr;
    text-align:center;
}

.seguranca-form-grid{
    grid-template-columns:1fr;
}

.seguranca-membro-topo{
    flex-direction:column;
    text-align:center;
}

}

@media(max-width:800px){

.perfil-topo{
    flex-direction:column;
    text-align:center;
}

.perfil-tags{
    justify-content:center;
}

.membros-filtros{
    grid-template-columns:1fr;
}

.membros-resumo{
    grid-template-columns:1fr;
}

.membro-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.membro-card::after{
    position:static;
    margin-top:6px;
}

}

@media(max-width:700px){

.logs-topo{
    flex-direction:column;
    text-align:center;
}

.seguranca-busca{
    grid-template-columns:1fr;
}

.seguranca-busca button{
    width:100%;
}

}

@media(max-width:600px){

.content{
    padding:18px;
}

.marca img{
    width:58px;
}

.marca h2{
    font-size:29px;
    text-align:center;
}

.topbar li{
    padding:9px 11px;
    font-size:14px;
}

.auth-card{
    padding:28px 22px;
}

.auth-card h1{
    font-size:31px;
}

.cabecalho-home h1,
.educacional h1,
.documentos-info h1,
.requerimentos-area h1,
.rh-texto h1,
.acoes-hero h1,
.perfil-info h1,
.membros-topo h1,
.seguranca-topo h1{
    font-size:32px;
}

.banner-home{
    width:100%;
}

.ministerios-home,
.boas-vindas,
.rh-hero,
.rh-documentos,
.rh-aulas,
.ouvidoria,
.acoes-hero,
.area-acoes,
.perfil-historico,
.classe-membros-box,
.logs-seguranca,
.seguranca-editor{
    padding:22px;
}

.perfil-avatar-area{
    width:150px;
    height:150px;
}

.perfil-avatar-area img{
    width:125px;
    height:125px;
}

.perfil-flutuante{
    right:12px;
    bottom:12px;

    max-width:215px;
    padding:9px 10px;
}

.perfil-flutuante img{
    width:42px;
    height:42px;
}

.perfil-flutuante h4{
    font-size:13px;
}

.perfil-flutuante p{
    font-size:12px;
}

.footer-container{
    padding:24px;
    text-align:center;
}

.documento-conteudo{
    width:96%;
    padding:22px;
}

.documento-conteudo pre,
#texto-aula,
#texto-aula-rh{
    font-size:14px;
    overflow-x:hidden;
}

}

@media(max-width:420px){

.topbar ul{
    gap:6px;
}

.topbar li{
    font-size:13px;
    padding:8px 9px;
}

.marca h2{
    font-size:25px;
}

button{
    font-size:14px;
}

input,
select,
textarea{
    font-size:14px;
}

}

/* =========================================================
25. AJUSTES FINAIS
========================================================= */

::selection{
    background:rgba(46,134,255,.35);
    color:white;
}

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#080808;
}

::-webkit-scrollbar-thumb{
    background:#202020;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:#2e86ff;
}

/* =========================================================
26. FORMULÁRIOS DINÂMICOS
========================================================= */

.form-box button,
.form-acoes button,
.ouvidoria-form button,
.registro-aula-rh button{
width:100%;
border-color:var(--borda-azul);
}

.form-box label,
.form-acoes label,
.ouvidoria-form label,
.registro-aula-rh label{
display:block;

color:var(--texto-2);
font-size:14px;
font-weight:700;

margin-bottom:7px;
}

.form-box small,
.form-acoes small,
.ouvidoria-form small{
display:block;

color:var(--texto-3);
font-size:12px;

margin-top:-8px;
margin-bottom:12px;
}

.form-linha{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
}

.form-linha-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.campo-oculto{
display:none !important;
}

/* =========================================================
27. STATUS, TAGS E BADGES
========================================================= */

.status-ativo,
.badge-ativo{
color:var(--verde) !important;
border-color:rgba(76,217,123,.35) !important;
background:rgba(76,217,123,.10) !important;
}

.status-demitido,
.badge-demitido{
color:var(--vermelho) !important;
border-color:rgba(255,92,92,.35) !important;
background:rgba(255,92,92,.10) !important;
}

.status-pendente,
.badge-pendente{
color:var(--dourado) !important;
border-color:var(--borda-dourada) !important;
background:var(--dourado-suave) !important;
}

.badge,
.tag,
.permissao-tag{
display:inline-flex;
align-items:center;
justify-content:center;

padding:7px 11px;

color:var(--texto-2);
font-size:13px;
font-weight:700;

background:rgba(255,255,255,.05);
border:1px solid var(--borda);
border-radius:999px;
}

/* =========================================================
28. PERMISSÕES DA SEGURANÇA
========================================================= */

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

margin-top:10px;
}

.permissao-item,
.funcao-item,
.ministerio-item{
display:flex;
align-items:center;
gap:10px;

padding:12px;

color:var(--texto-2);

background:rgba(15,15,15,.88);
border:1px solid var(--borda);
border-radius:14px;

cursor:pointer;
transition:var(--transicao);
}

.permissao-item:hover,
.funcao-item:hover,
.ministerio-item:hover{
border-color:var(--borda-azul);
background:rgba(46,134,255,.08);
}

.permissao-item input,
.funcao-item input,
.ministerio-item input{
width:auto;
accent-color:var(--azul);
}

.seguranca-acoes{
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
gap:12px;

margin-top:20px;
}

.seguranca-acoes button{
min-width:170px;
}

.btn-perigo{
color:var(--vermelho);
border-color:rgba(255,92,92,.40);
background:rgba(255,92,92,.07);
}

.btn-perigo:hover{
color:white;
border-color:rgba(255,92,92,.65);
background:rgba(255,92,92,.18);
}

.btn-sucesso{
color:var(--verde);
border-color:rgba(76,217,123,.40);
background:rgba(76,217,123,.07);
}

.btn-sucesso:hover{
color:white;
border-color:rgba(76,217,123,.65);
background:rgba(76,217,123,.16);
}

/* =========================================================
29. MENSAGENS E ESTADOS VAZIOS
========================================================= */

.mensagem-vazia,
.estado-vazio,
.lista-vazia{
padding:24px;

text-align:center;
color:var(--texto-3);

background:rgba(10,10,10,.65);
border:1px dashed var(--borda);
border-radius:18px;
}

.mensagem-vazia strong,
.estado-vazio strong,
.lista-vazia strong{
color:var(--texto);
}

.alerta-simples{
padding:13px 14px;

color:var(--texto-2);

background:rgba(255,255,255,.05);
border:1px solid var(--borda);
border-radius:14px;
}

.alerta-azul{
border-color:var(--borda-azul);
background:rgba(46,134,255,.10);
}

.alerta-dourado{
border-color:var(--borda-dourada);
background:var(--dourado-suave);
}

.alerta-vermelho{
border-color:rgba(255,92,92,.38);
background:rgba(255,92,92,.10);
}

/* =========================================================
30. TABELAS SIMPLES
========================================================= */

.tabela-simples{
width:100%;
border-collapse:collapse;

overflow:hidden;
border-radius:16px;
}

.tabela-simples th,
.tabela-simples td{
padding:13px 14px;

text-align:left;
color:var(--texto-2);

border-bottom:1px solid var(--borda);
}

.tabela-simples th{
color:var(--azul);
background:rgba(46,134,255,.08);
}

.tabela-simples tr:hover td{
background:rgba(255,255,255,.03);
}

/* =========================================================
31. PERFIL PÚBLICO / VISUALIZAÇÃO DE MEMBRO
========================================================= */

.perfil-publico{
max-width:1000px;
margin:0 auto;
}

.perfil-publico-card{
display:flex;
align-items:center;
gap:24px;

padding:28px;

background:rgba(10,10,10,.80);
border:1px solid var(--borda);
border-radius:var(--radius-lg);
box-shadow:var(--sombra);

}

.perfil-publico-card img{
width:120px;
height:120px;

border-radius:50%;
object-fit:cover;
object-position:center;

background:#050505;
border:1px solid var(--borda-azul);
padding:5px;
}

.perfil-publico-card h2{
color:var(--azul);
font-size:34px;
margin-bottom:6px;
}

.perfil-publico-card p{
color:var(--texto-2);
}

.perfil-publico-info{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:16px;
margin-top:22px;
}

/* =========================================================
32. AJUSTES PARA AULAS EM TEXTO
========================================================= */

.aula-rh-box pre,
.aula-rh-box textarea,
.documento-rh-box pre{
width:100%;
color:var(--texto-2);
line-height:1.7;
white-space:pre-wrap;
}

.btn-copiar-rh{
margin-bottom:14px;
}

.aula-rh-box .registro-aula-rh{
margin-top:18px;
}

/* =========================================================
33. MICRO AJUSTES DE PERFORMANCE
========================================================= */

*{
-webkit-tap-highlight-color:transparent;
}

@media (prefers-reduced-motion: reduce){

*,
*::before,
*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
}

}

/* =========================================================
34. RESPONSIVO EXTRA
========================================================= */

@media(max-width:780px){


.form-linha,
.form-linha-3{
    grid-template-columns:1fr;
}

.seguranca-acoes{
    justify-content:center;
}

.seguranca-acoes button{
    width:100%;
}

.perfil-publico-card{
    flex-direction:column;
    text-align:center;
}

.permissoes-grid,
.funcoes-grid,
.ministerios-grid{
    grid-template-columns:1fr;
}
}

@media(max-width:520px){

.cards-home,
.aulas-grid,
.rh-cards,
.rh-doc-grid,
.requerimentos-botoes,
.membros-grid,
.perfil-dados,
.perfil-publico-info{
    grid-template-columns:1fr;
}

.linha{
    width:170px;
}

.perfil-flutuante{
    max-width:190px;
}

.perfil-flutuante div{
    max-width:120px;
    overflow:hidden;
}

.perfil-flutuante h4,
.perfil-flutuante p{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
}

/* =========================================================
35. AJUSTES FINAIS
========================================================= */

::selection{
background:rgba(46,134,255,.35);
color:white;
}

/* =========================================================
CORREÇÃO FINAL - OLHINHO DA SENHA
========================================================= */

.auth-card .senha-box{
position:relative;
width:100%;
display:block;
margin-bottom:14px;
}

.auth-card .senha-box input{
width:100%;
margin:0;
padding-right:56px;
}

.auth-card .senha-box .btn-ver-senha{
position:absolute !important;
right:8px;
top:50%;

transform:translateY(-50%) !important;

width:38px !important;
height:38px !important;
min-width:38px !important;

padding:0 !important;
margin:0 !important;

display:flex !important;
align-items:center;
justify-content:center;

background:transparent !important;
border:0 !important;
border-radius:50% !important;

box-shadow:none !important;

}

.auth-card .senha-box .btn-ver-senha:hover{
background:rgba(46,134,255,.12) !important;
transform:translateY(-50%) !important;
}

.auth-card .senha-box .icone-olho{
width:20px;
height:12px;

border:2px solid #dbeaff;
border-radius:50%;

position:relative;
display:block;

}

.auth-card .senha-box .icone-olho::before{
content:"";

position:absolute;
top:50%;
left:50%;

width:6px;
height:6px;

background:#dbeaff;
border-radius:50%;

transform:translate(-50%, -50%);

}

.auth-card .senha-box .icone-olho.olho-fechado::after{
content:"";

position:absolute;
top:50%;
left:50%;

width:24px;
height:2px;

background:#dbeaff;
border-radius:20px;

transform:translate(-50%, -50%) rotate(-35deg);

}

.botoes-promocao-rh{
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.btn-aprovar-rh,
.btn-reprovar-rh{
    flex: 1;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-aprovar-rh{
    background: linear-gradient(135deg, #0f8f4f, #17c964);
    color: white;
}

.btn-reprovar-rh{
    background: linear-gradient(135deg, #8f1d1d, #d93636);
    color: white;
}

.btn-aprovar-rh:hover,
.btn-reprovar-rh:hover{
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Remove o amarelo estranho do autofill do navegador */

.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus{
-webkit-text-fill-color:#ffffff;
box-shadow:0 0 0 1000px #0b0b0b inset !important;
transition:background-color 9999s ease-in-out 0s;
}

.card-zerar-pontos{
    margin-top: 28px;
    padding: 26px;
    border-radius: 22px;
    border: 1px solid rgba(220, 38, 38, 0.45);
    background:
        linear-gradient(135deg, rgba(127, 29, 29, 0.34), rgba(10, 10, 15, 0.88)),
        rgba(15, 15, 20, 0.92);
    box-shadow:
        0 0 30px rgba(220, 38, 38, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.zerar-pontos-info{
    max-width: 850px;
}

.badge-perigo{
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.18);
    border: 1px solid rgba(248, 113, 113, 0.45);
    color: #fca5a5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.card-zerar-pontos h2{
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
}

.card-zerar-pontos p{
    margin: 0;
    color: #d1d5db;
    font-size: 16px;
    line-height: 1.6;
}

.btn-zerar-pontos{
    min-width: 270px;
    padding: 16px 22px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.22);
    transition: 0.2s ease;
}

.btn-zerar-pontos:hover{
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 36px rgba(239, 68, 68, 0.32);
}

.btn-zerar-pontos:active{
    transform: translateY(0);
}

@media (max-width: 800px){
    .card-zerar-pontos{
        flex-direction: column;
        align-items: stretch;
        padding: 22px;
    }

    .btn-zerar-pontos{
        width: 100%;
        min-width: unset;
    }

    .card-zerar-pontos h2{
        font-size: 23px;
    }
}

.ranking-home-card{
    margin-top: 28px;
    padding: 26px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(10, 40, 90, 0.35), rgba(5, 8, 18, 0.92)),
        rgba(10, 10, 18, 0.92);
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow:
        0 0 28px rgba(37, 99, 235, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.ranking-home-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.ranking-badge{
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.45);
    color: #93c5fd;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ranking-home-card h2{
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
}

.ranking-home-card p{
    margin: 8px 0 0;
    color: #cbd5e1;
    font-size: 15px;
}

.ranking-pontos-home{
    display: grid;
    gap: 12px;
}

.ranking-item{
    display: grid;
    grid-template-columns: 64px 52px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.84);
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: 0.2s ease;
}

.ranking-item:hover{
    transform: translateY(-2px);
    border-color: rgba(96, 165, 250, 0.45);
}

.ranking-posicao{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.9);
    color: #e5e7eb;
    font-size: 18px;
    font-weight: 900;
}

.ranking-avatar{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    object-fit: cover;
}

.ranking-info{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ranking-info strong{
    color: #ffffff;
    font-size: 17px;
}

.ranking-info span{
    color: #94a3b8;
    font-size: 14px;
}

.ranking-pontos{
    min-width: 90px;
    text-align: right;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
}

.ranking-pontos span{
    display: block;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.primeiro-lugar{
    background:
        linear-gradient(135deg, rgba(234, 179, 8, 0.28), rgba(15, 23, 42, 0.9));
    border-color: rgba(250, 204, 21, 0.65);
    box-shadow: 0 0 24px rgba(250, 204, 21, 0.16);
}

.primeiro-lugar .ranking-posicao{
    background: linear-gradient(135deg, #facc15, #ca8a04);
    color: #1f1600;
}

.segundo-lugar{
    background:
        linear-gradient(135deg, rgba(203, 213, 225, 0.22), rgba(15, 23, 42, 0.9));
    border-color: rgba(203, 213, 225, 0.55);
}

.segundo-lugar .ranking-posicao{
    background: linear-gradient(135deg, #e5e7eb, #94a3b8);
    color: #111827;
}

.terceiro-lugar{
    background:
        linear-gradient(135deg, rgba(180, 83, 9, 0.24), rgba(15, 23, 42, 0.9));
    border-color: rgba(217, 119, 6, 0.55);
}

.terceiro-lugar .ranking-posicao{
    background: linear-gradient(135deg, #d97706, #92400e);
    color: #fff7ed;
}

.ranking-carregando,
.ranking-vazio,
.ranking-erro{
    padding: 18px;
    border-radius: 16px;
    text-align: center;
    color: #cbd5e1;
    background: rgba(15, 23, 42, 0.75);
}

.ranking-erro{
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.45);
}

@media (max-width: 700px){
    .ranking-item{
        grid-template-columns: 48px 42px 1fr;
    }

    .ranking-pontos{
        grid-column: 1 / -1;
        text-align: left;
        font-size: 20px;
        padding-left: 4px;
    }

    .ranking-home-card h2{
        font-size: 23px;
    }
}

/* =========================================================
27. LAYOUT COM SIDEBAR DIREITA + USUÁRIO NO HEADER
========================================================= */

:root{
    --sidebar-w:270px;
}

/* Coluna principal ocupa tudo, menos a largura da sidebar (à esquerda). */
.app-main{
    min-height:100vh;
    margin-left:var(--sidebar-w);
    display:flex;
    flex-direction:column;
}

.app-main .content{
    flex:1 0 auto;
}

/* ---------- Header: marca à esquerda, usuário à direita ---------- */
.marca{
    gap:14px;
}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    font-size:22px;
    line-height:1;
    color:var(--texto-2);
    background:transparent;
    border:1px solid var(--borda);
    border-radius:12px;
}

.menu-toggle:hover{
    color:var(--texto);
    border-color:var(--borda-azul);
    background:rgba(46,134,255,.08);
}

.topbar-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    background:rgba(8,8,8,.6);
    border:1px solid var(--borda-azul);
    border-radius:14px;
    cursor:pointer;
    transition:var(--transicao);
}

.topbar-user:hover{
    background:#101010;
    box-shadow:var(--sombra-azul);
}

.topbar-user-info{
    text-align:right;
    line-height:1.2;
}

.topbar-user-info h4{
    color:var(--texto);
    font-size:15px;
}

.topbar-user-info p{
    color:var(--azul);
    font-size:13px;
}

.topbar-user img{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    background:#050505;
    border:1px solid var(--borda-azul);
    padding:3px;
}

/* ---------- Sidebar (direita) ---------- */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:var(--sidebar-w);
    z-index:1000;

    display:flex;
    flex-direction:column;

    background:rgba(6,6,6,.98);
    border-right:1px solid var(--borda);
    box-shadow:8px 0 26px rgba(0,0,0,.35);

    overflow-y:auto;
}

.sidebar-topo{
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px 20px 16px 20px;
    border-bottom:1px solid var(--borda);
}

.sidebar-topo img{
    width:44px;
    border-radius:10px;
    cursor:pointer;
}

.sidebar-marca{
    font-size:18px;
    font-weight:bold;
    letter-spacing:.5px;
    color:var(--texto);
}

.sidebar-fechar{
    display:none;
    margin-left:auto;
    width:36px;
    height:36px;
    font-size:24px;
    line-height:1;
    color:var(--texto-3);
    background:transparent;
    border:1px solid var(--borda);
    border-radius:10px;
}

.sidebar-nav{
    flex:1 1 auto;
    padding:16px 14px;
}

.nav-grupo{
    margin-bottom:8px;
}

.nav-grupo-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;

    padding:8px 12px;
    margin-bottom:4px;

    background:transparent;
    border:none;
    border-radius:10px;

    cursor:pointer;
    transition:var(--transicao);
}

.nav-grupo-header:hover{
    background:rgba(255,255,255,.04);
}

.nav-grupo-titulo{
    font-size:11px;
    font-weight:bold;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--texto-3);
}

.nav-grupo-header:hover .nav-grupo-titulo{
    color:var(--texto-2);
}

.nav-grupo-chevron{
    width:16px;
    height:16px;
    flex-shrink:0;
    color:var(--texto-3);
    transition:transform .2s ease;
}

.nav-grupo.recolhido .nav-grupo-chevron{
    transform:rotate(-90deg);
}

.nav-grupo.recolhido .nav-grupo-itens{
    display:none;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:11px;
    width:100%;

    padding:11px 12px;
    margin-bottom:4px;

    text-align:left;
    font-size:14px;
    color:var(--texto-2);

    background:transparent;
    border:1px solid transparent;
    border-radius:12px;

    transition:var(--transicao);
}

.nav-item:hover{
    color:var(--texto);
    border-color:var(--borda-azul);
    background:rgba(46,134,255,.08);
}

.nav-item.ativo{
    color:var(--texto);
    border-color:var(--borda-azul);
    background:var(--azul-suave);
}

.nav-item-icone{
    width:20px;
    height:20px;
    flex-shrink:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:var(--azul);
}

.nav-item-icone svg{
    width:18px;
    height:18px;
    display:block;
}

.nav-item.ativo .nav-item-icone,
.nav-item:hover .nav-item-icone{
    color:var(--dourado);
}

.sidebar-rodape{
    padding:16px;
    border-top:1px solid var(--borda);
}

.sidebar-rodape .btn-sair{
    width:100%;
    margin:0;
    text-align:center;
}

/* overlay só aparece no mobile quando a sidebar abre */
.sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:999;
    background:rgba(0,0,0,.55);
}

/* ---------- Responsivo: sidebar vira gaveta ---------- */
@media(max-width:1050px){

    .app-main{
        margin-left:0;
    }

    .menu-toggle{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .sidebar{
        transform:translateX(-100%);
        transition:transform .25s ease;
    }

    .sidebar.aberta{
        transform:translateX(0);
    }

    .sidebar-fechar{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .sidebar-overlay.ativo{
        display:block;
    }

    /* header volta a ficar em linha, sem empilhar */
    .topbar{
        flex-direction:row;
        min-height:74px;
        padding:12px 18px;
    }
}

@media(max-width:480px){

    .topbar-user-info{
        display:none;
    }

    .topbar-user{
        padding:4px;
        border:none;
        background:transparent;
    }

    .marca h2{
        font-size:24px;
    }
}

/* =========================================================
28. MINISTÉRIO DE CONTROLE (M.CL)
========================================================= */

.controle-page{
    max-width:1000px;
    margin:0 auto;
}

.controle-hero{
    text-align:center;
    margin-bottom:10px;
}

.controle-hero h1{
    font-size:38px;
    color:var(--azul);
}

.controle-box{
    background:var(--card);
    border:1px solid var(--borda);
    border-radius:var(--radius);
    padding:26px;
    margin-bottom:24px;
    box-shadow:var(--sombra);
}

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

.controle-box h2{
    color:var(--texto);
    font-size:22px;
}

.controle-estatuto-texto{
    white-space:pre-wrap;
    line-height:1.7;
    color:var(--texto-2);
    font-size:15px;

    max-height:460px;
    overflow-y:auto;

    padding:18px;
    background:var(--preto-2);
    border:1px solid var(--borda);
    border-radius:12px;
}

.controle-estatuto-editor{
    width:100%;
    min-height:340px;

    padding:16px;
    color:var(--texto);
    background:var(--preto-2);
    border:1px solid var(--borda-azul);
    border-radius:12px;

    line-height:1.6;
    font-size:14px;
    resize:vertical;
}

.controle-acoes{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}

/* Botões */
.btn-controle,
.btn-controle-sec,
.btn-controle-mini{
    padding:10px 16px;
    border-radius:10px;
    font-size:14px;
    border:1px solid transparent;
    transition:var(--transicao);
}

.btn-controle{
    color:#fff;
    background:var(--azul-escuro);
    border-color:var(--borda-azul);
}

.btn-controle:hover{
    background:var(--azul);
}

.btn-controle-sec{
    color:var(--texto-2);
    background:#101010;
    border-color:var(--borda);
}

.btn-controle-sec:hover{
    color:var(--texto);
    border-color:var(--borda-azul);
}

.btn-controle-mini{
    padding:6px 11px;
    font-size:12px;
    color:var(--texto-2);
    background:#131313;
    border-color:var(--borda);
}

.btn-controle-mini:hover{
    color:var(--texto);
    border-color:var(--borda-azul);
}

.btn-controle-mini.btn-remover:hover{
    color:var(--vermelho);
    border-color:rgba(255,92,92,.45);
}

/* Cargos (Ministro / Auxiliar) */
.controle-cargos{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:20px;
}

.controle-cargo-card{
    background:var(--preto-2);
    border:1px solid var(--borda);
    border-radius:12px;
    padding:16px;
}

.controle-cargo-titulo{
    display:block;
    font-size:12px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--texto-3);
    margin-bottom:6px;
}

.controle-cargo-nome{
    display:block;
    font-size:18px;
    font-weight:bold;
    color:var(--texto);
}

.controle-cargo-admin{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.controle-cargo-admin input,
.controle-add-membro input{
    padding:10px 12px;
    color:var(--texto);
    background:#0c0c0c;
    border:1px solid var(--borda);
    border-radius:10px;
}

.controle-add-membro{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.controle-add-membro input{
    flex:1 1 220px;
}

.controle-membros-titulo{
    color:var(--texto-2);
    font-size:16px;
    margin-bottom:12px;
}

.controle-lista-membros{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.controle-membro-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;

    padding:12px 14px;
    background:var(--preto-2);
    border:1px solid var(--borda);
    border-radius:12px;
}

.controle-membro-nome{
    color:var(--texto);
    font-size:15px;
    display:flex;
    align-items:center;
    gap:8px;
}

.controle-membro-acoes{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.controle-etiqueta{
    font-size:11px;
    font-weight:bold;
    padding:2px 8px;
    border-radius:999px;
}

.etiqueta-ministro{
    color:var(--dourado);
    background:var(--dourado-suave);
    border:1px solid var(--borda-dourada);
}

.etiqueta-auxiliar{
    color:var(--azul);
    background:var(--azul-suave);
    border:1px solid var(--borda-azul);
}

@media(max-width:700px){
    .controle-cargos{
        grid-template-columns:1fr;
    }
}