/*
 * CSS propio del MFE. Se mantiene MÍNIMO a propósito:
 *
 * - La UI se compone con @wekall/ds (ningún componente acepta className/style); los tokens
 *   `--wkds-*` están disponibles para markup de dominio si hiciera falta.
 * - Esta hoja SÍ viaja en el remoteEntry (`dynamicLoadingCss`) y se inyecta en el documento del
 *   portal. Por eso se quitó Tailwind: su preflight (`*, ::before, ::after`, `h1..h6`, `button`, `img`)
 *   es global y pisaba estilos del shell y de los demás MFEs.
 */

/* Explorador de citas en la LateralWindow: crece con su contenido y deja el scroll al panel. */
.appt-explorer {
  display: flex;
  flex-direction: column;
  gap: var(--wkds-space-sm);
  min-width: 0;
  contain: inline-size;
}

.appt-explorer__col {
  display: flex;
  flex-direction: column;
  gap: var(--wkds-space-sm);
  min-width: 0;
}

/* En paneles laterales, mantener la grilla de horarios debajo del calendario. */
.appt-slot-picker > div {
  grid-template-columns: minmax(0, 1fr);
}

.appt-slot-picker > div > div:first-child {
  justify-self: start;
}

/* Los filtros no se encogen bajo la lista: con muchas opciones scrollean dentro de su tope. */
.appt-explorer__filters {
  flex: 0 0 auto;
  max-height: 60%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--wkds-scrollbar-thumb) var(--wkds-scrollbar-track);
}

.appt-explorer__detail {
  margin: var(--wkds-space-md) var(--wkds-space-sm);
  padding: var(--wkds-space-xs) 0 var(--wkds-space-md) var(--wkds-space-sm);
  border-inline-start: 1px solid var(--wkds-card-primary-border);
}

/*
 * Celda de una grilla de `RecordCard` con todas las cards de la fila al mismo alto. La fila de la
 * grilla ya mide lo que la card más alta; la celda se estira a ese alto y lo pasa a la card y a su
 * superficie. PROVISIONAL: `RecordCard` no expone `fill` (hueco reportado al DS). Se apoya solo en la
 * estructura raíz → superficie, nunca en clases del DS; cuando exista `fill`, se borra.
 */
.appt-equal-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.appt-equal-cell > *,
.appt-equal-cell > * > * {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

[class*='wk-sch__event'][title*='appointment-loading-skeleton'],
[class*='wk-sch__chip'][title*='appointment-loading-skeleton'] {
  overflow: hidden;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

[class*='wk-sch__chip'][title*='appointment-loading-skeleton'] {
  position: relative;
}

[class*='wk-sch__event'][title*='appointment-loading-skeleton'] > *,
[class*='wk-sch__chip'][title*='appointment-loading-skeleton'] > * {
  visibility: hidden !important;
}

[class*='wk-sch__event'][title*='appointment-loading-skeleton']::before,
[class*='wk-sch__chip'][title*='appointment-loading-skeleton']::before {
  position: absolute;
  inset: 4px;
  border-radius: var(--wkds-control-radius-sm);
  background: var(--wkds-surface-muted);
  background-image: linear-gradient(90deg, transparent 0%, var(--wkds-surface-subtle) 50%, transparent 100%);
  background-size: 200% 100%;
  content: '';
  visibility: visible;
  animation: appt-calendar-skeleton-shimmer 1.3s ease-in-out infinite;
}

@keyframes appt-calendar-skeleton-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}