/* ============================================================
   AUTH.CSS — Pantalla de acceso (login + registro en un único
   "sistema" intuitivo, con tabs para cambiar entre ambos)
   ============================================================ */
.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(229,62,62,.10), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(229,62,62,.07), transparent 40%),
    var(--bg);
}
.auth-box{
  width:100%;
  max-width:440px;
}
.auth-brand{
  text-align:center;
  margin-bottom:26px;
}
.auth-brand .logo-mark{ justify-content:center; }
.auth-brand .logo-sub{ text-align:center; padding-left:0; }

.auth-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.auth-tabs{
  display:flex;
  gap:4px;
  padding:6px;
  background:var(--surface2);
  border-radius:10px;
  margin-bottom:4px;
}
.auth-tab{
  flex:1;
  text-align:center;
  padding:10px 8px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  border:none;
  background:transparent;
  font-family:var(--ff);
  transition:.15s;
}
.auth-tab.active{
  background:var(--red);
  color:#fff;
}
.auth-tab:not(.active):hover{
  color:var(--text);
}

.auth-panel{ padding:22px 20px 20px; }
.auth-panel h1{
  font-size:18px;
  font-weight:700;
  margin-bottom:4px;
}
.auth-panel p.auth-sub{
  color:var(--muted);
  font-size:12.5px;
  margin-bottom:20px;
}

.auth-alert{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:8px;
  font-size:12.5px;
  line-height:1.5;
  margin-bottom:18px;
}
.auth-alert svg{ flex-shrink:0; margin-top:1px; }
.auth-alert-error{ background:rgba(229,62,62,.12); color:#fc8181; border:1px solid rgba(229,62,62,.3); }
.auth-alert-success{ background:rgba(26,138,74,.12); color:#4ade80; border:1px solid rgba(26,138,74,.3); }
.auth-alert-warning{ background:rgba(245,166,35,.12); color:#f59e0b; border:1px solid rgba(245,166,35,.3); }

.auth-field{ margin-bottom:14px; }
.auth-field .hint{ font-size:11px; color:var(--muted); margin-top:5px; }
.auth-field-pass{ position:relative; }
.auth-field-pass input{ padding-right:38px; }
.auth-toggle-pass{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  display:flex;
  padding:4px;
}
.auth-toggle-pass:hover{ color:var(--text); }

.auth-submit{
  width:100%;
  justify-content:center;
  padding:11px;
  font-size:14px;
  margin-top:6px;
}

.auth-footer-link{
  text-align:center;
  margin-top:16px;
  font-size:12.5px;
  color:var(--muted);
}
.auth-footer-link a{ color:var(--red); text-decoration:none; font-weight:600; }
.auth-footer-link a:hover{ text-decoration:underline; }

@media(max-width:480px){
  .auth-panel{ padding:18px 14px 16px; }
}