> ## Documentation Index
> Fetch the complete documentation index at: https://tomee-mintlify-d9da6331.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Scripts personalizados

> Agrega JavaScript y CSS personalizados a tu sitio de documentación para analíticas, widgets, personalización de estilos e integraciones con terceros.

Usa CSS para dar estilo a los elementos HTML o agrega CSS y JavaScript personalizados para adaptar por completo el aspecto y la experiencia de tu documentación.

<div id="style-with-tailwind-css">
  ## Estiliza con Tailwind CSS
</div>

Usa Tailwind CSS v3 para dar estilo a elementos HTML. Puedes controlar el diseño, el espaciado, los colores y otras propiedades visuales. Algunas clases comunes son:

* `w-full` - Ancho completo
* `aspect-video` - Relación de aspecto 16:9
* `rounded-xl` - Esquinas redondeadas grandes
* `block`, `hidden` - Control de visualización
* `dark:hidden`, `dark:block` - Visibilidad en modo oscuro

Los valores arbitrarios de Tailwind CSS no están admitidos. Para valores personalizados, usa la prop `style`.

```html theme={null}
<img style={{ width: '350px', margin: '12px auto' }} src="/path/image.jpg" />
```

<Warning>
  Usar la prop `style` puede causar un desplazamiento del diseño al cargar la página, especialmente en páginas en modo personalizado. En su lugar, usa clases de Tailwind CSS o archivos CSS personalizados para evitar desplazamientos o parpadeos.
</Warning>

<div id="add-custom-css">
  ## Añadir CSS personalizado
</div>

Mintlify incluye automáticamente cualquier archivo `.css` dentro de tu directorio de contenido en todas las páginas de tu sitio de documentación, del mismo modo que incluye los archivos `.js` personalizados. No necesitas importar ni referenciar el archivo desde `docs.json` ni desde tus archivos MDX.

Para añadir estilos personalizados, crea un archivo `.css` (por ejemplo, `style.css`) en cualquier nivel de tu directorio de contenido. Cualquier nombre de clase, selector de ID o selector de elemento que definas quedará disponible en todos tus archivos MDX.

Por ejemplo, define una clase en `style.css`:

```css theme={null}
.my-callout {
  border-radius: 1rem;
  background: #f0f9ff;
  padding: 1rem;
}
```

Luego úsala en cualquier archivo MDX con la prop `className`:

```mdx theme={null}
<div className="my-callout">
  Contenido aquí.
</div>
```

Puedes combinar nombres de clase personalizados con clases de [Tailwind CSS](/es/customize/custom-scripts#style-with-tailwind-css) en el mismo elemento.

El CSS personalizado se aplica a todas las páginas de tu sitio, incluidas las páginas en modo personalizado y las páginas de aterrizaje. Para limitar los estilos a una página o sección específica, usa el selector de atributo `html[data-current-path="..."]` descrito en [Atributos de datos](#data-attributes).

Las referencias y el estilo de los elementos comunes están sujetos a cambios. Usa estilos personalizados con precaución, ya que pueden producirse cambios incompatibles en futuras actualizaciones.

Por ejemplo, puedes agregar el siguiente archivo `style.css` para personalizar los estilos de la barra de navegación y el pie de página.

```css theme={null}
#navbar {
  background: #fffff2;
  padding: 1rem;
}

footer {
  margin-top: 2rem;
}
```

Mintlify expone dos tipos de hooks CSS para segmentación:

* **Selectores de ID**: elementos únicos a nivel de página que se apuntan con `#value { }` en CSS
* **Selectores de elemento**: elementos de componente y diseño que se apuntan con `value { }` en CSS (sin prefijo `#` o `.`)

<Tip>
  Usa Inspeccionar elemento para encontrar referencias a los elementos que quieres personalizar.
</Tip>

<div id="id-selectors">
  ### Selectores de ID
</div>

Cada ID aparece una vez por página. Úsalos como `#value` en CSS. Por ejemplo, `#navbar { background: red; }`.

<AccordionGroup>
  <Accordion title="Diseño de página">
    * `#body-content` — Contenedor exterior del cuerpo de la página.
    * `#content-area` — Área de contenido principal, excluyendo la barra lateral y la tabla de contenidos.
    * `#content` — Elemento de contenido interno dentro del área de contenido.
    * `#header` — Elemento de encabezado a nivel de página.
    * `#banner` — Banner de anuncios que se muestra sobre la barra de navegación.
    * `#footer` — Pie de página. También se puede apuntar como selector de elemento: `footer`.
    * `#page-title` — El encabezado `<h1>` en la parte superior de cada página.
    * `#pagination` — Barra de paginación inferior con enlaces a la página anterior y siguiente.
    * `#panel` — Panel flotante superpuesto. También se puede apuntar como selector de elemento: `panel`.
    * `#background-color` — Elemento de color de fondo de la página.
  </Accordion>

  <Accordion title="Navegación">
    * `#navbar` — Barra de navegación superior.
    * `#topbar-cta-button` — Botón de llamada a la acción en la barra superior.
    * `#mobile-nav` — Superposición de navegación móvil.
    * `#mobile-nav-content` — Área de contenido dentro de la superposición de navegación móvil.
  </Accordion>

  <Accordion title="Barra lateral">
    * `#sidebar` — Panel de navegación de la barra lateral.
    * `#sidebar-content` — Área de contenido con desplazamiento dentro de la barra lateral.
  </Accordion>

  <Accordion title="Tabla de contenidos">
    * `#table-of-contents` — Panel de tabla de contenidos en el lado derecho de la página.
    * `#table-of-contents-layout` — Contenedor de diseño para la tabla de contenidos.
    * `#table-of-contents-content` — Contenido con desplazamiento dentro de la tabla de contenidos.
  </Accordion>

  <Accordion title="Búsqueda">
    * `#search-bar-entry` — Disparador de la barra de búsqueda en la barra superior.
    * `#search-bar-entry-mobile` — Disparador de la barra de búsqueda en móvil.
    * `#search-input` — Campo de entrada de texto dentro del modal de búsqueda.
  </Accordion>

  <Accordion title="Asistente IA">
    * `#assistant-entry` — Botón del asistente IA en la barra superior.
    * `#assistant-entry-mobile` — Botón del asistente IA en móvil.
    * `#chat-assistant-sheet` — Panel del chat del asistente IA.
    * `#chat-assistant-textarea` — Entrada de texto dentro del panel del asistente IA.
  </Accordion>

  <Accordion title="Referencia de API">
    * `#request-example` — Panel de ejemplo de solicitud en el playground de API.
    * `#response-example` — Panel de ejemplo de respuesta en el playground de API.
    * `#api-playground-input` — Sección de entrada del playground de API.
    * `#endpoints-menu-trigger` — Botón que abre el desplegable del selector de endpoints.
  </Accordion>

  <Accordion title="Bloques de código">
    * `#ask-assistant-code-block-button` — Botón "Preguntar al asistente" que aparece en los bloques de código.
    * `#code-snippet-feedback-button` — Botón de retroalimentación en los fragmentos de código.
    * `#code-snippet-feedback-textarea` — Área de texto dentro del formulario de retroalimentación de fragmentos de código.
  </Accordion>

  <Accordion title="Retroalimentación">
    * `#feedback-thumbs-up` — Botón de pulgar arriba en la parte inferior de la página.
    * `#feedback-thumbs-down` — Botón de pulgar abajo en la parte inferior de la página.
    * `#feedback-form` — Formulario de retroalimentación mostrado después de una respuesta negativa.
    * `#feedback-form-input` — Campo de texto dentro del formulario de retroalimentación.
    * `#feedback-form-cancel` — Botón de cancelar dentro del formulario de retroalimentación.
    * `#feedback-form-submit` — Botón de enviar dentro del formulario de retroalimentación.
  </Accordion>

  <Accordion title="Menú contextual de la página">
    * `#page-context-menu` — Menú de opciones contextuales para la página actual.
    * `#page-context-menu-button` — Botón que abre el menú contextual de la página.
  </Accordion>

  <Accordion title="Localización">
    * `#localization-select-trigger` — Botón que abre el selector de idioma.
    * `#localization-select-content` — Contenido del desplegable del selector de idioma.
    * `#localization-select-item` — Opción individual de idioma dentro del selector.
  </Accordion>

  <Accordion title="Registro de cambios">
    * `#changelog-filters` — Controles de filtro en una página de registro de cambios.
    * `#changelog-filters-content` — Área de contenido dentro del panel de filtros del registro de cambios.
  </Accordion>

  <Accordion title="Multi-vista">
    * `#multi-view-dropdown` — Desplegable para cambiar entre vistas de documentación.
  </Accordion>

  <Accordion title="Selección de texto">
    * `#text-selection-tooltip` — Tooltip que aparece al seleccionar texto en la página.
    * `#text-selection-tooltip-button` — Botón de acción dentro del tooltip de selección de texto.
  </Accordion>
</AccordionGroup>

<div id="element-selectors">
  ### Selectores de elemento
</div>

Pueden aparecer múltiples instancias de estos elementos en una página. Úsalos como `value` en CSS. Por ejemplo, `accordion { border: 1px solid red; }`.

<AccordionGroup>
  <Accordion title="Componentes de contenido">
    * `accordion` — Elemento de acordeón desplegable.
    * `accordion-group` — Contenedor que agrupa múltiples acordeones.
    * `callout` — Bloque de llamada de atención (Note, Warning, Tip, etc.).
    * `card` — Elemento de tarjeta individual.
    * `card-group` — Contenedor que agrupa múltiples tarjetas. Obsoleto a favor de `columns`, pero conservado por compatibilidad.
    * `columns` — Contenedor de diseño multicolumna.
    * `code-block` — Elemento de bloque de código.
    * `code-block-icon` — Icono mostrado en el encabezado de un bloque de código.
    * `code-group` — Grupo con pestañas de bloques de código.
    * `expandable` — Elemento de sección expandible.
    * `frame` — Contenedor de marco para imágenes o contenido incrustado.
    * `icon` — Elemento de icono en línea.
    * `mermaid` — Contenedor de diagrama Mermaid.
    * `step` — Paso individual dentro de una secuencia de pasos.
    * `steps` — Contenedor de pasos numerados.
    * `tab-icon` — Icono mostrado dentro de una pestaña.
    * `tabs` — Contenedor de contenido con pestañas.
    * `tile` — Elemento de componente tile.
    * `tooltip` — Elemento de tooltip.
    * `update` — Entrada de actualización del registro de cambios.
  </Accordion>

  <Accordion title="Diseño de página">
    * `mdx-content` — Área de contenido MDX renderizado.
    * `panel` — Componente de panel flotante. También se puede apuntar como selector de ID: `#panel`.
    * `eyebrow` — Pequeña etiqueta que se muestra sobre el título de la página.
    * `link` — Elemento de enlace anchor.
    * `breadcrumb-list` — Lista de navegación por migas de pan.
    * `breadcrumb-item` — Elemento individual de miga de pan.
  </Accordion>

  <Accordion title="Navegación de la barra superior">
    * `nav-logo` — Logo en la barra de navegación.
    * `navbar-link` — Elemento de enlace dentro de la barra de navegación.
    * `nav-anchors` — Contenedor de enlaces de anclaje en la barra superior.
    * `nav-anchor` — Enlace de anclaje individual en la barra superior.
    * `nav-tabs` — Barra de pestañas en la navegación superior.
    * `nav-tabs-item` — Elemento de pestaña individual en la barra de pestañas de la navegación superior.
    * `mobile-nav-tabs-item` — Elemento de pestaña en la barra de pestañas de la navegación móvil.
    * `topbar-right-container` — Sección derecha de la barra superior.
    * `nav-tag-pill` — Etiqueta tipo píldora en la navegación.
    * `nav-tag-pill-text` — Texto dentro de una etiqueta tipo píldora de navegación.
  </Accordion>

  <Accordion title="Desplegable de la barra superior">
    * `nav-dropdown-trigger` — Botón que abre un desplegable de navegación.
    * `nav-dropdown-content` — Contenedor de contenido de un desplegable de navegación.
    * `nav-dropdown-item` — Elemento individual dentro de un desplegable de navegación.
    * `nav-dropdown-item-text-container` — Contenedor de texto dentro de un elemento del desplegable.
    * `nav-dropdown-item-title` — Texto del título dentro de un elemento del desplegable.
    * `nav-dropdown-item-description` — Texto de descripción dentro de un elemento del desplegable.
    * `nav-dropdown-item-icon` — Icono dentro de un elemento del desplegable.
  </Accordion>

  <Accordion title="Selector de productos">
    * `nav-dropdown-products-selector-trigger` — Botón que abre el desplegable del selector de productos.
    * `nav-dropdown-products-selector-content` — Contenedor de contenido del selector de productos.
    * `nav-dropdown-products-selector-item` — Producto individual en el selector.
    * `nav-dropdown-products-selector-item-title` — Título de un elemento del selector de productos.
    * `nav-dropdown-products-selector-item-description` — Descripción de un elemento del selector de productos.
    * `nav-dropdown-products-selector-item-icon` — Icono de un elemento del selector de productos.
  </Accordion>

  <Accordion title="Barra lateral">
    * `sidebar-group` — Grupo de enlaces relacionados en la barra lateral.
    * `sidebar-group-icon` — Icono de un grupo de la barra lateral.
    * `sidebar-group-header` — Etiqueta de encabezado de un grupo de la barra lateral.
    * `sidebar-title` — Título de nivel superior en la barra lateral.
    * `sidebar-nav-group-divider` — Divisor entre grupos de navegación de la barra lateral.
  </Accordion>

  <Accordion title="Tabla de contenidos">
    * `toc` — Contenedor de la tabla de contenidos.
    * `toc-item` — Entrada individual de encabezado en la tabla de contenidos.
  </Accordion>

  <Accordion title="Pie de página">
    * `footer` — Pie de página estándar. También se puede apuntar como selector de ID: `#footer`.
    * `advanced-footer` — Pie de página extendido con columnas o contenido adicional.
  </Accordion>

  <Accordion title="Paginación">
    * `pagination-prev` — Enlace a la página anterior en la barra de paginación.
    * `pagination-next` — Enlace a la página siguiente en la barra de paginación.
    * `pagination-title` — Título de página que se muestra en la barra de paginación.
  </Accordion>

  <Accordion title="Referencia de API">
    * `api-section` — Sección completa para un endpoint de API.
    * `api-section-heading` — Área de encabezado de una sección de endpoint de API.
    * `api-section-heading-title` — Título dentro del encabezado de una sección de endpoint de API.
    * `api-section-heading-subtitle` — Subtítulo dentro del encabezado de una sección de endpoint de API.
    * `field` — Campo de parámetro o propiedad en la referencia de API.
    * `option-dropdown` — Desplegable para seleccionar entre opciones de API.
    * `tryit-button` — Botón "Try it" que abre el playground de API.
    * `method-pill` — Insignia de método HTTP (GET, POST, etc.) en un endpoint.
    * `method-nav-pill` — Insignia de método HTTP que se muestra en la navegación de la barra lateral.
    * `prompt` — Componente de prompt en la referencia de API.
  </Accordion>

  <Accordion title="Asistente IA">
    * `chat-assistant-sheet` — Contenedor del panel del asistente IA.
    * `chat-assistant-sheet-header` — Encabezado del panel del asistente IA.
    * `chat-assistant-sheet-content` — Área de contenido del panel del asistente IA.
    * `chat-assistant-input` — Entrada de texto dentro del panel del asistente IA.
    * `chat-assistant-floating-input` — Variante de entrada flotante del asistente IA.
    * `chat-assistant-send-button` — Botón de enviar en el panel del asistente IA.
    * `chat-assistant-disclaimer-text` — Texto de descargo de responsabilidad en el panel del asistente IA.
    * `chat-assistant-payload-item` — Mensaje o resultado individual en el panel del asistente.
    * `starter-question-text` — Pregunta sugerida de inicio mostrada en un panel de asistente vacío.
  </Accordion>

  <Accordion title="Retroalimentación">
    * `feedback-toolbar` — Barra de herramientas que contiene controles de retroalimentación de la página.
    * `contextual-feedback-container` — Contenedor para retroalimentación contextual en línea.
    * `contextual-feedback-form` — Formulario de retroalimentación contextual en línea.
    * `contextual-feedback-form-title` — Título del formulario de retroalimentación contextual.
    * `contextual-feedback-input` — Campo de texto dentro del formulario de retroalimentación contextual.
    * `contextual-feedback-button` — Botón de acción dentro del formulario de retroalimentación contextual.
    * `contextual-feedback-form-submit-button` — Botón de envío del formulario de retroalimentación contextual.
  </Accordion>

  <Accordion title="Retroalimentación de fragmentos de código">
    * `code-snippet-feedback-popover-content` — Contenido del popover para retroalimentación de fragmentos de código.
    * `code-snippet-feedback-form` — Formulario de retroalimentación para un fragmento de código.
    * `code-snippet-feedback-textarea` — Área de texto dentro del formulario de retroalimentación del fragmento de código.
    * `code-snippet-feedback-form-title` — Título del formulario de retroalimentación del fragmento de código.
    * `code-snippet-feedback-form-description` — Texto descriptivo en el formulario de retroalimentación del fragmento de código.
    * `code-snippet-feedback-form-submit-button` — Botón de envío del formulario de retroalimentación del fragmento de código.
  </Accordion>

  <Accordion title="Autenticación">
    * `login-link` — Enlace que inicia el flujo de inicio de sesión.
    * `logout-link` — Enlace que inicia el flujo de cierre de sesión.
  </Accordion>

  <Accordion title="Multi-vista">
    * `multi-view-item` — Opción de vista individual en un conmutador de multi-vista.
    * `multi-view-dropdown` — Desplegable para seleccionar entre múltiples vistas.
    * `multi-view-dropdown-trigger` — Botón que abre el desplegable de multi-vista.
    * `multi-view-dropdown-content` — Área de contenido del desplegable de multi-vista.
    * `multi-view-dropdown-item` — Elemento individual dentro del desplegable de multi-vista.
  </Accordion>

  <Accordion title="Directorio">
    * `directory` — Contenedor raíz para una página de directorio.
    * `directory-group` — Grupo de páginas relacionadas dentro de un directorio.
    * `directory-page` — Entrada de página individual en un directorio.
    * `directory-card` — Entrada de página tipo tarjeta en un directorio.
  </Accordion>

  <Accordion title="Página 404">
    * `not-found-container` — Contenedor raíz de la página 404.
    * `not-found-status-code` — Visualización del código de estado en la página 404.
    * `not-found-title` — Encabezado del título en la página 404.
    * `not-found-description` — Texto descriptivo en la página 404.
    * `not-found-recommended-pages-list` — Lista de páginas recomendadas mostradas en la página 404.
    * `not-found-recommended-page-link` — Enlace individual en la lista de páginas recomendadas.
  </Accordion>

  <Accordion title="Color">
    * `color` — Elemento de muestra de color.
    * `color-row` — Fila que agrupa muestras de color.
    * `color-item` — Elemento de color individual dentro de una fila de colores.
  </Accordion>

  <Accordion title="Árbol">
    * `tree` — Contenedor de árbol de archivos.
    * `tree-folder` — Entrada de carpeta dentro de un árbol de archivos.
    * `tree-file` — Entrada de archivo dentro de un árbol de archivos.
  </Accordion>

  <Accordion title="Atributos de datos">
    Algunos elementos exponen atributos de datos que puedes usar como selectores CSS.

    Estado activo (`data-active`):

    * `nav-dropdown-item[data-active]` — Elemento activo en un desplegable de navegación.
    * `mobile-nav-tabs-item[data-active]` — Pestaña activa en la navegación móvil.
    * `sidebar-group[data-active]` — Grupo activo de la barra lateral.
    * `#sidebar-content li[data-active]` — Enlace activo de la barra lateral.
    * `.nav-tabs-item[data-active]` — Pestaña activa de la navegación superior. Solo se aplica a pestañas simples; las pestañas con menús desplegables no reciben `data-active`. Nota el `.` inicial: esto apunta a una clase en un elemento `<a>` estándar, a diferencia de la mayoría de los otros componentes que usan nombres de elementos personalizados.
    * `toc-item[data-active]` — Elemento activo de la tabla de contenidos.
    * `toc-item[data-active-deepest]` — Elemento más profundo activo de la tabla de contenidos. Solo presente en el encabezado exacto actualmente visible, a diferencia de `data-active` que también se establece en sus encabezados padres.

    Nombre de componente (`data-component-name`):

    Usa `data-component-name` para apuntar a componentes de interfaz específicos con un selector estable que persiste si los nombres de clases internos cambian.

    * `[data-component-name="mermaid-container"]` — Contenedor de diagrama Mermaid, incluyendo la superposición de controles de zoom.
    * `[data-component-name="mermaid-controls-wrapper"]` — Controles de zoom y desplazamiento de Mermaid.
    * `[data-component-name="primary-header-button"]` — Botón principal del encabezado. Solo en el tema Sequoia.
    * `[data-component-name="theme-toggle"]` — Interruptor de tema.

    Parte de componente (`data-component-part`):

    Usa `data-component-part` para apuntar a sub-elementos dentro de un componente.

    * `[data-component-part="contact-support-button"]` — El wrapper `<a>` alrededor del enlace de contacto de soporte en el panel del asistente.
    * `[data-component-part="contact-support-icon"]` — El `<span>` que envuelve el icono.
    * `[data-component-part="contact-support-text"]` — El elemento `<p>` que contiene la etiqueta.

    Atributos de Badge:

    * `[data-badge]` — Cualquier elemento de badge.
    * `[data-badge][data-color="blue"]` — Badge filtrado por color.
    * `[data-badge][data-size="sm"]` — Badge filtrado por tamaño.

    Ruta actual (`data-current-path`):

    Usa `data-current-path` para aplicar CSS personalizado en páginas o subrutas específicas.

    * `html[data-current-path="/"]` — Coincide con la página raíz.
    * `html[data-current-path="/quickstart"]` — Coincide con una página específica.
    * `html[data-current-path^="/api-reference/"]` — Coincide con cualquier página dentro de una sección.
  </Accordion>
</AccordionGroup>

<div id="custom-javascript">
  ## JavaScript personalizado
</div>

El JavaScript personalizado te permite agregar código ejecutable a nivel global. Es equivalente a insertar una etiqueta `<script>` con código JS en cada página.

Mintlify incluye cualquier archivo `.js` dentro de tu directorio de contenido en cada página de tu sitio de documentación, incluidas las páginas en modo personalizado y las páginas de aterrizaje. Los archivos JavaScript personalizados se ejecutan después de que la página se vuelve interactiva. No puedes limitarlos a páginas específicas y, cuando hay varios archivos `.js` presentes, todos se ejecutan sin un orden garantizado.

Para cargar un script de terceros, inyecta un elemento `<script>` desde tu archivo JavaScript personalizado en lugar de agregar etiquetas `<script src="...">` directamente en MDX:

```js theme={null}
const script = document.createElement('script');
script.src = 'https://example.com/widget.js';
script.async = true;
document.head.appendChild(script);
```

Por ejemplo, puedes agregar el archivo `ga.js` siguiente para habilitar [Google Analytics](https://marketingplatform.google.com/about/analytics) en toda la documentación.

```js theme={null}
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TAG_ID');
```

<Warning>
  Úsalo con precaución para no introducir vulnerabilidades de seguridad.
</Warning>