/* Tema predominante branco, preto e vermelho */
:root {
  --cor-fundo: #ffffff;
  --cor-texto: #111111;
  --cor-destaque: #BF0A30; /* ajustável no futuro */
  --cor-borda: #e5e5e5;
  --cor-texto-sec: #666666;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: Arial, Helvetica, sans-serif; }

/* Aumenta a largura máxima do container para reduzir scroll horizontal quando possível */
.container { max-width: 1440px; margin: 0 auto; padding: 24px; }

.cabecalho { border-bottom: 1px solid var(--cor-borda); padding: 16px 0; margin-bottom: 24px; }
.titulo { font-size: 24px; font-weight: 700; }
.subtitulo { font-size: 14px; color: var(--cor-texto-sec); }

.btn { display: inline-block; padding: 10px 16px; border-radius: 6px; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primario { background: var(--cor-destaque); color: #ffffff; }
.btn-primario:hover { background: #A10826; }
.btn-secundario { background: #ffffff; color: var(--cor-destaque); border-color: var(--cor-destaque); }

.form-grupo { margin-bottom: 16px; }
.form-grupo label { display: block; margin-bottom: 6px; font-weight: 600; }
.form-controle { width: 100%; padding: 10px 12px; border: 1px solid var(--cor-borda); border-radius: 6px; background: #ffffff; color: var(--cor-texto); }
.form-controle:focus { outline: none; border-color: var(--cor-destaque); box-shadow: 0 0 0 3px rgba(191, 10, 48, 0.15); }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { border: 1px solid var(--cor-borda); padding: 8px; text-align: left; }
.tabela th { background: #f7f7f7; }

/* Evitar scroll horizontal desnecessário: permitir quebra de palavras longas dentro da tabela */
.table { width: 100%; table-layout: auto; }
.table td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.table th { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.table .badge { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; }

/* Coluna de ações com largura mínima sem extrapolar a tabela */
.table thead th:last-child, .table tbody td:last-child { width: 110px; }

.aviso { color: var(--cor-destaque); font-weight: 600; }

html, body {
  height: 100%;
}

body {
  overflow-y: auto; /* rolagem vertical apenas quando necessário */
}

/* Em telas grandes, se o conteúdo cabe, evitar barra de rolagem por pequenos offsets */
@media (min-height: 700px) {
  body {
    overflow-y: auto; /* permitir rolagem, antes estava hidden */
  }
  main.container {
    min-height: calc(100vh - 160px); /* cabeçalho + margem aproximada */
  }
}

.cabecalho {
  padding: 24px 0;
}

.titulo {
  font-size: 1.5rem;
  font-weight: 700;
}

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800;900&display=swap');
.cabecalho .container { display: flex; flex-direction: column; gap: 12px; padding-left: 0; }
.cabecalho .titulo { text-align: center; font-size: 42px; font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: 0.5px; }

.subtitulo {
  color: #666;
}

/* Botões customizados já usados */
.btn-primario {
  background-color: #c40000;
  color: #fff;
}

.btn-secundario {
  background-color: #fff;
  color: #000;
  border: 1px solid #c40000;
}

/* Ajuste para os ícones nos botões de ação */
.btn-group .btn i.bi {
  font-size: 14px; /* ajustado para 14px */
  font-weight: normal;
  vertical-align: middle;
}

/* Tabela responsiva sem causar scroll extra por padding */
.table { margin-bottom: 0; }

.table-responsive {
  border: 1px solid #eee;
  overflow-x: auto; /* só mostra barra horizontal quando realmente necessário */
}

/* Ícones de Visualizar e Editar em preto */
.btn-outline-secondary i.bi { color: #000; }

/* ===== Cores de fundo para badges de FAIXA ===== */
.badge.faixa-branca { background: #ffffff; color: #111; border: 1px solid #ccc; }
.badge.faixa-cinza { background: #9e9e9e; color: #111; border: 1px solid #8a8a8a; }
.badge.faixa-amarela { background: #ffeb3b; color: #111; border: 1px solid #e0c600; }
.badge.faixa-laranja { background: #ff9800; color: #111; border: 1px solid #cc7a00; }
.badge.faixa-verde { background: #4caf50; color: #fff; border: 1px solid #3d8b40; }
.badge.faixa-azul { background: #1e90ff; color: #fff; border: 1px solid #1874cc; }
.badge.faixa-roxa { background: #7e57c2; color: #fff; border: 1px solid #6b4aa8; }
.badge.faixa-marrom { background: #795548; color: #fff; border: 1px solid #5d4037; }
.badge.faixa-preta { background: #000000; color: #fff; border: 1px solid #000000; }

/* Paleta específica para mini faixa (.faixa-box) alinhada ao dashboard (tons mais escuros) */
.badge.faixa-box.faixa-branca { background: #e9e9e9; border: 1px solid #bdbdbd; }
.badge.faixa-box.faixa-cinza { background: #6f6f6f; border: 1px solid #565656; }
.badge.faixa-box.faixa-amarela { background: #b29a00; border: 1px solid #8f7d00; }
.badge.faixa-box.faixa-laranja { background: #a85f00; border: 1px solid #874d00; }
.badge.faixa-box.faixa-verde { background: #2f6e33; border: 1px solid #245627; }
.badge.faixa-box.faixa-azul { background: #0d5192; border: 1px solid #0e4a83; }
.badge.faixa-box.faixa-roxa { background: #583f90; border: 1px solid #483479; }
.badge.faixa-box.faixa-marrom { background: #4a322c; border: 1px solid #3b2823; }
.badge.faixa-box.faixa-preta { background: #000; border: 1px solid #000; }
/* Cores de texto para listras */
.texto-branco { color: #fff !important; }
.texto-preto { color: #111 !important; }
.badge.faixa-box { padding: 0; width: 46px; height: 10px; display: inline-block; border-radius: 3px; vertical-align: middle; position: relative; }
.faixa-box .grau-stripe { position: absolute; top: 1px; bottom: 1px; width: 2px; border-radius: 1px; left: auto; right: var(--grau-offset) !important; display: block; }
.faixa-box .grau-stripe.white { background: #fff; }
.faixa-box .grau-stripe.black { background: #000; }
@media (max-width: 576px) {
  .badge.faixa-box { width: 46px; height: 12px; }
}
.faixa-box.listra-branca::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; background: #fff; transform: translateY(-50%); border-radius: 1px; z-index: 1; }
.faixa-box.listra-preta::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; background: #000; transform: translateY(-50%); border-radius: 1px; z-index: 1; }
.faixa-box .grau-stripe { z-index: 2; }

/* ===== Estilo específico da página inicial ===== */
.inicio-menu .nav-link {
  color: var(--cor-texto); /* preto padrão */
  text-decoration: none; /* tira sublinhado */
  border: 1px solid var(--cor-destaque);
  background-color: #fff;
}
.inicio-menu .nav-link:hover,
.inicio-menu .nav-link:focus {
  background-color: var(--cor-destaque); /* vermelho */
  color: #fff; /* texto branco no hover */
}
.inicio-menu .nav-link.active {
  background-color: var(--cor-destaque); /* vermelho ativo */
  color: #fff;
  border-color: var(--cor-destaque);
}
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Remover azul padrão dos links dentro da home (escopo nav) */
.inicio-menu a {
  color: inherit; /* herda preto */
  text-decoration: none;
}

/* ===== Menu global do topo ===== */
.topo-menu .nav-link {
  color: var(--cor-texto);
  text-decoration: none;
  border: 1px solid var(--cor-destaque);
  background-color: #fff;
}
.topo-menu .nav-link:hover,
.topo-menu .nav-link:focus {
  background-color: var(--cor-destaque);
  color: #fff;
}
.topo-menu .nav-link.active {
  background-color: var(--cor-destaque);
  color: #fff;
  border-color: var(--cor-destaque);
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Evitar o azul padrão em qualquer link dentro do topo */
.topo-menu a { color: inherit; text-decoration: none; }
/* ===== Posicionar o menu perto da linha de divisão do cabeçalho ===== */
.cabecalho { padding: 16px 0 0; }
.cabecalho .container { display: flex; flex-direction: column; gap: 12px; padding-left: 0; }
.cabecalho .topo-menu { margin-top: auto; }
.cabecalho .topo-menu .nav { margin-bottom: 0; justify-content: flex-start; }


/* Textura sutil no título (mantém preto com leve variação) */
.cabecalho .titulo a {
  background-image:
    linear-gradient(180deg, #111 0%, #0f0f0f 50%, #111 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, rgba(0,0,0,0.06) 2px 4px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.inicio-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.inicio-menu .nav-link:hover,
.inicio-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.inicio-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Botões padrão em preto com texto branco */
.btn-primario { background-color: #000; color: #fff; border-color: transparent; }
.btn-primario:hover { background-color: #111; }
.btn-secundario { background-color: #000; color: #fff; border-color: transparent; }
.btn-secundario:hover { background-color: #111; }
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Menu da home: fundo preto, texto branco, sem borda vermelha */
.inicio-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.inicio-menu .nav-link:hover,
.inicio-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.inicio-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Menu global do topo: fundo preto, texto branco, sem borda vermelha */
.topo-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.topo-menu .nav-link:hover,
.topo-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.topo-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Hover vermelho para todos os botões e menus */
.btn:hover { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.btn:hover i.bi { color: #fff !important; }
.btn-primario:hover, .btn-secundario:hover { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.inicio-menu .nav-link:hover, .inicio-menu .nav-link:focus { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.topo-menu .nav-link:hover, .topo-menu .nav-link:focus { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.topo-menu .nav-link.active {
  background-color: var(--cor-destaque);
  color: #fff;
  border-color: var(--cor-destaque);
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Overrides de layout do header (desktop à esquerda) */
.cabecalho .container { flex-direction: row !important; align-items: center; justify-content: space-between; }
.cabecalho .titulo { text-align: left !important; }
.cabecalho .topo-menu .nav { justify-content: flex-start !important; }
/* Neutraliza textura antiga do título (não afeta img) */
.cabecalho .titulo a { background-image: none !important; color: inherit !important; -webkit-background-clip: initial !important; background-clip: initial !important; }
@media (max-width: 576px) {
  .cabecalho .topo-menu { width: 100%; display: flex; justify-content: center; }
  .cabecalho .topo-menu .nav { width: 100%; justify-content: center !important; }
  .cabecalho .topo-menu .nav .nav-item { display: flex; }
  .cabecalho .topo-menu .nav .nav-link { text-align: center; }
}
/* Cards da página inicial com mesma cor do header */
.inicio .card,
.card {
  background-color: #f5f5f5;
}
/* Ajustar itens de lista dentro dos cards para combinar */
.card .list-group-item {
  background-color: #f5f5f5;
}
/* Header layout: force desktop left menu + centered logo */
.cabecalho .container {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.cabecalho .titulo {
  grid-column: 2;
  justify-self: center;
}
.cabecalho .topo-menu {
  grid-column: 1;
  justify-self: start;
}
.cabecalho .topo-menu .nav-pills {
  justify-content: flex-start;
}

/* Mobile: stack and center */
@media (max-width: 576px) {
  .cabecalho .container {
    grid-template-columns: 1fr;
  }
  .cabecalho .titulo {
    grid-column: 1;
    justify-self: center;
  }
  .cabecalho .topo-menu {
    grid-column: 1;
    justify-self: center;
  }
  .cabecalho .topo-menu .nav-pills {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topo-menu .nav-pills .nav-link { text-align: center; }
}

/* Logo sizing */
 .cabecalho .logo {
   height: 150px;
   width: auto;
   display: block;
 }
 @media (max-width: 576px) {
   .cabecalho .logo { height: 150px; }
 }
/* Fundo decorativo do cabeçalho com coliseu */
.cabecalho {
  position: relative;
  overflow: hidden;
}
.cabecalho::before {
  background-image: url('/static/img/marca.PNG');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: cover;
  opacity: 0.08;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 576px) {
  .cabecalho::before {
    background-position: center center;
    background-size: cover;
    opacity: 0.08;
  }
}
.cabecalho .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 576px) {
  .cabecalho::before {
    background-size: 380px auto;
  }
}
/* Categoria nos cards da página inicial em vermelho */
section.card[aria-label="Aula"] .categoria { color: #990000; font-weight: 700; }
/* Botão/pílula de alunos com o mesmo padrão do dashboard */
.btn-alunos {
  padding: 2px 6px;
  font-size: 0.85rem;
  line-height: 1.1;
  border-width: 1px;
  border-radius: 6px;
  color: #212529;
  background-image: linear-gradient(#f8f9fa, #e9ecef);
  border-color: #cbd3da;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 3px rgba(0,0,0,0.12);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  text-decoration: none;
  display: inline-block;
}
.btn-alunos:hover {
  background-image: linear-gradient(#f2f4f6, #e4e9ed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 4px rgba(0,0,0,0.14);
}
.btn-alunos:active {
  background-image: linear-gradient(#e9ecef, #f8f9fa);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(1px);
}
/* Escopo específico para cards de Aula no início */
section.card[aria-label="Aula"] .link-alunos { color: #000; }
section.card[aria-label="Aula"] .btn-alunos { background-color: rgb(194, 194, 194); color: #000; border-color: #d5d5d5; font-weight: bold; }
section.card[aria-label="Aula"] .btn-alunos:hover { background-color: #dcdcdc; border-color: #c8c8c8; }

/* Modal CSS-only reutilizado do dashboard do aluno */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1050; }
.modal-overlay:target { display: flex; }
.modal-card { background: #fff; border-radius: 8px; max-width: 640px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-card .modal-header { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.modal-card .modal-body { padding: 16px; max-height: 60vh; overflow: auto; }
.modal-close { text-decoration: none; font-size: 20px; cursor: pointer; }
.modal-close:hover { text-decoration: none; }
.btn-outline-primary { background-color: transparent; color: var(--cor-texto); border: 1px solid var(--cor-destaque); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: #f2f2f2; color: var(--cor-texto); border: 1px solid var(--cor-destaque); }
.btn-primario, .btn-secundario { border: none !important; }
.btn-primario:hover, .btn-secundario:hover, .btn-primario:focus, .btn-secundario:focus { border: none !important; }
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Menu da home: fundo preto, texto branco, sem borda vermelha */
.inicio-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.inicio-menu .nav-link:hover,
.inicio-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.inicio-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Menu global do topo: fundo preto, texto branco, sem borda vermelha */
.topo-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.topo-menu .nav-link:hover,
.topo-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.topo-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Hover vermelho para todos os botões e menus */
.btn:hover { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.btn:hover i.bi { color: #fff !important; }
.btn-primario:hover, .btn-secundario:hover { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.inicio-menu .nav-link:hover, .inicio-menu .nav-link:focus { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.topo-menu .nav-link:hover, .topo-menu .nav-link:focus { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.topo-menu .nav-link.active {
  background-color: var(--cor-destaque);
  color: #fff;
  border-color: var(--cor-destaque);
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Overrides de layout do header (desktop à esquerda) */
.cabecalho .container { flex-direction: row !important; align-items: center; justify-content: space-between; }
.cabecalho .titulo { text-align: left !important; }
.cabecalho .topo-menu .nav { justify-content: flex-start !important; }
/* Neutraliza textura antiga do título (não afeta img) */
.cabecalho .titulo a { background-image: none !important; color: inherit !important; -webkit-background-clip: initial !important; background-clip: initial !important; }
@media (max-width: 576px) {
  .cabecalho .topo-menu { width: 100%; display: flex; justify-content: center; }
  .cabecalho .topo-menu .nav { width: 100%; justify-content: center !important; }
  .cabecalho .topo-menu .nav .nav-item { display: flex; }
  .cabecalho .topo-menu .nav .nav-link { text-align: center; }
}
/* Cards da página inicial com mesma cor do header */
.inicio .card,
.card {
  background-color: #f5f5f5;
}
/* Ajustar itens de lista dentro dos cards para combinar */
.card .list-group-item {
  background-color: #f5f5f5;
}
/* Header layout: force desktop left menu + centered logo */
.cabecalho .container {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.cabecalho .titulo {
  grid-column: 2;
  justify-self: center;
}
.cabecalho .topo-menu {
  grid-column: 1;
  justify-self: start;
}
.cabecalho .topo-menu .nav-pills {
  justify-content: flex-start;
}

/* Mobile: stack and center */
@media (max-width: 576px) {
  .cabecalho .container {
    grid-template-columns: 1fr;
  }
  .cabecalho .titulo {
    grid-column: 1;
    justify-self: center;
  }
  .cabecalho .topo-menu {
    grid-column: 1;
    justify-self: center;
  }
  .cabecalho .topo-menu .nav-pills {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topo-menu .nav-pills .nav-link { text-align: center; }
}

/* Logo sizing */
 .cabecalho .logo {
   height: 150px;
   width: auto;
   display: block;
 }
 @media (max-width: 576px) {
   .cabecalho .logo { height: 150px; }
 }
/* Fundo decorativo do cabeçalho com coliseu */
.cabecalho {
  position: relative;
  overflow: hidden;
}
.cabecalho::before {
  background-image: url('/static/img/marca.PNG');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: cover;
  opacity: 0.08;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 576px) {
  .cabecalho::before {
    background-position: center center;
    background-size: cover;
    opacity: 0.08;
  }
}
.cabecalho .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 576px) {
  .cabecalho::before {
    background-size: 380px auto;
  }
}
/* Categoria nos cards da página inicial em vermelho */
section.card[aria-label="Aula"] .categoria { color: #990000; font-weight: 700; }
/* Mini quadrado de cor da faixa (sem texto) */
.badge.faixa-box { padding: 0; width: 46px; height: 10px; display: inline-block; border-radius: 3px; vertical-align: middle; position: relative; }
.faixa-box .grau-stripe { position: absolute; top: 1px; bottom: 1px; width: 2px; border-radius: 1px; left: auto; right: var(--grau-offset) !important; display: block; }
.faixa-box .grau-stripe.white { background: #fff; }
.faixa-box .grau-stripe.black { background: #000; }
@media (max-width: 576px) {
  .badge.faixa-box { width: 46px; height: 12px; }
}
/* Botão/pílula de alunos com o mesmo padrão do dashboard */
.btn-alunos {
  padding: 2px 6px;
  font-size: 0.85rem;
  line-height: 1.1;
  border-width: 1px;
  border-radius: 6px;
  color: #212529;
  background-image: linear-gradient(#f8f9fa, #e9ecef);
  border-color: #cbd3da;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 3px rgba(0,0,0,0.12);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  text-decoration: none;
  display: inline-block;
}
.btn-alunos:hover {
  background-image: linear-gradient(#f2f4f6, #e4e9ed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 4px rgba(0,0,0,0.14);
}
.btn-alunos:active {
  background-image: linear-gradient(#e9ecef, #f8f9fa);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(1px);
}
/* Escopo específico para cards de Aula no início */
section.card[aria-label="Aula"] .link-alunos { color: #000; }
section.card[aria-label="Aula"] .btn-alunos { background-color: rgb(194, 194, 194); color: #000; border-color: #d5d5d5; font-weight: bold; }
section.card[aria-label="Aula"] .btn-alunos:hover { background-color: #dcdcdc; border-color: #c8c8c8; }

/* Modal CSS-only reutilizado do dashboard do aluno */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1050; }
.modal-overlay:target { display: flex; }
.modal-card { background: #fff; border-radius: 8px; max-width: 640px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-card .modal-header { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.modal-card .modal-body { padding: 16px; max-height: 60vh; overflow: auto; }
.modal-close { text-decoration: none; font-size: 20px; cursor: pointer; }
.modal-close:hover { text-decoration: none; }
.btn-outline-primary { background-color: #000; color: #fff; border: none; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: #111; color: #fff; border: none; }
.btn-primario, .btn-secundario { border: none !important; }
.btn-primario:hover, .btn-secundario:hover, .btn-primario:focus, .btn-secundario:focus { border: none !important; }
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Menu da home: fundo preto, texto branco, sem borda vermelha */
.inicio-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.inicio-menu .nav-link:hover,
.inicio-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.inicio-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.inicio-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 10px 16px;
}
/* Menu global do topo: fundo preto, texto branco, sem borda vermelha */
.topo-menu .nav-link {
  color: #fff;
  text-decoration: none;
  border: 1px solid transparent;
  background-color: #000;
}
.topo-menu .nav-link:hover,
.topo-menu .nav-link:focus {
  background-color: #111;
  color: #fff;
}
.topo-menu .nav-link.active {
  background-color: #000;
  color: #fff;
  border-color: transparent;
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Hover vermelho para todos os botões e menus */
.btn:hover { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.btn:hover i.bi { color: #fff !important; }
.btn-primario:hover, .btn-secundario:hover { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.inicio-menu .nav-link:hover, .inicio-menu .nav-link:focus { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.topo-menu .nav-link:hover, .topo-menu .nav-link:focus { background-color: var(--cor-destaque) !important; color: #fff !important; border-color: var(--cor-destaque) !important; }
.topo-menu .nav-link.active {
  background-color: var(--cor-destaque);
  color: #fff;
  border-color: var(--cor-destaque);
}
.topo-menu .nav-pills .nav-link {
  border-radius: 6px;
  padding: 8px 12px;
}
/* Overrides de layout do header (desktop à esquerda) */
.cabecalho .container { flex-direction: row !important; align-items: center; justify-content: space-between; }
.cabecalho .titulo { text-align: left !important; }
.cabecalho .topo-menu .nav { justify-content: flex-start !important; }
/* Neutraliza textura antiga do título (não afeta img) */
.cabecalho .titulo a { background-image: none !important; color: inherit !important; -webkit-background-clip: initial !important; background-clip: initial !important; }
@media (max-width: 576px) {
  .cabecalho .topo-menu { width: 100%; display: flex; justify-content: center; }
  .cabecalho .topo-menu .nav { width: 100%; justify-content: center !important; }
  .cabecalho .topo-menu .nav .nav-item { display: flex; }
  .cabecalho .topo-menu .nav .nav-link { text-align: center; }
}
/* Cards da página inicial com mesma cor do header */
.inicio .card,
.card {
  background-color: #f5f5f5;
}
/* Ajustar itens de lista dentro dos cards para combinar */
.card .list-group-item {
  background-color: #f5f5f5;
}
/* Header layout: force desktop left menu + centered logo */
.cabecalho .container {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.cabecalho .titulo {
  grid-column: 2;
  justify-self: center;
}
.cabecalho .topo-menu {
  grid-column: 1;
  justify-self: start;
}
.cabecalho .topo-menu .nav-pills {
  justify-content: flex-start;
}

/* Mobile: stack and center */
@media (max-width: 576px) {
  .cabecalho .container {
    grid-template-columns: 1fr;
  }
  .cabecalho .titulo {
    grid-column: 1;
    justify-self: center;
  }
  .cabecalho .topo-menu {
    grid-column: 1;
    justify-self: center;
  }
  .cabecalho .topo-menu .nav-pills {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topo-menu .nav-pills .nav-link { text-align: center; }
}

/* Logo sizing */
 .cabecalho .logo {
   height: 150px;
   width: auto;
   display: block;
 }
 @media (max-width: 576px) {
   .cabecalho .logo { height: 150px; }
 }
/* Fundo decorativo do cabeçalho com coliseu */
.cabecalho {
  position: relative;
  overflow: hidden;
}
.cabecalho::before {
  background-image: url('/static/img/marca.PNG');
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-size: cover;
  opacity: 0.08;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 576px) {
  .cabecalho::before {
    background-position: center center;
    background-size: cover;
    opacity: 0.08;
  }
}
.cabecalho .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 576px) {
  .cabecalho::before {
    background-size: 380px auto;
  }
}
/* Categoria nos cards da página inicial em vermelho */
section.card[aria-label="Aula"] .categoria { color: #990000; font-weight: 700; }
/* Mini quadrado de cor da faixa (sem texto) */
.badge.faixa-box { padding: 0; width: 46px; height: 10px; display: inline-block; border-radius: 3px; vertical-align: middle; position: relative; }
.faixa-box .grau-stripe { position: absolute; top: 1px; bottom: 1px; width: 2px; border-radius: 1px; left: auto; right: var(--grau-offset) !important; display: block; }
.faixa-box .grau-stripe.white { background: #fff; }
.faixa-box .grau-stripe.black { background: #000; }
@media (max-width: 576px) {
  .badge.faixa-box { width: 46px; height: 12px; }
}
/* Botão/pílula de alunos com o mesmo padrão do dashboard */
.btn-alunos {
  padding: 2px 6px;
  font-size: 0.85rem;
  line-height: 1.1;
  border-width: 1px;
  border-radius: 6px;
  color: #212529;
  background-image: linear-gradient(#f8f9fa, #e9ecef);
  border-color: #cbd3da;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 3px rgba(0,0,0,0.12);
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  text-decoration: none;
  display: inline-block;
}
.btn-alunos:hover {
  background-image: linear-gradient(#f2f4f6, #e4e9ed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 4px rgba(0,0,0,0.14);
}
.btn-alunos:active {
  background-image: linear-gradient(#e9ecef, #f8f9fa);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
  transform: translateY(1px);
}
/* Escopo específico para cards de Aula no início */
section.card[aria-label="Aula"] .link-alunos { color: #000; }
section.card[aria-label="Aula"] .btn-alunos { background-color: rgb(194, 194, 194); color: #000; border-color: #d5d5d5; font-weight: bold; }
section.card[aria-label="Aula"] .btn-alunos:hover { background-color: #dcdcdc; border-color: #c8c8c8; }

/* Modal CSS-only reutilizado do dashboard do aluno */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 1050; }
.modal-overlay:target { display: flex; }
.modal-card { background: #fff; border-radius: 8px; max-width: 640px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-card .modal-header { padding: 12px 16px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.modal-card .modal-body { padding: 16px; max-height: 60vh; overflow: auto; }
.modal-close { text-decoration: none; font-size: 20px; cursor: pointer; }
.modal-close:hover { text-decoration: none; }
.btn-outline-primary { border: 1px solid var(--cor-destaque); }
/* Pagamentos: evitar quebra na coluna Forma (inclui badge) */
.table td[data-label="Forma"],
.table td[data-label="Forma"] .badge {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Evitar quebra do Nome (e Responsável) na lista de alunos */
.table td[data-label="Nome"],
.table td[data-label="Responsável"] {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Ajustes de quebra em tabelas: evitar quebra de Data, Horário e Telefone */
.table td[data-label="Data"],
.table td[data-label="Horário"],
.table th.telefone,
.table td.telefone,
.table td.col-opcoes,
.table td.text-end {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Alunos: evitar quebra nas colunas Plano/Categoria (inclui badge) */
.table td[data-label="Plano"],
.table td[data-label="Plano"] .badge,
.table td[data-label="Categoria"],
.table td[data-label="Categoria"] .badge {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Graduações: evitar quebra de texto na coluna Aluno */
.table td[data-label="Aluno"] {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Em telas pequenas, reduzir padding para caber melhor */
@media (max-width: 576px) {
  .table th, .table td { padding: 8px; }
  .table .col-opcoes { width: 88px; }
}
/* Botões de Ações nas tabelas: estilo padrão com fundo e padding reduzido */
.table .col-opcoes .btn { padding: 4px 8px !important; }
.table .col-opcoes .btn i { font-size: 18px; }

/* Graduações: evitar quebra dentro da badge "Nova faixa" */
.table td[data-label="Nova faixa"] .badge {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Evitar quebra de Categoria e Plano na lista de alunos */
.table td[data-label="Categoria"],
.table td[data-label="Plano"] {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Ações: padronizar tamanho dos botões nas tabelas */
.table td[data-label="Ações"] .btn,
.col-opcoes .btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px;
  line-height: 1;
}
/* Ações: ícones sem fundo e sem borda */
.table td[data-label="Ações"] .btn,
.col-opcoes .btn {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.table td[data-label="Ações"] .btn:hover,
.col-opcoes .btn:hover,
.table td[data-label="Ações"] .btn:focus,
.col-opcoes .btn:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Garantir cor do ícone consistente */
.table td[data-label="Ações"] .btn i,
.col-opcoes .btn i {
  color: var(--cor-texto);
}
.table td[data-label="Ações"] .btn i,
 .col-opcoes .btn i {
   font-size: 16px;
 }
 .table td[data-label="Ações"] .btn:hover i,
 .col-opcoes .btn:hover i {
   color: var(--cor-destaque) !important;
 }
 /* Espaçamento coerente entre botões de ação */
 .table td[data-label="Ações"] .btn-group,
.col-opcoes .btn-group {
  display: flex;
  gap: 6px;
}
body.pagina-login .topo-menu { display: none !important; }
body.pagina-login .cabecalho .nav { display: none !important; }
body.pagina-login .cabecalho .nav-link { display: none !important; }
body.pagina-login .cabecalho .btn { display: none !important; }
body.pagina-login .cabecalho .logo-link { pointer-events: none; }
.senha-box .toggle-senha { width: 14px; height: 14px; cursor: pointer; }
.senha-box .toggle-senha-label { font-size: 0.85rem; color: #6c757d; pointer-events: none; margin-left: 6px; }