/* ==========================================================
   Quantral — Acceso (login / registro / reset / tickets)
   Identidad neutral: slate profundo, acento índigo, tipografía limpia.
   ========================================================== */

/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Design Tokens ── */
:root{
  /* Backgrounds */
  --bg:#0B0D14;
  --bg2:#11141F;
  --bgc:#151A27;
  --inkwell:#0F1320;

  /* Accent */
  --ac:#6366F1;
  --ac2:#4F46E5;
  --gl:rgba(99,102,241,.28);
  --ac-ghost:rgba(99,102,241,.08);
  --ac-subtle:rgba(99,102,241,.12);
  --ac-muted:rgba(99,102,241,.16);

  /* Text */
  --t:#E7EAF3;
  --t2:#9AA1B5;
  --t3:#677085;

  /* Borders */
  --bd:rgba(255,255,255,.09);
  --bdh:rgba(99,102,241,.55);
  --bdf:rgba(255,255,255,.08);

  /* Semantic */
  --ok:#22C55E;
  --er:#EF4444;
  --wn:#F59E0B;

  /* Spacing (8px grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:28px;--sp-8:32px;--sp-10:40px;--sp-12:48px;

  /* Radius */
  --r:14px;
  --rs:9px;

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --duration:180ms;

  /* Typography */
  --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --mono:'Space Mono','Consolas',ui-monospace,monospace;
}

/* ── Base ── */
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  min-height:100vh;
  background:
    radial-gradient(1100px 560px at 50% -170px,rgba(99,102,241,.09),transparent 60%),
    linear-gradient(180deg,#0C0F1A 0%,var(--bg) 100%);
  color:var(--t);
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.25rem;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ac);text-decoration:none}
a:hover{opacity:.85}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

/* Banda de avisos (ocupa todo el ancho arriba; la tarjeta sigue centrada) */
body:has(#siteNoticeBar){flex-direction:column;justify-content:flex-start}
#siteNoticeBar{width:100%}
.login-wrapper{margin-top:auto;margin-bottom:auto}

/* ==========================================================
   TARJETA
   ========================================================== */
.login-wrapper{width:100%;max-width:400px}
.login-card{
  position:relative;
  background:linear-gradient(180deg,var(--bgc) 0%,var(--bg2) 100%);
  border:1px solid var(--bd);
  border-radius:var(--r);
  padding:var(--sp-7) var(--sp-6) var(--sp-6);
  box-shadow:0 18px 50px rgba(3,7,18,.55),inset 0 1px 0 rgba(255,255,255,.04);
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.55),transparent);
  border-radius:var(--r) var(--r) 0 0;
}

.login-header{text-align:center;margin-bottom:var(--sp-6)}
.brand-mark{
  width:46px;height:46px;margin:0 auto var(--sp-3);
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;font-weight:800;font-size:22px;line-height:1;letter-spacing:0;color:#fff;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2) 100%);
  box-shadow:0 8px 24px var(--gl),inset 0 1px 0 rgba(255,255,255,.22);
}
.login-logo{width:56px;height:56px;border-radius:12px;object-fit:contain;display:block;margin:0 auto var(--sp-3)}
.login-header h1{
  font-size:1.3rem;font-weight:700;letter-spacing:.02em;color:var(--t);
  line-height:1.15;margin-bottom:4px;text-transform:none;
}
.login-header .subtitle{
  display:block;font-size:.78rem;font-weight:400;letter-spacing:.01em;color:var(--t3);
}

/* ── Tabs (celdas segmentadas) ── */
.tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  padding:3px;background:var(--inkwell);border:1px solid var(--bdf);border-radius:var(--rs);
  margin-bottom:var(--sp-5);
}
.tab-btn{
  padding:9px 12px;border-radius:6px;border:1px solid transparent;
  background:transparent;color:var(--t3);
  font-size:.82rem;font-weight:600;letter-spacing:.01em;
  transition:all var(--duration) var(--ease);
}
.tab-btn:hover{color:var(--t2)}
.tab-btn.active{
  background:var(--ac);color:#fff;border-color:var(--ac);
  box-shadow:0 4px 14px var(--gl);
}
.tab-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── Messages ── */
.msg{
  display:none;align-items:flex-start;gap:10px;
  padding:11px 13px;border-radius:var(--rs);margin-bottom:var(--sp-4);
  font-size:.84rem;line-height:1.5;border:1px solid;animation:msgIn .3s ease;
}
.msg i{margin-top:1px;flex-shrink:0}
.msg.visible{display:flex}
.msg.error{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.28);color:#FCA5A5}
.msg.success{background:rgba(34,197,94,.09);border-color:rgba(34,197,94,.28);color:#86EFAC}
@keyframes msgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── Contexto de red seleccionada (desde /servers) ── */
.login-context{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-bottom:var(--sp-4);padding:9px 12px;
  background:var(--ac-ghost);border:1px solid var(--bdf);border-radius:var(--rs);
  font-size:.8rem;font-weight:500;color:var(--t2);
}
.login-context i{color:var(--ac);font-size:.85rem}

/* ── Panels ── */
.tab-content{display:none}
.tab-content.active{display:block;animation:tabIn .3s var(--ease)}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Form groups ── */
.form-group{margin-bottom:var(--sp-4)}
.form-group label{
  display:block;margin-bottom:6px;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--t2);
}
.form-group label .req{color:var(--er);margin-left:2px}
.form-hint{margin-top:5px;font-size:.72rem;line-height:1.5;color:var(--t3)}

.input-wrap{position:relative}
.input-wrap .ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:.78rem;color:var(--t3);pointer-events:none;z-index:1;
  transition:color var(--duration) var(--ease);
}
.input-wrap input{
  width:100%;padding:11px 12px 11px 34px;
  background:var(--inkwell);border:1px solid var(--bdf);border-radius:var(--rs);
  color:var(--t);font-size:.9rem;outline:none;
  transition:border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease),background var(--duration) var(--ease);
}
.input-wrap input:hover{border-color:var(--bd)}
.input-wrap input:focus{
  border-color:var(--ac);background:var(--inkwell);
  box-shadow:0 0 0 3px var(--ac-ghost);
}
.input-wrap input:focus~.ico,.input-wrap input:focus-visible~.ico{color:var(--ac)}
.input-wrap input::placeholder{color:var(--t3)}
.input-wrap input:read-only{opacity:.7;cursor:not-allowed}

/* Selects / textareas dentro de input-wrap */
.input-wrap select,.input-wrap textarea{padding-left:34px;font-size:.9rem}
.input-wrap select{
  -webkit-appearance:none;appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23677085' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}

/* ── Password toggle ── */
.pass-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--t3);cursor:pointer;
  font-size:.82rem;padding:6px;border-radius:6px;
  transition:color var(--duration) var(--ease);
}
.pass-toggle:hover{color:var(--ac)}
.pass-toggle:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── Layout helpers ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}

.divider{
  display:flex;align-items:center;gap:var(--sp-3);
  margin:var(--sp-4) 0;color:var(--t3);font-size:.74rem;font-weight:600;
  letter-spacing:.01em;text-transform:none;
}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--bd)}

.forgot-link{
  display:block;text-align:center;
  margin-top:var(--sp-3);font-size:.8rem;color:var(--t3);
  transition:color var(--duration) var(--ease);
}
.forgot-link:hover{color:var(--ac);opacity:1}

/* ── Submit ── */
.submit-btn{
  position:relative;overflow:hidden;
  width:100%;padding:12px 18px;margin-top:var(--sp-2);
  background:var(--ac);color:#fff;
  border:1px solid var(--ac);border-radius:var(--rs);
  font-weight:600;font-size:.92rem;letter-spacing:.01em;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  box-shadow:0 4px 16px var(--gl);
}
.submit-btn:hover:not(:disabled){background:var(--ac2);transform:translateY(-1px);box-shadow:0 8px 24px var(--gl)}
.submit-btn:active:not(:disabled){transform:translateY(0)}
.submit-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.submit-btn:disabled{opacity:.55;cursor:not-allowed}
.submit-btn .txt{display:inline-block;transition:opacity var(--duration) var(--ease)}
.submit-btn .spinner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:spin .6s linear infinite;
  opacity:0;transition:opacity var(--duration) var(--ease);
}
.submit-btn.loading .txt{opacity:0}
.submit-btn.loading .spinner{opacity:1}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── OAuth / SSO ── */
.login-divider{display:flex;align-items:center;gap:12px;margin:var(--sp-4) 0 0;color:var(--t3);font-size:.74rem}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--bd)}
.login-oauth-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--sp-3)}
.discord-btn,.kalium-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:var(--rs);
  font-size:.8rem;font-weight:600;letter-spacing:.01em;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--duration) var(--ease),box-shadow var(--duration) var(--ease),border-color var(--duration) var(--ease);
}
.discord-btn{background:#5865F2;color:#fff;border-color:#5865F2}
.discord-btn:hover{background:#4752C4;box-shadow:0 6px 18px rgba(88,101,242,.35);opacity:1}
.kalium-btn{background:var(--inkwell);color:var(--t);border-color:var(--bdf)}
.kalium-btn:hover{border-color:var(--ac);color:#fff;box-shadow:0 6px 18px var(--gl);opacity:1}
.kalium-btn-logo{width:18px;height:18px;object-fit:contain;border-radius:4px}
.kalium-btn.pulse{animation:kaliumPulse 1.2s ease-in-out 2}
@keyframes kaliumPulse{0%,100%{box-shadow:0 0 0 0 var(--gl)}50%{box-shadow:0 0 0 6px var(--ac-ghost)}}

/* ── Password strength (segmentos) ── */
.pw-strength{display:flex;gap:4px;margin-top:var(--sp-3)}
.pw-strength span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.08);transition:background .3s var(--ease)}
.pw-strength.weak span:nth-child(1){background:var(--er)}
.pw-strength.medium span:nth-child(1),
.pw-strength.medium span:nth-child(2){background:var(--wn)}
.pw-strength.strong span:nth-child(1),
.pw-strength.strong span:nth-child(2),
.pw-strength.strong span:nth-child(3){background:var(--ok)}
.pw-strength.very-strong span{background:var(--ok)}

/* ── Requisitos de contraseña ── */
.fc-req{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:6px}
.req-item{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--t3);transition:color .2s}
.req-item i{font-size:.72rem;width:14px;color:var(--t3);transition:color .2s}
.req-item.met{color:var(--ok)}
.req-item.met i{color:var(--ok)}

/* ── Overlay de cambio forzado ── */
.force-change-overlay{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  background:rgba(6,8,14,.82);backdrop-filter:blur(8px);
  padding:var(--sp-4);
}
.force-change-overlay.visible{display:flex;animation:ovIn .25s var(--ease)}
@keyframes ovIn{from{opacity:0}to{opacity:1}}

.force-change-card{
  position:relative;
  width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:linear-gradient(180deg,var(--bgc) 0%,var(--bg2) 100%);
  border:1px solid var(--bd);border-radius:var(--r);
  padding:var(--sp-6);
  box-shadow:0 20px 50px rgba(3,7,18,.6),inset 0 1px 0 rgba(255,255,255,.04);
}
.force-change-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,102,241,.55),transparent);
  border-radius:var(--r) var(--r) 0 0;
}
.force-change-card .fc-icon{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--sp-4);font-size:20px;
  background:var(--ac-subtle);color:var(--ac);
  border:1px solid var(--bdf);
}
.force-change-card h2{
  text-align:center;font-size:1.05rem;font-weight:700;
  letter-spacing:.01em;color:var(--t);
  margin-bottom:var(--sp-2);
}
.force-change-card .fc-sub{
  text-align:center;color:var(--t3);font-size:.82rem;line-height:1.55;
  margin-bottom:var(--sp-5);
}
.force-change-card .msg{margin-top:var(--sp-3)}

/* ── Registro deshabilitado (fallback Discord) ── */
.register-fallback{padding:var(--sp-2) 0}
.fallback-title{
  font-size:.82rem;font-weight:700;color:var(--t2);
  margin-bottom:var(--sp-4);
}
.fallback-steps{
  margin:0 0 var(--sp-4);padding:0 0 0 1.1rem;
  display:flex;flex-direction:column;gap:var(--sp-3);
  color:var(--t2);font-size:.86rem;line-height:1.5;
}
.fallback-steps li{margin:0;color:var(--t2)}
.fallback-steps li a{color:var(--ac);font-weight:600}
.fallback-note{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 13px;border:1px solid var(--bd);border-radius:var(--rs);
  background:var(--ac-ghost);color:var(--t2);
  font-size:.8rem;line-height:1.5;margin-bottom:var(--sp-5);
}
.fallback-note i{color:var(--ac);margin-top:2px;flex-shrink:0}
.discord-link-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:12px 18px;
  background:#5865F2;color:#fff;border:1px solid #5865F2;border-radius:var(--rs);
  font-weight:600;font-size:.86rem;
  transition:background var(--duration) var(--ease),box-shadow var(--duration) var(--ease),transform .2s var(--ease);
  box-shadow:0 4px 14px rgba(88,101,242,.3);
}
.discord-link-btn i{font-size:.95rem}
.discord-link-btn:hover{background:#4752C4;box-shadow:0 8px 22px rgba(88,101,242,.4);opacity:1}
.discord-link-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ── Legal Footer ── */
.legal-footer{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:var(--sp-5);padding:var(--sp-3) 0;
  font-size:.72rem;color:var(--t3);
}
.legal-footer a{color:var(--t3);transition:color var(--duration) var(--ease);text-decoration:none}
.legal-footer a:hover{color:var(--ac)}
.legal-sep{opacity:.35}

/* ── Safe areas (notch / home indicator) ── */
@supports(padding:max(0px)){
  body{
    padding-top:max(2rem,env(safe-area-inset-top));
    padding-bottom:max(2rem,env(safe-area-inset-bottom));
  }
}

/* ── Responsive ── */
@media(max-width:480px){
  .login-wrapper{max-width:100%}
  .login-card{padding:var(--sp-5) var(--sp-5) var(--sp-5)}
  .submit-btn{min-height:44px;font-size:1rem}
  .tab-btn{min-height:40px}
}

/* Anti-zoom iOS (hasta 768px) */
@media(max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea,.input-wrap input,.input-wrap select,.input-wrap textarea{
    font-size:16px!important;
  }
  .form-row{grid-template-columns:1fr}
}

/* Legibilidad mínima en pantallas pequeñas */
@media(max-width:400px){
  .form-group label{font-size:.76rem}
  .form-hint,.forgot-link{font-size:.74rem}
}

/* ── Touch (no sticky hover) ── */
@media(hover:none),(pointer:coarse){
  .submit-btn:hover:not(:disabled){transform:none;box-shadow:0 4px 16px var(--gl)}
  .discord-btn:hover,.kalium-btn:hover,.discord-link-btn:hover{box-shadow:none}
  .submit-btn,.tab-btn,.pass-toggle,.discord-btn,.kalium-btn,.discord-link-btn{min-height:44px}
  .input-wrap input,.input-wrap select,.input-wrap textarea{min-height:44px}
  .submit-btn:active:not(:disabled){transform:scale(.98)}
  .tab-btn:active{transform:scale(.97)}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}