# Calendario

> Calendario para un día o un rango, mes y año en listas, atajos, días no disponibles, hora y selector de fecha.

Categoría: Formularios · Solar v0.8.0

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

## Guía: Cuándo usarlo

- Para fechas cercanas: eventos, reservas, plazos y filtros.
- Para fechas lejanas, como la de nacimiento, mejor un campo de fecha.
- El campo siempre permite escribir la fecha sin abrir el calendario.

## Calendario

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface "><div><div class="flex items-center justify-between mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="text-sm font-medium" aria-live="polite">octubre 2026</div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="3 de octubre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="4 de octubre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de octubre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de octubre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de octubre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de octubre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de octubre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="23 de octubre" aria-pressed="true" aria-current="date">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="24 de octubre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="25 de octubre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="27 de octubre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="31 de octubre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div></div></div>
```

## Rango

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface "><div class="flex flex-col sm:flex-row gap-4"><div><div class="flex items-center justify-between mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="text-sm font-medium" aria-live="polite">octubre 2026</div><span class="w-8"></span></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="3 de octubre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="4 de octubre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de octubre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de octubre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de octubre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de octubre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="20 de octubre" aria-pressed="true">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="23 de octubre">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="24 de octubre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="25 de octubre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="27 de octubre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="31 de octubre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div><div><div class="flex items-center justify-between mb-2"><span class="w-8"></span><div class="text-sm font-medium" aria-live="polite">noviembre 2026</div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="26 de noviembre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="27 de noviembre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de noviembre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de noviembre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de noviembre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="31 de noviembre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="1 de noviembre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="2 de noviembre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover rounded-none dark:bg-ccs-dark-hover" aria-label="3 de noviembre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="4 de noviembre" aria-pressed="true">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de noviembre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de noviembre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de noviembre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de noviembre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de noviembre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de noviembre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de noviembre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de noviembre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de noviembre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de noviembre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de noviembre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de noviembre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de noviembre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de noviembre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de noviembre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de noviembre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de noviembre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de noviembre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="23 de noviembre">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="24 de noviembre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="25 de noviembre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de noviembre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="27 de noviembre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de noviembre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de noviembre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="30 de noviembre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de noviembre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="2 de noviembre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="3 de noviembre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="4 de noviembre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="5 de noviembre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="6 de noviembre">6</button></div></div></div></div></div>
```

## Mes y año en listas

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface "><div><div class="flex items-center gap-2 mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="relative flex-1"><select aria-label="Mes" class="h-8 pl-2.5 pr-7 rounded-lg border border-ccs-line-strong bg-white text-sm font-medium appearance-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface 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 w-full"><option>Octubre</option></select><iconify-icon icon="solar:alt-arrow-down-outline" class="shrink-0 text-[14px] absolute right-2 top-2 pointer-events-none text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></div><div class="relative"><select aria-label="Año" class="h-8 pl-2.5 pr-7 rounded-lg border border-ccs-line-strong bg-white text-sm font-medium appearance-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface 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"><option>2026</option></select><iconify-icon icon="solar:alt-arrow-down-outline" class="shrink-0 text-[14px] absolute right-2 top-2 pointer-events-none text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon></div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="3 de octubre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="4 de octubre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de octubre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de octubre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de octubre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de octubre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de octubre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="23 de octubre" aria-pressed="true">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="24 de octubre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="25 de octubre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="27 de octubre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="31 de octubre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div></div></div>
```

## Con atajos

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface "><div class="flex flex-wrap gap-2 pb-3 mb-3 border-b border-ccs-line dark:border-ccs-dark-line"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Hoy</button><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">Mañana</button><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">En una semana</button><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap 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 h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100">En un mes</button></div><div><div class="flex items-center justify-between mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="text-sm font-medium" aria-live="polite">octubre 2026</div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="3 de octubre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="4 de octubre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de octubre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de octubre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de octubre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de octubre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de octubre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover font-semibold dark:bg-ccs-dark-hover" aria-label="23 de octubre" aria-current="date">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="24 de octubre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="25 de octubre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="27 de octubre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="30 de octubre" aria-pressed="true">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="31 de octubre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div></div></div>
```

## Días no disponibles

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface "><div><div class="flex items-center justify-between mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="text-sm font-medium" aria-live="polite">octubre 2026</div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="3 de octubre" disabled>3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="4 de octubre" disabled>4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="10 de octubre" disabled>10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="11 de octubre" disabled>11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="17 de octubre" disabled>17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="18 de octubre" disabled>18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de octubre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover font-semibold dark:bg-ccs-dark-hover" aria-label="23 de octubre" aria-current="date">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="24 de octubre" disabled>24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="25 de octubre" disabled>25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="27 de octubre" aria-pressed="true">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong line-through cursor-not-allowed dark:text-ccs-dark-line-strong" aria-label="31 de octubre" disabled>31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div></div></div>
```

## Con hora

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface "><div><div class="flex items-center justify-between mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="text-sm font-medium" aria-live="polite">octubre 2026</div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="3 de octubre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="4 de octubre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de octubre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de octubre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de octubre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de octubre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de octubre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-blue text-white font-medium hover:bg-ccs-blue-mid dark:bg-ccs-blue-mid dark:hover:bg-ccs-blue" aria-label="23 de octubre" aria-pressed="true" aria-current="date">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="24 de octubre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="25 de octubre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="27 de octubre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="31 de octubre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div><div class="mt-3 pt-3 border-t border-ccs-line dark:border-ccs-dark-line flex gap-3"><div class="flex-1"><label for="t-i" class="block text-sm font-medium mb-1.5">Inicio</label><input id="t-i" type="time" value="09:00" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 h-10 px-3" /></div><div class="flex-1"><label for="t-t" class="block text-sm font-medium mb-1.5">Término</label><input id="t-t" type="time" value="13:00" class="w-full h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-ccs-ink placeholder:text-ccs-slate outline-none focus:border-ccs-blue focus:ring-2 focus:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 dark:focus:border-ccs-dark-accent dark:focus:ring-ccs-dark-accent/25 h-10 px-3" /></div></div></div></div>
```

## Selector de fecha

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="flex flex-col gap-2"><div><label id="dp1-l" class="block text-sm font-medium mb-1.5">Fecha del evento</label><button type="button" aria-labelledby="dp1-l dp1-v" aria-haspopup="dialog" aria-expanded="true" class="inline-flex items-center gap-2 w-64 h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-left hover:border-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:hover:border-ccs-dark-accent 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"><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span id="dp1-v" class="text-ccs-slate dark:text-ccs-dark-text-2">Elige una fecha</span></button></div><div role="group" aria-label="Calendario" class="w-fit rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-3 dark:bg-ccs-dark-surface shadow-ccs dark:shadow-none"><div><div class="flex items-center justify-between mb-2"><button type="button" aria-label="Mes anterior"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><div class="text-sm font-medium" aria-live="polite">octubre 2026</div><button type="button" aria-label="Mes siguiente"  class="inline-grid place-items-center w-8 h-8 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></div><div class="grid grid-cols-7 gap-y-1"><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">lu</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ma</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">mi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">ju</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">vi</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">sá</div><div class="grid place-items-center w-9 h-8 text-xs text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true">do</div><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="1 de octubre">1</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="2 de octubre">2</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="3 de octubre">3</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="4 de octubre">4</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="5 de octubre">5</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="6 de octubre">6</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="7 de octubre">7</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="8 de octubre">8</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="9 de octubre">9</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="10 de octubre">10</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="11 de octubre">11</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="12 de octubre">12</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="13 de octubre">13</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="14 de octubre">14</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="15 de octubre">15</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="16 de octubre">16</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="17 de octubre">17</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="18 de octubre">18</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="19 de octubre">19</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="20 de octubre">20</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="21 de octubre">21</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="22 de octubre">22</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 bg-ccs-hover font-semibold dark:bg-ccs-dark-hover" aria-label="23 de octubre" aria-current="date">23</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="24 de octubre">24</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="25 de octubre">25</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="26 de octubre">26</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="27 de octubre">27</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="28 de octubre">28</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="29 de octubre">29</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="30 de octubre">30</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 hover:bg-ccs-hover dark:hover:bg-ccs-dark-hover" aria-label="31 de octubre">31</button><button type="button" class="grid place-items-center w-9 h-9 text-sm rounded-lg transition 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 text-ccs-line-strong dark:text-ccs-dark-line-strong" aria-label="1 de octubre">1</button></div></div></div></div><div class="flex flex-col gap-2"><div><label id="dp2-l" class="block text-sm font-medium mb-1.5">Fecha del evento</label><button type="button" aria-labelledby="dp2-l dp2-v" aria-haspopup="dialog" aria-expanded="true" class="inline-flex items-center gap-2 w-72 h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-left hover:border-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:hover:border-ccs-dark-accent 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"><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span id="dp2-v" class="">viernes, 23 de octubre de 2026</span></button></div></div></div>
```

## Selector de rango

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div><label id="dp3-l" class="block text-sm font-medium mb-1.5">Período</label><button type="button" aria-labelledby="dp3-l dp3-v" aria-haspopup="dialog" aria-expanded="true" class="inline-flex items-center gap-2 w-72 h-11 px-4 rounded-lg border border-ccs-line-strong bg-white text-sm text-left hover:border-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:hover:border-ccs-dark-accent 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"><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] text-ccs-slate dark:text-ccs-dark-text-2" aria-hidden="true"></iconify-icon><span id="dp3-v" class="">20 oct 2026 – 4 nov 2026</span></button></div></div>
```

## Campo con calendario

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-xs"><label for="dp-in" class="block text-sm font-medium mb-1.5">Fecha de término</label><div class="flex items-center w-full h-11 rounded-lg border border-ccs-line-strong bg-white focus-within:border-ccs-blue focus-within:ring-2 focus-within:ring-ccs-blue/15 dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:focus-within:border-ccs-dark-accent dark:focus-within:ring-ccs-dark-accent/25"><input id="dp-in" value="23-10-2026" placeholder="dd-mm-aaaa" class="flex-1 min-w-0 h-full bg-transparent px-3 text-sm text-ccs-ink outline-none placeholder:text-ccs-slate dark:text-ccs-dark-text dark:placeholder:text-ccs-dark-text-2 pl-4" /><span class="pr-1"><button type="button" aria-label="Abrir calendario"  class="inline-grid place-items-center w-9 h-9 rounded-ccs text-ccs-ink hover:bg-ccs-hover dark:text-ccs-dark-text dark:hover:bg-ccs-dark-hover transition 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"><iconify-icon icon="solar:calendar-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon></button></span></div><div class="text-xs mt-1.5 text-ccs-slate dark:text-ccs-dark-text-2">Formato dd-mm-aaaa.</div></div></div>
```

## Guía: Comportamiento

El calendario es una cuadrícula: las flechas mueven el día, Re Pág y Av Pág cambian de mes, Inicio y Fin van al lunes y al domingo. El mes que se muestra se anuncia con aria-live. Los días no disponibles van con disabled y no solo tachados. Siempre se puede escribir la fecha en el campo, sin abrir el calendario.