/* ================================================================
   KPI LOGÍSTICA — XDR PLATFORM · login.css
   Dark Enterprise · SOC/XDR Login
   ================================================================ */
 
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Syne:wght@400;500;600;700;800&display=swap');
 
:root {
  --bg:      #050911;
  --surface: #0A0F1C;
  --surface2: #0F1626;
  --border:  rgba(56,189,248,0.12);
  --border2: rgba(56,189,248,0.24);
  --cyan:    #38BDF8;
  --cyan-dim: rgba(56,189,248,0.10);
  --text:    #E2E8F0;
  --text-sub:#8899B4;
  --muted:   #3D4F6E;
  --red:     #F87171;
  --green:   #34D399;
  --font-ui: 'Syne', 'Segoe UI Variable', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
 
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
 
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  font-family: var(--font-ui);
  color: var(--text);
 
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 0% 0%,   rgba(56,189,248,0.07), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 100%, rgba(99,102,241,0.06), transparent 60%),
    radial-gradient(ellipse 500px 400px at 50% 50%,  rgba(56,189,248,0.03), transparent 70%);
}
 
/* Grilla CRT de fondo */
body::before {
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(56,189,248,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none;
  z-index:0;
}
 
/* Scan line */
body::after {
  content:"";
  position:fixed; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.5), transparent);
  animation: scan 8s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes scan {
  0%   { transform:translateY(-2px); opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  100% { transform:translateY(100vh); opacity:0; }
}
 
/* ================================================================
   CONTENEDOR
   ================================================================ */
.login-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
 
  background: rgba(10,15,28,0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
 
  border: 1px solid var(--border2);
  border-radius: 18px;
 
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.06),
    0 32px 80px rgba(0,0,0,0.8),
    0 8px 30px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(56,189,248,0.08);
}
 
/* Línea top cyan */
.login-container::before {
  content:"";
  position:absolute;
  top:0; left:15%; right:15%; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  border-radius: 1px;
  opacity: 0.7;
}
 
/* ================================================================
   BRAND
   ================================================================ */
.company-brand {
  text-align: center;
  margin-bottom: 2rem;
}
 
.logo-heading { margin-bottom: 0.75rem; line-height:1; }
 
.company-logo {
  max-width: 160px;
  height: auto;
  object-fit: contain;
  display: inline-block;
  filter: brightness(1.2) drop-shadow(0 0 16px rgba(56,189,248,0.35));
}
 
.company-brand p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.5rem;
}
 
/* Etiqueta de sistema */
.company-brand::after {
  content: "SECURE ACCESS TERMINAL";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 3px;
  color: rgba(56,189,248,0.45);
  margin-top: 0.75rem;
  text-transform: uppercase;
}
 
/* ================================================================
   FORM INPUTS
   ================================================================ */
.input-group {
  position: relative;
  margin-bottom: 1.25rem;
}
 
.form-input {
  width: 100%;
  padding: 0.85rem 0.85rem 0.85rem 2.6rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.3px;
  color: var(--text);
 
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(56,189,248,0.15);
  border-radius: 9px;
  outline: none;
 
  transition: border-color .2s, background .2s, box-shadow .2s;
}
 
.form-input::placeholder {
  color: var(--muted);
  font-style: normal;
}
 
.form-input:focus {
  background: rgba(56,189,248,0.04);
  border-color: rgba(56,189,248,0.45);
  box-shadow:
    0 0 0 3px rgba(56,189,248,0.08),
    inset 0 0 0 1px rgba(56,189,248,0.12);
}
 
.input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem;
  fill: var(--muted);
  transition: fill .2s;
  pointer-events: none;
}
 
.form-input:focus ~ .input-icon { fill: var(--cyan); }
 
/* ================================================================
   BOTÓN
   ================================================================ */
.login-button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem;
 
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #050911;
 
  background: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 60%, #0284C7 100%);
  border: none;
  border-radius: 9px;
  cursor: pointer;
 
  position: relative;
  overflow: hidden;
 
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.3),
    0 8px 24px rgba(56,189,248,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2);
 
  transition: transform .15s, box-shadow .15s, filter .15s;
}
 
.login-button::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
  pointer-events:none;
}
 
.login-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(56,189,248,0.4),
    0 12px 32px rgba(56,189,248,0.40),
    inset 0 1px 0 rgba(255,255,255,0.25);
  filter: brightness(1.08);
}
 
.login-button:active {
  transform: translateY(0);
  filter: brightness(0.95);
}
 
.login-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
 
/* ================================================================
   ERROR
   ================================================================ */
.error-message {
  background: rgba(248,113,113,0.08);
  color: var(--red);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(248,113,113,0.22);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.2px;
}
 
/* ================================================================
   LINKS
   ================================================================ */
.additional-links {
  margin-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
 
.link {
  color: rgba(56,189,248,0.55);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color .15s;
}
.link:hover { color: var(--cyan); }
 
/* ================================================================
   SECURITY BADGE
   ================================================================ */
.security-info {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(56,189,248,0.08);
  text-align: center;
}
 
.security-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: rgba(52,211,153,0.7);
}
 
.shield-icon {
  width: 1rem; height: 1rem;
  fill: currentColor;
}
 
/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:480px) {
  .login-container { padding:1.75rem 1.5rem; border-radius:14px; }
  .additional-links { flex-direction:column; gap:0.6rem; text-align:center; }
}