/* ============================================================
   Sistema Swisz — Design System (brand: Swisz 2025)
   TOKENS vivem em tokens.css (carregado ANTES deste arquivo):
   brand (--sw-*) → semântica (--primary/--ok/--danger/--fs-*/--sp-*) → aliases legados
   (--pumpkin/--text/--muted/...). NÃO redefinir tokens aqui.
   ============================================================ */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: var(--font-display); font-style: italic; }   /* a serif da MARCA (Liberation Serif Italic) */

/* ── IDENTIDADE (E2): tipografia da marca aplicada ao chrome ──
   Título de página + valores de KPI em SERIF ITÁLICO — a assinatura visual do manual 2025.
   Aplicado por seletor em bloco: muda TODAS as telas sem tocar nos módulos JS. */
.crumb h1 {
  font-family: var(--font-display) !important; font-style: italic;
  font-size: 22px !important; font-weight: 700; letter-spacing: .2px !important;
}
.rup-kpi-v, .rhc-kpi-v, .rent-kpi-v, .ped-kpi-v, .fin-kpi-v, .ria-kpi-v,
.vpain-card-v, .op-etapa-v, .ov-hero .oh-stat .v, .kpi .k-num, .dre-v {
  font-family: var(--font-display); font-style: italic; font-weight: 700 !important;
  letter-spacing: .2px;
}
/* explicativas das telas: o h2 didático também assina com a serif */
.rup-explica-tx h2, .rent-intro-tx h2, .portal-explica h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
}

/* ── Scrollbars laranja Swisz (design system — cobre TODOS os conteineres rolaveis) ── */
html { scrollbar-color: var(--sw-pumpkin, #F27127) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 999px; border: 3px solid var(--bg, #FBF8F5); }
::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── Layout ───────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100vh; overflow: hidden; transition: grid-template-columns .22s ease; }
.app.sidebar-collapsed { grid-template-columns: 0 1fr; }
.app.sidebar-collapsed .sidebar { opacity: 0; padding-left: 0; padding-right: 0; pointer-events: none; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(170deg, var(--arapawa) 0%, var(--arapawa-2) 100%);
  color: #DCEAEC;
  display: flex; flex-direction: column;
  padding: 18px 14px;
  overflow: hidden; min-width: 0; white-space: nowrap;
  transition: opacity .18s ease, padding .22s ease;
}
/* região rolável (nav) — o rodapé fica FIXO embaixo (não some no scroll) */
/* Scrollbar DISCRETA na sidebar escura: thumb translúcido claro (não o laranja berrante).
   scrollbar-width/color (thin + rgba) deixa Firefox E Chrome iguais e sutis. */
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 8px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: padding-box; border-radius: 999px; border: 2px solid transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.40); background-clip: padding-box; }

.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; }
.brand img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.brand .b-name { font-size: 19px; font-weight: 700; letter-spacing: .5px; color: #fff; }
.brand .b-name .serif { font-weight: 400; }
.brand .b-sub { font-size: 10px; letter-spacing: 2.5px; color: var(--sandy); margin-top: 1px; text-transform: uppercase; }

.nav-label { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #7FA2AC; padding: 14px 10px 7px; }

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 10px; margin-bottom: 2px;
  color: #C6DADE; font-size: 13.5px; font-weight: 500;
  transition: background .15s, color .15s; position: relative;
}
.nav-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .9; }
.nav-item .dot-accent { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--pumpkin); color: #fff; box-shadow: 0 6px 16px rgba(242,113,39,.35); }
.nav-item.active svg { opacity: 1; }
.nav-item .count {
  margin-left: auto; font-size: 11px; background: rgba(255,255,255,.12);
  padding: 1px 7px; border-radius: 20px; color: #DCEAEC;
}
.nav-item.active .count { background: rgba(255,255,255,.25); color: #fff; }

/* Sub-menu de setor na sidebar (RH) */
.nav-subnav { margin: 2px 0 8px; }
.nav-sub { display: block; padding: 6px 10px 6px 38px; margin: 1px 0; border-radius: 8px; color: #9FBAC1; font-size: 13px; font-weight: 500; cursor: pointer; position: relative; transition: background .12s, color .12s; }
.nav-sub:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-sub.active { color: #fff; background: rgba(246,152,97,.16); font-weight: 600; }
.nav-sub.active::before { content: ''; position: absolute; left: 19px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #F69861; }
.nav-sub-label { padding: 9px 10px 3px 38px; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #6E8B94; }
/* Cabeçalho de grupo recolhível dentro do sub-menu (ex.: "Fornecedores" em Produção) — mesmo
   visual do rótulo de seção acima, mas clicável (expande/recolhe os itens de dentro). */
.nav-group-toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; border-radius: 6px; margin: 0 6px 0 0; padding-right: 12px; user-select: none; transition: color .12s; }
.nav-group-toggle:hover { color: #CFE3E8; }
.nav-group-toggle.open { color: #9FBAC1; }
.nav-group-caret { flex-shrink: 0; opacity: .85; transition: transform .15s; }
.nav-group-toggle.open .nav-group-caret { transform: rotate(90deg); }
.nav-sub-sep { height: 1px; background: rgba(255,255,255,.08); margin: 6px 14px 6px 38px; }
.sidebar-collapsed .nav-subnav { display: none; }
/* sub-página no cabeçalho (breadcrumb do RH) */
.crumb-sub { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--line); }

.sidebar-foot { flex-shrink: 0; margin-top: 0; padding-top: 13px; position: relative; border-top: 1px solid rgba(255,255,255,.08); }
.side-tag { text-align: center; font-size: 10px; letter-spacing: 3px; color: var(--sandy); font-weight: 700; margin-bottom: 11px; opacity: .85; }
.user-chip {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; width: 100%;
  background: rgba(255,255,255,.06); border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.user-chip:hover, .user-chip.active { background: rgba(255,255,255,.12); }
.user-chip .avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--pumpkin), var(--sienna));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
}
.user-chip .u-name { font-size: 12.5px; color: #fff; font-weight: 600; }
.user-chip .u-role { font-size: 10.5px; color: #8FB0B9; text-transform: capitalize; }
.user-chip .uc-caret { color: #8FB0B9; flex-shrink: 0; transition: transform .15s; }
/* Menu do usuário (abre acima do chip) */
.user-menu { position: absolute; left: 0; right: 0; bottom: calc(100% - 2px); margin-bottom: 8px;
  background: #20333A; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); display: none; z-index: 40; }
.user-menu.open { display: block; }
.um-head { padding: 8px 10px 9px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 5px; }
.um-head .u-name { font-size: 13px; color: #fff; font-weight: 700; }
.um-head .um-mail { font-size: 11px; color: #8FB0B9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit;
  font-size: 13px; color: #DCE7EA; background: transparent; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.um-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.um-item.on { color: var(--sandy); }
.um-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.um-logout { color: #F3B7A2; }
.um-logout:hover { background: rgba(217,80,30,.18); color: #fff; }

/* ── Main ─────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 26px; background: var(--surface); border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.crumb { display: flex; align-items: center; gap: 9px; min-width: 0; }
.crumb .c-accent { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.crumb { min-width: 0; }
.crumb h1 { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); letter-spacing: -.2px; white-space: nowrap; }
.crumb .c-sum { font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }

.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 12px; margin-left: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { white-space: nowrap; flex-shrink: 0; }
.tab {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 15px; border: none; background: transparent; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-soft); transition: all .15s;
}
.tab svg { width: 15px; height: 15px; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--chocolate); box-shadow: var(--shadow); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; width: 220px;
}
.search input { border: none; background: transparent; outline: none; font-family: inherit; font-size: 13px; width: 100%; color: var(--text); }
.search svg { width: 15px; height: 15px; color: var(--muted); }
.tagline { font-size: 10px; letter-spacing: 2px; color: var(--netuno); font-weight: 700; }

.view { flex: 1; overflow-y: auto; padding: 20px 24px 14px; }
.view-slot { display: contents; }   /* wrapper transparente por render (anti-corrida); não afeta layout */

/* ── KPI cards ────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 17px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent, var(--pumpkin)); }
.kpi .k-label { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.kpi .k-value { font-size: 26px; font-weight: 700; color: var(--text); margin: 8px 0 4px; letter-spacing: -.5px; }
.kpi .k-foot { display: flex; align-items: center; gap: 7px; }
.kpi .k-delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; }
.k-delta.up { background: #E7F3EC; color: var(--ok); }
.k-delta.down { background: #FCEAE3; color: var(--chocolate); }
.k-delta.flat { background: #EEF2F3; color: var(--text-soft); }
.kpi .k-hint { font-size: 11px; color: var(--muted); }

/* ── Section heading ──────────────────────────────────────── */
.sec-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 13px; }
.sec-h h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-soft); margin: 0; }
.sec-h .line { flex: 1; height: 1px; background: var(--line); }

/* ── Kanban ───────────────────────────────────────────────── */
/* Aviso do "sandbox" do espelho de Produtos: arrastar aqui é só pra validar (não persiste) */
.board-sandbox { font-size: 12px; color: #8a5a00; background: #fff7e6; border: 1px solid #ffe1a8; border-radius: 8px; padding: 7px 12px; margin-bottom: 12px; }
.board-sandbox b { font-weight: 700; }
/* #12/#13 — toolbar do board de Produtos + multi-seleção */
.board-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.board-tb { border: 1px solid var(--border, #e2e8f0); background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text, #334155); }
.board-tb:hover { background: #f1f5f9; }
.board-tb.on { background: var(--pumpkin, #D9501E); color: #fff; border-color: var(--pumpkin, #D9501E); }
.board-tb.arq { background: #fff7e6; border-color: #ffe1a8; color: #8a5a00; }
.board-selbar { font-size: 12.5px; color: var(--muted, #64748b); display: inline-flex; align-items: center; gap: 8px; }
.board-sel-hint { font-style: italic; }
.card.card-sel { outline: 2px solid var(--pumpkin, #D9501E); outline-offset: 1px; }
/* #13/#14 — área de Arquivados (overlay) */
.mktarq-ov { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 6000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mktarq-modal { background: #fff; border-radius: 12px; width: 560px; max-width: 100%; max-height: 82vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.mktarq-page { max-width: 760px; }
.mktarq-h-page { position: static; padding: 2px 0 14px; font-size: 18px; }
.mktarq-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border, #e2e8f0); font-weight: 700; font-size: 15px; position: sticky; top: 0; background: #fff; }
.mktarq-x { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #94a3b8; }
.mktarq-x:hover { color: #334155; }
.mktarq-loading, .mktarq-empty { padding: 28px 16px; text-align: center; color: var(--muted, #64748b); font-size: 13px; line-height: 1.5; }
.mktarq-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px; }
.mktarq-pasta { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border, #e2e8f0); background: #f8fafc; border-radius: 10px; padding: 12px; cursor: pointer; text-align: left; }
.mktarq-pasta:hover { background: #eef2f6; }
.mktarq-folder { font-size: 20px; }
.mktarq-pnome { flex: 1; font-weight: 600; font-size: 13px; }
.mktarq-pcount { font-size: 11px; font-weight: 700; color: #fff; background: #94a3b8; border-radius: 10px; padding: 1px 7px; }
.mktarq-back { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; font-size: 13px; }
.mktarq-back button { border: none; background: none; color: var(--pumpkin, #D9501E); font-weight: 600; cursor: pointer; font-size: 13px; }
.mktarq-back b { font-size: 14px; }
.mktarq-pc2 { color: var(--muted, #64748b); font-size: 12px; }
.mktarq-busca { display: block; width: calc(100% - 32px); margin: 4px 16px 10px; padding: 8px 11px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-size: 13px; box-sizing: border-box; }
.mktarq-cards { display: flex; flex-direction: column; gap: 7px; padding: 0 16px 16px; }
.mktarq-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 9px; padding: 9px 11px; }
.mktarq-cb { flex: 1; min-width: 0; }
.mktarq-ctitle { font-weight: 600; font-size: 13px; }
.mktarq-cmeta { font-size: 11px; color: var(--muted, #64748b); margin-top: 2px; }
.mktarq-desarq { border: 1px solid var(--pumpkin, #D9501E); background: #fff; color: var(--pumpkin, #D9501E); border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mktarq-desarq:hover { background: #fff2e0; }
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; min-height: 120px; cursor: grab; }
.board.grabbing { cursor: grabbing; user-select: none; }
.board.grabbing .card { pointer-events: none; }
.col {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; max-height: calc(100vh - 148px);
}
.board-addcol { flex-shrink: 0; width: 260px; padding-top: 2px; }
.board-addcol-btn { width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1.5px dashed var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
.board-addcol-btn:hover { background: var(--cinderela); color: var(--chocolate); border-color: var(--pumpkin); }
.col-head { display: flex; align-items: center; gap: 9px; padding: 13px 14px 10px; }
.col-head .c-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent, var(--pumpkin)); }
.col-head .c-title { font-size: 13px; font-weight: 700; color: var(--text); }
.col-head .c-count { font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 1px 8px; border-radius: 20px; }
.col-head .c-add { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; border: none; background: transparent; color: var(--muted); display: grid; place-items: center; font-size: 17px; line-height: 1; }
.col-head .c-add:hover { background: var(--cinderela); color: var(--chocolate); }
.col-body { padding: 4px 10px 12px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 9px; min-height: 30px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; box-shadow: var(--shadow); cursor: pointer; transition: box-shadow .15s, transform .05s;
  overflow: hidden; /* evita scroll lateral dentro do card */
  flex-shrink: 0;   /* NÃO encolher: cada card tem a altura do conteúdo (col-body rola) */
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--sw-cinderela); transform: translateY(-1px); }
.card:active { cursor: grabbing; }
.card.sortable-ghost { opacity: .4; }
.card.sortable-drag { box-shadow: var(--shadow-lg); transform: rotate(1.5deg); }
.card .c-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; letter-spacing: .2px; }
.card .c-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.card .c-desc {
  font-size: 12px; color: var(--text-soft); margin-top: 5px; line-height: 1.45;
  overflow-wrap: anywhere; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .c-meta { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.prio { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: .3px; }
.prio.alta { background: #FCE3DA; color: var(--chocolate); }
.prio.media { background: #FFEFD2; color: var(--warn); }
.prio.baixa { background: #E9F1F0; color: #3D7A6F; }
.card .c-due { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.card .c-check { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.card .c-assignee { margin-left: auto; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }

/* ── Spreadsheet ──────────────────────────────────────────── */
.sheet-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.sheet-tools { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sheet-tools .s-info { font-size: 12px; color: var(--muted); }
.sheet-tools .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft);
  transition: all .15s;
}
.btn:hover { border-color: var(--sandy); color: var(--chocolate); }
.btn.primary { background: var(--pumpkin); border-color: var(--pumpkin); color: #fff; }
.btn.primary:hover { background: var(--chocolate); border-color: var(--chocolate); color: #fff; }
.btn svg { width: 14px; height: 14px; }
.btn.saved { color: var(--ok); border-color: #B6DCC4; }

.sheet-scroll { overflow: auto; max-height: calc(100vh - 230px); }
table.sheet { border-collapse: collapse; width: 100%; font-size: 13px; }
table.sheet th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-soft); padding: 11px 13px; border-bottom: 2px solid var(--line-2); white-space: nowrap;
}
table.sheet th.sheet-th { cursor: pointer; user-select: none; }
table.sheet th.sheet-th:hover { color: var(--text); background: var(--surface-3, var(--surface-2)); }
.sheet-sort { color: var(--chocolate); font-weight: 800; }
table.sheet td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid #F4EEE8; }
table.sheet tr:hover td { background: #FEFBF8; }
table.sheet td .cell {
  padding: 9px 13px; outline: none; min-height: 20px; min-width: 80px;
  font-variant-numeric: tabular-nums;
}
table.sheet td .cell:focus { background: #FFF6EE; box-shadow: inset 0 0 0 2px var(--sandy); border-radius: 3px; }
table.sheet td.num .cell { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td .idx { color: var(--muted); font-size: 11px; text-align: center; }
.cell-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; margin: 6px 0; }

/* ── Overview ─────────────────────────────────────────────── */
.ov-hero {
  background: linear-gradient(120deg, var(--arapawa) 0%, var(--arapawa-2) 55%, #163740 100%);
  border-radius: 18px; padding: 26px 28px; color: #fff; position: relative; overflow: hidden; margin-bottom: 22px;
}
.ov-hero::after {
  content:''; position:absolute; right:-40px; top:-40px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(242,113,39,.35), transparent 70%);
}
.ov-hero::before {
  content:''; position:absolute; right:24px; bottom:-26px; width: 230px; height: 150px;
  background: url('/brand/swisz-mark.png') no-repeat center / contain;
  filter: brightness(0) invert(1); opacity: .07; pointer-events: none;
}
.ov-hero .oh-tag { font-size: 10px; letter-spacing: 3px; color: var(--sandy); font-weight: 700; }
.ov-hero h2 { font-size: 25px; margin: 6px 0 4px; font-weight: 700; }
.ov-hero p { color: #B7CDD3; font-size: 13px; max-width: 560px; line-height: 1.5; margin: 0; }
.ov-hero .oh-stats { display: flex; gap: 30px; margin-top: 20px; position: relative; }
.ov-hero .oh-stat .v { font-size: 23px; font-weight: 700; }
.ov-hero .oh-stat .l { font-size: 11px; color: #9FBAC1; margin-top: 1px; }

.sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sector-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, box-shadow .15s; position: relative; overflow: hidden;
}
.sector-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sector-card .sc-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.sector-card .sc-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.sector-card .sc-icon svg { width: 20px; height: 20px; }
.sector-card .sc-name { font-size: 15px; font-weight: 700; color: var(--text); }
.sector-card .sc-sum { font-size: 12px; color: var(--text-soft); line-height: 1.45; min-height: 34px; }
.sector-card .sc-foot { display: flex; gap: 16px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.sector-card .sc-metric .m-v { font-size: 17px; font-weight: 700; color: var(--text); }
.sector-card .sc-metric .m-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* ── Mini chart (bars) ────────────────────────────────────── */
.minibars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 10px; }
.minibars .bar { flex: 1; background: linear-gradient(var(--accent, var(--pumpkin)), var(--sienna)); border-radius: 4px 4px 0 0; min-height: 4px; opacity: .85; }

/* ── Loading / empty ──────────────────────────────────────── */
/* Loader de marca: a fita Swisz (mark) mascarada com um gradiente laranja que VARRE em loop
   perfeito (palíndromo p/ não dar "pulo") + leve float. Vale p/ TODA tela que usa .loading. */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60vh; color: var(--text-soft); gap: 4px; }
.loading .spinner { order: 0; }
.loading::after { order: 1; }
.loading span { order: 2; margin-top: 10px; }
.loading span { font-size: 13px; letter-spacing: .2px; opacity: .9; }
.spinner {
  width: 96px; height: 52px; border: 0; border-radius: 0;
  background: url('/img/brand/lemniscata.png') center / contain no-repeat;
  animation: swz-breathe 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(242,113,39,.25));
}
.loading::after {
  content: 'Swisz';
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: 19px; color: var(--sw-arapawa); letter-spacing: .5px; opacity: .8;
}
@keyframes swz-breathe { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: .85; } }
@keyframes swz-sweep { to { background-position: -200% 50%; } }
@keyframes swz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: swz-sweep 6s linear infinite; } }
.empty { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .tabs { margin-left: 0; }
  .crumb .c-sum { max-width: 260px; }
  .painel-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 62px; }
  .brand .b-name, .brand .b-sub, .nav-item > span:not(.count), .nav-label, .user-chip > div, .side-tag, .nav-item .count { display: none; }
  .brand { justify-content: center; padding: 6px 0 16px; }
  .nav-item { justify-content: center; padding: 11px 0; }
  .user-chip { justify-content: center; padding: 9px 0; }
  .search { width: 150px; }
}
@media (max-width: 560px) {
  .view { padding: 16px 14px 32px; }
  .topbar { padding: 12px 14px; }
  .search { display: none; }
  .ov-hero .oh-stats { gap: 18px; flex-wrap: wrap; }
  .col { width: 84vw; }
}

/* ── Mobile (≤600px): tabelas roláveis, filtros/busca em largura cheia, modais ── */
@media (max-width: 600px) {
  .view { padding: 14px 12px 30px; }
  /* tabelas: rolagem horizontal suave dentro do container (não estoura a página) */
  .ped-tablewrap, .rhc-table-wrap, .fin-table-wrap, .vrel-wrap, .op-table-wrap { -webkit-overflow-scrolling: touch; }
  /* KPIs sempre em 2 colunas no celular */
  .ped-kpis, .rhc-kpis, .rup-kpis, .rent-kpis, .fin-kpis, .ria-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 9px; }
  /* barra de filtros (pedidos/ficha/operação): busca ocupa a linha toda, chips quebram */
  .ped-bar { gap: 8px; }
  .ped-busca { margin-left: 0; flex: 1 1 100%; }
  .ped-busca input { width: 100%; }
  .ped-filtros { width: 100%; }
  /* toolbar do RH: busca + selects + ações ocupam a largura */
  .rhc-toolbar { gap: 8px; }
  .rhc-filtros { width: 100%; gap: 7px; }
  .rhc-busca-wrap { width: 100%; flex: 1 1 100%; }
  .rhc-busca { width: 100%; }
  .rhc-sel { flex: 1 1 45%; max-width: none; }
  .rhc-acoes { width: 100%; }
  .rhc-acoes .rhc-btn, .rhc-acoes .rhc-btn-ghost { flex: 1; justify-content: center; }
  /* modais: menos respiro lateral, formulário em 1 coluna */
  .ria-overlay, .rhc-overlay, .modal-ov { padding: 10px; }
  .rhc-grid { grid-template-columns: 1fr; }
  /* abas dão dica de que rolam (degradê na borda direita) */
  .tabs { position: relative; -webkit-overflow-scrolling: touch; }
}

/* ── Capa do card + Modal ─────────────────────────────────── */
/* Capa do card no quadro: 160px (alinhado ao Trello), com placeholder se não houver foto */
.card-cov { height: 160px; margin: -12px -12px 10px; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--surface-2); }
.card-cov img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.card-cov.ph { height: 48px; background: linear-gradient(135deg, var(--cinderela), var(--pattens)); }
/* Cards do Trello sem capa: oculta o espaço (fiel ao Trello — sem capa = sem área) */
.card-cov.no-cov { display: none; }

/* ── Toggle da sidebar (na topbar) ────────────────────────── */
.side-toggle {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft);
  display: grid; place-items: center; transition: all .15s;
}
.side-toggle:hover { background: var(--surface-2); color: var(--chocolate); border-color: var(--line-2); }
.side-toggle svg { width: 18px; height: 18px; }

/* ── Card estilo Trello: etiquetas em barra + rodapé ──────── */
.card .c-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.card .lbl { height: 8px; min-width: 38px; border-radius: 4px; }
/* Etiqueta COM nome: vira pílula com o texto (estilo Trello expandido) */
.card .lbl.lbl-txt { height: auto; min-width: 0; max-width: 100%; padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.35; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .c-name { font-size: 14px; }
.card .c-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.card .c-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 11px; }
.card .cb { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); font-weight: 600; }
.card .cb svg { width: 14px; height: 14px; }
.card .cb i { font-style: normal; }
.card .cb.done { color: var(--ok); }
/* Tags preenchíveis do Sistema no card (SKU / Nº variantes) — sempre no mesmo formato */
.card .cb.cb-tag { font-weight: 700; color: #33566a; background: #eef3f6; border-radius: 4px; padding: 1px 6px; }
.card .c-avs { margin-left: auto; display: flex; align-items: center; }
.card .c-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface); margin-left: -7px; }
.card .c-av:first-child { margin-left: 0; }
.card .c-av.more { background: var(--muted); }

.modal-ov { position: fixed; inset: 0; background: rgba(27,67,80,.55); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; z-index: 1000; padding: 30px 16px; overflow-y: auto; animation: fade .15s ease; }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 680px; box-shadow: var(--shadow-lg); position: relative; margin-bottom: 42px; }
.modal-x { position: absolute; right: 14px; top: 13px; width: 32px; height: 32px; border: none; background: var(--surface-2); border-radius: 9px; font-size: 20px; line-height: 1; color: var(--text-soft); }
.modal-x:hover { background: var(--cinderela); color: var(--chocolate); }
.m-mem { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; }
.m-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.m-gallery img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: block; }
.m-files { display: flex; flex-direction: column; gap: 7px; }
.m-file { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--netuno); background: var(--surface-2); padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); overflow-wrap: anywhere; }
.m-file:hover { color: var(--chocolate); border-color: var(--sandy); }
.m-file svg { flex-shrink: 0; }

/* Tempo parado na coluna + histórico de atividade */
.m-stuck { font-size: 12px; font-weight: 600; color: var(--chocolate); background: var(--cinderela); padding: 4px 10px; border-radius: 7px; }
.m-mem.sm { width: 22px; height: 22px; font-size: 9px; flex-shrink: 0; }
@media (max-width: 720px) { }

/* ════════ Card back (modal) FIEL AO TRELLO ════════ */
/* largura base de .cardwin reescrita na secao "Modal 2 colunas" (900px) */
.cardwin { background: var(--surface); border-radius: 12px; max-height: calc(100vh - 60px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 36px rgba(9,30,66,.28); position: relative; }
.cw-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.cw-cover { width: 100%; height: 140px; overflow: hidden; border-radius: 12px 12px 0 0; background: var(--surface-2); }
.cw-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cw-body { padding: 0; }
.cw-head { display: flex; gap: 11px; align-items: flex-start; margin: 0; }
.cw-head-ic { color: var(--muted); flex-shrink: 0; margin-top: 3px; }
.cw-head-ic svg { width: 20px; height: 20px; }
.cw-head-t { min-width: 0; flex: 1; }
.cw-title { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0; }
.cw-title-in { width: 100%; font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.3; border: 1px solid transparent; border-radius: 6px; padding: 3px 7px; margin: -3px -7px; font-family: inherit; background: transparent; }
.cw-title-in:hover { background: var(--surface-2); }
.cw-title-in:focus { background: #fff; border-color: var(--sandy); outline: none; }
.cw-crumb { font-size: 13px; color: var(--muted); margin-top: 5px; }
.cw-crumb b { font-weight: 600; }
/* .cw-grid reescrito na secao "Modal 2 colunas" abaixo */
/* flex-shrink:0 → quando um painel (Membros/Etiquetas) abre, ele NÃO é comido pelo feed de atividade
   (que encolhe); assim o botão "Concluir" no fim do painel não fica coberto pelo footer. */
.cw-side { min-width: 0; position: relative; flex-shrink: 0; }

/* ── Botao "+ Adicionar" e popup dropdown ─────────────────── */
.cw-add-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  background: var(--sandy, #F27127);
  border: none;
  border-radius: 7px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  min-height: 34px;
  cursor: pointer;
  letter-spacing: .1px;
  transition: background .15s;
}
.cw-add-btn svg { flex-shrink: 0; }
.cw-add-btn:hover { background: var(--chocolate, #D9501E); }

/* Popup dropdown — drop-up (abre pra cima a partir do botao) para nao ser clipado pelo ancestral com overflow */
.cw-addpop {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  right: 0;
  z-index: 300;
  background: #fff;
  border: 1px solid var(--line-2, rgba(37,85,97,.18));
  border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  padding: 8px 6px;
  min-width: 180px;
}
.cw-addpop-h {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  padding: 2px 8px 8px;
}
.cw-addpop-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
}
.cw-addpop-item svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-soft); }
.cw-addpop-item:hover { background: #F4F5F7; color: var(--arapawa); }
.cw-addpop-item:hover svg { color: var(--arapawa); }

/* Botao Excluir discreto abaixo do painel */
.cw-del-btn {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
}
.cw-del-btn:hover { opacity: 1; }
.cw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.cw-labels { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cw-lbl { font-size: 11px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }
.cw-lbl b { cursor: pointer; opacity: .8; }
.cw-lbl b:hover { opacity: 1; }
.cw-lbl-add { width: 28px; height: 22px; font-size: 14px; color: var(--text-soft); background: #EBECF0; border: none; border-radius: 6px; }
.cw-lbl-add:hover { background: #DFE1E6; color: var(--chocolate); }
/* Espelho de Produtos — seletor de cor da etiqueta (overlay do Sistema; o Trello nao muda) */
.cw-lblrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cw-lblrow-tag { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.cw-lblrow-sw { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.cw-lblsw { width: 18px; height: 18px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform .1s ease; }
.cw-lblsw:hover { transform: scale(1.15); }
.cw-lblsw.on { border-color: var(--chocolate, #333); box-shadow: inset 0 0 0 1px #fff; }
.cw-lblsw-reset { background: #EBECF0; color: var(--text-soft); font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.cw-lblsw-reset:hover { background: #DFE1E6; color: var(--chocolate); }
.cw-lblsw-del { background: #fee2e2; color: #b91c1c; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.cw-lblsw-del:hover { background: #fecaca; }
.cw-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cw-chips:empty { display: none; }
.cw-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-soft); background: #EBECF0; padding: 4px 9px; border-radius: 6px; }
.cw-chip-ic svg { width: 13px; height: 13px; display: block; }
/* Prazo vencido: chip vermelho com badge */
.cw-chip-due { font-weight: 700; }
.cw-chip-tag { background: #e6eef2; color: #33566a; font-weight: 700; }
.cw-chip-due.overdue { background: #FDECEA; color: #C0392B; border: 1px solid #F5C6C2; }
.cw-chip-due.overdue .cw-chip-ic svg { stroke: #C0392B; }
.cw-chip-late { font-size: 10px; font-weight: 800; background: #C0392B; color: #fff; border-radius: 4px; padding: 1px 5px; letter-spacing: .4px; text-transform: uppercase; margin-left: 2px; }
.cw-mod { margin-bottom: 22px; }
.cw-mod-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
.cw-mod-h svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.cw-mod-sub { font-size: 12px; font-weight: 600; color: var(--muted); }
.cw-desc { font-size: 13.5px; color: var(--text); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 27px; }
.cw-descbox { font-size: 13px; color: var(--muted); background: #EBECF0; border-radius: 6px; padding: 10px 12px; margin-left: 27px; }
.cw-descin { width: calc(100% - 27px); margin-left: 27px; min-height: 76px; resize: vertical; font-family: inherit; font-size: 13.5px; color: var(--text); line-height: 1.55; border: none; border-radius: 6px; padding: 10px 12px; background: #EBECF0; }
.cw-descin:focus { background: #fff; outline: 2px solid var(--sandy); }
.cw-loading { color: var(--muted); font-size: 12.5px; padding-left: 27px; }
.cw-prog { display: flex; align-items: center; gap: 9px; margin: 4px 0 10px 27px; }
.cw-prog-pct { font-size: 11px; color: var(--muted); width: 30px; flex-shrink: 0; }
.cw-prog-tr { flex: 1; height: 8px; background: #DFE1E6; border-radius: 4px; overflow: hidden; }
.cw-prog-fl { height: 100%; background: var(--pumpkin); border-radius: 4px; transition: width .2s; }
.cw-prog-fl.done { background: #4BCE97; }
.cw-checks { display: flex; flex-direction: column; gap: 2px; margin-left: 14px; }
.cw-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); padding: 6px 8px; border-radius: 6px; }
.cw-check:hover { background: var(--surface-2); }
.cw-check span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cw-check.done span { color: var(--muted); text-decoration: line-through; }
.cw-check input { width: 16px; height: 16px; accent-color: #4BCE97; flex-shrink: 0; }
.cw-check b { cursor: pointer; color: var(--muted); opacity: 0; }
.cw-check:hover b { opacity: 1; }
/* Checklist espelho: item clicavel no texto abre editor inline estilo Trello */
.cw-mchk-text { cursor: pointer; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cw-mchk-text:hover { text-decoration: underline; text-decoration-style: dotted; color: var(--arapawa); }
.cw-mchk-editor { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.cw-mchk-ta { width: 100%; font-family: inherit; font-size: 13px; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fff; resize: vertical; min-height: 48px; }
.cw-mchk-ta:focus { outline: 2px solid var(--sandy); border-color: transparent; }
.cw-addrow { display: flex; gap: 8px; margin: 8px 0 0 27px; }
.cw-inp { flex: 1; min-width: 0; font-family: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--text); box-shadow: 0 1px 0 rgba(9,30,66,.1); }
.cw-inp:focus { outline: 2px solid var(--sandy); border-color: transparent; }
.cw-btn { font-size: 13px; font-weight: 600; color: #fff; background: var(--pumpkin); border: none; border-radius: 6px; padding: 8px 14px; flex-shrink: 0; }
.cw-panel-btns { display: flex; gap: 6px; margin-top: 8px; }
.cw-btn:hover { background: var(--chocolate); }
.cw-btn.ghost { background: transparent; color: var(--text-soft); }
.cw-btn.ghost:hover { background: #DFE1E6; }
.cw-cmtbox { display: flex; gap: 9px; margin-bottom: 16px; }
.cw-cmtbox-b { flex: 1; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.cw-cmtbox-b textarea { width: 100%; }
/* #10 — abas do histórico (Comentários / Movimentação / Ver tudo) */
.cw-feed-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border, #e2e8f0); }
.cw-feed-tab { font-size: 12.5px; font-weight: 600; color: var(--muted, #64748b); background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 10px; cursor: pointer; margin-bottom: -1px; }
.cw-feed-tab:hover { color: var(--text, #334155); }
.cw-feed-tab.on { color: var(--pumpkin, #D9501E); border-bottom-color: var(--pumpkin, #D9501E); }
.cw-memb-done { margin-top: 10px; width: 100%; }
/* #7 — Entregas (produtividade): aprovar/reprovar por card, congelado por funcionário */
.cw-entregas { background: #f8fafc; border: 1px solid var(--border, #e2e8f0); border-radius: 9px; padding: 11px 12px; margin-bottom: 12px; }
.cw-ent-h { font-size: 11px; font-weight: 700; color: var(--text-soft, #475569); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; }
.cw-ent-btns { display: flex; gap: 6px; margin-bottom: 8px; }
/* Atribuir a mim (responsável do card) */
.cw-ent-resp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; font-size: 12px; }
.cw-ent-resp-lbl { color: var(--text-soft, #475569); font-weight: 700; }
.cw-ent-resp-nomes { color: var(--text, #334155); font-weight: 600; }
.cw-ent-resp-vazio { color: var(--muted, #94a3b8); font-style: italic; }
.cw-ent-mim { margin-left: auto; border: 1px solid var(--pumpkin, #ff8a00); background: #fff7ed; color: #c2570c; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cw-ent-mim:hover { background: #ffedd5; }
.cw-ent-mim.on { border-color: #cbd5e1; background: #f1f5f9; color: #475569; }
.cw-ent-mim.on:hover { background: #e2e8f0; }
.cw-ent-btn { flex: 1; border: none; border-radius: 7px; padding: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cw-ent-btn.ok { background: #dcfce7; color: #15803d; }
.cw-ent-btn.ok:hover { background: #bbf7d0; }
.cw-ent-btn.no { background: #fee2e2; color: #b91c1c; }
.cw-ent-btn.no:hover { background: #fecaca; }
.cw-ent-motivos { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; padding: 8px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.cw-ent-sub { width: 100%; font-size: 11.5px; color: var(--muted, #64748b); margin-bottom: 3px; }
.cw-ent-motivo { border: 1px solid var(--border, #e2e8f0); background: #f8fafc; border-radius: 6px; padding: 4px 9px; font-size: 11.5px; cursor: pointer; }
.cw-ent-motivo:hover { background: #eef2f6; }
.cw-ent-motivo.cancel { color: var(--muted, #64748b); border-style: dashed; }
/* seletor de coluna pós-reprova (Conteúdos) */
.cw-ent-mover { border-top: 1px dashed var(--border, #e2e8f0); padding-top: 8px; margin-top: 6px; }
.cw-ent-motivo.atual { background: #eef2f6; color: var(--muted, #64748b); font-style: italic; }
.cw-ent-list { display: flex; flex-direction: column; gap: 6px; }
.cw-ent-item { display: flex; align-items: flex-start; gap: 8px; background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 7px; padding: 7px 9px; }
.cw-ent-item-b { flex: 1; min-width: 0; }
.cw-ent-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.cw-ent-tag.ok { background: #dcfce7; color: #15803d; }
.cw-ent-tag.no { background: #fee2e2; color: #b91c1c; }
.cw-ent-mtag { font-size: 11px; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.cw-ent-fu { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text, #334155); }
.cw-ent-meta { font-size: 10.5px; color: var(--muted, #94a3b8); margin-top: 2px; }
.cw-ent-del { border: none; background: none; color: #cbd5e1; font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px; align-self: center; }
.cw-ent-del:hover { color: #b91c1c; }
.cw-ent-empty { font-size: 11.5px; color: var(--muted, #94a3b8); padding: 2px 0; }
.cw-feed { display: flex; flex-direction: column; gap: 14px; }
.cw-fi { display: flex; gap: 9px; align-items: flex-start; }
.cw-fi-b { min-width: 0; flex: 1; }
.cw-fi-date { font-size: 11px; color: var(--muted); font-weight: 400; }
/* Destaque de movimentacao de coluna */
.cw-fi-move .cw-act { background: #EEF6FB; border-left: 3px solid #2E9FC0; border-radius: 0 7px 7px 0; padding: 5px 9px; }
.cw-move-arrow { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cw-move-from { color: var(--muted); background: #E2EDF2; border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.cw-move-to { color: #1A6B83; background: #D0EAF4; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; }
.cw-move-ic { color: #2E9FC0; flex-shrink: 0; }
.cw-cmt { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(9,30,66,.08); }
.cw-cmt-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.cw-cmt-h b { font-size: 13px; color: var(--text); }
.cw-act { font-size: 12.5px; color: var(--text-soft); line-height: 1.45; }
.cw-act b { color: var(--text); font-weight: 600; }
.cw-side-h { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-weight: 700; margin: 0 0 7px; }
.cw-side-h:not(:first-child) { margin-top: 16px; }
.cw-side-note { font-size: 12px; color: var(--text-soft); line-height: 1.5; margin: 0 0 9px; }
.cw-sbtn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #EBECF0; border: none; border-radius: 6px; padding: 8px 11px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; min-height: 32px; }
.cw-sbtn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-soft); }
.cw-sbtn span { flex: 1; }
.cw-sbtn i { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); background: rgba(9,30,66,.08); padding: 2px 6px; border-radius: 4px; }
.cw-sbtn:hover { background: #DFE1E6; }
.cw-sbtn.on { background: var(--cinderela); color: var(--chocolate); }
.cw-sbtn.on svg { color: var(--chocolate); }
.cw-sbtn.soon { opacity: .7; }
.cw-sbtn.danger:hover { background: #FCE3DA; color: var(--chocolate); }
.cw-sbtn.danger:hover svg { color: var(--chocolate); }
.cw-sbtn.link { color: var(--netuno); }
.cw-panel { background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; margin: 0 0 8px; box-shadow: var(--shadow); }
.cw-panel-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.cw-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 5px 4px; border-radius: 6px; text-transform: capitalize; }
.cw-memb-list { max-height: 168px; overflow-y: auto; margin: 6px 0; }
.cw-newlbl-cores { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 10px; }
.cw-lblcolor-inp { width: 26px; height: 22px; border: 1px solid var(--border, #e2e8f0); border-radius: 5px; padding: 0; background: none; cursor: pointer; vertical-align: middle; }
.cw-lblsw-btn { border: 1px solid var(--sw-pumpkin, #ff8a00); background: #fff7ed; color: #c2570c; border-radius: 6px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; vertical-align: middle; }
.cw-lblsw-btn:hover { background: #ffedd5; }
.cw-newlbl-lbl { margin: 0 4px 0 0; }
.cw-pick:hover { background: var(--surface-2); }
.cw-pick input { flex-shrink: 0; }
/* responsivo do cw-grid movido para a secao "Modal 2 colunas" (breakpoint 860px) */

/* Popup "ambiente em teste" */
.teste-pop { position: fixed; inset: 0; z-index: 1100; background: rgba(27,67,80,.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .12s ease; }
.teste-card { background: var(--surface); border-radius: 16px; max-width: 380px; width: 100%; padding: 28px 26px 22px; text-align: center; box-shadow: var(--shadow-lg); }
.teste-ic { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.teste-h { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.teste-b { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin-bottom: 18px; }
.teste-ok { background: var(--pumpkin); color: #fff; border: none; border-radius: 9px; padding: 10px 24px; font-size: 14px; font-weight: 600; }
.teste-ok:hover { background: var(--chocolate); }

/* ── Anexos + Capa (cards nativos) ────────────────────────── */
.cw-anx-imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-anx-img { position: relative; width: 100px; height: 74px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid var(--line); overflow: hidden; }
.cw-anx-ov { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 4px; opacity: 0; transition: opacity .12s; background: linear-gradient(180deg, rgba(9,30,66,.5), transparent 45%, rgba(9,30,66,.5)); }
.cw-anx-img:hover .cw-anx-ov { opacity: 1; }
.cw-anx-cap { font-size: 10px; font-weight: 700; color: #fff; background: rgba(9,30,66,.65); border: none; border-radius: 5px; padding: 3px 7px; cursor: pointer; }
.cw-anx-x { font-size: 14px; line-height: 1; color: #fff; background: rgba(9,30,66,.65); border: none; border-radius: 5px; width: 20px; height: 20px; cursor: pointer; }
.cw-anx-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cw-anx-file { display: flex; align-items: center; gap: 6px; }
.cw-anx-file a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--netuno); background: var(--surface-2); padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cw-anx-file a:hover { color: var(--chocolate); border-color: var(--sandy); }
.cw-anx-file .cw-anx-x { color: var(--muted); background: transparent; flex-shrink: 0; }
.cw-anx-file .cw-anx-x:hover { color: var(--chocolate); }
.cw-cover-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cw-cover-img { width: 58px; height: 40px; border-radius: 6px; background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; }
.cw-cover-img.on { border-color: var(--pumpkin); }
.cw-cover-colors { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cw-cover-color { width: 32px; height: 24px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.cw-cover-color.on { border-color: var(--text); box-shadow: inset 0 0 0 2px #fff; }

/* Preview de imagem (lightbox) + links clicáveis + descrição clique-pra-editar */
.cw-img-preview { cursor: zoom-in; }
.m-gallery .cw-img-preview { width: 100%; max-height: 360px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: block; }
.cw-link { color: var(--netuno); text-decoration: underline; word-break: break-all; overflow-wrap: anywhere; }
.cw-link:hover { color: var(--chocolate); }
.cw-desc-btn { cursor: pointer; border-radius: 6px; transition: background .12s; }
.cw-desc.cw-desc-btn:hover { background: var(--surface-2); }
.cw-descbox.cw-desc-btn:hover { background: #DFE1E6; }
.img-pop { position: fixed; inset: 0; z-index: 1200; background: rgba(9,30,66,.85); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fade .12s ease; }
.img-pop img { max-width: 94vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.5); object-fit: contain; }
.img-pop-x { position: fixed; top: 16px; right: 20px; width: 40px; height: 40px; border: none; background: rgba(255,255,255,.16); color: #fff; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; }
.img-pop-x:hover { background: rgba(255,255,255,.32); }

/* ── Modal 2 colunas: layout Header / Body / Footer com dividers petróleo ─── */

/* cardwin: flex col; redimensionável pelo usuário; não tem overflow:hidden pra permitir drag */
.cardwin {
  overflow: visible !important;
  width: 960px;
  min-width: 680px;
  max-width: 97vw;
  /* resize nativo em largura: funciona porque overflow:visible está no .cardwin mas
     o .cw-scroll / .cw-body têm overflow interno — o handle de resize fica no canto */
  resize: horizontal;
}

/* cw-scroll: contém o conteúdo — overflow:hidden impede vazamento além do cardwin */
.cw-scroll { overflow: hidden; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* grip visual de redimensionamento no canto inferior direito do modal */
.cw-resize-grip {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  z-index: 10;
  border-radius: 0 0 12px 0;
  /* listras diagonais estilo resize handle */
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 3px,
      rgba(37,85,97,.45) 3px,
      rgba(37,85,97,.45) 4.5px
    );
  opacity: .7;
  transition: opacity .15s;
}
.cw-resize-grip:hover { opacity: 1; }

/* ── HEADER (fixo, drag handle) ───────────────────────────── */
.cw-header-zone {
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
  padding: 16px 52px 14px 18px; /* 52px direita = espaco pro botao fechar absoluto */
}
.cw-header-zone:active { cursor: grabbing; }
/* alias de compatibilidade — initDrag() procura .cw-head-wrap */
.cw-head-wrap { flex-shrink: 0; cursor: grab; user-select: none; padding: 0 18px; }
.cw-head-wrap:active { cursor: grabbing; }

/* divider petróleo horizontal (header↔body e body↔footer) */
.cw-divider {
  flex-shrink: 0;
  height: 2px;
  background: var(--arapawa);
  opacity: .85;
  margin: 0;
}

/* ── BODY (cresce, organiza as 2 colunas) ─────────────────── */
.cw-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* cw-cols = grid de 2 colunas; proporcional para reflow ao redimensionar */
.cw-cols {
  display: grid;
  /* esquerda flexível (mínimo 300px); direita maior (mínimo 260px, até 420px) */
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  /* stretch: faz as colunas ocuparem a altura total do body — pulo do gato para o scroll confinado */
  align-items: stretch;
  overflow: hidden;
  padding: 0 0 0 18px;
}

/* coluna esquerda rola dentro do body — height:100% + overflow-y:auto confina no footer */
.cw-main {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  padding: 16px 16px 22px 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--sw-pumpkin, #F27127) transparent;
}
.cw-main::-webkit-scrollbar { width: 7px; }
.cw-main::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 4px; }
.cw-main::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 4px; }
.cw-main::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }
.cw-right::-webkit-scrollbar { width: 7px; }
.cw-right::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 4px; }
.cw-right::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 4px; }
.cw-right::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }

/* coluna direita: flex column; height:100%+overflow:hidden contém tudo dentro do body */
.cw-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-y: auto;   /* barra de rolagem própria: alcança o painel de Membros (Concluir) sem cortar */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sw-pumpkin, #F27127) transparent;
  box-sizing: border-box;
  border-left: 1px solid var(--arapawa);
  border-left-color: rgba(37,85,97,.18);
  padding: 16px 18px 22px 18px;
}

/* ── Campo CUSTO (topo da coluna direita, acima das Atividades) ─────────── */
.cw-custo-wrap {
  background: var(--surface-2);
  border: 1px solid rgba(37,85,97,.18);
  border-radius: 9px;
  padding: 10px 13px 11px;
  margin-bottom: 14px;
  position: relative;
}
.cw-custo-lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 5px;
}
/* valor formatado (modo display) */
.cw-custo-disp {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--arapawa);
  line-height: 1.2;
  letter-spacing: -.3px;
  cursor: text;
  min-height: 26px;
}
/* toda a wrap e clicavel enquanto nao esta editando */
.cw-custo-wrap:not(.editing) {
  cursor: text;
}
.cw-custo-disp:empty::before {
  content: 'R$ —';
  color: var(--muted);
  font-weight: 400;
  font-size: 15px;
}
/* input de edição (oculto por padrão, aparece ao focar) */
.cw-custo-in {
  display: none;
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--arapawa);
  background: #fff;
  border: 1px solid var(--arapawa);
  border-radius: 6px;
  padding: 4px 8px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,85,97,.12);
  box-sizing: border-box;
}
.cw-custo-in:focus {
  border-color: var(--arapawa);
  box-shadow: 0 0 0 3px rgba(37,85,97,.18);
}
/* quando JS está editando: esconde display, mostra input */
.cw-custo-wrap.editing .cw-custo-disp { display: none; }
.cw-custo-wrap.editing .cw-custo-in   { display: block; }

/* Atividades cresce até ocupar a .cw-right e rola internamente — sem calc(100vh) */
.cw-activity-col {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px 13px 16px;
  margin-bottom: 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;   /* o feed encolhe até 0 quando um painel alto (Membros) abre; quem rola é a .cw-right (scroll único) */
  overflow-wrap: break-word;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--sw-pumpkin, #F27127) transparent;
}
.cw-activity-col::-webkit-scrollbar { width: 7px; }
.cw-activity-col::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 4px; }
.cw-activity-col::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 4px; }
.cw-activity-col::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }
.cw-act-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .7px; color: var(--muted);
  margin-bottom: 12px;
}
.cw-act-head svg { width: 14px; height: 14px; flex-shrink: 0; }
.cw-act-loading { font-size: 12px; color: var(--muted); text-align: center; padding: 12px 0; }
.cw-act-empty   { font-size: 12px; color: var(--muted); text-align: center; padding: 12px 0; }

/* Feed compacto na coluna lateral — texto reflui com a coluna */
.cw-activity-col .cw-feed { gap: 10px; }
.cw-activity-col .cw-fi { gap: 7px; }
.cw-activity-col .cw-fi-b { font-size: 12.5px; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.cw-activity-col .cw-act { font-size: 12px; line-height: 1.45; color: var(--text-soft); overflow-wrap: break-word; }
.cw-activity-col .cw-act b { color: var(--text); }
.cw-activity-col .cw-fi-date { font-size: 10.5px; display: block; margin-top: 1px; }
.cw-activity-col .cw-cmt { font-size: 12.5px; padding: 7px 10px; }
.cw-activity-col .cw-cmt-h { margin-bottom: 3px; gap: 5px; }
.cw-activity-col .cw-cmt-h b { font-size: 12.5px; }
.cw-activity-col .cw-cmt-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cw-activity-col .m-mem.sm { width: 20px; height: 20px; font-size: 8px; flex-shrink: 0; }

/* ── FOOTER (fixo embaixo, fora do scroll) ─────────────────── */
.cw-footer {
  flex-shrink: 0;
  padding: 12px 18px 14px;
  background: var(--surface);
  border-radius: 0 0 12px 12px;
  border-top: 1px solid var(--line, #ece7df);
}
/* caixa de comentar no footer (nativo) */
.cw-footer .cw-cmtbox { margin-bottom: 0; }
/* link "Abrir no Trello" no footer (espelho) */
.cw-footer-dup { border: 1px solid var(--border, #e2e8f0); background: #fff; border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; color: var(--text, #334155); cursor: pointer; margin-left: 8px; }
.cw-footer-dup:hover { background: #f1f5f9; }
.cw-footer-trello {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--netuno);
}
.cw-footer-trello svg { flex-shrink: 0; }
/* nota discreta "Espelho do Trello — edicao na Fase 4" no footer do espelho */
.cw-mirror-note {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #8c9bab);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  opacity: 0.8;
}

/* Descricao com markdown nao tem white-space:pre-wrap (o md ja gera tags) */
.cw-desc.cw-md-body { white-space: normal; }

/* ── Markdown: estilos do corpo da descricao ─────────────── */
.cw-md-body { font-size: 13.5px; color: var(--text); line-height: 1.65; overflow-wrap: anywhere; padding-left: 27px; }
.cw-md-body .cw-md-p { margin: 0 0 8px; }
.cw-md-body .cw-md-p:last-child { margin-bottom: 0; }
.cw-md-body .cw-md-h { font-size: 14px; font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.cw-md-body h2.cw-md-h { font-size: 15px; }
.cw-md-body .cw-md-ul { margin: 4px 0 8px 18px; padding: 0; list-style: disc; }
.cw-md-body .cw-md-ul li { margin-bottom: 3px; }
.cw-md-body .cw-md-ul + .cw-md-ul { margin-top: -4px; }
.cw-md-body .cw-md-hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.cw-md-body .cw-pre { background: var(--surface-3); border-radius: 7px; padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; margin: 8px 0; }
.cw-md-body .cw-code { background: var(--surface-3); border-radius: 4px; padding: 1px 5px; font-family: var(--font-mono); font-size: 12px; color: var(--chocolate); }
.cw-md-body strong { font-weight: 700; color: var(--text); }
.cw-md-body em { font-style: italic; }

/* ── Editor rico de descricao (nativo) ───────────────────── */
.cw-ded { margin-left: 27px; display: flex; flex-direction: column; gap: 6px; }
.cw-ded-toolbar { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-bottom: none; border-radius: 6px 6px 0 0; padding: 4px 6px; flex-wrap: wrap; }
.cw-ded-tbtn { background: transparent; border: none; border-radius: 4px; padding: 4px 7px; font-size: 12px; font-weight: 700; font-family: inherit; color: var(--text-soft); cursor: pointer; line-height: 1; min-width: 28px; text-align: center; transition: background .1s, color .1s; }
.cw-ded-tbtn:hover { background: var(--line); color: var(--text); }
.cw-ded-tbtn.cw-ded-tbtn-anx { margin-left: auto; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; padding: 4px 10px; }
.cw-ded-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex-shrink: 0; }
.cw-ded-ta { width: 100%; min-height: 100px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text); line-height: 1.6; border: 1px solid var(--line); border-radius: 0 0 6px 6px; padding: 10px 12px; background: #fff; box-sizing: border-box; }
.cw-ded-ta:focus { outline: 2px solid var(--sandy); border-color: transparent; }
.cw-ded-actions { display: flex; gap: 8px; }

/* ── Enfase tipografica: campos-chave da descricao ───────── */
/* Convencao: **SKU:**, **CUSTO:**, **PRECO:** etc viram negrito colorido automaticamente */
.cw-md-body strong:first-child,
.cw-md-body .cw-md-p > strong:first-child {
  color: var(--arapawa);
}

/* Corpo do comentario no feed lateral */
.cw-cmt-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; color: var(--text); }

/* caixa "adicionar mais" nos anexos */
.cw-anx-add-more { margin-top: 8px; font-size: 12px; }

/* Responsivo: coluna unica em telas estreitas */
@media (max-width: 860px) {
  .cw-cols { grid-template-columns: 1fr; padding: 0 12px 18px; }
  .cw-right { flex-direction: row; flex-wrap: wrap; gap: 14px; border-left: none; border-top: 1px solid rgba(37,85,97,.18); padding: 14px 0 0; max-height: 46vh; }
  .cw-activity-col { flex: 1 1 100%; max-height: 260px; min-height: 120px; margin-bottom: 0; }
  .cw-main { max-height: 60vh; padding-right: 0; }
  .cw-side { flex: 1 1 100%; }
  .cardwin { width: 100%; min-width: unset; resize: none; }
}

/* ── Tela de login + logout ───────────────────────────────── */
.auth-gate {
  position: fixed; inset: 0; z-index: 2000; padding: 20px;
  background: linear-gradient(160deg, var(--arapawa) 0%, var(--arapawa-2) 60%, #14323b 100%);
  display: flex; align-items: center; justify-content: center;
}
/* watermark da lemniscata (E2): a marca assina a 1ª tela, sutil */
.auth-gate::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/img/brand/lemniscata-clara.png') right -120px bottom -60px / 560px auto no-repeat;
  opacity: .07;
}
.auth-gate[hidden] { display: none; }
.auth-card {
  background: var(--surface); border-radius: 18px; padding: 34px 30px 26px; width: 100%; max-width: 380px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; text-align: center; position: relative;
}
.auth-logo { height: 44px; width: auto; margin: 0 auto 10px; object-fit: contain; }
.auth-brand { font-size: 30px; font-weight: 700; color: var(--text); line-height: 1; }
.auth-sub { font-size: 12.5px; color: var(--muted); margin: 4px 0 20px; }
.auth-label { display: block; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 13px; }
.auth-label input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 13px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--text); outline: none;
}
.auth-label input:focus { border-color: var(--pumpkin); background: #fff; }
.auth-btn {
  margin-top: 4px; padding: 12px; font-size: 14px; font-weight: 700; color: #fff; border: none; border-radius: 11px;
  background: var(--pumpkin); cursor: pointer; transition: background .15s;
}
.auth-btn:hover { background: var(--chocolate); }
.auth-btn:disabled { opacity: .7; cursor: default; }
.auth-erro { color: var(--chocolate); font-size: 12.5px; min-height: 16px; margin-top: 9px; }

.logout-btn {
  margin-left: auto; width: 28px; height: 28px; flex-shrink: 0; border: none; border-radius: 8px;
  background: rgba(255,255,255,.08); color: #C6DADE; display: grid; place-items: center; cursor: pointer;
}
.logout-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.logout-btn svg { width: 15px; height: 15px; }

/* ===================== Central de Ruptura ===================== */
/* overflow-x:hidden EXPLÍCITO: este container (e a PÁGINA) NUNCA rola na horizontal — só a TABELA
   (.rup-table-wrap/#rupWrap, via a barra flutuante .rup-hbar) tem overflow-x:auto. Sem isto, se
   QUALQUER filho ficar mais largo que o wrap (ex.: .rup-log — ver fix abaixo), o navegador computa
   overflow-x como 'auto' automaticamente por causa do overflow-y:auto (regra do CSS Overflow: eixo
   'visible' vira 'auto' quando o outro eixo não é 'visible') e cria uma 2ª scrollbar horizontal aqui,
   IDÊNTICA (mesma cor laranja global) à do #rupHbar — parece "a página rolando de lado", cortando
   KPIs/painel de prioridade/tabela juntos (bug relatado com print).  */
.rup-wrap { padding: 16px 22px 28px; overflow-y: auto; overflow-x: hidden; height: 100%; }
.rup-explica {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(135deg, var(--ok) 0%, #134E4A 100%);
  color: #EAF7F4; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-lg);
}
.rup-explica-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.rup-explica-ic svg { width: 26px; height: 26px; color: #fff; }
.rup-explica-tx h2 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.rup-explica-tx p { margin: 0 0 7px; font-size: 13px; line-height: 1.5; color: #D2EBE6; max-width: 980px; }
.rup-explica-tx p b { color: #fff; font-weight: 700; }
.rup-explica-tx .rup-como { color: #BFE2DC; }
.rup-fontes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.rup-badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,.13); color: #EAF7F4; }
.rup-badge-live { background: rgba(74,222,168,.2); color: #D7FBEC; }
.rup-badge-ro { background: rgba(255,255,255,.92); color: #134E4A; font-weight: 700; }
.rup-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ADE98; margin-right: 5px; box-shadow: 0 0 0 0 rgba(74,222,152,.7); animation: rup-pulse 1.8s infinite; }
@keyframes rup-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,152,.6);} 70% { box-shadow: 0 0 0 6px rgba(74,222,152,0);} 100% { box-shadow: 0 0 0 0 rgba(74,222,152,0);} }

.rup-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.rup-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow); }
.rup-kpi-v { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.rup-kpi-l { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-top: 2px; }
.rup-kpi-h { font-size: 11px; color: var(--muted); margin-top: 3px; }
.rup-kpi-crit { border-color: #F4C7C0; background: linear-gradient(180deg, #FFF7F5, #fff); }
.rup-kpi-crit .rup-kpi-v { color: var(--danger); }

/* ── Log de mudanças de prioridade (diff vs ciclo anterior) ── */
.rup-log { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 12px; }
.rup-log-empty { display: flex; align-items: flex-start; gap: 10px; color: var(--text-soft); }
.rup-log-empty b { color: var(--text); }
.rup-log-ic { font-size: 18px; line-height: 1.2; flex: none; }
.rup-log-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rup-log-h { display: flex; flex-direction: column; }
.rup-log-h > b { font-size: 14px; color: var(--text); }
.rup-log-sub { font-size: 11.5px; color: var(--muted); }
.rup-log-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.rup-log-stat { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rup-log-stat.up { background: #FFF1EC; color: var(--danger); }
.rup-log-stat.dn { background: #E8F6F4; color: var(--ok); }
.rup-log-stat.new { background: #FEECEC; color: var(--danger); }
.rup-log-stat.out { background: #EFF1F3; color: #4B5563; }
.rup-log-none { font-size: 12.5px; color: var(--text-soft); padding: 4px 2px; }
.rup-log-nota { font-size: 11px; color: var(--muted); margin: 0 0 6px; line-height: 1.4; }
.rup-log-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 760px) { .rup-log-list { grid-template-columns: 1fr; } }
/* min-width:0 + overflow:hidden são O FIX do vazamento horizontal: .rl é item de grid (1fr 1fr) E
   container flex de um texto white-space:nowrap (.rl-tx). O min-width:0 do .rl-tx só vale DENTRO do
   flex layout (depois que .rl já tem largura definida) — para o CÁLCULO da largura da coluna do grid,
   o navegador soma o min-content "cru" dos filhos (nowrap = largura total do texto), inflando a
   coluna a ~700px mesmo com tela estreita. Sem overflow!=visible/min-width:0 aqui NO PRÓPRIO .rl, o
   grid nunca encolhe a coluna — e isso empurra .rup-log (e por tabela o .rup-wrap) pra fora da tela
   (bug relatado com print: painel/KPIs/tabela "cortados", scrollbar laranja da página). */
.rup-log .rl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; overflow: hidden; }
.rup-log .rl-ic { font-size: 11px; width: 14px; text-align: center; flex: none; }
.rup-log .rl-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rup-log .rl-rk { color: var(--muted); font-size: 11px; margin: 0 4px; }
.rup-log .rl-nome { color: var(--text-soft); margin-left: 6px; }
.rup-log .rl-imp { font-weight: 700; font-size: 11.5px; color: var(--text-soft); flex: none; }
.rup-log .rl.up .rl-ic { color: var(--danger); }
.rup-log .rl.dn .rl-ic { color: var(--ok); }
.rup-log .rl.new .rl-ic { color: var(--danger); }
.rup-log .rl.out .rl-ic { color: #6B7280; }
.rup-log-more { margin-top: 8px; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.rup-log-more:hover { background: var(--bg); }
/* Selo inline de movimento na tabela */
.rup-mv { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 5px; border-radius: 5px; margin-left: 6px; vertical-align: middle; }
.rup-mv.up { background: #FFF1EC; color: var(--danger); }
.rup-mv.dn { background: #E8F6F4; color: var(--ok); }
.rup-mv.new { background: #FEECEC; color: var(--danger); }
.rup-mv-muted { opacity: .38; }   /* tabela ordenada por outra coluna → selo de prioridade esmaecido */

/* ============================================================
   RH · Cadastro de Funcionários
   ============================================================ */
.rhc-wrap { width: 100%; }   /* acompanha a largura da página, como os demais setores */
.rhc-intro { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #F69861; border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.rhc-intro-ic { width: 34px; height: 34px; flex: none; color: #F69861; }
.rhc-intro-ic svg { width: 34px; height: 34px; }
.rhc-intro h2 { font-size: 16px; margin: 0 0 2px; color: var(--text); }
.rhc-intro p { font-size: 12.5px; color: var(--text-soft); margin: 0; line-height: 1.5; }
.rhc-err { display: flex; gap: 10px; align-items: flex-start; background: #FEF2F2; border: 1px solid #F4C7C0; border-radius: var(--radius-sm); padding: 14px 16px; color: var(--danger); }
.rhc-err svg { flex: 0 0 auto; width: 16px; height: 16px; }
.rhc-err-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

.rhc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.rhc-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow); }
.rhc-kpi-v { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.rhc-kpi-l { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* RH · Indicadores (dashboard) */
.rhi-wrap { padding-bottom: 20px; }
.rhi-soon { color: var(--text-soft); font-style: italic; }
.rhi-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.rhi-setor { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.rhi-setor select { min-width: 180px; }
.rhi-kpis { grid-template-columns: repeat(6, 1fr); }
.rhi-kpi-up .rhc-kpi-v { color: #1f9d57; }
.rhi-kpi-down .rhc-kpi-v { color: #c9503f; }
.rhi-kpi-mut .rhc-kpi-v { color: var(--text-soft); }
.rhi-sec { margin-top: 20px; }
.rhi-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rhi-sec-h h3 { font-size: 14.5px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.2px; }
.rhi-sec-sub { font-size: 11.5px; color: var(--text-soft); font-weight: 600; }
.rhi-vazio { font-size: 13px; color: var(--text-soft); padding: 10px 2px; }
.rhi-bars { display: flex; flex-direction: column; gap: 8px; }
.rhi-bar { display: grid; grid-template-columns: 150px 1fr 62px; align-items: center; gap: 10px; }
.rhi-bar-l { font-size: 12.5px; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhi-bar-track { background: var(--line); border-radius: 6px; height: 16px; overflow: hidden; }
.rhi-bar-fill { height: 100%; background: linear-gradient(90deg, #F69861, #f4b083); border-radius: 6px; min-width: 4px; transition: width .3s ease; }
.rhi-bar-n { font-size: 13px; font-weight: 800; color: var(--text); text-align: right; }
.rhi-bar-n span { font-size: 10.5px; font-weight: 600; color: var(--text-soft); }
.rhi-months { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding: 24px 4px 0; overflow-x: auto; }
.rhi-month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 46px; height: 100%; }
.rhi-month-bar { width: 30px; background: linear-gradient(180deg, #f4b083, #F69861); border-radius: 5px 5px 0 0; position: relative; display: flex; justify-content: center; min-height: 6px; }
.rhi-month-bar span { position: absolute; top: -17px; font-size: 11px; font-weight: 800; color: var(--text); }
.rhi-month-l { font-size: 11px; color: var(--text-soft); font-weight: 600; white-space: nowrap; }
/* KPI: rodapé de comparação vs período anterior (↑/↓) */
.rhi-kpi-foot { font-size: 11px; font-weight: 800; margin-top: 5px; }
.rhi-kpi-foot span { font-weight: 500; color: var(--text-soft); }
.rhi-pos { color: #1f9d57; }
.rhi-neg { color: #c9503f; }
.rhi-flat { color: var(--text-soft); }
/* gráfico combinado admissões × desligamentos */
.rhi-legend { display: flex; gap: 16px; margin-bottom: 4px; }
.rhi-lg { font-size: 11.5px; font-weight: 700; color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; }
.rhi-lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rhi-lg-a::before { background: #1f9d57; }
.rhi-lg-d::before { background: #c9503f; }
.rhi-month-pair { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.rhi-month-bar.rhi-bar-a { width: 20px; background: linear-gradient(180deg, #57d698, #1f9d57); }
.rhi-month-bar.rhi-bar-d { width: 20px; background: linear-gradient(180deg, #e8836f, #c9503f); }
.rhi-month-bar.rhi-bar-d span, .rhi-month-bar.rhi-bar-a span { color: var(--text); }
@media (max-width: 720px) { .rhi-kpis { grid-template-columns: repeat(2, 1fr) !important; } .rhi-bar { grid-template-columns: 96px 1fr 50px; } }

/* RH · Recrutamento (cadastro de candidatos) */
.cand-wrap .rhc-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rhc-muted { font-size: 12.5px; color: var(--text-soft); }
.cand-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border: 1px solid transparent; border-radius: 20px; padding: 3px 10px; cursor: pointer; line-height: 1.4; white-space: nowrap; }
.cand-status .cs-car { font-size: 10px; opacity: .7; }
.cand-status:hover { filter: brightness(0.97); box-shadow: 0 0 0 2px rgba(0,0,0,.04); }
.cs-cand { background: #eef2f6; color: #51607a; }
.cs-tri  { background: #efe9fb; color: #6b46c1; }
.cs-ent  { background: #fdf0e2; color: #b06d15; }
.cs-apr  { background: #e6f4ec; color: #1f8a54; }
.cs-adm  { background: #dcf3e6; color: #147a45; }
.cs-nao   { background: #fbe9e7; color: #b23a2c; }
.cs-ncomp { background: #f6ece2; color: #8a6a3a; }
.cs-desist{ background: #eef0f2; color: #6a7280; }
.cs-free  { background: #e2f0f4; color: #1d7a8c; }
.cand-status-menu { position: absolute; z-index: 3000; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 210px; }
/* KPIs + chips de status + barra de ações em massa */
.cand-kpis { grid-template-columns: repeat(4, 1fr); }
.cand-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.cand-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; background: var(--surface); color: var(--text-soft); cursor: pointer; }
.cand-chip:hover { border-color: var(--pumpkin, #F69861); }
.cand-chip.on { background: var(--pumpkin, #F69861); color: #fff; border-color: var(--pumpkin, #F69861); }
.cand-chip-n { font-size: 11px; font-weight: 800; opacity: .8; background: rgba(0,0,0,.06); border-radius: 10px; padding: 0 6px; }
.cand-chip.on .cand-chip-n { background: rgba(255,255,255,.25); }
.cand-bulk-wrap { display: inline-flex; margin-left: auto; }
.cand-bulk { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text); background: rgba(246,152,97,.1); border: 1px solid var(--pumpkin, #F69861); border-radius: 10px; padding: 5px 12px; }
.cand-bulk-sep { color: var(--text-soft); }
.cand-bulk-sel { height: 30px; padding: 3px 8px; font-size: 12.5px; width: auto; min-width: 150px; }
.cand-cv-up { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.cand-cv-up:hover { border-color: var(--pumpkin, #F69861); color: var(--chocolate, #7a3b12); }
.cand-sm-item { text-align: left; border: none; background: transparent; border-radius: 7px; padding: 7px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cand-sm-item:hover { filter: brightness(.96); }
.cand-sm-item.on { outline: 2px solid var(--pumpkin, #F69861); outline-offset: -2px; }
.cand-modal .rhc-grid { grid-template-columns: 1fr 1fr; }
/* Colunas Perfil (DISC) + Compatibilidade (%) na lista de Recrutamento */
.cand-perfil { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.cand-perfil b { flex: 0 0 auto; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; border-radius: 5px; padding: 2px 6px; }
.cand-perfil span { font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-envtest, .cand-defcargo { background: none; border: 1px dashed var(--line); border-radius: 999px; color: var(--text-soft); font: inherit; font-size: 11.5px; padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.cand-envtest:hover, .cand-defcargo:hover { border-color: var(--pumpkin, #F69861); color: #c9722f; border-style: solid; }
.cand-compat { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; }
.cand-compat b { font-size: 12.5px; font-weight: 800; min-width: 34px; text-align: right; }
.cand-compat-bar { display: inline-block; width: 46px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cand-compat-bar i { display: block; height: 100%; border-radius: 999px; }
.cand-compat.cc-ok b { color: #1e8b4d; } .cand-compat.cc-ok .cand-compat-bar i { background: #2F9E6F; }
.cand-compat.cc-warn b { color: #c9722f; } .cand-compat.cc-warn .cand-compat-bar i { background: #F69861; }
.cand-compat.cc-bad b { color: #b4443c; } .cand-compat.cc-bad .cand-compat-bar i { background: #C8463E; }
/* ~% = cargo veio do teste da pessoa (pode não ser a vaga) — cinza, é indício e não a régua da vaga */
.cand-compat.cc-aprox b { color: var(--text-soft, #6b7280); font-weight: 700; } .cand-compat.cc-aprox .cand-compat-bar i { background: #A7B0BD; }
.cand-defcargo-alerta { border-color: rgba(200,70,62,.5); color: #b4443c; }
.cand-cm-off { opacity: .5; cursor: not-allowed; }
.cand-compat-none { color: var(--muted, #bbb); }
.cand-cargo-menu { max-height: 420px; overflow: auto; min-width: 290px; }
.cand-cm-h { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); padding: 8px 12px 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface, #fff); }
.cand-cm-perfil { font-size: 10px; font-weight: 800; background: rgba(246,152,97,.16); color: #c9722f; border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.cand-cm-sem { font-size: 10px; color: var(--muted, #bbb); margin-left: 4px; }
.cand-cm-vazio { padding: 12px; font-size: 12.5px; color: var(--text-soft); }
.cand-cm-limpar { color: var(--text-soft) !important; border-top: 1px solid var(--line); }
/* Abas do modal do candidato (Dados / DISC) */
.cand-tabs { display: flex; gap: 4px; padding: 8px 20px 0; border-bottom: 1px solid var(--line); }
.cand-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--text-soft); cursor: pointer; margin-bottom: -1px; }
.cand-tab.on { color: var(--pumpkin, #c9722f); border-bottom-color: var(--pumpkin, #F69861); }
.cand-disc-body { max-height: 70vh; overflow: auto; }
.cand-disc-body .dsc-scope { padding: 0; }
.cand-disc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.cand-disc-intro { display: flex; align-items: flex-start; gap: 12px; background: rgba(246,152,97,.08); border: 1px solid rgba(246,152,97,.25); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.45; margin-bottom: 14px; }
.cand-disc-intro svg { flex: 0 0 auto; width: 22px; height: 22px; opacity: .7; }
.cand-disc-link { margin-top: 6px; font-size: 12.5px; }
.cand-disc-link a { color: #356BA8; word-break: break-all; }
.cand-disc-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); margin: 4px 0 8px; }
.cand-disc-sug { display: flex; flex-direction: column; gap: 8px; }
.cand-disc-sugrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; }
.cand-disc-sugrow.bate { border-color: var(--pumpkin, #F69861); background: rgba(246,152,97,.06); }
.cand-disc-suginfo { min-width: 0; }
.cand-disc-match { font-size: 10px; font-weight: 700; background: rgba(39,174,96,.14); color: #1e8b4d; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.cand-disc-sugmeta { font-size: 12px; color: var(--text-soft); margin-top: 3px; }
.cand-disc-vazio { color: var(--text-soft); font-size: 13px; padding: 8px 2px; }

.rhc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rhc-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rhc-sel { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer; max-width: 220px; }
.rhc-busca { border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: 13px; background: var(--surface); color: var(--text); font-family: inherit; width: 230px; }
.rhc-busca:focus { outline: none; border-color: var(--sw-sandy, #C98A3B); }
.rhc-limpar { font-size: 12px; padding: 5px 9px; }
.rhc-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rhc-acoes { display: flex; align-items: center; gap: 8px; }
.rhc-btn { background: var(--ok); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.rhc-btn:hover { background: var(--netuno-2); }
.rhc-btn:disabled { opacity: .6; cursor: default; }
.rhc-btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text-soft); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rhc-btn-ghost svg { width: 15px; height: 15px; }
.rhc-btn-ghost:hover { background: var(--bg); }

.rhc-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow); }
.rhc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rhc-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: nowrap; user-select: none; }
.rhc-table thead th.ta-r { text-align: right; }
.rhc-table thead th.sorted-asc::after { content: ' ▲'; font-size: 9px; }
.rhc-table thead th.sorted-desc::after { content: ' ▼'; font-size: 9px; }
.rhc-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rhc-table td.ta-r { text-align: right; }
.rhc-table tbody tr:last-child td { border-bottom: 0; }
.rhc-row { cursor: pointer; }
.rhc-row:hover { background: #FFF8F2; }
.rhc-nome { font-weight: 600; color: var(--text); }
.rhc-sub { font-size: 11px; color: var(--muted); }
.rhc-tp { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.rhc-tp-clt { background: #E8F6F4; color: var(--ok); }
.rhc-tp-pj { background: #EEF2FF; color: #4338CA; }
.rhc-st { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.rhc-st-ok { background: #E7F7EE; color: var(--ok); }
.rhc-st-warn { background: #FFF6E5; color: var(--warn); }
.rhc-st-off { background: #EEF1F3; color: #64748B; }
.rhc-edit { background: none; border: 0; color: var(--ok); font-size: 12px; font-weight: 700; cursor: pointer; }
/* Boleto → Pagamentos Geral (Financeiro) */
.bl-fin { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(27,74,71,.12); color: #1b4a47; margin-left: 4px; }
.bl-lancar-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.bl-lancar-wrap .cps-mut { font-size: 12px; }
.bl-lancado { margin: 4px 0 12px; padding: 8px 12px; border-radius: 8px; background: rgba(39,174,96,.1); border: 1px solid rgba(39,174,96,.25); color: #1e8b4d; font-size: 12.5px; }
.rhc-edit:hover { text-decoration: underline; }

/* Ocultar dados sensíveis (LGPD) — mascara até clicar no olhinho */
.rhc-masked { -webkit-text-security: disc !important; text-security: disc !important; color: var(--muted) !important; letter-spacing: 1px; }
.rhc-mask-txt { color: var(--muted); letter-spacing: 1px; }
.rhc-eye { background: none; border: 0; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; opacity: .65; vertical-align: middle; }
.rhc-eye:hover { opacity: 1; }
.rhc-revelar { background: #FFF6E5; border: 1px solid #F3D9A6; color: #92600B; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 999px; padding: 4px 12px; margin-right: 8px; white-space: nowrap; }
.rhc-revelar:hover { background: #FBEFD2; }

.rhc-vazio { text-align: center; padding: 48px 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--text-soft); }
.rhc-vazio svg { width: 40px; height: 40px; color: #F69861; opacity: .8; }
.rhc-vazio b { display: block; margin: 10px 0 4px; color: var(--text); font-size: 15px; }
.rhc-vazio p { font-size: 13px; max-width: 460px; margin: 0 auto 16px; }

/* Modal de formulário */
.rhc-overlay { position: fixed; inset: 0; background: rgba(27,67,80,.5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 1000; overflow-y: auto; }
.rhc-modal { background: var(--surface); border-radius: 14px; width: 640px; max-width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 92vh; display: flex; flex-direction: column; }
.rhc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.rhc-modal-head b { font-size: 16px; color: var(--text); }
.rhc-x { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.rhc-x:hover { color: var(--text); }
.rhc-form-erro { background: #FEF2F2; color: var(--danger); font-size: 12.5px; font-weight: 600; padding: 8px 18px; border-bottom: 1px solid #F4C7C0; }
.rhc-modal-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.rhc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.rhc-f { display: flex; flex-direction: column; gap: 4px; }
.rhc-f-l { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.rhc-f-h { font-size: 11px; color: var(--muted); }
.rhc-in { box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); background: var(--surface); width: 100%; font-family: inherit; }
.rhc-in:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.rhc-pix-limpar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); cursor: pointer; margin-top: 4px; }
.rhc-radio { display: flex; gap: 16px; align-items: center; padding: 6px 0; font-size: 13px; }
.rhc-radio label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rhc-benef { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.rhc-benef-l { font-size: 12px; font-weight: 700; color: var(--text-soft); width: 100%; margin-bottom: 2px; }
.rhc-benef label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.rhc-modal-body > .rhc-f { margin-top: 14px; }
.rhc-modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--line); }
/* Pagamentos: toggle Funcionário/Freelancer + hint do freelancer */
.pg-benef { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; width: fit-content; }
.pg-benef-b { border: none; background: var(--surface, #fff); color: var(--text-soft, #555); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 16px; cursor: pointer; }
.pg-benef-b + .pg-benef-b { border-left: 1px solid var(--line); }
.pg-benef-b.on { background: var(--ok, #0f766e); color: #fff; }
.pg-freela-hint { font-size: 12px; line-height: 1.45; color: var(--text-soft, #555); background: var(--bg, #fafafa); border-radius: 8px; padding: 8px 11px; margin-top: 12px; }
/* Pagamentos: quebras (soma por origem/setor, respeitando os filtros) */
.pg-quebras { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 2px 0 12px; }
.pg-quebra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-quebra-l { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #999); }
.pg-chip { font-size: 12px; color: var(--text-soft, #555); background: var(--bg, #fafafa); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pg-chip b { color: var(--text, #333); font-weight: 700; }
/* Lançamento em massa (lote) — grade estilo planilha dentro do modal */
.lote-modal { max-width: 920px; }
.lote-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.lote-tools #loteAdd { max-width: 320px; }
.lote-massa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg, #fafafa); border: 1px dashed var(--line); border-radius: 9px; padding: 8px 10px; margin-bottom: 12px; }
.lote-massa .rhc-f-l { margin: 0 4px 0 0; font-weight: 700; }
.lote-massa .rhc-in, .lote-massa .lote-cell { max-width: 190px; }
.lote-massa input[name="bulkValor"] { max-width: 140px; }
.lote-grid { max-height: 46vh; overflow: auto; }
.lote-grid table { font-size: 13px; }
.lote-grid td, .lote-grid th { padding: 5px 8px; }
.lote-cell { height: 32px; padding: 4px 8px; font-size: 13px; }
.lote-grid input.lote-cell { min-width: 90px; }
/* Cadastrar funcionário na hora (+ novo) no modal de Lançar Pagamentos */
.pg-func-row { display: flex; gap: 6px; align-items: stretch; }
.pg-func-row input { flex: 1 1 auto; }
.pg-addfunc { flex: 0 0 auto; white-space: nowrap; padding: 0 12px; }
.pg-quickadd { border: 1px dashed var(--line); border-radius: 9px; padding: 10px 12px; margin: 8px 0 4px; background: var(--bg, #fafafa); }
.pg-quickadd-h { font-size: 12.5px; font-weight: 700; color: var(--text-soft, #555); margin-bottom: 8px; }
.pg-quickadd-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.lote-badge { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 5px; margin-right: 5px; vertical-align: middle; }
.lote-badge-func { background: #E9F4EF; color: #1f7a52; }
.lote-badge-free { background: #FCF3E2; color: #9a6a12; }
.lote-row-erro { font-size: 11.5px; font-weight: 700; color: var(--danger, #a3241c); margin-top: 3px; }
.lote-row-err td { background: #FDF3F1; }
.lote-pix-wrap { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.lote-pix-l { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #9a6a12; background: #FCF3E2; border-radius: 5px; padding: 1px 6px; }
.lote-pix { height: 30px; padding: 4px 8px; font-size: 12.5px; max-width: 340px; flex: 1; }
.lote-total { font-size: 13.5px; color: var(--text-soft, #555); }
.lote-total b { color: var(--text, #333); font-size: 15px; }
@media (max-width: 640px) { .lote-grid table { min-width: 560px; } }
.rhc-foot-r { display: flex; gap: 8px; }
.rhc-btn-del { background: none; border: 1px solid #F4C7C0; color: var(--danger); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.rhc-btn-del:hover { background: #FEF2F2; }
@media (max-width: 640px) { .rhc-grid { grid-template-columns: 1fr; } .rhc-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── RH · Avaliação de Desempenho (.rha-*) ── */
.rha-abas { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.rha-aba { background: none; border: 0; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.rha-aba.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.rha-abas + .rha-abas, .rha-abas { margin-bottom: 12px; }

.rha-nota { display: inline-block; font-weight: 800; padding: 1px 8px; border-radius: 6px; }
.rha-nota-ok { background: #E7F7EE; color: var(--ok); }
.rha-nota-warn { background: #FFF6E5; color: var(--warn); }
.rha-nota-bad { background: #FEECEC; color: var(--danger); }
.rha-nota-off { background: #EEF1F3; color: #64748B; }

.rha-row { cursor: pointer; }
.rha-row:hover { background: #FFF8F2; }

/* critérios + estrelas (no modal) */
.rha-crit { margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; }
.rha-crit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.rha-crit-row:last-of-type { border-bottom: 0; }
.rha-crit-l { font-size: 13px; color: var(--text); }
.rha-stars { display: inline-flex; gap: 3px; flex: none; }
.rha-star { font-size: 21px; line-height: 1; color: #D8DEE2; cursor: pointer; user-select: none; transition: color .08s; }
.rha-star.on { color: #F5A623; }
.rha-star:hover { color: #F5A623; }
.rha-nota-prev { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--text-soft); }
.rha-nota-prev b { font-size: 15px; }
/* Template Desempenho (SWISZ) — faixa do resultado + bloco de campos extras */
.rha-modal { max-width: 720px; width: 94vw; }
.rha-faixa { margin-top: 6px; font-size: 13px; color: var(--text-soft); }
.rha-faixa b { font-size: 13px; }
.rha-det { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg, #fafafa); display: flex; flex-direction: column; gap: 10px; }
.rha-det-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #c9722f; }
.rha-det-atual { font-size: 12.5px; color: var(--text-soft); margin-top: -4px; }
.rha-det .rhc-f-full { grid-column: unset; }
.rha-print-row { padding: 2px 7px; }

/* ranking */
.rha-rk-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px 16px; }
.rha-rk { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rha-rk:last-child { border-bottom: 0; }
.rha-rk-pos { font-size: 13px; font-weight: 800; color: var(--muted); width: 34px; flex: none; text-align: center; }
.rha-rk-main { flex: 1; min-width: 0; }
.rha-rk-nome { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.rha-rk-sub { font-weight: 400; color: var(--muted); font-size: 12px; }
.rha-rk-barbg { height: 9px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.rha-rk-bar { height: 100%; border-radius: 6px; min-width: 4px; }
.rha-rk-val { flex: none; text-align: right; width: 84px; }
.rha-rk-val b { font-size: 14px; }
.rha-rk-n { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ── RH · Nine Box (.nb-*) ── */
.nb-wrap { display: flex; gap: 6px; align-items: stretch; margin-bottom: 14px; }
.nb-axisY { display: flex; align-items: center; justify-content: center; flex: none; }
.nb-axisY span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.nb-board { flex: 1; min-width: 0; }
.nb-grid { display: grid; grid-template-columns: 58px 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(118px, auto)) 24px; gap: 8px; }
.nb-rowlabel { display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.nb-corner { }
.nb-collabel { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.nb-axisX { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); margin-top: 6px; padding-left: 58px; }
.nb-cell { border-radius: 10px; border: 1px solid; padding: 8px 10px; display: flex; flex-direction: column; min-height: 110px; }
.nb-cell-h { font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }
.nb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.nb-t-g { background: #ECFBF3; border-color: #BFE6D3; }
.nb-t-g .nb-cell-h { color: var(--ok); }
.nb-t-y { background: #FFF7E8; border-color: #F1DDB0; }
.nb-t-y .nb-cell-h { color: var(--warn); }
.nb-t-r { background: #FDEEEE; border-color: #F3CFCF; }
.nb-t-r .nb-cell-h { color: var(--danger); }
.nb-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 5px 3px 10px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); max-width: 100%; }
.nb-chip:hover { border-color: var(--ok); }
.nb-chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.nb-tray { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; }
.nb-tray-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.nb-tray-sub { font-weight: 400; color: var(--muted); }
.nb-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-soft); }
.nb-leg-i { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
/* editor (segmentos) */
.nb-modal { width: 460px; }
.nb-eixo { margin-bottom: 14px; }
.nb-eixo-l { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.nb-eixo-sug { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.nb-seg { display: flex; gap: 6px; }
.nb-seg-b { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 0; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.nb-seg-b:hover { border-color: var(--ok); }
.nb-seg-b.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.nb-seg-b.sug { border-color: #F5A623; border-style: dashed; color: var(--warn); }

/* ── RH · PDI (.pdi-*) ── */
.pdi-row { cursor: pointer; }
.pdi-row:hover { background: #FFF8F2; }
.pdi-gap { display: inline-block; background: #EEF2FF; color: #4338CA; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin: 0 4px 4px 0; }
.pdi-gap-rm { cursor: pointer; } .pdi-gap-rm b { opacity: .6; } .pdi-gap-rm:hover { background: #E0E7FF; } .pdi-gap-rm:hover b { opacity: 1; }
.pdi-prog { display: flex; align-items: center; gap: 8px; }
.pdi-prog-bg { flex: 1; height: 8px; background: var(--bg); border-radius: 6px; overflow: hidden; min-width: 70px; }
.pdi-prog-bar { height: 100%; background: var(--ok); border-radius: 6px; }
.pdi-prog span { font-size: 11.5px; color: var(--text-soft); font-weight: 600; flex: none; }
/* editor */
.pdi-modal { width: 600px; }
.pdi-sec { margin: 14px 0; }
.pdi-sec-h { font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.pdi-sug { background: #FFF7E8; border: 1px solid #F1DDB0; color: var(--warn); border-radius: 7px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.pdi-sug:hover { background: #FDEFCF; }
.pdi-gaps { margin-bottom: 8px; min-height: 22px; }
.pdi-add { display: flex; }
.pdi-acoes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pdi-ac { display: flex; align-items: center; gap: 9px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.pdi-ac:last-child { border-bottom: 0; }
.pdi-ac-chk input { width: 16px; height: 16px; accent-color: var(--ok); cursor: pointer; }
.pdi-ac-tx { flex: 1; font-size: 13px; color: var(--text); }
.pdi-ac-tx.done { text-decoration: line-through; color: var(--muted); }
.pdi-ac-rm { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pdi-ac-rm:hover { color: var(--danger); }
.pdi-prog-mini { font-weight: 600; color: var(--ok); }

/* submenu "Desenvolvimento" nas abas */
.tabdd { position: relative; display: inline-block; }
.tabdd-car { margin-left: 6px; font-size: 10px; opacity: .7; }
.tabdd-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 5px; min-width: 168px; display: none; z-index: 50; }
.tabdd.open .tabdd-menu { display: block; }
.tabdd-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.tabdd-item:hover { background: var(--bg); color: var(--text); }
.tabdd-item.on { background: #E8F6F4; color: var(--ok); }

/* chip de tipo do processo (admissão/demissão) */
.proc-tp { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.proc-tp-admissao { background: #E7F7EE; color: var(--ok); }
.proc-tp-demissao { background: #FEECEC; color: var(--danger); }
.proc-row { cursor: pointer; }
.proc-row:hover { background: #FFF8F2; }

/* ── RH · Controle de Ponto (.pto-*) ── */
.pto-fase { display: inline-block; font-size: 10px; font-weight: 800; background: #FFF1EC; color: var(--danger); padding: 1px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.pto-msg { background: #E7F7EE; color: var(--ok); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; margin-bottom: 12px; }
.pto-sec-h { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; color: var(--text); margin: 16px 0 10px; }
.pto-jors { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 6px; }
.pto-jor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 14px; }
.pto-jor-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pto-jor-nome { flex: 1; border: 0; border-bottom: 1px dashed var(--line); font-size: 14px; font-weight: 700; color: var(--text); padding: 2px 0; background: none; }
.pto-jor-nome:focus { outline: none; border-bottom-color: var(--ok); }
.pto-jor-n { font-size: 11px; color: var(--muted); flex: none; }
.pto-jor-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; color: var(--text-soft); }
.pto-jor-row > span { width: 54px; flex: none; }
.pto-jor-row i { color: var(--muted); font-style: normal; }
.pto-jor-row2 { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; font-size: 11.5px; color: var(--text-soft); }
.pto-jor-row2 label { display: inline-flex; align-items: center; gap: 6px; }
.pto-in { border: 1px solid var(--line); border-radius: 7px; padding: 5px 7px; font-size: 12px; color: var(--text); width: 78px; font-family: inherit; }
.pto-in[type="number"] { width: 60px; }
.pto-in:focus { outline: none; border-color: var(--ok); }
.pto-jor-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.pto-del { background: none; border: 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.pto-del:hover { color: var(--danger); }
.pto-save { padding: 6px 14px; font-size: 12px; }
.pto-bulk { gap: 6px; flex-wrap: wrap; }
.pto-fsel { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 12.5px; background: var(--surface); color: var(--text); cursor: pointer; }
.pto-row td { vertical-align: middle; }

/* Pedidos de Compra (espelho da Base) */
.cmp-table { font-size: 12.5px; }
.cmp-num { font-weight: 600; color: var(--text); }
.cmp-row:hover { background: #F4FAF9; }
.cmp-div { color: var(--danger); font-weight: 800; }
.cmp-warn { font-size: 11px; }
.cmp-rowdiv { background: #FEF6F5; }
.cmp-rowdiv:hover { background: #FDEEEC; }
.cmp-divtog { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; user-select: none; }
.cmp-divtog input { width: 14px; height: 14px; accent-color: var(--danger); }

.rup-ctrls { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.rup-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.rup-toggle input { width: 15px; height: 15px; accent-color: var(--ok); }
.rup-ctrls-sub { font-size: 12px; color: var(--muted); }
/* Ver por / Colunas (dropdowns da Ruptura) */
.rup-dd { position: relative; display: inline-block; }
.rup-fbtn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.rup-fbtn:hover { border-color: var(--ok); }
.rup-fbtn b { font-weight: 700; }
.rup-glabel { color: var(--muted); }
.rup-car { font-size: 10px; opacity: .7; }
.rup-pop { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; min-width: 180px; z-index: 60; }
.rup-pop-opt { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.rup-pop-opt:hover { background: var(--bg); color: var(--text); }
.rup-pop-opt.on { background: #E8F6F4; color: var(--ok); }
.rup-pop-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 4px 8px 6px; }
.rup-pop-acts a { color: var(--ok); cursor: pointer; font-weight: 600; text-transform: none; letter-spacing: 0; }
.rup-pop-acts a:hover { text-decoration: underline; }
.rup-pop-i { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.rup-pop-i:hover { background: var(--bg); }
.rup-pop-i input { width: 15px; height: 15px; accent-color: var(--ok); }
.rup-ctrls-acao { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.rup-reload { display: inline-flex; align-items: center; gap: 6px; background: var(--ok); color: #fff; border: 0; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.rup-reload:hover { background: var(--netuno-2); }
.rup-reload:disabled { opacity: .6; cursor: default; }
.rup-recalc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ok); background: #E8F6F4; border: 1px solid #BFE6E0; border-radius: 8px; padding: 6px 12px; flex-wrap: wrap; }
.rup-recalc-sub { font-size: 11px; font-weight: 500; color: var(--text-soft); width: 100%; }
.rup-recalc-err { font-size: 12px; font-weight: 600; color: var(--danger); }
.rup-spin { width: 14px; height: 14px; border: 2px solid #BFE6E0; border-top-color: var(--ok); border-radius: 50%; display: inline-block; animation: rup-spin 0.8s linear infinite; }
@keyframes rup-spin { to { transform: rotate(360deg); } }

/* Tabela de ruptura: rola na horizontal (colunas no tamanho natural, sem esmagar) e tem uma
   BARRA DE ROLAGEM FLUTUANTE (.rup-hbar, sticky na base) sempre visível e arrastável.
   Antes era overflow:hidden + width:100% → espremia e cortava as colunas da direita sem scroll. */
.rup-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow); scrollbar-width: none; }
.rup-table-wrap::-webkit-scrollbar { height: 0; width: 0; }
.rup-table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 13px; }
/* barra horizontal flutuante (pílula) — fica colada na base da tela enquanto a tabela está à vista */
/* Dica de discoverability: aparece (via JS) só quando há colunas escondidas à direita. */
.rup-hhint { text-align: center; font-size: 11.5px; color: var(--sw-chocolate, #D9501E); font-weight: 600; letter-spacing: .2px; margin: 6px 0 1px; user-select: none; }
.rup-hbar { position: sticky; bottom: 8px; z-index: 7; margin: 2px 0 2px; height: 18px; overflow-x: auto; overflow-y: hidden; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 3px 16px rgba(27,67,80,.24); scrollbar-width: thin; scrollbar-color: var(--sw-pumpkin, #F27127) transparent; }
.rup-hbar-in { height: 1px; }
.rup-hbar::-webkit-scrollbar { height: 16px; }
.rup-hbar::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 999px; border: 3px solid var(--surface); }
.rup-hbar::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }
.rup-hbar::-webkit-scrollbar-track { background: transparent; }

/* ── Padrão GENÉRICO de relatório de produto (SwiszHBar): grade rolável + barra flutuante + total fixo ── */
/* esconde a scrollbar nativa do wrap (a rolagem horizontal vira a barra-pílula flutuante) */
.sw-hidescroll { scrollbar-width: none; }
.sw-hidescroll::-webkit-scrollbar { height: 0 !important; width: 0 !important; }
/* grade: cabeçalho fixo no topo + TOTAL fixo no final (sticky) + colunas no tamanho natural (sem esmagar) */
.sw-grid { overflow: auto !important; max-height: calc(100vh - 232px) !important; min-height: 280px; -webkit-overflow-scrolling: touch; }
.sw-grid > table { min-width: max-content; }
.sw-grid thead th { position: sticky; top: 0; z-index: 4; background: var(--surface-2); }
.sw-grid tfoot td, .sw-grid tfoot th { position: sticky; bottom: 0; z-index: 4; background: var(--surface-2); box-shadow: 0 -1px 0 var(--line-2); }
/* a barra-pílula flutuante (sempre visível na base da tela, arrastável) */
.sw-hbar { position: sticky; bottom: 8px; z-index: 7; margin: 3px 0 2px; height: 15px; overflow-x: auto; overflow-y: hidden; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: 0 3px 14px rgba(27,67,80,.18); scrollbar-width: thin; scrollbar-color: var(--sw-pumpkin, #F27127) transparent; }
.sw-hbar-in { height: 1px; }
.sw-hbar::-webkit-scrollbar { height: 13px; }
.sw-hbar::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 999px; border: 3px solid var(--surface); }
.sw-hbar::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }
.sw-hbar::-webkit-scrollbar-track { background: transparent; }

/* Coluna de ranking (#) à esquerda do produto — Ruptura, Giro e Relatório de Vendas (segue a ordenação atual) */
.rup-rank-h, .vgiro-th-rank, .vrel-th-rank, .rent-th-rank { width: 42px; min-width: 42px; text-align: right; padding-right: 9px !important; color: var(--muted); cursor: default; font-variant-numeric: tabular-nums; }
.rup-rank, .vgiro-rank, .vrel-rank, .rent-rank { width: 42px; min-width: 42px; text-align: right; padding-right: 9px; color: var(--text-soft); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.vgiro-table .vgiro-rank, .vrel-table .vrel-rank { background: var(--surface); }
.rup-table tbody tr:hover > .rup-rank { color: var(--chocolate); }
.rup-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-soft);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 9px 11px; border-bottom: 1px solid var(--line-2); cursor: pointer; white-space: nowrap; user-select: none;
}
.rup-table thead th:hover { color: var(--text); }
.rup-table th.ta-r { text-align: right; }
.rup-table th.ta-l { text-align: left; }
/* Rodapé de TOTAIS (soma das colunas de unidades e R$ sobre todas as linhas filtradas) — no fim da tabela */
.rup-table tfoot .rup-tot-td { background: var(--surface-2); border-top: 2px solid var(--line-2); padding: 10px 11px; font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rup-table tfoot .rup-tot-td.ta-r { text-align: right; }
.rup-table tfoot .rup-tot-td.ta-l { text-align: left; }
.rup-table tfoot .rup-tot-td.rup-rank { background: var(--surface-2); }
/* Reordenar colunas (arrastar o cabeçalho) */
.rup-table th.rup-th-drag { cursor: grab; }
.rup-table th.rup-th-drag:active { cursor: grabbing; }
.rup-table th.rup-th-dragging { opacity: .45; }
.rup-table th.rup-th-over { box-shadow: inset 3px 0 0 var(--chocolate); }
.rup-sort { display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; opacity: 0; }
.rup-table th.sorted-desc .rup-sort { opacity: .7; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.rup-table th.sorted-asc .rup-sort { opacity: .7; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.rup-table td { padding: 8px 11px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.rup-table td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.rup-table tbody tr:hover { background: var(--surface-2); }
.rup-sku { font-weight: 700; color: var(--text); }
.rup-nome { font-size: 11px; color: var(--muted); margin-top: 1px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.rup-imp { font-weight: 800; color: var(--danger); }
/* IMPACTO R$ FIXO à direita — SÓ quando o Impacto é a última coluna (classe rup-imp-last).
   Se o usuário reordenar e o Impacto sair da ponta, a fixação desliga (evita sobreposição). */
.rup-table.rup-imp-last th[data-k="impacto_ajustado"], .rup-table.rup-imp-last td.rup-imp { position: sticky; right: 0; background: var(--surface); box-shadow: -1px 0 0 var(--line-2); }
.rup-table.rup-imp-last td.rup-imp { z-index: 2; }
.rup-table.rup-imp-last thead th[data-k="impacto_ajustado"] { z-index: 4; background: var(--surface-2); }
.rup-table.rup-imp-last tbody tr:nth-child(even):not(:hover) > td.rup-imp { background: #FBF8F4; }
.rup-table.rup-imp-last tbody tr:hover > td.rup-imp { background: #FBEEE6; }
.rup-table.rup-imp-last .rup-row.rup-crit > .rup-imp { background: #FEF6F5; }
.rup-table.rup-imp-last .rup-row.open.rup-crit > .rup-imp { background: #FBEAE7; }
.rup-prod { color: var(--ok); font-weight: 700; }
.rup-zero { color: var(--muted); }
/* Rentab. Média */
.rup-rentab-real { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.rup-rentab-real.rup-prejuizo { color: var(--danger); font-weight: 700; }
.ria-it-rentab   { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Em produção: quantidade + etapas reais (colunas do Trello) + previsão de chegada (embaixo) */
.rup-prod-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; }
.rup-etapas { font-size: 10.5px; font-weight: 600; color: var(--pumpkin); white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.rup-cheg { font-size: 10.5px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.rup-cheg-warn { color: var(--warn); }
/* Pedido (card original) — prazo pequeno embaixo da quantidade */
.rup-cheg-mini { font-size: 10.5px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.rup-ped-link { text-decoration: none; color: inherit; display: inline-block; }
.rup-ped-link:hover .rup-prod { text-decoration: underline; }
.rup-ped-link:hover .rup-cheg-mini { color: var(--chocolate); }
/* Em Produção — soma dos desmembrados, clicável p/ abrir o detalhe */
.rup-desm-link { cursor: pointer; color: var(--ok); font-weight: 700; text-decoration: none; }
.rup-desm-link:hover { text-decoration: underline; color: var(--chocolate); }
/* Modal "Em Produção · desmembrados" — 2 níveis (Pedidos → Cópias) */
.rup-desm-modal { position: relative; width: min(860px, 96vw); display: flex; flex-direction: column; max-height: 88vh; overflow: hidden; }
.rup-desm-modal .rup-etq-x { position: absolute; top: 12px; right: 14px; }
.rup-desm-head { padding: 20px 22px 0; flex: 0 0 auto; }
.rup-desm-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; padding-right: 28px; }
.rup-desm-subtit { font-size: 12px; color: var(--text-soft); margin-bottom: 14px; }
.rup-desm-corpo { padding: 0 22px 20px; overflow-y: auto; flex: 1 1 auto; }
.rup-desm-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rup-desm-tbl th { text-align: left; font-size: 11px; font-weight: 700; color: var(--text-soft); border-bottom: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; }
.rup-desm-tbl th.ta-r, .rup-desm-tbl td.ta-r { text-align: right; }
.rup-desm-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.rup-desm-tbl td.rup-lista { white-space: normal; word-break: break-word; max-width: 340px; min-width: 180px; }
.rup-desm-tbl tr:last-child td { border-bottom: none; }
.rup-desm-tbl a { color: var(--pumpkin); text-decoration: none; font-weight: 600; }
.rup-desm-tbl a:hover { text-decoration: underline; }
.rup-desm-pedrow { cursor: pointer; }
.rup-desm-pedrow:hover td { background: var(--surface-2, #f4f5f8); }
.rup-desm-ver { color: var(--pumpkin); font-weight: 600; font-size: 12px; white-space: nowrap; }
.rup-desm-back { border: none; background: transparent; color: var(--pumpkin); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0 0 12px; display: block; }
.rup-desm-back:hover { text-decoration: underline; color: var(--chocolate); }
.rup-desm-vazio { padding: 18px; text-align: center; color: var(--text-soft); font-size: 13px; }
/* Accordion inline: linha de pedido expandida + sub-tabela de desmembrados */
.rup-desm-pedrow-open td { background: var(--surface-2, #f4f5f8); }
.rup-desm-pedrow-open .rup-desm-ver { color: var(--ok); }
.rup-desm-detail-td { padding: 0 !important; border-bottom: 2px solid var(--line) !important; }
.rup-desm-subtbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface-2, #f4f5f8); }
.rup-desm-subtbl th { font-size: 11px; font-weight: 700; color: var(--text-soft); padding: 5px 8px 5px 36px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rup-desm-subtbl th.ta-r { padding-left: 8px; }
.rup-desm-subtbl td { padding: 6px 8px 6px 36px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; vertical-align: middle; }
.rup-desm-subtbl td.ta-r { padding-left: 8px; }
.rup-desm-subtbl td.rup-lista { white-space: normal; word-break: break-word; }
.rup-desm-subtbl tr:last-child td { border-bottom: none; }
.rup-desm-subtbl a { color: var(--pumpkin); text-decoration: none; font-weight: 600; }
.rup-desm-subtbl a:hover { text-decoration: underline; }
.rup-sempedido { display: inline-block; font-size: 11px; font-weight: 800; color: var(--danger); background: #FEECEB; border: 1px solid #F6C9C4; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* F10: aviso discreto Corte × Trello divergem (headline "Em Produção" + linha de pedido no modal) */
.rup-diverge-badge { display: inline-block; font-size: 12px; line-height: 1; color: #8a6100; cursor: help; margin-left: 3px; vertical-align: middle; }
.rup-desm-pedrow-diverge td { background: #FFF6E0; }
.rup-desm-pedrow-diverge:hover td { background: #FFF0CC; }
.rup-desm-pedrow-diverge.rup-desm-pedrow-open td { background: #FFF0CC; }
/* F3: entrega total/parcial (recebido × pedido das OCs da Base) */
.rup-entrega { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.rup-entrega-total { color: #1e7d34; background: #E7F6EC; border: 1px solid #BFE6CB; }
.rup-entrega-parcial { color: #8a6100; background: #FFF6E0; border: 1px solid #F3DCA0; }
.rup-entrega-nenhum { color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); }
.rup-entrega-link { cursor: pointer; text-decoration: none; }
.rup-entrega-link:hover .rup-entrega { text-decoration: underline; }
.rup-dias { font-weight: 700; }
.rup-tend-up { color: var(--ok); font-weight: 700; font-size: 12px; }
.rup-tend-dn { color: var(--warn); font-weight: 700; font-size: 12px; }
.rup-tend-eq { color: var(--muted); font-size: 12px; }
.rup-row.rup-crit .rup-dias { color: var(--danger); }
.rup-row.rup-crit { background: #FEF6F5; }
.rup-row.rup-warn .rup-dias { color: var(--warn); }
.rup-empty { text-align: center; color: var(--text-soft); padding: 28px; font-size: 14px; }

.rup-foot { font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.rup-err { display: flex; gap: 12px; align-items: center; background: #FFF7F5; border: 1px solid #F4C7C0; border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 16px; }
.rup-err svg { width: 24px; height: 24px; color: var(--danger); flex-shrink: 0; }
.rup-err b { color: var(--text); }
.rup-err-sub { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }
/* Tags de produto (origem própria×brás · estação) na célula do SKU */
.rup-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.rup-tag { font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.rup-tag.tg-prop { color: var(--ok); background: #ECFDF5; border-color: #BFE6E0; }   /* própria = produzir (fornecedor SWISS/SWISZ na Base) */
.rup-tag.tg-bras { color: #1D4ED8; background: #EFF4FF; border-color: #C7D6F5; }   /* brás = comprar (demais fornecedores) */
.rup-tag.tg-beth { color: #7C3AED; background: #F5F0FF; border-color: #DED0F7; }   /* fornecedor Beth */
.rup-tag.tg-semforn { color: var(--muted); background: #F3F4F6; border-color: var(--line-2); }   /* sem fornecedor cadastrado na Base */
.rup-tag.tg-ver  { color: var(--warn); background: #FFF6E8; border-color: #F2DCB0; }   /* verão */
.rup-tag.tg-inv  { color: #3F5C8A; background: #EEF2F9; border-color: #D2DCEC; }   /* inverno */
.rup-tag.tg-novo { color: #fff; background: var(--pumpkin); border-color: var(--pumpkin); box-shadow: 0 1px 4px rgba(242,113,39,.35); }   /* produto novo ≤60d */
/* Etiqueta de Origem/Fornecedor: clicável (mostra o fornecedor EXATO da Base ao lado, pra conferência) */
.rup-tag-forn { cursor: pointer; }
.rup-tag-forn:hover { filter: brightness(0.97); }
.rup-forn-exato { font-weight: 500; opacity: .85; }
/* Etiquetas manuais (cor própria via --tc) + botão de atribuir */
.rup-tag-man { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; color: #fff; background: var(--tc, #6E9CA7); border: 1px solid var(--tc, #6E9CA7); }
.rup-tag-add { font-size: 11px; line-height: 1; padding: 1px 5px; border-radius: 999px; border: 1px dashed var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; }
.rup-tag-add:hover { border-color: var(--pumpkin); color: var(--chocolate); }
/* Modal de etiquetas/atributos */
.rup-etq-ov { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; z-index: 4100; padding: 20px; }
.rup-etq-modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 420px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
/* rup-desm-modal compartilha rup-etq-modal mas precisa de largura maior (5 colunas + nov. Original/Desmembrados).
   Esta regra vem DEPOIS de rup-etq-modal para vencer max-width:420px e width:100% via cascade (mesma especificidade, source-order). */
.rup-desm-modal { width: min(860px, 96vw); max-width: none; }
/* Modal "Observação": mesma moldura estreita do rup-etq-modal (texto livre, não é tabela), mas com o
   botão fechar ancorado no canto — mesma receita (top:12px/right:14px) do rup-desm-modal .rup-etq-x.
   Sem isso, o × vira filho solto do flex-column e estica 100% da largura → texto "×" centralizado no topo. */
.rup-obs-modal { position: relative; }
.rup-obs-modal .rup-etq-x { position: absolute; top: 12px; right: 14px; }
.rup-etq-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.rup-etq-head b { font-size: 15px; }
.rup-etq-x { border: none; background: transparent; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.rup-etq-x:hover { color: var(--danger); }
.rup-etq-erro { margin: 10px 16px 0; background: #FEECEB; border: 1px solid #F5B5B0; color: var(--danger); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.rup-etq-body { padding: 14px 16px; overflow-y: auto; }
.rup-etq-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.rup-etq-cor { width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 7px; padding: 0; background: none; cursor: pointer; }
.rup-etq-nome { flex: 1; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.rup-etq-nome:focus, .rup-attr-sel:focus { outline: none; border-color: var(--pumpkin); }
.rup-etq-save { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.rup-etq-save:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.rup-etq-del { border: none; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.rup-etq-del:hover { color: var(--danger); background: #FEECEB; }
.rup-etq-nova { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.rup-etq-nova input[type=text] { flex: 1; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.rup-etq-add-btn { border: none; background: var(--pumpkin); color: #fff; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rup-etq-vazio { color: var(--text-soft); font-size: 13px; padding: 6px 2px; }
.rup-etq-assign { display: flex; flex-direction: column; gap: 6px; }
.rup-etq-opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.rup-etq-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.rup-etq-link { margin-top: 12px; border: none; background: transparent; color: var(--pumpkin); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
.rup-etq-link:hover { text-decoration: underline; }
.rup-etq-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin: 14px 0 8px; }
/* Atributos editáveis (Estação/Fornecedor) */
.rup-attr-blk { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rup-attr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rup-attr-row:last-of-type { margin-bottom: 0; }
.rup-attr-l { width: 86px; font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.rup-attr-sel { flex: 1; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer; }
.rup-attr-hint { font-size: 11px; color: var(--muted); margin-top: 8px; }
/* Arquivar */
.rup-arq-tg { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 9px; padding: 5px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rup-arq-tg:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.rup-arq-tg.on { background: var(--chocolate); color: #fff; border-color: var(--chocolate); }
.rup-etq-arq { display: block; width: 100%; margin-top: 14px; padding-top: 12px; border: none; border-top: 1px solid var(--line); background: transparent; color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
.rup-etq-arq:hover { color: var(--chocolate); }
.rup-etq-arq.on { color: var(--ok); }
/* aviso inline quando filtro de etiqueta está ativo (produtos sem etiqueta ficam ocultos) */
.rup-etq-hint { font-size: 11.5px; color: var(--text-soft); background: var(--surface-2, #f4f5f8); border-radius: 7px; padding: 5px 9px; margin-top: 6px; line-height: 1.4; }
/* Linha de filtros por tag */
.rup-filtros { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: -4px 0 12px; }
.rup-fseg { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); }
.rup-fseg b { font-weight: 700; color: var(--text-soft); margin-right: 2px; }
.rup-fchip { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 999px; cursor: pointer; transition: all .12s; }
.rup-fchip:hover { border-color: var(--pumpkin); color: var(--text); }
.rup-fchip.on { background: var(--arapawa); color: #fff; border-color: var(--arapawa); }
.rup-fbtn-exp { color: var(--ok); border-color: #BFE6E0; background: #ECFDF5; }
.rup-fbtn-exp:hover { background: #DCF6F0; }
/* Dropdown de filtros (Origem · Estação · Novos agrupados) */
.rup-pop-filt { min-width: 232px; }
.rup-fgrp { padding: 4px 4px 8px; }
.rup-fgrp + .rup-fgrp { border-top: 1px solid var(--line); padding-top: 8px; }
.rup-fgrp-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 2px 6px 6px; }
.rup-fgrp-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px; }
.rup-pop-foot { font-size: 11px; color: var(--muted); padding: 8px 8px 4px; border-top: 1px solid var(--line); margin-top: 4px; line-height: 1.5; }
.rup-fbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--pumpkin); color: #fff; font-size: 10px; font-weight: 700; }
/* Filtros por FAIXA (estoque/vendas/dias/rentab) */
.rup-fgrp-faixa { padding-top: 8px; border-top: 1px solid var(--line); }
.rup-fx-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; }
.rup-fx-l { flex: 1; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.rup-fnum { width: 58px; border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 6px; font-family: inherit; font-size: 12.5px; text-align: right; color: var(--text); background: var(--surface); }
.rup-fnum:focus { outline: none; border-color: var(--pumpkin); }
.rup-fx-sep { color: var(--muted); }
.rup-fx-clear { font-size: 11px; color: var(--pumpkin); cursor: pointer; font-weight: 700; margin-left: 6px; }
.rup-fx-clear:hover { text-decoration: underline; }
/* Paginação do Controle de Estoque */
.rup-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 4px 2px; font-size: 12.5px; color: var(--text-soft); }
.rup-pager-info { color: var(--text-soft); } .rup-pager-info b { color: var(--text); }
.rup-pager-nav { display: inline-flex; align-items: center; gap: 6px; }
.rup-pg-b { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rup-pg-b:hover:not(:disabled) { border-color: var(--pumpkin); color: var(--chocolate); }
.rup-pg-b:disabled { opacity: .4; cursor: not-allowed; }
.rup-pg-cur { padding: 0 6px; color: var(--text-soft); } .rup-pg-cur b { color: var(--text); }
.rup-pager-size { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.rup-pager-size select { border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); cursor: pointer; }
/* Paginação reusável (SwiszPag) — mesmo visual do Controle de Estoque, em qualquer tabela */
.sw-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 4px 2px; font-size: 12.5px; color: var(--text-soft); }
.sw-pager-info { color: var(--text-soft); } .sw-pager-info b { color: var(--text); }
.sw-pager-nav { display: inline-flex; align-items: center; gap: 6px; }
.sw-pg-b { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sw-pg-b:hover:not(:disabled) { border-color: var(--pumpkin); color: var(--chocolate); }
.sw-pg-b:disabled { opacity: .4; cursor: not-allowed; }
.sw-pg-cur { padding: 0 6px; color: var(--text-soft); } .sw-pg-cur b { color: var(--text); }
.sw-pager-size { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sw-pager-size select { border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 8px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); cursor: pointer; }
/* Falta Chegar (pipeline) + cobertura na chegada (lead time) */
.rup-chegando { color: var(--ok); font-weight: 700; }
.rup-chegada { font-weight: 700; color: var(--text-soft); }
.rup-chegada-crit { color: var(--danger); }
.rup-lead { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.rup-lead input { width: 46px; border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 6px; font-family: inherit; font-size: 12.5px; text-align: right; color: var(--text); background: var(--surface); }
.rup-lead input:focus { outline: none; border-color: var(--pumpkin); }
.rup-lead-bras { font-size: 11px; color: var(--text-soft); opacity: .85; padding: 2px 7px; border: 1px dashed var(--line-2); border-radius: 999px; white-space: nowrap; }
.rup-vendas .rup-vendas-on { color: var(--pumpkin, #F27127); font-size: 9px; line-height: 1; }
.rup-vendas input { border-color: var(--sw-sandy, #C98A3B); }
.rup-filtros-hint { font-size: 11px; color: var(--muted); }
.rup-filtros-hint b { color: var(--text-soft); }
.rup-varnote { font-size: 11.5px; color: var(--text-soft); background: #FFF7F1; border: 1px solid #F4D9C7; border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 10px; line-height: 1.5; }
.rup-varnote b { color: var(--text); }

/* ── Painel de Taxas de Marketplace (SwiszTaxas) — Calculadora + Rentabilidade ── */
.tx-panel { border: 1px solid var(--line-2); border-radius: var(--radius-md, 12px); background: var(--surface); margin: 0 0 16px; overflow: hidden; }
.tx-panel.tx-open { box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.tx-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; }
.tx-head:hover { background: var(--surface-2, #faf7f4); }
.tx-ic { font-size: 18px; line-height: 1; }
.tx-head-tx { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.tx-head-tx b { font-size: 13.5px; color: var(--text); }
.tx-head-sub { font-size: 11px; color: var(--muted); }
.tx-imp { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.tx-imp b { color: var(--text); }
.tx-erro { color: var(--danger); }
.tx-save { border: none; background: var(--pumpkin, #E8590C); color: #fff; font-weight: 600; font-size: 12.5px; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.tx-save:hover { filter: brightness(1.05); }
.tx-save-off, .tx-save:disabled { background: var(--line-2); color: var(--muted); cursor: default; }
.tx-cancel { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.tx-caret { color: var(--muted); display: inline-flex; }
.tx-body { padding: 4px 14px 14px; border-top: 1px solid var(--line-2); }
.tx-global { display: flex; align-items: center; gap: 8px; padding: 12px 2px; font-size: 13px; color: var(--text); flex-wrap: wrap; }
.tx-global label { font-weight: 600; }
.tx-global-hint { font-size: 11px; color: var(--muted); }
.tx-canais { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.tx-canal { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.tx-canal-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.tx-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.tx-badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.tx-badge-base { background: #FFF8E1; color: var(--warn); border: 1px solid #F2DF9E; }
.tx-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.tx-tab th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; padding: 2px 4px; }
.tx-tab th.ta-r, .tx-tab td.ta-r { text-align: right; }
.tx-tab td { padding: 4px 4px; border-top: 1px solid var(--line-1, #f0ebe6); vertical-align: top; }
.tx-cen-nome { color: var(--text); }
.tx-cen-faixa { display: block; font-size: 10.5px; color: var(--muted); }
.tx-u { color: var(--muted); font-size: 11px; }
.tx-inp { width: 58px; border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; font-family: inherit; font-size: 12px; text-align: right; color: var(--text); background: var(--surface); }
.tx-inp:focus { outline: none; border-color: var(--pumpkin); }
.tx-inp-sm { width: 50px; }
.tx-faixas { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.tx-faixa { font-size: 11px; color: var(--text-soft); white-space: nowrap; }
.tx-faixa i { color: var(--muted); font-style: normal; margin-right: 3px; }
.tx-fix { white-space: nowrap; }
.rent-tx-real { color: var(--warn); font-size: 11px; cursor: help; }
.rent-tx-est { color: var(--muted); font-size: 12px; cursor: help; font-weight: 700; }
/* ── Drill-down: estoque por canal/conta + vendas por canal ── */
.rup-caret { display: inline-block; width: 12px; margin-right: 4px; color: var(--muted); font-size: 10px; transition: transform .15s; vertical-align: middle; }
.rup-row { cursor: pointer; }
.rup-row.open { background: var(--surface-2); }
.rup-row.open .rup-caret { transform: rotate(90deg); color: var(--ok); }
.rup-row.open.rup-crit { background: #FBEAE7; }
.rup-det-row > td { background: var(--surface-2); padding: 0 14px 14px 30px; border-bottom: 2px solid var(--line); white-space: normal; }
.rup-det-row:hover > td { background: var(--surface-2); }
.rup-det { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 12px; }
.rup-det-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.rup-det-h { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rup-det-sub { font-size: 11px; font-weight: 500; color: var(--muted); }
.rup-det-tot { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ok); background: #ECFDF5; border: 1px solid #BFE6E0; border-radius: 999px; padding: 1px 9px; }
.rup-det-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rup-det-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 700; padding: 3px 8px; border-bottom: 1px solid var(--line); }
.rup-det-tbl th.ta-r { text-align: right; }
.rup-det-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--text); white-space: nowrap; }
.rup-det-tbl td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
.rup-det-tbl tbody tr:last-child td { border-bottom: none; }
.rup-negq { color: var(--warn); font-weight: 700; }
.rup-det-nota { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.rup-det-load { display: flex; align-items: center; gap: 9px; padding: 14px; color: var(--text-soft); font-size: 12.5px; }
.rup-det-err { padding: 14px; color: var(--danger); font-size: 12.5px; }
.rup-det-err a { color: var(--ok); cursor: pointer; text-decoration: underline; }
@media (max-width: 760px) { .rup-det { grid-template-columns: 1fr; } }
@media (max-width: 880px) { .rup-kpis { grid-template-columns: repeat(2, 1fr); } .rup-explica { flex-direction: column; } }

/* ── Rentabilidade real (setor Vendas) ────────────────────── */
.rent-wrap { padding: 22px 26px 60px; }
.rent-intro { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, var(--arapawa), var(--arapawa-2)); color: #EAF2F3; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.rent-intro-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.10); display: grid; place-items: center; flex-shrink: 0; }
.rent-intro-ic svg { width: 22px; height: 22px; color: #fff; }
.rent-intro-tx h2 { font-size: 17px; margin: 2px 0 5px; color: #fff; }
.rent-intro-tx p { font-size: 12.5px; line-height: 1.55; color: #CFE0E3; margin: 0 0 8px; max-width: 880px; }
.rent-fontes { display: flex; gap: 7px; flex-wrap: wrap; }
.rent-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.rent-kpis-5 { grid-template-columns: repeat(5, 1fr); }
.rent-kpi { position: relative; }
.rent-kpi-op { position: absolute; left: -13px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 800; color: var(--ink-muted); }
.rent-kpi-custo .rent-kpi-v { color: var(--ink-soft); }
@media (max-width: 1100px) { .rent-kpis-5 { grid-template-columns: repeat(3, 1fr); } .rent-kpi-op { display: none; } }
.rent-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; }
.rent-kpi-v { font-size: 22px; font-weight: 800; color: var(--text); }
.rent-kpi-l { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.rent-kpi-h { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.rent-kpi-tax .rent-kpi-v { color: var(--warn); }
.rent-kpi-lucro .rent-kpi-v { color: var(--ok); }
.rent-kpi-margem.mg-ok .rent-kpi-v { color: var(--ok); } .rent-kpi-margem.mg-warn .rent-kpi-v { color: var(--warn); } .rent-kpi-margem.mg-bad .rent-kpi-v { color: var(--danger); }
.rent-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.rent-table { margin: 0; }
.rent-table th { cursor: pointer; white-space: nowrap; }
.rent-table th[title] { text-decoration: underline dotted transparent; }
.rent-table th:hover { color: var(--pumpkin); }
.rentc-tax { color: var(--warn); } .rentc-lucro { color: var(--ok); font-weight: 600; } .rentc-margem {}
.rent-prod { display: flex; align-items: center; gap: 10px; }
.rent-foto { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); }
.rent-foto-x { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.rent-nome { font-weight: 600; color: var(--text); font-size: 13px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rent-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.rent-canal { margin-left: 6px; color: var(--netuno); font-weight: 600; }
.rent-mg { font-weight: 800; padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.rent-mg.mg-ok { color: var(--ok); background: #ECFDF5; } .rent-mg.mg-warn { color: var(--warn); background: #FFF6E8; } .rent-mg.mg-bad { color: var(--danger); background: #FEEceb; }
.rent-table tfoot .rent-total td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 800; border-top: 2px solid var(--line-2); }
@media (max-width: 880px) { .rent-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Documentação (admin): nav + artigo + chat IA ─────────── */
/* o .view (container do render) tem padding + scroll próprio; pra docs ocuparem a tela
   inteira abaixo da topbar (chat com input fixo no rodapé, sem corte), zera os dois. */
.view:has(.docs-wrap) { padding: 0; overflow: hidden; }
.docs-wrap { display: grid; grid-template-columns: 248px 1fr 380px; height: 100%; min-height: 0; overflow: hidden; }
.docs-wrap.chat-off { grid-template-columns: 248px 1fr; }
.docs-nav { border-right: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; padding: 14px 10px 30px; }
.dnav-busca { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12.5px; font-family: inherit; margin-bottom: 10px; background: var(--surface); }
.dnav-grupo { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); padding: 12px 8px 5px; font-weight: 700; }
.dnav-item { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--text-soft); cursor: pointer; margin-bottom: 1px; }
.dnav-item:hover { background: var(--surface); color: var(--text); }
.dnav-item.on { background: var(--pumpkin); color: #fff; font-weight: 600; }
.dnav-foot { font-size: 10.5px; color: var(--muted); padding: 16px 8px 0; line-height: 1.6; }
.docs-main { overflow-y: auto; padding: 8px 0 60px; }
.docs-article { max-width: 820px; margin: 0 auto; padding: 22px 36px; color: var(--text); font-size: 14.5px; line-height: 1.7; }
.docs-article h1 { font-size: 27px; font-weight: 800; margin: 8px 0 14px; color: var(--text); letter-spacing: -.3px; }
.docs-article h2 { font-size: 19px; font-weight: 700; margin: 30px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--arapawa); }
.docs-article h3 { font-size: 15.5px; font-weight: 700; margin: 20px 0 6px; color: var(--text); }
.docs-article p { margin: 0 0 12px; }
.docs-article ul, .docs-article ol { margin: 0 0 14px; padding-left: 22px; }
.docs-article li { margin-bottom: 5px; }
.docs-article blockquote { border-left: 3px solid var(--pumpkin); background: #FFF7F1; margin: 0 0 16px; padding: 8px 16px; color: var(--text-soft); border-radius: 0 8px 8px 0; }
.docs-article code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12.5px; font-family: 'SF Mono', Menlo, Consolas, monospace; color: var(--chocolate); }
.docs-article pre { background: var(--arapawa-2); color: #E6EEF0; border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; }
.docs-article pre code { background: none; border: none; color: inherit; padding: 0; }
.docs-article table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 13px; }
.docs-article th, .docs-article td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.docs-article th { background: var(--surface-2); font-weight: 700; }
.docs-article a { color: var(--chocolate); text-decoration: underline; }
.docs-article hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
/* chat */
.docs-chat { border-left: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.dchat-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dchat-titulo { font-weight: 700; font-size: 13.5px; color: var(--text); display: flex; flex-direction: column; }
.dchat-sub { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.dchat-fechar { margin-left: auto; border: none; background: transparent; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; }
.dchat-fechar:hover { color: var(--text); }
.dchat-cfg { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dchat-cfg label { font-size: 10.5px; color: var(--text-soft); display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.dchat-cfg select { font-family: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); color: var(--text); }
.dchat-limpar { margin-left: auto; border: none; background: transparent; color: var(--muted); font-size: 11.5px; cursor: pointer; text-decoration: underline; align-self: flex-end; }
.dchat-corpo { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.dchat-vazio { color: var(--text-soft); font-size: 12.5px; line-height: 1.6; padding: 18px 8px; }
.dmsg { font-size: 13px; line-height: 1.55; border-radius: 12px; padding: 9px 13px; max-width: 92%; }
.dmsg-user { align-self: flex-end; background: var(--arapawa); color: #fff; border-bottom-right-radius: 4px; }
.dmsg-ia { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }
.dmsg-ia p { margin: 0 0 8px; } .dmsg-ia p:last-child { margin: 0; }
.dmsg-ia pre { background: var(--arapawa-2); color: #E6EEF0; border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 12px; }
.dmsg-ia code { background: rgba(0,0,0,.05); border-radius: 4px; padding: 1px 4px; font-size: 12px; font-family: monospace; }
.dmsg-ia ul, .dmsg-ia ol { margin: 0 0 8px; padding-left: 18px; }
.dmsg-erro { align-self: flex-start; background: #FFF4F1; border: 1px solid #F4C7C0; color: var(--danger); font-size: 12px; }
.dmsg-pensando { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dchat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: flex-end; }
.dchat-input textarea { flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 13px; line-height: 1.45; max-height: 140px; background: var(--surface); color: var(--text); }
.dchat-input textarea:focus { outline: none; border-color: var(--pumpkin); }
.dchat-enviar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--pumpkin); color: #fff; font-size: 16px; cursor: pointer; }
.dchat-enviar:disabled { opacity: .5; cursor: default; }
.docs-chat-abrir { position: fixed; right: 22px; bottom: 22px; z-index: 30; border: none; background: var(--pumpkin); color: #fff; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 20px rgba(242,113,39,.4); }
@media (max-width: 1100px) { .docs-wrap { grid-template-columns: 200px 1fr; } .docs-chat { display: none; } }

/* ── Abas de PROJETO (grupo IA) + Portal de agentes ───────── */
.projbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 26px; flex-shrink: 0; overflow-x: auto; }
.projbar-in { display: flex; gap: 4px; align-items: stretch; min-height: 46px; }
.proj-tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.proj-tab:hover { color: var(--text); }
.proj-tab.active { color: var(--text); border-bottom-color: var(--pt, #5B5BD6); }
.proj-tab .pt-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; opacity: .5; }
.proj-tab.active .pt-dot { opacity: 1; }
.proj-tab .pt-count { background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; }
.proj-tab.active .pt-count { color: var(--pt, #5B5BD6); }

.portal-wrap { padding: 22px 26px; }
.portal-explica { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, #5B5BD6, #3D3DA8); color: #fff; border-radius: var(--radius-sm); padding: 20px 22px; margin-bottom: 22px; }
.portal-explica-ic { font-size: 30px; line-height: 1; flex-shrink: 0; }
.portal-explica h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.portal-explica p { margin: 0; font-size: 13px; line-height: 1.6; opacity: .94; max-width: 900px; }
.portal-explica b { font-weight: 700; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pcard { text-align: left; cursor: pointer; font-family: inherit; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ac, #5B5BD6); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pcard-top { display: flex; align-items: center; gap: 9px; }
.pcard-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.pcard-name { font-size: 15px; font-weight: 700; color: var(--text); }
.pcard-sum { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pcard-agent { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text); min-width: 0; }
.pcard-agent-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-count { display: flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--muted); flex-shrink: 0; }

/* Selo de agente (bot) no feed de comentários/atividade e no portal */
.bot-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: #5B5BD6; background: #EEEEFB; border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.m-mem.bot { box-shadow: 0 0 0 2px #5B5BD6; }

@media (max-width: 880px) { .portal-grid { grid-template-columns: 1fr; } .portal-explica { flex-direction: column; } }

/* ── WGSN: lightbox (zoom + download de imagem) ───────────── */
.wgsn-zoomable { cursor: zoom-in; }
.wgsn-hero-overlay, .wgsn-hero-content { pointer-events: none; } /* clique no hero chega na imagem */
.wgsn-lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(10,12,16,.93); display: flex; flex-direction: column; }
.wgsn-lb-bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 18px; flex-shrink: 0; }
.wgsn-lb-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, filter .15s; }
.wgsn-lb-btn:hover { background: rgba(255,255,255,.18); }
.wgsn-lb-dl { background: var(--pumpkin, #F27127); border-color: transparent; }
.wgsn-lb-dl:hover { filter: brightness(1.08); background: var(--pumpkin, #F27127); }
.wgsn-lb-x { width: 40px; padding: 0; justify-content: center; font-size: 26px; line-height: 1; }
.wgsn-lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 0 18px 24px; }
.wgsn-lb-img { max-width: 96vw; max-height: 84vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 50px rgba(0,0,0,.55); cursor: zoom-in; transition: transform .2s ease; }
.wgsn-lb-img.zoomed { transform: scale(1.85); cursor: zoom-out; }

/* ── WGSN — extras da fonte viva (comercialidade, cores, paginação) ── */
.wgsn-tile-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; }
.wgsn-tile-date { font-size: 11px; color: var(--text-soft); }
.wgsn-com { display: inline-flex; align-items: center; gap: 3px; }
.wgsn-com-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(110,156,167,.28); }
.wgsn-com-dot.on { background: #6E9CA7; }
.wgsn-colors { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.wgsn-color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 2px #fff; }
.wgsn-mais-wrap { display: flex; justify-content: center; margin: 26px 0 6px; }
.wgsn-mais { padding: 10px 26px; border: 1px solid #6E9CA7; background: #fff; color: #4d7883; font-weight: 600; font-size: 13px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.wgsn-mais:hover:not(:disabled) { background: #6E9CA7; color: #fff; }
.wgsn-mais:disabled { opacity: .6; cursor: default; }
.wgsn-pill-n { margin-left: 5px; font-size: 10px; opacity: .5; font-weight: 700; }
.wgsn-pill.active .wgsn-pill-n { opacity: .8; }

/* ── WGSN Editorial ─────────────────────────────────────────── */
.wgsn-wrap { padding: 28px 32px 60px; max-width: 1280px; margin: 0 auto; }
.wgsn-wrap-article { padding-bottom: 80px; }

/* Loading / erro */
.wgsn-loading { display: flex; align-items: center; gap: 14px; color: var(--text-soft); font-size: 14px; padding: 60px 0; }
.wgsn-spinner { width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: #6E9CA7; border-radius: 50%; animation: wgsn-spin .8s linear infinite; flex-shrink: 0; }
@keyframes wgsn-spin { to { transform: rotate(360deg); } }
.wgsn-err { display: flex; align-items: flex-start; gap: 14px; background: #FFF3F0; border: 1px solid #FDCDC5; border-radius: var(--radius-sm); padding: 18px 20px; color: var(--text); font-size: 13.5px; }
.wgsn-err svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--chocolate); margin-top: 1px; }
.wgsn-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 60px 20px; }

/* Cabeçalho editorial */
.wgsn-header { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.wgsn-header-badge {
  flex-shrink: 0; background: var(--text); color: #fff;
  font-size: 11px; font-weight: 900; letter-spacing: 2px; padding: 5px 10px;
  border-radius: 6px; text-transform: uppercase;
}
.wgsn-header-title { margin: 0 0 3px; font-size: 22px; font-weight: 400; color: var(--text); }
.wgsn-header-sub { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Filtros */
.wgsn-filters { margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.wgsn-search-wrap { position: relative; display: flex; align-items: center; max-width: 420px; }
.wgsn-search-wrap svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.wgsn-search { width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--text); outline: none; transition: border-color .15s; }
.wgsn-search:focus { border-color: #6E9CA7; }
.wgsn-pills-row { display: flex; flex-wrap: wrap; gap: 10px; }
.wgsn-pills-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wgsn-pills-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.wgsn-pill { font-family: inherit; font-size: 12px; font-weight: 500; padding: 4px 12px; border: 1.5px solid var(--line-2); border-radius: 20px; background: var(--surface); color: var(--text-soft); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.wgsn-pill:hover { background: var(--surface-2); border-color: #6E9CA7; color: var(--text); }
.wgsn-pill.active { background: #6E9CA7; border-color: #6E9CA7; color: #fff; font-weight: 600; }

/* Meta contagem */
.wgsn-meta { font-size: 12px; color: var(--muted); margin-bottom: 20px; }

/* Grid de tiles */
.wgsn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

/* Tile editorial */
.wgsn-tile { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.wgsn-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.wgsn-tile:focus-visible { outline: 2px solid #6E9CA7; outline-offset: 2px; }
.wgsn-tile-cover { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #E9DDD5; }
.wgsn-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.wgsn-tile:hover .wgsn-tile-img { transform: scale(1.04); }
.wgsn-tile-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(35,50,56,.72) 30%, transparent 70%); pointer-events: none; }
.wgsn-tile-cat { position: absolute; top: 10px; left: 10px; background: rgba(35,50,56,.75); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; backdrop-filter: blur(4px); }
.wgsn-tile-seal { position: absolute; top: 10px; right: 10px; background: var(--text); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; padding: 2px 7px; border-radius: 4px; opacity: .85; }
.wgsn-tile-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wgsn-tile-title { margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wgsn-tile-resumo { margin: 0; font-size: 12px; color: var(--text-soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.wgsn-tile-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }

/* Placeholder de imagem */
.wgsn-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, #E9DDD5 0%, #D8CEC4 100%); color: #B4A89E; }

/* Chips de dimensões */
.wgsn-chip { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-soft); white-space: nowrap; }
.wgsn-chip-tipo { background: #EAF2F4; border-color: #B8D5DC; color: #255561; font-weight: 700; }
.wgsn-chip-more { background: var(--line); color: var(--muted); border-color: transparent; }

/* Botão Voltar */
.wgsn-back { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: 9px; padding: 8px 16px; cursor: pointer; margin-bottom: 24px; transition: background .12s, color .12s; }
.wgsn-back:hover { background: var(--surface-2); color: var(--text); }
.wgsn-back svg { width: 16px; height: 16px; }

/* Hero do artigo */
.wgsn-hero { position: relative; width: 100%; aspect-ratio: 16/9; background: #2A3840; border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.wgsn-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wgsn-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,35,40,.82) 40%, rgba(22,35,40,.2) 100%); }
.wgsn-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 36px; }
.wgsn-hero-title { margin: 0; font-size: clamp(20px, 3vw, 32px); font-weight: 400; color: #fff; line-height: 1.3; text-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* Metadados do artigo */
.wgsn-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 28px; }
.wgsn-meta-item { font-weight: 600; color: var(--text-soft); }
.wgsn-meta-sep { color: var(--line-2); }
.wgsn-meta-date { font-weight: 400; }

/* Corpo do artigo */
.wgsn-article-body { max-width: 720px; margin: 0 auto 40px; font-size: 15px; line-height: 1.75; color: var(--text); }
.wgsn-article-body p { margin: 0 0 18px; }
.wgsn-article-body p:last-child { margin-bottom: 0; }
.wgsn-h2 { font-size: 19px; font-weight: 700; color: var(--text); margin: 30px 0 12px; line-height: 1.3; }
.wgsn-h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 22px 0 8px; }
.wgsn-sem-corpo { color: var(--muted); font-style: italic; }

/* Galeria de referências */
.wgsn-gallery { margin-bottom: 40px; }
.wgsn-gallery-title { font-size: 14px; font-weight: 700; color: var(--text-soft); margin: 0 0 14px; letter-spacing: .4px; text-transform: uppercase; font-size: 11.5px; }
.wgsn-gallery-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.wgsn-gallery-row::-webkit-scrollbar { height: 5px; }
.wgsn-gallery-img { height: 200px; width: auto; min-width: 140px; max-width: 260px; object-fit: cover; border-radius: 10px; flex-shrink: 0; scroll-snap-align: start; }
.wgsn-gallery-img.wgsn-placeholder { height: 200px; width: 180px; border-radius: 10px; }

/* Rodapé do artigo */
.wgsn-article-footer { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.wgsn-article-dims { display: flex; flex-wrap: wrap; gap: 6px; }
.wgsn-article-seal { font-size: 11.5px; color: var(--muted); font-style: italic; }

@media (max-width: 880px) {
  .wgsn-wrap { padding: 20px 16px 50px; }
  .wgsn-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .wgsn-hero-content { padding: 20px 18px; }
  .wgsn-article-body { font-size: 14px; }
}

/* ── Relatório de Produtos (setor Vendas) ─────────────────── */
.vrel-wrap { padding: 18px 22px 40px; }
.vrel-bar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.vrel-periodo, .vrel-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vrel-preset, .vrel-tog { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 13px; cursor: pointer; transition: all .12s; }
.vrel-preset:hover, .vrel-tog:hover { color: var(--text); }
.vrel-preset.on, .vrel-tog.on { background: var(--surface); color: var(--chocolate); border-color: var(--chocolate); box-shadow: var(--shadow); }
.vrel-range { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: var(--muted); font-size: 12px; }
.vrel-range input { font-family: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--text); background: var(--surface); }
.vrel-glabel { font-size: 12px; color: var(--muted); }
.vrel-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.vrel-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.vrel-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-soft); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; padding: 11px 12px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--line); user-select: none; }
.vrel-th.l { text-align: left; } .vrel-th.r { text-align: right; }
.vrel-th:hover { color: var(--text); } .vrel-th.on { color: var(--chocolate); }
.vrel-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.vrel-table td.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vrel-row:hover { background: var(--surface-2); }
.vrel-td-nome { min-width: 240px; }
.vrel-prod { display: flex; align-items: center; gap: 10px; }
.vrel-foto { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); flex-shrink: 0; }
.vrel-foto-vazia { display: inline-block; }
.vrel-prod-n { font-weight: 600; color: var(--text); line-height: 1.25; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrel-prod-s { font-size: 11px; color: var(--muted); margin-top: 1px; }
.vrel-canal { font-weight: 700; color: var(--text); }
.vrel-muted { color: var(--muted); }
.vrel-neg { color: var(--danger); }
.vrel-pos { color: var(--ok); }
.vrel-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); border-top: 2px solid var(--line-2); font-weight: 800; color: var(--text); padding: 12px; white-space: nowrap; }
.vrel-empty { text-align: center; color: var(--text-soft); padding: 36px; font-size: 14px; }
.vrel-nota { font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.vrel-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vrel-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 7px 13px; cursor: pointer; transition: all .12s; }
.vrel-btn:hover { color: var(--text); border-color: var(--line-2); }
.vrel-btn-exp { background: var(--pumpkin, #F27127); color: #fff; border-color: transparent; }
.vrel-btn-exp:hover { color: #fff; filter: brightness(1.06); }
.vrel-colwrap { position: relative; }
.vrel-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.18)); padding: 8px; min-width: 200px; }
.vrel-pop-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 4px 8px 6px; }
.vrel-pop-i { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.vrel-pop-i:hover { background: var(--surface-2); }
.vrel-dd-wrap { position: relative; }
.vrel-dd-btn { gap: 6px; }
.vrel-dd-btn b { color: var(--chocolate); }
.vrel-pop-por { min-width: 158px; padding: 6px; }
.vrel-pop-opt { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 13px; color: var(--text); background: transparent; border: none; border-radius: 7px; padding: 8px 10px; cursor: pointer; }
.vrel-pop-opt:hover { background: var(--surface-2); }
.vrel-pop-opt.on { color: var(--chocolate); font-weight: 700; background: var(--surface-2); }
@media (max-width: 880px) { .vrel-bar { flex-direction: column; align-items: flex-start; } .vrel-acoes { flex-direction: column; align-items: flex-start; } }

/* ── Administração (usuários + cargos) ────────────────────── */
.adm-wrap { padding: 18px 22px 40px; }
.adm-tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.adm-tab { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-soft); background: transparent; border: none; border-bottom: 2px solid transparent; padding: 9px 6px; margin-bottom: -1px; cursor: pointer; }
.adm-tab:hover { color: var(--text); }
.adm-tab.on { color: var(--chocolate); border-bottom-color: var(--chocolate); }
.adm-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.adm-count { font-size: 12.5px; color: var(--muted); }
.adm-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table thead th { text-align: left; background: var(--surface-2); color: var(--text-soft); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-row:hover td { background: var(--surface-2); }
.adm-row.inativo { opacity: .55; }
.adm-muted { color: var(--muted); }
.adm-badge { font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 2px 9px; }
.adm-badge-adm { color: var(--chocolate); border-color: var(--cinderela); background: var(--bridesmaid); }
.adm-badge-ges { color: var(--ok); border-color: rgba(15,118,110,.3); background: rgba(15,118,110,.1); }
.adm-secpills { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-pill { font-size: 11px; color: var(--arapawa); background: var(--pattens); border-radius: 6px; padding: 2px 7px; }
.adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); margin-right: 6px; }
.adm-dot.on { background: var(--ok); }
.adm-acoes { text-align: right; display: flex; gap: 6px; justify-content: flex-end; }
.adm-mini { font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-soft); background: var(--surface); border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 11px; cursor: pointer; }
.adm-mini:hover { color: var(--text); border-color: var(--muted); }
/* modal */
.adm-modal-bg { position: fixed; inset: 0; background: rgba(27,67,80,.5); display: grid; place-items: center; z-index: 200; padding: 20px; }
.adm-modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 560px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.adm-modal-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.adm-x { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.adm-x:hover { background: var(--surface-2); color: var(--text); }
.adm-modal-b { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.adm-modal-f { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.adm-f { display: flex; flex-direction: column; gap: 5px; }
.adm-f > span { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.adm-f input, .adm-f select { font-family: inherit; font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 11px; color: var(--text); background: var(--surface); }
.adm-f input:disabled, .adm-f select:disabled { background: var(--surface-2); color: var(--muted); }
.adm-f-inline { flex-direction: row; align-items: center; }
.adm-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.adm-secgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); max-height: 220px; overflow-y: auto; }
.adm-secgrid.off { opacity: .5; pointer-events: none; }
.adm-secnota { font-size: 12.5px; color: var(--muted); padding: 8px 0; }
.adm-erro { margin: 0 20px; margin-top: 14px; background: #FCEAE3; color: var(--chocolate); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; }
.adm-del { color: var(--chocolate); border-color: var(--cinderela); }
.adm-del:hover { background: #FCEAE3; }
/* Conector de IA (MCP): opt-in por pessoa + conexões vivas, com botão de revogar */
.adm-mcp { gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.adm-mcp > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.adm-mcp .adm-secnota { padding: 4px 0; }
.adm-mcp-tab { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12.5px; }
.adm-mcp-tab th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.adm-mcp-tab td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-mcp-tab td:last-child, .adm-mcp-tab th:last-child { text-align: right; padding-right: 0; }
.adm-mcp-tab .vrel-btn { padding: 4px 10px; font-size: 12px; }
.adm-mcp > .vrel-btn { align-self: flex-start; }
/* Atividade (auditoria) */
.adm-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.adm-fl { font-family: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
.adm-busca { min-width: 240px; flex: 1; }
.adm-table-aud td { font-size: 12.5px; vertical-align: top; }
.adm-nowrap { white-space: nowrap; }
.adm-acao { font-size: 11.5px; font-weight: 700; color: var(--arapawa); background: var(--pattens); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.adm-acao-adm { color: var(--chocolate); background: var(--bridesmaid); }
.adm-det { color: var(--text-soft); max-width: 420px; overflow-wrap: anywhere; }
.adm-pag { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; }
.adm-mini:disabled { opacity: .4; cursor: default; }

/* ── Seletor de Período (botão único, menu hierárquico) ───── */
.vper-wrap { position: relative; }
.vper-btn b { color: var(--chocolate); }
.vper-pop { left: 0; right: auto; min-width: 230px; padding: 6px; }
.vper-opt, .vper-grp { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font-family: inherit; font-size: 13px; color: var(--text); background: transparent; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.vper-opt:hover, .vper-grp:hover { background: var(--surface-2); }
.vper-grp { font-weight: 600; color: var(--text-soft); }
.vper-grp svg { color: var(--muted); flex-shrink: 0; }
.vper-sub { padding: 2px 0 4px 8px; margin: 0 0 2px 4px; border-left: 2px solid var(--line); }
.vper-opt.sub { padding: 8px 10px; font-size: 12.5px; color: var(--text-soft); }
.vper-opt.on { color: var(--chocolate); font-weight: 700; }
.vper-opt.on:hover { background: var(--bridesmaid); }
.vper-ck { color: var(--chocolate); flex-shrink: 0; }
.vper-custom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 6px 6px; border-left: none; margin-left: 0; }
.vper-custom input[type=date] { font-family: inherit; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; color: var(--text); background: var(--surface); }
.vper-custom .vper-arrow { color: var(--muted); }
.vper-aplicar { font-family: inherit; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--pumpkin); border: none; border-radius: 8px; padding: 7px 14px; cursor: pointer; margin-left: auto; }
.vper-aplicar:hover { filter: brightness(1.06); }

/* ── Giro de Produtos (matriz SKU × dia) ──────────────────── */
.vgiro-wrap { padding: 18px 22px 40px; }
.vgiro-table-wrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.vgiro-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vgiro-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); color: var(--text-soft); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .2px; padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid var(--line-2); cursor: pointer; user-select: none; }
.vgiro-table thead th:hover { color: var(--text); } .vgiro-table thead th.on { color: var(--chocolate); }
.vgiro-th-d { text-align: right; min-width: 48px; }
.vgiro-th-sku { left: 0; z-index: 5 !important; text-align: left; min-width: 220px; box-shadow: 1px 0 0 var(--line); }
.vgiro-th-total { right: 0; z-index: 5 !important; text-align: right; min-width: 88px; width: 88px; background: var(--cinderela) !important; color: var(--chocolate) !important; box-shadow: -1px 0 0 var(--line-2); }
.vgiro-th-vmd { right: 160px; z-index: 5 !important; text-align: right; min-width: 72px; width: 72px; background: var(--surface-2) !important; color: var(--text-soft) !important; box-shadow: -1px 0 0 var(--line); }
.vgiro-th-ideal { right: 88px; z-index: 5 !important; text-align: right; min-width: 72px; width: 72px; background: var(--surface-2) !important; color: var(--text-soft) !important; box-shadow: -1px 0 0 var(--line); }
.vgiro-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
/* min-width:0 + overflow:hidden = a coluna SKU encolhe LIVRE (estilo planilha): arrastar pra estreitar
   corta o conteúdo, alargar mostra. O piso do drag é o do colresize (48px). */
.vgiro-sku { position: sticky; left: 0; z-index: 2; background: var(--surface); min-width: 0; box-shadow: 1px 0 0 var(--line); overflow: hidden; }
.vgiro-row:hover td { background: var(--surface-2); }
.vgiro-row:hover .vgiro-sku { background: var(--surface-2); }
.vgiro-prod { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vgiro-foto { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); flex-shrink: 0; }
.vgiro-foto-vazia { display: inline-block; }
/* coluna de texto ocupa o resto da célula e permite truncar pela LARGURA DA COLUNA (segue o colresize) */
/* grid minmax(0,1fr) zera o min-content do texto → o SKU deixa de "segurar" a largura da coluna (sticky),
   permitindo encolher abaixo do conteúdo (nome/código/etiquetas cortam pela largura da coluna). */
.vgiro-prod-t { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.vgiro-prod-c { font-weight: 700; color: var(--text); }
/* max-width:100% (não px fixo) → alargar a coluna mostra mais do nome, em vez de cortar em 230px */
.vgiro-prod-n { font-size: 11px; color: var(--muted); max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgiro-c { text-align: right; color: var(--text); }
.vgiro-c.zero { color: #CFC7BD; }
.vgiro-total { position: sticky; right: 0; z-index: 2; min-width: 88px; width: 88px; text-align: right; font-weight: 800; color: var(--chocolate); background: var(--bridesmaid); box-shadow: -1px 0 0 var(--line-2); }
.vgiro-row:hover .vgiro-total { background: var(--cinderela); }
.vgiro-vmd { position: sticky; right: 160px; z-index: 2; min-width: 72px; width: 72px; text-align: right; font-weight: 700; color: var(--text-soft); background: var(--surface-2); box-shadow: -1px 0 0 var(--line); }
.vgiro-ideal { position: sticky; right: 88px; z-index: 2; min-width: 72px; width: 72px; text-align: right; font-weight: 700; color: var(--text-soft); background: var(--surface-2); box-shadow: -1px 0 0 var(--line); }
.vgiro-row:hover .vgiro-vmd, .vgiro-row:hover .vgiro-ideal { background: var(--surface-2); }
.vgiro-vmd.gr-ok { color: var(--ok); background: #ECFDF5; } .vgiro-row:hover .vgiro-vmd.gr-ok { background: #DCF6F0; }
.vgiro-vmd.gr-warn { color: var(--warn); background: #FFF6E8; } .vgiro-row:hover .vgiro-vmd.gr-warn { background: #FBEED6; }
.vgiro-vmd.gr-bad { color: var(--danger); background: #FEECEB; } .vgiro-row:hover .vgiro-vmd.gr-bad { background: #FBDDDA; }
.vrel-nota .gr-ok { color: var(--ok); font-weight: 700; } .vrel-nota .gr-warn { color: var(--warn); font-weight: 700; } .vrel-nota .gr-bad { color: var(--danger); font-weight: 700; }
.vgiro-table tfoot td { position: sticky; bottom: 0; z-index: 4; background: var(--surface-2); border-top: 2px solid var(--line-2); font-weight: 800; color: var(--text); padding: 9px 10px; text-align: right; white-space: nowrap; }
.vgiro-table tfoot .vgiro-sku { left: 0; z-index: 6; text-align: left; background: var(--surface-2); }
.vgiro-table tfoot .vgiro-total { right: 0; z-index: 6; color: var(--chocolate); background: var(--cinderela); }
.vgiro-table tfoot .vgiro-vmd { right: 160px; z-index: 6; color: var(--text-soft); background: var(--surface-2); }
.vgiro-table tfoot .vgiro-ideal { right: 88px; z-index: 6; color: var(--text-soft); background: var(--surface-2); }
/* Coluna Estoque (sticky, à esquerda de Vendas Dia) */
.vgiro-th-estoque { right: 232px; z-index: 5 !important; text-align: right; min-width: 72px; width: 72px; background: var(--surface-2) !important; color: var(--text-soft) !important; box-shadow: -1px 0 0 var(--line); }
.vgiro-estoque { position: sticky; right: 232px; z-index: 2; min-width: 72px; width: 72px; text-align: right; font-weight: 700; color: var(--text); background: var(--surface-2); box-shadow: -1px 0 0 var(--line); }
.vgiro-estoque.zero { color: #CFC7BD; font-weight: 400; }
.vgiro-row:hover .vgiro-estoque { background: var(--surface-2); }
.vgiro-table tfoot .vgiro-estoque { right: 232px; z-index: 6; color: var(--text); background: var(--surface-2); }
.vgiro-th-sub { display: inline-block; font-size: 9px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 4px; margin-left: 4px; vertical-align: middle; text-transform: none; }
/* Colunas novas do Giro (Dias estoque · Variação) — fixas à direita; o offset `right` é setado pelo JS posicionarFixas */
.vgiro-th-diasest, .vgiro-th-var { z-index: 5 !important; text-align: right; min-width: 58px; background: var(--surface-2) !important; color: var(--text-soft) !important; box-shadow: -1px 0 0 var(--line); }
.vgiro-diasest, .vgiro-var { position: sticky; z-index: 2; min-width: 58px; text-align: right; font-weight: 700; color: var(--text-soft); background: var(--surface-2); box-shadow: -1px 0 0 var(--line); }
.vgiro-row:hover .vgiro-diasest, .vgiro-row:hover .vgiro-var { background: var(--surface-2); }
.vgiro-table tfoot .vgiro-diasest, .vgiro-table tfoot .vgiro-var { z-index: 6; background: var(--surface-2); }
/* Coluna "Análise" do Giro (atalho pra análise do produto) — fixa à direita; offset via posicionarFixas */
.vgiro-th-ana { z-index: 5 !important; text-align: left; min-width: 78px; background: var(--surface-2) !important; color: var(--text-soft) !important; box-shadow: -1px 0 0 var(--line); cursor: default; }
.vgiro-ana { position: sticky; z-index: 2; min-width: 78px; text-align: left; background: var(--surface); box-shadow: -1px 0 0 var(--line); }
.vgiro-row:hover .vgiro-ana { background: var(--surface-2); }
.vgiro-table tfoot .vgiro-ana { z-index: 6; background: var(--surface-2); }
.vgiro-ana-x { color: #CFC7BD; text-align: center; font-weight: 400; }
.vgiro-ana-chip { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 7px; cursor: pointer; color: var(--ok); background: #ECFDF5; border: 1px solid #BBF0DE; white-space: nowrap; }
.vgiro-ana-chip:hover { filter: brightness(.97); border-color: var(--ok); }
.vgiro-diasest.zero { color: #CFC7BD; font-weight: 400; }
.vgiro-diasest.gr-bad { color: var(--danger); background: #FEECEB; } .vgiro-row:hover .vgiro-diasest.gr-bad { background: #FBDDDA; }
.vgiro-diasest.gr-warn { color: var(--warn); background: #FFF6E8; } .vgiro-row:hover .vgiro-diasest.gr-warn { background: #FBEED6; }
.vg-up { color: var(--ok); font-weight: 700; } .vg-dn { color: var(--danger); font-weight: 700; } .vg-novo { color: var(--muted); font-size: 11px; font-weight: 600; }
/* Reordenar colunas-resumo do Giro (arrastar o cabeçalho) */
.vgiro-table thead th[data-k] { cursor: grab; }
.vgiro-table thead th[data-k]:active { cursor: grabbing; }
.vgiro-table thead th.vgiro-th-dragging { opacity: .45; }
.vgiro-table thead th.vgiro-th-over { box-shadow: inset 3px 0 0 var(--chocolate) !important; }
/* Seleção de produtos no Giro (checkbox → Criar Análise só dos marcados) */
.vgiro-th-chk { width: 34px; min-width: 34px; text-align: center; cursor: default; }
.vgiro-chk { width: 34px; text-align: center; }
.vgiro-chk input, .vgiro-th-chk input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--pumpkin); margin: 0; }
.vgiro-row.vgiro-sel .vgiro-c { background: #FFF8EE; }
.vgiro-row.vgiro-sel .vgiro-chk { box-shadow: inset 3px 0 0 var(--pumpkin); }
/* ── Análises do Giro (snapshot "então × hoje") ── */
.vgiro-analise-btn { border-color: var(--pumpkin) !important; color: var(--chocolate) !important; font-weight: 700; }
.ana-wrap { padding: 4px 2px; }
.ana-intro { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.ana-intro-ic { color: var(--pumpkin); flex: 0 0 auto; }
.ana-intro-tx h2 { margin: 0 0 4px; font-size: 17px; }
.ana-intro-tx p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.ana-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ana-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.ana-card-foto { width: 66px; height: 66px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface-2); }
.ana-card-foto-x { display: inline-block; }
.ana-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ana-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ana-card-tit { font-weight: 800; font-size: 15px; color: var(--text); }
.ana-card-meta { font-size: 12px; color: var(--text-soft); }
.ana-abrir { align-self: flex-start; margin-top: 4px; }
.ana-x { border: none; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.ana-x:hover { color: var(--danger); background: #FEECEB; }
.ana-vazio { grid-column: 1/-1; text-align: center; color: var(--text-soft); padding: 36px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px; }
.ana-cmp { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ana-e { color: var(--muted); } .ana-ar { color: var(--line-2); } .ana-h { color: var(--text); font-weight: 700; }
.ana-delta { font-size: 11px; font-weight: 800; padding: 0 5px; border-radius: 999px; }
.ana-up, .ana-delta.ana-up { color: var(--ok); } .ana-delta.ana-up { background: #ECFDF5; }
.ana-dn, .ana-delta.ana-dn { color: var(--danger); } .ana-delta.ana-dn { background: #FEECEB; }
.ana-neu, .ana-delta.ana-neu { color: var(--text-soft); } .ana-delta.ana-neu { background: var(--surface-2); }
.ana-delta.ana-flat { color: var(--muted); }
.ana-table td.ta-c, .ana-table th.ta-c { text-align: center; }
.ana-th-rk { width: 36px; } .ana-rk { color: var(--muted); text-align: center; }
.ana-prod { font-weight: 700; } .ana-nm { font-weight: 400; color: var(--text-soft); font-size: 12px; }
.ana-table th small { font-weight: 400; text-transform: none; color: var(--muted); }
.ana-det-h { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ana-det-tit { flex: 1; } .ana-det-tit b { font-size: 16px; } .ana-det-sub { display: block; font-size: 12px; color: var(--text-soft); }
.ana-leg { margin-bottom: 10px; }
.ana-ov { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 4000; }
.ana-modal { background: var(--surface); border-radius: 16px; padding: 22px; width: 92%; max-width: 460px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.ana-modal-h { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: var(--chocolate); }
.ana-modal-p { font-size: 13px; color: var(--text-soft); line-height: 1.5; margin: 0 0 14px; }
.ana-modal-l { display: block; font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 14px; }
.ana-modal-l input { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; font: inherit; font-size: 14px; box-sizing: border-box; }
.ana-modal-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.ana-modal-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.ana-modal-msg .ana-ok { color: var(--ok); font-weight: 700; } .ana-modal-msg .ana-err { color: var(--danger); font-weight: 700; }
/* gráfico (então × hoje) + vendas por canal */
.ana-topo { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ana-chart { flex: 2 1 420px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
.ana-chart-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.ana-chart-leg { display: inline-flex; gap: 12px; font-size: 12px; color: var(--text-soft); }
.ana-lg { display: inline-flex; align-items: center; gap: 5px; }
.ana-lg::before { content: ''; width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ana-lg.ent::before { background: var(--chocolate); }
.ana-lg.ant::before { background: var(--info); }
.ana-lg.hoje::before { background: var(--pumpkin); }
.ana-svg { width: 100%; height: 230px; display: block; }
.ana-grid { stroke: var(--line); stroke-width: 1; }
.ana-axe { fill: var(--muted); font-size: 11px; }
.ana-area { fill: rgba(234,88,12,.08); }
.ana-line-ant { fill: none; stroke: var(--info); stroke-width: 2; stroke-dasharray: 6 4; opacity: .85; }
.ana-line-ent { fill: none; stroke: var(--chocolate); stroke-width: 2; stroke-dasharray: 2 3; }
.ana-line-hoje { fill: none; stroke: var(--pumpkin); stroke-width: 2.5; }
.ana-canais { flex: 1 1 240px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; overflow: auto; }
.ana-canais-h { font-size: 13px; margin-bottom: 4px; }
.ana-canais-sub { color: var(--muted); font-weight: 400; font-size: 12px; }
.ana-canais-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ana-canais-t td { padding: 5px 4px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ana-cnl { font-weight: 700; }
/* foto + produto na tabela */
.ana-prod-wrap { display: flex; align-items: center; gap: 10px; }
.ana-foto { width: 64px; height: 64px; border-radius: 9px; object-fit: cover; background: var(--surface-2); flex: 0 0 auto; border: 1px solid var(--line); }
.ana-foto-x { display: inline-block; }
.ana-foto-clk { cursor: zoom-in; transition: transform .12s, box-shadow .12s; }
.ana-foto-clk:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.22); border-color: var(--pumpkin); }
.ana-prod-c { font-weight: 700; font-size: 13px; }
.ana-prod-n { font-size: 12px; color: var(--text-soft); }
/* chips "abrir anúncio ↗" por canal */
.ana-anch-wrap { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.ana-anch { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 7px; text-decoration: none; color: var(--chocolate); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.ana-anch:hover { background: var(--pumpkin); color: #fff; border-color: var(--pumpkin); }

/* ── Alavancas (intervenções comerciais) na aba Análises ──────── */
.ana-th-alav { min-width: 150px; }
.ana-alav-cell { white-space: normal; min-width: 150px; }
.ana-alav-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.ana-alav-chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 7px; cursor: pointer; color: var(--chocolate); background: var(--surface-2); border: 1px solid var(--line-2); white-space: nowrap; }
.ana-alav-chip:hover { border-color: var(--pumpkin); background: var(--bridesmaid); }
.ana-alav-chip.ana-alav-latest { border-color: var(--pumpkin); box-shadow: 0 0 0 1px var(--pumpkin) inset; }
.ana-alav-ic { font-size: 12px; } .ana-alav-dt { font-variant-numeric: tabular-nums; } .ana-alav-cn { color: var(--muted); font-weight: 600; }
.ana-alav-add { font: inherit; font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface); border: 1px dashed var(--line-2); border-radius: 7px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.ana-alav-add:hover { color: var(--pumpkin); border-color: var(--pumpkin); }

/* Modal de alavanca (registrar/editar) */
.alav-modal { max-width: 520px; }
.alav-l { font-size: 12px; font-weight: 700; color: var(--text-soft); margin-bottom: 8px; }
.alav-hint { font-weight: 400; color: var(--muted); }
.alav-chks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 16px; }
.alav-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; cursor: pointer; user-select: none; }
.alav-chk.on { border-color: var(--pumpkin); background: var(--bridesmaid); color: var(--chocolate); }
.alav-chk input { accent-color: var(--pumpkin); }
.alav-row { display: flex; gap: 12px; } .alav-row .ana-modal-l { flex: 1; }
.alav-row input { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 9px; font: inherit; font-size: 14px; box-sizing: border-box; background: var(--surface); }

/* Modal do comparativo antes×depois */
.alav-cmp-modal { max-width: 680px; }
.alav-cmp-tipos { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-left: 6px; }
.alav-cmp-meta { font-size: 12.5px; color: var(--text-soft); margin-bottom: 12px; }
.alav-jps { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.alav-jp { font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 9px; cursor: pointer; }
.alav-jp.on { color: #fff; background: var(--pumpkin); border-color: var(--pumpkin); }
.alav-jin { width: 48px; border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 7px; font: inherit; font-size: 12.5px; font-weight: 700; text-align: right; }
.alav-jdate { border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 7px; font: inherit; font-size: 12px; font-weight: 600; }
.alav-jsep { color: var(--line-2); font-weight: 700; }
.alav-aviso { font-size: 12.5px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--sw-sandy, #C98A3B); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; line-height: 1.4; }
.alav-aviso.warn { border-left-color: var(--danger); background: #FEF6F5; }
.alav-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 12px; }
.alav-cmp-grid:has(.alav-cmp-card:only-child) { grid-template-columns: 1fr; }
.alav-cmp-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.alav-cmp-cardh { font-size: 12px; font-weight: 800; color: var(--chocolate); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.alav-cmp-dias { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.alav-cmp-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.alav-cmp-t td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.alav-cmp-t tr:last-child td { border-bottom: none; }
.alav-cmp-t .ta-l { color: var(--text-soft); font-weight: 600; } .alav-cmp-t .ta-r { text-align: right; }
.alav-cmp-t .ana-e { color: var(--muted); } .alav-cmp-t .ana-ar { color: var(--muted); margin: 0 2px; } .alav-cmp-t .ana-h { font-weight: 800; color: var(--text); }
.alav-cmp-nota { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 4px 0 12px; }
.alav-cmp-obs { font-size: 12.5px; color: var(--text-soft); background: var(--surface-2); border-radius: 8px; padding: 7px 10px; margin-bottom: 12px; }
.ana-x-btn { color: var(--danger); }
@media (max-width: 640px) { .alav-chks, .alav-cmp-grid { grid-template-columns: 1fr; } .alav-row { flex-direction: column; gap: 0; } }

/* Giro: toggle "incluir sem venda" + tag de produto sem venda (item 3) */
.vgiro-sv-btn.on { background: var(--bridesmaid); border-color: var(--pumpkin); color: var(--chocolate); }
.vgiro-sv-btn.vgiro-sv-off { opacity: .55; }
.vgiro-sv-tag { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--sw-chocolate, #7a4a1e); background: #FFF1DF; border: 1px solid var(--sw-cinderela, #F0D9B8); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: .3px; }

/* Modal de alavanca: canal por BOTÕES (item 1a) */
.alav-canal-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.alav-canal-b { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.alav-canal-b:hover { border-color: var(--pumpkin); }
.alav-canal-b.on { background: var(--pumpkin); border-color: var(--pumpkin); color: #fff; }

/* Célula de alavancas: ações + botão linha do tempo (item 1b) */
.ana-alav-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ana-alav-tl { font: inherit; font-size: 11px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.ana-alav-tl:hover { border-color: var(--pumpkin); color: var(--pumpkin); }

/* Painel linha do tempo (item 1b) */
.alav-tl-modal { max-width: 560px; }
.alav-tl-h { font-weight: 600; color: var(--text-soft); font-size: 14px; }
.alav-tl-list { max-height: 60vh; overflow-y: auto; margin: 8px 0 14px; padding-left: 6px; }
.alav-tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px 14px; border-left: 2px solid var(--line-2); }
.alav-tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.alav-tl-dot { position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); border: 2px solid var(--surface); }
.alav-tl-latest .alav-tl-dot { background: var(--pumpkin); }
.alav-tl-body { flex: 1; }
.alav-tl-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.alav-tl-badge { font-size: 9.5px; font-weight: 800; color: #fff; background: var(--pumpkin); border-radius: 999px; padding: 1px 7px; text-transform: uppercase; }
.alav-tl-canal { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 600; }
.alav-tl-tipos { font-size: 13px; color: var(--text); margin: 3px 0; }
.alav-tl-obs { font-size: 12px; color: var(--text-soft); background: var(--surface-2); border-radius: 7px; padding: 5px 8px; margin: 4px 0; }
.alav-tl-ver { font-size: 11.5px; padding: 4px 9px; }

/* Painel "efeito por tipo" na lista de Análises (item 2) */
.alav-efeito { margin: 0 0 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); overflow: hidden; }
.alav-efeito-toggle { width: 100%; text-align: left; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--chocolate); background: var(--surface-2); border: none; padding: 11px 16px; cursor: pointer; }
.alav-efeito-toggle:hover { background: var(--bridesmaid); }
.alav-efeito-body { padding: 14px 16px; }
.alav-efeito-load { font-size: 13px; color: var(--muted); }
.alav-efeito-sub { font-size: 12px; color: var(--text-soft); margin-bottom: 10px; line-height: 1.45; }
.alav-efeito-t { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.alav-efeito-t th { font-size: 11px; text-transform: uppercase; letter-spacing: .2px; color: var(--text-soft); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.alav-efeito-t td { padding: 8px; border-bottom: 1px solid var(--line); }
.alav-efeito-t tr:last-child td { border-bottom: none; }
.alav-efeito-t .ta-c { text-align: center; } .alav-efeito-t .ta-r { text-align: right; } .alav-efeito-t .ta-l { text-align: left; font-weight: 600; }
.ana-muted { color: var(--muted); font-size: 11px; }

.ana-cnl-link { text-decoration: none; color: var(--pumpkin); font-weight: 800; padding: 0 3px; border-radius: 5px; }
.ana-cnl-link:hover { background: var(--pumpkin); color: #fff; }

/* Lightbox: foto grande + miniaturas das variações */
.ana-lb { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 4200; padding: 24px; backdrop-filter: blur(2px); }
.ana-lb-box { position: relative; background: var(--surface); border-radius: 16px; padding: 16px; width: 92%; max-width: 620px; box-shadow: 0 30px 90px rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ana-lb-x { position: absolute; top: 8px; right: 10px; border: none; background: var(--surface-2); color: var(--text-soft); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }
.ana-lb-x:hover { background: var(--danger); color: #fff; }
.ana-lb-cap { align-self: flex-start; font-weight: 800; font-size: 14px; color: var(--chocolate); padding-right: 36px; }
.ana-lb-big { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: var(--surface-2); }
.ana-lb-thumbs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-height: 96px; overflow-y: auto; width: 100%; }
.ana-lb-th { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; background: var(--surface-2); transition: border-color .12s; }
.ana-lb-th:hover { border-color: var(--line-2); }
.ana-lb-th.on { border-color: var(--pumpkin); }
.ana-lb-load { color: var(--muted); font-size: 12.5px; padding: 8px; }
/* Controles: filtro de estoque (mín–máx) + horizonte do Vendas Ideal */
.vgiro-wrap .vrel-bar, .vgiro-wrap .vrel-acoes { flex-wrap: wrap; row-gap: 8px; }
.vgiro-fnum { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 5px 9px; }
.vgiro-fin { width: 52px; border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 6px; font-family: inherit; font-size: 12.5px; text-align: right; color: var(--text); background: var(--surface); }
.vgiro-fin:focus { outline: none; border-color: var(--pumpkin); }
.vgiro-fin-d { width: 46px; }
.vgiro-fdash { color: var(--muted); }
.vgiro-funit { font-size: 12px; color: var(--muted); margin-right: 2px; }
.vgiro-preset { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 7px; cursor: pointer; }
.vgiro-preset:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.vgiro-preset.on { background: var(--pumpkin); color: #fff; border-color: var(--pumpkin); }
.vgiro-fx { border: none; background: var(--line-2); color: #fff; width: 17px; height: 17px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.vgiro-fx:hover { background: var(--chocolate); }
.vgiro-contas-pop { min-width: 232px; max-height: 320px; overflow-y: auto; }

/* ── Painel de Métricas / KPIs (setor Vendas) ─────────────── */
.vpain-wrap { padding: 18px 22px 40px; }
.vpain-cmp.on { background: var(--surface); color: var(--chocolate); border-color: var(--chocolate); }
.vpain-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface-2); }
.vpain-seg.off { opacity: .4; pointer-events: none; }
.vpain-seg-b { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-soft); background: transparent; border: none; padding: 7px 13px; cursor: pointer; }
.vpain-seg-b.on { background: var(--surface); color: var(--chocolate); box-shadow: var(--shadow); }
.vpain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; margin-bottom: 22px; }
.vpain-card { position: relative; text-align: left; font-family: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; overflow: hidden; }
.vpain-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .12s; }
.vpain-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.vpain-card.sel { border-color: var(--pumpkin); box-shadow: var(--shadow); }
.vpain-card.sel::before { background: var(--pumpkin); }
.vpain-card-l { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vpain-card-v { font-size: 24px; font-weight: 700; color: var(--text); margin: 7px 0 6px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.vpain-card-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 20px; }
.vpain-delta { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.vpain-delta.up { background: #E7F3EC; color: var(--ok); }
.vpain-delta.down { background: #FCEAE3; color: var(--chocolate); }
.vpain-delta.flat { background: #EEF2F3; color: var(--text-soft); }
.vpain-card-vs { font-size: 11px; color: var(--muted); }
/* gráfico */
.vpain-chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px 12px; }
.vpain-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vpain-chart-h b { font-size: 14px; color: var(--text); }
.vpain-csub { font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.vpain-legend { display: flex; gap: 16px; }
.vpain-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.vpain-sw { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.vpain-sw.cur { background: var(--pumpkin); }
.vpain-sw.prev { background: var(--netuno); }
.vpain-chart-body { position: relative; width: 100%; }
.vpain-svg { width: 100%; height: 300px; display: block; overflow: visible; }
.vpain-grid-line, .vpain-grid { stroke: var(--line); stroke-width: 1; }
.vpain-axe { fill: var(--muted); font-size: 11px; font-family: inherit; }
.vpain-area { fill: url(#vpainFill); stroke: none; }
.vpain-line-cur { fill: none; stroke: var(--pumpkin); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.vpain-line-prev { fill: none; stroke: var(--netuno); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linejoin: round; opacity: .8; }
.vpain-dot { fill: var(--pumpkin); opacity: 0; transition: opacity .1s; }
.vpain-svg:hover .vpain-dot { opacity: .9; }
.vpain-cursor { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.vpain-tip { position: absolute; top: 6px; pointer-events: none; background: var(--text); color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 11.5px; line-height: 1.5; box-shadow: var(--shadow-lg); transition: opacity .1s; z-index: 5; white-space: nowrap; }
.vpain-tip-d { font-weight: 700; margin-bottom: 2px; }
.vpain-tip-r { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.vpain-tip-r .vpain-sw { width: 10px; }
.vpain-tip-dt { color: #B9C4C8; }
.vpain-chart-hint { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; }
@media (max-width: 880px) { .vpain-wrap { padding: 16px; } .vpain-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }

/* ── Sugestão de IA de Produção (botão na ruptura + modal) ───────────────── */
.rup-ia-btn { margin-left: 8px; border: 1px solid var(--pumpkin); background: #FFF3EB; color: var(--chocolate);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; cursor: pointer; vertical-align: middle;
  opacity: .35; transition: opacity .15s, background .15s; white-space: nowrap; }
.rup-row:hover .rup-ia-btn { opacity: 1; }
.rup-ia-btn:hover { background: var(--pumpkin); color: #fff; }

.ria-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(27,67,80,.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 18px; overflow-y: auto; }
.ria-modal { width: 100%; max-width: 760px; background: var(--surface); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.4);
  overflow: hidden; animation: riaIn .18s ease; transition: max-width .18s ease; }
.ria-modal.ria-wide { max-width: 940px; }
.ria-modal.ria-dossie { max-width: 1340px; }
/* Controle de período no modal de produção + coluna de venda do período */
.ria-vjanela { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.ria-vjanela input { width: 52px; border: 1px solid var(--sw-sandy, #C98A3B); border-radius: 7px; padding: 5px 7px; font-family: inherit; font-size: 12.5px; font-weight: 700; text-align: right; color: var(--text); background: var(--surface); }
.ria-vjanela input:focus { outline: none; border-color: var(--pumpkin); }
.ria-vjanela-on { color: var(--pumpkin, #F27127); font-size: 9px; line-height: 1; }
.ria-it-venda { font-weight: 700; color: var(--chocolate, var(--text)); }
@keyframes riaIn { from { transform: translateY(10px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

.ria-head { position: relative; padding: 16px 18px 14px; background: linear-gradient(160deg, var(--arapawa), var(--arapawa-2)); color: #fff; }
.ria-head-tag { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--sandy); font-weight: 700; margin-bottom: 8px; }
.ria-prod { display: flex; align-items: center; gap: 12px; }
.ria-foto { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #fff2; flex-shrink: 0; }
.ria-sku { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.ria-nome { font-size: 12.5px; color: #B9D2D8; margin-top: 1px; }
.ria-x { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; line-height: 1; }
.ria-x:hover { background: rgba(255,255,255,.24); }
.ria-corpo { padding: 18px; max-height: calc(100vh - 200px); overflow-y: auto; }

.ria-load { display: flex; gap: 16px; align-items: center; padding: 26px 8px; }
.ria-load-orb { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFE6D2, #F27127); flex-shrink: 0; }
.ria-load-tx b { display: block; font-size: 15px; color: var(--text); margin-bottom: 3px; }
.ria-load-tx span { font-size: 12.5px; color: var(--muted); }

.ria-erro { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #FFF4F1; border: 1px solid #F3C9BC; border-radius: 12px; color: var(--text); }
.ria-erro svg { width: 22px; height: 22px; color: var(--chocolate); flex-shrink: 0; }
.ria-erro-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ria-erro pre { white-space: pre-wrap; font-size: 11.5px; background: var(--surface-2); padding: 8px; border-radius: 8px; margin-top: 6px; max-height: 200px; overflow: auto; }

.ria-veredito { margin-bottom: 14px; }
.ria-rec { display: inline-block; font-size: 13px; font-weight: 800; padding: 5px 13px; border-radius: 999px; vertical-align: middle; }
.ria-rec-go { background: #E4F6EC; color: var(--ok); border: 1px solid #9FD9B6; }
.ria-rec-mid { background: #FFF6E2; color: var(--warn); border: 1px solid #EAD08A; }
.ria-rec-no { background: #FBE9E7; color: var(--danger); border: 1px solid #E7B3A9; }
.ria-conf, .ria-horiz { font-size: 12px; color: var(--muted); margin-left: 10px; vertical-align: middle; }
.ria-horiz b { color: var(--text); }
.ria-resumo { font-size: 14.5px; line-height: 1.5; color: var(--text); margin: 11px 0 0; font-weight: 600; }
.ria-cta { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(160deg, rgba(15,118,110,.07), rgba(15,118,110,.02)); border: 1px solid rgba(15,118,110,.2); border-radius: 12px; padding: 14px 16px; }
.ria-cta-tx { font-size: 13px; color: var(--text); flex: 1; min-width: 240px; line-height: 1.5; }
.ria-cta-btn { white-space: nowrap; }
.ria-analisando { font-size: 13px; color: var(--text-soft); padding: 9px 2px 2px; display: flex; align-items: center; gap: 8px; }
.ria-iaerro { font-size: 12.5px; color: var(--warn); background: rgba(194,104,10,.08); border: 1px solid rgba(194,104,10,.2); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }

.ria-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 14px 0; }
.ria-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; text-align: center; }
.ria-kpi-v { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ria-kpi-l { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.ria-kpi-crit { background: #FBE9E7; border-color: #E7B3A9; } .ria-kpi-crit .ria-kpi-v { color: var(--danger); }
.ria-kpi-warn { background: #FFF6E2; border-color: #EAD08A; } .ria-kpi-warn .ria-kpi-v { color: var(--warn); }
.ria-kpi-ok { background: #E7F6EC; border-color: #BFE6CB; } .ria-kpi-ok .ria-kpi-v { color: #1e7d34; }

.ria-just { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); margin: 4px 0 14px; }
.ria-just p { margin: 0 0 8px; } .ria-just ul { margin: 0 0 8px; padding-left: 20px; } .ria-just li { margin-bottom: 3px; } .ria-just b { color: var(--text); }

.ria-alertas { background: #FFF7EE; border: 1px solid #F0D6B8; border-radius: 12px; padding: 11px 14px; margin-bottom: 14px; }
.ria-alertas-h { font-size: 12.5px; font-weight: 700; color: var(--chocolate); margin-bottom: 5px; }
.ria-alertas ul { margin: 0; padding-left: 18px; } .ria-alertas li { font-size: 12.5px; color: var(--text-soft); margin-bottom: 3px; }

/* Observação do SKU (ruptura_obs) — read-only, vinda da coluna Observação da tela. */
.ria-obs { background: #FFFCE8; border: 1px solid #EDE18C; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.ria-obs-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.ria-obs-ic { flex-shrink: 0; }
.ria-obs-tx { font-size: 13px; line-height: 1.5; color: var(--text); }
.ria-obs-tx b { color: var(--text); }
.ria-obs-meta { font-size: 11px; color: var(--muted); }

/* Demanda pré-ruptura: histórico mensal + referência usada */
.ria-demanda { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; margin: 0 0 14px; }
.ria-demanda-alerta { background: #FFF7EE; border-color: #F0D6B8; }
.ria-demanda-selo { font-size: 12px; font-weight: 700; color: var(--chocolate); margin-bottom: 7px; }
.ria-hist { font-size: 12.5px; color: var(--text-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ria-hist-lbl { color: var(--muted); font-weight: 600; }
.ria-hist-m b { color: var(--text); } .ria-hist-m i { color: var(--muted); font-style: normal; font-size: 11px; }
.ria-hist-sep { color: var(--line-2); }
.ria-demanda-ref { font-size: 13px; color: var(--text); margin-top: 7px; }
.ria-demanda-ref b { color: var(--chocolate); }
.ria-demanda-fonte { color: var(--muted); font-size: 12px; }
.ria-regra { display: inline-block; font-size: 11px; font-weight: 700; color: var(--arapawa); background: var(--netuno-2, #E3EEF1); border: 1px solid var(--netuno); border-radius: 6px; padding: 1px 7px; margin-left: 6px; }

.ria-proposta { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ria-proposta-h { background: var(--surface-2); padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); }
.ria-proposta-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.ria-pedlinha { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ria-pedlinha label { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ria-pedlinha input { width: 120px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 9px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); }
.ria-ped-hint { font-size: 11.5px; color: var(--muted); }
.ria-itens-wrap { overflow-x: auto; border-radius: 10px; }
.ria-itens { width: 100%; border-collapse: collapse; }
/* Padding lateral enxuto (10px→7px em th/td) — a tabela tem 15 colunas; cada px poupado nas 2 bordas
   de cada coluna soma rápido. Objetivo (pedido do Rafael): caber sem scroll horizontal no modal, sem
   perder legibilidade dos números — só o "ar" ao redor de cada célula encolheu, fonte e conteúdo não. */
.ria-itens th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 8px 7px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ria-itens th.ria-th-r, .ria-itens th:last-child, .ria-it-qtd { text-align: right; }
/* Cabeçalho clicável (ordenação) */
.ria-itens th.ria-th-sort { cursor: pointer; user-select: none; transition: color .12s; }
.ria-itens th.ria-th-sort:hover { color: var(--text); }
.ria-itens th.ria-th-on { color: var(--chocolate); }
.ria-sort-ar { font-size: 9px; }
/* Reordenar colunas do modal (arrastar o cabeçalho) */
.ria-itens th.ria-th-drag { cursor: grab; }
.ria-itens th.ria-th-drag:active { cursor: grabbing; }
.ria-itens th.ria-th-dragging { opacity: .45; }
.ria-itens th.ria-th-over { box-shadow: inset 3px 0 0 var(--chocolate); }
/* P1/P2 = metades do período (levemente destacadas pra diferenciar do total) */
.ria-it-p1, .ria-it-p2 { color: var(--text-soft); }
.ria-itens td { padding: 6px 7px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text); vertical-align: middle; }
.ria-it-sku { font-weight: 700; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.ria-it-nome { min-width: 108px; max-width: 178px; }
.ria-it-motivo { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.ria-it-m { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; color: var(--text); }
.ria-m-crit { color: var(--danger); font-weight: 700; }
.ria-m-warn { color: var(--warn); font-weight: 600; }
.ria-m-neg { color: var(--danger); }
.ria-m-risk { font-weight: 700; color: var(--chocolate); }
/* Em produção do modal: quantidade + etapas reais (colunas do Trello) + previsão de chegada + alerta sem pedido.
   .ria-etapas era a coluna mais larga da tabela (max-width 150px) — encolhida pra 112px (o texto de cada
   etapa já vem truncado em ~16 chars no JS, abreviaEtapaIA(); isso é só a rede de segurança do CSS pro
   texto CONCATENADO "etapa1 · etapa2 · +N" não estourar). */
.ria-prod-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.12; }
.ria-etapas { font-size: 10px; font-weight: 600; color: var(--pumpkin); white-space: nowrap; max-width: 112px; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.ria-cheg { font-size: 10px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.ria-cheg-warn { color: var(--warn); }
.ria-zero { color: var(--muted); }
.ria-sempedido { display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--danger); background: #FEECEB; border: 1px solid #F6C9C4; border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.ria-cob { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ria-cob-ok b { color: var(--ok); }
.ria-cob-baixa b { color: var(--warn); }
.ria-cob-sem { color: var(--muted); font-size: 11px; }
.ria-cob-inf { color: var(--muted); }
.ria-it-on { background: rgba(15,118,110,.05); }
.ria-it-on .ria-it-sku { color: var(--chocolate); }
.ria-proposta-leg { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.ria-it-qtd input { width: 58px; text-align: right; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 6px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text); }
.ria-itens tfoot td { font-weight: 800; border-bottom: none; background: var(--surface-2); }
.ria-itens tfoot #riaTotal { font-size: 15px; color: var(--chocolate); }

.ria-acoes { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ria-spacer { flex: 1; }
.ria-btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 10px; cursor: pointer; }
.ria-btn:hover:not(:disabled) { border-color: var(--pumpkin); color: var(--chocolate); }
.ria-btn-copy { background: var(--pumpkin); color: #fff; border-color: var(--pumpkin); }
.ria-btn-copy:hover { background: var(--chocolate); color: #fff; }
.ria-btn-go { background: var(--surface-2); color: var(--muted); cursor: not-allowed; position: relative; }
.ria-soon { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--line-2); color: #fff; padding: 1px 6px; border-radius: 6px; margin-left: 6px; }
.ria-btn-criar { background: var(--ok); color: #fff; border-color: var(--ok); cursor: pointer; }
.ria-btn-criar:hover:not(:disabled) { filter: brightness(1.07); color: #fff; border-color: var(--ok); }
.ria-btn-criar:disabled { opacity: .6; cursor: progress; }
.ria-criado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ok); background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.30); padding: 8px 13px; border-radius: 10px; }
.ria-criado-msg { font-size: 12px; color: var(--text-soft); margin-top: 8px; text-align: right; }
.ria-rodape { font-size: 11.5px; color: var(--muted); margin-top: 12px; text-align: center; }
.ria-cache { color: var(--ok); font-weight: 700; }
@media (max-width: 620px) { .ria-corpo { padding: 14px; } .ria-kpis { grid-template-columns: repeat(3, 1fr); } }

.rent-aviso { display: inline-block; margin-top: 5px; color: var(--warn); background: #FFF6E2; border: 1px solid #EAD08A; border-radius: 7px; padding: 2px 9px; font-size: 12px; }

/* ── Pedidos de Produção ─────────────────────────────────────── */
.ped-wrap { padding-bottom: 30px; }
.ped-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 14px 0; }
.ped-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; box-shadow: var(--shadow); }
.ped-kpi-v { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ped-kpi-l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ped-k-sol .ped-kpi-v { color: var(--warn); } .ped-k-prod .ped-kpi-v { color: var(--ok); } .ped-k-rec .ped-kpi-v { color: var(--ok); }
/* Rascunho (pedido criado no Sistema, ainda NÃO lançado na planilha/Trello) — roxo, distinto dos demais */
.ped-k-rasc .ped-kpi-v { color: #5b21b6; }
.ped-bar { display: flex; align-items: center; gap: 12px; margin: 12px 0; flex-wrap: wrap; }
.ped-criar { border: none; background: var(--pumpkin); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.ped-criar:hover { background: var(--chocolate); }
.ped-filtros { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.ped-busca { margin-left: auto; }
.ped-busca input { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-family: inherit; font-size: 13px; width: 240px; background: var(--surface); color: var(--text); }
.ped-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ped-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ped-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; }
.ped-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ped-table .ta-r { text-align: right; }
.ped-row:hover { background: var(--surface-2); }
/* Sugestão de compra: detalhamento por SKU (expandir aviamento) */
.ped-av-row.clickable { cursor: pointer; }
.ped-av-row.clickable:hover > td { background: var(--surface-2); }
.ped-av-row.on > td { background: color-mix(in srgb, var(--pumpkin) 8%, var(--surface)); }
.ped-av-caret { display: inline-block; width: 12px; color: var(--muted); font-size: 11px; }
.ped-av-row.on .ped-av-caret { color: var(--pumpkin); }
.ped-av-det > td { background: var(--surface-2); padding: 0 !important; border-bottom: 2px solid var(--line-2) !important; }
.ped-av-detwrap { padding: 10px 14px 12px 30px; }
.ped-av-dethead { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.ped-av-dettbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ped-av-dettbl thead th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ped-av-dettbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ped-av-dettbl tbody tr:last-child td { border-bottom: none; }
.ped-av-dettbl .ta-r { text-align: right; }
.ped-av-sku { font-weight: 800; color: var(--chocolate); white-space: nowrap; }
.ped-av-peds { white-space: nowrap; }
.ped-av-pedlist { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: 4px; }
/* Placeholder "Ordens de Produção" (OP) */
.op-intro { padding: 8px 4px 40px; max-width: 900px; }
.op-intro-h { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.op-intro-h svg { width: 30px; height: 30px; color: var(--pumpkin); flex: 0 0 auto; }
.op-intro-h h2 { margin: 0 0 5px; font-size: 18px; }
.op-intro-h p { margin: 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.55; }
.op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; }
.op-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.op-card b { font-size: 13.5px; color: var(--chocolate); }
.op-card p { margin: 7px 0 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.op-foot { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 14px; }
/* Produção · Compras (histórico) */
.cf-wrap { padding: 4px 2px 40px; }
.cf-intro { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.cf-intro-ic { color: var(--pumpkin); flex: 0 0 auto; } .cf-intro-ic svg { width: 26px; height: 26px; }
.cf-intro h2 { margin: 0 0 4px; font-size: 17px; }
.cf-intro p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.cf-tipos { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }
.cf-tipo-chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cf-tipo-chip:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.cf-tipo-chip.on { background: var(--chocolate); color: #fff; border-color: var(--chocolate); }
.cf-tipo-chip span { opacity: .65; font-weight: 400; margin-left: 3px; }
.cf-data { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-soft); }
.cf-data input { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); }
.cf-data input:focus { outline: none; border-color: var(--pumpkin); }
.cf-table td { vertical-align: middle; }
.cf-data-td { white-space: nowrap; color: var(--text-soft); }
.cf-tipo-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--chocolate); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.cf-desc { font-weight: 600; color: var(--text); } .cf-cor { color: var(--text-soft); font-weight: 400; }
.cf-rolo { color: var(--muted); font-size: 11px; }
.cf-foot { font-size: 11.5px; color: var(--muted); padding: 8px 2px; }
.ped-num { font-weight: 800; color: var(--chocolate); white-space: nowrap; }
.ped-skupai { font-weight: 700; color: var(--text); font-size: 12px; font-family: 'SF Mono', Menlo, Consolas, monospace; white-space: nowrap; }
.ped-skupai-multi { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 10px; font-weight: 800; vertical-align: 1px; }
.ped-prod { color: var(--text); font-weight: 600; max-width: 360px; }
.ped-itens { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; font-family: 'SF Mono', Menlo, Consolas, monospace; }
.ped-st { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ped-st-sol { background: #FFF6E2; color: var(--warn); } .ped-st-prod { background: #E8F6F4; color: var(--ok); }
.ped-st-rec { background: #E4F6EC; color: var(--ok); } .ped-st-rasc { background: var(--surface-2); color: var(--muted); } .ped-st-canc { background: #FBE9E7; color: var(--danger); }
.ped-fonte { font-size: 11px; font-weight: 700; color: var(--muted); }
.ped-fonte-ia { color: var(--pumpkin); } .ped-fonte-manual { color: var(--netuno); }
/* etapa real no Trello (chip granular linkado ao card) */
.ped-et { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid transparent; white-space: nowrap; line-height: 1.3; }
.ped-et:hover { filter: brightness(.97); text-decoration: none; }
.ped-et-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; flex: 0 0 auto; }
.ped-et-go { opacity: .55; font-size: 11px; }
.ped-et-prod { background: rgba(37,99,235,.12); color: #2563EB; border-color: rgba(37,99,235,.22); }
.ped-et-parc { background: rgba(217,119,6,.12); color: var(--warn); border-color: rgba(217,119,6,.22); }
.ped-et-ent  { background: rgba(22,163,74,.12); color: var(--ok); border-color: rgba(22,163,74,.22); }
.ped-et-dev  { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.ped-tempo { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.ped-tempo-alto { color: var(--warn); font-weight: 700; }
.ped-prev { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.ped-prev-atr { color: var(--danger); font-weight: 700; }
.ped-th { cursor: pointer; user-select: none; white-space: nowrap; }
.ped-th:hover { color: var(--text); }
.ped-sort { color: var(--chocolate); font-weight: 800; }
/* Financeiro — Plano de Contas */
.fin-grupos { display: flex; flex-direction: column; gap: 10px; }
.fin-grupo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); border-left: 3px solid var(--line-2); }
.fin-grupo.fin-g-in { border-left-color: var(--ok); }
.fin-grupo.fin-g-out { border-left-color: var(--danger); }
.fin-grupo-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-2); border: none; cursor: pointer; font-size: 14px; color: var(--text); text-align: left; }
.fin-grupo-h:hover { filter: brightness(.98); }
.fin-grupo-cr { width: 14px; color: var(--muted); }
.fin-grupo-id { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 26px; }
.fin-grupo-n { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.fin-tablewrap { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; }
.fin-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 8px 14px; border-bottom: 1px solid var(--line); }
.fin-table td { padding: 7px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text); }
.fin-table tbody tr:last-child td { border-bottom: none; }
.fin-conta { font-weight: 600; }
.fin-sub { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-sub-n { color: var(--text-soft); }
.fin-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-soft); }
/* Conta DESATIVADA: continua na lista, marcada em vermelho e com o nome riscado. O medo de quem
   clica em "desativar" é a conta sumir — ela não some, e a tela precisa deixar isso óbvio. */
.fin-row-off > td { background: #fdf3ef; color: var(--text-soft); }
.fin-row-off > td:first-child { box-shadow: inset 3px 0 0 #d9534f; }
.fin-row-off .fin-conta s { color: #a94442; text-decoration-color: #d9534f; }
.fin-chip-off { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; padding: 1px 7px; border-radius: 999px; background: #f8d7d2; border: 1px solid #e4a99f; color: #a94442; text-transform: uppercase; }
.fin-btn-on { border-color: #7fbf9a !important; color: #1f7a4d !important; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .fin-row-off > td { background: rgba(217,83,79,.12); }
  .fin-chip-off { background: rgba(217,83,79,.2); border-color: rgba(217,83,79,.45); color: #e8a49c; }
}
.fin-ident { color: var(--text-soft); }
.rup-badge.fin-g-in { background: rgba(22,163,74,.12); color: var(--ok); border-color: rgba(22,163,74,.25); }
.rup-badge.fin-g-out { background: rgba(192,57,43,.1); color: var(--danger); border-color: rgba(192,57,43,.22); }
/* Financeiro — Visualizador de Extratos */
.fin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fin-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 5px 12px; }
.fin-tab-n { font-size: 10.5px; font-weight: 700; opacity: .7; background: var(--surface-2); border-radius: 999px; padding: 0 6px; }
.fin-tab.on .fin-tab-n { background: rgba(255,255,255,.22); opacity: .95; }
.fin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-bar-l, .fin-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-status { display: inline-flex; gap: 4px; }
.fc-act { padding: 2px 8px; font-size: 13px; line-height: 1.3; }
/* linha CONFERIDA (verde) — pinta na hora, sem recarregar */
tr.fc-conferido > td.swl-td { background: rgba(22,163,74,.10) !important; }
tr.fc-conferido > td.swl-td:first-child { box-shadow: inset 3px 0 0 var(--ok, #16a34a); }
/* Dropdown próprio do plano de contas (mostra o código em cada opção) */
.fc-cat-pop { position: fixed; z-index: 200; max-height: 320px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--line, #ddd); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.16); padding: 4px; }
.fc-cat-opt { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 10px; font-size: 13px; color: var(--text, #222); cursor: pointer; }
.fc-cat-opt:hover { background: var(--bg, #f2f3f5); }
/* O que se ESCOLHE aqui é a CONTA — ela é o destaque. O código do subgrupo é contexto, fica em
   segundo plano. Com o código em laranja/negrito na frente, a tela parecia pedir um subgrupo. */
.fc-cat-nome { font-weight: 700; color: var(--text, #222); }
.fc-cat-num { font-weight: 600; color: var(--muted, #8a94a6); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-cat-grp { margin-left: auto; padding-left: 12px; color: var(--muted, #8a94a6); font-size: 11.5px; white-space: nowrap; }
.fc-cat-vazio { padding: 10px 12px; color: var(--muted, #8a94a6); font-size: 12.5px; }
.fin-import-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.fin-table th.ta-r, .fin-table td.ta-r { text-align: right; font-variant-numeric: tabular-nums; }
/* Resumo dos cartões (aba Cartão) */
.fin-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.fin-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.fin-cartao-top { font-size: 13px; margin-bottom: 8px; }
.fin-cartao-fatura { font-size: 22px; font-weight: 700; color: var(--danger); font-variant-numeric: tabular-nums; }
/* Financeiro — Importador de Extratos */
.fin-import { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.fin-import-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-import-row .adm-f { flex: 1; min-width: 200px; }
.fin-import-file input { font-size: 12px; }
.fin-csv { width: 100%; min-height: 120px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px; resize: vertical; color: var(--text); background: var(--surface-2); }
.fin-import-acoes { display: flex; gap: 10px; margin-top: 12px; }
.fin-ok { background: rgba(22,163,74,.1); color: var(--ok); border: 1px solid rgba(22,163,74,.25); border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin: 8px 0; }
.fin-cred { color: var(--ok); font-weight: 600; }
.fin-deb { color: var(--danger); font-weight: 600; }
.fin-preview { margin-bottom: 18px; }
.fin-preview-h { font-size: 13px; color: var(--text-soft); margin-bottom: 8px; }
.fin-ja { margin-top: 20px; }
.fin-ja h3 { font-size: 14px; margin: 0 0 8px; color: var(--text); }
/* Conciliação */
.fin-sub2 { font-size: 11px; color: var(--muted); margin-top: 1px; }
.fin-cc { white-space: nowrap; }
.fin-cc input { width: 230px; max-width: 36vw; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; font-family: inherit; color: var(--text); background: var(--surface); }
.fin-cc input.fin-cc-sug { border-color: rgba(15,118,110,.5); background: rgba(15,118,110,.06); }
.fin-sugtag { color: var(--ok); margin-left: 5px; font-size: 12px; }
.fin-table-conc td { vertical-align: middle; }
/* DRE */
.fin-kpi-in .ped-kpi-v { color: var(--ok); }
.fin-kpi-out .ped-kpi-v { color: var(--danger); }
.dre-wrap { display: flex; flex-direction: column; gap: 14px; }
.dre-secao { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dre-secao-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; font-size: 14px; background: var(--surface-2); }
.dre-secao-h.fin-g-in { color: var(--ok); } .dre-secao-h.fin-g-out { color: var(--danger); }
.dre-secao-tot { font-weight: 800; font-variant-numeric: tabular-nums; }
.dre-grupo { border-top: 1px solid var(--line); }
.dre-grupo-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface); border: none; cursor: pointer; font-size: 13px; color: var(--text); text-align: left; }
.dre-grupo-h:hover { background: var(--surface-2); }
.dre-grupo-tot { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.dre-contas { padding: 4px 14px 10px 40px; background: var(--surface-2); }
.dre-conta { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12.5px; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.dre-conta:last-child { border-bottom: none; }
.dre-resultado { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 12px; font-size: 16px; border: 2px solid; }
.dre-resultado.fin-g-in { color: var(--ok); border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.06); }
.dre-resultado.fin-g-out { color: var(--danger); border-color: rgba(192,57,43,.4); background: rgba(192,57,43,.06); }
.dre-resultado span { font-weight: 800; font-variant-numeric: tabular-nums; }
.dre-aviso { font-size: 12.5px; color: var(--warn); background: rgba(194,104,10,.08); border: 1px solid rgba(194,104,10,.2); border-radius: 8px; padding: 8px 12px; }
/* Ordens de Pagamento */
.op-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.op-form-row .adm-f { flex: 1; min-width: 130px; }
.op-acoes { white-space: nowrap; display: flex; gap: 6px; }
.op-venc { color: var(--danger); font-weight: 700; }
.op-venc-tag { font-size: 10px; background: rgba(192,57,43,.12); color: var(--danger); border-radius: 999px; padding: 1px 6px; font-weight: 700; }
/* Operação / Recebimento */
.op-row { cursor: pointer; }
.op-row:hover { background: var(--surface-2); }
.op-st { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.op-st-programado { background: var(--surface-2); color: var(--muted); }
.op-st-recebido { background: #FFF6E2; color: var(--warn); }
.op-st-em_contagem { background: rgba(37,99,235,.12); color: #2563EB; }
.op-st-qualidade { background: rgba(217,119,6,.12); color: var(--warn); }
.op-st-embalagem { background: rgba(124,58,237,.12); color: #7C3AED; }
.op-st-bipado, .op-st-concluido { background: #E4F6EC; color: var(--ok); }
.op-st-base { background: var(--surface-2); color: var(--text-soft); }
.op-pg { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.op-pg-sugerido { background: #FFF6E2; color: var(--warn); } .op-pg-aprovado { background: rgba(37,99,235,.12); color: #2563EB; } .op-pg-pago { background: #E4F6EC; color: var(--ok); } .op-pg-bloqueado { background: #FBE9E7; color: var(--danger); }
.op-bras { font-weight: 700; color: #7C3AED; }
.op-tag { font-size: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; color: var(--muted); }
.op-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.op-ok { background: rgba(22,163,74,.12); color: var(--ok); }
.op-parcial { background: rgba(217,119,6,.12); color: var(--warn); }
.op-falta, .op-diverg { background: #FBE9E7; color: var(--danger); }
.op-voltar { background: none; border: none; color: var(--netuno); cursor: pointer; font-size: 13px; padding: 4px 0; margin-bottom: 8px; }
.op-det-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.op-det-of { font-size: 18px; font-weight: 800; }
.op-det-acoes { display: flex; gap: 8px; align-items: center; }
.op-det-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
@media (max-width: 900px) { .op-det-grid { grid-template-columns: 1fr; } }
.op-cont h4, .op-cruz h4 { font-size: 13px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.op-cont-tot { color: var(--chocolate); font-weight: 800; }
.op-in-sm { width: 70px; }
.op-cont-tbl input { width: 100%; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 7px; font-size: 12.5px; font-family: inherit; color: var(--text); }
.op-cont-tbl .op-in-sm { width: 64px; }
.op-cont-acoes { display: flex; gap: 10px; margin-top: 10px; }
.op-cruz { background: var(--surface-2); border-radius: 12px; padding: 12px; }
.op-cruz-vazio { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px; padding: 18px; color: var(--muted); font-size: 13px; }
.op-painel-sec { margin-top: 18px; } .op-painel-sec h4 { font-size: 14px; margin: 0 0 10px; }
.op-etapas { display: flex; gap: 10px; flex-wrap: wrap; }
.op-etapa { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; text-align: center; min-width: 90px; }
.op-etapa-n { font-size: 22px; font-weight: 800; }
.op-etapa-l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.op-pg-bloq { background: rgba(192,57,43,.05); }
/* modal criar pedido */
.ped-form-top { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.ped-form-top label { font-size: 12.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ped-form-top input { border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; font-family: inherit; font-size: 13px; color: var(--text); }
.ped-form-tbl { width: 100%; border-collapse: collapse; }
.ped-form-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: var(--muted); padding: 5px 6px; }
.ped-form-tbl td { padding: 3px 6px; }
.ped-form-tbl input { width: 100%; border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: 12.5px; color: var(--text); }
.ped-in-sm { max-width: 80px; }
.ped-x { border: none; background: var(--line-2); color: #fff; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; }
.ped-x:hover { background: var(--chocolate); }
.ped-add { border: 1px dashed var(--line-2); background: none; color: var(--chocolate); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; }

/* ── Calculadora de Marketplace ──────────────────────────────── */
.calc-wrap { padding-bottom: 30px; }
.calc-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 14px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.calc-in { display: flex; flex-direction: column; gap: 4px; }
.calc-in label { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); font-weight: 700; }
.calc-in input { border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 11px; font-family: inherit; font-size: 14px; color: var(--text); width: 150px; background: var(--surface); }
.calc-in input:focus { outline: none; border-color: var(--pumpkin); }
.calc-in-sm input { width: 86px; }
.calc-skubox { display: flex; gap: 6px; }
.calc-skubox input { width: 130px; }
.calc-skubox button { border: 1px solid var(--pumpkin); background: #FFF3EB; color: var(--chocolate); font-weight: 700; font-size: 12px; border-radius: 9px; padding: 0 11px; cursor: pointer; white-space: nowrap; }
.calc-skubox button:hover { background: var(--pumpkin); color: #fff; }
.calc-nome { width: 100%; font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.calc-aviso { width: 100%; font-size: 12px; color: var(--warn); background: #FFF6E2; border: 1px solid #EAD08A; border-radius: 8px; padding: 4px 10px; }
.calc-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calc-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); white-space: nowrap; }
.calc-table thead th.ta-r, .calc-table td.ta-r { text-align: right; }
.calc-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.calc-row:hover { background: var(--surface-2); }
.calc-row.calc-faixa { background: #FFF9F3; }
.calc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: middle; border: 1px solid rgba(0,0,0,.1); }
.calc-tag { font-size: 10px; font-weight: 700; color: var(--chocolate); background: var(--cinderela); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.calc-pos { color: var(--ok); } .calc-neg { color: var(--danger); }
.calc-alvo { color: var(--arapawa); font-weight: 700; }
.calc-vazio { background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px; padding: 26px; text-align: center; color: var(--text-soft); font-size: 14px; }
.calc-info { display: inline-block; cursor: help; color: var(--text-soft); font-size: 12px; opacity: .75; }
.calc-info:hover { opacity: 1; }
@media (max-width: 760px) { .calc-in input { width: 120px; } }

/* ============================================================
   E4 — RETROFIT DE CONSISTÊNCIA (cascata por cima dos silos)
   Harmoniza os componentes EXISTENTES com o design system sem
   tocar no markup: CTA laranja único, ghost único, hover de
   tabela blush, radius/transição padronizados.
   ============================================================ */
/* CTA primário (as ~12 reimplementações do botão laranja) */
.btn.primary, .auth-btn, .teste-ok, .cw-btn:not(.ghost), .vper-aplicar, .ped-criar,
.ria-btn-copy, .dchat-enviar, .docs-chat-abrir, .vrel-btn-exp, .tx-save:not(.tx-save-off) {
  background: var(--primary); color: #fff; border: 1px solid transparent;
  border-radius: var(--radius-sm); font-weight: 600;
  transition: background .15s ease-out, filter .15s ease-out;
}
.btn.primary:hover, .auth-btn:hover, .teste-ok:hover, .cw-btn:not(.ghost):hover, .vper-aplicar:hover,
.ped-criar:hover, .ria-btn-copy:hover, .dchat-enviar:hover, .docs-chat-abrir:hover, .vrel-btn-exp:hover,
.tx-save:not(.tx-save-off):hover { background: var(--primary-hover); filter: none; }
/* CTA teal (família do Estoque/RH) → tokenizado */
.rhc-btn, .rup-reload { background: var(--ok); border-radius: var(--radius-sm); transition: filter .15s ease-out; }
.rhc-btn:hover, .rup-reload:hover { background: var(--ok); filter: brightness(.9); }
/* Ghost/secundário: borda e hover únicos */
.vrel-btn:not(.vrel-btn-exp), .ria-btn:not(.ria-btn-copy):not(.ria-btn-go), .rup-fbtn, .vgiro-preset,
.wgsn-back, .tx-cancel, .adm-mini, .rup-log-more, .pdi-sug {
  border-radius: var(--radius-sm); transition: border-color .15s ease-out, background .15s ease-out, color .15s ease-out;
}
.vrel-btn:not(.vrel-btn-exp):hover, .rup-fbtn:hover, .vgiro-preset:hover, .tx-cancel:hover {
  border-color: var(--sw-netuno); background: var(--surface-2);
}
/* Hover de linha BLUSH nas tabelas densas (a marca no dia a dia) */
.rup-table tbody tr:hover > td, .rent-table tbody tr:hover > td, .vrel-table tbody tr:hover > td,
.vgiro-table tbody tr:hover > td, .ped-table tbody tr:hover > td, .cmp-table tbody tr:hover > td,
.fin-table tbody tr:hover > td, .adm-table tbody tr:hover > td, .rhc-table tbody tr:hover > td {
  background: rgba(249, 222, 213, .35);
}
/* th de tabela: peso/caixa únicos */
.rup-table thead th, .rent-table thead th, .vrel-table thead th, .vgiro-table thead th,
.ped-table thead th, .cmp-table thead th, .fin-table thead th, .adm-table thead th, .rhc-table thead th {
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}

/* ============================================================
   PASSE "IMPECÁVEL" — refinamento visual profundo (pós-feedback)
   Sidebar rica · topbar · KPIs com accent · banner com watermark
   · zebra · scrollbars · micro-interações
   ============================================================ */

/* ── Sidebar: marca grande + nav refinada ── */
.sidebar {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(172deg, #2A5D6B 0%, var(--sw-arapawa) 38%, var(--sw-arapawa-deep) 100%);
}
.brand { padding: 10px 8px 22px; gap: 12px; }
.brand .b-lem { height: 24px; width: auto; filter: none; opacity: .95; }
.brand .b-name { font-size: 25px; letter-spacing: .3px; line-height: 1; }
.brand .b-sub { font-size: 9.5px; letter-spacing: 3px; margin-top: 3px; }
.nav-label { font-size: 9.5px; letter-spacing: 2px; color: rgba(205,230,235,.45); padding: 16px 11px 8px; font-weight: 700; }
.nav-item { padding: 9.5px 11px; border-radius: 11px; font-size: 13.5px; }
.nav-item.active {
  background: linear-gradient(135deg, var(--sw-pumpkin) 0%, var(--sw-chocolate) 130%);
  box-shadow: 0 6px 18px rgba(242,113,39,.38), inset 0 1px 0 rgba(255,255,255,.22);
}
.sidebar::-webkit-scrollbar { width: 5px; }
.side-tag { letter-spacing: 4px; opacity: .55; }

/* ── Topbar + tabs + busca ── */
.topbar { padding: 15px 28px; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(37,85,97,.03); }
.tabs { background: var(--surface-3); border-radius: 13px; padding: 4px; }
.tabs .tab { border-radius: 10px; padding: 7px 14px; font-weight: 600; transition: color .15s, background .15s; }
.tabs .tab.active { background: var(--surface); box-shadow: 0 1px 3px rgba(37,85,97,.12), 0 4px 12px rgba(37,85,97,.08); }
.search { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--sw-sandy); box-shadow: 0 0 0 3px rgba(246,152,99,.15); background: #fff; }
.search input { background: transparent; }

/* ── KPI cards: accent no topo + hover lift (todas as famílias) ── */
.rent-kpi, .rup-kpi, .ped-kpi, .fin-kpi, .rhc-kpi, .ria-kpi, .vpain-card, .op-etapa {
  position: relative; overflow: hidden;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.rent-kpi::before, .rup-kpi::before, .ped-kpi::before, .fin-kpi::before, .rhc-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--sw-pumpkin), var(--sw-sandy));
  opacity: .85;
}
.rent-kpi-custo::before { background: linear-gradient(90deg, #93A5AB, #C3CFD3); }
.rent-kpi-tax::before { background: linear-gradient(90deg, var(--warn), #E0A33E); }
.rent-kpi-lucro::before { background: linear-gradient(90deg, var(--ok), #35A095); }
.rent-kpi:hover, .rup-kpi:hover, .ped-kpi:hover, .fin-kpi:hover, .rhc-kpi:hover {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,85,97,.10);
}
.rent-kpi-v, .rup-kpi-v { font-size: 26px; }
.rent-kpi-l, .rup-kpi-l { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 700; color: var(--ink-muted); }

/* ── Banner explicativo: petróleo profundo + watermark da lemniscata ── */
.rup-explica, .rent-intro, .portal-explica {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(135deg, #1E4A57 0%, var(--sw-arapawa) 55%, #2A5D6B 100%);
}
.rup-explica::after, .rent-intro::after, .portal-explica::after {
  content: ''; position: absolute; right: -70px; bottom: -50px; width: 340px; height: 180px;
  background: url('/img/brand/lemniscata-clara.png') center / contain no-repeat;
  opacity: .06; pointer-events: none; transform: rotate(-6deg);
}

/* ── Tabelas: zebra sutil + th mais firme ── */
.rup-table tbody tr:nth-child(even):not(:hover) > td,
.rent-table tbody tr:nth-child(even):not(:hover) > td,
.vrel-table tbody tr:nth-child(even):not(:hover) > td,
.ped-table tbody tr:nth-child(even):not(:hover) > td,
.cmp-table tbody tr:nth-child(even):not(:hover) > td { background: rgba(250,246,242,.6); }
.rup-table thead th, .rent-table thead th, .vrel-table thead th,
.ped-table thead th, .cmp-table thead th { border-bottom: 2px solid var(--line-2); }

/* ── Scrollbars laranja Swisz (reafirmacao do padrao global, bloco passe impecavel) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sw-pumpkin, #F27127); border-radius: 999px; border: 3px solid var(--bg, #FBF8F5); }
::-webkit-scrollbar-thumb:hover { background: var(--sw-chocolate, #D9501E); }

/* ── Entrada de view mais elegante ── */
.fade-in { animation: viewIn .22s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ── Pedidos de Produção: status de CÁLCULO (tecido/aviamento) — foco no gargalo de compras ── */
.ped-calcs { display: inline-flex; gap: 5px; }
.ped-calc { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; cursor: help; }
.ped-calc-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #C8E6E1; }
.ped-calc-no { background: var(--warn-bg); color: var(--warn); border: 1px solid #EFD9B4; }
.rup-fchip-alert.on { background: var(--warn-bg); color: var(--warn); border-color: #EFD9B4; }

/* Previsão ESTIMADA (30d após o pedido, quando o card não tem due no Trello) — visualmente distinta */
.ped-prev-est { color: var(--ink-muted); font-weight: 500; border-bottom: 1px dashed var(--line-2); }
.ped-prev-est.ped-prev-atr { color: var(--danger); border-bottom-color: var(--danger); }

/* ── Logística · Devoluções ── */
.dev-table td { vertical-align: top; }
.dev-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; border: 1px solid rgba(0,0,0,.12); }
.dev-canal-c { white-space: nowrap; font-weight: 600; }
.dev-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.dev-sub { font-size: 11px; color: var(--ink-muted); font-weight: 400; margin-top: 1px; }
.dev-motivo { max-width: 200px; }
.dev-prod { max-width: 220px; }
.dev-prazo { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.dev-prazo-perto { color: var(--warn); }
.dev-prazo-venc { color: var(--danger); }
.dev-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--info-bg); color: #41707C; border: 1px solid #CBE0E6; white-space: nowrap; }
.dev-status-ok { background: var(--ok-bg); color: var(--ok); border-color: #C8E6E1; }
.dev-row { cursor: pointer; transition: background .12s; }
.dev-row.on { background: rgba(249,222,213,.4); }
.dev-exp { color: var(--ink-muted); }
.dev-det td { background: var(--surface-2); }
.dev-det-row, .dev-det-meta { font-size: 12px; color: var(--ink-soft); padding: 4px 8px 4px 26px; }
.dev-det-meta { color: var(--ink-muted); border-top: 1px dashed var(--line-2); }
.dev-canal, .dev-alvo input { font-family: inherit; font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 9px; background: var(--surface); color: var(--text); }
.dev-alvo { font-size: 12px; color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.dev-alvo input { width: 48px; text-align: right; padding: 5px 7px; }
.ped-k-alert .ped-kpi-v { color: var(--danger); }

/* ── Devoluções ML: tratativa + linha de claim ── */
.dev-row-ml { cursor: pointer; }
.dev-row-venc { border-left: 3px solid var(--danger); }
.dev-badge-alert { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; vertical-align: middle; margin-left: 4px; }
/* badges de estado de tratativa */
.dev-trat-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dev-trat-aberta   { background: #FEF9C3; color: #92400E; border: 1px solid #FDE68A; }
.dev-trat-em       { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.dev-trat-ok       { background: var(--ok-bg); color: var(--ok); border: 1px solid #C8E6E1; }
.dev-trat-avaria   { background: #FEF2F2; color: var(--danger); border: 1px solid #FCA5A5; }
.dev-trat-descarte { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line-2); }
/* painel de tratativa na linha expandida */
.dev-det-ml { padding: 10px 16px 12px 26px; background: var(--surface-2); }
.dev-det-info { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 8px; }
.dev-det-trat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.dev-trat-sel { font-family: inherit; font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 9px; background: var(--surface); color: var(--text); }
.dev-trat-obs  { flex: 1; min-width: 160px; font-family: inherit; font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 9px; background: var(--surface); color: var(--text); }
.dev-trat-resp { width: 130px; font-family: inherit; font-size: 12.5px; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 9px; background: var(--surface); color: var(--text); }
.dev-trat-msg { font-size: 12px; min-width: 40px; }
.dev-trat-ok  { color: var(--ok); font-weight: 600; }
.dev-trat-err { color: var(--danger); font-weight: 600; }
.dev-table-ml colgroup, .dev-table-ml { table-layout: auto; }

/* ── Produção: +20% + explosão de aviamentos ── */
.ped-prod20 { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ped-20 { font-size: 9.5px; font-weight: 700; color: var(--sw-chocolate); background: var(--sw-bridesmaid); border: 1px solid var(--sw-cinderela); border-radius: 999px; padding: 1px 5px; margin-left: 3px; vertical-align: middle; }
.ped-expbtn { font-size: 12px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 3px 8px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.ped-expbtn:hover { border-color: var(--sw-sandy); background: var(--surface-2); }
.ped-expbtn.on { background: var(--sw-bridesmaid); border-color: var(--sw-cinderela); color: var(--sw-chocolate); }
.ped-exp-row > td { background: var(--surface-2); padding: 0; }
.ped-exp { padding: 12px 16px 14px; }
.ped-exp-h { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.ped-exp-tbl { border-collapse: collapse; font-size: 12.5px; min-width: 380px; max-width: 560px; }
.ped-exp-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line-2); }
.ped-exp-tbl th.ta-r, .ped-exp-tbl td.ta-r { text-align: right; padding-right: 0; }
.ped-exp-tbl td { padding: 4px 14px 4px 0; border-bottom: 1px solid var(--line-1); color: var(--ink); }
.ped-exp-tbl td:last-child { font-variant-numeric: tabular-nums; }
.ped-exp-warn { font-size: 11.5px; color: var(--warn); margin-top: 6px; }
.ped-exp-foot { font-size: 11px; color: var(--ink-muted); margin-top: 8px; max-width: 620px; line-height: 1.5; }

/* Grade completa (cor × tamanho) — bloco full-width no topo do pedido expandido, acima das 3 colunas */
.ped-exp-grade { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ped-grade-wrap { overflow-x: auto; }
.ped-grade-tbl { min-width: 0; max-width: none; width: auto; }
.ped-grade-tbl th, .ped-grade-tbl td { padding: 4px 16px 4px 0; white-space: nowrap; }
.ped-grade-tbl th:first-child, .ped-grade-tbl td:first-child { padding-left: 0; }
.ped-grade-tot td { border-top: 1px solid var(--line-2); border-bottom: none; font-weight: 700; }

/* Cabeçalho de coluna com tooltip explicativo (Pedidos de Produção) — pista visual no hover */
.ped-th[title]:hover { text-decoration: underline dotted var(--sw-sandy); text-underline-offset: 4px; }
.ped-th-hint { cursor: help; }

/* Ficha Técnica — separador sutil entre grupos de SKU pai */
.ped-table tbody tr.ficha-sep > td { border-top: 2px solid var(--line); }
/* Ficha Técnica — linha de TECIDO (🧵) destacada do aviamento */
.ped-table td.ficha-tec { color: var(--text); font-weight: 600; }

/* Seleção em massa de pedidos (Produção) — checkbox + barra de ação */
.ta-c { text-align: center; }
.ped-selcell { width: 34px; }
.ped-sel, #pedSelAll { width: 16px; height: 16px; cursor: pointer; accent-color: var(--sw-sandy, #C98A3B); }
.ped-table tbody tr.ped-row-sel > td { background: color-mix(in srgb, var(--sw-sandy, #C98A3B) 12%, transparent); }
.ped-selbar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13px; transition: border-color .15s, background .15s; }
.ped-selbar.on { border-style: solid; border-color: color-mix(in srgb, var(--sw-sandy, #C98A3B) 55%, var(--line)); background: color-mix(in srgb, var(--sw-sandy, #C98A3B) 7%, var(--surface)); color: var(--text); }
.ped-selbar-tx b { font-variant-numeric: tabular-nums; }
.ped-selbar #pedGerar:disabled { opacity: .5; cursor: not-allowed; }

/* Filtros por coluna do Trello + botão Criar desativado (Produção = espelho read-only) */
.ped-filtros-sep { color: var(--line); margin: 0 3px; user-select: none; align-self: center; font-weight: 700; }
.rup-fchip-col.on { background: color-mix(in srgb, var(--sw-sandy, #C98A3B) 18%, var(--surface)); border-color: color-mix(in srgb, var(--sw-sandy, #C98A3B) 55%, var(--line)); }
.ped-criar:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }

/* ── Compras: Solicitação (Produção) + Compras Geral (Financeiro) ── */
.cmp-wrap { padding: 4px 2px 40px; }
.cmp-intro { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.cmp-intro-ic { color: var(--pumpkin); flex: 0 0 auto; }
.cmp-intro-ic svg { width: 26px; height: 26px; }
.cmp-intro h2 { margin: 0 0 4px; font-size: 17px; }
.cmp-intro p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.cmp-err { display: flex; gap: 10px; align-items: center; background: #FEECEB; border: 1px solid #F5B5B0; color: var(--danger); border-radius: 12px; padding: 14px 16px; }
.cmp-err-sub { color: var(--text-soft); font-size: 12.5px; font-weight: 400; }
.cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cmp-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; }
.cmp-kpi-v { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cmp-kpi-l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.cmp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cmp-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-busca { border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 13px; min-width: 220px; background: var(--surface); color: var(--text); }
.cmp-busca:focus { outline: none; border-color: var(--pumpkin); }
.cmp-sel { border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); cursor: pointer; }
.cmp-count { font-size: 12px; color: var(--muted); }
.cmp-btn { background: var(--pumpkin); color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.cmp-btn:hover { filter: brightness(1.05); } .cmp-btn:disabled { opacity: .5; cursor: not-allowed; }
.cmp-btn-ghost { background: var(--surface); color: var(--text-soft); border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cmp-btn-ghost:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.cmp-btn-del { background: transparent; color: var(--danger); border: 1px solid #F5B5B0; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cmp-btn-del:hover { background: #FEECEB; }
.cmp-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); position: sticky; top: 0; }
.cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
/* rodapé de totais do filtro — fixo embaixo ao rolar a tabela */
.cmp-table tfoot .cmp-tot-td { padding: 11px 12px; border-top: 2px solid var(--line-2); background: var(--surface-2); font-weight: 700; position: sticky; bottom: 0; }
.cmp-table tfoot .cmp-tot-td b { font-size: 14px; }
.cmp-row { cursor: pointer; }
/* Reordenar coluna arrastando o cabeçalho (mesmo padrão do rup-th-drag) */
.cmp-table th.cmp-th-drag { cursor: grab; }
.cmp-table th.cmp-th-dragging { opacity: .45; }
.cmp-table th.cmp-th-dragover { border-left: 2px solid var(--accent, #1f7a52) !important; }
.cmp-row:hover { background: var(--surface-2); }
.cmp-table .ta-l { text-align: left; } .cmp-table .ta-r { text-align: right; } .cmp-table .ta-c { text-align: center; }
.cmp-item { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-sub { font-size: 11.5px; color: var(--text-soft); margin-top: 2px; }
.cmp-urg { font-size: 10.5px; font-weight: 800; color: #B45309; background: #FEF3C7; border: 1px solid #FCD34D; border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.cmp-formapag-pix { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.cmp-vazio { text-align: center; color: var(--text-soft); padding: 40px 24px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px; }
.cmp-vazio svg { width: 30px; height: 30px; color: var(--muted); margin-bottom: 8px; }
.cmp-vazio b { display: block; margin-bottom: 4px; color: var(--text); }
.cmp-vazio p { margin: 0 0 14px; font-size: 13px; }
/* status: badge + dropdown colorido */
.cmp-st { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cmp-st-sol { color: #B45309; background: #FEF3C7; } .cmp-st-apr { color: #1D4ED8; background: #DBEAFE; }
.cmp-st-cmp { color: #6D28D9; background: #EDE9FE; } .cmp-st-rec { color: #15803D; background: #DCFCE7; }
.cmp-st-rej { color: #B91C1C; background: #FEE2E2; }
.cmp-stsel { font: inherit; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; border: 1px solid transparent; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; background-repeat: no-repeat; background-position: right 7px center; min-width: 116px; transition: filter .1s; }
.cmp-stsel:hover { filter: brightness(.97); } .cmp-stsel.saving { opacity: .6; cursor: progress; }
.cmp-stsel.s-solicitada, .cmp-stsel-modal.s-solicitada { color: #B45309; background-color: #FEF3C7; border-color: #FCD34D; }
.cmp-stsel.s-aprovada, .cmp-stsel-modal.s-aprovada { color: #1D4ED8; background-color: #DBEAFE; border-color: #93C5FD; }
.cmp-stsel.s-comprada, .cmp-stsel-modal.s-comprada { color: #6D28D9; background-color: #EDE9FE; border-color: #C4B5FD; }
.cmp-stsel.s-recebida, .cmp-stsel-modal.s-recebida { color: #15803D; background-color: #DCFCE7; border-color: #86EFAC; }
.cmp-stsel.s-recusada, .cmp-stsel-modal.s-recusada { color: #B91C1C; background-color: #FEE2E2; border-color: #FCA5A5; }
.cmp-td-st { white-space: nowrap; }
/* banner de "só leitura" (sem permissão de escrita no setor) */
.cmp-banner-ro { background: #fff8e1; color: #7a5f00; padding: 8px 16px; border-radius: 6px; margin: 0 0 12px; font-size: .88rem; border: 1px solid #ffe082; }
/* Cadastros "estilo planilha" (Parceiros: Oficinas/Tecidos/Aviamentos) — cabeçalho fixo, grade,
   densidade compacta, edição célula-a-célula. Base é o .sw-table (sticky header já vem de lá). */
.pc-tbl-wrap { max-height: 72vh; }
.pc-tbl th, .pc-tbl td.pc-td { border-right: 1px solid var(--line-1); }
.pc-tbl th:last-child, .pc-tbl td.pc-td:last-child { border-right: none; }
.pc-tbl thead th { cursor: default; }
.pc-tbl tbody td.pc-td { padding: 4px 8px; white-space: normal; }
.pc-td-acoes { white-space: nowrap; text-align: center; }
.pc-row-novo { background: rgba(242, 113, 39, .07); }
.pc-row-salvando { opacity: .55; pointer-events: none; }
/* célula editável: parece texto até focar (feito de planilha) */
.pc-cell-wrap { display: flex; align-items: center; gap: 4px; }
.pc-cell-in { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 4px 6px; font: inherit; font-size: 12.5px; color: var(--text); }
.pc-cell-in:hover { border-color: var(--line-2); }
.pc-cell-in:focus { outline: none; border-color: var(--pumpkin); background: var(--surface); }
textarea.pc-cell-in.pc-cell-area { resize: vertical; min-height: 30px; }
select.pc-cell-in { cursor: pointer; appearance: none; -webkit-appearance: none; font-weight: 800; text-align: center; padding: 4px 8px; }
.pc-cell-status.s-ok { color: #15803D; background-color: #DCFCE7; border-color: #86EFAC; }
.pc-cell-status.s-off { color: #B91C1C; background-color: #FEE2E2; border-color: #FCA5A5; }
.pc-warn-clear { border: none; background: transparent; cursor: pointer; font-size: 13px; padding: 2px; line-height: 1; flex: none; }
.pc-warn-clear:hover { filter: brightness(1.15); }
/* Permissões de Fornecedores — matriz pessoa × categoria (Editar/Só ver/Sem acesso por célula) */
.pp-tbl-wrap { max-height: 74vh; }
.pp-td { text-align: center; white-space: nowrap; }
.pp-td-nome { white-space: normal; text-align: left; }
.pp-email { font-size: 11px; color: var(--muted); }
.pp-sel { font: inherit; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; border: 1px solid transparent; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; min-width: 104px; }
.pp-sel-editar { color: #15803D; background-color: #DCFCE7; border-color: #86EFAC; }
.pp-sel-ver { color: #1D4ED8; background-color: #DBEAFE; border-color: #93C5FD; }
.pp-sel-sem_acesso { color: #B91C1C; background-color: #FEE2E2; border-color: #FCA5A5; }
.pp-reset { border: none; background: transparent; cursor: pointer; font-size: 12px; padding: 2px 4px; line-height: 1; color: var(--muted); margin-left: 4px; }
.pp-reset:hover { color: var(--chocolate); }
.pp-padrao { font-size: 10px; color: var(--muted); margin-left: 6px; text-transform: uppercase; letter-spacing: .3px; }
.pp-td-salvando { opacity: .55; pointer-events: none; }
/* modal */
.cmp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 4000; padding: 20px; }
.cmp-modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.cmp-modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cmp-modal-head b { font-size: 16px; }
.cmp-x { margin-left: auto; border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.cmp-x:hover { color: var(--danger); }
.cmp-modal-body { padding: 16px 20px; overflow-y: auto; }
.cmp-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.cmp-foot-r { display: flex; gap: 8px; }
.cmp-form-erro { margin: 12px 20px 0; background: #FEECEB; border: 1px solid #F5B5B0; color: var(--danger); border-radius: 9px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-f { display: flex; flex-direction: column; gap: 4px; }
.cmp-f-l { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.cmp-f-h { font-size: 11px; color: var(--muted); }
.cmp-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text); }
.cmp-in:focus { outline: none; border-color: var(--pumpkin); }
textarea.cmp-in { resize: vertical; }
.cmp-qtd { display: flex; gap: 6px; } .cmp-qtd .cmp-in[name="unidade"] { max-width: 96px; }
.cmp-radio { display: flex; gap: 14px; align-items: center; font-size: 13.5px; padding-top: 4px; }
.cmp-radio label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cmp-view-tit { font-size: 16px; font-weight: 800; color: var(--chocolate); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-bottom: 10px; }
.cmp-info { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.cmp-info span { color: var(--muted); } .cmp-info b { color: var(--text); text-align: right; }
.cmp-just { margin-top: 8px; } .cmp-just span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cmp-just p { margin: 3px 0 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.cmp-trilha { margin-top: 14px; } .cmp-trilha > span { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cmp-trilha ul { list-style: none; margin: 6px 0 0; padding: 0; }
.cmp-trilha li { font-size: 12.5px; color: var(--text-soft); padding: 3px 0 3px 16px; position: relative; }
.cmp-trilha li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--pumpkin); }
.cmp-trilha li b { color: var(--text); } .cmp-trilha .cmp-tl-rej::before { background: var(--danger); }
.cmp-fin { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--line); }
.cmp-fin-h { font-size: 12.5px; font-weight: 800; color: var(--chocolate); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
@media (max-width: 640px) { .cmp-grid, .cmp-info-grid { grid-template-columns: 1fr; } }

/* ===== Negociação / Compras (fluxo de compra) ===== */
/* badges de status (códigos curtos reutilizam a paleta dos cmp-stsel) */
.cmp-stsel.s-neg { color: #475569; background-color: #F1F5F9; border-color: #CBD5E1; }
.cmp-stsel.s-sol { color: #B45309; background-color: #FEF3C7; border-color: #FCD34D; }
.cmp-stsel.s-apr { color: #1D4ED8; background-color: #DBEAFE; border-color: #93C5FD; }
.cmp-stsel.s-cmp { color: #6D28D9; background-color: #EDE9FE; border-color: #C4B5FD; }
.cmp-stsel.s-rec { color: #15803D; background-color: #DCFCE7; border-color: #86EFAC; }
.neg-falta { color: var(--danger); font-style: italic; }
.neg-mix { white-space: nowrap; } .neg-mix span { display: inline-block; margin-right: 8px; font-weight: 700; font-size: 13px; }
.neg-mini { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; cursor: pointer; margin-left: 6px; transition: all .12s; }
.neg-mini:hover:not(:disabled) { border-color: var(--pumpkin); color: var(--text); }
.neg-mini:disabled { opacity: .45; cursor: not-allowed; }
.neg-mini-go { background: var(--ok); border-color: var(--ok); color: #fff; }
.neg-mini-go:hover:not(:disabled) { filter: brightness(1.06); color: #fff; border-color: var(--ok); }
.neg-btn-go { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.neg-btn-go:hover { filter: brightness(1.06); }
.neg-del { background: transparent; border: 1px solid #F5B5B0; color: var(--danger); font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.neg-del:hover { background: #FEECEB; }
.neg-modal { max-width: 720px; }
/* modal de edição da Negociação especificamente (mais campos + tabela de itens) — .neg-modal é
   compartilhada com Fornecedores/OP/Romaneio, então o aumento de tamanho vai só nesta classe extra */
.neg-form-modal { max-width: 880px; max-height: 94vh; }
.neg-orig { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.neg-forn-wrap { display: flex; flex-direction: column; gap: 6px; }
.neg-qtdtot { font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.neg-qtdtot b { color: var(--chocolate); font-size: 13.5px; }
.neg-grid3 { grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; }
.neg-hint { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.neg-in { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.neg-in:focus { outline: none; border-color: var(--pumpkin); }
textarea.neg-in { resize: vertical; }
.neg-itens-h { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; }
.neg-itens-h b { font-size: 13px; color: var(--chocolate); }
.neg-add { margin-left: auto; border: 1px dashed var(--line-2); background: var(--surface); color: var(--text-soft); font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.neg-add:hover { border-color: var(--pumpkin); color: var(--text); }
.neg-itbl-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.neg-itbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.neg-itbl thead th { background: var(--surface-2, #faf7f2); text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.neg-itbl thead th.ta-r { text-align: right; }
.neg-itbl tbody td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.neg-itbl tbody tr:last-child td { border-bottom: none; }
.neg-itrow .neg-in { padding: 6px 8px; font-size: 12.5px; }
.neg-itipo { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 6px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); }
.neg-in-un { max-width: 70px; } .neg-in-qtd { max-width: 96px; text-align: right; }
.neg-rm { border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; }
.neg-rm:hover { color: var(--danger); }
.neg-tl { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.neg-tl > b { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.neg-tl-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.neg-tl-row span { color: var(--muted); min-width: 160px; } .neg-tl-row b { color: var(--text); } .neg-tl-row i { color: var(--text-soft); font-style: normal; margin-left: auto; }
.neg-flash { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--chocolate, #3a2a1e); color: #fff; font-size: 13.5px; font-weight: 600; padding: 11px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: all .25s; z-index: 9999; }
.neg-flash.on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { .neg-grid3 { grid-template-columns: 1fr; } }

/* ===== Ficha Técnica · Sombra (Cadastro Base × Ficha técnica) ===== */
.ficha-sombra-intro { font-size: 13px; color: var(--text-soft); background: var(--surface-2, #faf7f2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; line-height: 1.5; }
.sb-diverge-tx { color: #B91C1C; }
.ficha-sombra-build { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2, #faf7f2); border: 1px dashed var(--line-2); border-radius: 12px; padding: 18px 20px; }
.ficha-sombra-build svg { width: 30px; height: 30px; color: var(--pumpkin); flex: none; }
.ficha-sombra-build b { font-size: 14px; } .ficha-sombra-build p { margin: 4px 0 10px; font-size: 13px; color: var(--text-soft); }
.sb-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sb-diverge { color: #B91C1C; background: #FEE2E2; border: 1px solid #FCA5A5; }
.sb-sobase { color: #92400E; background: #FEF3C7; border: 1px solid #FCD34D; }
.sb-soficha { color: #1D4ED8; background: #DBEAFE; border: 1px solid #93C5FD; }
.sb-sem { color: #6B7280; background: #F3F4F6; border: 1px solid #D1D5DB; }
.sb-ok { color: #15803D; background: #DCFCE7; border: 1px solid #86EFAC; }
.sb-row-diverge > td { background: color-mix(in srgb, #FEE2E2 40%, transparent); }
.sb-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }
.sb-legado { color: #6D28D9; background: #EDE9FE; }
.sb-soficha2 { color: #92400E; background: #FEF3C7; }
.sb-portam { font-size: 10.5px; color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; margin-left: 4px; }

/* ===== Ordem de Produção (OP / ficha de corte) ===== */
.op-nova { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.op-nova:hover { filter: brightness(1.06); }
.op-modal { max-width: 860px; }
.op-grid3 { grid-template-columns: 1fr 1fr 1fr; }
.op-gwrap { overflow-x: auto; }
.op-gtab { min-width: 560px; }
.op-gtab thead th { white-space: nowrap; }
.op-grow .neg-in { padding: 6px 7px; }
.op-q { max-width: 64px; text-align: center; display: inline-block; }
.op-gtab td.ta-c, .op-gtab th.ta-c { text-align: center; }
.op-gtab td.op-rowtot, .op-gtab td.op-gtot { text-align: center; }
.op-grow .neg-in[data-k="cor"] { min-width: 90px; }
.op-rowtot { font-weight: 800; color: var(--chocolate); white-space: nowrap; }
.op-gfoot { font-weight: 700; color: var(--text-soft); text-transform: uppercase; font-size: 11px; letter-spacing: .3px; }
.op-gtot { font-weight: 800; font-size: 15px; color: var(--ok); }
.op-gtab tfoot td { border-top: 2px solid var(--line); padding-top: 8px; }
.op-envio-h { margin: 16px 0 8px; font-size: 12.5px; font-weight: 800; color: var(--chocolate); text-transform: uppercase; letter-spacing: .3px; border-top: 1px dashed var(--line); padding-top: 12px; }

/* ===== Custo do Produto (ficha de custo por SKU) ===== */
.fc-modal { max-width: 920px; }
.fc-tab { min-width: 640px; }
.fc-tab thead th { white-space: nowrap; }
.fc-q { max-width: 90px; text-align: center; }
.fc-rowtot { font-weight: 800; color: var(--chocolate); white-space: nowrap; }
.fc-total-banner { margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: rgba(46,139,87,.1); border: 1px solid rgba(46,139,87,.3); font-size: 15px; }
.fc-total-banner b { font-size: 19px; color: var(--ok); }

/* sub-abas: Ordens de Produção · Romaneios de corte · Romaneios de oficina */
.op-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 16px; border-bottom: 1px solid var(--line); }
.op-aba { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-soft); background: none; border: none; border-bottom: 2.5px solid transparent; padding: 9px 14px; cursor: pointer; border-radius: 8px 8px 0 0; }
.op-aba:hover { color: var(--text); background: var(--surface-2); }
.op-aba.on { color: var(--chocolate); border-bottom-color: var(--chocolate); }
.op-aba-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; color: #fff; background: var(--text-soft); border-radius: 9px; vertical-align: middle; }
.op-aba.on .op-aba-n { background: var(--chocolate); }

/* botões de romaneio na linha da OP */
.op-rom { white-space: nowrap; }

/* modal de gerar romaneio quebrado */
.op-rmodal { max-width: 820px; }
.op-rsaldo { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; font-size: 13px; }
.op-rsaldo-n { color: var(--text-soft); }
.op-rsaldo-n b { color: var(--text); }
.op-rrest { color: var(--ok); font-weight: 800; }
.op-rlotes { margin-bottom: 12px; border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 10px; }
.op-rlotes-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--text-soft); margin-bottom: 6px; }
.op-rlote { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.op-rlote + .op-rlote { border-top: 1px dotted var(--line); }
.op-rgwrap { overflow-x: auto; }
.op-rgtab { min-width: 520px; }
.op-rgtab thead th { white-space: nowrap; }
.op-rgtab .neg-in { padding: 6px 7px; }
.op-rq { max-width: 60px; text-align: center; display: inline-block; }
.op-rgtab td.op-rcor { font-weight: 700; min-width: 110px; }
.op-rrowtot { font-weight: 800; color: var(--chocolate); white-space: nowrap; text-align: center; }
.op-rgtot { font-weight: 800; font-size: 15px; color: var(--ok); text-align: center; }
.op-rgtab tfoot td { border-top: 2px solid var(--line); padding-top: 8px; }
.op-rrow { cursor: pointer; }
.op-rzerado { padding: 16px; text-align: center; color: var(--ok); font-weight: 700; background: var(--surface-2); border: 1px dashed var(--ok); border-radius: 10px; }
.op-rfolhas { max-width: 60px; text-align: center; display: inline-block; }
.op-rcell { vertical-align: top; }
.op-rref { font-size: 9.5px; line-height: 1.2; color: var(--text-soft); margin-top: 2px; white-space: nowrap; }
.op-rfalta { color: var(--ok); font-weight: 700; }
.op-avi-h { margin: 14px 0 6px; font-size: 12.5px; font-weight: 800; color: var(--chocolate); text-transform: uppercase; letter-spacing: .3px; border-top: 1px dashed var(--line); padding-top: 12px; }
.op-avitbl { min-width: 360px; }
.op-avitbl th { white-space: nowrap; }
.op-avi-falta { color: #B5651D; font-weight: 700; font-size: 11px; }
.op-rmultrow td { background: var(--surface-2); border-bottom: 2px solid var(--line); padding: 4px 6px; }
.op-rmult-lab { text-align: right; font-size: 10.5px; font-weight: 800; color: var(--text-soft); text-transform: uppercase; letter-spacing: .3px; padding-right: 8px; }
.op-rmult { max-width: 54px; text-align: center; display: inline-block; }
.op-rcomp { font-weight: 800; color: var(--chocolate); font-size: 15px; }
.op-erowtot { font-weight: 800; color: var(--chocolate); text-align: center; }
.op-egtot { font-weight: 800; font-size: 15px; color: var(--ok); text-align: center; }
.op-redit { white-space: nowrap; }

/* ── FICHA DE CORTE (o formulário É a ficha) ──────────────────────────────
   A .opf é uma FOLHA de papel: cores fixas de propósito (não usa tokens de tema),
   porque o que está na tela tem que ser igual ao que sai na impressora, no claro
   e no escuro. A paleta é a mesma do PDF (imprimirOp) e troca por tipo:
   CORTE = marrom · OFICINA = laranja — pra bater o olho na bancada e saber o destino do papel.  */
.opf { --opf-main: #6E3B1E; --opf-accent: #B5651D; }
.opf-ofic { --opf-main: #C2410C; --opf-accent: #EA580C; }
.op-fmodal { max-width: 980px; }
.op-fbody { background: var(--surface-2); padding: 14px; }
.opf { background: #fff; color: #2b2118; border-radius: 10px; padding: 20px 24px; max-width: 820px; margin: 0 auto;
  box-shadow: 0 2px 14px rgba(43,33,24,.14); font-size: 12px; line-height: 1.4; }
.opf .cmp-sub { color: #8a7663; }
.opf-top { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid var(--opf-main); padding-bottom: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.opf-logo { height: 44px; }
.opf-t1 { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 24px; color: var(--opf-main); line-height: 1; }
.opf-t2 { font-size: 10.5px; letter-spacing: 3px; color: var(--opf-accent); text-transform: uppercase; font-weight: 700; margin-top: 3px; }
.opf-stats { margin-left: auto; display: flex; gap: 10px; }
.opf-stat { text-align: center; border: 2px solid var(--opf-main); border-radius: 10px; padding: 6px 12px; min-width: 92px; background: #fff; }
.opf-stat-nome { min-width: 152px; }
.opf-stat-vol { border-color: var(--opf-accent); }
.opf-sn { font-size: 30px; font-weight: 800; color: var(--opf-accent); line-height: 1.05; }
.opf-sl { font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #a18b78; margin-top: 4px; font-weight: 700; }
.opf-num { font: inherit; font-size: 34px; font-weight: 800; color: var(--opf-main); text-align: center; line-height: 1.05;
  width: 100%; border: none; background: transparent; padding: 0; border-bottom: 2px dashed #e0d2c0; border-radius: 0; }
.opf-num::placeholder { color: #ddd0be; }
.opf-num:focus { outline: none; border-bottom-color: var(--opf-accent); background: #fdf8f1; }
.opf-idrow { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 10px; }
.opf-foto { flex: none; }
.opf-foto img { width: 118px; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid #e7ddd0; display: block; }
.opf-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 18px; }
.opf-ri { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px dotted #d8cfc4; padding: 4px 0; min-width: 0; }
.opf-ri > span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .5px; color: #a18b78; font-weight: 700; }
.opf-ri > b { font-size: 13px; color: #2b2118; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opf-ri-ed { border-bottom: 1px solid #e6d3bd; }
.opf-in { font: inherit; font-size: 13px; color: #2b2118; width: 100%; max-width: 100%; border: none; background: #fdf8f1;
  border-radius: 4px; padding: 3px 6px; }
.opf-in::placeholder { color: #c3b3a1; font-size: 11.5px; }
.opf-in:focus { outline: 2px solid var(--opf-accent); outline-offset: -1px; background: #fff; }
.opf-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--opf-main); font-weight: 800;
  margin: 14px 0 6px; border-bottom: 1px solid #e7ddd0; padding-bottom: 3px; }
.opf-dica { font-size: 11px; color: #8a7663; line-height: 1.45; margin-bottom: 8px; }
.opf-dica b { color: var(--opf-main); }
.opf-gwrap { overflow-x: auto; }
.opf-grade { width: 100%; border-collapse: collapse; min-width: 560px; }
.opf-grade th { background: var(--opf-main); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 6px 4px; text-align: center; }
.opf-grade th.opf-cor, .opf-grade td.opf-cor { text-align: left; padding-left: 10px; min-width: 108px; }
.opf-grade td { border: 1px solid #e7ddd0; text-align: center; padding: 4px; vertical-align: top; }
.opf-grade td.opf-cor { font-weight: 700; font-size: 13px; color: #2b2118; vertical-align: middle; }
.opf-cel { min-width: 62px; }
.opf-folhas, .opf-multin { max-width: 58px; text-align: center; display: inline-block; }
.opf .op-rcomp { font-weight: 800; color: var(--opf-main); font-size: 15px; }
.opf .op-rref { font-size: 9px; line-height: 1.2; color: #a18b78; margin-top: 2px; white-space: nowrap; }
.opf .op-rfalta { color: #2e7d32; font-weight: 700; }
.opf-multrow td { background: #faf6f0; border-bottom: 2px solid #d8cfc4; }
.opf-mult-lab { text-align: right !important; font-size: 9.5px; font-weight: 800; color: #a18b78; text-transform: uppercase;
  letter-spacing: .3px; padding-right: 8px !important; vertical-align: middle !important; }
.opf-rowtot { font-weight: 800; color: var(--opf-main); background: #faf6f0; font-size: 14px; vertical-align: middle !important; }
.opf-grade tfoot td { background: #f0e7da; font-weight: 800; border-color: #d8cfc4; }
.opf-ftot-lab { text-align: right !important; text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; color: var(--opf-main); }
/* precisa vencer o `tfoot td` acima (mais específico), senão o total sai branco no bege = ilegível */
.opf-grade tfoot td.opf-gtot { color: #fff; background: var(--opf-accent); font-size: 15px; }
/* tamanho que este produto não usa: célula apagada, sem o ruído do "falta 0" */
.opf-cel-off .op-rcomp { color: #cdbfae !important; font-weight: 600; }
.opf-cel-off .op-rref { color: #d8cfc4; }
/* ...mas se cair quantidade num tamanho não pedido, ela ACENDE — some da vista seria pior,
   porque esse número é gravado no banco e sai impresso no papel do cortador */
/* rodapé da ficha: PEDIDO ORIGINAL + FOTO lado a lado (como na ficha de papel da fábrica) */
.opf-pedido { display: flex; gap: 20px; align-items: flex-start; margin-top: 16px;
  border-top: 1px dashed #d8cfc4; padding-top: 12px; }
.opf-pedcol { flex: 1; min-width: 0; }
.opf-pedcol .opf-h { margin-top: 0; }
.opf-pedfoto { flex: none; width: 172px; }
.opf-pedfoto img { width: 172px; height: 218px; object-fit: cover; border-radius: 8px; border: 1px solid #e7ddd0; display: block; }
.opf-semfoto { font-size: 10.5px; color: #a18b78; background: #faf6f0; border: 1px dashed #d8cfc4;
  border-radius: 8px; padding: 22px 8px; text-align: center; line-height: 1.4; }
/* pedido original: TABELA cor × tamanho, igual à do papel (lista vazava com grade grande) */
.opf-pedtab { min-width: 320px; }
.opf-pedtab td { padding: 3px 4px; vertical-align: middle; }
.opf-pedtab .opf-cor { min-width: 90px; }
.opf-pedtot { margin-top: 6px; font-size: 11.5px; color: #8a7663; }
.opf-pedtot b { color: var(--opf-main); font-size: 13px; }
@media (max-width: 760px) { .opf-pedido { flex-direction: column; } }
/* OFICINA: nº do romaneio é automático (<nº OP>-<lote>) — mostra a previsão, não é campo */
.opf-num-auto { border-bottom-color: transparent; opacity: .85; }
/* OFICINA: a quantidade é digitada direto (folha é assunto do corte) */
.opf-q { max-width: 62px; text-align: center; display: inline-block; font-weight: 700; }
/* campo calculado (custo total) — parece dado, não campo */
.opf-ri-calc > b { color: var(--opf-main); font-weight: 800; }
/* bloco "Aviamentos a enviar" da ficha de oficina */
.opf-avi { min-width: 420px; }
.opf-avi td { vertical-align: middle; }
.opf select.opf-in { cursor: pointer; }
.opf-cel-alerta { background: #fdf2f0; }
.opf-cel-alerta .op-rcomp { color: #c0392b !important; font-weight: 800; }
.opf-cel-alerta .op-rref { color: #c0392b; font-weight: 700; }
.opf-obs { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; }
.opf-obs > span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .5px; color: #a18b78; font-weight: 700; }
.opf-obs textarea { resize: vertical; }
.opf-sign { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; margin-top: 26px; }
.opf-sign div { border-top: 1px solid #2b2118; padding-top: 4px; text-align: center; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .5px; color: #a18b78; font-weight: 700; }
.opf .op-rzerado { background: #f6f9f4; color: #2e7d32; border-color: #2e7d32; }
.op-rfootsaldo { font-size: 12.5px; color: var(--text-soft); }
.op-rfootsaldo b { color: var(--text); }
@media (max-width: 760px) {
  .opf { padding: 14px; }
  .opf-grid { grid-template-columns: 1fr 1fr; }
  .opf-foto { display: none; }
  .opf-stats { width: 100%; margin-left: 0; }
}

/* Conferência de Estoque (Controle de Estoque) */
.rup-end { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.rup-conf-ok { font-size: 11.5px; color: var(--ok); font-weight: 700; white-space: nowrap; }
.rup-conf-btn { background: var(--chocolate); color: #fff; border: none; border-radius: 9px; padding: 7px 14px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.rup-conf-btn:hover { filter: brightness(1.07); }
.rup-conf-btn:disabled { opacity: .6; cursor: default; }
.rup-tag-conf { background: var(--chocolate); color: #fff; border-color: transparent; cursor: pointer; }
.rup-tag-conf:hover { filter: brightness(1.12); }
.rup-sel { cursor: pointer; vertical-align: middle; }
.rup-rowsel > td { background: var(--surface-2) !important; }
/* sub-abas Controle de Estoque | Conferências */
.rup-subtabs { display: flex; gap: 6px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.rup-subtab { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-soft); background: none; border: none; border-bottom: 2.5px solid transparent; padding: 9px 14px; cursor: pointer; border-radius: 8px 8px 0 0; }
.rup-subtab:hover { color: var(--text); background: var(--surface-2); }
.rup-subtab.on { color: var(--chocolate); border-bottom-color: var(--chocolate); }
.rup-wrap-conf { padding: 4px 2px; }
/* Conferências (lista + detalhe) */
.conf-wrap { max-width: 1180px; }
.conf-intro h2 { font-size: 18px; margin: 0 0 4px; }
.conf-intro p { font-size: 13px; color: var(--text-soft); margin: 0 0 14px; max-width: 900px; }
.conf-prog { display: flex; align-items: center; gap: 8px; }
.conf-prog-bar { flex: 1; min-width: 80px; height: 7px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.conf-prog-bar span { display: block; height: 100%; background: var(--ok); border-radius: 5px; }
.conf-prog-tx { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; }
.conf-prog-big { margin: 8px 0 14px; }
.conf-dethead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.conf-dettit { font-size: 15px; }
.conf-detacoes { margin-left: auto; display: flex; gap: 6px; }
.conf-itbl .conf-ck { width: 40px; }
.conf-check { width: 18px; height: 18px; cursor: pointer; }
.conf-irow.on > td { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.conf-end { font-weight: 700; white-space: nowrap; }
.conf-i-n { color: var(--text-soft); width: 30px; }
.conf-itbl thead th.conf-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.conf-itbl thead th.conf-sortable:hover { color: var(--chocolate); }
.conf-itbl thead th.conf-sortable.on { color: var(--chocolate); }
/* Modal de escolha do PDF da conferência (todos × só não conferidos) */
.conf-ov { position: fixed; inset: 0; background: rgba(20,12,6,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.conf-modal { background: var(--surface); border-radius: 16px; padding: 22px; width: 92%; max-width: 420px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.conf-modal-h { font-size: 17px; font-weight: 800; color: var(--chocolate); margin-bottom: 6px; }
.conf-modal-p { font-size: 13px; color: var(--text-soft); margin-bottom: 14px; }
.conf-modal-btns { display: flex; flex-direction: column; gap: 10px; }
.conf-pdf-opt { justify-content: flex-start; text-align: left; padding: 12px 14px; font-size: 14px; }
.conf-pdf-opt[disabled] { opacity: .5; cursor: not-allowed; }
.conf-modal-acoes { display: flex; justify-content: flex-end; margin-top: 14px; }
.conf-del { font-size: 16px; }

@media (max-width: 680px) { .op-grid3 { grid-template-columns: 1fr; } }

/* coluna editável na Sugestão de Compra (humano ajusta antes de gerar o pedido) */
.sug-q { width: 78px; text-align: right; border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 7px; font: inherit; font-size: 13px; font-weight: 700; background: var(--surface); color: var(--text); }
.sug-q:focus { outline: none; border-color: var(--pumpkin); background: color-mix(in srgb, var(--pumpkin) 6%, var(--surface)); }
.sug-q::-webkit-outer-spin-button, .sug-q::-webkit-inner-spin-button { opacity: .4; }
/* OP: campo "puxar pedido" + botão criar OP no explode do pedido */
.op-pux-wrap { display: flex; gap: 6px; align-items: stretch; }
.op-pux-wrap .neg-in { flex: 1; min-width: 0; }
.op-pux { white-space: nowrap; border: 1px solid var(--pumpkin); background: color-mix(in srgb, var(--pumpkin) 10%, var(--surface)); color: var(--pumpkin); font: inherit; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 0 11px; cursor: pointer; }
.op-pux:hover { background: var(--pumpkin); color: #fff; }
.op-print { padding: 4px 8px !important; }
.ped-exp-acoes { margin-top: 12px; display: flex; }
.ped-criaop { background: var(--ok); border-color: var(--ok); color: #fff; }
.ped-criaop:hover { filter: brightness(1.07); color: #fff; border-color: var(--ok); }
/* pedido: linha clicável + expandido em 3 colunas (aviamento · tecido · OPs) */
.ped-row-clk { cursor: pointer; }
.ped-row-clk:hover > td { background: color-mix(in srgb, var(--pumpkin) 5%, transparent); }
.ped-row-on > td { background: color-mix(in srgb, var(--pumpkin) 10%, transparent); }
.ped-exp-caret { color: var(--muted); font-size: 11px; margin-left: 4px; }
.ped-exp-dica { font-size: 12px; color: var(--muted); padding: 8px 4px 0; }
.ped-exp3 { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 18px; align-items: start; }
.ped-exp-col { min-width: 0; }
.ped-exp-ops { border-left: 1px solid var(--line); padding-left: 16px; }
.ped-ops-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ped-op-item { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; transition: border-color .12s; background: var(--surface); }
.ped-op-item:hover { border-color: var(--pumpkin); }
.ped-op-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ped-op-badge { font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
@media (max-width: 900px) { .ped-exp3 { grid-template-columns: 1fr; } .ped-exp-ops { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 12px; } }

/* ============================================================
   RH · Triagem de Currículos por IA (.rht-*)
   ============================================================ */
.rht-wrap { padding: 4px 2px 40px; }
.rht-intro { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.rht-intro-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(246,152,97,.14); color: #F69861; }
.rht-intro-ic svg { width: 22px; height: 22px; }
.rht-intro > div:last-child { min-width: 0; flex: 1; }
.rht-intro h2 { margin: 0 0 2px; font-size: 19px; }
.rht-intro p { margin: 0; color: var(--muted, #888); font-size: 13px; max-width: 760px; }
.rht-disclaimer { display: flex; gap: 9px; align-items: flex-start; background: rgba(246,152,97,.08); border: 1px solid rgba(246,152,97,.30); color: var(--text, #333); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.rht-disclaimer svg { flex: 0 0 auto; width: 16px; height: 16px; color: #F69861; margin-top: 1px; }
.rht-err { display: flex; gap: 10px; align-items: flex-start; background: rgba(220,70,70,.08); border: 1px solid rgba(220,70,70,.3); border-radius: 10px; padding: 12px 14px; color: #c0392b; }
.rht-err svg { flex: 0 0 auto; width: 18px; height: 18px; color: #c0392b; margin-top: 1px; }
.rht-err-sub { font-size: 12px; opacity: .8; font-weight: 400; margin-top: 2px; }
.rht-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.rht-btn { background: #F69861; color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-weight: 700; font-size: 13px; cursor: pointer; transition: filter .12s; }
.rht-btn:hover { filter: brightness(.95); }
.rht-btn:disabled { opacity: .6; cursor: default; }
.rht-btn-ghost { background: transparent; color: var(--text, #444); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; font-weight: 600; font-size: 13px; cursor: pointer; }
.rht-btn-del { background: transparent; color: #c0392b; border: 1px solid rgba(192,57,43,.35); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap; }
.rht-btn-mini { background: transparent; border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 600; cursor: pointer; color: var(--text, #444); }
.rht-btn-mini:hover { border-color: #F69861; }
/* lista de triagens */
.rht-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.rht-tcard { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); padding: 13px 15px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.rht-tcard:hover { border-color: #F69861; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.rht-tcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.rht-tcard-top b { font-size: 14.5px; }
.rht-tcard-sub { font-size: 12px; color: var(--muted, #888); line-height: 1.45; min-height: 34px; }
.rht-tcard-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted, #999); margin-top: 9px; }
.rht-tag { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.rht-tag.ok { background: rgba(39,174,96,.14); color: #1e8b4d; }
.rht-tag.warn { background: rgba(246,152,97,.16); color: #c9722f; }
.rht-tag.off { background: var(--line); color: var(--muted, #888); }
.rht-empty { text-align: center; padding: 40px 20px; color: var(--muted, #999); border: 1px dashed var(--line); border-radius: 12px; }
.rht-empty svg { opacity: .4; margin-bottom: 8px; width: 56px; height: 56px; display: block; margin-left: auto; margin-right: auto; }
.rht-empty b { display: block; font-size: 15px; color: var(--text, #555); margin-bottom: 4px; }
.rht-empty p { margin: 0 auto; font-size: 13px; max-width: 420px; }
/* modal nova triagem */
.rht-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 1000; padding: 20px; }
.rht-modal { background: var(--surface, #fff); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: 0 12px 48px rgba(0,0,0,.2); }
.rht-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.rht-modal-head b { font-size: 16px; }
.rht-x { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--muted, #999); }
.rht-form-erro { background: rgba(220,70,70,.1); color: #c0392b; padding: 8px 18px; font-size: 12.5px; }
.rht-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.rht-f { display: flex; flex-direction: column; gap: 5px; }
.rht-f-l { font-size: 12.5px; font-weight: 600; color: var(--text, #444); }
.rht-f-h { font-size: 11px; color: var(--muted, #999); }
.rht-in { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--bg, #fff); color: var(--text, #222); box-sizing: border-box; }
.rht-in:focus { outline: none; border-color: #F69861; }
textarea.rht-in { resize: vertical; line-height: 1.5; }
.rht-modal-foot { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.rht-foot-r { display: flex; gap: 8px; }
/* detalhe */
.rht-voltar { background: none; border: none; color: var(--muted, #888); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0 0 10px; }
.rht-voltar:hover { color: #F69861; }
.rht-detalhe-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.rht-detalhe-head h2 { margin: 0 0 5px; font-size: 19px; }
.rht-vaga { font-size: 12.5px; color: var(--muted, #888); line-height: 1.5; white-space: pre-wrap; max-height: 84px; overflow: auto; max-width: 760px; padding: 8px 10px; background: var(--bg, #fafafa); border: 1px solid var(--line); border-radius: 8px; }
.rht-upload { display: flex; align-items: center; gap: 13px; border: 2px dashed var(--line); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .12s, background .12s; margin-bottom: 14px; }
.rht-upload:hover, .rht-upload.over { border-color: #F69861; background: rgba(246,152,97,.05); }
.rht-upload-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(246,152,97,.14); color: #F69861; }
.rht-upload b { font-size: 13.5px; }
.rht-upload-sub { font-size: 12px; color: var(--muted, #999); margin-top: 1px; }
.rht-upload-sub u { cursor: pointer; color: #F69861; }
.rht-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rht-progress.idle { flex-wrap: wrap; }
.rht-progress-bar { flex: 1; height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rht-progress-bar span { display: block; height: 100%; background: #F69861; transition: width .25s; }
.rht-progress-tx { font-size: 12px; font-weight: 600; color: var(--muted, #888); white-space: nowrap; }
/* ranking */
.rht-rank { display: flex; flex-direction: column; gap: 10px; }
.rht-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); overflow: hidden; }
.rht-card.pend { opacity: .85; }
.rht-card-main { display: flex; align-items: center; gap: 13px; padding: 12px 15px; }
.rht-pos { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--bg, #f2f2f2); display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--muted, #777); }
.rht-card:first-child .rht-pos { background: #F69861; color: #fff; }
.rht-score-wrap { flex: 0 0 auto; display: flex; align-items: baseline; gap: 2px; min-width: 58px; }
.rht-score { font-size: 26px; font-weight: 800; color: #F69861; line-height: 1; }
.rht-score-l { font-size: 11px; color: var(--muted, #aaa); }
.rht-card-id { flex: 1; min-width: 0; }
.rht-card-nome { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rht-card-resumo { font-size: 12.5px; color: var(--muted, #777); margin-top: 3px; line-height: 1.45; }
.rht-card-arq { font-size: 10.5px; color: var(--muted, #aaa); margin-top: 3px; }
.rht-card-acoes { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rht-link { background: none; border: none; color: #F69861; font-size: 12px; font-weight: 600; cursor: pointer; padding: 1px 2px; }
.rht-link.del { color: #c0392b; }
.rht-rec { font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.rht-rec-ok { background: rgba(39,174,96,.16); color: #1e8b4d; }
.rht-rec-warn { background: rgba(246,152,97,.16); color: #c9722f; }
.rht-rec-off { background: rgba(192,57,43,.12); color: #c0392b; }
.rht-conf { font-size: 10px; font-weight: 600; color: var(--muted, #999); }
.rht-conf-baixa { color: #c9722f; }
.rht-mini-st { font-size: 11.5px; color: #c9722f; font-weight: 600; }
.rht-mini-st.off { color: var(--muted, #999); }
.rht-mini-st.err { color: #c0392b; }
.rht-card-det { border-top: 1px solid var(--line); padding: 12px 15px; background: var(--bg, #fafafa); display: flex; flex-direction: column; gap: 8px; }
.rht-dim { border-left: 3px solid rgba(246,152,97,.4); padding-left: 9px; }
.rht-dim-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.rht-dim-top span { flex: 1; font-weight: 600; }
.rht-dim-top b { color: #F69861; }
.rht-dim-jus { font-size: 12px; color: var(--muted, #777); margin-top: 2px; line-height: 1.4; }
.rht-dim-ev { font-size: 11.5px; color: var(--muted, #999); font-style: italic; margin-top: 2px; }
.rht-reqs, .rht-alertas { font-size: 12px; color: var(--muted, #777); line-height: 1.4; }
.rht-alertas { color: #c9722f; }
@media (max-width: 760px) { .rht-card-main { flex-wrap: wrap; } .rht-card-acoes { flex-direction: row; width: 100%; justify-content: flex-end; } }
   RH · Correção de Ponto via Sólides (.cps-*) — reusa .rhc-* e .pto-*
   ============================================================ */
.cps-fase { font-size: 11px; font-weight: 700; color: #fff; background: #F69861; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.cps-aviso { display: flex; gap: 9px; align-items: flex-start; background: rgba(246,152,97,.08); border: 1px solid rgba(246,152,97,.30); color: var(--text, #333); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.cps-aviso svg { flex: 0 0 auto; width: 16px; height: 16px; color: #F69861; margin-top: 1px; }
.cps-off { display: flex; gap: 12px; align-items: flex-start; border: 1px dashed var(--line); border-radius: 12px; padding: 18px 20px; color: var(--muted, #888); }
.cps-off svg { flex: 0 0 auto; width: 22px; height: 22px; color: #F69861; opacity: .7; }
.cps-off b { color: var(--text, #444); font-size: 15px; }
.cps-off p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.cps-off code { background: var(--line); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.cps-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cps-f { font-size: 12.5px; color: var(--muted, #888); display: inline-flex; align-items: center; gap: 5px; }
.cps-f input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 13px; font-family: inherit; background: var(--bg, #fff); color: var(--text, #222); }
.cps-sep { flex: 1; }
.cps-falta { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.cps-falta-off { background: rgba(192,57,43,.12); color: #c0392b; }
.cps-falta-warn { background: rgba(246,152,97,.16); color: #c9722f; }
.cps-falta-ok { background: rgba(39,174,96,.14); color: #1e8b4d; }
.cps-just { font-size: 11.5px; color: #1e8b4d; }
.cps-pend { font-size: 11.5px; color: #c9722f; font-weight: 600; }
/* planilha de correção (2ª fatia): motivo por linha + registrar + saldo */
.cps-aviso-ok { border-color: rgba(30,139,77,.35); background: rgba(30,139,77,.07); }
.cps-motivo { font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); min-width: 150px; }
.cps-reg { font-size: 12px; font-weight: 700; padding: 5px 12px; border: none; border-radius: 8px; background: #F69861; color: #fff; cursor: pointer; }
.cps-reg:hover { filter: brightness(.96); }
.cps-reg:disabled { background: var(--line); color: var(--muted, #999); cursor: not-allowed; }
.cps-ok { font-size: 11.5px; font-weight: 700; color: #1e8b4d; }
.cps-enviando { font-size: 11.5px; color: var(--muted, #888); }
.cps-regerr { font-size: 11px; color: #c0392b; margin-top: 3px; }
.cps-mut { color: var(--muted, #bbb); }
.cps-row-done { opacity: .62; }
.rhc-kpi-alert .rhc-kpi-v { color: #c0392b; }

/* ============================================================
   RH · Vagas (.vg-*) — reusa .rhc-* e .rht-*
   ============================================================ */
.vg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.vg-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); padding: 14px 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.vg-card:hover { border-color: #F69861; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.vg-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.vg-card-top b { font-size: 15px; }
.vg-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted, #888); }
.vg-n { font-weight: 700; color: #F69861; }
.vg-fonte { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; background: var(--line); padding: 2px 8px; border-radius: 999px; }
.vg-st { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.vg-st-ok { background: rgba(39,174,96,.14); color: #1e8b4d; }
.vg-st-warn { background: rgba(246,152,97,.16); color: #c9722f; }
.vg-st-off { background: var(--line); color: var(--muted, #888); }
.vg-st-fill { background: rgba(27,74,71,.14); color: #1b4a47; }
/* Coluna "Top candidato (IA)" na lista de vagas (SwiszList) */
.vg-top1 { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid rgba(246,152,97,.4); background: rgba(246,152,97,.08); color: inherit; border-radius: 999px; padding: 3px 10px 3px 8px; cursor: pointer; font: inherit; font-size: 12.5px; transition: border-color .12s, background .12s; }
.vg-top1:hover { border-color: #F69861; background: rgba(246,152,97,.16); }
.vg-top1-medal { flex: 0 0 auto; font-size: 13px; line-height: 1; }
.vg-top1-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.vg-top1-score { flex: 0 0 auto; font-weight: 800; color: #c9722f; }
.vg-analisar { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface, #fff); color: #c9722f; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; transition: border-color .12s, background .12s; }
.vg-analisar:hover { border-color: #F69861; background: rgba(246,152,97,.1); }
.vg-analisar.rodando { opacity: .75; cursor: progress; }
.vg-analisar:disabled { cursor: progress; }
.vg-top-none { color: var(--muted, #bbb); }
/* Coluna Ações da lista de vagas (analisar candidatos + landing page) */
.vg-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vg-lp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface, #fff); color: #1b4a47; border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; transition: border-color .12s, background .12s; }
.vg-lp:hover { border-color: #1b4a47; background: rgba(27,74,71,.08); }
.vg-lp.rodando, .vg-lp:disabled { opacity: .75; cursor: progress; }
.vg-lp-ok { display: inline-flex; align-items: center; gap: 4px; }
.vg-lp-link { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(27,74,71,.35); background: rgba(27,74,71,.08); color: #1b4a47; border-radius: 999px; padding: 4px 11px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vg-lp-link:hover { border-color: #1b4a47; }
.vg-lp-mini { border: 1px solid var(--line); background: var(--surface, #fff); color: var(--text-soft); border-radius: 7px; padding: 3px 7px; cursor: pointer; font: inherit; font-size: 11.5px; line-height: 1; }
.vg-lp-mini:hover { border-color: #1b4a47; color: #1b4a47; }
.vg-fech { font-size: 12.5px; }
.vg-aberta-dias { font-size: 11px; font-weight: 700; background: rgba(246,152,97,.16); color: #c9722f; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
/* Modal Top 5 da vaga */
.rhc-modal.vg-top5 { max-width: 640px; width: 94vw; }
.vg-t5-vaga { font-weight: 800; font-size: 15px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.vg-t5-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.vg-t5-row:last-child { border-bottom: 0; }
.vg-t5-pos { flex: 0 0 auto; font-weight: 800; color: var(--muted, #999); width: 26px; text-align: center; font-size: 13px; padding-top: 3px; }
.vg-t5-score { flex: 0 0 auto; font-weight: 800; font-size: 20px; color: #c9722f; width: 54px; text-align: center; line-height: 1; }
.vg-t5-score span { display: block; font-size: 10px; font-weight: 600; color: var(--muted, #999); }
.vg-t5-main { flex: 1 1 auto; min-width: 0; }
.vg-t5-nome { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.vg-t5-resumo { font-size: 12.5px; line-height: 1.45; color: var(--text, #333); margin-bottom: 6px; }
.vg-t5-dims { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.vg-t5-dim { font-size: 11px; background: var(--line); border-radius: 999px; padding: 2px 9px; color: var(--muted, #777); }
.vg-t5-dim b { color: #c9722f; }
.vg-t5-acoes { margin-top: 2px; }
/* Funil de recrutamento: vaga preenchida + etapa do candidato */
.vg-fechada { display: flex; align-items: center; gap: 10px; background: rgba(27,74,71,.08); border: 1px solid rgba(27,74,71,.18); color: #1b4a47; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; line-height: 1.4; margin: 0 0 14px; }
.vg-fechada svg { flex: 0 0 auto; width: 18px; height: 18px; }
.vg-etapa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 15px; border-top: 1px solid var(--line); background: var(--bg, #fafafa); }
.vg-etapa-l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #999); }
.vg-etapa-sel { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface, #fff); color: var(--text, #444); cursor: pointer; }
.vg-contratar-btn { border-color: rgba(39,174,96,.5); color: #1e8b4d; }
.vg-contratar-btn:hover { border-color: #1e8b4d; background: rgba(39,174,96,.08); }
.vg-et { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.vg-et-ok { background: rgba(39,174,96,.14); color: #1e8b4d; }
/* Form builder (ficha de inscrição da vaga) */
.fb-modal { width: 780px; max-width: 100%; }
.fb-linkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--bg, #fafafa); border-bottom: 1px solid var(--line); }
.fb-link-l { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #999); }
.fb-link { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: #1b4a47; }
.fb-link-note { font-size: 11.5px; color: var(--muted, #999); }
.fb-msg { margin: 10px 16px 0; background: rgba(39,174,96,.1); color: #1e8b4d; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.fb-list { display: flex; flex-direction: column; gap: 10px; }
.fb-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface, #fff); }
.fb-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-tipo { flex: 0 0 158px; }
.fb-label { flex: 1 1 200px; }
.fb-ob { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-soft, #555); white-space: nowrap; }
.fb-map { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: rgba(27,74,71,.12); color: #1b4a47; padding: 2px 7px; border-radius: 999px; }
.fb-ic { border: 1px solid var(--line); background: transparent; border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: 13px; color: var(--text-soft, #555); }
.fb-ic:hover { border-color: #F69861; }
.fb-del:hover { border-color: #e25b5b; color: #e25b5b; }
.fb-row-opc { margin-top: 8px; }
.fb-add { margin-top: 12px; }
.fb-hint { font-size: 11.5px; line-height: 1.45; color: var(--muted, #888); margin-top: 12px; }
.fb-vazio { color: var(--muted, #999); font-size: 13px; padding: 16px; text-align: center; }
.fb-foot-sp { flex: 1; }
.fb-preview { border: 1px dashed var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg, #fafafa); }
.fb-pv-head { font-size: 17px; font-weight: 700; }
.fb-pv-f { display: flex; flex-direction: column; gap: 5px; }
.fb-pv-l { font-size: 12.5px; font-weight: 600; }
.fb-req { color: #e25b5b; }
.fb-pv-opts { display: flex; flex-direction: column; gap: 4px; }
.fb-pv-opt, .fb-pv-consent { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.fb-pv-file { border: 1px dashed var(--line); border-radius: 8px; padding: 10px; color: var(--muted, #888); font-size: 13px; }
.fb-pv-btn { align-self: flex-start; opacity: .7; }
/* Candidatura via formulário público */
.vg-orig { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: rgba(226,113,39,.14); color: #c9722f; padding: 2px 7px; border-radius: 999px; }
.vg-cvhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vg-cvpdf { text-decoration: none; }
.vg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin: 4px 0 14px; }
.vg-head h2 { margin: 0 0 5px; font-size: 19px; }
.vg-head-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.vg-sub { font-size: 12.5px; color: var(--muted, #888); display: flex; align-items: center; gap: 7px; }
.vg-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.vg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.vg-tag { font-size: 11px; font-weight: 600; color: var(--text-soft, #555); background: var(--line); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.rhc-f-full { grid-column: 1 / -1; }
/* Flyer da vaga (composer) */
.fly-modal { width: 1000px; max-width: 100%; }
.fly-body { display: flex; gap: 24px; padding: 20px; flex-wrap: wrap; align-items: flex-start; }
.fly-canvas-wrap { flex: 0 0 auto; }
#flyCanvas { width: 432px; height: auto; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); display: block; background: #0e272b; }
.fly-side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.fly-msg { font-size: 12.5px; color: var(--text-soft, #555); background: var(--line); border-radius: 8px; padding: 8px 10px; }
.fly-foot { display: flex; gap: 10px; margin-top: 4px; }
.fly-hint { font-size: 11.5px; color: var(--muted, #888); line-height: 1.4; }
.vg-cv { font-size: 11.5px; color: #1e8b4d; }
.vg-nocv { font-size: 11.5px; color: var(--muted, #aaa); }
.vg-link { background: none; border: none; color: #F69861; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.vg-row { cursor: pointer; }
.vg-cvhead h2 { margin: 4px 0 10px; font-size: 18px; }
.vg-cvbox { white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: var(--text, #333); background: var(--bg, #fafafa); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; max-width: 820px; }
/* ============================================================
   RH · Engenharia de Cargos (.crg-*) — reusa .rhc-* e .rht-*
   ============================================================ */
.crg-grupo { margin-bottom: 18px; }
.crg-grupo-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #999); margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.crg-grupo-h span { background: var(--line); color: var(--muted, #888); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.crg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.crg-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); padding: 12px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.crg-card:hover { border-color: #F69861; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.crg-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.crg-card-h b { font-size: 14px; }
.crg-nivel { font-size: 10.5px; color: var(--muted, #999); white-space: nowrap; }
.crg-card-disc { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crg-disc { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(246,152,97,.16); color: #c9722f; }
.crg-disc.alt { background: var(--line); color: var(--muted, #888); font-weight: 600; }
.crg-card-missao { font-size: 12px; color: var(--muted, #777); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crg-card-foot { font-size: 10.5px; color: var(--muted, #aaa); margin-top: 7px; }
.crg-ficha-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin: 4px 0 14px; }
.crg-ficha-h h2 { margin: 0 0 5px; font-size: 20px; }
.crg-ficha-sub { font-size: 12.5px; color: var(--muted, #888); }
.crg-ficha-disc { font-size: 12.5px; margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crg-missao { font-size: 14px; line-height: 1.5; color: var(--text, #444); background: var(--bg, #fafafa); border-left: 3px solid #F69861; border-radius: 0 8px 8px 0; padding: 12px 14px; margin-bottom: 16px; }
.crg-sec { margin-bottom: 16px; }
.crg-sec h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #999); margin: 0 0 7px; }
.crg-sec ul { margin: 0; padding-left: 18px; }
.crg-sec li { font-size: 13px; line-height: 1.6; color: var(--text, #444); }
.crg-sec p { font-size: 13px; line-height: 1.55; color: var(--text, #444); margin: 0; }
.crg-formwrap { max-width: 760px; }
.crg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.crg-form-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .crg-form-grid { grid-template-columns: 1fr; } }
.vg-desc { border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); padding: 12px 14px; margin-bottom: 14px; }
.vg-desc-h { font-size: 13px; margin-bottom: 8px; }
.vg-desc-hint { font-size: 11.5px; color: var(--muted, #999); font-weight: 400; }
.vg-desc-msg { font-size: 11.5px; color: #1e8b4d; margin-left: 6px; }
.vg-desc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.vg-rank { display: flex; flex-direction: column; gap: 10px; }

/* os 4 pontos do dia (entrada/almoço/volta/saída) — o que faltou em destaque */
.cps-pontos { display: flex; gap: 6px; flex-wrap: wrap; }
.cps-pt { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); }
.cps-pt-t { font-size: 9.5px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted, #999); white-space: nowrap; }
.cps-pt-h { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text, #333); }
.cps-pt-falta { border-color: #e0a44a; background: rgba(246,152,97,.12); }
.cps-pt-falta .cps-pt-h { color: #c0392b; font-size: 11px; font-weight: 700; }
.cps-pt-falta .cps-pt-t { color: #c9722f; }
.cps-pt-in { margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; border: 1px solid #e0a44a; border-radius: 5px; padding: 1px 4px; width: 78px; background: #fff; color: #c0392b; font-weight: 700; }
.cps-pt-in:focus { outline: none; border-color: #F69861; }
/* editor de ponto: input de horário em pontos PRESENTes (não-faltou) fica neutro; ✕ excluir; arrastar */
.cps-pt:not(.cps-pt-falta) .cps-pt-in { border-color: var(--line); color: var(--text, #333); font-weight: 600; }
.cps-pt { position: relative; cursor: grab; }
.cps-pt[draggable="true"]:active { cursor: grabbing; }
.cps-pt-x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; line-height: 16px; text-align: center; font-size: 11px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #c0392b; cursor: pointer; padding: 0; }
.cps-pt-x:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.cps-pt-x.on { background: #c0392b; color: #fff; }
.cps-pt-del { opacity: .5; border-style: dashed !important; }
.cps-pt-del .cps-pt-in { text-decoration: line-through; }
.cps-pt-drag { opacity: .45; }
.cps-pt-over { outline: 2px dashed #F69861; outline-offset: 1px; }
/* editor cronológico (sem arrastar): batida nova, botão adicionar, dicas, abas e badges */
.cps-pt { cursor: default; }
.cps-pt-novo { border-color: #3a9; border-style: dashed; background: rgba(51,170,153,.10); }
.cps-pt-novo .cps-pt-t { color: #1c7d70; }
.cps-pt-novo .cps-pt-in { border-color: #3a9; color: #1c7d70; }
.cps-pt-add { align-self: center; border: 1px dashed var(--line-2, #cbb); background: transparent; color: var(--chocolate, #7a4d2b); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cps-pt-add:hover { border-color: #3a9; color: #1c7d70; background: rgba(51,170,153,.07); }
.cps-hint { margin-top: 6px; font-size: 11.5px; color: var(--muted, #888); line-height: 1.4; }
.cps-hint b { color: var(--text, #333); }
.cps-hint-ok { color: #1c7d70; }
.cps-hint-falta { display: flex; align-items: flex-start; gap: 6px; color: #c0392b; background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.25); border-radius: 8px; padding: 6px 9px; }
.cps-hint-falta svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.cps-hint-falta b { color: #a32; }
.cps-badge-falta { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.cps-tabs { display: flex; gap: 4px; margin: 10px 0 4px; border-bottom: 1px solid var(--line, #eee); }
.cps-tab { border: none; background: transparent; color: var(--muted, #888); font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cps-tab:hover { color: var(--chocolate, #7a4d2b); }
.cps-tab.on { color: var(--chocolate, #7a4d2b); border-bottom-color: var(--pumpkin, #F69861); }
.cps-ab { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.cps-ab-add { color: #1c7d70; background: rgba(51,170,153,.14); }
.cps-ab-mod { color: #2563a8; background: rgba(37,99,168,.12); }
.cps-ab-del { color: #c0392b; background: rgba(192,57,43,.10); }

/* ── Operacao — Pedidos de Venda (opv-*) ──────────────────────────────── */
.opv-wrap { display: flex; flex-direction: column; gap: 4px; }
.opv-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.opv-titulo-n { font-size: 12.5px; }
.opv-col-wrap { position: relative; }
.rup-btn-cols { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.rup-btn-cols:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.rup-pop-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 2px 8px 6px; }
.opv-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.opv-chips-sep { color: var(--line-2); user-select: none; }
.opv-chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 20px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: border-color .15s; }
.opv-chip:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.opv-chip.opv-chip-on { background: var(--chocolate); border-color: var(--chocolate); color: #fff; }
.opv-chip-n { font-size: 10.5px; opacity: .75; }
.opv-chip-clear { color: var(--danger); border-color: transparent; background: rgba(192,57,43,.07); }
.opv-chip-clear:hover { background: rgba(192,57,43,.14); border-color: transparent; color: var(--danger); }
.opv-tablewrap { overflow-x: auto; }
.opv-table { min-width: 640px; }
.opv-table thead th { white-space: nowrap; }
.opv-table th.rup-th-drag { cursor: grab; }
.opv-table th.rup-th-drag:active { cursor: grabbing; }
.opv-table th.rup-th-dragging { opacity: .45; }
.opv-table th.rup-th-over { box-shadow: inset 3px 0 0 var(--chocolate); }
.opv-table th.sorted-desc .rup-sort { opacity: .7; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.opv-table th.sorted-asc .rup-sort { opacity: .7; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.opv-row { cursor: pointer; }
.opv-row:hover td { background: var(--hover-row, rgba(37,85,97,.05)); }
.opv-num { font-family: monospace; font-size: 12.5px; }
.opv-canal { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--text); }
.opv-origem { font-size: 11px; color: var(--muted); }
.opv-itens-res { font-size: 13px; }
.opv-mais { display: inline-block; background: var(--line-2); color: var(--muted); border-radius: 10px; padding: 0 5px; font-size: 11px; margin-left: 3px; }
.opv-st { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.opv-st-ok      { background: rgba(29,140,100,.1); color: #1a7a59; }
.opv-st-warn    { background: rgba(246,152,97,.15); color: #b35a0a; }
.opv-st-danger  { background: rgba(192,57,43,.1); color: #c0392b; }
.opv-st-neutro  { background: var(--surface-2); color: var(--text-soft); }
/* Modal de detalhe */
.opv-det-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .opv-det-grid { grid-template-columns: 1fr; } }
.opv-det-col { display: flex; flex-direction: column; gap: 4px; }
.opv-det-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.opv-det-row { display: flex; flex-direction: column; gap: 1px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.opv-det-row:last-child { border-bottom: 0; }
.opv-det-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.opv-det-v { font-size: 13px; color: var(--text); word-break: break-word; }
.opv-det-itens { margin-top: 6px; }
.opv-det-coms { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.opv-det-com { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text-soft); }
.opv-warn { background: rgba(246,152,97,.12); border: 1px solid #F69861; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #8a4800; margin-bottom: 6px; }
/* Banner de pedidos: overflow visible para o texto nao ser cortado.
   A lemniscata fica dentro do clip do proprio banner (overflow hidden so no pai generico);
   aqui usamos clip-path no pseudo-elemento para conter a watermark sem cortar o texto. */
.rup-explica.opv-intro { overflow: visible; }
.rup-explica.opv-intro::after { clip-path: inset(0); overflow: hidden; }
/* Filtro popover (opv-fil-pop) — mesmo padrao do popover de colunas (rup-pop) */
.opv-fil-wrap { position: relative; }
.opv-fil-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 12px 14px 10px; min-width: 260px; max-width: 340px;
  box-shadow: 0 4px 18px rgba(0,0,0,.13);
}
.opv-fil-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; padding: 8px 0 5px; border-bottom: 1px solid var(--line);
  margin-bottom: 6px; }
.opv-fil-sec:first-child { padding-top: 0; }
.opv-fil-list { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow-y: auto; margin-bottom: 4px; }
.opv-fil-item { display: flex; align-items: center; gap: 7px; padding: 4px 2px; border-radius: 6px; cursor: pointer; }
.opv-fil-item:hover { background: var(--hover-row, rgba(37,85,97,.05)); }
.opv-fil-item input[type=checkbox] { accent-color: var(--chocolate); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.opv-fil-item span { font-size: 13px; color: var(--text); flex: 1; }
.opv-fil-item .opv-chip-n { margin-left: auto; }
.opv-fil-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.opv-fil-datas label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.opv-fil-datas input[type=date] { border: 1px solid var(--line-2); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text); }
.opv-fil-datas input[type=date]:focus { outline: none; border-color: var(--chocolate); }
.opv-fil-foot { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.opv-fil-apply { flex: 1; background: var(--chocolate); color: #fff; border: none; border-radius: 8px; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.opv-fil-apply:hover { opacity: .88; }
.opv-fil-clear { background: transparent; color: var(--danger); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.opv-fil-clear:hover { border-color: var(--danger); background: rgba(192,57,43,.06); }
.rup-btn-fil { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-soft); border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.rup-btn-fil:hover { border-color: var(--pumpkin); color: var(--chocolate); }
.rup-btn-fil.opv-fil-ativo { border-color: var(--chocolate); color: var(--chocolate); background: rgba(143,83,50,.07); font-weight: 700; }

/* ── Marketing: Influenciadores e Afiliados ─────────────────── */
/* Badge base (display) — badge-ok/warn/info/neutral/off dao a cor */
.mkt-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .75em; font-weight: 600; line-height: 1.4; white-space: nowrap; }
/* Classes de cor de status (usadas por mkt-badge + potencialmente outros) */
.badge-ok      { background: #27ae6022; color: #27ae60; border: 1px solid #27ae6040; }
.badge-warn    { background: #f0a50022; color: #c07000; border: 1px solid #f0a50040; }
.badge-info    { background: #2980b922; color: #2980b9; border: 1px solid #2980b940; }
.badge-neutral { background: #88888822; color: #666;    border: 1px solid #88888840; }
.badge-off     { background: #c0392b11; color: #c0392b; border: 1px solid #c0392b30; }
/* Coluna sortavel — affordance de cursor */
.mkt-sortable { cursor: pointer; user-select: none; }
.mkt-sortable:hover { color: var(--text, #111); }
/* Botao adicionar (cor verde-ok, diferente do neutro rup-fbtn) */
.mkt-fbtn-add { color: var(--ok, #27ae60) !important; border-color: #BFE6E0 !important; background: #ECFDF5 !important; }
.mkt-fbtn-add:hover { background: #DCF6F0 !important; }
/* Botoes de acao de linha (icone sem borda) */
.mkt-btn-icn { background: none; border: none; font-size: 14px; cursor: pointer; padding: 3px 6px; border-radius: 5px; color: var(--text-soft, #555); transition: background .12s, color .12s; }
.mkt-btn-icn:hover { background: var(--bg, #f4f4f4); color: var(--text, #222); }
.mkt-btn-soft { color: #f0a500 !important; }
.mkt-btn-del  { color: #c0392b !important; }
/* Campo de busca proprio da aba (diferente da busca global do topbar) */
.mkt-search { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-family: inherit; background: var(--surface, #fff); color: var(--text, #222); min-width: 200px; }
.mkt-search:focus { outline: none; border-color: var(--ok, #27ae60); box-shadow: 0 0 0 2px rgba(39,174,96,.12); }
/* Misc */
.mkt-empty { text-align: center; padding: 64px 24px; color: var(--muted, #999); }
.mkt-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.mkt-empty h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text, #222); }
.mkt-empty p { margin-bottom: 20px; }
.mkt-empty-cell { text-align: center; padding: 32px; color: var(--muted, #999); }
.mkt-handle { color: #E1306C; font-size: .85em; }
.mkt-badge-plat { color: #fff !important; font-size: .75em; }
.mkt-contato-email { font-size: .82em; display: block; }
.mkt-contato-cel { font-size: .82em; color: var(--muted, #888); }
.mkt-acts { white-space: nowrap; }
.mkt-doc-mask { font-family: monospace; letter-spacing: .03em; }
.mkt-cupom { font-family: monospace; background: #f4f4f4; padding: 1px 6px; border-radius: 4px; font-size: .85em; }
/* Banner read-only */
.mkt-banner-ro { background: #fff8e1; color: #7a5f00; padding: 8px 16px; border-radius: 6px; margin-bottom: 12px; font-size: .88rem; border: 1px solid #ffe082; }
/* Modal */
.mkt-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.mkt-modal { background: #fff; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); min-width: 540px; max-width: 700px; width: 95vw; max-height: 90vh; overflow-y: auto; }
.mkt-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 10px; border-bottom: 1px solid #eee; }
.mkt-modal-header h3 { margin: 0; font-size: 1.1rem; }
.mkt-modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #888; line-height: 1; }
.mkt-modal-body { padding: 18px 22px; }
.mkt-form-row { display: flex; gap: 14px; margin-bottom: 12px; }
.mkt-form-row label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: #555; }
.mkt-form-row input, .mkt-form-row select, .mkt-form-row textarea { border: 1px solid #ddd; border-radius: 6px; padding: 7px 10px; font-size: .92rem; font-family: inherit; }
.mkt-form-full { flex-direction: column; }
.mkt-form-full label { width: 100%; }
.mkt-req { color: #c0392b; }
.mkt-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee; }

/* Afiliados — dropdown de período (dados Shopee AMS mesclados na aba) + avisos de fonte parcial */
.mkt-period-select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text); cursor: pointer; }
.mkt-fonte-aviso { font-size: 11.5px; color: var(--muted); margin: 2px 0 0 2px; }

/* SKU filho na lista do pedido (a ficha de papel lista "MACA111-9 - VINHO - P 150") */
.opf-skuf { font-style: normal; font-weight: 800; color: var(--opf-main); font-size: 11px; }