/**
 * estados.css – T3 do Roadmap MEV
 *
 * Estados completos da aplicação:
 *   1. Skeleton (loading de conteúdo)
 *   2. Spinner  (loading de ação pontual)
 *   3. Empty State (lista vazia)
 *   4. Sem Resultados (busca/filtro vazio)
 *   5. Error State (falha de carregamento)
 *   6. Offline Banner (sem conexão)
 *
 * CSS puro — sem dependências. Seguro para Cloudflare Pages.
 */

/* ─────────────────────────────────────────────────────────────
   1. Skeleton — shimmer animado
   ───────────────────────────────────────────────────────────── */

@keyframes mev-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.skeleton-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--paper-dim) 25%, #e8e3d4 50%, var(--paper-dim) 75%);
  background-size: 800px 100%;
  animation: mev-shimmer 1.4s infinite linear;
}

.skeleton-linhas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.skeleton-linha {
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--paper-dim) 25%, #e8e3d4 50%, var(--paper-dim) 75%);
  background-size: 800px 100%;
  animation: mev-shimmer 1.4s infinite linear;
}

.skeleton-linha.larga  { width: 65%; }
.skeleton-linha.media  { width: 45%; }
.skeleton-linha.curta  { width: 30%; }

.skeleton-valor {
  width: 52px;
  height: 18px;
  border-radius: 6px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--paper-dim) 25%, #e8e3d4 50%, var(--paper-dim) 75%);
  background-size: 800px 100%;
  animation: mev-shimmer 1.4s infinite linear;
}

/* Atraso para itens subsequentes — entrada escalonada */
.skeleton-item:nth-child(2) .skeleton-thumb,
.skeleton-item:nth-child(2) .skeleton-linha,
.skeleton-item:nth-child(2) .skeleton-valor { animation-delay: 0.1s; }

.skeleton-item:nth-child(3) .skeleton-thumb,
.skeleton-item:nth-child(3) .skeleton-linha,
.skeleton-item:nth-child(3) .skeleton-valor { animation-delay: 0.2s; }

.skeleton-item:nth-child(4) .skeleton-thumb,
.skeleton-item:nth-child(4) .skeleton-linha,
.skeleton-item:nth-child(4) .skeleton-valor { animation-delay: 0.3s; }

.skeleton-item:nth-child(5) .skeleton-thumb,
.skeleton-item:nth-child(5) .skeleton-linha,
.skeleton-item:nth-child(5) .skeleton-valor { animation-delay: 0.35s; }

/* ─────────────────────────────────────────────────────────────
   2. Spinner pontual (para ações dentro da tela)
   ───────────────────────────────────────────────────────────── */

@keyframes mev-spin {
  to { transform: rotate(360deg); }
}

.mev-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--ledger);
  border-radius: 50%;
  animation: mev-spin 0.7s linear infinite;
  vertical-align: middle;
}

.mev-spinner.grande {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* ─────────────────────────────────────────────────────────────
   3. Empty State (lista vazia — primeira vez sem dados)
   ───────────────────────────────────────────────────────────── */

.estado-vazio {
  text-align: center;
  padding: 56px 24px 48px;
  color: var(--ink-soft);
}

.estado-vazio .estado-icone {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 14px;
  opacity: 0.6;
  display: block;
}

.estado-vazio .estado-titulo {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}

.estado-vazio .estado-dica {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  line-height: 1.5;
}

.estado-vazio .btn-destaque {
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────────
   4. Sem Resultados (busca/filtro sem match)
   ───────────────────────────────────────────────────────────── */

.sem-resultado-estado {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
}

.sem-resultado-estado .sem-resultado-icone {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
  opacity: 0.55;
}

.sem-resultado-estado .sem-resultado-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.sem-resultado-estado .sem-resultado-dica {
  font-size: 12.5px;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   5. Error State
   ───────────────────────────────────────────────────────────── */

.estado-erro {
  text-align: center;
  padding: 56px 24px 48px;
  color: var(--ink-soft);
}

.estado-erro .estado-icone {
  font-size: 36px;
  display: block;
  margin-bottom: 14px;
  opacity: 0.7;
}

.estado-erro .estado-titulo {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}

.estado-erro .estado-dica {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  line-height: 1.5;
}

.estado-erro .btn-tentar-novamente {
  background: var(--ledger);
  color: var(--paper);
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s ease, transform 0.1s ease;
}

.estado-erro .btn-tentar-novamente:hover {
  transform: translateY(-1px);
}

.estado-erro .estado-detalhe {
  display: block;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0.7;
  word-break: break-word;
}

/* ─────────────────────────────────────────────────────────────
   6. Offline Banner
   ───────────────────────────────────────────────────────────── */

.banner-offline {
  display: none; /* controlado por JS via .offline no <body> */
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--coral-deep);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.banner-offline svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -2px;
}

body.offline .banner-offline {
  display: block;
}

/* Empurra o conteúdo do app quando o banner aparece */
body.offline #app {
  /* banner é sticky, sem empurrar — apenas sobrepõe o topo */
}

/* Versão "voltou" — verde, some rápido */
.banner-offline.banner-offline--voltou {
  background: #1B7A4F;
  animation: mev-fade-out-banner 2.5s ease forwards;
  animation-delay: 0.8s;
}

@keyframes mev-fade-out-banner {
  0%   { opacity: 1; max-height: 60px; padding: 9px 16px; }
  80%  { opacity: 0; }
  100% { max-height: 0; padding: 0; display: none; }
}

/* ─────────────────────────────────────────────────────────────
   prefers-reduced-motion
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .skeleton-thumb,
  .skeleton-linha,
  .skeleton-valor {
    animation: none;
    opacity: 0.5;
  }

  .mev-spinner {
    animation-duration: 1.5s;
  }
}