/* CSS Responsivo para Mobile - TRDAP */

/* ==========================================
   MEDIA QUERIES PARA RESPONSIVIDADE
   ========================================== */

/* Dispositivos móveis pequenos (até 480px) */
@media screen and (max-width: 480px) {
    
    /* Container principal */
    #tudo {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Container geral */
    .geralConteudo {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Topo */
    #topo-conteudo {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Menu responsivo */
    #menu-site {
        width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
    }
    
    ul#primary-nav {
        width: 100% !important;
        text-align: center !important;
    }
    
    ul#primary-nav li {
        display: block !important;
        float: none !important;
        margin: 5px 0 !important;
    }
    
    ul#primary-nav li a {
        display: block !important;
        padding: 10px !important;
        margin: 0 !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 4px !important;
    }
    
    /* Correções gerais para containers */
    * {
        box-sizing: border-box !important;
    }
    
    /* Containers principais */
    #geral {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Barra de login - Mobile */
    #barraLogin {
        width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        padding: 15px 10px !important;
        float: none !important;
        box-sizing: border-box !important;
        max-width: none !important;
    }
    
    .titLogin {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 15px 0 !important;
        font-size: 24px !important;
        float: none !important;
    }
    
    .boxCamposLogin {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        padding: 0 !important;
    }
    
    /* Campos de input - Stack vertical */
    .boxInfInput {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        float: none !important;
        text-align: center;
    }
    
    .titImput {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 5px 0 !important;
        font-size: 14px !important;
        float: none !important;
    }
    
    .campoLoginS {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
    }
    
    .campoLoginS input {
        width: 90% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        padding: 10px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-sizing: border-box;
        display: block;
    }
    
    /* Botão de entrar */
    .btEntrar {
        width: 100% !important;
        margin: 15px 0 0 0 !important;
        text-align: center !important;
        float: none !important;
    }
    
    .btEntrar input {
        width: 90% !important;
        max-width: 280px !important;
        margin: 0 auto 10px auto !important;
        padding: 12px !important;
        font-size: 18px !important;
        border-radius: 4px !important;
        display: block;
    }
    
    .btEntrar p {
        width: 100% !important;
        text-align: center !important;
        margin: 5px 0 !important;
        float: none !important;
    }
    
    .btEntrar a {
        display: block !important;
        margin: 5px 0 !important;
        padding: 8px !important;
        font-size: 14px !important;
    }
    
    /* Divisor - ocultar em mobile */
    .divisorLog {
        display: none !important;
    }
    
    /* Box de login principal */
    #boxLogin {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        max-width: none !important;
    }
    
    /* Boxes de conteúdo da página principal */
    .boxIndex {
        width: 100% !important;
        margin: 10px 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        max-width: none !important;
    }
    
    /* Container dos boxes */
    #gBox {
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        max-width: none !important;
    }
    
    /* Títulos dos boxes */
    .titBoxInM, .titBoxIn {
        width: 90% !important;
        margin: 10px auto !important;
        text-align: center !important;
        position: relative !important;
        float: none !important;
    }
    
    /* Texto dos boxes */
    .textBoxIn {
        width: 95% !important;
        margin: 10px auto !important;
        float: none !important;
        text-align: justify !important;
        padding: 10px !important;
    }
    
    /* Botões dos boxes */
    .btSaibaMais {
        width: 90% !important;
        margin: 10px auto !important;
        text-align: center !important;
        float: none !important;
        display: block !important;
    }
    
    /* Box de planos */
    #boxPlanosIn {
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 10px !important;
        box-sizing: border-box !important;
    }
    
    #caixaTextopac {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    /* Container geral dos planos */
    #gboxPlanos {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    /* Correções para elementos específicos da imagem */
    .listaServ {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    .listaServ li {
        width: 100% !important;
        float: none !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Botões de ação */
    .botaoSaibaG {
        width: 90% !important;
        margin: 10px auto !important;
        float: none !important;
        display: block !important;
        text-align: center !important;
        padding: 15px !important;
    }
    
    /* Dúvidas de compra */
    #duvidasCompra {
        width: 100% !important;
        float: none !important;
        margin: 20px 0 !important;
        text-align: center !important;
    }
    
    /* Títulos de página */
    .titPagina {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    .titPagina h1, .titPagina h2 {
        font-size: 24px !important;
        text-align: center !important;
    }
    
    .titPagina h4 {
        font-size: 18px !important;
        text-align: center !important;
    }
    
    /* Texto de introdução */
    .textoInt {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        text-align: justify !important;
    }
    
    /* Imagens do teste */
    #imagensTeste {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        text-align: center !important;
    }
    
    #imagensTeste .imagemTela {
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
        float: none !important;
        display: block !important;
    }
    
    /* Box de título de frete */
    .boxTituloFrete {
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        text-align: center !important;
    }
    
    .titleIntGer {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        text-align: center !important;
        font-size: 16px !important;
    }
    
    .textoFrete {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        float: none !important;
        text-align: justify !important;
    }
    
    .boxLogar, .boxCadastrar {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
        float: none !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 20px !important;
        box-sizing: border-box;
    }
    
    .boxLogar {
        border-right: 1px solid #ddd !important;
    }
    
    .titBoxLog {
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 15px 0 !important;
        font-size: 20px !important;
        float: none !important;
    }
    
    /* Formulário de login */
    #formLoginSite {
        width: 100% !important;
        float: none !important;
    }
    
    #formLoginSite label {
        width: 100% !important;
        margin: 10px 0 !important;
        display: block !important;
        text-align: left !important;
    }
    
    #formLoginSite input[type="text"],
    #formLoginSite input[type="password"] {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-sizing: border-box;
        margin: 5px 0 !important;
    }
    
    .btLogarSite {
        width: 100% !important;
        padding: 12px !important;
        font-size: 18px !important;
        margin: 10px 0 !important;
        border-radius: 4px !important;
    }
    
    .esqSenha {
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    /* Botão de cadastro */
    #btCadSite {
        width: 100% !important;
        text-align: center !important;
    }
    
    #btCadSite img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Resultado de login */
    #resultado {
        width: 100% !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        text-align: center !important;
        border-radius: 4px !important;
        box-sizing: border-box;
    }
}

/* Dispositivos móveis médios (481px a 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    
    #barraLogin {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }
    
    .boxCamposLogin {
        width: 100% !important;
        margin: 10px 0 !important;
    }
    
    .boxInfInput {
        width: 48% !important;
        margin: 0 1% 10px 1% !important;
        display: inline-block;
        vertical-align: top;
    }
    
    .campoLoginS input {
        width: 100% !important;
        max-width: 200px !important;
        padding: 8px !important;
    }
    
    .btEntrar {
        width: 100% !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
    
    .btEntrar input {
        width: auto !important;
        min-width: 120px !important;
        padding: 10px 20px !important;
    }
}

/* Tablets (769px a 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    #barraLogin {
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box;
    }
    
    .boxCamposLogin {
        width: 80% !important;
        margin: 10px auto !important;
    }
    
    .boxInfInput {
        width: 30% !important;
        margin: 0 1% !important;
    }
    
    .btEntrar {
        width: 35% !important;
        margin: 0 1% !important;
    }
}

/* ==========================================
   MELHORIAS GERAIS PARA MOBILE
   ========================================== */

/* Touch-friendly buttons */
@media (pointer: coarse) {
    input[type="submit"],
    input[type="button"],
    button,
    .btLogarSite,
    .btEntrar input {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
    }
}

/* Melhor legibilidade em mobile */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    input, textarea, select {
        font-size: 16px !important;
        -webkit-appearance: none;
        border-radius: 4px;
    }
    
    /* Evitar zoom automático no iOS */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ==========================================
   CORREÇÕES ESPECÍFICAS PARA LOGIN
   ========================================== */

/* Garantir que o formulário não quebre */
#formLoginSite, #formLoginSiteIndex {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Melhor espaçamento para links */
.btEntrar a,
.esqSenha a {
    display: inline-block !important;
    padding: 8px 12px !important;
    margin: 4px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    background-color: rgba(255,255,255,0.1) !important;
    transition: background-color 0.3s ease !important;
}

.btEntrar a:hover,
.esqSenha a:hover {
    background-color: rgba(255,255,255,0.2) !important;
}

/* Mensagens de erro/sucesso responsivas */
#resultado {
    word-wrap: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================
   CORREÇÕES PARA DIFERENTES NAVEGADORES
   ========================================== */

/* Safari iOS */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="password"] {
        -webkit-appearance: none !important;
        border-radius: 4px !important;
    }
}

/* Firefox Mobile */
@-moz-document url-prefix() {
    input[type="text"],
    input[type="password"] {
        border-radius: 4px !important;
    }
}