:root {
  --primary: #D1728F;
  --primary-hover: #C86583;
  --mid: #E8A4C1;
  --soft: #F4BCD9;
  --light: #FFD5F2;
  --text-dark: #4A2A34;
  --light-back: #fdeef8;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI', sans-serif;
}

body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(135deg, #FFD5F2, #F4BCD9);
}

.container{
  width:1200px;
  height:700px;
  display:flex;
  background:white;
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

/* PANEL IZQUIERDO */

.left-panel{
  width:60%;
  background: linear-gradient(160deg, var(--soft), var(--mid));
  position:relative;
  padding:50px;
}

.curve{
  position:absolute;
  width:550px;
  height:550px;
  background:var(--mid);
  border-radius:50%;
  top:-200px;
  left:-200px;
}

.brand{
  display:flex;
  align-items:center;
  gap:15px;
  position:relative;
  z-index:2;
}

.logo-circle{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--primary);
}

.brand h2{
  color:var(--text-dark);
}

.illustration{
  margin-top:90px;
  text-align:center;
  position:relative;
  z-index:2;
}

.illustration img{
  width:85%;
}

.footer-text{
  text-align:right;
  margin-top:75px;
  font-size:12px;
  color:#888;
}

/* PANEL DERECHO */
.right-panel{
  width:40%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.login-box{
  width:100%;
  max-width:320px;
  text-align:center;
  margin-top:-100px; /* 👈 clave */
}

.logo-img{
  width:180px;
  display:block;
  margin:0 auto 15px auto;
}

.login-box h3{
  margin-bottom:20px;
  color:var(--text-dark);
}

.login-box label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  margin-bottom:5px;
  color:var(--text-dark);
}

.login-box label i{
  font-size:25px;
  color:var(--primary);
}

.login-box input{
  width:100%;
  padding:17px;
  margin-bottom:15px;
  border:none;
  border-radius:12px;
  background:var(--light-back);
  outline:none;
  transition:0.3s;
  border:2px solid transparent;
}

.login-box input:focus{
  border:2px solid var(--primary);
  background:white;
  box-shadow: 0 0 0 4px rgba(209,114,143,0.15);
}

.login-box button {
  width:50%;
  padding:15px;
  border:none;
  border-radius:10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color:white;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
  letter-spacing:1px;
}

button:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(209,114,143,0.3);
}

.forgot{
  display:block;
  text-align:center;
  margin-top:25px;
  font-size:13px;
  color:var(--primary);
  text-decoration:none;
  transition:0.2s;
}

.forgot:hover{
  opacity:0.7;
}

.login-box h2{
  margin-bottom:40px;
  color:var(--text-dark);
  font-weight:600;
  letter-spacing:0.5px;
}

/* Ver Contraseña */
.password-field{
  position:relative;
}

.password-field input{
  width:100%;
  padding-right:45px;
}

.toggle-password{
  position:absolute;
  right:12px;
  top:60%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:18px;
  color:#999;
  transition:0.2s;
}

.toggle-password:hover{
  color:var(--primary);
}

/* CREDENCIALES INCORRECTAS */
.custom-alert{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;
  animation:fadeIn 0.3s ease;
}

.alert-content{
  background:white;
  padding:25px;
  border-radius:16px;
  text-align:center;
  width: 350px;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
  animation:scaleIn 0.3s ease;
}

.alert-content i{
  font-size:40px;
  margin-bottom:10px;
}

.alert-content h3{
  margin-bottom:20px;
  color:#333;
}

.alert-content p{
  font-size:14px;
  margin-bottom:20px;
  color:#666;
}

.alert-content button{
  padding:10px 20px;
  border:none;
  border-radius:8px;
  background:var(--primary);
  color:white;
  cursor:pointer;
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes scaleIn{
  from{transform:scale(0.8);}
  to{transform:scale(1);}
}

/* Estilos Recuperar Contraseña */
.alert-success{
  background:#e6ffed;
  color:#2e7d32;
  padding:12px;
  border-radius:10px;
  margin-bottom:15px;
}

.auth-container{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.auth-card{
  width:100%;
  max-width:350px;
  background:white;
  padding:40px 30px;
  border-radius:15px;
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
  text-align:center;
}

.auth-card button{
  width:65%;
  padding:12px;
  margin:15px auto 0 auto;
}

.auth-card h2{
  margin-bottom:20px;
}

/* Estilos Botón Regresar */
.back-login{
  display:block;
  margin-top:20px;
  font-size:13px;
  color:var(--primary);
  text-decoration:none;
  text-align:center;
  transition:0.2s;
}

.back-login:hover{
  opacity:0.7;
}

.auth-forgot{
  margin-top:10px;
  margin-bottom:20px;
  font-size:12px;
  color:#888;
}

/* Estilos Footer */
.auth-footer{
  margin-top:30px;
  font-size:11px;
  color:#999;
}

/* Estilos "El correo no está registrado" */
.alert-error{
  display:flex;
  align-items:center;
  gap:10px;
  background:#ffe5ea;
  color:#b4233c;
  padding:12px 15px;
  border-radius:10px;
  margin:15px 0;
  font-size:13px;
  border:1px solid rgba(180,35,60,0.2);
  animation:fadeIn 0.3s ease;
}

.alert-error i{
  font-size:18px;
}

/* ===== ALERTAS GLOBAL STYLE (LOGIN / AUTH) ===== */

.alert-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
  margin: 15px 0;
}

/* Contenedor de botones */
.alert-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* Botón estilo sistema */
.alert-actions .btn-primary {
  width: 140px;
  height: 42px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border: none;
  color: #fff;
  cursor: pointer;
  transition: 0.2s ease;
}

.alert-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(209,114,143,0.3);
}

/* ===== COLORES DINÁMICOS DE ALERTAS ===== */

.alert-content.success i {
  color: #2e7d32; /* verde */
}

.alert-content.error i {
  color: #e74c3c; /* rojo */
}

.alert-content.warning i {
  color: #f39c12; /* naranja */
}

.alert-content.info i {
  color: #3498db; /* azul */
}