/*
 * "Não sei a hora de nascimento" - Mapa Astral
 *
 * Ficheiro próprio, e não dentro do mapa-astral.css, porque estes estilos são
 * precisos em DOIS sítios que não partilham folha de estilo: a landing pública
 * (/mapa-astral) e o modal de criar mapa em "Meus Mapas". O modal não carrega o
 * CSS da landing de propósito - ver o comentário no topo de
 * views/projects/project_create_modal.php - e duplicar o bloco era garantir que
 * as duas cópias divergiam.
 */

/* --- "Não sei a hora de nascimento" ---------------------------------------
   Muitas certidões no Brasil não trazem a hora. O visto assume 00:00, e o
   balão explica onde a procurar antes de desistir dela. */

.ma-sem-hora {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* O botão de ajuda, e a âncora do balão: o balão posiciona-se em relação a
   ele, por isso o `position: relative` não é decorativo. */
.ma-ajuda-hora {
    position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #7718b6;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    cursor: help;
}

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

/* O balão. Feito em CSS e não com o tooltip do Bootstrap porque esta landing
   é pública e não carrega o JS do painel - depender dele deixava o texto
   invisível a quem mais precisa dele. */
.ma-ajuda-hora::after {
    content: attr(data-balao);
    position: absolute;
    bottom: calc(100% + 10px);
    right: -8px;
    z-index: 30;
    width: max-content;
    max-width: 20rem;
    padding: .75rem .9rem;
    border-radius: 8px;
    background: #241b3a;
    color: #fff;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

/* A bica do balão, apontada ao botão. */
.ma-ajuda-hora::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    right: 4px;
    z-index: 31;
    border: 7px solid transparent;
    border-top-color: #241b3a;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.ma-ajuda-hora:hover::after,
.ma-ajuda-hora:focus::after,
.ma-ajuda-hora:hover::before,
.ma-ajuda-hora:focus::before {
    opacity: 1;
    visibility: visible;
}

/* O campo desligado tem de PARECER desligado, senão a pessoa tenta escrever
   nele e não percebe porque não escreve. */
/* Classe e não ID: o campo chama-se `hora_nasc` na landing e `create_hora_nasc`
   no modal, e um seletor por ID deixava um dos dois sem estilo. Prefixada
   `ma-` como tudo neste ficheiro, que agora também carrega no painel. */
.ma-hora-campo:disabled {
    background: #f1f2f5;
    color: #9aa0ab;
    cursor: not-allowed;
}

.ma-aviso-hora {
    color: #6B7280;
    border-left: 3px solid #7718b6;
    padding-left: .6rem;
}

/* No cabeçalho da leitura, quando a hora foi presumida. Discreto de propósito:
   informa sem estragar a apresentação do mapa. */
.ma-hora-presumida {
    font-style: italic;
    color: #8a8a9a;
}

@media (max-width: 575.98px) {
    /* Num ecrã estreito o balão ancorado à direita saía fora da página. */
    .ma-ajuda-hora::after {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        max-width: 88vw;
    }
    .ma-ajuda-hora::before { right: auto; left: calc(50% - 7px); }
}