/* Paleta Family App — verde-floresta (árvore da vida) em vez do castanho/terracota
   do projeto de artesanato de origem, para o site ter identidade própria. */
/* Diz ao browser qual a paleta a usar nos elementos nativos que o CSS não controla por completo
   (a lista de opções aberta de um <select>, a barra de scroll, etc.) — sem isto, alguns
   browsers/ecrãs pintam-nos consoante o tema do próprio sistema operativo, não o tema escolhido
   nesta app (ver o interruptor em views/includes/navigation.php), daí aparecerem escuros mesmo
   com a app no modo claro, ou vice-versa. */
:root{
    color-scheme: light;

    --bs-primary: #3a6a52;
    --bs-primary-rgb: 58, 106, 82;
    --bs-link-color: #3a6a52;
    --bs-link-color-rgb: 58, 106, 82;
    --bs-link-hover-color: var(--cor-marca-escuro);
    --bs-link-hover-color-rgb: 42, 77, 60;

    /* Cores próprias da marca, usadas em dezenas de sítios (títulos, molduras, etiquetas) —
       ver html[data-theme="escuro"] mais abaixo para a variante escura de cada uma. De propósito
       NÃO incluem as cores dos tabuleiros de jogos (casas do xadrez/damas, fundo do Pac-Man/
       Tetris, tabuleiro do Monopólio): essas representam o próprio jogo, não a interface, e
       ficam sempre iguais nos dois modos. */
    --cor-marca-escuro: #2a4d3c;
    --cor-marca-dourado: #8a660a;

    /* Variantes FIXAS (iguais nos dois modos, de propósito sem equivalente no bloco escuro
       abaixo) — para fundos sólidos emparelhados com texto branco (etiquetas, cabeçalhos,
       avatares). Ao contrário de --cor-marca-escuro/--cor-marca-dourado (que clareiam no modo
       escuro para continuarem legíveis como TEXTO sobre fundo escuro), um fundo sólido com texto
       branco por cima já tem contraste suficiente sem precisar de clarear — clarear estragava-o. */
    --cor-verde-solido: #2a4d3c;
    --cor-dourado-solido: #8a660a;

    /* Estrutura geral da página (fundo, texto, cartões, tabelas, formulários, menus) — modo
       claro (omissão) e escuro, trocados pelo interruptor em views/includes/navigation.php
       (ver Auth::tema()/temaAtual() em core/config.php, gravado por utilizador tal como o
       idioma). O atributo fica em <html> (ver views/includes/head.php) para nunca haver
       "flash" da cor errada antes do CSS carregar. */
    --cor-fundo: #ffffff;
    --cor-texto: #212529;
    --cor-texto-muted: #6c757d;
    --cor-navbar-fundo: #f8f9fa;
    --cor-card-fundo: #f1f4ee;
    --cor-card-borda: rgba(0, 0, 0, 0.175);
    --cor-input-fundo: #ffffff;
    --cor-input-borda: #ced4da;
    --cor-dropdown-fundo: #ffffff;
    --cor-dropdown-hover: #f1f3f5;
    --cor-tabela-borda: #dee2e6;
    --cor-tabela-stripe: rgba(0, 0, 0, 0.03);
    --cor-bolha-fundo: #ffffff;
    --cor-bolha-borda: #dee2e6;
}

html[data-theme="escuro"]{
    color-scheme: dark;

    --bs-primary: #5a9b78;
    --bs-primary-rgb: 90, 155, 120;
    --bs-link-color: #86cba7;
    --bs-link-color-rgb: 134, 203, 167;
    --bs-link-hover-color: #a9dcc1;
    --bs-link-hover-color-rgb: 169, 220, 193;

    --cor-marca-escuro: #8fd1ac;
    --cor-marca-dourado: #e0b84c;

    --cor-fundo: #1a271f;
    --cor-texto: #e8ece9;
    --cor-texto-muted: #9aa69f;
    --cor-navbar-fundo: #2e4537;
    --cor-card-fundo: #35533f;
    --cor-card-borda: rgba(255, 255, 255, 0.14);
    --cor-input-fundo: var(--cor-papel);
    --cor-input-borda: #c9c2ae;
    --cor-dropdown-fundo: #263a30;
    --cor-dropdown-hover: #35503f;
    --cor-tabela-borda: #3a5346;
    --cor-tabela-stripe: rgba(255, 255, 255, 0.04);
    --cor-papel: #faf8f0;
    --cor-bolha-fundo: #243830;
    --cor-bolha-borda: #3a5346;
}

/* Aplicação das variáveis acima aos elementos estruturais usados em quase todas as páginas
   (fundo, menu, cartões, tabelas, formulários, menus suspensos, chat) — ver comentário no
   bloco de variáveis (:root, mais acima) sobre o que fica de propósito fora disto. */
body{
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
}

.text-muted{
    color: var(--cor-texto-muted) !important;
}

.navbar-light{
    background-color: var(--cor-navbar-fundo) !important;
}

.navbar-light .navbar-brand,
.navbar-light .nav-link{
    color: var(--cor-texto);
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus{
    color: var(--cor-texto);
}

.navbar-light .navbar-toggler{
    border-color: var(--cor-card-borda);
}

/* O ícone do botão que abre o menu no telemóvel/pad (as "3 linhas", só visível abaixo do "lg" —
   ver .navbar-expand-lg em views/includes/navigation.php) é um SVG com a cor escrita lá dentro,
   pensado para a navbar clara ("navbar-light", sempre usada aqui) — ficava escuro sobre a navbar
   escura no modo noturno. Mesmo truque já usado no .btn-close acima, para inverter a cor sem
   precisar de outro SVG. */
html[data-theme="escuro"] .navbar-toggler-icon{
    filter: invert(1) grayscale(100%) brightness(200%);
}

.card{
    background-color: var(--cor-card-fundo);
    color: var(--cor-texto);
}

/* A sombra escura do .card (mais abaixo) não dá profundidade nenhuma sobre um fundo já escuro —
   acrescenta-se um rebordo claro e subtil à volta de cada cartão, para se destacar da página. */
html[data-theme="escuro"] .card{
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.card-header,
.card-footer{
    background-color: var(--cor-dropdown-hover);
    border-color: var(--cor-card-borda);
}

.modal-content{
    background-color: var(--cor-card-fundo);
    color: var(--cor-texto);
}

.modal-header,
.modal-footer{
    border-color: var(--cor-card-borda);
}

/* O "x" de fechar modais/alertas (Bootstrap) é um PNG inline escuro — invisível sobre um
   cabeçalho escuro, por isso inverte-se a cor no modo escuro. */
html[data-theme="escuro"] .btn-close{
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dropdown-menu{
    background-color: var(--cor-dropdown-fundo);
    color: var(--cor-texto);
    border-color: var(--cor-card-borda);
}

.dropdown-item{
    color: var(--cor-texto);
}

.dropdown-item:hover,
.dropdown-item:focus{
    background-color: var(--cor-dropdown-hover);
    color: var(--cor-texto);
}

/* Todos os menus suspensos (Gestão, idioma, quem está online, etc.) com fundo branco no modo
   escuro, a pedido do utilizador — consistente com os cartões/tabelas já alterados. */
html[data-theme="escuro"] .dropdown-menu{
    background-color: #fff;
    color: #212529;
}

html[data-theme="escuro"] .dropdown-item{
    color: #212529;
}

html[data-theme="escuro"] .dropdown-item:hover,
html[data-theme="escuro"] .dropdown-item:focus{
    background-color: #f8f9fa;
    color: #212529;
}

.dropdown-item.disabled,
.dropdown-item:disabled{
    color: var(--cor-texto-muted);
}

.form-control,
.form-select{
    background-color: var(--cor-input-fundo);
    color: var(--cor-texto);
    border-color: var(--cor-input-borda);
}

.form-control:focus,
.form-select:focus{
    background-color: var(--cor-input-fundo);
    color: var(--cor-texto);
}

.form-control::placeholder{
    color: var(--cor-texto-muted);
}

.form-control:disabled,
.form-select:disabled{
    background-color: var(--cor-dropdown-hover);
}

/* No modo escuro, o fundo dos campos de escrita passa a usar o mesmo tom "papel" claro das
   listas imprimíveis (ver --cor-input-fundo) — por isso o texto tem de ficar escuro aqui,
   nunca var(--cor-texto) (pensado para fundos escuros, ficava ilegível sobre o papel). */
html[data-theme="escuro"] .form-control,
html[data-theme="escuro"] .form-select{
    color: #212529;
}

html[data-theme="escuro"] .form-control:focus,
html[data-theme="escuro"] .form-select:focus{
    color: #212529;
}

html[data-theme="escuro"] .form-control::placeholder{
    color: #6c757d;
}

/* O rótulo flutuante do Bootstrap (.form-floating, usado em login/registo/mudar password) não
   tem cor própria — herda var(--cor-texto) do .card à volta (quase branco), ilegível sobre o
   novo fundo "papel" claro dos campos. */
html[data-theme="escuro"] .form-floating > label{
    color: #6c757d;
}

/* Alguns campos .form-floating (ex: nota de receita/celebração) têm também um atributo
   "placeholder" igual ao rótulo flutuante — o Bootstrap já o escondia (cor transparente) para não
   aparecerem os dois sobrepostos, mas a regra acima (mais específica no modo escuro) acabava por
   reaparecer com ele por cima. Repõe-se aqui, só para estes campos. */
html[data-theme="escuro"] .form-floating > .form-control::placeholder{
    color: transparent;
}

.table{
    color: var(--cor-texto);
    border-color: var(--cor-tabela-borda);
}

.table > :not(caption) > * > *{
    border-bottom-color: var(--cor-tabela-borda);
    color: var(--cor-texto);
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
    background-color: var(--cor-tabela-stripe);
    color: var(--cor-texto);
}

.table-bordered,
.table-bordered > :not(caption) > *{
    border-color: var(--cor-tabela-borda);
}

/* No telemóvel e no tablet/pad, o texto das células normalmente quebra linha para caber no ecrã
   estreito, espremendo tudo lá dentro (botões sobrepostos, texto cortado). Em vez disso,
   impede-se a quebra de linha para a tabela crescer para o lado — o .table-responsive
   (Bootstrap) já trata do scroll horizontal, só precisava que a tabela ultrapassasse a largura
   do ecrã. */
@media (max-width: 991.98px){
    .table-responsive > table{
        white-space: nowrap;
    }
}

.list-group-item{
    background-color: var(--cor-card-fundo);
    color: var(--cor-texto);
    border-color: var(--cor-card-borda);
}

.badge.text-bg-light{
    background-color: var(--cor-dropdown-hover) !important;
    color: var(--cor-texto) !important;
}

/* Bolhas de mensagem do chat que não são minhas (ver public/js/chat.js e views/chat/*.php,
   classe "bg-white border" nas bolhas recebidas). */
#chat-messages .bg-white{
    background-color: var(--cor-bolha-fundo) !important;
    color: var(--cor-texto);
    border-color: var(--cor-bolha-borda) !important;
}

hr{
    border-color: var(--cor-card-borda);
    opacity: 1;
}

.confirm-modal{
    border: 3px solid var(--bs-primary);
    border-radius: 0.75rem;
}
.confirm-modal__logo{
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.card{
    border: none;
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
}

/* Cartões clicáveis do painel pessoal (ver views/dashboard/index.php) — o próprio cartão é
   um link para a página de gestão da secção, com um pequeno efeito ao passar o rato para
   ficar claro que é clicável. */
.dashboard-card{
    display: block;
    background-color: #f1f4ee;
    color: #212529;
    border: 3px solid var(--cor-marca-dourado);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* O fundo deste cartão é sempre claro, nos dois modos — por isso o texto/ícones/linhas lá
   dentro também ficam sempre em tom escuro fixo, nunca a clarear no modo escuro (ao contrário
   do resto da página, que sim). Sem isto, os ícones (sem cor própria, dentro de links com
   "text-reset") e as linhas <hr> entre sub-ligações ficavam claras de mais sobre este fundo. */
.dashboard-card .text-muted{
    color: #6c757d !important;
}

.dashboard-card hr{
    border-color: rgba(0, 0, 0, 0.15);
    opacity: 1;
}

.dashboard-card:hover,
.dashboard-card:focus{
    transform: translateY(-3px);
    box-shadow: 0 0.6rem 1.2rem rgba(10, 20, 15, 0.8);
}

.dashboard-card .card-title{
    color: var(--cor-verde-solido);
}

/* Variante de cartão do painel que agrupa duas ligações distintas (ex: "Gestão de Utilizadores"
   + "Autorizações dos Membros") em vez de ser, ele próprio, uma única ligação — por isso não
   "levanta" ao passar o rato; só cada sub-ligação dentro dele reage individualmente. */
.dashboard-card--group:hover,
.dashboard-card--group:focus{
    transform: none;
    box-shadow: none;
}

.dashboard-card__sublink{
    padding: 0.4rem;
    border-radius: 0.4rem;
    transition: background-color 0.15s ease;
}

.dashboard-card__sublink:hover,
.dashboard-card__sublink:focus{
    background-color: rgba(58, 106, 82, 0.1);
}

.dashboard-card__sublink-title{
    color: var(--cor-verde-solido);
}

.dropdown-item--painel{
    background-color: var(--cor-verde-solido);
    color: #fff;
}

.dropdown-item--painel:hover,
.dropdown-item--painel:focus{
    background-color: var(--cor-verde-solido);
    color: #fff;
}

/* Jogo do Galo — ver views/games/jogoDoGalo.php */
.galo-tabuleiro{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
}

.galo-casa{
    aspect-ratio: 1 / 1;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    background-color: #fff;
    border: 2px solid var(--bs-primary);
    border-radius: 0.5rem;
    color: var(--cor-verde-solido);
    box-shadow: 0 0.2rem 0.5rem rgba(10, 20, 15, 0.3);
}

.galo-casa:disabled{
    opacity: 1;
}

.galo-casa--vencedora{
    background-color: rgba(58, 106, 82, 0.2);
}

/* Mastermind — ver views/games/mastermind.php */
.mastermind-pino{
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(10, 20, 15, 0.2);
    box-shadow: inset 0 0.1rem 0.3rem rgba(255, 255, 255, 0.4), 0 0.15rem 0.3rem rgba(10, 20, 15, 0.3);
}

.mastermind-pino--sm{
    width: 32px;
    height: 32px;
}

.mastermind-pino--clicavel{
    cursor: pointer;
}

.mastermind-cor{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 0.15rem 0.3rem rgba(10, 20, 15, 0.3);
}

.mastermind-cor--ativa{
    border-color: var(--cor-marca-escuro);
}

/* Cada linha (a tentativa atual e cada linha do histórico) usa a mesma grelha de duas colunas
   de largura fixa — pinos | feedback — para as colunas ficarem sempre alinhadas verticalmente
   entre linhas, independentemente de quantos pinos de feedback (0 a 4) uma tentativa tem. */
.mastermind-linha{
    display: grid;
    grid-template-columns: 210px 70px;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.mastermind-linha__pinos{
    display: flex;
    gap: 0.5rem;
}

.mastermind-feedback{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 0.25rem;
    width: 50px;
    height: 100%;
}

.mastermind-feedback-pino{
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* Cor certa, no sítio certo. */
.mastermind-feedback-pino--verde{
    background-color: #198754;
}

/* Cor certa, no sítio errado. */
.mastermind-feedback-pino--vermelho{
    background-color: #dc3545;
}

/* Preenche as posições ainda sem correspondência, para mostrar sempre as NUM_PINOS bolinhas. */
.mastermind-feedback-pino--vazio{
    background-color: #fff;
    border: 1px solid #adb5bd;
}

.mastermind-tentativas{
    max-height: 340px;
    overflow-y: auto;
}

/* Damas — ver views/games/damas.php */
.damas-tabuleiro{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    max-width: 480px;
    border: 4px solid var(--cor-marca-escuro);
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.5);
}

.damas-casa{
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 8%;
}

.damas-casa--clara{
    background-color: #f1ead9;
}

.damas-casa--escura{
    background-color: #6b8f5a;
}

.damas-casa--selecionada{
    box-shadow: inset 0 0 0 3px var(--cor-marca-dourado);
}

.damas-casa--destino{
    box-shadow: inset 0 0 0 3px rgba(138, 102, 10, 0.6);
}

.damas-peca{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: inset 0 0.15rem 0.3rem rgba(255, 255, 255, 0.3), 0 0.2rem 0.4rem rgba(10, 20, 15, 0.5);
}

.damas-peca--preta{
    background-color: #212529;
    color: #ffd700;
    border: 2px solid #000;
}

.damas-peca--branca{
    background-color: #f8f9fa;
    color: var(--cor-marca-dourado);
    border: 2px solid #adb5bd;
}

/* Xadrez — ver views/games/xadrez.php */
.xadrez-tabuleiro-wrap{
    position: relative;
    max-width: 480px;
}

.xadrez-tabuleiro{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    border: 4px solid var(--cor-marca-escuro);
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.5);
}

.xadrez-casa{
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: min(7vw, 2.4rem);
    line-height: 1;
}

.xadrez-casa--clara{
    background-color: #f1ead9;
}

.xadrez-casa--escura{
    background-color: #6b8f5a;
}

.xadrez-casa--selecionada{
    box-shadow: inset 0 0 0 3px var(--cor-marca-dourado);
}

.xadrez-casa--destino{
    box-shadow: inset 0 0 0 3px rgba(138, 102, 10, 0.6);
}

.xadrez-peca{
    /* Alguns sistemas (nomeadamente o "Segoe UI Emoji" do Windows) desenham o peão preto
       (U+265F) como um símbolo a cores em vez de texto simples, o que ignora a cor do CSS —
       forçar uma fonte de símbolos "a preto e branco" e o modo de apresentação "text" evita
       essa substituição e garante que a cor abaixo é sempre respeitada. */
    font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif;
    font-variant-emoji: text;
}

.xadrez-peca--branca{
    color: #f8f9fa;
    text-shadow: -1px -1px 0 #212529, 1px -1px 0 #212529, -1px 1px 0 #212529, 1px 1px 0 #212529;
}

.xadrez-peca--preta{
    color: #212529;
}

.xadrez-promocao{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(241, 244, 238, 0.95);
    border-radius: 0.4rem;
}

.xadrez-promocao-btn{
    font-size: 1.75rem;
    line-height: 1;
    width: 56px;
    height: 56px;
}

/* Jogo da Forca — ver views/games/forca.php */
.forca-desenho{
    width: 160px;
    height: 180px;
}

.forca-traco{
    stroke: var(--cor-marca-escuro);
    stroke-width: 4;
    stroke-linecap: round;
}

.forca-parte{
    stroke: #dc3545;
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

circle.forca-parte{
    fill: none;
}

.forca-parte--visivel{
    opacity: 1;
}

.forca-palavra{
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.35rem;
    color: var(--cor-marca-escuro);
}

.forca-teclado{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: 480px;
}

.forca-letra{
    width: 38px;
    height: 38px;
    border-radius: 0.4rem;
    border: 2px solid var(--bs-primary);
    background-color: #fff;
    color: var(--cor-verde-solido);
    font-weight: 700;
    box-shadow: 0 0.15rem 0.3rem rgba(10, 20, 15, 0.3);
}

.forca-letra:disabled{
    opacity: 0.6;
}

.forca-letra--certa{
    background-color: rgba(58, 106, 82, 0.25);
}

.forca-letra--errada{
    background-color: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
}

/* Pac-Man — ver views/games/pacman.php */
.pacman-canvas{
    display: block;
    max-width: 100%;
    height: auto;
    background-color: #101820;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.5);
}

.pacman-dpad{
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 48px);
    gap: 0.3rem;
    width: max-content;
}

.pacman-dpad-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-primary);
    border-radius: 0.4rem;
    background-color: #fff;
    color: var(--cor-verde-solido);
    font-size: 1.2rem;
    box-shadow: 0 0.15rem 0.3rem rgba(10, 20, 15, 0.3);
}

.pacman-dpad-btn--cima{ grid-column: 2; grid-row: 1; }
.pacman-dpad-btn--esquerda{ grid-column: 1; grid-row: 2; }
.pacman-dpad-btn--direita{ grid-column: 3; grid-row: 2; }
.pacman-dpad-btn--baixo{ grid-column: 2; grid-row: 2; }

/* Tetris — ver views/games/tetris.php */
.tetris-canvas{
    display: block;
    max-width: 100%;
    height: auto;
    background-color: #263a4e;
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.5);
}

.tetris-proxima-canvas{
    display: block;
    margin: 0 auto;
    background-color: #263a4e;
    border-radius: 0.4rem;
}

.tetris-dpad{
    display: grid;
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(2, 48px);
    gap: 0.3rem;
    width: max-content;
}

.tetris-dpad-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bs-primary);
    border-radius: 0.4rem;
    background-color: #fff;
    color: var(--cor-verde-solido);
    font-size: 1.2rem;
    box-shadow: 0 0.15rem 0.3rem rgba(10, 20, 15, 0.3);
}

.tetris-dpad-btn--cima{ grid-column: 2; grid-row: 1; }
.tetris-dpad-btn--esquerda{ grid-column: 1; grid-row: 2; }
.tetris-dpad-btn--direita{ grid-column: 3; grid-row: 2; }
.tetris-dpad-btn--baixo{ grid-column: 2; grid-row: 2; }

/* No pad (entre o telemóvel e o ecrã do PC), os tabuleiros abaixo — pensados para caber numa
   coluna estreita (telemóvel) ou esticarem até ao tamanho de uma coluna larga (PC) — acabavam
   por ocupar quase o ecrã todo, já que a coluna onde vivem só estreita a partir do "lg" (ver
   views/games/*.php). Aqui limita-se o tamanho máximo só nesta gama de larguras. */
@media (min-width: 576px) and (max-width: 991.98px){
    .galo-tabuleiro{
        max-width: 260px;
    }

    .damas-tabuleiro,
    .xadrez-tabuleiro-wrap{
        max-width: 340px;
    }

    .pacman-canvas,
    .tetris-canvas{
        max-width: 280px;
    }
}

/* Monopólio (lite) — ver views/games/monopolio.php */
.monopolio-tabuleiro-wrap{
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.monopolio-tabuleiro{
    display: grid;
    grid-template-columns: repeat(11, 68px);
    grid-template-rows: repeat(11, 68px);
    gap: 2px;
    width: max-content;
    margin: 0 auto;
    background-color: #0a3d24;
    padding: 4px;
    border-radius: 0.5rem;
}

.monopolio-casa{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 0.25rem;
    padding: 3px 2px;
    font-size: 0.52rem;
    line-height: 1.05;
    text-align: center;
    overflow: hidden;
}

.monopolio-casa--possuida{
    border-width: 3px;
}

.monopolio-casa-cor{
    width: 100%;
    height: 9px;
    border-radius: 2px;
    margin-bottom: 2px;
    flex-shrink: 0;
}

.monopolio-casa-nome{
    font-weight: 600;
    color: #2a2a2a;
}

.monopolio-casa-preco{
    color: #6c757d;
    font-size: 0.48rem;
}

.monopolio-casa-tokens{
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
    margin-top: auto;
    padding-top: 2px;
}

.monopolio-centro{
    position: relative;
    grid-row: 2 / 11;
    grid-column: 2 / 11;
    background-color: #eef5ee;
    border-radius: 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    text-align: center;
}

.monopolio-dados-visual{
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    font-size: 2.4rem;
    line-height: 1;
}

.monopolio-dado{
    display: inline-block;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", sans-serif;
    font-variant-emoji: text;
    color: var(--cor-verde-solido);
}

.monopolio-dado--a-rolar{
    animation: monopolio-rolar-dado 0.5s ease-out;
}

@keyframes monopolio-rolar-dado{
    0%{ transform: rotate(0deg) scale(0.5); }
    60%{ transform: rotate(250deg) scale(1.2); }
    100%{ transform: rotate(360deg) scale(1); }
}

.monopolio-carta{
    position: absolute;
    inset: 8px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #fffdf5;
    border: 3px solid var(--cor-marca-dourado);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    opacity: 0;
    box-shadow: 0 0.4rem 1rem rgba(10, 20, 15, 0.4);
    transition: opacity 0.25s ease;
}

.monopolio-carta--visivel{
    opacity: 1;
}

.monopolio-carta--sorte{
    border-color: #fd7e14;
}

.monopolio-carta--cofre{
    border-color: #0d6efd;
}

.monopolio-carta-tipo{
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--cor-marca-dourado);
}

.monopolio-carta-texto{
    font-size: 0.95rem;
    color: #2a2a2a;
}

.monopolio-token{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.monopolio-token--pequeno{
    width: 8px;
    height: 8px;
}

.monopolio-jogadores{
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 320px;
}

.monopolio-setup-jogadores{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 280px;
}

.monopolio-setup-linha{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.monopolio-jogador-linha{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    font-size: 0.8rem;
}

.monopolio-jogador-linha--atual{
    font-weight: 700;
    color: var(--cor-marca-escuro);
}

.monopolio-jogador-linha--falido{
    text-decoration: line-through;
    opacity: 0.5;
}

.monopolio-log{
    font-size: 0.7rem;
    color: #5f5d55;
    max-height: 90px;
    overflow-y: auto;
    width: 100%;
}

.form-control,
.form-select{
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
}

/* O botão nativo dos inputs de ficheiro ("Escolher ficheiro") pode ficar com letra maior do
   que os campos de texto ao lado, porque "-webkit-appearance: button" deixa o motor do browser
   desenhar o botão com o estilo/tipo de letra nativo do sistema operativo em vez de respeitar
   "font: inherit" (já definido pelo Bootstrap) — tirar o "appearance" nativo obriga o browser a
   usar mesmo o tamanho de letra do CSS (ver formulários de tema em views/courses/updateModule.php). */
.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button{
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.list-group{
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
}

.list-group-item-action:hover,
.list-group-item-action:focus{
    background-color: var(--cor-verde-solido);
    color: #fff;
}

#chat-messages{
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
}

/* Cada mensagem (ver views/chat/conversation.php e chat/index.php): sem isto, a coluna do nome/
   hora/balão (irmã do avatar, num flex) não encolhe abaixo do seu conteúdo e acaba por sair da
   caixa de conversação em ecrãs estreitos — limita-se a sua largura e deixa-se o texto quebrar
   linha lá dentro. */
.chat-message{
    max-width: 100%;
}

.chat-message > div{
    min-width: 0;
    max-width: calc(100% - 3rem);
}

.chat-message .small.text-muted{
    overflow-wrap: anywhere;
}

.chat-message .rounded{
    overflow-wrap: anywhere;
}

/* Imagem (ex: print screen) anexada a uma mensagem de chat — ver public/js/chat.js e
   views/chat/index.php/conversation.php. */
.chat-mensagem-imagem{
    max-width: 220px;
    max-height: 220px;
    border-radius: 0.4rem;
    cursor: zoom-in;
}

/* Pré-visualização da imagem escolhida/colada, antes de enviar. */
.chat-imagem-preview__img{
    max-height: 70px;
    border-radius: 0.3rem;
    border: 2px solid var(--cor-marca-dourado);
}

.bible-pdf-box{
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
}


h1{
    color: var(--cor-marca-escuro);
}

.avatar-circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-avatar-preset{
    box-shadow: 0 0.2rem 0.35rem rgba(10, 20, 15, 0.35), 0 0.4rem 0.8rem rgba(10, 20, 15, 0.25);
    transition: transform 0.15s ease;
}

.profile-avatar-preset:hover{
    transform: translateY(-2px);
}

.avatar-circle--fallback{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-verde-solido);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 0.2rem 0.35rem rgba(10, 20, 15, 0.45), 0 0.5rem 1rem rgba(10, 20, 15, 0.35);
}

.avatar-circle--lg{
    width: 120px;
    height: 120px;
    font-size: 2.5rem;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.3), 0 0.6rem 1.2rem rgba(10, 20, 15, 0.25);
}

.avatar-circle--sm{
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
}

.avatar-circle--md{
    width: 80px;
    height: 80px;
    font-size: 1.8rem;
    box-shadow: 0 0.25rem 0.4rem rgba(10, 20, 15, 0.5), 0 0.5rem 1rem rgba(10, 20, 15, 0.35);
}

/* Cartões da secção "Próximos" (ver renderUpcomingCard() em views/events/index.php) — rácio
   fixo retangular (mais alto que largo) em vez de "h-100" (que os esticava/achatava todos à
   altura do mais alto da mesma linha, incluindo o cartão da estação, ficando quadrados). */
.upcoming-card{
    aspect-ratio: 3 / 5;
    max-width: 150px;
    margin: 0 auto;
    border: 3px solid var(--cor-dourado-solido);
}

.upcoming-card .card-body{
    height: 100%;
    justify-content: flex-start;
}

/* Cartões de "Próximos" (celebrações/feriados, ver views/events/index.php) — fundo branco igual
   ao do modo claro, a pedido do utilizador, com o texto escuro a condizer. */
.upcoming-card,
.feriados-pais-card{
    background-color: #f1f4ee;
    border: 3px solid var(--cor-dourado-solido);
}

html[data-theme="escuro"] .upcoming-card{
    background-color: #f1f4ee;
    color: #212529;
}

html[data-theme="escuro"] .feriados-pais-card{
    background-color: #f1f4ee;
    color: #212529;
}

html[data-theme="escuro"] .feriados-pais-card .text-muted{
    color: #6c757d !important;
}

html[data-theme="escuro"] .upcoming-card .text-muted{
    color: #6c757d !important;
}

/* Tabela "Celebrações da família" (ver views/events/index.php) — mesmo fundo branco de cada
   linha, igual ao modo claro, a pedido do utilizador. */
.eventos-familia-tabela{
    background-color: #f1f4ee;
    border: 3px solid var(--cor-dourado-solido);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.7rem 1.5rem rgba(10, 20, 15, 0.35);
}

.eventos-familia-tabela > :not(caption) > * > *,
html[data-theme="escuro"] .eventos-familia-tabela > :not(caption) > * > *{
    background-color: #f1f4ee;
}

html[data-theme="escuro"] .eventos-familia-tabela > :not(caption) > * > *{
    color: #212529;
    border-bottom-color: #dee2e6;
}

html[data-theme="escuro"] .eventos-familia-tabela .link-body-emphasis{
    color: var(--cor-verde-solido) !important;
}

html[data-theme="escuro"] .eventos-familia-tabela .text-muted{
    color: #6c757d !important;
}

/* Cards da lista de receitas: mesmo efeito dos meses do calendário — ao passar o cursor sobem um
   pouco e ganham sombra (só com rato, e desligado para quem pede menos animação). */
.filme-biblico-card{
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Cartões de música/vídeos (ver views/biblemedia/lista.php) — mesmo fundo branco dos outros,
   com texto escuro a condizer (!important porque é um link com "text-reset", que já tem
   color:inherit!important do Bootstrap). */
html[data-theme="escuro"] .filme-biblico-card{
    background-color: #fff !important;
    color: #212529 !important;
}

html[data-theme="escuro"] .filme-biblico-card .text-muted{
    color: #6c757d !important;
}

@media (hover: hover){
    .filme-biblico-card:hover{
        transform: translateY(-4px);
        box-shadow: 0 0.6rem 1.2rem rgba(10, 20, 15, 0.3);
    }
}

@media (prefers-reduced-motion: reduce){
    .filme-biblico-card{
        transition: none;
    }

    .filme-biblico-card:hover{
        transform: none;
    }
}

/* No telemóvel e no pad (ver views/biblemedia/lista.php — 2 ou 4 colunas em vez de 1 ou 3, para
   os cartões ocuparem menos espaço no ecrã), o título/descrição pensados para cartões bem mais
   largos ficavam desproporcionados — letra mais pequena e menos espaço à volta para caberem bem
   num cartão mais estreito. */
@media (max-width: 991.98px){
    .filme-biblico-card .card-body{
        padding: 0.75rem;
    }

    .filme-biblico-card .card-title{
        font-size: 0.95rem;
    }

    .filme-biblico-card .badge{
        font-size: 0.65rem;
    }
}

/* Cartões das receitas — moldura dourada, com o mesmo efeito de profundidade ao passar o rato
   dos cartões da página inicial (.home-feature-card): sombra leve + um pequeno levantamento. */
/* Fundo branco/bege fixo, igual nos dois modos (não segue a cor geral dos outros cartões) — por
   isso o texto também fica sempre escuro aqui, nunca a clarear no modo escuro. */
.recipe-card{
    background-color: #fdfbf6;
    color: #212529;
    border: 3px solid var(--cor-marca-dourado);
    box-shadow: 0 0.7rem 1.5rem rgba(10, 20, 15, 0.35);
    transition: box-shadow 0.15s ease;
}

html[data-theme="escuro"] .recipe-card .text-muted{
    color: #6c757d !important;
}

/* Título de cada categoria na lista de receitas (ver views/recipes/index.php) — barra em
   largura total, a condizer com o cabeçalho de "Os meus compromissos"
   (.calendar-compromissos-board .card-header), em vez de um título solto sem destaque. */
.recipe-categoria-titulo{
    background-color: var(--cor-verde-solido);
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 0.5rem;
    border-left: 5px solid var(--cor-dourado-solido);
}

/* Esta barra fica na página (fundo escuro no modo escuro), não num cartão sempre claro — por
   isso aqui sim, ao contrário de outros sítios, faz sentido clarear no modo escuro para se
   destacar do fundo à volta. */
html[data-theme="escuro"] .recipe-categoria-titulo{
    background-color: var(--bs-primary);
}

/* Botões de navegação rápida por categoria (ver views/recipes/index.php) — mesmo princípio: no
   fundo escuro da página, o verde fixo dos outros botões "outline-dark" fica escuro de mais. */
html[data-theme="escuro"] .recipe-categoria-nav{
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
}

/* Mesmo princípio — cartão de destaque dos jogos e separadores do dicionário, ambos direto
   sobre o fundo da página (não dentro de um cartão sempre claro), por isso clareiam no escuro. */
html[data-theme="escuro"] .jogo-page-card--verde{
    background-color: var(--bs-primary);
}

html[data-theme="escuro"] .dicionario-tabs .nav-link.active{
    background-color: var(--bs-primary);
}

.recipe-card:hover{
    box-shadow: 0 1.3rem 2.5rem rgba(10, 20, 15, 0.45);
}

/* Moldura dourada à volta das tabelas de Medições de Saúde (Tensão Arterial, Glicemia, Exames e
   Análises — ver views/medicoes/*.php), a condizer com os cartões (.recipe-card,
   .home-feature-card). Aplicada à própria <table> (não ao .table-responsive à volta) — como
   .table-responsive já tem "overflow-x:auto" para o scroll horizontal no telemóvel/pad, pôr aqui
   também "overflow:hidden" no mesmo elemento anulava esse scroll; na tabela já não há esse
   conflito, e o "overflow:hidden" continua a cortar os cantos da tabela para dentro dos
   arredondados desta moldura. */
.medicoes-tabela-frame{
    border: 3px solid var(--cor-marca-dourado);
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: var(--cor-card-fundo);
}

.medicoes-tabela-frame thead th{
    color: var(--bs-primary);
}

/* Etiqueta "Filmes Bíblicos" na página dos filmes (ver views/movies/index.php) e cartões da
   página dos filmes bíblicos (ver views/biblefilms/*.php) */
.tag-filmes-biblicos{
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.95rem;
    border-radius: 2rem;
    background-color: var(--cor-dourado-solido);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 0.15rem 0.4rem rgba(10, 20, 15, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.tag-filmes-biblicos:hover,
.tag-filmes-biblicos:focus-visible{
    background-color: #6f5208;
    color: #fff;
    transform: translateY(-1px);
}

.filme-biblico-card__capa{
    overflow: hidden;
    border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
    background-color: #1c2b24;
}

.filme-biblico-card__capa img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botão de "play" sobre a miniatura */
.filme-biblico-card__play{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.2rem;
    height: 3.2rem;
    margin: -1.6rem 0 0 -1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(28, 43, 36, 0.75);
    color: #fff;
    font-size: 1.8rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.filme-biblico-card:hover .filme-biblico-card__play{
    background-color: var(--cor-dourado-solido);
    transform: scale(1.1);
}

.filme-biblico-leitor{
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.35), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
    background-color: #000;
}

/* Etiqueta da categoria da receita (lista e página da receita), uma cor por categoria — todas com
   contraste suficiente para o texto branco. A cor base serve de reserva para categorias novas. */
.recipe-cat{
    background-color: #5a6470;
    color: #fff;
}

.recipe-cat--entradas{ background-color: var(--cor-verde-solido); }
.recipe-cat--principais{ background-color: #b5472f; }
.recipe-cat--sopas{ background-color: var(--cor-dourado-solido); }
.recipe-cat--sobremesas{ background-color: #b02a6b; }
.recipe-cat--bebidas{ background-color: #1f6f8b; }
.recipe-cat--outros{ background-color: #5a6470; }

/* Ao passar o cursor, o cartão inclina-se 1° (como um cartão pousado numa mesa), sobe um pouco e
   ganha sombra; os cartões pares inclinam-se para o outro lado, para não parecer tudo igual. Só em
   aparelhos com rato e desligado para quem pede menos animação. */
.upcoming-card{
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover){
    .upcoming-card:hover{
        transform: translateY(-3px) rotate(-1deg);
        box-shadow: 0 0.5rem 1rem rgba(10, 20, 15, 0.3);
    }

    .col:nth-child(even) > .upcoming-card:hover{
        transform: translateY(-3px) rotate(1deg);
    }
}

@media (prefers-reduced-motion: reduce){
    .upcoming-card{
        transition: none;
    }

    .upcoming-card:hover,
    .col:nth-child(even) > .upcoming-card:hover{
        transform: none;
    }
}

/* Cards de atalho da página inicial — mesmo formato retangular (mais alto do que largo) das
   cards de "Próximos 60 dias" em Celebrações, em vez de esticarem à largura da coluna. */
.home-feature-card{
    aspect-ratio: 3 / 4;
    max-width: 160px;
    margin: 0 auto;
    border: 3px solid var(--cor-marca-dourado);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* Cartões de atalho da página inicial — mesmo fundo branco do modo claro, a pedido do
   utilizador, com o texto escuro a condizer. */
html[data-theme="escuro"] .home-feature-card{
    background-color: #fff;
    color: #212529 !important;
}

html[data-theme="escuro"] .home-feature-card .text-muted{
    color: #6c757d !important;
}

.home-feature-card:hover{
    box-shadow: 0 0.5rem 1rem rgba(10, 20, 15, 0.2);
    transform: translateY(-2px);
}

.home-feature-card .card-body{
    height: 100% !important;
    justify-content: flex-start !important;
    padding-top: 1.75rem;
    gap: 2.5rem !important;
}

.home-feature-card__icon{
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
}

/* Subtítulo opcional por baixo do título de cada cartão (ver dashboard.conteudoInicial) — junto
   ao título (não ao gap grande entre o ícone e o texto, ver .home-feature-card .card-body). */
.home-feature-card__subtitulo{
    font-size: 0.7rem;
    line-height: 1.2;
    margin-top: 0.25rem;
}

/* Página de erro genérica (404/403/500, ver core/ErrorPage.php) — ícone grande e colorido em
   vez de uma imagem, para não depender de ficheiros externos. */
.error-page__icone{
    display: block;
    font-size: 5rem;
    color: var(--cor-marca-dourado);
}

.estacao-card{
    background-color: #f1f4ee;
    border: 2px solid var(--bs-primary);
}

/* Empurra o cartão da estação para a ponta direita da linha (margin-left:auto num item flex
   ocupa todo o espaço sobrante antes dele) — assim fica alinhado com a coluna da data, à
   direita, tal como na tabela de "Celebrações da família" mais abaixo (ver views/events/index.php). */
.estacao-card-col{
    margin-left: auto;
}

.estacao-card__icone{
    font-size: 1.8rem;
    color: var(--cor-dourado-solido);
    filter: drop-shadow(0 0.2rem 0.35rem rgba(10, 20, 15, 0.4));
}

.estacao-card__imagem{
    width: 80%;
    height: 110px;
    border-radius: 0.4rem;
    object-fit: fill;
    filter: drop-shadow(0 0.15rem 0.3rem rgba(10, 20, 15, 0.4));
}

/* Etiqueta "Parabéns!" que aparece ao lado de uma celebração no dia em que ela acontece (ver
   public/js/fogos.js e views/events/index.php), a flutuar suavemente. */
.parabens-etiqueta{
    display: inline-block;
    padding: 0.15rem 0.7rem;
    border-radius: 2rem;
    background-color: #f6e7b4;
    border: 1px solid #d9b94a;
    color: #1f4a34;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
    animation: parabens-flutuar 2s ease-in-out infinite alternate;
}

.parabens-etiqueta[hidden]{
    display: none;
}

@keyframes parabens-flutuar{
    from{ transform: translateY(2px); }
    to{ transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce){
    .parabens-etiqueta{
        animation: none;
    }
}

.event-data-badge{
    color: var(--cor-marca-escuro);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4em 0.7em;
    box-shadow: 0 0.2rem 0.35rem rgba(10, 20, 15, 0.35), 0 0.4rem 0.8rem rgba(10, 20, 15, 0.25);
}

/* No modo escuro, o truque do "multiply" abaixo deixa de funcionar (depende de um fundo branco
   por trás — contra um fundo escuro, a imagem toda escurece e o balão deixa de se ver). Em vez
   disso: inverte-se a imagem (o fundo branco opaco fica preto) e usa-se "screen" — o oposto do
   "multiply", que ignora o preto em vez do branco — e uma cadeia de filtros (sepia + saturação +
   rotação de matiz) pinta o balão todo de dourado, a condizer com o resto da marca. */
html[data-theme="escuro"] .event-page-balloon-overlap{
    mix-blend-mode: screen;
    filter: invert(1) sepia(1) saturate(6) hue-rotate(8deg) brightness(0.9);
}

.event-page-balloon-overlap{
    position: absolute;
    top: 4rem;
    right: 4rem;
    width: 280px;
    height: 760px;
    object-fit: contain;
    object-position: top;
    pointer-events: none;
    z-index: 1;
    /* balloon.gif tem fundo branco opaco (sem canal alfa real) — "multiply" ignora o branco
       (255 * qualquer cor / 255 = a própria cor) contra o fundo branco da página, deixando só
       o balão/fio visíveis, sem tapar o texto por baixo com um quadrado branco. */
    mix-blend-mode: multiply;
}

.movie-plataforma-logo{
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 0.35rem;
}

/* O logótipo da Disney+ é um wordmark largo e baixo (não um ícone quadrado como o da Netflix/New
   Faith), por isso fica visualmente muito mais pequeno dentro da mesma caixa 48x48 — alarga-se a
   caixa só para este para pesar visualmente o mesmo que os outros dois. */
.movie-plataforma-logo--disney{
    width: 84px;
    height: 48px;
}

/* O logótipo da Disney+ é escrito a azul-escuro sobre fundo transparente — quase invisível
   sobre o fundo escuro da página no modo noturno, por isso ganha aqui um fundo branco. */
html[data-theme="escuro"] .movie-plataforma-logo--disney{
    background-color: #fff;
    padding: 0.2rem 0.4rem;
}

.games-page-icon{
    width: 36px;
    height: 36px;
}

/* Card que envolve o tabuleiro/jogo em si nas páginas de cada jogo (ver views/games/*.php),
   para compor melhor a página e dar profundidade — mesma sombra de duas camadas usada noutros
   elementos de destaque da app (banner, iframe do leitor de PDF, etc.). */
.jogo-page-card{
    max-width: 480px;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.3), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
}

.jogo-page-card--verde{
    background-color: var(--cor-verde-solido);
    color: #fff;
}

.event-icon{
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
    border: 3px solid var(--cor-marca-dourado);
    box-shadow: 0 0.2rem 0.35rem rgba(10, 20, 15, 0.45), 0 0.5rem 1rem rgba(10, 20, 15, 0.35);
}

.avatar-status-wrap{
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.status-dot{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid #fff;
}

.status-dot--online{
    background-color: #2f9e44;
}

.status-dot--offline{
    background-color: #c0392b;
}

/* Dropdown "Quem está online" e aviso de mensagem nova no menu (ver
   views/includes/navigation.php, mantidos atualizados por public/js/presence.js). */
.nav-online-avatar{
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
}

.nav-online-dropdown{
    max-height: 320px;
    overflow-y: auto;
    min-width: 220px;
}

/* Dropdown "Quem está online" — mesmo fundo branco dos outros, com texto escuro a condizer. */
html[data-theme="escuro"] .nav-online-dropdown{
    background-color: #fff;
}

html[data-theme="escuro"] .nav-online-dropdown .dropdown-item-text,
html[data-theme="escuro"] .nav-online-dropdown .dropdown-header{
    color: #212529 !important;
}

/* Ícone de "quem está online" no menu: verde quando alguém (além de mim) está online, vermelho
   quando ninguém está — convite visual para abrir o dropdown. */
.nav-online-icon--online{
    color: #2f9e44;
}

.nav-online-icon--offline{
    color: #c0392b;
}

.nav-unread-dot{
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #dc3545;
    margin-left: 0.3rem;
    vertical-align: top;
}

.hero-header__title{
    color: var(--cor-verde-solido);
}

/* O nome da app no banner (só para quem não tem sessão): menos negrito ("fw-bolder" do Bootstrap
   é !important) e um pouco mais pequeno do que o "display-4" por omissão (3.5rem). */
.hero-header__title.display-4{
    font-weight: 500 !important;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
}

/* "Árvore da Vida", em verde, sem a frase de boas-vindas */
.bemvindo-linha1{
    display: block;
    color: var(--cor-verde-solido);
}

/* "Family App", por baixo, com outra cor e um pouco mais pequeno */
.bemvindo-linha2{
    display: block;
    font-size: 0.6em;
    color: var(--cor-dourado-solido);
}

/* "Family App", por baixo de "Árvore da Vida", numa linha própria e mais pequena */
.hero-header__title-linha2{
    display: block;
    font-size: 0.4em;
    font-weight: 400;
    opacity: 0.85;
}

.tipo-picker input[type="radio"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tipo-picker label{
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 76px;
    padding: 6px 4px;
    border-radius: 12px;
    border: 2px solid transparent;
    text-align: center;
}

.tipo-picker input[type="radio"]:checked + label{
    border-color: var(--bs-primary);
    background-color: rgba(58, 106, 82, 0.08);
}

/* Todos os botões da app seguem o mesmo padrão, independentemente da variante Bootstrap usada em
   cada view (sólida ou "outline"): verde sólido com letra branca por omissão, invertendo para
   fundo branco com letra verde ao sobrevoar/premir. "Eliminar" e outras ações destrutivas seguem
   o mesmo padrão, mas a dourado em vez de verde, para se distinguirem à primeira vista. */
.btn-primary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cor-verde-solido);
    --bs-btn-border-color: var(--cor-verde-solido);
    --bs-btn-hover-color: var(--cor-verde-solido);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--cor-verde-solido);
    --bs-btn-active-color: var(--cor-verde-solido);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--cor-verde-solido);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cor-verde-solido);
    --bs-btn-disabled-border-color: var(--cor-verde-solido);
    --bs-btn-focus-shadow-rgb: 42, 77, 60;
}

.btn-danger,
.btn-outline-danger{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cor-dourado-solido);
    --bs-btn-border-color: var(--cor-dourado-solido);
    --bs-btn-hover-color: var(--cor-dourado-solido);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--cor-dourado-solido);
    --bs-btn-active-color: var(--cor-dourado-solido);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--cor-dourado-solido);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cor-dourado-solido);
    --bs-btn-disabled-border-color: var(--cor-dourado-solido);
    --bs-btn-focus-shadow-rgb: 138, 102, 10;
}

.text-bg-primary{
    background-color: var(--cor-verde-solido) !important;
}

.home-dashboard .card-title{
    color: var(--cor-marca-dourado);
}

/* Carrossel de cartões (reutilizável — página inicial e outras listagens): grupos por slide, com
   setas afastadas para fora dos cartões (não sobrepostas) e os pontinhos por baixo. */
.card-carousel{
    padding: 0 2rem 2.5rem;
}

@media (min-width: 768px){
    .card-carousel{
        padding: 0 3rem 2.5rem;
    }
}

.card-carousel .carousel-control-prev,
.card-carousel .carousel-control-next{
    width: 1.75rem;
    opacity: 0.6;
}

@media (min-width: 768px){
    .card-carousel .carousel-control-prev,
    .card-carousel .carousel-control-next{
        width: 2.5rem;
    }
}

.card-carousel .carousel-control-prev:hover,
.card-carousel .carousel-control-next:hover{
    opacity: 1;
}

.card-carousel .carousel-indicators{
    position: static;
    margin-top: 1.5rem;
}

.card-carousel .carousel-indicators [data-bs-target]{
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

/* Em ecrãs grandes há espaço de sobra (só 3 cartões por slide) — aumenta-os um pouco, só no
   carrossel da página inicial (não afeta os hubs da Bíblia/Saúde, que partilham a mesma classe
   .home-feature-card mas mostram mais cartões de uma vez). */
@media (min-width: 992px){
    .home-carousel .home-feature-card{
        max-width: 220px;
    }

    .home-carousel .home-feature-card__icon{
        width: 72px;
        height: 72px;
        font-size: 1.8rem;
    }

    .home-carousel .home-feature-card .fw-semibold.small{
        font-size: 1rem;
    }
}

.bible-section-title{
    color: var(--cor-marca-dourado);
}

.lists-christmas-rose{
    display: block;
    width: 280px;
    max-width: 90%;
    height: auto;
    margin: 10rem auto 0;
    filter: drop-shadow(0 0.6rem 1rem rgba(10, 20, 15, 0.55)) drop-shadow(0 1.5rem 2rem rgba(10, 20, 15, 0.35));
}

.footer-app{
    background-color: var(--cor-verde-solido);
}

.footer-dourado{
    color: #d4af37;
    font-weight: 500;
}

/* Cartaz no formato 2:3 usado pelas plataformas de streaming (Netflix, Disney+, etc.) —
   ver views/movies/index.php. */
.movie-poster{
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: #f1f1ee;
    box-shadow: 0 0.25rem 0.45rem rgba(10, 20, 15, 0.45), 0 0.6rem 1.3rem rgba(10, 20, 15, 0.4);
}

.movie-poster--placeholder{
    display: flex;
}

.movie-poster--detalhe{
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 0.8rem rgba(10, 20, 15, 0.5), 0 1.2rem 2.4rem rgba(10, 20, 15, 0.45);
}

/* Abaixo do "md" (ver views/movies/movie.php), a coluna do cartaz deixa de ser 1/3 da linha
   (.col-md-4) e passa à largura toda — no pad, isso faz o cartaz ocupar a página inteira (a
   imagem acompanha sempre a largura da coluna). Limita-se aqui a quase metade, centrado. */
@media (max-width: 767.98px){
    .movie-poster--detalhe{
        max-width: 55%;
        margin: 0 auto;
        display: block;
    }
}

/* Uma linha por plataforma, com scroll horizontal (estilo Netflix) em vez de grelha —
   ver views/movies/index.php. */
.movie-row{
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    /* Folga à volta dos posters para o zoom do "hover" (ver .movie-tile abaixo) não ser cortado
       pela linha, que tem scroll; as margens negativas compensam-na para o alinhamento não mudar. */
    padding: 0.9rem 0.6rem 1.1rem;
    margin: -0.6rem -0.6rem 0;
    scroll-padding-inline: 0.6rem;
    scroll-snap-type: x proximity;
}

.movie-tile{
    flex: 0 0 150px;
    scroll-snap-align: start;
}

/* Efeito nos posters, diferente do dos cartões (que sobem): ao passar o cursor o poster aumenta
   um pouco, como na Netflix, e ganha uma sombra mais funda. Só com rato e desligado para quem
   pede menos animação. */
.movie-tile .movie-poster{
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover){
    .movie-tile a:hover .movie-poster{
        transform: scale(1.08);
        box-shadow: 0 0.6rem 1rem rgba(10, 20, 15, 0.55), 0 1.4rem 2.4rem rgba(10, 20, 15, 0.45);
    }
}

@media (prefers-reduced-motion: reduce){
    .movie-tile .movie-poster{
        transition: none;
    }

    .movie-tile a:hover .movie-poster{
        transform: none;
    }
}

.movie-tile__info{
    margin-top: 0.5rem;
}

.movie-tile__title{
    font-weight: 600;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-tile__title{
    font-size: 0.9rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Logótipo redondo e pequeno ao lado do título, nos cartões da listagem (ver
   views/courses/index.php) — diferente da imagem grande "course-tile__image" usada na
   página de detalhe de cada curso. */
.course-tile__logo{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0.2rem 0.35rem rgba(10, 20, 15, 0.4);
}

.course-tile__logo--placeholder{
    display: flex;
    font-size: 1.6rem;
}

/* Para imagens retangulares (ex: banners com texto) em vez de emblemas redondos — mantém a
   forma original, só com os cantos arredondados, em vez de recortar num círculo (ver
   "imagem_redonda" em bible_courses e views/courses/*.php). */
.course-tile__logo--quadrada{
    border-radius: 0.5rem;
}

/* Uma linha por categoria, com scroll horizontal (estilo Netflix), igual a .movie-row —
   ver views/courses/index.php. */
.course-row{
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
}

.course-tile{
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.course-tile-card{
    box-shadow: 0 0.15rem 0.3rem rgba(10, 20, 15, 0.25);
}

/* Cartões de cursos (ver views/courses/index.php) — mesmo fundo branco dos outros, com texto
   escuro a condizer (!important por ser um link com "text-reset" do Bootstrap). */
html[data-theme="escuro"] .course-tile-card{
    background-color: #fff !important;
    color: #212529 !important;
}

.course-tile__info{
    margin-top: 0.5rem;
}

.course-module-card{
    box-shadow: 0 0.15rem 0.3rem rgba(10, 20, 15, 0.25);
}

/* Cartões de módulos (ver views/courses/course.php) — mesmo fundo branco dos outros, com texto
   escuro a condizer. */
html[data-theme="escuro"] .course-module-card{
    background-color: #fff;
    color: #212529;
}

html[data-theme="escuro"] .course-module-card .text-muted{
    color: #6c757d !important;
}

/* Leitor de módulo — PDF (iframe, usa o leitor nativo do browser) + notas pessoais ao lado,
   ambos com a mesma altura fixa — ver views/courses/readModule.php. */
.module-reader{
    height: calc(100vh - 220px);
    min-height: 500px;
}

.module-reader__pdf{
    width: 100%;
    height: 100%;
    border: 3px solid var(--bs-primary);
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.35), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
}

.module-reader__pdf--vazio{
    border-radius: 0.5rem;
}

.module-reader__sidebar{
    height: 100%;
    overflow-y: auto;
}

/* Botões da lista de temas (ver views/courses/readModule.php) que trocam o PDF mostrado no
   leitor ao lado — sem sublinhado nem azul do link, para não parecerem um link de navegação
   comum; o tema ativo fica marcado a verde. */
.module-reader__tema-btn{
    color: #212529;
    text-decoration: none;
}

.module-reader__tema-btn:hover{
    color: var(--bs-primary);
}

.module-reader__tema-btn--ativo{
    color: var(--bs-primary);
}

.module-reader__tema-btn--ativo .fw-bold{
    text-decoration: underline;
}

/* Cartão de Temas/Matérias (ver views/courses/readModule.php) — mesmo fundo branco dos outros;
   o texto normal (.module-reader__tema-btn) já era escuro fixo, pensado para fundo claro, por
   isso só o estado ativo precisa de passar para o verde fixo (o var(--bs-primary) clareava no
   modo escuro, pensado para um fundo escuro que este cartão deixou de ter). */
html[data-theme="escuro"] .course-temas-card{
    background-color: #fff;
}

html[data-theme="escuro"] .course-temas-card .text-muted{
    color: #6c757d !important;
}

html[data-theme="escuro"] .course-temas-card .module-reader__tema-btn:hover,
html[data-theme="escuro"] .course-temas-card .module-reader__tema-btn--ativo{
    color: var(--cor-verde-solido);
}

/* Cavaleiro decorativo, sobreposto ao banner por cima (top negativo) — usado em mais do que
   uma página (ver views/courses/readModule.php e views/bible/index.php). */
.page-knight-decor{
    position: absolute;
    top: -110px;
    right: 6%;
    width: 95px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}

/* Vira a imagem ao contrário (espelhada), para o cavaleiro ficar virado para dentro da
   página em vez de para fora — usado só na página da Bíblia (ver views/bible/index.php). */
.page-knight-decor--virado{
    transform: scaleX(-1);
}

.contact-card-wrap{
    position: relative;
}

.contact-lilas-flower{
    position: absolute;
    top: -1.2rem;
    right: -1.2rem;
    width: 130px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0.3rem 0.6rem rgba(0, 0, 0, 0.25));
}

.navbar{
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.3), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
}

.navbar-brand{
    color: var(--cor-marca-escuro);
    font-weight: 500;
    font-size: 1.1rem;
}

/* Nome em duas linhas: "Árvore da Vida" e, por baixo, "Family App" mais pequeno */
.navbar-brand__texto{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.navbar-brand__linha2{
    font-size: 0.7em;
    font-weight: 400;
    opacity: 0.85;
}

.navbar-brand__logo{
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0.25rem 0.4rem rgba(10, 20, 15, 0.5)) drop-shadow(0 0.5rem 1rem rgba(10, 20, 15, 0.35));
}

.navbar-brand:hover,
.navbar-brand:focus{
    color: var(--cor-marca-escuro);
}

/* Centra os links das páginas (Início, Celebrações, etc.) de forma a que o espaço entre o
   logótipo e "Início" seja igual ao espaço entre "Jogos" e "Gestão" — margin:auto dos dois
   lados faz o flexbox repartir o espaço livre em partes iguais (o grupo da direita, sem
   margem própria, fica encostado à margem direita). Só a partir do tamanho de ecrã em que o
   menu aparece todo numa única linha ("lg" do Bootstrap, ver navbar-expand-lg); em ecrãs mais
   pequenos o menu colapsa num dropdown vertical, onde isto não se aplica. */
@media (min-width: 992px){
    .nav-links-centro{
        margin-left: auto;
        margin-right: auto;
    }
}

/* Em ecrãs pequenos, reduz a letra e o logótipo para não empurrar o botão do menu para fora do
   ecrã (o nome já está em duas linhas, ver .navbar-brand__texto, por isso não precisa de quebrar). */
@media (max-width: 575.98px){
    .navbar-brand{
        font-size: 0.95rem;
        margin-right: 0.5rem;
    }

    .navbar-brand__logo{
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
}

.navbar-nav .nav-link:hover{
    color: var(--cor-marca-escuro);
}

.navbar-nav .nav-link.active{
    background-color: var(--cor-verde-solido);
    color: #fff;
    border-radius: 0.25rem;
}

/* No modo escuro, o menu em si já clareou (ver --cor-navbar-fundo) — o verde fixo acima ficava
   mais escuro do que o menu à volta, fazendo o item ativo parecer apagado em vez de realçado. */
html[data-theme="escuro"] .navbar-nav .nav-link.active{
    background-color: var(--bs-primary);
}

.dropdown-item:active,
.dropdown-item.active{
    background-color: var(--cor-verde-solido);
}

/* Bandeiras do seletor de idioma (ver renderFlag() em core/config.php) — SVG em vez de
   emoji, porque o Windows não desenha bem emojis de bandeira. */
.flag-icon{
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
    flex-shrink: 0;
}

/* Bandeira maior usada no cabeçalho dos cartões de feriados por país (ver
   views/events/index.php) — sobrepõe a largura/altura fixas do SVG (ver renderFlag()). */
.flag-icon--lg{
    width: 48px;
    height: 33px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0.25rem 0.4rem rgba(10, 20, 15, 0.5), 0 0.6rem 1.2rem rgba(10, 20, 15, 0.4);
}

/* Bandeira pequena usada nos cartões de "Próximos" (ver views/events/index.php), para
   identificar de que país é um feriado sem escrever o nome — mais pequena que o tamanho por
   omissão das outras bandeiras (seletor de idioma, cabeçalhos dos cartões por país). */
.flag-icon--sm{
    width: 20px;
    height: 14px;
}

.hero-header{
    position: relative;
    margin-top: 1.5rem;
    padding: 3rem 0;
    background-color: #f1f4ee;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.3), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
}

/* Banner mais baixo para quem tem sessão iniciada (ver views/includes/header.php) — mostra
   menos conteúdo (só a saudação e a data), por isso não precisa da mesma altura dos visitantes. */
.hero-header--compact{
    padding: 2rem 0;
}

.hero-header--compact .hero-header__image{
    flex-basis: 110px;
    max-width: 110px;
}

.hero-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.hero-header__text{
    flex: 1 1 320px;
}

/* Saudação pessoal ("Olá, :nome !") dentro do banner — para quem tem sessão iniciada, é o
   único texto do banner (substitui o nome da app e o "espaço privado"), por isso fica grande
   e nítido. */
.hero-header__greeting{
    display: inline-block;
    font-family: "Arial", "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--cor-dourado-solido);
    margin: 0;
}

.hero-header__data{
    color: #6c757d;
    font-size: 0.95rem;
    margin-top: 0.4rem;
}

.hero-header__data-link{
    color: inherit;
    text-decoration: none;
}

.hero-header__data-link:hover{
    color: var(--cor-verde-solido);
    text-decoration: underline;
}

/* Calendário anual (ver CalendarController + views/calendar/index.php) — grelha de 7 colunas
   por mês, alinhada em segunda-feira, com um ponto de cor por baixo do número do dia a indicar
   celebrações (verde) e/ou feriados (dourado, mesma cor usada nos restantes destaques da app). */
.calendar-month{
    border: 2px solid var(--bs-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Ao passar o cursor, o mês sobe um pouco e ganha sombra (mesmo efeito dos cartões do painel e
   da página inicial). Só em aparelhos com rato — no telemóvel o "hover" ficaria preso depois de
   tocar — e desligado para quem pede menos animação. */
@media (hover: hover){
    .calendar-month:hover{
        transform: translateY(-4px);
        box-shadow: 0 0.6rem 1.2rem rgba(10, 20, 15, 0.3);
    }
}

@media (prefers-reduced-motion: reduce){
    .calendar-month{
        transition: none;
    }

    .calendar-month:hover{
        transform: none;
    }
}

.calendar-month__header{
    background-color: var(--cor-verde-solido);
    border: 2px solid var(--cor-verde-solido);
    color: #fff;
}

.calendar-month__grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
}

.calendar-month__grid--header{
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.15rem;
    background-color: #f1e8d2;
    border-radius: 0.4rem;
}

.calendar-day{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 0.3rem;
    font-size: 0.75rem;
}

.calendar-day--abrev{
    color: var(--bs-primary);
    font-size: 0.8rem;
    font-weight: 600;
    aspect-ratio: auto;
}

.calendar-day--vazio{
    aspect-ratio: 1 / 1;
}

.calendar-day--hoje{
    background-color: #eaf1ec;
    font-weight: 700;
    color: var(--cor-marca-escuro);
}

/* Dias com compromissos pessoais (ver appointments.*) ficam com um fundo claro, além do pontinho
   verde — maior destaque visual sem precisar de abrir o dia. Tom diferente do "hoje" acima, para
   os dois se distinguirem quando calham no mesmo dia. */
.calendar-day--com-compromisso{
    background-color: #fae9b8;
}

.calendar-day--com-compromisso.calendar-day--hoje{
    background-color: #cde3d1;
}

/* Moldura dourada à volta do cartão "Os meus compromissos" (ver views/calendar/index.php),
   a condizer com .recipe-card/.medicoes-tabela-frame, e cabeçalho em verde da marca. */
.calendar-compromissos-board{
    border: 3px solid var(--cor-marca-dourado);
    border-radius: 0.5rem;
    overflow: hidden;
}

.calendar-compromissos-board .card-header{
    background-color: var(--cor-verde-solido);
    color: #fff;
    border-bottom: 3px solid var(--cor-dourado-solido);
}

.calendar-compromissos-board .list-group-item:hover{
    background-color: #f8f9fa;
}

/* No modo escuro, fica-se com o tom claro do hover acima SEMPRE (não só ao passar o rato),
   com texto escuro — por isso não há diferença nenhuma entre repouso e hover aqui. */
html[data-theme="escuro"] .calendar-compromissos-board .list-group-item,
html[data-theme="escuro"] .calendar-compromissos-board .list-group-item:hover{
    background-color: #f8f9fa;
    color: #212529;
}

html[data-theme="escuro"] .calendar-compromissos-board .list-group-item .text-muted{
    color: #6c757d !important;
}

/* Dias com celebração/feriado passam a ser um <button> (para abrir o popup — ver
   views/calendar/index.php), por isso precisam de anular o estilo nativo do browser para
   continuarem a parecer uma célula do calendário, não um botão. */
.calendar-day--clicavel{
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.calendar-day--clicavel:hover,
.calendar-day--clicavel:focus-visible{
    background-color: #eaf1ec;
}

.calendar-day__dots{
    display: flex;
    gap: 0.2rem;
    height: 9px;
}

.calendar-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ff7f50;
}

.calendar-dot--feriado{
    background-color: #ff00ff;
}

.calendar-dot--compromisso{
    background-color: var(--bs-primary);
}

.calendar-legenda{
    color: #6c757d;
    font-size: 0.9rem;
}

.hero-header__hora-alert{
    color: var(--cor-marca-dourado);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

/* Relógio analógico redondo, alinhado com a bandeira do seletor de idioma da navegação e com
   os cartões da página (todos usam "container px-4 px-lg-5") — por isso o relógio vive dentro
   de um container com as mesmas classes (ver views/includes/header.php), com "right: 0" a
   coincidir sempre com a margem direita desses elementos, em qualquer largura de ecrã. */
.hero-header__clock-container{
    position: relative;
    height: 0;
}

.hero-header__clock-wrap{
    position: absolute;
    top: 1rem;
    right: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.hero-header__clock{
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0.25rem 0.4rem rgba(10, 20, 15, 0.5), 0 0.5rem 1rem rgba(10, 20, 15, 0.35);
}

/* Traços das horas — anel de 12 marcas geradas com um gradiente cónico repetido (::before);
   o ::after é um círculo branco por cima que só deixa ver o anel exterior, escalando
   automaticamente entre o relógio pequeno do canto e o grande do banner (ver
   .hero-header__clock--grande), sem precisar de 12 elementos no HTML. As mãos e o centro
   ficam com z-index acima dos dois, para não ficarem tapados. */
.hero-header__clock::before,
.hero-header__clock::after{
    content: "";
    position: absolute;
    border-radius: 50%;
}

.hero-header__clock::before{
    inset: 0;
    background: repeating-conic-gradient(var(--cor-marca-escuro) 0deg 2deg, transparent 2deg 30deg);
    z-index: 0;
}

.hero-header__clock::after{
    inset: 15%;
    background-color: #fff;
    z-index: 0;
}

.hero-header__clock-hand{
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    background-color: var(--cor-verde-solido);
    border-radius: 2px;
    z-index: 1;
}

.hero-header__clock-hand--hour{
    width: 3px;
    height: 12px;
    margin-left: -1.5px;
}

.hero-header__clock-hand--minute{
    width: 2px;
    height: 16px;
    margin-left: -1px;
}

.hero-header__clock-hand--second{
    width: 1px;
    height: 18px;
    margin-left: -0.5px;
    background-color: var(--cor-dourado-solido);
}

.hero-header__hora{
    color: var(--cor-verde-solido);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
}

.hero-header__clock-center{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background-color: var(--cor-verde-solido);
    z-index: 2;
}

.hero-header__image{
    flex: 0 1 200px;
    max-width: 200px;
}

.hero-header__image img{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Relógio grande que substitui a árvore da vida no banner de quem tem sessão iniciada
   (ver views/includes/header.php) — mesma estrutura do relógio pequeno do canto (ver
   .hero-header__clock acima), só maior, por isso os ponteiros têm medidas próprias. */
.hero-header__image-clock{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.hero-header__clock--grande{
    width: 88px;
    height: 88px;
    border-width: 3px;
}

.hero-header__clock--grande .hero-header__clock-hand--hour{
    width: 5px;
    height: 24px;
    margin-left: -2.5px;
}

.hero-header__clock--grande .hero-header__clock-hand--minute{
    width: 3px;
    height: 32px;
    margin-left: -1.5px;
}

.hero-header__clock--grande .hero-header__clock-hand--second{
    width: 2px;
    height: 36px;
    margin-left: -1px;
}

.hero-header__clock--grande .hero-header__clock-center{
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
}

.hero-header__image-clock .hero-header__hora{
    font-size: 1rem;
}

/* Ramos de oliveira nos dois cantos superiores do cartão do versículo do dia (ver
   views/home/index.php), dentro dos limites do cartão — o da esquerda é o mesmo ficheiro
   espelhado (scaleX(-1)), para ficar simétrico com o da direita. */
.home-verse-card{
    position: relative;
}

/* Só no telemóvel/pad (não em ecrãs grandes, onde o cartão a toda a largura já harmoniza com o
   resto da página) — mais pequeno e centrado. */
@media (max-width: 991.98px){
    .home-verse-card{
        max-width: 640px;
        margin: 0 auto;
    }
}

/* Texto do versículo do dia (ver views/home/index.php) — cores da marca em vez de inline, para
   clarearem sozinhas no modo escuro, tal como o resto do texto da marca. */
.home-versiculo-dourado{
    color: var(--cor-marca-dourado);
}

.home-versiculo-texto{
    color: var(--cor-texto);
}

/* As setas do carrossel (.carousel-dark inverte-as para preto, pensado para fundos claros) ficam
   invisíveis sobre um fundo escuro — no modo escuro, mostra-as na cor original (branca). */
html[data-theme="escuro"] .carousel-dark .carousel-control-prev-icon,
html[data-theme="escuro"] .carousel-dark .carousel-control-next-icon{
    filter: none;
}

.home-ramo-oliveira{
    position: absolute;
    top: -1.25rem;
    width: 70px;
    height: auto;
    border-radius: 0.75rem;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.8rem 1.2rem rgba(0, 0, 0, 0.2);
}

.home-ramo-oliveira--right{
    right: -1rem;
}

.home-ramo-oliveira--left{
    left: -1rem;
    transform: scaleX(-1);
}

@media (max-width: 600px){
    /* O relógio grande do banner (ver views/includes/header.php) some no telemóvel — ocupa
       demasiado espaço nesse ecrã estreito e a hora já aparece em todo o lado. */
    .hero-header__image--relogio{
        display: none;
    }

    .hero-header__image{
        flex-basis: 130px;
        max-width: 130px;
    }

    .hero-header__clock-wrap{
        top: 0.5rem;
    }

    .hero-header__clock{
        width: 36px;
        height: 36px;
    }

    .hero-header__hora{
        font-size: 0.7rem;
    }

    /* A regra ".hero-header__clock" acima encolhe a face do relógio, mas não abrangia a
       variante "--grande" (banner de quem tem sessão iniciada) nem os ponteiros dela — ficavam
       com o comprimento pensado para a face de 88px, saindo para fora da face mais pequena.
       Aqui encolhe-se a face e os ponteiros na mesma proporção. */
    .hero-header__clock--grande{
        width: 64px;
        height: 64px;
        border-width: 2px;
    }

    .hero-header__clock--grande .hero-header__clock-hand--hour{
        height: 17px;
    }

    .hero-header__clock--grande .hero-header__clock-hand--minute{
        height: 23px;
    }

    .hero-header__clock--grande .hero-header__clock-hand--second{
        height: 26px;
    }

    .hero-header__clock--grande .hero-header__clock-center{
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
    }

    .hero-header__image-clock .hero-header__hora{
        font-size: 0.85rem;
    }

    .lists-christmas-rose{
        width: 220px;
    }

    /* Os ramos de oliveira sobrepostos aos cantos do card (ver .home-ramo-oliveira) ficam
       relativamente maiores num ecrã estreito, mais perto do título — dá-se mais respiro entre
       o título e o versículo para não ficarem colados às imagens. */
    .home-verse-card .card-body h2{
        margin-bottom: 2rem !important;
    }

    /* Cartão do versículo do dia mais compacto no telemóvel, para harmonizar com o resto dos
       cartões (já mais pequenos nesse ecrã) — menos respiro à volta e letra um pouco menor,
       tanto no título como na citação. */
    .home-verse-card .card-body{
        padding: 1rem;
    }

    .home-verse-card .card-body h2{
        font-size: 0.8rem;
    }

    .home-verse-card .home-versiculo-texto{
        font-size: 0.9rem !important;
    }

    .home-ramo-oliveira{
        width: 50px;
        top: -0.9rem;
    }

    .contact-lilas-flower{
        width: 70px;
        top: -0.8rem;
        right: -0.5rem;
    }
}


.hero-header__placeholder{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    background-color: var(--bs-primary);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.hero-header__placeholder i{
    font-size: 4rem;
    color: #fff;
}

.postit-board{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 1rem;
    padding: 0.5rem 0;
}

.postit{
    position: relative;
    width: 220px;
    min-height: 160px;
    padding: 1rem 1rem 0.75rem;
    box-shadow: 0.15rem 0.25rem 0.6rem rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "Comic Sans MS", "Segoe Print", cursive, var(--bs-body-font-family);
    transition: transform 0.15s ease;
}

.postit:nth-child(3n+1){ transform: rotate(-2deg); }
.postit:nth-child(3n+2){ transform: rotate(1.5deg); }
.postit:nth-child(3n){ transform: rotate(-1deg); }
.postit:hover{ transform: rotate(0deg) scale(1.03); z-index: 2; }

.postit--amarelo{ background-color: #fff6a3; }
.postit--rosa{ background-color: #ffd6e8; }
.postit--azul{ background-color: #cfeaff; }
.postit--verde{ background-color: #d9f2d4; }

.postit__texto{
    font-size: 0.95rem;
    color: #33312c;
    margin: 0 0 0.75rem;
    word-break: break-word;
    white-space: pre-line;
}

.postit__rodape{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.postit__autor{
    font-size: 0.8rem;
    font-weight: 600;
    color: #33312c;
}

.postit__data{
    font-size: 0.7rem;
    color: #5f5d55;
}

.postit__acoes{
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.postit__editar-btn{
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
    font-size: 0.85rem;
    color: #5f5d55;
    opacity: 0.6;
}

.postit__editar-btn:hover{
    opacity: 1;
    color: #33312c;
}

.postit__editar-form{
    display: none;
}

.postit--editing .postit__texto,
.postit--editing .postit__rodape,
.postit--editing .postit__acoes{
    display: none;
}

.postit--editing .postit__editar-form{
    display: block;
}

#back-to-top{
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1030;
}

#back-to-top.mostrar{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Card de notas pessoais na leitura da Bíblia (ver views/bible/ler.php). Em ecrãs grandes
   "flutua": fica preso ao topo enquanto se faz scroll no texto do capítulo. No telemóvel fica por
   baixo do texto, e o botão flutuante "Notas" (canto inferior esquerdo, o "voltar ao topo" está
   à direita) leva até ele. */
/* "textarea.form-control" do Bootstrap tem um min-height próprio com mais especificidade do que uma
   classe sozinha — por isso o seletor aqui também leva "textarea.form-control". */
textarea.form-control.bible-notas__textarea{
    min-height: 220px;
    resize: vertical;
}

/* Biblioteca: livros (ver views/library/*.php) */
.livro-capa{
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 0.5rem;
    background-color: #f1f1ee;
    box-shadow: 0 0.25rem 0.45rem rgba(10, 20, 15, 0.4), 0 0.6rem 1.3rem rgba(10, 20, 15, 0.3);
}

.livro-capa--vazia{
    background-color: #f1e8d2;
    color: var(--cor-dourado-solido);
}

.livro-cartao .livro-capa{
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover){
    .livro-cartao:hover .livro-capa{
        transform: translateY(-4px);
        box-shadow: 0 0.6rem 1rem rgba(10, 20, 15, 0.45), 0 1.2rem 2rem rgba(10, 20, 15, 0.3);
    }
}

@media (prefers-reduced-motion: reduce){
    .livro-cartao .livro-capa{
        transition: none;
    }

    .livro-cartao:hover .livro-capa{
        transform: none;
    }
}

/* Leitor de PDF de um livro (o do próprio navegador, num iframe) */
.livro-leitor{
    height: 80vh;
    min-height: 480px;
    border: 3px solid var(--bs-primary);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.35), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
}

.livro-leitor iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

/* Hinos (ver views/hymn/*.php): a letra mantém as quebras de linha e as linhas em branco entre
   estrofes tal como foram escritas; a pauta pode ser uma imagem ou um PDF. */
.hino-letra{
    white-space: pre-line;
    font-size: 1.15rem;
    line-height: 1.8;
}

.hino-letra-campo{
    line-height: 1.6;
}

.hino-numero{
    min-width: 2.6rem;
}

.hino-pauta{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.3rem;
    background-color: #fff;
}

.hino-pauta-pdf{
    height: 70vh;
    min-height: 420px;
}

/* Saúde (ver views/health/categoria.php): card da categoria (fundo claro, só para separar
   visualmente do resto da página) com um card por sub-categoria lá dentro (fundo branco, com
   contorno), cada um com o texto de orientação e as fotos dos produtos relacionados. */
.saude-categoria-card{
    background-color: #f1f4ee;
    border: none;
}

.saude-subcategoria-card{
    background-color: #fdfbf6;
    border: 1px solid rgba(58, 106, 82, 0.25);
}

/* O branco/bege acima é só para o modo claro (destacar da categoria à volta) — no modo escuro
   volta-se ao fundo normal dos cartões, que já tem o texto certo para contrastar com ele. */
html[data-theme="escuro"] .saude-subcategoria-card{
    background-color: var(--cor-card-fundo);
    color: var(--cor-texto);
}

.saude-subcategoria-card:last-child{
    margin-bottom: 0 !important;
}

/* Imagem de um produto no carrossel (ver $renderCarrosselProdutos em views/health/categoria.php)
   — tamanho fixo (não acompanha a largura do ecrã) para ficarem sempre como miniaturas, mesmo
   havendo só uma imagem. */
.saude-produto-imagem{
    width: 110px;
    cursor: zoom-in;
    position: relative;
}

/* Nome do produto, por baixo da imagem (ver $renderCarrosselProdutos em
   views/health/_produto_imagens.php) — nomes de comprimentos diferentes ocupavam 1 ou 2 linhas
   consoante o caso, o que desalinhava as imagens seguintes (em qualquer tamanho de ecrã, já que
   os produtos ficam lado a lado numa linha flexível). Reserva-se sempre o espaço de 2 linhas,
   cortando o que não couber, para todas as imagens ficarem à mesma altura. */
.saude-produto-nome{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
    line-height: 1.2em;
}

/* Número da ordem de preferência (1º, 2º...), sobre o canto superior esquerdo da imagem — para
   não se perder essa ordem no telemóvel, onde as imagens deixam de estar lado a lado numa única
   linha óbvia. Mesma cor da moldura da imagem, para se perceber que pertence ao mesmo conjunto. */
.saude-produto-ordem{
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.3rem;
    border-radius: 50%;
    background-color: var(--cor-marca-dourado);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0.2rem 0.4rem rgba(10, 20, 15, 0.35);
}

/* Setas de subir/descer na ordem de preferência (ver views/dashboard/saude.php) — mais finas do
   que um botão normal, para não ocuparem tanto espaço na tabela. */
/* Nota sobre a opção "Só visível para mim" (ver views/events/addEvent.php e updateEvent.php) —
   mais destacada do que um .text-muted normal, para chamar a atenção. */
.addevent-privado-nota{
    color: var(--cor-marca-dourado);
    background-color: rgba(138, 102, 10, 0.12);
    border-left: 3px solid var(--cor-marca-dourado);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
}

.saude-ordem-btn{
    display: block;
    width: 20px;
    height: 16px;
    padding: 0;
    line-height: 1;
    font-size: 0.8rem;
    border: none;
    background: none;
    color: var(--cor-verde-solido);
}

.saude-ordem-btn:hover,
.saude-ordem-btn:focus{
    color: var(--cor-dourado-solido);
}

.saude-ordem-btn:disabled{
    color: #adb5bd;
}

.saude-produto-imagem img,
.saude-produto-imagem__vazia{
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 2px solid var(--cor-marca-dourado);
    box-shadow: 0 0.7rem 1.5rem rgba(10, 20, 15, 0.35);
}

/* Editor de texto da mensagem em "Enviar Email" (ver views/dashboard/enviarEmail.php) — o
   Quill.js já tem o seu próprio CSS (quill.snow.css); isto só arredonda os cantos para
   combinar com os outros campos do formulário (.form-control). */
.email-editor .ql-toolbar{
    border-radius: 0.375rem 0.375rem 0 0;
}

/* Botão que mostra/esconde a lista de destinatários (ver views/dashboard/enviarEmail.php) — a
   seta roda consoante o estado, tal como nos dropdowns do Bootstrap. */
.destinatarios-toggle .bi-chevron-down{
    transition: transform 0.2s ease;
}

.destinatarios-toggle[aria-expanded="true"] .bi-chevron-down{
    transform: rotate(180deg);
}

.email-editor .ql-container{
    border-radius: 0 0 0.375rem 0.375rem;
    min-height: 220px;
    font-size: 1rem;
}

/* O Quill (quill.snow.css, carregado por CDN) escreve os ícones da barra de ferramentas (B/I/U,
   listas, etc.) a cinza-escuro fixo, e o corpo do texto sem fundo próprio — invisíveis/sem
   contraste no modo escuro. O CSS do Quill carrega depois do mystyle.css (o <link> está dentro
   do próprio view, não no <head>), por isso precisa de !important para garantir que ganha.
   Nota: a barra (.ql-toolbar) NÃO fica dentro de #editor-email/.email-editor no DOM final — o
   Quill insere-a como irmã, ANTES do elemento original (que se torna o próprio .ql-container) —
   por isso os seletores aqui não dependem de ".email-editor" como antepassado. Como o Quill só é
   usado nesta página, os seletores simples (sem esse antepassado) são seguros. */
html[data-theme="escuro"] .ql-toolbar.ql-snow,
html[data-theme="escuro"] .ql-container.ql-snow{
    background-color: var(--cor-input-fundo) !important;
    border-color: var(--cor-input-borda) !important;
}

html[data-theme="escuro"] .ql-toolbar.ql-snow{
    border-bottom: 1px solid var(--cor-input-borda) !important;
}

html[data-theme="escuro"] .ql-editor{
    color: #212529 !important;
}

html[data-theme="escuro"] .ql-editor.ql-blank::before{
    color: #6c757d !important;
}

html[data-theme="escuro"] .ql-snow .ql-stroke{
    stroke: #212529 !important;
}

html[data-theme="escuro"] .ql-snow .ql-fill,
html[data-theme="escuro"] .ql-snow .ql-stroke.ql-fill{
    fill: #212529 !important;
}

html[data-theme="escuro"] .ql-snow .ql-picker-label{
    color: #212529 !important;
}

html[data-theme="escuro"] .ql-snow .ql-picker-options{
    background-color: var(--cor-dropdown-fundo) !important;
    color: var(--cor-texto) !important;
}

html[data-theme="escuro"] .ql-snow .ql-picker-item{
    color: var(--cor-texto) !important;
}

/* Ordenar Líquidos — ver views/games/liquidos.php */
.liquidos-tabuleiro{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.3rem;
    max-width: 560px;
}

.liquidos-tubo{
    width: 2.3rem;
    height: 7.8rem;
    display: flex;
    flex-direction: column-reverse;
    border: 3px solid var(--cor-marca-escuro);
    border-top: none;
    border-radius: 0 0 0.75rem 0.75rem;
    overflow: hidden;
    background-color: #f1ead9;
    /* sombra interior a simular o brilho/reflexo de um tubo de vidro cilíndrico */
    box-shadow: inset 4px 0 6px -2px rgba(255, 255, 255, 0.85), inset -4px 0 6px -2px rgba(10, 20, 15, 0.25);
    cursor: pointer;
    padding: 0;
}

.liquidos-tubo--selecionada{
    box-shadow: inset 4px 0 6px -2px rgba(255, 255, 255, 0.85), inset -4px 0 6px -2px rgba(10, 20, 15, 0.25), 0 0 0 3px var(--cor-marca-dourado);
}

.liquidos-segmento{
    width: 100%;
    flex: 1 1 0;
    /* topo arredondado (menisco) e um brilho a imitar a superfície de um líquido, para cada
       camada de cor ficar parecida com as de jogos deste género */
    border-radius: 50% 50% 0 0 / 7px 7px 0 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%);
}

/* Na página própria da pauta o PDF ocupa quase a altura do ecrã */
.hino-pauta-pdf--grande{
    height: 82vh;
    min-height: 520px;
}

.hino-pauta-pdf iframe{
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.3rem;
}

@media print{
    .hino-letra{
        font-size: 14pt;
        line-height: 1.7;
    }

    .hino-pauta{
        max-width: 100%;
    }
}

/* Leitor de áudio (Spotify, SoundCloud): sem a moldura escura dos leitores de vídeo */
.filme-biblico-leitor--audio{
    background-color: transparent;
    box-shadow: none;
    border-radius: 0.75rem;
}

/* Palavras clicáveis na leitura com números de Strong e em hebraico (ver views/bible/ler.php):
   sublinhado ponteado discreto, que ganha cor ao passar o cursor. */
.strong-palavra{
    cursor: pointer;
    border-bottom: 1px dotted rgba(58, 106, 82, 0.55);
    border-radius: 0.15rem;
    transition: background-color 0.15s ease;
}

.strong-palavra:hover,
.strong-palavra:focus-visible{
    background-color: rgba(138, 102, 10, 0.18);
    outline: none;
}

/* Dicionário bíblico e léxico (ver views/dictionary/*.php) */
.dicionario-tabs .nav-link{
    color: var(--bs-primary);
}

.dicionario-tabs .nav-link.active{
    background-color: var(--cor-verde-solido);
    color: #fff;
}

.dicionario-az{
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Lista de entradas de uma letra: em colunas que se ajustam à largura do ecrã */
.dicionario-colunas{
    column-width: 14rem;
    column-gap: 2rem;
}

.dicionario-colunas a{
    break-inside: avoid;
}

.dicionario-texto p{
    line-height: 1.75;
}

.lexico-he{
    font-family: "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "Times New Roman", "David", serif;
    font-size: 1.15em;
}

.lexico-el{
    font-family: "Gentium Plus", "Noto Serif", "Times New Roman", serif;
    font-size: 1.1em;
}

/* Cada resultado do léxico abre e fecha (<details>); a seta à direita indica o estado */
.lexico-item summary{
    cursor: pointer;
}

.lexico-item summary::after{
    content: "\f282";
    font-family: "bootstrap-icons";
    margin-left: auto;
    transition: transform 0.2s ease;
}

.lexico-item[open] summary::after{
    transform: rotate(180deg);
}

.lexico-corpo ol,
.lexico-corpo ul{
    padding-left: 1.25rem;
    margin-bottom: 0.25rem;
}

/* Texto hebraico (leitura em hebraico, ver views/bible/ler.php): letra maior e mais espaço entre
   linhas para as vogais e os acentos se lerem bem. Usa as fontes hebraicas que o aparelho já tem,
   sem carregar nenhuma de fora. */
.bible-hebraico{
    font-family: "SBL Hebrew", "Ezra SIL", "Noto Serif Hebrew", "Times New Roman", "David", serif;
    font-size: 1.5rem;
    line-height: 2.1;
}

/* Ícone de marcador junto a cada versículo (ver .bible-marcar-btn em views/bible/ler.php):
   discreto por omissão, mais visível ao passar o cursor — para não poluir o texto todo com
   ícones chamativos. */
.bible-marcar-btn{
    color: #adb5bd;
    vertical-align: middle;
    line-height: 1;
}

.bible-marcar-btn:hover,
.bible-marcar-btn:focus-visible{
    color: var(--cor-marca-dourado);
}

/* Versículo onde a pessoa marcou "fiquei aqui" (ver $versiculoMarcado em BibleController::ler())
   — realce suave, a condizer com a moldura dourada usada noutras marcações do site. */
.bible-versiculo-marcado{
    background-color: rgba(138, 102, 10, 0.12);
    border-left: 3px solid var(--cor-marca-dourado);
    border-radius: 0.25rem;
    padding: 0.2rem 0.5rem;
    margin-left: -0.5rem;
}

/* Cartão dos versículos na leitura da Bíblia (ver views/bible/ler.php) — mesmo fundo branco do
   modo claro, a pedido do utilizador, com o texto escuro a condizer. */
.bible-leitura-card{
    border: 3px solid var(--cor-dourado-solido);
}

html[data-theme="escuro"] .bible-leitura-card{
    background-color: #fff;
    color: #212529;
}

html[data-theme="escuro"] .bible-leitura-card .text-muted{
    color: #6c757d !important;
}

/* Lista "Minhas Conversas" (ver views/chat/conversas.php): o bloco do nome/última mensagem
   (.flex-grow-1) não encolhia abaixo do tamanho do seu conteúdo — uma última mensagem comprida
   empurrava a linha toda para fora da lista em ecrãs estreitos, em vez de cortar com "…"
   (mesma causa do problema já corrigido em .chat-message, ver mais abaixo). */
.conversas-lista .list-group-item > .flex-grow-1{
    min-width: 0;
}

/* Página de Conversas (ver views/chat/conversas.php) — mesmo fundo branco dos outros, a pedido
   do utilizador, com o texto escuro a condizer. */
html[data-theme="escuro"] .conversas-card,
html[data-theme="escuro"] .conversas-lista .list-group-item{
    background-color: #fff !important;
    color: #212529 !important;
}

html[data-theme="escuro"] .conversas-card .text-muted,
html[data-theme="escuro"] .conversas-lista .list-group-item .text-muted{
    color: #6c757d !important;
}

html[data-theme="escuro"] .conversas-lista .list-group-item-action:hover,
html[data-theme="escuro"] .conversas-lista .list-group-item-action:focus{
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

.bible-marcar-btn .bi-bookmark-fill{
    color: var(--cor-marca-dourado);
}

/* Cartão "Continuar a leitura" (ver views/bible/leitura.php), a condizer com o realce do
   versículo marcado acima. */
.bible-continuar-card{
    background-color: rgba(138, 102, 10, 0.1);
    border: 1px solid rgba(138, 102, 10, 0.4);
    border-radius: 0.5rem;
    color: #3a2d05;
    transition: background-color 0.15s ease;
}

.bible-continuar-card:hover,
.bible-continuar-card:focus-visible{
    background-color: rgba(138, 102, 10, 0.18);
    color: #3a2d05;
}

.bible-continuar-card i{
    color: var(--cor-dourado-solido);
}

/* No modo escuro, mesmo estilo do modo claro (fundo claro, texto castanho escuro), só que
   opaco em vez de translúcido — translúcido sobre a página escura ficava amarelado/sujo. */
html[data-theme="escuro"] .bible-continuar-card{
    background-color: #fdf6e3;
    border-color: rgba(138, 102, 10, 0.4);
    color: #3a2d05;
}

html[data-theme="escuro"] .bible-continuar-card:hover,
html[data-theme="escuro"] .bible-continuar-card:focus-visible{
    background-color: #fbeec7;
    color: #3a2d05;
}

/* Listas de livros (Antigo/Novo Testamento, deuterocanónicos — ver views/bible/leitura.php),
   com o mesmo frame dourado dos outros cartões/tabelas. */
.bible-livros-lista{
    border: 3px solid var(--cor-dourado-solido);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.7rem 1.5rem rgba(10, 20, 15, 0.35);
}

.bible-notas{
    border: 3px solid var(--cor-marca-dourado);
}

@media (min-width: 992px){
    .bible-notas{
        position: sticky;
        top: 1rem;
    }

    textarea.form-control.bible-notas__textarea{
        min-height: 45vh;
    }
}

.bible-notas-fab{
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 1030;
    border-radius: 2rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.bible-notas-fab--oculto{
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
}

@media print{
    .bible-notas-fab{
        display: none !important;
    }
}

.recipe-page-imagem{
    box-shadow: 0 0.3rem 0.6rem rgba(10, 20, 15, 0.3), 0 0.8rem 1.6rem rgba(10, 20, 15, 0.25);
}

/* Identificação da app no fundo de cada página impressa (ver template.php). Escondida no ecrã;
   "position: fixed" dentro de @media print repete o elemento em todas as páginas do documento
   impresso (truque que funciona no Chrome/Edge, que não suportam as margin boxes do CSS Paged
   Media como @bottom-center). */
.print-rodape{
    display: none;
}

@media print{
    nav.navbar, header.hero-header, footer, #back-to-top, .no-print{
        display: none !important;
    }
    /* O Bootstrap limita a largura do ".container" a partir de certos tamanhos de ecrã (ex:
       1140px, 1320px) — na impressão isso podia deixar a folha com uma faixa vazia de um dos
       lados em vez de o conteúdo ficar centrado/a ocupar a folha toda. Sem limite nenhum na
       impressão, o conteúdo usa sempre a largura toda disponível entre as margens da folha. */
    .container{
        max-width: 100% !important;
    }
    .recipe-print-area{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .printable-card{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
        background-color: #fff !important;
    }
    .print-rodape{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 1mm 0;
        text-align: center;
        font-size: 0.7rem;
        color: #6c757d;
    }
}

/* Tabelas de Medições de Saúde na impressão (ver .medicoes-tabela-frame acima): margens de
   página reduzidas (regra @page, aplicada acima) para sobrar mais largura à tabela, letra mais
   pequena para caber mais numa linha só, e "page-break-inside: avoid" em cada linha para uma
   mesma medição/medicamento nunca ficar cortado a meio entre duas páginas. "border-collapse:
   separate" é necessário para o "page-break-inside: avoid" funcionar (com "collapse" o
   navegador ignora-o), mas isso faz o Bootstrap perder as linhas horizontais entre linhas da
   tabela (o CSS dele assume "collapse") — por isso o border em th/td é redefinido aqui à mão,
   dos 4 lados. */
@media print{
    .medicoes-tabela-frame{
        overflow: visible !important;
    }

    .medicoes-tabela-frame{
        font-size: 0.9rem;
        border-collapse: separate !important;
        border-spacing: 0;
    }

    .medicoes-tabela-frame th,
    .medicoes-tabela-frame td{
        padding: 0.4rem 0.6rem;
        border: 1px solid var(--bs-border-color, #dee2e6) !important;
    }

    .medicoes-tabela-frame tr{
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Listas imprimíveis (compras / tarefas) — ver views/lists/index.php. Em ecrã têm sombra e
   moldura como os outros cartões do site; na impressão (ver acima) a sombra desaparece e a
   moldura fica preta sólida, para imprimir bem a preto e branco. */
.printable-card{
    background-color: #fff;
    border: 4px solid var(--cor-marca-dourado);
    border-radius: 0.5rem;
    box-shadow: 0 0.3rem 0.75rem rgba(10, 20, 15, 0.7);
    padding: 1.5rem;
}

/* Só no ecrã (nunca na impressão, forçada a #fff acima) — um branco mais escuro/acinzentado,
   para não destacar tanto sobre o resto da app no modo escuro. */
html[data-theme="escuro"] .printable-card{
    background-color: var(--cor-papel);
}

/* Tabelas de Medições (ver views/medicoes/*.php) — o mesmo "papel" claro das listas
   imprimíveis acima, com as cores de texto/linhas do modo claro (não as do modo escuro, que
   foram pensadas para um fundo escuro e ficavam sem contraste aqui). */
html[data-theme="escuro"] .medicoes-tabela-frame{
    background-color: var(--cor-papel);
}

html[data-theme="escuro"] .medicoes-tabela-frame > :not(caption) > * > *{
    color: #212529;
    border-bottom-color: #dee2e6;
}

html[data-theme="escuro"] .medicoes-tabela-frame thead th{
    color: var(--cor-verde-solido);
}

.printable-title{
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cor-verde-solido);
    margin-bottom: 1rem;
}

.printable-tarefas__cabecalho{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.printable-tarefas__data{
    font-size: 0.85rem;
    color: #5f5d55;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.printable-tarefas__data span{
    display: inline-block;
    width: 110px;
    border-bottom: 1px solid #adb5bd;
}

.printable-grid{
    display: grid;
    gap: 1.25rem 1.5rem;
}

.printable-grid--compras{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.printable-grid--tarefas{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 480px){
    .printable-grid--compras,
    .printable-grid--tarefas{
        grid-template-columns: 1fr;
    }
}

.printable-secao__titulo{
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cor-dourado-solido);
    margin-bottom: 0.6rem;
}

.printable-secao--afazer{
    grid-row: span 2;
}

.printable-linha{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.printable-linha input[type="checkbox"]{
    flex-shrink: 0;
    accent-color: var(--bs-primary);
}

.printable-linha span,
.printable-input{
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-bottom: 1px solid #adb5bd;
    border-radius: 0;
    height: 1.4em;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    color: inherit;
    min-width: 0;
}

.printable-input:focus{
    outline: none;
    border-bottom-color: var(--bs-primary);
    box-shadow: none;
}

.printable-input:focus-visible{
    outline: none;
}

.printable-input--data{
    width: 110px;
    flex: 0 0 auto;
}

.printable-linha--sem-caixa{
    padding-left: 0;
}

.printable-secao--lembrete{
    background-color: rgba(58, 106, 82, 0.08);
    border-radius: 0.4rem;
    padding: 0.75rem;
    min-height: 100px;
}

.printable-textarea{
    display: block;
    width: 100%;
    min-height: 80px;
    border: none;
    background: transparent;
    resize: vertical;
    font: inherit;
    color: inherit;
    padding: 0;
}

.printable-textarea:focus{
    outline: none;
}

.printable-print-header{
    display: none;
}

/* Margens da folha para toda a impressão do site (listas de compras/tarefas, Medições de Saúde,
   receitas, etc.) — reduzidas para sobrar mais espaço ao conteúdo. Sem "size" fixo aqui de
   propósito: isso forçava sempre A4 vertical e impedia escolher paisagem no diálogo de
   impressão. */
@page{
    margin: 4mm;
}

@media print{
    .lists-print-row{
        display: block !important;
        margin: 0 !important;
    }

    .lists-print-row > *{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14mm 0 0 0 !important;
        margin: 0 !important;
    }

    /* Centrar na vertical usando "vh" não é fiável na impressão (o Chrome/Edge não o faz bater
       sempre certo com a altura real da página, criando uma 2.ª página em branco). Um valor fixo
       em mm também é arriscado, porque o papel escolhido no diálogo de impressão pode não ser
       A4 (ex: Letter, mais baixo) — por isso usa-se aqui um valor propositadamente bem abaixo da
       altura de qualquer folha vertical normal (a mais baixa, Letter, ainda tem ~270mm de altura
       útil), para nunca transbordar para uma 2.ª página, ainda que o centro não fique exato. */
    .lists-print-section{
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 230mm;
    }

    .printable-card{
        padding: 0.9rem 1rem !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
    }

    /* Título repetido no topo de CADA página impressa (igual ao rodapé, logo acima) — quando a
       lista é mais comprida do que uma página e o navegador acaba por a cortar em duas (ignora o
       "break-inside: avoid" de cima quando o conteúdo não cabe de todo numa só página), a
       segunda página continua a mostrar de que lista se trata, em vez de aparecer "cortada" sem
       contexto. O título normal (.printable-title, com "no-print" no HTML) fica escondido na
       impressão — este substitui-o. */
    .printable-print-header{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 1mm 0 2mm;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 1.1rem;
        color: var(--cor-marca-escuro);
        background-color: #fff;
    }

    .printable-title{
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .printable-tarefas__cabecalho{
        margin-bottom: 0.5rem;
    }

    .printable-grid{
        gap: 0.7rem 1.25rem;
    }

    .printable-secao__titulo{
        font-size: 0.8rem;
        margin-bottom: 0.3rem;
    }

    .printable-linha{
        margin-bottom: 0.2rem;
    }

    .printable-linha span,
    .printable-input{
        height: 1.25em;
    }

    .printable-linha,
    .printable-input,
    .printable-textarea{
        font-size: 0.85rem;
    }

    .printable-secao{
        break-inside: avoid;
    }
}

@media print and (orientation: landscape){
    .lists-print-section{
        min-height: 150mm;
    }
}

/* Em paisagem a folha fica mais larga mas bem mais baixa, e a grelha de 2 colunas (pensada para
   retrato) passa a precisar de mais linhas do que cabem na página — é isso que estava a cortar
   a "Lista de compras" ao meio. Em paisagem aproveita-se a largura extra para mais colunas, o
   que reduz para metade (ou menos) o número de linhas necessárias e volta a caber tudo numa só
   página. */
@media print and (orientation: landscape){
    .printable-grid--compras{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .printable-grid--tarefas{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .printable-secao--afazer{
        grid-row: span 1;
    }
}