/* ==========================================================================
   EQS SYSTEM - GLOBAL RESPONSIVE DESIGN & MOBILE STYLESHEET
   ========================================================================== */

:root {
    --mobile-nav-bg: #0f172a;
    --mobile-nav-text: #f8fafc;
    --mobile-accent: #38bdf8;
    --mobile-touch-size: 44px;
}

/* --- RESET GLOBAL PARA RESPONSIVIDADE --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* --- CONTÊINERES DE TABELAS RESPONSIVAS --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: #ffffff;
}

.table-responsive table {
    width: 100% !important;
    min-width: 600px; /* Garante rolagem horizontal elegante sem quebrar layout */
    margin-bottom: 0 !important;
}

/* Custom Scrollbar suave para tabelas no mobile */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* --- CONTROLES DE FORMULÁRIO ACCESSÍVEIS NO MOBILE --- */
@media (max-width: 768px) {
    input, select, textarea, button {
        font-size: 16px !important; /* Evita zoom automático no iOS Safari ao focar */
    }
}

/* ==========================================================================
   CABECALHO NAVEGAVEL CUSTOMIZADO (NAVBAR-CUSTOM) - MOBILE DRAWER
   ========================================================================== */

/* Toggle Hambúrguer (Escondido no Desktop) */
.mobile-nav-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 10px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 1060;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--mobile-accent);
    outline: none;
}

.mobile-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animação do botão Hambúrguer em X */
.mobile-nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.mobile-nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Regras de transição e layout até 992px */
@media (max-width: 992px) {
    .navbar-custom {
        padding: 0.75rem 1.25rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        background-color: var(--mobile-nav-bg) !important;
    }

    .navbar-brand-custom {
        gap: 8px !important;
    }

    .navbar-brand-custom span {
        font-size: 1.15rem !important;
    }

    .nav-title-divider {
        display: none !important; /* Oculta o divisor extenso no mobile */
    }

    .mobile-nav-toggle {
        display: flex !important;
    }

    /* Menu de links transformado em Drawer Mobile Dropdown */
    .nav-menu-links {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #0f172a !important;
        border-top: 1px solid #1e293b !important;
        border-bottom: 3px solid var(--mobile-accent) !important;
        padding: 1rem 1.25rem !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
        z-index: 1055 !important;
        align-items: stretch !important;
    }

    .nav-menu-links.active {
        display: flex !important;
        animation: mobileNavSlideDown 0.25s cubic-bezier(0, 0, 0.2, 1) forwards;
    }

    .nav-menu-links li {
        width: 100% !important;
        display: block !important;
    }

    .nav-menu-links li+li::before {
        display: none !important; /* Remove barra vertical no mobile */
    }

    .nav-menu-links a {
        display: block !important;
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #e2e8f0 !important;
        font-size: 0.95rem !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
    }

    .nav-menu-links a:hover,
    .nav-menu-links a.active {
        background: rgba(56, 189, 248, 0.15) !important;
        color: var(--mobile-accent) !important;
        border-color: rgba(56, 189, 248, 0.4) !important;
        padding-left: 20px !important;
    }

    .nav-menu-links .logout-btn {
        margin-top: 0.4rem !important;
        border-color: rgba(239, 68, 68, 0.4) !important;
        color: #fca5a5 !important;
        text-align: center !important;
    }
}

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


/* ==========================================================================
   REGRAS ESPECÍFICAS PARA A LANDING PAGE (INDEX.HTML)
   ========================================================================== */

@media (max-width: 992px) {
    /* Home Grid: logos empilhadas acima do carrossel no mobile */
    .home-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .home-sidebar {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0.75rem !important;
        gap: 0.75rem !important;
        max-height: none !important;
    }

    .logo-eqs-container, .logo-brasao-container, .logo-ltt-container {
        max-width: 120px !important;
        margin: 0 !important;
    }

    .home-banner-container {
        height: 350px !important;
        border-radius: 16px !important;
    }

    .slide-content {
        padding: 1.25rem 1rem !important;
    }

    .slide-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    .slide-desc {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .project-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Botão flutuante de alternar tema (Evita sobreposição com títulos de seções) */
    .theme-toggle-floating {
        top: 10px !important;
        right: 10px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 6px !important;
        z-index: 1045 !important;
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
    }

    .theme-toggle-floating svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Barra de Navegação Flutuante inferior da Home - SEM BORDAS BRANCAS E ÍCONES REDONDOS COM ZOOM */
    .home-navigation-row {
        position: fixed !important;
        bottom: 8px !important;
        left: 2% !important;
        width: 96% !important;
        padding: 6px 8px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 2px !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(56, 189, 248, 0.4) transparent !important;
        border-radius: 35px !important;
        background: rgba(15, 23, 42, 0.94) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(56, 189, 248, 0.35) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
        z-index: 1040 !important;
    }

    .home-navigation-row::-webkit-scrollbar {
        height: 3px !important;
        display: block !important;
    }

    .home-navigation-row::-webkit-scrollbar-thumb {
        background: rgba(56, 189, 248, 0.5) !important;
        border-radius: 4px !important;
    }

    .nav-btn-item {
        flex: 0 0 auto !important;
        min-width: 56px !important;
        max-width: 72px !important;
        padding: 2px 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .nav-btn-circle {
        width: 30px !important;
        height: 30px !important;
        margin: 0 auto !important;
        border-radius: 50% !important;
        overflow: hidden !important; /* Corta totalmente as bordas quadradas brancas */
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-btn-circle img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        transform: scale(1.35) !important; /* Zoom para eliminar as bordas brancas dos assets WEBP */
        background: transparent !important;
        border: none !important;
    }

    .nav-btn-item span {
        font-size: 0.63rem !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 66px !important;
        display: block !important;
        line-height: 1.1 !important;
    }

    /* --- SEÇÃO DE EQUIPE NO MOBILE: COORDENADOR NO TOPO, ADJUNTO ABAIXO, PESQUISADORES E IT LADO A LADO --- */
    #equipe {
        padding: 1.25rem 0.5rem !important;
    }

    #equipe .section-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.2rem !important;
    }

    #equipe .section-desc {
        font-size: 0.78rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }

    .team-container {
        padding: 0 !important;
        gap: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* No Mobile: empilhar Coordenador (order 1), Coordenador Adjunto (order 2) e Pesquisadores (order 3) */
    .team-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .category-coordenador {
        order: 1 !important;
        width: 100% !important;
    }

    .category-adjunto {
        order: 2 !important;
        width: 100% !important;
    }

    .category-pesquisadores {
        order: 3 !important;
        width: 100% !important;
    }

    .team-category {
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        gap: 0.25rem !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .team-category-title {
        font-size: 0.66rem !important;
        justify-content: center !important;
        letter-spacing: 0.8px !important;
        margin-bottom: 0.3rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .team-avatars {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
        justify-content: center !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .team-avatar {
        width: 82px !important;
        margin-bottom: 0.25rem !important;
        text-align: center !important;
        flex: 0 0 auto !important;
    }

    .team-avatar img,
    .team-avatar .avatar-fallback {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 0.12rem !important;
        font-size: 0.85rem !important;
        border-radius: 50% !important;
    }

    .team-avatar h3 {
        font-size: 0.66rem !important;
        margin-bottom: 0.1rem !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;
    }

    .team-avatar span {
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
    }

    .lattes-tag {
        font-size: 0.56rem !important;
        margin-top: 2px !important;
        padding: 1px 3px !important;
    }
}

@media (max-width: 576px) {
    .home-banner-container {
        height: 310px !important;
    }

    .slide-tag {
        font-size: 0.68rem !important;
        padding: 2px 7px !important;
    }

    .slide-title {
        font-size: 1.1rem !important;
    }

    .slide-desc {
        font-size: 0.78rem !important;
        -webkit-line-clamp: 2;
    }

    /* Redução de Padding das seções da Home */
    section {
        padding: 1.75rem 0.75rem !important;
    }

    .section-title {
        font-size: 1.25rem !important;
    }
}


/* ==========================================================================
   REGRAS ESPECÍFICAS PARA A TELA DE MAPA (MAPA.HTML & INDEX.HTML MAP)
   ========================================================================== */

@media (max-width: 768px) {
    #map, .map-container #map {
        height: calc(100vh - 220px) !important;
        min-height: 380px !important;
        border-radius: 12px !important;
    }

    /* Popups do Leaflet em Telas Touch */
    .leaflet-popup-content-wrapper {
        max-width: 85vw !important;
        border-radius: 12px !important;
        padding: 6px !important;
    }

    .leaflet-popup-content {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 10px 12px !important;
    }

    /* Barra de pesquisa sobre o mapa */
    .BarradePesquisa {
        width: 88% !important;
        top: 10px !important;
    }

    .BarradePesquisa input {
        width: 100% !important;
        font-size: 0.88rem !important;
        padding: 8px 12px !important;
    }

    /* Botão flutuante de Traçar Rota (Compacto para não ficar estendido) */
    .btn-route-toggle {
        top: 10px !important;
        left: 50px !important;
        right: auto !important;
        max-width: 130px !important;
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
        height: 32px !important;
        border-radius: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        z-index: 1000 !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    }

    .btn-route-toggle svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .routing-panel {
        width: calc(100% - 20px) !important;
        left: 10px !important;
        top: 48px !important;
        max-height: calc(100% - 60px) !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
    }
}


/* ==========================================================================
   REGRAS ESPECÍFICAS PARA AS TELAS DE GESTÃO, DECISÃO E ANÁLISE
   ========================================================================== */

@media (max-width: 768px) {
    /* Múltiplos Cartões / KPI grids */
    .dashboard-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Otimizacao & Analise Admin: Grids de métricas */
    .row-cols-md-4, .row-cols-lg-4, .row-cols-md-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Comparador: empilhar colunas das campanhas A e B */
    .comparador-grid, .comparison-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Modal da Árvore de Decisão no SGP */
    .arvore-decisao-content, .modal-dialog {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
    }

    /* Tela de Login */
    .login-card {
        padding: 2rem 1.5rem !important;
        width: 90% !important;
        max-width: 380px !important;
    }
}

@media (max-width: 480px) {
    .row-cols-md-4, .row-cols-lg-4, .row-cols-md-3 {
        grid-template-columns: 1fr !important;
    }
}