/**
 * XBC-CORE LOGIN v3.4 — Escala Major Third
 * CERO border-radius · CERO crypto/SaaS
 */

@import url('xbc-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-background);
  overflow-x: hidden;
  position: relative;
  transition: background var(--duration-circadian) var(--ease-circadian),
              color var(--duration-circadian) var(--ease-circadian);
}

/* ═══ LUZ CIRCADIANA ═══ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: all var(--duration-circadian) var(--ease-circadian);
}

body.dawn::before {
  background: linear-gradient(90deg, rgba(255,200,150,0) 0%, rgba(255,180,120,0.35) 40%, rgba(255,160,100,0.40) 50%, rgba(255,180,120,0.35) 60%, rgba(255,200,150,0) 100%);
  opacity: 1;
}
body.morning::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(135,206,250,0.40) 0%, rgba(255,248,220,0.30) 40%, rgba(240,245,255,0.20) 70%, transparent 100%);
  opacity: 1;
}
body.afternoon::before {
  background: linear-gradient(120deg, rgba(255,220,150,0.35) 0%, rgba(255,240,200,0.25) 50%, rgba(240,235,255,0.15) 80%, transparent 100%);
  opacity: 1;
}
body.night {
  background: #0A0A0F;
  color: #E5E5E5;
}
body.night::before {
  background: radial-gradient(ellipse at 50% 100%, rgba(0,255,163,0.08) 0%, rgba(0,220,150,0.04) 30%, rgba(0,180,140,0.02) 50%, transparent 70%);
  opacity: 1;
}

/* Grid arquitectónico */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}
body.night::after {
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(0,255,163,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,163,0.08) 1px, transparent 1px);
}

/* ═══ LAYOUT ═══ */
.login {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
}

/* ═══ HERO ═══ */
.login__hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px;
  min-height: 100vh;
}
.login__hero-content {
  margin-top: auto;
  margin-bottom: auto;
}

.login__welcome {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.80rem;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: lowercase;
  color: var(--color-accent);
  margin-bottom: 24px;
  opacity: 0;
  animation: revealLeft 0.8s var(--ease-spring) 0.2s forwards;
}
body.night .login__welcome { color: var(--proton-green); }

.login__brand {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 3.815rem;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  opacity: 0;
  animation: revealLeft 1.2s var(--ease-spring) 0.4s forwards;
  transition: color var(--duration-circadian) var(--ease-circadian);
}
body.night .login__brand { color: #FFFFFF; }

.login__reg {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--color-accent);
  vertical-align: super;
}

.login__claim {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  margin-top: 32px;
  opacity: 0;
  animation: revealLeft 0.8s var(--ease-spring) 0.9s forwards;
}
body.night .login__claim { color: rgba(255, 255, 255, 0.4); }

.login__dot {
  color: var(--color-accent);
  font-weight: 700;
}

.login__hero-footer {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-enter) 1.4s forwards;
}
.login__since {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
body.night .login__since { color: rgba(255, 255, 255, 0.25); }

/* ═══ FORM ═══ */
.login__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.login__card {
  width: 100%;
  max-width: 380px;
  padding: 48px 40px;
  background: var(--glass-mid-bg);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1px solid var(--glass-border);
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-enter) 0.6s forwards;
  transition: background var(--duration-circadian) var(--ease-circadian),
              border-color var(--duration-circadian) var(--ease-circadian);
}
body.night .login__card {
  background: rgba(20, 20, 28, 0.60);
  border-color: rgba(0, 255, 163, 0.15);
}

.login__card-header { margin-bottom: 40px; }

.login__system {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 8px;
}

.login__title {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 2.441rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  transition: color var(--duration-circadian) var(--ease-circadian);
}
body.night .login__title { color: #FFFFFF; }

.login__field { margin-bottom: 24px; }

.login__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  display: block;
  margin-bottom: 8px;
}
body.night .login__label { color: rgba(0, 255, 163, 0.70); }

.login__input {
  width: 100%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(26, 15, 31, 0.08);
  padding: 12px 0;
  outline: none;
  transition: border-color 0.2s ease;
}
body.night .login__input {
  color: #E5E5E5;
  border-bottom-color: rgba(0, 255, 163, 0.12);
}
.login__input::placeholder {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}
body.night .login__input::placeholder { color: rgba(255, 255, 255, 0.2); }
.login__input:focus { border-bottom-color: var(--color-accent); }

.login__input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
body.night .login__input:-webkit-autofill { -webkit-text-fill-color: #E5E5E5; }

.login__input--error { border-bottom-color: #ff4d4d; }
.login__error {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  color: #ff4d4d;
  margin-top: 4px;
}

.login__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.login__remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.login__remember label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
body.night .login__remember label { color: rgba(255, 255, 255, 0.4); }

.login__submit {
  width: 100%;
  padding: 16px 24px;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 0.80rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--violeta-profundo);
  background: var(--color-accent);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.login__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s var(--ease-spring);
}
.login__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 255, 163, 0.20);
}
.login__submit:hover::before { left: 100%; }
.login__submit:active { transform: translateY(0) scale(0.98); }
body.night .login__submit { box-shadow: 0 0 24px rgba(0, 255, 163, 0.15); }
body.night .login__submit:hover { box-shadow: 0 8px 48px rgba(0, 255, 163, 0.30); }

/* ═══ CONTEXTUAL BAR ═══ */
.login__context {
  position: fixed;
  bottom: 32px;
  left: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--glass-low-bg);
  backdrop-filter: blur(40px) saturate(220%);
  -webkit-backdrop-filter: blur(40px) saturate(220%);
  border: 1px solid var(--glass-border);
  z-index: 10;
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-enter) 1.8s forwards;
}
body.night .login__context {
  background: rgba(15, 15, 20, 0.70);
  border-color: rgba(0, 255, 163, 0.12);
}
.login__context-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 3s ease-in-out infinite;
}
.login__context-item {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.80rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}
body.night .login__context-item { color: rgba(255, 255, 255, 0.60); }
.login__context-sep {
  width: 1px;
  height: 12px;
  background: var(--glass-border);
  opacity: 0.3;
}

/* ═══ ANIMATIONS ═══ */
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(0, 255, 163, 0.4); }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .login { grid-template-columns: 1fr; }
  .login__hero { min-height: auto; padding: 48px 32px; }
  .login__hero-content { margin: 0; }
  .login__brand { font-size: 3.052rem; }
  .login__hero-footer { display: none; }
  .login__panel { padding: 32px; align-items: flex-start; }
  .login__card { max-width: 100%; }
  .login__context { left: 32px; bottom: 24px; }
}
@media (max-width: 768px) {
  .login__hero { padding: 32px 5vw; }
  .login__panel { padding: 24px 5vw; }
  .login__card { padding: 40px 24px; }
  .login__context { left: 5vw; }
  .login__brand { font-size: 2.441rem; }
}