/* Docentes: estrutura comum das opções (PaginaOpcao) e das grelhas editáveis */

/* friso azul no topo dos painéis, como os cartões do Alunos/Multiusos (.cartao:not(.aviso)) */
.painel-seccao { border-top: 3px solid var(--azul); background: var(--superficie); }
.painel-seccao .painel-seccao { border-top: 1px solid var(--linha); }

/* painel a atualizar (mudança de turma/disciplina): o conteúdo antigo fica esbatido com um indicador por cima */
.painel-seccao.a-atualizar { position: relative; }
.painel-seccao.a-atualizar > :not(.painel-seccao-topo):not(.atualizar-indicador) { opacity: .35; pointer-events: none; transition: opacity .15s; }
.atualizar-indicador { display: none; }
.painel-seccao.a-atualizar > .atualizar-indicador { display: flex; position: absolute; z-index: 5; top: 52px; left: 50%; transform: translateX(-50%); align-items: center; gap: 8px; padding: 6px 14px; background: #fff; border: 1px solid #b9dde9; border-radius: 999px; box-shadow: var(--sombra); font-size: 13px; color: var(--azul-escuro); font-weight: 600; }
.atualizar-indicador::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--azul-claro); border-top-color: var(--azul); border-radius: 50%; animation: rodar .8s linear infinite; }
@keyframes rodar { to { transform: rotate(360deg); } }

/* grelhas DevExpress dentro dos painéis */
.painel-seccao .grelha-dx { width: 100%; }
.grelha-dx .dxbl-grid-table td input.campo-num { width: 70px; }
.grelha-compacta { max-height: 420px; }

.grelha-dx .linha-inativa td { color: var(--texto-2); opacity: .7; }
.grelha-dx .linha-outro-ano td { background: #eef7fb; }
.grelha-dx .linha-atual td { background: var(--azul-claro); }
.grelha-dx .dxbl-spin-edit { width: 90px; }
.opcao-acoes .combo-periodo, .combo-tipo-teste { width: 240px; flex: none; }
.opcao-acoes .combo-periodo.largo { width: 340px; }
.opcao-acoes .combo-aluno { width: 340px; flex: none; }
.form-dias { display: grid; grid-template-columns: repeat(3, minmax(140px, 220px)); gap: 12px; }
.campo-dia { display: flex; flex-direction: column; gap: 4px; }
.campo-dia strong { font-size: 20px; }
/* linhas selecionadas (caixas de seleção) sem o fundo cinzento: a seleção vê-se na caixa */
.grelha-dx .dxbl-grid-selected-row > td:not(.dxbl-grid-selection-cell) { background-color: transparent; }
.grelha-dx .linha-atual > td { background-color: var(--azul-claro) !important; }

/* horário (DxScheduler) */
.horario-seccao { padding: 6px; }
.horario-docente { height: calc(100vh - 260px); min-height: 520px; }
.ev { height: 100%; overflow: hidden; padding: 2px 5px; border-radius: 4px; border-left: 4px solid #66bb6a; background: #edf7ee; color: var(--texto); font-size: 12px; cursor: pointer; line-height: 1.25; }
.ev-por-sumariar { border-left-color: #d9534f; background: #fdeeee; }
.ev-sumariada { border-left-color: #43a047; background: #e8f5e9; }
.ev-futura { border-left-color: var(--azul); background: #e8f4f8; }
.ev-falta { border-left-color: #e0a800; background: #fff6dc; }
.ev-inativa { border-left-color: #b0bec5; background: #eceff1; color: var(--texto-2); }
.ev-teste { border-left-color: #42a5f5; background: #e3f2fd; }
.ev-reuniao { border-left-color: #ff8a65; background: #fff0eb; }
.ev-evento { border-left-color: #fbc02d; background: #fffbe6; }
.ev-paa { border-left-color: #1565c0; background: #e6f0ff; }
.ev-atual { box-shadow: inset 0 0 0 2px var(--azul); }
.ev-hora { font-weight: 700; color: var(--azul-escuro); }
.ev-titulo { font-weight: 600; }
.ev-detalhe { color: var(--texto-2); }
.legenda-horario { display: inline-flex; gap: 8px; font-size: 12px; color: var(--texto-2); flex-wrap: wrap; }
.leg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.leg-sumariada::before { background: #43a047; }
.leg-por-sumariar::before { background: #d9534f; }
.leg-futura::before { background: var(--azul); }
.leg-teste::before { background: #42a5f5; }
.leg-reuniao::before { background: #ff8a65; }

/* correções horários: cores do fn_sumario_v2_get_horario_calendario_* e aulas selecionadas */
.ev-inativa-h { border-left-color: #e53935; background: #ffe3e3; color: #7a2b2b; }
.ev-falta-docente { border-left-color: #b71c1c; background: #f8d7d6; }
.ev-alterada { border-left-color: #f0a030; background: #fff1dc; }
.ev-selecionada { box-shadow: inset 0 0 0 2px #1e7e9c; background-image: repeating-linear-gradient(135deg, rgba(30,126,156,.10) 0 6px, transparent 6px 12px); }
.ev-so-leitura { cursor: default; }
.leg-ativa::before { background: var(--azul); }
.leg-inativa::before { background: #e53935; }
.leg-falta-docente::before { background: #b71c1c; }
.leg-alterada::before { background: #f0a030; }
.leg-selecionada::before { background: #1e7e9c; }
.legenda-correcoes { padding: 2px 4px 6px; }
.barra-selecao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; margin: 8px 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; font-size: 13px; }
.barra-selecao .espaco { flex: 1; }
.confirmar-texto { white-space: pre-line; margin: 0; font-size: 13px; }

/* caderneta: alunos à esquerda, mensagens/ocorrências à direita */
.caderneta { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 10px; }
@media (max-width: 900px) { .caderneta { grid-template-columns: minmax(0, 1fr); } }
.caderneta > .painel-seccao { padding: 8px 10px; }
.cad-alunos { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 260px); overflow: auto; }
.cad-alunos li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cad-alunos li:hover { background: #f2f7fa; }
.cad-alunos li.atual { background: var(--azul-claro); }
.cad-alunos li.inativo { opacity: .55; }
.cad-alunos li.vazio { cursor: default; }
.cad-num { width: 22px; text-align: right; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cad-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-aluno-topo { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; flex-wrap: wrap; }
.cad-aluno-topo .espaco, .cad-item .espaco { flex: 1; }
.cad-separadores { margin-top: 4px; }
.cad-item { border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 6px; padding: 8px 10px; margin: 8px 0; background: #fff; }
.cad-item.familia { border-left-color: #f0a030; }
.cad-item.por-ver { background: #fffaf0; }
.cad-item.ocorrencia { border-left-color: #8e7cc3; }
.cad-item.medida { border-left-color: #c0392b; }
.cad-item header, .cad-item footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cad-texto { white-space: pre-line; margin: 6px 0; font-size: 13.5px; }
.cad-anexos { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.cad-item .perigo, .cad-item .perigo .dxbl-btn-caption { color: #a4262c; }
.form-coluna { display: flex; flex-direction: column; gap: 6px; }
.form-coluna > label { font-size: 13px; font-weight: 600; margin-top: 4px; }
.barra-selecao .campo-data { width: 140px; flex: none; }

.opcao-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 2px 8px; border-bottom: 1px solid var(--linha); }
.opcao-titulo { display: flex; flex-direction: column; }
.opcao-titulo h1 { margin: 0; font-size: 20px; font-weight: 600; }
.opcao-titulo .muted { font-size: 13px; }
.opcao-contexto { padding: 3px 10px; border-radius: 999px; background: var(--azul-claro); color: var(--azul-escuro); font-weight: 600; font-size: 13px; }
.opcao-topo .espaco { flex: 1; }

/* Separadores (Components/Separadores). Estilo "pasta": o ativo liga-se ao painel, com o friso azul por cima */
.pasta { display: flex; flex-direction: column; margin-top: 10px; min-width: 0; }
.pasta-topo { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-left: 10px; }
.pasta-lista { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }
.pasta-separador { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 9px; border: 1px solid transparent; border-bottom: 0;
    border-radius: 8px 8px 0 0; background: transparent; color: var(--texto-2); font: inherit; font-size: 14px; cursor: pointer; }
.pasta-separador:hover { color: var(--texto); background: rgba(255,255,255,.6); }
.pasta-separador:focus-visible { outline: 2px solid var(--tema-anel); outline-offset: -2px; }
.pasta-separador.ativo { position: relative; z-index: 1; margin-bottom: -1px; padding-top: 6px; background: var(--superficie); border-color: var(--linha);
    border-top: 3px solid var(--azul); color: var(--texto); font-weight: 600; cursor: default; }
.pasta-contador { min-width: 22px; padding: 0 7px; border-radius: 999px; background: #e8eef2; color: var(--texto-2); font-size: 12px;
    font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.pasta-contador.destaque { background: var(--azul); color: #fff; }
.pasta-acoes { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; min-width: 0; }
.pasta-acoes .espaco { flex: 1; }
.pasta-painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: 0 10px 10px 10px; padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* o painel de cada separador fica dentro do painel dos separadores, sem moldura própria */
.pasta-painel > .painel-seccao { border: 0; padding: 0; background: transparent; border-radius: 0; }
.pasta-painel > .painel-seccao.a-atualizar > .atualizar-indicador { top: 40px; }
.pasta-painel > .painel-seccao + .painel-seccao { border-top: 1px solid var(--linha); padding-top: 12px; }

/* Estilo "sublinhado" (proposta C): separadores sublinhados por cima do painel, resumo à direita, ações dentro do painel */
.pasta.pasta-sublinhado .pasta-topo { padding-left: 2px; border-bottom: 1px solid var(--linha); gap: 16px; }
.pasta.pasta-sublinhado .pasta-lista { gap: 22px; }
.pasta.pasta-sublinhado .pasta-separador { padding: 6px 2px 9px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px; }
.pasta.pasta-sublinhado .pasta-separador:hover { background: transparent; border-bottom-color: var(--linha); }
.pasta.pasta-sublinhado .pasta-separador.ativo { padding-top: 6px; background: transparent; border-top: 0; border-bottom-color: var(--azul); color: var(--azul-escuro); }
.pasta-resumo { flex: 1; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.pasta-resumo span { background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 1px 10px; font-size: 13px; color: var(--texto-2); }
.pasta-resumo b { color: var(--texto); font-variant-numeric: tabular-nums; }
.pasta.pasta-sublinhado .pasta-painel { margin-top: 10px; border-top: 3px solid var(--azul); border-radius: 10px; }
.pasta-barra:empty { display: none; }
.pasta-barra { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.pasta-barra .espaco { flex: 1; }

/* Estilo "botoes" (o atual, como no GIAE Municípios): os separadores são o cabeçalho do painel, numa faixa cinzenta com
   o friso da cor do tema no topo, como botões (o ativo preenchido com a cor do tema); resumo à direita, ações no painel */
.pasta.pasta-botoes .pasta-topo { align-items: center; gap: 10px; padding: 8px 10px; background: #F4F7F9; border: 1px solid var(--linha);
    border-top: 3px solid var(--azul); border-bottom: 0; border-radius: 10px 10px 0 0; }
.pasta.pasta-botoes .pasta-lista { align-items: center; gap: 6px; }
.pasta.pasta-botoes .pasta-separador { padding: 6px 14px; border: 1px solid var(--linha); border-radius: 6px; margin: 0; background: var(--superficie);
    color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pasta.pasta-botoes .pasta-separador:hover:not(.ativo) { border-color: var(--azul); color: var(--azul-escuro); background: var(--azul-claro); }
.pasta.pasta-botoes .pasta-separador:focus-visible { outline-offset: 2px; }
.pasta.pasta-botoes .pasta-separador.ativo { padding-top: 6px; margin: 0; background: var(--azul); border-color: var(--azul); color: #fff; }
.pasta.pasta-botoes .pasta-separador.ativo .pasta-contador { background: rgba(255,255,255,.25); color: #fff; }
.pasta.pasta-botoes .pasta-resumo { padding-bottom: 0; }
.pasta.pasta-botoes .pasta-painel { border-radius: 0 0 10px 10px; }
.opcao-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.seletor { padding: 5px 8px; border: 1px solid var(--linha); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }
.aviso-linha { padding: 8px 12px; background: #fff8e1; border: 1px solid #ffe08a; border-radius: 6px; font-size: 13px; color: #6b4e00; }

.tabela-simples th.num, .tabela-simples td.num { text-align: center; width: 110px; }
.tabela-editavel .campo-num { width: 76px; padding: 3px 6px; border: 1px solid var(--linha); border-radius: 5px; font: inherit; font-size: 13px; text-align: right; }
.tabela-editavel .campo-num:focus { outline: 2px solid rgba(30,126,156,.35); border-color: var(--azul); }
.tabela-simples tr.linha-detalhe > td { background: #f7f9fb; padding: 6px 10px 10px; }
.tabela-simples tr.outro-ano td { background: #eef7fb; }
.tabela-simples tr.inativo td { color: var(--texto-2); }
.acoes-linha { text-align: right; white-space: nowrap; }
.selo-info { background: var(--azul-claro); color: var(--azul-escuro); }
.lista-linhas li.passado { opacity: .55; }
.duas-colunas.largas { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); align-items: start; }
@media (max-width: 1000px) { .duas-colunas.largas { grid-template-columns: minmax(0, 1fr); } }