/* Módulo publicações: tela "Programar postagens" (lote) — três passos numerados, lista ordenada de ofertas, agenda
   agrupada por dia, grupos por nicho e barra final fixa. Tokens em app.css. */

/* Passos: o número vem de um contador CSS no título do cartão (o texto do h2 continua só o título). */
.programar-passos { counter-reset: passo; }
.programar-passos .cartao.passo > .cartao-cab > h2 { display: flex; align-items: center; gap: 10px; }
.programar-passos .cartao.passo > .cartao-cab > h2::before { counter-increment: passo; content: counter(passo); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--cor-marca); color: var(--sobre-marca); font-size: var(--texto-s); font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.programar-ajuda { margin-bottom: var(--esp-3); max-width: 76ch; }

/* 1. Ofertas selecionadas */
.programar-ofertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.programar-oferta { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0; border: 1px solid var(--borda); border-radius: var(--raio-s); background: var(--superficie); }
.programar-oferta .miniatura { width: 48px; height: 48px; min-width: 48px; object-fit: cover; border-radius: var(--raio-s); background: var(--superficie-3); display: block; }
.programar-oferta .posicao { min-width: 26px; height: 26px; padding: 0 6px; justify-content: center; border-radius: 50%; font-size: var(--texto-s); }
.programar-oferta-info { flex: 1 1 auto; min-width: 0; }
.programar-oferta-info strong { overflow-wrap: anywhere; }
.programar-oferta-info .linha-detalhe { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; }
.programar-oferta > .botao { flex: 0 0 auto; }
.programar-oferta.inelegivel { background: var(--superficie-2); color: var(--texto-suave); border-style: dashed; }
.programar-oferta.inelegivel .miniatura { opacity: .5; }
.programar-oferta.inelegivel a { color: inherit; }

/* 2. Quando postar + agenda */
.programar-regra { align-items: start; }
.programar-agenda-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin: var(--esp-4) 0 var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
.programar-agenda-cab h3 { margin: 0; }
.programar-indicador { display: none; align-items: center; gap: 6px; font-size: var(--texto-s); color: var(--texto-suave); }
.programar-indicador::before { content: ''; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--borda-forte); border-top-color: var(--cor-marca); animation: girar .8s linear infinite; }
#programar-agenda { transition: opacity var(--transicao); }
form.previa-ocupada .programar-indicador { display: inline-flex; }
form.previa-ocupada #programar-agenda { opacity: .55; }
@keyframes girar { to { transform: rotate(360deg); } }

.tabela-agenda th, .tabela-agenda td { vertical-align: middle; }
.tabela-agenda .agenda-dia td { background: var(--superficie-2); padding: 7px 14px; font-size: var(--texto-s); color: var(--texto-suave); border-bottom: 1px solid var(--borda); }
.tabela-agenda .agenda-dia strong { color: var(--texto); font-weight: 600; text-transform: capitalize; }
.agenda-dia-relativo { font-weight: 600; color: var(--cor-marca-texto); }
.tabela-agenda .agenda-pos { width: 40px; color: var(--texto-suave); }
.tabela-agenda .agenda-hora { width: 1%; white-space: nowrap; }
.tabela-agenda .agenda-hora strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tabela-agenda .agenda-ajuste { width: 1%; white-space: nowrap; }
.tabela-agenda .ajuste { height: var(--altura-controle-p); width: auto; min-width: 180px; padding: 0 8px; font-size: var(--texto-s); font-variant-numeric: tabular-nums; color: var(--texto-suave); border-color: var(--borda-forte); }
.tabela-agenda .ajuste:hover, .tabela-agenda .ajuste:focus { color: var(--texto); }
.tabela-agenda .ajustada .ajuste { color: var(--info-texto); background: var(--info-fundo); border-color: var(--info-borda); }
.tabela-agenda [data-desfazer-ajuste] { margin-left: 2px; }
.programar-resumo { margin: var(--esp-3) 0 0; font-size: var(--texto-s); color: var(--texto-suave); }
.programar-resumo strong { color: var(--texto); }
.programar-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); align-items: center; margin-top: var(--esp-3); }

/* 3. Para onde + revisão */
.programar-campo-grupos > .campo-rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 600; font-size: .875rem; color: var(--cinza-800); line-height: 1.3; }
.programar-grupos-total { font-weight: 500; color: var(--texto-suave); }
.programar-grupos { display: grid; gap: var(--esp-3); }
.programar-nicho-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.programar-nicho-nome { text-transform: capitalize; }
.programar-nicho-acoes { margin-left: auto; display: inline-flex; gap: 2px; }
.programar-grupos .lista-check { max-height: 220px; }
.programar-grupos .lista-check label:has(input:disabled) { color: var(--texto-suave); cursor: not-allowed; }
.programar-revisao { margin-top: var(--esp-5); }
.programar-revisao .campo-check { margin-bottom: var(--esp-2); }
.programar-revisao .campo-check .ajuda { padding-left: 26px; }

/* Barra final: fica à vista enquanto a página longa rola. */
.programar-final { position: sticky; bottom: 0; z-index: 5; margin-top: var(--esp-4); padding: var(--esp-3) 0; background: var(--fundo); border-top: 1px solid var(--borda); }
.programar-final-resumo { margin-right: auto; }

/* Aba "Por grupo": cartão por número (plataforma/estado discretos, "N postagens · próxima …" em destaque) e, dentro,
   um bloco recolhível por grupo com a contagem numa pílula e a tabela colada ao bloco. */
.por-grupo-conta-resumo { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.por-grupo-proxima { font-size: var(--texto-s); color: var(--cor-marca-texto); white-space: nowrap; }
.por-grupo-conta > .cartao-corpo { padding: var(--esp-4); }
.por-grupo-conta details.bloco { margin-bottom: var(--esp-3); }
.por-grupo-conta details.bloco:last-child { margin-bottom: 0; }
.por-grupo-grupo > summary { flex-wrap: wrap; gap: 4px 12px; }
.por-grupo-nome { font-weight: 700; }
.por-grupo-contagem { margin-left: auto; padding: 3px 10px; border-radius: var(--raio-pill); background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto); font-weight: 600; font-size: var(--texto-xs); }
details.por-grupo-grupo > .bloco-corpo { padding: 0; }
details.por-grupo-grupo .tabela-envelope { border: 0; border-radius: 0 0 var(--raio) var(--raio); margin: 0; }
.tabela-por-grupo .por-grupo-dia-celula, .tabela-por-grupo .por-grupo-hora { width: 1%; white-space: nowrap; }
.tabela-por-grupo .por-grupo-hora strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.por-grupo-dia.hoje { font-weight: 700; color: var(--cor-marca-texto); }

@media (max-width: 640px) {
  .programar-oferta { flex-wrap: wrap; }
  .programar-oferta > .botao { margin-left: auto; min-height: 44px; }
  .programar-nicho-acoes .botao { min-height: 44px; }
  /* Agenda no celular: hora grande à esquerda, oferta e ajuste à direita; sem os rótulos repetidos da tabela empilhada. */
  .tabela.tabela-agenda tr.agenda-dia { padding: 0; }
  .tabela.tabela-agenda tr.agenda-dia td { display: block; padding: 6px 12px; }
  .tabela.tabela-agenda tr.agenda-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "hora oferta" "hora ajuste"; gap: 4px 10px; padding: 10px 12px; align-items: start; }
  .tabela.tabela-agenda td { display: block; padding: 0; }
  .tabela.tabela-agenda td[data-rotulo]::before { content: none; }
  .tabela.tabela-agenda .agenda-pos { display: none; }
  .tabela.tabela-agenda .agenda-hora { grid-area: hora; white-space: normal; }
  .tabela.tabela-agenda .agenda-hora strong { display: block; font-size: 1.35rem; }
  .tabela.tabela-agenda .agenda-oferta { grid-area: oferta; }
  .tabela.tabela-agenda .agenda-ajuste { grid-area: ajuste; white-space: normal; }
  .tabela-agenda .ajuste { width: 100%; max-width: 220px; min-width: 0; height: 44px; }
  .programar-final { padding-bottom: calc(var(--esp-3) + env(safe-area-inset-bottom)); }
  .programar-final .botao.primario { min-height: 44px; }
  .programar-final-resumo { order: 3; width: 100%; margin: 0; }
  /* "Por grupo" no celular: dia e hora à esquerda, oferta/estado/lote à direita, sem os rótulos repetidos. */
  .por-grupo-conta > .cartao-cab { flex-wrap: wrap; }
  .por-grupo-conta > .cartao-cab > .cartao-acoes { width: 100%; }
  .por-grupo-conta-resumo { align-items: flex-start; text-align: left; }
  .por-grupo-proxima { white-space: normal; }
  .tabela.tabela-por-grupo tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; align-items: start; }
  .tabela.tabela-por-grupo td { display: block; padding: 0; }
  .tabela.tabela-por-grupo td[data-rotulo]::before { content: none; }
  .tabela.tabela-por-grupo td.por-grupo-dia-celula { grid-column: 1; grid-row: 1; font-size: var(--texto-s); white-space: normal; }
  .tabela.tabela-por-grupo td.por-grupo-hora { grid-column: 1; grid-row: 2 / span 3; white-space: normal; }
  .tabela.tabela-por-grupo td.por-grupo-hora strong { font-size: 1.25rem; }
  .tabela.tabela-por-grupo td.por-grupo-oferta { grid-column: 2; grid-row: 1 / span 2; }
  .tabela.tabela-por-grupo td.por-grupo-estado { grid-column: 2; grid-row: 3; padding-top: 4px; }
  .tabela.tabela-por-grupo td.por-grupo-lote { grid-column: 2; grid-row: 4; padding-top: 2px; }
}

/* Fila: ações em massa. As caixas das linhas pertencem ao formulário da barra pelo atributo form (sem aninhar formulários). */
.fila-selecao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); padding: 10px 14px; margin-bottom: var(--esp-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); font-size: var(--texto-s); color: var(--texto-suave); }
.fila-selecao.com-selecao { border-color: var(--cor-marca); box-shadow: inset 0 0 0 1px var(--cor-marca); }
.fila-selecao strong { color: var(--texto); font-size: var(--texto-m); }
.fila-selecao-acoes { display: inline-flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
.fila-selecao .ajuda { flex-basis: 100%; margin: 0; }
.tabela th.selecao, .tabela td.selecao { width: 36px; text-align: center; vertical-align: middle; }
.tabela th.selecao input, .tabela td.selecao input { width: 18px; height: 18px; margin: 0; accent-color: var(--cor-marca); cursor: pointer; }
@media (max-width: 900px) {
  .tabela th.selecao input, .tabela td.selecao input { width: 22px; height: 22px; }
}
@media (max-width: 640px) {
  .fila-selecao-acoes { margin-left: 0; width: 100%; }
  .fila-selecao-acoes .botao { flex: 1 1 auto; min-height: 44px; }
  .tabela td.selecao { grid-column: 1 / -1; text-align: left; }
}