/* Signup Form Styles - Using Design Tokens */

/* Two-column layout for signup page */
.signup-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.signup-left {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-16) var(--space-16) var(--space-16);
}

.signup-right {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-16) var(--space-8) var(--space-8);
}

.signup-main-title {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  color: #FFFFFF;
  text-align: left;
  line-height: var(--leading-tight);
  text-shadow: var(--shadow-sm);
  margin: 0;
}

/* Adjust auth-content for right column */
.signup-right .auth-content {
  width: 100%;
  max-width: 50rem;
  margin: 0;
  margin-top: var(--space-4);
}

/* Responsive layout - Mobile and Tablet */
@media (max-width: 1023px) {
  .signup-layout {
    flex-direction: column;
  }

  .signup-left {
    flex: none;
    padding: var(--space-16) var(--space-8) var(--space-8);
    align-items: center;
  }

  .signup-right {
    flex: none;
    padding: 0 var(--space-8) var(--space-8);
  }

  .signup-main-title {
    font-size: var(--text-4xl);
    margin-bottom: 0;
  }

  .signup-right .auth-content {
    max-width: 100%;
  }
}

/* Custom background for signup page - Desktop only */
@media (min-width: 1024px) {
  #auth-page {
    background: url('/assets/images/fondo_registro.png') no-repeat center center scroll;
    background-size: cover;
    min-height: 100vh;
  }

  /* Add overlay to improve form readability if needed */
  #auth-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: -1;
    pointer-events: none;
  }
}

/* Ensure the auth page takes full height on all devices */
#auth-page #app {
  min-height: 100vh;
}

/* Required field styles - High priority */
.required,
span.required,
label .required,
.field .required,
#auth-page .required,
#auth-page span.required,
#auth-page label .required,
#auth-page .field .required {
  color: var(--color-error) !important;
  font-weight: var(--font-bold) !important;
  margin-left: var(--space-1) !important;
}

/* Required fields disclaimer styling */
.required-fields-disclaimer {
  font-size: var(--text-sm) !important;
  color: var(--gray-500) !important;
  margin-top: var(--space-4) !important;
  margin-bottom: 0 !important;
  font-style: italic !important;
  text-align: center;
}

/* Field disclaimer (legacy) */
.field-disclaimer {
  font-size: 0.9em;
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  text-align: center;
}

.field-disclaimer .required {
  margin-right: var(--space-1);
  margin-left: 0;
}

/* Auth page specific styles */
#auth-page .auth-content .field label {
  text-align: left;
}

/* Make sure labels display inline with asterisks */
#auth-page .auth-content .field label {
  display: block;
  margin: var(--space-2) 0;
  font-size: var(--text-lg);
  color: var(--gray-900);
  line-height: var(--leading-tight);
  font-weight: var(--font-medium);
}

/* Ensure proper spacing for form fields */
#auth-page .auth-content .field {
  margin-bottom: var(--space-6);
  text-align: left;
}

/* Button styling for signup */
#auth-page .auth-content .button {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Desktop layout improvements - Only for desktop (min-width: 1024px) */
@media (min-width: 1024px) {
  /* Two-column layout for Name and Surnames fields */
  .name-fields-container {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .field-name,
  .field-surname {
    flex: 1;
    margin-bottom: 0;
  }

  /* Make all form inputs wider - individual fields use full width */
  #auth-page .auth-content .field:not(.field-name):not(.field-surname) input[type="text"],
  #auth-page .auth-content .field:not(.field-name):not(.field-surname) input[type="email"],
  #auth-page .auth-content .field:not(.field-name):not(.field-surname) input[type="password"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 4.8rem;
  }

  /* Name and surname fields within the flex container */
  .field-name input[type="text"],
  .field-surname input[type="text"] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 4.8rem;
  }

  /* Ensure individual fields (username, email, passwords) span full width */
  #auth-page .auth-content .field:not(.field-name):not(.field-surname) {
    width: 100%;
  }

  /* Wider form container for better use of space */
  #auth-page .auth-content {
    max-width: 65rem;
    padding: var(--space-16) var(--space-24) var(--space-12);
  }

  /* Better field spacing */
  #auth-page .auth-content .field {
    margin-bottom: var(--space-8);
  }
}

/* Real-time validation styles */
.field-valid {
  border: 2px solid var(--color-success) !important;
  background-color: var(--color-info-light) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  background-position: right var(--space-4) center !important;
  background-repeat: no-repeat !important;
  background-size: var(--space-4) !important;
  padding-right: var(--space-16) !important;
}

.field-invalid {
  border: 2px solid var(--color-error) !important;
  background-color: var(--color-error-light) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ef4444'%3e%3cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
  background-position: right var(--space-4) center !important;
  background-repeat: no-repeat !important;
  background-size: var(--space-4) !important;
  padding-right: var(--space-16) !important;
}

.validation-feedback {
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  color: var(--color-error);
  font-weight: var(--font-medium);
}

/* Smooth transitions for validation states */
input[type="text"],
input[type="email"],
input[type="password"] {
  transition: border-color var(--transition-slow) ease, background-color var(--transition-slow) ease;
}

/* Focus states should override validation colors */
.field-valid:focus,
.field-invalid:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--bg-surface) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Form error message styles */
.form-error-message {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  color: var(--color-error-dark);
  font-size: var(--text-sm);
  text-align: left;
}

.form-error-message strong {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.form-error-message ul {
  margin: 0;
  padding-left: var(--space-8);
  list-style-type: disc;
}

.form-error-message li {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  text-align: left;
}

/* Fix modal positioning conflict between components.css and main.css */
/* Override components.css modal styles for register modal */
#auth-page #register-modal.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: none;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: rgba(17, 17, 17, 0.5);
}