/* ===== Painel do Mestre, ATA =====
   Mesma paleta do site (identidade/design-guide.md V1.1): petróleo + laranja.
   Aqui o layout é de ferramenta, não de vitrine: densidade alta, leitura rápida. */

:root {
  --bg: #0e1015;
  --bg-alt: #16181f;
  --card: #1c1f28;
  --ink: #f5f3ef;
  --ink-dim: #b7b9c3;
  --orange: #ff6a1a;
  --orange-dark: #e0570f;
  --gold: #cda34d;
  --border: #2a2d38;
  --verde: #3fa85f;
  --vermelho: #e2564a;
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: 0.3px; }
p { margin: 0; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ===== Botões ===== */
.btn {
  display: inline-block;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-laranja { background: var(--orange); color: #14100a; }
.btn-laranja:hover { background: var(--orange-dark); }
.btn-vazado {
  background: none;
  border: 2px solid var(--border);
  color: var(--ink);
}
.btn-vazado:hover { border-color: var(--orange); color: var(--orange); }
.btn-mini {
  padding: 7px 13px;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #12141a;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn-mini:hover { border-color: var(--orange); color: var(--orange); }
.btn-mini-cheio {
  background: var(--orange);
  border-color: var(--orange);
  color: #14100a;
  font-weight: 700;
}
.btn-mini-cheio:hover { background: var(--orange-dark); color: #14100a; }
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--orange);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ===== Trava de entrada ===== */
.trava {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 106, 26, 0.16), transparent 55%),
    var(--bg);
  padding: 20px;
}
.trava-caixa {
  width: min(380px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  text-align: center;
}
.trava-logo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}
.trava-caixa h1 { font-size: 1.3rem; text-transform: uppercase; }
.trava-sub {
  color: var(--ink-dim);
  font-size: 0.82rem;
  margin-bottom: 24px;
}
.trava-caixa label {
  display: block;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.trava-caixa input {
  width: 100%;
  padding: 12px 14px;
  background: #12141a;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}
.trava-caixa input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18);
}
.trava-caixa .btn { width: 100%; margin-top: 16px; }
.trava-erro {
  min-height: 20px;
  margin-top: 8px;
  font-size: 0.82rem;
  color: #ff8175;
  text-align: left;
}

/* Saída da tela de login. Discreta de propósito: quem chegou aqui de verdade
   veio entrar, e um segundo botão com peso igual ao "Entrar" só criaria dúvida
   sobre onde clicar. Quem caiu por engano procura justamente esse tipo de link
   pequeno embaixo. Alvo de toque grande apesar do texto pequeno, porque no
   celular link fino é link errado. */
.trava-saida {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.trava-saida:hover,
.trava-saida:focus-visible {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.menu {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.menu-marca {
  display: flex;
  align-items: center;
  gap: 11px;
}
.menu-marca img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.menu-marca strong {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.menu-marca small { color: var(--ink-dim); font-size: 0.72rem; letter-spacing: 1.5px; }

.menu-nav { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  text-align: left;
  padding: 11px 14px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--ink-dim);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.menu-item:hover { background: #1f222c; color: var(--ink); }
.menu-item.is-active {
  background: rgba(255, 106, 26, 0.12);
  color: var(--orange);
}
.menu-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.menu-secundario {
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--ink-dim);
  font-size: 0.82rem;
  cursor: pointer;
}
.menu-secundario:hover { color: var(--orange); }

.conteudo { padding: 28px 32px 60px; min-width: 0; }

.topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.topo h1 { font-size: 1.6rem; text-transform: uppercase; }
.topo-sub { color: var(--ink-dim); font-size: 0.88rem; margin-top: 3px; }
.topo-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.campo-mes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.campo-mes input {
  padding: 9px 12px;
  background: #12141a;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
}
.campo-mes input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; cursor: pointer; }

.aviso-erro {
  padding: 12px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--vermelho);
  background: rgba(226, 86, 74, 0.12);
  border-radius: var(--radius);
  font-size: 0.86rem;
  color: #ff8175;
}

/* Fica na tela até a causa ser resolvida. Amarelo, não vermelho: é o painel
   funcionando pela metade, não o painel quebrado. */
.aviso-persistente {
  padding: 12px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--gold);
  background: rgba(205, 163, 77, 0.1);
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--gold);
}

.label-espaco { margin-top: 14px; }

/* ===== Campo com erro =====
   Vermelho na borda mais a frase embaixo. Os dois juntos porque só a cor não
   serve pra quem não distingue vermelho, e só a frase passa despercebida. */
.campo-invalido {
  border-color: var(--vermelho) !important;
  background: rgba(226, 86, 74, 0.06) !important;
}
.campo-erro {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: #ff8175;
}

.menu-usuario {
  display: block;
  padding: 4px 14px 8px;
  font-size: 0.74rem;
  color: var(--gold);
  word-break: break-all;
}

/* novos cadastros vindos do site */
.bloco-novos { border-color: var(--orange); }
.bloco-novos .bloco-topo { background: rgba(255, 106, 26, 0.08); }
.bloco-tag-novo { background: rgba(255, 106, 26, 0.18); color: var(--orange); }
.selo-novo { background: rgba(255, 106, 26, 0.16); color: var(--orange); }

/* ===== Cartões de resumo ===== */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.cartao {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.cartao-rotulo {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.cartao-valor { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.cartao-nota { font-size: 0.78rem; color: var(--ink-dim); margin-top: 5px; }
.cartao-alerta { border-color: var(--vermelho); }
.cartao-alerta .cartao-valor { color: #ff8175; }
.cartao-bom .cartao-valor { color: var(--verde); }

/* ===== Blocos e listas ===== */
.bloco {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 22px;
  overflow: hidden;
}
.bloco-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.bloco-topo h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
.bloco-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(226, 86, 74, 0.15);
  color: #ff8175;
  font-size: 0.76rem;
  font-weight: 700;
}
.bloco-tag-aberto { background: rgba(205, 163, 77, 0.15); color: var(--gold); }
.bloco-total {
  margin-left: auto;
  font-weight: 800;
  font-size: 1rem;
  color: #ff8175;
}

.menu-badge {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--orange);
  color: #14100a;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}
.menu-item.is-active .menu-badge { background: var(--orange); }

.contagem-lista {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.campo-dica {
  font-size: 0.76rem;
  color: var(--ink-dim);
  margin-top: 6px;
}
/* troca de plano: fica em destaque porque mexe no mês de início da cobrança */
.campo-dica-troca {
  border-left: 2px solid var(--orange);
  padding-left: 10px;
  color: var(--gold);
}
.campo-dica-alerta {
  border-left-color: var(--vermelho);
  color: #ff8175;
}

.importar-sub { color: var(--ink-dim); font-size: 0.88rem; margin: 6px 0 20px; }
.importar-resumo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #12141a;
  padding: 6px 18px;
}
.importar-linha {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.importar-linha:last-child { border-bottom: 0; }
.importar-linha strong { color: var(--ink); font-size: 1rem; }
.importar-amostra { margin-top: 20px; }
.importar-amostra h3 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 10px;
}
.importar-item {
  font-size: 0.82rem;
  color: var(--ink-dim);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.importar-progresso {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 106, 26, 0.1);
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: 0.88rem;
  text-align: center;
}

.ficha-acoes-divida {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.linha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.linha:last-child { border-bottom: 0; }
.linha:hover { background: #1f222c; }
.linha-principal { flex: 1; min-width: 0; cursor: pointer; }
.linha-nome {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linha-sub {
  font-size: 0.8rem;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linha-valor { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.linha-acoes { display: flex; gap: 7px; flex-shrink: 0; }

/* ===== Aviso de cadastro repetido =====
   Aluno antigo que preencheu a ficha do site de novo pra conseguir pagar.
   O aviso é uma faixa embaixo da linha, e não um selo, porque precisa caber o
   nome de quem já existe: sem o nome o mestre teria que ir caçar na lista, e
   aí ele mataria a conferência e clicaria em Matricular direto.

   Só as linhas com aviso ganham flex-wrap, via .linha-com-igual. Ligar isso na
   .linha inteira mudaria o comportamento de listas que hoje estão certas. */
.linha-com-igual { flex-wrap: wrap; }
.linha-igual {
  flex: 0 0 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: rgba(205, 163, 77, 0.08);
  color: var(--gold);
  font-family: inherit;
  font-size: 0.79rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.45;
  cursor: pointer;
}
.linha-igual:hover { background: rgba(205, 163, 77, 0.16); }

/* Nome e nascimento batendo é quase certeza, não suspeita: muda pra vermelho
   pra não empatar visualmente com o "pode ser" do telefone repetido. */
.linha-igual-forte {
  border-left-color: #e2564a;
  background: rgba(226, 86, 74, 0.09);
  color: #ff8175;
}
.linha-igual-forte:hover { background: rgba(226, 86, 74, 0.17); }

/* ===== Fila de aviso: quem já foi avisado =====
   Sai da lista principal e se recolhe aqui embaixo. Continua acessível pra
   desfazer, mas apagado, porque não é mais trabalho a fazer. */
.avisados {
  border-top: 1px solid var(--border);
  background: #191b22;
}
.avisados > summary {
  padding: 13px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-dim);
  cursor: pointer;
  list-style: none;
}
.avisados > summary::-webkit-details-marker { display: none; }
.avisados > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.avisados[open] > summary::before { content: "▾ "; }
.avisados > summary:hover { color: var(--ink); }
.avisados .linha { border-top: 1px solid var(--border); border-bottom: 0; }

.linha-feita .linha-nome,
.linha-feita .linha-sub,
.linha-feita .linha-valor { color: #6b6e78; }
.linha-feita .selo { opacity: 0.45; }

/* ===== Acervo antigo na ficha =====
   Recolhido por padrão: é consulta ocasional, não é o que se abre a ficha pra
   ver. O ano funciona como divisor da lista. */
.historico-antigo > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-dim);
}
.historico-antigo > summary::-webkit-details-marker { display: none; }
.historico-antigo > summary::before { content: "▸ "; }
.historico-antigo[open] > summary::before { content: "▾ "; }
.historico-antigo > summary:hover { color: var(--ink); }
.historico-ano {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 7px 0 5px;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold);
}
.historico-antigo .historico-linha { color: var(--ink-dim); }

.selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.selo-pago { background: rgba(63, 168, 95, 0.16); color: #6fd18a; }
.selo-aberto { background: rgba(205, 163, 77, 0.16); color: var(--gold); }
.selo-atrasado { background: rgba(226, 86, 74, 0.16); color: #ff8175; }
.selo-inativo { background: #24272f; color: var(--ink-dim); }
.selo-duplicado { background: rgba(226, 86, 74, 0.16); color: #ff8175; }
.selo-isento { background: rgba(205, 163, 77, 0.18); color: var(--gold); }
/* trimestral e semestral no meio do ciclo: não é dívida, não é pagamento do mês */
.selo-coberto { background: rgba(47, 126, 216, 0.16); color: #7fb4f0; }
.selo-futuro { background: #24272f; color: var(--ink-dim); }

.vazio {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

/* ===== Filtros ===== */
.filtros {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.filtros input, .filtros select {
  padding: 11px 14px;
  background: #12141a;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.9rem;
}
.filtros input { flex: 1; min-width: 220px; }
/* com quatro controles na barra, no celular cada select fica com metade da
   linha em vez de um por linha, que empurrava a lista pra fora da tela */
@media (max-width: 560px) {
  .filtros select { flex: 1 1 calc(50% - 6px); min-width: 0; }
}
.filtros input:focus, .filtros select:focus {
  outline: none;
  border-color: var(--orange);
}

/* ===== Gráfico anual ===== */
.grafico-area {
  position: relative;
  padding: 18px 20px 8px;
}
.grafico {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}
.grafico rect[tabindex]:focus-visible {
  fill: rgba(255, 255, 255, 0.05);
  outline: none;
}

.grafico-legenda {
  margin-left: auto;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.legenda-cor {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
/* mesmos tons conferidos contra o fundo do bloco */
.legenda-previsto { background: #6b7186; opacity: 0.55; }
.legenda-entrou { background: #3fa85f; }

.grafico-dica {
  position: absolute;
  transform: translate(-50%, -115%);
  padding: 9px 12px;
  background: #0e1015;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.grafico-dica strong { color: var(--orange); }

.grafico-vazio {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  max-width: 62%;
  text-align: center;
  font-size: 0.86rem;
  color: var(--ink-dim);
  pointer-events: none;
}
.grafico-nota {
  padding: 0 20px 18px;
  font-size: 0.78rem;
  color: var(--ink-dim);
}

/* ===== Relatórios ===== */
.bloco-legenda {
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tabela-rolagem { overflow-x: auto; }
.tabela-relatorio {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.88rem;
}
.tabela-relatorio th {
  text-align: right;
  padding: 12px 20px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  white-space: nowrap;
}
.tabela-relatorio th:first-child,
.tabela-relatorio td:first-child { text-align: left; }
.tabela-relatorio th.col-barra { text-align: left; width: 180px; }
.tabela-relatorio td {
  text-align: right;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tabela-relatorio td:first-child {
  font-weight: 600;
  text-transform: capitalize;
}
.tabela-relatorio tbody tr:hover { background: #1f222c; }
.tabela-relatorio .linha-apagada td { color: #5b5e68; }
.tabela-relatorio .linha-atual {
  background: rgba(255, 106, 26, 0.06);
  box-shadow: inset 3px 0 0 var(--orange);
}
.celula-falta { color: #ff8175; }
.celula-caixa { color: #6fd18a; font-weight: 700; }
.tabela-relatorio tfoot td {
  padding: 14px 20px;
  border-top: 2px solid var(--border);
  border-bottom: 0;
  font-weight: 800;
  font-size: 0.92rem;
}
.tabela-relatorio tfoot td:first-child {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
  color: var(--ink-dim);
}

.barra {
  height: 7px;
  border-radius: 999px;
  background: #24272f;
  overflow: hidden;
}
.barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--orange);
  transition: width 0.3s ease;
}
.barra span.barra-cheia { background: var(--verde); }
.barra-legenda {
  display: block;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--ink-dim);
}

.nota-relatorio {
  font-size: 0.82rem;
  color: var(--ink-dim);
  padding: 14px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(205, 163, 77, 0.06);
  border-radius: 0 8px 8px 0;
}

@media (prefers-reduced-motion: reduce) {
  .barra span { transition: none; }
}

/* ===== Gaveta (ficha e formulário) ===== */
.gaveta { position: fixed; inset: 0; z-index: 80; }
.gaveta-fundo {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.72);
}
.gaveta-painel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 100%);
  background: var(--bg-alt);
  border-left: 1px solid var(--border);
  padding: 30px;
  overflow-y: auto;
  animation: gavetaEntra 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gavetaEntra {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.gaveta-fechar {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  color: var(--ink-dim);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.gaveta-fechar:hover { color: var(--orange); }

.ficha-nome { font-size: 1.4rem; text-transform: uppercase; margin-bottom: 4px; }
.ficha-sub { color: var(--ink-dim); font-size: 0.88rem; margin-bottom: 20px; }
.ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
/* foto de perfil no formato 3x4, acima dos dados de contato */
.ficha-foto {
  width: 120px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #12141a;
  margin-bottom: 2px;
}

.ficha-secao {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 18px;
}
.ficha-secao h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold);
  margin-bottom: 12px;
}
.ficha-dados {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 0.88rem;
  margin: 0;
}
.ficha-dados dt { color: var(--ink-dim); white-space: nowrap; }
.ficha-dados dd { margin: 0; font-weight: 600; word-break: break-word; }

.historico-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.historico-linha:last-child { border-bottom: 0; }

/* ===== Formulário ===== */
.form-aluno { margin-top: 22px; }
.campo { margin-bottom: 16px; flex: 1; min-width: 0; }
.campo-linha { display: flex; gap: 14px; flex-wrap: wrap; }
.campo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 13px;
  background: #12141a;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.18);
}
.campo input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }
.form-acoes {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* divisórias da ficha longa do formulário */
.form-secao {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--orange);
  margin: 26px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
/* código do atleta: o "ATA" é fixo, o mestre só digita o número */
.campo-prefixo {
  display: flex;
  align-items: stretch;
  max-width: 220px;
}
.campo-prefixo .prefixo {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: #1c1f28;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 1px;
}
.campo .campo-prefixo input {
  border-radius: 0 8px 8px 0;
  font-weight: 700;
  letter-spacing: 1px;
}

.codigo-acoes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.78rem;
}
.codigo-vagos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #12141a;
}
.codigo-chip {
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #1c1f28;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.codigo-chip:hover { border-color: var(--orange); color: var(--orange); }

.campo-largo { flex: 2; }
.campo-estreito { flex: 0 0 70px; }
.campo-dica-solta { margin: -6px 0 0; }

/* ===== Ficha incompleta ===== */
#modalFaltando { z-index: 90; }
.faltando-sub { color: var(--ink-dim); font-size: 0.9rem; margin: 8px 0 16px; }
.faltando-lista {
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #12141a;
  padding: 6px 18px;
  margin: 0 0 14px;
  max-height: 46vh;
  overflow-y: auto;
}
.faltando-lista li {
  padding: 10px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
.faltando-lista li:last-child { border-bottom: 0; }
.faltando-lista li::before {
  content: "—";
  color: var(--gold);
  margin-right: 10px;
}

/* ===== Exclusão =====
   Botão de apagar mora longe dos outros, no pé da ficha, pra ninguém
   esbarrar nele enquanto navega. */
.ficha-perigo {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--vermelho);
}
.ficha-perigo h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ff8175;
  margin: 0 0 4px;
}
.ficha-perigo p {
  font-size: 0.82rem;
  color: var(--ink-dim);
  margin: 0 0 12px;
}
.btn-mini-perigo {
  border-color: rgba(226, 86, 74, 0.5);
  color: #ff8175;
}
.btn-mini-perigo:hover {
  border-color: var(--vermelho);
  background: rgba(226, 86, 74, 0.12);
  color: #ff8175;
}
.btn-perigo { background: var(--vermelho); color: #1b0f0e; }
.btn-perigo:hover { background: #c9463b; }
.btn-perigo:disabled {
  background: #2a2c34;
  color: #71747f;
  cursor: not-allowed;
}

/* abre por cima da ficha, que continua aberta atrás */
#modalExcluir { z-index: 90; }
.excluir-alvo {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 8px 0 12px;
}
.excluir-lista {
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #12141a;
  padding: 6px 18px;
  margin: 0 0 14px;
}
.excluir-lista li {
  padding: 10px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
.excluir-lista li:last-child { border-bottom: 0; }
.excluir-aviso {
  font-size: 0.86rem;
  color: #ff8175;
  margin: 0;
}
#excluirConfirmacao {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

/* ===== Responsivo ===== */

/* botão "Mais": não existe no desktop, onde o menu é uma coluna com espaço
   de sobra pras ações secundárias */
.menu-mais { display: none; }

@media (max-width: 900px) {
  /* As faixas precisam ser declaradas: com min-height 100vh e faixas
     automáticas, a grade dividia a sobra de altura entre as duas e abria um
     vão logo abaixo do menu. Assim o menu tem a altura do que ele carrega
     dentro, e a sobra vai toda pro conteúdo. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  /* a coluna da lateral vira uma faixa no alto, empilhada em três degraus:
     marca, abas e (se o usuário pedir) as ações secundárias */
  .menu {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .menu-marca { margin-right: auto; }
  .menu-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .menu-item { padding: 9px 13px; }

  .menu-mais {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--ink-dim);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
  }
  .menu-mais-seta {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .menu-mais[aria-expanded="true"] {
    color: var(--orange);
    border-color: var(--orange);
  }
  .menu-mais[aria-expanded="true"] .menu-mais-seta {
    transform: translateY(1px) rotate(-135deg);
  }

  .menu-rodape {
    margin-top: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    width: 100%;
  }
  .menu-rodape[hidden] { display: none; }

  /* o e-mail é o motivo de tudo ter desandado: solto num flex em linha ele
     era espremido até a largura de uma letra e descia a tela inteira em
     coluna. Aqui ele toma a linha pra ele e quebra só quando não couber. */
  .menu-usuario {
    width: 100%;
    padding: 0 2px 2px;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* viram pastilhas: em linha, sem moldura, pareciam texto corrido */
  .menu-secundario {
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .conteudo { padding: 22px 18px 50px; }
  .gaveta-painel { width: 100%; padding: 24px 20px; }
}

@media (max-width: 560px) {
  .linha { flex-wrap: wrap; }
  .linha-acoes { width: 100%; }
  /* empilhado, flex-basis viraria altura: a UF ficaria com 70px de altura */
  .campo-linha { flex-direction: column; gap: 0; }
  .campo-estreito { flex: 1; }
  .topo h1 { font-size: 1.3rem; }
  .menu { padding: 12px 14px; gap: 12px; }
  .menu-marca strong { font-size: 0.82rem; }
  .menu-item { font-size: 0.86rem; padding: 8px 11px; }
  .conteudo { padding: 20px 14px 44px; }
  /* empilhados e ocupando a largura toda: lado a lado, o seletor de mês e o
     botão não cabem sem espremer um dos dois */
  .topo-acoes {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .campo-mes input { flex: 1; width: 100%; min-width: 0; }
  .topo-acoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gaveta-painel { animation: none; }
}