/* ============================================================================
   LOGIN SPLIT-SCREEN LAYOUT - REDESIGNED
   Sistema Integral Qontrol (SIQ) - UI/UX Phase 5

   Specification: claudedocs/design/login-redesign-specification.md
   Date: 2026-01-04
   Changes: Reduced containers (6→3), unified color palette, simplified shadows
   ============================================================================ */

/* ============================================================================
   LOGIN PAGE DESIGN TOKENS (Scoped - No Global Impact)
   Based on SiQ brand identity (#7a0000)
   ============================================================================ */

.login-page {
  /* PRIMARY COLORS (Brand Red Family) */
  --login-primary-base: #7a0000;
  --login-primary-dark: #5c0000;
  --login-primary-darker: #400000;
  --login-primary-light: rgba(122, 0, 0, 0.85);

  /* SURFACES */
  --login-surface-white: #ffffff;
  --login-surface-muted: #f9fafb;
  --login-surface-input: #f9fafb;

  /* TEXT */
  --login-text-dark: #1f2937;
  --login-text-medium: #6b7280;
  --login-text-light: #9ca3af;
  --login-text-inverse: #ffffff;
  --login-text-inverse-soft: rgba(255, 255, 255, 0.9);
  --login-text-inverse-subtle: rgba(255, 255, 255, 0.95);

  /* BORDERS */
  --login-border-default: #e5e7eb;
  --login-border-hover: #d1d5db;
  --login-border-focus: #7a0000;
  --login-border-glass: rgba(255, 255, 255, 0.15);

  /* SHADOWS (2-level system max) */
  --login-shadow-card: 0 20px 40px rgba(0, 0, 0, 0.08);
  --login-shadow-input: 0 2px 4px rgba(0, 0, 0, 0.04);
  --login-shadow-button: 0 8px 16px rgba(122, 0, 0, 0.2);
  --login-shadow-button-hover: 0 12px 20px rgba(122, 0, 0, 0.25);
  --login-shadow-focus: 0 0 0 3px rgba(122, 0, 0, 0.15);

  /* SPACING */
  --login-panel-padding: 3rem;
  --login-card-padding: 2.5rem;
  --login-input-gap: 1.5rem;
  --login-benefit-gap: 1rem;

  /* RADIUS */
  --login-radius-card: 16px;
  --login-radius-input: 8px;
  --login-radius-pill: 999px;

  /* TRANSITIONS */
  --login-transition: 200ms ease;
}

@media (max-width: 1023px) {
  .login-page {
    --login-panel-padding: 2rem;
    --login-card-padding: 2rem;
  }
}

@media (max-width: 767px) {
  .login-page {
    --login-panel-padding: 1.5rem;
    --login-card-padding: 1.5rem;
    --login-input-gap: 1.25rem;
  }
}

/* ============================================================================
   CONTAINER PRINCIPAL
   ============================================================================ */

.login-split-container {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-bg-primary);
}

/* ============================================================================
   PANEL IZQUIERDO - INFO (Simplified - NO glass wrapper)
   ============================================================================ */

.login-split__info-panel {
  flex: 1.1; /* 55% width (1.1 / (1.1 + 0.9) = 55%) */
  min-height: 100vh;
  background: linear-gradient(135deg, var(--login-primary-base) 0%, var(--login-primary-dark) 100%);
  color: var(--login-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--login-panel-padding);
  position: relative;
  overflow: hidden;
}

/* REMOVED: ::before overlay - cleaner gradient */
/* REMOVED: glass wrapper styling - content flows directly */

.login-split__info-content {
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6, 1.5rem);
  /* NO background, border, shadow - just spacing and layout */
  position: relative;
  z-index: 1;
}

/* Logo */
.login-split__logo {
  height: 83px; /* 30% increase: 64px * 1.3 = 83.2px */
  width: auto;
  max-width: 364px; /* 30% increase: 280px * 1.3 = 364px */
  object-fit: contain;
  margin: 0 auto var(--spacing-4, 1rem); /* Center horizontally with auto margins */
  display: block; /* Required for margin auto centering */
}

/* Typography */
.login-split__headline {
  font-size: 2rem;
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  color: var(--login-text-inverse);
  margin-bottom: var(--spacing-3, 0.75rem);
}

.login-split__subheadline {
  font-size: 1.125rem;
  font-weight: var(--font-weight-normal, 400);
  line-height: var(--line-height-relaxed, 1.625);
  color: var(--login-text-inverse-soft);
  margin-bottom: var(--spacing-6, 1.5rem);
}

/* Benefits List */
.login-split__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--login-benefit-gap);
}

.login-split__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3, 0.75rem);
  color: var(--login-text-inverse-subtle);
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-relaxed, 1.625);
  transition: transform var(--login-transition);
}

.login-split__benefits li:hover {
  transform: translateX(4px);
}

.login-split__benefits i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--login-text-inverse);
  font-size: var(--font-size-lg, 1.125rem);
}

.login-split__benefits strong {
  color: var(--login-text-inverse);
  font-weight: var(--font-weight-semibold, 600);
}

/* ============================================================================
   PANEL DERECHO - FORM (Simplified - solid white card)
   ============================================================================ */

.login-split__form-panel {
  flex: 0.9; /* 45% width (0.9 / (1.1 + 0.9) = 45%) */
  min-height: 100vh;
  background-color: var(--login-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--login-panel-padding);
  position: relative;
}

.login-split__form-container {
  width: 100%;
  max-width: 420px;
}

/* Card Login - Solid White, Single Shadow */
.login-card {
  background: var(--login-surface-white);
  border: none; /* NO border */
  border-radius: var(--login-radius-card);
  box-shadow: var(--login-shadow-card); /* Single shadow (not 3-layer) */
  overflow: hidden;
}

/* NO backdrop-filter - removed glass effect */

.login-card .card__header,
.login-card .card__body {
  background: transparent;
}

.login-card .card__header {
  padding: 2rem 2.5rem 1rem;
  border-bottom: none;
}

.login-card .card__body {
  padding: 1rem 2.5rem 2.5rem;
}

.login-card .card__title {
  color: var(--login-text-dark);
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.2px;
  margin: 0;
}

/* ============================================================================
   FORM ELEMENTS
   ============================================================================ */

.login-page .form-group {
  margin-bottom: var(--login-input-gap);
}

.login-page .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--login-text-dark);
  margin-bottom: 0.5rem;
}

.login-page .form-label i {
  margin-right: 0.5rem;
  color: var(--login-text-medium);
}

/* Inputs - Simplified states */
.login-page .form-input {
  width: 100%;
  height: 46px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background: var(--login-surface-input);
  border: 1px solid var(--login-border-default);
  border-radius: var(--login-radius-input);
  box-shadow: var(--login-shadow-input); /* Subtle shadow */
  transition: all var(--login-transition);
}

.login-page .form-input:hover {
  border-color: var(--login-border-hover);
}

.login-page .form-input:focus {
  outline: none;
  border: 2px solid var(--login-border-focus);
  box-shadow: var(--login-shadow-focus);
  /* NO transform - removed lift effect */
}

/* Primary Button - Solid brand color */
.login-page .btn-login {
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2, 0.5rem);
  background: var(--login-primary-base);
  color: var(--login-text-inverse);
  border: none;
  border-radius: var(--login-radius-input);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold, 600);
  box-shadow: var(--login-shadow-button);
  transition: all var(--login-transition);
  cursor: pointer;
}

.login-page .btn-login:hover {
  background: var(--login-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--login-shadow-button-hover);
}

.login-page .btn-login:active {
  background: var(--login-primary-darker);
  transform: translateY(0);
}

.login-page .btn-login:focus {
  outline: none;
  box-shadow: var(--login-shadow-focus), var(--login-shadow-button);
}

/* ============================================================================
   CTA LANDING PAGE LINK
   ============================================================================ */

.login-split__cta {
  margin-top: var(--spacing-8, 2rem);
  padding-top: var(--spacing-5, 1.25rem);
  border-top: 1px solid var(--login-border-glass);
}

.login-split__cta-text {
  color: var(--login-text-inverse-soft);
  font-size: var(--font-size-sm, 0.875rem);
  margin-bottom: var(--spacing-2, 0.5rem);
}

.login-split__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--login-radius-pill);
  color: var(--login-primary-base);
  background: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-weight: var(--font-weight-semibold, 600);
  transition: all var(--login-transition);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login-split__cta-link:hover {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateX(3px);
  color: var(--login-primary-dark);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.login-split__cta-link i {
  margin-left: var(--spacing-2, 0.5rem);
  transition: transform var(--login-transition);
}

.login-split__cta-link:hover i {
  transform: translateX(3px);
}

.login-split__cta-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* ============================================================================
   RESPONSIVE - TABLET
   ============================================================================ */

@media (max-width: 1023px) and (min-width: 768px) {
  .login-split__info-content {
    max-width: 450px;
  }

  .login-split__headline {
    font-size: var(--font-size-2xl, 1.5rem);
  }

  .login-split__subheadline {
    font-size: var(--font-size-base, 1rem);
  }

  .login-split__benefits {
    gap: var(--spacing-3, 0.75rem);
  }

  .login-split__benefits li {
    font-size: var(--font-size-sm, 0.875rem);
  }
}

/* ============================================================================
   RESPONSIVE - MOBILE (STACKED LAYOUT)
   ============================================================================ */

@media (max-width: 767px) {
  .login-split-container {
    flex-direction: column;
  }

  /* Panel Info - Compact */
  .login-split__info-panel {
    flex: 1;
    min-height: auto;
    padding: var(--login-panel-padding);
  }

  .login-split__info-content {
    max-width: 100%;
    gap: var(--spacing-4, 1rem);
  }

  .login-split__logo {
    height: 60px;
    max-width: 200px;
    margin-bottom: var(--spacing-2, 0.5rem);
  }

  .login-split__headline {
    font-size: var(--font-size-xl, 1.25rem);
    margin-bottom: var(--spacing-2, 0.5rem);
  }

  .login-split__subheadline {
    font-size: var(--font-size-sm, 0.875rem);
    margin-bottom: var(--spacing-4, 1rem);
  }

  .login-split__benefits {
    gap: var(--spacing-2, 0.5rem);
  }

  .login-split__benefits li {
    font-size: var(--font-size-sm, 0.875rem);
    gap: var(--spacing-2, 0.5rem);
  }

  .login-split__benefits i {
    font-size: var(--font-size-base, 1rem);
  }

  /* Panel Form */
  .login-split__form-panel {
    flex: 1;
    min-height: auto;
    padding: var(--login-panel-padding);
  }

  .login-split__form-container {
    max-width: 100%;
  }

  /* Card more compact on mobile */
  .login-card .card__header {
    padding: 1.5rem 1.5rem 1rem;
  }

  .login-card .card__body {
    padding: 1rem 1.5rem 1.5rem;
  }

  /* CTA */
  .login-split__cta {
    margin-top: var(--spacing-4, 1rem);
    padding-top: var(--spacing-4, 1rem);
  }

  .login-split__cta-text {
    font-size: var(--font-size-xs, 0.75rem);
  }

  .login-split__cta-link {
    font-size: var(--font-size-sm, 0.875rem);
  }
}

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .login-split__benefits li,
  .login-split__cta-link,
  .login-split__cta-link i,
  .login-page .btn-login,
  .login-page .form-input {
    transition: none;
  }

  /* Disable transforms for reduced motion */
  .login-page .form-input:focus,
  .login-page .btn-login:hover,
  .login-page .btn-login:active,
  .login-split__benefits li:hover,
  .login-split__cta-link:hover,
  .login-split__cta-link:hover i {
    transform: none;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .login-split__cta {
    display: none;
  }

  .login-split__info-panel {
    background: var(--login-primary-base);
  }
}