/* ============================================================
   Liquid Glass, Lusoservica Inventory Management
   Inspirado em Apple WWDC 2025 (iOS 26 / macOS Tahoe)
   ============================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

:root {
  color-scheme: light;   /* controlos nativos (scrollbar, date, select) em claro */
  /* Paleta neutra Apple-like (light mode) */
  --bg-canvas: #F6F7FA;                          /* base neutra (era roxo-lilás) */
  --surface: rgba(255, 255, 255, 0.88);          /* superfícies de dados mais sólidas/legíveis */
  --surface-strong: rgba(255, 255, 255, 0.95);
  --border: rgba(26, 20, 36, 0.08);              /* hairline neutro (era branco-vidro) */
  --border-strong: rgba(26, 20, 36, 0.10);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(20, 16, 30, 0.08);  /* sombra neutra (era roxa) */

  /* Cores Lusoservica */
  --accent: #47255E;
  --accent-soft: rgba(71, 37, 94, 0.92);
  --accent-tint: rgba(71, 37, 94, 0.08);
  --accent-hover: #5C2F7B;
  --accent-light: #AA99C0;

  /* Texto */
  --text: #1A1424;
  --text-secondary: #5A5066;
  --text-tertiary: #8A8095;
  --text-on-accent: #FFFFFF;

  /* Estados */
  --green: #2E7D32;
  --amber: #ED7D31;
  --red:   #C00000;

  /* Tipografia */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               "Consolas", monospace;

  /* Easing, Apple-like spring */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

  /* Sparkline */
  --spark-stroke: rgba(71, 37, 94, 0.55);
  --spark-fill: rgba(71, 37, 94, 0.10);
}

/* ---------- Dark mode (Apple-like, neutros frios) ---------- */
[data-theme="dark"] {
  color-scheme: dark;   /* scrollbars, date-picker, dropdowns nativos em escuro */
  --bg-canvas: #14111A;
  --surface: rgba(40, 33, 54, 0.84);             /* mais opaco → dados legíveis */
  --surface-strong: rgba(52, 44, 66, 0.93);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.06);
  --shadow: 0 1px 2px rgba(0,0,0,0.32), 0 12px 32px rgba(0, 0, 0, 0.42);

  --accent: #B89DD0;
  --accent-soft: rgba(184, 157, 208, 0.92);
  --accent-tint: rgba(184, 157, 208, 0.14);
  --accent-hover: #CDB6E0;
  --accent-light: #8A6FA8;

  --text: #F2EDF7;
  --text-secondary: #B4ABBE;
  --text-tertiary: #7E7587;
  --text-on-accent: #1A1424;

  --green: #6FCF6A;
  --amber: #FFA666;
  --red:   #FF6B6B;

  --spark-stroke: rgba(184, 157, 208, 0.7);
  --spark-fill: rgba(184, 157, 208, 0.16);
}
[data-theme="dark"] .bg-gradient {
  background:
    radial-gradient(ellipse at top left, #2A1B3D 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, #2D1A2E 0%, transparent 55%),
    radial-gradient(ellipse at center, #14111A 0%, #0E0B14 100%);
}
[data-theme="dark"] .blob-1 { background: radial-gradient(circle, #5A3A78, transparent); opacity: 0.24; }
[data-theme="dark"] .blob-2 { background: radial-gradient(circle, #6B2F5A, transparent); opacity: 0.20; }
[data-theme="dark"] .blob-3 { background: radial-gradient(circle, #2F4A78, transparent); opacity: 0.22; }
[data-theme="dark"] .log-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
/* Controlos de formulário SEM classe .input (inputs/selects dos formulários da
   Qualidade, seletor de semana, datas…) ficavam brancos no escuro. Fallback
   tematizado — os que têm classe própria (.input/.filter-select/.bp-inp) já
   têm dark com maior especificidade e mantêm-se. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
}
[data-theme="dark"] select option { background: var(--surface-strong); color: var(--text); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-tertiary); }
/* Scrollbar custom da área principal — thumb visível no escuro */
[data-theme="dark"] .main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] code {
  background: rgba(184, 157, 208, 0.14);
}

/* Transição suave entre temas */
html { transition: background 0.4s var(--ease-smooth); }
body, .glass, .kpi-card, .card, .btn, .nav-item, .input, .log-box {
  transition: background 0.35s var(--ease-smooth),
              color 0.35s var(--ease-smooth),
              border-color 0.35s var(--ease-smooth);
}

body {
  font-family: var(--font);
  font-feature-settings: "ss01", "cv11";  /* SF Pro / Inter alts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--bg-canvas);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ---------- Background com blobs (dão refração ao blur) ---------- */
.bg-gradient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  background:
    radial-gradient(ellipse at top left, #ECEAF3 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, #EEEAF0 0%, transparent 58%),
    radial-gradient(ellipse at center, #F6F7FA 0%, #ECEDF3 100%);
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  animation: float 20s ease-in-out infinite;
}
.blob-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, #C8B0DD, transparent);
  top: -120px; left: -100px;
  animation-delay: 0s;
}
.blob-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, #F0BAD4, transparent);
  bottom: -80px; right: 10%;
  animation-delay: -7s;
}
.blob-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #B7C8E8, transparent);
  top: 40%; right: -80px;
  animation-delay: -14s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.97); }
}

/* ---------- Glass material ---------- */
.glass {
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---------- Layout ---------- */
.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  height: 100vh;
  gap: 14px;
  padding: 14px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  border-radius: 22px;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 22px;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 14px;
}
.brand-logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 12px rgba(71, 37, 94, 0.22);
  flex-shrink: 0;
  padding: 5px 4px;
  box-sizing: border-box;
  overflow: hidden;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 600; font-size: 14px; color: var(--text); }
.brand-sub  { font-size: 11px; color: var(--text-secondary); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s var(--ease-smooth),
              color 0.18s var(--ease-smooth),
              transform 0.18s var(--ease-smooth);
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
}
.nav-item.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.nav-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.2s var(--ease-smooth);
}
.nav-item.active .nav-dot {
  background: var(--accent);
  opacity: 1;
}

.sidebar-footer {
  padding: 14px 12px 4px;
  border-top: 1px solid var(--border-strong);
  margin-top: 8px;
}
.footer-title { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
.footer-meta  { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

/* ---------- Main area ---------- */
.main {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 8px 4px;
  scrollbar-width: thin;
}
.main::-webkit-scrollbar { width: 8px; }
.main::-webkit-scrollbar-track { background: transparent; }
.main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 12px 16px 22px;
  margin-bottom: 4px;
}
.topbar-eyebrow {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
}
.topbar-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.topbar-status {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sections ---------- */
.section {
  display: none;
  animation: section-in 0.35s var(--ease-smooth);
}
.section.active { display: block; }
@keyframes section-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- KPI grid ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
}
/* Variante 3 colunas, usada na "Metodologia ABC" (qtd + valor lado a lado) */
.kpi-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 0;
}
.kpi-card {
  border-radius: 18px;
  padding: 18px 18px 16px;
  transition: transform 0.3s var(--ease-spring),
              box-shadow 0.3s var(--ease-smooth);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 16px 40px rgba(20, 16, 30, 0.12);
}
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
/* Labels que trazem chip de base temporal: texto à esquerda, chip à direita.
   Só afeta cards com .kpi-basis (os restantes ficam inalterados). */
.kpi-label:has(.kpi-basis) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kpi-basis {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  cursor: help;
  background: var(--accent-tint);
  color: var(--accent);
}
.kpi-basis.basis-snapshot {
  background: rgba(120, 124, 138, 0.16);
  color: var(--text-secondary);
}
[data-theme="dark"] .kpi-basis.basis-snapshot {
  background: rgba(180, 184, 200, 0.16);
}

/* Toggle "Ver histórico" do Battle Plan (vista rolante forward-only) */
.bp-hist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.bp-hist-toggle input { cursor: pointer; margin: 0; }
.kpi-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-delta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.warn  { color: var(--amber); }
.kpi-delta.ok    { color: var(--green); }
.kpi-delta.bad   { color: var(--red); }
/* Chips de tendência (enterprise 2026): o delta com estado vira pílula tonal */
.kpi-delta.ok, .kpi-delta.warn, .kpi-delta.bad {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.ok   { background: rgba(46, 125, 50, 0.12); }
.kpi-delta.warn { background: rgba(237, 125, 49, 0.14); }
.kpi-delta.bad  { background: rgba(192, 0, 0, 0.10); }
[data-theme="dark"] .kpi-delta.ok   { background: rgba(111, 207, 106, 0.16); }
[data-theme="dark"] .kpi-delta.warn { background: rgba(255, 166, 102, 0.16); }
[data-theme="dark"] .kpi-delta.bad  { background: rgba(255, 107, 107, 0.16); }

/* Variantes coloridas de kpi-card (cenários, reconciliação) */
.kpi-card-good   { border-left: 3px solid var(--green); }
.kpi-card-bad    { border-left: 3px solid var(--red); }
.kpi-card-warn   { border-left: 3px solid var(--amber); }
.kpi-sub         { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.kpi-val         { font-size: 22px; font-weight: 700; color: var(--accent);
                   font-variant-numeric: tabular-nums; line-height: 1.15; }
.mt-10           { margin-top: 10px; }
.kpi-row         { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kpi-row .kpi-card { flex: 1 1 220px; }

.audit-detail { font-size: 11px; color: var(--text-secondary); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; max-width: 320px; display: inline-block;
                font-family: 'Consolas', monospace; }

.diff-historico svg { display: block; max-width: 100%; }
.diff-historico { padding: 4px 0; }

/* Loading state genérico (distinto de empty-state, não parece erro) */
.loading-state { text-align: center; padding: 30px; color: var(--accent);
                 font-weight: 500; font-size: 14px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Base de Dados */
.bds-categorias { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.bds-categorias .btn-cta { margin-left: 0; }
/* Só o 1.º botão empurra para a direita; os seguintes ficam colados a ele (gap 8px). */
.bds-categorias #btn-bds-batch { margin-left: auto; }
.bds-tag { display: inline-block; font-size: 11px; padding: 3px 8px;
           border-radius: 10px; font-weight: 600; }
.bds-tag-historica    { background: #E8F5E9; color: #1B5E20; }
.bds-tag-substituicao { background: #FFF3E0; color: #E65100; }
.bds-tag-lista        { background: #E3F2FD; color: #0D47A1; }
/* Dark mode: chips de categoria em tons escuros tonais (fundo claro→tinta escura) */
[data-theme="dark"] .bds-tag-historica    { background: rgba(46, 125, 50, 0.22);  color: var(--green); }
[data-theme="dark"] .bds-tag-substituicao { background: rgba(237, 125, 49, 0.22); color: var(--amber); }
[data-theme="dark"] .bds-tag-lista        { background: rgba(33, 150, 243, 0.22); color: #7FB4F0; }

/* Modal genérico */
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
         background: rgba(0,0,0,0.4); z-index: 1000;
         display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-content { background: #fff; padding: 24px; border-radius: 8px;
                 max-width: 600px; width: 90%; max-height: 85vh; overflow: auto;
                 box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.modal-content-large { max-width: 1100px; }
.modal-content-large h3,
.modal-content-large > .card-sub { text-align: center; }
.modal-content-large > .card-sub { max-width: 900px; margin: 8px auto 16px; }

/* Drag-and-drop zone para upload em massa */
.dropzone { position: relative; border: 2px dashed var(--accent);
            border-radius: 10px; padding: 36px 20px; text-align: center;
            background: rgba(71, 37, 94, 0.04); margin: 16px 0;
            transition: all 0.2s ease; cursor: pointer; }
.dropzone:hover, .dropzone-active {
    background: rgba(71, 37, 94, 0.10);
    border-color: var(--green, #1B5E20);
    transform: scale(1.01);
}
.dropzone input[type=file] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.dropzone-icon { font-size: 36px; margin-bottom: 8px; }
.dropzone-titulo { font-size: 16px; font-weight: 600; color: var(--accent); }
.dropzone-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.modal-content h3 { margin: 0 0 8px 0; }
.modal-content .form-group { margin-bottom: 12px; }
.modal-content .form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.modal-content .form-row .form-group { flex: 1 1 140px; }
.modal-content label { display: block; font-size: 12px; font-weight: 600;
                       margin-bottom: 4px; color: #555; }
.modal-content input[type=file],
.modal-content input[type=date],
.modal-content input[type=number] {
  width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px;
}
.preview-box { background: #F5F5F5; padding: 12px; border-radius: 6px;
               margin: 10px 0; font-size: 13px; }
.preview-box ul { margin: 0; padding-left: 18px; }
.form-hint { font-size: 11px; color: #666; margin: 4px 0 8px 0; }
.form-msg-warn { background: #FFF3CD; color: #664D03;
                 padding: 8px 12px; border-radius: 4px; margin: 8px 0;
                 border-left: 3px solid #E65100; font-size: 12px; }
.form-actions { margin-top: 16px; display: flex; gap: 8px; align-items: center; }

/* ---------- Utilitários (substituem styles inline bloqueados pelo CSP) ---------- */
.txt-good    { color: #1B5E20; }
.txt-bad     { color: #8C0000; }
.txt-neutral { color: #6E5980; }
.txt-bold    { font-weight: 600; }
.kpi-pct     { font-size: 0.55em; font-weight: 600; margin-left: 6px; }
.kpi-prev    { font-size: 11px; opacity: 0.7; margin-top: 4px; }
.dq-prob     { font-size: 11px; color: #6E5980; }
.tr-total    { font-weight: 700; }
.hidden      { display: none !important; }
.mt-12       { margin-top: 12px; }
.mw-80       { max-width: 80px; }
.mw-100      { max-width: 100px; }
.mh-280      { max-height: 280px; }
.mt-20       { margin-top: 20px; }
.mt-24       { margin-top: 24px; }

/* ---------- Cards ---------- */
.card {
  border-radius: 20px;
  padding: 20px 22px 22px;
  margin: 0 16px 14px;
  transition: box-shadow 0.3s var(--ease-smooth);
}
.card-header { margin-bottom: 14px; }
.card-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 4px;
}
.card-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 760px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring),
              box-shadow 0.2s var(--ease-smooth),
              background 0.18s var(--ease-smooth);
  user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(71, 37, 94, 0.28);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 8px 20px rgba(71, 37, 94, 0.36);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.55);
  color: var(--accent);
  border: 1px solid rgba(71, 37, 94, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--accent-tint);
  border-color: rgba(71, 37, 94, 0.32);
}
/* Dark mode: background translúcido escuro + texto claro com contraste */
[data-theme="dark"] .btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);                    /* branco-lilás (#F2EDF7) */
  border: 1px solid rgba(184, 157, 208, 0.32);
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
  background: rgba(184, 157, 208, 0.18);
  border-color: rgba(184, 157, 208, 0.55);
  color: var(--text);
}

/* ---------- Progress ---------- */
.progress-bar {
  display: none;
  width: 220px;
  height: 4px;
  margin-top: 12px;
  background: rgba(71, 37, 94, 0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.progress-bar.active { display: block; }
.progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  background: var(--accent);
  border-radius: 2px;
  animation: indeterminate 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(335%); }
}

/* ---------- Forms ---------- */
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.field-hint { font-size: 12px; color: var(--text-tertiary); }
.input {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  width: 160px;
  transition: border-color 0.18s var(--ease-smooth),
              box-shadow 0.18s var(--ease-smooth);
  font-variant-numeric: tabular-nums;
}
.input:focus {
  outline: none;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(71, 37, 94, 0.12);
}

/* ---------- Log box ---------- */
.log-box {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
.log-box .head {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Lists & grids ---------- */
.btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.btn-grid .btn { width: 100%; justify-content: center; }

.op-list { display: flex; flex-direction: column; gap: 10px; }
.op-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.op-row .btn { min-width: 220px; justify-content: center; }
.op-desc { color: var(--text-secondary); font-size: 12.5px; }

.info-list {
  margin: 0 0 14px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.info-list + .btn { margin-top: 4px; }
.info-list li {
  font-size: 13px;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}
.info-list li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent-light);
  position: absolute;
  left: 4px; top: 8px;
}
.info-list b { color: var(--text); font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(71, 37, 94, 0.08);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ---------- Topbar right (status + theme toggle) ---------- */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  color: var(--text-secondary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease-spring),
              color 0.2s var(--ease-smooth),
              background 0.2s var(--ease-smooth);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.theme-toggle:hover {
  color: var(--accent);
  transform: rotate(20deg);
}
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 0.3s var(--ease-smooth),
              transform 0.4s var(--ease-spring);
}
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* ---------- Sparklines ---------- */
.sparkline {
  display: block;
  width: 100%;
  height: 22px;
  margin-top: 8px;
  overflow: visible;
}
.sparkline path.area {
  fill: var(--spark-fill);
  transition: fill 0.4s var(--ease-smooth);
}
.sparkline path.line {
  fill: none;
  stroke: var(--spark-stroke);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.4s var(--ease-smooth);
}
.sparkline circle {
  fill: var(--accent);
  transition: fill 0.4s var(--ease-smooth);
}
.sparkline.hidden { visibility: hidden; }

/* ---------- Toast notifications ---------- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  background: var(--surface-strong);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  pointer-events: auto;
  animation: toast-in 0.5s var(--ease-spring);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.toast.toast-out {
  animation: toast-out 0.3s var(--ease-smooth) forwards;
}
.toast-persistente { max-width: 560px; }
.toast-persistente div:nth-child(2) {
  font-family: 'Consolas', 'Courier New', monospace; font-size: 11px;
  white-space: pre-wrap; max-height: 260px; overflow: auto;
  background: rgba(0,0,0,0.04); padding: 8px; border-radius: 6px; margin-top: 6px;
}
.toast-close { background: transparent; border: none; font-size: 18px; cursor: pointer;
               color: var(--text-secondary); padding: 0 4px; margin-left: auto; }
.toast-close:hover { color: var(--text-primary); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.92); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  to   { opacity: 0; transform: translateX(20px) scale(0.95); }
}
.toast-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: white;
}
.toast.success .toast-icon { background: var(--green); }
.toast.error   .toast-icon { background: var(--red); }
.toast.info    .toast-icon { background: var(--accent); }
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.toast-msg {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  margin-top: -2px;
}
.toast-close:hover { color: var(--text); }

/* ---------- Card hero (CTA principal destacado) ---------- */
.card-hero {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(245, 235, 250, 0.62) 100%);
  border: 1px solid rgba(71, 37, 94, 0.12);
}
[data-theme="dark"] .card-hero {
  background: linear-gradient(135deg,
    rgba(60, 45, 80, 0.65) 0%,
    rgba(45, 30, 65, 0.55) 100%);
  border: 1px solid rgba(184, 157, 208, 0.18);
}
.card-hero .btn-primary {
  font-size: 14px;
  padding: 12px 24px;
}

/* ---------- Card colapsável (details/summary) ---------- */
.card-collapse {
  padding: 0;
  overflow: hidden;
  margin-bottom: 14px;
}
.card-collapse > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 20px;
  transition: background 0.2s var(--ease-smooth);
}
.card-collapse > summary::-webkit-details-marker { display: none; }
.card-collapse > summary:hover { background: rgba(255, 255, 255, 0.3); }
[data-theme="dark"] .card-collapse > summary:hover { background: rgba(255, 255, 255, 0.04); }
.card-collapse .summary-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.card-collapse .summary-chevron {
  font-size: 22px;
  color: var(--text-tertiary);
  font-weight: 300;
  transition: transform 0.25s var(--ease-spring);
  line-height: 1;
}
.card-collapse[open] .summary-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}
.card-collapse .card-body {
  padding: 0 22px 22px;
}

/* ---------- Linha de botões (multi-CTA por card) ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* Label inline sem margem excessiva (segundo+ label num card) */
.field-label-inline { margin-top: 4px; }

/* ---------- Lista operacional clicável (op-row como botão) ---------- */
.op-list { display: flex; flex-direction: column; gap: 4px; }
.op-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background 0.15s var(--ease-smooth);
}
.op-row:hover {
  background: rgba(71, 37, 94, 0.06);
}
[data-theme="dark"] .op-row:hover {
  background: rgba(184, 157, 208, 0.10);
}
.op-row:active { transform: scale(0.997); }
.op-row-text { flex: 1; min-width: 0; }
.op-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.op-row-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.op-row-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.18s var(--ease-spring), color 0.18s var(--ease-smooth);
}
.op-row:hover .op-row-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ---------- Utility bar (ações pequenas e discretas) ---------- */
.utility-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 14px;
  margin: 0 16px 14px;
}
.utility-spacer { flex: 1; }
.utility-clean {
  display: flex;
  align-items: center;
  gap: 6px;
}
.utility-clean-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: 4px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-smooth),
              color 0.15s var(--ease-smooth);
}
.btn-icon:hover:not(:disabled) {
  background: rgba(71, 37, 94, 0.08);
  color: var(--accent);
}
[data-theme="dark"] .btn-icon:hover:not(:disabled) {
  background: rgba(184, 157, 208, 0.12);
  color: var(--accent);
}
.btn-icon:active { transform: scale(0.97); }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon svg { flex-shrink: 0; }

.btn-icon-warn:hover:not(:disabled) {
  background: rgba(192, 0, 0, 0.08);
  color: var(--red);
}
[data-theme="dark"] .btn-icon-warn:hover:not(:disabled) {
  background: rgba(255, 107, 107, 0.12);
  color: var(--red);
}

/* Input mais pequeno para o dias do limpar */
.input-tiny {
  width: 56px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
}

/* Botões PDF na grid: secundários em vez de primários (CTA é "Atualizar") */
#grid-pdf .btn-secondary {
  font-size: 12.5px;
  padding: 10px 14px;
}

/* ============================================================
   Controlo de Gestão (sub-secção)
   ============================================================ */

.cg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px 14px;
  flex-wrap: wrap;
}

.cg-segmented {
  display: inline-flex;
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.cg-seg {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s var(--ease-smooth),
              color 0.18s var(--ease-smooth);
  white-space: nowrap;
}
.cg-seg:hover:not(.active) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .cg-seg:hover:not(.active) {
  background: rgba(255, 255, 255, 0.04);
}
.cg-seg.active {
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(71, 37, 94, 0.3);
}

.cg-periodo-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* KPI grid: 6 cards em linha (3+3 em telas mais pequenas) */
.cg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 0 16px 18px;
}

/* Charts: 2x2 */
.cg-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 16px 14px;
}
.cg-chart-card {
  margin: 0;
}
.chart-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}

/* Tabela top clientes */
.cg-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cg-tabela thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-strong);
}
.cg-tabela thead th.num,
.cg-tabela tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cg-tabela tbody td {
  padding: 10px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}
.cg-tabela tbody tr:last-child td {
  border-bottom: none;
}
.cg-tabela tbody tr:hover td {
  background: rgba(71, 37, 94, 0.04);
}
[data-theme="dark"] .cg-tabela tbody tr:hover td {
  background: rgba(184, 157, 208, 0.06);
}

/* Battle Plan (sub-aba) — tabela KPI | Valor | Notas */
.bp-tabela { width: 100%; border-collapse: collapse; }
.bp-tabela thead th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-strong);
}
.bp-tabela tbody td {
  padding: 3px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.bp-tabela thead th.num,
.bp-tabela tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bp-tabela tbody tr:last-child td { border-bottom: none; }
.bp-tabela tbody tr:hover td { background: rgba(71, 37, 94, 0.04); }
[data-theme="dark"] .bp-tabela tbody tr:hover td { background: rgba(184, 157, 208, 0.06); }
/* Linhas sem fonte automática (input manual) — esbatidas */
.bp-tabela tr.bp-linha-manual td { color: var(--text-secondary); }
/* Badges de origem do valor */
.bp-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 5px; border-radius: 6px; vertical-align: middle;
  background: #E3F2FD; color: #0D47A1; margin-left: 6px;
}
.bp-badge-man { background: #FFF3E0; color: #E65100; }
/* Tags Réel vs Prévision no cabeçalho de mês */
.bp-tag-real { font-size: 9px; font-weight: 700; color: var(--green, #1B5E20); }
.bp-tag-prev { font-size: 9px; font-weight: 700; color: #E65100; }
/* Células editáveis (input manual / Objectif) */
.bp-inp {
  width: 72px; text-align: right; font-size: 12px;
  padding: 3px 5px; border: 1px solid var(--border-strong, #ccc);
  border-radius: 5px; background: var(--surface, #fff); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bp-inp:focus { outline: none; border-color: var(--accent); background: rgba(71,37,94,0.04); }
.bp-inp-obj { background: rgba(255,243,224,0.5); }
[data-theme="dark"] .bp-inp { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .bp-inp-obj { background: rgba(230,81,0,0.10); }

/* ---- Vista SEMANAL (grelha de semanas agrupadas por mês) ---- */
.bp-tabela-sem { font-size: 11px; }
.bp-tabela-sem thead th { padding: 5px 7px; font-size: 10px; white-space: nowrap; }
.bp-tabela-sem tbody td { padding: 2px 6px; }
/* Cabeçalho de grupo de mês: separador à esquerda + centrado */
.bp-mesgrp {
  text-align: center !important; border-left: 2px solid var(--border-strong, #ccc);
  background: rgba(71,37,94,0.04);
}
.bp-mes-th, .bp-mes-cell {
  border-left: 1px dashed var(--border-strong, #ccc);
  font-weight: 600;
}
.bp-mes-cell { background: rgba(71,37,94,0.03); }
[data-theme="dark"] .bp-mes-cell { background: rgba(255,255,255,0.03); }
/* Semanas previsionais (futuro) esbatidas; reais a cheio */
.bp-sem-prev { color: var(--text-secondary); font-style: italic; }
.bp-sem-th.bp-sem-prev { opacity: 0.7; }
.bp-sem-vazio { color: var(--border-strong, #bbb); }
.bp-sem-cel { font-variant-numeric: tabular-nums; }
/* Badge "auto" (linha repartida por semana a partir de dados) */
.bp-badge-auto { background: #E3F2FD; color: #0D47A1; }
[data-theme="dark"] .bp-badge-auto { background: rgba(13,71,161,0.25); color: #90CAF9; }
.bp-tabela-sem .bp-inp { width: 58px; }
/* Células de semana editáveis (linhas manuais na vista semanal) */
.bp-sem-man { background: rgba(255,243,224,.30); padding: 2px 3px !important; }
[data-theme="dark"] .bp-sem-man { background: rgba(230,81,0,.08); }
.bp-tabela-sem .bp-inp-sem { width: 50px; padding: 2px 4px; }

/* ---- Réplica folha "Plan": 3 linhas por KPI (Objectif DdT/Prévision/Réel) ---- */
.bp-col-lin {
  position: sticky; left: 190px; z-index: 2; background: var(--bg-canvas);
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-secondary); white-space: nowrap;
  /* Largura que comporta "OBJETIVO DDT" + guarda dura: nunca deixa o texto
     passar para as colunas de período (era o que sobrepunha o 1.º quadrado). */
  overflow: hidden; text-overflow: ellipsis;
  width: 100px; min-width: 100px; max-width: 100px;
}
.bp-tabela-sem .bp-col-lin { left: 150px; width: 92px; min-width: 92px; max-width: 92px; }
.bp-tabela th.bp-col-lin { z-index: 6; top: 0; }
.bp-kpi-nome { font-weight: 700; vertical-align: top; }
/* 3 linhas do bloco: Objectif esbatido, Prévision azul-claro, Réel a cheio */
tr.bp-lin-row-obj td { color: var(--text-tertiary); }
.bp-prev-cel, tr.bp-lin-row-prev .bp-col-lin { color: var(--accent-light, #8a6fa8); }
tr.bp-lin-row-reel td { font-weight: 600; }
tr.bp-lin-row-reel .bp-col-lin { color: var(--text); font-weight: 700; }
.bp-obj-cel { background: rgba(255,243,224,.18); }
[data-theme="dark"] .bp-obj-cel { background: rgba(230,81,0,.06); }
/* Separador grosso a fechar cada bloco de KPI */
tr.bp-bloco-fim td { border-bottom: 2px solid var(--border-strong); }

/* ============================================================
   Cabeçalho BP de 2 níveis — anula o sticky/estilo herdado de
   `.tabela-wrap thead th` (dashboard_v2.css: sticky;top:0;cursor:
   pointer;background:#ECE4F2) que colava AS DUAS linhas em top:0
   (sobrepostas: "REAL" por cima de "LINHA", títulos de mês escondidos)
   e ainda partia o dark mode. Specificity > `.tabela-wrap thead th`.
   ============================================================ */
.tabela-wrap .bp-tabela thead th {
  cursor: default; box-shadow: none;
  background: var(--surface, #fff); color: var(--text-secondary);
}
.tabela-wrap .bp-tabela thead th:hover { background: var(--surface, #fff); }
/* Linha-grupo (mês) cola ao topo; linha-período cola logo por baixo
   (offset = altura real da linha-grupo, medida em JS → --bp-h1). */
.bp-tabela thead tr.bp-head-grp th { position: sticky; top: 0; z-index: 4; }
.bp-tabela thead tr.bp-head-col th { position: sticky; top: var(--bp-h1, 30px); z-index: 4; }
/* Cantos fixos (Rubrique/Ligne): topo + esquerda, por cima de tudo. */
.tabela-wrap .bp-tabela thead th.bp-col-rub,
.tabela-wrap .bp-tabela thead th.bp-col-lin { top: 0; z-index: 8; }
/* Total / Réel Cumulé (rowspan=2): colam ao topo, acima das semanas. */
.tabela-wrap .bp-tabela thead th.bp-th-total,
.tabela-wrap .bp-tabela thead th.bp-th-cum { top: 0; z-index: 5; }
/* Sem zebra nas tabelas BP (o ritmo é dado pelos blocos de 3 linhas). */
.bp-tabela tbody tr { background: transparent !important; }
/* Nome do KPI (rowspan=3) centrado verticalmente — como célula fundida. */
.bp-tabela td.bp-kpi-nome { vertical-align: middle; }

/* ============================================================
   Battle Plan — redesenho alinhado com a folha "Plan" do Excel
   ============================================================ */

/* ---- Bloco-resumo superior (rows 8–12 da folha Plan) ---- */
.bp-meta-wrap { margin: 0 0 4px; }
.bp-resumo {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px 16px;
  padding: 8px 14px; margin: 4px 0 14px;
  background: var(--accent-tint); border: 1px solid var(--border-strong);
  border-radius: 12px; font-size: 12px;
}
.bp-resumo-id { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; }
.bp-resumo-k {
  color: var(--text-secondary); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600;
}
.bp-resumo-v { color: var(--text); font-weight: 700; margin-right: 10px; }
.bp-score-chip { padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.bp-score-fav { background: rgba(46,125,50,.14); color: var(--green); }
.bp-score-def { background: rgba(192,0,0,.12); color: var(--red); }
.bp-score-neutral { background: var(--accent-tint); color: var(--text-secondary); }
[data-theme="dark"] .bp-score-fav { background: rgba(111,207,106,.16); }
[data-theme="dark"] .bp-score-def { background: rgba(255,107,107,.16); }

/* ---- Banda de secção (substitui o bloco-titulo neutro) ---- */
.bp-sec-banda {
  margin: 18px 0 0; padding: 7px 12px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-tint);
  border-left: 3px solid var(--accent); border-radius: 8px 8px 0 0;
}

/* ---- Banda de secção COMO LINHA da tabela única (colspan total) ----
   Agrupa as secções numa só tabela; o rótulo fica sticky à esquerda para
   continuar legível durante o scroll horizontal das semanas/meses.
   STICKY-TOP: cola por baixo do cabeçalho (top = altura total do thead,
   medida em JS → --bp-head-h) e, ao chegar a secção seguinte, esta desliza
   por cima (z-index igual + DOM posterior; opaca p/ não transparecer).
   z-index 3: acima do corpo (z0/z2) mas abaixo do cabeçalho (z4–8). */
.bp-tabela tr.bp-sec-row td.bp-sec-banda-cell {
  padding: 0;
  position: sticky; top: var(--bp-head-h, 58px); z-index: 3;
  /* Fundo SÓLIDO e mais saturado que as células de dados (--bp-band-bg sobre
     canvas opaco) → lê-se como barra "por cima", não um lavado que se
     confunde com o conteúdo. + sombra inferior: as linhas tucam-se por baixo
     com profundidade, em vez de parecerem passar através do subtítulo. */
  background: linear-gradient(var(--bp-band-bg), var(--bp-band-bg)), var(--bg-canvas);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 5px 7px -4px var(--bp-edge-shadow);
}
.bp-tabela tbody tr.bp-sec-row:first-child td.bp-sec-banda-cell { border-top: none; }
.bp-tabela tr.bp-sec-row td.bp-sec-banda-cell .bp-sec-banda-txt {
  position: sticky; left: 0;
  display: inline-block; padding: 7px 12px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent);
}
/* A linha-banda não recebe o hover das linhas de dados (mantém-se opaca). */
.bp-tabela tbody tr.bp-sec-row:hover td.bp-sec-banda-cell {
  background: linear-gradient(var(--bp-band-bg), var(--bp-band-bg)), var(--bg-canvas);
}

/* ---- Banda de agrupamento do thead (rows 8–9 do Excel) ---- */
.bp-tabela thead tr.bp-head-grp th {
  text-align: center; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; font-weight: 700;
  color: var(--accent); background: var(--accent-tint);
  border-bottom: 1px solid var(--border-strong);
}
.bp-grp-obj { background: rgba(46,125,50,.10) !important; color: var(--green) !important; }
[data-theme="dark"] .bp-grp-obj { background: rgba(111,207,106,.12) !important; }

/* ---- Bloco-resumo de colunas: Objectif DdT · Réel Cum. · Reste ---- */
.bp-th-obj,   .bp-cell-obj   { background: rgba(255,243,224,.55); }
.bp-th-cum,   .bp-cell-cum   { background: rgba(46,125,50,.08); }
.bp-th-reste, .bp-cell-reste { background: rgba(237,125,49,.10); }
[data-theme="dark"] .bp-th-obj,   [data-theme="dark"] .bp-cell-obj   { background: rgba(230,81,0,.12); }
[data-theme="dark"] .bp-th-cum,   [data-theme="dark"] .bp-cell-cum   { background: rgba(111,207,106,.10); }
[data-theme="dark"] .bp-th-reste, [data-theme="dark"] .bp-cell-reste { background: rgba(255,166,102,.12); }
.bp-cell-cum { font-weight: 600; }

/* ---- 1ª coluna (Rubrique) fixa no scroll horizontal — largura PINADA
   para o offset da coluna "Linha" (também fixa) alinhar exatamente ---- */
.bp-tabela th.bp-col-rub, .bp-tabela td.bp-col-rub {
  position: sticky; left: 0; text-align: left;
  background: var(--bg-canvas);            /* opaco: tapa o conteúdo por baixo */
  width: 190px; min-width: 190px; max-width: 190px;
  white-space: normal; word-break: break-word;
}
.bp-tabela td.bp-col-rub { z-index: 2; }
.bp-tabela th.bp-col-rub { z-index: 6; top: 0; }   /* canto: por cima de tudo */
.bp-tabela-sem th.bp-col-rub, .bp-tabela-sem td.bp-col-rub {
  width: 150px; min-width: 150px; max-width: 150px;
}
.bp-tabela tr.bp-linha-manual td.bp-col-rub { color: var(--text-secondary); }

/* ---- Separadores grossos (calhas entre meses / antes do Total) ---- */
.bp-sep-mes { border-left: 2px solid var(--accent) !important; }
.bp-mesgrp { background: var(--accent-tint); }

/* ---- Célula Total destacada (banda de fecho do trimestre) ---- */
.bp-tabela td.bp-cell-total {
  background: var(--accent-tint); font-weight: 700;
}
.bp-tabela th.bp-th-total { background: var(--accent-tint); }

/* ============================================================
   Cabeçalho BP 100% OPACO — numa tabela única (alta), as linhas do
   corpo viam-se POR BAIXO do cabeçalho fixo, porque --surface (62%)
   e --accent-tint (8%) são translúcidos (e as células-canto LINHA/
   RUBRICA herdavam o accent-tint da linha-grupo). Compomos a tinta
   sobre o canvas OPACO: linear-gradient(cor,cor) = camada-imagem
   (só a última camada do `background` pode ser cor sólida). Mantém
   o aspeto fosco, mas nada do corpo transparece. Specificity (0,3,2)
   > linha-grupo (0,2,3) e fallback (0,2,2). Tema-correto (o canvas
   muda no dark mode). ============================================ */
.tabela-wrap .bp-tabela thead th.bp-mes-th,
.tabela-wrap .bp-tabela thead th.bp-sem-th {
  background: linear-gradient(var(--surface), var(--surface)), var(--bg-canvas);
}
.tabela-wrap .bp-tabela thead th.bp-mesgrp,
.tabela-wrap .bp-tabela thead th.bp-th-total {
  background: linear-gradient(var(--accent-tint), var(--accent-tint)), var(--bg-canvas);
}
.tabela-wrap .bp-tabela thead th.bp-th-cum {
  background: linear-gradient(rgba(46,125,50,.10), rgba(46,125,50,.10)), var(--bg-canvas);
}
.tabela-wrap .bp-tabela thead th.bp-col-rub,
.tabela-wrap .bp-tabela thead th.bp-col-lin {
  background: var(--bg-canvas);
}

/* ============================================================
   Sombras de profundidade — o conteúdo desliza "por baixo" do
   cabeçalho fixo e das colunas fixas (RUBRICA/LINHA), dando camadas.
   Cor temática (var) para ler bem em claro e escuro. Spread negativo
   mantém a sombra estreita → contínua entre células adjacentes, sem
   costuras. ============================================================ */
.bp-tabela { --bp-edge-shadow: rgba(33,20,48,.22); --bp-band-bg: rgba(71,37,94,.13); }
[data-theme="dark"] .bp-tabela { --bp-edge-shadow: rgba(0,0,0,.60); --bp-band-bg: rgba(184,157,208,.16); }

/* (a) borda inferior do cabeçalho — sombra p/ baixo, contínua em toda a
   largura (linha-período + cantos rowspan-2 Rubrique/Ligne/Total/Cumulé). */
.tabela-wrap .bp-tabela thead tr.bp-head-col th,
.tabela-wrap .bp-tabela thead th.bp-col-rub,
.tabela-wrap .bp-tabela thead th.bp-th-total,
.tabela-wrap .bp-tabela thead th.bp-th-cum {
  box-shadow: 0 6px 7px -4px var(--bp-edge-shadow);
}
/* (b) borda direita do bloco fixo-esquerdo (a coluna LINHA é a mais à
   direita) sobre as colunas de período, ao rolar na horizontal. */
.bp-tabela tbody td.bp-col-lin {
  box-shadow: 7px 0 8px -5px var(--bp-edge-shadow);
}
/* (c) canto LINHA do cabeçalho acumula as DUAS sombras (baixo + direita). */
.tabela-wrap .bp-tabela thead th.bp-col-lin {
  box-shadow: 0 6px 7px -4px var(--bp-edge-shadow),
              7px 0 8px -5px var(--bp-edge-shadow);
}

/* ---- Semáforo CxF na coluna Var (quadradinho estilo Excel) ---- */
.bp-cell-var.txt-good { color: var(--green); font-weight: 700; }
.bp-cell-var.txt-bad  { color: var(--red);   font-weight: 700; }
.bp-flag {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; vertical-align: middle;
}
.bp-cell-var.txt-good .bp-flag { background: var(--green); }
.bp-cell-var.txt-bad  .bp-flag { background: var(--red); }

.cg-yoy.ok  { color: var(--green); font-weight: 600; }
.cg-yoy.bad { color: var(--red);   font-weight: 600; }
.cg-yoy     { color: var(--text-secondary); }

/* ---------- Responsividade leve ---------- */
@media (max-width: 1300px) {
  .cg-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cg-chart-grid { grid-template-columns: 1fr; }
  .utility-bar { flex-wrap: wrap; }
  .utility-spacer { flex-basis: 100%; height: 0; }
}
@media (max-width: 720px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .cg-segmented { width: 100%; overflow-x: auto; }
}

/* ============== Custo de Estrutura (sub-aba CG) ============== */
.ce-sliders {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 4px;
}
.ce-slider-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr minmax(150px, auto);
  gap: 16px;
  align-items: center;
}
.ce-slider-label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-1);
}
.ce-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.ce-slider-value {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--text-2);
  text-align: right;
  min-width: 130px;
}
.ce-sliders-footer {
  margin-top: 16px;
  text-align: right;
}
.ce-total-row td {
  border-top: 2px solid var(--border);
}

/* === Utility classes (replace inline styles) === */
.mt-6 { margin-top: 6px; }
.fs-11 { font-size: 11px; }
@media (max-width: 720px) {
  .ce-slider-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ce-slider-value { text-align: left; }
}