front improvements

Author: yceballost

src/pages/skin-tool/advanced-tools.css

@@ -1,29 +1,65 @@
 /* Estilo del mensaje y confeti que se mueve hacia arriba */
 .animated-message {
-    transition: opacity 1s ease-out, transform 4s ease-out;
-  }
-  
-  .animated-message.fade-out {
+  transition: opacity 1s ease-out, transform 4s ease-out;
+}
+
+.animated-message.fade-out {
+  opacity: 0;
+  transform: translateY(-100%); /* Mueve el contenido hacia arriba */
+}
+
+/* Herramientas avanzadas */
+.advanced-tools-container {
+  position: relative;
+  top: 0;
+  animation: slideUp 3s forwards;
+}
+
+/* Animación para que las herramientas avanzadas suban */
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
     opacity: 0;
-    transform: translateY(-100%); /* Mueve el contenido hacia arriba */
-  }
-  
-  /* Herramientas avanzadas */
-  .advanced-tools-container {
-    position: relative;
-    top: 0;
-    animation: slideUp 3s forwards;
   }
-  
-  /* Animación para que las herramientas avanzadas suban */
-  @keyframes slideUp {
-    0% {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
   }
-  
+}
+
+.colorScale {
+  width: 72px;
+  height: 72px;
+}
+
+.color-list {
+  display: flex;
+  flex-direction: column;
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.preview-section {
+  flex-grow: 1;
+}
+.preview-card {
+  width: 384px;
+  background: white;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+.preview-header {
+  padding: 24px;
+  color: white;
+}
+.preview-header-top {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.preview-content {
+  padding: 24px;
+}