/* ===== FIX MOBILE EDFORALL - INICIO ===== */
/* Só afeta telemóveis/tablets pequenos. Desktop fica igual. */

@media(max-width: 768px){

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

    body{
        min-height:100dvh !important;
    }

    /* ===== MENU LATERAL MOBILE ===== */

    nav.menu-lateral,
    .menu-lateral{
        width:64px !important;
        min-width:64px !important;
        max-width:64px !important;
        height:100dvh !important;
        max-height:100dvh !important;
        padding:14px 0 !important;
        border-radius:0 26px 26px 0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        z-index:9999 !important;
    }

    nav.menu-lateral.expandir,
    .menu-lateral.expandir{
        width:190px !important;
        min-width:190px !important;
        max-width:190px !important;
    }

    nav.menu-lateral ul,
    .menu-lateral ul{
        height:auto !important;
        min-height:max-content !important;
        padding-bottom:80px !important;
    }

    nav.menu-lateral ul li.item-menu,
    .menu-lateral ul li.item-menu{
        margin:0 !important;
        padding:0 !important;
        min-height:auto !important;
    }

    nav.menu-lateral ul li.item-menu a,
    .menu-lateral ul li.item-menu a{
        margin:0 !important;
        padding:12px 0 !important;
        min-height:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        font-size:16px !important;
    }

    nav.menu-lateral.expandir ul li.item-menu a,
    .menu-lateral.expandir ul li.item-menu a{
        justify-content:flex-start !important;
        padding-left:18px !important;
    }

    nav.menu-lateral ul li.item-menu a .icon,
    .menu-lateral ul li.item-menu a .icon{
        min-width:64px !important;
        width:64px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    nav.menu-lateral ul li.item-menu a .icon > i,
    .menu-lateral ul li.item-menu a .icon > i{
        font-size:25px !important;
        margin:0 !important;
    }

    nav.menu-lateral:not(.expandir) .txt-link,
    .menu-lateral:not(.expandir) .txt-link{
        display:none !important;
        opacity:0 !important;
    }

    nav.menu-lateral ul li.ativo,
    nav.menu-lateral ul li.item-menu:hover,
    .menu-lateral ul li.ativo,
    .menu-lateral ul li.item-menu:hover{
        border-radius:22px 0 0 22px !important;
    }

    .btn-expandir{
        position:fixed !important;
        top:14px !important;
        left:76px !important;
        font-size:28px !important;
        padding:6px !important;
        z-index:10000 !important;
    }

    nav.menu-lateral.expandir ~ .btn-expandir{
        left:200px !important;
    }

    /* Botão de contraste continua fora da sidebar */
    .item-cor{
        position:fixed !important;
        right:16px !important;
        bottom:16px !important;
        left:auto !important;
        top:auto !important;
        width:54px !important;
        height:54px !important;
        border-radius:50% !important;
        z-index:99999 !important;
    }

    .item-cor .txt-link,
    .item-cor span{
        display:none !important;
    }

    /* Avatar global */
    .btn-perfil,
    .btn-perfil-chat,
    .btn-perfil-fav,
    .btn-perfil-est,
    .btn-perfil-cat,
    .btn-perfil-ajuda{
        top:14px !important;
        right:12px !important;
        z-index:9000 !important;
    }

    .btn-perfil img,
    .btn-perfil-chat img,
    .btn-perfil-fav img,
    .btn-perfil-est img,
    .btn-perfil-cat img,
    .btn-perfil-ajuda img,
    #user-avatar{
        width:46px !important;
        height:46px !important;
        max-width:46px !important;
        max-height:46px !important;
    }

    /* ===== PÁGINAS COM CONTEÚDO PRINCIPAL ===== */

    .conteudo-principal,
    .aprenda-container,
    .favoritos-page,
    .estatisticas-page,
    .categorias-page,
    .ajuda-page{
        margin-left:72px !important;
        width:calc(100vw - 72px) !important;
        max-width:calc(100vw - 72px) !important;
        padding:72px 14px 90px 16px !important;
        overflow-x:hidden !important;
    }

    .titulo{
        font-size:34px !important;
        line-height:1.05 !important;
        max-width:100% !important;
        overflow-wrap:break-word !important;
        margin-top:10px !important;
    }

    .secao-material h3{
        font-size:25px !important;
        margin-top:34px !important;
    }

    .mensagem-vazio{
        font-size:18px !important;
        max-width:100% !important;
        overflow-wrap:break-word !important;
    }

    .pdf-grid{
        gap:16px !important;
        max-width:100% !important;
        overflow:hidden !important;
    }

    .priv-acoes,
    .pub-acoes{
        left:76px !important;
        right:12px !important;
        top:auto !important;
        bottom:76px !important;
        padding:10px 12px !important;
        gap:14px !important;
        justify-content:center !important;
        overflow-x:auto !important;
    }

    /* ===== CHAT MOBILE ===== */

    .chat-page{
        margin-left:72px !important;
        width:calc(100vw - 72px) !important;
        max-width:calc(100vw - 72px) !important;
        padding:62px 8px 90px 8px !important;
        height:auto !important;
        min-height:100dvh !important;
        display:flex !important;
        flex-direction:column !important;
        gap:16px !important;
        overflow:visible !important;
    }

    .chat-sidebar,
    .chat-main{
        width:100% !important;
        max-width:100% !important;
        border-radius:22px !important;
        overflow:hidden !important;
    }

    .chat-sidebar{
        min-height:auto !important;
        max-height:360px !important;
    }

    .chat-main{
        min-height:520px !important;
    }

    .chat-sidebar-header{
        padding:22px 16px !important;
    }

    .chat-sidebar-header h1{
        font-size:34px !important;
        line-height:1.05 !important;
    }

    .chat-sidebar-header p{
        font-size:17px !important;
        line-height:1.35 !important;
    }

    .chat-search{
        margin:14px !important;
        height:48px !important;
    }

    .chat-search input{
        font-size:16px !important;
    }

    .conversas-lista{
        padding:0 10px 14px !important;
        overflow-x:hidden !important;
    }

    .conversa-item{
        padding:11px !important;
        gap:10px !important;
        max-width:100% !important;
    }

    .conversa-avatar{
        width:44px !important;
        height:44px !important;
    }

    .conversa-nome{
        max-width:95px !important;
        font-size:16px !important;
    }

    .conversa-data{
        font-size:12px !important;
    }

    .conversa-preview{
        max-width:135px !important;
        font-size:14px !important;
    }

    .chat-header{
        min-height:auto !important;
        padding:14px !important;
        align-items:flex-start !important;
        flex-wrap:wrap !important;
    }

    .chat-user-info{
        width:100% !important;
        min-width:0 !important;
    }

    .chat-user-info img{
        width:46px !important;
        height:46px !important;
    }

    .chat-user-info h2{
        font-size:25px !important;
        line-height:1.1 !important;
    }

    .chat-user-info p{
        font-size:16px !important;
    }

    .chat-header-actions{
        width:100% !important;
        justify-content:flex-start !important;
        gap:8px !important;
    }

    .btn-profile,
    .btn-delete-chat,
    .btn-block-user{
        padding:9px 11px !important;
        font-size:14px !important;
        border-radius:14px !important;
    }

    .mensagens{
        padding:14px !important;
        min-height:270px !important;
        max-height:440px !important;
        overflow-y:auto !important;
    }

    .msg-bolha{
        max-width:96% !important;
        font-size:15px !important;
    }

    .composer{
        min-height:70px !important;
        padding:10px !important;
        gap:8px !important;
    }

    .btn-anexo,
    .btn-enviar{
        width:44px !important;
        height:44px !important;
        border-radius:15px !important;
    }

    #inputMensagem{
        min-height:44px !important;
        font-size:16px !important;
        padding:12px 14px !important;
    }

    /* ===== EDITAR PERFIL / ALTERAR PASSWORD MOBILE ===== */

    body:has(.profile-container){
        display:block !important;
        padding:72px 12px 30px !important;
        overflow-x:hidden !important;
    }

    .profile-container{
        width:100% !important;
        max-width:100% !important;
        display:block !important;
        overflow:hidden !important;
        border-radius:18px !important;
    }

    .profile-left{
        width:100% !important;
        min-width:0 !important;
        padding:28px 18px !important;
    }

    .profile-right{
        width:100% !important;
        padding:28px 18px !important;
        overflow:hidden !important;
    }

    .profile-right h2{
        font-size:30px !important;
        line-height:1.1 !important;
        overflow-wrap:break-word !important;
    }

    .form-group label{
        font-size:18px !important;
    }

    .form-group input,
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="password"]{
        width:100% !important;
        max-width:100% !important;
        font-size:16px !important;
        padding:13px 12px !important;
    }

    .save-btn,
    .back-btn{
        float:none !important;
        width:100% !important;
        max-width:100% !important;
        margin:12px 0 0 0 !important;
        font-size:16px !important;
        white-space:normal !important;
    }

    /* ===== HERO/CARDS PÁGINAS NOVAS ===== */

    .ajuda-hero,
    .favoritos-header,
    .estatisticas-hero,
    .categorias-hero,
    .hero-aprenda{
        padding:24px !important;
        border-radius:22px !important;
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .ajuda-hero h1,
    .favoritos-header h1,
    .estatisticas-hero h1,
    .categorias-hero h1,
    .hero-aprenda h1{
        font-size:32px !important;
        line-height:1.1 !important;
    }

    .ajuda-grid,
    .favoritos-grid,
    .stats-grid,
    .categorias-grid,
    .aulas-grid,
    .dashboard-extra-section,
    .cards-container{
        grid-template-columns:1fr !important;
        max-width:100% !important;
        width:100% !important;
    }

    .ajuda-card,
    .favorito-card,
    .stat-card,
    .categoria-card,
    .aula-card,
    .dashboard-extra-card,
    .card{
        width:100% !important;
        max-width:100% !important;
    }

    .favoritos-toolbar,
    .categorias-toolbar,
    .estatisticas-duas-colunas{
        grid-template-columns:1fr !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }
}

/* ===== FIX MOBILE EDFORALL - FIM ===== */

/* ===== FIX FINAL MENU MOBILE - INICIO ===== */

@media(max-width: 768px){

    /* Menu fechado */
    nav.menu-lateral,
    .menu-lateral{
        width:68px !important;
        min-width:68px !important;
        max-width:68px !important;
        height:100dvh !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        border-radius:0 28px 28px 0 !important;
        transition:width .25s ease, max-width .25s ease !important;
        z-index:99998 !important;
    }

    /* Menu aberto */
    nav.menu-lateral.expandir,
    .menu-lateral.expandir{
        width:270px !important;
        min-width:270px !important;
        max-width:270px !important;
        box-shadow:10px 0 35px rgba(0,0,0,.22) !important;
    }

    nav.menu-lateral ul,
    .menu-lateral ul{
        width:100% !important;
        padding:16px 0 90px 0 !important;
        margin:0 !important;
        display:flex !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    nav.menu-lateral ul li.item-menu,
    .menu-lateral ul li.item-menu{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        flex-shrink:0 !important;
    }

    /* Links fechados */
    nav.menu-lateral ul li.item-menu a,
    .menu-lateral ul li.item-menu a{
        width:100% !important;
        min-height:54px !important;
        height:54px !important;
        padding:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        color:#fff !important;
        text-decoration:none !important;
    }

    /* Links abertos */
    nav.menu-lateral.expandir ul li.item-menu a,
    .menu-lateral.expandir ul li.item-menu a{
        display:grid !important;
        grid-template-columns:78px 1fr !important;
        justify-content:initial !important;
        align-items:center !important;
        padding:0 16px 0 0 !important;
        gap:0 !important;
    }

    /* Ícone */
    nav.menu-lateral ul li.item-menu a .icon,
    .menu-lateral ul li.item-menu a .icon{
        width:68px !important;
        min-width:68px !important;
        height:54px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    nav.menu-lateral.expandir ul li.item-menu a .icon,
    .menu-lateral.expandir ul li.item-menu a .icon{
        width:78px !important;
        min-width:78px !important;
    }

    nav.menu-lateral ul li.item-menu a .icon i,
    .menu-lateral ul li.item-menu a .icon i{
        font-size:25px !important;
        line-height:1 !important;
        margin:0 !important;
    }

    /* Texto fechado */
    nav.menu-lateral:not(.expandir) ul li.item-menu a .txt-link,
    .menu-lateral:not(.expandir) ul li.item-menu a .txt-link{
        display:none !important;
        opacity:0 !important;
        width:0 !important;
    }

    /* Texto aberto */
    nav.menu-lateral.expandir ul li.item-menu a .txt-link,
    .menu-lateral.expandir ul li.item-menu a .txt-link{
        display:block !important;
        opacity:1 !important;
        width:100% !important;
        max-width:170px !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
        font-size:22px !important;
        font-weight:700 !important;
        line-height:1 !important;
    }

    /* Item ativo no mobile */
    nav.menu-lateral ul li.ativo,
    .menu-lateral ul li.ativo,
    nav.menu-lateral ul li.active,
    .menu-lateral ul li.active{
        width:100% !important;
        margin:0 !important;
        background:#fff !important;
        border-radius:28px 0 0 28px !important;
    }

    nav.menu-lateral ul li.ativo a,
    .menu-lateral ul li.ativo a,
    nav.menu-lateral ul li.active a,
    .menu-lateral ul li.active a{
        color:#000 !important;
    }

    nav.menu-lateral ul li.ativo a .icon i,
    .menu-lateral ul li.ativo a .icon i,
    nav.menu-lateral ul li.active a .icon i,
    .menu-lateral ul li.active a .icon i{
        color:#000 !important;
    }

    /* Botão hambúrguer */
    .btn-expandir{
        position:fixed !important;
        top:164px !important;
        left:78px !important;
        z-index:99999 !important;
        background:transparent !important;
        color:#111827 !important;
    }

    nav.menu-lateral.expandir ~ .btn-expandir,
    .menu-lateral.expandir ~ .btn-expandir{
        left:282px !important;
    }

    /* Evita texto do conteúdo ficar clicável por baixo quando o menu está aberto */
    nav.menu-lateral.expandir::after,
    .menu-lateral.expandir::after{
        content:"";
        position:fixed;
        left:270px;
        top:0;
        width:calc(100vw - 270px);
        height:100dvh;
        background:rgba(0,0,0,.08);
        pointer-events:none;
    }

    /* O botão de contraste não deve ser tratado como item do menu */
    .item-cor{
        width:54px !important;
        height:54px !important;
        min-width:54px !important;
        max-width:54px !important;
        position:fixed !important;
        right:16px !important;
        bottom:16px !important;
        left:auto !important;
        top:auto !important;
        border-radius:50% !important;
        z-index:100000 !important;
    }

    .item-cor .txt-link{
        display:none !important;
    }
}

/* ===== FIX FINAL MENU MOBILE - FIM ===== */