:root {
  /* The Grey Room */
  --grey-dark:#2e3340; --grey:#3D4452; --grey-soft:#6b7280; --yellow:#F5C400;
  /* PSC */
  --psc-red:#e10819; --psc-red-dk:#b00614;
  /* Superficie (claro) */
  --ink:#1a1f2b; --muted:#6b7280; --line:rgba(20,25,40,.10);
  --bg-1:#f4f6fa; --bg-2:#e9edf3;
}

* { box-sizing:border-box; margin:0; padding:0; }

html, body { height:100%; }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:24px;
  position:relative;
}

/* ---------- Fondo ---------- */
#bg { position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; }

.grid-overlay {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(20,25,40,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,25,40,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 75%);
}

.vignette {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 38%, rgba(225,8,25,.07), transparent 60%),
    radial-gradient(1100px 700px at 50% 120%, rgba(245,196,0,.06), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, transparent 60%, rgba(20,25,40,.10) 100%);
}

.scanline {
  position:fixed; left:0; right:0; height:140px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(245,196,0,.08), transparent);
  animation:scan 7.5s linear infinite;
}
@keyframes scan { 0%{transform:translateY(-160px)} 100%{transform:translateY(100vh)} }

/* ---------- Contenedor ---------- */
.login-wrap {
  position:relative; z-index:2;
  width:100%; max-width:392px;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}

.status-pill {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.03em; color:var(--grey);
  background:rgba(255,255,255,.85); border:1px solid var(--line);
  padding:7px 14px; border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(20,25,40,.06);
  animation:fadeDown .8s ease both;
}
.status-pill .dot {
  width:7px; height:7px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse {
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* ---------- Tarjeta ---------- */
.card {
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,253,255,.96));
  border:1px solid var(--line);
  border-radius:20px;
  padding:40px 34px 30px;
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  box-shadow:0 24px 60px rgba(20,25,40,.14), 0 2px 6px rgba(20,25,40,.06), inset 0 1px 0 rgba(255,255,255,.7);
  animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both;
}

.brand { text-align:center; margin-bottom:28px; }

.logo-halo {
  display:inline-grid; place-items:center;
  margin-bottom:18px;
  filter:drop-shadow(0 10px 24px rgba(225,8,25,.30));
  animation:floaty 5s ease-in-out infinite;
}
.psc-logo { display:block; border-radius:16px; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.app-title {
  font-size:22px; font-weight:750; letter-spacing:.2px; color:var(--grey-dark);
}
.app-sub { font-size:12.5px; color:var(--muted); margin-top:6px; }

/* ---------- Campos ---------- */
.field { margin-bottom:16px; }
.field label {
  display:block; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px;
}
.field input {
  width:100%; padding:13px 15px; font-size:15px; color:var(--ink);
  background:#fff;
  border:1.5px solid var(--line); border-radius:12px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field input::placeholder { color:#9aa3b2; }
.field input:focus {
  outline:none; border-color:var(--psc-red);
  box-shadow:0 0 0 4px rgba(225,8,25,.14);
  background:#fff;
}

.pwd { position:relative; }
.pwd input { padding-right:58px; }
.toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color:var(--muted);
  font-size:13px; font-weight:600; cursor:pointer; padding:6px 9px; border-radius:8px;
}
.toggle:hover { color:var(--grey-dark); background:rgba(20,25,40,.05); }

.error {
  display:flex; align-items:center; gap:8px;
  background:rgba(225,8,25,.08); color:#b00614;
  border:1px solid rgba(225,8,25,.30); border-radius:10px;
  padding:10px 13px; font-size:13px; margin-bottom:14px;
  animation:shake .4s;
}
.error[hidden] { display:none; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)}
}

/* ---------- Botón ---------- */
.btn {
  position:relative; width:100%; padding:14px; margin-top:4px;
  font-size:15px; font-weight:750; color:#fff; letter-spacing:.3px;
  background:linear-gradient(180deg, var(--psc-red), var(--psc-red-dk));
  border:none; border-radius:12px; cursor:pointer; overflow:hidden;
  box-shadow:0 10px 26px rgba(225,8,25,.35);
  transition:transform .06s, box-shadow .2s, filter .2s;
}
.btn:hover  { filter:brightness(1.06); box-shadow:0 14px 34px rgba(225,8,25,.45); }
.btn:active { transform:translateY(1px); }
.btn.loading .btn-label { opacity:0; }
.btn.loading .btn-spinner { opacity:1; }
.btn-spinner {
  position:absolute; inset:0; margin:auto; width:18px; height:18px; opacity:0;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ---------- powered by ---------- */
.powered { display:flex; align-items:center; gap:12px; animation:fadeUp 1.1s ease both; margin-top:6px; }
.powered span { color:var(--grey); font-size:12.5px; letter-spacing:.02em; }
.powered .tgr-badge {
  display:inline-flex; align-items:center;
  background:var(--grey-dark);
  padding:8px 14px; border-radius:8px;
  box-shadow:0 6px 16px rgba(46,51,64,.22);
}
.powered .tgr-badge img { height:22px; width:auto; display:block; }

/* ---------- Animaciones de entrada ---------- */
@keyframes fadeUp   { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeDown { from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:translateY(0)} }

@media (prefers-reduced-motion: reduce) {
  .logo-halo, .scanline, .status-pill .dot { animation:none; }
}
@media (max-width:420px) { .card { padding:32px 24px 26px; } }