/*
===============================================================================
Projeto......: Pointer Comunidade - Plataforma Web
Arquivo......: principal.css
Descrição....: Estilos gerais do sistema.
Autor........: Alexandre / ChatGPT
Versão.......: 1.0.0
Data.........: 17/07/2026
===============================================================================
*/

:root
{
    --cor-branco:      #FFFFFF;
    --cor-azul:        #213542;
    --cor-laranja:     #FF8000;
    --cor-prata:       #C0C0C0;

    --texto-principal: #333333;
    --texto-secundario:#666666;
    --texto-claro:     #FFFFFF;
}

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body
{
    background:var(--cor-branco);
    color:var(--texto-principal);
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:1.5;
}

a
{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea
{
    font-family:inherit;
    font-size:inherit;
}

.label-ajuda
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.icone-ajuda
{
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1976d2;
    color: #fff;

    font-size: 12px;
    font-weight: bold;

    cursor: pointer;

    position: relative;

    user-select: none;
}

.icone-ajuda:hover::after,
.icone-ajuda:focus::after
{
    content: attr(data-ajuda);

    position: absolute;

    left: 50%;
    top: 120%;

    transform: translateX(-50%);

    width: 260px;

    padding: 10px 12px;

    background: #222;
    color: #fff;

    border-radius: 8px;

    font-size: 13px;
    font-weight: normal;
    line-height: 1.4;

    z-index: 999;
}

.icone-ajuda:hover::before,
.icone-ajuda:focus::before
{
    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translateX(-50%);

    border: 7px solid transparent;
    border-bottom-color: #222;
}