/* ============================================================================
   THOR — LOGIN · Apple Redesign
   100% CSS. Cargado el ÚLTIMO en panel.html (gana cascada). Reversible.
   Rediseña #loginSection (.login-container, .btn-microsoft, etc.).
   No toca HTML ni JS. Mantiene IDs/clases acopladas (#loginSection,
   #btnLoginMicrosoft, #loginError).
   ============================================================================ */

:root {
  --lg-bg: #f5f5f7;
  --lg-card: #ffffff;
  --lg-text: #1d1d1f;
  --lg-text-2: #6e6e73;
  --lg-text-3: #a1a1a6;
  --lg-border: rgba(0,0,0,.08);
  --lg-border-2: rgba(0,0,0,.14);
  --lg-accent: #e88732;
  --lg-r-card: 22px;
  --lg-r-el: 12px;
  --lg-sh: 0 0 0 .5px rgba(0,0,0,.04), 0 10px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] {
  --lg-bg: #000; --lg-card: #1c1c1e; --lg-text: #f5f5f7; --lg-text-2: #aeaeb2; --lg-text-3: #8e8e93;
  --lg-border: rgba(255,255,255,.10); --lg-border-2: rgba(255,255,255,.18);
  --lg-sh: 0 0 0 .5px rgba(255,255,255,.06), 0 16px 56px rgba(0,0,0,.6);
}

/* Sección a pantalla completa, centrada (neutraliza max-width/padding de .section).
   IMPORTANTE: el flex SOLO se aplica cuando el login está VISIBLE. El JS lo
   muestra/oculta con style.display = 'block'/'none' inline. Si forzáramos
   display:flex !important siempre, el 'none' del JS no podría ocultarlo y el
   login taparía la app tras autenticar. Por eso condicionamos a [style*="block"]
   y NO ponemos !important en display (así el inline 'none' siempre gana). */
#loginSection.section {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: calc(100vh - 120px) !important;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(232,135,50,.10), transparent 60%),
    radial-gradient(900px 480px at 110% 110%, rgba(10,132,255,.06), transparent 60%),
    var(--lg-bg) !important;
  font-family: var(--lg-font) !important;
}
/* Centrado flex solo cuando está visible (style inline contiene "block") */
#loginSection.section[style*="block"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tarjeta del login */
#loginSection .login-container {
  max-width: 400px !important;
  width: 92% !important;
  margin: 0 !important;
  padding: 40px 36px 32px !important;
  background: var(--lg-card) !important;
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-r-card) !important;
  box-shadow: var(--lg-sh) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  animation: lgFadeIn .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes lgFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Cabecera */
#loginSection .login-header { margin-bottom: 26px !important; }
/* Icono: cápsula con degradado de marca en vez de emoji suelto grande */
#loginSection .login-icon {
  width: 64px !important; height: 64px !important;
  margin: 0 auto 14px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 2rem !important;
  background: linear-gradient(135deg, #FFB454 0%, #F97316 45%, #EA580C 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(234,88,12,.32), inset 0 1px 2px rgba(255,255,255,.5) !important;
  color: #fff !important;
}
#loginSection .login-header h2 {
  font-family: var(--lg-font) !important;
  color: var(--lg-text) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  margin: 6px 0 4px !important;
}
#loginSection .login-subtitle {
  color: var(--lg-text-2) !important;
  font-size: .95rem !important;
}

/* Botón Microsoft — sobrio, blanco con borde (estilo botón sistema),
   con el logo de colores oficial. Gana a la regla naranja global .section button. */
#loginSection .btn-microsoft,
#loginSection button.btn-microsoft {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 13px 22px !important;
  margin: 8px 0 14px !important;
  background: var(--lg-card) !important;
  background-image: none !important;
  color: var(--lg-text) !important;
  border: 1px solid var(--lg-border-2) !important;
  border-radius: var(--lg-r-el) !important;
  font-family: var(--lg-font) !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
  transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease !important;
}
#loginSection .btn-microsoft:hover {
  background: color-mix(in srgb, var(--lg-text-2) 7%, var(--lg-card)) !important;
  background-image: none !important;
  border-color: var(--lg-text-3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.10) !important;
}
#loginSection .btn-microsoft:active { transform: translateY(0) scale(.99) !important; }
#loginSection .btn-microsoft-icon { margin: 0 !important; }

/* Hint del dominio */
#loginSection .login-hint {
  color: var(--lg-text-3) !important;
  font-size: .8rem !important;
  margin: 4px 0 0 !important;
}
#loginSection .login-hint strong { color: var(--lg-text-2) !important; font-weight: 600 !important; }

/* Mensaje de error */
#loginSection #loginError:not(:empty) {
  display: block !important;
  margin-top: 16px !important;
  padding: 11px 14px !important;
  background: rgba(255,59,48,.10) !important;
  color: #d70015 !important;
  border: 1px solid rgba(255,59,48,.22) !important;
  border-radius: var(--lg-r-el) !important;
  font-family: var(--lg-font) !important;
  font-size: .88rem !important;
  line-height: 1.4 !important;
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  #loginSection .login-container { animation: none !important; }
  #loginSection .btn-microsoft:hover { transform: none !important; }
}

/* Responsive */
@media (max-width: 480px) {
  #loginSection .login-container { padding: 32px 24px 26px !important; }
  #loginSection .login-header h2 { font-size: 1.4rem !important; }
}