---
title: "Referencia de la hoja de estilos de Embedded Authentication"
url: https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/reference-stylesheet-embedded/
description: "Catalyst Authentication te permite proporcionar autenticación segura e inicios de sesión para los usuarios de tu aplicación, y gestionar sus cuentas de usuario."
last_updated: 2026-08-17T12:16:04Z
service: Cloud Scale
type: general
---

# Hoja de estilos de referencia para Embedded Authentication

Esta página lista y proporciona descripciones para todas las clases e IDs CSS que necesitarás para estilizar tu elemento de inicio de sesión en el tipo [Embedded Authentication](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/introduction/). Catalyst proporciona archivos CSS individuales para el formulario Conventional Login, el formulario Social-Login Only y el formulario Password Reset, con IDs y clases CSS individuales para cada uno.

Estos IDs y clases CSS están predefinidos por Catalyst para tu comodidad. Simplemente puedes incorporarlos en tu hoja de estilos según tu necesidad, y personalizar el diseño y la marca de los elementos de inicio de sesión. Debes importar el archivo CSS que configures en los scripts de tu formulario de inicio de sesión de esta autenticación.

Antes de comenzar a estilizar tu iFrame, descarga el archivo CSS requerido.

Hoja de estilos CSS para:
* Formulario Conventional Login - [Descargar](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin.css)
* Formulario Social Login-only - [Descargar](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_signin_providers_only.css)
* Formulario Confirm Password - [Descargar](https://api.catalyst.zoho.com/__catalyst/auth/static-file?file_name=confirm_password.css)
* Formulario Password Reset - [Descargar](https://api.catalyst.zoho.com/baas/v1/auth/static-file?file_name=embedded_password_reset.css)

> **Nota:** Después de descargar la hoja de estilos, comienza a estilizar tu elemento de inicio de sesión después de la última línea de código. Recomendamos encarecidamente que no modifiques el código que ya está presente. Modificarlo de cualquier manera podría no renderizar el iFrame correctamente. Consulta esta [hoja](https://docs.catalyst.zoho.com/es/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/styling-embedded-auth/) para obtener información más detallada sobre cómo aparecería cada uno de los formularios mencionados arriba a los usuarios finales.

### Sección donde el usuario final ingresa su dirección de correo electrónico

![cloud_scale_auth_embedded_style_sheet_1](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_1.webp)

#### Sección 1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#headtitle</td>
			<td>El ID que maneja los elementos de estilo presentes en el título del iFrame</td>
		</tr>
	</tbody>
</table>

#### Sección 2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#login_id</td>
			<td>El ID que maneja el estilo del campo de entrada</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>La clase que maneja el tamaño del texto de error</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>La clase que maneja el esquema de color del mensaje de error</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>La clase que maneja el color del borde que aparece en caso de error, alrededor del campo de entrada</td>
		</tr>
	</tbody>
</table>

#### Sección 3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#nextbtn</td>
			<td>El ID que maneja el estilo del botón "**NEXT**"</td>
		</tr>
	</tbody>
</table>

#### Sección 4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#forgotpassword</td>
			<td>El ID que maneja el estilo del literal "**Forgot Password**"</td>
		</tr>
	</tbody>
</table>

#### Sección 5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.fed_div</td>
			<td>La clase que maneja el tamaño, la altura, el cursor y el desbordamiento de la opción de social login en su conjunto</td>
		</tr>
        <tr>
			<td>.zoho_fed_box</td>
			<td>La clase que maneja el esquema de color del social login de Zoho</td>
		</tr>
        <tr>
			<td>.fed_icon</td>
			<td>La clase que maneja el tamaño de los logos de todos los social logins</td>
		</tr>
        <tr>
			<td>..zoho_icon</td>
			<td>La clase que maneja el ícono del logo del social login de Zoho</td>
		</tr>
	</tbody>
</table>

### Sección donde el usuario final ingresa su contraseña

![cloud_scale_auth_embedded_style_sheet_2](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_2.webp)

#### Sección 1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>La clase que maneja el campo de dirección de correo electrónico</td>
		</tr>
	</tbody>
</table>

#### Sección 2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.Notyou</td>
			<td>La clase que maneja el tamaño de fuente del literal "**Change**"</td>
		</tr>
        <tr>
			<td>.bluetext</td>
			<td>La clase que maneja el color y otras propiedades del literal "**Change**"</td>
		</tr>
	</tbody>
</table>

#### Sección 3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>El ID que maneja las diversas propiedades del campo de entrada</td>
		</tr>
        <tr>
			<td>.fielderror</td>
			<td>La clase que maneja el tamaño del texto de error</td>
		</tr>
        <tr>
			<td>.errorborder</td>
			<td>La clase que maneja el color del borde que aparece en caso de error alrededor del campo de entrada</td>
		</tr>
        <tr>
			<td>.errorlabel</td>
			<td>La clase que maneja el esquema de color del texto de error</td>
		</tr>
        <tr>
			<td>.show_hide_password</td>
			<td>La clase que maneja las propiedades del ícono de visibilidad</td>
		</tr>
        <tr>
			<td>.icon_hide</td>
			<td>La clase que maneja las propiedades del ícono oculto</td>
		</tr>
        <tr>
			<td>.icon_show</td>
			<td>La clase que maneja las propiedades del ícono de visibilidad cuando se hace clic</td>
		</tr>
	</tbody>
</table>

#### Sección 4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue_text_action</td>
			<td>La clase que maneja el esquema de color, tamaño de fuente y otras propiedades de ambos literales</td>
		</tr>
	</tbody>
</table>

#### Sección 5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>La clase que maneja el esquema de color del botón y cuadro de Sign In</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>La clase que maneja el tamaño del botón</td>
		</tr>
	</tbody>
</table>

### Sección donde el usuario final confirma su contraseña
![cloud_scale_auth_embedded_style_sheet_4](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_4.webp)

#### Sección 1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.confirmtitle</td>
			<td>La clase que maneja los elementos de estilo presentes en el título.</td>
		</tr>
		<tr>
			<td>.confirmdesc</td>
			<td>Este es el elemento de notificación/descripción que indica crear una contraseña fuerte y única en la parte inferior del elemento del título.</td>
		</tr>
		<tr>
			<td>.confirm_head</td>
			<td>La clase que maneja el estilo del fondo del formulario de confirmación.</td>
		</tr>
	</tbody>
</table>

#### Sección 2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.username</td>
			<td>La clase que maneja el campo de dirección de correo electrónico.</td>
		</tr>
		<tr>
			<td>.icon-profile</td>
			<td>La clase que maneja el perfil en ese campo de dirección de correo electrónico.</td>
		</tr>
	</tbody>
</table>

#### Sección 3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#password</td>
			<td>El ID que maneja los elementos de estilo presentes en el campo de entrada de contraseña.</td>
		</tr>
		<tr>
			<td>.icon-hide</td>
			<td>La clase que maneja las propiedades del ícono oculto</td>
		</tr>
		<tr>
			<td>.show_hide_password</td>
			<td>La clase que maneja las propiedades de la visibilidad del ícono</td>
		</tr>
		<tr>
			<td>.fielderror</td>
			<td>La clase que maneja el tamaño del texto de error.</td>
		</tr>
		<tr>
			<td>.passwordpolicy</td>
			<td>La clase que maneja la ventana emergente que contiene la política de contraseña.</td>
		</tr>
	</tbody>
</table>

#### Sección 4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#cpassword</td>
			<td>El ID que maneja el campo de entrada para confirmar contraseña.</td>
		</tr>
	</tbody>
</table>

#### Sección 5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#nextbtn</td>
			<td>El ID que maneja el botón de confirmación.</td>
		</tr>
</table>

### Sección donde el usuario final ingresa el CAPTCHA

![cloud_scale_auth_embedded_style_sheet_3](https://catalyst-docs-development.zohostratus.in/images/help/authentication/cloud_scale_auth_embedded_style_sheet_3.webp)

#### Sección 1 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#headtitle</td>
			<td>El ID que maneja los elementos de estilo presentes en el título del iFrame</td>
		</tr>
	</tbody>
</table>

#### Sección 2 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.user_info</td>
			<td>La clase que maneja los elementos de estilo del borde del cuadro</td>
		</tr>
        <tr>
			<td>.menutext</td>
			<td>La clase que maneja el estilo del ID de correo electrónico del usuario</td>
		</tr>
	</tbody>
</table>

#### Sección 3 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.changeuser</td>
			<td>La clase que maneja los elementos de estilo presentes en el literal "**Change**"</td>
		</tr>
	</tbody>
</table>

#### Sección 4 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>#captcha_container</td>
			<td>El ID que maneja el estilo del cuadro que rodea el cuadro de control de Captcha</td>
		</tr>
        <tr>
			<td>.reload_captcha ::before</td>
			<td>La clase que maneja el estilo del botón de recarga, antes de que se haga clic</td>
		</tr>
        <tr>
			<td>.text_box</td>
			<td>La clase que maneja las propiedades del campo de entrada</td>
		</tr>
	</tbody>
</table>

#### Sección 5 

<table class="content-table">
	<thead>
		<tr>
			<th class="w50p">IDs y clases CSS</th>
			<th class="w50p">Descripción</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>.blue</td>
			<td>La clase que maneja el esquema de color del botón y cuadro</td>
		</tr>
        <tr>
			<td>.btn</td>
			<td>La clase que maneja el tamaño del botón</td>
		</tr>
	</tbody>
</table>