/*
 * modal.css — Componente de modal customizado do Tarivelo
 *
 * Overlay + dialog com animação de fade/slide.
 * Depende de tokens.css (deve ser carregado antes).
 * Controlado pelo modal.js via classes .ativo.
 */

/* ── Overlay: cobre a tela inteira ───────────────────────────────────────── */

.tarivelo-modal-overlay {
  position: fixed;
  inset: 0; /* top/right/bottom/left: 0 */
  background-color: rgba(42, 42, 40, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);

  /* Fade in: começa invisível */
  opacity: 0;
  transition: opacity 200ms ease;

  /* Garante que cliques no overlay (fora do modal) sejam capturáveis */
  cursor: default;
}

.tarivelo-modal-overlay.ativo {
  opacity: 1;
}

/* ── Modal: o card central ───────────────────────────────────────────────── */

.tarivelo-modal {
  background-color: var(--color-surface-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 480px;
  width: 100%;
  box-shadow:
    0 8px 32px rgba(42, 42, 40, 0.12),
    0 2px 8px rgba(42, 42, 40, 0.08);

  /* Slide up: começa deslocado para baixo e invisível */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;

  /* Impede que cliques dentro do modal fechem o overlay */
  cursor: default;
  position: relative;
}

.tarivelo-modal.ativo {
  transform: translateY(0);
  opacity: 1;
}

/* ── Título do modal ─────────────────────────────────────────────────────── */

.tarivelo-modal-titulo {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-700);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
  font-feature-settings: "ss01" on, "liga" on;
}

/* ── Mensagem do modal ───────────────────────────────────────────────────── */

.tarivelo-modal-mensagem {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  max-width: none;
}

/* ── Linha de ações ──────────────────────────────────────────────────────── */

.tarivelo-modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* ── Botões ──────────────────────────────────────────────────────────────── */

.tarivelo-modal-botao {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  line-height: 1;
}

/* Botão cancelar: discreto, outline */
.tarivelo-modal-botao-cancelar {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.tarivelo-modal-botao-cancelar:hover {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* Botão confirmar: verde sálvia (padrão) */
.tarivelo-modal-botao-confirmar {
  background-color: var(--color-primary-500);
  color: #ffffff;
  border: 1px solid transparent;
}

.tarivelo-modal-botao-confirmar:hover {
  background-color: var(--color-primary-700);
}

/* Variante crítica: terracota dessaturado */
.tarivelo-modal-botao-confirmar.critico {
  background-color: var(--color-critical);
  color: #ffffff;
}

.tarivelo-modal-botao-confirmar.critico:hover {
  background-color: #8f4c3d; /* levemente mais escuro que --color-critical */
}