.pr-auth-scrim{
  position:fixed;inset:0;background:rgba(22,25,34,.45);
  z-index:2147483000;opacity:0;transition:opacity .18s ease;
}
.pr-auth-scrim.is-open{opacity:1;}

.pr-auth-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);
  width:calc(100% - 32px);max-width:400px;max-height:calc(100vh - 48px);
  overflow-y:auto;background:#FFFFFF;border-radius:20px;
  box-shadow:0 20px 60px rgba(20,22,30,.28);
  padding:26px 24px 22px;z-index:2147483001;
  font-family:'Inter',sans-serif;color:#161922;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;
}
.pr-auth-modal.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%);}

.pr-auth-close{
  position:absolute;top:14px;right:14px;z-index:2;
  box-sizing:border-box !important;
  width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;
  padding:0 !important;margin:0;line-height:1;
  border:none !important;border-radius:50% !important;
  background:#F4F5F8 !important;color:#374151 !important;
  display:flex !important;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s ease;-webkit-appearance:none;appearance:none;
}
.pr-auth-close:hover,.pr-auth-close:focus{background:#E7E8EC !important;color:#161922 !important;outline:none;}
.pr-auth-close svg{display:block !important;width:16px !important;height:16px !important;pointer-events:none;stroke:#374151 !important;}
.pr-auth-close:hover svg{stroke:#161922 !important;}

.pr-auth-tabs{display:flex;gap:6px;background:#F4F5F8;border-radius:12px;padding:4px;margin:6px 0 16px;}
.pr-auth-tab{
  flex:1;border:none;background:transparent;color:#6B7280;font-family:'Inter';font-weight:600;
  font-size:13.5px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:all .15s ease;
}
.pr-auth-tab.is-active{background:#FFFFFF;color:#161922;box-shadow:0 1px 3px rgba(20,22,30,.12);}

.pr-auth-sub{margin:0 0 16px;font-size:13.5px;color:#6B7280;line-height:1.5;}

.pr-auth-errors{
  background:#FCE0DF;border:1px solid #F0555A;border-radius:10px;
  padding:10px 14px;margin-bottom:14px;
}
.pr-auth-errors p{margin:2px 0;font-size:13px;color:#8a1f22;}

.pr-auth-google{margin-bottom:14px;}
#pr-google-btn{display:flex;justify-content:center;min-height:40px;}
.pr-auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#9AA0AC;font-size:12px;}
.pr-auth-divider::before,.pr-auth-divider::after{content:'';flex:1;height:1px;background:#E7E8EC;}

/* Honeypot anti-spam: invisible para una persona, un bot que
   rellena todos los inputs del formulario suele completarlo igual. */
.pr-hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0;}

.pr-auth-form{display:flex;flex-direction:column;gap:12px;}
/* El atributo HTML `hidden` (usado por el JS para alternar entre el
   formulario de login y el de registro) tiene por defecto
   `display:none` en el navegador, pero esa regla es del user-agent:
   cualquier regla de autor con la misma especificidad para el mismo
   elemento la pisa, incluida `.pr-auth-form{display:flex}` de arriba.
   Sin esta línea, ambos formularios (login y registro) terminaban
   mostrándose siempre al mismo tiempo sin importar qué pestaña
   estuviera activa. */
.pr-auth-form[hidden]{display:none;}
.pr-auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#161922;}
.pr-auth-form input{
  border:1.5px solid #E7E8EC;border-radius:10px;padding:10px 12px;
  font-family:'Inter';font-size:14px;color:#161922;outline:none;
  transition:border-color .15s ease;
}
.pr-auth-form input:focus{border-color:#4A63E7;}

.pr-auth-submit{
  margin-top:4px;border:none;background:#4A63E7;color:#fff;border-radius:12px;
  padding:12px 16px;font-family:'Inter';font-weight:700;font-size:14.5px;cursor:pointer;
  transition:opacity .15s ease;
}
.pr-auth-submit:hover{opacity:.9;}
.pr-auth-submit:disabled{opacity:.6;cursor:default;}

.pr-auth-switch{margin:16px 0 0;text-align:center;font-size:13px;}
.pr-auth-switch a{color:#4A63E7;text-decoration:none;font-weight:600;}
.pr-auth-switch a:hover{text-decoration:underline;}

@media (max-width:420px){
  .pr-auth-modal{padding:22px 18px 18px;}
}