@reservi/calendar 1.4.0

package/dist/styles.css

@@ -0,0 +1,1118 @@
+/**
+ * ARCHIVO GENERADO — no editar a mano.
+ * Fuente: packages/theme/src  ·  Generador: packages/bundle/scripts/build-css.mjs
+ */
+/**
+ * Punto de entrada "plain CSS" de Reservi Calendar: sin Tailwind.
+ *
+ * Uso (Tailwind 3, CSS Modules, PostCSS o un <link> suelto):
+ *   @import "@reservi/theme/plain";
+ *
+ * Equivale a `@reservi/theme` pero declara los design tokens en `:root` en
+ * lugar de en un bloque `@theme` de TailwindCSS 4. Los estilos de componentes
+ * son los mismos: leen los tokens con `var(--color-rsv-*, fallback)`.
+ */
+/**
+ * ARCHIVO GENERADO — no editar a mano.
+ * Fuente: src/theme.css  ·  Generador: scripts/build-plain.mjs
+ *
+ * Misma lista de design tokens que el bloque `@theme` de Tailwind 4, pero
+ * declarados en `:root` para consumidores con Tailwind 3 o sin Tailwind.
+ */
+
+:root {
+  /* Superficies */
+  --color-rsv-bg: oklch(1 0 0);
+  --color-rsv-surface: oklch(0.98 0 0);
+  --color-rsv-border: oklch(0.9 0 0);
+  --color-rsv-muted: oklch(0.55 0 0);
+  --color-rsv-text: oklch(0.2 0 0);
+
+  /* Marca / acento */
+  --color-rsv-primary: oklch(0.55 0.2 264);
+  --color-rsv-primary-fg: oklch(0.99 0 0);
+  --color-rsv-today: oklch(0.97 0.04 264);
+
+  /* Paleta categórica de eventos */
+  --color-rsv-event-1: oklch(0.6 0.18 264);
+  --color-rsv-event-2: oklch(0.65 0.17 150);
+  --color-rsv-event-3: oklch(0.7 0.17 60);
+  --color-rsv-event-4: oklch(0.62 0.2 20);
+  --color-rsv-event-5: oklch(0.6 0.16 320);
+  --color-rsv-event-fg: oklch(0.99 0 0);
+
+  /* Estados */
+  --color-rsv-now: oklch(0.6 0.22 20);
+  --color-rsv-selection: oklch(0.9 0.05 264);
+  --color-rsv-nonbusiness: oklch(0.96 0 0);
+
+  /* Tipografía */
+  --font-rsv-sans: ui-sans-serif, system-ui, sans-serif;
+  --text-rsv-xs: 0.75rem;
+  --text-rsv-sm: 0.8125rem;
+  --text-rsv-base: 0.875rem;
+
+  /* Geometría */
+  --radius-rsv: 0.5rem;
+  --radius-rsv-event: 0.375rem;
+  --spacing-rsv-slot: 2.5rem;
+  --spacing-rsv-gutter: 0.25rem;
+
+  /* Sombras y transición */
+  --shadow-rsv-pop: 0 4px 20px -4px oklch(0 0 0 / 0.2);
+  --ease-rsv: cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Modo oscuro automático */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-rsv-bg: oklch(0.18 0.01 264);
+    --color-rsv-surface: oklch(0.22 0.01 264);
+    --color-rsv-border: oklch(0.3 0.01 264);
+    --color-rsv-text: oklch(0.95 0 0);
+    --color-rsv-muted: oklch(0.6 0 0);
+    --color-rsv-today: oklch(0.3 0.05 264);
+    --color-rsv-nonbusiness: oklch(0.2 0.01 264);
+  }
+}
+
+/* Modo oscuro por clase (.dark) para toggle manual */
+.dark {
+  --color-rsv-bg: oklch(0.18 0.01 264);
+  --color-rsv-surface: oklch(0.22 0.01 264);
+  --color-rsv-border: oklch(0.3 0.01 264);
+  --color-rsv-text: oklch(0.95 0 0);
+  --color-rsv-muted: oklch(0.6 0 0);
+  --color-rsv-today: oklch(0.3 0.05 264);
+  --color-rsv-nonbusiness: oklch(0.2 0.01 264);
+}
+
+/**
+ * Estilos base de los componentes de Reservi Calendar. Todo usa design tokens
+ * (--*-rsv-*) con fallback, de modo que retematizar = sobreescribir tokens.
+ * Seleccionamos por [data-rsv] para no depender de clases concretas.
+ */
+
+[data-rsv="root"] {
+  font-family: var(--font-rsv-sans, system-ui, sans-serif);
+  font-size: var(--text-rsv-base, 0.875rem);
+  color: var(--color-rsv-text, #1a1a1a);
+  background: var(--color-rsv-bg, #fff);
+  border: 1px solid var(--color-rsv-border, #e5e5e5);
+  border-radius: var(--radius-rsv, 0.5rem);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* El area de vista reparte el alto disponible del root (flex column), de modo
+   que el cuerpo de timeGrid pueda scrollear cuando el root tiene alto fijo.
+   Con `height: "auto"` el calendario crece con su contenido. */
+[data-rsv="view"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+[data-rsv="root"][data-rsv-autoheight="true"] [data-rsv="view"] {
+  flex: 0 0 auto;
+}
+
+/* Hueco donde el framework anfitrion (React/Vue) pinta un render prop: no debe
+   introducir una caja propia que rompa el layout del evento o de la celda. */
+[data-rsv="host"] {
+  display: contents;
+}
+
+/* Toolbar */
+[data-rsv="toolbar-wrap"] {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="toolbar"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+}
+[data-rsv="toolbar-section"] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+/* La zona de navegación se centra; el slot de inicio y el de fin la flanquean. */
+[data-rsv="toolbar-section"][data-rsv-area="nav"] {
+  gap: 0.25rem;
+}
+/* El título es el disparador del datepicker. */
+[data-rsv="datepicker-anchor"] {
+  position: relative;
+  display: inline-flex;
+}
+[data-rsv="title"] {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  text-transform: capitalize;
+  margin: 0 0.25rem;
+  min-width: 7rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.25rem);
+  cursor: pointer;
+  transition: background 0.15s var(--ease-rsv, ease);
+}
+[data-rsv="title"]:hover {
+  background: var(--color-rsv-surface, #f3f4f6);
+}
+[data-rsv="title"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: 2px;
+}
+[data-rsv="title-icon"] {
+  flex: none;
+  opacity: 0.75;
+}
+
+/* Datepicker (rejilla mes/año) */
+[data-rsv="datepicker"] {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 50;
+  min-width: 15rem;
+  padding: 0.625rem;
+  background: var(--color-rsv-bg, #fff);
+  border: 1px solid var(--color-rsv-border, #e5e5e5);
+  border-radius: var(--radius-rsv, 0.5rem);
+  box-shadow: var(--shadow-rsv, 0 12px 32px rgba(0, 0, 0, 0.18));
+}
+[data-rsv="dp-head"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding: 0 0.25rem;
+}
+[data-rsv="dp-label"] {
+  font-weight: 700;
+  text-transform: capitalize;
+}
+[data-rsv="dp-nav"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.25rem);
+  cursor: pointer;
+  transition: background 0.15s var(--ease-rsv, ease);
+}
+[data-rsv="dp-nav"]:hover {
+  background: var(--color-rsv-surface, #f3f4f6);
+}
+[data-rsv="dp-grid"] {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.25rem;
+}
+[data-rsv="dp-month"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-transform: capitalize;
+  padding: 0.45rem 0.25rem;
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.25rem);
+  cursor: pointer;
+  transition:
+    background 0.12s var(--ease-rsv, ease),
+    color 0.12s var(--ease-rsv, ease);
+}
+[data-rsv="dp-month"]:hover {
+  background: var(--color-rsv-surface, #f3f4f6);
+}
+[data-rsv="dp-month"][data-active="true"] {
+  background: var(--color-rsv-primary, #4f46e5);
+  color: var(--color-rsv-primary-fg, #fff);
+  font-weight: 600;
+}
+/* "Hoy" sin estar seleccionado: solo un anillo. */
+[data-rsv="dp-month"][data-today="true"]:not([data-active="true"]),
+[data-rsv="dp-day"][data-today="true"]:not([data-active="true"]) {
+  box-shadow: inset 0 0 0 1.5px var(--color-rsv-primary, #4f46e5);
+}
+
+/* Rejilla de días (modo DÍA) */
+[data-rsv="dp-days"] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.125rem;
+}
+[data-rsv="dp-dow"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--color-rsv-text-muted, #6b7280);
+}
+[data-rsv="dp-day"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  aspect-ratio: 1;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background 0.12s var(--ease-rsv, ease),
+    color 0.12s var(--ease-rsv, ease);
+}
+[data-rsv="dp-day"]:hover {
+  background: var(--color-rsv-surface, #f3f4f6);
+}
+[data-rsv="dp-day"][data-other="true"] {
+  color: var(--color-rsv-text-muted, #9ca3af);
+  opacity: 0.6;
+}
+[data-rsv="dp-day"][data-active="true"] {
+  background: var(--color-rsv-primary, #4f46e5);
+  color: var(--color-rsv-primary-fg, #fff);
+  font-weight: 600;
+  opacity: 1;
+}
+[data-rsv="dp-nav"]:focus-visible,
+[data-rsv="dp-month"]:focus-visible,
+[data-rsv="dp-day"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+}
+[data-rsv="button"] {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 1px solid var(--color-rsv-border, #e5e5e5);
+  background: var(--color-rsv-surface, #fafafa);
+  color: inherit;
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.25rem);
+  padding: 0.3rem 0.6rem;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.15s var(--ease-rsv, ease);
+}
+[data-rsv="button"]:hover {
+  background: var(--color-rsv-border, #eee);
+}
+[data-rsv="button"][data-active="true"] {
+  background: var(--color-rsv-primary, #4f46e5);
+  color: var(--color-rsv-primary-fg, #fff);
+  border-color: transparent;
+}
+/* Botón "Añadir" (variante primaria, vía onAddClick). */
+[data-rsv="button"][data-rsv-variant="primary"] {
+  background: var(--color-rsv-primary, #4f46e5);
+  color: var(--color-rsv-primary-fg, #fff);
+  border-color: transparent;
+  font-weight: 500;
+}
+[data-rsv="button"][data-rsv-variant="primary"]:hover {
+  background: var(--color-rsv-primary-hover, var(--color-rsv-primary, #4338ca));
+  filter: brightness(0.95);
+}
+[data-rsv="add-icon"] {
+  font-size: 1.05em;
+  line-height: 1;
+}
+[data-rsv="button"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: 2px;
+}
+
+/* Fila de pestañas de vista */
+[data-rsv="toolbar-views"] {
+  display: flex;
+  align-items: stretch;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem 0.5rem;
+  flex-wrap: wrap;
+}
+[data-rsv="view-tab"] {
+  appearance: none;
+  flex: 1 1 0;
+  border: none;
+  background: transparent;
+  color: var(--color-rsv-text-muted, #6b7280);
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.25rem);
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.15s var(--ease-rsv, ease),
+    color 0.15s var(--ease-rsv, ease);
+}
+[data-rsv="view-tab"]:hover {
+  background: var(--color-rsv-surface, #f3f4f6);
+  color: var(--color-rsv-text, #1a1a1a);
+}
+[data-rsv="view-tab"][data-active="true"] {
+  background: var(--color-rsv-primary, #4f46e5);
+  color: var(--color-rsv-primary-fg, #fff);
+}
+[data-rsv="view-tab"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+}
+
+/* DayGrid */
+[data-rsv="daygrid"] {
+  display: flex;
+  flex-direction: column;
+}
+[data-rsv="daygrid-header"],
+[data-rsv="daygrid-week"] {
+  display: grid;
+  grid-template-columns: repeat(var(--rsv-cols, 7), minmax(0, 1fr));
+}
+/* Columna de número de semana (cuando weekNumbers está activo). */
+[data-rsv="daygrid"][data-weeknumbers="true"] [data-rsv="daygrid-header"],
+[data-rsv="daygrid"][data-weeknumbers="true"] [data-rsv="daygrid-week"] {
+  grid-template-columns: var(--rsv-weeknum-width, 2.25rem) repeat(
+      var(--rsv-cols, 7),
+      minmax(0, 1fr)
+    );
+}
+[data-rsv="daygrid-weeknum-header"],
+[data-rsv="daygrid-weeknum"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  color: var(--color-rsv-muted, #777);
+  background: var(--color-rsv-surface, #fafafa);
+  border-right: 1px solid var(--color-rsv-border, #eee);
+  font-variant-numeric: tabular-nums;
+}
+[data-rsv="daygrid-weeknum"] {
+  align-items: flex-start;
+  padding-top: 0.3rem;
+}
+[data-rsv="daygrid-header"] {
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="daygrid-dow"] {
+  padding: 0.4rem 0.5rem;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  color: var(--color-rsv-muted, #777);
+  text-align: center;
+  text-transform: capitalize;
+}
+[data-rsv="day"] {
+  min-height: 5.5rem;
+  padding: 0.25rem;
+  border-right: 1px solid var(--color-rsv-border, #eee);
+  border-bottom: 1px solid var(--color-rsv-border, #eee);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-rsv-gutter, 0.25rem);
+}
+[data-rsv="daygrid-week"] [data-rsv="day"]:last-child {
+  border-right: none;
+}
+[data-rsv="day"][data-other="true"] {
+  background: var(--color-rsv-nonbusiness, #f7f7f7);
+  color: var(--color-rsv-muted, #999);
+}
+[data-rsv="day"][data-today="true"] {
+  background: var(--color-rsv-today, #eef);
+}
+[data-rsv="day"][data-business="false"] {
+  background: var(--color-rsv-nonbusiness, #f7f7f7);
+}
+[data-rsv="day"][data-selected="true"] {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+  background: var(--color-rsv-selection, #e8e8ff);
+}
+[data-rsv="event"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: 1px;
+}
+/* Selección múltiple (bulk ops): ctrl/cmd-click sobre un evento. */
+[data-rsv="event"][data-rsv-selected="true"] {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 3px var(--color-rsv-selection, #e8e8ff);
+}
+[data-rsv="day-number"] {
+  align-self: flex-end;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  font-variant-numeric: tabular-nums;
+  padding: 0.1rem 0.25rem;
+}
+[data-rsv="day"][data-today="true"] [data-rsv="day-number"] {
+  background: var(--color-rsv-primary, #4f46e5);
+  color: var(--color-rsv-primary-fg, #fff);
+  border-radius: 999px;
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+/* Eventos */
+[data-rsv="event"] {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  line-height: 1.3;
+  padding: 0.1rem 0.35rem;
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  color: var(--rsv-event-fg, var(--color-rsv-event-fg, #fff));
+  border: 1px solid var(--rsv-event-border, transparent);
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+[data-rsv="daygrid"] [data-rsv="event"][data-editable="true"] {
+  cursor: grab;
+  touch-action: none;
+}
+[data-rsv="event"][data-all-day="false"] {
+  background: transparent;
+  color: var(--color-rsv-text, #1a1a1a);
+}
+[data-rsv="event"][data-all-day="false"]::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  flex: none;
+}
+[data-rsv="more-anchor"] {
+  position: relative;
+}
+[data-rsv="more-link"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  width: 100%;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  color: var(--color-rsv-muted, #777);
+  cursor: pointer;
+  padding: 0.05rem 0.35rem;
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.3rem);
+}
+[data-rsv="more-link"]:hover {
+  color: var(--color-rsv-primary, #4f46e5);
+  background: var(--color-rsv-surface, #f3f4f6);
+}
+[data-rsv="more-link"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+}
+
+/* Popover "+N more" */
+[data-rsv="more-popover"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 60;
+  min-width: 12rem;
+  max-width: min(18rem, calc(100vw - 1.5rem));
+  background: var(--color-rsv-bg, #fff);
+  border: 1px solid var(--color-rsv-border, #e5e5e5);
+  border-radius: var(--radius-rsv, 0.5rem);
+  box-shadow: var(--shadow-rsv, 0 12px 32px rgba(0, 0, 0, 0.18));
+  overflow: hidden;
+}
+[data-rsv="more-popover-header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+  background: var(--color-rsv-surface, #fafafa);
+}
+[data-rsv="more-popover-title"] {
+  font-weight: 600;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  text-transform: capitalize;
+}
+[data-rsv="more-popover-close"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--color-rsv-muted, #777);
+  font: inherit;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.15rem 0.3rem;
+  border-radius: calc(var(--radius-rsv, 0.5rem) - 0.3rem);
+}
+[data-rsv="more-popover-close"]:hover {
+  background: var(--color-rsv-border, #eee);
+  color: var(--color-rsv-text, #1a1a1a);
+}
+[data-rsv="more-popover-body"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-rsv-gutter, 0.25rem);
+  padding: 0.4rem;
+  max-height: 16rem;
+  overflow-y: auto;
+}
+
+/* TimeGrid */
+[data-rsv="timegrid"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  --rsv-tg-axis-width: 3.5rem;
+}
+[data-rsv="tg-header"],
+[data-rsv="tg-allday"] {
+  display: grid;
+  grid-template-columns: var(--rsv-tg-axis-width) repeat(var(--rsv-tg-days, 7), minmax(0, 1fr));
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="tg-col-header"] {
+  padding: 0.4rem 0.5rem;
+  text-align: center;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  color: var(--color-rsv-muted, #777);
+  text-transform: capitalize;
+  border-left: 1px solid var(--color-rsv-border, #eee);
+}
+[data-rsv="tg-col-header"][data-today="true"] {
+  color: var(--color-rsv-primary, #4f46e5);
+  font-weight: 600;
+}
+[data-rsv="tg-axis-label"],
+[data-rsv="tg-allday-cell"] {
+  padding: 0.25rem 0.4rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  border-left: 1px solid var(--color-rsv-border, #eee);
+  min-height: 1.5rem;
+}
+[data-rsv="tg-axis-label"] {
+  color: var(--color-rsv-muted, #777);
+  border-left: none;
+  text-align: right;
+}
+[data-rsv="tg-body"] {
+  display: grid;
+  grid-template-columns: var(--rsv-tg-axis-width) repeat(var(--rsv-tg-days, 7), minmax(0, 1fr));
+  overflow: auto;
+  /* Imprescindible para que un grid dentro de un flex column pueda encogerse
+     y por tanto scrollear en vez de desbordar al padre. */
+  flex: 1 1 auto;
+  min-height: 0;
+  align-content: start;
+}
+[data-rsv="tg-axis"] {
+  display: flex;
+  flex-direction: column;
+}
+[data-rsv="tg-slot"] {
+  height: var(--spacing-rsv-slot, 2.5rem);
+  position: relative;
+  border-top: 1px solid transparent;
+}
+[data-rsv="tg-slot"][data-major="true"] {
+  border-top: 1px solid var(--color-rsv-border, #eee);
+}
+/**
+ * La etiqueta va centrada en su franja, no montada sobre la línea superior.
+ *
+ * Antes se subía con `top: -0.6em` y se le pintaba detrás un rectángulo opaco
+ * de `--color-rsv-bg` para tapar la línea que cruzaba el texto. Ese rectángulo
+ * asumía que el fondo real del eje era exactamente `--color-rsv-bg`, y se veía
+ * como una mancha en cuanto algo lo teñía (día actual, `surface`, franjas no
+ * laborables, o un token sobreescrito por la app).
+ *
+ * Centrada no cruza ningún borde, así que el rectángulo sobra y el problema
+ * desaparece en vez de taparse.
+ */
+[data-rsv="tg-slot-label"] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.35rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  color: var(--color-rsv-muted, #777);
+}
+[data-rsv="tg-col"] {
+  position: relative;
+  border-left: 1px solid var(--color-rsv-border, #eee);
+  background-image: repeating-linear-gradient(
+    var(--color-rsv-bg, #fff) 0,
+    var(--color-rsv-bg, #fff) calc(var(--spacing-rsv-slot, 2.5rem) - 1px),
+    var(--color-rsv-border, #eee) calc(var(--spacing-rsv-slot, 2.5rem) - 1px),
+    var(--color-rsv-border, #eee) var(--spacing-rsv-slot, 2.5rem)
+  );
+}
+[data-rsv="tg-col"][data-today="true"] {
+  background-color: var(--color-rsv-today, #eef);
+}
+[data-rsv="tg-col"] [data-rsv="event"] {
+  position: absolute;
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  color: var(--rsv-event-fg, #fff);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  padding: 0.1rem 0.3rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  overflow: hidden;
+  box-sizing: border-box;
+  /* `borderColor` del evento si lo hay; si no, un tono del propio fondo. */
+  border: 1px solid
+    var(--rsv-event-border, color-mix(in oklch, var(--rsv-event-bg) 80%, black));
+  align-items: stretch;
+  white-space: normal;
+}
+
+/* Fantasma del rango que se esta seleccionando (`selectMirror`). */
+[data-rsv="select-mirror"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: var(--color-rsv-selection, #e8e8ff);
+  border: 1px dashed var(--color-rsv-primary, #4f46e5);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  opacity: 0.7;
+  pointer-events: none;
+  z-index: 4;
+}
+[data-rsv="tg-nonbusiness"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: var(--color-rsv-nonbusiness, #f4f4f5);
+  opacity: 0.6;
+  pointer-events: none;
+}
+[data-rsv="resize-handle"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 6px;
+  cursor: ns-resize;
+  z-index: 1;
+}
+[data-rsv="resize-handle"][data-edge="start"] {
+  top: 0;
+  bottom: auto;
+}
+[data-rsv="now-indicator"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top: 2px solid var(--color-rsv-now, #e11);
+  z-index: 5;
+}
+[data-rsv="now-indicator"]::before {
+  content: "";
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--color-rsv-now, #e11);
+}
+
+/* List */
+[data-rsv="list"] {
+  display: flex;
+  flex-direction: column;
+}
+[data-rsv="list-day-header"] {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+  position: sticky;
+  top: 0;
+  padding: 0.4rem 0.75rem;
+  background: var(--color-rsv-surface, #fafafa);
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  font-weight: 600;
+  text-transform: capitalize;
+  color: var(--color-rsv-muted, #555);
+}
+[data-rsv="list-day"][data-today="true"] [data-rsv="list-day-header"] {
+  color: var(--color-rsv-primary, #4f46e5);
+}
+[data-rsv="list-day-side-text"] {
+  font-weight: 400;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  color: var(--color-rsv-muted, #777);
+}
+[data-rsv="list-item"] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--color-rsv-border, #eee);
+  cursor: pointer;
+}
+[data-rsv="list-item"]:hover {
+  background: var(--color-rsv-surface, #fafafa);
+}
+[data-rsv="list-item"]:focus-visible {
+  outline: 2px solid var(--color-rsv-primary, #4f46e5);
+  outline-offset: -2px;
+}
+[data-rsv="list-item-time"] {
+  flex: none;
+  width: 5rem;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  color: var(--color-rsv-muted, #777);
+  font-variant-numeric: tabular-nums;
+}
+[data-rsv="list-item-dot"] {
+  flex: none;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 999px;
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+}
+[data-rsv="list-empty"] {
+  padding: 2rem;
+  text-align: center;
+  color: var(--color-rsv-muted, #999);
+}
+
+/* MultiMonth (vista de año) */
+[data-rsv="multimonth"] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  overflow: auto;
+}
+[data-rsv="mm-month"] {
+  border: 1px solid var(--color-rsv-border, #e5e5e5);
+  border-radius: var(--radius-rsv, 0.5rem);
+  overflow: hidden;
+}
+[data-rsv="mm-title"] {
+  padding: 0.4rem 0.6rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  background: var(--color-rsv-surface, #fafafa);
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="mm-month"] [data-rsv="day"] {
+  min-height: 2.2rem;
+}
+[data-rsv="mm-month"] [data-rsv="event"] {
+  display: none; /* en vista compacta solo se marcan los días con eventos */
+}
+[data-rsv="mm-month"] [data-rsv="day"]:has([data-rsv="event"]) [data-rsv="day-number"] {
+  font-weight: 700;
+  color: var(--color-rsv-primary, #fff);
+}
+
+/* Timeline */
+[data-rsv="timeline"] {
+  overflow: auto;
+}
+[data-rsv="tl-axis"] {
+  position: relative;
+  height: 1.6rem;
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="tl-slot"] {
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: var(--text-rsv-xs, 0.75rem);
+  color: var(--color-rsv-muted, #777);
+  padding: 0.2rem 0;
+  border-inline-start: 1px solid var(--color-rsv-border, #eee);
+  padding-inline-start: 0.25rem;
+}
+[data-rsv="tl-body"] {
+  position: relative;
+  background-image: repeating-linear-gradient(
+    to right,
+    transparent 0,
+    transparent calc(100% / 24 - 1px),
+    var(--color-rsv-border, #f0f0f0) calc(100% / 24 - 1px),
+    var(--color-rsv-border, #f0f0f0) calc(100% / 24)
+  );
+}
+[data-rsv="timeline"] [data-rsv="event"],
+[data-rsv="resource-lane"] [data-rsv="event"] {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  padding: 0 0.35rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  color: var(--rsv-event-fg, #fff);
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+/* Resource timeline (Scheduler) */
+[data-rsv="resource-timeline"] {
+  --rsv-resource-area-width: 12rem;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+[data-rsv="rt-header"],
+[data-rsv="resource-row"] {
+  display: grid;
+  grid-template-columns: var(--rsv-resource-area-width) 1fr;
+}
+[data-rsv="rt-header"] {
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+  position: sticky;
+  top: 0;
+  background: var(--color-rsv-bg, #fff);
+  z-index: 2;
+}
+[data-rsv="resource-area-header"] {
+  padding: 0.3rem 0.5rem;
+  font-weight: 600;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  border-inline-end: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="resource-label"] {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  border-inline-end: 1px solid var(--color-rsv-border, #e5e5e5);
+  border-bottom: 1px solid var(--color-rsv-border, #eee);
+  font-size: var(--text-rsv-sm, 0.8125rem);
+}
+[data-rsv="resource-toggle"] {
+  appearance: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-rsv-muted, #777);
+  font-size: 0.7rem;
+  padding: 0 0.2rem;
+}
+[data-rsv="resource-lane"] {
+  position: relative;
+  border-bottom: 1px solid var(--color-rsv-border, #eee);
+}
+
+/* Resource day-grid (recursos como columnas) */
+[data-rsv="resource-daygrid"] {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+[data-rsv="rdg-header"],
+[data-rsv="rdg-body"] {
+  display: grid;
+  grid-template-columns: repeat(var(--rsv-rdg-cols, 1), minmax(0, 1fr));
+}
+[data-rsv="rdg-header"] {
+  border-bottom: 1px solid var(--color-rsv-border, #e5e5e5);
+}
+[data-rsv="rdg-col-header"] {
+  padding: 0.4rem 0.5rem;
+  text-align: center;
+  font-size: var(--text-rsv-sm, 0.8125rem);
+  font-weight: 600;
+  border-inline-start: 1px solid var(--color-rsv-border, #eee);
+}
+[data-rsv="rdg-col"] {
+  min-height: 6rem;
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-rsv-gutter, 0.25rem);
+  border-inline-start: 1px solid var(--color-rsv-border, #eee);
+}
+[data-rsv="rdg-col"] [data-rsv="event"] {
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  color: var(--rsv-event-fg, #fff);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  padding: 0.1rem 0.35rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  cursor: pointer;
+}
+
+/* Vista mensual con recursos como columnas anidadas por día. */
+[data-rsv="resource-daygrid-month"] {
+  display: flex;
+  flex-direction: column;
+}
+[data-rsv="rdgm-week"] {
+  display: grid;
+  grid-template-columns: repeat(var(--rsv-rdgm-cols, 7), minmax(0, 1fr));
+}
+[data-rsv="rdgm-week"] [data-rsv="day"]:last-child {
+  border-right: none;
+}
+[data-rsv="rdgm-columns"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  overflow: hidden;
+}
+[data-rsv="rdgm-col"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  border-inline-start: 2px solid var(--color-rsv-border, #eee);
+  padding-inline-start: 0.2rem;
+}
+[data-rsv="rdgm-col-label"] {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--color-rsv-muted, #777);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+[data-rsv="rdgm-col"] [data-rsv="event"] {
+  background: var(--rsv-event-bg, var(--color-rsv-event-1));
+  color: var(--rsv-event-fg, #fff);
+  border-radius: var(--radius-rsv-event, 0.375rem);
+  padding: 0.05rem 0.3rem;
+  font-size: var(--text-rsv-xs, 0.75rem);
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+[data-rsv="rdgm-more"] {
+  font-size: 0.65rem;
+  color: var(--color-rsv-muted, #777);
+  cursor: pointer;
+}
+
+/* Eventos de fondo (display: background) */
+[data-rsv="event"][data-display="background"] {
+  opacity: 0.25;
+  border: none;
+  box-shadow: none;
+  pointer-events: none;
+}
+[data-rsv="event"][data-display="background"]::before {
+  display: none;
+}
+
+/* Nav links (números y cabeceras de día clicables) */
+[data-nav-link="true"] {
+  cursor: pointer;
+}
+[data-nav-link="true"]:hover {
+  color: var(--color-rsv-primary, #4f46e5);
+  text-decoration: underline;
+}
+
+/* RTL */
+[data-rsv="root"][dir="rtl"] {
+  direction: rtl;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rsv="button"] {
+    transition: none;
+  }
+}
+
+/* ───────────────────────── Responsive ───────────────────────── */
+
+/* Tablet (≤768px): la toolbar se reparte en filas; la navegación baja a su
+   propia línea centrada, dejando arriba el slot de inicio y el botón Añadir. */
+@media (max-width: 768px) {
+  [data-rsv="toolbar"] {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
+  [data-rsv="toolbar-section"][data-rsv-area="start"] {
+    order: 1;
+  }
+  [data-rsv="toolbar-section"][data-rsv-area="end"] {
+    order: 2;
+    margin-inline-start: auto;
+  }
+  [data-rsv="toolbar-section"][data-rsv-area="nav"] {
+    order: 3;
+    flex: 1 1 100%;
+    justify-content: center;
+  }
+}
+
+/* Móvil (≤640px): pestañas de vista en scroll horizontal (no en varias filas),
+   título flexible y datepicker que nunca desborda la pantalla. */
+@media (max-width: 640px) {
+  [data-rsv="toolbar"] {
+    padding: 0.5rem;
+  }
+  [data-rsv="title"] {
+    min-width: 0;
+  }
+  [data-rsv="toolbar-views"] {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+  }
+  [data-rsv="view-tab"] {
+    flex: 0 0 auto;
+  }
+  [data-rsv="datepicker"] {
+    min-width: min(15rem, calc(100vw - 1.5rem));
+    max-width: calc(100vw - 1.5rem);
+  }
+  [data-rsv="day"] {
+    min-height: 4rem;
+  }
+  [data-rsv="event"] {
+    font-size: 0.7rem;
+  }
+}
+
+/* Móvil pequeño (≤420px): controles de navegación y rejilla del datepicker
+   un punto más compactos. */
+@media (max-width: 420px) {
+  [data-rsv="toolbar-section"][data-rsv-area="nav"] [data-rsv="button"] {
+    padding: 0.3rem 0.45rem;
+  }
+  [data-rsv="day"] {
+    min-height: 3.25rem;
+  }
+}
+