/* ============================================================
   gaspar-menu-gaveta.css
   Menu lateral em gaveta — exclusivo da página do Gaspar
   Não altera estrutura.css nem GD-menu-conteudos.php

   Toda a lógica está encapsulada em @media (min-width: 1300px).
   Abaixo disso, o layout comporta-se como no site original:
   - #e-bloco-menu-conteudos visível e fluido
   - .e-conteudo-global, #e-footer-links, #e-footer-rodape sem overrides
   ============================================================ */


/* ── DESKTOP (≥ 1300px) ─────────────────────────────────────── */
@media (min-width: 1300px) {

    /* Esconde o menu lateral original — a gaveta substitui-o */
    #e-bloco-menu-conteudos {
        display: none !important;
    }

    /* Margens do conteúdo — estado recolhido (barra fina) */
    .e-conteudo-global {
        margin-left: 100px !important;
        margin-right: 20px !important;
        transition: margin-left 0.22s ease;
    }

    /* Margens do footer — estado recolhido */
    #e-footer-links,
    #e-footer-rodape {
        margin-left: 75px !important;
        transition: margin-left 0.22s ease;
    }

    /* Estado com gaveta aberta: empurra conteúdo e footer */
    body.gsp-gaveta-expandida .e-conteudo-global {
        margin-left: 366px !important;
    }
    body.gsp-gaveta-expandida #e-footer-links,
    body.gsp-gaveta-expandida #e-footer-rodape {
        margin-left: 342px !important;
    }

    /* ── Barra lateral fina (sempre visível) ────────────────── */
    #gsp-gaveta-barra {
        position: fixed;
        left: 0;
        top: 62.5px;
        bottom: 0;
        width: 75px;
        background-color: #FAFAFA;
        border-right: 1px solid #D6D6D6;
        z-index: 9;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        gap: 0;
        overflow: visible;
        box-sizing: border-box;
    }

    /* Botão de abrir a gaveta (topo da barra) */
    #gsp-gaveta-toggle {
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #666;
        margin-bottom: 6px;
        flex-shrink: 0;
        transition: background 0.15s, color 0.15s;
        position: relative;
    }
    #gsp-gaveta-toggle:hover {
        background-color: #EFEFEF;
        color: #222;
    }

    /* Linha separadora abaixo do toggle */
    #gsp-gaveta-barra .gsp-barra-sep {
        width: 32px;
        height: 1px;
        background: #E0E0E0;
        margin-bottom: 6px;
        flex-shrink: 0;
    }

    /* Cada item-ícone na barra */
    .gsp-barra-item {
        position: relative;
        width: 58px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #888;
        text-decoration: none;
        flex-shrink: 0;
        transition: background 0.15s, color 0.15s;
    }
    .gsp-barra-item:hover {
        background-color: #EFEFEF;
        color: #222;
    }
    .gsp-barra-item svg {
        flex-shrink: 0;
    }

    /* ── Tooltips — mecanismo idêntico ao gsp-btn-feedback ─── */
    .gsp-barra-item[data-tooltip]::after,
    #gsp-gaveta-toggle[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 10px);
        top: 50%;
        transform: translateY(-50%);
        background: #2d3748;
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        font-family: Montserrat, 'Roboto', sans-serif;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 9999;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    .gsp-barra-item[data-tooltip]:hover::after,
    #gsp-gaveta-toggle[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* ── Gaveta completa (oculta por defeito) ───────────────── */
    #gsp-gaveta-painel {
        position: fixed;
        left: 0;
        top: 62.5px;
        bottom: 0;
        width: 342px;
        background-color: #FAFAFA;
        border-right: 1px solid #D6D6D6;
        z-index: 9;
        transform: translateX(-342px);
        transition: transform 0.22s ease;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 12px;
        box-sizing: border-box;
        box-shadow: 3px 0 8px rgba(0,0,0,0.06);
    }
    #gsp-gaveta-painel::-webkit-scrollbar { width: 4px; }
    #gsp-gaveta-painel::-webkit-scrollbar-track { background: transparent; }
    #gsp-gaveta-painel::-webkit-scrollbar-thumb { background-color: #E0E0E0; border-radius: 2px; }
    #gsp-gaveta-painel::-webkit-scrollbar-thumb:hover { background-color: #ccc; }

    /* Estado aberto */
    #gsp-gaveta-painel.gsp-gaveta-aberta {
        transform: translateX(0);
    }

    /* Botão fechar — canto superior direito da gaveta */
    #gsp-gaveta-fechar {
        position: absolute;
        top: 17px;
        right: 8px;
        width: 33px;
        height: 33px;
        border: none;
        background-color: #EEE;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #aaa;
        transition: background 0.15s, color 0.15s;
        z-index: 2;
    }
    #gsp-gaveta-fechar:hover {
        background-color: #FBFBFB;
        color: #444;
    }

    /* Conteúdo da gaveta: reutiliza estilos do original */
    #gsp-gaveta-painel .e-a-p-conteudos {
        width: auto !important;
        box-sizing: border-box;
    }
    #gsp-gaveta-painel .e-a-p-conteudos:hover {
        width: auto !important;
    }
    #gsp-gaveta-painel .e-ul-p-conteudos {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #gsp-gaveta-painel .e-li-p-conteudos {
        float: none;
        display: block;
    }

    /* Evita tremida ao abrir/fechar gaveta — reserva scrollbar */
    html {
        overflow-y: scroll;
    }

} /* /@media (min-width: 1300px) */


/* ── MOBILE / TABLET (< 1300px) ─────────────────────────────
   Esconde toda a UI da gaveta. O layout comporta-se como o site
   original: #e-bloco-menu-conteudos volta a aparecer (fluido)
   e nada é sobreposto no conteúdo nem no footer.               */
@media (max-width: 1299px) {
    #gsp-gaveta-barra,
    #gsp-gaveta-painel,
    #gsp-gaveta-overlay {
        display: none !important;
    }
}

/* Overlay desativado em todos os breakpoints */
#gsp-gaveta-overlay {
    display: none !important;
}