/* ==========================================================================
   PORTAL CSS - G.R.E.S. VILA DE JAPUÍBA
   ========================================================================== */

:root {
    --azul-principal: #0b2545;
    --azul-escuro: #050c1a;
    --azul-card: #134074;
    --ouro: #ffd700;
    --ouro-hover: #d4af37;
    --branco: #ffffff;
}

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

/* Garante o fundo azul radial na tela inteira */
body, body.portal-bg {
    font-family: 'Inter', sans-serif !important;
    background: radial-gradient(circle at center, var(--azul-card) 0%, var(--azul-escuro) 85%) !important;
    color: #f5f0e8 !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem 1.5rem !important;
}

/* Card central do Login / Mudar Senha */
.login-card {
    width: 100%;
    max-width: 440px;
    background: rgba(19, 64, 116, 0.35) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 24px !important;
    padding: 2.5rem 2rem !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
}

/* Títulos dentro do Card */
.login-card h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.8rem !important;
    color: var(--ouro) !important;
    margin-top: 0.8rem !important;
    margin-bottom: 0.2rem !important;
}

/* Logo Oficial dentro do Login */
.logo-login {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    border: 3px solid var(--ouro) !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.4) !important;
}

/* Formulários */
.form-group {
    text-align: left;
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: rgba(245, 240, 238, 0.8);
    margin-bottom: 0.4rem;
}

/* Inputs de Formulários com Fundo Azul Marinho Transparente */
.form-control {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    background-color: rgba(5, 12, 26, 0.75) !important; /* Azul escuro translúcido */
    color: #ffffff !important; /* Texto branco */
    font-size: 1rem !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: var(--ouro) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25) !important;
    background-color: rgba(5, 12, 26, 0.9) !important;
}

/* Força o fundo azul e texto claro mesmo quando o Chrome auto-preenche o e-mail/senha */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover, 
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #08172e inset !important; /* Azul marinho escuro no autofill */
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Botões */
.btn-ouro {
    width: 100%;
    padding: 0.9rem;
    border-radius: 50px;
    border: none;
    background: linear-gradient(135deg, var(--ouro), var(--ouro-hover));
    color: var(--azul-escuro);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ouro:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.link-voltar {
    display: inline-block;
    margin-top: 1.5rem;
    color: rgba(245, 240, 238, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.link-voltar:hover {
    color: var(--ouro);
}

/* Botão / Link de Sair (Visibilidade Alta) */
.logout-btn {
    color: #ff6b6b !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.2rem !important;
    border: 1px solid rgba(255, 107, 107, 0.5) !important;
    background: rgba(255, 107, 107, 0.1) !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.logout-btn:hover {
    background: rgba(255, 107, 107, 0.25) !important;
    border-color: #ff6b6b !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 107, 107, 0.3) !important;
}

/* Link de Voltar / Ações Secundárias */
.link-voltar, .link-senha {
    color: #FFD700 !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    transition: opacity 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.link-voltar:hover, .link-senha:hover {
    opacity: 0.8 !important;
    text-decoration: underline !important;
}

/*---- Cadastro--------*/
 .cadastro-container {
            width: 100%;
            max-width: 960px;
            margin: 0 auto;
}
.tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
}
.tab-btn {
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            border: 1px solid rgba(255, 215, 0, 0.3);
            background: rgba(19, 64, 116, 0.3);
            color: #f5f0e8;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
}
.tab-btn:hover, .tab-btn.ativo {
            background: rgba(255, 215, 0, 0.15);
            border-color: #FFD700;
            color: #FFD700;
}
.form-cadastro {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            text-align: left;
}
.form-cadastro .full-width {
            grid-column: 1 / -1;
}
@media (max-width: 600px) {
            .form-cadastro { grid-template-columns: 1fr; }
            .form-cadastro .full-width { grid-column: 1; }
}
.tabela-componentes {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
}
.tabela-componentes th,
.tabela-componentes td {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}
.tabela-componentes th {
            color: #FFD700;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
}
.tabela-componentes td {
            color: rgba(245, 240, 238, 0.85);
            font-size: 0.9rem;
}
.tabela-componentes tr:hover td {
            background: rgba(255, 215, 0, 0.04);
}
.badge-funcao {
            display: inline-block;
            padding: 0.2rem 0.8rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
}
.badge-diretoria { background: rgba(255, 215, 0, 0.2); color: #FFD700; }
.badge-componente { background: rgba(0, 204, 102, 0.15); color: #00cc66; }
.acao-btn {
            padding: 0.3rem 0.8rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            transition: all 0.2s;
}
.acao-editar { background: rgba(255, 215, 0, 0.15); color: #FFD700; }
.acao-excluir { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; }
.acao-editar:hover { background: rgba(255, 215, 0, 0.3); }
.acao-excluir:hover { background: rgba(255, 107, 107, 0.3); }