/* ejur-ui.css — sistema de UI de EJUR (mobile-first, vanilla, sin dependencias).
 *
 * Pensado para ir reemplazando de a poco el diseño legacy SIN tocar style.css.
 * Todas las clases llevan el prefijo .ej- para no colisionar con las viejas.
 * Empieza por las pantallas de auth/registro; se irá ampliando.
 *
 * Paleta: MONOCROMO. Carbón cálido como color de marca + grises neutros +
 * blanco. Sin acento de color: el diseño vive del contraste y la tipografía.
 * Rojo/verde se usan SOLO en mensajes de validación, nunca en la marca.
 */

:root{
  /* Marca (monocromo) */
  --ej-primary:#1b1e23;      /* botones, links, logo, foco */
  --ej-primary-600:#2a2f37;  /* hover */
  --ej-primary-900:#111317;  /* fondo profundo */

  /* Neutros (grises neutros, sin tinte) */
  --ej-ink:#15181c;
  --ej-muted:#5c636b;
  --ej-faint:#8b9097;
  --ej-line:#d8dbdf;
  --ej-line-soft:#eef0f2;
  --ej-bg:#f6f7f8;
  --ej-white:#ffffff;

  /* Semánticos: SOLO para estados (validación). No son colores de marca. */
  --ej-ok:#1d9e75;
  --ej-warn:#ef9f27;
  --ej-err:#c4413f;

  /* Forma */
  --ej-r-sm:6px;
  --ej-r-md:8px;
  --ej-r-lg:12px;
  --ej-r-xl:16px;

  /* Tipografía */
  --ej-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ej-serif:Georgia,"Times New Roman",serif;

  /* Sombra y anillo de foco */
  --ej-shadow:0 10px 30px rgba(12,14,18,.28);
  --ej-ring:rgba(27,30,35,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Pantalla a pantalla completa con fondo de marca (login/registro). */
.ej-screen{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  background:linear-gradient(160deg,#262b33 0%,var(--ej-primary-900) 100%);
  font-family:var(--ej-sans);
  color:var(--ej-ink);
  -webkit-font-smoothing:antialiased;
}

/* Tarjeta blanca elevada. */
.ej-card{
  background:var(--ej-white);
  width:360px;
  max-width:100%;
  border-radius:var(--ej-r-xl);
  padding:2.25rem 2rem;
  box-shadow:var(--ej-shadow);
}

/* Pantallas de auth: el nombre EJUR va en blanco sobre el fondo, ARRIBA de la
   card (no dentro), para máximo contraste sin pelear con el fondo oscuro. */
.ej-authwrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:360px;
  max-width:100%;
}
.ej-brandtop{
  font-family:var(--ej-serif);
  font-size:clamp(40px, 12vw, 50px);
  letter-spacing:5px;
  line-height:1;
  color:#fff;
  text-align:center;
  margin:0 0 1.3rem;
}

.ej-brand{
  text-align:center;
  font-family:var(--ej-serif);
  font-size:42px;
  letter-spacing:3px;
  line-height:1;
  color:var(--ej-primary);
  margin:0 0 .4rem;
}
.ej-sub{
  text-align:center;
  font-size:13px;
  line-height:1.5;
  color:var(--ej-muted);
  margin:0 0 1.6rem;
}

/* Campos de formulario. */
.ej-field{ margin-bottom:1rem; }
.ej-label{
  display:block;
  font-size:12px;
  color:var(--ej-muted);
  margin-bottom:5px;
}
.ej-inwrap{ position:relative; }
.ej-ico{
  position:absolute;
  left:12px; top:50%;
  transform:translateY(-50%);
  width:18px; height:18px;
  color:var(--ej-faint);
  pointer-events:none;
}
.ej-input{
  width:100%;
  height:46px;
  padding:0 12px 0 38px;
  border:1px solid var(--ej-line);
  border-radius:var(--ej-r-md);
  font:inherit;
  font-size:15px;
  color:var(--ej-ink);
  background:var(--ej-white);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.ej-input::placeholder{ color:#a7adb4; }
.ej-input:focus{
  border-color:var(--ej-primary);
  box-shadow:0 0 0 3px var(--ej-ring);
}
.ej-input.ej-haseye{ padding-right:44px; }

/* Botón "ojito" para revelar contraseña. */
.ej-eye{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ej-muted);
  padding:8px;
  display:flex;
  align-items:center;
  border-radius:var(--ej-r-sm);
}
.ej-eye:hover{ color:var(--ej-primary); }
.ej-eye svg{ width:19px; height:19px; }

/* Medidor de fuerza de contraseña (monocromo: solo crece el ancho). */
.ej-meter{
  height:4px;
  margin-top:6px;
  border-radius:2px;
  background:#e6e8ea;
  overflow:hidden;
}
.ej-meter-bar{
  height:100%;
  width:0;
  border-radius:2px;
  background:var(--ej-primary);
  transition:width .2s, background .2s;
}

/* Botón primario. */
.ej-btn{
  display:inline-block;
  height:46px;
  padding:0 22px;
  border:none;
  border-radius:var(--ej-r-md);
  background:var(--ej-primary);
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:500;
  letter-spacing:.3px;
  line-height:46px;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .05s;
}
.ej-btn:hover{ background:var(--ej-primary-600); }
.ej-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ej-ring); }
.ej-btn:active{ transform:translateY(1px); }
.ej-btn[disabled]{ opacity:.6; cursor:default; }
.ej-btn-block{ display:block; width:100%; padding:0; }

/* Botón secundario (contorno). */
.ej-btn-ghost{
  background:transparent;
  color:var(--ej-primary);
  border:1px solid var(--ej-line);
}
.ej-btn-ghost:hover{ background:var(--ej-bg); }

/* Línea de confianza bajo el botón. */
.ej-trust{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:14px;
  font-size:11px;
  color:var(--ej-faint);
}
.ej-trust svg{ width:14px; height:14px; }

/* Pie con separador (link "ya tenés cuenta"). */
.ej-foot{
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:1px solid var(--ej-line-soft);
  text-align:center;
  font-size:13px;
  color:var(--ej-muted);
}
.ej-link{
  color:var(--ej-primary);
  font-weight:500;
  text-decoration:none;
}
.ej-link:hover{ text-decoration:underline; }

/* Mensajes de validación / estado. */
.ej-msg{
  min-height:1.2em;
  margin-top:.9rem;
  text-align:center;
  font-size:13px;
  font-weight:500;
  color:var(--ej-err);
}
.ej-msg.ej-ok{ color:var(--ej-ok); }

/* Honeypot anti-bot (oculto fuera de pantalla, no display:none). */
.ej-hp{ position:absolute; left:-9999px; top:-9999px; }

/* Spinner. */
.ej-spin{
  display:inline-block;
  width:22px; height:22px;
  border:3px solid rgba(27,30,35,.18);
  border-top-color:var(--ej-primary);
  border-radius:50%;
  animation:ej-rot .8s linear infinite;
}
@keyframes ej-rot{ to{ transform:rotate(360deg); } }