/* =========================================================
   HEADER.CSS - Cabeçalho do Sistema (Versão Corrigida)
   Projeto: MPPE Caatinga Resiste 2026
========================================================= */

/* Garantir que o header-container seja clicável (importante para o botão) */
.header-container {
    position: absolute;
    top: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-header);

    display: flex;
    align-items: center;
    gap: var(--spacing-lg);

    background: rgba(255, 255, 255, 0.97);
    padding: clamp(10px, 2vw, 16px) clamp(18px, 3vw, 32px);
    border-radius: var(--radius-md);

    border: 1px solid rgba(13, 93, 46, 0.2);
    box-shadow: var(--shadow-lg);

    max-width: 92%;

    /* Garantir que o header receba cliques (importante) */
    pointer-events: auto;
}

/* Forçar o botão de ação a ser clicável, mesmo se herdado de pai com pointer-events:none */
#btn-dashboard-acao {
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 101; /* um pouco acima do header */
}

/* Estilo do logo */
.logo-titulo {
    height: clamp(45px, 6vw, 70px);
    width: auto;
}

/* Título em 3D (caso usado) */
.titulo-3d {
    margin: 0;
    font-size: clamp(20px, 4vw, 30pt);
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.5px;

    text-shadow:
        0 1px 0 #2a7d3f,
        0 2px 4px rgba(13, 93, 46, 0.3);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsividade */
@media (max-width: 1200px) {
    .titulo-3d {
        font-size: clamp(18px, 3.5vw, 26pt);
    }
}

@media (max-width: 992px) {
    .header-container {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .titulo-3d {
        white-space: normal;
        line-height: 1.3;
    }
}

@media (max-width: 768px) {
    .titulo-3d {
        font-size: clamp(14px, 3vw, 18pt);
    }
    
    .header-container {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .header-container {
        padding: var(--spacing-sm) var(--spacing-sm);
    }

    .titulo-3d {
        font-size: 14px;
    }
}

@media (max-height: 700px) {
    .header-container {
        top: 6px;
        padding: 6px var(--spacing-md);
    }
}

/* Modal Dashboard Alerta (pode ser movido para outro arquivo futuramente) */
#dashboard-alerta-modal .modal-content {
    animation: fadeIn 0.3s;
}

#dashboard-alerta-modal .tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

#dashboard-alerta-modal .tab-btn.active {
    color: #0d5d2e;
    border-bottom-color: #0d5d2e;
    font-weight: 600;
}

#dashboard-alerta-modal table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#dashboard-alerta-modal th {
    background: #f8f9fa;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

#dashboard-alerta-modal td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

#dashboard-alerta-modal tr:hover {
    background: #f5f5f5;
}

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