:root {
    --cor-primaria: #F3F5FC;
    --cor-secundaria: #0A3871;
    --cor-terciaria: #495057;
    --cor-quartenaria: white;

    --cor-hover: #D8DFE8;
    --cor-hover2: #356EA9;

    --fonte-primaria: 'Inter', sans-serif;
}

/* Define o fundo da página */
.conteudo {
    display: flex;
    gap: 80px;
    background-color: var(--cor-primaria);

    /* Definir o tamanho */
    max-height: 100vh;
    min-height: 100vh;
    max-width: 100vw;
    min-width: 100vw;
}

/* Conteúdo principal */
.conteudo__principal {
    display: flex;
    flex-direction: column;

    flex: 2; /* Conteúdo principal vai ocupar 75% do conteúdo */
    
    padding: 40px 0 40px 40px;
}

/* Ajusta o tamanho da imagem */
.conteudo__principal img {
    max-width: 40px;
}

.conteudo__principal__decodificador {
    display: flex;
    flex-direction: column;
    
    padding-top: 80px;
    padding-left: 80px;
    
    flex: 1; /* Ocupa todo o espaço do vertical do conteudo */
}

/* Caixa de texto principal */
.conteudo__principal__texto {
    font-family: var(--fonte-primaria);
    font-size: 2rem;
    color: var(--cor-secundaria);
    background: none;
    resize: none;
    outline: none;
    border: none;

    flex: 1;
}

/* Cor para o placeholder */
textarea::placeholder {
    color: var(--cor-secundaria);
}

.conteudo__principal__aviso,
.conteudo__principal__botoes {
    margin-top: auto; /* Empurra os elementos para o fundo do contêiner */
}

/* Texto de aviso */
.conteudo__principal__aviso {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.conteudo__principal__aviso img {
    width: 16px;
    height: 16px;
}

.conteudo__principal__aviso p{
    font-family: var(--fonte-primaria);
    font-size: 0.75rem;
    color: var(--cor-terciaria);
    opacity: 80%;
}

/* Estilo dos botoes */
.conteudo__principal__botoes {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.conteudo__principal__botoes__botao1,
.conteudo__principal__botoes__botao2 {
    gap: 8px;
    padding: 24px 24px;
    width: 100%;
    height: auto;
    border-radius: 24px;

    font-family: var(--fonte-primaria);
    font-size: 1rem;
}

.conteudo__principal__botoes__botao1 {
    border: none;

    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
}

.conteudo__principal__botoes__botao2 {
    border-color: var(--cor-secundaria);

    background: none;
    color: var(--cor-secundaria);
}

/* Estilo para o conteúdo secundário */
.conteudo__secundario {
    box-shadow: 0 24px 32px -8px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-direction: column;

    flex: 1; /* Ocupa todo o espaço vertical disponível dentro de conteudo */
    padding: 32px;
    background-color: var(--cor-quartenaria);
    border-radius: 32px; /* Cantos arredondados */

    margin: 40px 40px 40px 0;
    overflow: hidden;
}

.conteudo__secundario__generico {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;

    gap: 32px;

    /* display: none; */
}

/* Texto genérico */
.conteudo__secundario__generico__texto {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: center;
    
    font-family: var(--fonte-primaria);
    text-align: center;
    color: var(--cor-terciaria);
}

.conteudo__secundario__generico__texto p1 {
    font-size: 1.5rem;
    font-weight: bold;
}

.conteudo__secundario__generico__texto p2 {
    font-size: 1rem;
    font-weight: normal;
}

/* Conteúdo que vai aparecer depois */
.conteudo__secundario__oculto {
    display: flex;
    flex-direction: column;
    flex: 1; /* Faz com que o elemento ocupe o espaço disponível */
    overflow: hidden; /* Impede que o conteúdo extra afete o layout */
    gap: 32px;

    display: none;
}

/* Ajusta o estilo da área do texto */
.conteudo__secundario__oculto .texto {
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Ajusta o estilo do texto */
.conteudo__secundario__oculto .texto p {
    word-break: break-word; /* Quebra as palavras longas */
    overflow-wrap: break-word; /* Garante a quebra de palavras */
    font-family: var(--fonte-primaria);
    font-size: 1.5rem;
    color: var(--cor-terciaria);
}

.copiar {
    padding: 24px;
    width: 100%;
    background: none;
    border-radius: 24px;
    border-color: var(--cor-secundaria);

    color: var(--cor-secundaria);
    font-family: var(--fonte-primaria);
    font-size: 1rem;

    margin-top: auto;
}

.conteudo__principal__botoes__botao1:hover {
    background-color: var(--cor-hover2);
}

.conteudo__principal__botoes__botao2:hover,
.copiar:hover {
    background-color: var(--cor-hover);
}

/* Controle de estilo para TABLET */
@media (max-width: 768px) {
    .conteudo {
        flex-direction: column; /* Modifica o layout para coluna */
        gap: 0;
        max-height: none;
    }

    .conteudo__principal {
        flex: 2; /* Faz com que o conteúdo principal ocupe o espaço restante */
        padding: 20px; /* Ajusta o padding para telas menores */
    }

    .conteudo__principal__decodificador {
        padding-top: 20px; /* Ajusta o padding-top para telas menores */
        padding-left: 20px; /* Ajusta o padding-left para telas menores */
    }

    .conteudo__secundario {
        margin: 0 40px 40px 40px;
        flex: 0;
    }

    .conteudo__secundario__generico img {
        display: none; /* Esconde a imagem dentro de conteudo__secundario__generico */
    }

    .conteudo__secundario__oculto {
        max-height: 300px;
    }
}

/* Controle de estilo para CELULAR */
@media (max-width: 375px) {
    .conteudo {
        gap: 0px;
    }

    .conteudo__principal img {
        max-width: 24px;
    }

    .conteudo__principal__decodificador {
        padding-left: 0;
    }
    
    .conteudo__principal__botoes {
        flex-direction: column;
        padding: 0;
        margin-bottom: 0px;
    }

    .conteudo__secundario {
        margin: 0 24px 40px 24px;
    }

    .conteudo__secundario__oculto {
        max-height: 200px;
        gap: 10px;
    }
    
    .copiar {
        padding: 16px;
    }
}