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

# Personalice el estilo y los temas con Auth0 Universal Components

> Personalice el sistema de diseño de Auth0 Universal Components con Tailwind CSS, variables CSS y preajustes de tema integrados.

<Warning>
  Auth0 Universal Components se encuentra actualmente en acceso anticipado. Al usarlo,
  acepta los términos aplicables de la prueba gratuita del [Contrato Marco de
  Suscripción de Okta](https://www.okta.com/agreements/). Para obtener más
  información, consulte [Etapas de lanzamiento del
  producto](/es/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

Auth0 Universal Components se basa en un sistema de diseño flexible que utiliza [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) y [primitivas de Radix UI](https://www.radix-ui.com/primitives/docs/overview/introduction). La personalización de estilos se gestiona mediante [`Auth0ComponentProvider`](/es/docs/get-started/universal-components/auth0-component-provider), lo que le permite elegir entre preajustes generales o ajustes detallados de variables CSS.

Esta arquitectura garantiza que sus flujos de identidad tengan la apariencia y el comportamiento de partes nativas de su aplicación.

<Tabs>
  <Tab title="React">
    ## Comenzar

    1. Importa la hoja de estilo.

    ```tsx theme={null}
    import "@auth0/universal-components-react/styles";
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Usuarios de Tailwind v4:** Agreguen `@import "@auth0/universal-components-react/tailwind"` a su archivo CSS.
    </Callout>

    2. Añade el color de tu marca.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* el color de tu marca */
      --primary-foreground: #ffffff; /* texto en los botones */
    }
    ```

    Listo. Todos los botones, links y estados activos ahora usan tu marca.

    ***

    ## Preajustes de tema

    Pasa `themeSettings` a `Auth0ComponentProvider` para alternar entre los temas integrados.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Predefinido</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Apariencia estándar de Auth0 con sombras y bordes equilibrados</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Menor peso visual, con menos sombras y bordes más sutiles</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Radios de borde más amplios para una apariencia más suave</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Revisar variables CSS

    Todas las propiedades visuales están controladas por propiedades personalizadas de CSS. Puedes sobrescribirlas en tu hoja de estilos o mediante la prop `themeSettings.variables`.

    <Tabs>
      <Tab title="Colores (claros)">
        ```css theme={null}
        :root {
          /* Marca - las variables de mayor impacto */
          --primary: oklch(37% 0 0);              /* botones, enlaces, estados activos */
          --primary-foreground: oklch(100% 0 0);  /* texto sobre superficies primarias */

        /_ Superficies _/
        --background: oklch(100% 0 0); /_ fondo de página _/
        --foreground: oklch(9% 0 0); /_ texto predeterminado _/
        --card: oklch(100% 0 0); /_ fondo de tarjeta _/
        --card-foreground: oklch(0% 0 0); /_ texto dentro de tarjetas _/
        --popover: oklch(100% 0 0); /_ fondo de desplegable/diálogo _/
        --popover-foreground: oklch(9% 0 0); /_ texto dentro de popovers _/
        --input: oklch(100% 0 0); /_ fondo de campo de entrada _/

        /_ Secundario y atenuado _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ fondos deshabilitados _/
        --muted-foreground: oklch(45% 0 0); /_ texto de marcador de posición _/

        /_ Acento y destructivo _/
        --accent: oklch(97% 0 0); /_ resaltados al pasar el cursor _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ estados de error _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Bordes _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ anillo de enfoque _/
        }

        ```
      </Tab>

      <Tab title="Colores (oscuro)">
        ```css theme={null}
        .dark {
          /* Marca */
          --primary: oklch(70% 0.15 250);         /* más brillante para fondos oscuros */
          --primary-foreground: oklch(10% 0 0);

          /* Superficies */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secundario y atenuado */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Acento y destructivo */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Bordes */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Radio del borde">
        ```css theme={null}
        :root {
          /* Común - ajusta estos para la apariencia general */
          --radius-sm:  4px;    /* etiquetas, chips */
          --radius-md:  6px;    /* elementos pequeños */
          --radius-lg:  10px;   /* botones, inputs */
          --radius-xl:  12px;   /* tarjetas */
          --radius-2xl: 16px;   /* modales, paneles grandes */

        /_ Granular (raramente necesario) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Tipografía">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - título principal */
          --font-size-heading:          1.5rem;    /* 24px - encabezados de sección */
          --font-size-title:            1.25rem;   /* 20px - títulos de tarjeta */
          --font-size-subtitle:         1.125rem;  /* 18px - encabezados secundarios */
          --font-size-body:             1rem;      /* 16px - texto del cuerpo */
          --font-size-paragraph:        0.875rem;  /* 14px - descripciones */
          --font-size-label:            0.875rem;  /* 14px - etiquetas de formulario */
          --font-size-page-description: 0.875rem;  /* 14px - subtítulos */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Componentes de estilo

    Cada componente acepta una prop `styling` para aplicar anulaciones específicas sin afectar los estilos globales.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // solo para este componente
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **Cuándo usar:**

    * `variables` - anulaciones de propiedades personalizadas de CSS limitadas al componente
    * `classes` - Clases de Tailwind o personalizadas aplicadas a partes específicas del componente

    <Accordion title="Clases disponibles por componente">
      Cada componente expone clases de destino para sus secciones principales:

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Personalizaciones comunes

    ### Colores de marca (Hex)

    Convierte el color hexadecimal de tu marca al formato que usa CSS:

    ```css theme={null}
    :root {
      /* Usando hex directamente */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* O bien oklch para una mejor manipulación del color */
      --primary: oklch(50% 0.2 265); /* morado */
    }
    ```

    ### Esquinas redondeadas

    Para una estética más redondeada en todos los componentes:

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* botones, entradas */
      --radius-xl: 20px; /* tarjetas */
      --radius-2xl: 24px; /* modales */
    }
    ```

    ### Tipografía compacta

    Para interfaces de usuario más densas:

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Modo oscuro

    Los componentes responden automáticamente a la configuración `mode` en `themeSettings`. Para sincronizar con el modo oscuro de tu aplicación:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    O usar la preferencia del sistema:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="Next.js">
    ## Comenzar

    1. Importa la hoja de estilos.

    En tu archivo de diseño raíz:

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Usuarios de Tailwind v4:** Añadan `@import "@auth0/universal-components-react/tailwind"` a su archivo CSS.

      **Usuarios de Shadcn:** No es necesario importar nada; los estilos ya están incluidos en su compilación de Tailwind.
    </Callout>

    2. Agregue el color de su marca.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* el color de tu marca */
      --primary-foreground: #ffffff; /* texto en los botones */
    }
    ```

    Listo. Todos los botones, links y estados activos ahora usan tu marca.

    ***

    ## Preajustes de tema

    Pasa `themeSettings` a `Auth0ComponentProvider` para alternar entre los temas integrados.

    ```tsx layout.tsx theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      {/* Los componentes de tu aplicación */}
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Preajuste</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Estilo estándar de Auth0 con sombras y bordes equilibrados</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Menos peso visual, con menos sombras y bordes más sutiles</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Radios de borde más amplios para una apariencia más suave</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Revisar variables CSS

    Todas las propiedades visuales están controladas por propiedades personalizadas de CSS. Puedes sobreescribirlas en tu hoja de estilos o a través de la prop `themeSettings.variables`.

    <Tabs>
      <Tab title="Colores (claros)">
        ```css theme={null}
        :root {
          /* Marca - las variables de mayor impacto */
          --primary: oklch(37% 0 0);              /* botones, enlaces, estados activos */
          --primary-foreground: oklch(100% 0 0);  /* texto sobre superficies primarias */

        /_ Superficies _/
        --background: oklch(100% 0 0); /_ fondo de página _/
        --foreground: oklch(9% 0 0); /_ texto predeterminado _/
        --card: oklch(100% 0 0); /_ fondo de tarjeta _/
        --card-foreground: oklch(0% 0 0); /_ texto dentro de tarjetas _/
        --popover: oklch(100% 0 0); /_ fondo de desplegable/diálogo _/
        --popover-foreground: oklch(9% 0 0); /_ texto dentro de popovers _/
        --input: oklch(100% 0 0); /_ fondo de campo de entrada _/

        /_ Secundario y atenuado _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ fondos deshabilitados _/
        --muted-foreground: oklch(45% 0 0); /_ texto de marcador de posición _/

        /_ Acento y destructivo _/
        --accent: oklch(97% 0 0); /_ resaltados al pasar el cursor _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ estados de error _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Bordes _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ anillo de enfoque _/
        }

        ```
      </Tab>

      <Tab title="Colores (tema oscuro)">
        ```css theme={null}
        .dark {
          /* Marca */
          --primary: oklch(70% 0.15 250);         /* más brillante para fondos oscuros */
          --primary-foreground: oklch(10% 0 0);

          /* Superficies */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secundario y atenuado */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Acento y destructivo */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Bordes */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Radio de borde">
        ```css theme={null}
        :root {
          /* Común - ajusta estos para la apariencia general */
          --radius-sm:  4px;    /* etiquetas, chips */
          --radius-md:  6px;    /* elementos pequeños */
          --radius-lg:  10px;   /* botones, inputs */
          --radius-xl:  12px;   /* tarjetas */
          --radius-2xl: 16px;   /* modales, paneles grandes */

        /_ Granular (raramente necesario) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Tipografía">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - título principal */
          --font-size-heading:          1.5rem;    /* 24px - encabezados de sección */
          --font-size-title:            1.25rem;   /* 20px - títulos de tarjeta */
          --font-size-subtitle:         1.125rem;  /* 18px - encabezados secundarios */
          --font-size-body:             1rem;      /* 16px - texto del cuerpo */
          --font-size-paragraph:        0.875rem;  /* 14px - descripciones */
          --font-size-label:            0.875rem;  /* 14px - etiquetas de formulario */
          --font-size-page-description: 0.875rem;  /* 14px - subtítulos */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Componentes de estilo

    Cada componente acepta una prop `styling` para sobrescrituras específicas sin afectar los estilos globales.

    ```tsx layout.tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // sobrescribir solo para este componente
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **Cuándo usar:**

    * `variables` - sobrescrituras de propiedades personalizadas de CSS con alcance limitado al componente
    * `classes` - Clases de Tailwind o clases personalizadas aplicadas a partes específicas del componente

    <Accordion title="Clases disponibles por componente">
      Cada componente expone clases objetivo para sus secciones principales:

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Personalizaciones comunes

    ### Colores de marca (Hex)

    Convierte el color hexadecimal de tu marca al formato de CSS:

    ```css theme={null}
    :root {
      /* Usando hex directamente */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* O oklch para una mejor manipulación del color */
      --primary: oklch(50% 0.2 265); /* morado */
    }
    ```

    ### Esquinas redondeadas

    Para una estética más redondeada en todos los componentes:

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* botones, entradas */
      --radius-xl: 20px; /* tarjetas */
      --radius-2xl: 24px; /* modales */
    }
    ```

    ### Tipografía compacta

    Para interfaces más densas:

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Modo oscuro

    Los componentes responden automáticamente a la configuración `mode` en `themeSettings`. Para sincronizar con el modo oscuro de tu aplicación:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          mode="proxy"
          domain="your-tenant.auth0.com"
          proxyConfig={{ baseUrl: "/api/auth" }}
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    O usar la preferencia del sistema:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>

  <Tab title="shadcn">
    ## Comenzar

    1. No es necesario importar estilos.

    Con Shadcn, los estilos ya están incluidos en tu compilación de Tailwind. No es necesario realizar importaciones adicionales.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Si usas Tailwind v4, añade `@import
                                "@auth0/universal-components-react/tailwind"` a tu archivo CSS.
    </Callout>

    2. Añade el color de tu marca.

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* el color de tu marca */
      --primary-foreground: #ffffff; /* texto en los botones */
    }
    ```

    Listo. Todos los botones, links y estados activos ahora usan tu marca.

    ***

    ## Preajustes de tema

    Pasa `themeSettings` a `Auth0ComponentProvider` para alternar entre temas integrados.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      themeSettings={{
        mode: "light", // 'light' | 'dark'
        theme: "default", // 'default' | 'minimal' | 'rounded'
      }}
    >
      <App />
    </Auth0ComponentProvider>
    ```

    <table class="table">
      <thead>
        <tr>
          <th>Preajuste</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>default</code>
          </td>

          <td>Apariencia estándar de Auth0 con sombras y bordes equilibrados</td>
        </tr>

        <tr>
          <td>
            <code>minimal</code>
          </td>

          <td>Menor carga visual, con menos sombras y bordes más sutiles</td>
        </tr>

        <tr>
          <td>
            <code>rounded</code>
          </td>

          <td>Mayor redondeo de los bordes para una apariencia más suave</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Revisar variables CSS

    Todas las propiedades visuales están controladas por propiedades personalizadas de CSS. Puedes sobrescribirlas en tu hoja de estilos o mediante la prop `themeSettings.variables`.

    <Tabs>
      <Tab title="Colores (claro)">
        ```css theme={null}
        :root {
          /* Marca - las variables de mayor impacto */
          --primary: oklch(37% 0 0);              /* botones, enlaces, estados activos */
          --primary-foreground: oklch(100% 0 0);  /* texto sobre superficies primarias */

        /_ Superficies _/
        --background: oklch(100% 0 0); /_ fondo de página _/
        --foreground: oklch(9% 0 0); /_ texto predeterminado _/
        --card: oklch(100% 0 0); /_ fondo de tarjeta _/
        --card-foreground: oklch(0% 0 0); /_ texto dentro de tarjetas _/
        --popover: oklch(100% 0 0); /_ fondo de desplegable/diálogo _/
        --popover-foreground: oklch(9% 0 0); /_ texto dentro de popovers _/
        --input: oklch(100% 0 0); /_ fondo del campo de entrada _/

        /_ Secundario y atenuado _/
        --secondary: oklch(96% 0 0);
        --secondary-foreground: oklch(100% 0 0);
        --muted: oklch(96% 0 0); /_ fondos deshabilitados _/
        --muted-foreground: oklch(45% 0 0); /_ texto de placeholder _/

        /_ Acento y destructivo _/
        --accent: oklch(97% 0 0); /_ resaltados al pasar el cursor _/
        --accent-foreground: oklch(9% 0 0);
        --destructive: oklch(93% 0.03 17); /_ estados de error _/
        --destructive-foreground: oklch(36% 0.14 17);

        /_ Bordes _/
        --border: oklch(89% 0 0);
        --ring: oklch(89% 0 0); /_ anillo de foco _/
        }

        ```
      </Tab>

      <Tab title="Colores (Oscuro)">
        ```css theme={null}
        .dark {
          /* Marca */
          --primary: oklch(70% 0.15 250);         /* más brillante para fondos oscuros */
          --primary-foreground: oklch(10% 0 0);

          /* Superficies */
          --background: oklch(12% 0 0);
          --foreground: oklch(95% 0 0);
          --card: oklch(15% 0 0);
          --card-foreground: oklch(95% 0 0);
          --popover: oklch(15% 0 0);
          --popover-foreground: oklch(95% 0 0);
          --input: oklch(18% 0 0);

          /* Secundario y atenuado */
          --secondary: oklch(20% 0 0);
          --secondary-foreground: oklch(95% 0 0);
          --muted: oklch(20% 0 0);
          --muted-foreground: oklch(60% 0 0);

          /* Acento y destructivo */
          --accent: oklch(25% 0 0);
          --accent-foreground: oklch(95% 0 0);
          --destructive: oklch(30% 0.15 17);
          --destructive-foreground: oklch(95% 0.05 17);

          /* Bordes */
          --border: oklch(25% 0 0);
          --ring: oklch(35% 0 0);
        }
        ```
      </Tab>

      <Tab title="Radio de borde">
        ```css theme={null}
        :root {
          /* Común - ajusta estos para la apariencia general */
          --radius-sm:  4px;    /* etiquetas, chips */
          --radius-md:  6px;    /* elementos pequeños */
          --radius-lg:  10px;   /* botones, inputs */
          --radius-xl:  12px;   /* tarjetas */
          --radius-2xl: 16px;   /* modales, paneles grandes */

        /_ Granular (raramente necesario) _/
        --radius-xs: 2px;
        --radius-3xl: 20px;
        --radius-4xl: 24px;
        --radius-5xl: 32px;
        }

        ```
      </Tab>

      <Tab title="Tipografía">
        ```css theme={null}
        :root {
          --font-size-page-header:      2.25rem;   /* 36px - título principal */
          --font-size-heading:          1.5rem;    /* 24px - encabezados de sección */
          --font-size-title:            1.25rem;   /* 20px - títulos de tarjeta */
          --font-size-subtitle:         1.125rem;  /* 18px - encabezados secundarios */
          --font-size-body:             1rem;      /* 16px - texto del cuerpo */
          --font-size-paragraph:        0.875rem;  /* 14px - descripciones */
          --font-size-label:            0.875rem;  /* 14px - etiquetas de formulario */
          --font-size-page-description: 0.875rem;  /* 14px - subtítulos */
        }
        ```
      </Tab>
    </Tabs>

    ***

    ## Componentes de estilo

    Cada componente acepta una prop `styling` para sobrescribir estilos de forma específica sin afectar los estilos globales.

    ```tsx theme={null}
    <SsoProviderTable
      styling={{
        variables: {
          common: {
            "--primary": "#059669", // sobrescribir solo para este componente
          },
          light: { "--card": "#f8fafc" },
          dark: { "--card": "#1e293b" },
        },
        classes: {
          "SsoProviderTable-header": "shadow-lg",
          "SsoProviderTable-table": "rounded-xl",
        },
      }}
    />
    ```

    **Cuándo usar:**

    * `variables` - anulaciones de propiedades personalizadas de CSS limitadas al componente
    * `classes` - Clases de Tailwind o clases personalizadas aplicadas a partes específicas del componente

    <Accordion title="Clases disponibles por componente">
      Cada componente expone clases de destino para sus secciones principales:

      **SsoProviderCreate**

      * `SsoProviderCreate-header`, `SsoProviderCreate-wizard`
      * `ProviderSelect-root`, `ProviderDetails-root`, `ProviderConfigure-root`

      **SsoProviderTable**

      * `SsoProviderTable-header`, `SsoProviderTable-table`, `SsoProviderTable-row`

      **SsoProviderEdit**

      * `SsoProviderEdit-header`, `SsoProviderEdit-tabs`
      * `SsoProviderEdit-ssoTab`, `SsoProviderEdit-provisioningTab`, `SsoProviderEdit-domainsTab`

      **DomainTable**

      * `DomainTable-header`, `DomainTable-table`
      * `DomainTable-createModal`, `DomainTable-configureModal`, `DomainTable-deleteModal`

      **OrganizationDetailsEdit**

      * `OrganizationDetailsEdit-header`, `OrganizationDetailsEdit-form`, `OrganizationDetailsEdit-actions`
    </Accordion>

    ***

    ## Personalizaciones comunes

    ### Colores de marca (Hex)

    Convierte el color hexadecimal de tu marca al formato que usa CSS:

    ```css theme={null}
    :root {
      /* Usando hex directamente */
      --primary: #4f46e5;
      --primary-foreground: #ffffff;

      /* O bien oklch para una mejor manipulación del color */
      --primary: oklch(50% 0.2 265); /* morado */
    }
    ```

    ### Esquinas redondeadas

    Para una estética más redondeada en todos los componentes:

    ```css theme={null}
    :root {
      --radius-lg: 16px; /* botones, entradas */
      --radius-xl: 20px; /* tarjetas */
      --radius-2xl: 24px; /* modales */
    }
    ```

    ### Tipografía compacta

    Para interfaces de usuario más densas:

    ```css theme={null}
    :root {
      --font-size-page-header: 1.75rem;
      --font-size-heading: 1.25rem;
      --font-size-title: 1rem;
      --font-size-body: 0.875rem;
    }
    ```

    ***

    ## Modo oscuro

    Los componentes responden automáticamente a la configuración `mode` en `themeSettings`. Para sincronizar con el modo oscuro de tu aplicación:

    ```tsx theme={null}
    function App() {
      const [isDark, setIsDark] = useState(false);

      return (
        <Auth0ComponentProvider
          themeSettings={{
            mode: isDark ? "dark" : "light",
          }}
        >
          <YourApp />
        </Auth0ComponentProvider>
      );
    }
    ```

    O usar la preferencia del sistema:

    ```tsx theme={null}
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    <Auth0ComponentProvider
      themeSettings={{ mode: prefersDark ? 'dark' : 'light' }}
    >
    ```
  </Tab>
</Tabs>