/*
 * Ajustes do Portal Branco sobre o Bootstrap 5 (carregado antes deste arquivo).
 * As cores vêm de tema.css; aqui só se usam as variáveis.
 */

/* --- Bootstrap com a paleta do tema ----------------------------------------------------------- */
:root {
  --bs-primary: var(--cor-primaria);
  --bs-primary-rgb: var(--cor-primaria-rgb);
  --bs-body-color: var(--cor-texto);
  --bs-body-bg: var(--cor-fundo);
  --bs-secondary-color: var(--cor-secundaria);
  --bs-link-color: var(--cor-primaria);
  --bs-link-color-rgb: var(--cor-primaria-rgb);
  --bs-link-hover-color: var(--cor-primaria-escura);
  --bs-border-color: var(--cor-borda);
  --bs-focus-ring-color: rgba(var(--cor-primaria-rgb), 0.35);
}

.btn-primary {
  --bs-btn-bg: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria-escura);
  --bs-btn-hover-border-color: var(--cor-primaria-escura);
  --bs-btn-active-bg: var(--cor-primaria-escura);
  --bs-btn-active-border-color: var(--cor-primaria-escura);
  --bs-btn-disabled-bg: var(--cor-primaria);
  --bs-btn-disabled-border-color: var(--cor-primaria);
  --bs-btn-focus-shadow-rgb: var(--cor-primaria-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria);
  --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-active-bg: var(--cor-primaria-escura);
  --bs-btn-active-border-color: var(--cor-primaria-escura);
  --bs-btn-focus-shadow-rgb: var(--cor-primaria-rgb);
}

/* --- Foco visível para quem navega pelo teclado ----------------------------------------------- */
/* --cor-foco (tema.css) e não o amarelo, que dá 1,67:1 sobre o fundo claro destas telas. */
a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.form-control:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.25rem rgba(var(--cor-primaria-rgb), 0.25);
}

.pular-conteudo {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
  padding: 0.5rem 0.75rem;
  background: var(--cor-superficie);
  border-radius: 0.375rem;
}

/* --- Marca ------------------------------------------------------------------------------------ */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.15;
  text-align: left;
  color: var(--cor-primaria);
  text-decoration: none;
}

.marca-logo {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
}

.marca-nome {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.marca-descricao {
  display: block;
  font-size: 0.8125rem;
  color: var(--cor-secundaria);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Telas de autenticação: cartão centralizado ----------------------------------------------- */
.auth-principal {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.auth-coluna {
  width: 100%;
  max-width: 27rem;
}

/* Link em --cor-primaria sobre --cor-fundo: 15,10:1. */
.auth-voltar {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  text-align: center;
}

.auth-cartao {
  width: 100%;
  max-width: 27rem;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-alerta);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(var(--cor-primaria-rgb), 0.08);
}

.auth-cabecalho {
  padding: 1.5rem 1.5rem 0;
  text-align: center;
}

.auth-corpo {
  padding: 1.25rem 1.5rem 1.5rem;
}

.auth-titulo {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.auth-rodape {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.9375rem;
  text-align: center;
}

/* --- Formulários ------------------------------------------------------------------------------ */
/* O Django marca o campo com erro com aria-invalid="true"; o template não precisa de lógica. */
.form-control[aria-invalid="true"] {
  border-color: var(--cor-erro);
}

.errorlist {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--cor-erro);
}

.alert .errorlist {
  margin: 0;
  font-size: 1rem;
  color: inherit;
}

.form-text ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* --- Portal do cliente ------------------------------------------------------------------------ */
/*
 * Tudo abaixo vale só dentro de `body.portal` ou em classes `.portal-*`. Fundos claros
 * (--cor-fundo e --cor-superficie) com texto grafite; o amarelo entra só como detalhe decorativo
 * ou como fundo com texto escuro. O único bloco escuro é a fachada do vídeo, que redefine
 * --cor-foco para o amarelo (9,87:1 sobre o grafite).
 */
.portal {
  overflow-wrap: break-word;
}

/* Componentes do Bootstrap que trazem cor própria: aqui passam a usar a paleta do tema. */
.portal .btn-primary {
  --bs-btn-color: var(--cor-texto-inverso);
  --bs-btn-hover-color: var(--cor-texto-inverso);
  --bs-btn-active-color: var(--cor-texto-inverso);
  --bs-btn-disabled-color: var(--cor-texto-inverso);
}

.portal .btn-outline-primary {
  --bs-btn-hover-color: var(--cor-texto-inverso);
  --bs-btn-active-color: var(--cor-texto-inverso);
  --bs-btn-disabled-color: var(--cor-secundaria);
  --bs-btn-disabled-border-color: var(--cor-borda-campo);
}

.portal .btn-outline-secondary {
  --bs-btn-color: var(--cor-secundaria);
  --bs-btn-border-color: var(--cor-borda-campo);
  --bs-btn-hover-color: var(--cor-texto-inverso);
  --bs-btn-hover-bg: var(--cor-secundaria);
  --bs-btn-hover-border-color: var(--cor-secundaria);
  --bs-btn-active-color: var(--cor-texto-inverso);
  --bs-btn-active-bg: var(--cor-primaria);
  --bs-btn-active-border-color: var(--cor-primaria);
  --bs-btn-focus-shadow-rgb: var(--cor-primaria-rgb);
}

.portal .form-control,
.portal .form-select {
  border-color: var(--cor-borda-campo);
  color: var(--cor-texto);
  background-color: var(--cor-superficie);
}

.portal .form-control::placeholder {
  color: var(--cor-secundaria);
  opacity: 1;
}

.portal .form-select:focus {
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 0.25rem rgba(var(--cor-primaria-rgb), 0.25);
}

.portal .form-control:focus-visible,
.portal .form-select:focus-visible,
.portal button:focus-visible,
.portal [tabindex]:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.portal .alert {
  --bs-alert-color: var(--cor-texto);
  --bs-alert-bg: var(--cor-superficie);
  --bs-alert-border-color: var(--cor-borda);
  --bs-alert-link-color: var(--cor-primaria);
  border-left: 4px solid var(--cor-secundaria);
}

.portal .alert-success,
.portal .alert-info {
  border-left-color: var(--cor-primaria);
}

.portal .alert-warning {
  border-left-color: var(--cor-alerta);
}

.portal .alert-danger {
  --bs-alert-color: var(--cor-erro);
  --bs-alert-border-color: var(--cor-erro);
  border-left-color: var(--cor-erro);
}

/* Cabeçalho e menu */
.portal-cabecalho {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  border-top: 4px solid var(--cor-alerta);
}

.portal-cabecalho .marca {
  min-width: 0;
}

.portal-menu .nav {
  gap: 0.25rem;
}

/* Link em --cor-primaria sobre --cor-superficie: 16,48:1. O item ativo não depende só de cor: */
/* ganha peso, fundo suave e um filete grafite embaixo.                                        */
.portal-menu .nav-link {
  padding: 0.5rem 0.75rem;
  border-bottom: 3px solid transparent;
  border-radius: 0.375rem 0.375rem 0 0;
  font-weight: 500;
  color: var(--cor-primaria);
}

.portal-menu .nav-link:hover {
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-escura);
}

/* O Bootstrap troca o contorno destes links por uma sombra translúcida: volta o contorno. */
.portal-menu .nav-link:focus-visible,
.portal-paginacao .page-link:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
  box-shadow: none;
}

.portal-menu .nav-link.active {
  border-bottom-color: var(--cor-primaria);
  background: var(--cor-primaria-suave);
  font-weight: 700;
}

/* Contador de notificações não lidas: texto inverso sobre --cor-primaria (16,48:1), também */
/* dentro do item ativo do menu (o selo traz o próprio fundo). Com zero o template o tira da  */
/* vista com .visually-hidden, sem tirá-lo da página.                                         */
.portal-contador {
  min-width: 1.5rem;
  margin-left: 0.125rem;
  background: var(--cor-primaria);
  color: var(--cor-texto-inverso);
  font-variant-numeric: tabular-nums;
  vertical-align: 0.0625rem;
}

.portal-sessao {
  min-width: 0;
}

.portal-usuario {
  font-size: 0.9375rem;
  color: var(--cor-secundaria);
  overflow-wrap: anywhere;
}

/* Painéis (boas-vindas, minha conta) */
.portal-painel {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
}

.portal-boas-vindas {
  border-left: 4px solid var(--cor-alerta);
}

.portal-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.portal-atalhos .list-inline-item {
  margin: 0;
}

.portal-secao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.portal-secao-cabecalho > * {
  margin-bottom: 0;
}

.portal-ver-todos {
  font-weight: 600;
}

.portal-dados {
  max-width: 40rem;
}

.portal-dados dt {
  font-weight: 600;
  color: var(--cor-secundaria);
}

.portal-dados dd {
  overflow-wrap: anywhere;
}

/* Cartões de conteúdo */
.portal-cartoes {
  margin-bottom: 0;
}

.portal-cartao {
  --bs-card-bg: var(--cor-superficie);
  --bs-card-color: var(--cor-texto);
  --bs-card-border-color: var(--cor-borda);
  --bs-card-cap-bg: var(--cor-superficie);
  border-top: 4px solid var(--cor-secundaria);
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.portal-cartao:hover {
  border-color: var(--cor-primaria);
  box-shadow: 0 0.5rem 1.25rem rgba(var(--cor-primaria-rgb), 0.12);
}

/* O link cobre o cartão inteiro (.stretched-link): o contorno de foco vai para o cartão. */
.portal-cartao:has(a:focus-visible) {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.portal-cartao:has(a:focus-visible) a:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.portal-cartao-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  color: var(--cor-secundaria);
}

.portal-cartao-categoria {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-cartao-titulo {
  overflow-wrap: anywhere;
}

.portal-cartao-titulo a {
  color: var(--cor-primaria);
  text-decoration: none;
}

.portal-cartao:hover .portal-cartao-titulo a {
  text-decoration: underline;
}

.portal-cartao-resumo {
  color: var(--cor-secundaria);
  overflow-wrap: anywhere;
}

.portal-cartao-data {
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-secundaria);
}

/* Etiqueta do tipo. Texto: --cor-primaria-escura sobre --cor-primaria-suave, 16,3:1 (padrão); */
/* --cor-primaria sobre --cor-alerta, 9,87:1; --cor-texto-inverso sobre --cor-primaria, 16,48:1. */
.portal-cartao-tipo {
  border: 1px solid var(--cor-borda-campo);
  background: var(--cor-primaria-suave);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cor-primaria-escura);
  white-space: normal;
}

[data-tipo="APRESENTACAO"] .portal-cartao-tipo {
  border-color: var(--cor-alerta-escura);
  background: var(--cor-alerta);
  color: var(--cor-primaria);
}

[data-tipo="DOCUMENTO"] .portal-cartao-tipo {
  border-color: var(--cor-primaria);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
}

[data-tipo="VIDEO"] .portal-cartao-tipo {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: var(--cor-texto-inverso);
}

.portal-cartao[data-tipo="APRESENTACAO"] {
  border-top-color: var(--cor-alerta);
}

.portal-cartao[data-tipo="DOCUMENTO"] {
  border-top-color: var(--cor-borda-campo);
}

.portal-cartao[data-tipo="VIDEO"] {
  border-top-color: var(--cor-primaria);
}

/* Biblioteca: filtros, lista e paginação */
.portal-filtros .form-label {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.portal-filtros-acoes {
  flex-wrap: wrap;
}

.portal-contagem {
  color: var(--cor-secundaria);
}

/* O htmx marca com .htmx-request quem está em `hx-indicator` enquanto o pedido não volta   */
/* (`includeIndicatorStyles: false`: o htmx não injeta <style>, o indicador é este).          */
.portal-carregando {
  visibility: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cor-secundaria);
}

.portal-carregando.htmx-request {
  visibility: visible;
}

.portal-carregando::before {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.375rem;
  border: 2px solid var(--cor-borda);
  border-top-color: var(--cor-primaria);
  border-radius: 50%;
  vertical-align: -0.0625rem;
  content: "";
  animation: portal-girar 0.8s linear infinite;
}

.portal-lista {
  transition: opacity 0.15s ease-in-out;
}

.portal-lista.htmx-request {
  opacity: 0.55;
}

@keyframes portal-girar {
  to {
    transform: rotate(360deg);
  }
}

.portal-paginacao .pagination {
  --bs-pagination-color: var(--cor-primaria);
  --bs-pagination-bg: var(--cor-superficie);
  --bs-pagination-border-color: var(--cor-borda);
  --bs-pagination-hover-color: var(--cor-primaria-escura);
  --bs-pagination-hover-bg: var(--cor-primaria-suave);
  --bs-pagination-hover-border-color: var(--cor-borda-campo);
  --bs-pagination-focus-color: var(--cor-primaria-escura);
  --bs-pagination-focus-bg: var(--cor-primaria-suave);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--cor-primaria-rgb), 0.25);
  --bs-pagination-active-color: var(--cor-texto-inverso);
  --bs-pagination-active-bg: var(--cor-primaria);
  --bs-pagination-active-border-color: var(--cor-primaria);
  --bs-pagination-disabled-color: var(--cor-secundaria);
  --bs-pagination-disabled-bg: var(--cor-fundo);
  --bs-pagination-disabled-border-color: var(--cor-borda);
  flex-wrap: wrap;
  row-gap: 0.25rem;
  margin-bottom: 0;
}

.portal-paginacao .page-link {
  min-width: 2.75rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
}

/* Notificações: item da lista e do dashboard, detalhe e estado de leitura */
/*
 * O estado está sempre escrito ("Não lida" ou "Lida em ..."). O reforço visual da não lida não é
 * só cor: filete grafite à esquerda (--cor-primaria sobre --cor-superficie, 16,48:1), título em
 * negrito e selo preenchido; a lida fica com filete claro, título em peso normal e texto simples.
 */
.portal-notificacao {
  border-left: 4px solid var(--cor-borda);
}

.portal-notificacao[data-leitura="nao-lida"] {
  border-left-color: var(--cor-primaria);
}

.portal-notificacao-titulo {
  overflow-wrap: anywhere;
}

.portal-notificacao .portal-notificacao-titulo {
  font-weight: 400;
}

.portal-notificacao[data-leitura="nao-lida"] .portal-notificacao-titulo {
  font-weight: 700;
}

.portal-notificacao-titulo a {
  color: var(--cor-primaria);
}

.portal-notificacao-titulo a:hover {
  color: var(--cor-primaria-escura);
}

.portal-notificacao-data {
  min-width: 0;
}

/* Texto de apoio: --cor-secundaria sobre --cor-superficie, 7,15:1. */
.portal-notificacao-resumo {
  margin-bottom: 0.75rem;
  color: var(--cor-secundaria);
  overflow-wrap: anywhere;
}

.portal-notificacao-conteudo {
  overflow-wrap: anywhere;
}

.portal-notificacao-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

/* Selo "Não lida": --cor-texto-inverso sobre --cor-primaria, 16,48:1. */
.portal-selo-nao-lida {
  border: 1px solid var(--cor-primaria);
  background: var(--cor-primaria);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cor-texto-inverso);
}

/* "Lida em ...": --cor-secundaria sobre --cor-superficie, 7,15:1. */
.portal-notificacao-lida {
  color: var(--cor-secundaria);
}

/* Etiqueta do tipo da notificação (mesma base de .portal-cartao-tipo; o tipo está escrito). */
/* Alerta: --cor-primaria sobre --cor-alerta, 9,87:1. Novo conteúdo: --cor-primaria sobre    */
/* --cor-superficie, 16,48:1. Informativo fica com o padrão (16,3:1).                        */
[data-tipo="ALERTA"] .portal-cartao-tipo {
  border-color: var(--cor-alerta-escura);
  background: var(--cor-alerta);
  color: var(--cor-primaria);
}

[data-tipo="NOVO_CONTEUDO"] .portal-cartao-tipo {
  border-color: var(--cor-primaria);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
}

.portal-notificacao-mensagem {
  max-width: 46rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.portal-notificacao-detalhe .portal-notificacao-estado {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

/* Estados vazios e avisos */
.portal-vazio {
  margin-bottom: 0;
  padding: 1.5rem 1.25rem;
}

/* Detalhe do conteúdo */
.portal-voltar {
  font-weight: 600;
}

.portal-conteudo-cabecalho h1 {
  overflow-wrap: anywhere;
}

.portal-conteudo-resumo {
  max-width: 46rem;
  color: var(--cor-secundaria);
}

/* Corpo do texto: HTML do editor, já sanitizado com nh3 no `save()` do model. A rolagem     */
/* horizontal de tabela ou linha larga fica dentro deste bloco, nunca na página.             */
.portal-conteudo-corpo {
  padding: 1.25rem;
  overflow-x: auto;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
  line-height: 1.65;
}

.portal-conteudo-corpo > * {
  max-width: 46rem;
}

.portal-conteudo-corpo > :last-child {
  margin-bottom: 0;
}

.portal-conteudo-corpo h2,
.portal-conteudo-corpo h3,
.portal-conteudo-corpo h4 {
  margin-top: 1.5rem;
  font-weight: 700;
}

.portal-conteudo-corpo h2 {
  font-size: 1.5rem;
}

.portal-conteudo-corpo h3 {
  font-size: 1.25rem;
}

.portal-conteudo-corpo h4 {
  font-size: 1.0625rem;
}

.portal-conteudo-corpo > :first-child {
  margin-top: 0;
}

.portal-conteudo-corpo a {
  color: var(--cor-primaria);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.portal-conteudo-corpo ul,
.portal-conteudo-corpo ol {
  padding-left: 1.5rem;
}

.portal-conteudo-corpo li + li {
  margin-top: 0.25rem;
}

.portal-conteudo-corpo img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.portal-conteudo-corpo blockquote {
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  border-left: 4px solid var(--cor-alerta);
  background: var(--cor-primaria-suave);
}

.portal-conteudo-corpo pre {
  padding: 0.75rem 1rem;
  background: var(--cor-primaria-suave);
  border-radius: 0.25rem;
  white-space: pre-wrap;
}

.portal-conteudo-corpo > table {
  max-width: none;
}

.portal-conteudo-corpo table {
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.portal-conteudo-corpo th,
.portal-conteudo-corpo td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  text-align: left;
  vertical-align: top;
}

.portal-conteudo-corpo th {
  background: var(--cor-primaria-suave);
  font-weight: 700;
}

.portal-conteudo-corpo hr {
  border-top: 1px solid var(--cor-borda-campo);
  opacity: 1;
}

.portal-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.portal-downloads .list-inline-item {
  margin: 0;
}

.portal-so-visualizacao {
  color: var(--cor-secundaria);
}

/* Visualizador de PDF (PDF.js; static/js/portal-pdf.js) */
.portal-pdf {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 0.5rem;
}

.portal-pdf-barra {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0.5rem;
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  border-radius: 0.5rem 0.5rem 0 0;
}

.portal-pdf-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.portal-pdf-contador,
.portal-pdf-zoom {
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

.portal-pdf-zoom {
  min-width: 3.25rem;
  text-align: center;
}

.portal-pdf-estado {
  margin: 0;
  padding: 1rem;
  color: var(--cor-secundaria);
}

.portal-pdf-erro {
  margin: 1rem;
}

.portal-pdf-area {
  padding: 0.5rem;
  overflow: auto;
  background: var(--cor-primaria-suave);
  border-radius: 0 0 0.5rem 0.5rem;
}

.portal-pdf-area:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: -3px;
}

/* A largura em px vem do script (CSSOM, não atributo `style` no HTML); a altura acompanha. */
.portal-pdf-pagina {
  display: block;
  height: auto;
  margin: 0 auto;
  background: var(--cor-superficie);
  box-shadow: 0 0.125rem 0.5rem rgba(var(--cor-primaria-rgb), 0.2);
}

.portal-pdf-ocupado .portal-pdf-pagina {
  opacity: 0.6;
}

/* Vídeo sob clique (static/js/portal-video.js) */
.portal-video {
  max-width: 60rem;
}

/* Fachada escura em 16:9; cresce além disso quando o aviso não cabe (telas estreitas).  */
/* Texto --cor-texto-inverso-suave sobre --cor-primaria: 12,82:1. Foco em amarelo: 9,87:1. */
.portal-video-fachada {
  --cor-foco: var(--cor-alerta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  aspect-ratio: 16 / 9;
  background: var(--cor-primaria);
  border-radius: 0.5rem;
  text-align: center;
  color: var(--cor-texto-inverso-suave);
}

/* Marcador neutro, desenhado aqui: nenhuma miniatura de terceiros. */
.portal-video-marcador {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  border: 3px solid var(--cor-alerta);
  border-radius: 50%;
}

.portal-video-marcador::before {
  position: absolute;
  top: 50%;
  left: 54%;
  border-top: 0.75rem solid transparent;
  border-bottom: 0.75rem solid transparent;
  border-left: 1.25rem solid var(--cor-alerta);
  content: "";
  transform: translate(-50%, -50%);
}

.portal-video-aviso {
  max-width: 38rem;
  margin: 0;
  font-size: 0.9375rem;
}

.portal-video-aviso a {
  color: var(--cor-texto-inverso);
  text-decoration: underline;
}

.portal-video-aviso a:hover {
  color: var(--cor-alerta);
}

/* Botão amarelo com texto --cor-primaria-escura: 11,31:1 (8,73:1 no hover). */
.portal-video-fachada .btn-primary {
  --bs-btn-color: var(--cor-primaria-escura);
  --bs-btn-bg: var(--cor-alerta);
  --bs-btn-border-color: var(--cor-alerta);
  --bs-btn-hover-color: var(--cor-primaria-escura);
  --bs-btn-hover-bg: var(--cor-alerta-escura);
  --bs-btn-hover-border-color: var(--cor-alerta-escura);
  --bs-btn-active-color: var(--cor-primaria-escura);
  --bs-btn-active-bg: var(--cor-alerta-escura);
  --bs-btn-active-border-color: var(--cor-alerta-escura);
  font-weight: 700;
}

.portal-video-quadro {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cor-primaria);
  border-radius: 0.5rem;
}

.portal-video-player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.portal-video-player:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

@media (min-width: 992px) {
  .portal-conteudo-corpo {
    padding: 2rem;
  }

  .portal-pdf-area {
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .portal-menu,
  .portal-sessao {
    width: 100%;
  }

  .portal-sessao {
    justify-content: space-between;
  }

  .portal-pdf-barra .btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-cartao,
  .portal-lista {
    transition: none;
  }

  .portal-carregando::before {
    animation: none;
  }
}