@charset "UTF-8";

/* ============================================================
   blocks.css — CSS dos BLOCOS do editor do backoffice.

   O que e isto: no backoffice (repo separado) foi construido um
   editor de blocos com que a redacao monta o corpo dos artigos.
   O que ele grava e HTML, guardado no campo TEXT do elemento, e
   injectado nesta ponta por
     xsl_files/articles/article-body-new.xsl  (linha 522, o
     .item-text > .text, com disable-output-escaping)
   Ou seja: este CSS nao tem markup nenhum neste repo, o markup
   vem da base de dados.

   O par em JS e o /scripts/blocks.js.

   E o mesmo par de ficheiros da M80 (styles/blocks.css +
   scripts/blocks.js), que por sua vez veio da Comercial,
   adaptado a este site. As diferencas estao assinaladas nos
   comentarios; as tres grandes ficam ja aqui:

   1. AS CORES sao as da area de artigos (#4700A3 e #7d78e8 do
      styles/artigos.css) e nao as da marca do site (#1D3265).
      Os blocos so aparecem em /artigo, e ali o roxo e que e a
      cor dos titulos, das categorias e dos botoes.

   2. NAO HA A CAIXA 16:9 A DESFAZER. Na M80 e na Comercial o
      global.css transforma o .embed dos artigos numa caixa de
      racio fixo (position:relative + padding-bottom:56.25% +
      overflow:hidden), e metade da seccao 4 daquele ficheiro
      existe para a tirar aos embeds do editor, que cortava. Aqui
      o .item-embed.embed do article-body-new.xsl:547 nao tem
      regra nenhuma de CSS -- o styles.css:12559 so trata do
      .video-container, que e outro bloco e do proprio XSL. Por
      isso essas regras nao vieram: nao ha nada para desfazer.

   3. NAO VEIO A VOTACAO nem o widget de desporto (seccoes 10 e 8
      do blocks.css da M80). Ver a nota do fim deste cabecalho.

   PORQUE FICHEIRO PROPRIO e nao dentro do artigos.css: e output
   do editor, com o contrato dele. Um dia estes blocos servem
   tambem outra area (a M80 usa o mesmo par nas noticias) e o que
   define onde a regra vive e ser output do editor, nao a area.

   PORQUE NAO NO styles.css: os blocos so existem em /artigo. No
   styles.css este CSS carregava na homepage, nos podcasts, nas
   marcas, sem um unico bloco.

   O CONTRATO com o editor (assets/js/blocks/editor/output.js):
   cada bloco sai como
     div class="nb-block mb-3" data-block-type data-block-template-id
   com uma allowlist FECHADA de classes: nb-block, mb-3,
   position-relative, nb-block--component, nb-block-locked. Todo
   o resto e chrome do editor e sai na gravacao. Nao ha, por isso,
   nada de .nb-* para estilar aqui a nao ser o proprio involucro.

   O Bootstrap 5.3 completo entra em todas as paginas pelo
   xsl_files/config.xsl (linha 164), portanto as utilities que o
   editor emite (mb-3, row, g-4, col-md-*, btn-*, rounded-3, p-4,
   text-muted, img-fluid, text-start/center/end) JA estao
   cobertas. Este ficheiro so tem o que e do site.

   O QUE NAO VEIO (nao e esquecimento):

     .poll-box    a votacao (seccao 10 do blocks.css da M80).
                  Precisa de quatro endpoints que este repo nao
                  tem -- /api/poll/full.aspx, info.aspx,
                  answers.aspx e vote.aspx -- porque o polls.asmx
                  exige token e a pergunta e as respostas nao
                  vivem no TEXT do artigo. Trazer o bloco e
                  trazer primeiro esses quatro ficheiros.
     .sport-box   o quadro de jogos (seccao 8 da M80). E um bloco
                  de desporto num site institucional: nao se
                  trouxe CSS para o que nao se espera ver. Se
                  aparecer, chega ca HTML completo (o
                  competition.js do backoffice escreve-o na
                  gravacao) e renderiza sem estilo, nao deixa
                  buraco.
     .form-box    o formulario e a agenda dependem do
     .agenda-box  /scripts/articles.js da Comercial, que este
                  site nao tem.
     .gallery-box a galeria. Neste site ela NAO vem no corpo do
                  texto: e um elemento proprio do artigo
                  (FORMAT='gallery' com FK_GALLERY_ID) e quem a
                  desenha e o template "gallery" do
                  article-body-new.xsl, no servidor, com o CSS que
                  ja esta no styles.css. Uma .gallery-box gravada
                  pelo editor dentro do texto nao tem aqui quem a
                  monte.

   Todos estes estao na regra do :has(...:empty) da seccao 1: sem
   quem os monte ficam vazios, e assim nao deixam um espaco morto
   no meio do artigo.

   CACHE: ao mexer aqui, subir o ?v= no artigo.aspx.
   ============================================================ */


/* ============================================================
   0. TOKENS DE COR DOS BLOCOS
   ============================================================
   A Comercial tem um bloco :root com --border, --bg-surface,
   --bg-raised, --bg-page, --text-muted e --text-body (usa-os para
   o tema claro/escuro). Aqui nao ha tema, mas os nomes MANTEM-SE,
   por duas razoes:
     1. os tres blocks.css ficam comparaveis linha a linha, que e
        o que permite trazer correcoes de um para o outro;
     2. se um dia o styles.css definir estes tokens, basta apagar
        este bloco e os blocos passam a seguir o site.

   Nenhum destes nomes existe hoje no /styles deste repo (o unico
   --border que ha esta dentro do .slick-nav do
   slick-animation.css, que nunca embrulha um bloco), por isso
   este :root nao pisa nada.

   Os valores: o fundo das paginas de artigo e branco, por isso os
   cartoes sao brancos tambem e o que os distingue e a moldura; as
   barras e miniaturas levam um roxo muito claro da familia do
   #7d78e8. As molduras e o texto esmaecido sao preto com alfa e
   nao cores novas, para acompanharem qualquer mudanca de paleta.

   O --blocks-accent e o roxo dos titulos de artigo (#4700A3, o
   .card-title e o .category do artigos.css) e o
   --blocks-accent-soft o dos botoes e das categorias (#7d78e8, o
   .button-more e o .art-categories). Sao os dois tons da area, e
   e por isso que sao eles e nao o #1D3265 da marca. */
:root {
    --border: rgba(0, 0, 0, 0.14);
    --border-strong: rgba(0, 0, 0, 0.40);
    --bg-surface: #ffffff;
    --bg-raised: #f2effc;
    --bg-page: #ffffff;
    --text-body: #000000;
    --text-muted: rgba(0, 0, 0, 0.60);
    --blocks-accent: #4700a3;
    --blocks-accent-soft: #7d78e8;
}


/* ============================================================
   1. O INVOLUCRO .nb-block
   ============================================================ */

/* O mb-3 do Bootstrap ja da o espacamento vertical entre blocos,
   por isso aqui nao se toca em margens -- se se tocasse, um
   artigo antigo (paragrafos soltos, sem blocos) e um novo ficavam
   com ritmos diferentes.

   O que falta e so o max-width das medias que a redacao mete
   dentro de um bloco: sem isto uma imagem de 2000px empurra a
   coluna do artigo e leva o layout com ela. */
.nb-block img,
.nb-block iframe,
.nb-block video,
.nb-block table {
    max-width: 100%;
}

/* Um bloco pode ser gravado com data-block-type mas vazio (o
   editor tenta apaga-los, mas um bloco dinamico sem id passa).
   Sem isto sobrava um espaco morto no meio do texto. */
.nb-block:empty {
    display: none;
}

/* O mesmo caso, um nivel abaixo: o involucro tem conteudo (o div
   do bloco) mas o div esta vazio. Acontece quando o blocks.js
   decide nao montar nada -- ficheiro sem URL, audio que o
   webservice nao conhece -- e acontece SEMPRE com a poll-box, a
   form-box, a agenda-box e a gallery-box, que aqui nao tem quem as
   monte (ver a nota no cabecalho). Esconder so o div interior
   deixava a margem do mb-3 do involucro, ou seja um salto no texto
   sem nada la dentro; e preciso apagar o involucro.

   A audio-box tambem esta na lista, e nesta o esconder e
   temporario: ela chega vazia do editor e fica vazia enquanto o
   pedido ao webservice nao volta -- nada que se veja, porque nao
   ha o que mostrar. Quando o leitor monta, o plugin faz
   replaceWith() da caixa e o involucro deixa de ter uma
   .audio-box:empty la dentro, ou seja reaparece sozinho. Se o
   webservice nao conhecer o id, o plugin sai sem escrever nada e a
   regra fica a valer, que e o que se quer.

   O :has() nao chega a browsers antigos, mas nao ha alternativa
   em CSS (nao se selecciona um pai) e o pior caso e ficar o
   espaco em branco -- nao quebra nada. */
.nb-block:has(.link-box:empty),
.nb-block:has(.html-box:empty),
.nb-block:has(.file-box:empty),
.nb-block:has(.audio-box:empty),
.nb-block:has(.gallery-box:empty),
.nb-block:has(.poll-box:empty),
.nb-block:has(.form-box:empty),
.nb-block:has(.agenda-box:empty) {
    display: none;
}


/* ============================================================
   2. FIGURA E LEGENDA
   ============================================================ */

/* O bloco "Imagem" grava figure > img + figcaption com
   .image-info / .image-description / .image-credits. Nenhuma
   destas classes existe neste repo (na M80 vinham do global.css,
   da foto de abertura da noticia), por isso a legenda fica aqui.

   O artigos.css:31 tem ".item-text img { margin:auto }", que
   centra as imagens do corpo do artigo -- e o que se quer, e nao
   se lhe mexe. */
.nb-block figure {
    margin-bottom: 0;
}

.nb-block figure img {
    height: auto;
}

.nb-block figcaption {
    padding-top: 8px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.nb-block figcaption .image-credits {
    font-style: italic;
}

/* O editor grava .block-image-placeholder + .image-input-placeholder
   nas imagens que a redacao NAO escolheu. Se um bloco desses
   escapar a gravacao, o que se ve e o /assets/media/empty.gif do
   backoffice -- um caminho que nao existe neste site, logo um
   icone de imagem partida no meio do artigo. Esconde-se. */
.nb-block img.image-input-placeholder,
.nb-block img.block-news-placeholder {
    display: none;
}


/* ============================================================
   3. CITACAO
   ============================================================ */

/* O Bootstrap da a .blockquote so font-size e margin-bottom --
   nao ha barra, nem recuo, nem tipografia. Isto e o desenho da
   casa: barra roxa a esquerda e italico.

   Sem o .nb-block a frente: a citacao pode vir solta do
   article-body-new.xsl, sem involucro. A classe .blockquote so
   aparece em citacoes do editor -- os embeds do X e do Instagram
   tambem usam blockquote, mas com as classes deles. */
blockquote.blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid var(--blocks-accent);
    font-style: italic;
    font-weight: 300;
}

blockquote.blockquote p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   4. EMBEDS
   ============================================================
   Dez classes, uma por provider. O markup vem PRONTO do editor
   (o iframe ou o blockquote do provider ja esta dentro), por isso
   aqui nao se monta nada -- ver blocks.js para os scripts dos
   providers, que o editor APAGA ao gravar.

   Ao contrario da M80 e da Comercial, aqui nao ha caixa de racio
   fixo a desfazer no contentor dos artigos (ver o ponto 2 do
   cabecalho): o .item-embed.embed do XSL nao tem CSS nenhum.
   Estas regras sao so o tamanho e o alinhamento de cada provider.

   O alinhamento: o editor poe data-align (left|center|right) E a
   utility text-* equivalente no mesmo elemento. Assenta-se no
   data-align e nao no text-*: o text-* alinha texto, mas o que
   ha aqui dentro sao iframes e blockquotes que o embed.js do
   editor passa a display:inline-block com style inline. Um
   inline-block obedece ao text-align do PAI, e o pai e o
   .nb-block, nao o box. Com o data-align a decisao fica num
   sitio so e nao depende de quem herda o que. */
.nb-block .youtube-box,
.nb-block .facebook-box,
.nb-block .twitter-box,
.nb-block .insta-box,
.nb-block .tiktok-box,
.nb-block .soundcloud-box,
.nb-block .spotify-box,
.nb-block .podplay-box,
.nb-block .liveblog-box,
.nb-block .threads-box {
    margin: 1.5rem 0;
    text-align: left;
}

.nb-block [data-align="center"] {
    text-align: center;
}

.nb-block [data-align="right"] {
    text-align: right;
}

/* E O text-align NAO CHEGA quando o cartao e um bloco: o style
   inline que o embed.js do Instagram escreve no iframe traz
   "display: block; margin: 0px 0px 12px", e um bloco com as
   margens a zero nao obedece ao text-align do pai -- fica no
   canto esquerdo de um bloco que o editor mandou centrar. Medido
   na M80 (viewport 1400, coluna 812): iframe de 540 encostado a
   esquerda, 272px vazios a direita.

   A correccao sao as margens automaticas, e nao um
   display:inline-block nosso: mexer no display do iframe do
   provider e ir contra a decisao de deixar o cartao ser dele.

   So margin-left e margin-right, para o margin-bottom:12px do
   provider ficar de pe. Com !important porque a margem dele vem
   no style inline.

   O "> iframe" e para o youtube-box ficar de fora: la o iframe
   esta dentro do .youtube-embed-wrapper, que e a caixa 16:9 da
   seccao seguinte, e margens nao lhe fazem nada.

   O data-align="left" nao leva regra: as margens a zero do
   provider ja o poem a esquerda. */
.nb-block [data-align="center"] > iframe {
    margin-left: auto !important;
    margin-right: auto !important;
}

.nb-block [data-align="right"] > iframe {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Os embeds sociais (X, Instagram, Threads, TikTok) sao cartoes
   que o script do provider substitui: antes de ele correr o que
   esta no DOM e um blockquote cru, depois e um iframe com o
   tamanho que o provider lhe poe. QUEM MANDA NA LARGURA E O
   PROVIDER -- cada um ja sabe encolher, e este ficheiro nao lhe
   passa por cima. E o que a Comercial e a M80 fazem: la nao ha
   max-width nenhum nos cartoes sociais.

   MEDIDO na M80 (viewport 390, coluna 358, style inline do iframe
   depois de o widget carregar):

     X        width:358px            -> 358, encosta a coluna
     TikTok   width:100%             -> 358, encosta a coluna
     Insta    max-width:540px;
              width:calc(100% - 2px);
              min-width:326px        -> 356
     Facebook width="500" (atributo) -> 500, 142px DE FORA

   O Facebook e o unico que nao se sabe encolher, e por isso e o
   unico que fica com o cap: sem ele a pagina ganhava scroll
   horizontal num telefone. */
.nb-block .facebook-box iframe {
    max-width: 100% !important;
}

/* O YouTube e o unico com racio fixo conhecido, por isso da-se-lhe
   16:9 de verdade em vez de deixar o iframe com o height=315 do
   atributo -- que em mobile deixava barras negras em cima e baixo.
   O aspect-ratio evita o wrapper de padding-bottom do velho
   truque; o Bootstrap 5.3 ja pressupoe browsers que o suportam.

   O .youtube-embed-wrapper e o involucro que o editor grava
   dentro da .youtube-box. Na M80 ele ja tinha regra no global.css;
   aqui nao existe em lado nenhum, por isso os dois selectores
   ficam nesta folha. Sem isto, um video de um bloco saia com os
   560x315 dos atributos, sem encolher no telefone. */
.nb-block .youtube-box iframe,
.nb-block .youtube-embed-wrapper iframe {
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* Reserva de altura enquanto o script do provider nao substituiu
   o blockquote. Sem isto, cada embed que carrega empurra o resto
   do artigo para baixo. O valor nao e a altura final (essa
   depende do post), e o suficiente para o salto deixar de ser
   visivel.

   min-height e nao height: se o embed real for mais baixo,
   encolhe; mais alto, cresce. Um height fixo cortava posts
   longos. */
.nb-block .twitter-box,
.nb-block .insta-box,
.nb-block .threads-box {
    min-height: 250px;
}

/* O Spotify, o SoundCloud e o Podplay/Rayo sao players em iframe
   de altura conhecida e estavel. */
.nb-block .spotify-box iframe,
.nb-block .soundcloud-box iframe,
.nb-block .podplay-box iframe {
    width: 100%;
    max-width: 100%;
    border: 0;
}

/* O 24LiveBlog escreve-se a si mesmo dentro do div e pode ficar
   muito alto. Nao se reserva altura (seria sempre errada) mas
   garante-se que nao transborda. */
.nb-block .liveblog-box {
    overflow-x: auto;
}

/* Placeholder do editor que escapou a gravacao: "Sem embed
   definido. Abra as definicoes e cole o embed do X." Isto e texto
   para a redacao, nunca para o leitor. O editor tem de o gravar
   (o bloco existe, so nao tem conteudo), por isso e aqui que se
   apaga. */
.nb-block [data-nb-embed-placeholder] {
    display: none;
}

/* O artigos.css:38 tem ".instagram-media { justify-self: center }",
   que e do tempo em que os embeds vinham colados a mao no corpo
   do artigo. Nao colide: o justify-self so faz efeito num filho
   de grid ou flex, e o .nb-block e um div normal. Fica como
   esta -- e os artigos antigos continuam a depender dele. */


/* ============================================================
   5. LINK  (.link-box)
   ============================================================
   Placeholder VAZIO na gravacao -- o cartao e desenhado pelo
   blocks.js a partir dos data-attributes. Ver la o markup.

   E o bloco que motivou este par de ficheiros na M80: havia
   artigos e noticias em producao com uma .link-box vazia no meio
   do texto, ou seja um buraco visivel.

   Serve tres modos (data-link-mode): news, article, custom. O
   desenho e o mesmo nos tres; muda so o rotulo do meta. */
.nb-block .link-box {
    margin: 1.5rem 0;
}

.rc-link-card {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    transition: border-color 0.2s ease;
}

.rc-link-card:hover {
    border-color: var(--blocks-accent);
    text-decoration: none;
}

/* O styles.css:268 tem "a { color:#1D3265; text-decoration:
   underline }" e o artigos.css:2 tira-lhe o sublinhado. Este
   cartao e um <a>, logo herdava o azul-marinho no titulo e na
   descricao, como se fosse um link de texto no meio de um
   paragrafo. As duas declaracoes acima ganham por
   especificidade (classe contra elemento), mas repete-se aqui o
   :hover: o artigos.css:3 poe "a:hover { color: unset }", e o
   unset num <a> volta a herdar. Idem para o cartao de ficheiro
   (seccao 7). */
a.rc-link-card,
a.rc-link-card:hover {
    color: var(--text-body);
    text-decoration: none;
}

/* A miniatura tem largura FIXA e o corpo leva o resto. Um
   flex-basis em percentagem fazia a imagem encolher para nada
   quando o titulo era longo. */
.rc-link-card-thumb {
    flex: 0 0 120px;
    width: 120px;
    align-self: stretch;
    overflow: hidden;
    background: var(--bg-raised);
}

.rc-link-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* O artigos.css:31 poe "margin:auto" em TODAS as imagens do
       corpo do artigo (".item-text img"), o que faz sentido para
       uma foto solta no texto mas nao para uma miniatura que ja
       enche a sua coluna. Anula-se so aqui. */
    margin: 0;
}

/* Sem imagem nao se deixa a coluna vazia -- ela sai do fluxo e o
   texto ocupa o cartao todo. O blocks.js nem escreve o elemento
   quando nao ha data-link-image, mas a regra fica por seguranca
   caso a imagem exista e falhe a carregar. */
.rc-link-card-thumb:empty {
    display: none;
}

.rc-link-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
}

.rc-link-card-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--blocks-accent);
    margin-bottom: 4px;
}

.rc-link-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

/* O min-width:0 no body e o overflow-wrap aqui sao o par que
   impede um URL longo sem espacos de esticar o cartao para fora
   da coluna. Um flex item tem min-width:auto por omissao e
   recusa-se a encolher abaixo do conteudo. */
.rc-link-card-title,
.rc-link-card-desc {
    overflow-wrap: break-word;
}

.rc-link-card-desc {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.4;
    margin: 6px 0 0;
    color: var(--text-muted);
}

.rc-link-card-meta {
    display: block;
    font-size: 0.75rem;
    margin-top: 8px;
    color: var(--text-muted);
}

/* Em ecra estreito o cartao passa a vertical: 120px de imagem ao
   lado de um titulo deixavam duas ou tres palavras por linha. */
@media (max-width: 575px) {
    .rc-link-card {
        flex-direction: column;
    }

    .rc-link-card-thumb {
        flex: 0 0 auto;
        width: 100%;
        height: 160px;
    }
}


/* ============================================================
   6. HTML PERSONALIZADO  (.html-box)
   ============================================================
   Placeholder VAZIO na gravacao. O conteudo vive em
   data-html-source / -css / -js e e injectado pelo blocks.js.

   Aqui so se garante o contentor. O CSS que vem no
   data-html-css e da responsabilidade de quem o escreveu no
   backoffice -- nao ha nada a fazer deste lado. */
.nb-block .html-box {
    margin: 1.5rem 0;
}

.nb-block .html-box img,
.nb-block .html-box iframe,
.nb-block .html-box table {
    max-width: 100%;
}


/* ============================================================
   7. FICHEIRO  (.file-box)
   ============================================================
   Placeholder VAZIO na gravacao -- o cartao e desenhado pelo
   blocks.js a partir dos data-file-*. Ver la o markup.

   O "icone" e um selo com a extensao ESCRITA, nao um icone de
   fonte: diz mais ("XLSX" e mais claro que um icone de folha de
   calculo) e nao depende de a fonte de icones do site estar
   carregada. A familia do ficheiro (pdf, folha, imagem...) vira
   classe no blocks.js e a cor decide-se aqui. */
/* Sem o .nb-block a frente, ao contrario da maioria das regras
   deste ficheiro: nos artigos o elemento pode nao vir embrulhado
   em .nb-block. Nao ha risco de colisao -- o nome .file-box so
   existe neste bloco, em todo o site. */
.file-box {
    margin: 1.5rem 0;
}

/* Sem data-file-url o blocks.js nao escreve nada: esconde-se o
   bloco em vez de deixar uma caixa vazia com margem. */
.file-box:empty {
    display: none;
}

.rc-file-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-body);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    transition: border-color 0.2s ease;
}

.rc-file-card:hover {
    border-color: var(--blocks-accent);
    text-decoration: none;
}

/* Mesma razao do cartao de link (ver a nota na seccao 5): sem
   isto o titulo E o "ZIP . 26 KB" herdavam a cor de link do
   styles.css:268. */
a.rc-file-card,
a.rc-file-card:hover {
    color: var(--text-body);
    text-decoration: none;
}

/* O selo tem largura FIXA para os cartoes de uma lista de
   ficheiros alinharem os titulos todos na mesma vertical -- com
   largura ao conteudo, "PDF" e "XLSX" davam recuos diferentes.
   O tamanho pequeno porque o que esta ca dentro sao 3 ou 4
   maiusculas, nao uma palavra. */
.rc-file-card-badge {
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 8px;
    background: #6b7280;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}

/* Cor por familia. Nao e decoracao: numa lista de anexos a cor
   diz que tipo de ficheiro e antes de se ler a extensao. Os tons
   sao os convencionais (pdf vermelho, folha verde, slides
   laranja) para nao obrigar ninguem a aprender um codigo novo. */
.rc-file-card--pdf .rc-file-card-badge { background: #c0392b; }
.rc-file-card--doc .rc-file-card-badge { background: #2b5fa8; }
.rc-file-card--sheet .rc-file-card-badge { background: #1e7a45; }
.rc-file-card--slides .rc-file-card-badge { background: #c0552b; }
.rc-file-card--archive .rc-file-card-badge { background: #7a5c1e; }
.rc-file-card--image .rc-file-card-badge { background: #6b3fa0; }
.rc-file-card--audio .rc-file-card-badge { background: #1e6f7a; }
.rc-file-card--video .rc-file-card-badge { background: #a02b6b; }

/* O min-width:0 e o par do overflow-wrap do titulo: um flex item
   tem min-width:auto e recusa-se a encolher abaixo do conteudo,
   por isso um nome de ficheiro longo sem espacos esticava o
   cartao para fora da coluna. */
.rc-file-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.rc-file-card-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.rc-file-card-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* A seta de descarregar e um SVG inline (mesma razao do selo: nao
   se conta com fonte de icones). Fica esmaecida e so ganha cor no
   hover -- e uma affordance, nao o conteudo do cartao. */
.rc-file-card-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.rc-file-card:hover .rc-file-card-action {
    color: var(--blocks-accent);
}

@media (max-width: 575px) {
    /* A seta e a primeira coisa a sair: o titulo do ficheiro vale
       mais que a affordance num ecra estreito. */
    .rc-file-card-action {
        display: none;
    }
}


/* ============================================================
   8. COMPONENTES  (botao, separador, espacador, CTA)
   ============================================================
   Estes NAO sao placeholders: o exportComponentHtml() do editor
   expande-os na gravacao para Bootstrap puro (btn btn-primary
   btn-sm, rounded-3, bg-light, p-4, text-start/center/end) com
   alguns style inline no separador e no espacador.

   Ou seja: a ESTRUTURA nao precisa de CSS -- o Bootstrap do
   config.xsl resolve-a. O que se corrige aqui e a cor.

   NOTA: o inline style vem do backoffice, nao deste repo. A
   regra de "sem inline styles" continua a valer para o markup
   que se escreve aqui. */

/* O --bs-primary-rgb resolve de uma vez o .bg-primary, o
   .text-primary e o .border-primary (o CTA na variante primary
   usa o primeiro). Os botoes ficam a seguir: esses nao leem este
   token, tem a cor escrita a mao no ficheiro do Bootstrap.

   Aqui isto nao e so retemar, e corrigir: o styles.css declara
   --bs-primary: #1D3265 (linha 55) mas deixou o --bs-primary-rgb
   em "100, 161, 157" (linha 65), que e um verde-agua de outra
   paleta. Um .bg-primary dentro de um bloco saia com essa cor,
   que nao existe em mais nenhum sitio do site. Escreve-se o roxo
   da area de artigos, 71, 0, 163 = #4700A3, que e a cor dos
   titulos e das categorias ao lado das quais o bloco aparece (as
   variaveis do Bootstrap querem os canais em numero, nao um
   hex). */
.nb-block {
    --bs-primary-rgb: 71, 0, 163;
}

/* Um botao do editor e um <a>, e o site tem regras de <a> que
   ganham ao .btn do Bootstrap por especificidade:
     styles.css:268  a { color:#1D3265; text-decoration: underline }
     artigos.css:3   a:hover { color: unset }
   O .btn e as suas variantes sao classe unica, por isso a cor
   do texto vinha do primeiro e no hover voltava a herdar. O
   sublinhado, esse, ja e tirado pelo artigos.css:2 em todo o
   site.

   Devolve-se a decisao ao Bootstrap (var(--bs-btn-*)) em vez de
   se escrever cor a cor, senao cada variante nova do editor
   voltava a sair errada. */
.nb-block a.btn {
    text-decoration: none;
    font-weight: 500;
    color: var(--bs-btn-color);
}

.nb-block a.btn:hover,
.nb-block a.btn:focus {
    text-decoration: none;
    color: var(--bs-btn-hover-color);
}

.nb-block a.btn:active {
    color: var(--bs-btn-active-color);
}

/* Retema-se pelas variaveis do proprio Bootstrap 5.3 e nao por
   background-color, para os estados (hover, active, disabled) e
   o anel de foco continuarem a vir do Bootstrap em vez de se
   reescreverem um a um. Os outros variantes (secondary, dark,
   light, outline-*) nao se tocam: sao escolha editorial de quem
   monta o bloco.

   O par de cores e o do .button-more do artigos.css (fundo
   #7d78e8 no repouso) mas ao contrario: o roxo forte no repouso,
   o claro no hover. Razao: um botao de bloco aparece a meio do
   texto, sem nada por perto que o distinga, e o #4700A3 tem
   contraste de 11:1 com branco contra os 4,3:1 do #7d78e8. */
.nb-block .btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #4700a3;
    --bs-btn-border-color: #4700a3;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #7d78e8;
    --bs-btn-hover-border-color: #7d78e8;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #380080;
    --bs-btn-active-border-color: #380080;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #4700a3;
    --bs-btn-disabled-border-color: #4700a3;
}

.nb-block .btn-outline-primary {
    --bs-btn-color: #4700a3;
    --bs-btn-border-color: #4700a3;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #4700a3;
    --bs-btn-hover-border-color: #4700a3;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #4700a3;
    --bs-btn-active-border-color: #4700a3;
    --bs-btn-disabled-color: #4700a3;
    --bs-btn-disabled-border-color: #4700a3;
}

/* O .btn-link herda o --bs-link-color, que continua azul-marinho. */
.nb-block .btn-link {
    --bs-btn-color: #4700a3;
    --bs-btn-hover-color: #7d78e8;
    --bs-btn-active-color: #380080;
}


/* ============================================================
   9. AUDIO  (.audio-box)
   ============================================================
   O bloco vem da gravacao como div vazio com data-audioid e
   data-audio-style (card ou compact). Quem monta o leitor e o
   bmapAudioPlayer -- que vive NESTE repo, no
   /scripts/bmapAudioPlayer.js, e e o mesmo que a M80 e a
   Comercial vao buscar aqui.

   A montagem esta no blocks.js (initAudioBoxes). Na M80 vive no
   global.js porque la ha um ficheiro global de JS que corre em
   todas as paginas; aqui nao ha, por isso ficou no par dos
   blocos.

   Nao ha CSS a escrever, e isso e o ponto desta nota: o plugin
   acaba em $container.replaceWith(player), portanto a .audio-box
   DESAPARECE e nenhuma classe posta nela sobrevive. O que passa
   e o data-playermode, que o plugin transforma em classe do
   .audio-player -- card vira slim, compact vira thin -- e os dois
   layouts ja estao desenhados no styles/bmapAudioPlayer.css (o
   thin esconde capa, texto e volume e poe tudo numa linha).

   ATENCAO: essa folha nao entrava em nenhuma pagina de artigo. O
   artigo.aspx passou a carrega-la, senao o leitor aparecia sem
   estilo nenhum. Se um dia for preciso afinar, o selector e
   .audio-player.slim / .audio-player.thin e a folha e a do
   leitor, nao esta.
   ============================================================ */