/* Mapa Astral - leitura por capítulos (amostra pública e mapa na conta). */

.ma-mapa {
    max-width: 780px;
    margin: 0 auto;
}

.ma-cabecalho {
    text-align: center;
    margin-bottom: 2rem;
}

.ma-nascimento {
    color: #6B7280;
    font-size: .95rem;
}

/* Sol, Lua e Ascendente em destaque, que é o que se reconhece de imediato */
.ma-resumo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0 2.5rem;
}

.ma-destaque {
    flex: 1 1 150px;
    max-width: 220px;
    padding: 1rem .75rem;
    border-radius: 12px;
    background: #f6f2fb;
    text-align: center;
}

.ma-destaque-rotulo {
    display: block;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8a9a;
}

.ma-destaque-valor {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    color: #7718b6;
    margin: .2rem 0;
}

.ma-destaque-grau {
    display: block;
    font-size: .8rem;
    color: #9aa0ab;
}

/* ---------------------------------------------------- mandala (a roda) */

.ma-mandala {
    position: relative;
    max-width: 500px;
    margin: 0 auto 2rem;
}

.ma-roda {
    width: 100%;
    height: auto;
    display: block;
}

/* Os planetas respondem ao rato e ao toque, por isso o cursor tem de o dizer */
.ma-planeta {
    cursor: pointer;
}

.ma-planeta:hover circle {
    stroke-opacity: .8;
    stroke-width: 1.2;
}

/* A posição do planeta apontado aparece por baixo da roda, em vez de flutuar
   sobre ela: no telemóvel um balão tapava metade do desenho. */
.ma-roda-legenda {
    min-height: 1.4rem;
    text-align: center;
    font-size: .85rem;
    color: #6B7280;
    margin-top: .5rem;
}

.ma-roda-botao {
    position: absolute;
    top: 0;
    right: 0;
    padding: .25rem .6rem;
    font-size: .75rem;
    color: #6B7280;
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    cursor: pointer;
}

.ma-roda-botao:hover {
    color: #4a4a5a;
    border-color: #d4d8e0;
}

.ma-estado {
    text-align: center;
    color: #8a8a9a;
    font-size: .9rem;
    min-height: 1.4rem;
    margin-bottom: 1rem;
}

/* ------------------------------------------- índice das posições (a seguir à roda) */

/*
 * Grelha, e não <table>, por causa do telemóvel: aqui a linha inteira é o alvo
 * de toque, e numa tabela só o texto da célula o seria. As quatro colunas
 * passam a duas nos ecrãs estreitos, com a casa e o grau debaixo do nome.
 */

.ma-posicoes {
    margin: 0 auto 2.5rem;
}

.ma-posicoes-titulo {
    font-size: 1.15rem;
    font-weight: 600;
    color: #241b3a;
    text-align: center;
    margin-bottom: .25rem;
}

.ma-posicoes-ajuda {
    text-align: center;
    color: #8a8a9a;
    font-size: .85rem;
    margin-bottom: 1rem;
}

.ma-posicoes-tabela {
    border: 1px solid #ece9f2;
    border-radius: 12px;
    overflow: hidden;
}

.ma-posicoes-cabecalho,
.ma-posicao {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) 3.4rem 5.4rem;
    align-items: center;
    gap: .5rem;
    padding: .6rem .9rem;
}

.ma-posicoes-cabecalho {
    background: #f6f2fb;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8a8a9a;
}

.ma-posicao {
    border-top: 1px solid #f1eef7;
    color: #241b3a;
    text-decoration: none;
    transition: background .15s ease;
}

.ma-posicao:hover,
.ma-posicao:focus-visible {
    background: #faf7ff;
    color: #7718b6;
    text-decoration: none;
}

.ma-posicao:focus-visible {
    outline: 2px solid #7718b6;
    outline-offset: -2px;
}

.ma-posicao-ponto {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.ma-posicao-glifo {
    font-size: 1.05rem;
    color: #7718b6;
    width: 1.3rem;
    text-align: center;
    flex: none;
}

.ma-posicao-signo {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* O selo repete a cor do elemento que a roda usa na banda dos signos */
.ma-posicao-selo {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    flex: none;
    /* sem isto o navegador corta o fundo na impressão, e fica símbolo branco
       sobre papel branco - a mesma armadilha dos círculos dos arcanos */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

/*
 * O selo do elemento leva um desenho, não uma letra. Vive no capítulo do
 * temperamento - no retrato dos quatro e no título de cada texto -, desde que
 * a tabela das posições deixou de ter coluna para ele.
 */
.ma-selo-elemento {
    width: 1.4rem;
    height: 1.4rem;
}

.ma-selo-elemento svg {
    width: .9rem;
    height: .9rem;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* O selo acompanha a linha. O `vertical-align` mudou-se para o
   `interpretacoes-cards.css` a 2026-09-03: dentro do cabeçalho do cartão, que
   é flex e centrado, o deslocamento de -.3rem passou a desalinhar. */
.ma-seccao-titulo .ma-selo-elemento {
    margin-right: .45rem;
}

.ma-posicao-casa,
.ma-posicao-grau {
    color: #6B7280;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.ma-posicao-retro {
    color: #b45309;
    font-weight: 600;
}

@media (max-width: 560px) {

    .ma-posicoes-cabecalho {
        display: none;
    }

    /*
     * Quatro colunas não cabem num telemóvel. Passam a duas: o ponto com o
     * grau em cima, o signo com a casa por baixo.
     */
    .ma-posicao {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: .2rem;
    }

    .ma-posicao-ponto,
    .ma-posicao-signo {
        grid-column: 1;
    }

    .ma-posicao-grau,
    .ma-posicao-casa {
        grid-column: 2;
    }

    .ma-posicao-casa::before {
        content: 'casa ';
    }
}

/* No papel a linha não é clicável, mas as posições continuam a valer */
@media print {

    .ma-posicoes-ajuda {
        display: none;
    }

    .ma-posicao {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* --------------------------------------- os quatro elementos (capítulo 17) */

.ma-elementos {
    background: #faf8fd;
    border: 1px solid #ece9f2;
    border-radius: 12px;
    padding: 1.1rem 1.2rem .9rem;
    margin-bottom: 1.75rem;
}

.ma-elemento {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 1.5rem 5.5rem;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
}

.ma-elemento-nome {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    color: #241b3a;
}

.ma-elemento-barra {
    display: block;
    height: .55rem;
    background: #ece9f2;
    border-radius: 999px;
    overflow: hidden;
}

.ma-elemento-tira {
    display: block;
    height: 100%;
    border-radius: 999px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.ma-elemento-n {
    text-align: right;
    font-weight: 600;
    color: #241b3a;
    font-variant-numeric: tabular-nums;
}

.ma-elemento-estado {
    font-size: .8rem;
    color: #8a8a9a;
    text-align: right;
}

/* O acúmulo e a falta são o que se procura neste bloco - ficam legíveis de
   relance, sem precisar de ler os números. */
.ma-elemento-acumulo .ma-elemento-estado {
    color: #7718b6;
    font-weight: 600;
}

.ma-elemento-bloqueio .ma-elemento-estado {
    color: #b45309;
    font-weight: 600;
}

.ma-elementos-nota {
    font-size: .78rem;
    color: #9aa0ab;
    margin: .7rem 0 0;
    line-height: 1.4;
}

@media (max-width: 560px) {

    .ma-elemento {
        grid-template-columns: 4.5rem minmax(0, 1fr) 1.4rem;
        row-gap: 0;
    }

    /* o estado passa para baixo do nome, alinhado com ele */
    .ma-elemento-estado {
        grid-column: 1 / -1;
        text-align: left;
        margin: -.15rem 0 .35rem 5.9rem;
    }
}

/* ------------------------------------------------------------- capítulos */

.ma-capitulo {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ece9f2;
}

.ma-capitulo:last-child {
    border-bottom: 0;
}

/*
 * Realce de chegada: quem salta do índice para o capítulo 12 precisa de ver
 * onde aterrou. Apaga-se sozinho em dois segundos.
 */
.ma-capitulo-alvo {
    animation: ma-chegada 2s ease-out;
}

@keyframes ma-chegada {
    from { background: #f3e8ff; }
    to   { background: transparent; }
}

/* Quem pediu menos movimento ao sistema não leva animação nenhuma */
@media (prefers-reduced-motion: reduce) {

    .ma-capitulo-alvo {
        animation: none;
    }
}

/* A linha dourada e a margem do cabeçalho estão no
   `interpretacoes-cards.css`, ao pé do `.md-zona` que faz o mesmo nos outros
   mapas. */

.ma-capitulo-numero {
    display: inline-block;
    min-width: 1.9rem;
    height: 1.9rem;
    line-height: 1.9rem;
    text-align: center;
    border-radius: 50%;
    background: #7718b6;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.ma-capitulo-titulo {
    font-size: 1.5rem;
    margin: .25rem 0 0;
}

.ma-capitulo-subtitulo {
    color: #8a8a9a;
    font-style: italic;
    margin: 0;
}

.ma-capitulo-teaser {
    background: #faf8fd;
    border-left: 3px solid #d9c8ec;
    padding: .85rem 1rem;
    border-radius: 0 8px 8px 0;
    color: #5a5a6a;
}

/*
 * ⚠️ A CAIXA DA SECÇÃO SAIU DAQUI a 2026-09-03.
 *
 * `.ma-seccao`, `.ma-seccao-titulo` e `.ma-seccao-texto` passaram a ser
 * servidas pelo `matriz/assets/css/interpretacoes-cards.css`, nas MESMAS
 * regras dos cartões dos outros seis mapas. Foi o pedido dele: "é para ficar
 * todos os mapas no mesmo padrão".
 *
 * ⚠️ Não repor nada disto aqui. Esta folha carrega DEPOIS da comum, portanto
 * qualquer regra repetida aqui GANHA - e o astral volta a divergir em
 * silêncio, que é exatamente o que se estava a corrigir. Para mudar o
 * aspeto dos blocos, mudar lá.
 */

/* Amostra: o corte é feito no servidor, um por texto. Aqui marca-se o que está
   cortado, com o MESMO tratamento dos cards da Matriz do Destino: etiqueta com
   cadeado, texto em cinzento itálico e uma chamada para desbloquear.
   Repare-se que é por SECÇÃO, não por capítulo: as introduções são livres e
   continuam a ler-se a preto, mesmo dentro de um capítulo bloqueado. */
/* O cinzento itálico está agora no `interpretacoes-cards.css`, na mesma
   regra do `.md-card.is-locked .md-card-body`. */

.ma-tag-locked {
    color: #F97316;
    font-weight: 600;
    font-size: .78rem;
    white-space: nowrap;
    margin-left: .35rem;
}

.ma-seccao-cta {
    display: block;
    margin-top: 1rem;
    color: #9333EA;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.ma-seccao-cta:hover {
    color: #6B21A8;
    text-decoration: underline;
}

/* --------------------------------------------------------------- chamada */

/* As regras .ma-cta-* saíram a 2026-08-05 com o apelo que estilizavam - mesmo
   cartão lilás claro da Matriz do Tempo, e sem preço. Passou ao banner comum,
   em `views/partials/banner_desbloqueio.php`. */

/* ------------------------------------------------------ procura da cidade */

.ma-sugestoes {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 0 0 8px 8px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.ma-sugestao {
    padding: .6rem .85rem;
    cursor: pointer;
    font-size: .9rem;
    border-bottom: 1px solid #f2f4f7;
}

.ma-sugestao:last-child {
    border-bottom: 0;
}

.ma-sugestao:hover,
.ma-sugestao.ativa {
    background: #f6f2fb;
}

.ma-sugestao-fuso {
    color: #9aa0ab;
    font-size: .78rem;
}

.ma-campo-local {
    position: relative;
}

.ma-local-escolhido {
    font-size: .85rem;
    color: #16794c;
}

@media (max-width: 575.98px) {
    .ma-destaque { flex-basis: 100%; max-width: none; }
    .ma-capitulo-titulo { font-size: 1.25rem; }
}