crdx-components 1.0.0

package/src/lib/styles/overrides/_mat-list-overrides.scss

@@ -0,0 +1,59 @@
+@use '@angular/material' as mat;
+
+/// List overrides (M3). Tokens: _app-tokens (lists-wip-common).
+html {
+  @include mat.list-overrides((
+    active-indicator-shape: calc(var(--app-lists-wip-common-shape-list-list-item-selected-container-shape) * 1px),
+    list-item-container-shape: calc(var(--app-lists-wip-common-shape-list-list-item-container-shape) * 1px),
+    list-item-disabled-label-text-color: var(--app-lists-wip-common-color-disabled-list-list-item-disabled-label-text-color),
+    list-item-disabled-label-text-opacity: calc(var(--app-lists-wip-common-color-disabled-list-list-item-disabled-label-text-opacity) / 100),
+    list-item-disabled-leading-icon-color: var(--app-lists-wip-common-color-disabled-list-list-item-disabled-leading-icon-color),
+    list-item-disabled-leading-icon-opacity: calc(var(--app-lists-wip-common-color-disabled-list-list-item-disabled-leading-icon-opacity) / 100),
+    list-item-disabled-state-layer-color: var(--app-lists-wip-common-color-disabled-list-list-item-disabled-state-layer-color),
+    list-item-disabled-state-layer-opacity: calc(var(--app-lists-wip-common-color-disabled-list-list-item-disabled-state-layer-opacity) / 100),
+    list-item-disabled-trailing-icon-color: var(--app-lists-wip-common-color-disabled-list-list-item-disabled-trailing-icon-color),
+    list-item-disabled-trailing-icon-opacity: calc(var(--app-lists-wip-common-color-disabled-list-list-item-disabled-trailing-icon-opacity) / 100),
+    list-item-focus-label-text-color: var(--app-lists-wip-common-color-focused-list-list-item-focus-label-text-color),
+    list-item-focus-state-layer-color: var(--app-lists-wip-common-color-focused-list-list-item-focus-state-layer-color),
+    list-item-focus-state-layer-opacity: calc(var(--app-lists-wip-common-color-focused-list-list-item-focus-state-layer-opacity) / 100),
+    list-item-hover-label-text-color: var(--app-lists-wip-common-color-hovered-list-list-item-hover-label-text-color),
+    list-item-label-text-color: var(--app-lists-wip-common-color-enabled-list-list-item-label-text-color),
+    list-item-leading-avatar-color: var(--app-lists-wip-common-color-enabled-list-list-item-leading-avatar-color),
+    list-item-leading-avatar-shape: 50%,
+    list-item-leading-avatar-size: calc(var(--app-lists-wip-common-typography-list-list-item-leading-avatar-size) * 1px),
+    list-item-leading-icon-color: var(--app-lists-wip-common-color-enabled-list-list-item-leading-icon-color),
+    list-item-leading-icon-size: calc(var(--app-lists-wip-common-typography-list-list-item-leading-icon-size) * 1px),
+    list-item-selected-trailing-icon-color: var(--app-lists-wip-common-color-enabled-selected-list-list-item-selected-trailing-icon-color),
+    list-item-supporting-text-color: var(--app-lists-wip-common-color-enabled-list-list-item-supporting-text-color),
+    list-item-trailing-icon-color: var(--app-lists-wip-common-color-enabled-list-list-item-trailing-icon-color),
+    list-item-trailing-icon-size: calc(var(--app-lists-wip-common-typography-list-list-item-trailing-icon-size) * 1px),
+    list-item-trailing-supporting-text-color: var(--app-lists-wip-common-color-enabled-list-list-item-trailing-supporting-text-color),
+    list-item-selected-container-color: var(--app-lists-wip-common-color-enabled-selected-list-list-item-selected-container-color),
+    list-item-hover-leading-icon-color: var(--app-lists-wip-common-color-hovered-list-list-item-hover-leading-icon-color),
+    list-item-hover-trailing-icon-color: var(--app-lists-wip-common-color-hovered-list-list-item-hover-trailing-icon-color),
+    list-item-label-text-font: var(--app-lists-wip-common-typography-list-list-item-label-text-font, 'Heebo'),
+    list-item-label-text-line-height: calc(var(--app-lists-wip-common-typography-list-list-item-label-text-line-height) * 1px),
+    list-item-label-text-size: calc(var(--app-lists-wip-common-typography-list-list-item-label-text-size) * 1px),
+    list-item-label-text-tracking: var(--app-lists-wip-common-typography-list-list-item-label-text-tracking),
+    list-item-label-text-weight: var(--app-lists-wip-common-typography-list-list-item-label-text-weight),
+    list-item-supporting-text-font: var(--app-lists-wip-common-typography-list-list-item-supporting-text-font, 'Heebo'),
+    list-item-supporting-text-line-height: calc(var(--app-lists-wip-common-typography-list-list-item-supporting-text-line-height) * 1px),
+    list-item-supporting-text-size: calc(var(--app-lists-wip-common-typography-list-list-item-supporting-text-size) * 1px),
+    list-item-supporting-text-tracking: var(--app-lists-wip-common-typography-list-list-item-supporting-text-tracking),
+    list-item-supporting-text-weight: var(--app-lists-wip-common-typography-list-list-item-supporting-text-weight),
+    list-item-trailing-supporting-text-font: var(--app-lists-wip-common-typography-list-list-item-trailing-supporting-text-font, 'Heebo'),
+    list-item-trailing-supporting-text-line-height: calc(var(--app-lists-wip-common-typography-list-list-item-trailing-supporting-text-line-height) * 1px),
+    list-item-trailing-supporting-text-size: calc(var(--app-lists-wip-common-typography-list-list-item-trailing-supporting-text-size) * 1px),
+    list-item-trailing-supporting-text-tracking: var(--app-lists-wip-common-typography-list-list-item-trailing-supporting-text-tracking),
+    list-item-trailing-supporting-text-weight: var(--app-lists-wip-common-typography-list-list-item-trailing-supporting-text-weight),
+    list-item-leading-icon-start-space: calc(var(--app-lists-wip-common-spacing-list-list-item-leading-space) * 1px),
+    list-item-leading-icon-end-space: calc(var(--app-lists-wip-common-spacing-list-list-item-between-space) * 1px),
+    list-item-one-line-container-height: calc(var(--app-lists-wip-common-typography-one-line-list-item-container-height) * 1px),
+    list-item-two-line-container-height: calc(var(--app-lists-wip-common-typography-two-lines-list-item-container-height) * 1px),
+    list-item-three-line-container-height: calc(var(--app-lists-wip-common-typography-three-lines-list-item-container-height) * 1px),
+  ));
+}
+
+.mdc-list-item:hover {
+  background-color: #fff !important;
+}

package/src/lib/styles/overrides/_mat-slide-toggle-overrides.scss

@@ -0,0 +1,33 @@
+@use '@angular/material' as mat;
+
+/// Slide toggle (switch) overrides (M3). Tokens: tokens-by-component (switch-*).
+html {
+  @include mat.slide-toggle-overrides((
+    selected-track-color: var(--switch-enabled-track-switch-selected-track-color),
+    selected-hover-track-color: var(--switch-hovered-track-switch-selected-hover-track-color),
+    selected-focus-track-color: var(--switch-focused-track-switch-selected-focus-track-color),
+    selected-pressed-track-color: var(--switch-pressed-ripple-track-switch-selected-pressed-track-color),
+    selected-handle-color: var(--switch-enabled-handle-switch-selected-handle-color),
+    selected-hover-handle-color: var(--switch-enabled-handle-switch-selected-handle-color),
+    selected-focus-handle-color: var(--switch-enabled-handle-switch-selected-handle-color),
+    selected-pressed-handle-color: var(--switch-enabled-handle-switch-selected-handle-color),
+    unselected-track-color: var(--switch-enabled-track-switch-unselected-track-color),
+    unselected-hover-track-color: var(--switch-hovered-track-switch-unselected-hover-track-color),
+    unselected-focus-track-color: var(--switch-focused-track-switch-unselected-focus-track-color),
+    unselected-pressed-track-color: var(--switch-pressed-ripple-track-switch-unselected-pressed-track-color),
+    unselected-handle-color: var(--switch-enabled-handle-switch-unselected-handle-color),
+    unselected-hover-handle-color: var(--switch-hovered-handle-switch-unselected-hover-handle-color),
+    unselected-focus-handle-color: var(--switch-focused-handle-switch-unselected-focus-handle-color),
+    unselected-pressed-handle-color: var(--switch-pressed-ripple-handle-switch-unselected-pressed-handle-color),
+    selected-hover-state-layer-opacity: 0,
+    unselected-hover-state-layer-opacity: 0,
+    selected-focus-state-layer-opacity: 0,
+    unselected-focus-state-layer-opacity: 0,
+    selected-pressed-state-layer-opacity: 0,
+    unselected-pressed-state-layer-opacity: 0,
+    track-outline-width: calc(var(--switch-enabled-track-switch-track-outline-width) * 1px),
+    track-outline-color: var(--switch-enabled-track-switch-track-outline-color),
+    selected-track-outline-width: calc(var(--switch-enabled-track-switch-track-outline-width) * 1px),
+    selected-track-outline-color: transparent,
+  ));
+}

package/src/lib/styles/overrides/_mat-table-overrides.scss

@@ -0,0 +1,259 @@
+@use '@angular/material' as mat;
+
+/// Table overrides (M3). Tokens: tokens-by-component (pallete-scheme-*, typescale-*).
+html {
+  @include mat.table-overrides((
+    background-color: transparent,
+    row-item-outline-color: var(--pallete-scheme-surface-surface-container-highest, #e0e3e5),
+    header-headline-color: var(--pallete-scheme-surface-on-surface, #181C1E),
+    header-headline-size: 1rem,
+    header-headline-weight: 700,
+    header-headline-line-height: normal,
+    row-item-label-text-color: var(--md-sys-color-on-surface-variant),
+    row-item-outline-width: 1px,
+    row-item-label-text-size: var(--md-sys-typescale-body-medium-size),
+    row-item-label-text-weight: var(--md-sys-typescale-body-medium-weight),
+    header-container-height: 56px,
+    row-item-container-height: 56px,
+  ));
+
+  @include mat.paginator-overrides((
+    container-background-color: var(--pallete-scheme-surface-surface, #F7FAFC),
+    container-text-color: var(--md-sys-color-on-surface-variant),
+  ));
+}
+
+// Celdas: padding 0 16px (como en la especificación)
+.mdc-data-table__cell,
+.mdc-data-table__header-cell,
+.mat-mdc-cell,
+.mat-mdc-header-cell {
+  padding: 0 16px;
+}
+
+// Header sticky: fila y celdas (th) con sticky, z-index y fondo para que el contenido no se transparente
+.shared-table__container .mat-mdc-header-row {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--pallete-scheme-surface-surface, #F7FAFC);
+  border-bottom: 1px solid var(--pallete-scheme-surface-surface-container-highest, #e0e3e5);
+}
+
+.shared-table__container th.mat-mdc-header-cell,
+.shared-table__container th.mdc-data-table__header-cell {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--pallete-scheme-surface-surface, #f5f5f5);
+  border-bottom: 1px solid var(--pallete-scheme-surface-surface-container-highest, #e0e3e5);
+}
+
+.shared-table__container .mat-mdc-header-row .mat-mdc-header-cell,
+.shared-table__container .mat-mdc-header-row .mdc-data-table__header-cell {
+  background: var(--pallete-scheme-surface-surface, #F7FAFC);
+  border-bottom: 1px solid var(--pallete-scheme-surface-surface-container-highest, #e0e3e5);
+}
+
+// th del header sticky: posición y fondo para que el contenido no se transparente al hacer scroll
+.shared-table__container th.mat-mdc-header-cell,
+.shared-table__container th.mdc-data-table__header-cell {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: var(--pallete-scheme-surface-surface, #F7FAFC);
+}
+
+.mdc-data-table__header-cell {
+  font-family: 'Heebo', sans-serif;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Última fila: borde inferior antes del paginador (mismo tono que divisores internos)
+.mdc-data-table__row:last-child > .mat-mdc-cell {
+  border-bottom: 1px solid var(--pallete-scheme-surface-surface-container-highest, #e0e3e5);
+}
+
+// Tabla: borde completo + esquinas redondeadas
+.mdc-data-table {
+  border-radius: 0.25rem;
+  border: 1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9);
+  overflow: visible;
+}
+
+// Shared-table: solo esquinas superiores redondeadas, sin borde inferior
+.shared-table__container.mdc-data-table {
+  overflow: hidden;
+  border-radius: 0.25rem 0.25rem 0 0;
+  border-bottom: none;
+}
+
+// Cuando hay paginador, la tabla mantiene el mismo borde, pero sin forzar border-bottom extra
+.mdc-data-table:has(+ .mat-mdc-paginator),
+.mat-mdc-table-sticky-header ~ .mat-mdc-paginator + .mdc-data-table {
+  border-radius: 0.25rem;
+}
+
+// Label "Items per page": Body/medium (especificidad alta para que aplique)
+.mat-mdc-paginator .mat-mdc-paginator-page-size-label {
+  margin: 0;
+  color: var(--pallete-scheme-surface-on-surface, #181C1E) !important;
+  text-align: right;
+  font-family: var(--typescale-body-medium-font, Heebo), sans-serif;
+  font-size: var(--typescale-body-medium-size, 0.875rem);
+  font-style: normal;
+  font-weight: var(--typescale-body-medium-weight, 400);
+  line-height: var(--typescale-body-medium-line-height, 1.25rem);
+  letter-spacing: var(--typescale-body-medium-tracking, 0.01563rem);
+}
+
+// Rango "1-10 de 100": Label/medium, sin márgenes
+.mat-mdc-paginator .mat-mdc-paginator-range-label {
+  margin: 0;
+  color: var(--pallete-scheme-surface-on-surface, #181C1E);
+  font-family: var(--typescale-label-medium-font, Heebo), sans-serif;
+  font-size: var(--typescale-label-medium-size, 0.75rem);
+  font-style: normal;
+  font-weight: var(--typescale-label-medium-weight, 500);
+  line-height: var(--typescale-label-medium-line-height, 1rem);
+  letter-spacing: var(--typescale-label-medium-tracking, 0.03125rem);
+}
+
+// Acciones de rango del paginador (rango + flechas anterior/siguiente)
+.mat-mdc-paginator .mat-mdc-paginator-range-actions {
+  display: flex;
+  align-items: center;
+  gap: 2.15rem;
+}
+
+// Paginador: fondo sólido surface + esquinas inferiores redondeadas; border-top: none para unión visual con la tabla
+// z-index para que quede por encima del contenido de la tabla (acciones de fila)
+.mat-mdc-paginator {
+  background-color: var(--pallete-scheme-surface-surface, #F7FAFC);
+  border-radius: 0 0 0.25rem 0.25rem;
+  border-top: none;
+  border-right: 1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9);
+  border-bottom: 1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9);
+  border-left: 1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9);
+  overflow: hidden;
+  z-index: 1;
+  width: 100%;
+  height: 3.625rem;
+}
+
+// Contenedor interno: gap entre elementos (label | select | 1-10 de 100 | flecha izq | flecha der)
+.mat-mdc-paginator-container {
+  display: flex;
+  width: 100%;
+  height: 3.625rem;
+  padding: 0 0.5rem;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 2.125rem;
+}
+
+// Bloques con gap interno (elementos por página = label + select)
+.mat-mdc-paginator-page-size {
+  margin: 0;
+  margin-right: 0 !important;
+  display: flex;
+  align-items: center;
+  gap: 2.125rem;
+}
+
+// Rango "1-10 de 100" con gap respecto a vecinos (heredado del container)
+// Flecha derecha: 0.5rem padding a la derecha
+.mat-mdc-paginator-navigation-next {
+  padding-right: 0.5rem;
+}
+
+// Selector de número de páginas: sin bordes ni padding
+.mat-mdc-paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field {
+  border-radius: 0;
+  border: none !important;
+  padding: 0;
+
+  .mdc-notched-outline,
+  .mdc-notched-outline .mat-mdc-notch-piece,
+  .mdc-notched-outline__leading,
+  .mdc-notched-outline__notch,
+  .mdc-notched-outline__trailing {
+    border: none !important;
+    border-radius: 0 !important;
+  }
+
+  .mat-mdc-form-field-focus-overlay {
+    border-radius: 0;
+  }
+
+  .mat-mdc-form-field-flex,
+  .mat-mdc-form-field-subscript-wrapper {
+    padding: 0 !important;
+    border: none !important;
+    border-bottom: none !important;
+  }
+}
+
+.mat-mdc-paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger,
+.mat-mdc-paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value {
+  padding: 0 !important;
+  border: none !important;
+  border-bottom: none !important;
+}
+
+// Icono del select: sin padding, solo border-bottom del bloque; chevron custom (Figma)
+.mat-mdc-paginator .mat-mdc-select-arrow-wrapper {
+  padding: 0 !important;
+}
+
+.mat-mdc-paginator .mat-mdc-select-arrow svg {
+  display: none;
+}
+
+.mat-mdc-paginator .mat-mdc-select-arrow {
+  width: 22px;
+  height: 24px;
+  padding: 0;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24' fill='none'%3E%3Cpath d='M12 15.4L6 9.4L7.4 8L12 12.6L16.6 8L18 9.4L12 15.4Z' fill='%23181C1E'/%3E%3C/svg%3E") no-repeat center;
+  background-size: contain;
+}
+
+// Scrollbar del cuerpo de la tabla: mismo fondo para vertical, horizontal y esquina
+.shared-table__body-wrap {
+  --scrollbar-track-bg: #F3F4F6;
+}
+
+.shared-table__body-wrap::-webkit-scrollbar {
+  width: 0.25rem;
+  height: 0.25rem;
+  background-color: var(--scrollbar-track-bg);
+}
+
+.shared-table__body-wrap::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-track-bg);
+}
+
+.shared-table__body-wrap::-webkit-scrollbar-corner {
+  background-color: var(--scrollbar-track-bg);
+}
+
+.shared-table__body-wrap::-webkit-scrollbar-thumb {
+  background-color: #6A7282;
+  border-radius: 6.25rem;
+}
+
+.shared-table__body-wrap::-webkit-scrollbar-button {
+  display: none;
+}
+
+.mat-mdc-table,
+.mdc-data-table__table {
+  border-radius: inherit;
+}
+
+.mdc-data-table__table {
+  border-collapse: separate;
+  border-spacing: 0;
+}

package/src/lib/styles/overrides/_mat-tabs-overrides.scss

@@ -0,0 +1,116 @@
+@use '@angular/material' as mat;
+
+/// Tabs overrides (M3). Tokens: tokens-by-component (tabs-*).
+html {
+  @include mat.tabs-overrides((
+    active-indicator-height: calc(var(--tabs-primary-navigation-enabled-active-indicator-primary-navigation-tab-active-indicator-height, 4) * 1px),
+    active-indicator-shape: 4px,
+    divider-height: 0.1875rem,
+    divider-color: transparent,
+    active-focus-indicator-color: var(--tabs-primary-navigation-enabled-active-indicator-primary-navigation-tab-active-indicator-color, #e42313),
+    active-focus-label-text-color: var(--tabs-primary-navigation-focused-label-text-primary-navigation-tab-with-label-text-active-focus-color, #e42313),
+    active-hover-indicator-color: var(--tabs-primary-navigation-enabled-active-indicator-primary-navigation-tab-active-indicator-color, #e42313),
+    active-hover-label-text-color: var(--tabs-primary-navigation-hovered-label-text-primary-navigation-tab-with-label-text-active-hover-color, #e42313),
+    active-indicator-color: var(--tabs-primary-navigation-enabled-active-indicator-primary-navigation-tab-active-indicator-color, #e42313),
+    active-label-text-color: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-active-color, #e42313),
+    active-ripple-color: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-active-color, #e42313),
+    inactive-focus-label-text-color: var(--tabs-primary-navigation-focused-label-text-primary-navigation-tab-with-label-text-inactive-focus-color, #181c1e),
+    inactive-hover-label-text-color: var(--tabs-primary-navigation-hovered-label-text-primary-navigation-tab-with-label-text-inactive-hover-color, #181c1e),
+    inactive-label-text-color: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-inactive-color, #434749),
+    inactive-ripple-color: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-inactive-color, #434749),
+    foreground-color: var(--tabs-primary-navigation-enabled-container-primary-navigation-tab-container-color, #f7fafc),
+    background-color: var(--tabs-primary-navigation-enabled-container-primary-navigation-tab-container-color, #f7fafc),
+    label-text-font: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-font, 'Heebo'),
+    label-text-line-height: calc(var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-line-height, 20) * 1px),
+    label-text-size: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-size, 14px),
+    label-text-tracking: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-tracking, 0.1px),
+    label-text-weight: var(--tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-weight, 500),
+    container-height: calc(var(--tabs-primary-navigation-enabled-container-primary-navigation-tab-container-height, 48) * 1px),
+  ));
+
+  & .mat-mdc-tab-ripple.mat-mdc-tab-ripple {
+    border-bottom: none; // la línea gris va en el contenedor para que quede detrás del indicador
+  }
+}
+
+// Línea gris continua en todo el ancho (queda detrás). Indicador rojo encima con z-index.
+.mat-mdc-tab-header .mat-mdc-tab-label-container {
+  border-bottom: 2px solid #e9e9e9;
+}
+
+.mat-mdc-tab-header {
+  justify-content: flex-start;
+}
+
+.mat-mdc-tab-header .mat-mdc-tab-label-container {
+  flex: 0 1 auto;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.mat-mdc-tab-header .mat-mdc-tab-labels {
+  flex: 0 0 auto;
+  width: fit-content;
+  max-width: 100%;
+}
+
+// Indicador rojo debajo del label, alineado al texto (ligero inset horizontal)
+.mat-mdc-tab-header .mdc-tab-indicator {
+  position: absolute !important;
+  top: auto !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 4px !important;
+}
+
+.mat-mdc-tab-header .mdc-tab-indicator .mdc-tab-indicator__content,
+.mat-mdc-tab-header .mdc-tab-indicator__content--underline,
+.mat-mdc-tab-header .mat-ink-bar {
+  position: absolute !important;
+  bottom: 0 !important;
+  top: auto !important;
+  left: 0.25rem !important;
+  right: 0.25rem !important;
+  height: 0.19rem !important;
+  min-height: 0.19rem !important;
+  width: auto !important;
+  border: none !important;
+  border-bottom: none !important;
+  border-radius: 0.25rem 0.25rem 0 0 !important;
+  background-color: var(--app-tabs-primary-navigation-enabled-active-indicator-primary-navigation-tab-active-indicator-color, #e42313) !important;
+  z-index: 1 !important;
+  display: block !important;
+}
+
+// Ancho dinámico: cada tab ocupa solo el ancho de su título (label). Indicador abajo del label.
+.mat-mdc-tab-header .mat-mdc-tab {
+  flex: 0 0 auto;
+  min-width: 0;
+  width: auto;
+  position: relative;
+  flex-direction: column;
+}
+.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__content {
+  width: fit-content;
+  min-width: fit-content;
+}
+
+// Contenedor del indicador: fijado abajo del tab (debajo del label), encima de la línea gris.
+
+// --- Customización del tab seleccionado ---
+// 1) Via tokens del mixin (arriba): active-label-text-color, active-indicator-color, active-ripple-color, etc.
+// 2) Via variables CSS (en :root o en _tokens-pallete.scss), p. ej.:
+//    --app-tabs-primary-navigation-enabled-label-text-primary-navigation-tab-with-label-text-active-color
+//    --app-tabs-primary-navigation-enabled-active-indicator-primary-navigation-tab-active-indicator-color
+// 3) Via CSS aquí: el tab seleccionado tiene la clase .mdc-tab--active. Ejemplo:
+
+// Tab seleccionado: selector .mat-mdc-tab.mdc-tab--active (y .mdc-tab__text-label para la etiqueta).
+// Añade aquí reglas extra para el ítem activo, p. ej.:
+// .mat-mdc-tab-header .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label { font-weight: 600; }
+
+// Hover en tab: border-radius y background según tokens.
+.mat-mdc-tab-header .mat-mdc-tab:hover {
+  border-radius: var(--tabs-primary-navigation-enabled-container-primary-navigation-tab-container-shape, 0);
+  background: var(--tabs-primary-navigation-focused-state-layer-primary-navigation-tab-inactive-focus-state-layer-color, rgba(24, 28, 30, 0.1));
+}

package/src/lib/styles/scrollbar.scss

@@ -0,0 +1,40 @@
+/// Scrollbar según Figma (node 8847:57066).
+/// Track: 4px, Gris-100, Corner-Radius-Full (pill). Thumb: Gris-500, Corner-Radius-Small.
+.app-scrollbar-figma {
+  --scrollbar-track-width: 0.25rem;
+  --scrollbar-track-bg: var(--Gris-100, #f3f4f6);
+  --scrollbar-track-radius: var(--Corner-Radius-Full, 6.25rem);
+  --scrollbar-thumb-bg: var(--Gris-500, #6a7282);
+  --scrollbar-thumb-radius: var(--Corner-Radius-Small, 0.5rem);
+  --scrollbar-thumb-min-height: 3rem;
+
+  scrollbar-gutter: stable;
+
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-track-width);
+    height: var(--scrollbar-track-width);
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-bg);
+    border-radius: var(--scrollbar-track-radius);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-bg);
+    border-radius: var(--scrollbar-thumb-radius);
+    min-height: var(--scrollbar-thumb-min-height);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--scrollbar-thumb-bg) 80%, black);
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background: color-mix(in srgb, var(--scrollbar-thumb-bg) 65%, black);
+  }
+}

package/src/lib/styles/text-classes.scss

@@ -0,0 +1,116 @@
+/// Clases de texto para usar en la app. Usan tokens de tokens-by-component/_tokens-typescale (--typescale-*).
+/// Uso: <h1 class="app-text-title">...</h1>, <p class="app-text-body">...</p>
+
+$text-color: var(--2-semantic-pallete-scheme-surface-on-surface, #181C1E);
+
+// --- Títulos (Headlines) ---
+.app-text-title {
+  color: $text-color;
+  font-family: var(--typescale-headline-medium-font, Heebo);
+  font-size: calc(var(--typescale-headline-medium-size, 28) * 1px);
+  font-weight: var(--typescale-headline-medium-weight-emphasized, 500);
+  line-height: calc(var(--typescale-headline-medium-line-height, 36) * 1px);
+  letter-spacing: calc(var(--typescale-headline-medium-tracking, 0) * 1px);
+}
+
+.app-text-title-large {
+  color: $text-color;
+  font-family: var(--typescale-headline-large-font, Heebo);
+  font-size: calc(var(--typescale-headline-large-size, 32) * 1px);
+  font-weight: var(--typescale-headline-large-weight-emphasized, 500);
+  line-height: calc(var(--typescale-headline-large-line-height, 40) * 1px);
+  letter-spacing: calc(var(--typescale-headline-large-tracking, 0) * 1px);
+}
+
+.app-text-title-small {
+  color: $text-color;
+  font-family: var(--typescale-headline-small-font, Heebo);
+  font-size: calc(var(--typescale-headline-small-size, 24) * 1px);
+  font-weight: var(--typescale-headline-small-weight-emphasized, 500);
+  line-height: calc(var(--typescale-headline-small-line-height, 32) * 1px);
+  letter-spacing: calc(var(--typescale-headline-small-tracking, 0) * 1px);
+}
+
+// --- Subtítulos (Titles) ---
+.app-text-subtitle {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-title-large-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-title-large-size, 22) * 1px);
+  font-weight: var(--md-sys-typescale-title-large-weight-emphasized, 500);
+  line-height: calc(var(--md-sys-typescale-title-large-line-height, 28) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-title-large-tracking, 0) * 1px);
+}
+
+.app-text-subtitle-medium {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-title-medium-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-title-medium-size, 16) * 1px);
+  font-weight: var(--md-sys-typescale-title-medium-weight, 500);
+  line-height: calc(var(--md-sys-typescale-title-medium-line-height, 24) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-title-medium-tracking, 0.15) * 1px);
+}
+
+.app-text-subtitle-small {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-title-small-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-title-small-size, 14) * 1px);
+  font-weight: var(--md-sys-typescale-title-small-weight, 500);
+  line-height: calc(var(--md-sys-typescale-title-small-line-height, 20) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-title-small-tracking, 0.1) * 1px);
+}
+
+// --- Cuerpo (Body) ---
+.app-text-body {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-body-medium-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-body-medium-size, 14) * 1px);
+  font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+  line-height: calc(var(--md-sys-typescale-body-medium-line-height, 20) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-body-medium-tracking, 0.25) * 1px);
+}
+
+.app-text-body-large {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-body-large-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-body-large-size, 16) * 1px);
+  font-weight: var(--md-sys-typescale-body-large-weight, 400);
+  line-height: calc(var(--md-sys-typescale-body-large-line-height, 24) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-body-large-tracking, 0.5) * 1px);
+}
+
+.app-text-body-small {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-body-small-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-body-small-size, 12) * 1px);
+  font-weight: var(--md-sys-typescale-body-small-weight, 400);
+  line-height: calc(var(--md-sys-typescale-body-small-line-height, 16) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-body-small-tracking, 0.4) * 1px);
+}
+
+// --- Etiquetas / Caption (Labels) ---
+.app-text-caption {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-label-medium-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-label-medium-size, 12) * 1px);
+  font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+  line-height: calc(var(--md-sys-typescale-label-medium-line-height, 16) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-label-medium-tracking, 0.5) * 1px);
+}
+
+.app-text-caption-large {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-label-large-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-label-large-size, 14) * 1px);
+  font-weight: var(--md-sys-typescale-label-large-weight, 500);
+  line-height: calc(var(--md-sys-typescale-label-large-line-height, 20) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-label-large-tracking, 0.1) * 1px);
+}
+
+.app-text-caption-small {
+  color: $text-color;
+  font-family: var(--md-sys-typescale-label-small-font, Heebo);
+  font-size: calc(var(--md-sys-typescale-label-small-size, 11) * 1px);
+  font-weight: var(--md-sys-typescale-label-small-weight, 500);
+  line-height: calc(var(--md-sys-typescale-label-small-line-height, 16) * 1px);
+  letter-spacing: calc(var(--md-sys-typescale-label-small-tracking, 0.5) * 1px);
+}

package/src/lib/styles/typography.scss

@@ -0,0 +1,14 @@
+// Compatibilidad: misma apariencia que .app-text-title (tokens app).
+.app-typography-headline-medium {
+  color: var(--pallete-scheme-surface-on-surface, #181C1E);
+
+  /* Headline/medium-emphasized */
+  font-family: var(--typescale-Headline-medium-Font, Heebo);
+  font-size: var(--typescale-Headline-medium-Size, 1.75rem);
+  font-style: normal;
+  font-weight: var(--typescale-Headline-medium-Weight-emphasized, 500);
+  line-height: var(--typescale-Headline-medium-Line-Height, 2.25rem); /* 128.571% */
+  letter-spacing: var(--typescale-Headline-medium-Tracking, 0);
+}
+
+

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "emitDecoratorMetadata": false,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "lib": ["es2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "skipTemplateCodegen": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./tsconfig.lib.json" }
+  ]
+}