/* ============================================================
   Mitz — estilos base (mobile-first)
   Direção "Link by Stripe": claro, NEUTROS puros (#1a2c44→#f4f7fa,
   sem tom azulado), Inter, cantos generosos, sombras suaves, com as cores
   da marca do Julio: VERDE #00d66f como cor padrão (ações, foco,
   links e item ativo — sempre com texto escuro sobre o verde). As telas de ENTRADA (login/membros/avisos) usam a
   linguagem do Link by Stripe em public/css/entrada.css.

   TODOS os valores de cor saem dos tokens abaixo. As variáveis
   antigas (--cor-*) continuam existindo como apelidos, porque os
   outros arquivos CSS e os estilos inline do construtor de
   checkout dependem delas.
   ============================================================ */

/* Inter auto-hospedada (public/fonts) — sem depender do Google Fonts */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}

:root {
  /* ----- tokens do sistema (neutros do Link by Stripe) ----- */
  --background: #ffffff; /* fundo da página (pedido do Julio); cards ficam #fff */
  --background-secondary: #f4f7fa;
  --surface: #ffffff;
  --surface-hover: #f4f7fa;
  --surface-active: #ececec;

  --border: #d4dee9;
  --border-subtle: #ecf1f6;
  --border-strong: #bac8da;

  --text-primary: #1a2c44;
  --text-secondary: #3c4f69;
  --text-muted: #667691;
  --text-placeholder: #95a4ba;

  --button-primary: #533afd;
  --button-primary-hover: #4e11e2;
  --button-primary-text: #ffffff;

  --success-background: #dcf7e6;
  --success-text: #1e7f4d;
  --info-background: #e4f2fc;
  --info-text: #005fae;
  --warning-background: #fceeb5;
  --warning-text: #b13600;
  --error-background: #fde9ee;
  --error-text: #c0123c;

  /* ----- apelidos antigos (todo o resto do CSS usa estes) ----- */
  --cor-fundo: var(--background);
  --cor-superficie: var(--surface);
  --cor-superficie-solida: var(--surface);
  --cor-texto: var(--text-primary);
  --cor-texto-suave: var(--text-secondary);
  --cor-borda: var(--border);
  --cor-borda-forte: var(--border-strong);

  /* Verde da marca: ação padrão, foco, item ativo; -clara é o tom legível p/ links. */
  /* ---------- curvas de movimento ----------
     As curvas prontas do CSS (ease, ease-out) sao fracas demais: falta o
     empurrao inicial que faz o movimento parecer intencional em vez de
     preguicoso.

     ease-in NAO entra aqui de proposito. Ele comeca devagar, e o comeco e
     exatamente o instante em que a pessoa esta olhando — um menu com ease-in
     de 300ms PARECE mais lento que um de 300ms com ease-out.

     Quando usar cada uma:
       --saida    entrando ou saindo da tela
       --entre    movendo ou mudando de forma dentro da tela
       --gaveta   painel/gaveta que desliza (curva do iOS)
     --------------------------------------- */
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --entre: cubic-bezier(0.77, 0, 0.175, 1);
  --gaveta: cubic-bezier(0.32, 0.72, 0, 1);

  --cor-primaria: #533afd;
  --cor-primaria-escura: #4e11e2;
  --cor-primaria-clara: #533afd; /* blurple legível para links sobre fundo claro */
  --cor-primaria-glow: rgba(83, 58, 253, 0.35);

  /* Verde da marca — conversão (botão de pagar, dinheiro). Usado SÓ
     em ação de compra, valores e indicadores — nunca espalhado. */
  --cor-conversao: #00d66f;
  --cor-conversao-escura: #00b25c;
  --cor-conversao-clara: #058c50; /* verde legível sobre fundo claro */

  /* Âmbar — escassez / order bump */
  --cor-destaque: #d97706;
  --cor-destaque-clara: #b45309;

  --cor-erro: #c0123c;
  --cor-aviso-fundo: var(--warning-background);

  /* Botão padrão = verde da marca com texto escuro (contraste) */
  --cor-botao: var(--button-primary);
  --cor-botao-hover: var(--button-primary-hover);
  --cor-botao-rotulo: var(--button-primary-text);

  /* Sombras do painel da Stripe (pequena nos cards, grande no flutuante) */
  --sombra: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(48, 49, 61, 0.08);
  --sombra-flutuante: 0 5px 15px rgba(0, 0, 0, 0.12), 0 15px 35px rgba(48, 49, 61, 0.08);
  --raio: 12px;      /* cards (raio large do Stripe Dashboard) */
  --raio-controle: 6px; /* botões, campos, abas (raio small do Stripe) */

  --fonte-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --fonte-titulo: var(--fonte-ui);
}

* { box-sizing: border-box; }

html { background: var(--background); }

body {
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--fonte-ui);
  background: var(--background);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

::selection { background: var(--cor-primaria); color: #ffffff; }

/* Foco visível em tudo que é navegável por teclado */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(1, 150, 237, 0.36);
}

.container {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 16px;
}

.container--estreito { max-width: 560px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  margin-bottom: 16px;
}

.titulo {
  font-size: 28px;
  line-height: 34px;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.subtitulo { font-size: 16px; margin: 0 0 10px; font-weight: 600; letter-spacing: -0.01em; }
.texto-suave { color: var(--text-secondary); }
.texto-centro { text-align: center; }
.texto-pequeno { font-size: 12px; }

/* ---------- formulários ---------- */
.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 8px 12px;
  font-size: 1rem; /* 16px nas páginas públicas: evita zoom do iOS; o painel compacta */
  border: 1px solid var(--border);
  border-radius: var(--raio-controle);
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.campo input::placeholder,
.campo textarea::placeholder { color: var(--text-placeholder); }

.campo select { appearance: none; -webkit-appearance: none; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px rgba(1, 150, 237, 0.28);
}

.campo input:disabled,
.campo select:disabled,
.campo textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.campo--erro input { border-color: var(--error-text); }

.campo .mensagem-erro {
  color: var(--error-text);
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

.campo--erro .mensagem-erro { display: block; }

.linha-campos { display: flex; gap: 12px; }
.linha-campos .campo { flex: 1; }

/* ---------- botões ---------- */
.botao {
  display: inline-block;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cor-botao-rotulo);
  background: var(--cor-botao);
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.botao:hover { background: var(--cor-botao-hover); }
.botao:active { background: var(--cor-botao-hover); transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .botao:active { transform: none; }
}
.botao:disabled { opacity: 0.5; cursor: not-allowed; }

.botao--secundario {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 1px 1px rgba(16, 17, 26, 0.08);
}

.botao--secundario:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.botao--destaque { background: var(--cor-destaque); color: #ffffff; }
.botao--destaque:hover { background: #b45309; }

/* ---------- avisos e selos ---------- */
.alerta {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}

.alerta--erro { background: var(--error-background); color: var(--error-text); border-color: #f6c6d2; }
.alerta--info { background: var(--info-background); color: var(--info-text); border-color: #bfdffa; }
.alerta--sucesso { background: var(--success-background); color: var(--success-text); border-color: #b7ecc9; }
/* Amarelo: "funcionou, MAS tem uma pegadinha" — nem sucesso nem erro. */
.alerta--aviso { background: var(--warning-background); color: var(--warning-text); border-color: #f0e0bc; }

.selo-seguranca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 12px;
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1.35;
}

.badge--pago { background: var(--success-background); color: var(--success-text); border-color: #b7ecc9; }
.badge--pendente { background: var(--warning-background); color: var(--warning-text); border-color: #f0e0bc; }
.badge--recusado, .badge--estornado, .badge--expirado {
  background: var(--error-background); color: var(--error-text); border-color: #f6c6d2;
}
/* Neutro: categorias e estados desligados (inativo NÃO é erro) */
.badge--neutro { background: #f4f7fa; color: #3c4f69; border-color: #d4dee9; }
.badge--info { background: var(--info-background); color: var(--info-text); border-color: #bfdffa; }

/* ---------- utilitários ---------- */
.separador { border: 0; border-top: 1px solid var(--border-subtle); margin: 16px 0; }
.escondido { display: none !important; }

code {
  background: #f4f7fa;
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.85em;
}

a { color: var(--cor-primaria-clara); }

@media (min-width: 720px) {
  .container { padding: 32px 24px; }
}

/* Sem animação para quem pediu para reduzir movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ícones de linha usados no lugar dos antigos emojis */
.ic-selo, .ic-metodo {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -2px;
}
.ic-metodo { width: 17px; height: 17px; }


/* Foco do teclado nos botões secundários: sem isto, quem navega pelo teclado
   não enxerga onde está (o botão branco não muda de aparência ao receber foco). */
.botao--secundario:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--cor-borda), 0 0 0 4px rgba(1, 150, 237, 0.36);
}

/* ============================================================
   Logotipo da Mitz
   ============================================================
   Circulo solido com o M dentro + o nome em minuscula.

   O simbolo carrega a marca sozinho: e ele que vai no favicon, no avatar do
   e-mail e no canto do checkout, onde nao cabe nome nenhum. Por isso o M fica
   opticamente centrado (a letra tem peso a esquerda) e o circulo e perfeito,
   nunca um quadrado arredondado.
   ============================================================ */
.mitz-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.045em; /* fechado como o Link: o nome vira um bloco so */
  line-height: 1;
  white-space: nowrap;
}

.mitz-logo__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: var(--cor-primaria, #533afd);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0; /* dentro do circulo o tracking negativo desalinha */
  /* O M e mais largo em cima: um empurrao de meio pixel para baixo faz ele
     parecer centrado de verdade. */
  padding-top: 0.5px;
}

.mitz-logo__nome {
  color: var(--text-primary, #0a2540);
  text-transform: lowercase;
}

/* --- tamanhos --- */
.mitz-logo--padrao { font-size: 20px; }
.mitz-logo--padrao .mitz-logo__marca { width: 26px; height: 26px; font-size: 15px; }

.mitz-logo--grande { font-size: 28px; gap: 10px; }
.mitz-logo--grande .mitz-logo__marca { width: 36px; height: 36px; font-size: 21px; }

.mitz-logo--pequeno { font-size: 16px; gap: 6px; }
.mitz-logo--pequeno .mitz-logo__marca { width: 21px; height: 21px; font-size: 12px; }

/* Link do logotipo no painel: sem sublinhado, com area de clique confortavel */
a.mitz-logo:hover .mitz-logo__nome { opacity: 0.85; }