/* =====================================================================
 * NefroSys — Login responsive: móvil + tablet + iPad
 * ---------------------------------------------------------------------
 * Decisión UX: NEFROSYN se OCULTA en cualquier dispositivo táctil
 * ≤1024px Y también en iPad landscape táctil hasta 1366px.
 *
 * Desktop puro (>1024px sin touch) mantiene el panel marketing NEFROSYN
 * con mascota y todo. Esto preserva branding institucional.
 *
 * Niveles:
 *   1) ≤ 380px: iPhone SE (compacto extremo)
 *   2) ≤ 768px: iPhone / Android
 *   3) 769 a 1024px: iPad portrait, iPhone landscape, tablets
 *   4) 1025 a 1366px CON touch: iPad landscape, iPad Pro
 * ===================================================================== */

/* =====================================================================
 * NIVEL 1+2+3+4: cualquier dispositivo móvil/tablet/iPad
 *   Aplica los CAMBIOS COMUNES (ocultar NEFROSYN, fondo azul, layout
 *   single-column, etc.). Después un nivel específico ajusta la card
 *   por tamaño.
 * ===================================================================== */
@media (max-width: 1024px),
       (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {

  /* Mismo fondo de desktop (riñones + circuitos azul clínico) pero
   * versión WebP optimizada de 17 KB en lugar de 1.7 MB del PNG original. */
  body.login-body, body.login-body-split {
    background:
      linear-gradient(rgba(8, 36, 96, 0.15), rgba(8, 36, 96, 0.35)),
      url("../assets/Imagenes/Fondo-mobile.webp") center center / cover no-repeat,
      #0a3870 !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Layout single column, contenido centrado vertical */
  .login-shell-split {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  /* OCULTAR panel NEFROSYN completo en móvil/tablet/iPad táctil */
  .login-hero,
  .login-brand-panel,
  .login-brand-bg,
  .login-brand-overlay,
  .login-hero-inner,
  .login-brand-copy,
  .login-info-card,
  .login-info-list,
  .login-brand-footer,
  .login-mascot-wrap,
  .login-brand-mascot {
    display: none !important;
  }

  /* Panel del formulario ocupa toda la pantalla */
  .login-panel-split {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 16px !important;
    background: transparent !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
  }

  /* Card base del login: ajustes generales (tamaño se afina por nivel) */
  .login-card {
    background: white !important;
    border-radius: 14px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
    box-sizing: border-box !important;
  }

  /* Logo NefroSys arriba del form */
  .login-system-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .login-system-name {
    font-weight: 700 !important;
    color: #1d4ed8 !important; /* azul NefroSys (no teal/verde) */
    text-align: center !important;
  }
  .login-system-tag {
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-align: center !important;
  }

  /* Título y subtítulo del form */
  .login-form-title {
    color: #0f172a !important;
    font-weight: 600 !important;
    text-align: center !important;
  }
  .login-sub {
    color: #64748b !important;
    text-align: center !important;
  }

  /* Inputs touch */
  .field-lg input {
    font-size: 16px !important; /* evita zoom iOS */
  }
  .field-label {
    font-weight: 600 !important;
    color: #475569 !important;
  }

  /* Botón Ingresar prominente */
  #btn-login,
  .btn-primary.btn-lg {
    width: 100% !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }

  /* Nota recordar usuario */
  .login-remember-note {
    color: #94a3b8 !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  /* Footer institucional fuera de la card */
  .login-footer {
    text-align: center !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Sin asistente robot en login móvil/tablet */
  .assistant-bot, [class*="assistant"], img[src*="robot"] {
    display: none !important;
  }
}

/* =====================================================================
 * NIVEL 2 — iPhone / Android (≤ 768px)
 *   Card compacta full-width
 * ===================================================================== */
@media (max-width: 768px) {
  .login-card {
    max-width: 420px !important;
    padding: 24px 20px !important;
  }
  .login-system-brand { margin-bottom: 18px !important; }
  .login-system-logo-wrap, .login-system-logo {
    width: 56px !important; height: 56px !important;
  }
  .login-system-logo { object-fit: contain !important; }
  .login-system-name { font-size: 18px !important; }
  .login-system-tag { font-size: 11px !important; }
  .login-form-title { font-size: 18px !important; margin: 0 0 4px 0 !important; }
  .login-sub { font-size: 12px !important; margin: 0 0 18px 0 !important; }
  .field-lg .field-wrap { border-radius: 8px !important; }
  .field-lg input { padding: 12px 12px 12px 38px !important; }
  .field-label { font-size: 12px !important; }
  #btn-login, .btn-primary.btn-lg {
    padding: 14px !important; font-size: 15px !important;
    margin-top: 8px !important; min-height: 48px !important;
  }
  .login-remember-note { font-size: 11px !important; margin-top: 12px !important; }
  .login-footer { font-size: 11px !important; padding: 12px 16px 20px !important; }
  .caps-warning { font-size: 11px !important; padding: 4px 8px !important; }
}

/* =====================================================================
 * NIVEL 1 — iPhone SE chico (≤ 380px)
 * ===================================================================== */
@media (max-width: 380px) {
  .login-card { padding: 20px 16px !important; }
  .login-system-logo-wrap, .login-system-logo { width: 48px !important; height: 48px !important; }
  .login-system-name { font-size: 16px !important; }
  .login-form-title { font-size: 16px !important; }
}

/* =====================================================================
 * NIVEL 3+4 — TABLET / iPad (769px hasta 1024px, o iPad landscape táctil)
 *   Card más generosa visualmente, padding cómodo, tipografía mayor
 * ===================================================================== */
@media (min-width: 769px) and (max-width: 1024px),
       (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) {
  /* Card más grande, premium para iPad */
  .login-card {
    max-width: 520px !important;
    padding: 40px 36px !important;
  }
  .login-system-brand { margin-bottom: 24px !important; gap: 8px !important; }
  .login-system-logo-wrap, .login-system-logo {
    width: 72px !important; height: 72px !important;
  }
  .login-system-logo { object-fit: contain !important; }
  .login-system-name { font-size: 22px !important; }
  .login-system-tag { font-size: 12px !important; }
  .login-form-title { font-size: 22px !important; margin: 0 0 6px 0 !important; }
  .login-sub { font-size: 14px !important; margin: 0 0 24px 0 !important; }
  .field-lg { margin-bottom: 14px !important; }
  .field-lg .field-wrap { border-radius: 10px !important; }
  .field-lg input { padding: 14px 14px 14px 42px !important; font-size: 16px !important; }
  .field-label { font-size: 13px !important; }
  #btn-login, .btn-primary.btn-lg {
    padding: 16px !important; font-size: 16px !important;
    margin-top: 12px !important; min-height: 52px !important;
  }
  .login-remember-note { font-size: 12px !important; margin-top: 16px !important; }
  .login-footer { font-size: 12px !important; padding: 16px 20px 24px !important; }
}