/* ============================================================
   SISPER · Login · Tema profesional
   ============================================================ */
:root{
  --bg-1:#0b1730;
  --bg-2:#13294b;
  --bg-3:#1d3a6e;
  --card:#ffffff;
  --accent:#1a9cda;
  --accent-2:#0d6efd;
  --accent-soft:rgba(26,156,218,.14);
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --border-strong:#cbd5e1;
  --danger:#dc2626;
  --warn:#b45309;
  --warn-bg:#fff7ed;
  --ring:0 0 0 4px rgba(26,156,218,.18);
  --shadow-card:0 24px 60px rgba(7,18,42,.32), 0 6px 16px rgba(7,18,42,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(26,156,218,.35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(13,110,253,.30), transparent 55%),
    linear-gradient(135deg,var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 75%);
          mask-image:radial-gradient(ellipse at center, #000 35%, transparent 75%);
}

.login-root{
  width:100%;min-height:100vh;padding:24px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.login-panel{display:flex;align-items:center;justify-content:center;width:100%}

/* ---------- Card ---------- */
.login-card{
  width:100%;max-width:440px;
  background:var(--card);
  border-radius:18px;
  padding:36px 34px 26px;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(255,255,255,.08);
  position:relative;overflow:hidden;
  animation:cardIn .45s ease-out both;
}
.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Brand ---------- */
.login-brand{display:flex;justify-content:center;margin:6px 0 18px}
.brand-icon{
  width:68px;height:68px;border-radius:18px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;font-size:28px;
  box-shadow:0 10px 22px rgba(26,156,218,.42), inset 0 1px 0 rgba(255,255,255,.25);
  position:relative;
}
.brand-icon::after{
  content:"";position:absolute;inset:-6px;border-radius:22px;
  border:1px solid rgba(26,156,218,.25);opacity:.6;pointer-events:none;
}

h1{
  font-size:1.55rem;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;
  text-align:center;color:var(--text);
}
.login-subtitle{
  margin:0 0 26px;font-size:.875rem;color:var(--muted);text-align:center;
}

/* ---------- Form ---------- */
.login-form{display:block;text-align:left}
.login-form label{
  display:block;font-size:.74rem;font-weight:600;
  color:#374151;margin:0 0 6px;letter-spacing:.04em;
  text-transform:uppercase;
}

.input-wrap{position:relative;margin-bottom:14px}
.input-ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#94a3b8;font-size:.95rem;pointer-events:none;transition:color .15s;
  z-index:1;
}
.input-wrap:focus-within .input-ico{color:var(--accent)}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form select{
  width:100%;
  padding:12px 14px 12px 40px;
  border:1px solid var(--border);
  border-radius:10px;
  font-size:.95rem;
  font-family:inherit;
  color:var(--text);
  background:#fff;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.login-form input[type="text"]{text-transform:uppercase;letter-spacing:.04em}
.login-form input::placeholder{color:#9ca3af}

.login-form input:hover,
.login-form select:hover:not(:disabled){border-color:var(--border-strong)}

.login-form input:focus,
.login-form select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--ring);
}

/* Show/hide password */
.input-action{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:none;border-radius:8px;
  background:transparent;color:#94a3b8;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;
}
.input-action:hover{background:var(--accent-soft);color:var(--accent)}
.input-action:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- Select (Organización) ---------- */
.select-wrap::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;transition:border-color .15s;
}
.select-wrap:focus-within::after{border-color:var(--accent)}
.login-form select{
  padding-right:38px;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;
}
.login-form select:disabled{
  background:#f3f4f6;color:#9ca3af;cursor:not-allowed;border-color:var(--border);
}
.select-wrap:has(select:disabled)::after{border-color:#cbd5e1}

.org-help{
  display:block;font-size:.76rem;color:var(--muted);
  margin:-6px 0 12px;min-height:1em;line-height:1.4;
}
.org-help.is-super{
  color:var(--accent);font-weight:600;
  background:var(--accent-soft);padding:6px 10px;border-radius:6px;
  border-left:3px solid var(--accent);
}

/* ---------- Caps lock ---------- */
.caps-row{min-height:24px;margin:-4px 0 8px;text-align:left}
.caps-warning{
  color:var(--warn);background:var(--warn-bg);
  padding:5px 10px;border-radius:6px;font-size:.78rem;
  border:1px solid #fed7aa;
  display:none;align-items:center;gap:6px;
}
.caps-warning.is-on{display:inline-flex}

/* ---------- Submit ---------- */
.btn{
  width:100%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;
  padding:13px 16px;
  border:none;
  border-radius:10px;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  margin-top:8px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 18px rgba(26,156,218,.35);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(26,156,218,.45)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring), 0 6px 18px rgba(26,156,218,.35)}
.btn i{font-size:.9rem;transition:transform .15s ease}
.btn:hover i{transform:translateX(2px)}

.msg{
  margin:12px 0 0;font-size:.88rem;color:var(--danger);
  text-align:center;min-height:1.2em;
}

/* ---------- Footer ---------- */
.login-foot{
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);
  text-align:center;
  font-size:.72rem;color:#94a3b8;letter-spacing:.02em;
}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .login-card{padding:28px 22px 22px;border-radius:14px}
  h1{font-size:1.35rem}
  .brand-icon{width:58px;height:58px;font-size:24px}
}

@media (prefers-reduced-motion: reduce){
  .login-card{animation:none}
  .btn, .btn i{transition:none}
}