/*
 * CassiellOS — Loading & Async States, a camada visual.
 *
 * Carrega DEPOIS de `brand.css`: todos os valores abaixo saem dos tokens oficiais, e nenhum
 * hexadecimal de marca é reescrito aqui. Quando o Brand Book mudar um token, isto acompanha.
 *
 * REGRA QUE GOVERNA O ARQUIVO INTEIRO
 * -----------------------------------
 * O loading não pode chamar mais atenção que o conteúdo que ele está substituindo. Skeleton é
 * ausência desenhada, não é um efeito. Por isso: sem contraste agressivo, sem faixa brilhante
 * atravessando a tela, e Signal Red nunca como shimmer — ele é acento de marca, e um vermelho
 * pulsando numa lista de espera lê como alarme.
 */

/* ============================================================ tokens do sistema de espera */
:root{
  /* O bloco de skeleton vive sobre os painéis navy. Mist em opacidade muito baixa dá exatamente
     a leitura de "aqui vai entrar conteúdo" sem virar um retângulo claro no meio do escuro. */
  --cs-skel-base:rgba(220,227,238,.055);
  --cs-skel-brilho:rgba(220,227,238,.115);
  --cs-skel-raio:8px;
  --cs-espera-texto:var(--cassiellos-gray,#A8B4C9);
  --cs-linha:var(--cassiellos-line,#263650);
}

/* ============================================================ acessibilidade */

/* A região de anúncio existe para o leitor de tela e para mais ninguém. `clip` em vez de
   `display:none` porque conteúdo escondido de verdade não é lido. */
.cs-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================ skeleton */

.cs-skel{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}

.cs-skel-linha{
  height:11px;border-radius:var(--cs-skel-raio);
  background:var(--cs-skel-base);
  background-image:linear-gradient(90deg,transparent 0,var(--cs-skel-brilho) 50%,transparent 100%);
  background-size:220% 100%;background-repeat:no-repeat;background-position:-120% 0;
  animation:cs-shimmer 1.65s ease-in-out infinite;
}
/* Geometria aproximada do conteúdo real — o objetivo é o dado entrar sem empurrar nada. */
.cs-skel-linha--titulo{height:13px;width:62%}
.cs-skel-linha--meta{height:9px;width:38%;opacity:.72}
.cs-skel-linha--rotulo{height:9px;width:52%;opacity:.72}
.cs-skel-linha--numero{height:22px;width:44%;margin:7px 0 5px}

.cs-skel-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}

.cs-skel-marca,.cs-skel-icone{
  flex:none;border-radius:11px;background:var(--cs-skel-base);
  animation:cs-respirar 2.4s ease-in-out infinite;
}
.cs-skel-marca{width:34px;height:34px}
.cs-skel-icone{width:45px;height:45px}

.cs-skel-badge{
  flex:none;width:58px;height:20px;border-radius:6px;background:var(--cs-skel-base);
  animation:cs-respirar 2.4s ease-in-out infinite;
}

/* item: a linha de lista (atividade, produção do dia, arquivo do Drive) */
.cs-skel-item{
  display:flex;align-items:center;gap:11px;
  min-height:55px;padding:8px 9px;border-bottom:1px solid var(--cs-linha);
}
.cs-skel-item:last-child{border-bottom:0}

/* kpi: o cartão de número do topo da Dashboard */
.cs-skel-kpi{
  display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;
  min-height:122px;padding:19px;border-radius:14px;
  border:1px solid var(--cs-linha);background:rgba(220,227,238,.02);
}

/* cartao: o cartão do board do TaskFlow */
.cs-skel-cartao{
  display:flex;flex-direction:column;gap:9px;
  min-height:74px;padding:13px;border-radius:11px;
  border:1px solid var(--cs-linha);background:rgba(220,227,238,.02);
}

/* bloco: um parágrafo de conteúdo (prévia de importação, detalhe) */
.cs-skel-bloco{display:flex;flex-direction:column;gap:9px;padding:14px 0}

/*
 * Os skeletons herdam a grade de quem os hospeda quando ela existe — assim a Dashboard não vê
 * quatro KPIs empilhados durante a espera e alinhados depois.
 */
.dashboard-kpis .cs-skel{display:contents}
.media-folders-grid .cs-skel,.drive-grid .cs-skel{display:contents}

/* ============================================================ mensagem contextual */

/*
 * Só aparece a partir de ~1,5s (quem decide é `loading.js`). Antes disso a espera é curta demais
 * para merecer uma frase — e uma frase que pisca é pior que nenhuma.
 */
.cs-mensagem{
  margin:14px 0 2px;color:var(--cs-espera-texto);
  font-size:12px;line-height:1.5;font-family:var(--cassiellos-font-body,Inter,Arial,sans-serif);
}

/* ============================================================ indicador discreto */

/*
 * Três pontos da paleta oficial, respirando fora de fase. É o indicador de operação em curso
 * dentro de botões e barras de status. A Órbita não desce até aqui.
 */
.cs-indicador{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.cs-indicador i{
  width:5px;height:5px;border-radius:50%;display:block;
  animation:cs-respirar 1.25s ease-in-out infinite;
}
.cs-indicador i:nth-child(1){background:var(--cassiellos-flow-cyan,#22C7F2)}
.cs-indicador i:nth-child(2){background:var(--cassiellos-system-blue,#246BFF);animation-delay:.16s}
.cs-indicador i:nth-child(3){background:var(--cassiellos-system-violet,#7B35F5);animation-delay:.32s}
.cs-indicador-texto{margin-left:8px;color:var(--cs-espera-texto);font-size:12px}

/* ============================================================ ação em botão */

/*
 * O botão em execução continua legível: ele não some, não encolhe e não troca de cor de marca.
 * `cursor:progress` diz o que está acontecendo sem precisar de texto extra.
 */
.cs-acao-ocupada{cursor:progress!important;opacity:.82}
.cs-acao-ocupada:disabled{opacity:.82}

/* ============================================================ desfechos */

/*
 * EMPTY, ERROR, DEGRADED e UNKNOWN têm desenhos diferentes DE PROPÓSITO. Foi um erro desenhado
 * como vazio que fez o operador acreditar num dia sem entregas; enquanto os quatro não puderem
 * ser confundidos visualmente, aquele defeito não volta pela porta da frente.
 */
.cs-vazio,.cs-erro,.cs-degradado,.cs-desconhecido{
  padding:18px;border-radius:12px;font-size:13px;line-height:1.55;
  border:1px solid var(--cs-linha);
}
.cs-vazio{color:var(--cs-espera-texto);background:rgba(220,227,238,.025);text-align:center}

.cs-erro,.cs-degradado,.cs-desconhecido{display:flex;flex-direction:column;gap:5px;text-align:left}
.cs-erro b,.cs-degradado b,.cs-desconhecido b{font-size:13px;font-weight:700}
.cs-erro span,.cs-degradado span,.cs-desconhecido span{font-size:12px;color:var(--cs-espera-texto)}

/* Erro: Signal Red como ACENTO na borda esquerda, nunca como fundo. */
.cs-erro{
  background:rgba(241,60,75,.055);
  border-color:rgba(241,60,75,.28);
  border-left:3px solid var(--cassiellos-signal-red,#F13C4B);
}
.cs-erro b{color:#FF8A94}

/* Degradado: o serviço lá em cima respondeu que está fora. Âmbar, não vermelho — o operador não
   precisa procurar defeito aqui dentro. */
.cs-degradado{
  background:rgba(251,191,36,.05);
  border-color:rgba(251,191,36,.26);
  border-left:3px solid #FBBF24;
}
.cs-degradado b{color:#FBBF24}

/* Sem medição: cinza, e dito com todas as letras. Nunca verde. */
.cs-desconhecido{
  background:rgba(168,180,201,.05);
  border-left:3px solid var(--cassiellos-gray,#A8B4C9);
}
.cs-desconhecido b{color:var(--cassiellos-mist,#DCE3EE)}

/* ============================================================ animações */

/*
 * Duas, e só duas. `background-position` e `opacity` são baratas e não disparam layout; nada aqui
 * anima `width`, `top` ou `box-shadow`, que é o que transforma um skeleton numa lista de 40 itens
 * em travamento de scroll.
 */
@keyframes cs-shimmer{
  0%{background-position:-120% 0}
  60%,100%{background-position:220% 0}
}
@keyframes cs-respirar{
  0%,100%{opacity:.45}
  50%{opacity:.9}
}

/* ============================================================ reduced motion */

/*
 * `app.css` já tem uma regra global que zera duração de animação. Esta existe além dela, e é
 * explícita de propósito: sem movimento, o skeleton precisa continuar LEGÍVEL como ausência de
 * conteúdo — não pode virar um retângulo apagado que parece elemento quebrado.
 *
 * Nada de conteúdo é removido. O que sai é só o movimento.
 */
@media (prefers-reduced-motion:reduce){
  .cs-skel-linha{
    animation:none;
    background-image:none;
    background:var(--cs-skel-brilho);      /* tom estático um pouco mais claro: continua legível */
  }
  .cs-skel-marca,.cs-skel-icone,.cs-skel-badge,.cs-indicador i{
    animation:none;
    opacity:.75;                            /* nem apagado nem pulsando */
  }
}

/* ============================================================ responsividade */

/*
 * Nenhuma dimensão fixa que estoure tela pequena: as larguras dos skeletons são percentuais e os
 * contêineres respeitam `min-width:0`, sem o qual um filho de grid se recusa a encolher e
 * empurra a página inteira para o lado.
 */
@media (max-width:930px){
  .cs-skel-kpi{min-height:104px;padding:15px}
  .cs-skel-item{min-height:50px}
}
@media (max-width:680px){
  .cs-skel-kpi{grid-template-columns:40px 1fr;gap:10px;min-height:96px}
  .cs-skel-icone{width:38px;height:38px}
  .cs-skel-badge{width:46px}
  .cs-skel-linha--titulo{width:74%}
  .cs-vazio,.cs-erro,.cs-degradado,.cs-desconhecido{padding:15px}
}