diff --git a/app.js b/app.js
index 18f10a6..520635a 100644
--- a/app.js
+++ b/app.js
@@ -48,7 +48,7 @@ function desencriptar(){
       }
   }
 
-  // FUNCIÓN PARA CAMBIAR DATOS ENTRE CAMPOS
+// FUNCIÓN PARA CAMBIAR DATOS ENTRE CAMPOS
 function swap(){
   let textoDerecha = document.getElementById("mensajeEncriptado").value;
   let textoIzquierda = document.getElementById("mensajeDesencriptado").value;
@@ -84,6 +84,15 @@ function copiarTextoEncriptado(){
   }
 }
 
+function cleanMensajeDesencriptado(){
+  document.getElementById("mensajeDesencriptado").value = "";
+}
+
+function cleanMensajeEncriptado(){
+  document.getElementById("mensajeEncriptado").value = "";
+}
+
+
 // MENSAJES POPUP
 // Ahora son funcionales pero faltaría revisar cómo acortar el código.
 function mensajeCampoVacio(){
diff --git a/assets/Trash.png b/assets/Trash.png
new file mode 100644
index 0000000..4f667b1
Binary files /dev/null and b/assets/Trash.png differ
diff --git a/index.html b/index.html
index 96522aa..dbad9c5 100644
--- a/index.html
+++ b/index.html
@@ -27,9 +27,12 @@ <h2 class="textBox__label__text">INGRESE EL TEXTO...</h2>
                     </div> 
                     <div class="textBox">
                         <textarea id="mensajeDesencriptado" name="mensaje" rows="10" cols="30" placeholder="...A ENCRIPTAR"> </textarea>            
-                        <div class="advertencia__area"> <!-- mensaje de avdertencia -->
-                            <img src="assets/Icon_Alert.png" alt="Icono de advertencia" class="advertencia__icono">
-                            <p class="advertencia__texto">Solo letras minúsculas y sin acentos</p>
+                        <div class="textarea__footer">
+                            <div class="advertencia__area"> <!-- mensaje de avdertencia -->
+                                <img src="assets/Icon_Alert.png" alt="Icono de advertencia" class="advertencia__icono">
+                                <p class="advertencia__texto">Solo letras minúsculas y sin acentos</p>
+                            </div>
+                            <button class="btn__trash" type="button" onclick="cleanMensajeDesencriptado()" id="btn__trash"><img class="trash__icon" src="/assets/Trash.png" alt="basura"></button>
                         </div>
                     </div> 
                 </div>             
@@ -55,9 +58,12 @@ <h2 class="textBox__label__text">INGRESE EL TEXTO...</h2>
                                         
                     <div class="textBox">
                         <textarea id="mensajeEncriptado" name="resultado" rows="10" cols="30" placeholder="...A DESENCRIPTAR"> </textarea>
-                        <div class="advertencia__area"> <!-- mensaje de avdertencia -->
-                            <img src="assets/Icon_Alert.png" alt="Icono de advertencia" class="advertencia__icono">
-                            <p class="advertencia__texto">Solo letras minúsculas y sin acentos</p>
+                        <div class="textarea__footer">
+                            <div class="advertencia__area"> <!-- mensaje de avdertencia -->
+                                <img src="assets/Icon_Alert.png" alt="Icono de advertencia" class="advertencia__icono">
+                                <p class="advertencia__texto">Solo letras minúsculas y sin acentos</p>
+                            </div>
+                            <button class="btn__trash" type="button" onclick="cleanMensajeEncriptado()" id="btn__trash"><img class="trash__icon" src="/assets/Trash.png" alt="basura"></button>
                         </div>
                     </div> 
                 </div>
diff --git a/styles/style.css b/styles/style.css
index 0248a81..bbf1914 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -59,13 +59,14 @@ header{
     border-left: 4px solid var(--Black);
     border-right: 4px solid var(--Black);
     border-bottom: 2px solid var(--Black);
-    .headline{
-        font-family: var(--font-Headline-Righteous);
-        font-size: 3.5rem;
-        font-weight: 400;
-        color: var(--Black);
-        justify-content: left;
-    }
+}
+    
+.headline{
+    font-family: var(--font-Headline-Righteous);
+    font-size: 3.5rem;
+    font-weight: 400;
+    color: var(--Black);
+    justify-content: left;
 }
 
 main{
@@ -91,187 +92,236 @@ main{
     height: 100%;
     padding-top: 8%;
     padding-right: 8px;
-    
-    .btn__swap{
-        width: 6rem;
-        height: 6rem;
-        background-color: var(--Yellow);
-        border: 2px solid var(--Black);
-        box-shadow: 4px 8px 0px var(--Black);
-        padding: 0.75rem;
-        transition-duration: 0.4s;
-        cursor: pointer;
-        .swap__img{
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            width: 95%;
-        }
-    }
-    .btn__swap:hover{
-        background-color: var(--GreenLight);
-        border: 4px solid var(--Black);
-        box-shadow: 0px 0px 0px var(--Black);
-    }
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.btn__swap{
+    width: 6rem;
+    height: 6rem;
+    background-color: var(--Yellow);
+    border: 2px solid var(--Black);
+    box-shadow: 4px 8px 0px var(--Black);
+    padding: 0.75rem;
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+        
+.swap__img{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 95%;
 }
 
-/*organiza elementos izquierda-derecha*/
 .container{
     width: 37.22%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 3%;
     padding: 4% 0;
     align-items: center;
-    
-    .textBox__area{
-        width: 100%;
-        height: 90%;
-        display: flex;
-        flex-direction: column;
-        justify-content: left;
-        .textBox__label{
-            width: 100%;
-            height: 8.5%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            padding-left: 1%;
-            background-color: var(--Violet);
-            border-top: 2px solid var(--Black);
-            border-left: 2px solid var(--Black);
-            border-right: 2px solid var(--Black);
-            border-bottom: 1px solid var(--Black);
-            .textBox__label__text{
-                font-family: var(--font-Label-LexendMega);
-                font-size: 1rem;
-                font-weight: 700;
-                color: var(--Black);
-                justify-content: left;
-            }
-            .textBox__label__icon{
-                width: 10.45%;
-                height: 100%;
-                background-color: var(--VioletDark);
-                border-left: 2px solid var(--Black);
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                .icon__arrowDown{
-                    height: 50%;
-                }
-            }
-        }
-        .textBox{ /*recuadro para ingresar el texto a encriptar o desencriptar*/
-            width: 100%;
-            height: 90%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            gap: 16px;
-            align-items: center;
-            background-color: var(--White);
-            border-top: 1px solid var(--Black);
-            border-left: 2px solid var(--Black);
-            border-right: 2px solid var(--Black);
-            border-bottom: 2px solid var(--Black);
-            padding: 16px;
-            textarea{ /*como se va a ver el texto escrito*/
-                width: 100%;
-                height: 90%;
-                background-color: var(--White);
-                color: var(--PinkDark);
-                font-family: var(--font-Body-OpenSans);
-                font-size: 1.5rem;
-                font-weight: 400;
-                text-align: left;
-                border: none;
-                outline: transparent;
-                line-height: 150%;
-                resize: none;
-                textarea:focus{
-                    outline: none;
-                }
-            }
-            .advertencia__area{
-                width: 100%;
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                justify-content: left;
-                gap: 16px;
-                .advertencia__icono{
-                    height: 1rem;
-                }
-                .advertencia__texto{
-                    font-family: var(--font-Body-OpenSans);
-                    font-size: 1rem;
-                    font-weight: 400;
-                    color: var(--Black);
-                }
-            }
-        }
-        
-          
-        ::placeholder{ /*mensaje que ahí debe escribirse*/
-            color: var(--Black);
-            font-family: var(--font-Label-LexendMega);
-            font-size: 1rem;
-            font-weight: 600;
-        }    
+}
+
+.textBox__area{
+    width: 100%;
+    height: 81.08%;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+
+.textBox__label{
+    width: 100%;
+    height: 7.78%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 1%;
+    background-color: var(--Violet);
+    border-top: 2px solid var(--Black);
+    border-left: 2px solid var(--Black);
+    border-right: 2px solid var(--Black);
+    border-bottom: 1px solid var(--Black);
+}
+
+.textBox__label__text{
+    font-family: var(--font-Label-LexendMega);
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--Black);
+    justify-content: left;
+}
+
+.textBox__label__icon{
+    width: 10.45%;
+    height: 100%;
+    background-color: var(--VioletDark);
+    border-left: 2px solid var(--Black);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 1%;
+}
+
+.icon__arrowDown{
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 100%;
+}
+
+.textBox{
+    width: 100%;
+    height: 85.56%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 0px;
+    align-items: center;
+    background-color: var(--White);
+    border-top: 1px solid var(--Black);
+    border-left: 2px solid var(--Black);
+    border-right: 2px solid var(--Black);
+    border-bottom: 2px solid var(--Black);
+}
+
+textarea{
+    width: 100%;
+    height: 100%;
+    color: var(--PinkDark);
+    font-family: var(--font-Body-OpenSans);
+    font-size: 1.5rem;
+    font-weight: 400;
+    text-align: left;
+    border: none;
+    outline: transparent;
+    line-height: 150%;
+    resize: none;
+    padding: 3%;
+    textarea:focus{
+        outline: none;
     }
+}
 
-    .buttons__area{
-        height: 4rem;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        gap: 24px;
-        align-items: center;
-        .btn__encriptar, 
-        .btn__copiar__encriptado,
-        .btn__desencriptar,
-        .btn__copiar__desencriptado {
-            width: 50%;
-            height: 3.5rem;
-            font-family: var(--font-Label-LexendMega);
-            font-size: 1rem;
-            font-weight: 700;
-            color: var(--Black);
-            border: 2px solid var(--Black);
-            box-shadow: 4px 8px 0px var(--Black);
-            padding: 8px 24px;
-            transition-duration: 0.4s;
-            cursor: pointer;
-        }
-        .btn__encriptar{
-            background-color: var(--Pink);
-        }
-        .btn__copiar__encriptado{
-            background-color: var(--PinkLight);
-        }
-        .btn__desencriptar{
-            background-color: var(--Blue);
-        }
-        .btn__copiar__desencriptado{
-            background-color: var(--BlueLight);
-        }
-        .btn__encriptar:hover, 
-        .btn__copiar__encriptado:hover, 
-        .btn__desencriptar:hover, 
-        .btn__copiar__desencriptado:hover{
-            background-color: var(--GreenLight);
-            border: 4px solid var(--Black);
-            box-shadow: 0px 0px 0px var(--Black);
-        }
+.textarea__footer{
+    width: 100%;
+    height: 8%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 2px solid var(--Black);
+}
+
+.advertencia__area{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    gap: 8px;
+    align-items: center;
+    padding: 2px;
+}
+
+.advertencia__icono{
+    height: 100%;
+    width: auto;
+}
+
+.advertencia__texto{
+    font-family: var(--font-Body-OpenSans);
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: var(--Black);
+}
+
+.btn__trash{
+    height: 100%;
+    width: 8.96%;
+    border-left: 2px solid var(--Black);
+    border-top: none;
+    border-bottom: none;
+    border-right: none;
+    padding: 0.5%;
+    cursor: pointer;
+}
+    
+.trash__icon{
+    height: 100%;
+    width: auto;
     }
+
+::placeholder{ /*mensaje que ahí debe escribirse*/
+    color: var(--Black);
+    font-family: var(--font-Label-LexendMega);
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.btn__trash:hover{
+    background-color: var(--GreenLight);    
 }
 
-.footer{
+.buttons__area{
+    height: 4rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+    align-items: center;
+}
+
+.btn__encriptar, 
+.btn__copiar__encriptado,
+.btn__desencriptar,
+.btn__copiar__desencriptado {
+    width: 50%;
+    height: 3.5rem;
+    font-family: var(--font-Label-LexendMega);
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--Black);
+    border: 2px solid var(--Black);
+    box-shadow: 4px 8px 0px var(--Black);
+    padding: 8px 24px;
+    transition-duration: 0.4s;
+    cursor: pointer;
+}
+
+.btn__encriptar{
+background-color: var(--Pink);
+}
+
+.btn__copiar__encriptado{
+    background-color: var(--PinkLight);
+}
+
+.btn__desencriptar{
+background-color: var(--Blue);
+}
+
+.btn__copiar__desencriptado{
+    background-color: var(--BlueLight);
+}
+
+.btn__encriptar:hover, 
+.btn__copiar__encriptado:hover, 
+.btn__desencriptar:hover, 
+.btn__copiar__desencriptado:hover,
+.btn__swap:hover{
+    background-color: var(--GreenLight);
+    border: 4px solid var(--Black);
+    box-shadow: 0px 0px 0px var(--Black);
+}
+
+footer{
     width: 100%;
     background-color: var(--Black);
     display: flex;
@@ -280,21 +330,22 @@ main{
     justify-content: space-between;
     text-align: right;
     padding: 20px 20px 20px 20px;
-    .footer__text{
-        font-family: var(--font-Body-OpenSans);
-        font-size: 1.5rem;
-        font-weight: 400;
-        color: var(--White);
-    }
-    .footer__link__area{
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        gap: 24px;
-    }
+}
+    
+.footer__text{
+    font-family: var(--font-Body-OpenSans);
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: var(--White);
 }
 
+.footer__link__area{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+}
 
 /*FORMATO DE LOS POPUP o MENSAJES*/
 .popup__texto{
@@ -348,59 +399,94 @@ main{
 /*///////////////////////////////////////////////////////////////////////////////////////////////*/
 /*DISEÑO RESPONSIVO - TABLET*/
 @media (max-width: 942px) {
-    .main{
+    
+    header{
+        height: 10%;
+    }
+    
+    .headline{
+        font-size: 2.5rem;
+    }
+        
+    main{
+        height: 90%;
         flex-direction: column;
-        height: 100%;
+        justify-content:center;
+        gap: 0%;
+        align-items: center;
+        padding-left: 0%;
+        padding-right: 0%;
+        padding-bottom: 3%;
+        background: none;
+        background-color: var(--Green);
     }
-   
-    .swapImgModoClaro, .swapImgModoOscuro{
-        margin: 24px 0px;
+    
+    .button__swap__area{
+        width: 100%;
+        height: 5%;
+        padding-top: 2%;
+        padding-right: 8px;
+    }      
+    
+    .btn__swap{
+        width: 5rem;
+        height: 5rem;
     }
-   
-    /*organiza elementos izquierda-derecha*/
+    
     .container{
-        width: 100%;
-        height: 50%;
+        width: 90%;
+        height: 40%;
     }
 
-    .footer{
+    .buttons__area{
+        padding-top: 3%;
+    }
+   
+    footer{
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        height: 100px;
+        text-align: center;
+    }
+        
+    .footer__text{
+        font-size: 1rem;
     }
+    
     .footer__link__area{
-        padding: 32px 0px 0px;
+        gap: 16px;
+        padding: 2%;
     }
 }
 
+
 /*///////////////////////////////////////////////////////////////////////////////////////////////*/
 /*DISEÑO RESPONSIVO - CELULAR*/
 @media (max-width: 600px) {
-   
-    /*botones - definición del espacio que ocupan*/
+
+    .headline{
+        font-size: 1.5rem;
+    }
+
+    .btn__swap{
+        width: 4rem;
+        height: 4rem;
+    }
+        
     .buttons__area{
-        height: 96px;
+        height: 7rem;
         display: flex;
         flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
+        gap: 16px;
         align-items: center;
     }
-
-    /*botones - formato*/
-    .buttons__encriptar{
-        width: 100%;
-        margin: 4px 0px;
-    }  
-
-    .buttons__desencriptar{
-        width: 100%;
-        margin: 4px 0px;    
-    }
-
-    .buttons__copiar{
+        
+    .btn__encriptar,   
+    .btn__copiar__encriptado,
+    .btn__desencriptar,
+    .btn__copiar__desencriptado {
         width: 100%;
-        height: 95%;
-        padding: 0%;
+        height: 3rem;
     }
 }
\ No newline at end of file