> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS personalizado

> Agrega CSS personalizado para afinar tu Aftersell Cart más allá de las configuraciones de diseño integradas.

Cuando las [configuraciones de diseño](/es/aftersell/cart/design-settings) integradas no llegan lo suficientemente lejos, agrega tu propio **CSS personalizado** para dar estilo al carrito.

<div id="where-to-add-it">
  ## Dónde agregarlo
</div>

En el editor de carrito, abre **Cart settings → Custom CSS**. Tu CSS **se aplica a todo el carrito** y se carga **después** de los estilos base del carrito, por lo que tus reglas tienen prioridad.

<div id="target-public-classes-only">
  ## Apunta solo a las clases públicas
</div>

Dale estilo al carrito usando sus **clases públicas `cart-external-*`**. El editor las autocompleta y te advierte sobre el resto:

* **`cart-external-*`**: el objetivo público y soportado. Usa estas. No llevan estilo propio, así que existen únicamente para que tu CSS se enganche a ellas.
* **`cart-internal-*`**: la tubería interna del carrito, donde vive todo su estilo integrado. El editor marca los selectores que las usan como errores. No se cambian a la ligera, ya que todos los carritos existentes dependen de ellas, pero le pertenecen al carrito y no son un contrato contigo. Reestiliza a través de la clase gemela `cart-external-*` en su lugar.
* Otras clases `cart-*` que el editor no reconoce se marcan como advertencias.

<Note>
  Verás clases `cart-internal-*` en el marcado, incluso en la [plantilla personalizada](/es/aftersell/cart/custom-templates) predeterminada de cada bloque. Eso es lo esperado: son lo que le da a un bloque su apariencia integrada. La regla aquí trata sobre **los selectores que escribes** en este panel, no sobre los nombres de clase que renderiza el carrito.

  Si estás escribiendo una plantilla personalizada que cambia la estructura del DOM de un bloque, consulta [Dar estilo a una plantilla personalizada](/es/aftersell/cart/custom-templates#styling-a-custom-template) para saber qué nombres de clase conservar y cuáles descartar.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: el carrito es autocontenido
</div>

En la tienda, todo el carrito se renderiza dentro de su propio **shadow DOM**. Esto significa:

* El CSS de tu tema no puede filtrarse en el carrito, y el CSS del carrito no puede filtrarse hacia afuera, por lo que tu CSS personalizado queda automáticamente limitado al carrito y no chocará con el resto de tu sitio.
* Tus selectores deben referenciar elementos y clases **dentro del carrito**. Los selectores dirigidos a elementos de la página fuera del carrito no llegarán adentro.

El mismo límite se aplica a JavaScript: `document.querySelector` tampoco puede ver dentro del cajón. Un script que busque un elemento del carrito tiene que pasar por [`shadowRoot`](/es/aftersell/cart/sdk-overview#shadowroot), y apunta a estas mismas clases `cart-external-*`.

<div id="when-to-use-design-settings-instead">
  ## Cuándo usar las configuraciones de diseño en su lugar
</div>

Para colores, radios, espaciado y ancho, las [configuraciones de diseño](/es/aftersell/cart/design-settings) integradas son más simples y seguras, así que recurre al CSS personalizado solo para lo que no cubren.

<div id="where-to-go-next">
  ## A dónde ir después
</div>

* **[Configuraciones de diseño](/es/aftersell/cart/design-settings)**: los controles de estilo integrados, y lo primero que probar.
* **[Plantillas personalizadas](/es/aftersell/cart/custom-templates)**: reemplaza por completo el marcado de un bloque cuando el CSS por sí solo no alcanza.
* **[Cart SDK](/es/aftersell/cart/sdk-overview)**: para el comportamiento en lugar de la apariencia.