/* EVER UI v1.0.0 — origem projects/ever-ui */
/**
 * everui.css — kit Alpine (HTML + tokens). BEM generalizado do
 * app.css do criativos, RE-TOKENIZADO contra as camadas 02/03.
 *
 * Regra de ouro: componente consome APENAS semantic (02) e
 * component (03) tokens — NUNCA primitive (01) nem valor literal.
 * Teste de pureza: o bloco sobrevive a `data-surface="dark"` sem
 * mudar uma linha (os tokens recalibram no escopo).
 *
 * Ordem de import esperada (adocao.md):
 *   01-primitives.css → 02-semantic.css → 03-components.css
 *   → themes/{produto}.css → everui.css
 *
 * Blocos de DOMÍNIO do criativos (fila-*, grav-*, tp-*, roteiro-*,
 * cobertura-*) foram EXCLUÍDOS — não são genéricos.
 */

/* =========================================================
   RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.icon { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 20px; height: 20px; }

/* Spinner de loading (botão, campo validando) — só transform (F5) */
.spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: ev-spin 0.7s linear infinite;
}
@keyframes ev-spin { to { transform: rotate(360deg); } }

/* =========================================================
   BOTÃO — 4 variantes (primary, secondary, ghost, danger)
   + icon-only, sm, lg, full. 6 estados. (anatomia/botao.md)
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-secondary-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: var(--btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
/* loading: largura travada (sem CLS), rótulo em gerúndio no HTML */
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; pointer-events: none; }

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}
.btn--primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn--primary:active { background: var(--btn-primary-active); border-color: var(--btn-primary-active); }

.btn--secondary { /* = base .btn (card + borda) */ }

.btn--ghost {
  background: transparent; border-color: transparent;
  color: var(--btn-ghost-fg);
}
.btn--ghost:hover { background: var(--btn-ghost-hover-bg); color: var(--text-body); }

.btn--danger {
  background: var(--btn-danger-bg); color: var(--btn-danger-fg);
  border-color: var(--btn-danger-bg);
}
.btn--danger:hover { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); }

.btn--full { width: 100%; }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn--lg { min-height: var(--btn-h-lg); padding: 0 var(--space-5); }

/* Ícone-only: 44px de área (F27) + aria-label obrigatório (F24) */
.btn--icon {
  width: var(--tap-min); height: var(--tap-min); min-height: var(--tap-min);
  padding: 0; border-radius: var(--btn-radius);
  background: transparent; border: 1px solid transparent;
  color: var(--btn-ghost-fg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.btn--icon:hover { background: var(--btn-ghost-hover-bg); color: var(--text-body); }
.btn--icon:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); }

/* =========================================================
   CAMPO DE FORMULÁRIO — input/textarea/select 100% estilizados
   (nativo é proibido; chevron próprio). (anatomia/formulario.md)
   ========================================================= */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-5); }
.field__label {
  font-size: var(--field-label-size);
  font-weight: var(--weight-medium);
  color: var(--field-label-fg);
}
.field__req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: var(--text-xs); color: var(--field-hint-fg); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--field-h);
  padding: 0 var(--field-px);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--field-bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.textarea { min-height: 96px; padding: var(--space-2) var(--field-px); resize: vertical; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--field-border-hover); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: var(--field-focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--field-placeholder); }
.input[readonly], .input:disabled, .textarea:disabled, .select:disabled {
  background: var(--field-bg-readonly);
  color: var(--text-disabled);
  cursor: not-allowed;
}
/* Erro: borda + SEMPRE texto (F24) — nunca só a cor */
.input--error, .textarea--error, .select--error {
  border-color: var(--field-error-border);
  background: var(--field-error-bg);
}

/* Select: chevron próprio (--field-icon), nunca o do browser */
.select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); }
.select-wrap { position: relative; display: block; }
.select-wrap__chevron {
  position: absolute; right: var(--space-3); top: 50%;
  transform: translateY(-50%);
  pointer-events: none; color: var(--field-icon);
  display: inline-flex;
}

/* input com ícone à esquerda (busca) */
.input-icon { position: relative; display: block; }
.input-icon__icon {
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  color: var(--field-icon); pointer-events: none; display: inline-flex;
}
.input-icon .input { padding-left: var(--space-8); }

/* Erro inline em 3 partes (F26) */
.inline-error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--field-error-bg);
  color: var(--field-error-fg);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.inline-error .icon { flex: none; margin-top: 1px; }
.inline-error a { color: inherit; font-weight: var(--weight-semibold); }

/* =========================================================
   CHECKBOX (custom, sem nativo) — hit area 44px (F27)
   ========================================================= */
.checkbox {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-min); cursor: pointer;
  font-size: var(--text-base); color: var(--text-body);
}
.checkbox__input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.checkbox__box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-on-action);
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.checkbox__box .icon { width: 13px; height: 13px; opacity: 0; }
.checkbox__input:checked + .checkbox__box {
  background: var(--action); border-color: var(--action);
}
.checkbox__input:checked + .checkbox__box .icon { opacity: 1; }
.checkbox__input:focus-visible + .checkbox__box { box-shadow: var(--focus-ring); }
.checkbox__input:disabled + .checkbox__box { opacity: var(--btn-disabled-opacity); }
.checkbox[data-disabled="true"] { cursor: not-allowed; color: var(--text-disabled); }

/* =========================================================
   SWITCH (toggle) — trilho + thumb, hit 44px
   ========================================================= */
.switch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); cursor: pointer;
  font-size: var(--text-base); color: var(--text-body);
}
.switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track {
  width: 40px; height: 24px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  position: relative;
  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base);
}
.switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  background: var(--surface-card); box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease-out);
}
.switch__input:checked + .switch__track { background: var(--action); border-color: var(--action); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(16px); }
.switch__input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }
.switch__input:disabled + .switch__track { opacity: var(--btn-disabled-opacity); }

/* =========================================================
   BADGE DE STATUS — 6 receitas semânticas (bg/fg/dot).
   O produto cria ALIASES por domínio no tema apontando pra
   estas receitas — NUNCA matiz novo. Sempre rótulo + cor,
   nunca cor sozinha (F24). (anatomia/badge-status.md)
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--badge-h);
  padding: 0 var(--badge-px);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); flex-shrink: 0; }
.badge .icon { width: 13px; height: 13px; }

.badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }
.badge--neutral .badge__dot { background: var(--badge-neutral-dot); }
.badge--muted   { background: var(--badge-muted-bg);   color: var(--badge-muted-fg); }
.badge--muted .badge__dot { background: var(--badge-muted-dot); }
.badge--success { background: var(--badge-success-bg); color: var(--badge-success-fg); }
.badge--success .badge__dot { background: var(--badge-success-dot); }
.badge--info    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge--info .badge__dot { background: var(--badge-info-dot); }
.badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-fg); }
.badge--warning .badge__dot { background: var(--badge-warning-dot); }
.badge--danger  { background: var(--badge-danger-bg);  color: var(--badge-danger-fg); }
.badge--danger .badge__dot { background: var(--badge-danger-dot); }

/* Chip informativo (outline, uppercase — ex.: tipo/categoria) */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-secondary);
}

/* Chip filtrável (removível) — ganha estados de botão + × 44px */
.chip-filter {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 28px; padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-body);
  font-size: var(--text-sm); cursor: default;
}
.chip-filter__remove {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-tertiary);
  border-radius: var(--radius-pill); cursor: pointer;
}
.chip-filter__remove:hover { background: var(--surface-subtle); color: var(--text-body); }
.chip-filter__remove .icon { width: 14px; height: 14px; }

/* =========================================================
   APP SHELL — sidebar + topbar + conteúdo. (anatomia/app-shell.md)
   Nav ativo ≠ pílula chapada: fundo sutil + barra 3px + texto.
   ========================================================= */
.app-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) 1fr;
  min-height: 100vh; min-height: 100svh;
}

.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100svh;
  background: var(--shell-sidebar-bg);
  border-right: 1px solid var(--shell-sidebar-border);
  padding: var(--space-5) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
  overflow-y: auto;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3) var(--space-5); }
.sidebar__brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--action); color: var(--text-on-action);
  font-weight: var(--weight-bold); font-size: var(--text-base);
}
.sidebar__brand-title { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); color: var(--text-primary); }
.sidebar__brand-sub { font-size: var(--text-xs); color: var(--text-tertiary); }
.sidebar__spacer { flex: 1; }

.nav-group-label {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--nav-group-label-fg);
  padding: var(--space-4) var(--space-3) var(--space-1);
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--nav-item-h);
  padding: 0 var(--space-3);
  border-radius: var(--nav-item-radius);
  color: var(--nav-item-fg);
  text-decoration: none;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast);
}
.nav-item .icon { color: var(--nav-item-icon); }
.nav-item:hover { background: var(--nav-item-hover-bg); color: var(--text-body); }
.nav-item:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: -2px; }
.nav-item__count {
  margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}
.nav-item[aria-current="page"], .nav-item--active {
  background: var(--nav-item-active-bg);
  color: var(--nav-item-active-fg);
  font-weight: var(--weight-semibold);
}
.nav-item[aria-current="page"] .icon, .nav-item--active .icon { color: var(--nav-item-active-icon); }
.nav-item[aria-current="page"]::before, .nav-item--active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: var(--radius-pill);
  background: var(--nav-item-active-bar);
}

.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--shell-topbar-h);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--shell-topbar-bg);
  position: sticky; top: 0; z-index: var(--z-header);
}
.topbar__title { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-heading); color: var(--text-primary); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.menu-toggle { display: none; }

.app-content { padding: var(--space-8); max-width: var(--console-container); width: 100%; }

/* =========================================================
   DROPDOWN MENU (user-menu → menu). Ancorado, z-dropdown.
   Dentro de Sheet/drawer → F45 (usar --z-modal). (anatomia/dropdown-menu.md)
   ========================================================= */
.menu-anchor { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + var(--space-2));
  min-width: 200px; max-width: 320px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
}
/* dentro de drawer/sheet: overlay z-100 tapa o menu z-50 (F45).
   Aplicar .menu--in-overlay sobe pro nível --z-modal (120). */
.menu--in-overlay { z-index: var(--z-modal); }
.menu__item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: var(--menu-item-h);
  padding: 0 var(--space-3);
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--menu-item-fg); font: inherit; font-size: var(--text-base);
  cursor: pointer; text-align: left; text-decoration: none;
}
.menu__item:hover { background: var(--menu-item-hover); }
.menu__item:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: -2px; }
.menu__item .icon { color: var(--text-tertiary); }
.menu__item--danger { color: var(--menu-item-danger); }
.menu__item--danger .icon { color: var(--menu-item-danger); }
.menu__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.menu__separator { height: 1px; background: var(--menu-separator); margin: var(--space-2) 0; border: none; }

/* =========================================================
   TOOLBAR de filtros (busca + chips + ações)
   ========================================================= */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.toolbar .input, .toolbar .select, .toolbar .select-wrap { width: auto; min-width: 160px; }
.toolbar__search { flex: 1; min-width: 220px; }
.toolbar__spacer { flex: 1; }

/* =========================================================
   TABELA DENSA — menos moldura, números à direita (tabular).
   Mobile → vira lista de cards. (anatomia/tabela-densa.md)
   ========================================================= */
.table-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--surface-card);
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table th {
  text-align: left;
  padding: var(--space-3) var(--table-cell-px);
  font-size: var(--table-header-size);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--table-header-tracking);
  color: var(--table-header-fg);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-hairline);
}
.table th[aria-sort] { cursor: pointer; user-select: none; }
.table td {
  padding: var(--space-3) var(--table-cell-px);
  border-bottom: 1px solid var(--table-hairline);
  vertical-align: middle;
  color: var(--text-body);
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--motion-fast); }
.table tbody tr[data-clickable] { cursor: pointer; }
.table tbody tr:hover { background: var(--table-row-hover); }
.table tbody tr:focus-within { background: var(--table-row-hover); }
.table tbody tr[aria-selected="true"] {
  background: var(--table-row-selected);
  box-shadow: inset 2px 0 0 var(--table-row-selected-edge);
}
/* linha em alerta: borda-esquerda 3px, nunca fundo vermelho inteiro */
.table tbody tr[data-alert="true"] { box-shadow: inset 3px 0 0 var(--badge-danger-edge); }
.table th.td-num, .table td.td-num { text-align: right; white-space: nowrap; }
.table--compact td, .table--compact th { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.cell-truncate { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--table-hairline);
}
.pagination__nav { display: flex; gap: var(--space-2); }
.pagination__info { font-size: var(--text-sm); color: var(--text-secondary); }

/* Lista de cards (mobile da tabela) — escondida por padrão.
   Colapso 360 SEM perda funcional (audit F3 3.4): container relativo com
   área clicável (__main) + linha secundária (valor + VENCE) + slot de ação
   (kebab) no canto — nunca <button> dentro de <button>. */
.row-cards { display: none; flex-direction: column; gap: var(--space-3); }
.row-card {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--surface-card);
}
.row-card:hover { background: var(--surface-subtle); }
.row-card__main {
  display: block; width: 100%;
  padding: var(--space-4);
  padding-right: var(--tap-min);   /* reserva espaço pro kebab */
  text-align: left; color: inherit; font: inherit;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--card-radius);
}
.row-card__top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.row-card__title { font-size: var(--text-base); color: var(--text-primary); }
.row-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.row-card__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-2);
}
.row-card__vence { font-size: var(--text-sm); color: var(--text-secondary); }
.row-card__kebab { position: absolute; top: var(--space-2); right: var(--space-2); }

/* =========================================================
   DRAWER lateral + BOTTOM-SHEET — a superfície de detalhe/edição/
   CONFIRMAÇÃO da casa. NUNCA modal central (regra do Jean).
   Escala z F45: scrim 100 < drawer 110. (anatomia/drawer-bottom-sheet.md)
   ========================================================= */
.overlay {
  position: fixed; inset: 0;
  background: var(--overlay-scrim);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-out);
}
.overlay[data-open="true"] { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0;
  height: 100vh; height: 100svh;
  width: min(var(--drawer-w), 100vw);
  background: var(--drawer-bg);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--drawer-shadow);
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-slow) var(--ease-out);
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--drawer-header-h);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.drawer__title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.drawer__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-page);
}

.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  max-width: 640px; margin: 0 auto;
  background: var(--sheet-bg);
  border-radius: var(--sheet-radius);
  box-shadow: var(--sheet-shadow);
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--motion-sheet) var(--ease-out);
}
.bottom-sheet[data-open="true"] { transform: translateY(0); }
.bottom-sheet__handle {
  width: 36px; height: 4px; border-radius: var(--radius-pill);
  background: var(--sheet-handle); margin: 0 auto var(--space-4);
}
.bottom-sheet__title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin-bottom: var(--space-2); color: var(--text-primary); }
.bottom-sheet__sub { color: var(--text-secondary); margin-bottom: var(--space-5); }
.bottom-sheet__actions { display: flex; gap: var(--space-3); }

/* Confirmação inline (dentro de drawer/card) — substitui o modal
   central proibido: título + consequência + [Cancelar] [Confirmar] */
.confirm-inline {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  padding: var(--space-4);
}
.confirm-inline--danger { border-color: var(--red-500); background: var(--danger-bg); }
.confirm-inline__title { font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.confirm-inline__text { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.confirm-inline__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* Grade de metadados (label + valor) — detalhe em drawer */
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.meta-item__label {
  font-size: var(--text-xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.meta-item__value { font-size: var(--text-base); color: var(--text-body); margin-top: 2px; }

/* =========================================================
   BANNER (estado permanente — offline, aviso fixo)
   ========================================================= */
.banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-base); color: var(--text-body);
}
.banner__icon { color: var(--text-secondary); margin-top: 2px; flex: none; }
.banner--info    { background: var(--info-bg);    border-color: transparent; color: var(--info); }
.banner--info .banner__icon { color: var(--info); }
.banner--success { background: var(--success-bg); border-color: transparent; color: var(--success); }
.banner--success .banner__icon { color: var(--success); }
.banner--warning { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
.banner--warning .banner__icon { color: var(--warning); }
.banner--danger  { background: var(--danger-bg);  border-color: transparent; color: var(--danger-strong); }
.banner--danger .banner__icon { color: var(--danger-strong); }

/* =========================================================
   EMPTY STATE + SKELETON — designed, not stubbed.
   (anatomia/empty-skeleton-states.md)
   ========================================================= */
.state-empty, .state-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center;
  padding: var(--space-12) var(--space-6);
  max-width: var(--empty-maxw); margin: 0 auto;
}
.state-empty__icon, .state-error__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--empty-icon-size); height: var(--empty-icon-size);
  border-radius: var(--radius-pill);
  background: var(--empty-icon-bg); color: var(--empty-icon-fg);
  margin-bottom: var(--space-1);
}
.state-empty__icon .icon, .state-error__icon .icon { width: 24px; height: 24px; }
.state-empty__title, .state-error__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--empty-title-fg); }
.state-empty__hint, .state-error__hint { font-size: var(--text-base); color: var(--empty-body-fg); }

.skeleton {
  background: var(--skeleton-base);
  border-radius: var(--skeleton-radius);
  position: relative; overflow: hidden;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);
  transform: translateX(-100%);
  animation: ev-shimmer 1.2s linear infinite;
}
@keyframes ev-shimmer { to { transform: translateX(100%); } }
.skeleton-row { height: 44px; margin-bottom: var(--space-2); }
.skeleton-text { height: 12px; margin-bottom: var(--space-2); }
.skeleton-text--sm { width: 40%; }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; display: none; }
}

/* =========================================================
   CARD + STAT CARD — branco elevado; cor só no DADO.
   (anatomia/card-statcard.md)
   ========================================================= */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--card-radius);
  padding: var(--card-p);
}
.card--clickable { cursor: pointer; transition: box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out); text-align: left; width: 100%; font: inherit; color: inherit; }
.card--clickable:hover { box-shadow: var(--shadow-raise); transform: translateY(-1px); }
.card--clickable:active { box-shadow: var(--card-shadow); transform: none; }
.card--clickable:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.stat-card { position: relative; }
.stat-card--alert::before {
  content: ""; position: absolute; top: 0; left: var(--card-p); right: var(--card-p);
  height: 2px; background: var(--stat-alert-edge); border-radius: var(--radius-pill);
}
.stat-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.stat-card__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--stat-icon-size); height: var(--stat-icon-size);
  border-radius: var(--radius-sm);
  background: var(--stat-chip-neutral-bg); color: var(--stat-chip-neutral-fg);
}
.stat-card__chip--money { background: var(--stat-chip-money-bg); color: var(--stat-chip-money-fg); }
.stat-card__chip--alert { background: var(--stat-chip-alert-bg); color: var(--stat-chip-alert-fg); }
.stat-card__chip--info  { background: var(--stat-chip-info-bg);  color: var(--stat-chip-info-fg); }
.stat-card__label { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--stat-label-fg); }
.stat-card__value { font-size: var(--text-3xl); color: var(--stat-value-fg); }
.stat-card__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); margin-top: var(--space-2); }
.stat-card__delta--up { color: var(--stat-delta-up); }
.stat-card__delta--down { color: var(--stat-delta-down); }

/* =========================================================
   ACORDEON
   ========================================================= */
.acordeon { border-top: 1px solid var(--border-subtle); }
.acordeon__trigger {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: var(--tap-min);
  background: transparent; border: none; color: var(--text-secondary);
  font: inherit; font-weight: var(--weight-semibold); cursor: pointer;
  padding: var(--space-3) 0;
}
.acordeon__trigger:hover { color: var(--text-body); }
.acordeon__trigger:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.acordeon__chevron { transition: transform var(--motion-fast) var(--ease-out); margin-left: auto; color: var(--text-tertiary); }
.acordeon[data-open="true"] .acordeon__chevron { transform: rotate(180deg); }
.acordeon__body { padding-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }

/* =========================================================
   LOGIN — card centrado + marca
   ========================================================= */
.login-shell {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: var(--space-5);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}
.login-brand { text-align: center; margin-bottom: var(--space-6); }
.login-brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--action); color: var(--text-on-action);
  font-weight: var(--weight-bold); font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.login-brand__title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-primary); }
.login-brand__sub { font-size: var(--text-sm); color: var(--text-tertiary); }
.login-foot { text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-6); }

/* =========================================================
   PROGRESS (barra de progresso)
   ========================================================= */
.progress {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--surface-inset); overflow: hidden;
}
.progress__fill {
  height: 100%; background: var(--action);
  border-radius: var(--radius-pill);
  transition: width var(--motion-base) var(--ease-out);
}
.progress__label { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }

/* =========================================================
   SEGMENTED CONTROL — trilho afundado + thumb elevado (--seg-*)
   ========================================================= */
.segmented {
  display: inline-flex; gap: 2px;
  padding: 3px; border-radius: var(--seg-radius);
  background: var(--seg-track-bg);
  border: 1px solid var(--seg-track-border);
}
.segmented__btn {
  min-height: calc(var(--seg-h) - 6px);
  padding: 0 var(--space-4);
  border: none; background: transparent;
  border-radius: calc(var(--seg-radius) - 3px);
  color: var(--seg-fg); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast);
}
.segmented__btn:hover { color: var(--seg-fg-active); }
.segmented__btn:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.segmented__btn[aria-selected="true"] {
  background: var(--seg-thumb-bg); color: var(--seg-fg-active);
  box-shadow: var(--seg-thumb-shadow); font-weight: var(--weight-semibold);
}

/* =========================================================
   TABS — sublinhado (navegação de seções)
   ========================================================= */
.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.tab {
  position: relative;
  min-height: 40px; padding: 0 var(--space-1) var(--space-2);
  border: none; background: transparent;
  color: var(--text-secondary); font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium);
  cursor: pointer;
}
.tab:hover { color: var(--text-body); }
.tab:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.tab[aria-selected="true"] { color: var(--text-strong); font-weight: var(--weight-semibold); }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--action); border-radius: var(--radius-pill);
}

/* =========================================================
   TOAST — teto da pilha (z-toast). Casa com ev-ui.js/EvToast.
   Card escuro + ícone semântico. (anatomia/toast.md)
   ========================================================= */
.toaster {
  position: fixed; z-index: var(--z-toast);
  right: var(--space-5); bottom: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: min(380px, calc(100vw - var(--space-8)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--toast-bg); color: var(--toast-fg);
  border: 1px solid var(--toast-border);
  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
  font-size: var(--text-sm);
  animation: ev-toast-in var(--motion-base) var(--ease-out);
}
.toast[data-leaving="true"] { animation: ev-toast-out 120ms var(--ease-out) forwards; }
@keyframes ev-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ev-toast-out { to { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast[data-leaving="true"] { animation: none; }
}
.toast__icon { flex: none; margin-top: 1px; }
.toast__icon .icon { width: 16px; height: 16px; }
.toast--success .toast__icon { color: var(--toast-success); }
.toast--danger  .toast__icon { color: var(--toast-danger); }
.toast--warning .toast__icon { color: var(--toast-warning); }
.toast--info .toast__icon, .toast--neutral .toast__icon { color: var(--toast-fg); }
.toast__msg { flex: 1; line-height: var(--leading-snug); }
.toast__action {
  flex: none; border: none; background: transparent;
  color: var(--toast-fg); font: inherit; font-weight: var(--weight-semibold);
  text-decoration: underline; cursor: pointer; padding: 0;
}
.toast__close {
  flex: none; width: 24px; height: 24px; margin: -2px -4px 0 0;
  border: none; background: transparent; color: var(--toast-fg);
  opacity: 0.7; cursor: pointer; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.toast__close:hover { opacity: 1; }
.toast__close .icon { width: 14px; height: 14px; }

/* =========================================================
   TOOLTIP — hover/focus, escuro (--tooltip-*)
   ========================================================= */
.has-tooltip { position: relative; }
.tooltip {
  position: absolute; bottom: calc(100% + var(--space-2)); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--tooltip-bg); color: var(--tooltip-fg);
  border-radius: var(--tooltip-radius);
  padding: var(--space-1) var(--space-2);
  font-size: var(--tooltip-size); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
  z-index: var(--z-dropdown);
}
.has-tooltip:hover .tooltip, .has-tooltip:focus-within .tooltip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* =========================================================
   POPOVER — painel ancorado de conteúdo livre (z-dropdown)
   ========================================================= */
.popover {
  position: absolute; top: calc(100% + var(--space-2)); left: 0;
  min-width: 240px; max-width: 360px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  padding: var(--space-4);
  z-index: var(--z-dropdown);
}
.popover--in-overlay { z-index: var(--z-modal); }   /* dentro de Sheet/drawer (F45) */
.popover__title { font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }

/* =========================================================
   AVATAR — iniciais ou imagem, circular
   ========================================================= */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--action-soft); color: var(--action-soft-text);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  overflow: hidden; user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--lg { width: 44px; height: 44px; font-size: var(--text-base); }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-sm); }
.breadcrumb__item { color: var(--text-secondary); text-decoration: none; }
.breadcrumb__item:hover { color: var(--text-body); text-decoration: underline; }
.breadcrumb__item[aria-current="page"] { color: var(--text-primary); font-weight: var(--weight-medium); }
.breadcrumb__sep { color: var(--text-tertiary); display: inline-flex; }
.breadcrumb__sep .icon { width: 14px; height: 14px; }

/* =========================================================
   UTILITÁRIOS (a11y + layout mínimo). Cor/tipografia densa
   (.num, .num-display, .label-tag, .tk-*, .code) já vêm de
   03-components.css — não redeclarar aqui.
   ========================================================= */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-secondary); }
.subtle { color: var(--text-tertiary); }
.strong { color: var(--text-strong); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }

/* =========================================================
   RESPONSIVO — console vira layout mobile <768px
   ========================================================= */
@media (max-width: 767px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-main, .app-content { min-width: 0; max-width: 100%; }
  .app-content { padding: var(--space-5); }

  /* sidebar vira drawer da esquerda (overlay z-100, painel z-110) */
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: var(--z-drawer);
    width: 260px; transform: translateX(-100%);
    transition: transform var(--motion-slow) var(--ease-out);
  }
  .sidebar[data-open="true"] { transform: translateX(0); box-shadow: var(--shadow-md); }
  .menu-toggle { display: inline-flex; }

  /* topbar não comprime (evita scroll lateral) */
  .topbar { padding: var(--space-4) var(--space-5); flex-wrap: wrap; }
  .topbar > * { min-width: 0; }
  .topbar__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* tabela vira lista de cards */
  .table-wrap { display: none; }
  .row-cards { display: flex; }

  .meta-grid { grid-template-columns: 1fr; }
  .drawer { width: 100vw; }

  /* toaster centraliza embaixo, acima da safe-area */
  .toaster {
    right: var(--space-4); left: var(--space-4); bottom: var(--space-4);
    max-width: none;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* touch: ações crescem pra 44px no mobile (F27) */
  .btn { min-height: var(--control-h-lg); }
  .input, .textarea, .select { min-height: var(--field-h-lg); }
}
@media (min-width: 768px) {
  .only-mobile { display: none; }
}