/* ==========================================================================
   Design System ACVE — tokens e componentes
   Documentação viva: /painel/design-system/

   As cores da marca (--brand-*, --cabecalho-*) vêm do TEMA vigente, injetadas em
   templates/includes/tema_tokens.html. Os valores abaixo são só o padrão
   (Vermelho de Ogum) para quando o tema não puder ser lido.
   Cores ficam em canais "R G B" para aceitar opacidade: rgb(var(--brand-600) / .2).
   ========================================================================== */

:root {
  /* Marca — padrão (sobrescrito pelo tema) */
  --brand-50: 250 237 235;
  --brand-100: 245 219 214;
  --brand-200: 235 184 173;
  --brand-300: 224 144 128;
  --brand-400: 212 99 77;
  --brand-500: 202 63 36;
  --brand-600: 193 32 0;
  --brand-700: 162 27 0;
  --brand-800: 131 22 0;
  --brand-900: 104 17 0;
  --brand-950: 69 12 0;
  --cabecalho-cor: 193 32 0;
  --cabecalho-escuro: 32 30 30;

  /* Ação: botão primário é sempre preto — o vermelho é identidade, não botão */
  --acao: 32 30 30;         /* #201e1e */
  --acao-hover: 0 0 0;

  /* Semânticas (não mudam com o tema) */
  --sucesso: 21 128 61;   /* green-700 */
  --alerta: 180 83 9;     /* amber-700 */
  --erro: 185 28 28;      /* red-700 */
  --info: 29 78 216;      /* blue-700 */

  /* Neutros */
  --texto: 17 24 39;        /* gray-900 */
  --texto-suave: 75 85 99;  /* gray-600 */
  --borda: 229 231 235;     /* gray-200 */
  --borda-forte: 209 213 219; /* gray-300 */
  --superficie: 255 255 255;
  --fundo: 249 250 251;     /* gray-50 */

  /* Foco: amarelo visível sobre fundos claros e escuros */
  --foco: 253 224 71;       /* yellow-300 */

  /* Forma */
  --raio-p: .5rem;
  --raio-m: .75rem;
  --raio-g: 1rem;
  --raio-total: 9999px;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .06);
  --sombra-2: 0 4px 12px rgb(0 0 0 / .08);
  --sombra-3: 0 12px 32px rgb(0 0 0 / .14);

  /* Movimento */
  --duracao-rapida: 150ms;
  --duracao-base: 200ms;
  --duracao-lenta: 300ms;
  --curva-padrao: cubic-bezier(.2, 0, 0, 1);

  /* Tipografia */
  --fonte-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Cabeçalho em degradê: escuro atrás da logo (à esquerda) → cor principal ── */
.bg-cabecalho {
  background-color: rgb(var(--cabecalho-cor));
  background-image: linear-gradient(100deg, rgb(var(--cabecalho-escuro)) 0%,
    rgb(var(--cabecalho-escuro)) 18%, rgb(var(--cabecalho-cor)) 100%);
}

/* ── Botões ─────────────────────────────────────────────────────────────────
   .ds-btn + variante (--primario, --secundario, --contorno, --fantasma, --perigo,
   --sobre-escuro) + tamanho opcional (--p, --g) + forma opcional (--icone, --bloco).
   Estados: :hover, :active, :focus-visible, :disabled / aria-disabled, aria-busy.
   As classes .is-hover/.is-ativo/.is-foco existem só para a documentação. */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.25rem; border: 1px solid transparent; border-radius: var(--raio-m);
  font-size: .875rem; line-height: 1.25rem; font-weight: 600; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    border-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao),
    box-shadow var(--duracao-rapida) var(--curva-padrao);
}
.ds-btn:focus-visible, .ds-btn.is-foco { outline: 3px solid rgb(var(--foco)); outline-offset: 2px; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ds-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.ds-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 9999px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ds-gira .7s linear infinite;
}

.ds-btn--primario { background: rgb(var(--acao)); color: #fff; }
.ds-btn--primario:hover, .ds-btn--primario.is-hover { background: rgb(var(--acao-hover)); }
.ds-btn--primario:active, .ds-btn--primario.is-ativo { background: rgb(var(--acao-hover)); box-shadow: inset 0 2px 4px rgb(0 0 0 / .4); }

.ds-btn--secundario { background: rgb(243 244 246); color: rgb(var(--texto)); border-color: rgb(var(--borda)); }
.ds-btn--secundario:hover, .ds-btn--secundario.is-hover { background: rgb(var(--borda)); }
.ds-btn--secundario:active, .ds-btn--secundario.is-ativo { background: rgb(var(--borda-forte)); }

.ds-btn--contorno { background: rgb(var(--superficie)); color: rgb(var(--texto)); border-color: rgb(var(--borda-forte)); }
.ds-btn--contorno:hover, .ds-btn--contorno.is-hover { background: rgb(var(--fundo)); border-color: rgb(156 163 175); }
.ds-btn--contorno:active, .ds-btn--contorno.is-ativo { background: rgb(243 244 246); }

.ds-btn--fantasma { background: transparent; color: rgb(var(--texto)); }
.ds-btn--fantasma:hover, .ds-btn--fantasma.is-hover { background: rgb(243 244 246); }
.ds-btn--fantasma:active, .ds-btn--fantasma.is-ativo { background: rgb(var(--borda)); }

/* Ação destrutiva: contorno vermelho de erro + ícone + confirmação. */
.ds-btn--perigo { background: rgb(var(--superficie)); color: rgb(var(--erro)); border-color: rgb(var(--erro)); }
.ds-btn--perigo:hover, .ds-btn--perigo.is-hover { background: rgb(254 242 242); }
.ds-btn--perigo:active, .ds-btn--perigo.is-ativo { background: rgb(var(--erro)); color: #fff; }

.ds-btn--sobre-escuro { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .4); }
.ds-btn--sobre-escuro:hover, .ds-btn--sobre-escuro.is-hover { background: rgb(255 255 255 / .2); }
.ds-btn--sobre-escuro:active, .ds-btn--sobre-escuro.is-ativo { background: rgb(255 255 255 / .3); }

.ds-btn--p { padding: .375rem .75rem; font-size: .8125rem; border-radius: var(--raio-p); }
.ds-btn--g { padding: .875rem 1.75rem; font-size: 1rem; }
.ds-btn--icone { padding: .625rem; }
.ds-btn--p.ds-btn--icone { padding: .375rem; }
.ds-btn--bloco { display: flex; width: 100%; }

/* ── Links ─────────────────────────────────────────────────────────────────── */
.ds-link {
  color: rgb(var(--brand-700)); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgb(var(--brand-700) / .4);
  transition: color var(--duracao-rapida), text-decoration-color var(--duracao-rapida);
}
.ds-link:hover, .ds-link.is-hover { color: rgb(var(--brand-800)); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.ds-link:focus-visible, .ds-link.is-foco { outline: 3px solid rgb(var(--foco)); outline-offset: 2px; border-radius: 2px; }
.ds-link--discreto { color: inherit; text-decoration-color: transparent; }
.ds-link--discreto:hover, .ds-link--discreto.is-hover { text-decoration-color: currentColor; }
.ds-link--sobre-escuro { color: #fff; text-decoration-color: rgb(255 255 255 / .5); }
.ds-link--sobre-escuro:hover, .ds-link--sobre-escuro.is-hover { color: #fff; text-decoration-color: #fff; }

/* ── Campos de formulário ─────────────────────────────────────────────────── */
.ds-rotulo { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 500; color: rgb(var(--texto)); }
.ds-campo {
  display: block; width: 100%; padding: .5rem .75rem; font-size: .875rem; line-height: 1.25rem;
  color: rgb(var(--texto)); background: rgb(var(--superficie));
  border: 1px solid rgb(var(--borda-forte)); border-radius: var(--raio-p);
  transition: border-color var(--duracao-rapida), box-shadow var(--duracao-rapida);
}
.ds-campo:hover { border-color: rgb(156 163 175); }
.ds-campo:focus, .ds-campo.is-foco { outline: none; border-color: rgb(var(--brand-600)); box-shadow: 0 0 0 3px rgb(var(--brand-600) / .25); }
.ds-campo[aria-invalid="true"] { border-color: rgb(var(--erro)); }
.ds-campo[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--erro) / .25); }
.ds-campo:disabled { background: rgb(243 244 246); color: rgb(107 114 128); cursor: not-allowed; }
.ds-ajuda { margin-top: .375rem; font-size: .75rem; color: rgb(var(--texto-suave)); }
.ds-erro-campo { margin-top: .375rem; font-size: .75rem; font-weight: 500; color: rgb(var(--erro)); }
.ds-marcador { width: 1rem; height: 1rem; accent-color: rgb(var(--brand-600)); }

/* ── Selos (badges) ───────────────────────────────────────────────────────── */
.ds-selo {
  display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .625rem;
  border-radius: var(--raio-total); font-size: .75rem; line-height: 1.25rem; font-weight: 600;
}
.ds-selo--marca { background: rgb(var(--brand-50)); color: rgb(var(--brand-800)); }
.ds-selo--neutro { background: rgb(243 244 246); color: rgb(55 65 81); }
.ds-selo--sucesso { background: rgb(240 253 244); color: rgb(var(--sucesso)); }
.ds-selo--alerta { background: rgb(255 251 235); color: rgb(var(--alerta)); }
.ds-selo--erro { background: rgb(254 242 242); color: rgb(var(--erro)); }
.ds-selo--info { background: rgb(239 246 255); color: rgb(var(--info)); }

/* ── Alertas ───────────────────────────────────────────────────────────────── */
.ds-alerta { display: flex; gap: .75rem; padding: .875rem 1rem; border: 1px solid; border-radius: var(--raio-m); font-size: .875rem; }
.ds-alerta--info { background: rgb(239 246 255); border-color: rgb(191 219 254); color: rgb(30 64 175); }
.ds-alerta--sucesso { background: rgb(240 253 244); border-color: rgb(187 247 208); color: rgb(22 101 52); }
.ds-alerta--alerta { background: rgb(255 251 235); border-color: rgb(253 230 138); color: rgb(146 64 14); }
.ds-alerta--erro { background: rgb(254 242 242); border-color: rgb(254 202 202); color: rgb(153 27 27); }

/* ── Cartões ───────────────────────────────────────────────────────────────── */
.ds-cartao { padding: 1.25rem; background: rgb(var(--superficie)); border: 1px solid rgb(var(--borda)); border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.ds-cartao--interativo { transition: box-shadow var(--duracao-base), border-color var(--duracao-base); }
.ds-cartao--interativo:hover, .ds-cartao--interativo.is-hover { box-shadow: var(--sombra-2); border-color: rgb(var(--brand-200)); }

@keyframes ds-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-link, .ds-campo, .ds-cartao--interativo { transition: none; }
  .ds-btn[aria-busy="true"]::before { animation-duration: 1.6s; }
}