/* =========================
   Paleta Tulinda (rosa + dorado)
   ========================= */
:root{
  --rose-50:#fff4f6;
  --rose-100:#fde8ec;
  --rose-200:#f9d2da;
  --rose-300:#f3b7c2;
  --rose-400:#e99daf;
  --rose-500:#df879e;          /* apoyo */
  --brand-rose:#e8b1be;        /* fondo suave */
  --brand-rose-deep:#d795a6;   /* acento más fuerte */
  --brand-text:#2b1f22;        /* marrón muy oscuro */
  --gold:#d6b26a;              /* dorado mate */
  --gold-deep:#b8954f;
  --white:#ffffff;
}

/* =========================
   Fondo general con foto + veladura rose
   ========================= */
body{
  min-height:100vh;
  display:grid;
  place-items:center;
  margin:0;
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  background: url("../") center/cover fixed no-repeat var(--rose-100);
  color: var(--brand-text);
}
.auth-bg{
  position:fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(255,255,255,.55), transparent 60%),
              radial-gradient(900px 500px at 85% 70%, rgba(232,177,190,.35), transparent 60%);
  box-shadow: inset 0 0 120px rgba(0,0,0,.25);
  backdrop-filter: blur(1.5px);
}

/* =========================
   Tarjeta principal split
   ========================= */
.auth-card{
  width:min(980px,92vw);
  min-height:520px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  border:1px solid rgba(215,149,166,.35);
  backdrop-filter: blur(6px);
}

/* =========================
   Lado izquierdo (formulario)
   ========================= */
.auth-left{ width:55%; }
@media (max-width:768px){ .auth-left{ width:100%; } }

/* Branding */
.brand-logo{
  max-height:96px; width:auto; margin-bottom:.4rem;
  border-radius:18px;
}
.brand-title{
  font-family:"Playfair Display", serif;
  font-weight:700; letter-spacing:.5px;
  font-size:2rem; color:var(--brand-text);
}
.brand-tagline{
  color:#6b4e56; letter-spacing:.18em; text-transform:uppercase;
  font-size:.8rem;
}

/* Titular del formulario */
.tituloH2{
  text-align:center;
  font-weight:700;
  color:#5b3c43;
}

/* =========================
   Lado derecho (panel rosa)
   ========================= */
.auth-right{
  width:45%;
  color:#3d2a2f;
  background: linear-gradient(135deg, var(--brand-rose) 0%, var(--rose-300) 60%, var(--rose-200) 100%);
  position:relative;
  clip-path: polygon(14% 0,100% 0,100% 100%,0 100%);
  box-shadow: inset 0 0 60px rgba(255,255,255,.25);
}
.auth-right::after{
  /* filete “dorado” suave en el corte diagonal */
  content:"";
  position:absolute; left:-3px; top:0; bottom:0; width:6px;
  background: linear-gradient(180deg, rgba(214,178,106,.9), rgba(184,149,79,.4));
  filter: blur(2px);
}
.auth-right .auth-right-content{ max-width:80%; }
.auth-right h3{
  font-family:"Playfair Display", serif;
  color:#3b252a;
}
.hero-right{
  max-width:90%; height:280px; object-fit:cover;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
@media (max-width:768px){ .auth-right{ display:none !important; } }

/* =========================
   Inputs (floating label) estilo rose/gold
   ========================= */
.form-floating > .form-control.form-control-rose{
  background:transparent;
  color:#3e2b30;
  border:none;
  border-bottom:2px solid rgba(183,120,137,.45); /* rosa profundo */
  border-radius:0;
  padding-left:.9rem;
  padding-right:2.4rem;      /* espacio para ícono a la derecha */
  caret-color: var(--brand-rose-deep);
}
.form-floating > label{
  color:#8a6c73;
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
}
.form-floating > .form-control.form-control-rose:focus{
  outline:none; box-shadow:none;
  border-bottom-color: var(--gold);
}
.form-floating > .form-control.form-control-rose::placeholder{ color:transparent; }

/* Afinado del label al enfocar/escribir */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label{
  color:#5a4348;
}

/* Íconos en inputs (derecha) */
.input-icon{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  color:#a47885; pointer-events:none; font-size:1.1rem;
}

/* =========================
   Botón principal (rosa con borde dorado)
   ========================= */
.btn-rose{
  background: linear-gradient(180deg, var(--rose-300), var(--brand-rose));
  color:#3a272c; font-weight:600; border:1px solid var(--gold);
  border-radius:999px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 6px 16px rgba(232,177,190,.35);
}
.btn-rose:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(214,178,106,.55);
}

/* Enlaces */
.link-accent{ color:var(--brand-rose-deep); text-decoration:none; }
.link-accent:hover{ color:#b56f83; }

/* Autofill Chrome */
input:-webkit-autofill,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#3e2b30;
  transition: background-color 9999s ease-in-out 0s;
}

/* =========================
   Mensajes (alert)
   ========================= */
.msg{
  display:block; width:100%;
  margin-bottom:15px; padding:12px 16px;
  border-radius:10px; font-size:.95rem; font-weight:600; text-align:center;
  background: rgba(232,177,190, .18);
  color:#5a3b43; border:1px solid rgba(214,178,106,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  backdrop-filter: blur(3px);
}
.msg.error{
  background: rgba(220, 53, 69, .12);
  border-color: #e39aa6;
  color:#a83d4a;
}
.msg.warning{
  background: rgba(255, 193, 7, .12);
  border-color: #f1c77a;
  color:#9c6b1a;
}
.msg.success{
  background: rgba(40, 167, 69, .12);
  border-color: #7ec28a;
  color:#357945;
}

.img_Logo{
  border-radius: 50px;
}