@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background-color: #f5e5d7;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
}

/* 🔹 Contenedor centrado */
.form-container {
  width: 100%;
  max-width: 400px;
  text-align: center;
  position: relative;
  z-index: 0;
  pointer-events: none; /* 🔥 deja pasar hover al fondo */
}

.form-container * {
  pointer-events: auto; /* 🔥 inputs, links y botones siguen funcionando */
}

/* 🔹 Título */
h2 {
  color: #4f0452;
  margin-bottom: 20px;
  font-size: 28px;
}

/* 🔹 Botón Google */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  margin-bottom: 25px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: white;
  font-size: 16px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
}

.google-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.google-btn:hover {
  background-color: #f1f1f1;
}

/* 🔹 separador punteado */
.separator {
  position: relative;
  text-align: center;
  margin: 35px 0 20px;
}

.separator::before,
.separator::after {
  content: "";
  position: absolute;
  top: 10%;
  width: 100%;
  height: 1px;
  background-color: #d6bfae;
}

.separator::before {
  left: 0;
}

.separator::after {
  right: 0;
}

.separator span {
  padding: 0 15px;
  font-size: 13px;
  font-weight: 500;
  color: #b47756;
}

/* 🔹 Formulario */
form {
  text-align: left;
}

label {
  font-weight: 600;
  display: block;
  margin-top: 15px;
  color: #444;
}

input[type="email"],
.password-container input {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 15px;
  background-color: #fdfdfd;
  box-sizing: border-box;
  height: 44px;
  padding-right: 44px;
}

button[type="submit"] {
  display: block;
  width: 100%;
  padding: 14px;
  margin: 20px 0 0 0;
  border: none;
  border-radius: 12px;
  background-color: #f27c41;
  color: white;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #e2692d;
}

/* 🔹 Registro en una línea */
.register-line {
  margin-top: 20px;
  font-size: 14px;
}

.register-line .link {
  margin-left: 6px;
  color: #f27c41;
  text-decoration: none;
  font-weight: 600;
}

.register-line .link:hover {
  text-decoration: underline;
}

/* 🔹 Te olvidaste la contraseña */
.Tucontraseña-line {
  margin-top: 20px;
  font-size: 14px;
}

.Tucontraseña-line .link {
  display: block;
  text-align: center;
  margin-top: 15px;
  color: #4f0452;
  text-decoration: none;
  font-weight: 200;
}

.Tucontraseña-line .link:hover {
  text-decoration: underline;
  color: #e0531b;
}

/* ✅ Campo de contraseña con ícono de ojo */
.password-container {
  position: relative;
  width: 100%;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.eye-icon {
  position: absolute;
  top: 52%;
  right: 10px;
  transform: translateY(-40%);
  height: 20px;
  width: 20px;
  cursor: pointer;
   opacity: 0.8;
}

.eye-icon:hover {
  opacity: 1;
}

/* 🔹 Mensajes de estado */
.message {
  padding: 14px 16px;
  margin: 20px 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  display: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

p {
  margin-top: 20px;
  font-size: 14px;
}

p a {
  color: #4f0452;
  text-decoration: none;
  font-weight: 800;
}

p a:hover {
  text-decoration: underline;
  color: #e0531b;
}



/* Animación al cargar */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-container {
  animation: fadeInUp 0.8s ease-out;
}

/* 🔹 Contenedor de imágenes */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  z-index: -2;
}

.bg-img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.8s ease;
}

/* 🔹 Animaciones de entrada */
body.loaded .left-img {
  animation: slideInLeft 1s ease forwards;
  animation-delay: 0.2s;
}

body.loaded .right-img {
  animation: slideInRight 1s ease forwards;
  animation-delay: 0.4s;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }
  to {
    opacity: 0.5;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 0.5;
    transform: translateX(0);
  }
}
a.DCO img {
  width: 200px;   /* tamaño en desktop */
  height: auto;   /* mantiene proporción */
}




/* 🔹 Responsive */
@media (max-width: 400px) {
  .form-container {
    padding: 0 10px;
  }

  h2 {
    font-size: 20px;
  }

  button {
    font-size: 14px;
  }

  /* Ocultar ambas imágenes del DOM */
  .left-img,
  .right-img {
    display: none !important;
  }
  /* Fondo con la chica */
  body {
    position: relative;
    background: url("Imagenes/Decoradora1.png") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
  }

  /* Overlay oscuro para simular opacidad */
  body::after {
    content: "";
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.384); /* negro 50% */
    z-index: -1; /* detrás del formulario */
  }
    a.DCO img {
    width: 120px; /* tamaño en mobile */
  }
}