/* Tecnifum — Pantalla de acceso para empleados.
   Pensada para el celular primero: es donde el técnico entra en campo. */

.acceso {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--espacio-6);
}

.acceso__fondo {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 15%, var(--marca-acero) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, var(--marca-gris) 0%, transparent 55%),
    linear-gradient(150deg, var(--marca-fuerte) 0%, var(--fondo) 100%);
}

.acceso__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--espacio-8);
}

.acceso__marca {
  display: inline-flex;
  margin-bottom: var(--espacio-6);
}

.acceso__marca img {
  height: 44px;
  width: auto;
}

.acceso__titulo {
  margin-bottom: var(--espacio-2);
  font-size: var(--texto-2xl);
}

.acceso__entrada {
  margin-bottom: var(--espacio-8);
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
}

/* Campo con botón adosado (mostrar contraseña) */
.campo__conjunto {
  display: flex;
  gap: var(--espacio-2);
}

.campo__conjunto input {
  flex: 1;
  min-width: 0;
}

.campo__conjunto .boton--icono {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}

/* En el teléfono el botón ocupa todo el ancho: es más fácil de acertar */
.acceso__enviar {
  justify-self: stretch;
  width: 100%;
  padding-block: var(--espacio-4);
}

.acceso__volver {
  margin: var(--espacio-6) 0 0;
  font-size: var(--texto-sm);
  text-align: center;
}

@media (max-width: 480px) {
  .acceso {
    padding: var(--espacio-4);
  }

  .acceso__panel {
    padding: var(--espacio-6);
  }
}