adapt new Input

sigpro.css

@@ -60,74 +60,38 @@
   font-size: 14px;
 }
 
-
 .input,
+.label,
 .select,
 .textarea {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &:focus,
   &:focus-within {
-    outline: 1px solid transparent !important;
-    outline-offset: 1px !important;
+    outline: none !important;
+    box-shadow: 0 0 4px 0px;
   }
 
   &:hover:not(:focus) {
     background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
   }
 
-  &:focus {
-    --focus-color: var(--color-primary);
-
-    &[class*="-secondary"] {
-      --focus-color: var(--color-secondary);
-    }
-    &[class*="-accent"] {
-      --focus-color: var(--color-accent);
-    }
-    &[class*="-neutral"] {
-      --focus-color: var(--color-neutral);
-    }
-    &[class*="-ghost"] {
-      --focus-color: var(--color-base-content);
-    }
-    &[class*="-info"] {
-      --focus-color: var(--color-info);
-    }
-    &[class*="-success"] {
-      --focus-color: var(--color-success);
-    }
-    &[class*="-warning"] {
-      --focus-color: var(--color-warning);
-    }
-    &[class*="-error"] {
-      --focus-color: var(--color-error);
-    }
-
-    background-color: oklch(from var(--focus-color) l c h / 0.05);
-    border-color: var(--focus-color);
-    box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
-
-    &[class*="-ghost"] {
-      border-width: 1px;
-    }
-  }
 }
 
 .floating-label span {
-  color: oklch(30% 0.01 260); /* Gris más oscuro (30% es más oscuro que 45%) */
-  font-size: 1.1rem; /* text-base: más grande que 0.875rem */
+  color: oklch(30% 0.01 260);
+  font-size: 1.1rem;
   transition: all 0.2s ease;
 }
 
 .floating-label:focus-within span {
-  color: oklch(25% 0.02 260); /* Aún más oscuro al enfocar */
-  font-size: 1.1rem; /* Mantiene el mismo tamaño */
+  color: oklch(25% 0.02 260);
+  font-size: 1.1rem;
 }
 
 .floating-label:has(input:not(:placeholder-shown)) span {
-  color: oklch(28% 0.01 260); /* Gris oscuro cuando tiene valor */
-  font-size: 1.1rem; /* Mantiene el mismo tamaño */
+  color: oklch(28% 0.01 260);
+  font-size: 1.1rem;
 }
 
 .tab-content-inner {
@@ -135,6 +99,16 @@
   transform-origin: top;
 }
 
+.input-content {
+  position: absolute; /* Lo saca del flujo para que no empuje nada */
+  top: 100%; /* Lo pega justo al borde inferior del input */
+  left: 0;
+  width: 100%; /* Para que mida lo mismo que el input */
+  z-index: 100; /* Para que pase por encima de otros botones/inputs */
+  background: white; /* Para que no sea transparente y se lea bien */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opcional: para darle profundidad */
+}
+
 @keyframes tabFadeIn {
   from {
     opacity: 0;
@@ -146,6 +120,34 @@
   }
 }
 
+@layer utilities {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+  }
+
+  .animate-fade-in {
+    animation: fade-in 0.15s ease-out forwards;
+  }
+}
+
 /* @layer utilities {
   button {
     @apply btn;