better css and responsiveness

desktop/views/css/components/anilist-modal.css

@@ -122,12 +122,23 @@
     background: var(--input-bg);
     border: 1px solid var(--border-subtle);
     color: white;
-    padding: 0.9rem 1rem;
     border-radius: 10px;
     font-family: inherit;
     font-size: 0.95rem;
     font-weight: 500;
     transition: all 0.2s ease;
+    height: 45px;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+textarea.form-input {
+    height: auto;
+    padding: 1rem;
+    min-height: 100px;
 }
 
 .form-input:focus {
@@ -137,13 +148,33 @@
     box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
 }
 
-.form-group.notes-group { grid-column: 1 / span 2; }
-.form-group.checkbox-group { grid-column: 3 / 4; align-self: end; margin-bottom: 0.8rem; }
+.form-group.notes-group {
+    grid-column: 1 / -1;
+    order: 10;
+}
+.form-group.checkbox-group {
+    grid-column: 3 / 4;
+    align-self: end;
+    margin-bottom: 0.8rem;
+    order: 5;
+}
 .form-group.full-width { grid-column: 1 / -1; }
 .notes-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
 
-.date-group { display: flex; gap: 1.5rem; }
-.date-input-pair { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
+/* Cambia de 3 columnas a 2 columnas para que Start y End llenen el espacio */
+.date-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Antes era 1fr 1fr 1fr */
+    gap: 2rem;
+    width: 100%;
+}
+
+.date-input-pair {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    width: 100%;
+}
 
 .checkbox-group {
     flex-direction: row;
@@ -276,4 +307,10 @@
     .btn-primary { order: 1; }
     .btn-secondary { order: 2; }
     .btn-danger { order: 3; margin-top: 0.5rem; }
+}
+
+input[type="date"].form-input {
+    display: block; /* Elimina el comportamiento flex */
+    text-align: left; /* Asegura alineación a la izquierda */
+    padding-top: 10px; /* Ajuste pequeño para centrar verticalmente si es necesario */
 }