/*importación de fuentes*/
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
/*variables*/
:root {
    --color-primario: #05032b;
    --color-letras: #ffffff;
    --color-letra-resaltada: #7cff48; 
    --estilo-fuente: "Share Tech Mono", monospace;
    --tamanio-fuente: 1.2rem;
    --tamanio-fuente-botones: 0.8rem;
}
/*Estilos*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Asegura que el box-sizing sea border-box para todos los elementos */
}

body {
    background-color: var(--color-primario);
    color: var(--color-letras);
    height: 100vh;
}
/*header-------------------------------------------------------------------------------*/
.header {
    padding: 1% 2% ;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    gap: 15px;
}
.logotipoAlura {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 3px solid var(--color-letra-resaltada)
}

.titulo__header {
    font-size: var(--tamanio-fuente);
    color: var(--color-letra-resaltada);
    font-family: var(--estilo-fuente);
    align-content: center;
}

/*MAIN-----------------------------------------------------------------------------------------------------------*/
.main {
    height: 80%;
    display: flex; 
    flex-direction: row;
    align-content: space-between;
    padding: 2%;
    gap: 15px;
}
/*seccion de cuadro de texto y mensaje de advertencia*/
.seccion__entrada {
    display: flex; 
    flex-direction: column;
    align-content: space-between;
    width: 75%;
    height: 95%;
    gap: 5px;
}

.div__entrada__texto {
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    gap: 15px;
}

.entrada__texto {
    width: 100%;
    height: 90%;
    background-color: var(--color-primario);
    border-radius: 1%;
    border: 3px solid var(--color-letra-resaltada);
    color: var(--color-letras);
    font-family: var(--estilo-fuente);
    font-size: var(--tamanio-fuente);
}

.mensaje__advertencia {
    font-family: var(--estilo-fuente);
    font-size: var(--tamanio-fuente-botones);
}

 /*seccion de botones*/
 .div__botones {
    display: flex;
    flex-direction: row;
    align-content: space-between;
    gap: 20px;
    padding: 2% 0 0 0;

 }

.boton__encriptar {
    width: 90px;
    height: 35px;
    background-color: var(--color-primario);
    color: var(--color-letras);
    border: 3px solid var(--color-letra-resaltada);
    border-radius: 10%;
    font-family: var(--estilo-fuente);
    font-size: var(--tamanio-fuente-botones);
}
.boton__encriptar:hover {
    background-color: var(--color-letra-resaltada);
}

.boton__desencriptar {
    width: 110px;
    height: 35px;
    background-color: var(--color-primario);
    color: var(--color-letras);
    border: 3px solid var(--color-letra-resaltada);
    border-radius: 10%;
    font-family: var(--estilo-fuente);
    font-size: var(--tamanio-fuente-botones);
}
.boton__desencriptar:hover {
    background-color: var(--color-letra-resaltada);
}

/*seccion de salida */
.seccion__salida{
    width: 25%;
    height: 100%;
}

.seccion__sin__texto {
    height: 95%;
    padding: 3%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    gap: 50px;
    text-align: center;
    border-radius: 1%;
    border: 3px solid var(--color-letra-resaltada);
    font-family: var(--estilo-fuente);
}

.seccion__con__texto {
    display: none;
    height: 95%;
    padding: 3%;
}

.seccion__con__texto__estilos {
    height: 100%;
    padding: 3%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    gap: 50px;
    align-items: center;
    border-radius: 1%;
    border: 3px solid var(--color-letra-resaltada);
    font-family: var(--estilo-fuente);
    font-size: var(--tamanio-fuente);
}

.mensaje__encriptado {
    /*Ajuste de texto en el div donde se mostrara el resultado del emnsaje encriptado.*/
    word-wrap: break-word; 
    word-break: break-all; 
    overflow-wrap: break-word; 
    overflow: hidden; 
    white-space: pre-wrap;
    height: 95%;
}

.boton__copiar {
    width: 80px;
    height: 35px;
    background-color: var(--color-primario);
    color: var(--color-letras);
    border-radius: 10%;
    border: 3px solid var(--color-letra-resaltada);
    font-family: var(--estilo-fuente);
    font-size: var(--tamanio-fuente-botones);
}

.boton__copiar:hover {
    background-color: var(--color-letra-resaltada);
}

/*footer---------------------------------------------------------------------------------------------------------------------------*/
.footer {
    background-color: var(--color-letra-resaltada);
    padding: 1% 2%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    gap: 15px;
}

.autor__footer {
    font-family: var(--estilo-fuente);
    color: var(--color-primario);
}

.redes {
    display: flex;
    flex-direction: row;
    align-content: space-between;
    gap: 15px;
}

.redes__sociales {
    width: 35px;
    height: 35px;

}

/*ADAPTIVO A OTROS DISPOSITIVOS*/
@media (max-width: 1200px) {
    .main {
        flex-direction: column;
    }

    .seccion__entrada {
        width: 100%;
        align-items: center;
    }

    .mensaje__advertencia {
        text-align: center;
    }

    .seccion__salida {
        width: 100%;
    }

    .footer {
        align-items: center;
    }

    

}