front-Censo/src/app/styles/layout/ForgotPasswordPage.scss

// =====================================
// Forgot Password / Update User Page
// Estilo igual al LOGIN (bordes azules,
// contenedor blanco, título amarillo)
// =====================================

.forgot-password-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  color: #222;

  .forgot-form-container {
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.5rem;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    text-align: center;

    h1 {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: #bd8c01; // Amarillo tipo login
    }

    p {
      font-size: 1rem;
      color: #444;
      margin-bottom: 1.5rem;
    }

    .forgot-form {
      display: grid;
      gap: 1rem;

      label {
        font-weight: 600;
        color: #333;
        text-align: left;
        margin-bottom: 0.4rem;
        display: block;
      }

      // === INPUTS Y SELECT (mismo estilo)
      input[type="text"],
      input[type="password"],
      select {
        width: 100%;
        padding: 1.2rem 1.5rem;
        border: 2px solid #003e79; // borde azul login
        border-radius: 10px;
        font-size: 1rem;
        background: white;
        appearance: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus {
          outline: none;
          border-color: #004aad;
          box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.15);
        }
      }

      button[type="submit"] {
        width: 100%;
        padding: 1.2rem;
        font-size: 1rem;
        font-weight: 700;
        background-color: #004aad;
        color: white;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.15s ease;

        &:hover:not(:disabled) {
          background-color: #003e79;
          transform: translateY(-2px);
        }

        &:disabled {
          background-color: #9fbce8;
          cursor: not-allowed;
        }
      }

      a {
        text-align: center;
        color: #004aad;
        font-size: 0.9rem;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

// =====================================
// MODO OSCURO
// =====================================

[data-theme="dark"] .forgot-password-page {
  background: #1e1e1e;

  .forgot-form-container {
    background: #2a2a2a;
    box-shadow: none;
  }

  label {
    color: #ddd;
  }

  // === INPUTS Y SELECT en modo oscuro ===
  input[type="text"],
  input[type="password"],
  select {
    background: #333;
    border-color: #555;
    color: #fff;

    &:focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    }
  }

  button[type="submit"] {
    background-color: #4a90e2;

    &:hover:not(:disabled) {
      background-color: #357ab8;
    }
  }

  a {
    color: #82b1ff;
  }
}

// =====================================
// RESPONSIVE
// =====================================

// Teléfonos
@media (max-width: 480px) {
  .forgot-password-page {
    padding: 1.2rem;

    .forgot-form-container {
      padding: 1.5rem;
    }

    h1 {
      font-size: 1.6rem;
    }

    .forgot-form input {
      font-size: 1rem;
      padding: 0.75rem 0.9rem;
    }

    button {
      padding: 0.9rem !important;
    }
  }
}

// Tablets
@media (min-width: 768px) and (max-width: 1024px) {
  .forgot-password-page {
    padding: 2.5rem;

    .forgot-form-container {
      max-width: 470px;
    }

    h1 {
      font-size: 2.1rem;
    }

    p {
      font-size: 1.1rem;
    }

    .forgot-form input {
      font-size: 1.05rem;
    }
  }
}