Anatomía del componente

Esta sección nombra las áreas visibles del componente. Los mismos nombres se usan en la documentación de tokens para que cada token pueda asociarse con la parte de la interfaz a la que afecta.

Contenedores

Contenedores del componente

Las mismas áreas cuando el contenido es una vista de estado: la Pantalla y el Contenedor no cambian.

Contenedores en una vista de estado

Área	Descripción
Pantalla	Fondo exterior del componente embebido.
Contenedor	Bloque central que agrupa cabecera, lista de consentimientos y pie.
Cabecera	Sección superior con título, descripción opcional y selector de idioma.
Lista de consentimientos	Sección central donde se renderizan los consentimientos.
Pie	Sección inferior con alerta de validación y botón CTA.

Cabecera

Cabecera del componente

Área	Descripción
Cabecera	Área superior que agrupa título, descripción de cabecera y selector de idioma.
Título	Encabezado principal mostrado en la parte superior del componente.
Descripción de cabecera	Texto explicativo opcional mostrado bajo el título.
Selector de idioma	Control usado para cambiar el idioma del componente cuando hay varios disponibles.
Menú de idioma	Desplegable que muestra las opciones de idioma disponibles.

Consentimientos

Consentimientos del componente

Área	Descripción
Consentimiento padre	Consentimiento principal. Puede agrupar consentimientos hijo relacionados.
Consentimiento hijo	Consentimiento anidado bajo un consentimiento padre.
Texto de consentimiento	Texto principal que identifica el consentimiento.
Descripción de consentimiento	Texto explicativo que aporta más detalle sobre el consentimiento.
Botón de despliegue	Control usado para mostrar u ocultar contenido adicional del consentimiento.
Icono de ayuda	Icono que abre o muestra información adicional sobre un consentimiento.
Control de selección	Control usado para aceptar, rechazar o activar un consentimiento. Puede ser switch o checkbox.

Tarjetas de consentimiento

Área	Descripción
Tarjeta de consentimiento	Contenedor visual que envuelve un consentimiento en modo `boxed`. En modo `flat`, los consentimientos no se muestran como tarjetas.

Acciones y feedback

Acciones y feedback del componente

Área	Descripción
Diálogo informativo	Panel flotante que muestra información adicional sobre un consentimiento.
Alerta de validación	Mensaje mostrado cuando el usuario debe revisar o completar la selección de consentimientos.
Botón CTA	Botón de acción principal usado para enviar o guardar el estado actual de selección.

Vistas de estado

El componente sustituye la lista de consentimientos por una vista de estado cuando el flujo termina o no puede continuar. Ocurre en seis situaciones: cuatro de error (fallo al cargar, sin conexión, fallo al guardar y navegador no compatible) y dos informativas (no hay consentimientos pendientes y configuración guardada correctamente).

Con la opción de mostrar selector de idioma activa, el Selector de idioma se muestra dentro de la Cabecera de estado. Sin selector de idioma, la cabecera de estado no se muestra.

Vistas de estado

La Cabecera de estado solo aparece con la opción de mostrar selector de idioma activa:

Cabecera de una vista de estado

Área	Descripción
Contenedor	El mismo bloque central de siempre. Conserva su fondo, borde y radio cuando el contenido es una vista de estado.
Vista de estado	Bloque que sustituye a la lista de consentimientos cuando el flujo termina o no puede continuar.
Cabecera de estado	Franja superior de la vista. Solo aparece con la opción de mostrar selector de idioma activa, que es lo único que contiene.
Icono de estado	Icono circular que encabeza la vista e identifica el tipo de resultado.
Título de estado	Titular que resume el resultado.
Descripción de estado	Texto explicativo mostrado bajo el titular.
Botón CTA	El mismo botón principal del Pie. Aparece en las vistas de error que ofrecen reintentar, con los mismos tokens.
Detalles técnicos	Enlace desplegable con el código y la referencia del error. Aparece en las vistas de fallo al cargar y al guardar.