/* =========================================================
   LOGIN – Split Card Elegante (HTML intacto + flip intacto)
   Paleta: Negro #0B0B0B | Azul #0B64B4 | Celeste #82C8EE
           Amarillo #FFD400 | Verde #7BBF23
   ========================================================= */

/* -------- Variables y base -------- */
:root{
  --c-black:  #0B0B0B;
  --c-blue:   #0B64B4;
  --c-sky:    #82C8EE;
  --c-yellow: #FFD400;
  --c-green:  #7BBF23;

  --text-dark: #0E2233;
  --text-muted:#627287;
  --stroke:    #E6ECF3;
  --shadow:    0 16px 40px rgba(14,34,51,.12);
  --outer-radius: 24px;

  /* Imagen izquierda */
  --login-bg: url('../../../../Storage/Login/arroz.png');

  /* Fuente UI moderna nativa (sin CDNs) */
  --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Accentos / glass */
  --accent-from:#007deae8;
  --accent-to:  #0962e8;
  --glass: rgba(255,255,255,.82);
}

html,body{height:100%}
body{
  font-family: var(--ff);
  /* Filtro + imagen */
  background:
    linear-gradient(rgba(224, 234, 239, 0.426), rgba(130, 200, 238, 0.41)),
    url('../../../../Storage/Login/produccion.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;  
}

/* -------- Cabecera / logo (tu h1) -------- */
.login-content .logo {
  margin-bottom: 22px;
  text-align: center;
  font-size: 56px;
  font-weight: 900;
  color: #ffffff; /* relleno del texto */

  /* Contorno negro */
  -webkit-text-stroke: 2px #0962e8;

}

.login-content .logo h1{
  margin:0;
  font-size: 56px;                 /* un poco más grande */
  font-weight: 900;
  letter-spacing:.3px;
  text-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* =========================================================
   TARJETA PRINCIPAL (.login-box) – Dos paneles
   ========================================================= */
.login-content{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding: 24px;
}

.login-content .login-box{
  position: relative;
  min-width: 980px;
  min-height: 520px;
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.92)); /* glassmorphism */
  border:1px solid rgba(255,255,255,.6);
  border-radius: var(--outer-radius);
  box-shadow:
    0 24px 48px rgba(14,34,51,.14),
    0 2px 8px rgba(14,34,51,.06);
  backdrop-filter: blur(6px);
  overflow: hidden;
  -webkit-perspective: 800px;
  perspective: 800px;
  transition: box-shadow .25s ease, transform .25s ease;
  font-family: var(--ff);
  animation: pop-in .5s ease-out both;
}
/* Halo verde al pasar el mouse (sin tocar border) */
.login-content .login-box:hover{
  box-shadow:
    0 26px 54px rgba(14,34,51,.16),
    0 10px 24px rgba(0,0,0,.08),
    0 0 0 3px rgba(123,191,35,.35) inset; /* halo verde */
}
@keyframes pop-in{
  from{ transform: translateY(8px) scale(.995); opacity:0 }
  to{ transform: translateY(0) scale(1); opacity:1 }
}

/* ------- Panel izquierdo con imagen (SIN overlays) ------- */
.login-content .login-box::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: 48%;
  background: var(--login-bg) center / cover no-repeat;
  border-top-left-radius: var(--outer-radius);
  border-bottom-left-radius: var(--outer-radius);
  filter: none !important;
  box-shadow: inset -12px 0 24px rgba(0,0,0,.08); /* contraste sutil */
}
.login-content .login-box::after{ content:none !important }

/* =========================================================
   PANEL DERECHO (formularios) – Flip intacto + centrado
   ========================================================= */
.login-content .login-box .login-form,
.login-content .login-box .forget-form{
  position:absolute;
  top:0; right:0; bottom:0; left:48%;
  padding: 40px 44px 32px;
  background-color: rgb(255, 255, 255);
  display:flex; flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap:18px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: all .5s ease-in-out;
  font-family: var(--ff);
}

/* Flip */
.login-content .login-box .forget-form{
  opacity:0; transform: rotateY(180deg);
}
.login-content .login-box.flipped .login-form{
  opacity:0; transform: rotateY(-180deg);
}
.login-content .login-box.flipped .forget-form{
  opacity:1; transform: rotateY(0deg);
}

/* -------- Encabezado del formulario -------- */
.login-content .login-box .login-head{
  text-align: center;
  margin: 0 0 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 0;                        /* retiramos línea gris */
  color: #000000;
  font-weight: 900;
  font-size: 1.9rem;
  font-family: var(--ff);
  background: linear-gradient(90deg, var(--accent-from) 0%, var(--accent-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-content .login-box .login-head::after{
  content:"";
  display:block;
  height: 4px;
  width: 350px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  opacity:.9;
}

/* -------- Labels e inputs -------- */
.login-content .login-box label.control-label{
  font-weight: 700;
  font-size: 1.08rem;
  color: #0b1b2a;
  margin-bottom: 6px;
  display:block;
  text-align: center;
  font-family: var(--ff);
}
.login-content .login-box .form-group{ margin-bottom: 12px }

.login-content .login-box .form-control{
  height: 48px; line-height: 46px;
  border: 1px solid #3b87dc !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  color: var(--c-black) !important;
  font-size: .98rem;
  width:350px;
  max-width: 420px;
  margin: 0 auto;
  font-family: var(--ff);
  box-shadow:
    inset 0 2px 0 #0962e8,
    0 2px 0 #0962e8;
  transition: border .2s, box-shadow .2s, background .2s !important;
  text-align: center;
  background: rgb(240, 243, 247) !important; /* color base */
}
.login-content .login-box .form-control::placeholder{ color:#9AA8B6 }
.login-content .login-box .form-control:focus{
  background:#fff !important;
  border-color: var(--c-blue) !important;
  box-shadow:
    0 0 0 4px rgba(11,100,180,.18) 
    0 10px 24px rgba(2,49,90,.10);
  outline: none !important;
}

/* ---- ICONOS SIN CAMBIAR HTML -----------------------------
   Usamos "multiple backgrounds" + !important:
   [ capa 1: SVG ] , [ capa 2: color base ]
   Así ningún background previo los borra.               */
.login-content .login-box input.form-control[type="text"],
.login-content .login-box input.form-control[type="email"],
.login-content .login-box input.form-control[type="search"]{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") 16px center / 22px no-repeat,
    rgba(240,243,247,.9) !important;
  padding-left: 48px !important;
  text-align: left;
}
.login-content .login-box input.form-control[type="password"]{
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%238CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>") 16px center / 22px no-repeat,
    rgba(240,243,247,.9) !important;
  padding-left: 48px !important;
  text-align: left;
}

/* -------- Línea utility -------- */
.login-content .login-box .utility{
  width: 100%;
  max-width: 420px;
  margin: 4px auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color: #475569;
  font-size: 1.05rem;
  font-family: var(--ff);
}
.login-content .login-box .utility label{
  font-weight: 600; color: #111827;
}
.login-content a{ color: #0B64B4; text-decoration:none; font-weight:600; font-family: var(--ff); }
.login-content a:hover{ text-decoration: none; filter: brightness(1.05) }

/* -------- Botón principal -------- */
.login-content .login-box .btn{
  border-radius: 999px !important;
  height: 50px; line-height: 50px; padding: 0 20px;
  font-weight: 800; letter-spacing:.2px;
  width: 120%;
  font-size: 1.08rem;
  max-width: 500px;
  margin: 0 auto;
  font-family: var(--ff);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.login-content .login-box .btn:active{ transform: translateY(0) }
.login-content .login-box .btn.btn-primary{
  background: #0B64B4;
  border: 0 !important; color:#fff !important;
  box-shadow:
    0 8px 40px rgba(11,100,180,.28),
    0 8px 48px rgba(0,0,0,.08);
}
.login-content .login-box .btn.btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 24px 52px rgba(11,100,180,.32),
    0 10px 20px rgba(0,0,0,.10);
}

/* -------- Estados -------- */
.is-invalid .form-control{ border-color:#E24B4B !important }
.is-valid   .form-control{ border-color: var(--c-green) !important }

/* =========================================================
   RESPONSIVE – Imagen arriba, form abajo
   ========================================================= */
@media (max-width: 1100px){
  .login-content .login-box{ min-width: 92vw }
}
@media (max-width: 880px){
  .login-content .login-box::before{
    width:100%; height: 220px; inset: 0 auto auto 0;
    border-radius: var(--outer-radius) var(--outer-radius) 0 0;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,.06);
  }
  .login-content .login-box .login-form,
  .login-content .login-box .forget-form{
    left:0; right:0; top:220px; bottom:0;
    padding: 22px 18px 18px;
  }
  .login-content .login-box .form-control,
  .login-content .login-box .btn,
  .login-content .login-box .utility{
    width: 100%;
    max-width: 520px;
  }
  /* mantener iconos en móvil */
  .login-content .login-box input.form-control[type="text"],
  .login-content .login-box input.form-control[type="email"],
  .login-content .login-box input.form-control[type="search"],
  .login-content .login-box input.form-control[type="password"]{
    padding-left: 46px !important;
  }
}

/* =========================================================
   COMPATIBILIDAD
   ========================================================= */
.login-content .login-box .btn-container{ margin-bottom:0 }
.login-content .login-box label{ color: var(--text-dark) }
.login-content .login-box .login-head i{ margin-right:6px }

/* (Opcional) Variante botón amarillo
.login-content .login-box .btn.btn-primary{
  background: linear-gradient(90deg, var(--c-yellow), #FFE464) !important;
  color: #2B2B2B !important;
  box-shadow: 0 16px 36px rgba(255,212,0,.28), 0 6px 14px rgba(0,0,0,.10);
}
*/