/* ================================================
   ALTERNATIVAS DE HEADER PARA ACRM
   Para testar: adicione uma das classes ao <header> no base.html
   ================================================ */

/* ========================================
   OPÇÃO 1: HEADER BRANCO COM BARRA AZUL NO TOPO
   Adicione class="opcao-1" ao header
   ======================================== */
.header-principal.opcao-1 {
    background: white;
    color: var(--cinza-escuro);
    padding: 0;
    box-shadow: var(--sombra-media);
    border-top: 4px solid var(--acrm-azul);
}

.header-principal.opcao-1 .header-container {
    padding: 1.5rem 2rem;
}

.header-principal.opcao-1 .logo-header h1 {
    color: var(--acrm-azul);
    text-shadow: none;
}

.header-principal.opcao-1 .btn-admin-link {
    background: var(--acrm-azul);
    color: white;
    border: none;
}

.header-principal.opcao-1 .btn-admin-link:hover {
    background: var(--acrm-azul-escuro);
}

.header-principal.opcao-1 .user-area {
    border-left: 1px solid var(--cinza-claro);
}

.header-principal.opcao-1 .user-badge.visitor {
    background: var(--fundo-claro);
    color: var(--cinza-medio);
    border: 1px solid var(--cinza-claro);
}

.header-principal.opcao-1 .user-badge.user {
    background: rgba(52, 152, 219, 0.1);
    color: var(--acrm-azul);
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.header-principal.opcao-1 .user-badge.admin {
    background: rgba(255, 193, 7, 0.15);
    color: #f57c00;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.header-principal.opcao-1 .btn-login {
    background: var(--acrm-azul);
    color: white;
}

.header-principal.opcao-1 .btn-login:hover {
    background: var(--acrm-azul-escuro);
}


/* ========================================
   OPÇÃO 2: HEADER BRANCO LIMPO
   Adicione class="opcao-2" ao header
   ======================================== */
.header-principal.opcao-2 {
    background: white;
    color: var(--cinza-escuro);
    padding: 1.5rem 2rem;
    box-shadow: var(--sombra-media);
    border-bottom: 1px solid var(--cinza-claro);
}

.header-principal.opcao-2 .logo-header h1 {
    color: var(--acrm-azul);
    text-shadow: none;
}

.header-principal.opcao-2 .btn-admin-link {
    background: linear-gradient(135deg, var(--acrm-azul) 0%, var(--acrm-vermelho) 50%, var(--acrm-amarelo) 100%);
    color: white;
    border: none;
}

.header-principal.opcao-2 .btn-admin-link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.header-principal.opcao-2 .user-area {
    border-left: 1px solid var(--cinza-claro);
}

.header-principal.opcao-2 .user-badge.visitor {
    background: white;
    color: var(--cinza-medio);
    border: 2px solid var(--cinza-claro);
}

.header-principal.opcao-2 .user-badge.user {
    background: white;
    color: var(--acrm-azul);
    border: 2px solid var(--acrm-azul);
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.2);
}

.header-principal.opcao-2 .user-badge.user:hover {
    background: var(--acrm-azul);
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.header-principal.opcao-2 .user-badge.admin {
    background: white;
    color: #f57c00;
    border: 2px solid #f57c00;
    box-shadow: 0 2px 6px rgba(245, 124, 0, 0.2);
}

.header-principal.opcao-2 .user-badge.admin:hover {
    background: #f57c00;
    color: white;
    box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
}

.header-principal.opcao-2 .btn-login {
    background: transparent;
    color: var(--cinza-medio);
    border: 1px solid var(--cinza-claro);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.header-principal.opcao-2 .btn-login:hover {
    background: var(--cinza-claro);
    color: var(--cinza-escuro);
    border-color: var(--cinza-medio);
    transform: none;
}


/* ========================================
   OPÇÃO 3: DUAS FAIXAS (AZUL + BRANCO)
   Adicione class="opcao-3" ao header
   ======================================== */
.header-principal.opcao-3 {
    background: white;
    color: var(--cinza-escuro);
    padding: 0;
    box-shadow: var(--sombra-media);
}

.header-principal.opcao-3::before {
    content: '';
    display: block;
    height: 8px;
    background: linear-gradient(to right, 
        var(--acrm-azul) 0%, 
        var(--acrm-azul) 40%, 
        var(--acrm-vermelho) 40%, 
        var(--acrm-vermelho) 70%, 
        var(--acrm-amarelo) 70%, 
        var(--acrm-amarelo) 100%
    );
}

.header-principal.opcao-3 .header-container {
    padding: 1.5rem 2rem;
}

.header-principal.opcao-3 .logo-header h1 {
    color: var(--acrm-azul);
    text-shadow: none;
}

.header-principal.opcao-3 .btn-admin-link {
    background: var(--acrm-vermelho);
    color: white;
    border: none;
}

.header-principal.opcao-3 .btn-admin-link:hover {
    background: var(--acrm-vermelho-escuro);
}

.header-principal.opcao-3 .user-area {
    border-left: 2px solid var(--acrm-azul);
}

.header-principal.opcao-3 .user-badge.visitor {
    background: var(--fundo-claro);
    color: var(--cinza-medio);
    border: 1px solid var(--cinza-claro);
}

.header-principal.opcao-3 .user-badge.user {
    background: var(--acrm-azul);
    color: white;
}

.header-principal.opcao-3 .user-badge.admin {
    background: var(--acrm-vermelho);
    color: white;
}

.header-principal.opcao-3 .btn-login {
    background: var(--acrm-azul);
    color: white;
}

.header-principal.opcao-3 .btn-login:hover {
    background: var(--acrm-azul-escuro);
}


/* ========================================
   OPÇÃO 4: AZUL SUAVE COM TRANSPARÊNCIA
   Adicione class="opcao-4" ao header
   ======================================== */
.header-principal.opcao-4 {
    background: rgba(0, 87, 184, 0.08);
    color: var(--cinza-escuro);
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 8px rgba(0, 87, 184, 0.1);
    border-bottom: 2px solid var(--acrm-azul);
}

.header-principal.opcao-4 .logo-header h1 {
    color: var(--acrm-azul);
    text-shadow: none;
    font-weight: 800;
}

.header-principal.opcao-4 .btn-admin-link {
    background: var(--acrm-azul);
    color: white;
    border: none;
}

.header-principal.opcao-4 .btn-admin-link:hover {
    background: var(--acrm-azul-escuro);
}

.header-principal.opcao-4 .user-area {
    border-left: 1px solid var(--acrm-azul);
}

.header-principal.opcao-4 .user-badge.visitor {
    background: white;
    color: var(--cinza-medio);
    border: 1px solid var(--cinza-claro);
}

.header-principal.opcao-4 .user-badge.user {
    background: var(--acrm-azul);
    color: white;
}

.header-principal.opcao-4 .user-badge.admin {
    background: var(--acrm-amarelo);
    color: var(--cinza-escuro);
    font-weight: 700;
}

.header-principal.opcao-4 .btn-login {
    background: var(--acrm-azul);
    color: white;
}

.header-principal.opcao-4 .btn-login:hover {
    background: var(--acrm-azul-escuro);
}