/* Baluarte Material Design v1.5 — biblioteca de componentes. */

/* Button. */
.b-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-space-3);
  inline-size: fit-content;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 40px;
  padding-inline: var(--b-space-7);
  padding-block: 0;
  border: 1px solid transparent;
  border-radius: var(--b-shape-control-radius);
  corner-shape: var(--b-corner-squircle);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-semibold);
  cursor: pointer;
  user-select: none;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  transition: background var(--b-motion-fast) var(--b-ease-standard),
    border-color var(--b-motion-fast) var(--b-ease-standard),
    color var(--b-motion-fast) var(--b-ease-standard),
    filter var(--b-motion-fast) var(--b-ease-standard);
}

.b-btn > .b-row-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  pointer-events: none;
}
.b-btn > .b-icon { align-self: center; }

.b-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.b-btn:active:not(:disabled) { filter: brightness(.94); }
.b-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.b-btn[aria-busy="true"]::after {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--b-radius-circle);
  animation: b-spin .8s linear infinite;
}

/* Variantes — filled para ação principal e accent para destaque interativo. */
.b-btn--filled {
  background: var(--action);
  color: var(--on-action);
}
.b-btn--filled:hover:not(:disabled) { background: var(--action-hover); }

.b-btn--accent {
  background: var(--accent);
  color: var(--on-accent);
}
.b-btn--accent:hover:not(:disabled) { filter: brightness(1.07); }

.b-btn--tonal {
  background: var(--surface-2);
  color: var(--text);
}
.b-btn--tonal:hover:not(:disabled) { background: var(--surface-selected); }

.b-btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.b-btn--outline:hover:not(:disabled) { background: var(--surface-hover); }

.b-btn--ghost {
  background: transparent;
  color: var(--text);
}
.b-btn--ghost:hover:not(:disabled) { background: var(--surface-hover); }

/* Ação destrutiva usa o contrato danger e escurece no hover. */
.b-btn--danger {
  background: var(--danger-action);
  color: var(--on-danger-action);
}
.b-btn--danger:hover:not(:disabled) { background: var(--danger-action-hover); }

/* Tamanhos — compacto, padrão e destaque. */
.b-btn--sm { min-block-size: 32px; padding-inline: var(--b-space-6); border-radius: var(--b-shape-control-compact-radius); font-size: var(--b-text-sm); }
.b-btn--lg { min-block-size: 52px; padding-inline: var(--b-space-8); border-radius: var(--b-shape-control-large-radius); font-size: var(--b-text-lg); }
.b-btn--pill { border-radius: var(--b-radius-pill); corner-shape: var(--b-corner-rounded); }
.b-btn--block { inline-size: 100%; }

/* Icon Button: density, emphasis, behavior, and shape are independent axes. */
.b-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--b-control-default);
  block-size: var(--b-control-default);
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--b-shape-control-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  cursor: pointer;
  transition: background var(--b-motion-fast) var(--b-ease-standard),
    border-color var(--b-motion-fast) var(--b-ease-standard),
    color var(--b-motion-fast) var(--b-ease-standard);
}
.b-icon-btn > .b-icon { --b-icon-size: var(--b-icon-default); }
.b-icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.b-icon-btn:active:not(:disabled) { background: var(--surface-selected); }
.b-icon-btn:disabled { cursor: not-allowed; opacity: .5; }
.b-icon-btn[aria-busy="true"] { cursor: progress; }
.b-icon-btn[aria-busy="true"] > .b-icon { opacity: .35; }

/* Density: compact is contextual, default is standard, touch is explicit. */
.b-icon-btn--compact {
  inline-size: var(--b-control-compact);
  block-size: var(--b-control-compact);
  border-radius: var(--b-shape-control-compact-radius);
}
.b-icon-btn--compact > .b-icon { --b-icon-size: var(--b-icon-compact); }
.b-icon-btn--touch {
  inline-size: var(--b-control-touch);
  block-size: var(--b-control-touch);
  border-radius: var(--b-shape-control-large-radius);
}
.b-icon-btn--touch > .b-icon { --b-icon-size: var(--b-icon-large); }

/* Shape: Circle requires an explicit radial context; the class alone remains Squircle. */
.b-icon-btn-context--radial {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-3);
}
.b-composer .b-composer__action.b-icon-btn--circle,
.b-icon-btn-context--radial > .b-icon-btn--circle {
  border-radius: var(--b-radius-circle);
  corner-shape: var(--b-corner-rounded);
}

/* Emphasis never changes size or shape. */
.b-icon-btn--subtle { background: var(--surface); color: var(--text); }
.b-icon-btn--outline { border-color: var(--border-strong); color: var(--text); }
.b-icon-btn--filled { background: var(--action); color: var(--on-action); }
.b-icon-btn--filled:hover:not(:disabled) { background: var(--action-hover); color: var(--on-action); }
.b-icon-btn--danger { color: var(--danger); }
.b-icon-btn--danger:hover:not(:disabled) { background: var(--danger-bg); color: var(--danger); }
.b-icon-btn[aria-pressed="true"]:not(.b-icon-btn--filled),
.b-icon-btn[aria-expanded="true"]:not(.b-icon-btn--filled) { background: var(--surface-selected); color: var(--text); }


/* Chip. */
.b-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-3);
  min-block-size: 28px;
  padding-inline: var(--b-space-5);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-pill);
  background: var(--bg);
  color: var(--text);
  font-size: var(--b-text-sm);
  font-weight: var(--b-weight-medium);
  cursor: pointer;
  transition: background var(--b-motion-fast) var(--b-ease-standard),
    border-color var(--b-motion-fast) var(--b-ease-standard);
}
.b-chip:hover:not(:disabled) { background: var(--surface-hover); }
.b-chip:active:not(:disabled) { background: var(--surface-selected); }
.b-chip:disabled { cursor: not-allowed; opacity: .5; }
.b-chip[aria-pressed="true"],
.b-chip--selected {
  background: var(--surface-selected);
  border-color: var(--border-strong);
}
.b-chip--tag {
  cursor: default;
  min-block-size: 24px;
  font-size: var(--b-text-xs);
  color: var(--text-subtle);
  background: var(--surface);
}

/* Badge. */
.b-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-2);
  min-block-size: 20px;
  padding-inline: var(--b-space-4);
  border-radius: var(--b-radius-pill);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
  background: var(--surface-2);
  color: var(--text-subtle);
}
.b-badge--info    { background: var(--info-bg);    color: var(--info); }
.b-badge--success { background: var(--success-bg); color: var(--success); }
.b-badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.b-badge--warning { background: var(--warning-bg); color: var(--warning); }
.b-badge--dot {
  min-block-size: 8px;
  inline-size: 8px;
  padding: 0;
  border-radius: var(--b-radius-circle);
}

/* Avatar. */
.b-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--b-radius-circle);
  background: var(--surface-2);
  color: var(--text-subtle);
  font-size: var(--b-text-sm);
  font-weight: var(--b-weight-semibold);
  overflow: hidden;
  flex: 0 0 auto;
}
.b-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.b-avatar--sm { inline-size: 24px; block-size: 24px; font-size: var(--b-text-2xs); }
.b-avatar--lg { inline-size: 44px; block-size: 44px; font-size: var(--b-text-lg); }

/* Card. */
.b-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  padding: var(--b-space-7);
  transition: box-shadow var(--b-motion-base) var(--b-ease-standard),
    border-color var(--b-motion-base) var(--b-ease-standard);
}
.b-card--interactive {
  inline-size: 100%;
  border-radius: var(--b-shape-interactive-radius);
  corner-shape: var(--b-corner-squircle);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.b-card--interactive:hover:not(:disabled) { box-shadow: var(--elevation-2); border-color: var(--border-strong); }
.b-card--interactive:active:not(:disabled) { background: var(--surface-hover); }
.b-card--interactive:disabled { cursor: not-allowed; opacity: .5; }
.b-card--elevated { border: none; box-shadow: var(--elevation-1); }
.b-card--surface { background: var(--surface); border: none; }

/* Dialog / Modal. */
.b-dialog-mask {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: grid;
  place-items: center;
  z-index: var(--b-z-modal);
  animation: b-fade-in var(--b-motion-base) var(--b-ease-decelerate);
}
/* Modal com superfície elevada, borda sutil e zonas sem divisores pesados. */
.b-dialog {
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--b-radius-2xl);
  box-shadow: var(--elevation-5);
  inline-size: min(480px, calc(100vw - 32px));
  max-block-size: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.b-dialog__header {
  display: flex;
  align-items: center;
  gap: var(--b-space-4);
  padding: var(--b-space-9) var(--b-space-9) 0;
}
.b-dialog__body { padding: var(--b-space-6) var(--b-space-9); overflow-y: auto; }
.b-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--b-space-4);
  padding: 0 var(--b-space-9) var(--b-space-9);
}

/* Tooltip. */
.b-tooltip {
  display: inline-block;
  max-inline-size: 260px;
  padding: var(--b-space-2) var(--b-space-4);
  border-radius: var(--b-radius-md);
  background: var(--b-neutral-950);
  border: 1px solid var(--b-neutral-850);
  color: var(--b-neutral-50);
  font-size: var(--b-text-2xs);
  font-weight: var(--b-weight-semibold);
  line-height: var(--b-leading-snug);
  z-index: var(--b-z-popover);
}
.b-tooltip__command { margin-inline-start: var(--b-space-4); color: var(--b-neutral-500); font-weight: var(--b-weight-medium); }

/* Menu / Dropdown. */
/* Menu usa superfície tematizada, borda e elevação previsíveis. */
.b-menu {
  min-inline-size: 180px;
  padding: var(--b-space-3);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--b-radius-2xl);
  box-shadow: var(--elevation-2);
  z-index: var(--b-z-dropdown);
}
/* Item de menu preserva área de interação e ritmo compacto. */
.b-menu__item {
  display: flex;
  align-items: center;
  gap: var(--b-space-4);
  inline-size: 100%;
  min-block-size: var(--b-nav-item-block);
  padding: var(--b-space-3) var(--b-space-4);
  border: none;
  border-radius: var(--b-shape-menu-item-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-icon-default);
  text-align: start;
  cursor: pointer;
  transition: background var(--b-motion-fast) var(--b-ease-standard);
}
.b-menu__item:hover:not(:disabled),
.b-menu__item:focus-visible { background: var(--surface-hover); color: var(--text); }
.b-menu__item:active:not(:disabled),
.b-menu__item[aria-selected="true"] { background: var(--surface-selected); color: var(--text); }
.b-menu__item:disabled { cursor: not-allowed; opacity: .5; }
/* Todos os itens usam o glyph padrão de 20 × 20, inclusive ações destrutivas. */
.b-menu__item > .b-icon,
.b-menu__icon {
  --b-icon-size: var(--b-icon-default);
}
.b-menu__item > .b-row-label {
  line-height: var(--b-icon-default);
  text-box: normal;
}
.b-menu__item--danger { color: var(--danger); }

/* Itens destrutivos usam fundo semântico suave no hover. */
.b-menu__item--danger:hover:not(:disabled),
.b-menu__item--danger:focus-visible,
.b-menu__item--danger:active:not(:disabled),
.b-menu__item--danger[aria-selected="true"] { background: var(--danger-bg); color: var(--danger); }
.b-menu__divider { block-size: 1px; margin-block: var(--b-space-2); background: var(--divider); }

/* Text field. */
.b-field { display: flex; flex-direction: column; gap: var(--b-space-3); }
.b-field__label {
  font-size: var(--b-text-sm);
  font-weight: var(--b-weight-medium);
  color: var(--text);
}
.b-field__hint { font-size: var(--b-text-xs); color: var(--text-subtle); }
.b-field__error { font-size: var(--b-text-xs); color: var(--danger); }

/* Campo de 40px, fundo transparente e foco por mudança de borda. */
.b-input {
  min-block-size: 40px;
  padding-inline: var(--b-space-6);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-md);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--b-text-md);
  transition: border-color var(--b-motion-fast) var(--b-ease-standard);
}
.b-input::placeholder { color: var(--text-muted); }

/* Foco de campo usa a borda sem glow e funciona por mouse ou teclado. */
.b-input:focus,
.b-input:focus-visible {
  outline: none;
  border-color: var(--accent);
}
.b-input:disabled { background: var(--surface); color: var(--text-disabled); cursor: not-allowed; }
.b-input[aria-invalid="true"] { border-color: var(--danger); }

.b-textarea {
  min-block-size: 80px;
  padding: var(--b-space-5) var(--b-space-6);
  resize: vertical;
}

/* Switch. */
.b-switch {
  position: relative;
  display: inline-block;
  inline-size: 38px;
  block-size: 22px;
  flex: 0 0 auto;
}
.b-switch input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.b-switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--b-radius-pill);
  background: var(--border-strong);
  transition: background var(--b-motion-base) var(--b-ease-standard);
}
.b-switch__thumb {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--b-radius-circle);
  background: var(--b-white);
  transition: transform var(--b-motion-base) var(--b-ease-standard);
}
.b-switch input:checked ~ .b-switch__track { background: var(--accent); }
.b-switch input:checked ~ .b-switch__thumb { transform: translateX(16px); }
.b-switch input:focus-visible ~ .b-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.b-switch input:disabled { cursor: not-allowed; }
.b-switch input:disabled ~ .b-switch__track,
.b-switch input:disabled ~ .b-switch__thumb { opacity: .5; }

/* Radio por ícone. */
.b-radio-group { display: inline-flex; align-items: center; gap: var(--b-space-3); }
.b-radio-row {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-4);
  border: none;
  border-radius: var(--b-shape-control-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  padding: var(--b-space-2) 0;
  color: var(--text-subtle);
  font-family: inherit;
  font-size: var(--b-text-md);
  cursor: pointer;
}
.b-radio-row:hover:not(:disabled) { background: var(--surface-hover); }
.b-radio-row:active:not(:disabled) { background: var(--surface-selected); }
.b-radio-row:disabled { cursor: not-allowed; opacity: .5; }
.b-radio-row[aria-checked="true"] { color: var(--text); }
.b-radio-row .b-icon {
  --b-icon-size: var(--b-icon-default);
  border: 2px solid currentColor;
  border-radius: var(--b-radius-circle);
}
.b-radio-row .b-icon::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--b-radius-circle);
  background: transparent;
}
.b-radio-row[aria-checked="true"] .b-icon { color: var(--accent); }
.b-radio-row[aria-checked="true"] .b-icon::before { background: currentColor; }

/* Checkbox / Radio. */
.b-check {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-4);
  cursor: pointer;
  font-size: var(--b-text-md);
  color: var(--text);
}
.b-check input {
  appearance: none;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--b-radius-xs);
  background: var(--bg);
  cursor: pointer;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  transition: background var(--b-motion-fast) var(--b-ease-standard),
    border-color var(--b-motion-fast) var(--b-ease-standard);
}
.b-check input[type="radio"] { border-radius: var(--b-radius-circle); }
.b-check input:checked { background: var(--accent); border-color: var(--accent); }
.b-check input[type="checkbox"]:checked::after {
  content: "";
  inline-size: 10px;
  block-size: 6px;
  border: 2px solid var(--on-accent);
  border-block-start: none;
  border-inline-end: none;
  transform: rotate(-45deg) translateY(-1px);
}
.b-check input[type="radio"]:checked::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--b-radius-circle);
  background: var(--on-accent);
}
.b-check:has(input:disabled) { cursor: not-allowed; color: var(--text-disabled); }
.b-check input:disabled { cursor: not-allowed; opacity: .5; }

/* Tabs. */
.b-tabs {
  position: relative;
  display: flex;
  gap: var(--b-space-2);
  border-block-end: 1px solid var(--divider);
}
.b-tab {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: var(--b-space-2);
  border: none;
  border-block-end: var(--b-tab-indicator-block) solid transparent;
  background: transparent;
  color: var(--text-subtle);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  cursor: pointer;
  transition: color var(--b-motion-slow) var(--b-ease-standard);
}
.b-tab__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-3);
  min-block-size: 28px;
  padding: var(--b-space-1) var(--b-space-5);
  border-radius: var(--b-radius-md);
  background: transparent;
  transition: background var(--b-motion-fast) var(--b-ease-standard);
}
.b-tab:hover:not(:disabled) { color: var(--text); }
.b-tab:hover:not(:disabled) .b-tab__inner { background: var(--surface-hover); }
.b-tab:active:not(:disabled) .b-tab__inner { background: var(--surface-selected); }
.b-tab:disabled { cursor: not-allowed; opacity: .5; }
.b-tab[aria-selected="true"] { color: var(--text); border-block-end-color: var(--action); }

.b-tabs__indicator {
  position: absolute;
  inset-block-end: -1px;
  block-size: var(--b-tab-indicator-block);
  background: var(--action);
  pointer-events: none;
  transition: inset-inline-start var(--b-motion-slow) var(--b-ease-standard),
    inline-size var(--b-motion-slow) var(--b-ease-standard);
}
.b-tabs.has-indicator .b-tab[aria-selected="true"] { border-block-end-color: transparent; }

/* Navigation. */
.b-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: inline-size .22s ease;
}
.b-nav-frame {
  box-sizing: border-box;
  inline-size: var(--b-nav-frame-expanded);
  padding-inline: var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-end);
  overflow-x: hidden;
  border-inline-end: 1px solid var(--divider);
}

/* No colapso, o rótulo apaga antes da largura fechar e retorna após a abertura. */
.b-nav.is-collapsed { transition: inline-size .16s ease; }
.b-nav-frame.is-collapsed { inline-size: var(--b-nav-frame-collapsed); }
.b-nav-frame.is-collapsed:not(.b-nav-rail) {
  padding-inline: var(--b-nav-collapsed-inset);
}
.b-nav-frame.is-collapsed :is(.b-nav__item, .b-entity-item) {
  padding-inline: calc((var(--b-nav-collapsed-surface) - var(--b-icon-default)) / 2);
}
.b-nav__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity .2s ease .14s;
}
.b-nav.is-collapsed .b-nav__label {
  opacity: 0;
  pointer-events: none;
  transition: opacity .06s ease;
}
.b-nav-section { min-inline-size: 0; }
.b-nav-frame > .b-nav-section + .b-nav-section { margin-block-start: var(--b-nav-section-gap); }
.b-nav-section__heading { margin: 0; font: inherit; }
html:not(.js) .b-nav-section__heading { display: none; }
.b-nav-section__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--b-space-1);
  inline-size: 100%;
  min-block-size: var(--b-nav-title-control-block);
  margin: 0 0 var(--b-nav-title-content-gap);
  padding: 0 var(--b-nav-title-inset);
  border: 0;
  border-radius: var(--b-shape-control-compact-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  color: var(--nav-section-title);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  cursor: pointer;
  transition: color var(--b-motion-fast) var(--b-ease-standard);
}
.b-nav-section__label { min-inline-size: 0; }
.b-nav-section__chevron {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding-block-end: calc(var(--b-space-1) / 2);
  color: var(--text-subtle);
  opacity: 1;
  transition:
    color var(--b-motion-fast) var(--b-ease-standard),
    opacity var(--b-motion-fast) var(--b-ease-standard);
}
.b-nav-section__chevron::before {
  inline-size: var(--b-space-5);
  block-size: var(--b-space-5);
  place-self: end center;
  font-size: var(--b-space-5);
  transform-origin: center;
  transition: transform 200ms var(--b-ease-standard);
}
.b-nav-section__trigger:hover .b-nav-section__chevron {
  color: var(--text-subtle);
  opacity: 1;
}
.b-nav-section__trigger[aria-expanded="false"] .b-nav-section__chevron::before { transform: rotate(-90deg); }
:dir(rtl) .b-nav-section__trigger[aria-expanded="false"] .b-nav-section__chevron::before { transform: rotate(90deg); }
.b-nav-section__content {
  max-block-size: var(--b-nav-section-content-size, 1000px);
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-block-size 220ms cubic-bezier(.4, 0, .2, 1),
    opacity 160ms var(--b-ease-standard) 50ms,
    transform 160ms var(--b-ease-standard) 50ms;
}
.b-nav-section[data-state="collapsed"] .b-nav-section__content {
  max-block-size: 0;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    max-block-size 150ms cubic-bezier(.4, 0, .6, 1),
    opacity 70ms var(--b-ease-standard),
    transform 70ms var(--b-ease-standard);
}
.b-nav-section__content[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .b-nav-section__chevron,
  .b-nav-section__chevron::before,
  .b-nav-section__content { transition-duration: .01ms; transition-delay: 0ms; }
}
.b-nav__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--b-space-4);
  inline-size: 100%;
  min-block-size: var(--b-nav-item-block);
  padding-block: 0;
  padding-inline: var(--b-nav-frame-padding-start);
  border: none;
  border-radius: var(--b-shape-navigation-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--b-motion-fast) var(--b-ease-standard),
    color var(--b-motion-fast) var(--b-ease-standard);
}
.b-nav__item:hover { background: var(--surface-hover); color: var(--text); }
.b-nav__item[aria-current]:not([aria-current="false"]) {
  background: var(--surface-selected);
  color: var(--text);
}
.b-nav__item .b-icon { --b-icon-size: var(--b-icon-default); }

/* List. */
.b-list { display: flex; flex-direction: column; }
.b-list__item {
  display: flex;
  align-items: center;
  gap: var(--b-space-5);
  min-block-size: 44px;
  padding-inline: var(--b-space-5);
  border-radius: var(--b-radius-md);
  transition: background var(--b-motion-fast) var(--b-ease-standard);
}
.b-list__item:hover { background: var(--surface-hover); }
.b-list__content { flex: 1; min-inline-size: 0; }
.b-list__title { font-size: var(--b-text-md); color: var(--text); }
.b-list__subtitle { font-size: var(--b-text-xs); color: var(--text-subtle); }

/* Table. */
.b-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--b-text-md);
}
.b-table th {
  text-align: start;
  padding: var(--b-space-5) var(--b-space-6);
  font-size: var(--b-text-xs);
  font-weight: var(--b-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-subtle);
  border-block-end: 1px solid var(--border);
}
.b-table td {
  padding: var(--b-space-5) var(--b-space-6);
  color: var(--text);
  border-block-end: 1px solid var(--divider);
}
.b-table tbody tr { transition: background var(--b-motion-fast) var(--b-ease-standard); }
.b-table tbody tr:hover { background: var(--surface-hover); }

/* Progress. */
.b-progress {
  inline-size: 100%;
  block-size: 6px;
  border-radius: var(--b-radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.b-progress__bar {
  block-size: 100%;
  border-radius: var(--b-radius-pill);
  background: var(--action);
  transition: inline-size var(--b-motion-slow) var(--b-ease-standard);
}
.b-progress__bar--accent { background: var(--accent); }

.b-spinner {
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid var(--surface-2);
  border-block-start-color: var(--text-subtle);
  border-radius: var(--b-radius-circle);
  animation: b-spin .8s linear infinite;
  flex: 0 0 auto;
}

/* Skeleton. */
.b-skeleton {
  border-radius: var(--b-radius-md);
  background: linear-gradient(90deg,
    var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: b-shimmer 1.4s ease infinite;
}

/* Toast / Snackbar. */
.b-toast {
  display: flex;
  align-items: center;
  gap: var(--b-space-5);
  min-block-size: 44px;
  padding-inline: var(--b-space-7);
  border-radius: var(--b-radius-xl);
  background: var(--b-neutral-950);
  color: var(--b-neutral-50);
  font-size: var(--b-text-md);
  box-shadow: var(--elevation-3);
  z-index: var(--b-z-toast);
  animation: b-slide-up var(--b-motion-gentle) var(--b-ease-decelerate);
}
.b-toast--error { background: var(--b-red-500); }

/* Ação do toast (ex.: desfazer): herda o texto claro do fundo escuro fixo. */
.b-toast__action {
  border: none;
  background: transparent;
  padding: var(--b-space-2) var(--b-space-4);
  border-radius: var(--b-shape-control-compact-radius);
  corner-shape: var(--b-corner-squircle);
  color: var(--b-blue-300);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-semibold);
  cursor: pointer;
}
.b-toast__action:hover:not(:disabled) { background: var(--b-alpha-white-08); }
.b-toast__action:active:not(:disabled) { background: var(--b-alpha-white-15); }
.b-toast__action:disabled { cursor: not-allowed; opacity: .5; }

/* Alert / Banner. */
.b-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--b-space-5);
  padding: var(--b-space-6) var(--b-space-7);
  border-radius: var(--b-radius-xl);
  font-size: var(--b-text-md);
  line-height: var(--b-leading-normal);
}
.b-alert--info    { background: var(--info-bg);    color: var(--info); }
.b-alert--success { background: var(--success-bg); color: var(--success); }
.b-alert--danger  { background: var(--danger-bg);  color: var(--danger); }
.b-alert--warning { background: var(--warning-bg); color: var(--warning); }

/* Empty state. */
.b-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--b-space-3);
  padding: var(--b-space-5) var(--b-space-8) var(--b-space-8);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  text-align: center;
}
/* Só o ícone-herói (filho direto) — nunca vazar para ícones de botões internos */
.b-empty > .b-icon { --b-icon-size: var(--b-icon-large); color: var(--text-muted); }
.b-empty__title { margin-block-end: var(--b-space-3); font-size: var(--b-text-md); font-weight: var(--b-weight-medium); color: var(--text); }
.b-empty__desc { font-size: var(--b-text-md); font-weight: var(--b-weight-light); color: var(--text-muted); max-inline-size: 340px; }

/* Divider / Kbd. */
.b-divider { border: none; block-size: 1px; background: var(--divider); margin-block: var(--b-space-6); }
.b-kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: var(--b-radius-xs);
  background: var(--surface);
  font-family: var(--b-font-mono);
  font-size: var(--b-text-2xs);
  color: var(--text-subtle);
}

/* Animações. */
@keyframes b-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes b-spin { to { transform: rotate(360deg); } }
@keyframes b-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes b-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Rail composto, conta e item de entidade. */
html:not(.js) [data-nav-rail-toggle] { display: none; }
.b-nav-rail {
  block-size: var(--b-nav-rail-block-size, 100%);
  min-block-size: 0;
  padding-block-end: 0;
  padding-inline: 0;
}
.b-nav-rail__body {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-block-size: 0;
  padding-inline: var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-end);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.b-nav-rail__section-title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  block-size: var(--b-nav-collection-title-block);
  margin: 0 0 var(--b-nav-title-content-gap);
  padding-block-start: var(--b-nav-section-gap);
  padding-inline: var(--b-nav-title-inset);
  overflow: hidden;
  color: var(--nav-section-title);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  white-space: nowrap;
  opacity: 1;
  transition:
    block-size .22s ease,
    margin-block-end .22s ease,
    padding-block-start .22s ease,
    opacity .2s ease .14s;
}
.b-nav.is-collapsed .b-nav-rail__section-title {
  block-size: 0;
  margin-block-end: 0;
  padding-block-start: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    block-size .16s ease,
    margin-block-end .16s ease,
    padding-block-start .16s ease,
    opacity .06s ease;
}
@media (prefers-reduced-motion: reduce) {
  .b-nav-rail__section-title { transition-duration: .01ms; transition-delay: 0ms; }
}
.b-nav-rail__footer {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 var(--b-nav-footer-block);
  block-size: var(--b-nav-footer-block);
  padding-block: var(--b-nav-frame-padding-start);
  padding-inline: var(--b-nav-frame-padding-start) var(--b-nav-frame-padding-end);
  border-block-start: 1px solid var(--divider);
  background: var(--surface);
}
.b-nav.is-collapsed .b-nav-rail__body,
.b-nav.is-collapsed .b-nav-rail__footer {
  padding-inline: var(--b-nav-collapsed-inset);
}
.b-nav.is-collapsed .b-nav-rail__footer { border-block-start-color: transparent; }

/* Conta compacta para rodapé de navegação; o avatar usa o acento do sistema. */
.b-account {
  display: flex;
  align-items: center;
  gap: var(--b-space-4);
  min-inline-size: 0;
  min-block-size: 45px;
  padding-block: 0;
  padding-inline: 7px;
  border: none;
  border-radius: var(--b-shape-navigation-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}
.b-account:hover:not(:disabled) { background: var(--surface-hover); }
.b-account:active:not(:disabled),
.b-account[aria-expanded="true"] { background: var(--surface-selected); }
.b-account:disabled { cursor: not-allowed; opacity: .5; }
.b-nav.is-collapsed .b-account {
  align-self: center;
  justify-content: flex-start;
  gap: 0;
  block-size: var(--b-nav-item-block);
  min-block-size: var(--b-nav-item-block);
  padding-block: 0;
  padding-inline: calc((var(--b-nav-collapsed-surface) - var(--b-icon-default)) / 2);
}
.b-nav.is-collapsed .b-account__info {
  max-inline-size: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-inline-size .16s ease,
    opacity .06s ease;
}
.b-account__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--b-icon-default);
  block-size: var(--b-icon-default);
  flex: 0 0 auto;
  border-radius: var(--b-radius-circle);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: var(--b-weight-semibold);
  line-height: 1;
  overflow: hidden;
}
.b-account__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.b-account__info {
  display: flex;
  flex-direction: column;
  gap: var(--b-space-1);
  min-inline-size: 0;
  max-inline-size: 200px;
  overflow: hidden;
  opacity: 1;
  transition:
    max-inline-size .22s ease,
    opacity .2s ease .14s;
}
.b-account__name {
  font-size: var(--b-text-md);
  line-height: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-account__desc {
  font-size: var(--b-text-sm);
  line-height: 15px;
  color: var(--text-muted);
}

.b-entity-item {
  display: flex;
  align-items: center;
  gap: var(--b-space-4);
  inline-size: 100%;
  block-size: var(--b-nav-item-block);
  padding-block: 0;
  padding-inline: var(--b-nav-frame-padding-start);
  border: none;
  border-radius: var(--b-shape-navigation-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  text-align: start;
  cursor: pointer;
  transition: background var(--b-motion-fast) var(--b-ease-standard),
    color var(--b-motion-fast) var(--b-ease-standard);
}
.b-entity-item:hover:not(:disabled),
.b-entity-item:focus-visible { background: var(--surface-hover); color: var(--text); }
.b-entity-item:active:not(:disabled),
.b-entity-item[aria-current]:not([aria-current="false"]) { background: var(--surface-selected); color: var(--text); }
.b-entity-item:disabled { cursor: not-allowed; opacity: .5; }
.b-entity-item[aria-busy="true"] { cursor: pointer; }
.b-entity-item__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--b-icon-default);
  block-size: var(--b-icon-default);
  flex: 0 0 var(--b-icon-default);
  font-size: var(--b-icon-default);
  line-height: 1;
}
.b-entity-item__name {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-entity-item__more {
  --b-icon-size: var(--b-icon-default);
  display: none;
  color: var(--text-subtle);
  flex: 0 0 auto;
}
.b-entity-item:hover:not(:disabled) .b-entity-item__more,
.b-entity-item:focus-visible:not(:disabled) .b-entity-item__more { display: inline-grid; }
.b-entity-item .b-spinner { inline-size: 14px; block-size: 14px; }
.b-nav.is-collapsed .b-entity-item__name {
  opacity: 0;
  pointer-events: none;
  transition: opacity .06s ease;
}
.b-nav:not(.is-collapsed) .b-entity-item__name { transition: opacity .2s ease .14s; }
.b-nav.is-collapsed .b-entity-item .b-entity-item__more,
.b-nav.is-collapsed .b-entity-item .b-spinner { display: none; }
@media (prefers-reduced-motion: reduce) {
  .b-nav,
  .b-nav.is-collapsed,
  .b-nav__label,
  .b-nav.is-collapsed .b-nav__label,
  .b-nav-rail__section-title,
  .b-nav.is-collapsed .b-nav-rail__section-title,
  .b-entity-item__name,
  .b-nav:not(.is-collapsed) .b-entity-item__name,
  .b-nav.is-collapsed .b-entity-item__name,
  .b-account__info,
  .b-nav.is-collapsed .b-account__info {
    transition-duration: .01ms;
    transition-delay: 0ms;
  }
}

/* Picker de representação. */
.b-picker {
  box-sizing: border-box;
  inline-size: var(--b-picker-inline-size);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  background: var(--bg);
  box-shadow: var(--elevation-2);
  overflow: hidden;
}
.b-picker__cats {
  position: relative;
  display: flex;
  align-items: center;
  block-size: var(--b-picker-header-block);
  padding-inline: var(--b-space-4);
  border-block-end: 1px solid var(--border);
}
.b-picker__cat {
  display: inline-flex;
  align-items: center;
  block-size: 41px;
  border: none;
  border-block-end: var(--b-tab-indicator-block) solid transparent;
  background: transparent;
  color: var(--text-subtle);
  font-family: inherit;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-regular);
  line-height: var(--b-leading-normal);
  cursor: pointer;
}
.b-picker__cat > span {
  padding: var(--b-space-1) var(--b-space-5);
  border-radius: var(--b-radius-md);
}
.b-picker__cat:hover:not(:disabled) > span { background: var(--surface-hover); }
.b-picker__cat[aria-selected="true"] { color: var(--text); border-block-end-color: var(--action); }
.b-picker__cats.has-indicator .b-picker__cat[aria-selected="true"] { border-block-end-color: transparent; }
.b-picker__indicator {
  position: absolute;
  inset-block-end: -1px;
  block-size: var(--b-tab-indicator-block);
  background: var(--action);
  pointer-events: none;
  transition:
    inset-inline-start var(--b-motion-slow) var(--b-ease-standard),
    inline-size var(--b-motion-slow) var(--b-ease-standard);
}
.b-picker__cat:disabled { cursor: not-allowed; opacity: .5; }
.b-picker__panel {
  box-sizing: border-box;
  block-size: var(--b-picker-panel-block);
  overflow: auto;
}
.b-picker__panel[hidden] { display: none; }
.b-picker__grid {
  display: grid;
  box-sizing: border-box;
  inline-size: calc(var(--b-picker-cell-size) * 10 + var(--b-space-4) * 2);
  min-block-size: 100%;
  grid-template-columns: repeat(10, var(--b-picker-cell-size));
  grid-auto-rows: var(--b-picker-cell-size);
  align-content: start;
  padding: var(--b-space-4);
}
.b-picker__cell {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--b-picker-cell-size);
  block-size: var(--b-picker-cell-size);
  padding: 0;
  border: none;
  border-radius: var(--b-shape-navigation-radius);
  corner-shape: var(--b-corner-squircle);
  background: transparent;
  cursor: pointer;
}
.b-picker__cell > .b-icon { --b-icon-size: var(--b-icon-default); }
.b-picker__cell > .b-emoji { --b-emoji-size: var(--b-icon-default); }
.b-picker__cell:hover:not(:disabled) { background: var(--surface-hover); }
.b-picker__cell:active:not(:disabled),
.b-picker__cell[aria-selected="true"] { background: var(--surface-selected); }
.b-picker__cell:disabled { cursor: not-allowed; opacity: .5; }
.b-picker__panel--image {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: var(--b-space-4);
}
.b-picker__upload {
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--b-space-4);
  block-size: 115px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--b-shape-interactive-radius);
  corner-shape: var(--b-corner-squircle);
  background: var(--surface-hover);
  color: var(--text-subtle);
  font: inherit;
  font-size: var(--b-text-md);
  cursor: pointer;
  transition: background var(--b-motion-fast) var(--b-ease-standard);
}
.b-picker__upload:hover:not(:disabled),
.b-picker__upload.is-dragover { background: var(--surface-selected); }
.b-picker__upload:active:not(:disabled) { border-color: var(--border-strong); }
.b-picker__upload:disabled { cursor: not-allowed; opacity: .5; }
.b-picker__description {
  margin: var(--b-space-5) 0 0;
  color: var(--text-muted);
  font-size: var(--b-text-sm);
  text-align: center;
}

/* Media card. */
/* A grade preserva largura mínima de leitura e mídia quadrada. */
.b-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--b-space-7);
  inline-size: 100%;
}
.b-media-card {
  inline-size: 220px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: start;
  overflow: hidden;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow var(--b-motion-fast) var(--b-ease-standard),
    background var(--b-motion-fast) var(--b-ease-standard);
}
.b-media-grid .b-media-card { inline-size: auto; }
.b-media-card:hover:not(:disabled) { box-shadow: var(--elevation-2); }
.b-media-card:active:not(:disabled) { background: var(--surface-hover); box-shadow: var(--elevation-1); }
.b-media-card:disabled { cursor: not-allowed; opacity: .5; }
.b-media-card__media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-hover);
  color: var(--file-color, var(--text-muted));
}
.b-media-card__media .b-icon { --b-icon-size: var(--b-icon-display); }
.b-media-card--pdf { --file-color: var(--file-pdf); }
.b-media-card--doc { --file-color: var(--file-doc); }
.b-media-card--xls { --file-color: var(--file-xls); }
.b-media-card--ppt { --file-color: var(--file-ppt); }
.b-media-card--code { --file-color: var(--file-code); }
.b-media-card--image { --file-color: var(--file-image); }
.b-media-card__body {
  display: block;
  padding: var(--b-space-5) var(--b-space-6);
}
.b-media-card__name {
  display: block;
  font-size: var(--b-text-md);
  font-weight: var(--b-weight-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-media-card__meta {
  display: block;
  margin-block-start: var(--b-space-1);
  font-size: var(--b-text-xs);
  color: var(--text-muted);
}

/* Responsividade estrutural dos specimens e consumidores. */
.b-tabs {
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.b-tab { flex: 0 0 auto; }
.b-toolbar {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.b-toolbar__group { flex: 0 0 auto; }
.b-picker { inline-size: min(var(--b-picker-inline-size), 100%); max-inline-size: 100%; }
.b-toolbelt { max-inline-size: 100%; flex-wrap: wrap; }
.b-composer, .b-suggestions, .b-media-grid, .b-file-card { min-inline-size: 0; }

@media (max-width: 520px) {
  .b-picker__cats { padding-inline: var(--b-space-1); }
  .b-picker__cat { min-inline-size: 0; flex: 1; justify-content: center; font-size: var(--b-text-md); }
  .b-picker__cat > span { padding-inline: var(--b-space-2); }
  .b-toolbar { justify-content: flex-start; }
}

@media (hover: none) and (pointer: coarse) {
  .b-nav__item,
  .b-entity-item,
  .b-nav.is-collapsed .b-account {
    block-size: var(--b-control-touch);
    min-block-size: var(--b-control-touch);
  }
  .b-file-attachment > .b-icon-btn--compact {
    inline-size: var(--b-control-touch);
    block-size: var(--b-control-touch);
    border-radius: var(--b-shape-control-large-radius);
  }
  .b-file-attachment > .b-icon-btn--compact > .b-icon { --b-icon-size: var(--b-icon-large); }
}

/* Contratos universais adicionados na v1.5. */
.b-button-link,
.b-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-3);
  min-block-size: var(--b-control-compact);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--link);
  font: var(--b-weight-medium) var(--b-text-md)/1 var(--b-font-sans);
  text-decoration: none;
  cursor: pointer;
}

.b-button-link > .b-row-label,
.b-back-link > .b-row-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.b-button-group,
.b-toolbar {
  display: inline-flex;
  align-items: center;
}

.b-button-group {
  gap: var(--b-space-2);
  padding: var(--b-space-3);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--surface);
}

.b-toolbar {
  gap: var(--b-space-1);
  min-block-size: var(--b-control-touch);
  padding: var(--b-space-3);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--bg);
  box-shadow: var(--elevation-1);
}

.b-toolbar__divider {
  inline-size: 1px;
  block-size: 24px;
  margin-inline: var(--b-space-1);
  background: var(--divider);
}

.b-search-field,
.b-select {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: var(--b-control-default);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-md);
  background: transparent;
  color: var(--text);
}

.b-search-field:focus-within,
.b-select:focus-within {
  border-color: var(--accent);
}

.b-search-field > .b-icon,
.b-select > .b-icon {
  margin-inline-start: var(--b-space-5);
  color: var(--text-subtle);
}

.b-search-field input,
.b-select select {
  min-inline-size: 0;
  min-block-size: calc(var(--b-control-default) - 2px);
  flex: 1;
  padding-inline: var(--b-space-4);
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.b-select select {
  appearance: none;
  padding-inline-end: var(--b-space-9);
}

.b-select > .b-icon:last-child {
  position: absolute;
  inset-inline-end: var(--b-space-4);
  pointer-events: none;
}

.b-dropzone {
  display: grid;
  min-block-size: 148px;
  place-items: center;
  padding: var(--b-space-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--b-radius-xl);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--b-motion-fast) var(--b-ease-standard), background var(--b-motion-fast) var(--b-ease-standard);
}

.b-dropzone:hover,
.b-dropzone:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.b-dropzone input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.b-dropzone strong,
.b-dropzone small { display: block; }
.b-dropzone small { margin-block-start: var(--b-space-2); color: var(--text-subtle); }

.b-segmented {
  display: inline-flex;
  gap: var(--b-space-1);
  padding: var(--b-space-2);
  border-radius: var(--b-radius-xl);
  background: var(--surface-2);
}

.b-segmented button {
  min-block-size: var(--b-control-compact);
  padding-inline: var(--b-space-6);
  border: 0;
  border-radius: var(--b-radius-md);
  background: transparent;
  color: var(--text-subtle);
  font: var(--b-weight-medium) var(--b-text-sm)/1 var(--b-font-sans);
  cursor: pointer;
}

.b-segmented button:hover:not(:disabled) { color: var(--text); }
.b-segmented button:active:not(:disabled) { background: var(--surface-hover); }
.b-segmented button:disabled { cursor: not-allowed; opacity: .5; }
.b-segmented button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--elevation-1);
}

.b-slider {
  inline-size: min(280px, 100%);
  accent-color: var(--accent);
}

.b-app-header {
  display: flex;
  align-items: center;
  gap: var(--b-space-5);
  min-block-size: 56px;
  padding-inline: var(--b-space-7);
  border-block-end: 1px solid var(--divider);
  background: var(--bg);
}

.b-app-header__title { font-weight: var(--b-weight-semibold); }
.b-app-header__spacer { flex: 1; }

.b-popover {
  inline-size: min(320px, 100%);
  padding: var(--b-space-6);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-2xl);
  background: var(--bg);
  box-shadow: var(--elevation-2);
}

.b-drawer {
  inline-size: min(320px, 100%);
  min-block-size: 220px;
  padding: var(--b-space-7);
  border-inline-start: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--elevation-5);
}

.b-accordion {
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--bg);
  overflow: hidden;
}

.b-accordion details + details { border-block-start: 1px solid var(--divider); }
.b-accordion summary {
  display: flex;
  align-items: center;
  gap: var(--b-space-4);
  min-block-size: var(--b-control-touch);
  padding-inline: var(--b-space-6);
  cursor: pointer;
  font-weight: var(--b-weight-medium);
}
.b-accordion details > div { padding: 0 var(--b-space-6) var(--b-space-6); color: var(--text-subtle); }

.b-pagination,
.b-stepper {
  display: flex;
  align-items: center;
  gap: var(--b-space-3);
}

.b-pagination button,
.b-stepper__step {
  display: grid;
  inline-size: var(--b-control-compact);
  block-size: var(--b-control-compact);
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--b-radius-md);
  background: var(--bg);
  color: var(--text);
  font: var(--b-weight-medium) var(--b-text-sm)/1 var(--b-font-sans);
}

.b-pagination button {
  border-radius: var(--b-shape-control-compact-radius);
  corner-shape: var(--b-corner-squircle);
}
.b-pagination button:hover:not(:disabled) { background: var(--surface-hover); }
.b-pagination button:active:not(:disabled) { background: var(--surface-selected); }
.b-pagination button:disabled { cursor: not-allowed; opacity: .5; }
.b-pagination button[aria-current="page"],
.b-stepper__step[aria-current="step"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  color: var(--accent);
}

.b-stepper__line {
  inline-size: 32px;
  block-size: 1px;
  background: var(--border-strong);
}

.b-avatar-group { display: flex; align-items: center; padding-inline-start: var(--b-space-3); }
.b-avatar-group .b-avatar {
  margin-inline-start: calc(var(--b-space-3) * -1);
  border: 2px solid var(--bg);
}

.b-kpi-card {
  display: grid;
  gap: var(--b-space-2);
  min-inline-size: 160px;
  padding: var(--b-space-7);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--bg);
}

.b-kpi-card strong { font-size: var(--b-text-4xl); font-weight: var(--b-weight-title); line-height: var(--b-leading-tight); }
.b-kpi-card span { color: var(--text-subtle); font-size: var(--b-text-sm); }

.b-meter { display: grid; gap: var(--b-space-3); }
.b-meter__track {
  block-size: 8px;
  overflow: hidden;
  border-radius: var(--b-radius-pill);
  background: var(--surface-2);
}
.b-meter__value { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); }
.b-meter__value--25 { inline-size: 25%; }
.b-meter__value--68 { inline-size: 68%; }
.b-meter__value--90 { inline-size: 90%; background: var(--warning); }

.b-code-block {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--code-bg);
  color: var(--code-text);
}
.b-code-block__header {
  display: flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: var(--b-space-6);
  border-block-end: 1px solid var(--b-alpha-white-12);
  color: var(--code-action-text);
  font-size: var(--b-text-xs);
}
.b-code-block__header span:last-child { margin-inline-start: auto; }
.b-code-block pre { margin: 0; padding: var(--b-space-7); overflow: auto; }

.b-file-attachment {
  display: flex;
  align-items: center;
  gap: var(--b-space-5);
  min-inline-size: 220px;
  padding: var(--b-space-5);
  border: 1px solid var(--border);
  border-radius: var(--b-radius-xl);
  background: var(--bg);
}
.b-file-attachment__body { min-inline-size: 0; flex: 1; }
.b-file-attachment__body strong,
.b-file-attachment__body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-file-attachment__body small { color: var(--text-subtle); }

.b-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--b-space-3);
  color: var(--text-subtle);
  font-size: var(--b-text-sm);
}
.b-status-indicator::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--b-radius-circle);
  background: var(--text-muted);
}
@keyframes b-live-ring {
  0% { opacity: 1; transform: scale(.375); }
  100% { opacity: 0; transform: scale(1); }
}
.b-status-indicator--published { position: relative; }
.b-status-indicator--published::before {
  box-sizing: border-box;
  inline-size: 14px;
  block-size: 14px;
  background: radial-gradient(circle, var(--info) 0 3px, transparent 3.5px);
}
.b-status-indicator--published::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  box-sizing: border-box;
  inline-size: 14px;
  block-size: 14px;
  margin-block: auto;
  border: 1px solid var(--info);
  border-radius: var(--b-radius-circle);
  pointer-events: none;
  transform-origin: center;
  animation: b-live-ring 1s ease-out infinite;
}
.b-status-indicator--live::before { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.b-status-indicator--warning::before { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }

@media (prefers-reduced-motion: reduce) {
  .b-status-indicator--published::after {
    opacity: .35;
    transform: scale(1);
    animation: none;
  }
}

@media (max-width: 600px) {
  .b-toolbar { max-inline-size: 100%; overflow-x: auto; }
  .b-stepper__line { inline-size: 16px; }
}

/* Progresso circular distinto de spinner indeterminado. */
.b-circular-progress {
  --b-progress-value: 72;
  display: inline-grid;
  inline-size: 40px;
  block-size: 40px;
  place-items: center;
  border-radius: var(--b-radius-circle);
  background: conic-gradient(var(--accent) calc(var(--b-progress-value) * 1%), var(--surface-2) 0);
}

.b-circular-progress::after {
  content: "";
  inline-size: 30px;
  block-size: 30px;
  border-radius: inherit;
  background: var(--bg);
}