/* ============================================================
   CYBERSCHOOL — public/css/comum.css
   Tema e peças comuns a todas as páginas (por cima do Bootstrap 5).
   Ecrãs verificados: 390 px (telemóvel), 820 px (tablet), 1280 px.
   ============================================================ */

:root {
  --cs-primaria: #2563eb;                                  /* azul CYBERSYS */
  --cs-primaria-escura: #1d4ed8;                           /* azul de realce */
  --cs-primaria-suave: rgba(37, 99, 235, 0.10);            /* fundo azul muito claro */
  --cs-fundo: #f4f6fb;                                     /* fundo das páginas */
  --cs-cartao: #ffffff;                                    /* fundo dos cartões */
  --cs-borda: #e4e8f0;                                     /* bordas suaves */
  --cs-texto-suave: #64708a;                               /* textos secundários */
  --cs-sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.05); /* sombra leve dos cartões */
  --cs-raio: 0.85rem;                                      /* cantos arredondados */
  --bs-primary: #2563eb;                                   /* azul do Bootstrap */
  --bs-primary-rgb: 37, 99, 235;                           /* idem em RGB */
  --bs-link-color: #2563eb;                                /* ligações */
  --bs-link-color-rgb: 37, 99, 235;                        /* idem em RGB */
  --bs-font-sans-serif: "Segoe UI", Inter, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; /* letra do Windows primeiro */
  --bs-border-radius: 0.6rem;                              /* cantos dos controlos */
}

[data-bs-theme="dark"] {
  --cs-fundo: #0f141c;                                     /* fundo escuro */
  --cs-cartao: #171d27;                                    /* cartões escuros */
  --cs-borda: #263042;                                     /* bordas escuras */
  --cs-texto-suave: #9aa5bb;                               /* texto secundário escuro */
  --cs-primaria-suave: rgba(96, 140, 255, 0.16);           /* azul suave no escuro */
  --cs-sombra: 0 1px 2px rgba(0, 0, 0, 0.3);               /* sombra discreta */
  --bs-body-bg: #0f141c;                                   /* fundo do Bootstrap */
  --bs-primary: #4f86ff;                                   /* azul mais claro para contraste */
  --bs-primary-rgb: 79, 134, 255;                          /* idem em RGB */
  --bs-link-color: #6f9bff;                                /* ligações */
  --bs-link-color-rgb: 111, 155, 255;                      /* idem em RGB */
}

/* Cor de cada grupo do menu (ícones do menu e do cabeçalho das páginas) */
.grupo-geral { --cor-do-grupo: #2563eb; }                  /* azul */
.grupo-secretaria { --cor-do-grupo: #0891b2; }             /* ciano */
.grupo-academico { --cor-do-grupo: #7c3aed; }              /* violeta */
.grupo-pedagogico { --cor-do-grupo: #d97706; }             /* âmbar */
.grupo-financas { --cor-do-grupo: #059669; }               /* verde */
.grupo-rh { --cor-do-grupo: #e11d48; }                     /* carmim */
.grupo-gestao { --cor-do-grupo: #db2777; }                 /* rosa */
.grupo-administracao { --cor-do-grupo: #475569; }          /* ardósia */
[data-bs-theme="dark"] .grupo-administracao { --cor-do-grupo: #94a3b8; } /* ardósia clara no escuro */

html, body { min-height: 100%; }                           /* página inteira */
body.pagina-interna {
  background: var(--cs-fundo);                             /* fundo suave */
  font-size: 0.95rem;                                      /* texto um pouco mais compacto */
}

.conteudo-da-pagina { padding: 1.25rem; max-width: 1600px; margin: 0 auto; } /* margens da página */

.cabecalho-da-pagina {
  display: flex; flex-wrap: wrap; align-items: center;     /* título e botões na mesma linha */
  justify-content: space-between; gap: 0.75rem;            /* espaço entre eles */
  margin-bottom: 1rem;                                     /* espaço por baixo */
}
.cabecalho-da-pagina h1 { font-size: 1.35rem; margin: 0; font-weight: 600; } /* título */
.cabecalho-da-pagina .subtitulo { color: var(--cs-texto-suave); font-size: 0.875rem; margin: 0.15rem 0 0; } /* subtítulo */

.card { border-color: var(--cs-borda); border-radius: var(--cs-raio); background: var(--cs-cartao); } /* cartões */
.card-footer { background: transparent; border-top-color: var(--cs-borda); } /* rodapé dos cartões */

/* ── Barra do cadastro (pesquisa, filtros, Novo) ── */
.barra-do-cadastro { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } /* em linha, quebra se faltar espaço */
.pesquisa-do-cadastro { flex: 1 1 260px; max-width: 420px; } /* pesquisa larga */
.filtro-do-cadastro { flex: 0 1 200px; width: auto; }       /* filtros */
.botao-novo { margin-left: auto; white-space: nowrap; }     /* Novo encostado à direita */
.rodape-do-cadastro { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } /* total e páginas */

.cartao-do-cadastro .table { --bs-table-bg: transparent; }  /* tabela no fundo do cartão */
.cartao-do-cadastro thead th {
  font-size: 0.75rem; text-transform: uppercase;           /* cabeçalho discreto */
  letter-spacing: 0.03em; color: var(--cs-texto-suave);    /* cor suave */
  white-space: nowrap; border-bottom-width: 1px;           /* numa linha */
}
.coluna-accoes { width: 1%; white-space: nowrap; }          /* acções sem quebrar */
.accoes-da-linha .btn { padding: 0.2rem 0.45rem; }          /* botões pequenos */

/* ── Janelas: pelo menos 70% do ECRÃ no computador ──
   As páginas vivem num iframe ao lado do menu lateral (250 px), por isso
   88% da largura do iframe ≈ 70% do ecrã a 1280 px. No telemóvel a janela
   ocupa o ecrã inteiro (modal-fullscreen-sm-down). */
@media (min-width: 576px) {
  .modal-dialog.janela-larga,
  .modal-dialog.janela-media { max-width: 1500px; width: max(88vw, 540px); } /* ≥70% do ecrã */
}
.texto-pre { white-space: pre-line; }                       /* respeita quebras de linha */

.zona-dos-avisos { z-index: 1090; }                         /* avisos por cima das janelas */

/* ── Cartões de números (painel) ── */
.cartao-numero { padding: 1rem; display: flex; flex-direction: row; gap: 0.85rem; align-items: center; height: 100%; } /* ícone à esquerda, número à direita */
.cartao-numero .icone-do-numero {
  width: 2.75rem; height: 2.75rem; border-radius: 0.65rem;  /* quadrado do ícone */
  display: grid; place-items: center; font-size: 1.3rem;    /* ícone centrado */
  background: rgba(13, 110, 253, 0.12); color: var(--cs-primaria); /* azul suave */
}
.cartao-numero .icone-do-numero.verde { background: rgba(25, 135, 84, 0.12); color: #198754; }   /* verde */
.cartao-numero .icone-do-numero.laranja { background: rgba(253, 126, 20, 0.14); color: #fd7e14; } /* laranja */
.cartao-numero .icone-do-numero.roxo { background: rgba(111, 66, 193, 0.13); color: #6f42c1; }   /* roxo */
.cartao-numero .valor-do-numero { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }      /* número grande */
.cartao-numero .rotulo-do-numero { color: var(--cs-texto-suave); font-size: 0.8rem; }           /* legenda */

.barra-de-ocupacao { height: 0.5rem; min-width: 80px; }     /* barra de ocupação das turmas */

/* ── Tabelas em cartões no telemóvel (< 768 px) ── */
@media (max-width: 767.98px) {
  .conteudo-da-pagina { padding: 0.75rem; }               /* margens menores */
  .tabela-adaptavel thead { display: none; }               /* sem cabeçalho */
  .tabela-adaptavel, .tabela-adaptavel tbody, .tabela-adaptavel tr, .tabela-adaptavel td { display: block; width: 100%; } /* em bloco */
  .tabela-adaptavel tr { border-bottom: 1px solid var(--cs-borda); padding: 0.5rem 0.75rem; } /* cada registo é um cartão */
  .tabela-adaptavel td {
    border: 0; padding: 0.2rem 0;                          /* compacto */
    display: flex; justify-content: space-between; gap: 1rem; /* rótulo à esquerda, valor à direita */
    text-align: right;                                     /* valor encostado à direita */
  }
  .tabela-adaptavel td::before {
    content: attr(data-rotulo);                            /* nome da coluna */
    color: var(--cs-texto-suave); font-size: 0.8rem;       /* discreto */
    text-align: left; flex-shrink: 0;                      /* não encolhe */
  }
  .tabela-adaptavel td[colspan]::before { content: none; } /* mensagem de vazio sem rótulo */
  .tabela-adaptavel td[colspan] { justify-content: center; } /* centrada */
  .coluna-accoes { width: 100%; }                           /* acções na largura toda */
  .botao-novo { margin-left: 0; flex: 1 1 100%; }           /* Novo na largura toda */
  .pesquisa-do-cadastro { max-width: none; }                /* pesquisa na largura toda */
  .filtro-do-cadastro { flex: 1 1 45%; }                    /* dois filtros por linha */
}

/* ── Matriz de permissões ── */
.matriz-de-permissoes th, .matriz-de-permissoes td { text-align: center; vertical-align: middle; } /* centrada */
.matriz-de-permissoes td:first-child, .matriz-de-permissoes th:first-child { text-align: left; } /* módulo à esquerda */
.matriz-de-permissoes .diferente-do-perfil { background: rgba(253, 126, 20, 0.12); } /* excepção marcada */

.senha-temporaria {
  font-family: var(--bs-font-monospace); font-size: 1.5rem; /* bem legível */
  letter-spacing: 0.12em; padding: 0.75rem 1rem;           /* espaçada */
  border: 2px dashed var(--cs-primaria); border-radius: var(--cs-raio); /* destacada */
  text-align: center; user-select: all;                    /* um clique selecciona tudo */
}

/* ── Páginas "em breve" e portal ── */
.cartao-em-breve { max-width: 640px; }                      /* cartão centrado */
.tabela-por-classe { font-size: 0.875rem; min-width: 460px; } /* painel: tabela compacta (desliza dentro do cartão no telemóvel) */

/* ══ Polimento visual (proposta A, 13/10/2026) ══════════════════════════ */

.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--cs-primaria-escura); --bs-btn-hover-border-color: var(--cs-primaria-escura); --bs-btn-active-bg: var(--cs-primaria-escura); } /* azul da casa */
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); } /* contorno azul */
.btn { font-weight: 500; }                                  /* botões um pouco mais firmes */
.badge { border-radius: 999px; font-weight: 600; padding: 0.35em 0.7em; } /* distintivos em pílula */
.card { box-shadow: var(--cs-sombra); }                     /* cartões com sombra leve */
.form-control, .form-select { border-color: var(--cs-borda); } /* bordas suaves */
.form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem var(--cs-primaria-suave); } /* foco azul suave */

/* ── Cabeçalho das páginas com ícone do módulo ── */
.titulo-com-icone { display: flex; align-items: center; gap: 0.85rem; min-width: 0; } /* ícone + título */
.icone-do-cabecalho {
  width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem;      /* quadrado */
  border-radius: 0.8rem; display: grid; place-items: center; /* ícone ao centro */
  font-size: 1.3rem; color: var(--cor-do-grupo, var(--bs-primary)); /* cor do grupo */
  background: color-mix(in srgb, var(--cor-do-grupo, #2563eb) 14%, transparent); /* fundo da mesma cor, suave */
}

/* ── Tabelas: cabeçalho fixo e linhas mais legíveis ── */
.cartao-do-cadastro .table > :not(caption) > * > * { padding: 0.7rem 0.75rem; } /* mais espaço */
.cartao-do-cadastro tbody tr:hover > * { background: var(--cs-primaria-suave); } /* realce ao passar */
.cartao-do-cadastro thead th { background: var(--cs-cartao); }  /* fundo do cabeçalho */
@media (min-width: 768px) {
  .cartao-do-cadastro .table-responsive { max-height: calc(100vh - 235px); overflow-y: auto; } /* a tabela desliza dentro do cartão */
  .cartao-do-cadastro thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--cs-borda); } /* cabeçalho fixo */
  .cartao-do-cadastro { overflow: hidden; }                 /* cantos limpos */
}
.linha-esqueleto .placeholder { min-height: 0.8rem; opacity: 0.25; } /* barras do esqueleto */

/* ── Estado vazio ── */
.estado-vazio { padding: 2.5rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } /* bloco centrado */
.icone-do-estado-vazio {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;       /* círculo */
  display: grid; place-items: center; font-size: 1.6rem;    /* ícone grande */
  background: var(--cs-primaria-suave); color: var(--bs-primary); margin-bottom: 0.4rem; /* azul suave */
}

/* ── Janelas: cabeçalho colorido e secções ── */
.modal-content { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25); } /* janela */
.modal-header { background: linear-gradient(90deg, var(--cs-primaria-suave), transparent); border-bottom-color: var(--cs-borda); } /* faixa azul suave */
.modal-title { font-weight: 600; font-size: 1.1rem; }       /* título */
.modal-title .bi { color: var(--bs-primary); }              /* ícone azul */
.modal-footer { background: var(--cs-fundo); border-top-color: var(--cs-borda); } /* rodapé destacado */
.secao-do-formulario {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; /* título pequeno */
  color: var(--bs-primary); border-bottom: 1px solid var(--cs-borda); /* linha por baixo */
  padding-bottom: 0.4rem; margin-top: 0.75rem;              /* espaço */
}
.secao-do-formulario:first-child { margin-top: 0; }         /* a primeira sem espaço em cima */

/* ── Gráfico do painel ── */
.zona-do-grafico { position: relative; height: 280px; }     /* altura fixa do gráfico */

@media (max-width: 767.98px) {
  .tabela-adaptavel tr.linha-sem-rotulo td::before { content: none; } /* estado vazio sem rótulo */
  .tabela-adaptavel tr.linha-sem-rotulo td { justify-content: center; text-align: center; } /* centrado */
  .linha-esqueleto td::before { content: none; }            /* esqueleto sem rótulos */
  .icone-do-cabecalho { width: 2.3rem; height: 2.3rem; flex-basis: 2.3rem; font-size: 1.1rem; } /* ícone menor */
}
@media (max-width: 767.98px) {
  .cartao-do-cadastro .table > :not(caption) > * > * { padding: 0.3rem 0; } /* cartões compactos no telemóvel */
  .cartao-do-cadastro tbody tr:hover > * { background: transparent; } /* sem realce de "passar o rato" no toque */
  .tabela-adaptavel tr { padding: 0.6rem 0.9rem; }          /* margem de cada cartão */
}
@media (max-width: 767.98px) {
  .tabela-adaptavel.table-hover > tbody > tr:hover > * { --bs-table-bg-state: transparent; box-shadow: none; } /* sem cinzento ao tocar */
}
@media (min-width: 768px) {
  .cartao-do-cadastro .coluna-accoes { position: sticky; right: 0; z-index: 1; background: var(--cs-cartao); box-shadow: inset 1px 0 0 var(--cs-borda); } /* acções sempre à vista quando a tabela desliza */
  .cartao-do-cadastro thead th.coluna-accoes { z-index: 3; } /* canto do cabeçalho por cima */
}

/* ── Comunicados recebidos (painel e portal) ── */
.comunicado-novo { background: var(--bs-primary-bg-subtle); }                 /* por ler */
.texto-curto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* resumo em 2 linhas */
.texto-do-comunicado { white-space: pre-wrap; line-height: 1.55; }            /* respeita os parágrafos */
.horario-do-portal th, .horario-do-portal td { min-width: 3.4rem; }          /* horário do portal: colunas legíveis */
.text-capitalize-primeira { display: inline-block; }                          /* necessário para ::first-letter */
.text-capitalize-primeira::first-letter { text-transform: uppercase; }       /* "Setembro de 2026" */

/* ── Impressão sem separador novo (CS.pagina.imprimir) ── */
.moldura-de-impressao { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none; } /* invisível, mas imprimível */