/* ============================================================================
   components.css , CRM White-Label
   ============================================================================
   Esqueleto CSS dos componentes do painel. Frontend (Alpine.js) consome
   estas classes e expande conforme necessidade. Todos os valores referenciam
   tokens.css (var(--*)).

   Ordem:
     1. Reset minimo + base
     2. Layout (container, header, tabs, footer)
     3. Buttons (primary, ghost, danger, icon)
     4. Inputs (text, textarea, select, search, date)
     5. Cards (stat-card, kanban-card)
     6. Badges (9 modificadores das etapas)
     7. Modal (overlay, container, header, sections)
     8. Kanban (column, card, drag states)
     9. Tabela (rows, hover, etapa col)
    10. Timeline (historico de atividades)
    11. Utilitarios (text-caps, sr-only, focus-visible)
   ============================================================================ */

/* ==========================================================================
   1) BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); }
p, ul, ol { margin: 0; }
button { font: inherit; }
a { color: var(--link); text-decoration: none; transition: var(--transition-color); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   2) LAYOUT
   ========================================================================== */
.app-shell {
  min-height: 100vh;
  background: var(--bg-app);
  padding: var(--gap-8) var(--gap-6);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Header , h1 serif + subtitulo + badge superusuario + botao Sair */
.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
  margin-bottom: var(--gap-8);
}

.app-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.app-subtitle {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-2);
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.app-logout {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--gap-2) var(--gap-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
}
.app-logout:hover { color: var(--text-primary); background: var(--hover-bg); }

/* Tabs — wrapper centraliza, .tabs nao estica */
.nav-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: var(--gap-6);
  border-bottom: 1px solid var(--border-default);
}
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-2);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--transition-color);
}
.tab:hover { color: var(--text-primary); }
.tab--active {
  color: var(--text-primary);
  border-bottom-color: var(--color-accent);
}
.tab svg { width: 16px; height: 16px; }

/* Footer */
.app-footer {
  margin-top: var(--gap-8);
  padding: var(--gap-3) 0 var(--gap-4);
  font-size: var(--fs-xs);
  text-align: center;
}
.app-footer a {
  color: var(--text-tertiary, #94A3B8);
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-decoration: none;
  padding: var(--gap-2) var(--gap-3);
  min-height: 32px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: color 150ms ease;
}
.app-footer a:hover {
  color: var(--text-primary, #0F172A);
}

/* ==========================================================================
   3) BUTTONS , primary, ghost, danger, icon
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  padding: var(--gap-3) var(--gap-4);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-base);
  user-select: none;
  white-space: nowrap;
  min-height: 40px;
  min-width: 40px;
}

.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

/* OVERHAUL light: disabled SOLIDO (sem opacity em texto) — bg slate-100 +
   texto slate-400 + borda subtle. Dark theme segue opacity acima. */
:root[data-theme="light"] .btn:disabled,
:root[data-theme="light"] .btn[disabled] {
  opacity: 1;
  background: #F1F5F9;
  color: #94A3B8;
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

/* Primary , dourado Inspira (era terracota MCK) */
.btn-primary {
  background: var(--color-accent);
  color: var(--text-on-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(196, 154, 108, 0.45);
}
.btn-primary:active:not(:disabled) {
  background: var(--color-accent-deep);
  transform: translateY(1px);
}

/* Ghost , transparent + border */
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  /* borda nítida >=3:1 (era --border-default ~#CBD5E1, fraca). */
  border-color: var(--border-interactive, #64748B);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--border-strong);
}

/* Danger , vermelho */
.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border-color: transparent;
}
.btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.10);
}

/* WhatsApp , verde solido (botao especifico, modelo usa) */
.btn-whatsapp {
  background: var(--color-success-text, #166534);   /* verde escuro: branco em cima = 7:1 AAA (era #16A34A vivo = 3.4:1) */
  color: #fff;
  border-color: var(--color-success-text, #166534);
}
.btn-whatsapp:hover:not(:disabled) {
  background: #14532D;
  border-color: #14532D;
  color: #fff;                /* fix contraste: <a>:hover do tema sobrescrevia a fonte pra petroleo escuro (#173C46) sobre verde escuro -> ilegivel. Forca branco. */
}

/* Modelos de etapas no modal "Nova pipeline" (cards selecionaveis) */
.pipe-tpl { display: flex; flex-direction: column; gap: 8px; }
.pipe-tpl__opt {
  display: block; position: relative; padding: 10px 12px 10px 38px;
  border: 1px solid var(--border-color, #d8d8d2);
  border-radius: var(--radius-md, 8px);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.pipe-tpl__opt:hover { border-color: var(--color-accent, #c49a6c); }
.pipe-tpl__opt.is-selected {
  border-color: var(--color-accent, #c49a6c);
  background: rgba(196, 154, 108, 0.07);
}
.pipe-tpl__opt input[type="radio"] { position: absolute; left: 13px; top: 13px; accent-color: var(--color-accent, #c49a6c); }
.pipe-tpl__title { display: block; font-weight: 600; font-size: 13px; color: var(--text-primary, #1f2937); }
.pipe-tpl__tag { font-weight: 500; font-size: 11px; color: var(--text-secondary, #6b7280); }
.pipe-tpl__desc { display: block; font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 3px; line-height: 1.45; }

/* Icon-only button (chave reset, lixeira, paper plane no historico) */
.btn-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-icon:hover:not(:disabled) {
  color: var(--color-accent);
  background: var(--hover-bg);
}
.btn-icon svg { width: 16px; height: 16px; }

/* Loading state */
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* Segmented control (Pipeline | Tabela) */
.segmented {
  display: inline-flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.segmented__item {
  padding: var(--gap-2) var(--gap-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition-color);
}
.segmented__item--active {
  background: var(--color-accent);
  color: var(--text-on-accent);
}

/* ==========================================================================
   4) INPUTS , text, textarea, select, search, date
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.field__error {
  font-size: var(--fs-sm);
  color: var(--color-danger);
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--gap-3) var(--gap-3);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
  min-height: 40px;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

/* OVERHAUL light: placeholder usa token proprio (slate-500), distinto do
   texto digitado e do piso AAA de hints. */
:root[data-theme="light"] .input::placeholder,
:root[data-theme="light"] .textarea::placeholder {
  color: var(--text-placeholder);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--border-strong);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.input--error,
.textarea--error,
.select--error {
  border-color: var(--color-danger);
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Search input com icone (kanban tab) */
.search {
  position: relative;
}
.search__input {
  padding-left: 36px;
}
.search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}

/* ==========================================================================
   5) CARDS , stat-card (HOJE/SEMANA/MES/TOTAL) + dashboard cards
   ========================================================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--gap-6);
}

/* Stat card (HOJE / SEMANA / MES / TOTAL) */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--gap-5);
  transition: var(--transition-base);
  cursor: pointer;
}
.stat-card:hover {
  border-color: var(--color-accent-60);
  background: var(--color-accent-05);
  transform: translateY(-1px);
}
.stat-card--active {
  border-color: var(--color-accent);
  background: var(--color-accent-10);
  box-shadow: 0 0 0 1px var(--color-accent-40);
}

.stat-card__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: var(--gap-2);
}

.stat-card__value {
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1;
}

.stat-card__value--accent { color: var(--color-accent); }
.stat-card__value--success { color: var(--color-success); }
.stat-card__value--danger { color: var(--color-danger); }

.stat-card__sub {
  margin-top: var(--gap-2);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

.stat-card__icon {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
}

.stat-card__icon svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent);
}

/* Grid layout helpers */
.grid-stats-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-4);
  margin-bottom: var(--gap-6);
}
.grid-stats-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-4);
  margin-bottom: var(--gap-6);
}

@media (max-width: 768px) {
  .grid-stats-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-stats-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6) BADGES , pill com modificador por etapa (9 cores)
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  /* 4px -> gap-1, 10px -> gap-3 (12px) — pill mais arejado, +2px lateral. */
  padding: var(--gap-1) var(--gap-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Badge interativo (botao com aparencia de badge) */
button.badge {
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-base);
}
.badge--clickable { cursor: pointer; }
.badge--clickable:hover { filter: brightness(1.15); transform: translateY(-1px); }
.badge--clickable:active { transform: translateY(0); }
.badge--clickable:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

.badge--cinza          { background: var(--badge-cinza-bg);          color: var(--badge-cinza-text);          border-color: var(--badge-cinza-border); }
.badge--azul           { background: var(--badge-azul-bg);           color: var(--badge-azul-text);           border-color: var(--badge-azul-border); }
.badge--azul-claro     { background: var(--badge-azul-claro-bg);     color: var(--badge-azul-claro-text);     border-color: var(--badge-azul-claro-border); }
.badge--amarelo        { background: var(--badge-amarelo-bg);        color: var(--badge-amarelo-text);        border-color: var(--badge-amarelo-border); }
.badge--laranja        { background: var(--badge-laranja-bg);        color: var(--badge-laranja-text);        border-color: var(--badge-laranja-border); }
.badge--laranja-escuro { background: var(--badge-laranja-escuro-bg); color: var(--badge-laranja-escuro-text); border-color: var(--badge-laranja-escuro-border); }
.badge--roxo           { background: var(--badge-roxo-bg);           color: var(--badge-roxo-text);           border-color: var(--badge-roxo-border); }
.badge--verde          { background: var(--badge-verde-bg);          color: var(--badge-verde-text);          border-color: var(--badge-verde-border); }
.badge--vermelho       { background: var(--badge-vermelho-bg);       color: var(--badge-vermelho-text);       border-color: var(--badge-vermelho-border); }

/* Badge "Superusuario" , pill dourado Inspira inline com app-subtitle (era terracota MCK) */
.badge--accent {
  background: var(--color-accent-20);
  color: var(--color-accent);
  border-color: var(--color-accent-60);
}

/* Badge para count na coluna kanban (numero a direita do titulo) */
.badge--count {
  background: var(--color-white-08);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  justify-content: center;
}

/* ==========================================================================
   7) MODAL , overlay + container + sections + footer
   ========================================================================== */
/* v5: modal entrance animations (Alpine x-transition.opacity ja anima overlay;
   o container ganha scale-in via keyframe pra leitura editorial). */
@keyframes modalContainerIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--gap-8) var(--gap-4);
  overflow-y: auto;
}

.modal-container {
  width: 100%;
  max-width: var(--modal-max-width);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  animation: modalContainerIn var(--duration-base) var(--ease-out);
  box-shadow: var(--shadow-modal);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--gap-6);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.modal-header__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.modal-header__meta--alert {
  color: var(--color-danger);
}

.modal-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--gap-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
}
.modal-close:hover { color: var(--text-primary); background: var(--hover-bg); }

.modal-body {
  padding: var(--gap-6);
  display: flex;
  flex-direction: column;
  gap: var(--gap-6);
}

.modal-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.modal-section__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-5) var(--gap-6);
  border-top: 1px solid var(--border-subtle);
  gap: var(--gap-3);
}

.modal-footer__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}

/* Grids dentro do modal */
.modal-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-4); }
.modal-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-4); }

@media (max-width: 640px) {
  .modal-grid-3, .modal-grid-2 { grid-template-columns: 1fr; }
  .modal-overlay { padding: 0; }
  .modal-container { min-height: 100vh; border-radius: 0; }
}

/* UTM cards , read-only dentro de origem-utm */
.utm-card {
  background: var(--color-white-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
}
.utm-card__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--gap-1);
}
.utm-card__value {
  font-size: var(--fs-base);
  color: var(--text-primary);
  word-break: break-word;
}

/* Etapas do funil , grid 3x3 de botoes */
.etapa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-2);
}

.etapa-btn {
  padding: var(--gap-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: left;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-base);
}
.etapa-btn:hover { background: var(--hover-bg); border-color: var(--border-strong); }
.etapa-btn--active {
  border-color: var(--color-accent);
  background: var(--color-accent-10);
  color: var(--color-accent);
}

/* ==========================================================================
   8) KANBAN , column + card + drag states
   ========================================================================== */
.kanban {
  display: flex;
  gap: var(--gap-4);
  overflow-x: auto;
  padding-bottom: var(--gap-4);
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.kanban-column {
  flex: 0 0 var(--kanban-col-width);
  min-width: var(--kanban-col-width);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  min-height: max(480px, calc(100vh - 380px));
  max-height: calc(100vh - 200px);
}

.kanban-column__header {
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border-subtle);
}

.kanban-column__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.kanban-column__subtitle {
  margin-top: var(--gap-1);
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

.kanban-column__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--gap-3);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  min-height: 100px;
}

.kanban-column__empty {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  padding: var(--gap-6) var(--gap-4);
}

/* Kanban card (lead)
   IMPORTANTE: NAO usar `transition: all` aqui. Sortable.js manipula
   `transform` durante o drag pra animar a posicao dos cards; um `transition:
   all` brigaria com isso e causa "salto" no drop. Limitamos transitions a
   color/bg/border (hover visual) e deixamos transform sem transition. */
.kanban-card {
  background: var(--color-white-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.kanban-card:hover {
  background: var(--hover-bg);
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px -6px rgba(196, 154, 108, 0.35);
  /* translateY removido: conflita com transform usado pelo Sortable.js
     durante o drag. Realce reforcado por accent + sombra dourada (v5). */
}

.kanban-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.kanban-card__phone {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.kanban-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-1);
  margin-top: var(--gap-1);
}

.kanban-card__tag {
  font-size: var(--fs-xs);
  padding: 2px 6px;
  background: var(--color-white-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
}

.kanban-card__valor {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
}

/* Funil de origem: badge discreto, mesma paleta do tag UTM */
.kanban-card__funil {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--color-accent);
  background: var(--color-accent-10);
  /* 2px=micro vertical INTENCIONAL (pill compacto inline com texto); 8px -> gap-2 */
  padding: 2px var(--gap-2);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  align-self: flex-start;
}

.kanban-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--gap-2);
  padding-top: var(--gap-2);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.kanban-card__dias-alert {
  color: var(--color-danger);
  font-weight: var(--fw-medium);
}

/* Drag states (Sortable.js classes)
   transition: none nas 3 classes pra Sortable controlar 100% da animacao
   sem CSS interpolar transform/opacity em paralelo. */
.kanban-card.sortable-ghost {
  opacity: 0.4;
  background: var(--color-accent-10);
  border-color: var(--color-accent);
  transition: none;
}
.kanban-card.sortable-chosen {
  cursor: grabbing;
  transition: none;
}
.kanban-card.sortable-drag {
  z-index: var(--z-kanban-drag);
  box-shadow: var(--shadow-modal);
  transform: rotate(1.5deg);
  transition: none;
}

.kanban-column__list.sortable-drop-target {
  background: var(--color-accent-05);
  outline: 2px dashed var(--color-accent-40);
  outline-offset: -8px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   9) TABELA , leads em modo "Tabela"
   ========================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table__head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: left;
}

.table__head th {
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border-default);
  font-weight: var(--fw-medium);
}

.table__row {
  cursor: pointer;
  transition: var(--transition-color);
}
.table__row:hover {
  background: var(--hover-bg);
}

.table__row td {
  padding: var(--gap-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-base);
  color: var(--text-primary);
  vertical-align: middle;
}

.table__cell-name {
  font-weight: var(--fw-bold);
}
.table__cell-email {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   10) TIMELINE , historico de atividades dentro do modal
   ========================================================================== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.timeline-input {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
.timeline-input .input { flex: 1; }

.timeline-item {
  display: flex;
  gap: var(--gap-3);
  align-items: flex-start;
}

.timeline-item__icon {
  flex: 0 0 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.timeline-item__icon svg { width: 16px; height: 16px; }

.timeline-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
}

.timeline-item__text {
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.timeline-item__meta {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

/* ==========================================================================
   11) UTILITARIOS
   ========================================================================== */
.text-caps {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-accent);
}

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--gap-4) 0;
}

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

/* Skip link , A11y */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-accent);
  color: var(--text-on-accent);
  padding: var(--gap-3) var(--gap-4);
  font-weight: var(--fw-bold);
  z-index: var(--z-toast);
}
.skip-link:focus { top: 0; }

/* Focus visible global override */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Scrollbar custom (kanban e modal) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ==========================================================================
   TEMPERATURA (modal pills + dashboard card)
   ========================================================================== */
.temp-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-3) var(--gap-5);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}

/* Etapa do funil — linha unica acima da temp-bar */
.etapa-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-5);
  border-bottom: 1px solid var(--border-default);
}
.etapa-bar__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.etapa-bar__select {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: var(--gap-2) var(--gap-4);
  padding-right: 32px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--fw-medium);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23999' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px;
}
.etapa-bar__select:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

/* Modal header — botoes (Salvar + Fechar) */
.modal-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

/* Modal section retratil */
.modal-section--collapsible .modal-section__title--toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
}
.modal-section--collapsible .modal-section__title--toggle:hover { color: var(--color-accent); }
.modal-section--collapsible .modal-section__title--toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.chevron {
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.chevron--open { transform: rotate(90deg); }
.temp-bar__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-right: var(--gap-2);
}
.temp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  /* 6px=micro vertical INTENCIONAL (pill compacto); 14px -> gap-4 (16px) */
  padding: 6px var(--gap-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.temp-pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.temp-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.temp-pill--frio .temp-pill__dot   { background: #4F8AC9; }
.temp-pill--morno .temp-pill__dot  { background: #E0A85B; }
.temp-pill--quente .temp-pill__dot { background: #D75A4A; }

.temp-pill--active.temp-pill--frio {
  background: rgba(79, 138, 201, 0.16);
  border-color: #4F8AC9;
  color: #BAD3F0;
}
.temp-pill--active.temp-pill--morno {
  background: rgba(224, 168, 91, 0.16);
  border-color: #E0A85B;
  color: #F4D9AE;
}
.temp-pill--active.temp-pill--quente {
  background: rgba(215, 90, 74, 0.18);
  border-color: #D75A4A;
  color: #F2B8AE;
}

.temp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-4);
}
.temp-stat {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  /* Tokens declarados em tokens.css como `transparent` hoje (visual flat do dark);
     Onda 2 re-mapeia pra surface elevada no light theme sem editar componente. */
  background: var(--bg-elevated, var(--bg-secondary));
}
.temp-stat__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.temp-stat__value {
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.1;
}
.temp-stat__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.temp-stat--frio   .temp-stat__dot { background: #4F8AC9; }
.temp-stat--morno  .temp-stat__dot { background: #E0A85B; }
.temp-stat--quente .temp-stat__dot { background: #D75A4A; }
.temp-stat--sem    .temp-stat__dot { background: var(--border-strong); }

@media (max-width: 768px) {
  .temp-stats { grid-template-columns: repeat(2, 1fr); }
  .temp-bar { padding: var(--gap-2) var(--gap-4); }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 768px) {
  .app-shell { padding: var(--gap-5) var(--gap-4); }
  .app-title { font-size: var(--fs-2xl); }
  .modal-header__title { font-size: var(--fs-2xl); }
  .stat-card__value, .stat-card { font-size: var(--fs-2xl); }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab { white-space: nowrap; }
  /* kanban vira scroll horizontal nativo (ja eh display: flex + overflow-x: auto) */
}

@media (max-width: 480px) {
  .grid-stats-4 { grid-template-columns: 1fr 1fr; gap: var(--gap-3); }
}

/* ==========================================================================
   12) SERVICOS / LEAD-SERVICES (catalogo + ficha do lead + clientes ativos)
   ========================================================================== */

/* --- Tabela de servicos (catalogo + lead-services + clientes ativos) --- */
.svc-table {
  width: 100%;
  border-collapse: collapse;
}
.svc-table thead th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-align: left;
  padding: var(--gap-3) var(--gap-3);
  border-bottom: 1px solid var(--border-default);
}
.svc-table tbody td {
  padding: var(--gap-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-base);
  color: var(--text-primary);
  vertical-align: middle;
}
.svc-table tfoot td {
  padding: var(--gap-3);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.svc-table .svc-table__row--clickable { cursor: pointer; transition: var(--transition-color); }
.svc-table .svc-table__row--clickable:hover { background: var(--hover-bg); }
.svc-table .svc-table__actions {
  display: flex;
  gap: var(--gap-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --- Status pill (estados do lead_service) --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 6px=micro gap intencional (status-pill compacto) */
  /* 4px -> gap-1, 10px -> gap-3 (12px) — alinhar com .badge */
  padding: var(--gap-1) var(--gap-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* Reusa as mesmas cores das etapas */
.status-pill--cinza          { background: var(--badge-cinza-bg);          color: var(--badge-cinza-text);          border-color: var(--badge-cinza-border); }
.status-pill--azul           { background: var(--badge-azul-bg);           color: var(--badge-azul-text);           border-color: var(--badge-azul-border); }
.status-pill--azul-claro     { background: var(--badge-azul-claro-bg);     color: var(--badge-azul-claro-text);     border-color: var(--badge-azul-claro-border); }
.status-pill--amarelo        { background: var(--badge-amarelo-bg);        color: var(--badge-amarelo-text);        border-color: var(--badge-amarelo-border); }
.status-pill--laranja        { background: var(--badge-laranja-bg);        color: var(--badge-laranja-text);        border-color: var(--badge-laranja-border); }
.status-pill--laranja-escuro { background: var(--badge-laranja-escuro-bg); color: var(--badge-laranja-escuro-text); border-color: var(--badge-laranja-escuro-border); }
.status-pill--roxo           { background: var(--badge-roxo-bg);           color: var(--badge-roxo-text);           border-color: var(--badge-roxo-border); }
.status-pill--verde          { background: var(--badge-verde-bg);          color: var(--badge-verde-text);          border-color: var(--badge-verde-border); }
.status-pill--vermelho       { background: var(--badge-vermelho-bg);       color: var(--badge-vermelho-text);       border-color: var(--badge-vermelho-border); }

/* status-pill como <select> editavel (operador troca status livre) */
.status-pill--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='currentColor' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px;
  font: inherit;
}
.status-pill--select:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.status-pill--select:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); }

/* --- Modal interno: tabs (ficha lead | pos-venda) --- */
.modal-tabs {
  display: flex;
  gap: var(--gap-2);
  padding: 0 var(--gap-6);
  border-bottom: 1px solid var(--border-subtle);
}
.modal-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: var(--transition-color);
  min-height: 40px;
}
.modal-tabs__btn:hover { color: var(--text-primary); background: var(--color-white-05); }
.modal-tabs__btn--active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: var(--fw-bold);
  background: var(--color-accent-05);
}

/* --- Add-service form (linha inline) --- */
.svc-add-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr auto;
  gap: var(--gap-2);
  align-items: end;
}
@media (max-width: 640px) {
  .svc-add-row { grid-template-columns: 1fr; }
}

/* --- Item compacto de proposta (modal kanban) --- */
.svc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-3);
  background: var(--color-white-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.svc-item__name { font-weight: var(--fw-medium); }
.svc-item__valor { color: var(--color-accent); font-weight: var(--fw-bold); }

/* --- Lista de leads ativos --- */
.ca-list { display: flex; flex-direction: column; gap: 0; }

/* --- Cards de servicos no dashboard (4 widgets de drill-down) --- */
.grid-stats-4-svc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-4);
  margin-bottom: var(--gap-6);
}
@media (max-width: 1024px) {
  .grid-stats-4-svc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid-stats-4-svc { grid-template-columns: 1fr; }
}

/* Stat card clicavel (drill-down) */
.stat-card--clickable { cursor: pointer; }
.stat-card--clickable:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }

/* --- Top servicos: ranking de barras --- */
.top-svc-list { display: flex; flex-direction: column; gap: var(--gap-3); }
.top-svc-item {
  cursor: pointer;
  padding: var(--gap-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
}
.top-svc-item:hover { background: var(--hover-bg); }
.top-svc-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); font-size: var(--fs-sm); color: var(--text-primary); }
.top-svc-item__bar { position: relative; height: 8px; background: var(--color-white-05); border-radius: var(--radius-pill); overflow: hidden; margin-top: 6px; }
.top-svc-item__bar-fill { position: absolute; inset: 0; background: var(--color-accent); border-radius: var(--radius-pill); }

/* --- Pagination compacta (drill-down) --- */
.dd-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  gap: var(--gap-2);
}

/* --- Sugestoes de motivo de perda (chips clicaveis) --- */
.motivo-chips { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.motivo-chip {
  background: var(--color-white-05);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  /* 4px -> gap-1; 12px -> gap-3 */
  padding: var(--gap-1) var(--gap-3);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition-base);
}
.motivo-chip:hover {
  background: var(--color-accent-10);
  color: var(--color-accent);
  border-color: var(--color-accent-60);
}

/* --- Toggle simples (reuso) --- */
.toggle-row { display: inline-flex; align-items: center; gap: var(--gap-2); }

/* --- Mobile responsivo: tabela de servicos --- */
@media (max-width: 640px) {
  .svc-table thead { display: none; }
  .svc-table tbody td {
    display: block;
    border-bottom: none;
    padding: var(--gap-2) var(--gap-3);
  }
  .svc-table tbody tr {
    display: block;
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--gap-3) 0;
  }
  .svc-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-tertiary);
    margin-bottom: 2px;
  }
}

/* --- Empty state inline --- */
.empty-row {
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  padding: var(--gap-6) var(--gap-4) !important;
}

/* Empty-state forte: chamado pra criar a 1ª etapa da pipeline */
.pipe-stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-4) var(--gap-2);
}
.pipe-stage-empty__title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.pipe-stage-empty__text {
  margin: 0 0 var(--gap-2);
  max-width: 48ch;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ============================================================================
   13. Aba Qualificacao (campos cadastraveis dinamicamente)
   ============================================================================ */

/* Helper acima da tabela */
.cq-helper {
  margin: var(--gap-3) 0 var(--gap-3);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Drag handle na primeira coluna da tabela */
.cq-drag-handle {
  cursor: grab;
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--gap-3) var(--gap-2) !important;
  user-select: none;
  width: 36px;
}
.cq-drag-handle:hover { color: var(--color-accent); }
.cq-drag-handle:active { cursor: grabbing; }
.cq-drag-handle svg { display: inline-block; vertical-align: middle; }

/* Ghost row durante o drag */
.cq-row--drag-ghost {
  opacity: 0.45;
  background: var(--color-accent-10) !important;
}

/* Slug exibido como code */
.cq-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: var(--color-white-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 6px; /* micro-padding INTENCIONAL pra inline-code compacto (slug) */
}

/* Marca de obrigatorio (*) ao lado do label */
.cq-required-mark {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  margin-left: var(--gap-1); /* 4px -> gap-1 */
}

/* Lista de checkboxes para select_multi (no card do lead) */
.cq-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--gap-3);
  background: var(--color-white-05);
}
.cq-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  font-size: var(--fs-base);
  color: var(--text-primary);
  min-height: 32px;
  cursor: pointer;
}
.cq-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-accent);
}

/* Editor de opcoes dentro do modal de campo */
.cq-opcoes-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--gap-3);
  background: var(--color-white-05);
}
.cq-opcao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: var(--gap-2);
  align-items: center;
}
.cq-opcao .input { min-width: 0; }
.cq-opcao__remove {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
}

/* Field em largura total (textarea, multi-checkbox) */
.field--full { grid-column: 1 / -1; }

/* Segmented item ghost (botao "Limpar" no boolean) */
.segmented__item--ghost {
  background: transparent;
  color: var(--text-tertiary);
}
.segmented__item--ghost:hover {
  color: var(--color-accent);
  background: var(--color-accent-10);
}

/* Mobile */
@media (max-width: 640px) {
  .cq-opcao {
    grid-template-columns: 1fr 1fr auto;
  }
  .cq-drag-handle { width: auto; }
}


/* ============================================================================
   14. Aba Formularios (catalogo + editor + modais)
   ============================================================================ */

/* "Funil de origem: X" no cabecalho do card de lead */
.modal-header__meta--funil {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  margin-top: var(--gap-1);
}

/* Texto secundario (compat) */
.text-soft {
  color: var(--text-tertiary);
}

/* .btn-link foi consolidado (era definido 2× — esta + outra mais abaixo em
   "v5 — Animacoes". Cascade ja fazia a 2a sobrescrever; mantida a 2a
   (que estava sendo aplicada hoje) com :focus-visible absorvido. */

/* Alias usado no modal CRUD de campo de formulario */
.fc-opcoes-list { /* mesma estrutura do cq-opcoes-list, sem override */ }

/* Form preview (modal "Visualizar") */
.fp-form {
  padding: var(--gap-2);
  background: var(--color-white-05);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.fp-form .input,
.fp-form .select,
.fp-form .btn {
  pointer-events: none;
}


/* ============================================================================
   15. Aba Pipelines (V010: catalogo + editor de stages + modais)
   ============================================================================ */

/* Dropdown "Pipeline ativa" no topo do kanban — design alinhado ao tema dark */
.pipeline-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-3);
  margin-bottom: var(--gap-4);
  /* 6px=micro vertical INTENCIONAL (pill compacto); 12 e 14 -> gap-3 e gap-4 */
  padding: 6px var(--gap-3) 6px var(--gap-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  transition: var(--transition-color);
}
.pipeline-bar:hover {
  border-color: var(--border-strong);
}
.pipeline-bar__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pipeline-bar__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  /* 4px -> gap-1 (vertical); 22px=reserva caret SVG INTENCIONAL; 0 = sem padding-left */
  padding: var(--gap-1) 22px var(--gap-1) 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23999' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 9px;
}
.pipeline-bar__select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.pipeline-bar__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--text-tertiary);
  cursor: help;
  transition: var(--transition-color);
}
.pipeline-bar__hint:hover {
  color: var(--color-accent);
}
.pipeline-bar__hint svg { width: 14px; height: 14px; }

/* Radio "Default" na lista de pipelines */
.pipeline-default-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--transition-color);
}
.pipeline-default-radio:hover { border-color: var(--color-accent); }
.pipeline-default-radio:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
.pipeline-default-radio--on { border-color: var(--color-accent); }
.pipeline-default-radio__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: var(--transition-color);
}
.pipeline-default-radio--on .pipeline-default-radio__dot {
  background: var(--color-accent);
}

/* Modal CRUD de stage: tipo radios estilizados */
.ps-tipo-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 6px=micro gap intencional */
  /* 6px=micro vertical INTENCIONAL; 10px -> gap-3 (12px) */
  padding: 6px var(--gap-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-white-05);
  transition: var(--transition-color);
}
.ps-tipo-radio:hover { border-color: var(--color-accent); }
.ps-tipo-radio--active {
  border-color: var(--color-accent);
  background: var(--color-accent-10);
}
.ps-tipo-radio input[type="radio"] {
  accent-color: var(--color-accent);
  cursor: pointer;
}
.ps-tipo-radio input[type="radio"]:disabled { cursor: not-allowed; }

/* Mobile: pipeline-bar empilha verticalmente */
@media (max-width: 640px) {
  .pipeline-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-2);
  }
  .pipeline-bar__select { flex: 1 1 auto; }
  .pipeline-bar__hint { font-size: var(--fs-xs); }
}

/* ============================================================================
   V012 — Modal Usuários: accordion de capabilities + checkboxes agrupados
   ============================================================================ */

/* Container ligeiramente mais largo pra acomodar accordion confortavelmente */
.modal-container--users {
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - var(--gap-8) * 2);   /* cabe na viewport */
}
/* Conteudo longo (accordion de caps) scrolla DENTRO do modal. min-height:0
   e essencial: sem ele o flex item nao encolhe e o overflow nao ativa
   (era por isso que nao dava pra scrollar nas Permissoes). */
.modal-container--users .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Accordion */
.caps-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.caps-group {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-pure);   /* light: fundo branco (era --color-bg-card #1F4D5A escuro -> texto escuro ilegivel) */
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.caps-group[open] {
  border-color: var(--color-accent-40);
}

.caps-group__summary {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  /* WCAG fix: --color-text-dark (#5C4A2F) sobre --color-bg-card (#1F4D5A) = 1.03:1 (FAIL).
     Trocado por --text-primary (#FAF6EF cream) = ~12:1 sobre o bg do accordion. */
  color: var(--text-primary);
  list-style: none;
  user-select: none;
  min-height: 44px; /* WCAG 2.5.5 Target Size */
}
.caps-group__summary::-webkit-details-marker { display: none; }
.caps-group__summary:hover { background: var(--color-accent-05); }
.caps-group__summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -2px;
}

.caps-group__name {
  flex: 1 1 auto;
  font-size: var(--fs-base);
}

.caps-group__counter {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  background: var(--color-accent-10);
  border-radius: var(--radius-sm);
  /* 2px=micro vertical INTENCIONAL (counter compacto); 8px -> gap-2 */
  padding: 2px var(--gap-2);
  letter-spacing: 0.5px;
}

.caps-group__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}
.caps-group[open] .caps-group__chevron {
  transform: rotate(180deg);
}

.caps-group__body {
  padding: var(--gap-1) var(--gap-4) var(--gap-4);
  border-top: 1px solid var(--border-default);
  /* Token declarado em tokens.css como `transparent` hoje (visual flat do dark);
     Onda 2 re-mapeia pra surface suave no light theme sem editar componente. */
  background: var(--color-bg-soft);
}

.caps-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2); /* 8px -> gap-2 */
  /* 10px -> gap-3 (12px), 0 = nenhum horizontal */
  padding: var(--gap-3) 0;
  margin-bottom: 6px; /* 6px=micro vertical INTENCIONAL (espaco apos divider tracejado) */
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 1px dashed var(--border-default);
  width: 100%;
  font-weight: var(--fw-medium);
}
.caps-toggle-all input[type="checkbox"] {
  accent-color: var(--color-accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.caps-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
}

.caps-item {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  /* 8px -> gap-2; 6px=micro horizontal INTENCIONAL (encostado no body sem borda) */
  padding: var(--gap-2) 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-sm);
  min-height: 44px; /* WCAG 2.5.5 Target Size */
  transition: background 0.12s ease;
}
.caps-item:hover { background: var(--color-accent-05); }
.caps-item input[type="checkbox"] {
  accent-color: var(--color-accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.caps-item input[type="checkbox"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

.caps-item__label {
  flex: 1 1 auto;
  /* WCAG fix: --color-text-dark (#5C4A2F) sobre bg do accordion = invisível.
     Trocado por --text-primary p/ contraste >=12:1 (AAA). */
  color: var(--text-primary);
}

.caps-item__slug {
  font-family: var(--font-mono);
  /* Token --fs-xxs nao existe em tokens.css; trocado por --fs-xs (11px), valor mais proximo na escala. */
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--canvas-2);   /* light: chip cream claro (era --color-bg-dark #0F2A32 escuro) */
  padding: 2px 6px; /* 2px=micro vertical (separa do label); 6px=horizontal compacto pro slug */
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}

/* Mobile (≥360px): mantem accordion legivel */
@media (max-width: 640px) {
  .modal-container--users {
    max-width: 100%;
    width: calc(100vw - 24px);
  }
  .caps-group__summary {
    /* 10px -> gap-3 (12px), 12px -> gap-3 */
    padding: var(--gap-3) var(--gap-3);
    gap: var(--gap-2);
  }
  .caps-item {
    flex-wrap: wrap;
    /* 8px -> gap-2, 4px -> gap-1 */
    padding: var(--gap-2) var(--gap-1);
  }
  .caps-item__slug {
    flex-basis: 100%;
    margin-left: var(--gap-6); /* 24px -> gap-6 */
  }
}

/* Reduced motion: desliga animacoes */
@media (prefers-reduced-motion: reduce) {
  .caps-group__chevron { transition: none; }
  .caps-group { transition: none; }
  .caps-item { transition: none; }
}

/* ==========================================================================
   MELHORIAS (sugestoes in-app) , botao header + tab + drawers + tabela
   ==========================================================================
   Sistema adaptado do modulo Novos Alunos Uelicon pra paleta dark MCK.
   Status: aberto (cinza) / em_progresso (amarelo) / concluido (verde)
   Prioridade: baixa (azul-claro) / media (cinza) / alta (vermelho)
   ========================================================================== */

/* Header actions: agrupa Melhorias + Sair */
.app-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  flex-shrink: 0;
}

/* Botao Melhorias do header — ghost com badge contador */
.btn-melhorias {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  min-height: 40px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}
.btn-melhorias:hover {
  color: var(--text-primary);
  border-color: var(--hover-border);
  background: var(--hover-bg);
}
.btn-melhorias:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}
.btn-melhorias--active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-10);
}
.btn-melhorias__icon { width: 18px; height: 18px; flex: 0 0 18px; }

.btn-melhorias__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: var(--radius-pill);
  background: var(--color-white-08);
  color: var(--text-tertiary);
}
.btn-melhorias__badge--ativo {
  background: var(--badge-verde-bg);
  color: var(--badge-verde-text);
  border: 1px solid var(--badge-verde-border);
}
.btn-melhorias__badge--zero {
  background: var(--color-white-05);
  color: var(--text-tertiary);
}

/* Esconde texto "Melhorias" em telas estreitas, mantem icone + badge */
@media (max-width: 640px) {
  .btn-melhorias { padding: var(--gap-2); }
  .btn-melhorias span:not(.btn-melhorias__badge) {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ----- Header da section Melhorias ----- */
.melhorias-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
  margin-bottom: var(--gap-6);
  flex-wrap: wrap;
}
.melhorias-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.melhorias-subtitle {
  margin-top: var(--gap-1);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ----- Tabela de melhorias ----- */
.melhorias-table-wrap {
  padding: 0;
  overflow: hidden;
}
.table-melhorias { width: 100%; }
.table-melhorias td,
.table-melhorias th {
  padding: var(--gap-3) var(--gap-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
}
.table-melhorias th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-align: left;
  background: transparent;
}
.table-melhorias tbody tr.row--clickable {
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.table-melhorias tbody tr.row--clickable:hover { background: var(--hover-bg); }
.table-melhorias tbody tr.row--clickable:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -2px;
}

.melhoria-titulo {
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  font-size: var(--fs-base);
}
.melhoria-desc {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  max-width: 540px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.melhoria-when {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.melhoria-acoes {
  text-align: right;
  white-space: nowrap;
}
.melhoria-acoes .btn { margin-left: var(--gap-1); }

/* Botao mini (acoes inline da tabela) */
.btn-sm {
  min-height: 32px;
  padding: 6px var(--gap-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: var(--gap-1);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-color);
}
.btn-icon-danger:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: rgba(220, 38, 38, 0.08);
}

/* Tabela responsiva: vira "cards verticais" em mobile */
@media (max-width: 768px) {
  .table-melhorias thead { display: none; }
  .table-melhorias, .table-melhorias tbody, .table-melhorias tr, .table-melhorias td {
    display: block;
    width: 100%;
  }
  .table-melhorias tbody tr.row--clickable {
    padding: var(--gap-4);
    border-bottom: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gap-2);
    align-items: center;
  }
  .table-melhorias td {
    border: 0;
    padding: 0;
  }
  .table-melhorias td[data-col="titulo"]      { grid-column: 1 / 3; }
  .table-melhorias td[data-col="status"]      { grid-column: 1 / 2; }
  .table-melhorias td[data-col="prioridade"]  { grid-column: 2 / 3; text-align: right; }
  .table-melhorias td[data-col="autor"]::before {
    content: 'por '; color: var(--text-tertiary); font-size: var(--fs-xs);
  }
  .table-melhorias td[data-col="autor"]      { grid-column: 1 / 2; font-size: var(--fs-xs); color: var(--text-secondary); }
  .table-melhorias td[data-col="quando"]     { grid-column: 2 / 3; text-align: right; }
  .table-melhorias td[data-col="acoes"]      { grid-column: 1 / 3; text-align: left; margin-top: var(--gap-2); }
  .melhoria-acoes .btn,
  .melhoria-acoes .btn-icon-danger { margin-left: 0; margin-right: var(--gap-2); }
}

/* ----- Skeleton ----- */
.skeleton {
  display: inline-block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-white-05) 0%, var(--color-white-10) 50%, var(--color-white-05) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton--lg { height: 18px; }
.skeleton-row {
  display: flex;
  gap: var(--gap-3);
  padding: var(--gap-3) var(--gap-4);
  align-items: center;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ----- State (empty / error) ----- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-3);
  padding: var(--gap-12) var(--gap-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-10);
  color: var(--color-accent);
}
.state__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-primary);
  margin: 0;
}
.state__sub {
  color: var(--text-secondary);
  max-width: 50ch;
}
.state--error .state__title { color: var(--color-danger); }

/* ----- Chips de prioridade (alem dos badge--cor) ----- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--gap-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip--baixa {
  background: var(--badge-azul-claro-bg);
  color: var(--badge-azul-claro-text);
  border-color: var(--badge-azul-claro-border);
}
.chip--media {
  background: var(--badge-cinza-bg);
  color: var(--badge-cinza-text);
  border-color: var(--badge-cinza-border);
}
.chip--alta {
  background: var(--badge-vermelho-bg);
  color: var(--badge-vermelho-text);
  border-color: var(--badge-vermelho-border);
}
.chip--cinza {
  background: var(--badge-cinza-bg);
  color: var(--badge-cinza-text);
  border-color: var(--badge-cinza-border);
}
.chip--amarelo {
  background: var(--badge-amarelo-bg);
  color: var(--badge-amarelo-text);
  border-color: var(--badge-amarelo-border);
}
.chip--verde {
  background: var(--badge-verde-bg);
  color: var(--badge-verde-text);
  border-color: var(--badge-verde-border);
}
/* v5: chip clicavel pra filtros (Melhorias). Variante --active aplica accent. */
button.chip {
  cursor: pointer;
  background: var(--color-white-05);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  transition: var(--transition-color);
}
button.chip:hover {
  background: var(--color-accent-10);
  color: var(--text-primary);
  border-color: var(--color-accent-40);
}
button.chip.chip--active {
  background: var(--color-accent-20);
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: var(--fw-bold);
}
button.chip small { margin-left: 4px; }  /* sem opacity: 0.7 dimava o (N) p/ ~4:1 (falha AA texto pequeno); herda a cor AAA do chip */
/* Definicao unica do btn-link (consolidada — antes existia 2x).
   :focus-visible absorvido da definicao antiga pra preservar A11y. */
.btn-link {
  background: transparent;
  border: 0;
  color: var(--color-accent);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: var(--gap-1) var(--gap-2);
}
.btn-link:hover { color: var(--color-accent-deep); text-decoration: underline; }
.btn-link:focus-visible { outline: var(--focus-outline); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Variante perigo discreta do btn-link (ex.: "Excluir esta pipeline") */
.btn-link--danger {
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
}
.btn-link--danger:hover { color: var(--color-danger); text-decoration: underline; }
.btn-link--danger svg { width: 13px; height: 13px; }

/* Variante perigo do btn-icon (ex.: excluir pipeline/etapa) */
.btn-icon--danger:hover:not(:disabled) {
  color: var(--color-danger);
  background: var(--hover-bg);
}

/* Rodape de acao perigosa no card de configuracoes da pipeline */
.pipe-danger-row {
  padding-top: var(--gap-3);
  border-top: 1px solid var(--border-default);
}

/* ----- Drawer lateral (right) — usado pelos drawers de Melhorias ----- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal-overlay);
  animation: drawer-fade-in var(--duration-base) var(--ease-out);
}
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 520px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-modal);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  animation: drawer-slide-in var(--duration-base) var(--ease-out);
}
.drawer--right { right: 0; left: auto; }

.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-5) var(--gap-6);
  border-bottom: 1px solid var(--border-subtle);
}
.drawer__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  margin: 0;
  line-height: var(--lh-tight);
  word-wrap: break-word;
}
.drawer__sub {
  margin-top: var(--gap-1);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.drawer__close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--gap-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
  flex-shrink: 0;
}
.drawer__close:hover { color: var(--text-primary); background: var(--hover-bg); }

.drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--gap-6);
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}
.drawer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}
.drawer__section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.drawer__section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin: 0;
}
.drawer__text {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-relaxed);
}
.drawer__text--muted {
  color: var(--text-tertiary);
  font-style: italic;
}
.drawer__meta {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.drawer__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-2);
  padding: var(--gap-4) var(--gap-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.drawer__foot--between { justify-content: space-between; }

/* Radio inline (form Nova melhoria) */
.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
}
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-size: var(--fs-base);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 32px;
}
.radio input[type="radio"] {
  accent-color: var(--color-accent);
  width: 16px; height: 16px;
  cursor: pointer;
}

@keyframes drawer-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer-overlay, .drawer { animation: none; }
}

/* Drawer em mobile vira full-width sem max-width */
@media (max-width: 640px) {
  .drawer { max-width: 100%; border-left: 0; }
  .drawer__head, .drawer__foot { padding-left: var(--gap-4); padding-right: var(--gap-4); }
  .drawer__body { padding: var(--gap-4); }
}

/* ============================================================================
   DRAWER DE PIPELINE (edicao de etapas) — v26
   Reusa .drawer*, adiciona so o necessario pras linhas compactas de etapa.
   ============================================================================ */
/* Largura um pouco maior pra caber os campos com folga */
.drawer--pipeline { max-width: 560px; }
@media (max-width: 640px) {
  .drawer--pipeline { max-width: 100%; }
}

/* Header do drawer de pipeline BEM maior (so aqui — nao afeta drawers de Melhorias).
   Padding vertical: --gap-5 (20px) -> ~44px.
   flex-start (nao center): nome grande + chips formam um bloco a esquerda; os botoes
   (recarregar/fechar) ancoram no topo-direita sem o center empurrar os chips. */
.drawer--pipeline .drawer__head {
  padding-top: calc(var(--gap-5) * 2.2);
  padding-bottom: calc(var(--gap-5) * 2.2);
  align-items: flex-start;
}
/* Nome editavel bem maior: --fs-2xl (24px) -> ~41px. */
.drawer--pipeline .drawer__head .pipe-drawer__name-input {
  font-size: calc(var(--fs-2xl) * 1.7);
  line-height: 1.15;
}
/* Botoes (recarregar/fechar) acompanham o header maior */
.drawer--pipeline .drawer__head .drawer__reload svg,
.drawer--pipeline .drawer__head .drawer__close svg {
  width: 24px;
  height: 24px;
}

/* Botao recarregar etapas (↻) no header do drawer — mesma base do close */
.drawer__reload {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--gap-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-color);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.drawer__reload:hover { color: var(--text-primary); background: var(--hover-bg); }
.drawer__reload:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 2px var(--color-accent));
}
.drawer__reload:disabled { cursor: default; opacity: 0.55; }
.drawer__reload.is-loading svg {
  animation: pipe-reload-spin 0.7s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes pipe-reload-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer__reload.is-loading svg { animation: none; }
}

/* Nome editavel inline no header */
.pipe-drawer__name-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: var(--lh-tight);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--gap-1) var(--gap-2);
  margin-left: calc(var(--gap-2) * -1);
  transition: var(--transition-color), border-color var(--duration-fast) var(--ease-out);
}
.pipe-drawer__name-input:hover { border-color: var(--border-subtle); }
.pipe-drawer__name-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--bg-surface);
}
.pipe-drawer__name-input[readonly] { border-color: transparent; cursor: default; }

/* Toggle "Mais opcoes" / "Regras avancadas" */
.pipe-drawer__collapse {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--gap-1) 0;
  border-radius: var(--radius-sm);
}
.pipe-drawer__collapse:hover { color: var(--text-primary); }
.pipe-drawer__collapse:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.pipe-drawer__collapse--sm {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
}
.pipe-drawer__opts {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding-top: var(--gap-2);
}

/* Lista de etapas */
.pipe-stage-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.pipe-stage-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.pipe-stage-item.pipe-stage-row--expanded {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}

/* Linha compacta */
.pipe-stage-row {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-2) var(--gap-3);
  min-height: 44px;
}
.pipe-stage-row__handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  cursor: grab;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
}
.pipe-stage-row__handle:hover { color: var(--text-secondary); background: var(--hover-bg); }
.pipe-stage-row__handle:active { cursor: grabbing; }
.pipe-stage-row__handle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.pipe-stage-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: var(--gap-1) var(--gap-1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.pipe-stage-row__main:hover { background: var(--hover-bg); }
.pipe-stage-row__main:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.pipe-stage-row__title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipe-stage-row__type { flex-shrink: 0; }
.pipe-stage-row__actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
}

/* Bolinha de cor (reusa as cores dos badges via classe badge--*) */
.pipe-color-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full, 999px);
  display: inline-block;
  border: 1px solid rgba(0,0,0,.08);
}

/* Area de edicao inline da etapa */
.pipe-stage-edit {
  padding: var(--gap-3) var(--gap-3) var(--gap-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle, var(--bg-surface));
}
.pipe-stage-edit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
}
@media (max-width: 480px) {
  .pipe-stage-edit__grid { grid-template-columns: 1fr; }
}
.pipe-stage-rules {
  border-top: 1px dashed var(--border-subtle);
  padding-top: var(--gap-2);
}
.pipe-stage-rules__body {
  padding-top: var(--gap-2);
}

/* Linha nova (rascunho de etapa) */
.pipe-stage-new {
  margin-top: var(--gap-2);
  padding: var(--gap-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle, var(--bg-surface));
}

/* ============================================================================
   v5 — Animações + microinteractions extras
   ============================================================================ */

/* Skeleton loader (shimmer) — placeholder enquanto fetch */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-white-05) 0%,
    var(--color-white-10) 50%,
    var(--color-white-05) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}
.skeleton--text { height: 14px; margin: 6px 0; }
.skeleton--text-lg { height: 24px; margin: 8px 0; }
.skeleton--card {
  height: 96px;
  background: var(--color-white-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton--card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-10) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
}

/* Stat-cards: fade-in stagger ao montar */
.grid-stats-4 > .stat-card {
  animation: fadeInUp var(--duration-base) var(--ease-out) backwards;
}
.grid-stats-4 > .stat-card:nth-child(1) { animation-delay: 0ms;  }
.grid-stats-4 > .stat-card:nth-child(2) { animation-delay: 60ms; }
.grid-stats-4 > .stat-card:nth-child(3) { animation-delay: 120ms; }
.grid-stats-4 > .stat-card:nth-child(4) { animation-delay: 180ms; }

/* Buttons: scale sutil no active (já tem hover translateY-1px no btn-primary) */
.btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Tab indicator: underline accent animado */
.tab {
  position: relative;
}
.tab::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.tab.tab--active::after,
.tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* Reduced motion: desliga tudo */
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton--card::after,
  .grid-stats-4 > .stat-card,
  .modal-container {
    animation: none !important;
  }
  .tab::after { transition: none !important; }
}

/* ============================================================================
   v5 — Mobile responsividade extra
   ============================================================================ */

/* Kanban touch scroll suave em tablets/mobile */
@media (max-width: 1024px) {
  .kanban-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--gap-4);
  }
  .kanban-column { scroll-snap-align: start; }
}

/* Tabs navbar: gradient overlay nas bordas quando overflow horizontal */
@media (max-width: 1024px) {
  .nav-tabs {
    position: relative;
  }
  .nav-tabs::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, var(--bg-app), transparent);
    pointer-events: none;
  }
}

/* Stat-cards: 4-col -> 2-col em <640px (mantém densidade); 1-col só em <360px */
@media (max-width: 640px) {
  .grid-stats-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-3);
  }
  .stat-card { padding: var(--gap-3); }
  .stat-card__value { font-size: var(--fs-2xl); }
  /* Modal-tabs com scroll horizontal se overflow (4 tabs no mobile podem
     ficar apertadas) */
  .modal-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .modal-tabs__btn { white-space: nowrap; }
}

@media (max-width: 360px) {
  .grid-stats-4 { grid-template-columns: 1fr; }
}

/* Filtros de melhorias: empilhar em <640px */
@media (max-width: 640px) {
  .filtros-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .filtros-row .btn-link { margin-left: 0 !important; }
}

/* V015 — Fase 3: insights-row (em risco + KPIs financeiros) responsivo */
.insights-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--gap-3);
}
@media (max-width: 1280px) {
  .insights-row { grid-template-columns: 1fr 1fr 1fr; }
  .insights-row > .stat-card:first-child { grid-column: span 3; }
}
@media (max-width: 768px) {
  .insights-row { grid-template-columns: 1fr 1fr; }
  .insights-row > .stat-card:first-child { grid-column: span 2; }
}
@media (max-width: 480px) {
  .insights-row { grid-template-columns: 1fr; }
  .insights-row > .stat-card:first-child { grid-column: span 1; }
}

/* ============================================================================
   ONDA 3 — Header + Tabs em light theme (Inspira)
   ============================================================================
   Escopo cirúrgico: SO sobrescreve quando [data-theme="light"] no <html>.
   Tema dark (default) permanece intocado.

   Estrutura nova:
     <header class="app-header" role="banner">           ← full-bleed faixa azul
       <div class="app-header__inner container">         ← centraliza 1280px
         <div class="app-header__brand">                 ← eyebrow + h1 + sub
         <div class="app-header__actions">               ← Melhorias + Sair

     <nav class="nav-tabs">                              ← full-bleed cream
       <div class="nav-tabs__inner container">
         <div class="tabs">                              ← inline-flex centro
           <button class="tab"><span class="tab__label"> ← 10 abas existentes

   Fonte: design-spec-light-inspira.md §5.2 e §5.3.
   ============================================================================ */

/* ---- Body ganha bg cream-soft no light (já vem dos tokens, mas reforça) ---- */
:root[data-theme="light"] body {
  background: var(--bg-app);
  color: var(--text-secondary);
}

/* ---- HEADER full-bleed faixa azul-petroleo ---- */
:root[data-theme="light"] .app-header {
  display: block;
  background: var(--bg-header);                   /* #173C46 */
  color: var(--text-on-primary);                  /* branco */
  margin-bottom: 0;
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: var(--z-tooltip);
}

:root[data-theme="light"] .app-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-4);
  padding: var(--gap-6) var(--gap-6);
  flex-wrap: wrap;
}

:root[data-theme="light"] .app-header__brand {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  min-width: 0;
}

/* Eyebrow CAPS dourado (espelha login-eyebrow) */
:root[data-theme="light"] .app-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  margin: 0 0 var(--gap-2) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);          /* 11px */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-soft);  /* #C9A877 sobre fundo escuro */
  line-height: 1;
}

:root[data-theme="light"] .app-header__eyebrow-star {
  color: var(--color-accent-soft);
  font-size: 13px;
  line-height: 1;
}

/* Title — Fraunces 30px peso 500 cream-soft */
:root[data-theme="light"] .app-header .app-title {
  font-family: var(--font-display);            /* Fraunces */
  font-size: var(--fs-3xl);                    /* 30px */
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-cream-soft);              /* #FAF6EF */
  margin: 0;
}

/* Subtitle — Inter 14px cream-soft 75% */
:root[data-theme="light"] .app-header .app-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-3);
  margin-top: var(--gap-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);                   /* 14px */
  font-weight: 400;
  color: var(--color-cream-soft);
  opacity: 0.75;
}

/* Badge perfil — pill dourada discreta.
   WCAG AA: fundo composto eh #173C46 (bg-header) + rgba(166,135,92,0.15)
   = aproximadamente #2C4749. Texto --color-accent-soft (#C9A877)
   da contraste 4.44:1 sobre esse fundo (FAIL pra AA texto pequeno,
   exige 4.5:1). Trocado por --color-cream-soft (#FAF6EF) que da
   9.26:1 (AAA garantido). Borda gold-soft 30% mantida pra leitura. */
:root[data-theme="light"] .app-header__perfil-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);                     /* 11px */
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream-soft);              /* #FAF6EF — 9.26:1 AAA sobre fundo composto */
  background: rgba(166, 135, 92, 0.15);        /* gold 15% */
  border: 1px solid rgba(166, 135, 92, 0.30);  /* gold 30% */
  border-radius: var(--radius-pill);
  opacity: 1;                                  /* nao herda 0.75 do subtitle */
  white-space: nowrap;
  flex-shrink: 0;
}

/* Sair — link cream-soft 85% (espelha do site) */
:root[data-theme="light"] .app-header .app-logout {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-cream-soft);
  opacity: 0.85;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--gap-2) var(--gap-3);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .app-header .app-logout:hover {
  opacity: 1;
  color: var(--color-cream-soft);
  background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] .app-header .app-logout:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

/* Header actions ja existe — apenas alinha vertical no topo da brand */
:root[data-theme="light"] .app-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  flex-shrink: 0;
  margin-top: var(--gap-2);                    /* alinha com title baseline */
}

/* Melhorias no header light: borda fica cream-soft 30%, hover gold-soft */
:root[data-theme="light"] .app-header .btn-melhorias {
  color: var(--color-cream-soft);
  background: transparent;
  border: 1px solid rgba(250, 246, 239, 0.20);
  opacity: 0.85;
}
:root[data-theme="light"] .app-header .btn-melhorias:hover {
  opacity: 1;
  color: var(--color-cream-soft);
  border-color: var(--color-accent-soft);
  background: rgba(255, 255, 255, 0.06);
}
:root[data-theme="light"] .app-header .btn-melhorias--active {
  color: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
  background: rgba(166, 135, 92, 0.15);
  opacity: 1;
}
:root[data-theme="light"] .app-header .btn-melhorias:focus-visible {
  outline: 2px solid var(--color-accent-soft);
  outline-offset: 2px;
}

/* ---- TABS full-bleed faixa cream-soft ---- */
:root[data-theme="light"] .nav-tabs {
  display: block;
  background: var(--color-cream-soft);          /* #FAF6EF */
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
  position: relative;
}

:root[data-theme="light"] .nav-tabs::after {
  /* desliga o gradient fade do dark mode (era pra bg-app dark) */
  content: none;
}

:root[data-theme="light"] .nav-tabs__inner {
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--gap-6);
  position: relative;
}

:root[data-theme="light"] .nav-tabs .tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Tab base no light: Inter 14px medium, text-secondary, padding 12x16.
   min-height: 44px atende WCAG 2.5.5 (AA touch target) sem mudar o visual
   — o padding 12x16 ja entrega 40px de area visivel, e o min-height
   garante 44px de hit-area para teclado/touch no mobile. */
:root[data-theme="light"] .nav-tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 12px 16px;
  min-height: 44px;                            /* WCAG 2.5.5 AA touch target */
  font-family: var(--font-sans);
  font-size: var(--fs-base);                   /* 14px */
  font-weight: 500;
  color: var(--text-secondary);                /* #334155 */
  background: none;
  border: 0;
  border-bottom: 0;                            /* o filete vem do ::after */
  margin-bottom: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

:root[data-theme="light"] .nav-tabs .tab:hover {
  color: var(--text-primary);                  /* #173C46 */
}

:root[data-theme="light"] .nav-tabs .tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: currentColor;
}

/* Ativa: texto primary, filete dourado gradient embaixo.
   As tabs do painel sao NAVEGACAO entre views (mudam store/URL),
   nao tabs WAI-ARIA (que revelariam paineis adjacentes na mesma pagina).
   Padrao correto: <nav> + aria-current="page" na tab ativa.
   .tab--active fica como alias visual (sintonizado com Alpine :class). */
:root[data-theme="light"] .nav-tabs .tab--active,
:root[data-theme="light"] .nav-tabs .tab[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 600;
}

/* Filete dourado animado (gradient horizontal espelhando site/Header.tsx:185).
   Cada tab tem seu proprio ::after, transform scaleX(0)->scaleX(1) na ativa,
   transition em --ease-quart-out 220ms. CSS-only, zero JS. */
:root[data-theme="light"] .nav-tabs .tab::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent) 25%,
    var(--color-accent-soft) 50%,
    var(--color-accent) 75%,
    transparent 100%
  );
  opacity: 0.85;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease-quart-out);
  pointer-events: none;
}

:root[data-theme="light"] .nav-tabs .tab--active::after,
:root[data-theme="light"] .nav-tabs .tab[aria-current="page"]::after {
  transform: scaleX(1);
}

/* outline-offset POSITIVO pra anel nao ficar dentro da hit-area 40px
   (no mobile com overflow-x: auto, offset negativo recortava o foco). */
:root[data-theme="light"] .nav-tabs .tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reset do app-shell no light: header+nav ja deram o padding de cima.
   O shell continua com padding lateral pra container, mas zero no topo. */
:root[data-theme="light"] .app-shell {
  padding-top: var(--gap-6);
  background: var(--bg-app);                   /* cream-soft */
}

/* Skip-link no light: dourado sobre cream com texto branco */
:root[data-theme="light"] .skip-link {
  background: var(--color-accent);
  color: var(--text-on-accent);                /* branco */
}

/* Responsivo header */
@media (max-width: 768px) {
  :root[data-theme="light"] .app-header__inner {
    padding: var(--gap-5) var(--gap-4);
    flex-direction: column;
    align-items: flex-start;
  }
  :root[data-theme="light"] .app-header__actions {
    margin-top: var(--gap-3);
    align-self: flex-end;
  }
  :root[data-theme="light"] .app-header .app-title {
    font-size: var(--fs-2xl);                  /* 24px no mobile */
  }
  :root[data-theme="light"] .nav-tabs__inner {
    padding: 0 var(--gap-4);
  }
}

/* Reduced motion: filete some animado, vira snap (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .nav-tabs .tab::after {
    transition: none !important;
  }
  :root[data-theme="light"] .app-header .app-logout,
  :root[data-theme="light"] .app-header .btn-melhorias {
    transition: none !important;
  }
}

/* ============================================================================
   ONDA 4 , Kanban card+coluna + Modal de lead em light theme (Inspira)
   ============================================================================
   Escopo cirurgico: SO sobrescreve sob [data-theme="light"]. Dark intocado.
   Fonte de verdade: design-spec-light-inspira.md v2.1 §5.5 (Kanban) e §5.6 (Modal).

   Decisao sobre o asterisco decorativo (U+273B `✻`):
   - Onde possivel, marcado no markup como <span aria-hidden="true">✻</span>
     (.modal-section__star, .timeline-item__star). E o caminho correto p/ a11y.
   - No card do kanban (renderizado por js/kanban.js, fora do escopo desta Onda),
     o asterisco entra via ::before em .kanban-card__footer span:last-child.
     Pseudo-content e' lido por alguns screen readers , registrado como
     trade-off. Refator pra mover esse asterisco pro markup do JS pode ser
     feito em Onda futura quando tocarmos kanban.js.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   5.5 , Kanban: container + colunas
   ---------------------------------------------------------------------------- */

/* Container kanban no light: cream-soft de fundo (mesmo do app), gap 16px */
:root[data-theme="light"] .kanban {
  gap: var(--gap-4);
  padding-bottom: var(--gap-4);
}

/* Coluna: bg cream-deeper pra separar do app (cream-soft) sem precisar de
   border pesada. Mantem 250px de largura (token --kanban-col-width). */
:root[data-theme="light"] .kanban-column {
  background: var(--bg-surface-elevated);   /* #F2EADC cream-deeper */
  border: 1px solid var(--border-subtle);   /* warm #E8DFD0 */
  border-radius: var(--radius-sm);
}

/* Header da coluna: padding maior, borda warm. Title + count alinhados. */
:root[data-theme="light"] .kanban-column__header {
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border-subtle);
}

:root[data-theme="light"] .kanban-column__title {
  font-family: var(--font-sans);
  font-size: var(--fs-base);                /* 14px */
  font-weight: 600;
  color: var(--text-primary);               /* #173C46 */
  letter-spacing: -0.005em;
}

/* Count badge na header da coluna: pill warm com texto primary, peso 600.
   Pequena (11px), nao rouba foco do title. */
:root[data-theme="light"] .kanban-column__title .badge--count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--gap-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);                  /* 11px */
  font-weight: 600;
  color: var(--text-primary);
  background: var(--color-cream-soft);      /* #FAF6EF */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  letter-spacing: 0;
  text-transform: none;
}

/* Subtitle CAPS dourado discreto */
:root[data-theme="light"] .kanban-column__subtitle {
  margin-top: var(--gap-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);                  /* 11px */
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-loose);     /* 0.08em */
  line-height: 1.4;
}

/* Lista de cards: padding lateral 12px / vertical 8px, gap 8px entre cards */
:root[data-theme="light"] .kanban-column__list {
  padding: var(--gap-2) var(--gap-3) var(--gap-3);
  gap: var(--gap-2);
}

/* Empty state: italico, tertiary, centralizado */
:root[data-theme="light"] .kanban-column__empty {
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  padding: var(--gap-5) var(--gap-3);
}

/* ----------------------------------------------------------------------------
   5.5 , Kanban: card individual
   ---------------------------------------------------------------------------- */

/* Card: branco puro, border warm, shadow-card sutil, padding 12px (gap-3). */
:root[data-theme="light"] .kanban-card {
  background: var(--bg-surface);                  /* #FFFFFF */
  border: 1px solid var(--border-subtle);         /* #E8DFD0 warm */
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
  box-shadow: var(--shadow-card);
  /* transition isolada (NAO usar `all`) , Sortable controla transform.
     Inclui transform pro hover translateY (que pre-existe em transform: none
     no estado base, entao transition transform aqui nao briga com Sortable). */
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  gap: var(--gap-1);
}

/* Hover: shadow-card-hover + translateY -1px + border gold 40%.
   IMPORTANTE: o translateY nao briga com Sortable porque Sortable so aplica
   transform DURANTE drag, e nessas classes (.sortable-chosen/.sortable-drag)
   abaixo desligamos transition (transition: none) , o que ja existia no v5
   pro dark theme. Aqui mantemos o mesmo padrao. */
:root[data-theme="light"] .kanban-card:hover {
  background: var(--bg-surface);                  /* mantem branco */
  border-color: var(--color-accent-40);           /* gold 40% alpha */
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

:root[data-theme="light"] .kanban-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent-40);
}

/* Nome: Inter 14px peso 700 ink-deep */
:root[data-theme="light"] .kanban-card__name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);                      /* 14px */
  font-weight: 700;
  color: var(--text-primary);                     /* #173C46 */
  line-height: 1.3;
}

/* Telefone: Inter 12px secondary */
:root[data-theme="light"] .kanban-card__phone {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                        /* 12px */
  font-weight: 400;
  color: var(--text-secondary);                   /* #334155 */
  line-height: 1.3;
}

/* Funil tag: virou chip warm (era gold no dark). Tom mais editorial. */
:root[data-theme="light"] .kanban-card__funil {
  display: inline-block;
  align-self: flex-start;
  padding: 2px var(--gap-2);
  font-family: var(--font-sans);
  font-size: 10px;                                /* tag bem pequena */
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--color-cream-soft);            /* #FAF6EF warm */
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Tags UTM (.kanban-card__tag) , mesma paleta warm do funil */
:root[data-theme="light"] .kanban-card__tag {
  background: var(--color-cream-soft);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
  padding: 2px var(--gap-2);
  font-size: 10px;
  font-weight: 500;
}

/* Valor R$: Inter 12px peso 700 dourado-deep (#7A5F3D, AA pass sobre branco).
   gatcha #25: texto pequeno em dourado-deep, nunca em accent claro. */
:root[data-theme="light"] .kanban-card__valor {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                        /* 12px */
  font-weight: 700;
  color: var(--color-accent-deep);                /* #7A5F3D , 5.1:1 sobre #FFF */
  letter-spacing: -0.005em;
  margin-top: var(--gap-1);
}

/* Footer: hairline gold gradient como border-top (substitui border solido warm). */
:root[data-theme="light"] .kanban-card__footer {
  position: relative;
  margin-top: var(--gap-2);
  padding-top: var(--gap-2);
  border-top: 0;                                  /* remove o solido herdado */
  font-family: var(--font-sans);
  font-size: var(--fs-xs);                        /* 11px */
  font-weight: 400;
  color: var(--text-tertiary);
  justify-content: flex-start;                    /* data + ✻ + dias inline */
  gap: var(--gap-2);
}

/* Hairline: gradient transparent -> gold-20% -> transparent */
:root[data-theme="light"] .kanban-card__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-20) 50%,
    transparent 100%
  );
  pointer-events: none;
}

/* Asterisco ✻ entre data e dias.
   gatcha a11y registrado no header desta Onda: pseudo-content e' lido por
   alguns screen readers. Aceitavel pra ornamento curto; refator pode mover
   o asterisco pro markup do JS em Onda futura. `speak: none` adicionado por
   completude (deprecated mas algumas SR respeitam). */
:root[data-theme="light"] .kanban-card__footer > span:last-child::before {
  content: '\273B';
  margin-right: var(--gap-2);
  color: var(--color-accent);
  opacity: 0.6;
  font-size: 11px;
  speak: none;
}

/* Dias >7d: cor danger (sem mudar tamanho/peso). 1-7d herda --text-tertiary. */
:root[data-theme="light"] .kanban-card__dias-alert {
  color: var(--color-danger);                     /* #B23A48 */
  font-weight: 500;
}

/* Drag states no light: ghost translucido warm, drag shadow editorial */
:root[data-theme="light"] .kanban-card.sortable-ghost {
  opacity: 0.4;
  background: var(--color-accent-05);
  border-color: var(--color-accent-40);
  transition: none;
}

:root[data-theme="light"] .kanban-card.sortable-chosen {
  cursor: grabbing;
  transition: none;
}

:root[data-theme="light"] .kanban-card.sortable-drag {
  z-index: var(--z-kanban-drag);
  /* Sombra editorial (azul-petroleo translucido, nao preto puro) */
  box-shadow: 0 8px 24px -8px rgba(15, 42, 50, 0.25);
  transform: rotate(1.5deg);
  transition: none;
  border-color: var(--color-accent-40);
}

/* Drop zone: bg gold 5% + outline dashed gold 40% offset -8px */
:root[data-theme="light"] .kanban-column__list.sortable-drop-target {
  background: var(--color-accent-05);
  outline: 2px dashed var(--color-accent-40);
  outline-offset: -8px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------------------------
   5.6 , Modal de lead: overlay + container + header + footer
   ---------------------------------------------------------------------------- */

/* Overlay: azul-petroleo 45% (definido em tokens --bg-overlay no light).
   Adiciona backdrop-filter pra textura editorial quando suportado. */
:root[data-theme="light"] .modal-overlay {
  background: var(--bg-overlay);                  /* rgba(15,42,50,0.45) */
}

@supports (backdrop-filter: blur(4px)) {
  :root[data-theme="light"] .modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Container: branco puro, radius lg 8px, shadow-modal editorial */
:root[data-theme="light"] .modal-container {
  background: var(--bg-surface);                  /* #FFFFFF */
  border: 1px solid var(--border-subtle);         /* warm */
  border-radius: var(--radius-lg);                /* 8px */
  box-shadow: var(--shadow-modal);                /* 0 25px 50px -12px azul */
}

/* Header sticky: branco + borda warm + sombra discreta ao rolar */
:root[data-theme="light"] .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: var(--gap-6);
}

/* Titulo: Fraunces 30px peso 500 (nao 700 , fica pesado demais em light)
   cor gold-deep #7A5F3D. Espelha hero do site. */
:root[data-theme="light"] .modal-header__title {
  font-family: var(--font-display);               /* Fraunces */
  font-size: var(--fs-3xl);                       /* 30px */
  font-weight: 500;
  color: var(--color-accent-deep);                /* #7A5F3D */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Meta data: gold-deep com asterisco ✻ separador (substitui ·).
   O span aria-hidden=true ja existe no markup como .modal-header__meta-sep.
   Trocamos visualmente seu glyph via font-size:0 + ::before. */
:root[data-theme="light"] .modal-header__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);                        /* 12px */
  color: var(--color-accent-deep);                /* #7A5F3D */
  margin-top: var(--gap-2);
}

:root[data-theme="light"] .modal-header__meta--alert {
  color: var(--color-danger);
}

:root[data-theme="light"] .modal-header__meta-sep {
  font-size: 0;                                   /* esconde o `·` visualmente */
}

:root[data-theme="light"] .modal-header__meta-sep::before {
  content: '\273B';
  font-size: var(--fs-sm);
  color: var(--color-accent);
  opacity: 0.7;
}

/* Botao close [x]: ghost warm hover */
:root[data-theme="light"] .modal-close {
  color: var(--text-secondary);
}
:root[data-theme="light"] .modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}
:root[data-theme="light"] .modal-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Modal body padding + separacao por secao */
:root[data-theme="light"] .modal-body {
  padding: var(--gap-6);
  gap: var(--gap-6);
  background: var(--bg-surface);
}

/* Section title CAPS dourado-deep + asterisco ornamental gold no markup */
:root[data-theme="light"] .modal-section__title {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);                        /* 11px */
  font-weight: 600;
  color: var(--text-eyebrow);                     /* --color-accent-deep #7A5F3D */
  letter-spacing: var(--ls-caps);                 /* 0.18em editorial */
  text-transform: uppercase;
}

/* Asterisco no markup das section titles (e timeline). Ornamento. */
:root[data-theme="light"] .modal-section__star {
  display: inline-block;
  margin-right: var(--gap-2);
  color: var(--color-accent);
  opacity: 0.7;
  font-size: 13px;
  line-height: 1;
  /* compensar baseline do glyph U+273B */
  transform: translateY(1px);
}

/* Collapsible title hover usa primary (nao gold) */
:root[data-theme="light"] .modal-section--collapsible .modal-section__title--toggle:hover {
  color: var(--color-primary);
}

/* Inputs/textareas/selects no modal light: branco puro, border warm */
:root[data-theme="light"] .input,
:root[data-theme="light"] .textarea,
:root[data-theme="light"] .select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--color-border-warm);
}

:root[data-theme="light"] .input:hover,
:root[data-theme="light"] .textarea:hover,
:root[data-theme="light"] .select:hover {
  border-color: var(--color-border-warm-strong);
}

:root[data-theme="light"] .input:focus,
:root[data-theme="light"] .textarea:focus,
:root[data-theme="light"] .select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(166, 135, 92, 0.30);
}

:root[data-theme="light"] .input::placeholder,
:root[data-theme="light"] .textarea::placeholder {
  color: var(--text-tertiary);
}

/* field__label fica em ink-text (slate-700) , texto suporte AA */
:root[data-theme="light"] .field__label {
  color: var(--text-secondary);
  font-weight: 500;
}

/* UTM card: bg warm cream-soft + border subtle (read-only) */
:root[data-theme="light"] .utm-card {
  background: var(--color-cream-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
}
:root[data-theme="light"] .utm-card__label {
  color: var(--color-accent-deep);
  font-weight: 600;
  letter-spacing: var(--ls-caps-loose);
}
:root[data-theme="light"] .utm-card__value {
  color: var(--text-primary);
}

/* Etapa-bar (select de etapa, select de pipeline) */
:root[data-theme="light"] .etapa-bar {
  background: var(--color-cream-soft);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
:root[data-theme="light"] .etapa-bar__label {
  color: var(--color-accent-deep);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-loose);
  font-size: var(--fs-xs);
}

/* Etapa-btn: ativa = border gold 2px + bg gold 10% */
:root[data-theme="light"] .etapa-btn {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--color-border-warm);
  font-weight: 500;
}
:root[data-theme="light"] .etapa-btn:hover {
  background: var(--color-cream-soft);
  border-color: var(--color-border-warm-strong);
}
:root[data-theme="light"] .etapa-btn--active {
  border: 2px solid var(--color-accent);          /* 2px destaque */
  background: var(--color-accent-10);
  color: var(--color-accent-deep);
  font-weight: 600;
  /* compensa 1px extra do border 2px pra nao "pular" no DOM */
  padding: calc(var(--gap-3) - 1px);
}

/* Modal-tabs internas (Lead / Servicos / Historico / Origem) no light */
:root[data-theme="light"] .modal-tabs {
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 var(--gap-6);
  background: var(--bg-surface);
}
:root[data-theme="light"] .modal-tabs__btn {
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
}
:root[data-theme="light"] .modal-tabs__btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}
:root[data-theme="light"] .modal-tabs__btn--active {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
  background: var(--color-accent-05);
}

/* Temperatura pills: paleta light */
:root[data-theme="light"] .temp-pill {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--color-border-warm);
}
:root[data-theme="light"] .temp-pill:hover {
  border-color: var(--color-border-warm-strong);
  color: var(--text-primary);
}
:root[data-theme="light"] .temp-pill--active {
  border-color: var(--color-accent);
  background: var(--color-accent-10);
  color: var(--color-accent-deep);
  font-weight: 600;
}

/* Timeline (historico) no light: asterisco ✻ substitui seta. SVG escondida.
   Marker dourado opacity 0.7 , ornamental, aria-hidden ja no markup do icone. */
:root[data-theme="light"] .timeline-item__icon svg {
  display: none;
}

:root[data-theme="light"] .timeline-item__icon {
  color: var(--color-accent);
  position: relative;
  flex: 0 0 20px;
  height: 20px;
}

:root[data-theme="light"] .timeline-item__icon::before {
  content: '\273B';
  color: var(--color-accent);
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
  speak: none;
}

:root[data-theme="light"] .timeline-item__text {
  color: var(--text-primary);
  font-size: 13px;
  line-height: var(--lh-snug);
}

:root[data-theme="light"] .timeline-item__meta {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
}

/* Timeline-input no light: input branco + btn-icon ghost warm */
:root[data-theme="light"] .timeline-input .input {
  background: var(--bg-surface);
}

/* Footer sticky: branco + borda warm em cima.
   "Excluir lead" link danger esquerda + Cancelar ghost + Salvar primary. */
:root[data-theme="light"] .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  padding: var(--gap-4) var(--gap-6);
}

:root[data-theme="light"] .danger-link {
  color: var(--color-danger);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .danger-link:hover {
  color: var(--color-danger);
  background: rgba(178, 58, 72, 0.08);
}
:root[data-theme="light"] .danger-link:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

/* Animacao de abertura: container scale 0.96 -> 1 + opacity 0 -> 1 (220ms ease-out)
   Reaproveita keyframe modalContainerIn que ja existe.
   Overlay: x-transition.opacity do Alpine cuida do fade 150ms.
   prefers-reduced-motion zera tudo via bloco global em tokens.css. */
:root[data-theme="light"] .modal-container {
  animation: modalContainerIn var(--duration-base) var(--ease-out);
}

/* btn-primary no light (Salvar): bg ink-deep + texto branco (8.6:1 AAA).
   AA garantida e tom editorial sobre o gold ornamental do header. */
:root[data-theme="light"] .modal-footer .btn-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border: 1px solid var(--color-primary);
}
:root[data-theme="light"] .modal-footer .btn-primary:hover {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}
:root[data-theme="light"] .modal-footer .btn-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:root[data-theme="light"] .modal-footer .btn-ghost {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-warm);
}
:root[data-theme="light"] .modal-footer .btn-ghost:hover {
  color: var(--text-primary);
  background: var(--color-cream-soft);
  border-color: var(--color-border-warm-strong);
}

/* btn no header do modal (Salvar pequeno no header__actions) , mesmo padrao */
:root[data-theme="light"] .modal-header__actions .btn-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border: 1px solid var(--color-primary);
}
:root[data-theme="light"] .modal-header__actions .btn-primary:hover {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

/* Responsivo modal: mobile full-screen, header/footer perdem radius */
@media (max-width: 640px) {
  :root[data-theme="light"] .modal-container {
    border-radius: 0;
    min-height: 100vh;
  }
  :root[data-theme="light"] .modal-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  :root[data-theme="light"] .modal-footer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  :root[data-theme="light"] .modal-header__title {
    font-size: var(--fs-2xl);                    /* 24px */
  }
  :root[data-theme="light"] .kanban-column {
    /* mantem 250px e scroll horizontal , ja vem do .kanban */
  }
}

/* prefers-reduced-motion: desliga hover translateY do card + animacao do modal */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .kanban-card,
  :root[data-theme="light"] .kanban-card:hover {
    transform: none !important;
    transition: none !important;
  }
  :root[data-theme="light"] .modal-container {
    animation: none !important;
  }
}

/* ============================================================================
   ONDA 5 , Stat-cards em formato "manchete editorial" (light Inspira)
   ============================================================================
   Escopo cirurgico: SO sobrescreve sob [data-theme="light"]. Dark intocado.
   Fonte de verdade: design-spec-light-inspira.md v2.1 §5.3 (dashboard manchete)
   e §5.4 (filtro periodo HOJE/SEMANA/MES/TOTAL).

   Variantes:
   - .stat-card base (light): eyebrow CAPS gold-deep + value Fraunces 32/500.
     Aplicado a TODOS .stat-card sob light (filtro do kanban, KPIs financeiros,
     ranking de servicos, webhook stats, etc).
   - .stat-card--editorial: variante "manchete" pro Dashboard tab (3 cards
     EM NEGOCIACAO / FECHADO GANHO / FECHADO PERDIDO). Adiciona:
       - asterisco ✻ no eyebrow via <span.stat-card__star aria-hidden="true">
       - gold-rule 48x1px embaixo do value (pseudo-element ::after)
       - reserva visual maior (padding 24px)
   - .stat-card__trend: SVG inline antes do value (cor herda do value, success
     ou danger). So usado em ganho/perdido.

   Asterisco no markup (NAO em ::before) pra a11y consistente com Onda 4.

   Constraints:
   - Sem hardcodes de cor/spacing , so tokens.
   - Sem em-dashes.
   - Sem efeito "SaaS": editorial flat, hover sutil (translateY -1px +
     shadow-card-hover). Sem brilho colorido.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   §5.4 + base , stat-card filtro periodo (HOJE/SEMANA/MES/TOTAL)
   Tambem serve de base pros KPIs financeiros do dashboard.
   ---------------------------------------------------------------------------- */

/* Container: branco + border warm + radius-sm + shadow-card (light precisa
   relevo pra separar do bg cream-soft do app). Padding 20px (gap-5) na variante
   base; editorial sobe pra 24px (gap-6). */
:root[data-theme="light"] .stat-card {
  background: var(--bg-surface);                /* #FFFFFF */
  border: 1px solid var(--color-border-warm);   /* #E8DFD0 */
  border-radius: var(--radius-sm);              /* 4px */
  padding: var(--gap-5);                        /* 20px */
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

/* Hover editorial: shadow-card-hover + translateY(-1px). Bg fica em
   cream-soft (#FAF6EF) , um tom de respiro sem brigar com o branco. */
:root[data-theme="light"] .stat-card:hover {
  border-color: var(--color-border-warm-strong);
  background: var(--color-cream-soft);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

/* Active (filtro selecionado): border accent + bg accent-05.
   Mantem padding/shadow do hover. */
:root[data-theme="light"] .stat-card--active {
  border-color: var(--color-accent);
  background: var(--color-accent-05);
  box-shadow: var(--shadow-card-hover);
}
:root[data-theme="light"] .stat-card--active:hover {
  background: var(--color-accent-10);
}

/* Focus visivel pra teclado (cards sao botoes no CRM tab) */
:root[data-theme="light"] .stat-card[role="button"]:focus-visible,
:root[data-theme="light"] button.stat-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Eyebrow CAPS gold-deep Inter 11px peso 600 letter-spacing 0.14em.
   --ls-caps no light vale 0.18em (oversweep do tracking editorial), mas
   pro stat-card de 11px isso sufoca legibilidade. Fixo 0.14em conforme
   spec §5.3 da Onda 5 (tighter que o modal). */
:root[data-theme="light"] .stat-card__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-eyebrow);                   /* #7A5F3D */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: var(--gap-3);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
}

/* Asterisco floral no eyebrow , markup: <span class="stat-card__star"
   aria-hidden="true">✻</span>. Cor accent puro (ornamento nao-textual). */
:root[data-theme="light"] .stat-card__star {
  display: inline-block;
  color: var(--color-accent);                   /* #A6875C */
  font-size: 11px;
  line-height: 1;
  opacity: 0.85;
  /* compensar baseline do glyph U+273B */
  transform: translateY(1px);
}

/* Value: Fraunces 32px peso 500 ink-deep (azul-petroleo). Substitui o
   fw-bold do tema dark , editorial pede peso medio pra respirar. */
:root[data-theme="light"] .stat-card__value {
  font-family: var(--font-display);             /* Fraunces no light */
  font-size: var(--fs-stat);                    /* 32px */
  font-weight: 500;
  color: var(--text-primary);                   /* #173C46 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: var(--gap-2);
}

/* Modificadores de cor pro value */
:root[data-theme="light"] .stat-card__value--accent  { color: var(--color-accent-deep); }   /* petroleo */
:root[data-theme="light"] .stat-card__value--success { color: var(--color-success-text); }  /* #166534 (era fill) */
:root[data-theme="light"] .stat-card__value--danger  { color: var(--color-danger-text); }   /* #B91C1C (era fill) */

/* Subtitulo: Inter 12px text-secondary, prosa curta */
:root[data-theme="light"] .stat-card__sub {
  margin-top: var(--gap-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ----------------------------------------------------------------------------
   §5.3 , Variante "manchete editorial" (3 cards do Dashboard tab)
   ---------------------------------------------------------------------------- */

/* Padding maior + gold-rule embaixo do value via ::after */
:root[data-theme="light"] .stat-card--editorial {
  padding: var(--gap-6);                        /* 24px */
  /* Layout em coluna pra controlar gold-rule entre value e subtitle */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Gold-rule horizontal: gradient sutil transparent -> gold -> transparent.
   48px de largura, 1px de altura. Aparece entre value e subtitle.
   Inserida como elemento separado via ::after no value pra nao precisar
   alterar markup demais. */
:root[data-theme="light"] .stat-card--editorial .stat-card__value::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: var(--gap-3);                     /* 12px */
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-accent) 50%,
    transparent 100%
  );
  /* opacity 0.6 pra ficar discreto, espelha .hairline-gold da spec §9.2 */
  opacity: 0.7;
}

/* Subtitle ganha margem-top menor (gold-rule ja deu o respiro) */
:root[data-theme="light"] .stat-card--editorial .stat-card__sub {
  margin-top: var(--gap-3);                     /* 12px , consistente com rule */
}

/* SVG trend (TrendingUp/TrendingDown) inline antes do value. Cor herda
   do .stat-card__value (currentColor), tamanho proporcional ao 32px do
   value sem dominar (18px). */
:root[data-theme="light"] .stat-card__trend {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
  /* alinhar com baseline visual do Fraunces 32px */
  transform: translateY(-2px);
}

/* Garantir que o value::after fique abaixo do flex line do value+trend.
   Como flex-direction do parent value e' baseline-inline, o ::after vira
   "filho" dentro da linha. Quebra usando display:block + width 100% trick: */
:root[data-theme="light"] .stat-card--editorial .stat-card__value {
  flex-wrap: wrap;
  width: 100%;
}

/* ----------------------------------------------------------------------------
   Compatibilidade com markups antigos (insights-row, webhook stats)
   ---------------------------------------------------------------------------- */

/* Quando o label antigo combina .stat-card__icon + .stat-card__label
   (ex: KPIs financeiros do dashboard que usam SVG inline antes do texto),
   o icone permanece mas ganha cor accent-deep pra harmonizar. */
:root[data-theme="light"] .stat-card__label.stat-card__icon svg,
:root[data-theme="light"] .stat-card__icon svg {
  width: 12px;
  height: 12px;
  color: var(--text-eyebrow);
  flex-shrink: 0;
}

/* Mobile (<= 480px): editorial card empilha, value desce pra 28px pra caber */
@media (max-width: 480px) {
  :root[data-theme="light"] .stat-card--editorial {
    padding: var(--gap-5);                      /* 20px */
  }
  :root[data-theme="light"] .stat-card--editorial .stat-card__value {
    font-size: 28px;
  }
  :root[data-theme="light"] .stat-card__trend {
    width: 18px;
    height: 18px;
  }
}

/* prefers-reduced-motion: zera hover translate + transitions */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .stat-card,
  :root[data-theme="light"] .stat-card:hover {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   ONDA 6 — Refinamento Tabelas + Modal Confirm + Atalhos + Skeleton + Dirty
   ============================================================================
   Fonte: design-spec-light-inspira.md v2.1 §5.7 (tabela CRM), §5.8 (usuarios)
   + gap-list "Onda 6". Tudo em [data-theme="light"]. Dark intocado.

   Blocos:
     §6.1 Tabela CRM (light editorial)
     §6.2 Tab Usuarios (mesma estetica + select inline)
     §6.3 Confirm Modal (singleton)
     §6.4 Dirty badge (modal de lead)
     §6.5 Atalhos de teclado (kbd + modal de ajuda)
     §6.6 Skeleton kanban (shimmer)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   §6.1 — Tabela CRM em light editorial
   ---------------------------------------------------------------------------- */

/* Container do card que envolve a table: garante radius + border warm + bg branco */
:root[data-theme="light"] .table-leads,
:root[data-theme="light"] .table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);                  /* #FFFFFF */
  font-family: var(--font-sans);                  /* Inter */
}

/* Header: bg cream-soft, border warm, CAPS dourado-deep 11px letter-spacing */
:root[data-theme="light"] .table__head th,
:root[data-theme="light"] .table thead th,
:root[data-theme="light"] .table-leads thead th {
  background: var(--bg-app);                      /* #FAF6EF cream-soft */
  color: var(--text-eyebrow);                     /* #7A5F3D gold-deep AA */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-loose);           /* 0.08em */
  text-align: left;
  padding: var(--gap-3) var(--gap-4);             /* 12px 16px */
  border-bottom: 1px solid var(--color-border-warm);
  border-top: 0;
}

/* Linha: bg branco, border-bottom subtle, transicao suave de hover */
:root[data-theme="light"] .table__row,
:root[data-theme="light"] .table tbody tr,
:root[data-theme="light"] .table-leads tbody tr {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);  /* #E8DFD0 */
  transition: background-color var(--duration-fast) var(--ease-out);
}

:root[data-theme="light"] .table__row:last-child,
:root[data-theme="light"] .table tbody tr:last-child {
  border-bottom: 0;
}

/* Hover sutil: cream-deeper translucido pra dar relevo sem berrar */
:root[data-theme="light"] .table__row:hover,
:root[data-theme="light"] .table tbody tr:hover,
:root[data-theme="light"] .table-leads tbody tr:hover {
  background: rgba(242, 234, 220, 0.55);          /* cream-deeper @55% */
  cursor: pointer;
}

/* Linhas que NAO sao clicaveis (ex: empty-state) nao mostram cursor pointer */
:root[data-theme="light"] .table tbody tr.no-hover:hover,
:root[data-theme="light"] .table tbody tr:has(td.empty-state):hover {
  background: var(--bg-surface);
  cursor: default;
}

/* Foco visivel pra navegacao por teclado */
:root[data-theme="light"] .table__row:focus-visible,
:root[data-theme="light"] .table tbody tr[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  background: rgba(166, 135, 92, 0.06);
}

/* Celulas: padding consistente, color ink-text body */
:root[data-theme="light"] .table td,
:root[data-theme="light"] .table-leads td {
  padding: var(--gap-3) var(--gap-4);             /* 12px 16px */
  color: var(--text-secondary);                   /* slate-700 */
  font-size: var(--fs-base);                      /* 14px */
  vertical-align: middle;
}

/* Nome do lead na 1a coluna: peso 500 ink-deep (chama atencao) */
:root[data-theme="light"] .table__cell-name,
:root[data-theme="light"] .table-leads td .table__cell-name {
  display: block;
  font-weight: 500;
  color: var(--text-primary);                     /* #173C46 */
  font-size: var(--fs-base);
  line-height: 1.3;
}

/* Email + meta de baixo: menor, secondary, asterisco separador opcional */
:root[data-theme="light"] .table__cell-email,
:root[data-theme="light"] .table-leads td .table__cell-email {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Separador interpunct entre celulas combinadas (decorativo).
   U+00B7 (·) e universalmente reconhecido como separador e screen readers
   nao o anunciam, diferente do U+273B (✻) que era lido como "estrela". */
:root[data-theme="light"] .table__cell-sep::before {
  content: " · ";
  color: var(--color-accent);
  opacity: 0.55;
  margin: 0 var(--gap-1);
}

/* Botao WhatsApp na tabela: verde editorial + ghost no idle, fill no hover */
:root[data-theme="light"] .table .btn-whatsapp,
:root[data-theme="light"] .table-leads .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-success-text, #166534);      /* texto verde escuro 7:1 AAA (era --color-success vivo 3.3:1) */
  border: 1px solid var(--color-success);          /* borda verde vivo #16A34A ~3.3:1 (>=3 UI) */
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

:root[data-theme="light"] .table .btn-whatsapp:hover,
:root[data-theme="light"] .table-leads .btn-whatsapp:hover {
  background: var(--color-success-text, #166534);  /* fill verde escuro: branco = 7:1 AAA */
  color: #fff;
}

:root[data-theme="light"] .table .btn-whatsapp:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:root[data-theme="light"] .table .btn-whatsapp svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Empty state da tabela: italic centralizado, sem cursor */
:root[data-theme="light"] .table td.empty-state {
  padding: var(--gap-8) var(--gap-4);             /* 32px 16px */
  text-align: center;
  font-style: italic;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--bg-surface);
}

/* Card wrapper da table: bg cream-deeper + border warm + radius, sem padding
   (a tabela ja tem padding nas celulas). Garante visual de "ilha". */
:root[data-theme="light"] .card:has(> .table),
:root[data-theme="light"] .card:has(> .table-leads) {
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  overflow: hidden;                                /* corner radius respeitado */
}

/* ----------------------------------------------------------------------------
   §6.2 — Tab Usuarios: header + tabela + select inline + acoes
   ---------------------------------------------------------------------------- */

/* Header "X usuarios cadastrados": eyebrow style CAPS gold-deep */
:root[data-theme="light"] section[aria-label="Aba Usuários"] .row-between .stat-card__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps-loose);            /* 0.08em */
  text-transform: uppercase;
  color: var(--text-eyebrow);                      /* #7A5F3D */
}

/* btn-icon: ghost com SVG accent-deep idle, primary no hover. Acessivel 36px desktop, 44px touch (WCAG 2.5.5/2.5.8) */
:root[data-theme="light"] .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  padding: 0;
}

:root[data-theme="light"] .btn-icon svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

:root[data-theme="light"] .btn-icon:hover {
  background: var(--color-accent-10);
  color: var(--color-accent-deep);
  border-color: var(--color-border-warm);
}

:root[data-theme="light"] .btn-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:root[data-theme="light"] .btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Touch devices (sem hover): garante area de toque >= 44px (WCAG 2.5.5) */
@media (hover: none) {
  :root[data-theme="light"] .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* btn-icon variante perigosa (excluir): no hover vira vermelho */
:root[data-theme="light"] .btn-icon[aria-label*="Excluir"]:hover,
:root[data-theme="light"] .btn-icon[title*="Excluir"]:hover {
  background: rgba(178, 58, 72, 0.10);
  color: var(--color-danger);
}

/* Badge "voce" do user logado: discreto */
:root[data-theme="light"] .badge--accent {
  background: var(--color-accent-10);
  color: var(--color-accent-deep);
  border: 1px solid var(--color-accent-20);
}

/* ----------------------------------------------------------------------------
   §6.3 — Confirm Modal (singleton, substitui window.confirm())
   ---------------------------------------------------------------------------- */

/* Overlay: azul-petroleo 45%, mesmo do modal de lead */
.confirm-modal__overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay, rgba(15, 42, 50, 0.45));
  z-index: var(--z-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-4);
}

/* Container: 480px max, branco, radius lg, sombra do modal padrao */
:root[data-theme="light"] .confirm-modal__container,
.confirm-modal__container {
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface, #FFFFFF);
  border: 1px solid var(--color-border-warm, #E8DFD0);
  border-radius: var(--radius-lg);                 /* 8px */
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header: padding generoso, ícone + título flex baseline */
:root[data-theme="light"] .confirm-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
  padding: var(--gap-6) var(--gap-6) var(--gap-3);  /* 24/24/12 */
}

:root[data-theme="light"] .confirm-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Variante primary: ícone info dourado */
:root[data-theme="light"] .confirm-modal__icon--primary {
  background: var(--color-accent-10);
  color: var(--color-accent-deep);
}

/* Variante danger: ícone alerta vermelho institucional */
:root[data-theme="light"] .confirm-modal__icon--danger {
  background: rgba(178, 58, 72, 0.12);
  color: var(--color-danger);
}

/* Título: Fraunces 22px peso 500 ink-deep (editorial, lê grande mas sóbrio) */
:root[data-theme="light"] .confirm-modal__title {
  font-family: var(--font-display);                /* Fraunces */
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-tight, -0.015em);
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

/* Body: padding lateral consistente, mensagem 14px secondary */
:root[data-theme="light"] .confirm-modal__body {
  padding: 0 var(--gap-6) var(--gap-5);            /* 0/24/20 */
}

:root[data-theme="light"] .confirm-modal__message {
  font-family: var(--font-sans);
  font-size: var(--fs-base);                       /* 14px */
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* Footer: cream-soft bar com botoes alinhados a direita */
:root[data-theme="light"] .confirm-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-3);
  padding: var(--gap-4) var(--gap-6);              /* 16/24 */
  background: var(--bg-app);                       /* cream-soft */
  border-top: 1px solid var(--color-border-warm);
}

/* btn-danger fallback (caso .btn-danger nao exista no theme):
   variante de btn-primary com bg vermelho institucional */
:root[data-theme="light"] .btn-danger,
:root[data-theme="light"] .btn.btn-danger {
  background: var(--color-danger);
  color: var(--text-on-primary);                   /* branco */
  border: 1px solid var(--color-danger);
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 8px 16px;
  font-size: var(--fs-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

:root[data-theme="light"] .btn-danger:hover,
:root[data-theme="light"] .btn.btn-danger:hover {
  background: #9A2F3C;                             /* danger -10% lum */
  border-color: #9A2F3C;
}

:root[data-theme="light"] .btn-danger:focus-visible,
:root[data-theme="light"] .btn.btn-danger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Mobile: padding reduzido, mensagem em 13px pra caber */
@media (max-width: 480px) {
  :root[data-theme="light"] .confirm-modal__header {
    padding: var(--gap-5) var(--gap-5) var(--gap-3);
  }
  :root[data-theme="light"] .confirm-modal__body {
    padding: 0 var(--gap-5) var(--gap-4);
  }
  :root[data-theme="light"] .confirm-modal__footer {
    padding: var(--gap-3) var(--gap-5);
    flex-wrap: wrap;
  }
  :root[data-theme="light"] .confirm-modal__title {
    font-size: 20px;
  }
}

/* ----------------------------------------------------------------------------
   §6.4 — Dirty Badge no header do modal de lead
   ---------------------------------------------------------------------------- */

/* Badge "Alteracoes pendentes": cream warm + dourado pulsante */
:root[data-theme="light"] .dirty-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 3px 10px;
  margin-top: var(--gap-2);
  background: var(--color-cream);                  /* #FAF1E1 champanhe */
  border: 1px solid var(--color-accent-40);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-caps-loose);            /* 0.08em */
  text-transform: uppercase;
  color: var(--text-eyebrow);                      /* #7A5F3D */
  width: max-content;
}

:root[data-theme="light"] .dirty-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  animation: dirty-pulse 2s ease-in-out infinite;
}

@keyframes dirty-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1.0; transform: scale(1.0);  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .dirty-badge__dot {
    animation: none;
    opacity: 1;
  }
}

/* ----------------------------------------------------------------------------
   §6.5 — Atalhos de teclado: kbd tags + modal de ajuda
   ---------------------------------------------------------------------------- */

/* kbd tag: estilo Mac (chiclete sutil, fonte mono, borda warm) */
:root[data-theme="light"] .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--bg-app);                       /* cream-soft */
  border: 1px solid var(--color-border-warm);
  border-bottom-width: 2px;                        /* sombra de baixo, Mac-style */
  border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  box-shadow: 0 1px 0 var(--color-border-warm-strong, #D4C5A8) inset;
}

/* Overlay do modal de ajuda */
.atalhos-help__overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay, rgba(15, 42, 50, 0.45));
  z-index: var(--z-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-4);
}

:root[data-theme="light"] .atalhos-help__container {
  width: 100%;
  max-width: 480px;
  background: var(--bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

:root[data-theme="light"] .atalhos-help__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-3);
  padding: var(--gap-5) var(--gap-6) var(--gap-3);
  border-bottom: 1px solid var(--color-border-warm);
}

:root[data-theme="light"] .atalhos-help__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-caps, 0.18em);
  text-transform: uppercase;
  color: var(--color-accent);
}

:root[data-theme="light"] .atalhos-help__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: var(--ls-tight, -0.015em);
  color: var(--text-primary);
}

:root[data-theme="light"] .atalhos-help__body {
  padding: var(--gap-5) var(--gap-6) var(--gap-6);
}

:root[data-theme="light"] .atalhos-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gap-3);
}

:root[data-theme="light"] .atalhos-help__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  padding: var(--gap-2) 0;
  border-bottom: 1px dashed var(--border-subtle);
}

:root[data-theme="light"] .atalhos-help__row:last-child {
  border-bottom: 0;
}

:root[data-theme="light"] .atalhos-help__keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

:root[data-theme="light"] .atalhos-help__plus {
  margin: 0 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-tertiary);
}

:root[data-theme="light"] .atalhos-help__desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
}

:root[data-theme="light"] .atalhos-help__hint {
  margin: var(--gap-4) 0 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-style: italic;
  color: var(--text-tertiary);
  line-height: 1.4;
}

@media (max-width: 480px) {
  :root[data-theme="light"] .atalhos-help__header,
  :root[data-theme="light"] .atalhos-help__body {
    padding-left: var(--gap-5);
    padding-right: var(--gap-5);
  }
  :root[data-theme="light"] .atalhos-help__row {
    flex-wrap: wrap;
    gap: var(--gap-2);
  }
  :root[data-theme="light"] .atalhos-help__desc {
    text-align: left;
  }
}

/* ----------------------------------------------------------------------------
   §6.6 — Skeleton do kanban (shimmer warm)
   ---------------------------------------------------------------------------- */

/* Grid igual ao kanban real pro skeleton casar perfeito */
:root[data-theme="light"] .kanban--skeleton {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--kanban-col-width);
  gap: var(--gap-4);
  overflow-x: auto;
  padding: var(--gap-4) 0;
  scroll-snap-type: x proximity;
}

:root[data-theme="light"] .kanban-column--skeleton {
  background: var(--bg-surface-elevated);          /* cream-deeper */
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  padding: var(--gap-3);
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  min-height: 320px;
}

:root[data-theme="light"] .kanban-card--skeleton {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  min-height: 76px;
  /* Sem hover, sem cursor — visualmente "esperando" */
  pointer-events: none;
}

/* Barras do skeleton: gradiente warm com animacao shimmer */
:root[data-theme="light"] .kanban-skeleton-bar {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--color-cream-deeper) 0%,
    var(--color-accent-10) 40%,
    var(--color-cream-deeper) 80%
  );
  background-size: 200% 100%;
  animation: shimmer-warm 1.6s ease-in-out infinite;
}

:root[data-theme="light"] .kanban-skeleton-bar--title  { width: 60%; height: 12px; }
:root[data-theme="light"] .kanban-skeleton-bar--sub    { width: 40%; height: 8px;  margin-top: 2px; }
:root[data-theme="light"] .kanban-skeleton-bar--name   { width: 80%; height: 12px; }
:root[data-theme="light"] .kanban-skeleton-bar--phone  { width: 55%; height: 9px;  }
:root[data-theme="light"] .kanban-skeleton-bar--footer { width: 70%; height: 8px;  margin-top: var(--gap-1); }

@keyframes shimmer-warm {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .kanban-skeleton-bar {
    animation: none;
    background: var(--color-cream-deeper);
  }
}

/* ============================================================================
   Fim ONDA 6
   ============================================================================ */