/* Generated from the Perú Lector design system. Do not edit by hand.
 * foundations/typography.css sha256:e13aed202919
 * components/content/OverflowMarquee/overflow-marquee.css sha256:f5b6c1fa1a6e
 * components/actions/action.css sha256:d785cd468507
 * components/actions/ButtonGroup/button-group.css sha256:e212a990a9e6
 * components/actions/TextLink/text-link.css sha256:5a5134707459
 * components/content/Card/card.css sha256:33abe3017383
 * icons/icon-motion.css sha256:be296d733cac
 * components/feedback/feedback.css sha256:559182e27b9c
 * components/forms/form-controls.css sha256:767c24cab8a4
 * components/forms/patterns/generator-guided.css sha256:8e2a6a957010
 * components/navigation/navigation.css sha256:614ec4e011c9
 * components/navigation/Breadcrumbs/breadcrumbs.css sha256:1eab42784823
 * components/navigation/Pagination/pagination.css sha256:48139ace6eb0
 * components/tools/tools.css sha256:e811be8adcae
 * components/reading-plan/reading-plan.css sha256:e8e97bc86df4
 * components/settings/settings.css sha256:03bf4f7ae49d
 */
/* source: foundations/typography.css */
@font-face {
  font-family: "Circular XX";
  src: url("/fonts/CircularXX-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Circular XX";
  src: url("/fonts/CircularXX-Book.woff2") format("woff2");
  font-style: normal;
  font-weight: 450;
  font-display: swap;
}

@font-face {
  font-family: "Circular XX";
  src: url("/fonts/CircularXX-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Circular XX";
  src: url("/fonts/CircularXX-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

html {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* source: components/content/OverflowMarquee/overflow-marquee.css */
.pl-overflow-marquee {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.pl-overflow-marquee__track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
}

.pl-overflow-marquee__content,
.pl-overflow-marquee__copy {
  display: inline-block;
  white-space: nowrap;
}

.pl-overflow-marquee__copy { display: none; }
.pl-overflow-marquee__copy::before { content: attr(data-copy); }

@keyframes pl-overflow-marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--pl-overflow-marquee-gap, 20px) / 2)); }
}

.pl-overflow-marquee[data-overflow='true'] {
  --pl-overflow-marquee-gap: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}

.pl-overflow-marquee[data-overflow='true'][data-marquee-running='true'] .pl-overflow-marquee__track {
  gap: var(--pl-overflow-marquee-gap);
  animation: pl-overflow-marquee-slide 6s linear 500ms 1 both;
}

.pl-overflow-marquee[data-overflow='true'][data-marquee-running='true'] .pl-overflow-marquee__copy { display: inline-block; }

/* Patrón común de contexto para headers funcionales. El ancho no pertenece a
   una feature: Plan Lector y Progreso consumen los mismos tokens. */
.pl-header-context-slot {
  box-sizing: border-box;
  width: var(--pl-card-header-context-slot-width);
  min-width: 0;
  max-width: var(--pl-card-header-context-slot-width);
  flex: 0 0 var(--pl-card-header-context-slot-width);
  justify-content: center;
  margin-inline-start: auto;
  overflow: hidden;
  text-align: center;
}

.pl-header-context-slot > .pl-overflow-marquee { min-width: 0; }

.pl-functional-card-header > .pl-header-context-slot {
  grid-column: 3;
  align-self: start;
  justify-self: end;
}

@media (max-width: 620px) {
  .pl-header-context-slot {
    width: var(--pl-card-header-context-slot-width-mobile);
    max-width: var(--pl-card-header-context-slot-width-mobile);
    flex-basis: var(--pl-card-header-context-slot-width-mobile);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-overflow-marquee[data-overflow='true'] {
    text-overflow: ellipsis;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .pl-overflow-marquee[data-overflow='true'] .pl-overflow-marquee__track {
    display: block;
    min-width: 0;
    overflow: hidden;
    animation: none;
    text-overflow: ellipsis;
  }

  .pl-overflow-marquee[data-overflow='true'] .pl-overflow-marquee__content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pl-overflow-marquee[data-overflow='true'] .pl-overflow-marquee__copy { display: none; }
}

/* source: components/actions/action.css */
.pl-action {
  appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pl-button-gap);
  max-width: 100%;
  min-width: 0;
  border: var(--pl-button-border-width) solid transparent;
  border-radius: var(--pl-button-radius);
  font-family: var(--pl-button-font-family);
  font-weight: var(--pl-button-font-weight);
  line-height: var(--pl-button-line-height);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--pl-button-transition-duration) var(--pl-button-transition-easing),
    border-color var(--pl-button-transition-duration) var(--pl-button-transition-easing),
    color var(--pl-button-transition-duration) var(--pl-button-transition-easing),
    transform var(--pl-duration-fast) var(--pl-button-transition-easing);
}

/* Las acciones de tono normal heredan la identidad funcional declarada por
   la superficie de producto. Peligro, foco y deshabilitado conservan sus
   roles globales: el módulo no cambia su significado. */
[data-feature='home'] {
  --pl-feature-action-solid: var(--pl-color-blue-700);
  --pl-feature-action-solid-hover: var(--pl-color-blue-800);
  --pl-feature-action-solid-active: var(--pl-color-blue-900);
  --pl-feature-action-subtle: var(--pl-color-blue-100);
  --pl-feature-action-subtle-active: var(--pl-color-blue-200);
  --pl-feature-action-ink: var(--pl-color-blue-700);
  --pl-feature-action-ink-strong: var(--pl-color-blue-900);
}

[data-feature='texts'] {
  --pl-feature-action-solid: var(--pl-feature-texts-header-start);
  --pl-feature-action-solid-hover: var(--pl-feature-texts-header-end);
  --pl-feature-action-solid-active: var(--pl-feature-texts-header-end);
  --pl-feature-action-subtle: var(--pl-feature-texts-action-background);
  --pl-feature-action-subtle-active: var(--pl-feature-texts-action-background-hover);
  --pl-feature-action-ink: var(--pl-feature-texts-action-text);
  --pl-feature-action-ink-strong: var(--pl-feature-texts-action-text);
}

[data-feature='generator'] {
  --pl-feature-action-solid: var(--pl-feature-generator-header-start);
  --pl-feature-action-solid-hover: var(--pl-feature-generator-header-end);
  --pl-feature-action-solid-active: var(--pl-feature-generator-header-end);
  --pl-feature-action-subtle: var(--pl-feature-generator-action-background);
  --pl-feature-action-subtle-active: var(--pl-feature-generator-action-background-hover);
  --pl-feature-action-ink: var(--pl-feature-generator-action-text);
  --pl-feature-action-ink-strong: var(--pl-feature-generator-action-text);
}

[data-feature='reading-plan'] {
  --pl-feature-action-solid: var(--pl-feature-reading-plan-header-start);
  --pl-feature-action-solid-hover: var(--pl-feature-reading-plan-header-end);
  --pl-feature-action-solid-active: var(--pl-feature-reading-plan-action-text);
  --pl-feature-action-subtle: var(--pl-feature-reading-plan-action-background);
  --pl-feature-action-subtle-active: var(--pl-feature-reading-plan-action-background-hover);
  --pl-feature-action-ink: var(--pl-feature-reading-plan-action-text);
  --pl-feature-action-ink-strong: var(--pl-feature-reading-plan-action-text);
}

[data-feature='progress'] {
  --pl-feature-action-solid: var(--pl-color-green-700);
  --pl-feature-action-solid-hover: var(--pl-color-green-800);
  --pl-feature-action-solid-active: var(--pl-color-green-800);
  --pl-feature-action-subtle: var(--pl-color-green-100);
  --pl-feature-action-subtle-active: var(--pl-color-green-200);
  --pl-feature-action-ink: var(--pl-color-green-800);
  --pl-feature-action-ink-strong: var(--pl-color-green-800);
}

[data-feature='tools'] {
  --pl-feature-action-solid: var(--pl-feature-tools-action-solid);
  --pl-feature-action-solid-hover: var(--pl-feature-tools-action-solid-hover);
  --pl-feature-action-solid-active: var(--pl-feature-tools-action-solid-active);
  --pl-feature-action-subtle: var(--pl-feature-tools-action-background);
  --pl-feature-action-subtle-active: var(--pl-feature-tools-action-background-hover);
  --pl-feature-action-ink: var(--pl-feature-tools-action-text);
  --pl-feature-action-ink-strong: var(--pl-feature-tools-action-solid-active);
}

.pl-action--sm {
  min-height: var(--pl-button-height-sm);
  padding: 6px var(--pl-button-padding-inline-sm);
  font-size: var(--pl-button-font-size-sm);
}

.pl-action--md {
  min-height: var(--pl-button-height-md);
  padding: 9px var(--pl-button-padding-inline-md);
  font-size: var(--pl-button-font-size-md);
}

.pl-action--lg {
  min-height: var(--pl-button-height-lg);
  padding: 12px var(--pl-button-padding-inline-lg);
  font-size: var(--pl-button-font-size-lg);
}

/* Alinea una acción con campos y selectores dentro de una misma barra.
   El tamaño tipográfico sigue siendo `md`; solo comparte la altura del
   control de formulario para conservar una línea visual estable. */
.pl-action--field-height {
  min-height: var(--pl-field-height);
}

.pl-action--primary.pl-action--tone-default {
  border-color: var(--pl-feature-action-solid, var(--pl-action-primary-background-default));
  background: var(--pl-feature-action-solid, var(--pl-action-primary-background-default));
  color: var(--pl-action-primary-text);
}

.pl-action--secondary.pl-action--tone-default {
  border-color: transparent;
  background: var(--pl-feature-action-subtle, var(--pl-action-soft-background));
  color: var(--pl-feature-action-ink, var(--pl-action-soft-text));
}

.pl-action--tertiary.pl-action--tone-default {
  border-color: transparent;
  background: transparent;
  color: var(--pl-feature-action-ink, var(--pl-action-tertiary-text));
}

.pl-action--primary.pl-action--tone-danger {
  border-color: var(--pl-action-danger-background-default);
  background: var(--pl-action-danger-background-default);
  color: var(--pl-action-danger-text-on-solid);
}

.pl-action--secondary.pl-action--tone-danger {
  border-color: transparent;
  background: var(--pl-action-danger-background-subtle);
  color: var(--pl-action-danger-text-on-subtle);
}

.pl-action--tertiary.pl-action--tone-danger {
  border-color: transparent;
  background: transparent;
  color: var(--pl-action-danger-text-on-subtle);
}

@media (hover: hover) {
  .pl-action--primary.pl-action--tone-default:hover:not(:disabled) {
    border-color: var(--pl-feature-action-solid-hover, var(--pl-action-primary-background-hover));
    background: var(--pl-feature-action-solid-hover, var(--pl-action-primary-background-hover));
  }

  .pl-action--secondary.pl-action--tone-default:hover:not(:disabled) {
    border-color: transparent;
    background: var(--pl-feature-action-solid-hover, var(--pl-action-soft-hover-background));
    color: var(--pl-action-soft-hover-text);
  }

  .pl-action--tertiary.pl-action--tone-default:hover:not(:disabled) {
    background: var(--pl-feature-action-subtle, var(--pl-action-tertiary-background-hover));
    color: var(--pl-feature-action-ink-strong, var(--pl-color-blue-900));
  }

  .pl-action--primary.pl-action--tone-danger:hover:not(:disabled) {
    border-color: var(--pl-action-danger-background-hover);
    background: var(--pl-action-danger-background-hover);
  }

  .pl-action--secondary.pl-action--tone-danger:hover:not(:disabled) {
    border-color: transparent;
    background: var(--pl-action-danger-background-hover);
    color: var(--pl-action-danger-text-on-solid);
  }

  .pl-action--tertiary.pl-action--tone-danger:hover:not(:disabled) {
    background: var(--pl-action-danger-background-subtle);
    color: var(--pl-color-coral-900);
  }
}

.pl-action--primary.pl-action--tone-default:active:not(:disabled) {
  border-color: var(--pl-feature-action-solid-active, var(--pl-action-primary-background-active));
  background: var(--pl-feature-action-solid-active, var(--pl-action-primary-background-active));
}

.pl-action--secondary.pl-action--tone-default:active:not(:disabled) {
  border-color: transparent;
  background: var(--pl-feature-action-solid-active, var(--pl-action-soft-active-background));
  color: var(--pl-action-soft-hover-text);
}

.pl-action--tertiary.pl-action--tone-default:active:not(:disabled) {
  background: var(--pl-feature-action-subtle-active, var(--pl-action-secondary-background-active));
}

.pl-action--primary.pl-action--tone-danger:active:not(:disabled) {
  border-color: var(--pl-action-danger-background-active);
  background: var(--pl-action-danger-background-active);
}

.pl-action--secondary.pl-action--tone-danger:active:not(:disabled) {
  border-color: transparent;
  background: var(--pl-action-danger-background-active);
  color: var(--pl-action-danger-text-on-solid);
}

.pl-action--tertiary.pl-action--tone-danger:active:not(:disabled) {
  background: var(--pl-action-danger-background-subtle-active);
}

.pl-action:active:not(:disabled) {
  transform: scale(.985);
}

.pl-action:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 var(--pl-button-focus-inner-width) var(--pl-focus-inner),
    0 0 0 var(--pl-button-focus-outer-width) var(--pl-focus-outer);
}

.pl-action:disabled {
  border-color: var(--pl-action-disabled-border);
  background: var(--pl-action-disabled-background);
  color: var(--pl-action-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.pl-action--full {
  width: 100%;
}

.pl-action__label {
  min-width: 0;
}

.pl-action__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.pl-action--sm .pl-action__icon { width: var(--pl-button-icon-size-sm); height: var(--pl-button-icon-size-sm); }
.pl-action--md .pl-action__icon { width: var(--pl-button-icon-size-md); height: var(--pl-button-icon-size-md); }
.pl-action--lg .pl-action__icon { width: var(--pl-button-icon-size-lg); height: var(--pl-button-icon-size-lg); }

.pl-action__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-action__spinner {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--pl-radius-full);
  animation: pl-action-spin 700ms linear infinite;
}

.pl-action--icon-only {
  flex: 0 0 auto;
  padding: 0;
  aspect-ratio: 1;
}

.pl-action--icon-only.pl-action--sm { width: var(--pl-button-height-sm); }
.pl-action--icon-only.pl-action--md { width: var(--pl-button-height-md); }
.pl-action--icon-only.pl-action--lg { width: var(--pl-button-height-lg); }

.pl-menu-button__item {
  text-decoration: none;
}

.pl-menu-button__item[data-tone='danger'] {
  color: var(--pl-status-danger-text);
}

.pl-menu-button__item-icon {
  display: grid;
  width: var(--pl-field-accessory-icon-size);
  height: var(--pl-field-accessory-icon-size);
  flex: 0 0 auto;
  place-items: center;
}

.pl-menu-button__item-icon > svg {
  width: 100%;
  height: 100%;
}

/* Compensación óptica del glifo horizontal: el target conserva su tamaño
   táctil, pero los tres puntos no ocupan visualmente todo el container. */
.pl-action--icon-only[aria-haspopup='menu'] .pl-action__icon {
  width: 16px;
  height: 16px;
}

@keyframes pl-action-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .pl-action--sm { min-height: var(--pl-button-height-md); }
  .pl-action--icon-only.pl-action--sm { width: var(--pl-button-height-md); }
  .pl-action--mobile-full { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-action {
    transition-duration: 0.01ms;
  }

  .pl-action:active:not(:disabled) {
    transform: none;
  }

  .pl-action__spinner {
    animation-duration: 1.4s;
  }
}

@media (forced-colors: active) {
  .pl-action {
    border-color: ButtonText;
  }

  .pl-action:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .pl-action:disabled {
    color: GrayText;
    border-color: GrayText;
  }
}

/* MenuButton: una acción con variantes — menú con la geometría del Select. */
.pl-menu-button__chevron svg { width: 16px; height: 16px; }

.pl-menu-button__content {
  box-sizing: border-box;
  min-width: 220px;
  padding: var(--pl-field-menu-padding);
}

.pl-menu-button__content .pl-menu-button__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--pl-space-2);
}

.pl-menu-button__item-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.pl-menu-button__item-icon svg { width: 100%; height: 100%; }

/* source: components/actions/ButtonGroup/button-group.css */
.pl-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-space-2);
  width: 100%;
}

.pl-button-group--start { justify-content: flex-start; }
.pl-button-group--center { justify-content: center; }
.pl-button-group--end { justify-content: flex-end; }
.pl-button-group--between { justify-content: space-between; }

@media (max-width: 640px) {
  .pl-button-group--stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }

  .pl-button-group--stack-mobile > .pl-action {
    width: 100%;
  }
}

/* source: components/actions/TextLink/text-link.css */
.pl-text-link {
  border-radius: 2px;
  color: var(--pl-feature-action-ink, var(--pl-action-tertiary-text));
  font-weight: var(--pl-font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
  transition:
    color var(--pl-button-transition-duration) var(--pl-button-transition-easing),
    text-decoration-thickness var(--pl-button-transition-duration) var(--pl-button-transition-easing);
}

@media (hover: hover) {
  .pl-text-link:hover {
    color: var(--pl-feature-action-ink-strong, var(--pl-color-blue-900));
    text-decoration-thickness: 2px;
  }
}

.pl-text-link:focus-visible {
  outline: 3px solid var(--pl-focus-outer);
  outline-offset: 3px;
}

.pl-text-link--inspection {
  display: inline-flex;
  box-sizing: border-box;
  min-height: var(--pl-button-height-md);
  align-items: center;
  justify-content: center;
  gap: var(--pl-space-1);
  padding: 0 var(--pl-button-padding-inline-md);
  border-radius: var(--pl-radius-control);
  background: transparent;
  color: var(--pl-inspection-link-text, var(--pl-feature-action-ink, var(--pl-action-tertiary-text)));
  font-size: var(--pl-font-size-14);
  text-decoration: none;
  white-space: nowrap;
}

.pl-text-link--inspection:focus-visible,
.pl-text-link--inspection:active {
  background: transparent;
  color: var(--pl-inspection-link-hover-text, var(--pl-feature-action-ink-strong, var(--pl-action-tertiary-text)));
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.pl-text-link__icon {
  display: inline-grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
}

.pl-text-link__icon svg {
  width: 100%;
  height: 100%;
}

.pl-text-link--back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--pl-space-2);
  padding: 0;
  background: transparent;
  font-size: var(--pl-font-size-14);
  text-decoration: none;
}

.pl-text-link--back:active {
  background: transparent;
}

@media (hover: hover) {
  .pl-text-link--inspection:hover {
    background: transparent;
    color: var(--pl-inspection-link-hover-text, var(--pl-feature-action-ink-strong, var(--pl-action-tertiary-text)));
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
  }

  .pl-text-link--back:hover {
    background: transparent;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-text-link { transition-duration: .01ms; }
}

@media (forced-colors: active) {
  .pl-text-link:focus-visible {
    outline-color: Highlight;
  }
}

/* source: components/content/Card/card.css */
.pl-card {
  box-sizing: border-box;
  display: grid;
  gap: var(--pl-card-gap);
  width: 100%;
  margin: 0;
  border: 1px solid var(--pl-card-border-default);
  border-radius: var(--pl-card-radius);
  background: var(--pl-card-background-default);
  color: var(--pl-text-primary);
}

.pl-card--comfortable {
  padding: var(--pl-card-padding-comfortable);
}

.pl-card--compact {
  padding: var(--pl-card-padding-compact);
}

.pl-card--subtle {
  background: var(--pl-card-background-subtle);
}

.pl-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pl-space-4);
  min-width: 0;
}

.pl-card__header-copy {
  display: grid;
  flex: 1 1 auto;
  gap: var(--pl-space-2);
  min-width: 0;
}

.pl-card__header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--pl-space-2);
}

.pl-card__title {
  margin: 0;
  color: var(--pl-text-primary);
  font-size: var(--pl-card-title-size);
  font-weight: var(--pl-font-weight-bold);
  line-height: var(--pl-line-height-compact);
  text-wrap: pretty;
}

.pl-card__description {
  max-width: 65ch;
  margin: 0;
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-16);
  line-height: 1.5;
  text-wrap: pretty;
}

.pl-card__body {
  min-width: 0;
}

.pl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-3);
  min-width: 0;
}

.pl-card__footer--separated {
  padding-top: var(--pl-space-4);
  border-top: 1px solid var(--pl-card-border-default);
}

.pl-card-link {
  border-color: var(--pl-card-border-interactive);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--pl-duration-deliberate) var(--pl-easing-standard),
    background-color var(--pl-duration-deliberate) var(--pl-easing-standard);
}

.pl-card-link .pl-card__title {
  transition: color var(--pl-duration-deliberate) var(--pl-easing-standard);
}

@media (hover: hover) and (pointer: fine) {
  .pl-card-link:hover {
    border-color: var(--pl-card-border-interactive-hover);
  }

  .pl-card-link:hover .pl-card__title {
    color: var(--pl-card-title-interactive-hover);
  }
}

.pl-card-link:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

.pl-card-link:active {
  border-color: var(--pl-card-border-interactive-hover);
  background: var(--pl-card-background-interactive-active);
}

@media (max-width: 640px) {
  .pl-card--comfortable {
    padding: var(--pl-card-padding-compact);
  }

  .pl-card__header {
    display: grid;
  }

  .pl-card__header-actions {
    justify-content: flex-start;
  }

  .pl-card__footer {
    align-items: stretch;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-card-link,
  .pl-card-link .pl-card__title {
    transition: none;
  }
}

@media (forced-colors: active) {
  .pl-card,
  .pl-card-link {
    border-color: CanvasText;
  }

  .pl-card-link:focus-visible {
    outline-color: Highlight;
  }
}

/* source: icons/icon-motion.css */
.pl-action-icon,
.pl-action-icon * {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes pl-icon-add {
  0%, 100% { transform: scale(1); }
  55% { transform: scale(var(--pl-icon-motion-scale-emphasis)); }
}

@keyframes pl-icon-confirm {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .45; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
}

@keyframes pl-icon-sparkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  45% { transform: scale(var(--pl-icon-motion-scale-emphasis)) rotate(4deg); opacity: .72; }
}

@keyframes pl-icon-descend {
  0%, 100% { transform: translateY(0); }
  55% { transform: translateY(var(--pl-icon-motion-distance-sm)); }
}

@keyframes pl-icon-trace {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .35; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
}

@keyframes pl-icon-nudge-forward {
  0%, 100% { transform: translateX(0); }
  55% { transform: translateX(var(--pl-icon-motion-distance-sm)); }
}

@keyframes pl-icon-nudge-back {
  0%, 100% { transform: translateX(0); }
  55% { transform: translateX(calc(var(--pl-icon-motion-distance-sm) * -1)); }
}

@keyframes pl-icon-rotate {
  0%, 100% { transform: rotate(0); }
  55% { transform: rotate(32deg); }
}

@keyframes pl-icon-focus {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.72); }
}

@keyframes pl-icon-discard {
  0%, 100% { transform: translateY(0) rotate(0); }
  42% { transform: translateY(calc(var(--pl-icon-motion-distance-sm) * -.75)) rotate(-3deg); }
  72% { transform: translateY(calc(var(--pl-icon-motion-distance-sm) * -.25)) rotate(1deg); }
}

@keyframes pl-icon-threshold {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .45; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 1; }
}

@keyframes pl-icon-page-shift {
  0%, 100% { transform: translateX(0); }
  48% { transform: translateX(var(--pl-icon-motion-distance-xs)); }
}

@keyframes pl-icon-bookmark-settle {
  0%, 100% { transform: translateY(0); }
  46% { transform: translateY(calc(var(--pl-icon-motion-distance-xs) * -1)); }
}

@media (hover: hover) {
  .pl-action:hover:not(:disabled) .pl-icon-motion__add {
    animation: pl-icon-add var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing-emphasis);
  }

  .pl-action:hover:not(:disabled) .pl-icon-motion__confirm {
    animation: pl-icon-confirm var(--pl-icon-motion-duration-draw) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-icon-motion__sparkles {
    animation: pl-icon-sparkle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing-emphasis);
  }

  .pl-text-link:hover .pl-icon-motion__sparkles,
  .pl-action-menu__item:hover .pl-icon-motion__sparkles {
    animation: pl-icon-sparkle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing-emphasis);
  }

  .pl-action:hover:not(:disabled) .pl-icon-motion__descend {
    animation: pl-icon-descend var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-icon-motion__trace {
    animation: pl-icon-trace var(--pl-icon-motion-duration-draw) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-action-icon[data-motion='nudge-forward'] {
    animation: pl-icon-nudge-forward var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-card-link:hover .pl-action-icon[data-motion='nudge-forward'] {
    animation: pl-icon-nudge-forward var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-action-icon[data-motion='nudge-back'] {
    animation: pl-icon-nudge-back var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-action-icon[data-motion='rotate'] {
    animation: pl-icon-rotate var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-icon-motion__focus {
    animation: pl-icon-focus var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-action:hover:not(:disabled) .pl-icon-motion__discard-lid {
    animation: pl-icon-discard var(--pl-icon-motion-duration-draw) var(--pl-icon-motion-easing);
  }

  .pl-nav-item:hover .pl-icon-motion__threshold {
    animation: pl-icon-threshold var(--pl-icon-motion-duration-draw) var(--pl-icon-motion-easing);
  }

  .pl-nav-item:hover .pl-icon-motion__page-lines {
    animation: pl-icon-page-shift var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }

  .pl-nav-item:hover .pl-icon-motion__sparkles {
    animation: pl-icon-sparkle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing-emphasis);
  }

  .pl-nav-item:hover .pl-icon-motion__bookmark {
    animation: pl-icon-bookmark-settle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
  }
}

.pl-action:focus-visible .pl-icon-motion__sparkles,
.pl-text-link:focus-visible .pl-icon-motion__sparkles,
.pl-action-menu__item:focus-visible .pl-icon-motion__sparkles {
  animation: pl-icon-sparkle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing-emphasis);
}

.pl-nav-item:focus-visible .pl-icon-motion__threshold {
  animation: pl-icon-threshold var(--pl-icon-motion-duration-draw) var(--pl-icon-motion-easing);
}

.pl-nav-item:focus-visible .pl-icon-motion__page-lines {
  animation: pl-icon-page-shift var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
}

.pl-nav-item:focus-visible .pl-icon-motion__sparkles {
  animation: pl-icon-sparkle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing-emphasis);
}

.pl-nav-item:focus-visible .pl-icon-motion__bookmark {
  animation: pl-icon-bookmark-settle var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
}

.pl-card-link:focus-visible .pl-action-icon[data-motion='nudge-forward'] {
  animation: pl-icon-nudge-forward var(--pl-icon-motion-duration-default) var(--pl-icon-motion-easing);
}

@media (prefers-reduced-motion: reduce) {
  .pl-action-icon,
  .pl-action-icon * {
    animation: none !important;
    transform: none !important;
  }
}

/* source: components/feedback/feedback.css */
.pl-inline-alert,
.pl-status-badge {
  --pl-feedback-surface: var(--pl-status-neutral-surface);
  --pl-feedback-border: var(--pl-status-neutral-border);
  --pl-feedback-text: var(--pl-status-neutral-text);
}

.pl-inline-alert--info,
.pl-status-badge--info {
  --pl-feedback-surface: var(--pl-status-info-surface);
  --pl-feedback-border: var(--pl-status-info-border);
  --pl-feedback-text: var(--pl-status-info-text);
}

.pl-inline-alert--success,
.pl-status-badge--success {
  --pl-feedback-surface: var(--pl-status-success-surface);
  --pl-feedback-border: var(--pl-status-success-border);
  --pl-feedback-text: var(--pl-status-success-text);
}

.pl-inline-alert--warning,
.pl-status-badge--warning {
  --pl-feedback-surface: var(--pl-status-warning-surface);
  --pl-feedback-border: var(--pl-status-warning-border);
  --pl-feedback-text: var(--pl-status-warning-text);
}

.pl-inline-alert--danger,
.pl-status-badge--danger {
  --pl-feedback-surface: var(--pl-status-danger-surface);
  --pl-feedback-border: var(--pl-status-danger-border);
  --pl-feedback-text: var(--pl-status-danger-text);
}

.pl-inline-alert {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--pl-feedback-icon-size) minmax(0, 1fr);
  grid-template-areas: "icon content";
  gap: var(--pl-feedback-gap);
  width: 100%;
  padding: var(--pl-feedback-padding-block) var(--pl-feedback-padding-inline);
  border: var(--pl-feedback-border-width) solid var(--pl-feedback-border);
  border-radius: var(--pl-feedback-radius);
  background: var(--pl-feedback-surface);
  color: var(--pl-feedback-text);
  font-family: var(--pl-font-family-sans);
  line-height: var(--pl-feedback-line-height);
}

.pl-inline-alert--without-icon {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content";
}

.pl-inline-alert--with-actions {
  grid-template-columns: var(--pl-feedback-icon-size) minmax(0, 1fr) auto;
  grid-template-areas: "icon content actions";
  align-items: center;
}

.pl-inline-alert--without-icon.pl-inline-alert--with-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "content actions";
}

.pl-inline-alert__icon {
  grid-area: icon;
  display: inline-flex;
  width: var(--pl-feedback-icon-size);
  height: var(--pl-feedback-icon-size);
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.pl-inline-alert__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-inline-alert__content {
  grid-area: content;
  display: grid;
  gap: var(--pl-space-1);
  min-width: 0;
}

.pl-inline-alert__title {
  margin: 0;
  color: inherit;
  font-size: var(--pl-feedback-title-size);
  font-weight: var(--pl-font-weight-semibold);
  line-height: var(--pl-line-height-compact);
}

.pl-inline-alert__body {
  min-width: 0;
  font-size: var(--pl-feedback-body-size);
  overflow-wrap: anywhere;
}

.pl-inline-alert__body > :first-child { margin-top: 0; }
.pl-inline-alert__body > :last-child { margin-bottom: 0; }

.pl-inline-alert__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pl-space-2);
  min-width: 0;
}

.pl-inline-alert__actions .pl-action--tertiary {
  color: inherit;
}

@media (hover: hover) {
  .pl-inline-alert__actions .pl-action--tertiary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pl-feedback-text) 9%, transparent);
    color: inherit;
  }
}

.pl-inline-alert__actions .pl-action--tertiary:active:not(:disabled) {
  background: color-mix(in srgb, var(--pl-feedback-text) 14%, transparent);
}

.pl-status-badge {
  box-sizing: border-box;
  display: inline-flex;
  width: fit-content;
  min-height: var(--pl-feedback-badge-min-height);
  align-items: center;
  gap: var(--pl-feedback-badge-gap);
  padding-inline: var(--pl-feedback-badge-padding-inline);
  border: 0;
  border-radius: var(--pl-feedback-badge-radius);
  background: var(--pl-feedback-surface);
  color: var(--pl-feedback-text);
  font-family: var(--pl-font-family-sans);
  font-size: var(--pl-feedback-badge-font-size);
  font-weight: var(--pl-feedback-badge-font-weight);
  line-height: var(--pl-line-height-compact);
  white-space: nowrap;
}

.pl-status-badge__marker {
  width: var(--pl-feedback-marker-size);
  height: var(--pl-feedback-marker-size);
  flex: 0 0 auto;
  border-radius: 2px;
  background: currentColor;
}

.pl-status-badge__icon {
  display: inline-flex;
  width: var(--pl-feedback-badge-icon-size);
  height: var(--pl-feedback-badge-icon-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.pl-status-badge__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-empty-state {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: var(--pl-feedback-empty-gap);
  width: 100%;
  max-width: var(--pl-feedback-empty-max-width);
  margin-inline: auto;
  padding-block: var(--pl-feedback-empty-padding-block);
  color: var(--pl-text-primary);
  font-family: var(--pl-font-family-sans);
  text-align: center;
}

.pl-empty-state--compact {
  grid-template-columns: var(--pl-feedback-empty-compact-icon-size) minmax(0, 1fr);
  grid-template-areas: "empty-icon empty-copy";
  align-items: center;
  justify-items: start;
  gap: var(--pl-feedback-empty-compact-gap);
  max-width: none;
  margin-inline: 0;
  padding-block: var(--pl-feedback-empty-compact-padding-block);
  text-align: start;
}

.pl-empty-state--compact.pl-empty-state--with-actions {
  grid-template-columns: var(--pl-feedback-empty-compact-icon-size) minmax(0, 1fr) auto;
  grid-template-areas: "empty-icon empty-copy empty-actions";
}

.pl-empty-state--compact.pl-empty-state--without-icon {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "empty-copy";
}

.pl-empty-state--compact.pl-empty-state--without-icon.pl-empty-state--with-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "empty-copy empty-actions";
}

.pl-empty-state--start {
  justify-items: start;
  max-width: none;
  margin-inline: 0;
  text-align: start;
}

.pl-empty-state__icon {
  display: inline-flex;
  width: var(--pl-feedback-empty-icon-size);
  height: var(--pl-feedback-empty-icon-size);
  align-items: center;
  justify-content: center;
  color: var(--pl-status-info-text);
}

.pl-empty-state__icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-empty-state--compact .pl-empty-state__icon {
  grid-area: empty-icon;
  width: var(--pl-feedback-empty-compact-icon-size);
  height: var(--pl-feedback-empty-compact-icon-size);
}

.pl-empty-state__copy {
  display: grid;
  justify-items: inherit;
  gap: var(--pl-space-2);
  min-width: 0;
}

.pl-empty-state--compact .pl-empty-state__copy {
  grid-area: empty-copy;
  justify-items: start;
}

.pl-empty-state__title,
.pl-empty-state__description {
  margin: 0;
}

.pl-empty-state__title {
  font-size: var(--pl-font-size-18);
  font-weight: var(--pl-font-weight-semibold);
  line-height: var(--pl-line-height-heading);
  text-wrap: balance;
}

.pl-empty-state__description {
  max-width: 52ch;
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-16);
  line-height: 1.5;
  text-wrap: pretty;
}

.pl-empty-state--compact .pl-empty-state__title {
  font-size: var(--pl-font-size-16);
}

.pl-empty-state--compact .pl-empty-state__description {
  font-size: var(--pl-font-size-14);
}

.pl-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pl-space-2);
}

.pl-empty-state--compact .pl-empty-state__actions {
  grid-area: empty-actions;
  justify-self: end;
}

.pl-empty-state--start .pl-empty-state__actions {
  justify-content: flex-start;
}

.pl-loading-state {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-2);
  color: var(--pl-text-secondary);
  font-family: var(--pl-font-family-sans);
  font-size: var(--pl-font-size-14);
  line-height: var(--pl-feedback-line-height);
  transition: color var(--pl-feedback-loading-transition-duration) var(--pl-feedback-loading-transition-easing);
}

.pl-loading-state--block {
  display: grid;
  justify-items: center;
  width: 100%;
  padding-block: var(--pl-feedback-empty-padding-block);
  text-align: center;
}

.pl-loading-state__indicator {
  display: inline-grid;
  width: var(--pl-feedback-loading-spinner-size);
  height: var(--pl-feedback-loading-spinner-size);
  flex: 0 0 auto;
  place-items: center;
}

.pl-loading-state__indicator > * {
  grid-area: 1 / 1;
}

.pl-loading-state__spinner-layer {
  display: inline-grid;
  width: 100%;
  height: 100%;
  place-items: center;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--pl-feedback-loading-transition-duration) var(--pl-feedback-loading-transition-easing),
    transform var(--pl-feedback-loading-transition-duration) var(--pl-feedback-loading-transition-easing);
}

.pl-loading-state__spinner {
  box-sizing: border-box;
  width: var(--pl-feedback-loading-spinner-size);
  height: var(--pl-feedback-loading-spinner-size);
  border: var(--pl-feedback-loading-spinner-stroke) solid var(--pl-status-info-surface);
  border-top-color: var(--pl-status-info-text);
  border-radius: var(--pl-radius-full);
  animation: pl-feedback-spin 900ms linear infinite;
}

.pl-loading-state--success {
  color: var(--pl-status-success-text);
}

.pl-loading-state--success .pl-loading-state__label {
  color: inherit;
}

.pl-loading-state__success-icon {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.76) rotate(-5deg);
  transition:
    opacity var(--pl-feedback-loading-transition-duration) var(--pl-feedback-loading-transition-easing),
    transform var(--pl-feedback-loading-transition-duration) var(--pl-feedback-loading-transition-easing);
}

.pl-loading-state--success .pl-loading-state__spinner-layer {
  opacity: 0;
  transform: scale(.7);
}

.pl-loading-state--success .pl-loading-state__success-icon {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.pl-loading-state__copy {
  display: grid;
  gap: var(--pl-space-1);
}

.pl-loading-state__label {
  color: var(--pl-text-primary);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-loading-state__detail {
  max-width: 48ch;
}

.pl-skeleton {
  box-sizing: border-box;
  display: block;
  min-width: 0;
  min-height: var(--pl-space-4);
  border-radius: var(--pl-feedback-skeleton-radius);
  background: var(--pl-feedback-skeleton-background);
  animation: pl-skeleton-breathe var(--pl-feedback-skeleton-duration) ease-in-out infinite;
}

.pl-skeleton--line { height: var(--pl-space-4); }
.pl-skeleton--block { min-height: var(--pl-space-16); }
.pl-skeleton--avatar {
  width: var(--pl-space-10);
  height: var(--pl-space-10);
  min-height: 0;
  border-radius: var(--pl-radius-full);
}

@keyframes pl-feedback-spin {
  to { transform: rotate(360deg); }
}

@keyframes pl-skeleton-breathe {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}

@media (max-width: 640px) {
  .pl-inline-alert {
    padding-inline: var(--pl-space-3);
  }

  .pl-inline-alert--with-actions {
    grid-template-columns: var(--pl-feedback-icon-size) minmax(0, 1fr);
    grid-template-areas:
      "icon content"
      ". actions";
    align-items: start;
  }

  .pl-inline-alert--without-icon.pl-inline-alert--with-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "actions";
  }

  .pl-inline-alert__actions {
    justify-content: flex-start;
    margin-top: calc(-1 * var(--pl-space-1));
    margin-inline-start: calc(-1 * var(--pl-button-padding-inline-sm));
  }

  .pl-empty-state__actions {
    display: grid;
    width: 100%;
  }

  .pl-empty-state {
    padding-block: var(--pl-space-6);
  }

  .pl-empty-state--compact,
  .pl-empty-state--compact.pl-empty-state--with-actions,
  .pl-empty-state--compact.pl-empty-state--without-icon,
  .pl-empty-state--compact.pl-empty-state--without-icon.pl-empty-state--with-actions {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "empty-icon"
      "empty-copy"
      "empty-actions";
    justify-items: center;
    max-width: 360px;
    margin-inline: auto;
    padding-block: var(--pl-space-5);
    text-align: center;
  }

  .pl-empty-state--compact.pl-empty-state--without-icon,
  .pl-empty-state--compact.pl-empty-state--without-icon.pl-empty-state--with-actions {
    grid-template-areas:
      "empty-copy"
      "empty-actions";
  }

  .pl-empty-state--compact .pl-empty-state__copy {
    justify-items: center;
  }

  .pl-empty-state--compact .pl-empty-state__actions {
    display: flex;
    justify-self: center;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-loading-state__spinner {
    animation-duration: 1.8s;
  }

  .pl-skeleton {
    animation: none;
  }

  .pl-loading-state,
  .pl-loading-state__spinner-layer,
  .pl-loading-state__success-icon {
    transition-duration: 0.01ms;
  }
}

@media (forced-colors: active) {
  .pl-inline-alert {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .pl-status-badge {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .pl-loading-state__spinner {
    border-color: GrayText;
    border-top-color: Highlight;
  }

  .pl-skeleton {
    border: 1px solid GrayText;
    background: Canvas;
  }
}

/* Tags planos de taxonomía (aula, área) — boxy, relleno suave y sólo texto.
   La identidad compound estructurada es una composición separada y no se
   reconstruye desde ClassroomTag. */
.pl-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pl-feedback-tag-gap);
  min-height: var(--pl-feedback-tag-min-height);
  padding-inline: var(--pl-feedback-tag-padding-inline);
  border-radius: var(--pl-feedback-tag-radius);
  font-size: var(--pl-feedback-tag-font-size);
  font-weight: var(--pl-feedback-tag-font-weight);
  line-height: 1.2;
  white-space: nowrap;
}

.pl-tag svg {
  width: var(--pl-feedback-tag-icon-size);
  height: var(--pl-feedback-tag-icon-size);
  flex: none;
}

.pl-tag--classroom {
  background: var(--pl-feedback-tag-classroom-background);
  color: var(--pl-feedback-tag-classroom-text);
}

.pl-tag--area {
  background: var(--pl-feedback-tag-area-background);
  color: var(--pl-feedback-tag-area-text);
}

.pl-classroom-compound {
  --pl-classroom-compound-border-width: 1px;
  isolation: isolate;
  display: inline-flex;
  max-width: 100%;
  align-items: stretch;
  color: var(--pl-text-secondary);
  font-size: var(--pl-feedback-tag-font-size);
  font-weight: var(--pl-font-weight-semibold);
  line-height: 1.2;
}

.pl-classroom-compound > span {
  position: relative;
  z-index: 0;
  display: inline-flex;
  min-width: 0;
  min-height: var(--pl-feedback-tag-min-height);
  align-items: center;
  padding-inline: var(--pl-feedback-tag-padding-inline);
  border: var(--pl-classroom-compound-border-width) solid var(--pl-border-default);
  border-radius: var(--pl-feedback-tag-radius);
  background: var(--pl-surface-subtle);
  overflow-wrap: anywhere;
}

.pl-classroom-compound > span:nth-of-type(1) {
  border-inline-end-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.pl-classroom-compound > span:nth-of-type(2) {
  border-inline-start-width: 0;
  border-inline-end-width: 0;
  border-radius: 0;
}

.pl-classroom-compound > span:nth-of-type(3) {
  border-inline-start-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.pl-classroom-compound__bridge {
  z-index: 2;
  width: 18px;
  min-width: 18px;
  height: var(--pl-feedback-tag-min-height);
  margin-inline: -6px;
  align-self: center;
  overflow: visible;
}

.pl-classroom-compound__bridge-fill { fill: var(--pl-surface-subtle); }

.pl-classroom-compound__bridge-cutout {
  fill: var(--pl-classroom-compound-surrounding-background, var(--pl-surface-default));
  stroke: var(--pl-classroom-compound-surrounding-background, var(--pl-surface-default));
  stroke-width: 2;
}

.pl-classroom-compound__bridge-edge {
  fill: none;
  stroke: var(--pl-border-default);
  stroke-width: var(--pl-classroom-compound-border-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (forced-colors: active) {
  .pl-classroom-compound > span { border-color: CanvasText; }
  .pl-classroom-compound__bridge-cutout { fill: Canvas; stroke: Canvas; }
  .pl-classroom-compound__bridge-edge { stroke: CanvasText; }
}

/* source: components/forms/form-controls.css */
.pl-field {
  display: grid;
  gap: var(--pl-content-label-description-gap);
  min-width: 0;
  color: var(--pl-field-text);
  font-family: var(--pl-field-font-family);
}

.pl-field__label {
  display: flex;
  align-items: baseline;
  gap: var(--pl-field-gap);
  width: fit-content;
  color: var(--pl-field-label-text);
  font-size: var(--pl-field-label-font-size);
  font-weight: var(--pl-field-label-font-weight);
  line-height: var(--pl-field-line-height);
}

.pl-field__required {
  color: var(--pl-field-required-text);
  font-weight: var(--pl-font-weight-bold);
}

.pl-field__optional {
  color: var(--pl-field-help-text);
  font-size: .8125rem;
  font-weight: 400;
}

.pl-field__hint,
.pl-field__error,
.pl-textarea__counter {
  max-width: 70ch;
  font-size: var(--pl-field-message-font-size);
  line-height: var(--pl-field-line-height);
}

.pl-field__hint,
.pl-textarea__counter {
  color: var(--pl-field-help-text);
}

.pl-field__error {
  color: var(--pl-field-error-text);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-form-control {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--pl-field-height);
  padding: var(--pl-field-padding-block) var(--pl-field-padding-inline);
  border: var(--pl-field-border-width) solid var(--pl-field-border-default);
  border-radius: var(--pl-field-radius);
  background: var(--pl-field-background-default);
  color: var(--pl-field-text);
  font-family: var(--pl-field-font-family);
  font-size: var(--pl-field-font-size);
  line-height: var(--pl-field-line-height);
  transition:
    border-color var(--pl-field-transition-duration) var(--pl-field-transition-easing),
    background-color var(--pl-field-transition-duration) var(--pl-field-transition-easing),
    box-shadow var(--pl-field-transition-duration) var(--pl-field-transition-easing);
}

.pl-form-control::placeholder {
  color: var(--pl-field-placeholder-text);
  opacity: 1;
}

@media (hover: hover) {
  .pl-form-control:hover:not(:disabled):not(:read-only):not(:focus) {
    border-color: var(--pl-field-border-hover);
  }
}

.pl-form-control:focus-visible {
  border-color: var(--pl-field-border-hover);
  outline: 0;
  box-shadow:
    0 0 0 var(--pl-field-focus-inner-width) var(--pl-focus-inner),
    0 0 0 var(--pl-field-focus-outer-width) var(--pl-focus-outer);
}

.pl-form-control[aria-invalid='true'] {
  border-color: var(--pl-field-border-invalid);
}

.pl-form-control:disabled {
  border-color: var(--pl-action-disabled-border);
  background: var(--pl-field-background-disabled);
  color: var(--pl-field-disabled-text);
  cursor: not-allowed;
}

.pl-form-control[readonly] {
  background: var(--pl-field-background-readonly);
  cursor: default;
}

.pl-form-control:autofill,
.pl-form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--pl-field-text);
  box-shadow: inset 0 0 0 1000px var(--pl-field-background-default);
}

.pl-select-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-field-menu-option-gap);
  padding-inline-end: var(--pl-field-accessory-inset-inline-end);
  text-align: start;
  cursor: pointer;
}

/* Trigger chip: slot de contexto en headers de cards. Geometría de la
   insignia y superficie filled estable; el texto hereda el color del header
   tonal. Comparte el menú estándar. */
.pl-select-trigger--chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-1);
  width: auto;
  min-height: var(--pl-feedback-badge-min-height);
  padding: 0 var(--pl-space-2);
  border: 0;
  border-radius: var(--pl-feedback-badge-radius);
  background: var(--pl-surface-default);
  color: inherit;
  font-family: var(--pl-font-family-sans);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-feedback-badge-font-weight);
  line-height: var(--pl-line-height-compact);
  white-space: nowrap;
  cursor: pointer;
}

.pl-select-trigger--chip .pl-select__indicator {
  width: 16px;
  height: 16px;
  color: inherit;
}

.pl-select-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-select-trigger[data-placeholder] {
  color: var(--pl-field-placeholder-text);
}

.pl-select__indicator {
  display: grid;
  flex: 0 0 auto;
  width: var(--pl-field-accessory-icon-size);
  height: var(--pl-field-accessory-icon-size);
  place-items: center;
  color: var(--pl-action-tertiary-text);
  transform: rotate(0deg);
  transform-origin: center;
  transition:
    transform var(--pl-field-menu-indicator-duration) var(--pl-field-transition-easing),
    color var(--pl-field-menu-indicator-duration) var(--pl-field-transition-easing);
}

.pl-select__indicator > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-select-trigger[data-state='open'] .pl-select__indicator {
  transform: rotate(180deg);
  color: var(--pl-color-blue-900);
}

.pl-select-trigger:disabled { cursor: not-allowed; }

.pl-select-trigger:disabled .pl-select__indicator {
  color: var(--pl-field-disabled-text);
}

.pl-select-content {
  z-index: 1000;
  width: var(--radix-select-trigger-width);
  min-width: min(240px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(var(--pl-field-menu-max-height), var(--radix-select-content-available-height));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--pl-field-menu-border) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border: 1px solid var(--pl-field-menu-border);
  border-radius: var(--pl-field-menu-radius);
  background: var(--pl-field-menu-background);
  box-shadow: var(--pl-field-menu-shadow);
  color: var(--pl-field-text);
  font-family: var(--pl-field-font-family);
  transform-origin: var(--radix-select-content-transform-origin);
}

.pl-select-content::-webkit-scrollbar { width: 8px; }
.pl-select-content::-webkit-scrollbar-track { background: transparent; }
.pl-select-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--pl-field-menu-border);
  background-clip: padding-box;
}

.pl-select-content[data-state='open'] {
  animation: pl-select-menu-in var(--pl-field-transition-duration) var(--pl-field-transition-easing);
}

.pl-select-viewport {
  box-sizing: border-box;
  padding: var(--pl-field-menu-padding);
}

.pl-select-group + .pl-select-group {
  margin-top: var(--pl-field-menu-padding);
  padding-top: var(--pl-field-menu-padding);
  border-top: 1px solid var(--pl-border-default);
}

.pl-select-label {
  display: flex;
  min-height: 32px;
  padding-inline: var(--pl-field-menu-option-padding-inline);
  align-items: center;
  color: var(--pl-field-help-text);
  font-size: var(--pl-field-message-font-size);
  font-weight: var(--pl-field-label-font-weight);
  line-height: var(--pl-field-line-height);
}

.pl-select-option {
  position: relative;
  display: flex;
  min-height: var(--pl-field-menu-option-min-height);
  padding: 10px var(--pl-field-menu-option-padding-inline);
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-field-menu-option-gap);
  border-radius: var(--pl-field-menu-option-radius);
  font-size: var(--pl-field-font-size);
  line-height: var(--pl-field-line-height);
  cursor: default;
  outline: 0;
  user-select: none;
}

.pl-select-option[data-highlighted] {
  background: var(--pl-field-menu-option-hover-background);
}

.pl-select-option[data-state='checked'] {
  background: var(--pl-field-menu-option-selected-background);
  color: var(--pl-field-menu-option-selected-text);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-select-option[data-disabled] {
  color: var(--pl-field-disabled-text);
  cursor: not-allowed;
}

/* Combobox: búsqueda sobre listas extensas. La entrada conserva el valor
   elegido cuando está cerrada y se convierte en búsqueda al recibir foco. */
.pl-combobox {
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--pl-field-text);
  font-family: var(--pl-field-font-family);
}

.pl-combobox__control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.pl-combobox__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--pl-field-height);
  padding: var(--pl-field-padding-block) 42px var(--pl-field-padding-block) 38px;
  border: var(--pl-field-border-width) solid var(--pl-field-border-default);
  border-radius: var(--pl-field-radius);
  background: var(--pl-field-background-default);
  color: inherit;
  font: inherit;
  line-height: var(--pl-field-line-height);
  text-overflow: ellipsis;
}

.pl-combobox__input:focus-visible {
  border-color: var(--pl-field-border-hover);
  outline: 0;
  box-shadow:
    0 0 0 var(--pl-field-focus-inner-width) var(--pl-focus-inner),
    0 0 0 var(--pl-field-focus-outer-width) var(--pl-focus-outer);
}

.pl-combobox__input::placeholder { color: var(--pl-field-placeholder-text); opacity: 1; }
.pl-combobox__input:disabled { color: var(--pl-field-disabled-text); cursor: not-allowed; }

.pl-combobox__search-icon,
.pl-combobox__indicator {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.pl-combobox__search-icon { inset-inline-start: 12px; }
.pl-combobox__indicator { inset-inline-end: 12px; transition: transform var(--pl-field-menu-indicator-duration) var(--pl-field-transition-easing); }
.pl-combobox__search-icon > svg,
.pl-combobox__indicator > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pl-combobox:has(.pl-combobox__input[aria-expanded='true']) .pl-combobox__indicator { transform: rotate(180deg); }

.pl-combobox__popover {
  position: absolute;
  z-index: 1000;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  width: max(100%, min(320px, calc(100vw - 24px)));
  max-height: min(var(--pl-field-menu-max-height), 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--pl-field-menu-border) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  border: 1px solid var(--pl-field-menu-border);
  border-radius: var(--pl-field-menu-radius);
  background: var(--pl-field-menu-background);
  box-shadow: var(--pl-field-menu-shadow);
}

.pl-combobox__popover::-webkit-scrollbar { width: 8px; }
.pl-combobox__popover::-webkit-scrollbar-track { background: transparent; }
.pl-combobox__popover::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--pl-radius-full);
  background: var(--pl-field-menu-border);
  background-clip: padding-box;
}

.pl-combobox__popover[data-more-below='true']::after {
  position: sticky;
  bottom: 0;
  display: block;
  height: 28px;
  margin-top: -28px;
  background: linear-gradient(to bottom, transparent, var(--pl-field-menu-background));
  content: '';
  pointer-events: none;
}

.pl-combobox__popover[hidden] { display: none; }
.pl-combobox__list { margin: 0; padding: var(--pl-field-menu-padding); list-style: none; }
.pl-combobox__group + .pl-combobox__group {
  margin-top: var(--pl-field-menu-padding);
  padding-top: var(--pl-field-menu-padding);
  border-top: 1px solid var(--pl-border-default);
}

.pl-combobox__group-label {
  position: sticky;
  z-index: 1;
  top: calc(-1 * var(--pl-field-menu-padding));
  display: flex;
  min-height: 32px;
  padding-inline: var(--pl-field-menu-option-padding-inline);
  align-items: center;
  background: var(--pl-field-menu-background);
  color: var(--pl-field-help-text);
  font-size: var(--pl-field-message-font-size);
  font-weight: var(--pl-field-label-font-weight);
}

.pl-combobox__group-options { margin: 0; padding: 0; list-style: none; }

.pl-combobox__option {
  display: flex;
  width: 100%;
  min-height: var(--pl-field-menu-option-min-height);
  padding: 10px var(--pl-field-menu-option-padding-inline);
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-field-menu-option-gap);
  border: 0;
  border-radius: var(--pl-field-menu-option-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: default;
}

.pl-combobox__option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-combobox__option > svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pl-combobox__option > span:last-child:has(svg) { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; }
.pl-combobox__option > span:last-child > svg { display: block; width: 100%; height: 100%; }
.pl-combobox__option-indicator { display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; }
.pl-combobox__option-indicator > svg { display: block; width: 100%; height: 100%; }
.pl-combobox__option[data-highlighted] { background: var(--pl-field-menu-option-hover-background); }
.pl-combobox__option[aria-selected='true'] { background: var(--pl-field-menu-option-selected-background); color: var(--pl-field-menu-option-selected-text); font-weight: var(--pl-font-weight-semibold); }
.pl-combobox__option[aria-disabled='true'] { color: var(--pl-field-disabled-text); }
.pl-combobox__empty { margin: 0; padding: var(--pl-space-4); color: var(--pl-field-help-text); font-size: var(--pl-font-size-14); }

.pl-combobox--chip { width: auto; max-width: min(320px, 46vw); }
.pl-combobox--chip .pl-combobox__input {
  min-height: var(--pl-feedback-badge-min-height);
  padding: 0 28px 0 30px;
  border: 0;
  border-radius: var(--pl-feedback-badge-radius);
  background: var(--pl-surface-default);
  color: inherit;
  font-family: var(--pl-font-family-sans);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-feedback-badge-font-weight);
  line-height: var(--pl-line-height-compact);
}

.pl-combobox--chip .pl-combobox__search-icon { inset-inline-start: 8px; width: 16px; height: 16px; }
.pl-combobox--chip .pl-combobox__indicator { inset-inline-end: 7px; width: 15px; height: 15px; }

@media (max-width: 620px) {
  .pl-select-trigger--chip,
  .pl-combobox--chip { width: 100%; max-width: none; }
}

/* ChoiceControl: controles nativos con una superficie compartida por
   checkbox y radio. La variante card es una presentación, no otro control. */
.pl-choice-group {
  display: grid;
  gap: var(--pl-content-label-description-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--pl-field-text);
  font-family: var(--pl-field-font-family);
}

.pl-choice-group__legend {
  padding: 0;
  color: var(--pl-field-label-text);
  font-size: var(--pl-field-label-font-size);
  font-weight: var(--pl-field-label-font-weight);
  line-height: var(--pl-field-line-height);
}

.pl-choice-group__hint,
.pl-choice-group__error {
  max-width: 70ch;
  margin: 0;
  font-size: var(--pl-field-message-font-size);
  line-height: var(--pl-field-line-height);
}

.pl-choice-group__hint { color: var(--pl-field-help-text); }
.pl-choice-group__error { color: var(--pl-field-error-text); font-weight: var(--pl-font-weight-semibold); }

.pl-choice-group__options {
  display: grid;
  grid-template-columns: repeat(var(--pl-choice-columns, 1), minmax(0, 1fr));
  gap: var(--pl-space-2);
  margin-top: var(--pl-content-label-description-gap);
}

.pl-choice-group--columns-2 { --pl-choice-columns: 2; }
.pl-choice-group--columns-3 { --pl-choice-columns: 3; }

.pl-choice {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--pl-space-2);
  min-width: 0;
  padding-block: var(--pl-space-1);
  color: var(--pl-field-text);
  cursor: pointer;
}

.pl-choice--card {
  min-height: 76px;
  padding: var(--pl-space-3);
  border: 1px solid var(--pl-card-border-interactive);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-default);
  transition:
    border-color var(--pl-field-transition-duration) var(--pl-field-transition-easing),
    background-color var(--pl-field-transition-duration) var(--pl-field-transition-easing);
}

.pl-choice__control {
  appearance: none;
  display: grid;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 2px solid var(--pl-field-border-default);
  background: var(--pl-surface-default);
  place-content: center;
  cursor: inherit;
}

.pl-choice__control[type='radio'] { border-radius: 50%; }
.pl-choice__control[type='checkbox'] { border-radius: 5px; }

.pl-choice__control::before {
  width: 10px;
  height: 10px;
  background: var(--pl-feature-generator-action-text);
  content: '';
  opacity: 0;
  transform: scale(.5);
  transition:
    opacity var(--pl-field-transition-duration) var(--pl-field-transition-easing),
    transform var(--pl-field-transition-duration) var(--pl-field-transition-easing);
}

.pl-choice__control[type='radio']::before { border-radius: 50%; }
.pl-choice__control[type='checkbox']::before { border-radius: 2px; }

.pl-choice__control:checked {
  border-color: var(--pl-feature-generator-action-text);
}

.pl-choice__control:checked::before {
  opacity: 1;
  transform: scale(1);
}

.pl-choice:has(.pl-choice__control:checked).pl-choice--card {
  border-color: var(--pl-feature-generator-action-text);
  background: var(--pl-feature-generator-action-background);
}

.pl-choice__control:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 3px;
}

.pl-choice__copy { display: grid; gap: 3px; min-width: 0; }
.pl-choice__label { font-size: var(--pl-font-size-14); font-weight: var(--pl-font-weight-semibold); line-height: 1.4; }
.pl-choice__description { color: var(--pl-field-help-text); font-size: var(--pl-font-size-14); line-height: 1.45; }
.pl-choice--disabled { color: var(--pl-field-disabled-text); cursor: not-allowed; }
.pl-choice--disabled .pl-choice__description { color: var(--pl-field-disabled-text); }

@media (hover: hover) {
  .pl-choice--card:hover:not(.pl-choice--disabled) {
    border-color: var(--pl-card-border-interactive-hover);
  }
}

@media (forced-colors: active) {
  .pl-choice__control { appearance: auto; }
  .pl-choice__control::before { display: none; }
}

@media (max-width: 640px) {
  .pl-choice-group__options { grid-template-columns: 1fr; }
}

.pl-select-option__indicator {
  display: grid;
  flex: 0 0 auto;
  width: var(--pl-field-accessory-icon-size);
  height: var(--pl-field-accessory-icon-size);
  place-items: center;
  color: var(--pl-action-tertiary-text);
}

.pl-select-option__indicator > svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes pl-select-menu-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(.985);
  }
}

.pl-text-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  appearance: none;
  display: none;
}

input[type='search']::-ms-clear { display: none; }

.pl-text-input--clearable {
  padding-inline-end: var(--pl-field-accessory-action-reserve);
}

.pl-text-input__clear {
  appearance: none;
  position: absolute;
  top: 50%;
  right: var(--pl-field-accessory-action-inset-inline-end);
  display: inline-grid;
  width: var(--pl-field-accessory-action-size);
  height: var(--pl-field-accessory-action-size);
  padding: 9px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pl-action-tertiary-text);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color var(--pl-field-transition-duration) var(--pl-field-transition-easing),
    background-color var(--pl-field-transition-duration) var(--pl-field-transition-easing);
}

.pl-text-input__clear > svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .pl-text-input__clear:hover {
    background: var(--pl-action-tertiary-background-hover);
    color: var(--pl-color-blue-900);
  }
}

.pl-text-input__clear:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: -2px;
}

.pl-text-input__clear:active {
  background: var(--pl-action-tertiary-background-active);
}

.pl-textarea-wrap {
  display: grid;
  gap: var(--pl-field-message-gap);
  min-width: 0;
}

.pl-textarea {
  min-height: var(--pl-field-textarea-min-height);
  resize: vertical;
}

.pl-textarea__counter {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.pl-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .pl-form-control,
  .pl-text-input__clear,
  .pl-select__indicator { transition-duration: .01ms; }
  .pl-select-content[data-state='open'] { animation: none; }
}

@media (forced-colors: active) {
  .pl-form-control { border-color: FieldText; }
  .pl-form-control[aria-invalid='true'] { border-color: Mark; }
  .pl-form-control:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
  .pl-text-input__clear:focus-visible {
    outline-color: Highlight;
  }
  .pl-select__indicator { color: ButtonText; }
  .pl-select-content {
    border-color: ButtonText;
    box-shadow: none;
  }
  .pl-select-option[data-highlighted] { outline: 2px solid Highlight; }
  .pl-select-option[data-state='checked'] { border: 1px solid Highlight; }
}

/* source: components/forms/patterns/generator-guided.css */
.pl-generator-guided {
  display: grid;
  gap: var(--pl-space-5);
  width: min(780px, calc(100vw - 40px));
  padding: 28px;
  border: 1px solid var(--pl-border-default);
  border-radius: var(--pl-radius-card);
  background: var(--pl-surface-default);
  color: var(--pl-text-primary);
}

.pl-generator-guided__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--pl-space-5);
}

.pl-generator-guided__header > div:first-child { display: grid; gap: var(--pl-content-title-description-gap); }
.pl-generator-guided__header h2,
.pl-generator-guided__header p,
.pl-generator-guided__summary strong,
.pl-generator-guided__summary span,
.pl-generator-guided__initial-note,
.pl-generator-guided__status { margin: 0; }

.pl-generator-guided__header h2 { font-size: 1.75rem; font-weight: var(--pl-font-weight-semibold); line-height: 1.18; }
.pl-generator-guided__header p { max-width: 60ch; color: var(--pl-text-secondary); line-height: 1.55; }

/* Insignia de destinatario: geometría del StatusBadge (misma receta que la
   matrícula del Mapa del aula), con la superficie funcional del Generador. */
.pl-generator-guided__destination {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--pl-feedback-badge-gap);
  width: fit-content;
  min-height: var(--pl-feedback-badge-min-height);
  padding-inline: var(--pl-feedback-badge-padding-inline);
  border-radius: var(--pl-feedback-badge-radius);
  background: var(--pl-feature-generator-action-background);
  color: var(--pl-feature-generator-action-text);
  font-size: var(--pl-feedback-badge-font-size);
  font-weight: var(--pl-feedback-badge-font-weight);
  line-height: var(--pl-line-height-compact);
  white-space: nowrap;
}

.pl-generator-guided__destination > span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.pl-wizard-steps,
.pl-generator-guided__steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 3px;
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-subtle);
  list-style: none;
}

.pl-wizard-steps li,
.pl-generator-guided__steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pl-wizard-step-gap);
  min-width: 0;
  min-height: 44px;
  padding: var(--pl-space-2) var(--pl-space-3);
  border-radius: calc(var(--pl-radius-control) - 3px);
  color: var(--pl-text-secondary);
  font-size: var(--pl-wizard-step-font-size);
  font-weight: var(--pl-font-weight-semibold);
  transition:
    background-color var(--pl-duration-normal) var(--pl-easing-standard),
    color var(--pl-duration-normal) var(--pl-easing-standard);
}

.pl-wizard-steps li > span,
.pl-generator-guided__steps li > span {
  display: grid;
  flex: 0 0 auto;
  width: var(--pl-wizard-marker-size);
  height: var(--pl-wizard-marker-size);
  border: 1px solid var(--pl-color-neutral-300);
  border-radius: 7px;
  place-items: center;
  background: var(--pl-surface-default);
  color: inherit;
  font-size: var(--pl-wizard-marker-font-size);
}

.pl-wizard-steps li[data-state='current'],
.pl-generator-guided__steps li[data-state='current'] {
  background: var(--pl-wizard-current-background, var(--pl-feature-generator-action-background));
  color: var(--pl-wizard-current-text, var(--pl-feature-generator-action-text));
}

.pl-wizard-steps li[data-state='current'] > span,
.pl-generator-guided__steps li[data-state='current'] > span {
  border-color: var(--pl-wizard-current-text, var(--pl-feature-generator-action-text));
  background: var(--pl-wizard-current-text, var(--pl-feature-generator-action-text));
  color: var(--pl-action-primary-text);
}

.pl-wizard-steps li[data-state='complete'],
.pl-generator-guided__steps li[data-state='complete'] {
  color: var(--pl-text-primary);
}

.pl-wizard-steps li[data-state='complete'] > span,
.pl-generator-guided__steps li[data-state='complete'] > span {
  border-color: var(--pl-wizard-current-text, var(--pl-feature-generator-action-text));
  background: var(--pl-surface-default);
  color: var(--pl-wizard-current-text, var(--pl-feature-generator-action-text));
}

.pl-generator-guided__summary {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: var(--pl-space-3) var(--pl-space-4);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-subtle);
}

.pl-generator-guided__summary-label {
  color: var(--pl-text-secondary);
  font-size: .75rem;
  font-weight: var(--pl-font-weight-semibold);
}

.pl-generator-guided__summary-content {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pl-space-2);
}

.pl-generator-guided__summary-content strong {
  overflow-wrap: anywhere;
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-generator-guided__summary-content span {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pl-space-2);
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
}

.pl-generator-guided__summary-content span:not(:empty)::before {
  content: '·';
}

.pl-generator-guided__step { display: grid; gap: var(--pl-space-4); }
.pl-generator-guided__fields { display: grid; gap: var(--pl-space-4); }

.pl-generator-guided__disclosure summary:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

.pl-generator-guided__field-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--pl-space-3);
}

.pl-generator-guided__disclosure {
  border-top: 1px solid var(--pl-border-default);
  padding-top: var(--pl-space-3);
}

/* Banda desplegable: fila a todo lo ancho con chevron al extremo derecho
   (mismo vocabulario que la fila del StudentRecord: next cerrado, expand
   abierto). Sin banda, nada indica que el bloque se puede abrir. */
.pl-generator-guided__disclosure summary {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: var(--pl-space-2);
  padding: var(--pl-space-2) var(--pl-space-3);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-subtle);
  color: var(--pl-action-tertiary-text);
  font-weight: var(--pl-font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--pl-duration-normal) var(--pl-easing-standard);
}

@media (hover: hover) {
  .pl-generator-guided__disclosure summary:hover { background: var(--pl-color-neutral-200); }
}

.pl-generator-guided__disclosure summary span { color: var(--pl-text-secondary); font-size: .8125rem; font-weight: 400; }

.pl-generator-guided__disclosure summary > svg {
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  flex: 0 0 auto;
  transition: transform var(--pl-duration-normal) var(--pl-easing-standard);
}

.pl-generator-guided__disclosure[open] summary > svg { transform: rotate(180deg); }
.pl-generator-guided__disclosure-content { display: grid; gap: var(--pl-space-4); padding-top: var(--pl-space-3); }
.pl-generator-guided__activity-options,
.pl-generator-guided__initial-options,
.pl-generator-guided__quiz-options { display: grid; gap: var(--pl-space-4); }
.pl-generator-guided__activity-options { padding: var(--pl-space-4); border-radius: var(--pl-radius-control); background: var(--pl-surface-subtle); }
.pl-generator-guided__activity-type { width: min(100%, 40rem); }
.pl-generator-guided__evidence-mix {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--pl-space-4);
  padding: var(--pl-space-3) var(--pl-space-4);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-default);
}
.pl-generator-guided__evidence-mix-copy { display: grid; gap: var(--pl-content-label-description-gap); }
.pl-generator-guided__evidence-mix p,
.pl-generator-guided__evidence-mix ul { margin: 0; }
.pl-generator-guided__evidence-mix p { color: var(--pl-text-secondary); font-size: var(--pl-font-size-14); line-height: 1.5; }
.pl-generator-guided__evidence-mix ul { display: flex; flex-wrap: wrap; gap: var(--pl-space-2); padding: 0; list-style: none; }
.pl-generator-guided__evidence-mix li {
  padding: 4px 8px;
  border: 1px solid var(--pl-color-violet-200);
  border-radius: var(--pl-feedback-badge-radius);
  background: var(--pl-surface-default);
  color: var(--pl-feature-generator-action-text);
  font-size: .8125rem;
  font-weight: var(--pl-feedback-badge-font-weight);
}
.pl-generator-guided__support-note,
.pl-generator-guided__support-options .pl-choice-group__hint { max-width: none; }
.pl-generator-guided__map-suggestion {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--pl-color-violet-200);
  border-radius: var(--pl-radius-control);
  background: var(--pl-color-violet-50);
}
.pl-generator-guided__map-suggestion p,
.pl-generator-guided__map-suggestion span { margin: 0; }
.pl-generator-guided__map-suggestion p { color: var(--pl-text-primary); line-height: 1.5; }
.pl-generator-guided__map-suggestion span { color: var(--pl-text-secondary); font-size: var(--pl-font-size-14); line-height: 1.5; }
.pl-generator-guided__initial-options { padding-top: var(--pl-space-3); border-top: 1px solid var(--pl-border-default); }

.pl-generator-guided__initial-note { max-width: 70ch; color: var(--pl-text-secondary); font-size: var(--pl-font-size-14); line-height: 1.55; }

.pl-generator-guided__footer { display: grid; gap: var(--pl-space-2); padding-top: var(--pl-space-4); border-top: 1px solid var(--pl-border-default); }
.pl-generator-guided__status { min-height: 1.5em; color: var(--pl-status-success); font-size: var(--pl-font-size-14); font-weight: var(--pl-font-weight-semibold); }

@media (max-width: 640px) {
  .pl-generator-guided { width: min(100% - 24px, 780px); padding: 20px 16px; }
  .pl-generator-guided__header { display: grid; }
  .pl-generator-guided__header h2 { font-size: var(--pl-font-size-24); }
  .pl-wizard-steps li,
  .pl-generator-guided__steps li { gap: var(--pl-wizard-step-gap-mobile); padding-inline: var(--pl-space-2); font-size: var(--pl-wizard-step-font-size-mobile); }
  .pl-wizard-steps li > span,
  .pl-generator-guided__steps li > span { width: var(--pl-wizard-marker-size-mobile); height: var(--pl-wizard-marker-size-mobile); }
  .pl-generator-guided__evidence-mix { grid-template-columns: 1fr; gap: var(--pl-space-3); }
}

@media (max-width: 380px) {
  .pl-wizard-steps li,
  .pl-generator-guided__steps li {
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
    padding: 5px 2px;
    font-size: var(--pl-wizard-step-font-size-compact);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-generator-guided *,
  .pl-generator-guided *::before,
  .pl-generator-guided *::after { scroll-behavior: auto; transition-duration: .01ms !important; }
}

/* source: components/navigation/navigation.css */
.pl-app-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  padding: var(--pl-navigation-shell-inset);
  display: grid;
  grid-template-columns: var(--pl-navigation-sidebar-width) minmax(0, 1fr);
  gap: var(--pl-navigation-shell-gap);
  background: var(--pl-surface-page);
  color: var(--pl-text-primary);
  font-family: var(--pl-font-family-sans);
  transition: grid-template-columns var(--pl-navigation-sidebar-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-app-shell--sidebar-collapsed {
  grid-template-columns: var(--pl-navigation-sidebar-collapsed-width) minmax(0, 1fr);
}

.pl-app-shell *,
.pl-app-shell *::before,
.pl-app-shell *::after {
  box-sizing: border-box;
}

.pl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  margin: -1px;
  white-space: nowrap;
}

/*
 * Page entry is intentionally scoped to the incoming content. The platform
 * is an MPA, so keeping the browser's cross-document snapshots enabled would
 * layer the previous page over the new one while the layout is still settling.
 */
.pl-app-shell__main {
  animation: pl-navigation-page-in var(--pl-navigation-page-transition-duration) var(--pl-navigation-transition-easing) both;
  will-change: opacity, transform;
}

@keyframes pl-navigation-page-in {
  from {
    opacity: 0;
    transform: translateY(var(--pl-navigation-page-transition-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pl-app-shell__skip-link {
  position: fixed;
  top: var(--pl-space-3);
  left: var(--pl-space-3);
  z-index: 1200;
  padding: var(--pl-space-3) var(--pl-space-4);
  border-radius: var(--pl-radius-control);
  background: var(--pl-color-blue-900);
  color: var(--pl-color-neutral-0);
  font-weight: var(--pl-font-weight-semibold);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--pl-space-6)));
  transition: transform var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-app-shell__skip-link:focus {
  transform: translateY(0);
}

.pl-app-shell__sidebar {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: var(--pl-navigation-shell-inset);
  height: calc(100dvh - (var(--pl-navigation-shell-inset) * 2));
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pl-navigation-sidebar-border);
  border-radius: var(--pl-navigation-sidebar-radius);
  background: var(--pl-navigation-sidebar-background);
  box-shadow: var(--pl-navigation-sidebar-shadow);
}

.pl-app-shell__sidebar-inner {
  display: flex;
  height: 100%;
  min-height: 0;
  padding: 0 var(--pl-navigation-sidebar-padding) var(--pl-navigation-sidebar-padding);
  flex-direction: column;
}

.pl-app-shell__brand-row {
  display: flex;
  min-height: var(--pl-navigation-brand-height);
  align-items: center;
  gap: var(--pl-space-2);
  border-bottom: 1px solid var(--pl-navigation-sidebar-border);
}

.pl-app-shell__brand {
  order: 1;
  display: inline-flex;
  max-width: 180px;
  min-width: 0;
  align-items: center;
  color: var(--pl-navigation-brand-text);
  font-size: var(--pl-font-size-18);
  font-weight: var(--pl-font-weight-bold);
  line-height: var(--pl-line-height-compact);
  text-decoration: none;
  opacity: 1;
  transition:
    max-width var(--pl-navigation-sidebar-transition-duration) var(--pl-navigation-transition-easing),
    opacity var(--pl-navigation-sidebar-fade-duration) var(--pl-navigation-transition-easing);
}

.pl-app-shell__logo {
  display: block;
  width: 168px;
  max-width: 100%;
  height: auto;
}

.pl-app-shell__brand-row > [data-radix-collection-item],
.pl-app-shell__brand-row > button {
  order: 2;
  margin-left: auto;
}

.pl-app-shell__sidebar .pl-app-shell__brand-row > .pl-action,
.pl-app-shell__drawer .pl-app-shell__brand-row > .pl-action,
.pl-app-shell__topbar > .pl-action {
  border-color: transparent;
  background: transparent;
  color: var(--pl-navigation-brand-context);
}

@media (hover: hover) {
  .pl-app-shell__sidebar .pl-app-shell__brand-row > .pl-action:hover:not(:disabled),
  .pl-app-shell__drawer .pl-app-shell__brand-row > .pl-action:hover:not(:disabled),
  .pl-app-shell__topbar > .pl-action:hover:not(:disabled) {
    border-color: transparent;
    background: rgba(255, 255, 255, .08);
    color: var(--pl-navigation-brand-text);
  }
}

.pl-app-shell__sidebar .pl-app-shell__brand-row > .pl-action:focus-visible,
.pl-app-shell__drawer .pl-app-shell__brand-row > .pl-action:focus-visible,
.pl-app-shell__topbar > .pl-action:focus-visible {
  outline: 2px solid var(--pl-color-neutral-0);
  outline-offset: 2px;
  box-shadow: none;
}

.pl-app-shell__primary-nav,
.pl-app-shell__utility-nav {
  display: grid;
  gap: var(--pl-space-1);
}

.pl-app-shell__primary-nav {
  min-height: 0;
  overflow-y: auto;
  padding-block: var(--pl-space-4);
}

.pl-nav-group {
  margin: var(--pl-space-3) var(--pl-navigation-item-padding-inline) var(--pl-space-1);
  color: var(--pl-navigation-item-text);
  font-size: var(--pl-font-size-12);
  font-weight: var(--pl-font-weight-semibold);
  letter-spacing: .08em;
  line-height: var(--pl-line-height-compact);
  opacity: .68;
  text-transform: uppercase;
  white-space: nowrap;
}

.pl-app-shell__utility-nav {
  margin-top: auto;
  padding-top: var(--pl-space-3);
  border-top: 1px solid var(--pl-navigation-sidebar-border);
}

[data-feature='home'] {
  --pl-feature-header-start: var(--pl-feature-home-header-start);
  --pl-feature-header-highlight: var(--pl-feature-home-header-highlight);
  --pl-feature-header-end: var(--pl-feature-home-header-end);
  --pl-feature-header-illustration: var(--pl-feature-home-header-end);
  --pl-feature-sidebar-background: var(--pl-feature-home-sidebar-background);
  --pl-feature-sidebar-accent: var(--pl-feature-home-sidebar-accent);
}

[data-feature='texts'] {
  --pl-feature-header-start: var(--pl-feature-texts-header-start);
  --pl-feature-header-highlight: var(--pl-feature-texts-header-highlight);
  --pl-feature-header-end: var(--pl-feature-texts-header-end);
  --pl-feature-header-illustration: var(--pl-feature-texts-header-illustration);
  --pl-feature-sidebar-background: var(--pl-feature-texts-sidebar-background);
  --pl-feature-sidebar-active-background: var(--pl-feature-texts-sidebar-background);
  --pl-feature-sidebar-accent: var(--pl-feature-texts-sidebar-accent);
  --pl-feature-action-background: var(--pl-feature-texts-action-background);
  --pl-feature-action-hover-background: var(--pl-feature-texts-action-background-hover);
  --pl-feature-action-text: var(--pl-feature-texts-action-text);
  --pl-feature-illustration-width: var(--pl-feature-texts-header-illustration-width);
  --pl-feature-illustration-width-mobile: var(--pl-feature-texts-header-illustration-width-mobile);
  --pl-feature-illustration-bottom: var(--pl-feature-texts-header-illustration-bottom);
  --pl-feature-illustration-bottom-mobile: var(--pl-feature-texts-header-illustration-bottom-mobile);
  --pl-feature-illustration-inset: var(--pl-feature-texts-header-illustration-inset);
  --pl-feature-illustration-inset-mobile: var(--pl-feature-texts-header-illustration-inset-mobile);
}

[data-feature='generator'] {
  --pl-feature-header-start: var(--pl-feature-generator-header-start);
  --pl-feature-header-highlight: var(--pl-feature-generator-header-highlight);
  --pl-feature-header-end: var(--pl-feature-generator-header-end);
  --pl-feature-header-illustration: var(--pl-feature-generator-header-illustration);
  --pl-feature-sidebar-background: var(--pl-feature-generator-sidebar-background);
  --pl-feature-sidebar-active-background: color-mix(in srgb, var(--pl-feature-generator-sidebar-background) 44%, transparent);
  --pl-feature-sidebar-accent: var(--pl-feature-generator-sidebar-accent);
  --pl-feature-action-background: var(--pl-feature-generator-action-background);
  --pl-feature-action-hover-background: var(--pl-feature-generator-action-background-hover);
  --pl-feature-action-text: var(--pl-feature-generator-action-text);
}

[data-feature='reading-plan'] {
  --pl-feature-header-start: var(--pl-feature-reading-plan-header-start);
  --pl-feature-header-highlight: var(--pl-feature-reading-plan-header-highlight);
  --pl-feature-header-end: var(--pl-feature-reading-plan-header-end);
  --pl-feature-header-illustration: var(--pl-feature-reading-plan-header-illustration);
  --pl-feature-sidebar-background: var(--pl-feature-reading-plan-sidebar-background);
  --pl-feature-sidebar-active-background: var(--pl-feature-reading-plan-sidebar-background);
  --pl-feature-sidebar-accent: var(--pl-feature-reading-plan-sidebar-accent);
  --pl-feature-action-background: var(--pl-feature-reading-plan-action-background);
  --pl-feature-action-hover-background: var(--pl-feature-reading-plan-action-background-hover);
  --pl-feature-action-text: var(--pl-feature-reading-plan-action-text);
  --pl-feature-illustration-width: var(--pl-feature-reading-plan-header-illustration-width);
  --pl-feature-illustration-width-mobile: var(--pl-feature-reading-plan-header-illustration-width-mobile);
  --pl-feature-illustration-bottom: var(--pl-feature-reading-plan-header-illustration-bottom);
  --pl-feature-illustration-bottom-mobile: var(--pl-feature-reading-plan-header-illustration-bottom-mobile);
  --pl-feature-illustration-inset: var(--pl-feature-reading-plan-header-illustration-inset);
  --pl-feature-illustration-inset-mobile: var(--pl-feature-reading-plan-header-illustration-inset-mobile);
}

[data-feature='settings'] {
  --pl-feature-header-start: var(--pl-feature-settings-header-start);
  --pl-feature-header-highlight: var(--pl-feature-settings-header-highlight);
  --pl-feature-header-end: var(--pl-feature-settings-header-end);
  --pl-feature-header-illustration: var(--pl-feature-settings-header-illustration);
  --pl-feature-sidebar-background: var(--pl-feature-settings-sidebar-background);
  --pl-feature-sidebar-accent: var(--pl-feature-settings-sidebar-accent);
}

[data-feature='settings'] .pl-page-header__illustration {
  right: var(--pl-feature-settings-header-artwork-inset);
  bottom: var(--pl-feature-settings-header-artwork-bottom);
  width: var(--pl-feature-settings-header-artwork-width);
}

[data-feature='progress'] {
  --pl-feature-header-start: var(--pl-feature-progress-header-start);
  --pl-feature-header-highlight: var(--pl-feature-progress-header-highlight);
  --pl-feature-header-end: var(--pl-feature-progress-header-end);
  --pl-feature-header-illustration: var(--pl-feature-progress-header-illustration);
  --pl-feature-sidebar-background: var(--pl-feature-progress-sidebar-background);
  --pl-feature-sidebar-active-background: color-mix(in srgb, var(--pl-feature-progress-sidebar-background) 56%, transparent);
  --pl-feature-sidebar-accent: var(--pl-feature-progress-sidebar-accent);
  --pl-feature-action-background: var(--pl-feature-progress-action-background);
  --pl-feature-action-hover-background: var(--pl-feature-progress-action-background-hover);
  --pl-feature-action-text: var(--pl-feature-progress-action-text);
  --pl-feature-illustration-width: var(--pl-feature-progress-header-illustration-width);
  --pl-feature-illustration-width-mobile: var(--pl-feature-progress-header-illustration-width-mobile);
  --pl-feature-illustration-bottom: var(--pl-feature-progress-header-illustration-bottom);
  --pl-feature-illustration-bottom-mobile: var(--pl-feature-progress-header-illustration-bottom-mobile);
  --pl-feature-illustration-inset: var(--pl-feature-progress-header-illustration-inset);
  --pl-feature-illustration-inset-mobile: var(--pl-feature-progress-header-illustration-inset-mobile);
}

[data-feature='tools'] {
  --pl-feature-header-start: var(--pl-feature-tools-header-start);
  --pl-feature-header-highlight: var(--pl-feature-tools-header-highlight);
  --pl-feature-header-end: var(--pl-feature-tools-header-end);
  --pl-feature-header-illustration: var(--pl-feature-tools-header-illustration);
  --pl-feature-sidebar-background: var(--pl-feature-tools-sidebar-background);
  --pl-feature-sidebar-active-background: color-mix(in srgb, var(--pl-feature-tools-sidebar-background) 56%, transparent);
  --pl-feature-sidebar-accent: var(--pl-feature-tools-sidebar-accent);
  --pl-feature-action-background: var(--pl-feature-tools-action-background);
  --pl-feature-action-hover-background: var(--pl-feature-tools-action-background-hover);
  --pl-feature-action-text: var(--pl-feature-tools-action-text);
  --pl-feature-illustration-width: var(--pl-feature-tools-header-illustration-width);
  --pl-feature-illustration-width-mobile: var(--pl-feature-tools-header-illustration-width-mobile);
  --pl-feature-illustration-bottom: var(--pl-feature-tools-header-illustration-bottom);
  --pl-feature-illustration-bottom-mobile: var(--pl-feature-tools-header-illustration-bottom-mobile);
  --pl-feature-illustration-inset: var(--pl-feature-tools-header-illustration-inset);
  --pl-feature-illustration-inset-mobile: var(--pl-feature-tools-header-illustration-inset-mobile);
}

.pl-nav-item {
  position: relative;
  display: flex;
  min-height: var(--pl-navigation-item-min-height);
  padding: var(--pl-space-2) var(--pl-navigation-item-padding-inline);
  align-items: center;
  gap: var(--pl-navigation-item-gap);
  border-radius: var(--pl-navigation-item-radius);
  color: var(--pl-navigation-item-text);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-navigation-item-font-weight);
  line-height: var(--pl-line-height-compact);
  text-decoration: none;
  transition:
    color var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing),
    background-color var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-nav-item::after {
  width: 6px;
  height: 6px;
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 2px;
  background: transparent;
  content: '';
  transform: scale(.65);
  transition:
    background-color var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing),
    transform var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-nav-item__icon {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
}

.pl-nav-item__icon > svg {
  display: block;
  width: 20px;
  height: 20px;
}

.pl-nav-item__label {
  max-width: 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transition:
    max-width var(--pl-navigation-sidebar-transition-duration) var(--pl-navigation-transition-easing),
    opacity var(--pl-navigation-sidebar-fade-duration) var(--pl-navigation-transition-easing);
}

@media (hover: hover) {
  .pl-nav-item:hover {
    background: var(--pl-navigation-item-hover-background);
    color: var(--pl-navigation-brand-text);
  }
}

.pl-nav-item:focus-visible,
.pl-app-shell__brand:focus-visible,
.pl-app-shell__mobile-brand:focus-visible {
  outline: 2px solid var(--pl-color-neutral-0);
  outline-offset: 2px;
}

.pl-breadcrumbs a:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

.pl-nav-item--active,
.pl-nav-item[aria-current='page'] {
  width: min(var(--pl-navigation-item-active-width), 100%);
  border-radius: var(--pl-navigation-item-active-radius);
  background: var(--pl-feature-sidebar-active-background, var(--pl-feature-sidebar-background, var(--pl-navigation-item-active-background)));
  color: var(--pl-navigation-item-active-text);
  font-weight: var(--pl-navigation-item-active-font-weight);
}

/* A rounded bookmark tail gives the active destination a reading-specific
   silhouette while keeping the Figma rectangle as its 236 x 48 base. */
.pl-nav-item--active,
.pl-nav-item[aria-current='page'],
.pl-app-shell__primary-nav .pl-nav-item:hover {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20236%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M8%200H198C204%200%20209%202%20214%206C220%2011%20227%2015%20232%2019C235%2021%20236%2022%20236%2024C236%2026%20235%2027%20232%2029C227%2033%20220%2037%20214%2042C209%2046%20204%2048%20198%2048H8C3.6%2048%200%2044.4%200%2040V8C0%203.6%203.6%200%208%200Z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20236%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M8%200H198C204%200%20209%202%20214%206C220%2011%20227%2015%20232%2019C235%2021%20236%2022%20236%2024C236%2026%20235%2027%20232%2029C227%2033%20220%2037%20214%2042C209%2046%20204%2048%20198%2048H8C3.6%2048%200%2044.4%200%2040V8C0%203.6%203.6%200%208%200Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}

.pl-nav-item--active .pl-nav-item__icon,
.pl-nav-item[aria-current='page'] .pl-nav-item__icon {
  color: var(--pl-feature-sidebar-accent, var(--pl-navigation-item-active-text));
}

.pl-nav-item--active::after,
.pl-nav-item[aria-current='page']::after {
  position: absolute;
  right: var(--pl-navigation-item-current-marker-inset);
  margin-left: 0;
  background: var(--pl-feature-sidebar-accent, var(--pl-navigation-item-current-marker));
  transform: scale(1);
}

.pl-app-shell__workspace {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(100dvh - (var(--pl-navigation-shell-inset) * 2));
}

.pl-app-shell__topbar {
  display: none;
}

.pl-app-shell__main {
  width: 100%;
  max-width: var(--pl-navigation-content-max-width);
  min-width: 0;
  margin-inline: auto;
  padding: var(--pl-navigation-content-padding-desktop);
  padding-top: var(--pl-navigation-content-padding-top-desktop);
  outline: 0;
}

.pl-app-shell__main:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: -2px;
}

.pl-app-shell__overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: var(--pl-navigation-overlay-background);
  animation: pl-navigation-overlay-in var(--pl-navigation-drawer-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-app-shell__drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1100;
  width: min(var(--pl-navigation-drawer-width), calc(100vw - var(--pl-space-8)));
  border-right: 1px solid var(--pl-navigation-sidebar-border);
  background: var(--pl-navigation-sidebar-background);
  box-shadow: 12px 0 32px rgba(12, 26, 41, .30);
  outline: 0;
  animation: pl-navigation-drawer-in var(--pl-navigation-drawer-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-page-header {
  display: grid;
  gap: var(--pl-navigation-page-header-gap);
  margin-bottom: var(--pl-space-8);
}

.pl-page-header__surface {
  min-width: 0;
}

.pl-page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pl-space-6);
}

.pl-page-header__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--pl-space-4);
}

.pl-page-header__copy {
  display: grid;
  min-width: 0;
  gap: var(--pl-content-title-description-gap);
}

.pl-page-header__copy h1,
.pl-page-header__description p {
  margin: 0;
}

.pl-page-header__copy h1 {
  color: var(--pl-text-primary);
  font-size: var(--pl-navigation-page-title-font-size);
  font-weight: var(--pl-navigation-page-title-font-weight);
  line-height: var(--pl-line-height-heading);
  letter-spacing: -.02em;
}

.pl-page-header__description {
  max-width: var(--pl-navigation-page-description-max-width);
  color: var(--pl-text-secondary);
  font-family: var(--pl-navigation-page-description-font-family);
  font-size: var(--pl-font-size-16);
  font-weight: var(--pl-navigation-page-description-font-weight);
  line-height: 1.55;
}

.pl-page-header__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pl-space-2);
}

.pl-page-header--feature .pl-page-header__surface {
  position: relative;
  overflow: hidden;
  min-height: var(--pl-navigation-feature-header-min-height);
  padding: var(--pl-navigation-feature-header-padding-block) var(--pl-navigation-feature-header-padding-inline);
  border: 0;
  border-radius: var(--pl-navigation-feature-header-radius);
  background-color: var(--pl-feature-header-start);
  background-image: linear-gradient(var(--pl-navigation-feature-header-gradient-angle), var(--pl-feature-header-start) 0%, var(--pl-feature-header-highlight) var(--pl-navigation-feature-header-gradient-highlight-stop), var(--pl-feature-header-end) var(--pl-navigation-feature-header-gradient-end-stop), var(--pl-feature-header-illustration) var(--pl-navigation-feature-header-gradient-illustration-stop));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    var(--pl-navigation-feature-header-shadow);
  color: var(--pl-color-neutral-0);
}

.pl-page-header--feature .pl-page-header__surface::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.72'/%3E%3C/svg%3E");
  background-size: var(--pl-navigation-feature-header-grain-size) var(--pl-navigation-feature-header-grain-size);
  content: '';
  mix-blend-mode: multiply;
  opacity: var(--pl-navigation-feature-header-grain-opacity);
  pointer-events: none;
}

.pl-page-header--feature .pl-page-header__row {
  position: relative;
  z-index: 3;
  min-height: calc(var(--pl-navigation-feature-header-min-height) - (2 * var(--pl-navigation-feature-header-padding-block)));
  align-items: center;
}

.pl-page-header--feature .pl-page-header__identity {
  width: 100%;
  max-width: var(--pl-navigation-feature-header-copy-max-width);
}

.pl-page-header__illustration {
  position: absolute;
  z-index: 1;
  right: var(--pl-feature-illustration-inset, var(--pl-navigation-feature-header-illustration-inset));
  bottom: var(--pl-feature-illustration-bottom, var(--pl-navigation-feature-header-illustration-bottom));
  display: grid;
  width: var(--pl-feature-illustration-width, var(--pl-navigation-feature-header-illustration-width));
  place-items: center;
  pointer-events: none;
  user-select: none;
}

.pl-page-header__illustration-artwork,
.pl-page-header__illustration-artwork > img,
.pl-page-header__illustration-artwork > svg {
  display: block;
  width: 100%;
  height: auto;
}

.pl-page-header--feature .pl-page-header__copy h1,
.pl-page-header--feature .pl-page-header__description {
  color: var(--pl-color-neutral-0);
}

.pl-page-header--feature .pl-page-header__description {
  opacity: .92;
  text-wrap: pretty;
}

.pl-page-header--feature .pl-action--primary.pl-action--tone-default {
  border-color: var(--pl-color-neutral-0);
  background: var(--pl-color-neutral-0);
  color: var(--pl-feature-header-start);
}

.pl-page-header--feature .pl-action--secondary.pl-action--tone-default {
  border-color: var(--pl-feature-action-background, var(--pl-feature-sidebar-accent));
  background: var(--pl-feature-action-background, var(--pl-feature-sidebar-accent));
  color: var(--pl-feature-action-text, var(--pl-feature-sidebar-background));
}

.pl-page-header--feature .pl-action--tertiary.pl-action--tone-default {
  color: var(--pl-color-neutral-0);
}

@media (hover: hover) {
  .pl-page-header--feature .pl-action--primary.pl-action--tone-default:hover:not(:disabled) {
    border-color: var(--pl-color-neutral-100);
    background: var(--pl-color-neutral-100);
    color: var(--pl-feature-header-end);
  }

  .pl-page-header--feature .pl-action--secondary.pl-action--tone-default:hover:not(:disabled),
  .pl-page-header--feature .pl-action--tertiary.pl-action--tone-default:hover:not(:disabled) {
    color: var(--pl-feature-action-text, var(--pl-feature-sidebar-background));
  }

  .pl-page-header--feature .pl-action--secondary.pl-action--tone-default:hover:not(:disabled) {
    border-color: var(--pl-feature-action-hover-background, var(--pl-feature-sidebar-accent));
    background: var(--pl-feature-action-background, var(--pl-feature-sidebar-accent));
    background: var(--pl-feature-action-hover-background, color-mix(in srgb, var(--pl-feature-sidebar-accent) 88%, white));
  }

  .pl-page-header--feature .pl-action--tertiary.pl-action--tone-default:hover:not(:disabled) {
    border-color: var(--pl-color-neutral-0);
    background: rgba(255, 255, 255, .12);
    color: var(--pl-color-neutral-0);
  }
}

.pl-page-header--feature .pl-action--secondary.pl-action--tone-default:active:not(:disabled) {
  border-color: var(--pl-feature-action-background, var(--pl-feature-sidebar-accent));
  background: var(--pl-feature-action-background, var(--pl-feature-sidebar-accent));
  color: var(--pl-feature-action-text, var(--pl-feature-sidebar-background));
}

.pl-page-header--feature .pl-action:focus-visible {
  box-shadow:
    0 0 0 var(--pl-button-focus-inner-width) var(--pl-feature-header-start),
    0 0 0 var(--pl-button-focus-outer-width) var(--pl-color-neutral-0);
}

.pl-breadcrumbs ol {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-navigation-breadcrumb-gap);
  list-style: none;
}

.pl-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-navigation-breadcrumb-gap);
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: var(--pl-line-height-compact);
}

.pl-breadcrumbs a {
  color: var(--pl-action-tertiary-text);
  font-weight: var(--pl-font-weight-semibold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pl-breadcrumbs [aria-current='page'] {
  color: var(--pl-text-primary);
}

.pl-breadcrumbs__separator {
  width: 16px;
  height: 16px;
  color: var(--pl-color-neutral-500);
}

@keyframes pl-navigation-overlay-in {
  from { opacity: 0; }
}

@keyframes pl-navigation-drawer-in {
  from { transform: translateX(-100%); }
}

@media (min-width: 961px) {
  .pl-app-shell--sidebar-collapsed .pl-app-shell__sidebar-inner {
    padding-inline: var(--pl-space-2);
  }

  .pl-app-shell--sidebar-collapsed .pl-app-shell__brand-row {
    justify-content: center;
  }

  .pl-app-shell--sidebar-collapsed .pl-app-shell__brand {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
  }

  .pl-app-shell--sidebar-collapsed .pl-app-shell__brand-row > [data-radix-collection-item],
  .pl-app-shell--sidebar-collapsed .pl-app-shell__brand-row > button {
    margin-left: 0;
  }

  .pl-app-shell--sidebar-collapsed .pl-nav-item {
    padding-inline: 0;
    justify-content: center;
    gap: 0;
  }

  .pl-app-shell--sidebar-collapsed .pl-nav-group {
    height: 1px;
    margin: var(--pl-space-2) var(--pl-space-1) var(--pl-space-1);
    overflow: hidden;
    background: var(--pl-navigation-sidebar-border);
    color: transparent;
    font-size: 0;
    opacity: 1;
  }

  .pl-app-shell--sidebar-collapsed .pl-nav-item__label {
    max-width: 0;
    opacity: 0;
  }

  .pl-app-shell--sidebar-collapsed .pl-nav-item::after {
    display: none;
  }

  .pl-app-shell--sidebar-collapsed .pl-nav-item--active,
  .pl-app-shell--sidebar-collapsed .pl-nav-item[aria-current='page'],
  .pl-app-shell--sidebar-collapsed .pl-app-shell__primary-nav .pl-nav-item:hover {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .pl-app-shell__overlay,
  .pl-app-shell__drawer {
    display: none;
  }
}

@media (max-width: 960px) {
  .pl-app-shell {
    display: block;
    padding: 0;
  }

  .pl-app-shell__sidebar {
    display: none;
  }

  .pl-app-shell__topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    min-height: var(--pl-navigation-topbar-height);
    padding-inline: var(--pl-navigation-content-padding-mobile);
    align-items: center;
    gap: var(--pl-space-3);
    border-bottom: 1px solid var(--pl-navigation-sidebar-border);
    background: var(--pl-navigation-topbar-background);
  }

  .pl-app-shell__mobile-brand {
    color: var(--pl-navigation-brand-text);
    font-size: var(--pl-font-size-18);
    font-weight: var(--pl-font-weight-bold);
    line-height: var(--pl-line-height-compact);
    text-decoration: none;
  }

  .pl-app-shell__topbar .pl-app-shell__logo {
    width: 150px;
  }

  .pl-app-shell__main {
    padding: var(--pl-navigation-content-padding-tablet);
  }

  .pl-page-header__illustration {
    right: 0;
    width: 380px;
  }

  [data-feature='settings'] .pl-page-header__illustration {
    right: var(--pl-feature-settings-header-artwork-inset-tablet);
    bottom: var(--pl-feature-settings-header-artwork-bottom-tablet);
    width: var(--pl-feature-settings-header-artwork-width-tablet);
  }
}

@media (min-width: 961px) and (max-width: 1199px) {
  [data-feature='settings'] .pl-page-header__illustration {
    right: var(--pl-feature-settings-header-artwork-inset-tablet);
    bottom: var(--pl-feature-settings-header-artwork-bottom-tablet);
    width: var(--pl-feature-settings-header-artwork-width-tablet);
  }
}

@media (min-width: 621px) and (max-width: 1199px) {
  [data-feature='settings'].pl-page-header--feature .pl-page-header__identity {
    max-width: min(100%, 240px);
  }
}

@media (max-width: 640px) {
  .pl-app-shell__main {
    padding: var(--pl-navigation-content-padding-mobile);
  }

  .pl-page-header {
    margin-bottom: var(--pl-space-6);
  }

  .pl-page-header__row {
    display: grid;
    gap: var(--pl-space-4);
  }

  .pl-page-header--feature .pl-page-header__surface {
    min-height: var(--pl-navigation-feature-header-min-height-mobile);
    padding: var(--pl-navigation-feature-header-padding-mobile);
    border-radius: var(--pl-navigation-feature-header-radius-mobile);
    background-image: linear-gradient(var(--pl-navigation-feature-header-gradient-angle), var(--pl-feature-header-start) 0%, var(--pl-feature-header-highlight) 52%, var(--pl-feature-header-end) 100%);
  }

  [data-feature='texts'].pl-page-header--feature .pl-page-header__surface {
    background-image: linear-gradient(
      var(--pl-navigation-feature-header-gradient-angle),
      var(--pl-feature-header-start) 0%,
      var(--pl-feature-header-highlight) var(--pl-navigation-feature-header-gradient-highlight-stop),
      var(--pl-feature-header-end) var(--pl-navigation-feature-header-gradient-end-stop),
      var(--pl-feature-header-illustration) 100%
    );
  }

  [data-feature='settings'].pl-page-header--feature .pl-page-header__surface {
    background-image: linear-gradient(var(--pl-navigation-feature-header-gradient-angle), var(--pl-feature-header-start) 0%, var(--pl-feature-header-end) 58%, var(--pl-feature-header-illustration) 100%);
  }

  .pl-page-header__identity {
    align-items: flex-start;
  }

  .pl-page-header--feature .pl-page-header__identity {
    width: 100%;
    max-width: var(--pl-navigation-feature-header-copy-max-width-mobile);
    min-width: 0;
  }

  .pl-page-header__copy h1 {
    font-size: var(--pl-navigation-page-title-font-size-mobile);
  }

  .pl-page-header--feature .pl-page-header__copy h1 {
    font-size: var(--pl-navigation-feature-header-title-size-mobile);
  }

  .pl-page-header--feature .pl-page-header__description {
    min-width: 0;
    width: var(--pl-navigation-feature-header-description-max-width-mobile);
    max-width: var(--pl-navigation-feature-header-description-max-width-mobile);
    font-size: var(--pl-navigation-feature-header-description-size-mobile);
  }

  .pl-page-header__illustration {
    right: var(--pl-feature-illustration-inset-mobile, var(--pl-navigation-feature-header-illustration-inset-mobile));
    bottom: var(--pl-feature-illustration-bottom-mobile, var(--pl-navigation-feature-header-illustration-bottom-mobile));
    display: grid;
    width: var(--pl-feature-illustration-width-mobile, var(--pl-navigation-feature-header-illustration-width-mobile));
  }

  [data-feature='settings'] .pl-page-header__illustration {
    right: var(--pl-feature-settings-header-artwork-inset-mobile);
    bottom: var(--pl-feature-settings-header-artwork-bottom-mobile);
    width: var(--pl-feature-settings-header-artwork-width-mobile);
  }

  .pl-page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .pl-page-header--feature .pl-page-header__actions .pl-action {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-app-shell,
  .pl-app-shell__sidebar,
  .pl-app-shell__skip-link,
  .pl-app-shell__brand,
  .pl-nav-item,
  .pl-nav-item__label { transition-duration: .01ms; }
  .pl-app-shell__overlay,
  .pl-app-shell__drawer { animation: none; }
  .pl-app-shell__main { animation: none; }
}

@media (forced-colors: active) {
  .pl-app-shell__sidebar,
  .pl-app-shell__topbar,
  .pl-app-shell__drawer { border-color: CanvasText; }
  .pl-nav-item--active,
  .pl-nav-item[aria-current='page'],
  .pl-app-shell__primary-nav .pl-nav-item:hover {
    border: 2px solid Highlight;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .pl-nav-item::after { display: none; }
  .pl-app-shell__drawer { box-shadow: none; }
  .pl-app-shell__overlay { background: Canvas; opacity: .75; }
  .pl-page-header--feature .pl-page-header__surface {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .pl-page-header--feature .pl-page-header__copy h1,
  .pl-page-header--feature .pl-page-header__description { color: CanvasText; }
  .pl-page-header__illustration { display: none; }
}

/* source: components/navigation/Breadcrumbs/breadcrumbs.css */
.pl-breadcrumbs ol {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-navigation-breadcrumb-gap);
  list-style: none;
}

.pl-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-navigation-breadcrumb-gap);
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: var(--pl-line-height-compact);
}

.pl-breadcrumbs a {
  color: var(--pl-action-tertiary-text);
  font-weight: var(--pl-font-weight-semibold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pl-breadcrumbs a:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

.pl-breadcrumbs [aria-current='page'] {
  color: var(--pl-text-primary);
}

.pl-breadcrumbs__separator {
  width: 16px;
  height: 16px;
  color: var(--pl-color-neutral-500);
}

/* source: components/navigation/Pagination/pagination.css */
/* Paginación canónica (VR-002). */
.pl-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

.pl-pagination__count,
.pl-pagination > [aria-live] {
  margin-inline-end: auto;
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  font-variant-numeric: tabular-nums;
}

.pl-pagination__actions {
  display: flex;
  align-items: center;
  gap: var(--pl-space-2);
  flex: 0 0 auto;
  margin-inline-start: auto;
}

/* Compatibilidad temporal: las vistas Razor anteriores al wrapper
   `pl-pagination__actions` conservan las dos flechas como hijos directos. */
.pl-pagination > .pl-action + .pl-action {
  margin-inline-start: var(--pl-space-2);
}

@media (max-width: 620px) {
  .pl-pagination__count {
    min-width: 0;
  }
}

/* source: components/tools/tools.css */
.pl-tools-page {
  display: grid;
  gap: var(--pl-space-6);
  min-width: 0;
}

.pl-tools-hub {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pl-feature-tools-card-reference-width)), 1fr));
  gap: var(--pl-space-4);
  list-style: none;
}

.pl-tools-hub > li {
  min-width: 0;
}

.pl-tools-hub__item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  height: var(--pl-feature-tools-card-height);
  padding: var(--pl-feature-tools-card-padding);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pl-feature-tools-card-gap);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--pl-feature-tools-card-radius);
  background: var(--pl-feature-tools-card-surface);
  color: var(--pl-text-primary);
  text-decoration: none;
  transition:
    border-color var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing),
    box-shadow var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing),
    transform var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-tools-hub__item:focus-visible {
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

@media (hover: hover) {
  .pl-tools-hub__item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--pl-feature-tools-action-solid) 12%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--pl-feature-tools-header-start) 6%, transparent);
  }
}

.pl-tools-hub__item:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pl-feature-tools-header-start) 5%, transparent);
}

.pl-tools-hub__content {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: var(--pl-space-4);
  align-content: end;
  overflow: hidden;
  border-radius: calc(var(--pl-feature-tools-card-radius) - var(--pl-feature-tools-card-padding));
  background: var(--pl-feature-tools-card-content-surface);
}

.pl-tools-hub__artwork {
  position: absolute;
  top: var(--pl-space-3);
  right: var(--pl-space-3);
  display: grid;
  width: var(--pl-feature-tools-card-icon-size);
  height: var(--pl-feature-tools-card-icon-size);
  place-items: center;
  color: var(--pl-feature-tools-action-solid);
  opacity: var(--pl-feature-tools-card-icon-opacity);
  pointer-events: none;
  transition: opacity var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-tools-hub__artwork svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pl-tools-hub__copy {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: var(--pl-content-title-description-gap);
}

.pl-tools-hub__copy strong {
  color: var(--pl-feature-tools-action-solid);
  font-size: var(--pl-font-size-20);
  font-weight: var(--pl-font-weight-semibold);
  line-height: var(--pl-line-height-heading);
  text-wrap: balance;
}

.pl-tools-hub__copy > span {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-regular);
  line-height: 1.45;
  text-wrap: pretty;
}

.pl-tools-hub__action {
  display: flex;
  width: 100%;
  min-height: var(--pl-feature-tools-card-action-size);
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-3);
  padding-inline-start: calc(var(--pl-space-4) - var(--pl-feature-tools-card-padding));
  color: var(--pl-feature-tools-action-text);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-medium);
}

.pl-tools-hub__action-icon {
  display: grid;
  width: var(--pl-feature-tools-card-action-size);
  height: var(--pl-feature-tools-card-action-size);
  flex: 0 0 auto;
  place-items: center;
  border-radius: calc(var(--pl-feature-tools-card-radius) - 2px);
  background: var(--pl-feature-tools-action-background);
  color: var(--pl-feature-tools-action-solid);
  transition:
    background-color var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing),
    color var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

.pl-tools-hub__action-icon svg {
  width: 22px;
  height: 22px;
  transition: transform var(--pl-navigation-transition-duration) var(--pl-navigation-transition-easing);
}

@media (hover: hover) {
  .pl-tools-hub__item:hover .pl-tools-hub__action-icon {
    background: var(--pl-feature-tools-action-background-hover);
    color: var(--pl-feature-tools-action-solid-hover);
  }

  .pl-tools-hub__item:hover .pl-tools-hub__action-icon svg {
    transform: translateX(2px);
  }

  .pl-tools-hub__item:hover .pl-tools-hub__artwork {
    opacity: var(--pl-feature-tools-card-icon-opacity-hover);
  }
}

.pl-app-shell__main[data-page-leaving='true'] {
  pointer-events: none;
  animation: pl-tools-page-out 140ms var(--pl-navigation-transition-easing) both;
}

@keyframes pl-tools-page-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.pl-tool-workspace {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  align-items: start;
  gap: var(--pl-space-5);
  min-width: 0;
}

.pl-tool-workspace__form,
.pl-tool-workspace__result {
  min-width: 0;
  background: var(--pl-surface-default);
}

.pl-tool-workspace__form > .pl-card__header {
  align-items: center;
}

.pl-tool-workspace__intro-icon,
.pl-tool-workspace__empty-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  background: var(--pl-feature-tools-action-background);
  color: var(--pl-feature-tools-action-text);
}

.pl-tool-workspace__intro-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--pl-radius-control);
}

.pl-tool-workspace__intro-icon svg {
  width: 24px;
  height: 24px;
}

.pl-tool-workspace__form .pl-card__body,
.pl-tool-workspace__form form,
.pl-tool-form-grid {
  display: grid;
  gap: var(--pl-space-4);
  min-width: 0;
}

.pl-tool-form-grid--two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pl-tool-form-grid__full {
  grid-column: 1 / -1;
}

.pl-tool-workspace__eyebrow {
  margin: 0;
  color: var(--pl-feature-tools-action-text);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-tool-source {
  display: grid;
  min-width: 0;
  gap: var(--pl-space-3);
  padding: var(--pl-space-4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pl-feature-tools-action-background-hover) 72%, var(--pl-border-default));
  border-radius: var(--pl-radius-control);
  background: color-mix(in srgb, var(--pl-feature-tools-action-background) 52%, var(--pl-surface-default));
}

.pl-tool-source__heading {
  display: grid;
  gap: var(--pl-space-1);
}

.pl-tool-source__heading strong,
.pl-tool-source__heading span {
  display: block;
}

.pl-tool-source__heading span {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: var(--pl-feedback-line-height);
}

.pl-tool-source .pl-field,
.pl-tool-workspace__form .pl-field,
.pl-tool-workspace__form .pl-form-control {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.pl-tool-form-section {
  display: grid;
  min-width: 0;
  gap: var(--pl-space-4);
  padding-top: var(--pl-space-4);
  border-top: 1px solid var(--pl-border-default);
}

.pl-tool-form-section__heading {
  display: grid;
  gap: var(--pl-space-1);
}

.pl-tool-form-section__heading h3,
.pl-tool-form-section__heading p {
  margin: 0;
}

.pl-tool-form-section__heading h3 {
  font-size: var(--pl-font-size-16);
  font-weight: var(--pl-font-weight-semibold);
  line-height: var(--pl-line-height-compact);
}

.pl-tool-form-section__heading p {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: var(--pl-feedback-line-height);
}

.pl-tool-workspace__form-actions {
  align-items: center;
}

.pl-tool-workspace__form-actions p {
  max-width: 24ch;
  margin: 0;
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: 1.4;
}

.pl-tool-workspace__generate {
  flex: 0 0 auto;
  min-width: 184px;
}

.pl-tool-workspace__result {
  min-height: 520px;
  position: sticky;
  top: var(--pl-space-4);
}

.pl-tool-workspace__result > .pl-card__header {
  padding-bottom: var(--pl-space-4);
  border-bottom: 1px solid var(--pl-border-default);
}

.pl-tool-workspace__result-body {
  display: grid;
  min-height: 370px;
  padding: var(--pl-space-5);
  border-radius: var(--pl-radius-control);
  background: color-mix(in srgb, var(--pl-feature-tools-action-background) 24%, var(--pl-surface-editorial));
  place-items: center;
}

.pl-tool-workspace__result-content {
  display: grid;
  width: 100%;
  min-width: 0;
  align-self: stretch;
  place-items: center;
}

.pl-tool-workspace__empty-icon {
  width: var(--pl-feedback-empty-icon-size);
  height: var(--pl-feedback-empty-icon-size);
  border-radius: 50%;
}

.pl-tool-workspace__empty-icon svg {
  width: 30px;
  height: 30px;
}

.pl-tool-workspace__generated {
  width: 100%;
  align-self: stretch;
  padding: var(--pl-space-5);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-editorial);
  color: var(--pl-text-primary);
  font-size: var(--pl-font-size-16);
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.pl-tool-workspace__back {
  grid-column: 1 / -1;
  justify-self: start;
}

.pl-tutor-form {
  display: grid;
  gap: var(--pl-space-5);
}

.pl-tutor-form__contact,
.pl-tutor-form__message {
  display: grid;
  gap: var(--pl-space-4);
}

.pl-tutor-form__contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pl-tutor-form__full {
  grid-column: 1 / -1;
}

.pl-tool-file-help {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
}

@media (max-width: 960px) {
  .pl-tool-workspace {
    grid-template-columns: 1fr;
  }

  .pl-tool-workspace__result {
    min-height: 420px;
    position: static;
  }

  .pl-tool-workspace__result-body {
    min-height: 280px;
  }
}

@media (max-width: 560px) {
  .pl-tool-form-grid--two-columns,
  .pl-tutor-form__contact {
    grid-template-columns: 1fr;
  }

  .pl-tool-form-grid__full,
  .pl-tutor-form__full {
    grid-column: auto;
  }

  .pl-tool-workspace__form-actions {
    align-items: stretch;
  }

  .pl-tool-workspace__form-actions p {
    max-width: none;
  }

  .pl-tool-workspace__generate {
    width: 100%;
  }

  .pl-tool-workspace__result-body {
    padding: var(--pl-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-tools-hub__item,
  .pl-tools-hub__artwork,
  .pl-tools-hub__action-icon svg {
    transition: none;
  }

  .pl-tools-hub__item:hover,
  .pl-tools-hub__item:active {
    transform: none;
  }

  .pl-app-shell__main[data-page-leaving='true'] {
    animation: none;
  }
}

@media (forced-colors: active) {
  .pl-tools-hub__item,
  .pl-tool-source,
  .pl-tool-workspace__generated {
    border: 1px solid CanvasText;
  }
}

/* source: components/reading-plan/reading-plan.css */
.pl-reading-plan {
  box-sizing: border-box;
  min-height: 100%;
  color: var(--pl-text-primary);
  font-family: var(--pl-font-family-sans);
}

.pl-reading-plan *,
.pl-reading-plan *::before,
.pl-reading-plan *::after {
  box-sizing: border-box;
}

.pl-reading-plan > .pl-page-header,
.pl-reading-plan__content {
  width: min(100%, var(--pl-navigation-content-max-width));
  margin-inline: auto;
}

.pl-reading-plan__content {
  display: grid;
  gap: var(--pl-space-8);
  padding: var(--pl-navigation-content-padding-top-desktop) var(--pl-navigation-content-padding-desktop) var(--pl-navigation-content-padding-desktop);
}

.pl-reading-plan__content section {
  min-width: 0;
}

.pl-reading-plan__flow {
  max-width: 960px;
}

.pl-reading-plan__center {
  display: grid;
  min-height: 320px;
  padding: var(--pl-space-8);
  place-items: center;
}

.pl-reading-plan__section-heading {
  display: flex;
  margin-bottom: var(--pl-space-4);
  align-items: end;
  justify-content: space-between;
  gap: var(--pl-space-5);
}

.pl-reading-plan__section-heading h2,
.pl-reading-plan__section-heading p,
.pl-reading-plan__instructions h3,
.pl-reading-plan__instructions p {
  margin: 0;
}

.pl-reading-plan__section-heading h2 {
  font-size: var(--pl-font-size-24);
  font-weight: var(--pl-font-weight-semibold);
  line-height: var(--pl-line-height-compact);
}

.pl-reading-plan__section-heading p {
  max-width: 68ch;
  margin-top: var(--pl-content-title-description-gap);
  color: var(--pl-text-secondary);
  line-height: 1.5;
}

.pl-reading-plan__section-heading--with-control {
  align-items: flex-end;
}

.pl-reading-plan__compact-field {
  width: min(240px, 100%);
  flex: 0 0 auto;
}

.pl-reading-plan__list-tools {
  display: grid;
  width: 100%;
  max-width: 420px;
  margin-bottom: var(--pl-space-3);
}

.pl-reading-plan__list-tools--pair {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
  max-width: none;
  gap: var(--pl-space-4);
}

.pl-reading-plan__list-tools + .pl-pagination,
.pl-reading-plan__section-heading + .pl-pagination {
  margin-bottom: var(--pl-space-3);
}

.pl-reading-plan .pl-pagination + .pl-reading-plan__classroom-grid,
.pl-reading-plan .pl-pagination + .pl-reading-plan__records,
.pl-reading-plan .pl-pagination + .pl-empty-state {
  margin-top: var(--pl-space-3);
}

.pl-reading-plan__classroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--pl-space-4);
}

.pl-reading-plan__card-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--pl-space-3);
}

.pl-reading-plan__card-heading > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--pl-feature-reading-plan-action-text);
}

.pl-reading-plan__muted {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: 1.5;
}

.pl-reading-plan__records {
  display: grid;
  padding: 0;
  margin: 0;
  border: 1px solid var(--pl-border-default);
  border-radius: var(--pl-card-radius);
  overflow: hidden;
  background: var(--pl-surface-data);
  list-style: none;
}

.pl-reading-plan__record {
  display: flex;
  min-width: 0;
  padding: var(--pl-space-4);
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-4);
}

.pl-reading-plan__record + .pl-reading-plan__record {
  border-top: 1px solid var(--pl-border-default);
}

.pl-reading-plan__record-copy {
  display: grid;
  min-width: 0;
  gap: var(--pl-space-2);
}

.pl-reading-plan__record-title,
.pl-reading-plan__record-meta,
.pl-reading-plan__header-meta,
.pl-reading-plan__choice-title {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pl-space-2);
}

.pl-reading-plan__title-button {
  appearance: none;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding-block: var(--pl-space-1);
  border: 0;
  background: transparent;
  color: var(--pl-action-tertiary-text);
  font: inherit;
  font-weight: var(--pl-font-weight-semibold);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .pl-reading-plan__title-button:hover {
    color: var(--pl-action-tertiary-hover-text);
    text-decoration-color: currentColor;
  }
}

.pl-reading-plan__title-button:focus-visible {
  border-radius: var(--pl-radius-control);
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 3px;
}

.pl-reading-plan__record-meta {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
}

.pl-reading-plan__record-meta > span + span:not(.pl-tag)::before {
  padding-inline-end: var(--pl-space-2);
  color: var(--pl-border-default);
  content: '·';
}

.pl-reading-plan__classroom-layout,
.pl-reading-plan__form-layout,
.pl-reading-plan__detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: start;
  gap: var(--pl-space-6);
}

.pl-reading-plan__aside,
.pl-reading-plan__form,
.pl-reading-plan__form-stack,
.pl-reading-plan__advanced-body,
.pl-reading-plan__review {
  display: grid;
  gap: var(--pl-space-4);
}

.pl-reading-plan__steps {
  --pl-wizard-current-background: var(--pl-feature-reading-plan-action-background);
  --pl-wizard-current-text: var(--pl-feature-reading-plan-action-text);
}

.pl-reading-plan__filters,
.pl-reading-plan__field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
  gap: var(--pl-space-4);
}

.pl-reading-plan__reading-picker,
.pl-reading-plan__choices {
  display: grid;
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  gap: var(--pl-space-3);
}

.pl-reading-plan__reading-picker > legend,
.pl-reading-plan__choices > legend {
  padding: 0;
  margin-bottom: var(--pl-space-2);
  font-size: var(--pl-font-size-18);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-reading-plan__choice-title {
  justify-content: space-between;
}

.pl-reading-plan__choice-meta {
  display: block;
  margin-top: var(--pl-space-2);
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
}

.pl-reading-plan__advanced {
  border: 1px solid var(--pl-border-default);
  border-radius: var(--pl-card-radius);
  background: var(--pl-surface-data);
}

.pl-reading-plan__advanced summary {
  padding: var(--pl-space-4);
  color: var(--pl-action-tertiary-text);
  font-weight: var(--pl-font-weight-semibold);
  cursor: pointer;
}

.pl-reading-plan__advanced summary:focus-visible {
  border-radius: var(--pl-card-radius);
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

.pl-reading-plan__advanced-body {
  padding: 0 var(--pl-space-4) var(--pl-space-4);
}

.pl-reading-plan__summary {
  background: var(--pl-surface-data);
}

.pl-reading-plan__definition-list {
  display: grid;
  padding: 0;
  margin: 0;
  gap: var(--pl-space-3);
}

.pl-reading-plan__definition-list > div {
  display: grid;
  grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr);
  gap: var(--pl-space-3);
}

.pl-reading-plan__definition-list dt {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-reading-plan__definition-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pl-reading-plan__instructions {
  padding-top: var(--pl-space-4);
  margin-top: var(--pl-space-4);
  border-top: 1px solid var(--pl-border-default);
}

.pl-reading-plan__instructions h3 {
  font-size: var(--pl-font-size-16);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-reading-plan__instructions p {
  margin-top: var(--pl-content-title-description-gap);
  color: var(--pl-text-secondary);
  line-height: 1.5;
}

@media (max-width: 840px) {
  .pl-reading-plan__content {
    padding: var(--pl-navigation-content-padding-tablet);
  }

  .pl-reading-plan__classroom-layout,
  .pl-reading-plan__form-layout,
  .pl-reading-plan__detail-grid {
    grid-template-columns: 1fr;
  }

  .pl-reading-plan__aside {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 640px) {
  .pl-reading-plan__content {
    gap: var(--pl-space-6);
    padding: var(--pl-navigation-content-padding-mobile);
  }

  .pl-reading-plan__section-heading,
  .pl-reading-plan__record {
    align-items: stretch;
    flex-direction: column;
  }

  .pl-reading-plan__section-heading--with-control,
  .pl-reading-plan__record {
    display: grid;
  }

  .pl-reading-plan__compact-field,
  .pl-reading-plan__record > .pl-action {
    width: 100%;
  }

  .pl-reading-plan__filters,
  .pl-reading-plan__field-pair,
  .pl-reading-plan__list-tools--pair {
    grid-template-columns: 1fr;
  }

  .pl-reading-plan__definition-list > div {
    grid-template-columns: 1fr;
    gap: var(--pl-space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-reading-plan__title-button {
    transition: none;
  }
}

@media (forced-colors: active) {
  .pl-reading-plan__records,
  .pl-reading-plan__advanced {
    border-color: CanvasText;
  }
}

/* source: components/settings/settings.css */
.pl-settings-page {
  box-sizing: border-box;
  display: grid;
  gap: var(--pl-space-6);
  width: min(100%, 1080px);
  margin-inline: auto;
  padding: var(--pl-space-8) var(--pl-space-6) var(--pl-space-12);
  color: var(--pl-text-primary);
  font-family: var(--pl-font-family-sans);
}

.pl-settings-page[data-academic-calendar] {
  padding-block-start: 0;
}

.pl-settings-page[data-academic-calendar] > .pl-page-header {
  margin-bottom: 0;
}

.pl-settings-page__back {
  width: fit-content;
  justify-self: start;
}

[data-academic-calendar] > .pl-page-header .pl-page-header__surface {
  min-height: calc(var(--pl-navigation-feature-header-min-height) + var(--pl-space-6));
}

[data-academic-calendar] > .pl-page-header .pl-page-header__row {
  min-height: calc(var(--pl-navigation-feature-header-min-height) + var(--pl-space-6) - (2 * var(--pl-navigation-feature-header-padding-block)));
}

[data-academic-calendar] > .pl-page-header .pl-page-header__illustration {
  bottom: calc(var(--pl-feature-settings-header-artwork-bottom) + var(--pl-space-3));
  width: calc(var(--pl-feature-settings-header-artwork-width) + var(--pl-space-8));
}

.pl-settings-page__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--pl-space-6);
}

.pl-settings-page__header > div,
.pl-settings-section__heading > div {
  display: grid;
  gap: var(--pl-space-2);
}

.pl-settings-page__header h1,
.pl-settings-page__header p,
.pl-settings-section__heading h2,
.pl-settings-section__heading p,
.pl-settings-calendar-overview h2,
.pl-settings-calendar-form__footer p {
  margin: 0;
}

.pl-settings-page__header h1 {
  font-size: clamp(var(--pl-font-size-28), 4vw, var(--pl-font-size-32));
  line-height: var(--pl-line-height-heading);
  letter-spacing: -.025em;
}

.pl-settings-page__header p,
.pl-settings-section__heading p,
.pl-settings-calendar-form__footer p {
  color: var(--pl-text-secondary);
  line-height: 1.5;
}

.pl-calendar-overview-disclosure {
  display: grid;
  gap: var(--pl-space-4);
}

.pl-calendar-overview-disclosure__heading {
  margin: 0;
  font-size: var(--pl-font-size-18);
  line-height: 1.3;
}

.pl-calendar-overview-disclosure__toggle {
  font: inherit;
}

.pl-calendar-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--pl-progress-panel-border);
  border-radius: var(--pl-progress-panel-radius);
  background: var(--pl-progress-panel-background);
}

.pl-calendar-overview--unconfigured,
.pl-calendar-overview--single {
  grid-template-columns: minmax(0, 1fr);
}

.pl-calendar-overview--unconfigured .pl-calendar-overview__current {
  max-width: 68ch;
}

.pl-calendar-overview > section {
  display: grid;
  align-content: start;
  gap: var(--pl-space-2);
  min-width: 0;
  padding: var(--pl-space-5);
}

.pl-calendar-overview__upcoming {
  border-inline-start: 1px solid var(--pl-progress-panel-border);
  background: var(--pl-surface-subtle);
}

.pl-calendar-overview__label {
  display: flex;
  align-items: center;
  gap: var(--pl-space-2);
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-semibold);
  line-height: 1.3;
}

.pl-calendar-overview__label svg {
  width: 20px;
  height: 20px;
}

.pl-calendar-overview h3,
.pl-calendar-overview p { margin: 0; }

.pl-calendar-overview h3 {
  margin-block-start: var(--pl-space-1);
  font-size: var(--pl-font-size-24);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.pl-calendar-overview p {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-16);
  line-height: 1.45;
}

.pl-settings-calendar-form,
.pl-settings-section {
  display: grid;
  gap: var(--pl-space-6);
}

.pl-settings-section {
  padding: var(--pl-space-6);
  border: 1px solid var(--pl-progress-panel-border);
  border-radius: var(--pl-progress-panel-radius);
  background: var(--pl-progress-panel-background);
}

.pl-settings-section__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--pl-space-5);
}

.pl-settings-section__heading h2 {
  font-size: var(--pl-font-size-20);
  line-height: 1.3;
}

.pl-settings-section__heading > span {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
}

.pl-settings-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--pl-space-4);
  align-items: start;
}

.pl-settings-section__identity {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: var(--pl-space-3);
  min-width: 0;
}

.pl-settings-section__identity > svg {
  width: 24px;
  height: 24px;
  margin-block-start: 1px;
  color: var(--pl-text-progress-accent);
}

.pl-settings-section__identity > div {
  display: grid;
  gap: var(--pl-space-1);
}

.pl-period-selector {
  container-type: inline-size;
  display: grid;
  gap: var(--pl-space-4);
  min-width: 0;
  padding: var(--pl-space-4);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-subtle);
}

.pl-period-selector__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--pl-space-4);
}

.pl-period-selector__heading > div {
  display: grid;
  gap: var(--pl-space-1);
}

.pl-period-selector__heading h3,
.pl-period-selector__heading p {
  margin: 0;
}

.pl-period-selector__heading h3 {
  font-size: var(--pl-font-size-16);
  line-height: 1.35;
}

.pl-period-selector__heading p,
.pl-period-selector__heading > span {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: 1.4;
}

.pl-period-selector__heading > span {
  flex: none;
}

.pl-period-selector__items {
  display: grid;
  grid-template-columns: repeat(var(--pl-period-count), minmax(0, 1fr));
  gap: var(--pl-space-2);
}

.pl-period-selector__item {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: var(--pl-space-2);
  min-width: 0;
  min-height: 64px;
  padding: var(--pl-space-2) var(--pl-space-3);
  border: 1px solid var(--pl-progress-panel-border);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-default);
  color: var(--pl-text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--pl-field-transition-duration) var(--pl-field-transition-easing),
    background-color var(--pl-field-transition-duration) var(--pl-field-transition-easing);
}

.pl-period-selector__item:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  inset-inline-end: calc(var(--pl-space-2) * -1 - 1px);
  width: var(--pl-space-2);
  height: 2px;
  background: var(--pl-status-neutral-border);
  content: '';
}

@media (hover: hover) {
  .pl-period-selector__item:hover:not([data-selected='true']) {
    border-color: var(--pl-status-info-border);
    background: color-mix(in srgb, var(--pl-status-info-surface) 36%, var(--pl-surface-default));
  }
}

.pl-period-selector__item[data-selected='true'] {
  border-color: var(--pl-status-info-border);
  background: var(--pl-status-info-surface);
  color: var(--pl-status-info-text);
}

.pl-period-selector__item:focus-visible {
  z-index: 2;
  outline: 2px solid var(--pl-focus-outer);
  outline-offset: 2px;
}

.pl-period-selector__number {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 5px;
  background: var(--pl-status-info-surface);
  color: var(--pl-status-info-text);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-period-selector__item[data-selected='true'] .pl-period-selector__number {
  background: var(--pl-surface-default);
}

.pl-period-selector__copy {
  display: grid;
  gap: var(--pl-space-1);
  min-width: 0;
}

.pl-period-selector__copy strong,
.pl-period-selector__copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-period-selector__copy strong {
  font-size: var(--pl-font-size-14);
  line-height: 1.3;
}

.pl-period-selector__copy > span {
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-12);
  line-height: 1.35;
}

.pl-period-editor {
  display: grid;
  gap: var(--pl-space-3);
  min-width: 0;
  margin: 0;
  padding: var(--pl-space-4);
  border: 1px solid var(--pl-progress-panel-border);
  border-radius: var(--pl-radius-control);
  background: var(--pl-surface-default);
}

.pl-period-editor legend {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-2);
  padding-inline: var(--pl-space-2);
  color: var(--pl-text-primary);
  font-size: var(--pl-font-size-16);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-period-editor legend svg {
  width: 20px;
  height: 20px;
  color: var(--pl-text-progress-accent);
}

.pl-period-editor > p {
  margin: 0;
  color: var(--pl-text-secondary);
  font-size: var(--pl-font-size-14);
  line-height: 1.4;
}

.pl-period-editor__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pl-space-4);
  align-items: start;
}

.pl-period-editor__fields--custom {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pl-settings-period-list {
  display: grid;
  gap: var(--pl-space-3);
}

.pl-settings-period {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--pl-space-4);
  min-width: 0;
  margin: 0;
  padding: var(--pl-space-5);
  border: 1px solid var(--pl-progress-panel-border);
  border-radius: var(--pl-radius-control);
}

.pl-settings-period legend {
  padding-inline: var(--pl-space-2);
  font-size: var(--pl-font-size-14);
  font-weight: var(--pl-font-weight-semibold);
}

.pl-settings-calendar-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-5);
}

.pl-settings-calendar-form__footer p { max-width: 62ch; }

@media (min-width: 761px) and (max-width: 960px) {
  [data-academic-calendar] > .pl-page-header .pl-page-header__surface {
    min-height: calc(var(--pl-navigation-feature-header-min-height) + var(--pl-space-4));
  }

  [data-academic-calendar] > .pl-page-header .pl-page-header__row {
    min-height: calc(var(--pl-navigation-feature-header-min-height) + var(--pl-space-4) - (2 * var(--pl-navigation-feature-header-padding-block)));
  }

  [data-academic-calendar] > .pl-page-header .pl-page-header__illustration {
    bottom: calc(var(--pl-feature-settings-header-artwork-bottom-tablet) + var(--pl-space-3));
    width: calc(var(--pl-feature-settings-header-artwork-width-tablet) + var(--pl-space-6));
  }

  .pl-settings-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-period-selector__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-period-selector__item::after {
    display: none;
  }
}

/* La barra lateral reduce el ancho útil al entrar en escritorio. Mantener dos
   columnas en esta franja evita truncar los nombres y las fechas del periodo. */
@media (min-width: 961px) and (max-width: 1199px) {
  .pl-period-selector__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-period-selector__item::after {
    display: none;
  }
}

@container (max-width: 640px) {
  .pl-period-selector__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-period-selector__item::after {
    display: block;
  }

  .pl-period-selector__item:not(:last-child)::after {
    inset-block-end: calc(var(--pl-space-2) * -1 - 1px);
    inset-inline-start: calc(var(--pl-space-3) + 11px);
    inset-inline-end: auto;
    width: 2px;
    height: var(--pl-space-2);
  }

  .pl-period-selector__copy strong,
  .pl-period-selector__copy > span {
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .pl-settings-page {
    gap: var(--pl-space-5);
    padding: var(--pl-space-6) var(--pl-space-4) var(--pl-space-8);
  }

  .pl-settings-page[data-academic-calendar] {
    padding-block-start: 0;
  }

  .pl-settings-page__header,
  .pl-settings-section__heading,
  .pl-settings-calendar-form__footer {
    display: grid;
  }

  .pl-settings-field-grid,
  .pl-settings-period,
  .pl-calendar-overview,
  .pl-period-editor__fields,
  .pl-period-editor__fields--custom {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-period-selector {
    padding: var(--pl-space-3);
  }

  .pl-period-selector__heading {
    display: grid;
    justify-content: start;
    gap: var(--pl-space-1);
  }

  .pl-period-selector__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-period-selector__item {
    min-height: 56px;
  }

  .pl-period-selector__item:not(:last-child)::after {
    inset-block-end: calc(var(--pl-space-2) * -1 - 1px);
    inset-inline-start: calc(var(--pl-space-3) + 11px);
    inset-inline-end: auto;
    width: 2px;
    height: var(--pl-space-2);
  }

  .pl-period-selector__copy strong,
  .pl-period-selector__copy > span {
    text-overflow: clip;
    white-space: normal;
  }

  .pl-calendar-overview__upcoming {
    border-block-start: 1px solid var(--pl-progress-panel-border);
    border-inline-start: 0;
  }

  .pl-calendar-overview-disclosure--mobile {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--pl-progress-panel-border);
    border-radius: var(--pl-progress-panel-radius);
    background: var(--pl-progress-panel-background);
  }

  .pl-calendar-overview-disclosure__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-3);
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    padding: var(--pl-space-3) var(--pl-space-4);
    border: 0;
    background: transparent;
    color: var(--pl-text-primary);
    text-align: start;
    cursor: pointer;
  }

  .pl-calendar-overview-disclosure__toggle:focus-visible {
    outline: 2px solid var(--pl-focus-outer);
    outline-offset: -3px;
  }

  .pl-calendar-overview-disclosure__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .pl-calendar-overview-disclosure__copy small {
    overflow: hidden;
    color: var(--pl-text-secondary);
    font-size: var(--pl-font-size-14);
    font-weight: var(--pl-font-weight-regular);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pl-calendar-overview-disclosure__toggle > svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--pl-text-secondary);
    transition: transform var(--pl-duration-deliberate) var(--pl-easing-standard);
  }

  .pl-calendar-overview-disclosure--expanded .pl-calendar-overview-disclosure__toggle > svg {
    transform: rotate(180deg);
  }

  .pl-calendar-overview-disclosure--mobile .pl-calendar-overview-disclosure__content {
    border-block-start: 1px solid var(--pl-progress-panel-border);
  }

  .pl-calendar-overview-disclosure--mobile .pl-calendar-overview {
    border: 0;
    border-radius: 0;
  }

  .pl-calendar-overview > section { padding: var(--pl-space-4); }
  .pl-calendar-overview h3 { font-size: var(--pl-font-size-20); }

  .pl-settings-section { padding: var(--pl-space-4); }

  .pl-settings-calendar-form__footer .pl-action { width: 100%; }

}

@media (max-width: 640px) {
  [data-academic-calendar] > .pl-page-header .pl-page-header__surface {
    min-height: var(--pl-navigation-feature-header-min-height-mobile);
  }

  [data-academic-calendar] > .pl-page-header .pl-page-header__row {
    min-height: calc(var(--pl-navigation-feature-header-min-height-mobile) - (2 * var(--pl-space-5)));
  }

  [data-academic-calendar] > .pl-page-header .pl-page-header__illustration {
    bottom: calc(var(--pl-feature-settings-header-artwork-bottom-mobile) + var(--pl-space-3));
    width: calc(var(--pl-feature-settings-header-artwork-width-mobile) + var(--pl-space-4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-calendar-overview-disclosure__toggle > svg {
    transition: none;
  }
}