/* auth-desktop.css — extraído de index.html (líneas 625-688). Orden preservado: NO reordenar los <link>. */
  /* ===== LOGIN AMPLIO EN PC ===== */
  /* La columna de marca se oculta en móvil por defecto */
  #login .brand-side{display:none}

  @media (min-width:1000px){
    /* El login se despega del device y cubre toda la pantalla */
    #login:not(.hidden){
      position:fixed;inset:0;z-index:500;
      flex-direction:row;padding:0;align-items:stretch;
      background:var(--bg);
    }
    /* La columna derecha (formulario) con el fondo de la app */
    #login:not(.hidden)>div[id^="pane-"]{
      background:var(--bg);
    }
    /* Columna izquierda: marca y mensaje de valor (tema claro, fondo lima) */
    #login:not(.hidden) .brand-side{
      display:flex;flex:1 1 48%;flex-direction:column;justify-content:center;
      padding:0 5vw;position:relative;overflow:hidden;
      background:radial-gradient(130% 90% at 25% 15%, #d4f96a 0%, var(--accent) 55%, #b3e039 100%);
    }
    #login:not(.hidden) .brand-side::after{
      content:'';position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;
      border-radius:50%;background:rgba(255,255,255,.16);
    }
    #login:not(.hidden) .brand-side::before{
      content:'';position:absolute;right:60px;top:-80px;width:200px;height:200px;
      border-radius:50%;background:rgba(20,24,12,.06);
    }
    #login:not(.hidden) .brand-side .bs-mark{
      width:64px;height:64px;border-radius:20px;display:grid;place-items:center;
      background:#14180c;margin-bottom:32px;box-shadow:0 18px 40px -14px rgba(20,24,12,.5);
      position:relative;z-index:2;
    }
    #login:not(.hidden) .brand-side .bs-mark svg{width:36px;height:36px;fill:var(--accent)}
    #login:not(.hidden) .brand-side h2{
      font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:44px;line-height:1.08;
      letter-spacing:-1px;color:#14180c;margin-bottom:18px;position:relative;z-index:2;
    }
    #login:not(.hidden) .brand-side h2 em{font-style:italic;color:#2f5005}
    #login:not(.hidden) .brand-side p{
      font-size:17px;line-height:1.6;color:#1f3306;max-width:420px;font-weight:500;
      position:relative;z-index:2;
    }
    #login:not(.hidden) .brand-side .bs-features{margin-top:36px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
    #login:not(.hidden) .brand-side .bs-feat{display:flex;align-items:center;gap:13px;font-size:15.5px;color:#14180c;font-weight:600}
    #login:not(.hidden) .brand-side .bs-feat .bs-dot{width:28px;height:28px;border-radius:8px;background:#14180c;display:grid;place-items:center;flex:0 0 auto;color:var(--accent);font-size:14px;font-weight:800}
    /* Columna derecha: el formulario, centrado */
    #login:not(.hidden)>div[id^="pane-"]{
      flex:1 1 50%;flex-direction:column;justify-content:center;
      padding:0 8vw;max-width:none;
    }
    /* El pane visible (display:block via JS) se vuelve flex column en PC */
    #login:not(.hidden)>div[id^="pane-"][style*="block"]{
      display:flex !important;
    }
    #login:not(.hidden) .lmark{display:none} /* el mark va en la columna izquierda */
    #login:not(.hidden) h1{font-size:38px}
    #login:not(.hidden) .field input{font-size:16px;padding:15px 17px}
    #login:not(.hidden) .foot{display:none}
    /* Form más ancho pero limitado para legibilidad */
    #login:not(.hidden)>div[id^="pane-"]>*{max-width:420px;width:100%}
  }