:root{
  --text:#EAF4FF;
  --muted:#9fc2e6;
  --ink:#07121f;
  --neon:#3aa8ff;
  --neon-strong:#69d0ff;
  --grad1:#66CCFF; --grad2:#33A0FF; --grad3:#27C2FF; --grad4:#3B82F6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 20%, #0b395c 0%, transparent 70%),
    radial-gradient(1000px 700px at 80% 30%, #009dff33 0%, transparent 70%),
    linear-gradient(180deg, #0b1f33 0%, #081523 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* Contenedor */
.login-container{ width:100%; max-width:420px; padding:22px }

/* Tarjeta con borde neón */
.card{
  position:relative; isolation:isolate;
  border-radius:20px;
  background:linear-gradient(180deg,#0f223a,#0b1b2f);
  border:1px solid rgba(102,204,255,.12);
  padding:28px;
  box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.card::before{
  content:""; position:absolute; inset:-2px; border-radius:22px; z-index:-1;
  background: radial-gradient(110% 140% at 50% -10%, var(--neon-strong) 0%, transparent 55%);
  filter: blur(12px); opacity:.35;
}
.neon-border{
  position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow: 0 0 0 2px var(--neon);
  animation: pulse 2.8s ease-in-out infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 2px rgba(58,168,255,.35), 0 0 24px 2px rgba(58,168,255,.15) }
  35%  { box-shadow:0 0 0 2px rgba(105,208,255,.55), 0 0 34px 6px rgba(105,208,255,.28) }
  60%  { box-shadow:0 0 0 2px rgba(105,208,255,.85), 0 0 46px 10px rgba(105,208,255,.40) }
  100% { box-shadow:0 0 0 2px rgba(58,168,255,.35), 0 0 24px 2px rgba(58,168,255,.15) }
}

/* Marca */
.brand{ text-align:center; margin-bottom:6px }
.logo, .crm-text{
  font-weight:900;
  background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4), var(--grad1));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip:text; color:transparent;
  animation: gradientShift 6s linear infinite;
  text-shadow: 0 0 18px rgba(51,153,255,.2);
}
.logo{ font-size:30px; letter-spacing:1px; display:block }
.crm-text{ font-size:12px; font-weight:800; display:block; margin-top:2px }
@keyframes gradientShift{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }

.title{ text-align:center; font-weight:700; color:#cfe6ff; margin:12px 0 18px }

/* Form */
form{ display:flex; flex-direction:column }

/* campo con icono a la izquierda */
.field{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:linear-gradient(180deg,#103154,#0d2946);
  border:1px solid #7cc7ff33;
  border-radius:14px;
  padding:0 14px;
  margin-bottom:16px;
  height:46px;
  box-sizing:border-box;
}
.field input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;   /* ✅ siempre oscuro */
  color:var(--text);        /* ✅ texto claro */
  font-size:15px;
  caret-color:var(--neon);  /* ✅ cursor azul CliCon */
}
.field input::placeholder{ color:#a7c8e9 }

/* ícono izquierda */
.field .icon{ width:18px; height:18px; color:#9fd3ff; opacity:.95 }

/* password + ojo */
.password-wrapper{ width:100% }
.toggle-password{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:#9fd3ff;
  cursor:pointer;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
}
.toggle-password .icon-off{ display:none }
.toggle-password.show .icon-open{ display:none }
.toggle-password.show .icon-off{ display:block }

/* Foco neón en campos */
.field:focus-within{
  box-shadow:0 0 0 3px rgba(102,204,255,.20);
  border-color: var(--neon);
}

/* Botón */
.btn{
  width:100%; padding:12px 14px; border:0; border-radius:14px;
  background: linear-gradient(180deg,#bfe3ff,#7fc3ff);
  color:#001222; font-weight:800; cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,140,255,.35), inset 0 0 0 1px #ffffff66;
  transition: transform .06s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform:translateY(1px) }

.help{ margin-top:12px; text-align:center; font-size:12px; color:var(--muted) }

/* Responsive */
@media (max-width:420px){
  .card{ padding:22px }
  .logo{ font-size:26px }
}

/* === Fix para fondo blanco de autocompletado === */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  background-clip: padding-box;
  transition: background-color 99999s ease-in-out 0s;
}

input:-moz-autofill {
  box-shadow: 0 0 0px 1000px transparent inset !important;
  -moz-text-fill-color: var(--text);
}