/* ==========================================================================
   COMPONENTE — uc-aviso
   O painel de VAZIO e de ERRO de uma superficie que busca dado.

   ==========================================================================
   POR QUE ELE EXISTE, E POR QUE AGORA
   ==========================================================================
   Ele nao e' componente novo: e' um componente que ja estava escrito dentro
   do `chip.css` com o nome `.uc-chips__aviso`, porque a tarefa C precisou
   dele e nao havia dono. A tarefa E precisa do MESMO painel para a grade de
   cartoes -- e as tarefas F ate I precisam dele para secao, capa, prova e
   simulado. Sao NOVE superficies com os cinco estados obrigatorios, e cada
   uma delas tem um vazio e um erro.

   Copiar as ~50 linhas para `cartao.css` seria criar a divida que a tarefa C
   declarou na secao 13 do relatorio dela (dois componentes desenhando o mesmo
   controle porque a ordem das tarefas separou os donos) e que a tarefa D teve
   de pagar depois, com o `.uc-rotulo__acao` + `.uc-chips__acao` virando
   `uc-botao`. A diferenca e' que ali havia uma tarefa DONA marcada no plano
   (a D, do botao) e aqui NAO HA: "aviso" nao esta na lista A-I. Declarar a
   divida sem dono nao a paga -- so' garante que ela chegue em nove copias.

   ⚠️ A MUDANCA FOI SEGURA POR CAUSA DA R12. Renomear classe em template e'
   exatamente o tipo de mudanca que erra em silencio: um `uc-chips__titulo`
   esquecido continua sendo um <p> com texto, so' que sem estilo. A R12, que
   nasceu nesta mesma tarefa, acusa cada nome que ficou para tras. E' o
   primeiro uso real dela, e ela pagou o proprio custo na primeira hora.

   ==========================================================================
   SEVERIDADE: DO HOSPEDEIRO, NAO DE UM MODIFICADOR PARALELO
   ==========================================================================
   Um `.uc-aviso--erro` obrigaria o hospedeiro a escrever DUAS vezes que esta
   em erro -- uma no `data-uc-estado="erro"` da superficie (a convencao que a
   tarefa C fixou: estado e' da superficie que busca dado) e outra na classe
   do painel. Duas fontes da verdade sobre o mesmo fato, que podem divergir.

   Aqui a severidade DESCE do estado da superficie, com um seletor que nao
   nomeia hospedeiro nenhum:

     [data-uc-estado="erro"] .uc-aviso__icone   -> cor de erro

   Serve `uc-chips`, `uc-cartoes` e as sete superficies que ainda nao
   existem, sem uma linha por hospedeiro.
   ========================================================================== */

/* O painel ocupa a linha inteira: aviso espremido ao lado de um item vira
   rodape de tabela, e ninguem le rodape de tabela.
   16px da superficie ate aqui (--sp-4), contra 8px entre itens: sao coisas
   diferentes, e espacamento igual nao agruparia nada.
   SEVERIDADE CASADA COM O ESCOPO: isto e' um painel de SECAO, nao de pagina.
   Sem titulo gigante, sem ilustracao, sem botao principal -- o resto da tela
   continua funcionando, e um alarme do tamanho da pagina para uma secao
   treinaria a pessoa a ignorar alarme. */
.uc-aviso{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-2);
  align-items:start;
  width:100%;
  min-width:0;
  /* ⛔ `width:100%` NAO BASTA QUANDO O HOSPEDEIRO E' UMA GRADE, e isso foi
     visto na captura: dentro de `.uc-cartoes` o painel virou ITEM DE GRADE e
     ocupou UM TRILHO -- 243px de 1.020px. Ou seja, exatamente o "aviso
     espremido ao lado de um item" que o comentario acima diz que nao pode
     acontecer. No `.uc-chips` isso nao aparecia porque la o container e'
     flex, e ali 100% e' 100% da linha.
     `grid-column:1/-1` fica AQUI e nao em `cartao.css` pelo mesmo motivo que
     fez o `justify-self:start` sair do `chip.css` e virar default do
     `uc-botao` na tarefa D: "ocupo a linha inteira" descreve O COMPONENTE,
     nao aquele hospedeiro. Escrita no hospedeiro, a regra teria de ser
     lembrada por cada uma das nove superficies das tarefas F-I; escrita aqui,
     vale para todas. E' INERTE fora de uma grade (flex e bloco ignoram
     grid-column), entao nao custa nada onde nao serve. */
  grid-column:1/-1;
  margin-top:var(--sp-4);
  padding:var(--sp-4);
  border-radius:var(--uc-r-3);
  background:var(--uc-paper-2);
}

/* No estado VAZIO o painel e' a unica coisa da superficie: nao ha nada acima
   para se afastar. */
[data-uc-estado="vazio"] .uc-aviso{
  margin-top:0;
}

.uc-aviso__icone{
  flex:none;
  width:16px;
  height:16px;
  /* O icone acompanha a cor. Quem nao distingue a cor continua vendo a FORMA
     (circulo com barra = nada aqui; circulo com exclamacao = deu erro) e o
     titulo escrito logo ao lado. */
  color:var(--uc-ink-3);
}

[data-uc-estado="erro"] .uc-aviso__icone{
  color:var(--uc-errado);
}

.uc-aviso__corpo{
  display:grid;
  gap:var(--sp-2);
  min-width:0;
}

.uc-aviso__titulo{
  margin:0;
  color:var(--uc-ink);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-anunciar);
  line-height:var(--uc-lh-controle);
}

.uc-aviso__nota{
  margin:0;
  max-width:var(--uc-medida);
  color:var(--uc-ink-2);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-ler);
  line-height:var(--uc-lh-normal);
}

/* A ACAO DE RECUPERACAO nao mora aqui: e' `uc-botao--texto`, decidido na
   tarefa D. Painel que ja tem uma superficie propria nao pede uma moldura
   dentro dele -- e um segundo desenho de controle de acao seria de novo a
   divida que este arquivo existe para nao repetir. */