/* CSS AGESSIVO PARA CORRIGIR LAYOUT MOBILE - TRDAP */

/* ==========================================
   FORÇAR RESPONSIVIDADE EM TODOS OS ELEMENTOS
   ========================================== */

/* Reset geral para mobile */
@media screen and (max-width: 768px) {
    
    /* Forçar todos os containers a usar 100% da largura */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Containers principais */
    #tudo,
    #geral,
    .geralConteudo,
    #topo-conteudo,
    #gBox,
    #boxPlanosIn,
    #gboxPlanos {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10px !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    /* Elementos que estavam com largura fixa */
    #barraLogin,
    #boxLogin,
    .boxIndex,
    .boxLogar,
    .boxCadastrar,
    .boxCamposLogin,
    .titLogin,
    .boxInfInput,
    .campoLoginS,
    .btEntrar {
        width: 100% !important;
        max-width: none !important;
        float: none !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Menu responsivo */
    #menu-site,
    ul#primary-nav {
        width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
        padding: 0 !important;
    }
    
    ul#primary-nav li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 5px 0 !important;
        text-align: center !important;
    }
    
    ul#primary-nav li a {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        text-align: center !important;
    }
    
    /* Campos de input responsivos */
    .campoLoginS input,
    #formLoginSite input[type="text"],
    #formLoginSite input[type="password"],
    .btLogarSite,
    .btEntrar input {
        width: 100% !important;
        max-width: none !important;
        padding: 15px !important;
        font-size: 16px !important;
        margin: 10px 0 !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }
    
    /* Textos e títulos */
    .titBoxLog,
    .titBoxInM,
    .titBoxIn,
    .titPagina h1,
    .titPagina h2,
    .titPagina h4,
    .titleIntGer {
        width: 100% !important;
        text-align: center !important;
        margin: 15px 0 !important;
        padding: 10px !important;
        font-size: 18px !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    /* Conteúdo de texto */
    .textBoxIn,
    .textoInt,
    .textoFrete,
    .listaServ li {
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 15px !important;
        text-align: justify !important;
        float: none !important;
        box-sizing: border-box !important;
        line-height: 1.6 !important;
    }
    
    /* Botões responsivos */
    .btSaibaMais,
    .botaoSaibaG {
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 15px !important;
        text-align: center !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }
    
    /* Links responsivos */
    .btEntrar p,
    .esqSenha {
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    .btEntrar a,
    .esqSenha a {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        margin: 10px 0 !important;
        text-align: center !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }
    
    /* Imagens responsivas */
    #imagensTeste,
    #imagensTeste .imagemTela,
    #btCadSite,
    #btCadSite img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* Divisores - ocultar em mobile */
    .divisorLog {
        display: none !important;
    }
    
    /* Resultado de login */
    #resultado {
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 15px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 4px !important;
    }
    
    /* Dúvidas de compra */
    #duvidasCompra {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        text-align: center !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    /* Caixa de texto dos planos */
    #caixaTextopac {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 15px !important;
        text-align: center !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    
    #caixaTextopac h2,
    #caixaTextopac p {
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================
   CORREÇÕES ESPECÍFICAS PARA TELAS MUITO PEQUENAS
   ========================================== */

@media screen and (max-width: 480px) {
    
    /* Aumentar ainda mais o tamanho dos elementos para telas pequenas */
    .campoLoginS input,
    #formLoginSite input[type="text"],
    #formLoginSite input[type="password"],
    .btLogarSite,
    .btEntrar input,
    .btSaibaMais,
    .botaoSaibaG {
        padding: 18px !important;
        font-size: 18px !important;
        min-height: 50px !important;
    }
    
    /* Títulos menores para telas pequenas */
    .titBoxLog,
    .titBoxInM,
    .titBoxIn,
    .titPagina h1,
    .titPagina h2 {
        font-size: 20px !important;
    }
    
    .titPagina h4,
    .titleIntGer {
        font-size: 16px !important;
    }
    
    /* Texto menor para telas pequenas */
    .textBoxIn,
    .textoInt,
    .textoFrete,
    .listaServ li {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    /* Espaçamento menor para telas pequenas */
    #tudo,
    #geral,
    .geralConteudo,
    #topo-conteudo,
    #gBox,
    #boxPlanosIn,
    #gboxPlanos {
        padding: 5px !important;
    }
}

/* ==========================================
   CORREÇÕES PARA ELEMENTOS FLUTUANTES
   ========================================== */

@media screen and (max-width: 768px) {
    
    /* Forçar todos os elementos flutuantes a não flutuar */
    .clear {
        clear: both !important;
        height: 0 !important;
        display: none !important;
    }
    
    /* Garantir que não há overflow horizontal */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Corrigir elementos que podem causar overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    /* Corrigir elementos com posicionamento absoluto */
    .boxIndex .titBoxInM,
    .boxIndex .titBoxIn,
    .boxIndex .imagemBoxIn {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }
}