/* e-PGM · quadro das diligências (Cotas de Diligência: prazos e respostas).
 *
 * Carregada depois de quadro-nucleos.css e reaproveita as classes dele
 * (.quadro-nucleos, .quadro-coluna, .quadro-cartao, .fila-barra, .fila-filtro,
 * .fila-proximo, .quadro-menu...), para que todo quadro do sistema tenha o
 * mesmo desenho e o mesmo teclado. Aqui ficam só as diferenças: a cor de cada
 * situação, o selo de prazo, a coluna "Encerradas" que se recolhe numa faixa
 * e o painel da cota. Usa apenas os tokens de vidro.css, com as variantes do
 * tema escuro que ele já define. Remover o <link> deixa a tela legível, com
 * as colunas do quadro-nucleos.css. */

.cotas-titulo-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cotas-pagina .cotas-vazio { margin: 0 0 10px; padding: 0; }
.cotas-pagina > .cotas-consultivo > .nota { margin: 0 0 12px; }
.cotas-resumo .cotas-resumo-vencidas strong { color: var(--vermelho); }
.cotas-resumo .cotas-resumo-vencendo strong { color: var(--ambar); }
.cotas-resumo .cotas-resumo-conferir strong { color: var(--verde); }
.cotas-pagina .cotas-calendario { margin-top: 18px; }

/* ---------- barra: pontos dos filtros ---------- */

.cotas-barra .cotas-filtro-fiscal::before { background: var(--nucleo-fiscal); }
.cotas-barra .cotas-filtro-consultivo::before { background: var(--nucleo-consultivo); }
.cotas-barra .cotas-filtro-minhas::before { background: var(--acento); }
.cotas-barra .cotas-filtro-vencendo::before { background: var(--destaque); border-radius: 2px; }

/* ---------- cor de cada situação ---------- */

.quadro-cotas [data-coluna="em_curso"] { --cor-nucleo: var(--acento); --cor-nucleo-claro: var(--acento-suave); }
.quadro-cotas [data-coluna="vencendo"] { --cor-nucleo: var(--destaque); --cor-nucleo-claro: var(--ambar-claro); }
.quadro-cotas [data-coluna="vencidas"] { --cor-nucleo: var(--vermelho); --cor-nucleo-claro: var(--vermelho-claro); }
.quadro-cotas [data-coluna="conferir"] { --cor-nucleo: var(--verde); --cor-nucleo-claro: var(--verde-claro); }
.quadro-cotas [data-coluna="encerradas"] { --cor-nucleo: var(--tinta-terciaria); --cor-nucleo-claro: var(--controle-fundo); }

/* Separação por cor: a coluna inteira recebe um véu da sua cor, e o
 * cabeçalho, a faixa no alto. Discreto, mas legível de longe. */
.quadro-cotas .quadro-coluna {
  border-color: color-mix(in srgb, var(--cor-nucleo) 18%, var(--vidro-contorno));
  background: color-mix(in srgb, var(--cor-nucleo) 5%, var(--quadro-coluna-fundo));
}
/* Cabeçalho em grade: o nome encolhe (com reticências) antes de a contagem
 * mudar de linha; a legenda curta ocupa a linha de baixo. */
.quadro-cotas .quadro-coluna-topo {
  display: grid; grid-template-columns: minmax(0, max-content) auto minmax(0, 1fr); align-items: center;
  gap: 2px 9px;
  background: color-mix(in srgb, var(--cor-nucleo) 7%, var(--quadro-topo-fundo));
  box-shadow: inset 0 3px 0 var(--cor-nucleo);
}
.quadro-cotas .quadro-coluna-total { color: color-mix(in srgb, var(--cor-nucleo) 80%, var(--tinta)); }
.quadro-cotas [data-coluna="vencendo"] .quadro-coluna-total { color: var(--ambar); }
.cotas-coluna-titulo {
  display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0;
  color: var(--tinta); font-size: 14.5px; font-weight: 680; letter-spacing: -.012em;
}
.cotas-coluna-titulo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotas-coluna-titulo > .cotas-nome-curto { display: none; }
.cotas-coluna-titulo::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cor-nucleo); box-shadow: 0 0 0 3px var(--cor-nucleo-claro);
}
.cotas-coluna-sub {
  grid-column: 1 / -1; min-width: 0; margin: 0 0 0 18px; overflow: hidden; color: var(--tinta-terciaria);
  font-size: 11.5px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.quadro-cotas .quadro-pilula.atrasados::before { background: var(--vermelho); }

/* ---------- selo de prazo, na primeira linha do cartão ---------- */

.cota-prazo {
  display: inline-flex; flex: none; align-items: center; gap: 5px; height: 21px; padding: 0 7px;
  border-radius: 999px; background: var(--controle-fundo); color: var(--tinta-fraca);
  font-size: 11px; font-weight: 650; letter-spacing: .005em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cota-prazo > .bolinha {
  display: inline-block; flex: none; width: 7px; height: 7px; margin: 0; border-radius: 50%;
  background: currentColor; box-shadow: none;
}
.cota-prazo.correndo { background: var(--acento-suave); color: var(--azul-interativo); }
.cota-prazo.vencendo { background: var(--ambar-claro); color: var(--ambar); font-weight: 700; }
.cota-prazo.vencida { background: var(--vermelho-claro); color: var(--vermelho); font-weight: 680; }
.cota-prazo.conferir { background: var(--verde-claro); color: var(--verde); }
.cota-prazo.restituida { color: var(--tinta-fraca); }
.cota-prazo.restituida > .bolinha { background: var(--vermelho); }
.cota-prazo.aguarda > .bolinha { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.cota-prazo.encerrada { padding: 0 2px; background: transparent; color: var(--tinta-terciaria); font-weight: 560; }

/* ---------- cartões ---------- */

/* Número e prazo na mesma linha já a partir de colunas de ~300 px. */
.quadro-cotas .quadro-trilho { gap: 12px; }
.quadro-cotas .quadro-coluna { padding: 0 7px 8px; }
.quadro-cotas .quadro-coluna-topo { margin: 0 -7px 6px; }
.quadro-cotas .quadro-cartao { padding: 9px 10px 9px 12px; }
.quadro-cotas .quadro-cartao-cabeca { gap: 4px; }
/* O próximo passo ganha uma etiqueta na borda do cartão, sem ocupar a linha
 * do número e do prazo. */
.quadro-cotas .quadro-cartao.proximo { margin-top: 7px; }
.quadro-cotas .quadro-cartao.proximo .quadro-proximo-selo {
  position: absolute; top: -10px; left: 10px; height: 19px; padding: 0 8px;
  background: var(--acento); color: #fff; font-size: 10.5px; letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--quadro-cartao-fundo);
}
.quadro-cotas .quadro-cartao-id .link-dossie { font-size: 13px; }
.quadro-cotas .quadro-cartao-id .dado-copiavel { gap: 0; }
.quadro-cotas .quadro-cartao-id .botao-copiar { width: 19px; }
.cotas-pagina #bcContagem { margin: 6px 2px 0; color: var(--tinta-terciaria); font-size: 11.5px; }

.quadro-chip.cota-nucleo { gap: 6px; font-weight: 620; }
.quadro-chip.cota-nucleo::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.quadro-chip.nucleo-fiscal { background: var(--nucleo-fiscal-claro); color: var(--nucleo-fiscal); }
.quadro-chip.nucleo-consultivo_administrativo { background: var(--nucleo-consultivo-claro); color: var(--nucleo-consultivo); }
.quadro-chip.cota-prorrogada { background: var(--ambar-claro); color: var(--ambar); font-weight: 620; }
.quadro-chip.cota-ciencia { border: 1px solid var(--linha-forte); background: transparent; color: var(--tinta-fraca); }
.quadro-chip.cota-resposta { background: var(--verde-claro); color: var(--verde); font-weight: 620; }
.quadro-chip.cota-dlc { background: var(--roxo-claro); color: var(--roxo); }

/* A ação principal fica sempre à vista: cada situação tem o seu próximo ato.
 * Tom suave nos cartões; cheio no próximo passo e ao passar ou focar. */
.quadro-cotas .quadro-cartao-acoes,
.quadro-cotas .quadro-cartao:hover .quadro-cartao-acoes {
  position: static; margin-top: 6px; padding: 0; background: none; opacity: 1;
}
.quadro-cotas .quadro-acao-principal {
  flex: 0 1 auto; min-width: 0; min-height: 30px; margin-right: auto; overflow: hidden; text-overflow: ellipsis;
  background: var(--acento-suave); color: var(--azul-interativo); box-shadow: none;
}
.quadro-cotas .quadro-cartao:hover .quadro-acao-principal,
.quadro-cotas .quadro-cartao:focus-within .quadro-acao-principal,
.quadro-cotas .quadro-cartao.proximo .quadro-acao-principal {
  background: var(--acento); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(10, 102, 214, .3);
}
.quadro-cotas .quadro-acao-principal:hover { background: var(--acento-forte); color: #fff; }
.quadro-cotas .quadro-mais { width: 30px; height: 30px; }
a.quadro-menu-item { color: var(--tinta); text-decoration: none; }

/* Encerradas: leitura apagada, ações iguais. */
.quadro-cotas [data-coluna="encerradas"] .quadro-cartao { background: color-mix(in srgb, var(--quadro-cartao-fundo) 62%, transparent); box-shadow: none; }
.quadro-cotas [data-coluna="encerradas"] .quadro-cartao-objeto { color: var(--tinta-fraca); }
.quadro-cotas [data-coluna="encerradas"] .quadro-acao-principal { background: transparent; color: var(--azul-interativo); }
.quadro-cotas [data-coluna="encerradas"] .quadro-cartao:hover .quadro-acao-principal,
.quadro-cotas [data-coluna="encerradas"] .quadro-cartao:focus-within .quadro-acao-principal { background: var(--acento-suave); color: var(--azul-interativo); box-shadow: none; }

/* Coluna estreita (cinco colunas, ou quatro entre 1100 e 1400 px): o
 * cabeçalho do cartão passa a duas linhas sem cortar número nem prazo. */
@container quadro-coluna (max-width: 330px) {
  .quadro-cotas .quadro-cartao-cabeca { flex-wrap: wrap; row-gap: 4px; }
  .quadro-cotas .quadro-cartao-contexto { order: 5; flex-basis: 100%; }
  .cotas-coluna-titulo { font-size: 14px; }
}
/* Mais estreita ainda (1100 a 1300 px): o prazo desce para uma linha própria,
 * sempre no mesmo lugar, em vez de quebrar só em alguns cartões. */
@container quadro-coluna (max-width: 290px) {
  .quadro-cotas .quadro-cartao-fim { order: 4; flex-basis: 100%; margin-left: 0; }
  .cotas-coluna-titulo > .cotas-nome-longo:has(+ .cotas-nome-curto) { display: none; }
  .cotas-coluna-titulo > .cotas-nome-curto { display: inline; }
}

/* ---------- "Encerradas": recolhível numa faixa ---------- */

.quadro-cotas details.cotas-encerradas > summary { list-style: none; cursor: pointer; user-select: none; }
.quadro-cotas details.cotas-encerradas > summary::-webkit-details-marker { display: none; }
.quadro-cotas details.cotas-encerradas > summary::after,
.quadro-cotas details.cotas-encerradas[open] > summary::after { content: none; display: none; }
.quadro-cotas details.cotas-encerradas > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.cotas-dobra-dica {
  display: inline-grid; flex: none; grid-column: 3; grid-row: 1; justify-self: end; place-items: center; width: 24px; height: 24px; margin-left: auto;
  border-radius: 7px; color: var(--tinta-fraca);
}
.cotas-dobra-dica::before {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; rotate: 45deg;
}
details.cotas-encerradas:not([open]) .cotas-dobra-dica::before { rotate: -45deg; }
.quadro-cotas details.cotas-encerradas > summary:hover .cotas-dobra-dica { background: var(--controle-fundo); color: var(--tinta); }
@media (prefers-reduced-motion: no-preference) {
  .cotas-dobra-dica::before { transition: rotate .2s var(--mov-curva, ease); }
}

.cotas-dobra-rotulo { display: none; }
@media (min-width: 1100px) {
  /* Recolhida: as quatro colunas de trabalho ocupam a largura; "Encerradas"
   * vira uma faixa vertical com a contagem, que abre num clique (o mesmo
   * desenho da coluna recolhida do painel inicial). */
  .quadro-cotas.encerradas-recolhidas .quadro-trilho { grid-template-columns: repeat(4, minmax(0, 1fr)) 58px; }
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel { align-self: stretch; padding: 0; }
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel > details { height: 100%; }
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel .quadro-coluna-topo {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px; height: 100%; min-height: 180px;
    margin: 0; padding: 14px 6px; border-bottom: 0; border-radius: 17px; background: transparent;
  }
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel .quadro-coluna-topo:hover { background: var(--controle-fundo); }
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel .cotas-coluna-titulo { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; }
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel .cotas-coluna-titulo::before,
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel .cotas-coluna-sub,
  .quadro-cotas.encerradas-recolhidas .cotas-coluna-dobravel .cotas-dobra-dica { display: none; }
  .quadro-cotas.encerradas-recolhidas .cotas-dobra-rotulo {
    display: block; margin-top: auto; color: var(--azul-interativo); font-size: 11.5px; font-weight: 650;
  }
}

/* ---------- telas menores: seletor com a cor de cada coluna ---------- */

.cotas-seletor-ponto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-nucleo); }
@media (max-width: 1099.98px) {
  .quadro-cotas .quadro-seletor { flex-wrap: nowrap; }
  .quadro-cotas .quadro-seletor button { flex: 1 1 auto; padding-inline: 10px; }
  .quadro-cotas .quadro-coluna-topo { position: static; }
}
@media (max-width: 720px) {
  /* Cinco situações em 390 px: a ativa mostra o nome; as outras, a cor e a
   * contagem (o nome continua para leitores de tela e na dica). */
  .quadro-cotas .quadro-seletor button { flex: 0 1 auto; gap: 6px; padding-inline: 9px; }
  .quadro-cotas .quadro-seletor button:not(.ativo) { font-size: 0; }
  .quadro-cotas .quadro-seletor button:not(.ativo) .quadro-seletor-conta { font-size: 11.5px; }
  .quadro-cotas .quadro-seletor button.ativo { flex: 1 1 auto; }
  .cotas-coluna-sub { margin-left: 0; }
}

/* ---------- painel da cota (ações, histórico e formulários) ---------- */

dialog.cota-painel {
  width: min(820px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  /* Ao rolar até o formulário, o título fixo não cobre o começo dele. */
  scroll-padding-top: 96px;
}
.cota-painel-topo {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--linha);
  /* Opaco: o formulário que rola por baixo não aparece através do título. */
  background: var(--superficie-elevada);
}
.cota-painel-titulos { min-width: 0; }
.cota-painel-topo h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.012em; overflow-wrap: anywhere; }
.cota-painel-topo h2:focus { outline: none; }
.cota-painel-topo p {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 7px 0 0;
  color: var(--tinta-fraca); font-size: 13px;
}
.cota-painel-topo > .acao { flex: none; }
.cota-painel-corpo { padding: 4px 22px 22px; }
.cota-painel-corpo > article.cartao { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.cota-painel-corpo > article > strong:first-child { display: block; margin-top: 12px; color: var(--tinta-fraca); font-size: 12.5px; font-weight: 600; }
@media (max-width: 640px) {
  dialog.cota-painel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); scroll-padding-top: 136px; }
  .cota-painel-topo { padding: 12px 14px 10px; }
  .cota-painel-topo h2 { font-size: 15.5px; }
  .cota-painel-topo p { margin-top: 5px; font-size: 12.5px; }
  .cota-painel-corpo { padding: 2px 14px 16px; }
}