/* ==========================================================================
   PRISMA · feedback.css — alerta, progresso, esqueleto, estado vazio
   --------------------------------------------------------------------------
   Princípio: todo estado do sistema tem representação. "Nada na tela" não é
   um estado — é uma falha de projeto. Vazio, carregando, erro e offline
   são telas de verdade e entram no catálogo como qualquer outro componente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ALERTA — mensagem persistente, dentro do fluxo
   role="status" para informativo, role="alert" para erro que interrompe.
   -------------------------------------------------------------------------- */
.alerta {
  display: flex;
  gap: var(--espaco-3);
  padding: var(--espaco-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-inline-start: 3px solid var(--text-muted);
  color: var(--text-secondary);
  font-size: var(--body-sm-size);
  line-height: 1.55;
}
.alerta svg      { width: 20px; height: 20px; flex: none; stroke-width: var(--icone-traco); margin-top: 1px; }
.alerta-titulo   { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.alerta-corpo    { flex: 1; min-width: 0; }
.alerta-acoes    { display: flex; gap: var(--espaco-2); margin-top: var(--espaco-3); }

.alerta--info    { border-inline-start-color: var(--info);    background: var(--info-surface); }
.alerta--sucesso { border-inline-start-color: var(--success); background: var(--success-surface); }
.alerta--atencao { border-inline-start-color: var(--warning); background: var(--warning-surface); }
.alerta--perigo  { border-inline-start-color: var(--danger);  background: var(--danger-surface); }
.alerta--info svg    { color: var(--info); }
.alerta--sucesso svg { color: var(--success); }
.alerta--atencao svg { color: var(--warning); }
.alerta--perigo svg  { color: var(--danger); }

/* --------------------------------------------------------------------------
   TOAST — confirmação passageira, flutua sobre tudo
   Vidro forte: aparece sobre conteúdo imprevisível e ainda precisa ser lido.
   -------------------------------------------------------------------------- */
.toast {
  display: flex; align-items: center; gap: var(--espaco-3);
  padding: var(--espaco-4) var(--espaco-5);
  border-radius: var(--radius-lg);
  background-color: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturacao));
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturacao));
  border: 1px solid var(--border-glass);
  box-shadow: var(--elev-overlay);
  color: var(--text-primary);
  font-size: var(--body-sm-size);
}
.toast svg { width: 20px; height: 20px; flex: none; stroke-width: var(--icone-traco); }
.toast--sucesso svg { color: var(--success); }
.toast--perigo svg  { color: var(--danger); }

.toast-pilha {
  position: fixed;
  right: var(--espaco-5);
  bottom: calc(var(--espaco-5) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex; flex-direction: column; gap: var(--espaco-3);
}
/* No celular o toast ocupa a largura: canto inferior direito some sob o polegar. */
@media (max-width: 640px) {
  .toast-pilha { left: var(--espaco-4); right: var(--espaco-4); }
}

/* --------------------------------------------------------------------------
   TOOLTIP — só complementa. Nunca carrega informação essencial:
   não existe em toque e não existe para leitor de tela sem ajuda.
   -------------------------------------------------------------------------- */
.tooltip {
  padding: var(--espaco-2) var(--espaco-3);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  box-shadow: var(--elev-overlay);
  color: var(--text-primary);
  font-size: var(--caption-size);
  max-width: 260px;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   PROGRESSO
   -------------------------------------------------------------------------- */
.progresso {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  overflow: hidden;
}
.progresso-barra {
  height: 100%;
  border-radius: inherit;
  background: var(--accent-primary);
  transition: width var(--motion-slow) var(--easing-standard);
}
.progresso--sucesso .progresso-barra { background: var(--success); }
.progresso--atencao .progresso-barra { background: var(--warning); }

/* Indeterminado: não sabemos quanto falta, e a barra precisa dizer isso. */
.progresso--indeterminado .progresso-barra {
  width: 35%;
  animation: prisma-correr 1.4s var(--easing-standard) infinite;
}
@keyframes prisma-correr {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* Anel de progresso — para card compacto e avatar de agente. */
.progresso-anel { transform: rotate(-90deg); }
.progresso-anel circle { fill: none; stroke-width: 3; }
.progresso-anel .trilho { stroke: var(--surface-3); }
.progresso-anel .valor  { stroke: var(--accent-primary); stroke-linecap: round;
                          transition: stroke-dashoffset var(--motion-slow) var(--easing-standard); }

/* --------------------------------------------------------------------------
   SPINNER
   -------------------------------------------------------------------------- */
.spinner {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  border-top-color: var(--accent-text);
  animation: prisma-girar 620ms linear infinite;
}
.spinner--lg { width: 32px; height: 32px; border-width: 3px; }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* --------------------------------------------------------------------------
   ESQUELETO
   Reproduz a FORMA do que vem. Bloco genérico só troca um vazio por um
   cinza — não reduz a surpresa quando o conteúdo chega.
   -------------------------------------------------------------------------- */
.esqueleto {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 37%,
    var(--surface-2) 63%
  );
  background-size: 400% 100%;
  animation: prisma-brilho 1.5s ease-in-out infinite;
}
.esqueleto--texto   { height: 1em; margin-block: 0.3em; }
.esqueleto--titulo  { height: 1.6em; width: 58%; }
.esqueleto--linha   { height: 1em; width: 100%; }
.esqueleto--curta   { width: 62%; }
.esqueleto--avatar  { width: 40px; height: 40px; border-radius: 50%; }
.esqueleto--bloco   { height: 120px; border-radius: var(--radius-lg); }
@keyframes prisma-brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; background: var(--surface-2); }
}

/* --------------------------------------------------------------------------
   ESTADOS DE TELA — vazio, erro, offline
   O vazio é oportunidade, não desculpa: tem título, uma frase e UMA ação.
   -------------------------------------------------------------------------- */
.estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espaco-3);
  padding: var(--espaco-10) var(--espaco-6);
  max-width: 420px;
  margin-inline: auto;
}
.estado-icone {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text-muted);
  margin-bottom: var(--espaco-1);
}
.estado-icone svg { width: 26px; height: 26px; stroke-width: var(--icone-traco); }
.estado-titulo { font-size: var(--h4-size); font-weight: 600; color: var(--text-primary); }
.estado-texto  { font-size: var(--body-sm-size); color: var(--text-muted); line-height: 1.55; }
.estado-acoes  { margin-top: var(--espaco-3); display: flex; gap: var(--espaco-3); flex-wrap: wrap;
                 justify-content: center; }

.estado--erro    .estado-icone { background: var(--danger-surface);  color: var(--danger); }
.estado--offline .estado-icone { background: var(--warning-surface); color: var(--warning); }