/* Detalhe do produto (componente compartilhado: Radar, Biblioteca e Ranking de vídeos).
   Uma entidade, um detalhe. Layout SINAL4 aprovado em 04/11/2026 (pacote DIRECIONAMENTO-CLAUDE.md).
   Sem vendas, faturamento ou comissão nos cartões de vídeo e criador: esses números ficam no painel do produto. */
.foto-vazia{display:inline-block;background:var(--color-surface-subtle);border:1px solid var(--color-border);border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Botões de apoio */
.btn-sec{min-height:44px;padding:10px 12px;border-radius:var(--radius-control);border:1px solid var(--color-primary);background:var(--color-surface);color:var(--color-primary);font-weight:600;cursor:pointer;white-space:nowrap}
.btn-sec:hover{background:var(--color-primary-soft)}
a.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.ic-btn{width:44px;height:44px;flex:0 0 44px;display:inline-grid;place-items:center;border-radius:var(--radius-control);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;padding:0}
.ic-btn .ico{width:20px;height:20px}
[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.acoes{display:flex;gap:8px;align-items:center}
.acoes .btn-sec{flex:0 0 auto}
.nw{white-space:nowrap}
.link-ext{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-link);text-decoration:underline;justify-self:start}
.chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:999px;background:var(--color-surface-subtle);color:var(--color-text-muted);font-size:12px;line-height:18px;justify-self:start}
.aviso-salvar{margin:0;font-size:12px;line-height:18px;color:var(--color-text-muted);min-height:18px}
.aviso-salvar:empty{display:none}
.dp-loja:empty{display:none}
.dp-loja .ver-loja{margin-top:0}

/* Diálogo: cabeçalho fixo, conteúdo rolável dentro do diálogo */
.dlg-produto{width:min(1120px,calc(100vw - 48px));max-height:calc(100dvh - 48px);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.dlg-produto .dlg-head{min-height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--color-border);flex:0 0 auto}
.dlg-produto .dlg-title{margin:0;font-size:18px;line-height:24px;font-weight:600}
.dlg-produto .dlg-close{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;gap:8px}
.dlg-produto .dlg-close .close-txt{white-space:nowrap}
.dlg-produto .dlg-body{display:block;grid-template-columns:minmax(0,1fr);flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px}
.dp-grid{display:grid;gap:24px;min-width:0}

/* Topo: identidade à esquerda, desempenho do produto à direita (desktop a partir de 1024 px) */
.dp-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:24px;align-items:start;min-width:0}
.dp-ref{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.dp-foto{width:112px;height:112px;object-fit:contain;display:block;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface-subtle);max-width:100%}
.dp-ident{display:grid;gap:12px;min-width:0;align-content:start}
.dp-nome{margin:0;font-size:20px;line-height:28px;font-weight:600;overflow-wrap:anywhere}
.dp-copia-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-self:start}
.dp-copiar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--color-link);font:inherit;font-weight:600;cursor:pointer}
.dp-copiar .ico{width:20px;height:20px}
.dp-copia{margin:0;font-size:14px;line-height:20px;color:var(--color-text-muted)}
.dp-copia.erro{color:var(--color-danger)}
.dp-copia:empty{display:none}
.dp-salvo-acoes{display:grid;gap:8px;justify-items:start;min-width:0}
.dp-salvar{min-height:44px}
.dp-remover{min-height:44px}

/* Painel de desempenho do produto: o período pertence a este bloco */
.dp-desempenho{border:1px solid var(--color-border);border-radius:8px;padding:16px;background:var(--color-surface);min-width:0;container-type:inline-size}
.dp-desempenho-tit{margin:0 0 12px;font-size:14px;line-height:20px;font-weight:600}
.dp-metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}
.dp-card{display:grid;gap:2px;padding:0 12px;border-left:1px solid var(--color-border);min-width:0}
.dp-card:first-child{padding-left:0;border-left:0}
.dp-rot{font-size:13px;line-height:18px;color:var(--color-text-muted)}
.dp-val{font-size:20px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Faixas estreitas: três colunas viram duas (Faturamento em largura total) e, no extremo, uma coluna */
@container (max-width:359px){
  .dp-metricas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .dp-card:nth-child(2n+1){padding-left:0;border-left:0}
  .dp-card:nth-child(3){grid-column:1 / -1}
}
@container (max-width:239px){
  .dp-metricas{grid-template-columns:minmax(0,1fr)}
  .dp-card{padding:0;border-left:0}
  .dp-card:nth-child(3){grid-column:auto}
}

/* Abas */
.dp-abas{display:flex;gap:8px;min-width:0;flex-wrap:wrap}
.dp-abas button{display:flex;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:44px;padding:8px 16px;white-space:normal;line-height:20px}
.dp-abas button[aria-selected="true"]{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary)}

/* Painel das abas */
.dp-painel{min-width:0;container-type:inline-size}
.dp-secao{display:grid;gap:12px;min-width:0}
.dp-estado{margin:0;padding:16px 0;color:var(--color-text-muted);font-size:14px;line-height:20px}
.dp-estado .btn{margin-top:8px;min-height:44px}
.dp-texto{margin:0;font-size:15px;line-height:24px;max-width:72ch;overflow-wrap:anywhere}
.dp-subh{margin:8px 0 0;font-size:12px;line-height:18px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.dp-dl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.dp-par{display:grid;gap:4px;padding:12px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);min-width:0}
.dp-par dt{font-size:14px;line-height:20px;color:var(--color-text-muted)}
.dp-par dd{margin:0;font-size:16px;line-height:22px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dp-voltar{justify-self:start}
.dp-vazio{margin:0;color:var(--color-text-muted)}
.dp-contagem{margin:0;font-size:12px;line-height:18px;color:var(--color-text-muted)}
.dp-dl{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:8px 16px;margin:0}
.dp-dl dt{color:var(--color-text-muted)}
.dp-dl dd{margin:0;overflow-wrap:anywhere}

/* Vídeos relacionados: três por linha a partir de 960 px do painel, duas entre 620 e 959 px, uma abaixo */
.vgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
@container (min-width:620px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (min-width:960px){ .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.vcard{border:1px solid var(--color-border);border-radius:8px;padding:12px;display:grid;gap:12px;background:var(--color-surface);min-width:0;align-content:start}
.v-corpo{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;min-width:0}
.v-thumb{position:relative;width:96px;height:160px;border-radius:8px;overflow:hidden;background:var(--color-surface-subtle)}
.v-foto{width:100%;height:100%;object-fit:cover;display:block}
.v-thumb .foto-vazia{width:100%;height:100%;border:0;border-radius:0}
.v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;pointer-events:none}
.v-play .ico{width:18px;height:18px}
.v-txt{display:grid;gap:4px;min-width:0;align-content:start}
.v-titulo{margin:0;font-size:14px;line-height:20px;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.v-user{margin:0;font-size:12px;line-height:18px;color:var(--color-text-muted);overflow-wrap:anywhere}
.v-sec{margin:0;font-size:12px;line-height:18px;color:var(--color-text-muted);overflow-wrap:anywhere}
.v-acoes{display:flex;gap:8px;align-items:center;min-width:0}
.v-abrir{flex:1 1 auto;min-width:0;min-height:44px;white-space:normal;text-align:center}
.v-acoes .ic-btn{flex:0 0 44px}

/* Criadores: lista compacta */
.clista{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);min-width:0}
.c-id{display:flex;align-items:center;gap:12px;min-width:0}
.c-foto{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;border:0;flex:0 0 48px}
.c-foto.foto-vazia{border-radius:50%}
.c-txt{min-width:0;display:grid;gap:2px}
.c-nome{margin:0;font-size:16px;line-height:22px;font-weight:600;overflow-wrap:anywhere}
.c-meta{margin:0;font-size:13px;line-height:18px;color:var(--color-text-muted);overflow-wrap:anywhere}
.c-acoes{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.c-abrir{min-height:44px;white-space:normal;text-align:center}

/* Tablet (768 a 1023 px): identidade primeiro e painel em linha própria */
@media (max-width:1023px){
  .dp-topo{grid-template-columns:minmax(0,1fr)}
  .dlg-produto .dp-ident{display:contents}
  .dlg-produto .dp-ref{grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:16px;row-gap:12px}
  .dlg-produto .dp-ref > .dp-foto{grid-column:1;grid-row:1}
  .dlg-produto .dp-nome{grid-column:2;grid-row:1;align-self:center;min-width:0}
  .dlg-produto .dp-copia-linha,.dlg-produto .chip,.dlg-produto .dp-loja,.dlg-produto .dp-salvo-acoes,.dlg-produto .aviso-salvar{grid-column:1 / -1;justify-self:stretch;width:100%}
  .dlg-produto .dp-copia-linha{justify-self:start;width:auto}
  .dlg-produto .chip{justify-self:start;width:auto}
  .dlg-produto .dp-salvo-acoes{display:flex;flex-wrap:wrap;gap:8px}
  .dlg-produto .dp-salvo-acoes > *{flex:1 1 160px}
}

/* Celular (até 767 px): diálogo em tela inteira */
@media (max-width:767px){
  .dlg-wrap{padding:0}
  .dlg-produto{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .dlg-produto .dlg-head{min-height:56px;padding:0 16px}
  .dlg-produto .dlg-title{font-size:18px;line-height:24px}
  .dlg-produto .dlg-close{width:44px;height:44px;padding:0;justify-content:center}
  .dlg-produto .dlg-close .close-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dlg-produto .dlg-body{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .dp-grid{gap:16px}
  .dp-ref{grid-template-columns:64px minmax(0,1fr);gap:12px;row-gap:12px}
  .dp-foto{width:64px;height:64px}
  .dp-nome{font-size:16px;line-height:22px}
  .dp-ident{gap:8px}
  .dp-desempenho{padding:12px}
  .dp-card{padding:0 8px}
  .dp-val{font-size:16px;line-height:22px}
  .dp-abas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .dp-abas button{min-height:48px;font-size:14px;line-height:18px;padding:6px 4px}
  .dp-dl2{grid-template-columns:minmax(0,1fr)}
  .dp-dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .dp-dl dd{margin-bottom:8px}
  .vcard{padding:12px}
  .v-corpo{grid-template-columns:96px minmax(0,1fr)}
  .crow{padding:12px}
  .c-foto{width:44px;height:44px;flex-basis:44px}
  .c-acoes{width:100%}
  .c-abrir{flex:1 1 auto}
  .c-acoes .ic-btn{flex:0 0 44px}
}