/* =======================
   Branding / Variables
   ======================= */
:root{
  --brand: #FF6B2C;          /* Naranja principal */
  --brand-strong: #E14A00;   /* Hover/acento fuerte */
  --bg: #FFF6F0;             /* Fondo cálido claro */
  --card: #ffffff;
  --muted: #5f6368;          /* Texto secundario */
  --text: #2A2E33;           /* Texto principal */
}

/* =======================
   Fondo y layout base
   ======================= */
.login-body{
    margin:0;
    min-height:100vh;
    background: linear-gradient(135deg, #FF8A00 0%, #FFD36E 100%);
    color: var(--text);
    display:grid;
    place-items:center;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

.login-layout{
  width:min(1080px, 96vw);
  height:600px;
  background:var(--card);
  border-radius:16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.06);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr; /* izquierda / derecha */
  position:relative;
}

/* =======================
   Logo
   ======================= */
.login-logo{
  width:150px;
  height:auto;
  display:block;
  margin:0 auto 5px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
@media (max-width: 920px){
  .login-logo{ width:100px; margin-bottom:14px; }
}

/* =======================
   Panel izquierdo + imagen (recto)
   ======================= */
.left-pane{
  position:relative;
  background:
    linear-gradient(rgba(255,107,44,0.60), rgba(225,74,0,0.60)),
    url("/static/accounts/images/home/login-side.png") center/cover no-repeat;
  overflow:hidden;
  /* sombra lateral para profundidad */
  box-shadow: inset -18px 0 24px -18px rgba(0,0,0,.18);
}

/* Si existe curva previa, se elimina visualmente */
.curve{ display:none !important; }

/* =======================
   Panel derecho / formulario
   ======================= */
.right-pane{
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top: 27px;
    padding-right: 52px;
    padding-bottom: 42px;
    padding-left: 52px;
}

.login-card{
    width:100%;
    max-width:420px;
    background:var(--card);
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 26px;
    padding-left: 30px; /* + espacio inferior para balance visual */
    border-radius:12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
}

/* =======================
   Tipografía del contenido
   ======================= */
.login-card h2{
  margin-top:12px;
  margin-bottom:6px;
  text-align:center;
}

.login-card p{
  margin-bottom:28px;
  color:var(--muted);
  text-align:center;
}

/* =======================
   Inputs
   ======================= */
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"]{
  background-color:#fff;
  border:1px solid #ced4da;
  border-radius:999px;
  padding:12px 14px;
  font-size:15px;
}

.login-card input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(255,107,44,.18);
  outline:0;
}

/* Corrige el color amarillo en autofill (Chrome/Safari) */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* =======================
   Botones
   ======================= */
.btn-brand{
  background: linear-gradient(135deg, #FF6B2C 0%, #FF8A00 100%);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  font-weight:600;
  transition: all .2s ease-in-out;
}
.btn-brand:hover{
  background: linear-gradient(135deg, #E14A00 0%, #FF6B2C 100%);
  transform: translateY(-1px);
}

.btn-outline-light{
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-weight:600;
}
.btn-outline-light:hover{ background:#f9fafb; }

/* =======================
   Divider y enlaces
   ======================= */
.link-brand{ color:var(--brand-strong) !important; text-decoration:none; }
.link-brand:hover{ text-decoration:underline; }

.divider{
  position:relative;
  text-transform:none;
  font-size:13px;
  color: var(--muted);
  text-align:center;
}
.divider::before, .divider::after{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:40%;
  height:1px;
  background:#e5e7eb;
  margin:0 10px;
}

/* =======================
   Responsive
   ======================= */
@media (max-width: 920px){
  .login-layout{
    grid-template-columns: 1fr;
    height:auto;
  }
  .left-pane, .curve{ display:none !important; }
  .right-pane{ padding:28px 22px; }
  .login-card{
    box-shadow:none;
    padding:28px 22px;
  }
}