/* ============================================================
   Atribuição em lote — folha do componente (js/lote.js)
   ------------------------------------------------------------
   O modal de lote é montado por JS e vive em duas telas com folhas
   diferentes: a plataforma (css/styles.css) e a administração
   (css/admin.css) — eram três até o shell de gestão sair, em 26/08/2026.
   Por isso ele NÃO se apoia nas classes de formulário de nenhuma delas.

   O caso que obrigou esta folha a existir: `.field` quer dizer coisas
   OPOSTAS nas duas casas — em css/admin.css:327 é o próprio input; em
   css/styles.css:3764 é o grid que embrulha um campo de login, com
   margem embaixo. O mesmo markup renderizava certo no admin e torto na
   plataforma. Aqui os campos têm nome próprio (`lote__*`) e valor
   próprio, e o componente fica igual nas duas casas.

   O que ele AINDA reusa, porque é a mesma coisa em todas as folhas:
   `.modal`, `.modal__card`, `.modal__head`, `.modal__ic`,
   `.modal__kicker`, `.modal__close`, `.modal__actions` e `.btn` — mais
   `.cmb` (o dropdown com busca e múltipla, js/combo-multi.js) e
   `.when-card` (a pílula de escolha de data). Estes dois têm definição
   ÚNICA em css/styles.css, que as duas casas carregam, e nome próprio
   que não colide com nada: são componentes, como `.btn`, e não classes
   de formulário de uma tela.
   ============================================================ */

/* Mais largo que o modal padrão: os cinco passos e a pré-visualização
   convivem na mesma leitura. */
.modal__card--wide { --modal-w: 640px; }

/* `width: 100%` e `min-width: 0` não são zelo: `.modal__card` é uma coluna
   flex com `align-items: flex-start`, então tudo aqui dentro nasce com largura
   de CONTEÚDO. Com um conteúdo de título curto ninguém via; com o campo de
   conteúdos exibindo "Educação financeira: … , Formação: … · 2 conteúdos", a
   pilha inteira passava a largura do card e vazava para fora dele. O `min-width`
   é o que permite ao texto truncar em vez de empurrar (fieldset, em especial,
   tem `min-width: min-content` por padrão do browser). */
.lote__body { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; min-width: 0; }
.lote__body > *, #lote-aviso-corpo { box-sizing: border-box; width: 100%; min-width: 0; }

/* ---------- os cinco passos ----------
   Escola → Conteúdo → Atribuidores → Executores → Prazos. A moldura é a
   mesma dos cinco porque a ordem já é a hierarquia: numerar E hierarquizar
   diria duas vezes a mesma coisa, e a segunda sugeriria que um passo importa
   mais que o outro. */
.lote__passo {
  margin: 0;
  min-width: 0;
  padding: var(--spacing-xs);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--border-radius-sm-plus);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lote__passo legend { padding: 0 6px; display: flex; align-items: center; gap: 8px; }
/* O número é o passo, não um enfeite: ele é a única marca de ORDEM numa
   pilha em que todos os campos têm o mesmo peso visual. */
.lote__num {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-pure);
  color: var(--theme-text-inverse);
  font-size: 11.5px; font-weight: 800; line-height: 1;
}
.lote__dica { font-size: 12px; font-weight: 600; color: var(--color-surface-soft); }

/* ---------- campos ---------- */
.lote__label { font-size: 13px; font-weight: 700; color: var(--theme-text-heading); }
.lote__label-min { font-size: 12.5px; font-weight: 700; color: var(--theme-text-muted); }
.lote__hint { font-size: 12.5px; font-weight: 500; color: var(--color-surface-soft); line-height: 1.45; }

/* A moldura do RECORTE saiu em 11/09/2026 (`.lote__filtro`): a escola deixou
   de ser um controle dentro do passo de executores e virou o passo 1, com a
   mesma moldura dos outros — um lote é de uma escola só. */

/* ---------- prazos ---------- */
.lote__quando { display: flex; flex-direction: column; gap: 8px; }
.lote__when { display: flex; gap: 4px; padding: 4px; background: var(--theme-surface-muted); border-radius: var(--border-radius-pill); }
.lote__date { display: flex; flex-direction: column; gap: 6px; }
.lote__date[hidden] { display: none; }
.lote__date input {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--theme-text-heading);
  padding: 11px 14px;
  border-radius: var(--border-radius-sm);
  border: var(--border-width-hairline-plus) solid var(--theme-border-subtle);
  background: var(--theme-input-bg);
}
.lote__date input:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 1px; border-color: var(--color-accent-pure); }
/* O par início+fim que "Definir prazo" abre — ver .attr__prazo em styles.css. */
.lote__prazo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lote__prazo[hidden] { display: none; }

/* ---------- pré-visualização ----------
   É o freio principal: quem atribui lê o tamanho do que vai fazer antes
   de poder fazer. Por isso tem peso de bloco, não de legenda. */
.lote__previa {
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-sm-plus);
  background: var(--color-primary-tinted);
  border: 1px solid var(--color-primary-pale);
}
.lote__previa-frase {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--theme-text-heading);
}
.lote__previa-pula,
.lote__previa-vazio {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--theme-text-muted);
}
.lote__previa-vazio { margin: 0; }
/* O prazo fecha a prévia porque é o último passo: ele qualifica o ato, não
   o dimensiona. Peso de ressalva, nunca de número. */
.lote__previa-prazo {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--theme-text-muted);
}
/* Quem conduz faz parte do tamanho do ato, então lê com o peso da frase
   principal — não com o das ressalvas. */
.lote__previa-cond {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-primary-dark);
}

/* O widget de atribuidores dentro da moldura do passo 3 do lote. */
#lote-atbd { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#lote-atbd .atbd__resolve { display: none; }   /* a frase vive na pré-visualização */

/* A frase que carrega o peso do aviso: sem desfazer, ela é o freio. Fica
   FORA da caixa dos números de propósito — número é o tamanho do ato,
   isto é a consequência dele. */
.lote__aviso-final {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--color-warning-deep);
}

/* O aviso empilha SOBRE o modal do lote: "Voltar" devolve os cinco passos
   inteiros, sem refazer escolha nenhuma. */
#modal-lote-aviso { z-index: 210; }