/* Componentes do "BrasilSul — Design System" (DesingSystems.md), em CSS puro —
   o Tailwind Play CDN não processa @apply em arquivos externos, então as classes
   utilitárias (.eyebrow, .btn-*, .card, .input-field…) vivem aqui. */

:root {
  --paper: #f7f8fb;      /* --bg */
  --cream: #eef2ff;      /* --accent-tint */
  --ink: #0d1220;
  --ink-soft: #0a0e18;
  --ink-2: #4a5468;
  --ink-3: #7c8598;
  --stone: #4a5468;
  --accent: #2f5bff;
  --accent-600: #1f45db;
  --accent-tint: #eef2ff;
  /* aliases legados */
  --gold: #2f5bff;
  --gold-light: #8aa2ff;
  --gold-dark: #1f45db;
  --hairline: #e6e9f0;
  --dark: #0d1220;       /* seções escuras */
  /* Estados por ÊNFASE, não por matiz. O DesingSystems.md tem uma paleta só: neutros,
     um azul de ação e o escuro. Introduzir vermelho/âmbar/verde — mesmo atrás de uma
     variável — cria cor fora do sistema e faz a ferramenta destoar do site.
     A hierarquia aqui é de contraste: escuro grita, azul chama, cinza recua. */
  --tom-critico-fundo: #0d1220;   /* --dark: maior contraste disponível */
  --tom-critico-texto: #ffffff;
  --tom-critico-realce: #0d1220;  /* texto/ícone crítico sobre fundo claro */
  --tom-atencao-fundo: #eef2ff;   /* --accent-tint */
  --tom-atencao-texto: #1f45db;   /* --accent-600 */
  --tom-ok-fundo: #eef1f6;        /* resolvido recua, não comemora */
  --tom-ok-texto: #4a5468;        /* --ink-2 */
  --tom-info-fundo: #eef2ff;
  --tom-info-texto: #1f45db;
  --radius-card: 18px;
  --radius-input: 12px;
  --shadow-sm: 0 1px 2px rgba(13, 18, 32, 0.04), 0 2px 8px rgba(13, 18, 32, 0.05);
  --shadow-md: 0 8px 30px rgba(13, 18, 32, 0.08);
  --shadow-accent: 0 6px 18px rgba(47, 91, 255, 0.28);
}

/* ---------- Tipografia ---------- */

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

/* ---------- Botões (pill) ---------- */

.btn-primary,
.btn-secondary,
.btn-gold,
.btn-danger,
.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary,
.btn-gold {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover,
.btn-gold:hover {
  background: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(47, 91, 255, 0.32);
}

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--hairline);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--cream);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Ação destrutiva: peso do escuro em vez de vermelho. O alerta vem do contraste e do
   texto do botão — a paleta do design system não tem vermelho. */
.btn-danger {
  background: var(--dark);
  color: #fff;
}
.btn-danger:hover {
  background: #000;
  transform: translateY(-1px);
}

/* Confirmação positiva: é uma ação primária, então usa o azul de ação. */
.btn-success {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-success:hover {
  background: var(--accent-600);
  transform: translateY(-1px);
}

.btn-sm {
  font-size: 0.8125rem;
  padding: 0.375rem 0.85rem;
}

/* ---------- Cards e containers ---------- */

.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.table-container {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

/* ---------- Formulários ---------- */

.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  margin-bottom: 0.3rem;
}

.input-field {
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(47 91 255 / 0.16);
}
.input-field::placeholder {
  color: var(--ink-3);
}

.input-sm {
  padding: 0.4rem 0.7rem;
  font-size: 0.8125rem;
}

/* ---------- Tabelas ---------- */

.tbl {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: collapse;
}
.tbl thead th {
  background: rgb(238 242 255 / 0.7);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 0.7rem 0.75rem;
  white-space: nowrap;
}
.tbl tbody td {
  padding: 0.7rem 0.75rem;
  border-top: 1px solid var(--hairline);
  vertical-align: top;
}
.tbl tbody tr {
  transition: background-color 0.15s ease;
}
.tbl tbody tr:hover {
  background: rgb(238 242 255 / 0.55);
}

/* ---------- Links e badges ---------- */

.link {
  color: var(--accent);
  font-weight: 500;
  transition: color 0.18s ease;
}
.link:hover {
  color: var(--accent-600);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Os nomes dos pills são herdados (green/amber/red), mas os valores seguem a paleta:
   crítico = escuro sólido, atenção = azul-claro, resolvido = cinza que recua. */
.pill-green { background: var(--tom-ok-fundo); color: var(--tom-ok-texto); }
.pill-amber { background: var(--tom-atencao-fundo); color: var(--tom-atencao-texto); }
.pill-red { background: var(--tom-critico-fundo); color: var(--tom-critico-texto); }
.pill-blue { background: var(--accent-tint); color: var(--accent-600); }
.pill-gold { background: var(--accent-tint); color: var(--accent-600); }
.pill-neutral { background: #eef1f6; color: var(--stone); }

/* ---------- Estados de operação ----------
   O DesingSystems.md tem uma paleta só: neutros, um azul de ação e o escuro. Então
   urgência aqui é ÊNFASE, não matiz — escuro grita, azul chama, cinza recua. Fundo
   colorido (vermelho/âmbar/verde) faria a ferramenta destoar do site da BrasilSul. */

/* Selo de ícone dentro de cartão-indicador. Uniforme de propósito: quatro cartões lado a
   lado com selos de cores diferentes viram um mostruário, e um selo escuro entre azuis lê
   como defeito, não como alerta. A urgência aparece no número e no bloco de ação. */
.selo {
  border-radius: 12px; padding: 10px; display: inline-flex; flex-shrink: 0;
  background: var(--accent-tint); color: var(--accent-600);
}

/* Bloco de destaque com barra lateral (ex.: "precisa de ação hoje"). */
.bloco-critico { border-left: 4px solid var(--tom-critico-realce); }

/* Linha clicável dentro de um bloco de estado. Crítico e atenção se distinguem pela
   barra lateral e pelo fundo, sem precisar de duas cores diferentes. */
.linha-estado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px; border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease;
}
.linha-critica { background: #eef1f6; border-left-color: var(--tom-critico-realce); }
.linha-critica:hover { background: #e4e8ef; }
.linha-atencao { background: var(--accent-tint); border-left-color: var(--accent); }
.linha-atencao:hover { background: #e3e9ff; }
.linha-neutra { background: color-mix(in srgb, var(--cream) 50%, transparent); }
.linha-neutra:hover { background: var(--cream); }

/* Faixa de aviso no topo da página (ex.: acesso de emergência ativo). */
.faixa-alerta {
  background: var(--dark); color: #fff;
  text-align: center; font-size: 13px; padding: 8px 16px;
}
.faixa-alerta code { background: rgba(255, 255, 255, 0.18); padding: 1px 5px; border-radius: 4px; }

/* Realce de linha de tabela. A barra à esquerda (box-shadow inset) marca o estado sem
   tingir a linha inteira, que prejudicaria a leitura dos dados. */
.tbl tbody tr.linha-atencao-tabela {
  background: var(--accent-tint);
  box-shadow: inset 3px 0 0 var(--accent);
}
.tbl tbody tr.linha-critica-tabela {
  background: #eef1f6;
  box-shadow: inset 3px 0 0 var(--tom-critico-realce);
}

/* Texto de estado sobre fundo claro. */
.texto-critico { color: var(--tom-critico-realce); font-weight: 600; }
.texto-atencao { color: var(--tom-atencao-texto); }
.texto-ok { color: var(--tom-ok-texto); }
.texto-info { color: var(--tom-info-texto); }

/* Campo de formulário reprovado na validação. */
.campo-invalido { border-color: var(--dark) !important; box-shadow: 0 0 0 1px var(--dark); }
.erro-campo { font-size: 12px; color: var(--tom-critico-realce); font-weight: 600; margin-top: 4px; }

/* Confirmação de ação concluída (flash). Discreto de propósito: deu certo, seguir em frente. */
.flash-sucesso {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px; padding: 10px 16px; border-radius: 10px;
  font-size: 14px;
  background: var(--accent-tint); color: var(--accent-600);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Aviso de erro em formulário (topo do form) — precisa parar o usuário, daí o escuro. */
.aviso-erro {
  margin-bottom: 16px; padding: 10px 16px; border-radius: 10px; font-size: 14px;
  background: var(--dark); color: #fff;
}

/* Aviso de atenção (ex.: login local em produção). */
.aviso-atencao {
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: var(--accent-tint); color: var(--accent-600);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Caixa de seleção de tarefa concluída. */
.caixa-concluida { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- KPI do painel ----------
   O número é o elemento principal; rótulo e detalhe existem para situá-lo. Sem ícone e
   sem selo colorido: quatro quadrados azuis lado a lado eram decoração repetida, não
   informação — cada card já é identificado pelo próprio rótulo.

   A cor comunica só estado: valor zero recua para --ink-3 (nada a fazer ali), valor
   relevante fica em --ink, e um ponto discreto aparece quando há pendência. */
.kpi {
  display: block;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  /* Sem sombra: a borda basta para separar do fundo. Sombra em quatro cards seguidos
     pesa a tela e é a assinatura visual de template administrativo genérico. */
  box-shadow: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.kpi:hover { border-color: var(--accent); background: #fff; }
.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kpi-rotulo {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  /* Deliberadamente em cinza, não no azul do .eyebrow: o rótulo orienta, não compete
     com o número. */
  color: var(--ink-3);
}

/* Ponto de estado — só aparece quando há algo pendente. É o único elemento colorido. */
.kpi-ponto {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent); flex-shrink: 0;
}

.kpi-valor {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 2.5rem; line-height: 1.05; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 14px;
  /* Dígitos de mesma largura: os quatro números ficam alinhados entre os cards e não
     "dançam" quando o valor muda. */
  font-variant-numeric: tabular-nums;
}
/* Zero não é notícia: recua para não disputar atenção com o que exige ação. */
.kpi-valor-zerado { color: var(--ink-3); }

.kpi-sufixo { font-size: 1.25rem; font-weight: 500; color: var(--ink-3); margin-left: 2px; }

.kpi-detalhe {
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  margin-top: 8px;
}

/* Barra de proporção — usada só no share of wallet, onde a fatia diz mais que o número
   sozinho. Não é enfeite: é o dado. */
.kpi-barra {
  height: 3px; border-radius: 999px; background: var(--hairline);
  margin-top: 14px; overflow: hidden;
}
.kpi-barra > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* ---------- Abas (página do cliente) ---------- */
.aba {
  padding: 8px 16px; font-size: 14px; font-weight: 500;
  color: var(--ink-2); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.aba:hover { color: var(--ink); }
.aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.aba-contagem {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--accent-tint); color: var(--accent-600);
}

/* ---------- Animações de entrada ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.anim-rise {
  animation: rise 0.4s ease-out both;
}

/* Cascata para grades de cards (painel) */
.stagger > * { animation: rise 0.4s ease-out both; }
.stagger > *:nth-child(1) { animation-delay: 0.03s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.13s; }
.stagger > *:nth-child(4) { animation-delay: 0.18s; }
.stagger > *:nth-child(5) { animation-delay: 0.23s; }
.stagger > *:nth-child(6) { animation-delay: 0.28s; }
.stagger > *:nth-child(n+7) { animation-delay: 0.32s; }

/* Linhas de tabela: só opacidade (transform quebra layout de table-row em alguns browsers),
   com delay limitado para listas longas não levarem segundos. */
.tbl tbody tr {
  animation: fade 0.3s ease-out both;
}
.tbl tbody tr:nth-child(1) { animation-delay: 0.02s; }
.tbl tbody tr:nth-child(2) { animation-delay: 0.05s; }
.tbl tbody tr:nth-child(3) { animation-delay: 0.08s; }
.tbl tbody tr:nth-child(4) { animation-delay: 0.11s; }
.tbl tbody tr:nth-child(5) { animation-delay: 0.14s; }
.tbl tbody tr:nth-child(6) { animation-delay: 0.17s; }
.tbl tbody tr:nth-child(7) { animation-delay: 0.2s; }
.tbl tbody tr:nth-child(8) { animation-delay: 0.23s; }
.tbl tbody tr:nth-child(n+9) { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
  .anim-rise,
  .stagger > *,
  .tbl tbody tr {
    animation: none;
  }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Acessibilidade ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.input-field:focus-visible {
  outline: none; /* já tem anel próprio no :focus */
}