/*
  Paleta extraída da identidade visual real do Inscreve+ (inscrevemais.com.br,
  static/css/style.css) -- o site em produção é escuro por padrão, sem modo
  claro. A paleta clara abaixo é derivada daqui (não existe no site atual),
  ajustando contraste do acento ciano pra continuar legível em fundo claro.
*/

:root {
  --bg: #f7fbfb;
  --panel: #ffffff;
  --panel-2: #eef5f5;
  --text: #06090a;
  --text-soft: #4c5c5e;
  --accent: #0e7f94;       /* --neon (#22d3ee) escurecido p/ contraste em texto/ícone sobre fundo claro */
  --accent-bright: #22d3ee; /* cor de marca original, p/ elementos grandes (botão, fundo) */
  --line: rgba(14, 127, 148, 0.18);
  --radius: 1.25rem;
}

[data-bs-theme="dark"] {
  --bg: #06090a;
  --panel: #0d1416;
  --panel-2: #111c1f;
  --text: #f5fbfb;
  --text-soft: #b7c4c6;
  --accent: #22d3ee;
  --accent-bright: #22d3ee;
  --line: rgba(34, 211, 238, 0.22);
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background-color .15s ease, color .15s ease;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.fw-black { font-weight: 900; letter-spacing: -.04em; }

[data-bs-theme="dark"] body {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 32%),
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28%),
    var(--bg);
}

/* Mapeia pras variaveis nativas do Bootstrap 5, pra componentes prontos
   (botoes, forms, navbar) seguirem o tema sem precisar sobrescrever um por
   um. */
:root, [data-bs-theme="dark"] {
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-primary: var(--accent-bright);
  --bs-primary-rgb: 34, 211, 238;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-bright);
  --bs-border-color: var(--line);
  /* Tabelas -- antes usavam a classe table-dark do Bootstrap, que forca
     fundo escuro sempre, mesmo no tema claro. Mapeando as variaveis nativas
     aqui, uma <table class="table"> comum ja segue o tema certo dos dois
     lados, sem precisar de classe extra. */
  --bs-table-bg: var(--panel);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--panel-2);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--panel-2);
  --bs-table-hover-color: var(--text);
}

/* Campos de formulario -- por padrao usam --bs-border-color (var(--line),
   ciano bem sutil) e --bs-body-bg (quase preto no escuro), ficando com
   contorno pouco visivel. Ajusta pro padrao real do site em producao:
   borda neutra mais visivel (mesma cor de --text-soft), fundo um tom mais
   claro (--panel-2) e cantos mais arredondados. */
.form-control, .form-select {
  background-color: var(--panel-2);
  border-color: color-mix(in srgb, var(--text-soft) 40%, transparent);
  border-radius: .8rem;
}

/* SelectDateWidget (data de nascimento) -- os 3 <select> vem com
   .form-select, que por padrao no Bootstrap e' width:100%, empilhando
   um embaixo do outro. Aqui divide o espaco em partes iguais lado a lado. */
.data-nascimento-selects select.form-select {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
}

/* Switch de marcar inadimplente (Operadora) -- fica vermelho quando ligado,
   pra reforcar que "aceso" aqui e' o estado de atencao/problema, ao contrario
   do switch de Pix (aceso = normal, so' habilitando um recurso). */
.switch-perigo:checked {
  background-color: #dc3545;
  border-color: #dc3545;
}

.site-navbar {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand-mark { color: var(--accent-bright); }

.site-navbar .navbar-brand { font-size: 1.6rem; }

.btn-accent {
  background: var(--accent-bright);
  color: #04222a;
  border: 0;
  font-weight: 700;
}
/* Sem re-declarar "background" aqui, o hover herdava --bs-btn-hover-bg:
   transparent do .btn base do Bootstrap (so' variantes .btn-primary etc
   sobrescrevem esse token) -- o botao ficava transparente no hover, com o
   texto quase preto (#04222a) sumindo contra o fundo escuro. */
.btn-accent:hover { filter: brightness(1.08); color: #04222a; background: var(--accent-bright); }

.btn-outline-accent {
  border: 1px solid color-mix(in srgb, var(--accent-bright) 55%, transparent);
  color: var(--accent);
  background: transparent;
}
.btn-outline-accent:hover { background: var(--accent-bright); color: #04222a; }
.btn-outline-accent.active { background: var(--accent-bright); color: #04222a; }

/* Botao "Entrar com Google" -- segue as diretrizes de marca do Google
   (fundo branco fixo, borda cinza, "G" colorido), igual em qualquer tema
   do site -- nao usa var(--accent)/--bg de proposito, esse botao nao muda
   com tema claro/escuro em nenhum app que o usa. */
.btn-google {
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  font-weight: 500;
}
.btn-google:hover {
  background: #f8f9fa;
  color: #3c4043;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

/* <summary> usado como gatilho de "entrar com e-mail" (details/summary
   nativo, sem JS) -- tira o triangulo/marcador padrao, o botao dentro do
   summary ja comunica que e' clicavel sozinho. */
summary.btn {
  list-style: none;
}
summary.btn::-webkit-details-marker {
  display: none;
}

/* .btn-outline-warning padrao do Bootstrap usa amarelo claro -- da pra ler
   no tema escuro (contrasta com o fundo escuro), mas quase invisivel no
   tema claro (amarelo claro sobre fundo branco). So' escurece pro tema
   claro; tema escuro fica com o padrao do Bootstrap, que ja funciona. */
[data-bs-theme="light"] .btn-outline-warning {
  border-color: #8a6400;
  color: #8a6400;
}
[data-bs-theme="light"] .btn-outline-warning:hover {
  background: #8a6400;
  border-color: #8a6400;
  color: #fff;
}

.card-surface {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.text-soft { color: var(--text-soft) !important; }

.badge-accent {
  background: color-mix(in srgb, var(--accent-bright) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent-bright) 24%, transparent);
}

/* Alertas (mensagens de sucesso/erro) -- o verde/vermelho padrao do
   Bootstrap e' pensado pra fundo branco; sobre o tema escuro fica uma
   caixa esbranquicada destoando do resto. Mesmo padrao visual do
   badge-accent (fundo com color-mix sobre o painel), com a cor semantica
   certa em vez do ciano da marca. */
.alert-success {
  background: color-mix(in srgb, #22c55e 16%, var(--panel));
  color: color-mix(in srgb, #22c55e 65%, var(--text));
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}
.alert-danger {
  background: color-mix(in srgb, #ef4444 16%, var(--panel));
  color: color-mix(in srgb, #ef4444 65%, var(--text));
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
}

/* Botao do WhatsApp -- cor oficial fixa, nao segue o tema (mesmo padrao do
   site atual: reconhecimento instantaneo importa mais que consistencia
   com a paleta). */
.btn-whatsapp { background: #25d366; color: #04220e; border: 0; font-weight: 700; }
.btn-whatsapp:hover { background: #1fb958; color: #04220e; }

/* Pagina publica do evento -- aspect-ratio (nao altura fixa) garante que o
   recorte do object-fit:cover fique CONSTANTE independente da largura da
   tela -- com altura fixa + largura fluida, quanto mais larga a janela,
   mais "panoramica" a caixa fica e mais o cover corta dos lados (perde
   logo/texto perto da borda da imagem), piorando conforme a tela cresce.
   Uma UNICA proporcao pra qualquer largura (sem breakpoint mobile
   separado) -- tinha uma proporcao mais "quadrada" so' no mobile antes
   (achatava mais a imagem, cortando bem mais o logo, confirmado num
   iPhone real), pra deixar o banner mais baixo la'. Mas 5:1 (calibrado
   com a proporcao real do banner em producao, 2560x480) ja' e' baixo o
   suficiente -- unificar resolve o corte no mobile E mantem o banner
   baixo, sem precisar de dois valores. max-width/max-height continuam
   como teto de seguranca pra nao virar um banner gigante em monitor
   ultra-wide/4K. */
/* aspect-ratio via --banner-aspect (definida por evento em evento.html, a
   partir de Evento.banner_aspect_ratio_css) -- 5/1 so' como fallback pra
   quem nao define a variavel. max-height acompanha o mesmo limite do
   formato mais alto hoje (16:9 a 1600px de largura = 900px). */
.evento-banner { width: 100%; max-width: 1600px; margin: 0 auto; aspect-ratio: var(--banner-aspect, 5 / 1); max-height: 900px; overflow: hidden; }
.evento-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cropper.js exige um tamanho inicial (via CSS) na <img> antes de
   inicializar, senao ele calcula o container com base no tamanho natural
   da imagem -- com uma foto grande isso estourava o modal (altura fixa de
   320px) antes do Cropper assumir o controle do layout, empurrando o
   rodape (botoes Cancelar/Usar recorte) pra fora da viewport -- e como o
   modal usa backdrop:"static"/keyboard:false (nao fecha com Esc/clique
   fora) e o header nao tinha botao de fechar, ficava sem nenhuma saida
   (achado com banner 1920x1080 real, mais alto que os formatos antigos
   sempre bem panoramicos). max-height aqui + overflow:hidden no
   container (ver .og-image-crop-frame) resolvem os dois lados. Ver
   static/js/og-image-cropper.js. */
#og-image-crop-image { display: block; max-width: 100%; max-height: 100%; }
.og-image-crop-frame { overflow: hidden; }

.evento-logo-box {
  width: 72px;
  height: 72px;
  border-radius: .75rem;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.evento-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (min-width: 768px) {
  .evento-logo-box { width: 96px; height: 96px; }
}

.evento-preco-destaque { font-size: 1.75rem; font-weight: 800; color: var(--accent); }

.evento-patrocinador-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}
.evento-patrocinador-box img { max-height: 40px; max-width: 100%; object-fit: contain; }

/* Barra de inscricao fixa no rodape -- so mobile (d-md-none no HTML).
   Preco+CTA sempre visiveis sem depender de rolar a pagina toda. */
.evento-cta-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: .75rem 1rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
}

/* Tabelas com muitas colunas (Meus eventos, Operadora, Inscritos) viram
   lista empilhada abaixo de 768px, em vez de rolar horizontalmente -- sem
   JS. Cada <td> precisa de data-label com o texto do cabecalho
   correspondente. A partir de 768px volta a ser tabela normal, com
   largura suficiente pra uma linha por registro. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr {
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .25rem .75rem;
  }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    text-align: right;
    padding: .5rem 0;
    border-top: 1px solid var(--line);
  }
  .table-stack td:first-child { border-top: 0; }
  .table-stack td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    color: var(--text-soft);
  }

  /* Celulas com conteudo "pesado" (formulario com input, nao so
     texto/badge) -- rotulo com valor lado a lado nao da espaco pro
     campo. Empilha rotulo em cima, formulario ocupando a largura toda,
     alinhado a esquerda. */
  .table-stack td.table-stack-block {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
}