/* ============================================================
   SWISZ COMPONENTS — biblioteca única do design system (.sw-*)
   Substitui os silos por componente ÚNICO: botão (~25 famílias→1),
   chip/badge (~38→1), KPI (8→1), tabela (17→1), modal (7 overlays→1).
   Consome SÓ tokens (tokens.css). Telas migram gradualmente pra cá.
   ============================================================ */

/* ── Estados: loading com a LEMNISCATA da marca · vazio · erro ── */
.sw-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 20px; color: var(--ink-muted); font-size: var(--fs-sm); }
.sw-lemniscata { width: 64px; height: 34px; background: url('/img/brand/lemniscata.png') center/contain no-repeat; animation: sw-pulse 1.3s ease-in-out infinite; }
.sw-lemniscata.clara { background-image: url('/img/brand/lemniscata-clara.png'); }
@keyframes sw-pulse { 0%, 100% { opacity: .3; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .sw-lemniscata { animation: none; opacity: .8; } }
.sw-empty { padding: 48px 20px; text-align: center; color: var(--ink-muted); font-size: var(--fs-body); }
.sw-err { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--danger-bg); border: 1px solid #F0C4AE; border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-sm); }
.sw-err b { color: var(--danger); }

/* ── Botões: UMA família (primary / ghost / danger / icon) ── */
.sw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out, filter .15s ease-out;
  background: var(--primary); color: #fff;
}
.sw-btn:hover { background: var(--primary-hover); }
.sw-btn:disabled { background: var(--line-2); color: var(--ink-muted); cursor: default; }
.sw-btn.ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--line-2); }
.sw-btn.ghost:hover { border-color: var(--sw-netuno); color: var(--ink); background: var(--surface-2); }
.sw-btn.danger { background: var(--danger); }
.sw-btn.danger:hover { filter: brightness(.92); }
.sw-btn.sm { padding: 6px 11px; font-size: var(--fs-xs); }
.sw-btn.icon { padding: 8px; width: 34px; height: 34px; }

/* ── Chips de status (tom via data-tone — mapeado por SwiszUI.chip) ── */
.sw-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line-2);
}
.sw-chip[data-tone="ok"]     { background: var(--ok-bg);     color: var(--ok);     border-color: #C8E6E1; }
.sw-chip[data-tone="warn"]   { background: var(--warn-bg);   color: var(--warn);   border-color: #EFD9B4; }
.sw-chip[data-tone="danger"] { background: var(--danger-bg); color: var(--danger); border-color: #F0C4AE; }
.sw-chip[data-tone="info"]   { background: var(--info-bg);   color: #41707C;       border-color: #CBE0E6; }
.sw-chip[data-tone="brand"]  { background: var(--sw-bridesmaid); color: var(--sw-chocolate); border-color: var(--sw-cinderela); }

/* ── KPI cards: número em SERIF ITÁLICO (assinatura da marca) ── */
.sw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.sw-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow); padding: 14px 16px 12px; min-width: 0;
}
.sw-kpi .v {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 30px; line-height: 1.05; color: var(--ink); letter-spacing: .2px;
}
.sw-kpi .l { margin-top: 5px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.sw-kpi .h { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-muted); }
.sw-kpi .delta { font-size: var(--fs-xs); font-weight: 700; margin-left: 6px; }
.sw-kpi .delta.up { color: var(--ok); }
.sw-kpi .delta.down { color: var(--danger); }
.sw-kpi[data-tone="ok"] .v     { color: var(--ok); }
.sw-kpi[data-tone="warn"] .v   { color: var(--warn); }
.sw-kpi[data-tone="danger"] .v { color: var(--danger); }
/* hero invertido (1 por tela no máx): petróleo com número pumpkin */
.sw-kpi.hero { background: linear-gradient(160deg, var(--chrome-deep), var(--chrome)); border-color: var(--chrome); }
.sw-kpi.hero .v { color: var(--sw-pumpkin); }
.sw-kpi.hero .l, .sw-kpi.hero .h { color: var(--on-chrome); }

/* ── Datatable única (densa: ferramenta de trabalho, 44px/linha) ── */
.sw-tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); overflow: auto; }
table.sw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sw-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted);
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.sw-table thead th.ta-r { text-align: right; }
.sw-table thead th .sort { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; opacity: 0; }
.sw-table thead th.asc .sort { border-bottom: 5px solid var(--primary); opacity: 1; }
.sw-table thead th.desc .sort { border-top: 5px solid var(--primary); opacity: 1; }
.sw-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-1); color: var(--ink); white-space: nowrap; }
.sw-table tbody td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.sw-table tbody tr { transition: background .12s ease-out; }
.sw-table tbody tr:hover { background: rgba(249, 222, 213, .35); }  /* blush 35% */
.sw-table tfoot td { padding: 10px 12px; font-weight: 700; border-top: 2px solid var(--line-2); background: var(--surface-2); }
/* célula de produto: foto + nome + sub */
.sw-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sw-prod img, .sw-prod .ph { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: var(--surface-3); flex: none; }
.sw-prod .ph { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ink-muted); }
.sw-prod .nm { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.sw-prod .sb { font-size: var(--fs-xs); color: var(--ink-muted); }
/* micro-barra de progresso (ex.: cobertura/ruptura) */
.sw-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; min-width: 48px; }
.sw-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--primary); }
.sw-bar[data-tone="ok"] > i { background: var(--ok); }
.sw-bar[data-tone="warn"] > i { background: var(--warn); }
.sw-bar[data-tone="danger"] > i { background: var(--danger); }

/* ── Modal ÚNICO (1 overlay, 1 radius, 1 sombra — substitui 6 backdrops) ── */
.sw-modal-ov {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(27, 67, 80, .55);   /* petróleo translúcido — o backdrop da marca */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px; overflow-y: auto;
}
.sw-modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 720px; padding: 22px 24px; position: relative;
}
.sw-modal-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-muted);
}
.sw-modal-x:hover { background: var(--surface-3); color: var(--ink); }
.sw-modal h3 { margin: 0 0 14px; font-family: var(--font-display); font-style: italic; font-size: var(--fs-h1); color: var(--ink); }

/* ── Intro explicativa colapsável (o "manual embutido" das 13 telas) ── */
.sw-intro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow); margin: 0 0 var(--sp-4); overflow: hidden; }
.sw-intro-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; user-select: none; }
.sw-intro-h .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--sw-bridesmaid); color: var(--sw-chocolate); display: flex; align-items: center; justify-content: center; flex: none; }
.sw-intro-h h2 { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 19px; font-weight: 700; color: var(--ink); }
.sw-intro-h .caret { margin-left: auto; color: var(--ink-muted); transition: transform .15s ease-out; }
.sw-intro.aberta .caret { transform: rotate(180deg); }
.sw-intro-b { display: none; padding: 0 16px 14px 62px; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }
.sw-intro.aberta .sw-intro-b { display: block; }
.sw-intro-b b { color: var(--ink); }
.sw-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ── Divisor com a lemniscata (seções de painel) ── */
.sw-divider { display: flex; align-items: center; gap: 14px; margin: var(--sp-5) 0 var(--sp-4); color: var(--ink-muted); }
.sw-divider::before, .sw-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.sw-divider .lem { width: 30px; height: 16px; background: url('/img/brand/lemniscata.png') center/contain no-repeat; opacity: .5; }

/* ── Botão "Entenda a aba" + modal de ajuda (SwiszHelp) ── */
/* Botão: ghost compacto, mesma família .sw-btn */
.sw-help-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-muted); cursor: pointer;
  white-space: nowrap; user-select: none;
  transition: border-color .13s ease-out, color .13s ease-out, background .13s ease-out;
}
.sw-help-btn:hover { border-color: var(--sw-netuno); color: var(--ink); background: var(--surface-2); }

/* Backdrop */
.sw-help-ov {
  position: fixed; inset: 0; z-index: var(--z-modal, 1200);
  background: rgba(27, 67, 80, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px 20px; overflow-y: auto;
}

/* Container do modal de ajuda */
.sw-help-modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 760px; padding: 24px 26px 30px; position: relative;
}
.sw-help-modal-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-muted);
}
.sw-help-modal-x:hover { background: var(--surface-3); color: var(--ink); }

/* Cabeçalho */
.sw-help-modal h3 {
  margin: 0 0 4px;
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-h1); color: var(--ink);
}
.sw-help-modal .sw-help-sub {
  font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: 18px;
}
.sw-help-modal h4 {
  margin: 20px 0 9px; font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted);
  border-bottom: 1px solid var(--line-2); padding-bottom: 5px;
}

/* Bloco de destaque (o que é / pra que serve) */
.sw-help-highlight {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 4px solid var(--sw-arapawa);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55;
  margin: 0 0 var(--sp-4);
}
.sw-help-highlight b { color: var(--ink); }

/* Grade de glossário (campos-chave / dicas) */
.sw-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px; margin-bottom: 6px;
}
.sw-help-entry {
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: var(--fs-sm);
}
.sw-help-entry .sw-he-term { font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.sw-help-entry .sw-he-hint { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: 2px; }
.sw-help-entry .sw-he-desc { color: var(--ink-soft); line-height: 1.45; }

/* ── Responsivo: tabela → cards no celular (aplicar .sw-table-cards no wrapper) ── */
@media (max-width: 560px) {
  .sw-table-cards table.sw-table, .sw-table-cards tbody, .sw-table-cards tr, .sw-table-cards td { display: block; }
  .sw-table-cards thead, .sw-table-cards tfoot { display: none; }
  .sw-table-cards tbody tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 10px; padding: 10px 12px; background: var(--surface); }
  .sw-table-cards tbody td { border: none; padding: 3px 0; white-space: normal; display: flex; justify-content: space-between; gap: 12px; }
  .sw-table-cards tbody td[data-l]::before { content: attr(data-l); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
}