/* =========================================
   CANAL DE DENÚNCIAS - MOBILE (FINAL COM TÍTULO CENTRALIZADO)
   Arquivo: /assets/css/mobile/denuncia.css
   ========================================= */

@media (max-width: 1024px) {

     /* --- 1. RESET GERAL --- */
    html, body {
        padding-left: 0 !important;
        width: 100%;
        overflow-x: hidden;
    }

    .denuncia-section {
        padding: 40px 0 60px;
        min-height: auto;
        display: block;
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
        align-items: center; /* Centraliza horizontalmente */
    }

    /* --- 2. TEXTO DE APRESENTAÇÃO (CENTRALIZADO) --- */
    .left-info {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding-top: 0;
        
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* TÍTULO PEQUENO (Compliance) - SEM FUNDO */
    .pre-title {
        font-size: 13px;
        margin-bottom: 10px;
        display: inline-block;
        
        background: transparent; /* Remove o fundo */
        padding: 0;              /* Remove espaçamento interno */
        border-radius: 0;        /* Remove borda arredondada */
        
        color: var(--cor-principal);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .left-info h2 {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 20px;
        text-align: center; /* Reforça alinhamento */
        width: 100%;
    }

    .left-info p {
        font-size: 15px;
        line-height: 1.6;
        text-align: center; /* Alterado de justify para center para ficar mais harmônico no mobile */
        max-width: 400px; /* Limita largura para não ficar muito espalhado em tablets */
        margin: 0 auto; /* Centraliza o bloco de texto */
    }

    /* --- 3. FORMULÁRIO (CARD) --- */
    .right-form {
        width: 100%; /* Garante que o form ocupe a largura disponível */
        padding: 30px 20px;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        border-top-width: 4px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

    /* GRID STACK */
    .grid-mobile-stack {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* --- 4. INPUTS E CAMPOS --- */
    .input-box {
        margin-bottom: 15px;
        background: #f9f9f9;
        position: relative; /* Para o ícone absolute */
    }

    .input-icon-web {
        font-size: 16px;
        left: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
    }

    .form-control {
        height: 55px;
        padding: 15px 15px 15px 45px;
        font-size: 16px; 
        border-radius: 6px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }

    select.form-control {
        background-position: right 15px center;
    }

    textarea.form-control {
        height: auto;
        padding-top: 15px;
        min-height: 120px;
    }
    
    .input-box.textarea-box .input-icon-web {
        top: 20px;
        transform: none;
    }

    /* --- 5. CHECKBOXES --- */
    .checkbox-wrapper {
        display: flex;
        padding: 15px;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 15px;
        background: #f5f5f5;
        border-radius: 6px;
    }

    .checkbox-wrapper input[type="checkbox"] {
        width: 22px; 
        height: 22px;
        margin-top: 0;
        flex-shrink: 0;
    }

    .checkbox-wrapper label {
        font-size: 13px;
        line-height: 1.5;
        padding-top: 2px;
    }

    /* --- 6. BOTÃO ENVIAR --- */
    .btn-encontrar {
        height: 60px;
        font-size: 15px;
        padding: 0 20px;
        margin-top: 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-radius: 6px;
        border: none;
        background: var(--cor-principal);
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
    }
    
    .right-form p {
        font-size: 11px !important;
        margin-top: 15px;
        text-align: center;
        color: #888;
    }
}