/* =========================================
   AUTH UI — MOBILE FIRST (namespaced .auth-*)
   100% responsive, sin choques con otros CSS
========================================= */

/* Variables base */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --ink2:#000000;
  --muted:#777777;
  --line:#e6e6e6;
  --field:#f7f7f7;
}

/* Limitar reglas al namespace de auth */
.auth-viewport, .auth-viewport *{ box-sizing:border-box; }

/* Layout raíz (evita problemas de 100vh en móvil) */
html,body{ height:100%; margin:0; }
body{ font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; background:var(--bg); color:var(--ink); }

/* Viewport auth */
.auth-viewport{
  position:relative;
  min-height:100svh;                 /* soporta iOS/Android nuevos */
  min-height:100dvh;                 /* fallback moderno */
  min-height:100vh;                  /* fallback genérico */
  overflow:hidden;
  padding-top:env(safe-area-inset-top,0);
  padding-bottom:env(safe-area-inset-bottom,0);
}

/* Track para 2 pantallas (login/registro) */
.auth-track{
  display:flex;
  width:200vw;
  min-height:inherit;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.auth-track.auth-move{ transform:translateX(-100vw); }

/* Pantallas */
.auth-screen{
  width:100vw;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,6vw,64px);
}

/* Split: marca / formulario */
.auth-split{
  position:relative;
  width:min(1100px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;     /* desktop */
  gap:clamp(16px,3vw,28px);
}
.auth-split::after{
  content:"";
  position:absolute; inset:0 auto 0 50%;
  width:1px; background:var(--line);
  transform:translateX(-.5px);
}
/* Tablet/Movil: 1 columna */
@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-split::after{ display:none; }
}

/* Brand / logo */
.auth-brand{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,5vw,64px) 2rem;
  text-align:center;
}
.auth-logo{
  letter-spacing:.08em;
  font-weight:800;
  font-size:clamp(28px,6vw,54px);
  color:var(--ink);
  line-height:1.05;
}

/* Panel de formulario */
.auth-panel{
  display:flex; align-items:center; justify-content:center;
  padding:min(7vh,80px) clamp(16px,3vw,24px);
}
.auth-card{ width:min(560px,100%); }

/* Títulos */
.auth-title{
  margin:0 0 18px;
  font-size:clamp(22px,2.8vw,28px);
  font-weight:700;
}

/* Stepper */
.auth-stepper{ display:flex; gap:10px; margin:6px 0 18px; }
.auth-dot{
  width:10px; height:10px; border:2px solid var(--ink);
  background:transparent; border-radius:999px; cursor:pointer;
  padding:0; appearance:none;
}
.auth-dot.active{ background:var(--ink); }
.auth-dot.done{ background:var(--ink2); }

/* Fieldset */
fieldset.auth-step{
  border:1px solid var(--line);
  padding:16px clamp(10px,2vw,18px);
  margin:0 0 18px;
  border-radius:8px;
  background:#fff;
}
fieldset.auth-step>legend{
  padding:0 6px;
  font-size:12px; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
}

/* Grid de campos */
.auth-grid{
  display:grid;
  grid-template-columns:1fr;         /* móvil: 1 col */
  gap:14px;
}
.auth-group{ display:flex; flex-direction:column; gap:6px; }
.auth-group.full{ grid-column:1/-1; }

/* >=600px: 2 columnas */
@media (min-width:600px){
  .auth-grid{ grid-template-columns:1fr 1fr; }
}

/* Etiquetas y campos */
.auth-group label{
  font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.auth-group input,
.auth-group select,
.auth-group textarea{
  width:100%;
  height:44px;
  padding:0 12px;
  border:1px solid var(--line);
  background:var(--field);
  color:var(--ink);
  outline:none;
  border-radius:8px;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.auth-group textarea{ height:auto; min-height:96px; padding:10px 12px; resize:vertical; }
.auth-group input:focus,
.auth-group select:focus,
.auth-group textarea:focus{
  border-color:var(--ink2);
  background:#fff;
  box-shadow:0 0 0 3px rgba(0,0,0,.06);
}
/* Invalid */
[aria-invalid="true"]{
  border-color:#b00020 !important;
  background:#fff5f6 !important;
}

/* Acciones */
.auth-actions{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin-top:8px; flex-wrap:wrap;
}
.auth-btn{
  appearance:none;
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  height:44px;
  padding:0 16px;
  font-weight:600; letter-spacing:.02em;
  cursor:pointer;
  border-radius:10px;
  transition:filter .15s ease, transform .15s ease;
}
a.auth-btn{ text-decoration:none; display:inline-flex; align-items:center; }
.auth-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.auth-btn:active{ transform:translateY(0); }
.auth-btn.secondary{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  height:44px; padding:0 12px;
}
.auth-btn.submit{ background:#000; border-color:#000; }

/* Botones full en móvil */
@media (max-width:480px){
  .auth-actions{ justify-content:stretch; }
  .auth-actions .auth-btn{ flex:1 1 140px; }
}

/* Mensajería y notas */
.auth-note{ font-size:12px; margin-top:4px; color:#666; }
.auth-note.bad{ color:#000; }
.auth-msg{
  padding:10px 12px;
  border:1px solid #000;
  background:#fff;
  border-radius:8px;
}
.auth-msg.error{
  color:#b00020;
  background:#fff;
  font-size:.95rem;
  margin:.5rem 0 1rem;
  border-color:#b00020;
}

/* Enlaces extra */
.auth-extra{ margin-top:8px; }
.auth-extra a{ color:var(--ink); text-decoration:underline; }

/* Evitar que esta vista altere sombras globales (solo dentro de auth) */
.auth-viewport *{
  text-shadow:none !important;
  box-shadow:none !important;
}

/* ===== Afinado responsive adicional ===== */

/* Compactar paddings en pantallas bajas (teclado móvil) */
@media (max-height:640px){
  .auth-panel{ padding:min(4vh,48px) 16px; }
  .auth-brand{ padding:24px 16px; }
}

/* Mejoras para desktop grande */
@media (min-width:1200px){
  .auth-card{ width:min(600px, 100%); }
  .auth-group input,
  .auth-group select,
  .auth-group textarea{ border-radius:10px; }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .auth-track{ transition:none; }
  .auth-btn{ transition:none; }
}