/* components/forms.css */

/* ---------------------------
   1) Formulario en el header
   --------------------------- */
.header-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: translateZ(30px);
  width: 100%;
}

.header-form .form-group {
  position: relative;
  width: 100%;
}

.header-form .form-label {
  position: absolute;
  top: 12px;
  left: 16px;
  background: transparent;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
}

.header-form .form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.header-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.header-form .form-control:focus {
  outline: none;
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 196, 255, 0.2);
}

.header-form .form-control:focus + .form-label,
.header-form .form-control:not(:placeholder-shown) + .form-label {
  top: -10px;
  left: 12px;
  font-size: 0.75rem;
  background: var(--primary-light);
  transform: translateZ(30px);
}


/* ---------------------------
   2) Formulario de login
   --------------------------- */
.login-container form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: translateZ(30px);
  width: 100%;
}

.login-container .form-group {
  position: relative;
  width: 100%;
}

.login-container .form-label {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: var(--primary);
  padding: 0 6px;
  border-radius: 4px;
  pointer-events: none;
  transition: all 0.3s ease;
  transform-origin: left center;
  transform: translateZ(20px);
}

.login-container .form-control {
  width: 100%;
  padding: 16px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.login-container .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.login-container .form-control:focus {
  outline: none;
  border-color: var(--secondary);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 196, 255, 0.2);
}

.login-container .form-control:focus + .form-label,
.login-container .form-control:not(:placeholder-shown) + .form-label {
  top: -10px;
  left: 12px;
  font-size: 0.75rem;
  background: var(--primary-light);
  transform: translateZ(30px);
}


/* =========================================================================
   NUEVO  ·  Extras reutilizables para inputs / textareas
   ========================================================================= */
.input-wrapper {                    /* NUEVO */
  position: relative;
}

.input-icon {                       /* NUEVO */
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-color: var(--glass);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
}
.input-wrapper .form-input {
  padding-left: 52px; /* ajusta según el ancho del ícono */
}

.input-suffix {                     /* NUEVO */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  font-weight: 500;
  pointer-events: none;
}

.textarea-wrapper {                 /* NUEVO */
  position: relative;
}

.textarea-wrapper textarea {        /* NUEVO */
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 16px;
  font-size: 1rem;
  border: 1px solid var(--light-gray);
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.5);
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.textarea-wrapper textarea:focus {  /* NUEVO */
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
}

.textarea-footer {                  /* NUEVO */
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.char-counter {                     /* NUEVO */
  font-size: 0.85rem;
  color: var(--gray);
}
.form-control {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.5);
  border: 1px solid var(--light-gray);
  color: var(--text-dark);
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.form-control::placeholder {
  color: var(--gray);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
}