/* ============================================================================
   onda-7d.css , pente fino visual completo (4 fases num arquivo)
   ============================================================================
   Carregado APOS onda-7b.css. Sobrescreve/estende sob [data-theme="light"]
   sem tocar dark (uelicon/MCK legado).

   Resolve queixas Gustavo 2026-05-26 (auditoria):
     - 253 inline styles -> utilities + componentes -7d
     - 3 implementacoes de temperatura (.temp-stat/.temp-pill/.badge--*)
       -> 1: .badge-unified com variants
     - .svc-table tímida -> .svc-table-7d com thead cream-2 + hover row
     - Stat cards sem altura uniforme -> .stat-card-7d (min-h: 144)
     - Botoes/inputs/badges/cards padronizados via tokens novos
     - SVGs uniformes (stroke-width 2, linecap/linejoin round, tamanhos
       canonicos 14/16/18/20/24)

   Padrao de cascade: tokens.css -> components.css -> tracking.css ->
                     onda-7b.css -> ONDA-7D.CSS (atual). Sem !important.
   ============================================================================ */

/* ============================================================================
   1) UTILITIES , layout primitives, gap/margin scale, semantic helpers
   ============================================================================
   Substituem 200+ inline `style="display: flex; ..."` no index.html.
   Naming: u-* curto, agressivo no escopo light (NAO afeta dark).
   ============================================================================ */
:root[data-theme="light"] .u-row {
  display: flex;
  align-items: center;
}
:root[data-theme="light"] .u-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:root[data-theme="light"] .u-row-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
:root[data-theme="light"] .u-row-start {
  display: flex;
  align-items: flex-start;
}
/* row-baseline = override de align-items pra baseline (texto magro com number grande) */
:root[data-theme="light"] .u-row-baseline { align-items: baseline; }
:root[data-theme="light"] .u-col {
  display: flex;
  flex-direction: column;
}

:root[data-theme="light"] .u-gap-0 { gap: 0; }
:root[data-theme="light"] .u-gap-1 { gap: var(--gap-1); }
:root[data-theme="light"] .u-gap-2 { gap: var(--gap-2); }
:root[data-theme="light"] .u-gap-3 { gap: var(--gap-3); }
:root[data-theme="light"] .u-gap-4 { gap: var(--gap-4); }
:root[data-theme="light"] .u-gap-5 { gap: var(--gap-5); }
:root[data-theme="light"] .u-gap-6 { gap: var(--gap-6); }

:root[data-theme="light"] .u-mt-0 { margin-top: 0; }
:root[data-theme="light"] .u-mt-1 { margin-top: var(--gap-1); }
:root[data-theme="light"] .u-mt-2 { margin-top: var(--gap-2); }
:root[data-theme="light"] .u-mt-3 { margin-top: var(--gap-3); }
:root[data-theme="light"] .u-mt-4 { margin-top: var(--gap-4); }
:root[data-theme="light"] .u-mt-5 { margin-top: var(--gap-5); }
:root[data-theme="light"] .u-mt-6 { margin-top: var(--gap-6); }

:root[data-theme="light"] .u-mb-0 { margin-bottom: 0; }
:root[data-theme="light"] .u-m-0  { margin: 0; }
:root[data-theme="light"] .u-mb-1 { margin-bottom: var(--gap-1); }
:root[data-theme="light"] .u-mb-2 { margin-bottom: var(--gap-2); }
:root[data-theme="light"] .u-mb-3 { margin-bottom: var(--gap-3); }
:root[data-theme="light"] .u-mb-4 { margin-bottom: var(--gap-4); }
:root[data-theme="light"] .u-mb-5 { margin-bottom: var(--gap-5); }
:root[data-theme="light"] .u-mb-6 { margin-bottom: var(--gap-6); }

:root[data-theme="light"] .u-ml-auto { margin-left: auto; }
:root[data-theme="light"] .u-mr-auto { margin-right: auto; }
:root[data-theme="light"] .u-ml-1    { margin-left: var(--gap-1); }
:root[data-theme="light"] .u-ml-2    { margin-left: var(--gap-2); }

:root[data-theme="light"] .u-pad-0 { padding: 0; }
:root[data-theme="light"] .u-pad-card { padding: var(--card-pad); }
:root[data-theme="light"] .u-overflow-hidden { overflow: hidden; }

:root[data-theme="light"] .u-wrap { flex-wrap: wrap; }
:root[data-theme="light"] .u-nowrap { flex-wrap: nowrap; }
:root[data-theme="light"] .u-pointer { cursor: pointer; }

:root[data-theme="light"] .u-flex-1 { flex: 1 1 0%; }
:root[data-theme="light"] .u-flex-grow { flex-grow: 1; }
:root[data-theme="light"] .u-spacer { flex: 1; }

:root[data-theme="light"] .u-min-w-0   { min-width: 0; }
:root[data-theme="light"] .u-min-w-160 { min-width: 160px; }
:root[data-theme="light"] .u-min-w-200 { min-width: 200px; }
:root[data-theme="light"] .u-min-w-220 { min-width: 220px; }

:root[data-theme="light"] .u-max-w-130 { max-width: 130px; }
:root[data-theme="light"] .u-max-w-140 { max-width: 140px; }
:root[data-theme="light"] .u-max-w-240 { max-width: 240px; }

:root[data-theme="light"] .u-text-center  { text-align: center; }
:root[data-theme="light"] .u-text-right   { text-align: right; }
:root[data-theme="light"] .u-text-left    { text-align: left; }

:root[data-theme="light"] .u-text-secondary { color: var(--text-secondary); }
:root[data-theme="light"] .u-text-tertiary  { color: var(--text-tertiary); }
:root[data-theme="light"] .u-text-primary   { color: var(--text-primary); }
:root[data-theme="light"] .u-text-accent    { color: var(--color-accent); }
:root[data-theme="light"] .u-text-danger    { color: var(--color-danger-text); }   /* #B91C1C AAA-ish (era fill) */
:root[data-theme="light"] .u-text-success   { color: var(--color-success-text); }  /* #166534 (era fill 3.4:1) */
:root[data-theme="light"] .u-text-warning   { color: var(--color-warning); }       /* #92400E AAA */

:root[data-theme="light"] .u-fs-xs   { font-size: var(--fs-xs); }
:root[data-theme="light"] .u-fs-sm   { font-size: var(--fs-sm); }
:root[data-theme="light"] .u-fs-base { font-size: var(--fs-base); }
:root[data-theme="light"] .u-fs-md   { font-size: var(--fs-md); }
:root[data-theme="light"] .u-fs-lg   { font-size: var(--fs-lg); }
:root[data-theme="light"] .u-fs-xl   { font-size: var(--fs-xl); }
:root[data-theme="light"] .u-fs-2xl  { font-size: var(--fs-2xl); }

:root[data-theme="light"] .u-fw-medium { font-weight: var(--fw-medium); }
:root[data-theme="light"] .u-fw-bold   { font-weight: var(--fw-bold); }

:root[data-theme="light"] .u-no-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

:root[data-theme="light"] .u-divider-v {
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 var(--gap-2);
  display: inline-block;
}

/* Border-left accent (rail visual) -- usa em cards de alerta */
:root[data-theme="light"] .u-rail-danger {
  border-left: 3px solid var(--color-danger);
}
:root[data-theme="light"] .u-rail-accent {
  border-left: 3px solid var(--color-accent);
}

/* Helper: layout helpers ex-style block (row/row-between/toolbar/empty-state/toast etc) */
:root[data-theme="light"] [x-cloak] { display: none !important; }
:root[data-theme="light"] .row {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}
:root[data-theme="light"] .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  flex-wrap: wrap;
}
:root[data-theme="light"] .toolbar {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-bottom: var(--gap-4);
}
:root[data-theme="light"] .toolbar > .search { flex: 1 1 280px; min-width: 220px; }
:root[data-theme="light"] .toolbar--align-bottom { align-items: flex-end; }
:root[data-theme="light"] .grid-rankings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-4);
}
@media (max-width: 900px) {
  :root[data-theme="light"] .grid-rankings { grid-template-columns: 1fr; }
}
:root[data-theme="light"] .ranking-bar {
  position: relative;
  height: 8px;
  background: var(--color-white-05);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 6px;
}
:root[data-theme="light"] .ranking-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}
:root[data-theme="light"] .ranking-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}
:root[data-theme="light"] .ranking-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}
:root[data-theme="light"] .empty-state {
  padding: var(--gap-6);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}
:root[data-theme="light"] .toast-region {
  position: fixed;
  right: var(--gap-4);
  bottom: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  z-index: var(--z-toast);
  max-width: 360px;
}
:root[data-theme="light"] .toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--gap-3) var(--gap-4);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-modal);
  border-left: 3px solid var(--color-accent);
}
:root[data-theme="light"] .toast--error   { border-left-color: var(--color-danger); }
:root[data-theme="light"] .toast--success { border-left-color: var(--color-success); }
:root[data-theme="light"] .stat-card[role="button"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}
:root[data-theme="light"] .logo-img {
  width: 110px;
  height: 32px;
  display: block;
}
:root[data-theme="light"] .header-brand {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}
:root[data-theme="light"] .chart-container {
  position: relative;
  height: 320px;
}
:root[data-theme="light"] .danger-link {
  color: var(--color-danger);
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: var(--fw-medium);
  padding: var(--gap-2);
  border-radius: var(--radius-sm);
}
:root[data-theme="light"] .danger-link:hover { background: rgba(220, 38, 38, 0.10); }
:root[data-theme="light"] .table-leads td .badge { vertical-align: middle; }
:root[data-theme="light"] .min-h-app {
  min-height: 100vh;
  min-height: 100svh;
}
:root[data-theme="light"] .filtro-periodo {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}
:root[data-theme="light"] .filtro-periodo .input { min-width: 0; }
:root[data-theme="light"] .nav-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
}
@media (max-width: 480px) {
  :root[data-theme="light"] .header-brand { gap: var(--gap-3); }
  :root[data-theme="light"] .logo-img { width: 84px; height: 24px; }
  :root[data-theme="light"] .toolbar > .search { flex-basis: 100%; }
}

/* ============================================================================
   2) BUTTONS -- .btn-7d primary/secondary/ghost/danger x sm/md/lg
   ============================================================================
   Reescreve .btn-primary/.btn-ghost/.btn-danger refinado. Hover 150ms.
   Focus ring dourado 3px rgba(166,135,92,0.20) + offset 2px.
   Heights canonicos: 32/36/40. Padding x: 12/14/16.
   ============================================================================ */
:root[data-theme="light"] .btn-7d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  height: var(--btn-h-md);
  min-height: var(--btn-h-md);
  padding: 0 var(--btn-pad-x-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}
:root[data-theme="light"] .btn-7d:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(166, 135, 92, 0.20);
  outline-offset: 2px;
}
:root[data-theme="light"] .btn-7d:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
:root[data-theme="light"] .btn-7d svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Tamanhos */
:root[data-theme="light"] .btn-7d--sm {
  height: var(--btn-h-sm);
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
  font-size: var(--fs-sm);
}
:root[data-theme="light"] .btn-7d--sm svg { width: 14px; height: 14px; }
:root[data-theme="light"] .btn-7d--lg {
  height: var(--btn-h-lg);
  min-height: var(--btn-h-lg);
  padding: 0 var(--btn-pad-x-lg);
  font-size: var(--fs-base);
}
:root[data-theme="light"] .btn-7d--lg svg { width: 18px; height: 18px; }

/* Variants */
:root[data-theme="light"] .btn-7d--primary {
  background: var(--color-accent);
  color: var(--text-on-accent);
  border-color: var(--color-accent);
  font-weight: var(--fw-bold);
}
:root[data-theme="light"] .btn-7d--primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(166, 135, 92, 0.45);
}
:root[data-theme="light"] .btn-7d--primary:active:not(:disabled) {
  background: var(--color-accent-deep);
  transform: translateY(1px);
}

:root[data-theme="light"] .btn-7d--secondary {
  background: var(--color-primary);
  color: var(--text-on-primary);
  border-color: var(--color-primary);
}
:root[data-theme="light"] .btn-7d--secondary:hover:not(:disabled) {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
}

:root[data-theme="light"] .btn-7d--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
:root[data-theme="light"] .btn-7d--ghost:hover:not(:disabled) {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

:root[data-theme="light"] .btn-7d--danger {
  background: transparent;
  color: var(--color-danger);
  border-color: transparent;
}
:root[data-theme="light"] .btn-7d--danger:hover:not(:disabled) {
  background: rgba(178, 58, 72, 0.10);
}

/* Refino dos .btn-primary/.btn-ghost/.btn-danger legacy sem rename do HTML.
   Override seletivo: hover suave 150ms + focus ring dourado. */
:root[data-theme="light"] .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(166, 135, 92, 0.20);
  outline-offset: 2px;
}
:root[data-theme="light"] .btn,
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .btn-danger {
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}

/* ============================================================================
   3) INPUTS / SELECTS / TEXTAREAS unificados -- .input-7d etc.
   ============================================================================
   Heights padronizados, focus ring dourado, padding consistente.
   Tambem refina .input/.select/.textarea legacy (override seletivo).
   ============================================================================ */
:root[data-theme="light"] .input-7d,
:root[data-theme="light"] .select-7d,
:root[data-theme="light"] .textarea-7d {
  width: 100%;
  min-height: var(--input-h);
  padding: 0 var(--input-pad-x);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}
:root[data-theme="light"] .textarea-7d {
  min-height: 96px;
  padding: var(--gap-3) var(--input-pad-x);
  resize: vertical;
  line-height: var(--lh-normal);
}
:root[data-theme="light"] .input-7d:hover,
:root[data-theme="light"] .select-7d:hover,
:root[data-theme="light"] .textarea-7d:hover {
  border-color: var(--border-strong);
}
:root[data-theme="light"] .input-7d:focus,
:root[data-theme="light"] .select-7d:focus,
:root[data-theme="light"] .textarea-7d:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(166, 135, 92, 0.20);
}
:root[data-theme="light"] .input-7d::placeholder,
:root[data-theme="light"] .textarea-7d::placeholder {
  color: var(--text-placeholder);   /* slate-500 (era tertiary) */
}
:root[data-theme="light"] .select-7d {
  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='%23173C46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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;
}

/* Refino dos legacy .input/.select/.textarea (override seletivo, NAO rename) */
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] .textarea {
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}
:root[data-theme="light"] .input:focus,
:root[data-theme="light"] .select:focus,
:root[data-theme="light"] .textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(166, 135, 92, 0.20);
}

/* ============================================================================
   4) BADGES UNIFICADOS -- .badge-unified com variants
   ============================================================================
   1 implementacao visual, comportamento via classe variant.
   Variants:
     temperatura: --frio / --morno / --quente / --sem
     stage:       --open / --won / --lost
     trend:       --up / --down / --neutral
   Substitui .temp-stat / .temp-pill / .status-pill na renderizacao 7d.
   ============================================================================ */
:root[data-theme="light"] .badge-unified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--badge-h);
  padding: 0 var(--badge-pad-x);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--temp-sem-bg);
  color: var(--temp-sem-text);
  border-color: var(--temp-sem-border);
  white-space: nowrap;
}
:root[data-theme="light"] .badge-unified__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Temperatura */
:root[data-theme="light"] .badge-unified--frio {
  background: var(--temp-frio-bg);
  color: var(--temp-frio-text);
  border-color: var(--temp-frio-border);
}
:root[data-theme="light"] .badge-unified--morno {
  background: var(--temp-morno-bg);
  color: var(--temp-morno-text);
  border-color: var(--temp-morno-border);
}
:root[data-theme="light"] .badge-unified--quente {
  background: var(--temp-quente-bg);
  color: var(--temp-quente-text);
  border-color: var(--temp-quente-border);
}
:root[data-theme="light"] .badge-unified--sem {
  background: var(--temp-sem-bg);
  color: var(--temp-sem-text);
  border-color: var(--temp-sem-border);
}

/* Stage (deal lifecycle) */
:root[data-theme="light"] .badge-unified--open {
  background: var(--badge-azul-bg);
  color: var(--badge-azul-text);
  border-color: var(--badge-azul-border);
}
:root[data-theme="light"] .badge-unified--won {
  background: var(--badge-verde-bg);
  color: var(--badge-verde-text);
  border-color: var(--badge-verde-border);
}
:root[data-theme="light"] .badge-unified--lost {
  background: var(--badge-vermelho-bg);
  color: var(--badge-vermelho-text);
  border-color: var(--badge-vermelho-border);
}

/* Trend */
:root[data-theme="light"] .badge-unified--up {
  background: var(--trend-up-bg);
  color: var(--trend-up-text);
  border-color: transparent;
}
:root[data-theme="light"] .badge-unified--down {
  background: var(--trend-down-bg);
  color: var(--trend-down-text);
  border-color: transparent;
}
:root[data-theme="light"] .badge-unified--neutral {
  background: var(--trend-neutral-bg);
  color: var(--trend-neutral-text);
  border-color: transparent;
}

/* Variante "interativa" (botao/select clicavel) */
:root[data-theme="light"] .badge-unified--interactive {
  cursor: pointer;
  transition:
    border-color 150ms var(--ease-out),
    background 150ms var(--ease-out),
    color 150ms var(--ease-out);
}
:root[data-theme="light"] .badge-unified--interactive:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
:root[data-theme="light"] .badge-unified--active.badge-unified--frio {
  background: rgba(91, 139, 184, 0.18);
}
:root[data-theme="light"] .badge-unified--active.badge-unified--morno {
  background: rgba(217, 119, 6, 0.18);
}
:root[data-theme="light"] .badge-unified--active.badge-unified--quente {
  background: rgba(215, 38, 61, 0.18);
}

/* ============================================================================
   5) CARDS -- .card-7d + .stat-card-7d
   ============================================================================
   Padding 24, radius 12, border subtle, sombra multi-layer sutil azulada.
   Stat-card-7d herda + min-height 144 (acaba layout shift).
   ============================================================================ */
:root[data-theme="light"] .card-7d {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--card-pad);
  box-shadow:
    0 1px 2px rgba(15, 42, 50, 0.04),
    0 4px 12px rgba(15, 42, 50, 0.03);
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    transform 150ms var(--ease-out);
}
:root[data-theme="light"] .card-7d--compact { padding: var(--card-pad-compact); }
:root[data-theme="light"] .card-7d--clickable {
  cursor: pointer;
}
:root[data-theme="light"] .card-7d--clickable:hover {
  border-color: var(--color-accent-60);
  box-shadow:
    0 4px 12px -4px rgba(23, 60, 70, 0.10),
    0 2px 4px rgba(23, 60, 70, 0.06);
  transform: translateY(-1px);
}

:root[data-theme="light"] .stat-card-7d {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--card-pad);
  min-height: var(--stat-card-min-h);
  box-shadow:
    0 1px 2px rgba(15, 42, 50, 0.04),
    0 4px 12px rgba(15, 42, 50, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    border-color 150ms var(--ease-out),
    box-shadow 150ms var(--ease-out);
}

/* Refino dos .card e .stat-card legacy: min-height pra acabar layout shift */
:root[data-theme="light"] .stats-onda7b .stat-card {
  min-height: var(--stat-card-min-h);
}

/* ============================================================================
   6) TABELA -- .svc-table-7d (thead refinado, hover row, badge-unified)
   ============================================================================
   thead bg cream-2 + peso 600 CAPS + tracking 0.06em + padding 12-16.
   tbody td padding 14-16 + row hover bg subtle 80ms.
   Borders subtle.
   ============================================================================ */
:root[data-theme="light"] .svc-table-7d {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border-radius: 12px;
  overflow: hidden;
}
:root[data-theme="light"] .svc-table-7d thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  background: var(--color-cream-deeper);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
:root[data-theme="light"] .svc-table-7d tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-base);
  color: var(--text-primary);
  vertical-align: middle;
  transition: background 80ms var(--ease-out);
}
:root[data-theme="light"] .svc-table-7d tbody tr:hover td {
  background: rgba(15, 42, 50, 0.03);
}
:root[data-theme="light"] .svc-table-7d tbody tr:last-child td {
  border-bottom: none;
}
:root[data-theme="light"] .svc-table-7d tfoot td {
  padding: 14px 16px;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  border-top: 1px solid var(--border-default);
}
:root[data-theme="light"] .svc-table-7d .svc-table__row--clickable { cursor: pointer; }
:root[data-theme="light"] .svc-table-7d .svc-table__actions {
  display: flex;
  gap: var(--gap-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Status como controle: switch on/off na coluna Status. Verde = Ativo.
   Substitui o botao-icone criptico de desativar/ativar (Gustavo 2026-06-02:
   "deixa a opcao de mudar status de inativa para ativa, faz mais sentido"). */
:root[data-theme="light"] .svc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  cursor: pointer;
  user-select: none;
}
:root[data-theme="light"] .svc-status__label {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}
:root[data-theme="light"] .svc-status__label--on  { color: var(--color-success-text); }
:root[data-theme="light"] .svc-status__label--off { color: var(--text-secondary); }

/* Switch ON em verde (success) em vez do dourado padrao do .toggle —
   casa com "Ativo = verde" e segue a direcao de usar menos dourado. */
:root[data-theme="light"] .toggle--ok input:checked + .toggle__slider {
  background: var(--color-success);
}

/* Trilho OFF: azul CLARO legivel (era var(--color-border) = #2A4A55 petroleo
   escuro injetado em runtime → muito pesado). Gustavo 2026-06-02: "no
   ativa/desativa, em vez do azul escuro padrao usa um mais claro mas legal".
   #5B8BB8 = azul-frio da marca. Knob BRANCO com sombra = visual de switch limpo
   e bem legivel tanto no OFF (azul) quanto no ON (verde). */
:root[data-theme="light"] .toggle__slider {
  background: #5B8BB8;
}
:root[data-theme="light"] .toggle__slider:before {
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.30);
}

/* Refino do .svc-table legacy (mesma intencao, mesma sintaxe — overrides). */
:root[data-theme="light"] .svc-table thead th {
  background: var(--color-cream-deeper);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 12px 16px;
}
:root[data-theme="light"] .svc-table tbody td {
  padding: 14px 16px;
}
:root[data-theme="light"] .svc-table tbody tr:hover td {
  background: rgba(15, 42, 50, 0.03);
}

/* ============================================================================
   7) TOOLBAR -- .toolbar-7d (busca flex 1 + filtros + spacer + CTA primary)
   ============================================================================ */
:root[data-theme="light"] .toolbar-7d {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  flex-wrap: wrap;
  margin-bottom: var(--gap-4);
}
:root[data-theme="light"] .toolbar-7d > .search,
:root[data-theme="light"] .toolbar-7d__search {
  flex: 1 1 280px;
  min-width: 220px;
}
:root[data-theme="light"] .toolbar-7d__spacer { flex: 1; }
:root[data-theme="light"] .toolbar-7d__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-left: auto;
}
@media (max-width: 480px) {
  :root[data-theme="light"] .toolbar-7d > .search,
  :root[data-theme="light"] .toolbar-7d__search { flex-basis: 100%; }
}

/* SVG inline com margin-right (text + icon line) */
:root[data-theme="light"] .svg-inline-mr-1 {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* Card accent callout (senha gerada, alertas dourados) */
:root[data-theme="light"] .card--accent-callout {
  background: var(--color-accent-10);
  border-color: var(--color-accent);
}
:root[data-theme="light"] .senha-gerada-display {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}

/* Badge "você" inline ao lado do nome (lista de usuarios) */
:root[data-theme="light"] .badge--you {
  margin-left: 6px;
  font-size: var(--fs-xxs, 10px);
}

/* H2 section com margin top extra (separa do bloco anterior) */
:root[data-theme="light"] .h2-section--top-spaced {
  margin: var(--gap-6) 0 var(--gap-3);
}

/* Chart container tall (funil dashboard) */
:root[data-theme="light"] .chart-container--tall { height: 360px; }

/* Empty state como overlay (chart vazio) */
:root[data-theme="light"] .empty-state--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Textarea como bloco de codigo (snippet embed) */
:root[data-theme="light"] .textarea--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-sm);
  background: var(--color-white-05);
}

/* Input readonly em bloco (campos do questionario na ficha do lead) */
:root[data-theme="light"] .input--readonly-block {
  white-space: pre-wrap;
  min-height: 40px;
  padding: var(--gap-3);
  color: var(--text-primary);
}
:root[data-theme="light"] .input--readonly-empty { opacity: 0.55; }

/* Filtros-row 7d -- margin vertical canonico */
:root[data-theme="light"] .filtros-row--7d {
  margin: var(--gap-4) 0;
}
:root[data-theme="light"] .u-mr-2 { margin-right: var(--gap-2); }

/* Pagination ellipsis (spacing horizontal) */
:root[data-theme="light"] .pagination__ellipsis { padding: 0 8px; }

/* Toggle row card (modal Excluir pipeline com leads) */
:root[data-theme="light"] .toggle-row--card {
  cursor: pointer;
  padding: var(--gap-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
:root[data-theme="light"] .toggle-row--card:hover {
  border-color: var(--color-accent-60);
}
:root[data-theme="light"] .toggle-row__radio {
  margin-top: 4px;
}
:root[data-theme="light"] .pe-transfer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
}

/* Indent 28px (checkbox children) */
:root[data-theme="light"] .u-indent-28 { margin-left: 28px; }

/* Field como secao (border-top divisor) */
:root[data-theme="light"] .field--section {
  border-top: 1px solid var(--border-default);
  padding-top: var(--gap-3);
}

/* Botao full-width */
:root[data-theme="light"] .btn--full,
:root[data-theme="light"] .btn-7d--full {
  width: 100%;
  display: flex;
}

/* Field hint -- callout dourado (sugestao "use slug whatsapp") */
:root[data-theme="light"] .field__hint--callout {
  background: var(--color-accent-10);
  color: var(--text-primary);
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-sm);
}

/* CQ-add form 'criar pergunta nova' inline */
:root[data-theme="light"] .cq-nova-form {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--gap-3);
}

/* Skeleton widths canonicos (substituem inline width%) */
:root[data-theme="light"] .skel-w-15 { width: 15%; }
:root[data-theme="light"] .skel-w-20 { width: 20%; }
:root[data-theme="light"] .skel-w-40 { width: 40%; }
:root[data-theme="light"] .skel-w-60 { width: 60%; }
:root[data-theme="light"] .skel-center { margin-left: auto; margin-right: auto; }
:root[data-theme="light"] .skel-mt { margin-top: 8px; }

/* Empty state grande (Clientes Ativos / Servicos catalogo) */
:root[data-theme="light"] .state--lg-empty {
  padding: var(--gap-8) var(--gap-4);
}

/* Filters row colado com filter chips logo acima (negative pull) */
:root[data-theme="light"] .filters--tight {
  margin-top: -8px;
}

/* Divider com espacamento generoso (config tabs Tracking) */
:root[data-theme="light"] .divider--spaced {
  margin: var(--gap-5) 0 var(--gap-4);
}

/* Slug code -- variante maior pra header de pipeline/form */
:root[data-theme="light"] .cq-slug--lg {
  font-size: var(--fs-base);
  padding: 8px 10px;
}

/* Stats onda7b 3 colunas (sobrescreve grid se vier) */
:root[data-theme="light"] .stats-onda7b--3cols {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  :root[data-theme="light"] .stats-onda7b--3cols {
    grid-template-columns: 1fr;
  }
}

/* Em risco list (dashboard drill-down) */
:root[data-theme="light"] .em-risco-list { padding: 0; }
:root[data-theme="light"] .em-risco-list__header {
  padding: var(--gap-3) var(--gap-4);
  border-bottom: 1px solid var(--border-subtle);
}
:root[data-theme="light"] .em-risco-list__items {
  margin: 0;
  padding: 0;
}
:root[data-theme="light"] .em-risco-list__row {
  padding: var(--gap-2) var(--gap-4);
  border-bottom: 1px solid var(--border-subtle);
  transition: background 80ms var(--ease-out);
}
:root[data-theme="light"] .em-risco-list__row:hover { background: rgba(15, 42, 50, 0.03); }
:root[data-theme="light"] .em-risco-list__row:last-child { border-bottom: none; }
:root[data-theme="light"] .em-risco-list__more {
  padding: var(--gap-2) var(--gap-4);
}

/* Empty state com asterisco gold (rankings vazios, etc) */
:root[data-theme="light"] .empty-state--compact {
  text-align: center;
  padding: var(--gap-4) 0;
}
:root[data-theme="light"] .empty-state__star {
  color: var(--color-accent);
  font-size: 24px;
  display: block;
  opacity: 0.6;
  margin-bottom: var(--gap-1);
}

/* Table column widths canonicos (substituem style="width: Xpx" em th) */
:root[data-theme="light"] .th-w-36  { width: 36px; }
:root[data-theme="light"] .th-w-110 { width: 110px; }
:root[data-theme="light"] .th-w-140 { width: 140px; }
:root[data-theme="light"] .th-w-160 { width: 160px; }
:root[data-theme="light"] .th-w-280 { width: 280px; text-align: right; }

/* Modal containers -- variantes de largura canonicas (sistemizar inline) */
:root[data-theme="light"] .modal-container--w-460 { max-width: 460px; }
:root[data-theme="light"] .modal-container--w-520 { max-width: 520px; }
:root[data-theme="light"] .modal-container--w-540 { max-width: 540px; }
:root[data-theme="light"] .modal-container--w-560 { max-width: 560px; }
:root[data-theme="light"] .modal-container--w-580 { max-width: 580px; }
:root[data-theme="light"] .modal-container--w-600 { max-width: 600px; }
:root[data-theme="light"] .modal-container--w-640 { max-width: 640px; }
:root[data-theme="light"] .modal-container--w-720 { max-width: 720px; }
:root[data-theme="light"] .modal-container--w-880 { max-width: 880px; }

/* Modal header compacto -- usado em modais auxiliares (formularios, campos,
   novo serviço, etc.) que herdavam font-size: var(--fs-2xl) via inline style.
   Lead-modal/dashboard mantem fs-3xl default (visual editorial heroico). */
:root[data-theme="light"] .modal-header__title--compact {
  font-size: var(--fs-2xl);
}
@media (max-width: 768px) {
  :root[data-theme="light"] .modal-header__title--compact {
    font-size: var(--fs-xl);
  }
}

/* ============================================================================
   8) SVG ICONS -- stroke-width via token + lining round (defensiva)
   ============================================================================
   Aplica linecap/linejoin round em SVGs que esqueceram o atributo. Tambem
   normaliza stroke-width pra var(--icon-stroke). Aplicado em SVGs INLINE
   dentro do painel (escopo light). Override agressivo de stroke-width fica
   apenas DENTRO de componentes 7d pra nao quebrar SVGs decorativos.
   ============================================================================ */
:root[data-theme="light"] .btn-7d svg,
:root[data-theme="light"] .badge-unified svg,
:root[data-theme="light"] .svc-table-7d svg,
:root[data-theme="light"] .toolbar-7d svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}