/* ==========================================================================
   tema-bs5.css  -  SigaVirtual
   UNICA camada que sobrescreve componentes do Bootstrap.
   E o unico arquivo a revisar quando o Bootstrap mudar de versao.
   Carregar SEMPRE depois do bootstrap.min.css.
   Origem: main.css (tema Adminca).
   ========================================================================== */

/* Botoes: cores, hover e foco sao os do Bootstrap 5. Aqui so o position:relative
   e os ajudantes de estado (.active-visible / .active-hidden). */
.btn {
  position: relative; }

.btn .active-visible {
    display: none; }

.btn.active .active-visible {
    display: inline-block; }

.btn.active .active-hidden {
    display: none; }

.nav-pills,
.nav-tabs {
  margin-bottom: 15px; }

.nav-pills .nav-link,
.nav-tabs .nav-link {
    color: inherit; }

.nav-tabs .nav-link {
  margin-right: 0;
  padding: .7rem 1rem; }

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active {
    color: #333; }

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: #2CC4CB !important;
  color: #fff; }

.alert h4 {
    margin-bottom: 8px; }

.alert-link {
  font-weight: 600; }

/* Badge redondo de numero (o BS5 nao tem equivalente). */
.badge-circle {
  height: 20px;
  min-width: 20px;
  line-height: 20px;
  padding: 0;
  -webkit-border-radius: 10px;
  border-radius: 10px; }

/* Seta automatica do dropdown desligada DE PROPOSITO: os botoes do sistema ja trazem
   o proprio icone (ex.: <i class="fas fa-angle-down"></i> Opcoes). Ligar aqui = seta dupla. */
.dropdown-toggle::after {
  display: none; }

.card-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 0; }

.card-header,
.card-footer {
  background-color: inherit; }

.modal-dialog {
  z-index: 1100; }

.modal-dialog .modal-content {
    border: 0;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14), 0 4px 5px 0 rgba(0, 0, 0, 0.098), 0 1px 10px 0 rgba(0, 0, 0, 0.084); }

/* Cinza suave do texto secundario, por escolha do sistema. */
.text-muted {
  color: #999 !important; }

.hidden {
  display: none; }

table.dataTable {
  width: 100% !important; }

.select2-container {
  max-width: 100%; }

.select2-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.15); }

.note-editor.note-frame {
  border-color: #ddd; }

.note-toolbar {
  background-color: #f2f2f2 !important; }

.note-color .dropdown-menu > li > .btn-group {
  display: table-cell !important;
  padding: 5px; }

.note-popover.popover {
  display: none; }

/* ==========================================================================
   AJUSTES PARA BOOTSTRAP 5.3  (permanentes)
   Compensam mudancas do proprio BS5 que colidem com as regras do tema acima.
   Cada item registra o que o BS5 mudou e por que a compensacao existe.
   ========================================================================== */

/* 1. TITULOS - o BS5 liga RFS por padrao e os titulos encolhem abaixo de
      1200px (h1 vira calc(1.375rem + 1.5vw)). O tema trabalha com tamanho
      fixo. Para adotar o titulo responsivo do BS5, basta remover este bloco. */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }

/* 2. .text-justify foi removido do BS5 sem substituto. */
.text-justify {
  text-align: justify !important; }

/* 3. MODAL - alinhamento do .btn-close dentro do cabecalho. */
.modal-header .btn-close {
  margin: 0;
  padding: .5rem; }

/* 4. SELECT2 (tema bootstrap-5) - canto e foco sao os do proprio tema bootstrap-5
      do select2, iguais aos do .form-control do BS5. Fica so: sem sombra interna,
      como o .form-control. */
.select2-container--bootstrap-5 .select2-selection {
  box-shadow: none;
  border-radius: var(--bs-border-radius); }
/* O tema do select2 (1.3.0) foi feito para o BS 5.1, com canto de .25rem; o BS 5.3
   usa .375rem. Os dois lados passam a ler a mesma variavel do Bootstrap. As regras
   do tema que zeram o canto do lado que encosta na lista aberta sao mais
   especificas e continuam valendo. */
.select2-container--bootstrap-5 .select2-dropdown {
  border-radius: var(--bs-border-radius); }
/* O select2 mede a largura do <select> uma vez so, ao iniciar, e grava em
   style="width:Npx". Se isso acontece antes da fonte da pagina carregar (1o
   acesso, sem cache), a medida sai com a fonte provisoria e o texto fica cortado
   quando a fonte certa chega. No <select class="w-auto"> (Periodo Letivo e
   similares) a medida gravada continua valendo, mas a caixa nunca fica menor que
   o texto escolhido. O container do select2 e sempre inserido logo depois do
   <select>. */
select.w-auto + .select2-container {
  min-width: max-content; }

/* 4b. SELECT2 MULTIPLO - mesma altura de um campo comum.
       O tema bootstrap-5 poe o campo de busca numa linha propria, abaixo das
       etiquetas (.select2-search { display:block; width:100% }), e as
       etiquetas sao grandes (font-size 1rem, padding .35em .65em, margem
       inferior .375rem): o select multiplo ficaria com o dobro da altura dos
       campos vizinhos. Aqui etiquetas e busca dividem a mesma linha (o
       display:contents tira o <ul> do caminho e deixa cada etiqueta como item
       do flex), e a etiqueta fica compacta e cinza. */
.select2-container--bootstrap-5 .select2-selection--multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: contents; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
  padding: 0 .4em;
  margin: .0625rem .25rem .0625rem 0;
  font-size: .875rem;
  line-height: 1.5;
  background-color: #e9ecef;
  max-width: 100%;
  min-width: 0; }
/* nome longo: reticencias em vez de quebrar a etiqueta em varias linhas */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__display {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
  flex: 1 1 0;
  width: auto;
  min-width: 1rem; }

/* 5. LINKS SEM SUBLINHADO.
      O BS5 sublinha todo <a> por padrao (a { text-decoration: underline }), o
      que sublinharia o menu lateral, os itens de dropdown e todos os links do
      sistema. Para adotar o padrao do BS5, remova este bloco. */
a {
  text-decoration: none; }
/* onde sublinhar faz sentido, o proprio autor pede com .text-decoration-underline */
a.text-decoration-underline,
a:not([class]):hover {
  text-decoration: underline; }

/* 6. NAVBAR COM RECUO LATERAL.
      BS5:  --bs-navbar-padding-x: 0   (ele assume um .container dentro)
      Sem isto o conteudo da barra de filtros encosta na borda esquerda do
      cartao. O recuo vem pela propria variavel do BS5. */
.navbar {
  --bs-navbar-padding-x: 1rem; }

/* 7. BOTAO FECHAR DO MODAL A DIREITA.
      No BS5 o alinhamento a direita vem de .modal-header .btn-close
      { margin-left: auto }. O geraModal.js monta um <button class="btn
      btn-outline-secondary"> comum (nao .btn-close), que sem isto ficaria
      encostado no titulo. Vale para qualquer markup. */
.modal-header {
  justify-content: space-between; }

/* 8. BARRA LATERAL: ESTADO DO SUBMENU.
      O menu usa o Collapse nativo do BS5, que mantem aria-expanded no <a> e a
      classe .show no <ul> (nao mexe em .active). Estas regras dao a seta girada
      e o destaque do item aberto a partir desse estado. As regras com .active
      continuam valendo para o destaque que o JSP aplica no servidor. */
.side-menu li > a[aria-expanded="true"] > .arrow {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.side-menu > li:has(> a[aria-expanded="true"]) {
  background-color: #2e4255; }

.side-menu > li:has(> a[aria-expanded="true"]) > a {
  color: #fff;
  background-color: #3498db; }

/* 9. COR DO TEXTO DAS TABELAS.
      O BS5 pinta cada celula com --bs-table-color: var(--bs-emphasis-color),
      que e #000:
        .table > :not(caption) > * > * { color: var(--bs-table-color-...) }
      O preto puro deixa a leitura mais dura que o cinza-escuro do tema.
      Corrigido pela propria variavel do BS5, que vale para toda a cadeia. */
.table {
  --bs-table-color: #333; }

/* 10. LACUNAS PERMANENTES DO BS5: coisas que o BS5 nao tem e o tema precisa
       cobrir enquanto o sistema existir. */

/* <small> - o BS5 define so o font-size de small/.small, sem o peso: <small>
   dentro de <strong> ou de titulo herdaria o negrito.

   ATENCAO ao :not() - ele nao e decoracao. O Font Awesome declara
   .fa, .fas { font-weight: 900 }, e este arquivo carrega DEPOIS do
   font-awesome no head.jsp. Sem a exclusao, um <i class="fas fa-info-circle
   small"> cai para o peso 400, a face Regular do Font Awesome Free nao tem
   esse glifo, e o navegador desenha o quadrado vazio. */
small:not([class*="fa-"]),
.small:not([class*="fa-"]) {
  font-weight: 400; }

/* 11. COR DO PLACEHOLDER.
       BS5:  .form-control::placeholder { color: var(--bs-secondary-color) }
             e --bs-secondary-color e rgba(33,37,41,.75) - escuro demais,
             o texto de dica pareceria conteudo ja digitado.
       Nao mexo na variavel, que o BS5 usa em outros lugares: so o placeholder. */
.form-control::placeholder,
.form-select::placeholder,
.form-control::-webkit-input-placeholder {
  color: #868e96;
  opacity: 1; }

/* 12. DROPDOWN DENTRO DE .table-responsive.
       O .table-responsive tem overflow-x: auto, e isso recorta o menu do
       dropdown, que e posicionado em absolute: o menu sai cortado e aparece
       uma barra de rolagem que atrapalha a tela.
       Enquanto o menu estiver aberto, o contentor deixa de recortar. A troco
       disso, uma tabela larga perde a rolagem horizontal nesse intervalo -
       o que e melhor que um menu inacessivel. */
.table-responsive:has(.dropdown-menu.show) {
  overflow: visible; }

/* 13. CAIXA DE MARCACAO COLORIDA.
       O BS5 so tem o .form-check-input azul. Estas variantes pintam a caixa
       marcada com as cores do proprio BS5 (usado nas permissoes do perfil:
       cadastro azul, alteracao amarela, consulta verde, exclusao vermelha).
       No amarelo o visto e escuro, como o texto do .text-bg-warning. */
.form-check-input.form-check-input-primary:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-check-input.form-check-input-success:checked { background-color: var(--bs-success); border-color: var(--bs-success); }
.form-check-input.form-check-input-danger:checked  { background-color: var(--bs-danger);  border-color: var(--bs-danger); }
.form-check-input.form-check-input-warning:checked {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input.form-check-input-success:focus { border-color: rgba(var(--bs-success-rgb), .5); box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25); }
.form-check-input.form-check-input-danger:focus  { border-color: rgba(var(--bs-danger-rgb), .5);  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25); }
.form-check-input.form-check-input-warning:focus { border-color: rgba(var(--bs-warning-rgb), .5); box-shadow: 0 0 0 .25rem rgba(var(--bs-warning-rgb), .25); }

/* 14. ACCORDION ESCURO (.accordion.accordion-escuro).
       Visual dos filtros de relatorio: cabecalho escuro (ebony do tema) com
       texto branco e secoes separadas por um espaco.
       So troca as variaveis do proprio .accordion do BS5; a marcacao e a
       nativa (accordion-item / accordion-header / accordion-button). */
.accordion.accordion-escuro {
  --bs-accordion-border-color: var(--bs-secondary);
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: .5rem;
  --bs-accordion-btn-color: #fff;
  --bs-accordion-btn-bg: #526477;
  --bs-accordion-active-color: #fff;
  --bs-accordion-active-bg: #34495f;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-body-padding-x: 1rem; }
/* secoes separadas: cada item com borda e cantos completos */
.accordion-escuro .accordion-item {
  border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  border-radius: var(--bs-accordion-border-radius); }
.accordion-escuro .accordion-item + .accordion-item { margin-top: .5rem; }
.accordion-escuro .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius); }
.accordion-escuro .accordion-button.collapsed { border-radius: var(--bs-accordion-inner-border-radius); }

/* 15. OPCAO EM PILULA COM RADIO (.opcao-radio).
       Escolha de uma opcao (ex.: Todos / Meus Conteudos / Compartilhado, em
       professor/repositorio.jsp). A marcacao e toda do BS5 - o <label> e uma
       pilula (border rounded-pill bg-white px-3 py-1) com o .form-check-input
       dentro, entao a bolinha marcada aparece mesmo sem esta regra. Aqui so o
       reforco: pilula inteira clicavel, hover, e a marcada em azul claro. */
.opcao-radio { cursor: pointer; }
.opcao-radio:hover { background-color: var(--bs-tertiary-bg) !important; }
.opcao-radio:has(> .form-check-input:checked) {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary-text-emphasis);
  font-weight: 600; }
.opcao-radio > .form-check-input:focus { box-shadow: none; }
.opcao-radio:has(> .form-check-input:focus-visible) {
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }

/* 16. BOTOES LADO A LADO NA CELULA DA TABELA (Visualizar / Alterar / Excluir...).
       Os botoes ficam em linha, separados so pela margem direita (me-1). Quando a
       coluna estreita (celular), eles quebram para a linha de baixo; a margem
       vertical da ~5px entre as linhas quebradas. A celula perde no padding o que
       os botoes ganham de margem: com os botoes numa linha so, a altura da linha
       nao muda. Vale para todas as tabelas, por isso aqui e nao no markup de cada
       tela. (Padding das celulas do BS5: .25rem em .table-sm, .5rem nas demais.) */
.table td > .btn,
.table td > .btn-group {
  margin-top: .1875rem;
  margin-bottom: .1875rem; }
.table > :not(caption) > * > td:has(> .btn, > .btn-group) {
  padding-top: .3125rem;
  padding-bottom: .3125rem; }
.table-sm > :not(caption) > * > td:has(> .btn, > .btn-group) {
  padding-top: .0625rem;
  padding-bottom: .0625rem; }