/* =========================================================
   La Guardiana – Login (v3 INTENSA)
   Paleta: Oro (#F5A000), Vino (#7A1E26), Cielo (#1FB6E5), Campo (#2F7D32)
========================================================= */
:root{
  --oro:   #F5A000;
  --oro-soft: #FFD65A;
  --vino:  #7A1E26;
  --cielo: #1FB6E5;
  --campo: #2F7D32;
  --hoja:  #3FA35A;
  --tinta: #0B0F12;
  --blanco:#FFFFFF;
}

/* Fondo general con foto + overlay cálido */
body{
  min-height:100vh; display:grid; place-items:center; margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:url("../img/Fondo_Login_LG.png") center/cover fixed no-repeat;
  color:var(--blanco);
}
.auth-bg{
  position:fixed; inset:0; pointer-events:none;
  background: linear-gradient(180deg,
    rgba(11,15,18,.55) 0%,
    rgba(122,30,38,.45) 55%,
    rgba(245,160,0,.30) 100%);
  box-shadow: inset 0 0 150px rgba(0,0,0,.7);
  backdrop-filter: blur(2px);
}

/* Tarjeta principal (split) */
.auth-card{
  width:min(1000px,92vw); min-height:500px; overflow:hidden; position:relative;
  border-radius:20px; background:#0A0F14;
  border:1.5px solid rgba(245,160,0,.35);
  box-shadow:0 32px 90px rgba(0,0,0,.6);
}

/* Lado izquierdo: formulario sobre vino→tinta sutil */
.auth-left{
  width:55%; color:#FDF7EA;
  background: linear-gradient(160deg, rgba(122,30,38,.86) 0%, rgba(10,15,20,.88) 65%);
}
@media (max-width:768px){ .auth-left{ width:100%; } }

/* Branding */
.brand-logo{
  max-height:96px; width:auto; margin-bottom:1rem; border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.brand-header h3{ font-size:1.25rem; letter-spacing:.6px; }
.tituloH2{ text-align:center; }

/* ======== Lado derecho: ¡BIENVENIDO! (oro → vino) ======== */
.auth-right{
  width:45%; color:#fff;
  /* nuevo degradado cálido de marca */
  background: linear-gradient(135deg, #F5A000 0%, #C43A24 58%, #7A1E26 100%);
  position:relative; clip-path: polygon(12% 0,100% 0,100% 100%,0 100%);
  box-shadow: inset 0 0 60px rgba(255,255,255,.12);
}
.auth-right::after{
  content:""; position:absolute; left:-3px; top:0; bottom:0; width:6px;
  /* bisel luminoso en oro */
  background: radial-gradient(closest-side, rgba(245,160,0,.9), transparent 70%);
  filter: blur(6px);
}
.auth-right .auth-right-content{ max-width:80%; }

/* Título/subtítulo del panel de bienvenida */
.auth-right h3{ color:#FFD65A; text-shadow:0 3px 10px rgba(0,0,0,.35); }
.auth-right p{ color:#FFEFD0; }

/* Imagen de bienvenida */
.hero-right{
  max-width:90%; height:280px; object-fit:cover; border-radius:16px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
@media (max-width:768px){ .auth-right{ display:none !important; } }

/* ===== Inputs con floating label e ícono a la DERECHA ===== */
.form-floating > .form-control.form-control-dark{
  background: transparent; color:#FAFBFF;
  border:none; border-bottom:2px solid rgba(255,255,255,.28);
  border-radius:0; padding-left:.9rem; padding-right:2.4rem;
  caret-color: var(--cielo);
}
.form-floating > label{
  color:rgba(255,255,255,.72);
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
}
.form-floating > .form-control.form-control-dark:focus{
  outline:none; box-shadow:none;
  border-bottom-color: var(--oro);
}
.form-floating > .form-control.form-control-dark::placeholder{ color:transparent; }

/* Label sube con contraste oro */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label{
  color: var(--oro-soft);
}

/* Íconos a la derecha */
.input-icon{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  color: rgba(255,255,255,.88); pointer-events:none; font-size:1.15rem;
}

/* Botón principal (oro) con glow */
.btn-glow{
  background: linear-gradient(180deg, #FFB200, var(--oro));
  color:#3E1A00; font-weight:800; border:none; border-radius:999px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow:0 0 0 rgba(245,160,0,0);
}
.btn-glow:hover{
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 0 22px rgba(245,160,0,.55);
}

/* Links de acción */
.link-accent{ color: var(--cielo); }
.link-accent:hover{ color:#79E8FF; }

/* Autofill visible */
input:-webkit-autofill, input:-webkit-autofill:focus{
  -webkit-text-fill-color:#FAFBFF;
  transition: background-color 9999s ease-in-out 0s;
}

/* Mensajes (reutiliza clases existentes) */
.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(0,0,0,.35); border:1px solid transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.msg.error   { background: rgba(122,30,38,.18); border-color: var(--vino); color:#FFB5B9; }
.msg.warning { background: rgba(245,160,0,.16); border-color: var(--oro);  color:#FFD65A; }
.msg.success { background: rgba(63,163,90,.16);  border-color: var(--hoja); color:#BFF2C9; }
