/* =============================================================================
   NUTRALOV ADS · WORKFLOW DE EDITORES (12/set/2026)
   ─────────────────────────────────────────────────────────────────────────────
   Tudo que é NOVO do fluxo com 2 editores (Pierre/Rodrigo) mora aqui, carregado
   DEPOIS do styles.css. Regra de leitura das cores (Rafa 12/set):
     sólido  = pessoa/ação   (chip do editor, "Puxar pra mim", Urgente)
     suave   = estado/produto (status, chips de oferta, Prioridade)
     contorno = neutro        (urgência Normal)
   Nenhuma tag repete cor de outra — tabela §10 da spec é a verdade.
   `--ed` = cor do editor (vem inline no elemento ou num ancestral, ex.: .card).
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   CHIP DO EDITOR · sólido, com <i> de iniciais em círculo
   <span class="tag-editor" style="--ed:#115E59" title="Pierre"><i>PI</i>Pierre</span>
   ═════════════════════════════════════════════════════════════════════════ */
.tag-editor {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 3px;
  border-radius: var(--r-full);
  background: var(--ed, #0891B2);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-editor > i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  flex-shrink: 0;
}
/* Compacto (linhas de Editados): só as iniciais, o nome vai no title */
.tag-editor.is-compact {
  padding: 0;
  gap: 0;
  width: 22px; height: 22px;
  justify-content: center;
  font-size: 0; /* esconde o nome sem mexer no HTML */
}
.tag-editor.is-compact > i {
  width: auto; height: auto;
  background: transparent;
  font-size: 9.5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   URGÊNCIA · 3 níveis (1 = contorno neutro · 2 = laranja suave · 3 = vermelho SÓLIDO)
   O card só mostra 2 e 3; o nível 1 aparece no drawer/seletor.
   Vermelho sólido de propósito: o badge de correções já usa o vermelho suave.
   ═════════════════════════════════════════════════════════════════════════ */
.tag-urg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px; /* + borda 1px = mesma altura das pills vizinhas (21.4px) */
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}
.tag-urg.urg-1 { background: transparent; color: #334155; border-color: #CBD5E1; }
.tag-urg.urg-2 { background: #FFEDD5; color: #C2410C; }
.tag-urg.urg-3 { background: #DC2626; color: #FFFFFF; font-weight: 800; }

/* Faixa lateral no card (4px) · .card já é relative + overflow hidden */
.card.urg-2::before,
.card.urg-3::before,
.edited-row.urg-2::before,
.edited-row.urg-3::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  z-index: 2;
  pointer-events: none;
}
.card.urg-2::before, .edited-row.urg-2::before { background: #F97316; }
.card.urg-3::before, .edited-row.urg-3::before { background: #DC2626; }
/* .edited-row é grid sem position — precisa do relative pra faixa encostar na borda */
.edited-row.urg-2, .edited-row.urg-3 { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS "EM EDIÇÃO" · CONTORNO na cor do editor (card, edited-row e drawer).
   Diferencia por FORMA, não só por tom: a tinta suave repetia a família do chip
   Digestyn (Rodrigo) / WhatsApp (Pierre) no mesmo card — nenhum chip suave tem
   borda. Fundo branco; com color-mix, 8% da cor do editor.
   ═════════════════════════════════════════════════════════════════════════ */
.card-status.em_edicao {
  color: var(--ed, #0E7490);
  background: #fff;
  border: 1px solid var(--ed, #0891B2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
@supports (background: color-mix(in srgb, red 12%, white)) {
  .card-status.em_edicao {
    background: color-mix(in srgb, var(--ed, #0891B2) 8%, #fff);
    border-color: color-mix(in srgb, var(--ed, #0891B2) 45%, #fff);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINHA DE WORKFLOW NO CARD · abaixo do .card-footer
   editor  → <button class="card-claim-btn" data-claim="…">Puxar pra mim</button>
   admin/copy → <select class="card-assign"> + <select class="card-urg">
   ═════════════════════════════════════════════════════════════════════════ */
.card-workflow {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 10px;
}
.card-workflow:empty { display: none; }

/* "Puxar pra mim" · mesmo padrão do .card-submit-review, na cor do editor logado */
.card-claim-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 12px; padding: 9px 12px;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3;
  text-align: center;
  background: var(--ed, #0891B2); color: #FFFFFF;
  border: none; border-radius: var(--r-md); cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card-workflow > .card-claim-btn { margin-top: 0; }
.card-claim-btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); }
.card-claim-btn:active { transform: translateY(1px); }
.card-claim-btn:focus-visible { outline: 2px solid var(--ed, #0891B2); outline-offset: 2px; }
.card-claim-btn:disabled { opacity: .55; cursor: wait; filter: none; }
.card-claim-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Selects compactos (editor / urgência) · empilham no mobile */
.card-assign,
.card-urg,
.assign-select {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  padding: 4px 26px 4px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  background-color: var(--bg-elevated);
  /* chevron próprio · o nativo varia por SO e destoa do card */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.card-assign:hover, .card-urg:hover, .assign-select:hover { border-color: var(--ink-300); }
.card-assign:focus-visible, .card-urg:focus-visible, .assign-select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.card-assign:disabled, .card-urg:disabled, .assign-select:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 480px) {
  .card-workflow { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEÇÃO "EM EDIÇÃO" · dot + contador ciano (dot/contador, não é tag)
   ═════════════════════════════════════════════════════════════════════════ */
.dot-editing {
  background: #0891B2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.16);
}
#section-editing .section-count { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; }
#section-editing .empty-section {
  border-color: #A5F3FC;
  background: #F8FEFF;
  color: var(--ink-700);
}

/* Resumo de urgência no header (aparece fechado ou aberto) ·
   <span class="section-urg"><b class="urg-3">2 urgentes</b><b class="urg-2">1 prioridade</b></span>
   Também aceita a classe direto no badge (.section-urg.urg-3) quando só há um nível. */
.section-urg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}
.section-urg:empty { display: none; }
.section-urg > .urg-2, .section-urg > .urg-3,
.section-urg.urg-2, .section-urg.urg-3 {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 700; line-height: 1.4;
  padding: 2px 8px; border-radius: var(--r-full);
  white-space: nowrap; font-style: normal;
  font-variant-numeric: tabular-nums;
}
.section-urg > .urg-2, .section-urg.urg-2 { background: #FFEDD5; color: #C2410C; }
.section-urg > .urg-3, .section-urg.urg-3 { background: #DC2626; color: #FFFFFF; }

/* Divisor entre grupos de editor no grid (admin/copy vê Pierre (3) / Rodrigo (1)) ·
   <div class="grid-divider" style="--ed:#115E59"><i>PI</i>Pierre (3)</div> */
.grid-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 -8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ed, var(--ink-700));
  user-select: none;
}
.grid-divider > i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ed, var(--ink-700));
  color: #FFFFFF;
  flex-shrink: 0;
}
.grid-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.grid.grid-rows .grid-divider { margin: 0 0 -8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DRAWER · bloco de workflow no header (canto direito) + pills no #drawer-meta
   ═════════════════════════════════════════════════════════════════════════ */
.drawer-workflow {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.drawer-workflow:empty { display: none; }
/* campo rotulado dentro do bloco (opcional): <div class="wf-field"><span class="wf-label">Editor</span><select class="assign-select">…</select></div> */
.wf-field { display: flex; align-items: center; gap: 8px; }
.wf-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); white-space: normal; max-width: 190px; text-align: right; line-height: 1.3;
}
.drawer-workflow .assign-select { flex: 0 0 auto; min-width: 168px; }
.drawer-workflow .card-claim-btn { width: auto; margin-top: 0; padding: 8px 16px; border-radius: var(--r-full); }
/* O título do drawer pode encolher (senão o bloco da direita esmaga ele) */
.drawer-header > div:first-child { min-width: 0; }
/* Celular: o bloco de workflow desce pra linha de baixo e ocupa a largura toda */
@media (max-width: 640px) {
  .drawer-header { flex-wrap: wrap; }
  .drawer-header-right { flex-shrink: 1; width: 100%; align-items: flex-start; }
  .drawer-workflow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .wf-label { text-align: left; max-width: none; }
  .drawer-workflow .assign-select { min-width: 0; flex: 1 1 140px; }
}

/* Linha de Editados: a badge "Variação de ADxx · aguardando absorção" entra no
   .edited-row-head (flex, align center) — sem o margin/uppercase do card */
.edited-row-head .card-variation-badge { margin-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 11px; }

/* Segmented de urgência (Normal | Prioridade | Urgente) ·
   <div class="urg-seg" role="group"><button class="urg-seg-btn is-active" data-level="1">Normal</button>…</div> */
.urg-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.urg-seg-btn {
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-500);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.urg-seg-btn:hover { color: var(--ink-900); background: var(--bg-elevated); }
.urg-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.urg-seg-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ativo = cor do nível (mesmas da .tag-urg) */
.urg-seg-btn.is-active[data-level="1"] { background: var(--bg-elevated); color: #334155; border-color: #CBD5E1; box-shadow: var(--shadow-xs); }
.urg-seg-btn.is-active[data-level="2"] { background: #FFEDD5; color: #C2410C; }
.urg-seg-btn.is-active[data-level="3"] { background: #DC2626; color: #FFFFFF; font-weight: 700; }

/* .drawer-meta span impõe gap/peso nos filhos · as pills novas se sobrepõem */
.drawer-meta .tag-editor { gap: 5px; font-weight: 700; }
.drawer-meta .tag-urg { gap: 4px; font-weight: 700; }
.drawer-meta .tag-urg.urg-3 { font-weight: 800; }
.drawer-meta .card-status { gap: 5px; font-weight: 600; }
.drawer-meta .card-status svg { width: 11px; height: 11px; }

/* Aviso "só leitura" na aba Vídeo (editor olhando ad de outro) */
.video-readonly-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--ink-700);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
.video-readonly-note svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-500); }
.video-readonly-note .tag-editor { flex-shrink: 0; }

/* Radios de urgência no form "Solicitar variação" · em linha, mesma cara dos radios de tipo */
.variation-form .urg-radios {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-500);
}
.variation-form .urg-radios .variation-radio { color: #3F6212; }
.variation-form .urg-radios .variation-radio.urg-2 { color: #C2410C; }
.variation-form .urg-radios .variation-radio.urg-2 input { accent-color: #F97316; }
.variation-form .urg-radios .variation-radio.urg-3 { color: #DC2626; }
.variation-form .urg-radios .variation-radio.urg-3 input { accent-color: #DC2626; }

/* ═════════════════════════════════════════════════════════════════════════
   ORDEM DAS SEÇÕES · Rafa 13/set: pro editor, "Aguardando edição" vem ANTES de
   "Em edição" — é a ordem natural do index.html (pending → editing → edited), então
   NÃO há mais reordenação por papel (o antigo bloco .is-editor com flex/order saiu).
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   MENU · usuário em 2 linhas (nome · papel (sigla) / e-mail)
   <div class="admin-user">{svg}<span class="admin-user-name">Rafa · admin</span><span class="admin-user-email">rafa@…</span></div>
   O svg ocupa as 2 linhas; com o markup antigo (1 span) continua igual.
   ═════════════════════════════════════════════════════════════════════════ */
.admin-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 1px;
  align-items: center;
}
.admin-user > svg { grid-row: 1 / span 2; }
.admin-user .admin-user-name { font-weight: 600; color: var(--ink-900); }
.admin-user .admin-user-email { font-size: 11.5px; color: var(--ink-500); }
.admin-user .admin-user-role { font-weight: 500; color: var(--ink-500); }

/* ═══════════════════════════════════════════════════════════════════════════
   SLOT ESPERANDO VÍDEO · Rafa 13/set: ad já editado volta pra fila quando uma
   variação/hook fica sem vídeo (ex.: o editor removeu o vídeo pra refazer).
   Âmbar = mesmo tom de "Aguardando" (#B45309 sobre --warning-soft · AA em 11–12px).
   <div class="card-pending-slots">{svg}<span>Falta vídeo: <b>H4-V2</b></span></div>
   ═════════════════════════════════════════════════════════════════════════ */
.card-pending-slots {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  color: #B45309;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.card-pending-slots > svg { width: 13px; height: 13px; flex-shrink: 0; }
.card-pending-slots b { font-weight: 800; letter-spacing: 0.01em; }
/* Drawer: tag no .drawer-meta (o `.drawer-meta span` genérico perde pra esta) */
.drawer-meta .tag-pending-slots {
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--warning-soft);
  border: 1px solid var(--warning-line);
  color: #B45309;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
/* Linha de Editados: "· falta vídeo: H4-V2" no texto de progresso */
.edited-progress-pending { color: #B45309; font-weight: 700; }
/* Aba Vídeo: "1 editada" + "1 sem vídeo" lado a lado no cabeçalho do hook */
.hook-status-pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }