# Color

> Clases de color por función, en claro y en oscuro.

Categoría: Base · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Texto

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto principal</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Títulos, párrafos y etiquetas.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-ccs-ink</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-text</code></div>
        <button type="button" data-copy-text="text-ccs-ink dark:text-ccs-dark-text" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-ink">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-text">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#ECEEF4</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto secundario</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Descripciones, ayudas y datos de apoyo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-ccs-slate</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-text-2</code></div>
        <button type="button" data-copy-text="text-ccs-slate dark:text-ccs-dark-text-2" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-slate">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#475569</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-text-2">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#CCD4E6</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto sobre color</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Sobre rellenos azules, verdes y de estado.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-white</code></div>
        <button type="button" data-copy-text="text-white" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg bg-ccs-blue px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-white">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg bg-ccs-blue-mid px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-white">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Links

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Link</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Links y texto en azul.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-ccs-blue</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-accent</code></div>
        <button type="button" data-copy-text="text-ccs-blue dark:text-ccs-dark-accent" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-blue">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-accent">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Hover a azul</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Texto neutro que pasa a azul en hover.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:text-ccs-blue</code><code class="chip text-xs max-w-full break-words">dark:hover:text-ccs-dark-accent</code></div>
        <button type="button" data-copy-text="hover:text-ccs-blue dark:hover:text-ccs-dark-accent" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-blue">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-accent">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Fondos

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Página</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Fondo de la página.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-bg</code></div>
        <button type="button" data-copy-text="bg-white dark:bg-ccs-dark-bg" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-bg"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#131A2A</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Superficie</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Cards, paneles, modales y campos.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-surface</code></div>
        <button type="button" data-copy-text="bg-white dark:bg-ccs-dark-surface" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#1C2436</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Encabezados de tabla, botón Sutil y zonas hundidas.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-bg</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-overlay</code></div>
        <button type="button" data-copy-text="bg-ccs-bg dark:bg-ccs-dark-overlay" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-bg"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#F6F8FC</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-overlay"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#273045</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Hover sobre superficie</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Filas, ítems de menú y botones sin fondo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-bg</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-overlay</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-bg dark:hover:bg-ccs-dark-overlay" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-bg"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#F6F8FC</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-overlay"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#273045</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Hover sobre fondo suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Botones con fondo suave.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-hover</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-hover"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#E5E9F0</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-hover"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#424B5F</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo detrás de un diálogo</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Cubre la página detrás de Modal, Panel lateral y Paleta de comandos. Igual en claro y oscuro.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">backdrop:bg-ccs-ink/60</code></div>
        <button type="button" data-copy-text="backdrop:bg-ccs-ink/60" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white"><div class="h-full rounded-lg bg-ccs-ink/60"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 60 %</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-bg"><div class="h-full rounded-lg bg-ccs-ink/60"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 60 %</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Líneas y bordes

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Línea</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Bordes de cards, tabs y divisores.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-ccs-line</code><code class="chip text-xs max-w-full break-words">dark:border-ccs-dark-line</code></div>
        <button type="button" data-copy-text="border-ccs-line dark:border-ccs-dark-line" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-line bg-white text-xs text-ccs-slate px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D7DDE8</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#566075</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Borde de campo</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Campos, selectores, casillas, radios y botones de contorno.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-ccs-line-strong</code><code class="chip text-xs max-w-full break-words">dark:border-ccs-dark-line-strong</code></div>
        <button type="button" data-copy-text="border-ccs-line-strong dark:border-ccs-dark-line-strong" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-line-strong bg-white text-xs text-ccs-slate px-2 flex items-center">Campo</div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#B7C2D6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-line-strong bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center">Campo</div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#79849A</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Foco</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Campo activo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">focus:border-ccs-blue</code><code class="chip text-xs max-w-full break-words">focus:ring-2</code><code class="chip text-xs max-w-full break-words">focus:ring-ccs-blue/15</code><code class="chip text-xs max-w-full break-words">dark:focus:border-ccs-dark-accent</code><code class="chip text-xs max-w-full break-words">dark:focus:ring-ccs-dark-accent/25</code></div>
        <button type="button" data-copy-text="focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-blue ring-2 ring-ccs-blue/15 bg-white text-xs text-ccs-slate px-2 flex items-center">Campo</div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-accent ring-2 ring-ccs-dark-accent/25 bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center">Campo</div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Acción

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Botón primario</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Acción principal de la pantalla.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-blue</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-blue-mid</code></div>
        <button type="button" data-copy-text="bg-ccs-blue text-white dark:bg-ccs-blue-mid" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue-mid text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0056CA</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Botón primario en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover del botón primario.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-blue-mid</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-blue</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue-mid text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0056CA</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Botón deshabilitado</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Botón primario sin acción disponible.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-blue/40</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-overlay</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-line-strong</code></div>
        <button type="button" data-copy-text="bg-ccs-blue/40 text-white dark:bg-ccs-dark-overlay dark:text-ccs-dark-line-strong" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue/40 text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 40%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-overlay text-ccs-dark-line-strong">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#273045 · #79849A</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Botón suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Primario suave.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-blue/10</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-accent/10</code></div>
        <button type="button" data-copy-text="bg-ccs-blue/10 dark:bg-ccs-dark-accent/10" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue/10 text-ccs-blue">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 10%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-accent/10 text-ccs-dark-accent">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF al 10%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Botón suave en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover del primario suave.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-blue/15</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-accent/15</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-blue/15 dark:hover:bg-ccs-dark-accent/15" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue/15 text-ccs-blue">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 15%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-accent/15 text-ccs-dark-accent">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF al 15%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Ghost link en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover del botón sin fondo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-blue/5</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-hover</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-blue/5 dark:hover:bg-ccs-dark-hover" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue/5 text-ccs-blue">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 5%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-hover text-ccs-dark-text">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#424B5F</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Ceja en la página</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Capa de la ceja sobre el fondo de la página. Cambia con el modo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-ink/15</code><code class="chip text-xs max-w-full break-words">text-ccs-ink</code><code class="chip text-xs max-w-full break-words">dark:bg-white/30</code><code class="chip text-xs max-w-full break-words">dark:text-white</code></div>
        <button type="button" data-copy-text="bg-ccs-ink/15 text-ccs-ink dark:bg-white/30 dark:text-white" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-bg px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/15 text-ccs-ink">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 15%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-bg px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-white/30 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 30%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Ceja sobre fondo claro</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Blanco o Fondo. No cambia con el modo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-ink/15</code><code class="chip text-xs max-w-full break-words">text-ccs-ink</code></div>
        <button type="button" data-copy-text="bg-ccs-ink/15 text-ccs-ink" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/15 text-ccs-ink">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 15%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-bg px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/15 text-ccs-ink">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 15%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Ceja sobre fondo de color</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Verde CCS o Verde brillante. No cambia con el modo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-ink/30</code><code class="chip text-xs max-w-full break-words">text-white</code></div>
        <button type="button" data-copy-text="bg-ccs-ink/30 text-white" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-green px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/30 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 30%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-green-br px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/30 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 30%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Ceja sobre fondo oscuro</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Azul CCS, Ink o el degradado con la ceja a la izquierda. No cambia con el modo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-white/30</code><code class="chip text-xs max-w-full break-words">text-white</code></div>
        <button type="button" data-copy-text="bg-white/30 text-white" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-blue px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-white/30 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 30%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-ink px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-white/30 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 30%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Ceja en el tramo verde del degradado</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Desde el 70 % del ancho. En oscuro, sobre el degradado oscuro, pasa a blanco.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-ink/50</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:bg-white/30</code></div>
        <button type="button" data-copy-text="bg-ccs-ink/50 text-white dark:bg-white/30" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-banner px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/50 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 50%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-banner-dark px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-white/30 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 30%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Velo sobre foto</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Capa sobre toda la foto. Sobre el velo, la ceja va como sobre fondo oscuro.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-ink/50</code></div>
        <button type="button" data-copy-text="bg-ccs-ink/50" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-slate px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/50 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 50%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-slate px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-ink/50 text-white">Ceja</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D al 50%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Contorno sobre fondo oscuro</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Botón secundario sobre Ink, Azul CCS o foto con velo: fondo blanco al 10 % con desenfoque. No cambia con el modo.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-white/40</code><code class="chip text-xs max-w-full break-words">bg-white/10</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">backdrop-blur-md</code></div>
        <button type="button" data-copy-text="border-white/40 bg-white/10 text-white backdrop-blur-md" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-blue px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium border border-white/40 bg-white/10 text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 40% · fondo al 10%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-ink px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium border border-white/40 bg-white/10 text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 40% · fondo al 10%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Contorno sobre fondo oscuro en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover del contorno sobre fondo oscuro: el borde pasa a blanco y el fondo sube al 20 %.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-white/20</code><code class="chip text-xs max-w-full break-words">hover:border-white</code></div>
        <button type="button" data-copy-text="hover:bg-white/20 hover:border-white" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-ccs-blue px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium border border-white bg-white/20 text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 20% · borde #FFFFFF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-ink px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium border border-white bg-white/20 text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF al 20% · borde #FFFFFF</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Información

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Alertas de información.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-blue/[0.04]</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-accent/10</code></div>
        <button type="button" data-copy-text="bg-ccs-blue/[0.04] dark:bg-ccs-dark-accent/10" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-blue/[0.04] text-ccs-ink">Alerta</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 4%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-accent/10 text-ccs-dark-text">Alerta</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF al 10%</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Borde</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Borde de alertas de información.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-ccs-blue/30</code><code class="chip text-xs max-w-full break-words">dark:border-ccs-dark-accent/40</code></div>
        <button type="button" data-copy-text="border-ccs-blue/30 dark:border-ccs-dark-accent/40" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-blue/30 bg-white text-xs text-ccs-slate px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 30%</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-accent/40 bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF al 40%</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Tooltip

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Burbuja y flecha del tooltip. En oscuro es claro.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-ink</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-text</code></div>
        <button type="button" data-copy-text="bg-ccs-ink dark:bg-ccs-dark-text" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg bg-ccs-ink"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg bg-ccs-dark-text"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#ECEEF4</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Texto del tooltip.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-bg</code></div>
        <button type="button" data-copy-text="text-white dark:text-ccs-dark-bg" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg bg-ccs-ink px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-white">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg bg-ccs-dark-text px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-bg">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#131A2A</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo del atajo</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Cada tecla del atajo (componente Tecla).</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-slate</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-line-strong</code></div>
        <button type="button" data-copy-text="bg-ccs-slate dark:bg-ccs-line-strong" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg bg-ccs-ink px-3 grid place-items-center"><span class="inline-flex h-5 min-w-5 items-center justify-center rounded-lg px-1.5 text-xs font-medium bg-ccs-slate text-white">Ctrl</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#B7C2D6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg bg-ccs-dark-text px-3 grid place-items-center"><span class="inline-flex h-5 min-w-5 items-center justify-center rounded-lg px-1.5 text-xs font-medium bg-ccs-line-strong text-ccs-ink">Ctrl</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#475569</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto del atajo</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Letra de cada tecla.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-ink</code></div>
        <button type="button" data-copy-text="text-white dark:text-ccs-ink" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg bg-ccs-ink px-3 grid place-items-center"><span class="inline-flex h-5 min-w-5 items-center justify-center rounded-lg px-1.5 text-xs font-medium bg-ccs-slate text-white">Ctrl</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFFFF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg bg-ccs-dark-text px-3 grid place-items-center"><span class="inline-flex h-5 min-w-5 items-center justify-center rounded-lg px-1.5 text-xs font-medium bg-ccs-line-strong text-ccs-ink">Ctrl</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#0B1B3D</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Éxito

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Texto de éxito sobre blanco o su fondo suave.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-ccs-success</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-success</code></div>
        <button type="button" data-copy-text="text-ccs-success dark:text-ccs-dark-success" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-success">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#209802</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-success">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#8FE781</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Sobre el fondo suave en hover.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:text-ccs-success-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:text-ccs-dark-success</code></div>
        <button type="button" data-copy-text="hover:text-ccs-success-hover dark:hover:text-ccs-dark-success" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-success-soft-hover text-ccs-success-hover">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#1C8A02</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-success-fill/20 text-ccs-dark-success">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#8FE781</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Botones e íconos con texto blanco.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-success-fill</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-success-fill</code></div>
        <button type="button" data-copy-text="bg-ccs-success-fill text-white dark:bg-ccs-dark-success-fill" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-success-fill text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#3BAC29</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-success-fill text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#2F8721</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover de los rellenos.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-success-fill-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-success-fill-hover</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-success-fill-hover dark:hover:bg-ccs-dark-success-fill-hover" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-success-fill-hover text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#1F9900</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-success-fill-hover text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#266C1A</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Alertas, badges y botones suaves.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-success-soft</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-success-fill/10</code></div>
        <button type="button" data-copy-text="bg-ccs-success-soft dark:bg-ccs-dark-success-fill/10" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-success-soft text-ccs-success">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#F3FAF2</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-success-fill/10 text-ccs-dark-success">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#2F8721 al 10%</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover de los fondos suaves.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-success-soft-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-success-fill/20</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-success-soft-hover dark:hover:bg-ccs-dark-success-fill/20" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-success-soft-hover text-ccs-success-hover">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#E2F3DF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-success-fill/20 text-ccs-dark-success">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#2F8721 al 20%</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Borde</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Borde de alertas y campos con este estado.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-ccs-success-line</code><code class="chip text-xs max-w-full break-words">dark:border-ccs-dark-success/35</code></div>
        <button type="button" data-copy-text="border-ccs-success-line dark:border-ccs-dark-success/35" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-success-line bg-white text-xs text-ccs-slate px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#B1DFAA</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-success/35 bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#8FE781 al 35%</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Advertencia

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Texto de advertencia sobre blanco o su fondo suave.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-ccs-warning</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-warning</code></div>
        <button type="button" data-copy-text="text-ccs-warning dark:text-ccs-dark-warning" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-warning">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#B45309</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-warning">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFCA53</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Botones e íconos con texto blanco.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-warning-fill</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-warning-fill</code></div>
        <button type="button" data-copy-text="bg-ccs-warning-fill text-white dark:bg-ccs-dark-warning-fill" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-warning-fill text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#F17100</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-warning-fill text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#BB5A08</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover de los rellenos.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-warning-fill-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-warning-fill-hover</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-warning-fill-hover dark:hover:bg-ccs-dark-warning-fill-hover" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-warning-fill-hover text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D66300</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-warning-fill-hover text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#994700</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Alertas, badges y botones suaves.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-warning-soft</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-warning-fill/10</code></div>
        <button type="button" data-copy-text="bg-ccs-warning-soft dark:bg-ccs-dark-warning-fill/10" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-warning-soft text-ccs-warning">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFFBEB</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-warning-fill/10 text-ccs-dark-warning">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#BB5A08 al 10%</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover de los fondos suaves.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-warning-soft-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-warning-fill/20</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-warning-soft-hover dark:hover:bg-ccs-dark-warning-fill/20" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-warning-soft-hover text-ccs-warning">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FEF3C7</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-warning-fill/20 text-ccs-dark-warning">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#BB5A08 al 20%</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Borde</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Borde de alertas y campos con este estado.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-ccs-warning-line</code><code class="chip text-xs max-w-full break-words">dark:border-ccs-dark-warning/35</code></div>
        <button type="button" data-copy-text="border-ccs-warning-line dark:border-ccs-dark-warning/35" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-warning-line bg-white text-xs text-ccs-slate px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FCD34D</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-warning/35 bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFCA53 al 35%</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Error

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Texto de error sobre blanco o su fondo suave.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">text-ccs-error</code><code class="chip text-xs max-w-full break-words">dark:text-ccs-dark-error</code></div>
        <button type="button" data-copy-text="text-ccs-error dark:text-ccs-dark-error" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-error">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#E11D48</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="text-xl font-semibold leading-none text-ccs-dark-error">Aa</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFC2C3</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Texto en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Sobre el fondo suave en hover.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:text-ccs-error-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:text-ccs-dark-error</code></div>
        <button type="button" data-copy-text="hover:text-ccs-error-hover dark:hover:text-ccs-dark-error" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-error-soft-hover text-ccs-error-hover">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D0173F</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-error-fill/20 text-ccs-dark-error">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFC2C3</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Botones e íconos con texto blanco.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-error-fill</code><code class="chip text-xs max-w-full break-words">text-white</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-error-fill</code></div>
        <button type="button" data-copy-text="bg-ccs-error-fill text-white dark:bg-ccs-dark-error-fill" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-error-fill text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#F43F5E</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-error-fill text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D01842</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover de los rellenos.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-error-fill-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-error-fill-hover</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-error-fill-hover dark:hover:bg-ccs-dark-error-fill-hover" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-error-fill-hover text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#E11D48</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-error-fill-hover text-white">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#AB0031</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Alertas, badges y botones suaves.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-error-soft</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-error-fill/10</code></div>
        <button type="button" data-copy-text="bg-ccs-error-soft dark:bg-ccs-dark-error-fill/10" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-error-soft text-ccs-error">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFF1F2</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-error-fill/10 text-ccs-dark-error">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D01842 al 10%</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Fondo suave en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover de los fondos suaves.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-error-soft-hover</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-dark-error-fill/20</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-error-soft-hover dark:hover:bg-ccs-dark-error-fill/20" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-error-soft-hover text-ccs-error-hover">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFE4E6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><span class="inline-flex items-center h-8 px-3 rounded-lg text-sm font-medium bg-ccs-dark-error-fill/20 text-ccs-dark-error">Botón</span></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D01842 al 20%</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Borde</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Borde de alertas y campos con este estado.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">border-ccs-error-line</code><code class="chip text-xs max-w-full break-words">dark:border-ccs-dark-error/35</code></div>
        <button type="button" data-copy-text="border-ccs-error-line dark:border-ccs-dark-error/35" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-error-line bg-white text-xs text-ccs-slate px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FDA4AF</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface px-3 grid place-items-center"><div class="w-full h-7 rounded-lg border border-ccs-dark-error/35 bg-ccs-dark-surface text-xs text-ccs-dark-text-2 px-2 flex items-center"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#FFC2C3 al 35%</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Gráficos

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 1 · Azul CCS</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Primera serie de un gráfico.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-blue</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-accent</code></div>
        <button type="button" data-copy-text="bg-ccs-blue dark:bg-ccs-dark-accent" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-blue"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-accent"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 2 · Verde CCS</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Segunda serie.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-green</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-green-br</code></div>
        <button type="button" data-copy-text="bg-ccs-green dark:bg-ccs-green-br" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-green"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#3DAE2B</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-green-br"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#00D700</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 3 · Naranjo</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Tercera serie.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-naranjo</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-naranjo</code></div>
        <button type="button" data-copy-text="bg-ccs-naranjo dark:bg-ccs-dark-naranjo" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-naranjo"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#E0661B</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-naranjo"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#E68549</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 4 · Violeta</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Cuarta serie.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-violeta</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-violeta</code></div>
        <button type="button" data-copy-text="bg-ccs-violeta dark:bg-ccs-dark-violeta" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-violeta"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#7A4FC9</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-violeta"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#AF95DF</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 5 · Turquesa</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Quinta serie.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-turquesa</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-turquesa</code></div>
        <button type="button" data-copy-text="bg-ccs-turquesa dark:bg-ccs-dark-turquesa" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-turquesa"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#00929F</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-turquesa"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#4DB3BC</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 6 · Frambuesa</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Sexta serie.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-frambuesa</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-frambuesa</code></div>
        <button type="button" data-copy-text="bg-ccs-frambuesa dark:bg-ccs-dark-frambuesa" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-frambuesa"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#C8377E</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-frambuesa"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#DE87B2</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Serie 7 · Mostaza</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Séptima serie. Mismo valor en oscuro.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-mostaza</code></div>
        <button type="button" data-copy-text="bg-ccs-mostaza" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-mostaza"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D69E00</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-mostaza"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#D69E00</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Relleno de área</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Bajo la línea del gráfico de área, con la línea de la serie encima.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">fill-ccs-blue/15</code><code class="chip text-xs max-w-full break-words">dark:fill-ccs-dark-accent/20</code></div>
        <button type="button" data-copy-text="fill-ccs-blue/15 dark:fill-ccs-dark-accent/20" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg border border-ccs-line bg-white"><div class="h-full rounded-lg bg-ccs-blue/15"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 al 15 %</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-surface"><div class="h-full rounded-lg bg-ccs-dark-accent/20"></div></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#A9D4FF al 20 %</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Otros</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Agrupa lo que pasa de 4 o 5 series. En líneas, punteada.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-slate</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-dark-text-2</code></div>
        <button type="button" data-copy-text="bg-ccs-slate dark:bg-ccs-dark-text-2" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-slate"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#475569</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-dark-text-2"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#CCD4E6</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Marca

```html
<div class="rounded-ccs border border-ccs-line bg-white px-4 sm:px-5 dark:border-ccs-dark-line dark:bg-ccs-dark-surface">
  <div class="hidden xl:grid xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] gap-x-4 py-3 border-b border-ccs-line dark:border-ccs-dark-line text-xs font-semibold uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">
    <div>Uso</div><div>Clase</div><div>Claro</div><div>Oscuro</div>
  </div>
  <div class="divide-y divide-ccs-line dark:divide-ccs-dark-line">
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Verde CCS</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Barras de progreso, conectores y leyendas. Sin texto encima.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-green</code></div>
        <button type="button" data-copy-text="bg-ccs-green" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-green"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#3DAE2B</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-green"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#3DAE2B</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Degradado Banner</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Banners y botón destacado.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-banner</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-banner-dark</code></div>
        <button type="button" data-copy-text="bg-ccs-banner dark:bg-ccs-banner-dark" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-banner"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 → #00D700</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-banner-dark"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 → #2F8721</div>
        </div>
      </div>
    </div>

    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Degradado Banner en hover</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Hover del botón destacado.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">hover:bg-ccs-banner-dark</code><code class="chip text-xs max-w-full break-words">dark:hover:bg-ccs-banner-dark-hover</code></div>
        <button type="button" data-copy-text="hover:bg-ccs-banner-dark dark:hover:bg-ccs-banner-dark-hover" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="h-12 rounded-lg  bg-ccs-banner-dark"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 → #2F8721</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="h-12 rounded-lg border border-ccs-dark-line bg-ccs-banner-dark-hover"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003185 → #266C1A</div>
        </div>
      </div>
    </div>
    <div class="grid gap-y-3 py-3.5 lg:grid-cols-2 lg:gap-x-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_minmax(0,0.7fr)_minmax(0,0.7fr)] xl:gap-x-4 xl:items-center">
      <div class="lg:col-start-1">
        <div class="text-sm font-semibold text-ccs-ink dark:text-ccs-dark-text">Degradado Ícono</div>
        <div class="text-xs text-ccs-slate mt-0.5 leading-relaxed dark:text-ccs-dark-text-2">Relleno de los íconos duotono.</div>
      </div>
      <div class="lg:col-start-1 xl:col-start-2 flex items-start gap-1.5 min-w-0">
        <div class="flex flex-wrap gap-1 min-w-0"><code class="chip text-xs max-w-full break-words">bg-ccs-icon</code><code class="chip text-xs max-w-full break-words">dark:bg-ccs-icon-dark</code></div>
        <button type="button" data-copy-text="bg-ccs-icon dark:bg-ccs-icon-dark" aria-label="Copiar clase" class="shrink-0 w-7 h-7 rounded-lg grid place-items-center text-ccs-slate hover:bg-ccs-bg hover:text-ccs-ink transition dark:text-ccs-dark-text-2 dark:hover:bg-ccs-dark-overlay dark:hover:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg active:scale-95 motion-reduce:active:scale-100"><svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
      </div>
      <div class="grid grid-cols-2 gap-4 lg:col-start-2 lg:row-start-1 lg:row-span-2 lg:self-center xl:contents">
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Claro</div>
          <div class="w-12 h-12 rounded-ccs  bg-ccs-icon"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 → #00D700</div>
        </div>
        <div>
          <div class="xl:hidden text-xs font-semibold uppercase tracking-wider text-ccs-slate mb-1.5 dark:text-ccs-dark-text-2">Oscuro</div>
          <div class="w-12 h-12 rounded-ccs  bg-ccs-icon-dark"></div>
          <div class="mono text-xs text-ccs-slate mt-1.5 dark:text-ccs-dark-text-2">#003DA6 → #2F8721</div>
        </div>
      </div>
    </div>
  </div>
</div>
```