/* Estilos principais */
.section {
    display: none;
}
.section.active {
    display: block;
}
button {
    margin-top: 10px;
}
.body {
    background-color: #367c96;
    color: white;
}
.formulario {
    width: 50%;
    margin: auto;
    margin-bottom: 80px;
    background-color: #dbf3fa;
    align-items: center;
    justify-content: center;
    color: #005875;
    padding: 50px;
    padding-top: 20px;
    border-radius: 15px;
}
.pergunta {
    font-size: 1.2rem; /* Tamanho base */
    cursor: default;
    background-color: transparent;
    margin-top: 15px;
}
label {
    cursor: pointer;
    font-size: 1.0rem;
    padding: 5px;
    width: 100%;
}
label:hover {
    background-color: #96c3d3;
    border-radius: 10px;
}
input[type="radio"] {
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.303);
}
input[type="text"] {
    margin-bottom: 10px;
    width: 50%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.303);
}
input[type="text"]:focus {
    box-shadow: 1px 1px 1px 1px rgb(27, 126, 255);
}
button[type="button"] {
    cursor: pointer;
    background-color: #005875;
    color: aliceblue;
    padding: 15px 30px;
    border-radius: 10px;
}
button:hover {
    background-color: #18aade;
}
.next {
    float: right;
}
.radar {
    display: grid;
    justify-content: center;
    margin: auto;
}
.hidden {
    display: none; /* Classe para ocultar elementos */
}
.mensagens {
    margin: 30px 0px;
    padding: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 15px;
    background: rgb(161,161,161);
    background: linear-gradient(0deg, rgba(161,161,161,1) 0%, rgba(211,211,211,1) 41%, rgba(235,235,235,1) 58%, rgba(244,244,244,1) 69%, rgba(255,255,255,1) 89%);
}
.foguete {
    text-align: center;
    display: grid;
    width: 100%;
    margin: 0;
}
.foguete img {
    width: 100%;
    height: 1100px;
    margin: auto;
}
.print-button{display: flex;
    margin: auto;
    cursor: pointer;
    background-color: #005875;
    color: aliceblue;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}
#captureButton{
    margin: auto;
    cursor: pointer;
    background-color: #005875;
    color: aliceblue;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}
#captureButton:hover{
    background-color: #007ba3;
}
/* Define a classe para simular o modo desktop */
.desktop-mode {
    width: 1480px;  /* ou qualquer largura padrão para desktop */
    /* height: auto; */
    /* min-height: 968px; */
    overflow: hidden;
}
.row.mensagensdiv {
    --bs-gutter-x: 0; /* Remove o espaço horizontal entre as colunas */
    --bs-gutter-y: 0; /* Remove o espaço vertical, se necessário */
}

.row .col {
    margin: 0 !important; /* Remove qualquer margem */
    padding: 0 !important; /* Remove qualquer padding */
}

.row .col img {
    display: block; /* Remove o espaçamento extra ao redor da imagem */
}
#radarChart label{
    font-size: 25px;
    font-weight: bold;
}
.footer {
    background-color: #bbf0ffa1; /* Cor de fundo do footer */
    color: rgb(129, 129, 129); /* Cor do texto */
    text-align: center; /* Alinha o texto no centro */
    bottom: 0;
    width: 100%;
    font-size: 12px;
}

.footer a {
    color: #021663; /* Cor do link */
    text-decoration: none; /* Remove o sublinhado do link */    
    font-size: 12px;
}

.footer a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}
.logo{
    display: flex;
    width: 20%;
    margin: auto;
}



/* Estilos responsivos para tablets */
@media (max-width: 768px) {
    .formulario {
        width: 98%;
        padding: 30px;
    }
    .pergunta {
        font-size: 1rem;
    }
    input[type="text"] {
        width: 70%;
    }
    button[type="button"] {
        padding: 10px 20px;
    }
    label {
        font-size: 0.8rem;
    }
    .mensagem-titulo {
        font-size: 0.5rem;
        margin: 0px 0px 2px;
    }
    .mensagens {
        width: 100%;         /* Ajusta a largura ao conteúdo */
        height: 50px;        /* Ajusta a altura ao conteúdo */
        margin: 0;
        padding: 7px;
        font-size: 0.3em;     /* Ajuste o font-size conforme necessário */
        max-width: 100%;     /* Limita a largura ao contêiner pai, caso seja necessário */
        word-wrap: break-word; /* Quebra palavras longas para evitar overflow */
        margin-bottom: 8px;
    }
    .coluna1{
        display:grid;
        justify-content:flex-end;
    }
   
    #radarChart{
        height: 300px;
    }
    .foguete img{
        height: 480px;
    }
    .coluna1 > .mensagens{
        margin-bottom: 5px;

    }
 
     .coluna2 > .mensagens{
          margin-top: 5px;
        margin-bottom: 25px;
    }
    
}

/* Estilos responsivos para celulares */
@media (max-width: 480px) {
    .formulario {
        width: 98%;
        margin-top: 40px;
        margin-bottom: 20px;
        padding: 10px;
    }
    .pergunta {
        font-size: 0.9rem;
    }
    input[type="text"] {
        width: 100%;
    }
    button[type="button"] {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
    .titulo{
        font-size: 20px;
    }
    .subtitulo{
        font-size: 18px;
    }   
    .informacoes{
        font-size: 10px;
    }
    
    .mensagem-titulo {
        font-size: 0.3rem
    }
    .coluna1{
        display:grid;
        justify-content:flex-end;
        margin-top: 5px;
    }
    .coluna1 > .mensagens{
        margin-bottom: 5px;
        margin-top: 0px;

    }
     .coluna2{
        padding-top: 0x;
    }
     .coluna2 > .mensagens{
          margin-top: 5px;
        margin-bottom: 15px;
        padding-top: 0x;
    }
  
  
    .mensagens {
        width: 70px;         /* Ajusta a largura ao conteúdo */
        max-height: 45px;        /* Ajusta a altura ao conteúdo */
        padding: 5px;
        font-size: 0.2em;     /* Ajuste o font-size conforme necessário */
        max-width: 100%;     /* Limita a largura ao contêiner pai, caso seja necessário */
        word-wrap: break-word; /* Quebra palavras longas para evitar overflow */
        margin:0px 0px;
    }
.row.mensagensdiv {
    --bs-gutter-x: 0; /* Remove o espaço horizontal entre as colunas */
    --bs-gutter-y: 0; /* Remove o espaço vertical, se necessário */
}

.row .col {
    margin: 0 !important; /* Remove qualquer margem */
    padding: 0 !important; /* Remove qualquer padding */
}

.row .col img {
    display: block; /* Remove o espaçamento extra ao redor da imagem */
}


    
    .foguete img{
        height: 350px;
        margin:-1px;
    }
    #captureButton{
    font-size: 10px;
    width: 70px;
    padding: 5px;
    margin-top:15px;

}
    
    #radarChart{
        height: 250px;
    }

}

/* Estilos para impressão */
@media print {
    /* Oculta elementos desnecessários na impressão */
    .print-button, .save-pdf-button, button {
        display: none;  
    }
    
    /* Ajuste do conteúdo para impressão */
    body, .formulario {
        width: 250mm;
        margin-top: 0px;
        margin: 0; /* Elimina margens extras */
        padding: 0;
        background-color: white;
        color: black;
        overflow: visible;
    }
    
    .formulario {
        margin-top: 0px;
        margin: auto;
        padding: 10px;
        border-radius: 0;
        box-shadow: none;
    }
    
.foguete img{
    width: 180px;
    height: 1200px;
}
.mensagensdiv{
    margin: 0;
    padding: 0;
}
.mensagens{
    width: 100%;
    font-size: 15px;
    margin-bottom: 90px;
}
.foguete{
    display: flex;
}
#radarChart{
    width: 500px;
    height: 500px;
}


    /* Remove as margens padrão da página de impressão */
    @page {
        margin: 0;
    }
}