/* ============================================================================
   RESPONSIVE GLOBAL - Adaptação para todos os tamanhos de tela
   ============================================================================
   Breakpoints:
   - ≥1200px : Desktop grande (sidebar + conteúdo amplo)
   - 800-1199px : Desktop/Tablet landscape (sidebar visível, conteúdo ajusta)
   - 576-799px : Tablet portrait / Mobile landscape (sidebar hamburger)
   - ≤575px : Mobile portrait
   ============================================================================ */

/* ============================================================================
   1. LAYOUT BASE — Sidebar + Conteúdo Principal
   ============================================================================ */

/* Sidebar fixa em desktop */
.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 260px;
    height: 100%;
    overflow-y: auto;
    transition: transform 0.35s ease;
}

/* Navbar fixa no topo */
.fixed-navbar {
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    z-index: 20;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.fixed-navbar .page-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Conteúdo principal — ao lado da sidebar */
.main-content {
    margin-left: 260px;
    margin-top: 60px;
    padding: 20px;
    min-height: calc(100vh - 60px);
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Botão hamburger — escondido em desktop */
.menu-mobile-button {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #333;
    cursor: pointer;
    padding: 8px;
    margin-right: 10px;
}

/* Garantir que todo conteúdo respeite o container */
.main-content .box-content,
.main-content .layout-content-shell {
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

/* ============================================================================
   2. IMAGENS E MÍDIA — Nunca estourar o container
   ============================================================================ */
img {
    max-width: 100%;
    height: auto;
}

/* Fix específico para logos que estouram */
.logos-wrapper,
.logos-container {
    flex-wrap: wrap !important;
}

.logos-wrapper img,
.logos-container img {
    max-height: 70px;
    width: auto;
}

/* ============================================================================
   3. TABELAS PRIMEFACES — Scroll horizontal quando necessário
   ============================================================================ */
.ui-datatable {
    width: 100% !important;
    overflow-x: auto !important;
}

.ui-datatable table {
    min-width: 600px;
}

/* ============================================================================
   4. DIÁLOGOS PRIMEFACES — Responsivos
   ============================================================================ */
.ui-dialog {
    max-width: 95vw !important;
    max-height: 90vh !important;
}

.ui-dialog .ui-dialog-content {
    overflow-y: auto !important;
    max-height: calc(90vh - 80px) !important;
}

/* ============================================================================
   5. FORMULÁRIOS — Campos sempre 100% em mobile
   ============================================================================ */
.ui-g > [class*="ui-g-"],
.ui-grid > [class*="ui-g-"],
.p-grid > [class*="p-col-"] {
    box-sizing: border-box;
}

/* ============================================================================
   6. USER MENU (Top Right)
   ============================================================================ */
.layout-user-menu {
    position: relative;
}

.layout-user-menu-btn {
    background: rgba(21, 47, 96, 0.08);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #152f60;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.layout-user-menu-btn:hover {
    background: rgba(21, 47, 96, 0.15);
}

.layout-user-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 48px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 100;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
}

.layout-user-menu:hover .layout-user-menu-panel,
.layout-user-menu:focus-within .layout-user-menu-panel {
    display: block;
}

.layout-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: #333 !important;
    font-size: 0.95rem;
    transition: background 0.15s ease;
}

.layout-user-item:hover {
    background: #f5f7fa;
}

/* ============================================================================
   7. LOADING DIALOG — Centralizado
   ============================================================================ */
.cl-loading-dialog {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.cl-loading-dialog .ui-dialog-content {
    background: transparent !important;
}

.cl-loading-dialog-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.cl-loading-dialog-icon {
    font-size: 2.5rem;
    color: #4a90e2;
}

.cl-loading-dialog-text {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

/* ============================================================================
   BREAKPOINT: ≤1199px — Desktop menor / Tablet Landscape
   ============================================================================ */
@media screen and (max-width: 1199px) {
    .index-modern-container {
        padding: 40px 20px;
    }

    .equipe-container,
    .instituicoes-container,
    .evolucao-container,
    .mapa-historico-container {
        padding: 40px 15px;
    }

    .hero-team h1,
    .hero-partners h1,
    .hero-evolucao h1,
    .hero-timeline h1 {
        font-size: 2.2rem;
    }

    .logos-wrapper {
        gap: 25px;
    }

    .logos-wrapper img {
        height: 55px;
    }

    /* Coluna de formulários — 2 colunas em tablet landscape */
    .team-card {
        width: calc(50% - 25px);
        min-width: 260px;
    }
}

/* ============================================================================
   BREAKPOINT: ≤799px — Sidebar vira hamburger (alinhado com main.js)
   ============================================================================ */
@media screen and (max-width: 799px) {
    /* Sidebar off-canvas */
    .main-menu {
        transform: translateX(-100%);
    }

    html.menu-active .main-menu {
        transform: translateX(0);
        box-shadow: 5px 0 30px rgba(0,0,0,0.2);
    }

    /* Overlay escuro quando menu está aberto */
    html.menu-active::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 25;
    }

    /* Navbar full-width */
    .fixed-navbar {
        left: 0;
    }

    /* Botão hamburger visível */
    .menu-mobile-button {
        display: flex;
    }

    /* Conteúdo ocupa tela toda */
    .main-content {
        margin-left: 0;
        padding: 15px;
    }

    /* Containers de página */
    .index-modern-container {
        padding: 30px 15px;
    }

    .equipe-container,
    .instituicoes-container,
    .evolucao-container,
    .mapa-historico-container,
    .acervo-container {
        padding: 30px 10px;
    }

    /* Tipografia — reduzir para caber */
    .hero-team h1,
    .hero-partners h1,
    .hero-evolucao h1,
    .hero-timeline h1 {
        font-size: 1.8rem;
        letter-spacing: -0.5px;
    }

    .hero-team .subtitle,
    .hero-partners .subtitle,
    .hero-evolucao .subtitle,
    .hero-timeline .subtitle {
        font-size: 1rem;
    }

    /* Logos — menores e wrap */
    .logos-wrapper {
        gap: 15px;
        padding: 0 10px;
    }

    .logos-wrapper img {
        height: 45px;
    }

    .logos-container img {
        height: 50px;
    }

    /* Cards — 1 coluna */
    .team-card {
        width: 100% !important;
        min-width: unset !important;
    }

    .partner-card {
        width: 100% !important;
        height: auto !important;
        padding: 25px !important;
    }

    /* Mapas Históricos — timeline responsivo */
    .timeline {
        padding-left: 25px !important;
    }

    .timeline::before {
        left: 4px !important;
    }

    .timeline-marker {
        left: -33px !important;
        width: 24px !important;
        height: 24px !important;
    }

    .timeline-year {
        position: static !important;
        text-align: left !important;
        width: auto !important;
        margin-bottom: 8px;
        font-size: 1rem;
    }

    .map-card {
        flex-direction: column !important;
        padding: 20px !important;
    }

    .map-image-wrapper {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 200px !important;
    }

    /* Evolução Histórica */
    .exhibit-layout {
        flex-direction: column !important;
    }

    .graphic-frame,
    .narrative-container {
        width: 100% !important;
        flex: unset !important;
    }

    /* Tabelas — scroll horizontal */
    .ui-datatable-scrollable-body {
        overflow-x: auto !important;
    }

    /* Portal Grid */
    .portal-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 15px !important;
    }

    .portal-card {
        min-height: 150px !important;
        padding: 20px 15px !important;
    }

    .portal-icon-wrapper {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }

    .portal-label {
        font-size: 0.95rem !important;
    }

    /* Assinaturas do Acervo */
    .acervo-signature-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Fox Assistant */
    .fox-assistant-btn {
        width: 55px !important;
        height: 55px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 24px !important;
    }

    /* Diálogos PrimeFaces full-screen em mobile */
    .ui-dialog {
        width: 95vw !important;
        left: 2.5vw !important;
    }

    /* Box content sem padding excessivo */
    .box-content {
        padding: 12px !important;
    }

    /* Formulários em coluna única */
    .ui-panelgrid .ui-panelgrid-cell {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }

    /* Relatórios — cards menores */
    .report-link-item {
        padding: 12px 15px !important;
        gap: 12px !important;
    }
}

/* ============================================================================
   BREAKPOINT: ≤575px — Mobile Portrait
   ============================================================================ */
@media screen and (max-width: 575px) {
    .fixed-navbar {
        padding: 0 12px;
    }

    .fixed-navbar .page-title {
        font-size: 1rem;
        max-width: 60vw;
    }

    .main-content {
        padding: 10px;
    }

    /* Tipografia — mínima */
    .hero-team h1,
    .hero-partners h1,
    .hero-evolucao h1,
    .hero-timeline h1 {
        font-size: 1.5rem;
    }

    .hero-portal h4 {
        font-size: 1.1rem !important;
    }

    .hero-portal img {
        max-width: 200px !important;
    }

    /* Logos — stack vertical em mobile */
    .logos-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .logos-wrapper img {
        height: 40px !important;
    }

    .logos-container {
        gap: 15px !important;
    }

    .logos-container img {
        height: 40px !important;
    }

    /* Portal cards — 1 coluna */
    .portal-grid {
        grid-template-columns: 1fr !important;
    }

    /* Narrative cards */
    .narrative-card {
        padding: 20px !important;
    }

    /* Timeline */
    .map-image-wrapper {
        height: 160px !important;
    }

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

    /* Acervo */
    .acervo-hero {
        padding: 20px 15px !important;
    }

    .acervo-hero-title {
        font-size: 1.3rem !important;
    }

    .acervo-tabview.ui-tabs .ui-tabs-panel {
        padding: 15px !important;
    }

    /* Team card padding */
    .team-card {
        padding: 25px 20px !important;
    }

    .card-header {
        font-size: 1.1rem !important;
    }

    /* Campos de input */
    body .ui-inputfield,
    body .ui-inputtext {
        min-height: 44px !important;
        font-size: 16px !important; /* Previne zoom no iOS */
    }

    /* Botões PrimeFaces */
    body .ui-button {
        padding: 8px 12px !important;
        font-size: 0.9rem !important;
    }

    /* Fox Assistant menor */
    .fox-assistant-btn {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
        bottom: 15px !important;
        right: 15px !important;
    }

    .fox-assistant-label {
        display: none !important;
    }

    /* Tabs — stack vertical */
    .acervo-tabview.ui-tabs .ui-tabs-nav {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .acervo-tabview.ui-tabs .ui-tabs-nav li {
        margin: 0 0 5px 0 !important;
    }

    /* Acervo Accordion */
    .acervo-accordion.ui-accordion .ui-accordion-header {
        padding: 14px 16px !important;
        font-size: 1rem !important;
    }
}

/* ============================================================================
   8. UTILIDADES GLOBAIS
   ============================================================================ */

/* Scroll suave em toda a página */
html {
    scroll-behavior: smooth;
}

/* Prevenir overflow horizontal em toda a página */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Garantir que row não cause scroll horizontal */
.row {
    margin-left: 0;
    margin-right: 0;
}

.row > * {
    max-width: 100%;
}

/* Fix para PrimeFaces panels estouram */
.ui-panel,
.ui-fieldset {
    max-width: 100%;
    box-sizing: border-box;
}

/* Fix para botões lado a lado não quebrarem */
.ui-button + .ui-button {
    margin-left: 4px;
}