/*
 * Design system complementar do Project Union X.
 * Os componentes preservam a estrutura do Unfold e acrescentam somente
 * elevação, composição e estados necessários a dashboards e relatórios.
 */
:root {
  --pux-space-section: 1.5rem;
  --pux-space-card: 1.25rem;
  --pux-space-card-compact: 1rem;
  --pux-space-grid: 1rem;
  --pux-transition-fast: 160ms ease;
}

/*
 * Barra de ferramentas para workspaces densos. Os controles internos devem
 * continuar usando componentes e widgets do Unfold sempre que disponíveis.
 */
.pux-tool-bar {
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-base-200);
  border-radius: .75rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 7%);
  display: flex;
  flex: 0 0 auto;
  gap: .4375rem;
  min-width: 0;
  overflow: visible;
  padding: .5rem .625rem;
  scrollbar-width: thin;
}

.pux-tool-bar > * {
  flex: 0 0 auto;
}

/*
 * Em ferramentas full-page, a toolbar inicia o conteúdo sem margem superior
 * adicional e estabelece o ritmo fixo antes do workspace principal.
 */
.pux-tool-bar--full-page {
  margin-block: 0 .75rem;
}

.pux-tool-bar__separator {
  align-self: center;
  background: var(--color-base-200);
  height: 1.5rem;
  margin-inline: .25rem;
  width: 1px;
}

.dark .pux-tool-bar {
  background: var(--color-base-900);
  border-color: var(--color-base-700);
}

.dark .pux-tool-bar__separator {
  background: var(--color-base-700);
}

/*
 * Preserva o badge oficial do Unfold e ajusta somente o raio do contador da
 * Caixa de Entrada, sem interferir nas cores e nos demais badges do menu.
 */
#nav-sidebar-apps a[href$="/admin/pendencias/minhas/"] .sidebar-badge {
  border-radius: var(--radius-sm);
}

.pux-card {
  min-width: 0;
}

.pux-card > .pux-card__surface {
  background: color-mix(in srgb, var(--color-white) 96%, transparent);
  border-color: color-mix(in srgb, var(--color-base-200) 76%, transparent);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 4%);
  height: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pux-card:hover > .pux-card__surface {
  border-color: color-mix(in srgb, var(--color-primary-400) 22%, var(--color-base-200));
  box-shadow: 0 2px 6px rgb(15 23 42 / 5%), 0 14px 30px rgb(15 23 42 / 7%);
}

.pux-card:focus-within > .pux-card__surface {
  outline: 2px solid color-mix(in srgb, var(--color-primary-500) 65%, transparent);
  outline-offset: 2px;
}

.pux-card--flush > .pux-card__surface {
  padding: 0;
}

/*
 * Superfície analítica estática: não recebe hover ou elevação porque não
 * representa uma ação. Sua densidade segue os protótipos UX do produto.
 */
.pux-card-ux {
  background: var(--color-white);
  border: 1px solid var(--color-base-200);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
  min-width: 0;
}

.pux-card-ux__header {
  border-bottom: 1px solid var(--color-base-200);
  padding: 1rem 1.5rem;
}

.pux-card-ux__header h2 {
  color: var(--color-base-900);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.25rem;
  margin: 0;
}

.pux-card-ux__body {
  padding: 1.25rem 1.5rem;
}

/* Superfície comum dos gráficos preserva o canvas dentro do card analítico. */
.pux-chart-card {
  height: 100%;
  isolation: isolate;
  min-width: 0;
}

.pux-chart-card__body {
  min-width: 0;
  position: relative;
}

.pux-chart-card__body canvas {
  max-width: 100%;
}

/* Títulos compartilhados evitam escalas tipográficas divergentes entre telas. */
.pux-section-title h2 {
  color: var(--color-base-800);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.25rem;
  margin: 0;
}

.pux-section-title p {
  color: var(--color-base-500);
  font-size: .75rem;
  line-height: 1rem;
  margin: .25rem 0 0;
}

/* Estados curtos reutilizam tom semântico, ícone e contraste consistente. */
.pux-status-badge {
  align-items: center;
  border-radius: .375rem;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .6875rem;
  gap: .25rem;
  line-height: 1rem;
  padding: .25rem .5rem;
  white-space: nowrap;
}

.pux-status-badge .material-symbols-outlined {
  font-size: .875rem;
}

.pux-status-badge--neutral {
  background: var(--color-base-100);
  color: var(--color-base-600);
}

.pux-status-badge--success {
  background: rgb(240 253 244);
  color: rgb(21 128 61);
}

.pux-status-badge--warning {
  background: rgb(255 251 235);
  color: rgb(180 83 9);
}

.pux-status-badge--danger {
  background: rgb(254 242 242);
  color: rgb(220 38 38);
}

/* Métricas mantêm a mesma hierarquia visual em cartões e relatórios. */
.pux-metric-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pux-metric-group strong {
  color: var(--color-base-900);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.75rem;
}

.pux-metric-group span {
  color: var(--color-base-500);
  font-size: .75rem;
  line-height: 1rem;
  margin-top: .25rem;
}

.pux-metric-group--danger strong {
  color: rgb(220 38 38);
}

/* A linha de ação amplia o alvo de clique sem depender de JavaScript. */
.pux-action-row {
  color: inherit;
  text-decoration: none;
}

.pux-action-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-primary-500) 72%, transparent);
  outline-offset: 2px;
}

.pux-kpi-ux {
  align-items: center;
  display: flex;
  gap: .75rem;
  min-height: 5rem;
  padding: .875rem 1rem;
}

.pux-kpi-ux__icon {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.pux-kpi-ux__icon .material-symbols-outlined {
  font-size: 1.125rem;
}

.pux-kpi-ux__content {
  min-width: 0;
}

.pux-kpi-ux__content p {
  color: var(--color-base-500);
  font-size: .75rem;
  line-height: 1rem;
  margin: 0;
}

.pux-kpi-ux__content strong {
  color: var(--color-base-900);
  display: block;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.5rem;
  margin-top: .125rem;
}

.pux-kpi-ux__content .pux-text--danger {
  color: rgb(220 38 38);
}

.pux-kpi > .pux-card__surface {
  min-height: 7.5rem;
}

.pux-kpi__icon {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.pux-kpi__label {
  color: var(--color-base-500);
  font-size: .75rem;
  line-height: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pux-kpi__value {
  color: var(--color-base-900);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 2rem;
}

.pux-kpi__support {
  color: var(--color-base-500);
  font-size: .75rem;
  margin-top: .125rem;
}

.pux-tone--primary {
  background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
  color: var(--color-primary-600);
}

.pux-tone--danger {
  background: rgb(254 242 242);
  color: rgb(220 38 38);
}

.pux-tone--warning {
  background: rgb(255 251 235);
  color: rgb(217 119 6);
}

.pux-tone--info {
  background: rgb(239 246 255);
  color: rgb(37 99 235);
}

/* O tom positivo diferencia indicadores concluídos sem excesso de saturação. */
.pux-tone--success {
  background: rgb(236 253 245);
  color: rgb(5 150 105);
}

.pux-progress {
  display: grid;
  gap: .5rem;
}

.pux-progress--with-icon {
  align-items: center;
  gap: .75rem;
  grid-template-columns: 1.25rem minmax(0, 1fr);
}

.pux-progress__content {
  display: grid;
  gap: .5rem;
  min-width: 0;
}

.pux-progress__icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.pux-progress__icon .material-symbols-outlined {
  font-size: 1.125rem;
}

.pux-progress__icon--primary {
  color: var(--color-primary-600);
}

.pux-progress__icon--info {
  color: rgb(59 130 246);
}

.pux-progress__icon--warning {
  color: rgb(34 197 94);
}

.pux-progress__header {
  align-items: center;
  color: var(--color-base-700);
  display: flex;
  font-size: .875rem;
  justify-content: space-between;
}

.pux-progress__header strong {
  background: var(--color-base-100);
  border-radius: var(--border-radius, 6px);
  color: var(--color-base-700);
  font-size: .75rem;
  font-weight: 600;
  padding: .125rem .375rem;
}

.pux-progress__track {
  background: var(--color-base-100);
  border-radius: 9999px;
  height: .375rem;
  overflow: hidden;
  width: 100%;
}

.pux-progress__value {
  background: var(--color-primary-600);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 300ms ease;
  width: var(--pux-progress-value);
}

.pux-progress__value--empty {
  width: 0;
}

.pux-progress__value--info {
  background: rgb(59 130 246);
}

.pux-progress__value--warning {
  background: rgb(245 158 11);
}

.pux-progress__value--danger {
  background: rgb(239 68 68);
}

.pux-progress__value--success {
  background: rgb(34 197 94);
}

/* O anel usa conic-gradient porque o Unfold não possui um gauge circular compacto. */
.pux-ring {
  --pux-ring-color: var(--color-primary-600);
  align-items: center;
  background: conic-gradient(
    var(--pux-ring-color) calc(var(--pux-ring-value) * 1%),
    var(--color-base-100) 0
  );
  border-radius: 9999px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 5rem;
  justify-content: center;
  position: relative;
  width: 5rem;
}

.pux-ring::before {
  background: var(--color-white);
  border-radius: inherit;
  content: "";
  inset: .5rem;
  position: absolute;
}

.pux-ring__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.pux-ring__content strong {
  color: var(--color-base-900);
  font-size: 1rem;
  font-weight: 700;
}

.pux-ring__content span {
  color: var(--color-base-500);
  font-size: .625rem;
  margin-top: .25rem;
}

.pux-ring--danger {
  --pux-ring-color: rgb(239 68 68);
}

.pux-ring--warning {
  --pux-ring-color: rgb(245 158 11);
}

.pux-ring--success {
  --pux-ring-color: rgb(34 197 94);
}

/*
 * Cartão de carga: concentra a leitura em pessoa, pendências e distribuição.
 * O percentual aparece somente no anel para não duplicar a mesma informação.
 */
.pux-workload-card {
  padding: var(--pux-space-card);
}

.pux-workload-card__header {
  align-items: flex-start;
  display: grid;
  gap: .75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.pux-workload-card__identity {
  min-width: 0;
}

.pux-workload-card__identity h2 {
  color: var(--color-base-900);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25rem;
  margin: 0;
}

.pux-workload-card__identity p,
.pux-workload-card__projects {
  color: var(--color-base-500);
  display: block;
  font-size: .75rem;
  line-height: 1rem;
  margin: .125rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pux-workload-card__projects {
  color: var(--color-primary-600);
}

.pux-workload-card__projects .material-symbols-outlined {
  font-size: .875rem;
  margin-right: .25rem;
  vertical-align: -.125rem;
}

.pux-workload-card__summary {
  align-items: center;
  border-bottom: 1px solid var(--color-base-200);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr auto;
  margin-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pux-workload-card__distribution {
  border-bottom: 1px solid var(--color-base-200);
  padding: 1.25rem 0;
}

.pux-workload-card__categories {
  display: grid;
  gap: 1rem;
}

.pux-workload-card__footer {
  align-items: center;
  color: var(--color-base-500);
  display: flex;
  font-size: .75rem;
  gap: .5rem;
  line-height: 1rem;
  padding-top: 1rem;
}

.pux-workload-card__footer .material-symbols-outlined {
  font-size: 1rem;
}

.pux-workload-card__updated {
  margin-left: auto;
  white-space: nowrap;
}

/*
 * Cartão de projeto: usa superfície neutra e reserva a cor para a semântica,
 * reduzindo o aspecto de cartões aninhados.
 */
.pux-project-pending-card {
  height: 100%;
}

.pux-project-pending-card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--pux-space-card-compact);
}

.pux-project-pending-card__header {
  align-items: flex-start;
  display: flex;
  gap: .75rem;
  min-height: 3.5rem;
}

.pux-project-pending-card__header > .material-symbols-outlined {
  font-size: 1.125rem;
  margin-top: .125rem;
}

.pux-project-pending-card__identity {
  min-width: 0;
}

.pux-project-pending-card__identity h3 {
  color: var(--color-base-900);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.25rem;
  margin: 0;
}

.pux-project-pending-card__identity p {
  color: var(--color-base-500);
  font-size: .75rem;
  line-height: 1.125rem;
  margin: .25rem 0 0;
}

.pux-project-pending-card__metrics {
  display: grid;
  gap: .625rem;
  margin-top: 1rem;
}

.pux-project-metric-link {
  background: color-mix(in srgb, var(--color-base-50) 70%, transparent);
  border: 1px solid var(--color-base-200);
  border-radius: .5rem;
  display: grid;
  gap: .625rem;
  overflow: hidden;
  padding: .75rem .875rem .75rem 1rem;
  position: relative;
  transition: background-color var(--pux-transition-fast), border-color var(--pux-transition-fast);
}

.pux-project-metric-link:hover {
  background: color-mix(in srgb, var(--color-primary-50) 36%, var(--color-white));
  border-color: color-mix(in srgb, var(--color-primary-400) 42%, var(--color-base-200));
}

.pux-project-metric-link__accent {
  background: var(--color-primary-500);
  border-radius: 9999px;
  bottom: .625rem;
  left: .375rem;
  position: absolute;
  top: .625rem;
  width: .125rem;
}

.pux-project-metric-link--info .pux-project-metric-link__accent {
  background: rgb(59 130 246);
}

.pux-project-metric-link--warning .pux-project-metric-link__accent {
  background: rgb(245 158 11);
}

.pux-project-metric-link__header,
.pux-project-metric-link__identity,
.pux-project-metric-link__total {
  align-items: center;
  display: flex;
}

.pux-project-metric-link__header {
  justify-content: space-between;
}

.pux-project-metric-link__identity {
  color: var(--color-base-800);
  font-size: .875rem;
  font-weight: 600;
  gap: .5rem;
}

.pux-project-metric-link__identity .material-symbols-outlined {
  color: var(--color-primary-600);
  font-size: 1rem;
}

.pux-project-metric-link--info .pux-project-metric-link__identity .material-symbols-outlined {
  color: rgb(37 99 235);
}

.pux-project-metric-link--warning .pux-project-metric-link__identity .material-symbols-outlined {
  color: rgb(217 119 6);
}

.pux-project-metric-link__total {
  color: var(--color-base-700);
  font-size: .75rem;
  font-weight: 600;
  gap: .25rem;
}

.pux-project-metric-link__total .material-symbols-outlined {
  font-size: .875rem;
}

.pux-project-metric-link__details {
  color: var(--color-base-500);
  display: grid;
  font-size: .75rem;
  gap: .25rem;
  line-height: 1rem;
}

.pux-project-metric-link__details strong {
  color: var(--color-base-700);
  font-weight: 600;
}

/* Lista analítica com densidade de tabela e comportamento de cartões no mobile. */
.pux-priority-list__header,
.pux-priority-item {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(7rem, .75fr) minmax(12rem, 2.5fr) minmax(7rem, 1fr) minmax(7rem, .8fr) 2.5rem;
}

.pux-priority-list__header {
  border-bottom: 1px solid var(--color-base-200);
  color: var(--color-base-500);
  font-size: .875rem;
  font-weight: 500;
  padding: 0 1rem .75rem;
}

.pux-priority-list__body {
  display: grid;
}

.pux-priority-list__more {
  border-top: 1px solid var(--color-base-200);
}

.pux-priority-list__more > summary {
  align-items: center;
  color: var(--color-primary-600);
  cursor: pointer;
  display: flex;
  font-size: .875rem;
  font-weight: 500;
  gap: .375rem;
  justify-content: center;
  list-style: none;
  min-height: 3rem;
  padding: .625rem 1rem;
}

.pux-priority-list__more > summary::-webkit-details-marker {
  display: none;
}

.pux-priority-list__more > summary:focus-visible {
  border-radius: var(--border-radius, 6px);
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
}

.pux-priority-list__more > summary .material-symbols-outlined {
  font-size: 1.125rem;
  transition: transform var(--pux-transition-fast);
}

.pux-priority-list__less-label,
.pux-priority-list__more[open] .pux-priority-list__more-label {
  display: none;
}

.pux-priority-list__more[open] .pux-priority-list__less-label {
  display: inline;
}

.pux-priority-list__more[open] > summary .material-symbols-outlined {
  transform: rotate(180deg);
}

.pux-priority-list__group {
  color: var(--color-base-600);
  font-size: .75rem;
  font-weight: 600;
  padding: .875rem 1rem .375rem;
}

/*
 * Listas do acompanhamento derivam da composição aprovada para prioridades:
 * cabeçalho discreto, linhas acionáveis, ícone semântico e ação explícita.
 */
.pux-attention-list__header,
.pux-attention-item {
  align-items: center;
  display: grid;
  gap: 1rem;
}

.pux-attention-list--projects .pux-attention-list__header,
.pux-attention-item--project {
  grid-template-columns: minmax(18rem, 2.5fr) minmax(8rem, .8fr) minmax(10rem, 1.2fr) 5rem 7rem 2.5rem;
}

.pux-attention-list--documents .pux-attention-list__header,
.pux-attention-item--document {
  grid-template-columns: minmax(13rem, 1.2fr) minmax(16rem, 2.2fr) minmax(10rem, 1.2fr) minmax(7rem, .7fr) 6rem 2.5rem;
}

.pux-attention-list__header {
  border-bottom: 1px solid var(--color-base-200);
  color: var(--color-base-500);
  font-size: .875rem;
  font-weight: 500;
  padding: 0 1rem .75rem;
}

.pux-attention-list__body {
  display: grid;
}

.pux-attention-item {
  border-bottom: 1px solid var(--color-base-200);
  color: var(--color-base-600);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.25rem;
  min-height: 4.5rem;
  padding: .625rem 1rem;
  position: relative;
  transition: background-color var(--pux-transition-fast);
}

.pux-attention-item:last-child {
  border-bottom: 0;
}

.pux-attention-item:hover,
.pux-attention-item:focus-visible {
  background: color-mix(in srgb, var(--color-primary-50) 52%, transparent);
}

.pux-attention-item__main,
.pux-attention-item__profile {
  align-items: center;
  display: flex;
  gap: .625rem;
  min-width: 0;
}

.pux-attention-item__icon {
  align-items: center;
  border-radius: .625rem;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.pux-attention-item__icon .material-symbols-outlined {
  font-size: 1.125rem;
}

.pux-attention-item__identity {
  display: grid;
  min-width: 0;
}

.pux-attention-item__identity > span,
.pux-attention-item__title {
  color: var(--color-base-900);
  font: inherit;
}

.pux-attention-item__identity span,
.pux-attention-item__identity small,
.pux-attention-item__title,
.pux-attention-item__profile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pux-attention-item__identity small {
  color: var(--color-base-500);
  font: inherit;
  margin-top: .125rem;
}

.pux-attention-item__muted,
.pux-attention-item__profile {
  color: var(--color-base-500);
}

.pux-attention-item__progress {
  color: var(--color-base-700);
  font: inherit;
}

.pux-attention-item__action {
  align-items: center;
  border: 1px solid var(--color-base-200);
  border-radius: .5rem;
  color: var(--color-base-600);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  justify-self: end;
  transition: border-color var(--pux-transition-fast), color var(--pux-transition-fast);
  width: 2.25rem;
}

.pux-attention-item:hover .pux-attention-item__action,
.pux-attention-item:focus-visible .pux-attention-item__action {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.pux-attention-item__action .material-symbols-outlined {
  font-size: 1.125rem;
}

.pux-priority-item--overdue.pux-attention-item .pux-attention-item__date,
.pux-priority-item--overdue.pux-attention-item .pux-attention-item__identity small {
  color: rgb(220 38 38);
}

.pux-priority-item {
  border-bottom: 1px solid var(--color-base-200);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 400;
  min-height: 4rem;
  padding: .625rem 1rem;
  position: relative;
  transition: background-color 160ms ease;
}

.pux-priority-item:last-child {
  border-bottom: 0;
}

.pux-priority-item:hover,
.pux-priority-item:focus-visible {
  background: color-mix(in srgb, var(--color-primary-50) 52%, transparent);
}

.pux-priority-item--overdue::before {
  background: rgb(248 113 113);
  border-radius: 9999px;
  content: "";
  inset: .75rem auto .75rem 0;
  position: absolute;
  width: .125rem;
}

.pux-priority-item__type {
  align-items: center;
  color: var(--color-base-600);
  display: flex;
  gap: .625rem;
}

.pux-priority-item__icon {
  align-items: center;
  border-radius: .625rem;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.pux-priority-item__icon .material-symbols-outlined {
  font-size: 1.125rem;
}

.pux-priority-item__main {
  min-width: 0;
}

.pux-priority-item__title {
  color: var(--color-base-900);
  display: block;
  font: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pux-priority-item__project {
  color: var(--color-base-500);
}

.pux-priority-item__mobile-project {
  color: var(--color-base-500);
  display: none;
  margin-top: .25rem;
}

.pux-priority-item__date {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.pux-priority-item__date time {
  color: var(--color-base-700);
}

.pux-priority-item__date span {
  color: var(--color-base-500);
}

.pux-priority-item--overdue .pux-priority-item__date time,
.pux-priority-item--overdue .pux-priority-item__date span {
  color: rgb(220 38 38);
}

.pux-priority-item__action {
  align-items: center;
  border: 1px solid var(--color-base-200);
  border-radius: var(--border-radius, 6px);
  color: var(--color-base-600);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  transition: border-color var(--pux-transition-fast), color var(--pux-transition-fast);
  width: 2.25rem;
}

.pux-priority-item:hover .pux-priority-item__action,
.pux-priority-item:focus-visible .pux-priority-item__action {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
}

.pux-priority-item__action .material-symbols-outlined {
  font-size: 1.125rem;
}

.pux-empty-state {
  align-items: center;
  color: var(--color-base-500);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 10rem;
  padding: 1.5rem;
  text-align: center;
}

.pux-empty-state__icon {
  font-size: 2.25rem;
  margin-bottom: .5rem;
}

/* O modo escuro mantém contraste e profundidade sem criar superfícies claras. */
.dark .pux-card > .pux-card__surface {
  background: color-mix(in srgb, var(--color-base-900) 94%, transparent);
  border-color: color-mix(in srgb, var(--color-base-700) 76%, transparent);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%), 0 14px 30px rgb(0 0 0 / 16%);
}

.dark .pux-card:hover > .pux-card__surface {
  border-color: color-mix(in srgb, var(--color-primary-400) 34%, var(--color-base-700));
}

.dark .pux-kpi__value {
  color: var(--color-base-50);
}

.dark .pux-tone--danger {
  background: rgb(239 68 68 / 18%);
  color: rgb(252 165 165);
}

.dark .pux-tone--warning {
  background: rgb(245 158 11 / 18%);
  color: rgb(252 211 77);
}

.dark .pux-tone--info {
  background: rgb(59 130 246 / 18%);
  color: rgb(147 197 253);
}

.dark .pux-tone--success {
  background: rgb(5 150 105 / 20%);
  color: rgb(110 231 183);
}

.dark .pux-card-ux {
  background: var(--color-base-900);
  border-color: var(--color-base-700);
}

.dark .pux-card-ux__header {
  border-color: var(--color-base-700);
}

.dark .pux-card-ux__header h2 {
  color: var(--color-base-50);
}

.dark .pux-section-title h2,
.dark .pux-project-pending-card__identity h3,
.dark .pux-project-metric-link__identity,
.dark .pux-metric-group strong {
  color: var(--color-base-50);
}

.dark .pux-section-title p,
.dark .pux-project-pending-card__identity p,
.dark .pux-project-metric-link__details,
.dark .pux-metric-group span {
  color: var(--color-base-400);
}

.dark .pux-status-badge--neutral {
  background: var(--color-base-800);
  color: var(--color-base-300);
}

.dark .pux-status-badge--success {
  background: rgb(34 197 94 / 18%);
  color: rgb(134 239 172);
}

.dark .pux-status-badge--warning {
  background: rgb(245 158 11 / 18%);
  color: rgb(252 211 77);
}

.dark .pux-status-badge--danger {
  background: rgb(239 68 68 / 18%);
  color: rgb(252 165 165);
}

.dark .pux-kpi-ux__content p,
.dark .pux-workload-card__identity p,
.dark .pux-workload-card__footer {
  color: var(--color-base-400);
}

.dark .pux-kpi-ux__content strong,
.dark .pux-workload-card__identity h2 {
  color: var(--color-base-50);
}

.dark .pux-kpi-ux__content .pux-text--danger,
.dark .pux-metric-group--danger strong {
  color: rgb(248 113 113);
}

.dark .pux-project-metric-link {
  background: color-mix(in srgb, var(--color-base-800) 72%, transparent);
  border-color: var(--color-base-700);
}

.dark .pux-project-metric-link:hover {
  background: color-mix(in srgb, var(--color-primary-950) 28%, var(--color-base-800));
  border-color: color-mix(in srgb, var(--color-primary-400) 42%, var(--color-base-700));
}

.dark .pux-project-metric-link__total,
.dark .pux-project-metric-link__details strong {
  color: var(--color-base-200);
}

.dark .pux-workload-card__summary,
.dark .pux-workload-card__distribution {
  border-color: var(--color-base-700);
}

.dark .pux-progress__header {
  color: var(--color-base-200);
}

.dark .pux-progress__header strong {
  background: var(--color-base-800);
  color: var(--color-base-200);
}

.dark .pux-progress__track {
  background: var(--color-base-800);
}

.dark .pux-ring {
  background: conic-gradient(
    var(--pux-ring-color) calc(var(--pux-ring-value) * 1%),
    var(--color-base-800) 0
  );
}

.dark .pux-ring::before {
  background: var(--color-base-900);
}

.dark .pux-ring__content strong,
.dark .pux-priority-item__title {
  color: var(--color-base-50);
}

.dark .pux-priority-list__header,
.dark .pux-priority-item,
.dark .pux-attention-list__header,
.dark .pux-attention-item {
  border-color: var(--color-base-700);
}

.dark .pux-priority-list__more {
  border-color: var(--color-base-700);
}

.dark .pux-priority-item:hover,
.dark .pux-priority-item:focus-visible,
.dark .pux-attention-item:hover,
.dark .pux-attention-item:focus-visible {
  background: color-mix(in srgb, var(--color-primary-950) 48%, transparent);
}

.dark .pux-priority-list__group,
.dark .pux-priority-item__type,
.dark .pux-priority-item__project,
.dark .pux-priority-item__mobile-project,
.dark .pux-attention-item {
  color: var(--color-base-300);
}

.dark .pux-attention-item__identity > span,
.dark .pux-attention-item__title {
  color: var(--color-base-50);
}

.dark .pux-attention-item__identity small,
.dark .pux-attention-item__muted,
.dark .pux-attention-item__profile {
  color: var(--color-base-400);
}

.dark .pux-priority-item__date time {
  color: var(--color-base-200);
}

.dark .pux-priority-item__action,
.dark .pux-attention-item__action {
  border-color: var(--color-base-700);
  color: var(--color-base-300);
}

@media (max-width: 767px) {
  .pux-tool-bar {
    flex-wrap: wrap;
  }

  .pux-tool-bar__separator {
    display: none;
  }

  .pux-kpi-ux {
    min-height: 4.5rem;
    padding: .75rem;
  }

  .pux-card-ux__header,
  .pux-card-ux__body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .pux-workload-card {
    padding: 1rem;
  }

  .pux-workload-card__header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .pux-workload-card__header > .pux-status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .pux-workload-card__summary {
    grid-template-columns: 1fr 1fr auto;
  }

  .pux-workload-card__updated {
    display: none;
  }

  .pux-priority-list__header {
    display: none;
  }

  .pux-attention-list__header {
    display: none;
  }

  .pux-attention-item,
  .pux-attention-item--project,
  .pux-attention-item--document {
    gap: .5rem .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem;
  }

  .pux-attention-item > :not(.pux-attention-item__action) {
    grid-column: 1;
  }

  .pux-attention-item__action {
    grid-column: 2;
    grid-row: 1 / span 5;
  }

  .pux-priority-item {
    gap: .75rem;
    grid-template-columns: 1fr auto;
    padding: 1rem;
  }

  .pux-priority-list__group {
    padding-left: 0;
    padding-right: 0;
  }

  .pux-priority-list__more > summary {
    justify-content: flex-start;
  }

  .pux-priority-item__type {
    grid-column: 1;
  }

  .pux-priority-item__main {
    grid-column: 1;
  }

  .pux-priority-item__project {
    display: none;
  }

  .pux-priority-item__mobile-project {
    display: block;
  }

  .pux-priority-item__date {
    grid-column: 1;
  }

  .pux-priority-item__action {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* Respeita usuários que desativam animações no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  .pux-card > .pux-card__surface,
  .pux-progress__value,
  .pux-priority-item,
  .pux-priority-item__action,
  .pux-attention-item,
  .pux-attention-item__action,
  .pux-project-metric-link,
  .pux-priority-list__more > summary .material-symbols-outlined {
    transition: none;
  }
}