/* Pantalla de acceso.
   Composicion del boceto del usuario (sesion 4): fondo de cromo con manchas
   difuminadas, tarjeta blanca centrada con borde superior de marca, marca
   tipografica, lema, nombre de la empresa, "Iniciar sesion", campos sin icono
   con "Ver" en la contrasena, boton ancho, ayuda y pie con la version. Todo es
   CSS: sin imagenes de fondo, para que la CSP (img-src 'self') no cambie. */

.one-acceso{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  overflow-x: hidden;
  background: linear-gradient(135deg, #0A1F3B 0%, #153259 48%, #0A1F3B 100%);
}

/* Manchas difuminadas: una de marca arriba a la izquierda y una azul abajo a
   la derecha. Van fijas y detras de la tarjeta; el blur las funde con el
   degradado del fondo. */
.one-acceso::before,
.one-acceso::after{
  content: "";
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.one-acceso::before{
  width: 60vmax; height: 60vmax;
  left: -22vmax; top: -24vmax;
  background: radial-gradient(circle, rgba(253, 79, 1, .62) 0%, rgba(253, 79, 1, .18) 45%, rgba(253, 79, 1, 0) 70%);
}
.one-acceso::after{
  width: 62vmax; height: 62vmax;
  right: -24vmax; bottom: -28vmax;
  background: radial-gradient(circle, rgba(63, 128, 214, .75) 0%, rgba(63, 128, 214, .22) 45%, rgba(63, 128, 214, 0) 70%);
}

/* La tarjeta: max-width y no width, para que a 360 px encoja y no desborde. */
.one-acceso__caja{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  background: var(--one-surface);
  border-top: 4px solid var(--one-marca);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.15rem;
  box-shadow: 0 24px 60px rgba(3, 12, 28, .45), 0 2px 8px rgba(3, 12, 28, .25);
  color: var(--one-body);
}

/* Marca tipografica: "Arissto" con la t en naranja y "ONE" debajo, como el
   arte oficial (ia/docs/Arissto_ONE.png). Es el logotipo, no texto corrido:
   por eso la t y ONE van en --one-marca y no en --one-marca-text. */
.one-acceso__marca{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.one-logotipo{
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.one-logotipo__nombre{
  color: var(--one-ink);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.035em;
}
.one-logotipo__t{ color: var(--one-marca); }
.one-logotipo__producto{
  margin-top: .3rem;
  color: var(--one-marca);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .32em;
  padding-left: .32em;     /* compensa el espaciado tras la ultima letra */
}
.one-acceso__lema{
  margin: .2rem 0 0;
  color: var(--one-muted);
  font-size: .9rem;
}

.one-acceso__separador{
  border: 0;
  border-top: 1px solid var(--one-line);
  margin: 1rem 0;
}
.one-acceso__separador--pie{ margin: 1.1rem 0 .85rem; }

.one-acceso__empresa{
  display: block;
  margin: 0 0 .9rem;
  text-align: center;
  color: var(--one-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.one-acceso__titulo{
  margin: 0 0 1.1rem;
  text-align: center;
  color: var(--one-ink);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.one-acceso__paso{
  margin: 0 0 1rem;
  text-align: center;
  color: var(--one-muted);
  font-size: .85rem;
}

/* Campo. La etiqueta sigue existiendo para lectores de pantalla; en la vista
   la sustituye el placeholder, como en el boceto. */
.one-acceso__campo{
  position: relative;
  margin-bottom: .9rem;
}
.one-acceso__etiqueta{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.one-acceso .one-acceso__control{
  width: 100%;
  min-height: 52px;
  padding: .7rem 1rem !important;
  border: 1px solid var(--one-line-control) !important;
  border-radius: 10px !important;
  font-size: 1.05rem;
  color: var(--one-ink);
  background: var(--one-surface);
  box-shadow: none !important;
}
.one-acceso .one-acceso__control--clave{ padding-right: 4.5rem !important; }
.one-acceso .one-acceso__control::placeholder{ color: var(--one-muted); opacity: 1; }
.one-acceso .one-acceso__control:focus{
  border-color: var(--one-marca) !important;
  outline: 2px solid var(--one-marca-text);
  outline-offset: 1px;
}

/* "Ver" / "Ocultar" dentro del campo de contrasena. */
.one-acceso__ver{
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  min-height: 40px;
  padding: 0 .8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--one-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.one-acceso__ver:hover{ background: var(--one-bg); }
.one-acceso__ver:focus-visible{ outline: 2px solid var(--one-marca-text); outline-offset: 1px; }

/* Boton ancho de marca: texto en cromo sobre naranja, nunca blanco
   (MARCA-COLOR.md). */
.one-acceso .one-acceso__boton{
  width: 100%;
  min-height: 52px;
  margin-top: .35rem;
  border-radius: 10px !important;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(253, 79, 1, .28);
}

.one-acceso__ayuda{
  margin: 1.1rem 0 0;
  text-align: center;
  color: var(--one-muted);
  font-size: .9rem;
}
.one-acceso__enlace{
  color: var(--one-marca-text);
  font-weight: 700;
  text-decoration: none;
}
a.one-acceso__enlace:hover{ text-decoration: underline; }

.one-acceso__pie{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  color: var(--one-muted);
  font-size: .8rem;
}
.one-acceso__version{ font-variant-numeric: tabular-nums; }

/* Los avisos van dentro de la tarjeta blanca: el estilo claro de PrimeFaces
   vale tal cual, solo se ajusta el espacio. */
.one-acceso .ui-messages{
  margin: 0 0 1rem;
  border-radius: var(--one-radio);
}

@media (max-width: 767px){
  .one-acceso{ padding: 1rem .75rem; }
  .one-acceso__caja{ padding: 1.4rem 1.15rem 1rem; }
  .one-logotipo__nombre{ font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce){
  .one-acceso::before, .one-acceso::after{ filter: blur(50px); }
}