/*! Tesela UI v1.4.0 — biblioteca de componentes sin dependencias · Iconos: Lucide (ISC), (c) Lucide Icons and Contributors */
@layer tesela.tokens, tesela.base, tesela.components, tesela.utilities;

@layer tesela.base {
/* ============================================================================
   tesela-ui — Biblioteca de componentes sin dependencias (CSS)
   Inspirada en la estética de devl.dev. Todas las clases llevan el prefijo `tsl-`.
   Uso: <link rel="stylesheet" href="lib/tesela-ui.css"> + <script src="lib/tesela-ui.js" defer>
   Temas: oscuro por defecto; agrega data-theme="light" en <html> (o en cualquier ancestro).
   ============================================================================ */
}

@layer tesela.tokens {
/* Generado por scripts/build-tokens.js desde src/tokens/. No editar a mano. */

/* ----------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------------- */

:root,
[data-theme="dark"],
[data-theme="system"] {
  --tsl-bg: #141415;
  --tsl-bg-elevated: #1b1b1d;
  --tsl-bg-glass: rgba(20, 20, 21, 0.84);
  --tsl-surface: rgba(255, 255, 255, 0.032);
  --tsl-surface-hover: rgba(255, 255, 255, 0.055);
  --tsl-surface-strong: rgba(255, 255, 255, 0.08);
  --tsl-fg: #f5f5f7;
  --tsl-fg-muted: #8e8e96;
  --tsl-fg-subtle: #6a6a74;
  --tsl-border: rgba(255, 255, 255, 0.095);
  --tsl-border-strong: rgba(255, 255, 255, 0.22);
  --tsl-backdrop: rgba(8, 8, 9, 0.6);
  --tsl-accent: #6365f0;
  --tsl-success: #10b981;
  --tsl-warning: #f59e0b;
  --tsl-danger: #f54a67;
  --tsl-danger-fg: #1a0508;
  --tsl-info: #0ea5e9;
  --tsl-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 26px -12px rgba(0, 0, 0, 0.65);
  --tsl-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 20px 38px -12px rgba(0, 0, 0, 0.8);
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  color-scheme: dark;
}

[data-theme="light"] {
  --tsl-bg: #f8f8f7;
  --tsl-bg-elevated: #ffffff;
  --tsl-bg-glass: rgba(248, 248, 247, 0.86);
  --tsl-surface: rgba(0, 0, 0, 0.024);
  --tsl-surface-hover: rgba(0, 0, 0, 0.045);
  --tsl-surface-strong: rgba(0, 0, 0, 0.07);
  --tsl-fg: #141416;
  --tsl-fg-muted: #63636b;
  --tsl-fg-subtle: #84848e;
  --tsl-border: rgba(0, 0, 0, 0.095);
  --tsl-border-strong: rgba(0, 0, 0, 0.28);
  --tsl-backdrop: rgba(20, 20, 22, 0.28);
  --tsl-accent: #4f46e5;
  --tsl-success: #047253;
  --tsl-warning: #a14a08;
  --tsl-danger: #be123c;
  --tsl-danger-fg: #ffffff;
  --tsl-info: #0368a0;
  --tsl-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
  --tsl-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 34px -12px rgba(0, 0, 0, 0.22);
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --tsl-bg: #f8f8f7;
    --tsl-bg-elevated: #ffffff;
    --tsl-bg-glass: rgba(248, 248, 247, 0.86);
    --tsl-surface: rgba(0, 0, 0, 0.024);
    --tsl-surface-hover: rgba(0, 0, 0, 0.045);
    --tsl-surface-strong: rgba(0, 0, 0, 0.07);
    --tsl-fg: #141416;
    --tsl-fg-muted: #63636b;
    --tsl-fg-subtle: #84848e;
    --tsl-border: rgba(0, 0, 0, 0.095);
    --tsl-border-strong: rgba(0, 0, 0, 0.28);
    --tsl-backdrop: rgba(20, 20, 22, 0.28);
    --tsl-accent: #4f46e5;
    --tsl-success: #047253;
    --tsl-warning: #a14a08;
    --tsl-danger: #be123c;
    --tsl-danger-fg: #ffffff;
    --tsl-info: #0368a0;
    --tsl-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
    --tsl-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 34px -12px rgba(0, 0, 0, 0.22);
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
    color-scheme: light;
  }
}

:root {
  --tsl-accent-fg: #ffffff;
  --tsl-chart-2: #10b981;
  --tsl-chart-3: #f59e0b;
  --tsl-chart-4: #f43f5e;
  --tsl-chart-5: #0ea5e9;
  --tsl-chart-6: #a855f7;
  --tsl-chart-7: #14b8a6;
  --tsl-chart-8: #ec4899;
  --tsl-radius: 9px;
  --tsl-radius-sm: 7px;
  --tsl-radius-xs: 5px;
  --tsl-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --tsl-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --tsl-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tsl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
}

@layer tesela.base {
/* ----------------------------------------------------------------------------
   Base: clase .tsl, atributo hidden y utilidad .tsl-sr-only
   ---------------------------------------------------------------------------- */
/* Base opcional: pon `tsl` en <body> (o en un contenedor) para obtener el aspecto Tesela */
.tsl {
  background: var(--tsl-bg);
  color: var(--tsl-fg);
  font-family: var(--tsl-font-mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Los componentes definen su propio display; el atributo `hidden` debe seguir mandando.
   !important a propósito: dentro de una capa también gana al CSS del usuario, como el `hidden` nativo */
[class^="tsl-"][hidden],
[class*=" tsl-"][hidden] {
  display: none !important;
}

.tsl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Un popover cerrado nunca se muestra, aunque un componente defina su propio display (!important
   por la misma razón que `hidden`) */
[popover]:not(:popover-open) {
  display: none !important;
}
}

@layer tesela.base {
/* ----------------------------------------------------------------------------
   2. Utilidades de tipografía
   ---------------------------------------------------------------------------- */
.tsl-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
}

.tsl-heading {
  font-family: var(--tsl-font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tsl-muted {
  color: var(--tsl-fg-muted);
}

.tsl-mono {
  font-family: var(--tsl-font-mono);
}

.tsl-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 5px;
  font-size: 10px;
  font-family: var(--tsl-font-sans);
  font-weight: 500;
  line-height: 1.2;
  border-radius: 4px;
  background: rgba(128, 128, 136, 0.16);
  border: 1px solid var(--tsl-border);
  /* Más claro que el texto atenuado: el fondo de la tecla resta contraste (4,5:1 también sobre botones) */
  color: color-mix(in srgb, var(--tsl-fg-muted) 75%, var(--tsl-fg));
}
}

@layer tesela.components {
/* ==========================================================================
   02b. Iconos: <tsl-icon> y .tsl-icon (el envoltorio que usan los componentes)
        Miden 1em y heredan el color; --tsl-icon-size y --tsl-icon-stroke los ajustan.
   ========================================================================== */
tsl-icon,
.tsl-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tsl-icon-size, 1em);
  height: var(--tsl-icon-size, 1em);
  line-height: 0;
  vertical-align: -0.125em;
}

.tsl-icon__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Solo los SVG de trazo cambian de grosor; los rellenos (Phosphor, Material…) no se ven afectados */
.tsl-icon__svg[stroke-width] {
  stroke-width: var(--tsl-icon-stroke, 2);
}

/* Tamaños con nombre */
tsl-icon[size="xs"] { --tsl-icon-size: 12px; }
tsl-icon[size="sm"] { --tsl-icon-size: 14px; }
tsl-icon[size="md"] { --tsl-icon-size: 16px; }
tsl-icon[size="lg"] { --tsl-icon-size: 20px; }
tsl-icon[size="xl"] { --tsl-icon-size: 24px; }

/* Dentro de botones y controles el icono acompaña al texto con su tamaño propio */
.tsl-btn > tsl-icon,
.tsl-btn > .tsl-icon {
  --tsl-icon-size: 1.15em;
}

.tsl-btn--icon > tsl-icon,
.tsl-btn--icon > .tsl-icon {
  --tsl-icon-size: 16px;
}

.tsl-btn--sm.tsl-btn--icon > tsl-icon,
.tsl-btn--sm.tsl-btn--icon > .tsl-icon {
  --tsl-icon-size: 14px;
}

/* Icono que gira (indicadores de carga) */
tsl-icon[spin] .tsl-icon__svg,
.tsl-icon--spin .tsl-icon__svg {
  animation: tsl-icon-spin 1s linear infinite;
}

@keyframes tsl-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Las flechas y chevrones de dirección se espejan en RTL si lo piden */
[dir="rtl"] tsl-icon[flip-rtl],
[dir="rtl"] .tsl-icon--flip-rtl {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  tsl-icon[spin] .tsl-icon__svg,
  .tsl-icon--spin .tsl-icon__svg {
    animation-duration: 3s;
  }
}

@media (forced-colors: active) {
  .tsl-icon__svg {
    color: CanvasText;
  }
}

/* Iconos para CSS puro (::before/::after sin JS): máscaras con los mismos trazos del set base.
   Uso: content: ""; background: currentColor; mask: var(--tsl-svg-check) center / contain no-repeat; */
:root {
  --tsl-svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --tsl-svg-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --tsl-svg-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
  --tsl-svg-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --tsl-svg-chevrons-up-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --tsl-svg-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --tsl-svg-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --tsl-svg-grip-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='5' r='1'/%3E%3Ccircle cx='9' cy='19' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='5' r='1'/%3E%3Ccircle cx='15' cy='19' r='1'/%3E%3C/svg%3E");
}

/* Dentro de controles el icono no recibe el puntero: el clic llega al botón o enlace (e.target) */
:is(button, a, label, summary, [role="button"], [role="menuitem"], [role="option"], [role="tab"]) :is(tsl-icon, .tsl-icon) {
  pointer-events: none;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   3. Botones
   ---------------------------------------------------------------------------- */
.tsl-btn {
  --_h: 32px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--_h);
  padding: 0 13px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease, opacity 140ms ease;
}

.tsl-btn:hover {
  border-color: var(--tsl-border-strong);
  background: var(--tsl-surface-hover);
}

.tsl-btn:active {
  transform: translateY(1px);
}

.tsl-btn:focus-visible,
.tsl-input:focus-visible,
.tsl-textarea:focus-visible,
.tsl-select:focus-visible,
.tsl-check:focus-visible,
.tsl-switch:focus-visible,
.tsl-range:focus-visible,
.tsl-chip:focus-visible,
.tsl-menu__item:focus-visible,
.tsl-tabs__tab:focus-visible,
.tsl-segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-btn:disabled,
.tsl-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.tsl-btn--primary {
  background: var(--tsl-fg);
  border-color: var(--tsl-fg);
  color: var(--tsl-bg);
}

.tsl-btn--primary:hover {
  background: color-mix(in srgb, var(--tsl-fg) 88%, var(--tsl-bg));
  border-color: transparent;
}

.tsl-btn--accent {
  background: var(--tsl-accent);
  border-color: var(--tsl-accent);
  color: var(--tsl-accent-fg);
}

.tsl-btn--accent:hover {
  background: color-mix(in srgb, var(--tsl-accent) 86%, #fff);
  border-color: transparent;
}

.tsl-btn--subtle {
  border-color: transparent;
  background: transparent;
  color: var(--tsl-fg-muted);
}

.tsl-btn--subtle:hover {
  color: var(--tsl-fg);
  border-color: transparent;
}

/* El texto sale de --tsl-danger-fg, que cada preset ajusta para llegar a 4,5:1 sobre su rojo
   (con blanco fijo, el rojo claro del modo oscuro se quedaba en 3,5:1) */
.tsl-btn--danger {
  background: var(--tsl-danger);
  border-color: var(--tsl-danger);
  color: var(--tsl-danger-fg);
}

.tsl-btn--danger:hover {
  background: color-mix(in srgb, var(--tsl-danger) 86%, #000);
  border-color: transparent;
}

.tsl-btn--sm {
  --_h: 26px;
  padding: 0 9px;
  font-size: 11px;
  border-radius: 6px;
}

.tsl-btn--lg {
  --_h: 40px;
  padding: 0 18px;
  font-size: 13px;
}

.tsl-btn--icon {
  width: var(--_h);
  padding: 0;
}

.tsl-btn--block {
  width: 100%;
}

.tsl-btn--pill {
  border-radius: 999px;
}

/* Ocupado: el texto se oculta tras el indicador aunque una variante o un componente le dé color
   (!important a propósito: es un estado que debe ganar siempre, como `hidden`) */
.tsl-btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}

.tsl-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-color: var(--tsl-fg-muted) transparent var(--tsl-fg-muted) transparent;
  animation: tsl-spin 700ms linear infinite;
}

.tsl-btn--primary[aria-busy="true"]::after {
  border-color: var(--tsl-bg) transparent var(--tsl-bg) transparent;
}

.tsl-btn-group {
  display: inline-flex;
}

.tsl-btn-group > .tsl-btn {
  border-radius: 0;
}

.tsl-btn-group > .tsl-btn + .tsl-btn {
  margin-inline-start: -1px;
}

.tsl-btn-group > .tsl-btn:first-child {
  border-radius: var(--tsl-radius-sm) 0 0 var(--tsl-radius-sm);
}

.tsl-btn-group > .tsl-btn:last-child {
  border-radius: 0 var(--tsl-radius-sm) var(--tsl-radius-sm) 0;
}

.tsl-btn-group > .tsl-btn:hover {
  z-index: 1;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   4. Insignias, chips y puntos de estado
   ---------------------------------------------------------------------------- */
.tsl-badge {
  /* Neutra: un poco más clara que el texto atenuado para mantener 4,5:1 sobre su velo y sobre superficies */
  --_c: color-mix(in srgb, var(--tsl-fg-muted) 75%, var(--tsl-fg));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--_c);
  background: color-mix(in srgb, var(--_c) 15%, transparent);
}

.tsl-badge--outline {
  background: transparent;
  border: 1px solid var(--tsl-border);
}

.tsl-badge--success { --_c: var(--tsl-success); }
.tsl-badge--warning { --_c: var(--tsl-warning); }
.tsl-badge--danger { --_c: var(--tsl-danger); }
.tsl-badge--info { --_c: var(--tsl-info); }
.tsl-badge--accent { --_c: var(--tsl-accent); }

.tsl-badge--upper {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tsl-dot {
  --_c: var(--tsl-fg-muted);
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--_c);
}

.tsl-dot--success { --_c: var(--tsl-success); }
.tsl-dot--warning { --_c: var(--tsl-warning); }
.tsl-dot--danger { --_c: var(--tsl-danger); }
.tsl-dot--info { --_c: var(--tsl-info); }
.tsl-dot--accent { --_c: var(--tsl-accent); }

.tsl-dot--pulse {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--_c) 55%, transparent);
  animation: tsl-pulse 1.8s ease-out infinite;
}

.tsl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  font: inherit;
  font-size: 11px;
  color: var(--tsl-fg-muted);
  cursor: pointer;
  transition: all 140ms ease;
}

.tsl-chip:hover {
  color: var(--tsl-fg);
  border-color: var(--tsl-border-strong);
}

.tsl-chip[aria-pressed="true"],
.tsl-chip.is-active {
  background: var(--tsl-fg);
  border-color: var(--tsl-fg);
  color: var(--tsl-bg);
}

.tsl-chip__remove {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-inline-end: -4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 10px;
  cursor: pointer;
  opacity: 0.6;
}

.tsl-chip__remove:hover {
  opacity: 1;
  background: var(--tsl-surface-strong);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   5. Tarjetas y superficies
   ---------------------------------------------------------------------------- */
.tsl-card {
  position: relative;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  box-shadow: var(--tsl-shadow);
  overflow: hidden;
}

.tsl-card--flat {
  box-shadow: none;
}

.tsl-card--interactive {
  transition: transform 220ms var(--tsl-ease), border-color 220ms ease, box-shadow 220ms ease;
}

.tsl-card--interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--tsl-mx, 50%) var(--tsl-my, 50%), color-mix(in srgb, var(--tsl-accent) 14%, transparent), transparent 70%);
  transition: opacity 200ms ease;
}

.tsl-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--tsl-border-strong);
  box-shadow: var(--tsl-shadow-lg);
}

.tsl-card--interactive:hover::before {
  opacity: 1;
}

.tsl-card__header,
.tsl-card__body,
.tsl-card__footer {
  position: relative;
  padding: 18px 20px;
}

.tsl-card__header + .tsl-card__body {
  padding-top: 0;
}

.tsl-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-card__title {
  font-family: var(--tsl-font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tsl-card__desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tsl-fg-muted);
}

.tsl-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tsl-fg-subtle);
}

.tsl-divider::before,
.tsl-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tsl-border);
}

.tsl-divider:empty {
  gap: 0;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   05b. Item: fila genérica con medio (icono o imagen), contenido y acciones
        <div class="tsl-item"> o <a class="tsl-item" href>; variantes --outline y --muted; tamaño --sm
   ---------------------------------------------------------------------------- */
.tsl-item-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tsl-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--tsl-radius);
  color: var(--tsl-fg);
  font-size: 13px;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

a.tsl-item:hover,
button.tsl-item:hover {
  background: var(--tsl-surface-hover);
}

a.tsl-item:focus-visible,
button.tsl-item:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

button.tsl-item {
  width: 100%;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.tsl-item--outline {
  border-color: var(--tsl-border);
}

.tsl-item--muted {
  background: var(--tsl-surface);
}

.tsl-item--sm {
  gap: 10px;
  padding: 8px 12px;
}

.tsl-item__media {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tsl-radius-sm);
  overflow: hidden;
  font-size: 16px;
}

.tsl-item__media--icon {
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface-strong);
}

.tsl-item__media--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsl-item--sm .tsl-item__media {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.tsl-item__content {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

.tsl-item__title {
  font-weight: 600;
  line-height: 1.35;
}

.tsl-item__desc {
  margin: 0;
  color: var(--tsl-fg-muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.tsl-item__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

/* Cabecera y pie ocupan toda la fila */
.tsl-item__header,
.tsl-item__footer {
  flex: 1 1 100%;
}

.tsl-item-separator {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--tsl-border);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   6. Controles de formulario
   ---------------------------------------------------------------------------- */
.tsl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tsl-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
}

.tsl-hint {
  font-size: 11px;
  color: var(--tsl-fg-muted);
}

.tsl-error {
  font-size: 11px;
  color: var(--tsl-danger);
}

.tsl-input,
.tsl-textarea,
.tsl-select {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tsl-input::placeholder,
.tsl-textarea::placeholder {
  color: var(--tsl-fg-muted);
}

.tsl-input:hover,
.tsl-textarea:hover,
.tsl-select:hover {
  border-color: var(--tsl-border-strong);
}

.tsl-input[aria-invalid="true"],
.tsl-textarea[aria-invalid="true"] {
  border-color: var(--tsl-danger);
}

.tsl-input:disabled,
.tsl-textarea:disabled,
.tsl-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tsl-textarea {
  height: auto;
  min-height: 84px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
}

.tsl-select {
  appearance: none;
  padding-inline-end: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.tsl-input-group {
  display: flex;
  align-items: stretch;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tsl-input-group:hover {
  border-color: var(--tsl-border-strong);
}

.tsl-input-group:focus-within {
  box-shadow: var(--tsl-ring);
}

.tsl-input-group > .tsl-input {
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.tsl-input-group__addon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 11px;
  color: var(--tsl-fg-muted);
  white-space: nowrap;
}

.tsl-input-group__addon:first-child {
  border-inline-end: 1px solid var(--tsl-border);
}

.tsl-input-group__addon:last-child {
  border-inline-start: 1px solid var(--tsl-border);
}

/* Casilla y radio: <input type="checkbox|radio" class="tsl-check"> */
.tsl-check {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 4px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.tsl-check[type="radio"] {
  border-radius: 50%;
}

.tsl-check::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform 140ms var(--tsl-ease);
  background: var(--tsl-bg);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 68%);
}

.tsl-check[type="radio"]::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  clip-path: none;
}

.tsl-check:checked,
.tsl-check[type="checkbox"]:indeterminate {
  background: var(--tsl-fg);
  border-color: var(--tsl-fg);
}

.tsl-check:checked::before {
  transform: scale(1);
}

.tsl-check[type="checkbox"]:indeterminate::before {
  transform: scale(1);
  height: 2px;
  clip-path: none;
}

.tsl-check:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tsl-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  cursor: pointer;
}

/* Interruptor: <input type="checkbox" role="switch" class="tsl-switch"> */
.tsl-switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: var(--tsl-border-strong);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.tsl-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tsl-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 180ms var(--tsl-ease);
}

.tsl-switch:checked {
  background: var(--tsl-accent);
}

.tsl-switch:checked::before {
  transform: translateX(16px);
  background: #fff;
}

.tsl-switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Rango: <input type="range" class="tsl-range"> (el relleno lo define JS mediante --tsl-fill) */
.tsl-range {
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}

.tsl-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--tsl-accent) var(--tsl-fill, 50%), var(--tsl-border-strong) var(--tsl-fill, 50%));
}

.tsl-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--tsl-border-strong);
}

.tsl-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--tsl-accent);
}

.tsl-range::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--tsl-accent);
  background: var(--tsl-bg);
  transition: transform 120ms ease;
}

.tsl-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--tsl-accent);
  background: var(--tsl-bg);
}

.tsl-range:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

/* Selector numérico: <div class="tsl-number" data-tsl-number> */
.tsl-number {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  overflow: hidden;
}

.tsl-number:focus-within {
  box-shadow: var(--tsl-ring);
}

.tsl-number > button {
  width: 30px;
  border: 0;
  background: var(--tsl-surface);
  color: var(--tsl-fg-muted);
  font: inherit;
  cursor: pointer;
}

.tsl-number > button:hover {
  color: var(--tsl-fg);
  background: var(--tsl-surface-hover);
}

.tsl-number > input {
  width: 52px;
  border: 0;
  border-inline-start: 1px solid var(--tsl-border);
  border-inline-end: 1px solid var(--tsl-border);
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  text-align: center;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}

.tsl-number > input::-webkit-inner-spin-button,
.tsl-number > input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* OTP: <tsl-otp length="6"> */
tsl-otp {
  display: inline-flex;
  gap: 8px;
}

.tsl-otp__cell {
  width: 40px;
  height: 46px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  color: var(--tsl-fg);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  caret-color: var(--tsl-accent);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tsl-otp__cell:focus {
  outline: none;
  border-color: var(--tsl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tsl-accent) 25%, transparent);
}

/* Campo de etiquetas: <tsl-tags> */
tsl-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 6px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  cursor: text;
}

tsl-tags:focus-within {
  box-shadow: var(--tsl-ring);
}

tsl-tags .tsl-chip {
  cursor: default;
  padding: 2px 8px;
  color: var(--tsl-fg);
}

.tsl-tags__input {
  flex: 1;
  min-width: 90px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  outline: none;
}

/* Zona de carga: <tsl-dropzone> */
tsl-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  border-radius: var(--tsl-radius);
  border: 1.5px dashed var(--tsl-border-strong);
  background: var(--tsl-surface);
  text-align: center;
  font-size: 12px;
  color: var(--tsl-fg-muted);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

tsl-dropzone:hover,
tsl-dropzone[data-dragging] {
  border-color: var(--tsl-accent);
  background: color-mix(in srgb, var(--tsl-accent) 7%, transparent);
}

tsl-dropzone:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-dropzone__files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 6px;
}

.tsl-dropzone__file {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  font-size: 11px;
  color: var(--tsl-fg);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   06b. Grupo de radios: <tsl-radio-group> con botones .tsl-radio
        Variante .tsl-radio-group--cards: cada opción es una tarjeta
   ---------------------------------------------------------------------------- */
tsl-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

tsl-radio-group[orientation="horizontal"] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.tsl-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 13px;
  text-align: start;
  cursor: pointer;
}

.tsl-radio:focus-visible {
  outline: none;
  border-radius: var(--tsl-radius-sm);
  box-shadow: var(--tsl-ring);
}

.tsl-radio__mark {
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.tsl-radio__mark::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tsl-bg);
  transform: scale(0);
  transition: transform 140ms var(--tsl-ease);
}

.tsl-radio[aria-checked="true"] .tsl-radio__mark {
  background: var(--tsl-fg);
  border-color: var(--tsl-fg);
}

.tsl-radio[aria-checked="true"] .tsl-radio__mark::before {
  transform: scale(1);
}

.tsl-radio__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tsl-radio__label {
  font-weight: 500;
}

.tsl-radio__desc {
  font-size: 12px;
  color: var(--tsl-fg-muted);
}

.tsl-radio:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

tsl-radio-group[aria-disabled] {
  opacity: 0.6;
}

tsl-radio-group[data-invalid] .tsl-radio__mark {
  border-color: var(--tsl-danger);
}

.tsl-radio-group--cards .tsl-radio {
  padding: 12px 14px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
}

.tsl-radio-group--cards .tsl-radio:hover:not(:disabled) {
  background: var(--tsl-surface-hover);
}

.tsl-radio-group--cards .tsl-radio[aria-checked="true"] {
  border-color: var(--tsl-fg);
  background: var(--tsl-surface-strong);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   7. Control segmentado y pestañas
   ---------------------------------------------------------------------------- */
.tsl-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-segmented__item {
  padding: 5px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.tsl-segmented__item:hover {
  color: var(--tsl-fg);
}

.tsl-segmented__item[aria-checked="true"] {
  background: var(--tsl-fg);
  color: var(--tsl-bg);
}

tsl-tabs {
  display: block;
}

.tsl-tabs__list {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--tsl-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tsl-tabs__tab {
  position: relative;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
}

.tsl-tabs__tab:hover {
  color: var(--tsl-fg);
}

.tsl-tabs__tab[aria-selected="true"] {
  color: var(--tsl-fg);
}

.tsl-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--tsl-fg);
}

.tsl-tabs__panel {
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tsl-fg-muted);
}

.tsl-tabs__panel:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
  border-radius: 4px;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   8. Acordeón (<details> nativo)
   ---------------------------------------------------------------------------- */
.tsl-accordion {
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  overflow: hidden;
}

.tsl-accordion > details + details {
  border-top: 1px solid var(--tsl-border);
}

.tsl-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.tsl-accordion summary::-webkit-details-marker {
  display: none;
}

.tsl-accordion summary::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-inline-end: 1.5px solid var(--tsl-fg-muted);
  border-bottom: 1.5px solid var(--tsl-fg-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms var(--tsl-ease);
}

.tsl-accordion details[open] > summary::after {
  transform: rotate(225deg) translateY(-2px);
}

.tsl-accordion summary:hover {
  background: var(--tsl-surface-hover);
}

.tsl-accordion summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tsl-accent) 70%, transparent);
}

.tsl-accordion__content {
  padding: 0 16px 14px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--tsl-fg-muted);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   9. Alertas y avisos destacados
   ---------------------------------------------------------------------------- */
.tsl-alert {
  --_c: var(--tsl-fg-muted);
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--tsl-radius);
  border: 1px solid color-mix(in srgb, var(--_c) 35%, var(--tsl-border));
  background: color-mix(in srgb, var(--_c) 8%, transparent);
  font-size: 12px;
  line-height: 1.55;
}

.tsl-alert::before {
  content: "";
  flex: none;
  width: 3px;
  border-radius: 3px;
  background: var(--_c);
}

.tsl-alert__title {
  font-weight: 600;
  color: var(--tsl-fg);
}

.tsl-alert__desc {
  margin-top: 2px;
  color: var(--tsl-fg-muted);
}

.tsl-alert--info { --_c: var(--tsl-info); }
.tsl-alert--success { --_c: var(--tsl-success); }
.tsl-alert--warning { --_c: var(--tsl-warning); }
.tsl-alert--danger { --_c: var(--tsl-danger); }
.tsl-alert--accent { --_c: var(--tsl-accent); }

.tsl-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 16px;
  background: var(--tsl-fg);
  color: var(--tsl-bg);
  font-size: 12px;
}

.tsl-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   10. Retroalimentación: progreso, medidor, spinner y skeleton
   ---------------------------------------------------------------------------- */
.tsl-progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tsl-surface-strong);
  color: var(--tsl-accent);
}

.tsl-progress::-webkit-progress-bar {
  background: var(--tsl-surface-strong);
  border-radius: 999px;
}

.tsl-progress::-webkit-progress-value {
  background: var(--tsl-accent);
  border-radius: 999px;
  transition: width 300ms var(--tsl-ease);
}

.tsl-progress::-moz-progress-bar {
  background: var(--tsl-accent);
  border-radius: 999px;
}

.tsl-progress:indeterminate {
  background: linear-gradient(90deg, transparent, var(--tsl-accent), transparent) 0 0 / 40% 100% no-repeat, var(--tsl-surface-strong);
  animation: tsl-indeterminate 1.2s ease-in-out infinite;
}

.tsl-progress:indeterminate::-webkit-progress-bar {
  background: transparent;
}

.tsl-meter {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tsl-surface-strong);
}

.tsl-meter > span {
  width: var(--w, 0%);
  background: var(--c, var(--tsl-accent));
}

.tsl-spinner {
  display: inline-block;
  width: var(--size, 16px);
  height: var(--size, 16px);
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--tsl-border-strong);
  border-top-color: var(--tsl-fg);
  animation: tsl-spin 700ms linear infinite;
}

.tsl-skeleton {
  display: block;
  height: var(--h, 12px);
  width: var(--w, 100%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--tsl-surface-strong) 0%, var(--tsl-surface-hover) 40%, var(--tsl-surface-strong) 80%) 0 0 / 300% 100%;
  animation: tsl-shimmer 1.4s ease-in-out infinite;
}

.tsl-skeleton--circle {
  width: var(--h, 36px);
  height: var(--h, 36px);
  border-radius: 50%;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   11. Avatares
   ---------------------------------------------------------------------------- */
.tsl-avatar {
  --_s: 32px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--_s);
  height: var(--_s);
  border-radius: 50%;
  background: color-mix(in srgb, var(--tsl-accent) 22%, var(--tsl-bg-elevated));
  color: var(--tsl-fg);
  font-size: calc(var(--_s) * 0.38);
  font-weight: 600;
  text-transform: uppercase;
}

.tsl-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.tsl-avatar--sm { --_s: 24px; }
.tsl-avatar--lg { --_s: 44px; }
.tsl-avatar--square { border-radius: var(--tsl-radius-sm); }

.tsl-avatar[data-status]::after {
  content: "";
  position: absolute;
  inset-inline-end: -1px;
  bottom: -1px;
  width: 30%;
  height: 30%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 2px solid var(--tsl-bg);
  background: var(--tsl-fg-subtle);
}

.tsl-avatar[data-status="online"]::after { background: var(--tsl-success); }
.tsl-avatar[data-status="busy"]::after { background: var(--tsl-danger); }
.tsl-avatar[data-status="away"]::after { background: var(--tsl-warning); }

.tsl-avatar-group {
  display: inline-flex;
}

.tsl-avatar-group > .tsl-avatar {
  box-shadow: 0 0 0 2px var(--tsl-bg);
}

.tsl-avatar-group > .tsl-avatar + .tsl-avatar {
  margin-inline-start: calc(var(--_s) * -0.28);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   12. Tablas
   ---------------------------------------------------------------------------- */
.tsl-table-wrap {
  overflow-x: auto;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
}

.tsl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tsl-table th,
.tsl-table td {
  padding: 10px 14px;
  text-align: start;
  border-bottom: 1px solid var(--tsl-border);
  white-space: nowrap;
}

.tsl-table th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
  background: var(--tsl-surface);
}

.tsl-table tbody tr:last-child td {
  border-bottom: 0;
}

.tsl-table tbody tr {
  transition: background-color 120ms ease;
}

.tsl-table tbody tr:hover {
  background: var(--tsl-surface-hover);
}

.tsl-table .is-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.tsl-table--compact th,
.tsl-table--compact td {
  padding: 6px 12px;
}

.tsl-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.tsl-table th[data-sort]:hover {
  color: var(--tsl-fg);
}

.tsl-table th[data-sort]::after {
  content: "";
  --_icon: var(--tsl-svg-chevrons-up-down);
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  vertical-align: -0.125em;
  -webkit-mask: var(--_icon) center / contain no-repeat;
  mask: var(--_icon) center / contain no-repeat;
  margin-inline-start: 6px;
  opacity: 0.35;
}

.tsl-table th[aria-sort="ascending"]::after {
  --_icon: var(--tsl-svg-arrow-up);
  opacity: 1;
}

.tsl-table th[aria-sort="descending"]::after {
  --_icon: var(--tsl-svg-arrow-down);
  opacity: 1;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   13. Navegación: migas de pan, paginación, navegación lateral y pasos
   ---------------------------------------------------------------------------- */
.tsl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tsl-fg-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tsl-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tsl-breadcrumb li + li::before {
  content: "/";
  color: var(--tsl-fg-subtle);
}

.tsl-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.tsl-breadcrumb a:hover,
.tsl-breadcrumb [aria-current="page"] {
  color: var(--tsl-fg);
}

.tsl-pagination {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: 4px;
}

.tsl-pagination > * {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.tsl-pagination > a:hover,
.tsl-pagination > button:hover {
  color: var(--tsl-fg);
  border-color: var(--tsl-border);
}

.tsl-pagination > [aria-current="page"] {
  background: var(--tsl-fg);
  color: var(--tsl-bg);
  font-weight: 600;
}

.tsl-pagination > span {
  cursor: default;
}

.tsl-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tsl-nav__label {
  margin: 14px 10px 6px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
}

.tsl-nav__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--tsl-radius-sm);
  border: 0;
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 12px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.tsl-nav__item:hover {
  color: var(--tsl-fg);
  background: var(--tsl-surface-hover);
}

.tsl-nav__item[aria-current="page"] {
  color: var(--tsl-fg);
  background: var(--tsl-surface-strong);
}

.tsl-nav__item .tsl-badge,
.tsl-nav__meta {
  margin-inline-start: auto;
}

.tsl-nav__meta {
  font-size: 10px;
  color: var(--tsl-fg-muted);
}

.tsl-steps {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: tsl-step;
}

.tsl-steps > li {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: var(--tsl-fg-subtle);
  counter-increment: tsl-step;
}

.tsl-steps > li::before {
  content: "";
  height: 3px;
  border-radius: 3px;
  background: var(--tsl-surface-strong);
  transition: background-color 200ms ease;
}

.tsl-steps > li::after {
  content: "0" counter(tsl-step);
  order: -1;
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

.tsl-steps > li[data-state="done"],
.tsl-steps > li[aria-current="step"] {
  color: var(--tsl-fg);
}

.tsl-steps > li[data-state="done"]::before {
  background: var(--tsl-fg);
}

.tsl-steps > li[aria-current="step"]::before {
  background: var(--tsl-accent);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   14. Presentación de datos: métrica, línea de tiempo, estado vacío, código y lista
   ---------------------------------------------------------------------------- */
.tsl-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-stat__value {
  font-family: var(--tsl-font-heading);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tsl-stat__delta {
  font-size: 11px;
  color: var(--tsl-fg-muted);
}

.tsl-stat__delta.is-up {
  color: var(--tsl-success);
}

.tsl-stat__delta.is-down {
  color: var(--tsl-danger);
}

.tsl-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  padding: 0 0 0 22px;
  margin: 0;
}

.tsl-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--tsl-border-strong);
}

.tsl-timeline > li {
  position: relative;
  font-size: 12px;
  line-height: 1.55;
}

.tsl-timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -21px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--tsl-bg);
  background: var(--c, var(--tsl-fg-subtle));
  box-shadow: 0 0 0 1px var(--tsl-border-strong);
}

.tsl-timeline__meta {
  font-size: 10.5px;
  color: var(--tsl-fg-subtle);
}

.tsl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 24px;
  border-radius: var(--tsl-radius);
  border: 1px dashed var(--tsl-border-strong);
  text-align: center;
}

.tsl-empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 12px;
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  color: var(--tsl-fg-muted);
}

.tsl-empty__title {
  font-family: var(--tsl-font-heading);
  font-size: 15px;
  font-weight: 600;
}

.tsl-empty__desc {
  max-width: 340px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tsl-fg-muted);
}

.tsl-code {
  position: relative;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg-elevated);
  font-family: var(--tsl-font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--tsl-fg);
  overflow-x: auto;
  tab-size: 2;
}

.tsl-code > [data-tsl-copy] {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
}

.tsl-code:has(> [data-tsl-copy]) {
  padding-inline-end: 76px;
}

.tsl-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tsl-list > li {
  display: flex;
  flex-wrap: wrap; /* en pantallas estrechas la parte final pasa a una segunda línea */
  align-items: center;
  gap: 6px 12px;
  padding: 11px 14px;
  font-size: 12px;
}

.tsl-list > li > :first-child:not(.tsl-list__end) {
  overflow-wrap: anywhere;
}

.tsl-list > li + li {
  border-top: 1px solid var(--tsl-border);
}

.tsl-list__title {
  font-weight: 500;
}

.tsl-list__desc {
  font-size: 11px;
  color: var(--tsl-fg-muted);
}

.tsl-list__end {
  margin-inline-start: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   15. Tooltip: <button data-tsl-tooltip="Texto" data-tsl-placement="top|bottom">
   ---------------------------------------------------------------------------- */
[data-tsl-tooltip] {
  position: relative;
}

[data-tsl-tooltip]::after {
  content: attr(data-tsl-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 60;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  box-shadow: var(--tsl-shadow);
  font-family: var(--tsl-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms var(--tsl-ease);
}

[data-tsl-tooltip][data-tsl-placement="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translate(-50%, -4px);
}

[data-tsl-tooltip]:hover::after,
[data-tsl-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 250ms;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   16. Menús: <tsl-menu>
   ---------------------------------------------------------------------------- */
tsl-menu {
  position: relative;
  display: inline-block;
}

.tsl-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 70;
  min-width: 190px;
  padding: 5px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  box-shadow: var(--tsl-shadow-lg);
  transform-origin: top left;
  animation: tsl-pop 140ms var(--tsl-ease);
}

tsl-menu[align="end"] .tsl-menu__list {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform-origin: top right;
}

.tsl-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.tsl-menu__item:hover,
.tsl-menu__item:focus-visible {
  background: var(--tsl-surface-strong);
  box-shadow: none;
}

.tsl-menu__item .tsl-kbd {
  margin-inline-start: auto;
}

.tsl-menu__item:disabled,
.tsl-menu__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.tsl-menu__item--danger {
  color: var(--tsl-danger);
}

.tsl-menu__sep {
  height: 1px;
  margin: 5px -5px;
  background: var(--tsl-border);
}

.tsl-menu__label {
  padding: 6px 9px 4px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsl-fg-subtle);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   17. Diálogos y paneles laterales (<dialog class="tsl-dialog"> nativo)
   ---------------------------------------------------------------------------- */
.tsl-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  box-shadow: var(--tsl-shadow-lg);
  overflow: auto;
}

.tsl-dialog[open] {
  animation: tsl-pop 180ms var(--tsl-ease);
}

.tsl-dialog::backdrop {
  background: var(--tsl-backdrop);
  backdrop-filter: blur(3px);
}

.tsl-dialog__header {
  padding: 20px 22px 0;
}

.tsl-dialog__title {
  font-family: var(--tsl-font-heading);
  font-size: 16px;
  font-weight: 600;
}

.tsl-dialog__desc {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tsl-fg-muted);
}

.tsl-dialog__body {
  padding: 18px 22px;
  font-size: 12px;
}

.tsl-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-dialog__close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
}

.tsl-dialog--drawer {
  width: min(400px, 100vw);
  height: 100vh;
  max-height: none;
  margin: 0 0 0 auto;
  border-radius: 0;
  border-width: 0 0 0 1px;
}

.tsl-dialog--drawer[open] {
  display: flex;
  flex-direction: column;
  animation: tsl-slide-in 240ms var(--tsl-ease);
}

.tsl-dialog--drawer .tsl-dialog__footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   18. Paleta de comandos: <tsl-command>
   ---------------------------------------------------------------------------- */
.tsl-command {
  width: min(560px, calc(100vw - 32px));
  margin: 12vh auto auto;
}

.tsl-command__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--tsl-border);
  color: var(--tsl-fg-muted);
}

.tsl-command__input {
  flex: 1;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.tsl-command__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.tsl-command__group {
  padding: 8px 10px 4px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsl-fg-subtle);
}

.tsl-command__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
}

.tsl-command__item[aria-selected="true"] {
  background: var(--tsl-surface-strong);
}

.tsl-command__item .tsl-kbd {
  margin-inline-start: auto;
}

.tsl-command__empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--tsl-fg-muted);
}

.tsl-command__footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--tsl-border);
  font-size: 10.5px;
  color: var(--tsl-fg-subtle);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   19. Toasts: TeselaUI.toast({...})
   ---------------------------------------------------------------------------- */
.tsl-toast-region {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.tsl-toast {
  --_c: var(--tsl-success);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  box-shadow: var(--tsl-shadow-lg);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: auto;
  animation: tsl-toast-in 240ms var(--tsl-ease);
  transition: opacity 200ms ease, transform 200ms ease;
}

.tsl-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.tsl-toast::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--_c);
}

.tsl-toast--info { --_c: var(--tsl-info); }
.tsl-toast--warning { --_c: var(--tsl-warning); }
.tsl-toast--danger { --_c: var(--tsl-danger); }
.tsl-toast--neutral { --_c: var(--tsl-fg-muted); }

.tsl-toast__body {
  flex: 1;
  min-width: 0;
}

.tsl-toast__title {
  font-weight: 600;
}

.tsl-toast__desc {
  color: var(--tsl-fg-muted);
}

.tsl-toast__action {
  flex: none;
  align-self: center;
}

.tsl-toast__close {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--tsl-fg-subtle);
  font-size: 11px;
  cursor: pointer;
}

.tsl-toast__close:hover {
  color: var(--tsl-fg);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   20. Calendario: <tsl-calendar>
   ---------------------------------------------------------------------------- */
tsl-calendar {
  display: inline-block;
  max-width: 100%;
  padding: 12px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  user-select: none;
}

.tsl-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.tsl-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 32px));
  gap: 2px;
}

.tsl-cal__dow {
  display: grid;
  place-items: center;
  height: 24px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--tsl-fg-subtle);
}

.tsl-cal__day {
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.tsl-cal__day:hover {
  background: var(--tsl-surface-strong);
}

.tsl-cal__day.is-outside {
  color: var(--tsl-fg-subtle);
}

.tsl-cal__day.is-today {
  box-shadow: inset 0 0 0 1px var(--tsl-border-strong);
}

.tsl-cal__day[aria-pressed="true"] {
  background: var(--tsl-fg);
  color: var(--tsl-bg);
  font-weight: 600;
}

.tsl-cal__day:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21. Minigráfico: <tsl-sparkline values="4,8,6,12">
   ---------------------------------------------------------------------------- */
tsl-sparkline {
  display: inline-block;
  width: var(--w, 120px);
  height: var(--h, 32px);
  color: var(--tsl-accent);
}

tsl-sparkline svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21b. Superposiciones: popover, hover card, menú contextual, sheets
   ---------------------------------------------------------------------------- */
tsl-popover,
tsl-hovercard {
  display: inline-block;
}

tsl-context-menu {
  display: block;
}

/* Evita el parpadeo antes de que el JS convierta el panel en popover */
tsl-popover > .tsl-popover__panel:not([popover]),
tsl-hovercard > .tsl-popover__panel:not([popover]),
tsl-context-menu > .tsl-menu__list:not([popover]) {
  display: none;
}

.tsl-popover__panel {
  position: fixed;
  inset: auto;
  margin: 0;
  max-height: calc(100dvh - 16px);
  min-width: 200px;
  max-width: min(360px, calc(100vw - 16px));
  padding: 14px;
  overflow: auto;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  box-shadow: var(--tsl-shadow-lg);
  font-size: 12px;
  line-height: 1.55;
}

.tsl-popover__panel:popover-open {
  animation: tsl-pop 140ms var(--tsl-ease);
}

.tsl-popover__title {
  font-family: var(--tsl-font-heading);
  font-size: 13px;
  font-weight: 600;
}

.tsl-menu__list[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  overflow: visible;
  color: var(--tsl-fg);
}

.tsl-context-zone {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: 20px;
  border-radius: var(--tsl-radius);
  border: 1.5px dashed var(--tsl-border-strong);
  background: var(--tsl-surface);
  color: var(--tsl-fg-muted);
  font-size: 12px;
  text-align: center;
  user-select: none;
}

.tsl-context-zone:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

/* Sheet inferior y drawer izquierdo (se suman a .tsl-dialog) */
.tsl-dialog--sheet {
  width: min(640px, 100vw);
  max-height: 85vh;
  margin: auto auto 0;
  border-radius: 16px 16px 0 0;
  border-width: 1px 1px 0;
  transition: transform 200ms var(--tsl-ease);
}

.tsl-dialog--sheet[open] {
  animation: tsl-sheet-in 260ms var(--tsl-ease);
}

.tsl-sheet__handle {
  display: grid;
  place-items: center;
  height: 22px;
  cursor: grab;
  touch-action: none;
}

.tsl-sheet__handle::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--tsl-border-strong);
}

.tsl-dialog--drawer-start {
  margin: 0 auto 0 0;
  border-width: 0 1px 0 0;
}

.tsl-dialog--drawer-start[open] {
  animation: tsl-slide-in-start 240ms var(--tsl-ease);
}

@keyframes tsl-sheet-in {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes tsl-slide-in-start {
  from { transform: translateX(-24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21c. Campos: select, combobox, fecha y hora (disparador compartido)
   ---------------------------------------------------------------------------- */
tsl-select,
tsl-combobox,
tsl-date-picker,
tsl-time-picker {
  display: block;
}

.tsl-select__wrap {
  position: relative;
}

.tsl-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.tsl-trigger:hover:not(:disabled) {
  border-color: var(--tsl-border-strong);
}

.tsl-trigger:focus-visible,
.tsl-trigger--input:focus-within {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tsl-trigger[aria-expanded="true"] {
  border-color: var(--tsl-border-strong);
}

.tsl-trigger__value {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsl-trigger__value.is-placeholder {
  color: var(--tsl-fg-muted);
}

.tsl-trigger__icon,
.tsl-trigger__lead {
  flex: none;
  color: var(--tsl-fg-muted);
}

.tsl-trigger--input {
  cursor: text;
}

.tsl-trigger__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.tsl-trigger__input::placeholder {
  color: var(--tsl-fg-muted);
}

.tsl-select__wrap:has(.tsl-trigger__clear:not([hidden])) .tsl-trigger {
  padding-inline-end: 52px;
}

.tsl-trigger__clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 27px;
  display: grid;
  place-items: center;
  /* 24 px: objetivo táctil mínimo de WCAG 2.5.8 */
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tsl-fg-muted);
  font-size: 9px;
  cursor: pointer;
}

.tsl-trigger__clear:hover {
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
}

.tsl-trigger__clear:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-select__chip {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--tsl-surface-strong);
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}

.tsl-select__chip--more {
  color: var(--tsl-fg-muted);
}

.tsl-select__panel {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 4px;
  max-height: 300px;
  overflow: auto;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  box-shadow: var(--tsl-shadow-lg);
  font-size: 12px;
}

.tsl-select__panel:popover-open {
  animation: tsl-pop 140ms var(--tsl-ease);
}

.tsl-select__searchbox {
  position: sticky;
  top: -4px;
  margin: -4px -4px 4px;
  padding: 6px;
  border-bottom: 1px solid var(--tsl-border);
  background: var(--tsl-bg-elevated);
}

.tsl-select__search {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg);
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.tsl-select__search:focus {
  box-shadow: var(--tsl-ring);
}

.tsl-select__group {
  padding: 8px 9px 4px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
}

.tsl-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.tsl-select__option.is-active {
  background: var(--tsl-surface-strong);
}

.tsl-select__option[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.tsl-select__label {
  flex: 1;
  min-width: 0;
}

.tsl-select__hint {
  font-size: 10.5px;
  color: var(--tsl-fg-muted);
}

.tsl-select__check {
  flex: none;
  opacity: 0;
}

.tsl-select__option[aria-selected="true"] .tsl-select__check {
  opacity: 1;
}

.tsl-select__empty {
  padding: 18px 10px;
  text-align: center;
  color: var(--tsl-fg-muted);
}

tsl-select:has([aria-invalid="true"]) .tsl-trigger,
.tsl-trigger[aria-invalid="true"] {
  border-color: var(--tsl-danger);
}

/* Selector de fecha y de hora */
.tsl-date__panel {
  min-width: 0;
  max-width: calc(100vw - 16px);
  padding: 6px;
}

.tsl-date__panel tsl-calendar {
  padding: 6px;
  border: 0;
  background: transparent;
}

.tsl-time__panel {
  min-width: 0;
  max-width: calc(100vw - 16px);
  padding: 6px;
}

.tsl-time__cols {
  display: flex;
  gap: 4px;
}

.tsl-time__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 56px;
  max-height: 224px;
  padding: 2px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.tsl-time__col + .tsl-time__col {
  border-inline-start: 1px solid var(--tsl-border);
  padding-inline-start: 6px;
}

.tsl-time__opt {
  flex: none;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.tsl-time__opt:hover:not(:disabled) {
  background: var(--tsl-surface-strong);
}

.tsl-time__opt[aria-selected="true"] {
  background: var(--tsl-fg);
  color: var(--tsl-bg);
  font-weight: 600;
}

.tsl-time__opt:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tsl-time__opt:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

/* Calendario: rango, varios meses y días deshabilitados */
.tsl-cal__months {
  display: flex;
  gap: 20px;
}

.tsl-cal__nav-spacer {
  display: inline-block;
  width: 26px;
}

.tsl-cal__day.is-blank {
  visibility: hidden;
}

.tsl-cal__day:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.tsl-cal__day:disabled:hover {
  background: transparent;
}

.tsl-cal__day.in-range,
.tsl-cal__day.is-preview {
  border-radius: 0;
  background: color-mix(in srgb, var(--tsl-accent) 20%, transparent);
}

.tsl-cal__day.is-preview {
  background: color-mix(in srgb, var(--tsl-accent) 11%, transparent);
}

.tsl-cal__day.is-range-start {
  border-radius: 7px 0 0 7px;
}

.tsl-cal__day.is-range-end {
  border-radius: 0 7px 7px 0;
}

@media (max-width: 560px) {
  .tsl-cal__months {
    flex-direction: column;
    gap: 8px;
  }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21d. Barras de menú: <tsl-menubar> y <tsl-nav-menu>
   ---------------------------------------------------------------------------- */
tsl-menubar,
tsl-nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

tsl-menubar {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-bar__item {
  position: relative;
  display: inline-flex;
}

tsl-menubar .tsl-bar__item > [data-tsl-trigger],
tsl-menubar a.tsl-bar__item,
tsl-nav-menu .tsl-bar__item > [data-tsl-trigger],
tsl-nav-menu a.tsl-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 0;
  border-radius: var(--tsl-radius-sm);
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

tsl-menubar .tsl-bar__item > [data-tsl-trigger]:hover,
tsl-menubar a.tsl-bar__item:hover,
tsl-nav-menu .tsl-bar__item > [data-tsl-trigger]:hover,
tsl-nav-menu a.tsl-bar__item:hover,
.tsl-bar__item > [data-tsl-trigger][aria-expanded="true"] {
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
}

.tsl-bar__item > [data-tsl-trigger]:focus-visible,
a.tsl-bar__item:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

tsl-nav-menu .tsl-bar__item > [data-tsl-trigger][aria-haspopup]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms var(--tsl-ease);
}

tsl-nav-menu .tsl-bar__item > [data-tsl-trigger][aria-expanded="true"]::after {
  transform: rotate(225deg);
}

.tsl-bar__item > .tsl-menu__list:not([popover]),
.tsl-bar__item > .tsl-bar__panel:not([popover]) {
  display: none;
}

.tsl-bar__panel {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 12px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  box-shadow: var(--tsl-shadow-lg);
  font-size: 12px;
}

.tsl-bar__panel:popover-open {
  animation: tsl-pop 140ms var(--tsl-ease);
}

.tsl-navmenu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 4px;
  min-width: min(440px, calc(100vw - 48px));
}

.tsl-navmenu__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--tsl-radius-sm);
  color: var(--tsl-fg);
  text-decoration: none;
}

.tsl-navmenu__card:hover,
.tsl-navmenu__card:focus-visible {
  outline: none;
  background: var(--tsl-surface-strong);
}

.tsl-navmenu__card strong {
  font-size: 12px;
  font-weight: 600;
}

.tsl-navmenu__card span {
  font-size: 11px;
  color: var(--tsl-fg-muted);
}

/* Submenús e ítems marcables dentro de .tsl-menu__list */
.tsl-menu__sub {
  display: block;
}

.tsl-menu__item[data-submenu]::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-inline-start: auto;
  background: var(--tsl-fg-muted);
  -webkit-mask: var(--tsl-svg-chevron-right) center / contain no-repeat;
  mask: var(--tsl-svg-chevron-right) center / contain no-repeat;
}

[dir="rtl"] .tsl-menu__item[data-submenu]::after {
  transform: scaleX(-1);
}

.tsl-menu__item[aria-expanded="true"] {
  background: var(--tsl-surface-strong);
}

.tsl-menu__item[data-check]::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 68%);
  opacity: 0;
}

.tsl-menu__item[data-check][aria-checked="true"]::before {
  opacity: 1;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21e. Inputs avanzados: slider, rating, color, toggle group, tarjetas de elección
   ---------------------------------------------------------------------------- */
tsl-slider {
  display: block;
  padding: 18px 8px 4px;
  touch-action: none;
}

.tsl-slider__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--tsl-border-strong);
  cursor: pointer;
}

.tsl-slider__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--tsl-accent);
}

.tsl-slider__thumb {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--p, 0%);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--tsl-accent);
  background: var(--tsl-bg);
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.tsl-slider__thumb:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.tsl-slider__thumb:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-slider__thumb::after {
  content: attr(data-value);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 3px 7px;
  transform: translate(-50%, 4px);
  border-radius: 5px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  color: var(--tsl-fg);
  font-family: var(--tsl-font-mono);
  font-size: 10.5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms var(--tsl-ease);
}

.tsl-slider__thumb:focus-visible::after,
tsl-slider.is-dragging .tsl-slider__thumb::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

tsl-slider.is-dragging .tsl-slider__thumb {
  cursor: grabbing;
}

tsl-slider[aria-disabled] {
  opacity: 0.5;
  pointer-events: none;
}

tsl-rating {
  --size: 22px;
  display: inline-flex;
  gap: 3px;
  border-radius: 6px;
  color: var(--tsl-warning);
  cursor: pointer;
}

tsl-rating[readonly],
tsl-rating[aria-disabled] {
  cursor: default;
}

tsl-rating[aria-disabled] {
  opacity: 0.5;
}

tsl-rating:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

tsl-rating[size="sm"] {
  --size: 16px;
}

tsl-rating[size="lg"] {
  --size: 30px;
}

.tsl-rating__star {
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
}

.tsl-rating__star svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.45;
}

.tsl-rating__fill {
  position: absolute;
  inset: 0;
  width: calc(var(--f, 0) * 100%);
  overflow: hidden;
}

.tsl-rating__fill svg {
  width: var(--size);
  max-width: none;
  fill: currentColor;
  opacity: 1;
}

tsl-color-picker {
  display: block;
}

.tsl-color__swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--tsl-border-strong);
  background: repeating-conic-gradient(#8e8e96 0 25%, #fff 0 50%) 0 0 / 8px 8px;
  overflow: hidden;
}

.tsl-color__swatch > span {
  display: block;
  width: 100%;
  height: 100%;
}

.tsl-color__panel {
  flex-direction: column;
  gap: 10px;
  width: 240px;
  min-width: 0;
}

/* flex solo abierto: display no debe anular el display:none del popover cerrado */
.tsl-color__panel:popover-open {
  display: flex;
}

.tsl-color__area,
.tsl-color__hue,
.tsl-color__alpha {
  position: relative;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}

.tsl-color__area {
  height: 150px;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--hue, red);
}

.tsl-color__hue,
.tsl-color__alpha {
  height: 12px;
  border-radius: 999px;
  cursor: pointer;
}

.tsl-color__hue {
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.tsl-color__alpha {
  background: linear-gradient(to right, transparent, rgb(var(--rgb, 0 0 0))), repeating-conic-gradient(#8e8e96 0 25%, #fff 0 50%) 0 0 / 8px 8px;
}

.tsl-color__thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.tsl-color__area .tsl-color__thumb {
  top: 0;
}

.tsl-color__area:focus-visible,
.tsl-color__hue:focus-visible,
.tsl-color__alpha:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-color__row {
  display: flex;
  gap: 6px;
}

.tsl-color__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tsl-color__chip {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--c);
  cursor: pointer;
}

.tsl-color__chip:hover {
  transform: scale(1.12);
}

.tsl-color__chip:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

tsl-password {
  display: block;
}

tsl-password .tsl-password__meter {
  margin-top: 8px;
}

tsl-mention {
  display: block;
  position: relative;
}

.tsl-mention__panel {
  min-width: 220px;
}

/* Textarea autoajustable */
textarea[data-tsl-autosize] {
  resize: none;
  overflow-y: hidden;
}

.tsl-counter {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--tsl-fg-subtle);
}

.tsl-counter.is-over {
  color: var(--tsl-warning);
}

/* Toggle group */
tsl-toggle-group {
  display: inline-flex;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  overflow: hidden;
}

.tsl-toggle-group__item {
  min-width: 34px;
  height: 32px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.tsl-toggle-group__item + .tsl-toggle-group__item {
  border-inline-start: 1px solid var(--tsl-border);
}

.tsl-toggle-group__item:hover:not(:disabled) {
  color: var(--tsl-fg);
  background: var(--tsl-surface-hover);
}

.tsl-toggle-group__item[aria-pressed="true"] {
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
  font-weight: 600;
}

.tsl-toggle-group__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tsl-toggle-group__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}

/* Tarjeta de elección: <label class="tsl-choice-card"><input class="tsl-check" type="radio"> … */
.tsl-choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.tsl-choice-card:hover {
  border-color: var(--tsl-border-strong);
  background: var(--tsl-surface-hover);
}

.tsl-choice-card:has(:checked) {
  border-color: var(--tsl-accent);
  background: color-mix(in srgb, var(--tsl-accent) 8%, transparent);
  box-shadow: 0 0 0 1px var(--tsl-accent);
}

.tsl-choice-card:has(:focus-visible) {
  box-shadow: var(--tsl-ring);
}

.tsl-choice-card:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.tsl-choice-card > .tsl-check {
  margin-top: 2px;
}

.tsl-choice-card__title {
  font-size: 12.5px;
  font-weight: 600;
}

.tsl-choice-card__desc {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
}

.tsl-choice-card__end {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 600;
}

/* Derecha a izquierda: el pulgar se centra con el desplazamiento invertido */
.tsl-slider__thumb:dir(rtl) {
  transform: translate(50%, -50%);
}

.tsl-slider__thumb:dir(rtl):hover {
  transform: translate(50%, -50%) scale(1.12);
}

/* Áreas de color, matiz y opacidad, minigráficos y gráficas conservan siempre la orientación izquierda-derecha */
tsl-otp,
tsl-sparkline,
tsl-chart,
.tsl-color__area,
.tsl-color__hue,
.tsl-color__alpha {
  direction: ltr;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21f. Estructura: collapsible, scroll area, paneles redimensionables,
        separator y aspect ratio
   ---------------------------------------------------------------------------- */
tsl-collapsible {
  display: block;
}

.tsl-collapsible__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--tsl-ease);
}

tsl-collapsible[open] > .tsl-collapsible__content {
  grid-template-rows: 1fr;
}

.tsl-collapsible__inner {
  min-height: 0;
  overflow: hidden;
}

tsl-collapsible > [data-tsl-trigger][aria-expanded] .tsl-collapsible__chevron,
.tsl-collapsible__chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transition: transform 200ms var(--tsl-ease);
}

/* El giro va aparte y con especificidad baja: así el estado abierto siempre puede sobrescribirlo */
.tsl-collapsible__chevron {
  transform: rotate(-45deg);
}

[aria-expanded="true"] > .tsl-collapsible__chevron,
[aria-expanded="true"] .tsl-collapsible__chevron {
  transform: rotate(45deg);
}

tsl-scroll-area {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
}

.tsl-scroll-area__viewport {
  width: 100%;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--tsl-border-strong) transparent;
  --tsl-fade-t: 0px;
  --tsl-fade-b: 0px;
  --tsl-fade-l: 0px;
  --tsl-fade-r: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--tsl-fade-t), #000 calc(100% - var(--tsl-fade-b)), transparent), linear-gradient(to right, transparent, #000 var(--tsl-fade-l), #000 calc(100% - var(--tsl-fade-r)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 var(--tsl-fade-t), #000 calc(100% - var(--tsl-fade-b)), transparent), linear-gradient(to right, transparent, #000 var(--tsl-fade-l), #000 calc(100% - var(--tsl-fade-r)), transparent);
  mask-composite: intersect;
}

tsl-scroll-area[data-top] > .tsl-scroll-area__viewport { --tsl-fade-t: 28px; }
tsl-scroll-area[data-bottom] > .tsl-scroll-area__viewport { --tsl-fade-b: 28px; }
tsl-scroll-area[data-left] > .tsl-scroll-area__viewport { --tsl-fade-l: 28px; }
tsl-scroll-area[data-right] > .tsl-scroll-area__viewport { --tsl-fade-r: 28px; }

.tsl-scroll-area__viewport:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tsl-accent) 70%, transparent);
}

tsl-resizable {
  display: flex;
  min-height: 0;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  overflow: hidden;
}

tsl-resizable[data-direction="vertical"] {
  flex-direction: column;
}

.tsl-resizable__panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.tsl-resizable__handle {
  position: relative;
  flex: none;
  background: var(--tsl-border);
  touch-action: none;
  transition: background-color 120ms ease;
}

tsl-resizable[data-direction="horizontal"] > .tsl-resizable__handle {
  width: 1px;
  cursor: col-resize;
}

tsl-resizable[data-direction="vertical"] > .tsl-resizable__handle {
  height: 1px;
  cursor: row-resize;
}

/* Zona de agarre más ancha que la línea visible */
.tsl-resizable__handle::before {
  content: "";
  position: absolute;
  inset: 0;
}

tsl-resizable[data-direction="horizontal"] > .tsl-resizable__handle::before {
  inset-inline-start: -5px;
  inset-inline-end: -5px;
}

tsl-resizable[data-direction="vertical"] > .tsl-resizable__handle::before {
  top: -5px;
  bottom: -5px;
}

.tsl-resizable__handle:hover,
.tsl-resizable__handle:focus-visible,
tsl-resizable.is-resizing > .tsl-resizable__handle {
  outline: none;
  background: var(--tsl-accent);
}

tsl-resizable.is-resizing {
  user-select: none;
}

.tsl-separator {
  flex: none;
  align-self: stretch;
  width: auto;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--tsl-border);
}

.tsl-separator--vertical {
  width: 1px;
  height: auto;
  min-height: 1em;
}

.tsl-aspect {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface-strong);
}

.tsl-aspect > img,
.tsl-aspect > video,
.tsl-aspect > iframe,
.tsl-aspect > svg,
.tsl-aspect > .tsl-aspect__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Derecha a izquierda: el borde lógico ya pasa a la izquierda, así que el giro se invierte para que
   «cerrado» apunte hacia donde avanza la lectura (izquierda) y «abierto», hacia abajo */
.tsl-collapsible__chevron:dir(rtl) {
  transform: rotate(45deg);
}

[aria-expanded="true"] > .tsl-collapsible__chevron:dir(rtl),
[aria-expanded="true"] .tsl-collapsible__chevron:dir(rtl) {
  transform: rotate(-45deg);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21g. Datos: tree view, lista virtualizada, ordenables y kanban
   ---------------------------------------------------------------------------- */
tsl-tree {
  display: block;
  font-size: 12px;
}

tsl-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

tsl-tree li[role="treeitem"] {
  outline: none;
}

tsl-tree li[role="treeitem"][aria-expanded="false"] > ul {
  display: none;
}

tsl-tree ul[role="group"] {
  margin-inline-start: 11px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--tsl-border);
}

.tsl-tree__row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 8px 3px 4px;
  border-radius: 6px;
  color: var(--tsl-fg-muted);
  cursor: pointer;
  user-select: none;
}

.tsl-tree__row:hover {
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

li[aria-selected="true"] > .tsl-tree__row {
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
  font-weight: 500;
}

li[role="treeitem"]:focus-visible > .tsl-tree__row {
  box-shadow: var(--tsl-ring);
}

.tsl-tree__chevron {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.tsl-tree__chevron:not(.is-leaf)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms var(--tsl-ease);
}

li[aria-expanded="true"] > .tsl-tree__row > .tsl-tree__chevron::before {
  transform: rotate(45deg);
}

.tsl-tree__check {
  flex: none;
  margin: 0;
}

.tsl-tree__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tsl-virtual-list {
  display: block;
  height: 320px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
  overflow: hidden;
}

.tsl-vlist__viewport {
  position: relative;
  height: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--tsl-border-strong) transparent;
  outline: none;
}

.tsl-vlist__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tsl-accent) 70%, transparent);
}

.tsl-vlist__spacer {
  position: relative;
  width: 100%;
}

.tsl-vlist__row {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--tsl-border);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsl-vlist__row.is-active {
  background: var(--tsl-surface-strong);
  box-shadow: inset 2px 0 0 var(--tsl-accent);
}

tsl-sortable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

tsl-sortable[direction="horizontal"] {
  flex-direction: row;
  align-items: flex-start;
}

tsl-sortable[direction="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 140px), 100%), 1fr));
}

.tsl-sortable__item {
  position: relative;
  border-radius: var(--tsl-radius-sm);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-bg-elevated);
  cursor: grab;
  touch-action: manipulation;
}

.tsl-sortable__item:hover {
  border-color: var(--tsl-border-strong);
}

.tsl-sortable__item:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-sortable__item.is-dragging {
  cursor: grabbing;
  box-shadow: var(--tsl-shadow-lg);
  border-color: var(--tsl-accent);
  opacity: 0.96;
  transform: rotate(1.2deg);
}

.tsl-sortable__item.is-grabbed {
  border-color: var(--tsl-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tsl-accent) 35%, transparent);
}

.tsl-sortable__placeholder {
  flex: none;
  box-sizing: border-box;
  border-radius: var(--tsl-radius-sm);
  border: 1.5px dashed var(--tsl-accent);
  background: color-mix(in srgb, var(--tsl-accent) 8%, transparent);
}

.tsl-sortable__handle {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--tsl-fg-subtle);
  cursor: grab;
  touch-action: none;
}

.tsl-sortable__handle::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--tsl-svg-grip-vertical) center / contain no-repeat;
  mask: var(--tsl-svg-grip-vertical) center / contain no-repeat;
}

body.tsl-is-sorting {
  cursor: grabbing;
  user-select: none;
}

.tsl-kanban {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.tsl-kanban__col {
  flex: 1 0 220px;
  max-width: 320px;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-kanban__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
}

.tsl-kanban__col > tsl-sortable {
  min-height: 56px;
  max-height: 340px;
  padding: 4px 8px 10px;
  overflow-y: auto;
}

.tsl-kanban__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12px;
}

/* Derecha a izquierda: el chevron del árbol cerrado apunta hacia el inicio de lectura */
.tsl-tree__chevron:not(.is-leaf):dir(rtl)::before {
  transform: rotate(135deg);
}

li[aria-expanded="true"] > .tsl-tree__row > .tsl-tree__chevron:dir(rtl)::before {
  transform: rotate(45deg);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21h. Tabla de datos
   ---------------------------------------------------------------------------- */
tsl-data-table {
  display: block;
  font-size: 12px;
}

.tsl-dt__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tsl-dt__search {
  width: min(260px, 100%);
}

.tsl-dt__selinfo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline-start: 10px;
  color: var(--tsl-fg);
}

.tsl-dt__colmenu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

.tsl-dt__wrap {
  overflow: auto;
  border-radius: var(--tsl-radius);
  border: 1px solid var(--tsl-border);
}

.tsl-dt__wrap .tsl-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--tsl-bg-elevated);
  box-shadow: 0 1px 0 var(--tsl-border);
}

.tsl-dt__table th,
.tsl-dt__table td {
  padding-block: 10px;
}

tsl-data-table[density="compact"] .tsl-dt__table th,
tsl-data-table[density="compact"] .tsl-dt__table td {
  padding-block: 5px;
}

tsl-data-table[density="comfortable"] .tsl-dt__table th,
tsl-data-table[density="comfortable"] .tsl-dt__table td {
  padding-block: 16px;
}

/* Misma especificidad que las reglas de densidad y después en el código: gana sin !important */
tsl-data-table .tsl-dt__table :is(th, td).tsl-dt__select {
  width: 36px;
  padding-inline: 12px 0;
}

.tsl-dt__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tsl-dt__sort:hover {
  color: var(--tsl-fg);
}

.tsl-dt__sort:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
  border-radius: 4px;
}

.tsl-dt__sorticon {
  opacity: 0.4;
}

th[aria-sort="ascending"] .tsl-dt__sorticon,
th[aria-sort="descending"] .tsl-dt__sorticon {
  opacity: 1;
  color: var(--tsl-accent);
}

.tsl-dt__table tr.is-selected {
  background: color-mix(in srgb, var(--tsl-accent) 9%, transparent);
}

tsl-data-table .tsl-dt__table td.tsl-dt__empty {
  padding: 36px 14px;
  text-align: center;
  color: var(--tsl-fg-muted);
}

.tsl-dt__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.tsl-dt__size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tsl-fg-muted);
}

.tsl-dt__size .tsl-select {
  width: 68px;
  height: 28px;
  font-size: 11px;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21i. Gráficas
   ---------------------------------------------------------------------------- */
tsl-chart {
  display: block;
  position: relative;
  border-radius: var(--tsl-radius);
  color: var(--tsl-fg);
}

tsl-chart:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-chart__caption {
  margin-bottom: 8px;
  font-family: var(--tsl-font-heading);
  font-size: 13px;
  font-weight: 600;
}

.tsl-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
}

.tsl-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.tsl-chart__legend-item[aria-pressed="false"] {
  opacity: 0.4;
  text-decoration: line-through;
}

.tsl-chart__legend-item:hover {
  color: var(--tsl-fg);
}

.tsl-chart__legend-item:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-chart__dot {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tsl-chart__stage {
  position: relative;
}

tsl-chart svg {
  display: block;
  overflow: visible;
}

.tsl-chart__grid {
  stroke: var(--tsl-border);
  stroke-width: 1;
}

.tsl-chart__axis {
  stroke: var(--tsl-border-strong);
  stroke-width: 1;
}

.tsl-chart__tick {
  fill: var(--tsl-fg-subtle);
  font-family: var(--tsl-font-mono);
  font-size: 10px;
}

.tsl-chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tsl-chart__area {
  opacity: 0.14;
}

.tsl-chart__point {
  stroke: var(--tsl-bg);
  stroke-width: 1.5;
}

.tsl-chart__cross {
  stroke: var(--tsl-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.tsl-chart__hot {
  stroke: var(--tsl-bg);
  stroke-width: 2;
}

.tsl-chart__hl {
  fill: var(--tsl-fg);
  opacity: 0.06;
}

.tsl-chart__cell-hl {
  fill: none;
  stroke: var(--tsl-fg);
  stroke-width: 1.5;
}

.tsl-chart__seg {
  transition: transform 140ms var(--tsl-ease);
}

.tsl-chart__center-value {
  fill: var(--tsl-fg);
  font-family: var(--tsl-font-heading);
  font-size: 22px;
  font-weight: 600;
}

.tsl-chart__center-label {
  fill: var(--tsl-fg-muted);
  font-size: 11px;
}

.tsl-chart__track {
  fill: none;
  stroke: var(--tsl-surface-strong);
  stroke-linecap: round;
}

.tsl-chart__band-arc {
  fill: none;
  opacity: 0.28;
}

.tsl-chart__value-arc {
  fill: none;
  stroke-linecap: round;
}

.tsl-chart__cell.is-empty {
  fill: none;
  stroke: var(--tsl-border);
  stroke-dasharray: 2 3;
}

.tsl-chart__tip {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 110px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--tsl-border-strong);
  background: var(--tsl-bg-elevated);
  box-shadow: var(--tsl-shadow);
  font-size: 11px;
  pointer-events: none;
}

.tsl-chart__tip-title {
  font-weight: 600;
  color: var(--tsl-fg);
}

.tsl-chart__tip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tsl-fg-muted);
}

.tsl-chart__tip-row strong {
  margin-inline-start: auto;
  padding-inline-start: 12px;
  color: var(--tsl-fg);
  font-variant-numeric: tabular-nums;
}

/* Animación de entrada (solo la primera vez, respeta prefers-reduced-motion) */
tsl-chart.is-animating .tsl-chart__line,
tsl-chart.is-animating .tsl-chart__value-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tsl-chart-draw 800ms var(--tsl-ease) forwards;
}

tsl-chart.is-animating .tsl-chart__bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: tsl-chart-grow 600ms var(--tsl-ease) both;
}

tsl-chart.is-animating .tsl-chart__area,
tsl-chart.is-animating .tsl-chart__seg,
tsl-chart.is-animating .tsl-chart__cell {
  animation: tsl-chart-fade 700ms ease both;
}

@keyframes tsl-chart-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes tsl-chart-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes tsl-chart-fade {
  from { opacity: 0; }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21j. Barra lateral: <tsl-sidebar> dentro de .tsl-sidebar-layout
        Modos: completa, solo iconos (collapsible="icon") u oculta (offcanvas) y cajón en pantallas estrechas
   ---------------------------------------------------------------------------- */
.tsl-sidebar-layout {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  background: var(--tsl-bg);
}

.tsl-sidebar-inset {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tsl-sidebar-inset__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--tsl-border);
}

tsl-sidebar {
  --tsl-sidebar-width: 248px;
  --tsl-sidebar-rail: 56px;
  display: flex;
  flex-direction: column;
  flex: none;
  width: var(--tsl-sidebar-width);
  min-width: 0;
  overflow: hidden;
  background: var(--tsl-bg-elevated);
  border-inline-end: 1px solid var(--tsl-border);
  transition: width 200ms var(--tsl-ease);
}

tsl-sidebar[side="end"] {
  order: 2;
  border-inline-end: 0;
  border-inline-start: 1px solid var(--tsl-border);
}

tsl-sidebar[collapsed][collapsible="icon"],
tsl-sidebar[data-rail] {
  width: var(--tsl-sidebar-rail);
}

tsl-sidebar[collapsed][collapsible="offcanvas"] {
  width: 0;
  border-width: 0;
}

.tsl-sidebar__header,
.tsl-sidebar__footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  min-height: 52px;
  overflow: hidden;
  white-space: nowrap;
}

.tsl-sidebar__header {
  border-bottom: 1px solid var(--tsl-border);
}

.tsl-sidebar__footer {
  border-top: 1px solid var(--tsl-border);
}

.tsl-sidebar__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tsl-sidebar__label {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tsl-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsl-sidebar__menu,
.tsl-sidebar__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tsl-sidebar__sub {
  margin: 2px 0 2px 18px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--tsl-border);
}

.tsl-sidebar__sub[hidden] {
  display: none;
}

.tsl-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--tsl-radius-sm);
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 13px;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.tsl-sidebar__item:hover {
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

.tsl-sidebar__item:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-sidebar__item[aria-current="page"],
.tsl-sidebar__item[aria-current="true"] {
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
  font-weight: 600;
}

.tsl-sidebar__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
}

.tsl-sidebar__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsl-sidebar__badge {
  flex: none;
  margin-inline-start: auto;
}

.tsl-sidebar__item[aria-expanded]::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 160ms var(--tsl-ease);
}

.tsl-sidebar__item[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/* Modo de iconos: solo el icono, centrado; sin etiquetas, insignias ni submenús */
tsl-sidebar[data-rail] .tsl-sidebar__item {
  justify-content: center;
  padding: 0;
}

tsl-sidebar[data-rail] .tsl-sidebar__text,
tsl-sidebar[data-rail] .tsl-sidebar__badge,
tsl-sidebar[data-rail] .tsl-sidebar__label,
tsl-sidebar[data-rail] .tsl-sidebar__sub,
tsl-sidebar[data-rail] .tsl-sidebar__item[aria-expanded]::after,
tsl-sidebar[data-rail] .tsl-sidebar__hide-rail {
  display: none;
}

tsl-sidebar[data-rail] .tsl-sidebar__header,
tsl-sidebar[data-rail] .tsl-sidebar__footer {
  justify-content: center;
  padding-inline: 0;
}

/* Pantallas estrechas: la barra se convierte en un cajón sobre el contenido */
tsl-sidebar[data-mobile] {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 40;
  width: min(280px, 85%);
  border-inline-end: 1px solid var(--tsl-border);
  box-shadow: var(--tsl-shadow-lg);
  transform: translateX(-105%);
  transition: transform 220ms var(--tsl-ease);
}

tsl-sidebar[data-mobile][side="end"] {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(105%);
}

tsl-sidebar[data-mobile]:dir(rtl) {
  transform: translateX(105%);
}

tsl-sidebar[data-mobile][side="end"]:dir(rtl) {
  transform: translateX(-105%);
}

tsl-sidebar[data-mobile][data-open] {
  transform: none;
}

.tsl-sidebar__backdrop {
  position: absolute;
  inset: 0;
  z-index: 39;
  background: var(--tsl-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--tsl-ease);
}

.tsl-sidebar__backdrop[data-open] {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  tsl-sidebar,
  .tsl-sidebar__backdrop {
    transition: none;
  }
}

tsl-sidebar .tsl-sidebar__item[aria-expanded]:dir(rtl)::after {
  transform: rotate(135deg);
}

tsl-sidebar .tsl-sidebar__item[aria-expanded="true"]:dir(rtl)::after {
  transform: rotate(45deg);
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21k. Carrusel: <tsl-carousel> con scroll-snap, botones, puntos y avance automático
   ---------------------------------------------------------------------------- */
tsl-carousel {
  --tsl-per-view: 1;
  position: relative;
  display: block;
  max-width: 100%;
}

.tsl-carousel__track {
  position: relative;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  border-radius: var(--tsl-radius);
}

.tsl-carousel__track::-webkit-scrollbar {
  display: none;
}

.tsl-carousel__track:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-carousel__slide {
  flex: 0 0 calc((100% - (var(--tsl-per-view) - 1) * 12px) / var(--tsl-per-view));
  min-width: 0;
  scroll-snap-align: start;
  overflow-wrap: anywhere;
}

tsl-carousel[orientation="vertical"] .tsl-carousel__track {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  height: 100%;
}

tsl-carousel[orientation="vertical"] .tsl-carousel__slide {
  flex-basis: calc((100% - (var(--tsl-per-view) - 1) * 12px) / var(--tsl-per-view));
}

.tsl-carousel__nav {
  flex: none;
  border-radius: 50%;
}

.tsl-carousel__nav:dir(rtl) {
  scale: -1 1;
}

.tsl-carousel__nav:disabled {
  opacity: 0.35;
}

.tsl-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.tsl-carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* El botón mide 24 × 24 (objetivo táctil de WCAG 2.5.8) y el punto visible de 8 px es su ::before */
.tsl-carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.tsl-carousel__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tsl-border-strong);
  transition: background-color 140ms ease, transform 140ms ease;
}

.tsl-carousel__dot[aria-current="true"]::before {
  background: var(--tsl-fg);
  transform: scale(1.25);
}

.tsl-carousel__dot:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-carousel__play {
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .tsl-carousel__dot::before {
    transition: none;
  }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21l. Conversación: mensaje, burbuja, marcador, adjunto, traza y bloque de código
        (para chats e interfaces con asistentes; todo con propiedades lógicas, así que sirve en RTL)
   ---------------------------------------------------------------------------- */

/* ---- Mensaje y burbuja ---- */
.tsl-message-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tsl-message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}

.tsl-message--end {
  flex-direction: row-reverse;
}

.tsl-message__avatar {
  flex: none;
  width: 28px;
  min-height: 1px;
}

.tsl-message__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  max-width: min(85%, 560px);
}

.tsl-message--end .tsl-message__content {
  align-items: flex-end;
}

.tsl-message__header {
  align-self: flex-start;
  padding-inline: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tsl-fg-muted);
}

.tsl-message__footer {
  padding-inline: 4px;
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
}

.tsl-bubble {
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 16px;
  border-end-start-radius: 4px;
  border: 1px solid var(--tsl-border);
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
  font-size: 13.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tsl-message--end .tsl-bubble {
  border-end-start-radius: 16px;
  border-end-end-radius: 4px;
  border-color: transparent;
  background: var(--tsl-accent);
  color: var(--tsl-accent-fg, #fff);
}

.tsl-bubble--plain {
  padding-inline: 0;
  border-color: transparent;
  background: transparent;
}

.tsl-bubble > :first-child {
  margin-top: 0;
}

.tsl-bubble > :last-child {
  margin-bottom: 0;
}

/* ---- Marcador: notas de sistema, estados y separadores con etiqueta ---- */
.tsl-marker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tsl-fg-muted);
  font-size: 12px;
  text-decoration: none;
}

a.tsl-marker:hover,
button.tsl-marker:hover {
  color: var(--tsl-fg);
}

button.tsl-marker {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.tsl-marker__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
}

.tsl-marker--border {
  padding-block-end: 8px;
  border-bottom: 1px solid var(--tsl-border);
}

.tsl-marker--separator {
  justify-content: center;
}

.tsl-marker--separator::before,
.tsl-marker--separator::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--tsl-border);
}

/* ---- Texto en curso: brillo que recorre el texto ---- */
.tsl-shimmer {
  background: linear-gradient(90deg, var(--tsl-fg-muted) 0%, var(--tsl-fg) 45%, var(--tsl-fg-muted) 90%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: tsl-shimmer 1.6s linear infinite;
}

/* ---- Adjunto ---- */
.tsl-attachment-group {
  display: flex;
  gap: 8px;
  padding-block-end: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.tsl-attachment-group > .tsl-attachment {
  flex: none;
  scroll-snap-align: start;
}

.tsl-attachment {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 240px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
  font-size: 13px;
}

.tsl-attachment--sm {
  width: 200px;
  padding: 6px 8px;
}

.tsl-attachment--xs {
  width: auto;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.tsl-attachment--vertical {
  flex-direction: column;
  align-items: stretch;
  width: 140px;
}

.tsl-attachment__media {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tsl-radius-sm);
  background: var(--tsl-surface-strong);
  overflow: hidden;
  font-size: 16px;
}

.tsl-attachment--xs .tsl-attachment__media {
  width: 16px;
  height: 16px;
  background: transparent;
  font-size: 12px;
}

.tsl-attachment--vertical .tsl-attachment__media {
  width: 100%;
  height: 84px;
}

.tsl-attachment__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsl-attachment__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tsl-attachment__title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsl-attachment__desc {
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tsl-attachment__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
}

/* Todo el adjunto es un enlace o botón: el trigger cubre la tarjeta */
.tsl-attachment__trigger {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tsl-attachment__trigger:hover {
  background: var(--tsl-surface-hover);
}

.tsl-attachment__trigger:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-attachment[data-state="uploading"] .tsl-attachment__title,
.tsl-attachment[data-state="processing"] .tsl-attachment__title {
  background: linear-gradient(90deg, var(--tsl-fg-muted) 0%, var(--tsl-fg) 45%, var(--tsl-fg-muted) 90%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tsl-shimmer 1.6s linear infinite;
}

.tsl-attachment[data-state="error"] {
  border-color: color-mix(in srgb, var(--tsl-danger) 55%, transparent);
}

.tsl-attachment[data-state="error"] .tsl-attachment__desc {
  color: var(--tsl-danger);
}

/* ---- Traza: pasos de un agente (herramientas, razonamiento, fuentes) ---- */
.tsl-trace {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.tsl-trace__line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 2px 6px;
  border-radius: var(--tsl-radius-sm);
  color: var(--tsl-fg-muted);
}

button.tsl-trace__line,
a.tsl-trace__line {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

button.tsl-trace__line:hover,
a.tsl-trace__line:hover {
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

button.tsl-trace__line:focus-visible,
a.tsl-trace__line:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-trace__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
}

.tsl-trace__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsl-trace__desc {
  flex: none;
  font-size: 12px;
  color: var(--tsl-fg-muted);
}

.tsl-trace__line[data-status="running"] .tsl-trace__title {
  background: linear-gradient(90deg, var(--tsl-fg-muted) 0%, var(--tsl-fg) 45%, var(--tsl-fg-muted) 90%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tsl-shimmer 1.6s linear infinite;
}

.tsl-trace__line[data-status="pending"] {
  opacity: 0.55;
}

.tsl-trace__line[data-status="error"] {
  color: var(--tsl-danger);
}

.tsl-trace__detail {
  margin-inline-start: 14px;
  padding-inline-start: 12px;
  padding-block: 4px 6px;
  border-inline-start: 1px solid var(--tsl-border);
}

.tsl-trace__line .tsl-collapsible__chevron {
  margin-inline-start: auto;
}

/* ---- Bloque de código con título, acciones, números de línea y diferencias ---- */
.tsl-codeblock {
  position: relative;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-bg-elevated);
  overflow: hidden;
}

.tsl-codeblock--destructive {
  border-color: color-mix(in srgb, var(--tsl-danger) 55%, transparent);
}

.tsl-codeblock__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-bottom: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-codeblock__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--tsl-font-mono);
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
}

.tsl-codeblock__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tsl-codeblock__content {
  display: grid;
  grid-auto-columns: minmax(max-content, 1fr);
  align-content: start;
  margin: 0;
  padding: 12px 0;
  overflow: auto;
  font-family: var(--tsl-font-mono);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--tsl-fg);
  tab-size: 2;
  direction: ltr;
  text-align: left;
  counter-reset: tsl-line var(--tsl-start, 0);
}

.tsl-codeblock__content:focus-visible {
  outline: none;
  box-shadow: inset var(--tsl-ring);
}

.tsl-codeblock__content[data-wrap] {
  grid-auto-columns: minmax(0, 1fr);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Las líneas son elementos de una rejilla: los saltos de línea entre ellas en el HTML no añaden filas vacías */
.tsl-codeblock__line {
  display: block;
  padding: 0 16px;
  white-space: inherit;
}

.tsl-codeblock__content[data-numbers] .tsl-codeblock__line {
  counter-increment: tsl-line;
}

.tsl-codeblock__content[data-numbers] .tsl-codeblock__line::before {
  content: counter(tsl-line);
  display: inline-block;
  width: 2.5ch;
  margin-inline-end: 16px;
  text-align: right;
  color: var(--tsl-fg-subtle);
  user-select: none;
}

.tsl-codeblock__line[data-variant="added"] {
  background: color-mix(in srgb, var(--tsl-success) 16%, transparent);
}

.tsl-codeblock__line[data-variant="removed"] {
  background: color-mix(in srgb, var(--tsl-danger) 16%, transparent);
}

.tsl-codeblock__line[data-variant="highlighted"] {
  background: var(--tsl-surface-strong);
  box-shadow: inset 2px 0 0 var(--tsl-accent);
}

/* El marcador +/− no se copia ni se selecciona */
.tsl-codeblock__line[data-variant="added"]::after,
.tsl-codeblock__line[data-variant="removed"]::after {
  position: absolute;
  inset-inline-start: 4px;
  user-select: none;
}

.tsl-codeblock__line[data-variant="added"],
.tsl-codeblock__line[data-variant="removed"] {
  position: relative;
}

.tsl-codeblock__line[data-variant="added"]::after {
  content: "+";
  color: var(--tsl-success);
}

.tsl-codeblock__line[data-variant="removed"]::after {
  content: "−";
  color: var(--tsl-danger);
}

.tsl-codeblock__footer {
  padding: 6px 8px;
  border-top: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-codeblock > .tsl-codeblock__actions {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tsl-shimmer,
  .tsl-trace__line[data-status="running"] .tsl-trace__title,
  .tsl-attachment[data-state="uploading"] .tsl-attachment__title,
  .tsl-attachment[data-state="processing"] .tsl-attachment__title {
    animation: none;
    -webkit-text-fill-color: currentColor;
    background: none;
    color: var(--tsl-fg-muted);
  }
}

/* ---- Zona de conversación con seguimiento del final ---- */
tsl-message-scroller {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 240px;
}

.tsl-message-scroller__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.tsl-message-scroller__viewport:focus-visible {
  outline: none;
  box-shadow: inset var(--tsl-ring);
}

.tsl-message-scroller__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

.tsl-message-scroller__end {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-start: 50%;
  translate: -50% 8px;
  opacity: 0;
  pointer-events: none;
  background: var(--tsl-bg-elevated);
  box-shadow: var(--tsl-shadow);
  transition: opacity 160ms ease, translate 160ms var(--tsl-ease);
}

tsl-message-scroller:dir(rtl) .tsl-message-scroller__end {
  translate: 50% 8px;
}

tsl-message-scroller[data-away] .tsl-message-scroller__end {
  opacity: 1;
  pointer-events: auto;
  translate: -50% 0;
}

tsl-message-scroller[data-away]:dir(rtl) .tsl-message-scroller__end {
  translate: 50% 0;
}

/* ---- Cuestionario por pasos ---- */
tsl-questionnaire {
  display: block;
}

.tsl-questionnaire__progress {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 10px;
  font-size: 12px;
  color: var(--tsl-fg-muted);
}

.tsl-questionnaire__progress::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(var(--tsl-accent), var(--tsl-accent)) 0 0 / var(--tsl-q-progress, 0%) 100% no-repeat, var(--tsl-border-strong);
  transition: background-size 220ms var(--tsl-ease);
}

.tsl-questionnaire__progress:dir(rtl)::after {
  background-position: 100% 0;
}

.tsl-questionnaire__item {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tsl-questionnaire__item[hidden] {
  display: none;
}

.tsl-questionnaire__item > legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
}

.tsl-questionnaire__desc {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--tsl-fg-muted);
}

.tsl-questionnaire__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tsl-questionnaire__choices .tsl-choice {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
  cursor: pointer;
}

.tsl-questionnaire__choices .tsl-choice:hover {
  background: var(--tsl-surface-hover);
}

.tsl-questionnaire__choices .tsl-choice:has(:checked) {
  border-color: var(--tsl-fg);
  background: var(--tsl-surface-strong);
}

.tsl-questionnaire__key {
  margin-inline-start: auto;
}

.tsl-questionnaire__item[aria-invalid="true"] .tsl-questionnaire__choices .tsl-choice {
  border-color: color-mix(in srgb, var(--tsl-danger) 55%, transparent);
}

.tsl-questionnaire__error {
  min-height: 1.4em;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--tsl-danger);
}

.tsl-questionnaire__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.tsl-questionnaire__actions [data-prev] {
  margin-inline-end: auto;
}

.tsl-questionnaire__actions [hidden] {
  display: none;
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21m. Asistente: entrada de prompt, sugerencias, acciones de mensaje, razonamiento,
        fuentes y citas, versiones de respuesta y medidor de contexto
   ---------------------------------------------------------------------------- */

/* ---- Entrada de prompt ---- */
tsl-prompt-input {
  display: block;
}

.tsl-prompt-input__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--tsl-border);
  border-radius: calc(var(--tsl-radius) + 4px);
  background: var(--tsl-surface);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

tsl-prompt-input:hover .tsl-prompt-input__form {
  border-color: var(--tsl-border-strong);
}

.tsl-prompt-input__form:focus-within {
  border-color: var(--tsl-border-strong);
  box-shadow: var(--tsl-ring);
}

tsl-prompt-input[data-dragging] .tsl-prompt-input__form {
  border-style: dashed;
  border-color: var(--tsl-accent);
  background: color-mix(in srgb, var(--tsl-accent) 6%, var(--tsl-surface));
}

tsl-prompt-input[disabled] .tsl-prompt-input__form {
  opacity: 0.6;
}

.tsl-prompt-input__attachments {
  padding: 2px 2px 4px;
}

.tsl-prompt-input__textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--tsl-fg);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
}

.tsl-prompt-input__textarea:focus {
  outline: none;
}

.tsl-prompt-input__textarea::placeholder {
  color: var(--tsl-fg-muted);
}

.tsl-prompt-input__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tsl-prompt-input__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.tsl-prompt-input__tools .tsl-select {
  width: auto;
  height: 28px;
  border-color: transparent;
  background-color: transparent;
}

.tsl-prompt-input__tools .tsl-select:hover {
  background-color: var(--tsl-surface-hover);
}

.tsl-prompt-input__submit {
  flex: none;
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
}

.tsl-prompt-input__icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
}

/* Flecha de enviar: asta y punta con bordes, sin depender de la fuente */
.tsl-prompt-input__submit[data-state="send"] .tsl-prompt-input__icon::before {
  content: "";
  position: absolute;
  inset-block: 1px;
  inset-inline-start: 6px;
  width: 2px;
  border-radius: 1px;
  background: currentColor;
}

.tsl-prompt-input__submit[data-state="send"] .tsl-prompt-input__icon::after {
  content: "";
  position: absolute;
  top: 1.5px;
  inset-inline-start: 3px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
}

.tsl-prompt-input__submit[data-state="stop"] .tsl-prompt-input__icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  background: currentColor;
}

.tsl-prompt-input__submit[data-state="wait"] .tsl-prompt-input__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: tsl-spin 700ms linear infinite;
}

/* ---- Sugerencias ---- */
.tsl-suggestions {
  display: flex;
  gap: 8px;
  padding-block-end: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tsl-suggestions--wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}

.tsl-suggestion {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--tsl-border);
  border-radius: 999px;
  background: var(--tsl-surface);
  color: var(--tsl-fg-muted);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.tsl-suggestion:hover {
  border-color: var(--tsl-border-strong);
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

.tsl-suggestion:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

/* ---- Acciones de un mensaje (copiar, repetir, valorar) ---- */
.tsl-message__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--tsl-fg-muted);
  transition: opacity 140ms ease;
}

.tsl-message__actions .tsl-btn--icon {
  color: inherit;
}

.tsl-message__actions .tsl-btn--icon:hover,
.tsl-message__actions [aria-pressed="true"] {
  color: var(--tsl-fg);
}

/* Discretas hasta que se pasa por el mensaje o se navega con teclado; siempre visibles en táctil */
@media (hover: hover) {
  .tsl-message .tsl-message__actions:not(.tsl-message__actions--visible) {
    opacity: 0;
  }

  .tsl-message:hover .tsl-message__actions,
  .tsl-message:focus-within .tsl-message__actions {
    opacity: 1;
  }
}

/* ---- Razonamiento ---- */
tsl-reasoning {
  display: block;
  font-size: 13px;
}

.tsl-reasoning__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 28px;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--tsl-radius-sm);
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  cursor: pointer;
}

.tsl-reasoning__trigger:hover {
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

.tsl-reasoning__trigger:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-reasoning__icon {
  flex: none;
  font-size: 12px;
}

tsl-reasoning[streaming] .tsl-reasoning__icon {
  animation: tsl-pulse 1.4s ease-in-out infinite;
}

.tsl-reasoning__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms var(--tsl-ease);
}

tsl-reasoning[open] > .tsl-reasoning__content {
  grid-template-rows: 1fr;
}

.tsl-reasoning__inner {
  min-height: 0;
  overflow: hidden;
}

.tsl-reasoning__inner > :first-child {
  margin-top: 6px;
}

.tsl-reasoning__inner > :last-child {
  margin-bottom: 0;
}

.tsl-reasoning__inner {
  padding-inline-start: 12px;
  margin-inline-start: 5px;
  border-inline-start: 1px solid var(--tsl-border);
  color: var(--tsl-fg-muted);
  line-height: 1.6;
}

/* ---- Fuentes ---- */
.tsl-sources {
  font-size: 13px;
}

.tsl-sources__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 2px 6px;
  border: 0;
  border-radius: var(--tsl-radius-sm);
  background: transparent;
  color: var(--tsl-fg-muted);
  font: inherit;
  cursor: pointer;
}

.tsl-sources__trigger:hover {
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

.tsl-sources__trigger:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-sources__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.tsl-source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--tsl-radius-sm);
  color: var(--tsl-fg);
  text-decoration: none;
}

a.tsl-source:hover {
  background: var(--tsl-surface-hover);
}

a.tsl-source:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

/* Inicial o favicon del sitio */
.tsl-source__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--tsl-radius-xs);
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg-muted);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
}

.tsl-source__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsl-source__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsl-source__host {
  flex: none;
  font-size: 12px;
  color: var(--tsl-fg-subtle);
}

/* ---- Cita en línea ---- */
tsl-hovercard.tsl-citation-card {
  display: inline;
}

.tsl-citation {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 16ch;
  height: 18px;
  padding: 0 6px;
  margin-inline: 2px;
  border-radius: 999px;
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  vertical-align: 1px;
  cursor: pointer;
}

.tsl-citation:hover,
.tsl-citation[aria-expanded="true"] {
  background: var(--tsl-accent);
  color: var(--tsl-accent-fg, #fff);
}

.tsl-citation:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-citation__panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 300px;
  padding: 12px 14px;
  font-size: 12.5px;
}

.tsl-citation__host {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tsl-fg-subtle);
  font-size: 11.5px;
}

.tsl-citation__title {
  color: var(--tsl-fg);
  font-weight: 600;
  line-height: 1.35;
}

.tsl-citation__quote {
  margin: 2px 0 0;
  padding-inline-start: 8px;
  border-inline-start: 2px solid var(--tsl-border-strong);
  color: var(--tsl-fg-muted);
  line-height: 1.5;
}

/* ---- Versiones de una respuesta ---- */
tsl-branch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

tsl-branch:has(.tsl-message--end) {
  align-items: flex-end;
}

.tsl-branch__item {
  min-width: 0;
  max-width: 100%;
}

.tsl-branch__selector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--tsl-fg-muted);
  font-size: 12px;
}

.tsl-branch__selector .tsl-btn--icon {
  width: 24px;
  height: 24px;
  color: inherit;
  font-size: 15px;
}

/* La dirección la decide el propio texto: «2 de 3» se lee igual en una página RTL */
.tsl-branch__count {
  unicode-bidi: plaintext;
  min-width: 4.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Medidor de contexto ---- */
tsl-context {
  display: inline-block;
}

.tsl-context__trigger {
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.tsl-context__ring {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

.tsl-context__ring circle {
  fill: none;
  stroke-width: 2.5;
}

.tsl-context__track {
  stroke: var(--tsl-surface-strong);
}

.tsl-context__arc {
  stroke: var(--tsl-accent);
  stroke-linecap: round;
  transition: stroke-dasharray 300ms var(--tsl-ease);
}

tsl-context[data-level="warn"] .tsl-context__arc,
tsl-context[data-level="warn"] .tsl-context__fill {
  stroke: var(--tsl-warning);
  background: var(--tsl-warning);
}

tsl-context[data-level="danger"] .tsl-context__arc,
tsl-context[data-level="danger"] .tsl-context__fill {
  stroke: var(--tsl-danger);
  background: var(--tsl-danger);
}

.tsl-context__percent {
  font-size: 12px;
}

.tsl-context__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  padding: 12px 14px;
  font-size: 12.5px;
}

.tsl-context__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tsl-context__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.tsl-context__total {
  flex: none;
  white-space: nowrap;
  color: var(--tsl-fg-muted);
  font-variant-numeric: tabular-nums;
}

.tsl-context__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--tsl-surface-strong);
  overflow: hidden;
}

.tsl-context__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tsl-accent);
  transition: inline-size 300ms var(--tsl-ease);
}

.tsl-context__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.tsl-context__rows > div,
.tsl-context__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.tsl-context__rows dt {
  color: var(--tsl-fg-muted);
}

.tsl-context__rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.tsl-context__foot {
  padding-block-start: 8px;
  border-top: 1px solid var(--tsl-border);
  color: var(--tsl-fg-muted);
}

.tsl-context__cost {
  color: var(--tsl-fg);
  font-variant-numeric: tabular-nums;
}

/* ---- Mensaje a todo el ancho (respuestas largas de un asistente) ---- */
.tsl-message--wide {
  align-items: flex-start;
}

.tsl-message--wide .tsl-message__content {
  flex: 1 1 auto;
  max-width: 100%;
  gap: 6px;
}

.tsl-message--wide .tsl-message__content > * {
  max-width: 100%;
}

.tsl-message--wide .tsl-bubble--plain {
  padding-block: 0;
}

/* ---- Chat: cabecera, conversación y caja de entrada en un solo marco ---- */
.tsl-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 560px;
  max-height: 100%;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-bg);
  overflow: hidden;
}

.tsl-chat__header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding-block: 8px;
  padding-inline: 16px 12px;
  border-bottom: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-chat__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 14px;
}

.tsl-chat__title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 12px;
  color: var(--tsl-fg-muted);
}

.tsl-chat > tsl-message-scroller {
  flex: 1 1 auto;
  height: auto;
}

.tsl-chat__composer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 12px;
}

.tsl-chat__note {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tsl-reasoning__content,
  .tsl-context__arc,
  .tsl-context__fill {
    transition: none;
  }

  tsl-reasoning[streaming] .tsl-reasoning__icon,
  .tsl-prompt-input__submit[data-state="wait"] .tsl-prompt-input__icon::before {
    animation-duration: 2s;
  }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21n. Bloques: asistente por pasos, panel de control, autenticación y ajustes
        (se adaptan al ancho de su contenedor, no al de la ventana, para que sirvan
        igual a pantalla completa que dentro de un panel)
   ---------------------------------------------------------------------------- */

/* ---- Enlace de texto (también para <button>) ---- */
.tsl-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tsl-fg);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}

.tsl-link:hover {
  text-decoration-color: currentColor;
}

.tsl-link:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: var(--tsl-ring);
}

.tsl-link:disabled {
  color: var(--tsl-fg-subtle);
  text-decoration: none;
  cursor: default;
}

/* ---- Asistente por pasos ---- */
tsl-wizard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tsl-wizard__steps > li {
  gap: 6px;
}

.tsl-wizard__jump {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
}

.tsl-wizard__jump:disabled {
  cursor: default;
}

.tsl-wizard__jump:not(:disabled):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tsl-wizard__jump:focus-visible {
  outline: none;
  border-radius: 2px;
  box-shadow: var(--tsl-ring);
}

.tsl-wizard__steps > li[data-current] {
  color: var(--tsl-fg);
}

.tsl-wizard__steps > li[data-current]::before {
  background: var(--tsl-accent);
}

.tsl-wizard__step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.tsl-wizard__step > legend,
.tsl-wizard__title {
  margin: 0;
  padding: 0;
  font-family: var(--tsl-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--tsl-fg);
}

.tsl-wizard__step > legend:focus,
.tsl-wizard__title:focus {
  outline: none;
}

/* Flotado, el <legend> deja de ir sobre el borde del fieldset y pasa a ser un elemento flex más:
   así le llega el mismo gap que al resto del paso */
.tsl-wizard__step > legend {
  float: left;
  width: 100%;
}

.tsl-wizard__desc {
  margin: -8px 0 0;
  font-size: 13px;
  color: var(--tsl-fg-muted);
}

.tsl-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--tsl-border);
}

.tsl-wizard__actions [data-next],
.tsl-wizard__actions [data-submit] {
  margin-inline-start: auto;
}

/* Resumen de la revisión */
.tsl-summary {
  display: grid;
  grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
  font-size: 13px;
}

.tsl-summary dt {
  color: var(--tsl-fg-muted);
}

.tsl-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- Panel de control ---- */
.tsl-dashboard .tsl-sidebar-inset {
  container: tsl-dashboard / inline-size;
}

.tsl-dashboard__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}

.tsl-dashboard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.tsl-dashboard__head h3 {
  margin: 0;
  font-family: var(--tsl-font-heading);
  font-size: 20px;
}

.tsl-dashboard__head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tsl-fg-muted);
}

.tsl-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.tsl-dashboard__charts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 12px;
}

.tsl-dashboard__panel {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
}

.tsl-dashboard__panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.tsl-dashboard__panel-title small {
  font-weight: 400;
  color: var(--tsl-fg-muted);
}

.tsl-dashboard__search {
  width: min(240px, 40%);
  margin-inline-start: auto;
}

@container tsl-dashboard (max-width: 860px) {
  .tsl-dashboard__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tsl-dashboard__charts {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container tsl-dashboard (max-width: 520px) {
  .tsl-dashboard__body {
    padding: 14px;
  }

  .tsl-dashboard__search {
    display: none;
  }
}

/* ---- Autenticación ---- */
.tsl-auth {
  container: tsl-auth / inline-size;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-bg);
  overflow: hidden;
}

.tsl-auth__grid {
  display: flex;
  min-height: 520px;
}

.tsl-auth__aside {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border-inline-end: 1px solid var(--tsl-border);
  background:
    radial-gradient(120% 80% at 0% 100%, color-mix(in srgb, var(--tsl-accent) 16%, transparent), transparent 70%),
    var(--tsl-surface);
}

.tsl-auth__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.tsl-auth__pitch {
  margin: 0;
  font-family: var(--tsl-font-heading);
  font-size: 22px;
  line-height: 1.25;
}

.tsl-auth__points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--tsl-fg-muted);
}

.tsl-auth__points li::before {
  content: "";
  --_icon: var(--tsl-svg-check);
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  vertical-align: -0.125em;
  -webkit-mask: var(--_icon) center / contain no-repeat;
  mask: var(--_icon) center / contain no-repeat;
  margin-inline-end: 8px;
  color: var(--tsl-accent);
}

.tsl-auth__main {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  padding: 28px;
}

.tsl-auth__view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 340px);
}

.tsl-auth__view[hidden] {
  display: none;
}

.tsl-auth__title {
  margin: 0;
  font-family: var(--tsl-font-heading);
  font-size: 20px;
}

.tsl-auth__title:focus {
  outline: none;
}

.tsl-auth__desc {
  margin: -8px 0 0;
  font-size: 13px;
  color: var(--tsl-fg-muted);
}

.tsl-auth__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.tsl-auth__foot {
  margin: 4px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--tsl-fg-muted);
}

.tsl-auth__providers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@container tsl-auth (max-width: 680px) {
  .tsl-auth__aside {
    display: none;
  }

  .tsl-auth__main {
    padding: 24px 16px;
  }
}

/* ---- Ajustes con navegación lateral ---- */
.tsl-settings {
  container: tsl-settings / inline-size;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-bg);
}

.tsl-settings__grid {
  display: flex;
  min-height: 560px;
}

.tsl-settings__nav {
  flex: none;
  width: 200px;
  padding: 16px 10px;
  border-inline-end: 1px solid var(--tsl-border);
}

.tsl-settings__main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tsl-settings__panel {
  flex: 1 1 auto;
  padding: 20px 24px 24px;
}

.tsl-settings__panel[hidden] {
  display: none;
}

.tsl-settings__head h3 {
  margin: 0;
  font-family: var(--tsl-font-heading);
  font-size: 18px;
}

.tsl-settings__head h3:focus {
  outline: none;
}

.tsl-settings__head p {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--tsl-fg-muted);
}

.tsl-settings__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  align-items: start;
  gap: 8px 24px;
  padding-block: 16px;
  border-top: 1px solid var(--tsl-border);
}

.tsl-settings__row-title {
  font-size: 13px;
  font-weight: 600;
}

.tsl-settings__row-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--tsl-fg-muted);
}

.tsl-settings__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tsl-settings__control--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Zona de peligro */
.tsl-settings__danger {
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--tsl-danger) 45%, var(--tsl-border));
  border-radius: var(--tsl-radius);
}

.tsl-settings__danger .tsl-settings__row {
  padding-inline: 16px;
}

.tsl-settings__danger .tsl-settings__row:first-child {
  border-top: 0;
}

/* Barra de cambios sin guardar: aparece al final del contenido y se queda a la vista */
.tsl-savebar {
  position: sticky;
  inset-block-end: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 16px 12px;
  padding-block: 10px;
  padding-inline: 16px 12px;
  border: 1px solid var(--tsl-border-strong);
  border-radius: var(--tsl-radius);
  background: var(--tsl-bg-elevated);
  box-shadow: var(--tsl-shadow-lg);
  font-size: 13px;
  animation: tsl-pop 180ms var(--tsl-ease);
}

.tsl-savebar[hidden] {
  display: none;
}

.tsl-savebar > :first-child {
  flex: 1 1 auto;
}

@container tsl-settings (max-width: 640px) {
  .tsl-settings__grid {
    flex-direction: column;
  }

  .tsl-settings__nav {
    width: auto;
    padding: 8px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--tsl-border);
  }

  .tsl-settings__nav .tsl-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .tsl-settings__nav .tsl-nav__item {
    flex: none;
  }

  .tsl-settings__panel {
    padding: 16px;
  }

  .tsl-settings__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsl-savebar {
    animation: none;
  }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   21o. Controles: importe, teléfono, subida de archivos y editor de texto enriquecido
   ---------------------------------------------------------------------------- */

/* ---- Marco común de los campos compuestos (importe y teléfono) ---- */
tsl-currency,
tsl-phone {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 34px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-sm);
  background: var(--tsl-bg);
  color: var(--tsl-fg);
  font-size: 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

tsl-currency:hover,
tsl-phone:hover {
  border-color: var(--tsl-border-strong);
}

tsl-currency:focus-within,
tsl-phone:focus-within {
  box-shadow: var(--tsl-ring);
}

tsl-currency[data-invalid],
tsl-currency[aria-invalid="true"],
tsl-phone[aria-invalid="true"] {
  border-color: var(--tsl-danger);
}

tsl-currency[disabled],
tsl-phone[disabled],
fieldset:disabled tsl-currency,
fieldset:disabled tsl-phone {
  opacity: 0.5;
}

.tsl-currency__input,
.tsl-phone__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.tsl-currency__input:focus,
.tsl-phone__input:focus {
  outline: none;
}

.tsl-currency__input::placeholder,
.tsl-phone__input::placeholder {
  color: var(--tsl-fg-muted);
}

/* ---- Importe ---- */
.tsl-currency__input {
  /* Los números se leen igual en una página RTL */
  direction: ltr;
}

.tsl-currency__symbol,
.tsl-currency__code {
  display: inline-flex;
  align-items: center;
  color: var(--tsl-fg-muted);
  white-space: nowrap;
}

.tsl-currency__symbol {
  padding-inline: 12px 0;
}

tsl-currency[data-suffix] .tsl-currency__symbol {
  padding-inline: 0 12px;
}

.tsl-currency__code {
  padding-inline: 10px;
  border-inline-start: 1px solid var(--tsl-border);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---- Teléfono ---- */
.tsl-phone__country {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 10px 26px;
  border-inline-end: 1px solid var(--tsl-border);
  color: var(--tsl-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tsl-phone__country::after {
  content: "";
  position: absolute;
  inset-inline-end: 11px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

/* El borde lógico ya cambia de lado en RTL: el giro se invierte para que siga apuntando abajo */
.tsl-phone__country:dir(rtl)::after {
  transform: rotate(-45deg);
}

.tsl-phone__country:hover {
  color: var(--tsl-fg);
}

/* El <select> real cubre el distintivo: se ve «MX +52», se usa el selector nativo */
.tsl-phone__select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.tsl-phone__select:focus-visible + *,
.tsl-phone__country:has(.tsl-phone__select:focus-visible) {
  color: var(--tsl-fg);
}

.tsl-phone__input {
  direction: ltr;
}

.tsl-phone__input:dir(rtl) {
  text-align: end;
}

/* ---- Subida de archivos ---- */
tsl-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tsl-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 22px 16px;
  border: 1.5px dashed var(--tsl-border-strong);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
  color: var(--tsl-fg);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.tsl-upload__drop:hover {
  border-color: var(--tsl-fg-muted);
  background: var(--tsl-surface-hover);
}

.tsl-upload__drop:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-upload__drop:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

tsl-upload[data-dragging] .tsl-upload__drop {
  border-color: var(--tsl-accent);
  background: color-mix(in srgb, var(--tsl-accent) 8%, var(--tsl-surface));
}

.tsl-upload__icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg-muted);
  font-size: 15px;
}

.tsl-upload__title {
  font-size: 13px;
  font-weight: 600;
}

.tsl-upload__hint {
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
}

.tsl-upload__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsl-upload__list[hidden] {
  display: none;
}

.tsl-upload__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius);
  background: var(--tsl-surface);
  font-size: 13px;
}

.tsl-upload__item[data-status="error"] {
  border-color: color-mix(in srgb, var(--tsl-danger) 55%, var(--tsl-border));
}

.tsl-upload__media {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tsl-radius-sm);
  background: var(--tsl-surface-strong);
  overflow: hidden;
  font-size: 16px;
}

.tsl-upload__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsl-upload__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tsl-upload__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.tsl-upload__meta {
  font-size: 11.5px;
  color: var(--tsl-fg-muted);
  font-variant-numeric: tabular-nums;
}

.tsl-upload__item[data-status="error"] .tsl-upload__meta {
  color: var(--tsl-danger);
}

.tsl-upload__item[data-status="done"] .tsl-upload__meta::before {
  content: "";
  --_icon: var(--tsl-svg-check);
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  vertical-align: -0.125em;
  -webkit-mask: var(--_icon) center / contain no-repeat;
  mask: var(--_icon) center / contain no-repeat;
  margin-inline-end: 4px;
  color: var(--tsl-success);
}

.tsl-upload__progress {
  height: 4px;
  margin-top: 2px;
}

.tsl-upload__progress[hidden] {
  display: none;
}

.tsl-upload__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ---- Editor de texto enriquecido ---- */
tsl-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tsl-border);
  border-radius: var(--tsl-radius-sm);
  background: var(--tsl-bg);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

tsl-editor:hover {
  border-color: var(--tsl-border-strong);
}

tsl-editor:has(.tsl-editor__content:focus-visible),
tsl-editor:has(.tsl-editor__content:focus) {
  box-shadow: var(--tsl-ring);
}

tsl-editor[aria-invalid="true"] {
  border-color: var(--tsl-danger);
}

.tsl-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-bottom: 1px solid var(--tsl-border);
}

.tsl-editor__tool {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--tsl-radius-xs);
  background: transparent;
  color: var(--tsl-fg-muted);
  cursor: pointer;
}

.tsl-editor__tool svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tsl-editor__tool:hover {
  background: var(--tsl-surface-hover);
  color: var(--tsl-fg);
}

.tsl-editor__tool:focus-visible {
  outline: none;
  box-shadow: var(--tsl-ring);
}

.tsl-editor__tool[aria-pressed="true"] {
  background: var(--tsl-surface-strong);
  color: var(--tsl-fg);
}

.tsl-editor__tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tsl-editor__sep {
  width: 1px;
  height: 18px;
  margin-inline: 4px;
  background: var(--tsl-border);
}

.tsl-editor__linkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-bottom: 1px solid var(--tsl-border);
  background: var(--tsl-surface);
}

.tsl-editor__linkbar[hidden] {
  display: none;
}

.tsl-editor__linkbar .tsl-input {
  flex: 1 1 200px;
  height: 30px;
}

.tsl-editor__content {
  position: relative;
  min-height: 140px;
  max-height: 420px;
  padding: 10px 14px;
  overflow-y: auto;
  color: var(--tsl-fg);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.tsl-editor__content:focus {
  outline: none;
}

.tsl-editor__content[data-empty]::before {
  content: attr(data-placeholder);
  position: absolute;
  inset-inline: 14px;
  color: var(--tsl-fg-muted);
  pointer-events: none;
}

.tsl-editor__content > :first-child {
  margin-top: 0;
}

.tsl-editor__content > :last-child {
  margin-bottom: 0;
}

.tsl-editor__content p,
.tsl-editor__content ul,
.tsl-editor__content ol,
.tsl-editor__content blockquote,
.tsl-editor__content pre {
  margin: 0 0 0.7em;
}

.tsl-editor__content h2 {
  margin: 0.8em 0 0.4em;
  font-family: var(--tsl-font-heading);
  font-size: 1.3em;
  line-height: 1.25;
}

.tsl-editor__content h3 {
  margin: 0.8em 0 0.4em;
  font-family: var(--tsl-font-heading);
  font-size: 1.1em;
  line-height: 1.3;
}

.tsl-editor__content ul,
.tsl-editor__content ol {
  padding-inline-start: 1.4em;
}

.tsl-editor__content blockquote {
  padding-inline-start: 12px;
  border-inline-start: 3px solid var(--tsl-border-strong);
  color: var(--tsl-fg-muted);
}

.tsl-editor__content code {
  padding: 0.1em 0.35em;
  border-radius: var(--tsl-radius-xs);
  background: var(--tsl-surface-strong);
  font-family: var(--tsl-font-mono);
  font-size: 0.88em;
}

.tsl-editor__content a {
  color: color-mix(in srgb, var(--tsl-accent) 70%, var(--tsl-fg));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tsl-editor__content[contenteditable="false"] {
  cursor: default;
}

tsl-editor[disabled] .tsl-editor__content {
  opacity: 0.6;
}

.tsl-editor__count {
  unicode-bidi: plaintext;
  padding: 4px 10px 6px;
  text-align: end;
  font-size: 11px;
  color: var(--tsl-fg-muted);
  font-variant-numeric: tabular-nums;
}

.tsl-editor__count[hidden] {
  display: none;
}

.tsl-editor__count[data-over] {
  color: var(--tsl-danger);
}
}

@layer tesela.utilities {
/* ----------------------------------------------------------------------------
   22. Utilidades de diseño
   ---------------------------------------------------------------------------- */
.tsl-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 12px);
}

.tsl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, 8px);
}

.tsl-grid {
  display: grid;
  /* min(…, 100%): la columna mínima nunca supera el ancho del contenedor (evita desbordes en móvil) */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 200px), 100%), 1fr));
  gap: var(--gap, 12px);
}

.tsl-spacer {
  flex: 1;
}
}

@layer tesela.base {
/* ----------------------------------------------------------------------------
   23. Keyframes y preferencias de movimiento
   ---------------------------------------------------------------------------- */
@keyframes tsl-spin {
  to { transform: rotate(360deg); }
}

@keyframes tsl-pulse {
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes tsl-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes tsl-indeterminate {
  0% { background-position: -40% 0, 0 0; }
  100% { background-position: 140% 0, 0 0; }
}

@keyframes tsl-pop {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes tsl-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes tsl-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Movimiento reducido: !important a propósito, la preferencia de la persona gana a cualquier animación */
@media (prefers-reduced-motion: reduce) {
  [class^="tsl-"],
  [class*=" tsl-"],
  [class^="tsl-"]::before,
  [class*=" tsl-"]::before,
  [class^="tsl-"]::after,
  [class*=" tsl-"]::after,
  [data-tsl-tooltip]::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
}

@layer tesela.tokens {
/* Generado por scripts/build-tokens.js desde src/tokens/. No editar a mano. */

/* ----------------------------------------------------------------------------
   Presets de tema: <html data-preset="esmeralda"> (o cualquier contenedor)
   ---------------------------------------------------------------------------- */

/* Preset «Esmeralda»: Acento verde esmeralda. */
[data-preset="esmeralda"]:not([data-theme="light"]) {
  --tsl-accent: #10b981;
  --tsl-accent-fg: #04130d;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="esmeralda"][data-theme="light"] {
  --tsl-accent: #047857;
  --tsl-accent-fg: #ffffff;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="esmeralda"][data-theme="system"] {
    --tsl-accent: #047857;
    --tsl-accent-fg: #ffffff;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Ámbar»: Acento ámbar cálido. */
[data-preset="ambar"]:not([data-theme="light"]) {
  --tsl-accent: #f59e0b;
  --tsl-accent-fg: #1a1103;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="ambar"][data-theme="light"] {
  --tsl-accent: #b45309;
  --tsl-accent-fg: #ffffff;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="ambar"][data-theme="system"] {
    --tsl-accent: #b45309;
    --tsl-accent-fg: #ffffff;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Cielo»: Acento azul cielo. */
[data-preset="cielo"]:not([data-theme="light"]) {
  --tsl-accent: #0ea5e9;
  --tsl-accent-fg: #031a28;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="cielo"][data-theme="light"] {
  --tsl-accent: #0369a1;
  --tsl-accent-fg: #ffffff;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="cielo"][data-theme="system"] {
    --tsl-accent: #0369a1;
    --tsl-accent-fg: #ffffff;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Rosa»: Acento rosa. */
[data-preset="rosa"]:not([data-theme="light"]) {
  --tsl-accent: #f472b6;
  --tsl-accent-fg: #2b0617;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="rosa"][data-theme="light"] {
  --tsl-accent: #be185d;
  --tsl-accent-fg: #ffffff;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="rosa"][data-theme="system"] {
    --tsl-accent: #be185d;
    --tsl-accent-fg: #ffffff;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Violeta»: Acento violeta. */
[data-preset="violeta"]:not([data-theme="light"]) {
  --tsl-accent: #a78bfa;
  --tsl-accent-fg: #1b1040;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="violeta"][data-theme="light"] {
  --tsl-accent: #6d28d9;
  --tsl-accent-fg: #ffffff;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="violeta"][data-theme="system"] {
    --tsl-accent: #6d28d9;
    --tsl-accent-fg: #ffffff;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Medianoche»: Azul profundo de noche; en claro, un azul hielo. */
[data-preset="medianoche"]:not([data-theme="light"]) {
  --tsl-bg: #0b1020;
  --tsl-bg-elevated: #121a30;
  --tsl-bg-glass: rgba(11, 16, 32, 0.84);
  --tsl-surface: rgba(148, 163, 255, 0.05);
  --tsl-surface-hover: rgba(148, 163, 255, 0.085);
  --tsl-surface-strong: rgba(148, 163, 255, 0.13);
  --tsl-fg: #e8edff;
  --tsl-fg-muted: #9aa8cc;
  --tsl-fg-subtle: #7482aa;
  --tsl-border: rgba(148, 163, 255, 0.14);
  --tsl-border-strong: rgba(148, 163, 255, 0.32);
  --tsl-backdrop: rgba(3, 6, 16, 0.66);
  --tsl-accent: #7c9cff;
  --tsl-accent-fg: #07102a;
  --tsl-shadow: 0 1px 2px rgba(2, 5, 18, 0.6), 0 10px 26px -12px rgba(2, 5, 18, 0.8);
  --tsl-shadow-lg: 0 4px 12px rgba(2, 5, 18, 0.65), 0 20px 38px -12px rgba(2, 5, 18, 0.9);
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="medianoche"][data-theme="light"] {
  --tsl-bg: #f3f6fd;
  --tsl-bg-elevated: #ffffff;
  --tsl-bg-glass: rgba(243, 246, 253, 0.86);
  --tsl-surface: rgba(15, 27, 61, 0.03);
  --tsl-surface-hover: rgba(15, 27, 61, 0.055);
  --tsl-surface-strong: rgba(15, 27, 61, 0.085);
  --tsl-fg: #0f1b3d;
  --tsl-fg-muted: #4a5b86;
  --tsl-fg-subtle: #7482aa;
  --tsl-border: rgba(15, 27, 61, 0.12);
  --tsl-border-strong: rgba(15, 27, 61, 0.3);
  --tsl-backdrop: rgba(15, 27, 61, 0.3);
  --tsl-accent: #2f54eb;
  --tsl-accent-fg: #ffffff;
  --tsl-success: #047052;
  --tsl-warning: #9f4908;
  --tsl-danger: #bd123c;
  --tsl-info: #03679f;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="medianoche"][data-theme="system"] {
    --tsl-bg: #f3f6fd;
    --tsl-bg-elevated: #ffffff;
    --tsl-bg-glass: rgba(243, 246, 253, 0.86);
    --tsl-surface: rgba(15, 27, 61, 0.03);
    --tsl-surface-hover: rgba(15, 27, 61, 0.055);
    --tsl-surface-strong: rgba(15, 27, 61, 0.085);
    --tsl-fg: #0f1b3d;
    --tsl-fg-muted: #4a5b86;
    --tsl-fg-subtle: #7482aa;
    --tsl-border: rgba(15, 27, 61, 0.12);
    --tsl-border-strong: rgba(15, 27, 61, 0.3);
    --tsl-backdrop: rgba(15, 27, 61, 0.3);
    --tsl-accent: #2f54eb;
    --tsl-accent-fg: #ffffff;
    --tsl-success: #047052;
    --tsl-warning: #9f4908;
    --tsl-danger: #bd123c;
    --tsl-info: #03679f;
    --tsl-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px -12px rgba(0, 0, 0, 0.14);
    --tsl-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.08), 0 18px 34px -12px rgba(0, 0, 0, 0.22);
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Papel»: Tonos de papel y tinta, con títulos en serif y esquinas casi rectas. */
[data-preset="papel"] {
  --tsl-radius: 4px;
  --tsl-radius-sm: 3px;
  --tsl-radius-xs: 2px;
  --tsl-font-heading: Georgia, "Times New Roman", serif;
}
[data-preset="papel"]:not([data-theme="light"]) {
  --tsl-bg: #1b1713;
  --tsl-bg-elevated: #241f19;
  --tsl-bg-glass: rgba(27, 23, 19, 0.86);
  --tsl-surface: rgba(255, 244, 224, 0.035);
  --tsl-surface-hover: rgba(255, 244, 224, 0.06);
  --tsl-surface-strong: rgba(255, 244, 224, 0.09);
  --tsl-fg: #f1e9d8;
  --tsl-fg-muted: #a89c88;
  --tsl-fg-subtle: #7d7261;
  --tsl-border: rgba(255, 244, 224, 0.11);
  --tsl-border-strong: rgba(255, 244, 224, 0.26);
  --tsl-backdrop: rgba(10, 8, 5, 0.62);
  --tsl-accent: #e0a458;
  --tsl-accent-fg: #1d1306;
  --tsl-danger: #f6546f;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="papel"][data-theme="light"] {
  --tsl-bg: #f5efe4;
  --tsl-bg-elevated: #fffaf0;
  --tsl-bg-glass: rgba(245, 239, 228, 0.88);
  --tsl-surface: rgba(43, 36, 27, 0.03);
  --tsl-surface-hover: rgba(43, 36, 27, 0.055);
  --tsl-surface-strong: rgba(43, 36, 27, 0.085);
  --tsl-fg: #2b241b;
  --tsl-fg-muted: #665a49;
  --tsl-fg-subtle: #85796a;
  --tsl-border: rgba(43, 36, 27, 0.14);
  --tsl-border-strong: rgba(43, 36, 27, 0.34);
  --tsl-backdrop: rgba(43, 36, 27, 0.3);
  --tsl-accent: #a4470a;
  --tsl-accent-fg: #ffffff;
  --tsl-success: #046c4f;
  --tsl-warning: #9a4708;
  --tsl-danger: #b7113a;
  --tsl-info: #036399;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="papel"][data-theme="system"] {
    --tsl-bg: #f5efe4;
    --tsl-bg-elevated: #fffaf0;
    --tsl-bg-glass: rgba(245, 239, 228, 0.88);
    --tsl-surface: rgba(43, 36, 27, 0.03);
    --tsl-surface-hover: rgba(43, 36, 27, 0.055);
    --tsl-surface-strong: rgba(43, 36, 27, 0.085);
    --tsl-fg: #2b241b;
    --tsl-fg-muted: #665a49;
    --tsl-fg-subtle: #85796a;
    --tsl-border: rgba(43, 36, 27, 0.14);
    --tsl-border-strong: rgba(43, 36, 27, 0.34);
    --tsl-backdrop: rgba(43, 36, 27, 0.3);
    --tsl-accent: #a4470a;
    --tsl-accent-fg: #ffffff;
    --tsl-success: #046c4f;
    --tsl-warning: #9a4708;
    --tsl-danger: #b7113a;
    --tsl-info: #036399;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Alto contraste»: Máximo contraste (AAA) y bordes marcados, para baja visión y luz intensa. */
[data-preset="alto-contraste"]:not([data-theme="light"]) {
  --tsl-bg: #000000;
  --tsl-bg-elevated: #0a0a0a;
  --tsl-bg-glass: rgba(0, 0, 0, 0.92);
  --tsl-surface: rgba(255, 255, 255, 0.08);
  --tsl-surface-hover: rgba(255, 255, 255, 0.16);
  --tsl-surface-strong: rgba(255, 255, 255, 0.24);
  --tsl-fg: #ffffff;
  --tsl-fg-muted: #d4d4d4;
  --tsl-fg-subtle: #a8a8a8;
  --tsl-border: rgba(255, 255, 255, 0.55);
  --tsl-border-strong: #ffffff;
  --tsl-backdrop: rgba(0, 0, 0, 0.8);
  --tsl-accent: #ffd60a;
  --tsl-accent-fg: #000000;
  --tsl-success: #4ade80;
  --tsl-warning: #fde047;
  --tsl-danger: #ff7b7b;
  --tsl-info: #7dd3fc;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="alto-contraste"][data-theme="light"] {
  --tsl-bg: #ffffff;
  --tsl-bg-elevated: #ffffff;
  --tsl-bg-glass: rgba(255, 255, 255, 0.94);
  --tsl-surface: rgba(0, 0, 0, 0.06);
  --tsl-surface-hover: rgba(0, 0, 0, 0.12);
  --tsl-surface-strong: rgba(0, 0, 0, 0.2);
  --tsl-fg: #000000;
  --tsl-fg-muted: #383838;
  --tsl-fg-subtle: #595959;
  --tsl-border: rgba(0, 0, 0, 0.6);
  --tsl-border-strong: #000000;
  --tsl-backdrop: rgba(0, 0, 0, 0.6);
  --tsl-accent: #0000cc;
  --tsl-accent-fg: #ffffff;
  --tsl-success: #005500;
  --tsl-warning: #694000;
  --tsl-danger: #91001a;
  --tsl-info: #00478f;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="alto-contraste"][data-theme="system"] {
    --tsl-bg: #ffffff;
    --tsl-bg-elevated: #ffffff;
    --tsl-bg-glass: rgba(255, 255, 255, 0.94);
    --tsl-surface: rgba(0, 0, 0, 0.06);
    --tsl-surface-hover: rgba(0, 0, 0, 0.12);
    --tsl-surface-strong: rgba(0, 0, 0, 0.2);
    --tsl-fg: #000000;
    --tsl-fg-muted: #383838;
    --tsl-fg-subtle: #595959;
    --tsl-border: rgba(0, 0, 0, 0.6);
    --tsl-border-strong: #000000;
    --tsl-backdrop: rgba(0, 0, 0, 0.6);
    --tsl-accent: #0000cc;
    --tsl-accent-fg: #ffffff;
    --tsl-success: #005500;
    --tsl-warning: #694000;
    --tsl-danger: #91001a;
    --tsl-info: #00478f;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Brutalista»: Esquinas rectas, bordes duros y sombras sin desenfoque. */
[data-preset="brutalista"] {
  --tsl-radius: 0px;
  --tsl-radius-sm: 0px;
  --tsl-radius-xs: 0px;
  --tsl-shadow: 4px 4px 0 var(--tsl-border-strong);
  --tsl-shadow-lg: 6px 6px 0 var(--tsl-border-strong);
  --tsl-font-heading: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}
[data-preset="brutalista"]:not([data-theme="light"]) {
  --tsl-border: rgba(255, 255, 255, 0.4);
  --tsl-border-strong: #ffffff;
  --tsl-accent: #ff6b3d;
  --tsl-accent-fg: #150500;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-shadow: 4px 4px 0 var(--tsl-border-strong);
  --tsl-shadow-lg: 6px 6px 0 var(--tsl-border-strong);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="brutalista"][data-theme="light"] {
  --tsl-border: rgba(0, 0, 0, 0.55);
  --tsl-border-strong: #000000;
  --tsl-accent: #c2410c;
  --tsl-accent-fg: #ffffff;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-shadow: 4px 4px 0 var(--tsl-border-strong);
  --tsl-shadow-lg: 6px 6px 0 var(--tsl-border-strong);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="brutalista"][data-theme="system"] {
    --tsl-border: rgba(0, 0, 0, 0.55);
    --tsl-border-strong: #000000;
    --tsl-accent: #c2410c;
    --tsl-accent-fg: #ffffff;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-shadow: 4px 4px 0 var(--tsl-border-strong);
    --tsl-shadow-lg: 6px 6px 0 var(--tsl-border-strong);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}


/* Preset «Suave»: Esquinas muy redondeadas y sombras difusas. */
[data-preset="suave"] {
  --tsl-radius: 16px;
  --tsl-radius-sm: 12px;
  --tsl-radius-xs: 8px;
}
[data-preset="suave"]:not([data-theme="light"]) {
  --tsl-accent: #8b8dfb;
  --tsl-accent-fg: #0d0e33;
  --tsl-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 32px -14px rgba(0, 0, 0, 0.55);
  --tsl-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.35), 0 26px 50px -16px rgba(0, 0, 0, 0.65);
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
[data-preset="suave"][data-theme="light"] {
  --tsl-bg: #f4f4f9;
  --tsl-accent: #5b5bd6;
  --tsl-accent-fg: #ffffff;
  --tsl-shadow: 0 2px 6px rgba(30, 30, 80, 0.06), 0 14px 32px -14px rgba(30, 30, 80, 0.18);
  --tsl-shadow-lg: 0 6px 16px rgba(30, 30, 80, 0.1), 0 26px 50px -16px rgba(30, 30, 80, 0.28);
  --tsl-success: #046f51;
  --tsl-warning: #9e4908;
  --tsl-danger: #bc123b;
  --tsl-info: #03669e;
  --tsl-chart-1: var(--tsl-accent);
  --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
}
@media (prefers-color-scheme: light) {
  [data-preset="suave"][data-theme="system"] {
    --tsl-bg: #f4f4f9;
    --tsl-accent: #5b5bd6;
    --tsl-accent-fg: #ffffff;
    --tsl-shadow: 0 2px 6px rgba(30, 30, 80, 0.06), 0 14px 32px -14px rgba(30, 30, 80, 0.18);
    --tsl-shadow-lg: 0 6px 16px rgba(30, 30, 80, 0.1), 0 26px 50px -16px rgba(30, 30, 80, 0.28);
    --tsl-success: #046f51;
    --tsl-warning: #9e4908;
    --tsl-danger: #bc123b;
    --tsl-info: #03669e;
    --tsl-chart-1: var(--tsl-accent);
    --tsl-ring: 0 0 0 2px var(--tsl-bg), 0 0 0 4px color-mix(in srgb, var(--tsl-accent) 75%, transparent);
  }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   25. Punteros táctiles: objetivos de pulsación cómodos (≥ 36–40 px)
   Solo en dispositivos de puntero «grueso»; con ratón nada cambia.
   ---------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .tsl-btn {
    --_h: 40px;
  }

  .tsl-btn--sm {
    --_h: 36px;
  }

  .tsl-btn--lg {
    --_h: 46px;
  }

  .tsl-input,
  .tsl-select,
  .tsl-trigger,
  .tsl-number {
    min-height: 40px;
  }

  tsl-currency,
  tsl-phone {
    height: 40px;
  }

  .tsl-editor__tool {
    width: 36px;
    height: 36px;
  }

  .tsl-trigger__input {
    height: 38px;
  }

  .tsl-number {
    height: 40px;
  }

  .tsl-number > button {
    width: 40px;
  }

  .tsl-chip {
    min-height: 34px;
    min-width: 34px;
    justify-content: center;
  }

  .tsl-choice {
    min-height: 36px;
  }

  .tsl-badge[role="button"],
  button.tsl-badge,
  a.tsl-badge {
    min-height: 28px;
    min-width: 28px;
    justify-content: center;
  }

  .tsl-tabs__tab {
    min-height: 40px;
  }

  .tsl-segmented__item {
    min-height: 34px;
    padding-inline: 14px;
  }

  .tsl-toggle-group__item {
    min-height: 40px;
    min-width: 40px;
  }

  .tsl-menu__item,
  .tsl-command__item,
  .tsl-select__option,
  .tsl-nav__item {
    min-height: 40px;
  }

  .tsl-questionnaire__choices .tsl-choice,
  .tsl-trace__line,
  .tsl-reasoning__trigger,
  .tsl-sources__trigger,
  .tsl-source {
    min-height: 44px;
  }

  .tsl-suggestion {
    min-height: 40px;
  }

  .tsl-branch__selector .tsl-btn--icon {
    width: 36px;
    height: 36px;
  }

  .tsl-prompt-input__submit {
    width: 40px;
    height: 40px;
  }

  .tsl-radio {
    min-height: 32px;
    align-items: center;
  }

  .tsl-sidebar__item {
    min-height: 44px;
  }

  .tsl-pagination > * {
    min-width: 38px;
    height: 38px;
  }

  .tsl-accordion summary {
    min-height: 44px;
  }

  .tsl-dialog__close,
  .tsl-toast__close,
  .tsl-chip__remove,
  .tsl-trigger__clear {
    min-width: 32px;
    min-height: 32px;
  }

  .tsl-trigger__clear {
    inset-inline-end: 26px;
  }

  .tsl-chip__remove {
    width: 24px;
    height: 24px;
  }

  .tsl-cal__day {
    height: 38px;
  }

  .tsl-cal__grid {
    grid-template-columns: repeat(7, minmax(0, 38px));
  }

  /* Controles que se arrastran: zona de agarre ampliada sin cambiar su aspecto */
  .tsl-slider__thumb::before,
  .tsl-resizable__handle::before {
    content: "";
    position: absolute;
    inset: -14px;
  }

  tsl-resizable[data-direction="horizontal"] > .tsl-resizable__handle::before {
    inset-inline-start: -14px;
    inset-inline-end: -14px;
  }

  tsl-resizable[data-direction="vertical"] > .tsl-resizable__handle::before {
    top: -14px;
    bottom: -14px;
  }

  .tsl-time__opt {
    height: 38px;
  }

  .tsl-dt__sort {
    min-height: 36px;
  }

  .tsl-tree__row {
    min-height: 40px;
  }

  .tsl-sortable__handle {
    width: 36px;
    height: 36px;
  }

  .tsl-color__chip {
    width: 28px;
    height: 28px;
  }

  /* Casillas, interruptores y rangos: zona de pulsación de al menos 24 px aunque no estén dentro de una etiqueta */
  .tsl-check {
    width: 24px;
    height: 24px;
  }

  .tsl-check::before {
    width: 12px;
    height: 12px;
  }

  .tsl-check[type="radio"]::before {
    width: 8px;
    height: 8px;
  }

  .tsl-switch {
    width: 46px;
    height: 26px;
  }

  .tsl-switch::before {
    top: 3px;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
  }

  .tsl-switch:checked::before {
    transform: translateX(20px);
  }

  .tsl-range {
    height: 28px;
  }

  a.tsl-hint,
  .tsl-hint > a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
  }

  summary {
    min-height: 32px;
  }
}
}

@layer tesela.components {
/* ----------------------------------------------------------------------------
   26. Adaptación a pantallas pequeñas: texto largo, segmentados y filas de lista
   ---------------------------------------------------------------------------- */

/* URLs, correos o identificadores largos se parten en vez de desbordar su caja */
.tsl-list__title,
.tsl-list__desc,
.tsl-card__title,
.tsl-card__desc,
.tsl-alert__title,
.tsl-alert__desc,
.tsl-toast__title,
.tsl-toast__desc,
.tsl-empty__title,
.tsl-empty__desc,
.tsl-dialog__title,
.tsl-dialog__desc,
.tsl-stat__value {
  overflow-wrap: anywhere;
}

/* Un control segmentado con muchas opciones se desplaza en horizontal en vez de salirse de la pantalla */
.tsl-segmented {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tsl-segmented::-webkit-scrollbar {
  display: none;
}

.tsl-segmented__item {
  flex: none;
}

/* En una fila de lista, el texto que se estira nunca se queda sin sitio: si no cabe junto al resto,
   el resto pasa a la línea siguiente (en vez de aplastar el texto a unos pocos píxeles) */
.tsl-list > li > .tsl-list__grow,
.tsl-list > li > [style*="flex:1"],
.tsl-list > li > code {
  min-width: min(100%, 14ch);
  overflow-wrap: anywhere;
}

/* Las barras de herramientas (.tsl-row) dejan que sus botones largos se partan solo como último recurso */
.tsl-row > .tsl-btn {
  max-width: 100%;
}

/* En un bloque de código estrecho el botón de copiar no flota sobre el texto: pasa a una línea propia */
@media (max-width: 599px) {
  .tsl-code:has(> [data-tsl-copy]) {
    padding-inline-end: 16px;
  }

  .tsl-code > [data-tsl-copy] {
    position: static;
    display: flex;
    margin: 0 0 10px auto;
  }
}
}

@layer tesela.utilities {
/* ----------------------------------------------------------------------------
   27. Alto contraste (forced-colors: modo de contraste de Windows y similares)
       El sistema sustituye los colores por su paleta y quita las sombras. Tesela marca el foco con
       box-shadow y pinta casillas, interruptores y estados con fondos: sin estas reglas, el foco no
       se ve y una casilla marcada es igual que una vacía. Se usan solo colores del sistema.
       Va en la capa de utilidades para ganar a cualquier regla de componente sin !important.
   ---------------------------------------------------------------------------- */
@media (forced-colors: active) {
  /* Foco: la sombra desaparece, así que se vuelve a un contorno real */
  :is([class*="tsl-"], [class*="tsl-"] *, tsl-rating, tsl-chart, tsl-dropzone, tsl-tree *, tsl-virtual-list *):focus-visible,
  .tsl-trigger--input:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  /* Botones: siempre con borde, y las variantes con relleno se distinguen por el color del sistema */
  .tsl-btn {
    border-color: ButtonText;
  }

  .tsl-btn--primary,
  .tsl-btn--accent,
  .tsl-btn--danger {
    background: ButtonText;
    color: ButtonFace;
    forced-color-adjust: none;
  }

  .tsl-btn:disabled,
  .tsl-btn[aria-disabled="true"] {
    border-color: GrayText;
    background: ButtonFace;
    color: GrayText;
  }

  .tsl-btn[aria-busy="true"]::after {
    border-color: ButtonText transparent;
  }

  :is(.tsl-btn--primary, .tsl-btn--accent, .tsl-btn--danger)[aria-busy="true"]::after {
    border-color: ButtonFace transparent;
  }

  /* Campos */
  .tsl-input,
  .tsl-textarea,
  .tsl-select,
  .tsl-trigger,
  tsl-tags,
  tsl-currency,
  tsl-phone,
  .tsl-editor__content {
    border-color: FieldText;
  }

  :is(.tsl-input, .tsl-textarea, .tsl-select, .tsl-trigger):disabled {
    border-color: GrayText;
    color: GrayText;
  }

  /* Casillas y radios: el fondo de «marcada» se pierde, así que se pinta con Highlight */
  .tsl-check,
  .tsl-radio__mark {
    border-color: ButtonText;
    background: Canvas;
    forced-color-adjust: none;
  }

  .tsl-check::before,
  .tsl-radio__mark::before {
    background: HighlightText;
  }

  .tsl-check:checked,
  .tsl-check[type="checkbox"]:indeterminate,
  .tsl-radio[aria-checked="true"] .tsl-radio__mark {
    border-color: Highlight;
    background: Highlight;
  }

  .tsl-check:disabled,
  .tsl-radio[disabled] .tsl-radio__mark,
  tsl-radio-group[aria-disabled] .tsl-radio__mark {
    border-color: GrayText;
  }

  .tsl-check:disabled:checked {
    background: GrayText;
  }

  /* Interruptor: pista con borde y botón que cambia de color al activarse */
  .tsl-switch {
    border: 1px solid ButtonText;
    background: Canvas;
    forced-color-adjust: none;
  }

  .tsl-switch::before {
    top: 1px;
    background: ButtonText;
    box-shadow: none;
  }

  .tsl-switch:checked {
    border-color: Highlight;
    background: Highlight;
  }

  .tsl-switch:checked::before {
    background: HighlightText;
  }

  .tsl-switch:disabled {
    border-color: GrayText;
  }

  .tsl-switch:disabled::before {
    background: GrayText;
  }

  /* Slider y rango */
  .tsl-slider__track {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .tsl-slider__fill {
    background: Highlight;
  }

  .tsl-slider__thumb {
    border-color: ButtonText;
    background: ButtonFace;
    forced-color-adjust: none;
  }

  /* Opciones elegidas, pestañas y estados de pulsación: el sistema iguala los fondos, así que la
     selección se marca con Highlight (como hacen los controles nativos) */
  .tsl-tabs__tab[aria-selected="true"],
  .tsl-segmented__item[aria-checked="true"],
  .tsl-toggle-group__item[aria-pressed="true"],
  .tsl-chip[aria-pressed="true"],
  .tsl-select__option[aria-selected="true"],
  .tsl-command__item[aria-selected="true"],
  .tsl-time__opt[aria-selected="true"],
  .tsl-cal__day[aria-pressed="true"],
  .tsl-editor__tool[aria-pressed="true"],
  li[aria-selected="true"] > .tsl-tree__row {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}
}