/* ---------- Acceso: modal sobre la landing ----------
     #login-screen es un .panel-overlay, así que el fondo, el foco atrapado, el
     Escape y el clic fuera ya vienen de components.css y js/panels.js. Aquí solo
     se le da el aspecto del panel y la entrada con muelle la pone js/landing.js. */
  #login-screen{z-index:90;}
  #login-screen .panel{
    max-width:27rem; padding:2.25rem 2rem; border-radius:2rem;
    max-height:92svh; border:1px solid var(--border);
    animation:none;                      /* la entrada la anima el muelle */
    position:relative; opacity:0;        /* sin JS no debería verse a medias */
  }
  #login-screen.show .panel{opacity:1;}
  .l-modal-close{
    position:absolute; top:1rem; right:1rem;
    width:2.5rem; height:2.5rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--border); color:var(--ink-700);
    transition:background .25s ease, color .25s ease;
  }
  .l-modal-close:hover{background:var(--surface); color:var(--ink-900);}
  .l-modal-close svg{width:1rem; height:1rem;}
  .login-logo{
    width:56px;height:56px;border-radius:16px;
    background:var(--blue-50); border:1px solid var(--blue-100);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:16px; overflow:hidden;
  }
  .login-logo img{width:40px;height:40px;object-fit:contain;}
  .login-card h1{font-size:22px;margin:0 0 6px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
  .login-card p{color:var(--ink-500);margin:0 0 20px;font-size:13.5px;line-height:1.5;}
  .auth-tabs{display:flex; background:var(--surface); border-radius:10px; padding:4px; margin-bottom:20px;}
  .auth-tab{flex:1; text-align:center; padding:8px; border:none; background:transparent; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink-500); transition:all .15s;}
  .auth-tab.active{background:#fff; color:var(--blue-700); box-shadow:var(--shadow-sm);}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:6px;}
  .field input, .field textarea, .field select{width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--border); font-size:14.5px; color:var(--ink-900); background:var(--surface); transition:border-color .15s, box-shadow .15s, background .15s;}
  .field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--blue-600); background:#fff; box-shadow:0 0 0 4px var(--blue-100);}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:10px; border:none; font-weight:600; font-size:14.5px; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, opacity .15s;}
  .btn:active{transform:scale(.97);}
  .btn-primary{background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.28);}
  .btn-primary:hover{box-shadow:0 8px 22px rgba(37,99,235,.36);}
  .btn-block{width:100%;}
  .btn-ghost{background:transparent;color:var(--ink-700); border:1.5px solid var(--border);}
  .btn-ghost:hover{background:var(--surface); border-color:var(--blue-200);}
  .btn-sm{padding:7px 12px; font-size:13px; border-radius:8px;}
  .btn:disabled{opacity:.6; cursor:not-allowed; transform:none;}
  /* Separador "o continúa con" */
  .auth-divider{display:flex; align-items:center; gap:12px; margin:16px 0 14px; color:var(--ink-500);}
  .auth-divider::before, .auth-divider::after{content:""; flex:1; height:1px; background:var(--border);}
  .auth-divider span{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}

  /* Botones de proveedor (Google / Microsoft) */
  .oauth-row{display:flex; gap:10px;}
  .btn-oauth{
    position:relative; flex:1; gap:9px; background:#fff; color:var(--ink-900);
    border:1.5px solid var(--border); font-weight:600; font-size:13.5px; padding:10px 12px;
  }
  .btn-oauth:hover{background:var(--surface); border-color:var(--blue-200); transform:translateY(-1px); box-shadow:var(--shadow-sm);}
  .btn-oauth svg{flex-shrink:0;}
  .btn-oauth.loading{opacity:.7; pointer-events:none;}
  .btn-oauth.loading span{visibility:hidden;}
  .btn-oauth.loading::after{
    content:""; position:absolute; width:16px; height:16px; border-radius:50%;
    border:2px solid var(--blue-200); border-top-color:var(--blue-600); animation:spin .7s linear infinite;
  }
  @media (max-width:380px){ .oauth-row{flex-direction:column;} }
  @media (max-width:480px){
    #login-screen .panel{padding:1.75rem 1.25rem; border-radius:1.5rem;}
    .l-modal-close{top:.75rem; right:.75rem;}
  }

  .auth-msg{margin-top:14px;font-size:12.5px;color:var(--ink-500); text-align:center; min-height:16px;}
  .auth-msg.err{color:#dc2626;}
  .auth-msg.ok{color:var(--green);}