:root{
  --indigo:#2037AA; --ink:#1B2559; --royal:#3C50B5; --paper:#F6F7FC;
  --t900:#1F2433; --t700:#3E4557; --t500:#667085; --line:#E3E6F0;
  --g1:#7ED321; --g2:#4A90E2; --g3:#841C99; --g4:#F5C518;
  --risk:#C9433F; --risk-s:#FCEAEA; --warn:#8A5A00; --warn-s:#FEF4DF;
  --f:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --grad:linear-gradient(135deg,#14369F 0%,#2B3AAE 55%,#4132A5 100%);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--f);color:var(--t900);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* Los clics repetidos que lanzan chispas no deben seleccionar texto ni arrastrar el logo; solo los campos se seleccionan. */
input{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none}
::selection{background:rgba(60,80,181,.18);color:inherit}

/* Fondo vivo: manchas de color de la marca que se desplazan despacio sobre una retícula de puntos */
.fondo{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background-image:radial-gradient(rgba(27,37,89,.08) 1px,transparent 1px);background-size:22px 22px}
.fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,247,252,0) 40%,rgba(246,247,252,.9))}
.b{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:flotar 18s ease-in-out infinite alternate}
.b1{width:46vw;height:46vw;left:-12vw;top:-14vw;background:#BAC5EE}
.b2{width:34vw;height:34vw;right:-8vw;top:10vh;background:#E6D6F3;animation-duration:22s}
.b3{width:30vw;height:30vw;left:30vw;bottom:-14vw;background:#DDF3C8;animation-duration:26s}
.b4{width:20vw;height:20vw;right:22vw;bottom:8vh;background:#FBEFC0;animation-duration:20s}
@keyframes flotar{to{transform:translate(4vw,3vh) scale(1.08)}}

.lienzo{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  width:min(100%,440px);margin:0 auto;padding:40px 16px}

/* Marca: logo y nombre del sistema sobre la tarjeta */
.marca{text-align:center}
.logo{width:190px;height:auto;display:block;margin:0 auto 14px}
.eyebrow{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--royal)}

/* Tarjeta de ingreso */
.tarjeta{width:100%;position:relative;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);border-radius:28px;
  padding:40px 36px 28px;box-shadow:0 30px 60px -30px rgba(27,37,89,.45),0 2px 0 rgba(255,255,255,.8) inset}
.tarjeta::before{content:"";position:absolute;left:28px;right:28px;top:0;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4))}
.tarjeta h2{margin:0;font-size:1.6rem;font-weight:700;color:var(--ink)}
.hola{margin:6px 0 24px;color:var(--t500);font-size:.9rem}
.campo{display:block;margin-bottom:16px}
.campo>span:first-child{display:block;margin-bottom:6px;font-size:.8rem;font-weight:600;color:var(--t700)}
input{width:100%;font:inherit;font-size:.95rem;color:var(--t900);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;
  outline:none;transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--royal);box-shadow:0 0 0 4px rgba(60,80,181,.14)}
.clave{position:relative;display:block}
.clave input{padding-right:48px}
#ver{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:none;cursor:pointer;color:var(--t500);display:grid;place-items:center}
#ver:hover,#ver[aria-pressed="true"]{color:var(--royal);background:#EEF1FB}
#ver svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.mayus{margin:-6px 0 12px;font-size:.78rem;color:var(--warn);background:var(--warn-s);border-radius:8px;padding:6px 10px}
.error{min-height:1.3em;margin:0 0 12px;font-size:.82rem;color:var(--risk)}
.error:not(:empty){background:var(--risk-s);border-radius:10px;padding:8px 12px}
.entrar{position:relative;width:100%;border:0;border-radius:14px;padding:14px;font:inherit;font-weight:600;font-size:1rem;color:#fff;cursor:pointer;
  background:var(--grad);overflow:hidden;box-shadow:0 14px 28px -14px rgba(32,55,170,.8);transition:transform .15s,box-shadow .15s}
.entrar:hover{transform:translateY(-1px);box-shadow:0 18px 32px -14px rgba(32,55,170,.9)}
.entrar:active{transform:translateY(1px)}
.entrar:focus-visible{outline:3px solid rgba(60,80,181,.35);outline-offset:3px}
.entrar i{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:brillo 3.2s ease-in-out infinite}
@keyframes brillo{60%,100%{transform:translateX(100%)}}
.entrar[disabled]{opacity:.75;cursor:progress}
.entrar[disabled] span::after{content:"…"}
.pie{margin:20px 0 0;text-align:center;font-size:.72rem;color:var(--t500)}
.tarjeta.sacude{animation:sacudir .42s}
@keyframes sacudir{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.tarjeta.listo{transform:scale(.98);opacity:0;transition:transform .45s ease,opacity .45s ease .15s}

/* Chispas del clic: lienzos sueltos que se crean y se quitan solos */
.chispas{position:fixed;inset:0;pointer-events:none;z-index:50}
.chispas canvas{position:absolute;display:block}

@media (max-width:480px){.tarjeta{padding:32px 22px 24px}}
@media (prefers-reduced-motion:reduce){
  .b,.entrar i{animation:none}
}