# Pantallas de acceso

> El aspecto de las pantallas de login, registro y recuperación de contraseña: modelo, logo, color e imagen lateral, con vista previa antes de guardar.

Las pantallas de acceso son el primer contacto del alumno con tu plataforma. Son seis: login, registro, recuperación de contraseña, nueva contraseña, verificación en dos pasos y registro completado. En **Configuraciones > Pantallas de acceso** eliges el modelo visual de esas pantallas, el logo, el color y la imagen lateral. Después revisas el resultado antes de guardar.

## Qué cambia esta pantalla y qué no cambia

Esta pantalla cambia solo el aspecto. El resto está en otras pantallas:

- **Reglas de entrada** (contraseña fuerte, login con Google, límite de dispositivos): [Autenticación](/es/configuracoes/autenticacao), en Accesos y seguridad.
- **Registro gratuito**: **Configuraciones > Alumnos > Registro gratuito** ([Configuraciones de alumnos](/es/configuracoes/cadastro-de-alunos)).
- **Pie de página de las pantallas de acceso**: **Configuraciones > Área del alumno > Pie de página** ([Área del alumno](/es/configuracoes/area-do-aluno)).

**La regla más importante:** nada cambia para los alumnos hasta que haces clic en **Guardar ahora** en la barra del pie de página. Antes de guardar, usa **Previsualizar** para ver las pantallas reales con el modelo elegido.

## Modelo

En **Modelo**, la pregunta **¿Qué modelo usa esta plataforma?** muestra cuatro tarjetas:

| Modelo | Cómo es |
|---|---|
| **Clásico** | El diseño con un panel de imagen junto al formulario |
| **Aurora** | Fondo oscuro en degradado, con el formulario en una tarjeta translúcida |
| **Escenario** | Fondo oscuro con el formulario centrado bajo un anillo de color |
| **Editorial** | Fondo claro en dos columnas, con la frase destacada |

Cada modelo tiene su propio fondo. Si eliges un modelo diferente del Clásico, la pantalla muestra dos avisos:

- Revisa en la vista previa si tu logo se lee bien sobre el fondo. Aurora y Escenario son oscuros, Editorial es claro, y la imagen enviada es la misma en todos.
- Los códigos personalizados hechos para el modelo Clásico pueden necesitar revisión.

**Frase destacada** aparece solo en los modelos Aurora y Editorial, junto al formulario. Tiene hasta 120 caracteres. Con el campo en blanco, aparece la frase del modelo: "Todo tu contenido, en un solo lugar." en Aurora y "Aprende a tu ritmo." en Editorial. En Aurora, la frase solo aparece en pantallas anchas.

## Logo

En **Logo**, envía la **Imagen** que aparece en la parte superior de las pantallas de login, registro y recuperación de contraseña. JPG o PNG, hasta 200 kb.

- **Alineación**: **Izquierda**, **Centro** o **Derecha**.
- **Altura**: de 20 a 120 px.

Sin logo enviado, las pantallas muestran la marca predeterminada de Cademí.

## Formulario y botones

- **Lado del formulario**: **Izquierda** o **Derecha**, en pantallas más grandes. Solo existe en los modelos Clásico y Editorial. Aurora y Escenario tienen posición fija.
- **Modo claro u oscuro**: **Seguir el área del alumno**, **Claro** u **Oscuro**. Vale para los cuatro modelos. Con **Seguir el área del alumno**, las pantallas acompañan el **Modo de visualización** del área del alumno.
- **Color de destaque**: el color de los botones, de los enlaces y del fondo de las pantallas de acceso, en los cuatro modelos.

Cómo funciona el **Color de destaque**:

- Con el campo vacío, las pantallas siguen el color de destaque del área del alumno. La pantalla muestra **Siguiendo el color de destaque del área del alumno.**
- Si eliges un color (en el selector o en los **Colores sugeridos**), las pantallas usan ese color.
- **Usar el color del área del alumno** limpia el campo. Las pantallas vuelven a seguir el área del alumno.
- La **Vista previa** justo debajo muestra el botón **Acceder** y el enlace **Olvidé mi contraseña** con el color elegido, también al pasar el mouse.

## Panel visual

El panel es la parte que aparece junto al formulario en pantallas más grandes.

- **Imagen del panel visual**: la imagen del panel. JPG de 1280x1024, hasta 850 kb.
- **Posición de la imagen**: **Izquierda**, **Centro** o **Derecha**. Es la parte de la imagen que queda en evidencia en el panel.
- **Ancho del panel**: solo en el modelo Clásico. **Estrecha**, **Predeterminado**, **Media**, **Ancha** o **Muy ancha**.

## Paso a paso

Para cambiar el aspecto de las pantallas:

1. En el panel, abre **Configuraciones > Pantallas de acceso**.
2. En **Modelo**, haz clic en la tarjeta del modelo. La descripción debajo de las tarjetas cambia con la elección.
3. Haz clic en **Previsualizar**.
4. En la franja de la vista previa, alterna entre las pantallas.
5. Vuelve al panel y ajusta **Logo**, **Formulario y botones** y **Panel visual**.
6. Haz clic en **Guardar ahora**.

La vista previa abre en una pestaña nueva, con el modelo elegido y los colores ya guardados. Una franja avisa que el modelo todavía no está publicado. En ella alternas entre **Iniciar sesión**, **Registro**, **Olvidé mi contraseña**, **Nueva contraseña**, **Verificación en dos pasos** y **Registro completado**. Después de guardar, los alumnos ven el aspecto nuevo.

**Atención: la vista previa usa los colores y el logo ya guardados.** Pedro elige un color nuevo y abre la vista previa. El color nuevo no aparece, porque todavía no guardó. Para ver un color nuevo en las pantallas reales, guarda antes de previsualizar de nuevo.

## Para tener en cuenta

- **La vista previa no es la publicación.** Nada cambia para los alumnos hasta que guardas. La vista previa muestra el modelo elegido en el momento, pero los colores y el logo son los guardados.
- **Los píxeles y los códigos personalizados pueden no aparecer en la vista previa.** Muestra las pantallas, no los códigos de seguimiento.
- **Pantalla de registro.** Solo recibe alumnos si el registro gratuito está activado en **Configuraciones > Alumnos > Registro gratuito** ([Configuraciones de alumnos](/es/configuracoes/cadastro-de-alunos)). Su aspecto, en cambio, se define aquí, junto con las otras pantallas. La vista previa muestra la pantalla **Registro** incluso con el registro gratuito desactivado, para que revises el aspecto. En **Iniciar sesión**, el enlace **Crea tu cuenta** solo aparece con el registro gratuito activado, como les pasa a los alumnos.
- **Un solo color.** Los botones, los enlaces y el fondo salen del mismo color de destaque. No existe un color separado para texto, enlace o botón.
- **Aviso de instalación de la aplicación.** Con la [Aplicación](/es/configuracoes/aplicativo) configurada, la pantalla de login del modelo Clásico muestra, en el celular, la instrucción para instalarla.

## Preguntas frecuentes

**Mi logo desapareció en el fondo oscuro. ¿Qué hago?** Envía una versión del logo que se lea bien sobre el fondo del modelo: clara para Aurora y Escenario, oscura para Editorial. O cambia el **Modo claro u oscuro**. La imagen es una sola para los cuatro modelos.

**Quiero la pantalla de login en mi color, pero el área del alumno en otro.** Define el **Color de destaque** aquí. Con él completado, las pantallas de acceso no siguen el color del área del alumno.

**Elegí un color y la vista previa no cambió.** La vista previa usa los colores ya guardados. Haz clic en **Guardar ahora** y abre la vista previa de nuevo.

**Cambié el modelo y mi código personalizado rompió la pantalla.** Los códigos hechos para el modelo Clásico pueden depender de la estructura anterior. Revisa el código en **Configuraciones > Código personalizado** o vuelve al Clásico.