/* ==========================================================================
   Identidade visual do app — fonte única de verdade para cores e espaços.
   Alterar uma variável aqui muda o aplicativo inteiro.
   O Tailwind lê estas mesmas variáveis (ver tailwind.config.js).
   ========================================================================== */

/* Cada cor é escrita UMA vez, como canais R G B ("220 38 38"). O Tailwind
   precisa desse formato para aplicar transparência (`bg-negativa/10`); o
   CSS daqui usa as versões prontas, --cor-*, derivadas logo abaixo. */
:root {
  --rgb-fundo: 241 245 249;
  --rgb-superficie: 255 255 255;
  --rgb-borda: 226 232 240;
  --rgb-texto: 15 23 42;
  --rgb-texto-suave: 100 116 139;
  --rgb-marca: 79 70 229;
  --rgb-marca-escura: 67 56 202;
  --rgb-marca-clara: 238 242 255;
  --rgb-positiva: 5 150 105;
  --rgb-atencao: 217 119 6;
  --rgb-negativa: 220 38 38;

  /* Cores de superfície */
  --cor-fundo: rgb(var(--rgb-fundo));
  --cor-superficie: rgb(var(--rgb-superficie));
  --cor-borda: rgb(var(--rgb-borda));

  /* Cores de texto */
  --cor-texto: rgb(var(--rgb-texto));
  --cor-texto-suave: rgb(var(--rgb-texto-suave));

  /* Cor da marca */
  --cor-marca: rgb(var(--rgb-marca));
  --cor-marca-escura: rgb(var(--rgb-marca-escura));
  --cor-marca-clara: rgb(var(--rgb-marca-clara));

  /* Cores semânticas de valor */
  --cor-positiva: rgb(var(--rgb-positiva));
  --cor-atencao: rgb(var(--rgb-atencao));
  --cor-negativa: rgb(var(--rgb-negativa));

  /* Espaçamentos — sempre múltiplos de 8px */
  --espaco-1: 8px;
  --espaco-2: 16px;
  --espaco-3: 24px;
  --espaco-4: 32px;
  --espaco-6: 48px;
  --espaco-8: 64px;

  /* Cantos arredondados */
  --raio: 16px;
  --raio-pequeno: 8px;
}

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
}

/* Números de dinheiro: dígitos de largura fixa, para as colunas alinharem. */
.valor {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Indicador de que a página está esperando resposta do servidor (HTMX). */
.htmx-request .indicador-carregando {
  opacity: 1;
}

.indicador-carregando {
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

/* Confirmação sem JavaScript (ver templates/_confirmacao.html).
   O <details> fica na mesma linha dos outros botões; aberto, o rótulo
   troca para "Cancelar" e o botão de confirmar aparece ao lado. */
.confirmacao {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Enquanto a pergunta está aberta, os vizinhos ("Renomear", "Desativar")
   saem de cena: sobra espaço para o nome do item que vai ser apagado e
   não há outro botão ao lado para ser tocado por engano. */
.acoes:has(.confirmacao[open]) > :not(.confirmacao) {
  display: none;
}

.confirmacao > summary {
  display: inline;
  cursor: pointer;
  list-style: none;
}

.confirmacao > summary::-webkit-details-marker {
  display: none;
}

.confirmacao .rotulo-aberto,
.confirmacao[open] .rotulo-fechado {
  display: none;
}

.confirmacao[open] .rotulo-aberto {
  display: inline;
}

/* Aberto, o gatilho vira "Cancelar" — e precisa PARECER cancelar. Sem isto,
   um gatilho vermelho preenchido ("Excluir a compra inteira") viraria um
   "Cancelar" vermelho, com cara de ação destrutiva, bem onde a pessoa quer
   desistir. */
.confirmacao[open] > summary {
  background: transparent;
  border-color: transparent;
  color: var(--cor-texto-suave);
  font-weight: 500;
}

.confirmacao-corpo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-1);
}

/* Elementos que só o Alpine deve mostrar ficam escondidos até ele carregar;
   sem isto, avisos como "Sem conexão" piscariam na tela ao abrir a página. */
[x-cloak] {
  display: none !important;
}