anima-ds-nucleus 1.0.20 → 1.0.22

package/src/style.css

@@ -755,4 +755,110 @@
   background-position: center;
   mix-blend-mode: soft-light;
   opacity: 0.85;
+}
+
+/* ============================================
+   LOGIN FORM - Clases estables del Design System
+   ============================================ */
+
+/* Contenedor principal del LoginForm */
+.anima-loginform__container {
+  width: 100%;
+  max-width: 28rem; /* 448px - equivalente aproximado a 427px pero responsive */
+}
+
+/* Card del formulario */
+.anima-loginform__card {
+  min-height: 25.5625rem; /* 409px */
+  border-radius: 0.875rem; /* 14px */
+  border: 1px solid #0000001A;
+  padding: 1.5rem; /* 24px */
+  background: #FFFFFF;
+  box-shadow: 0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A;
+}
+
+/* Fila de botones sociales */
+.anima-loginform__socialRow {
+  display: flex;
+  gap: 1.25rem; /* 20px */
+  width: 100%;
+  height: 2.25rem; /* 36px */
+}
+
+/* Botones sociales individuales */
+.anima-loginform__socialButton {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem; /* 36px */
+  padding: 0.5rem 2.6875rem; /* 8px 43px */
+  gap: 1rem; /* 16px */
+  border-radius: 0.5rem; /* 8px */
+  border: 1px solid #38656D;
+  background-color: white;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.anima-loginform__socialButton:hover {
+  background-color: #f9fafb; /* hover:bg-gray-50 */
+}
+
+/* Caja de error general */
+.anima-loginform__errorBox {
+  width: 100%;
+  min-height: 4.25rem; /* 68px */
+}
+
+/* Responsive: mantener botones sociales horizontales en mobile */
+@media (max-width: 768px) {
+  .anima-loginform__socialRow {
+    flex-wrap: wrap;
+  }
+  
+  .anima-loginform__socialButton {
+    min-width: calc(50% - 0.625rem); /* 50% menos la mitad del gap */
+  }
+}
+
+/* ============================================
+   PASSWORD INPUT - Clases estables del Design System
+   ============================================ */
+
+/* Contenedor del campo de contraseña */
+.anima-passwordfield {
+  width: 100%;
+  position: relative;
+}
+
+/* Input de contraseña con padding para el toggle */
+.anima-passwordfield__input {
+  padding-right: 2.75rem !important; /* Espacio para el botón de toggle */
+}
+
+/* Botón de toggle de visibilidad */
+.anima-passwordfield__toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.75rem;
+  color: #6b7280;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.anima-passwordfield__toggle:hover {
+  color: #374151;
+}
+
+.anima-passwordfield__toggle:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+  border-radius: 0.25rem;
 }