/* Tela Painel — o dia de cada filho, lado a lado.
 *
 * Só tokens: nenhum valor de cor, raio, espaçamento ou elevação solto aqui —
 * tudo vem de `tokens.css`, como manda a folha de fundação. **As oito cores de
 * tarefa não aparecem nesta folha em lugar nenhum**: nem como hex, nem como oito
 * classes. Quem sabe a cor de uma tarefa é o dado, e a folha só sabe usar a
 * propriedade `--cor-tarefa` que o JavaScript põe no elemento — derivada do token
 * `--tarefa-<nome>`. Oito classes aqui seriam a segunda lista das cores, que é o
 * que a AC do épico proíbe, e a quarta contando com `tarefas.css` e
 * `meu-dia.css`, que já recusaram a mesma tentação.
 *
 * Sem @media de largura, como o resto do sistema: um layout fluido só. As colunas
 * dos filhos reusam a `.grade` de `base.css` (`auto-fit` com
 * `minmax(min(280px, 100%), 1fr)`), então dois filhos ficam lado a lado enquanto
 * couberem e viram uma coluna quando não couberem — sem breakpoint e sem segunda
 * versão da tela. É a mesma grade da tela de tarefas, e é ela que faz esta tela
 * sobreviver a 360px sem o corpo da página rolar na horizontal.
 *
 * O topo, o recado, o cartão de seção e a barra de datas espelham `meu-dia.css` e
 * `tarefas.css` de propósito, com o prefixo trocado: as telas do sistema têm o
 * mesmo vocabulário visual, e inventar um novo para cada uma faria todas
 * divergirem na primeira mudança. O cartão daqui é o cartão de "Meu dia" com o
 * que é de escrita removido — o pai e o filho olham o mesmo objeto, e desenhá-los
 * diferente faria os dois falarem de coisas que parecem distintas.
 *
 * Nenhum `outline: none` e nenhum `tabindex` nesta folha: o anel de foco de 2px em
 * `--realce` vem de `base.css` e nada aqui o toca, e os 44px de alvo também. É o
 * que a regra 3 de `test/separacao-de-papeis.test.js` cobra. */

.painel {
  display: grid;
  gap: var(--esp-6);
  align-content: start;
  /* A coluna de conteúdo tem teto — maior que o de "Meu dia", que é uma lista só:
   * aqui podem ser três colunas lado a lado, e apertá-las em 760px faria a grade
   * quebrar em telas onde havia espaço de sobra. */
  max-width: 1100px;
  margin-inline: auto;
}

.painel-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: baseline;
  justify-content: space-between;
}

/* Link de navegação com corpo de controle: 44px de altura mínima valem para
 * qualquer alvo de clique, e um link não recebe isso da regra de `button` de
 * `base.css`. A classe `alvo` no HTML já garante a altura; aqui vem o resto. */
.painel-voltar {
  display: inline-flex;
  align-items: center;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--realce);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no hover.
 * O sublinhado volta no hover porque um link sem sublinhado precisa de *alguma*
 * confirmação de que é link, e a cor sozinha não pode ser a única. */
.painel-voltar:hover,
.painel-voltar:focus-visible {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
  text-decoration: underline;
}

/* Região viva dos recados. Vazia, ela some visualmente mas CONTINUA renderizada:
 * uma região viva que nasce com `display: none` não é observada pelo leitor de
 * tela, e o recado que aparecesse depois passaria em silêncio. */
.painel-recado:empty {
  padding: 0;
  background: none;
  border: 0;
}

.painel-recado {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel-fundo);
  color: var(--texto);
}

/* A saída para hoje, quando uma leitura falha e as duas setas ficam desligadas. É
 * link, e não botão: ela é oferecida justamente no estado em que o painel pode nem
 * estar de pé, e uma navegação completa não depende de nada da tela ter sobrado.
 *
 * `display: block` porque ela vem depois de uma frase e antes de nada: em linha, ela
 * grudaria no fim do texto de erro e pareceria parte dele. Os 44px vêm de `.alvo`, em
 * `base.css`, porque link não recebe o alvo de toque da regra de `button`. */
.painel-saida {
  display: block;
  margin-block-start: var(--esp-2);
  color: var(--realce);
}

.painel-painel {
  display: grid;
  gap: var(--esp-6);
  /* Sem isto, um item de grid tem largura mínima igual à do conteúdo, e o nome
   * mais longo de uma tarefa empurraria a coluna inteira para fora da tela — a
   * rolagem apareceria no corpo da página, que é o que esta folha promete não
   * acontecer. */
  min-width: 0;
}

.painel-secao {
  display: grid;
  gap: var(--esp-4);
  align-content: start;
  min-width: 0;
  padding: clamp(var(--esp-4), 3vw, var(--esp-5));
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--elevacao-repouso);
}

/* ─────────────────────────── a navegação por data */

/* A data no meio, uma seta de cada lado — o molde exato de `.meu-dia-navegacao`,
 * e é de propósito: as duas telas de dia navegam igual porque são a mesma
 * navegação, e desenhá-las diferente faria o pai aprender duas vezes a mesma
 * coisa. `flex` com `wrap`, e não uma grade de três colunas: numa grade as setas
 * ficam presas às bordas e a data espremida no meio; aqui ela cresce para ocupar
 * o que sobra e, quando nem isso basta, a linha quebra — sem @media.
 *
 * A ordem visual é a ordem do documento (anterior, data, seguinte), então a
 * navegação por Tab passa pelas setas na mesma sequência em que o olho as vê. É o
 * que dispensa qualquer `tabindex`. */
.painel-navegacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2) var(--esp-3);
  min-width: 0;
}

/* A data por extenso, título da seção. `flex: 1 1 12ch` dá a ela a preferência
 * pelo espaço livre e uma base pequena o bastante para uma data longa caber numa
 * tela de 360px quebrando em duas linhas, em vez de empurrar a seta para fora.
 * `min-width: 0` porque um item de flex não encolhe abaixo do conteúdo sem isso,
 * e o corpo da página nunca rola horizontalmente. */
.painel-data {
  flex: 1 1 12ch;
  min-width: 0;
  text-align: center;
  color: var(--texto);
}

/* As setas, no molde exato de `.painel-voltar`: pílula com borda, fundo de painel
 * e texto em realce. Os 44px de altura vêm da regra de `button` em `base.css` —
 * um `button` os recebe de graça. `flex: none` para a seta não encolher quando a
 * data for longa: um alvo de toque que muda de tamanho com o texto ao lado é um
 * alvo que um dia fica menor que o mínimo. */
.painel-seta {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--realce);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* O `:not(:disabled)` no hover existe para a seta desabilitada não fingir que
 * responde ao mouse; no foco ele não é preciso, porque botão desabilitado não
 * recebe foco. O anel de foco de verdade continua sendo o de `base.css`. */
.painel-seta:hover:not(:disabled),
.painel-seta:focus-visible {
  border-color: var(--realce);
  box-shadow: var(--elevacao-interativo);
}

/* Em hoje, a seta de avançar fica desabilitada: não se passa de hoje, e quem
 * decide isso é o `seguinte: null` que o servidor mandou. O estado é marcado pela
 * perda de todo o desenho de controle, e não por cor de alerta: não há erro nenhum
 * em estar no dia de hoje. Sem `cursor: not-allowed`, pelo mesmo motivo que as
 * outras folhas já escrevem: o cursor de proibido lê como "você errou". */
.painel-seta:disabled {
  border-color: transparent;
  color: var(--suave);
  cursor: default;
}

/* ───────────────────────────────── as colunas */

/* Uma coluna por filho. A grade vem de `.grade`, em `base.css`, que o HTML
 * carrega na mesma lista de classes — `auto-fit` com `minmax(min(280px, 100%),
 * 1fr)`, sem @media. Reusar em vez de redeclarar é a decisão: uma segunda grade
 * escrita aqui teria de concordar com aquela para sempre, e a divergência
 * apareceria só na largura em que uma das duas quebra.
 *
 * `align-items: start` para uma coluna com três cartões não esticar a de um
 * cartão até a mesma altura — colunas de alturas diferentes dizem, de relance,
 * que os dois dias são diferentes, que é a informação. */
.painel-colunas {
  align-items: start;
  min-width: 0;
}

.painel-coluna {
  display: grid;
  gap: var(--esp-2);
  align-content: start;
  min-width: 0;
}

.painel-coluna-nome {
  min-width: 0;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* "Última atividade há 12 min", ou a frase do dia sem atividade. `--suave` porque
 * ela é secundária ao nome do filho: o olho procura de quem é a coluna e depois
 * confirma se mexeu. O par medido é `#5B6486` sobre `--painel` (`#FFFFFF`) no
 * claro, 5,81:1, e o do tema escuro está medido em `tokens.css` — os dois acima
 * do 4,5:1 de AA, que é o piso do épico.
 *
 * `overflow-wrap` porque a frase é curta hoje e a coluna promete 280px sem
 * rolagem horizontal em qualquer frase que uma história futura acrescente. */
.painel-atividade {
  min-width: 0;
  color: var(--suave);
  overflow-wrap: anywhere;
  margin-block-end: var(--esp-1);
}

/* "Rodrigo não tem tarefas hoje." e "Nenhum filho vinculado ainda." Vazio é fato,
 * e não erro: sem cor de alerta, sem ilustração e sem sugestão de ação, como o
 * épico manda. */
.painel-vazio {
  min-width: 0;
  color: var(--suave);
  overflow-wrap: anywhere;
}

/* ───────────────────────────────── a lista de cartões */

.painel-lista {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
  /* A marcação é `ul` porque as tarefas do dia são itens do mesmo conjunto — é
   * isso que faz o leitor de tela anunciar quantas são antes da primeira. O
   * marcador some porque o cartão já delimita cada item para o olho. */
  list-style: none;
}

/* O cartão de tarefa, com a faixa lateral de 4px na cor da tarefa. A cor vem da
 * propriedade que `painel.js` põe no elemento a partir do nome gravado; o
 * `--borda` de reserva vive dentro do `var()` que o JavaScript escreve, e o
 * `var(--cor-tarefa, …)` daqui só responde por elemento que ele não alcançou.
 *
 * `border-inline-start`, e não `border-left`: a faixa acompanha a direção da
 * escrita, e é a mesma propriedade que `meu-dia.css` e `tarefas.css` usam no
 * mesmo cartão visto de outros dois lados. */
.painel-item {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-inline-start: 4px solid var(--cor-tarefa, var(--borda));
  border-radius: var(--raio-md);
  background: var(--painel-fundo);
}

/* O cartão feito, marcado por **atributo** e não por classe.
 *
 * Quem escreve o estado escreve um valor, e não gerencia uma lista de classes que
 * precisa lembrar de tirar a anterior — `painel.js` faz `item.dataset.estado =
 * tarefa.estado` e o seletor responde sozinho. **A previsão desta folha se
 * cumpriu**: o terceiro estado da 2.11 entrou como a regra logo abaixo, e não como
 * uma segunda classe que alguém teria de lembrar de remover. O atributo é sempre
 * reescrito por inteiro.
 *
 * (O que mudou desde a 2.10 é a fonte do valor: era `tarefa.status`, e passou a ser
 * `tarefa.estado` — o campo novo que a rota monta com `estadoDoCartao`. `status`
 * continua chegando, cru e com dois valores, e nenhuma regra desta folha o lê.)
 *
 * **A cor não é a informação, é o reforço.** Quem diz que a tarefa está feita é a
 * linha de texto logo abaixo — o ✓ e o motivo por extenso —, e essa linha existe
 * justamente para o estado sobreviver ao monocromático, ao daltonismo e ao modo de
 * alto contraste.
 *
 * `--certo-suave` é `#DFF6E9` no claro e `#0E2E1E` no escuro, e nos dois o texto é
 * `--texto`: no escuro o par mede 12,81:1, medido em `tokens.css`. A faixa lateral
 * continua sendo a cor da tarefa — o estado troca a superfície, e não a identidade
 * do cartão. */
.painel-item[data-estado="feita"] {
  background: var(--certo-suave);
}

/* O cartão perdoado. **A terceira posição do `data-estado`, e exatamente a "regra a
 * mais" que o bloco acima reservou desde a 2.10.**
 *
 * Perdoada não é feita nem pendente: ela é derivada da existência de um perdão ativo
 * e chega no campo `estado`, montado por `estadoDoCartao` em
 * `servidor/dominio/fechamento.js`. `dia_tarefa.status` continua valendo `pendente`
 * ou `feita` e não sabe nada disso — e é por isso que esta regra tem um valor novo
 * sem que nenhuma coluna tenha mudado de vocabulário.
 *
 * **O cartão perdoado não leva ✓, e é decisão e não esquecimento.** `.painel-item-marca`
 * existe e continua sendo montada só no cartão **feito**: a marca de verificação diz
 * "isto foi feito", e pô-la num cartão perdoado afirmaria exatamente o que o perdão
 * não afirma — o épico é explícito ("perdoada é um estado próprio, nem feita nem
 * pendente"), e uma tarefa pode estar perdoada **e** fechada sem que a tela precise
 * dizer as duas coisas. Quem comunica o estado aqui é a frase escrita na linha de
 * estado ("Perdoada em …"), com a cor só reforçando: UX-DR8 trava que estado nunca é
 * comunicado só por cor, e num cartão sem glifo isso é ainda mais literal.
 *
 * `--perdao-suave` é `#FEF1DC` no claro e `#33260C` no escuro. A linha de estado usa
 * `--suave` sobre ele, e o par foi **medido** nos dois temas: claro `#5B6486` sobre
 * `#FEF1DC` = 5,21:1; escuro `#98A0BF` sobre `#33260C` = 5,70:1. Os dois acima do
 * 4,5:1 de AA para texto pequeno, então a linha continua em `--suave` e não precisou
 * trocar para `--texto`. O motivo do perdão, logo abaixo dela, é `--texto` sobre a
 * mesma superfície — 15,47:1 no claro e 12,85:1 no escuro (este último já estava em
 * `tokens.css`) — porque ele é a coisa que o pai veio ler, e não uma nota de rodapé.
 *
 * A faixa lateral continua sendo a cor da tarefa, como nos outros dois estados: o
 * estado troca a superfície, e não a identidade do cartão. */
.painel-item[data-estado="perdoada"] {
  background: var(--perdao-suave);
}

.painel-item-nome {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  min-width: 0;
  color: var(--texto);
}

/* O cabeçalho do cartão é um `button`: ele abre e fecha o lado de dentro, e um
 * botão de verdade traz de graça a ordem de tabulação, o Enter, o Espaço e o
 * anúncio de controle que um `div` com ouvinte teria de imitar à mão.
 *
 * O que esta regra faz é desfazer a aparência de botão, e só ela: fundo
 * transparente, sem borda, texto alinhado ao começo da linha e largura inteira. O
 * cartão já é a superfície; um segundo retângulo desenhado dentro dele faria a
 * coluna parecer uma pilha de formulários.
 *
 * Sem `font` e sem `cursor` aqui de propósito: `base.css` já dá `font: inherit` e
 * `cursor: pointer` a todo `button`, na especificidade de **elemento** — e repetir
 * `font: inherit` numa classe ganharia de `.subtitulo`, que o cartão carrega no
 * mesmo elemento, apagando o peso 600 que distingue o nome da contagem ao lado. */
.painel-item-cabecalho {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
}

/* Hover e foco compartilham o tratamento: nenhuma afordância existe só no hover.
 * O sublinhado é o reforço, e o anel de `base.css` é a informação. */
.painel-item-cabecalho:hover,
.painel-item-cabecalho:focus-visible {
  text-decoration: underline;
}

/* Quantos anexos o cartão tem. Empurrada para o fim da linha porque ela é
 * resposta, e não título: o olho procura o nome à esquerda e confirma a contagem à
 * direita. `flex: none` para não encolher quando o nome for longo, e `--suave`
 * porque ela é secundária ao nome. Ela fica **dentro** do botão de propósito:
 * assim entra no nome acessível dele. Vazia, não ocupa nada. */
.painel-item-contagem {
  margin-inline-start: auto;
  flex: none;
  color: var(--suave);
  font-size: 14px;
  font-weight: 400;
}

/* O emoji. Maior que o corpo do texto porque ele é o reconhecimento de relance, e
 * `flex: none` para não encolher quando o nome for longo. */
.painel-item-icone {
  font-size: 20px;
  line-height: 1.2;
  flex: none;
}

.painel-item-descricao {
  min-width: 0;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* A linha de estado: "Pendente." ou "Feita: por declaração — marcada em …".
 *
 * **Ela é escrita sempre**, ao contrário da irmã de `meu-dia.css`, que nasce
 * escondida no cartão pendente. Lá o cartão pendente é o estado de partida do dia
 * e a linha vazia é o repouso; aqui o pai lê a coluna para saber o que aconteceu,
 * e "não aconteceu nada" é a resposta, não a ausência dela.
 *
 * `--suave` no texto porque ela é secundária ao nome da tarefa. Os **três** pares
 * que a tela de fato renderiza estão acima do 4,5:1 de AA: no cartão pendente,
 * `#5B6486` sobre `--painel-fundo` (`#EDEFF7`) dá 5,06:1; no cartão feito,
 * `#5B6486` sobre `--certo-suave` (`#DFF6E9`) dá 5,13:1; no cartão perdoado, que a
 * 2.11 trouxe, `#5B6486` sobre `--perdao-suave` (`#FEF1DC`) dá 5,21:1. No tema
 * escuro os três pares correspondentes estão medidos em `tokens.css`, em
 * `meu-dia.css` e na regra de `[data-estado="perdoada"]` lá em cima — o do perdão
 * mede 5,70:1.
 *
 * `overflow-wrap` porque esta é a linha mais longa do cartão — motivo mais
 * instante —, e a coluna promete 280px sem rolagem horizontal. */
.painel-item-estado {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  min-width: 0;
  color: var(--suave);
  overflow-wrap: anywhere;
}

/* O ✓, na cor de correção. `flex: none` para ele não encolher quando a frase for
 * longa, e é a única coisa desta linha que muda de cor: o texto ao lado fica em
 * `--suave` porque é ele que carrega a informação e precisa ser lido, não notado. */
.painel-item-marca {
  flex: none;
  color: var(--certo);
  font-weight: 600;
}

/* A justificativa e o motivo do perdão, os dois visíveis no cartão fechado.
 *
 * A justificativa é a frase que o filho escreveu explicando o que não deu, e é a
 * coisa que o pai veio ler: enterrá-la atrás de um clique custaria um clique por
 * cartão num dia inteiro. **O motivo do perdão entrou na mesma lista pela razão
 * simétrica**, e ela não é a mesma: aquele texto o pai escreveu, e o que ele lê ali
 * é o que ele mesmo decidiu — mas é ele que sustenta o estado do cartão, porque a
 * superfície âmbar diz "perdoada" e sozinha não diz por quê. Escondê-lo no detalhe
 * deixaria o único cartão colorido da coluna sem a explicação da cor. É a mesma
 * decisão que `meu-dia.css` toma do outro lado, e ali ela é mais forte: o motivo é
 * obrigatório justamente para o filho ler (UX-DR26), e o que exige um clique para
 * aparecer não é visível.
 *
 * `--texto`, e não `--suave` como a linha de estado logo acima: os dois são texto de
 * gente e são o conteúdo, e não o rótulo dele. Sobre `--perdao-suave` o par mede
 * 15,47:1 no claro e 12,85:1 no escuro.
 *
 * `pre-line` porque a quebra de linha que a pessoa digitou é dela, e reproduzi-la
 * por marcação montada em JavaScript seria, por um caminho lateral, o que o
 * `textContent` existe para não fazer. `overflow-wrap` porque texto ditado chega
 * com palavras longas sem espaço. */
.painel-item-justificativa,
.painel-item-perdao,
.painel-justificativa,
.painel-comentario {
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--texto);
}

/* ───────────────────────────────── o lado de dentro do cartão */

/* A linha acima separa o de dentro do de fora sem uma segunda superfície: um
 * painel com fundo próprio dentro de um cartão que já tem fundo próprio é a caixa
 * dentro da caixa que faz uma lista de tarefas parecer um formulário aninhado.
 * `border-block-start`, e não `border-top`, pela mesma razão do
 * `border-inline-start` da faixa. */
.painel-item-detalhe {
  display: grid;
  gap: var(--esp-3);
  min-width: 0;
  margin-block-start: var(--esp-2);
  padding-block-start: var(--esp-3);
  border-block-start: 1px solid var(--borda);
}

/* Cada bloco de dentro — comentários, justificativa, anexos — com o próprio
 * espaçamento, mais curto que o `gap` do detalhe: aquele é o respiro **entre** os
 * blocos, e este é o de dentro de um deles. */
.painel-bloco {
  display: grid;
  gap: var(--esp-1);
  min-width: 0;
}

/* O rótulo do bloco. `--suave` e menor porque ele nomeia, e o que informa é o
 * conteúdo abaixo. Ele é um cabeçalho de verdade na marcação, e é por isso que o
 * peso não é o do corpo: quem navega por cabeçalho o encontra. */
.painel-bloco-rotulo {
  min-width: 0;
  color: var(--suave);
  font-weight: 600;
}

.painel-comentarios,
.painel-anexos {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  list-style: none;
}

/* Cada anexo é um link com corpo de alvo de toque: 44px valem para qualquer alvo
 * de clique, e um link não recebe isso da regra de `button` de `base.css`.
 * `overflow-wrap` porque nome de arquivo vem de câmera e de aplicativo de
 * mensagem, e chega com trinta caracteres sem espaço nenhum — sem ele, o cartão
 * empurraria a coluna inteira para fora da tela. */
.painel-anexo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 0;
  color: var(--realce);
  overflow-wrap: anywhere;
}

/* Hover e foco compartilham o tratamento. Aqui o sublinhado é o repouso — é um
 * link dentro de um bloco de texto, e sem ele a cor sozinha teria de dizer que é
 * clicável, que é justamente o que o épico proíbe. */
.painel-anexo:hover,
.painel-anexo:focus-visible {
  text-decoration: underline;
}

/* "Nada escrito nem anexado nessa tarefa." Fato, e não erro: sem cor de alerta,
 * pelo mesmo motivo de `.painel-vazio`. */
.painel-detalhe-vazio {
  min-width: 0;
  color: var(--suave);
  overflow-wrap: anywhere;
}

/* ───────────────────────────────── a ação do pai: perdoar e desfazer */

/* A fila da ação do cartão. **É a primeira coisa desta tela que escreve**, e o
 * cabeçalho de `publico/js/painel.js` deixou de dizer que ela não escreve nada.
 *
 * Ela é **irmã do cabeçalho**, e não filha do detalhe: o botão de perdoar precisa
 * ser alcançável num dia de cartões fechados, que é como a coluna passa a maior
 * parte do tempo, e enterrá-lo atrás do clique de expandir custaria dois gestos por
 * tarefa numa tela em que o pai percorre três colunas. Como são irmãos, a regra do
 * épico — "os botões de ação nunca disparam pelo clique no cartão" — continua
 * valendo sem ouvinte nenhum a mais: quem tem ouvinte de clique é o cabeçalho, e ele
 * é um elemento ao lado.
 *
 * É o molde literal de `.meu-dia-item-acao`, e a lista de declarações é a mesma pelo
 * mesmo argumento. `flex-wrap` porque numa tela de 360px — ou numa coluna de 280px,
 * que é a promessa desta tela — um botão de rótulo longo desce em vez de empurrar o
 * cartão para fora. `justify-content: start` (que é o padrão do flex, e por isso não
 * está escrito) mais `flex: none` no botão fazem o botão ter a largura do texto dele:
 * um botão da largura da coluna lê como barra de ação, e não como "eu decidi isto".
 *
 * Há **um** botão aqui, e não dois: "Perdoar" quando a tarefa não está perdoada e
 * "Desfazer perdão" quando está. São ações sobre estados mutuamente exclusivos, e a
 * troca de rótulo é o que informa quem voltou o foco ao botão sobre o que ele pode
 * fazer agora — o mesmo argumento, com as mesmas palavras, do botão de finalizar do
 * aluno. O alvo de 44px vem de `base.css`, que o dá a todo `button`. */
.painel-item-acao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  min-width: 0;
  margin-block-start: var(--esp-1);
}

/* O botão da ação: a **forma** do molde primário — as mesmas medidas, o mesmo raio,
 * o mesmo peso — na **cor própria** do estado que ele produz, e não no índigo de
 * ação.
 *
 * É a mesma decisão que UX-DR11 impôs ao botão "Finalizado" da tela do aluno, pelo
 * mesmo motivo de hierarquia: `--realce` é a cor de "Enviar" logo abaixo, dentro do
 * mesmo cartão, e pintar com ela o gesto que decide o dia faria os dois disputarem a
 * mesma leitura. Em `--perdao` ele é o único assim na folha, e a cor já é a do
 * estado que o clique produz: a superfície do cartão perdoado sai do mesmo par de
 * tokens, e o botão anuncia para onde o cartão vai.
 *
 * `--perdao` é `#B45309` no claro e `#FCD34D` no escuro, e o texto sobre ele **não**
 * pode ser branco fixo pela razão que `--sobre-realce` e `--sobre-certo` já escrevem
 * em `tokens.css`: no escuro o token clareia e o branco cairia longe do AA. O par é
 * `--painel` sobre `--perdao`, que no claro é `#FFFFFF` sobre `#B45309` = 5,02:1 e
 * no escuro é `#1B1E2D` sobre `#FCD34D` = 11,47:1 — os dois acima do 4,5:1, e sem
 * inventar um token `--sobre-perdao` que o DESIGN.md não publica. `--painel` serve
 * de "cor sobre o perdão" porque ele já é o par claro/escuro invertido de que se
 * precisa: branco no tema claro, quase-preto no escuro.
 *
 * `transition` só em `box-shadow` e `filter`, como os outros botões desta folha:
 * movimento marca conquista e não rotina, e nada aqui muda de posição. */
.painel-item-acao-botao {
  flex: none;
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--perdao);
  border-radius: var(--raio-sm);
  background: var(--perdao);
  color: var(--painel);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

/* Hover e foco compartilham a elevação; o anel de foco de `base.css` continua sendo
 * o que informa, e nenhuma afordância existe só no hover. */
.painel-item-acao-botao:hover:not(:disabled),
.painel-item-acao-botao:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.06);
}

/* Desabilitado enquanto o pedido sobe. `cursor: default` e não `not-allowed`: ela
 * não errou, está esperando. */
.painel-item-acao-botao:disabled {
  filter: grayscale(0.35);
  opacity: 0.7;
  cursor: default;
}

/* ──────────────────────── o formulário do motivo, dentro do detalhe */

/* O bloco de escrever o motivo: rótulo, campo e botão.
 *
 * Ele é o quarto `blocoDoDetalhe` do cartão, e **não** é irmão do cabeçalho como a
 * fila de ação: o campo só faz sentido depois de a pessoa ter decidido perdoar, e um
 * `textarea` aberto em todos os cartões de três colunas transformaria o painel numa
 * pilha de formulários. Quem o revela é o botão "Perdoar", que abre o detalhe e leva
 * o foco até aqui.
 *
 * `grid` e não `flex`, no molde de `.meu-dia-justificativa-bloco`, porque o campo
 * ocupa a linha inteira: um `textarea` de três linhas ao lado de um botão deixaria os
 * dois estreitos numa coluna de 280px. O botão vem depois, e `justify-items: start`
 * é o que o impede de esticar de ponta a ponta — um botão da largura do cartão lê
 * como barra de ação, e não como "enviar o que eu escrevi". */
.painel-perdao-bloco {
  display: grid;
  gap: var(--esp-2);
  justify-items: start;
  min-width: 0;
}

/* O rótulo visível do campo. É um `<label for>` de verdade — o texto que o leitor de
 * tela anuncia é o mesmo que a pessoa lê, e clicar nele põe o cursor no campo. */
.painel-perdao-rotulo {
  color: var(--texto);
  cursor: pointer;
}

/* O campo do motivo, no molde exato dos dois `textarea` de `meu-dia.css`.
 *
 * **O piso de 44px é escrito aqui porque a regra de `base.css` não alcança
 * `textarea`**: aquela lista enumera `button`, `[role="button"]`, os três `input` de
 * botão, `select` e `.alvo`. Três linhas já passam disso com folga na prática, e
 * mesmo assim o piso fica: `rows` é sugestão que um `font-size` menor ou um zoom de
 * sistema encolhem, e o alvo de toque é promessa do épico, não consequência de uma
 * altura de linha.
 *
 * `width: 100%` mais `box-sizing` herdado do reset porque o campo é a linha inteira
 * do bloco, e `min-width: 0` porque um item de grid não encolhe abaixo do conteúdo
 * sem isso — o conteúdo aqui é uma palavra que a pessoa não escolheu ter longa.
 *
 * `resize: vertical` e não `both`: quem escreve um motivo longo quer mais altura, e
 * arrastar a largura para fora do cartão devolveria a rolagem horizontal que este
 * layout promete não ter. */
.painel-perdao-campo {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--esp-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--painel);
  color: var(--texto);
  font: inherit;
  resize: vertical;
}

/* Desabilitado enquanto o perdão sobe, no mesmo tratamento do botão. Sem esta regra
 * o campo ficava com a aparência exata de um campo vivo — `background` e `color`
 * estão escritos acima, e escrevê-los é o que desliga o cinza que o navegador daria
 * de graça —, de modo que a pessoa continuava digitando e via cada tecla ser
 * recusada sem nada dizer por quê. */
.painel-perdao-campo:disabled {
  background: var(--painel-fundo);
  color: var(--suave);
  cursor: default;
}

/* O botão de enviar o motivo. Ele é secundário ao "Perdoar" da fila de cima — ele
 * confirma um gesto que já começou —, e por isso ele é o índigo de ação e não o
 * âmbar do perdão: dois botões âmbar no mesmo cartão disputariam a decisão. É o
 * molde de `.meu-dia-justificativa-botao`, com `--sobre-realce` no texto porque no
 * tema escuro o realce clareia e um branco fixo cairia abaixo do AA. */
.painel-perdao-botao {
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--realce);
  border-radius: var(--raio-sm);
  background: var(--realce);
  color: var(--sobre-realce);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: box-shadow 120ms ease, filter 120ms ease;
}

.painel-perdao-botao:hover:not(:disabled),
.painel-perdao-botao:focus-visible {
  box-shadow: var(--elevacao-interativo);
  filter: brightness(1.06);
}

.painel-perdao-botao:disabled {
  filter: grayscale(0.35);
  opacity: 0.7;
  cursor: default;
}