/* =======================================================================================================================================================================================================================================
CSS básico de todo o site, adicionado a todas as páginas − HTML e corpo usando toda a área disponível, exibição “flex” na coluna, para preencher toda a altura, mesmo que não haja conteúdo disponível
Obs.: 100dvh para não dar problemas em dispositivos móveis, com porções retráteis e altura dinâmica (navegadores modernos OK, antigos vão usar 100vh), acusa erro neste editor, pois é muito recente
A classe MenuAberto é usada para o bloqueio de rolamento do elemento BODY, quando o menu estiver aberto
======================================================================================================================================================================================================================================= */
html, body { margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh; }
body { display: flex; flex-direction: column; }
.MenuAberto { overflow: hidden; touch-action: none; }
/* =======================================================================================================================================================================================================================================
Ajuste extra para telas grandes − implementado com o menu lateral
======================================================================================================================================================================================================================================= */
@media (min-width: 900px) { #Menu { width: 300px; right: -300px; } }
/* =======================================================================================================================================================================================================================================
Boas práticas: os estilos de títulos devem ser definidos de forma não qualificada (#DIV h1), mas diretamente
======================================================================================================================================================================================================================================= */
h1 { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 20pt; font-weight: bold; color: rgb(138, 90, 34); }
h2 { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-weight: bold; color: rgb(138, 90, 34); }
h3 { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-weight: bold; font-style: italic; color: rgb(138, 90, 34); }
h4 { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; color: rgb(138, 90, 34); }
h5 { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: bold; }
h6 { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-decoration: underline; }
/* =======================================================================================================================================================================================================================================
[Z-INDEX 10!] Sobreposição − sobrepõe toda a página, para receber o clique que fecha o menu − no lugar de top/bottom/left/right, póderia ser simplesmente “inset: 0;”, mas este editor fica acusando erro...
Desnecessário especificar background com rgba(0, 0, 0, 0.XX), pois trata-se apenas de um DIV de sobreposição, totalmente sem conteúdo, e rgb(0, 0, 0) com opacity já dão conta do recado
IMPORTANTE! definição de estilo Sobreposicao.Ativa SEM espaço antes do ponto porque ambos os estilos serão usados no mesmo elemento!
======================================================================================================================================================================================================================================= */
#Sobreposicao { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgb(0, 0, 0); opacity: 0.05; visibility: hidden; transition: 0.3s; z-index: 10; }
#Sobreposicao.Ativa { visibility: visible; }
/* =======================================================================================================================================================================================================================================
Cabeçalho: dentro do flex, vai ocupar a altura necessária para seus elementos internos, exceto o menu, que possui posição fixa
======================================================================================================================================================================================================================================= */
#Cabecalho { background: rgb(193, 254, 194); padding: 0.5rem; display: flex; align-items: center; border-bottom: 3px solid black; }
#Cabecalho p { margin: 0; }
/* =======================================================================================================================================================================================================================================
[Z-INDEX 11!] Foto do perfil (dentro de Cabecalho)
IMPORTANTE! definição de estilo Perfil .Foto COM espaço antes do ponto porque representa hierarquia: elemento com classe “.Foto” tem que estar dentro de elemento com ID “Perfil”
Poderia ter object-fit: cover ou contais, para garantir que a foto não distorça, mas este editor acusa erro, e é desnecessária, pois a fotos e as medidas estão na proporção
======================================================================================================================================================================================================================================= */
#Perfil { margin-left: auto; margin-right: 0; z-index: 11; }
#Perfil .Foto { margin-left: auto; margin-right: 15px; border-radius: 50%; width: 40px; height: 40px; }
/* =======================================================================================================================================================================================================================================
[Z-INDEX 12!] Ícone de acionamento tipo “hamburger” que vira “X” (dentro de Cabecalho) para abrir o Menu lateral − margin-left auto para “empurrar” para a direita no flex do cabeçalho
Quanto à mensagem “using width with padding can sometimes make elements larger than you expect.”, solução apontada pelo Google:
box-sizing: border-box;
Porém isso fez o “hamburger” ficar menor, esquisito...
IMPORTANTE! definição de estilo Hamburger.Ativo SEM espaço antes do ponto porque ambos os estilos serão usados no mesmo elemento!
======================================================================================================================================================================================================================================= */
#Hamburger { margin-left: 0; margin-right: 15px; cursor: pointer; width: 32px; padding: 8px; z-index: 12; }
#Hamburger span { display: block; height: 3px; background: rgb(0, 0, 0); margin: 6px 0; transition: all 0.3s ease; }
#Hamburger.Ativo span:nth-child(1) { transform: translateY(9px) rotate(-45deg); }
#Hamburger.Ativo span:nth-child(2) { opacity: 0; }
#Hamburger.Ativo span:nth-child(3) { transform: translateY(-9px) rotate(45deg); }
/* =======================================================================================================================================================================================================================================
[Z-INDEX 13!] Menu lateral à direita (dentro de Cabecalho) − max-width 85vw importante no mobile pequeno
A partir do 2º nível (“Menu ul ul”), submenus (inicialmente ocultos, controle via JS), mais à direita a cada nível (normalmente, até uns 8 a 10 níveis vai numa boa)
Para menu claro com letras escuras: background do menu pode ser branco (tudo 255), color em ul li a pode ser preta e background de ul i a:hover também pode ser preto, com opacidade baixa (por exemplo, 0.05)
OBS.: definição “Menu ul ul {...}” poderia ser substituída pelas forma mais moderna “& ul {...}” dentro de “Menu ul”, mas navegadores mais antigos podem não suportar, e este editor fica acusando erro...
IMPORTANTE! definição de estilo a.active SEM espaço antes do ponto porque ambos os estilos serão usados no mesmo elemento!
======================================================================================================================================================================================================================================= */
#Menu { position: fixed; right: -260px; width: 260px; max-width: 85vw; background: rgb(32, 84, 120); background: rgba(32, 84, 120, 0.98); box-shadow: -3px 0 15px rgba(0, 0, 0, 0.25); transition: right 0.3s ease; z-index: 13; overflow-y: auto; }
#Menu.Aberto { right: 0; }
#Menu ul { list-style: none; padding: 5px; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
#Menu ul li { margin-bottom: 2px; }
#Menu ul li a { display: block; padding: 10px 5px; text-decoration: none; color: white; border-radius: 5px; transition: background 0.2s; }
#Menu ul li a:hover { background: rgb(33, 122, 35); background: rgba(33, 122, 35, 0.98); }
#Menu ul li a.active { background: rgb(135, 86, 35); background: rgba(135, 86, 35, 0.98); }
#Menu ul li a.active:hover { background: rgb(145, 96, 41); background: rgba(145, 96, 41, 0.98); }
#Menu ul ul { display: none; padding: 0; margin-left: 15px; }
/* =======================================================================================================================================================================================================================================
Rodapé bem simples: dentro do flex, vai ocupar a altura necessária para seus elementos internos
======================================================================================================================================================================================================================================= */
#Rodape { border-top: 2px solid black; background: rgb(218, 218, 218); text-align: right; padding: 1%; }
#Rodape p { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }
/* =======================================================================================================================================================================================================================================
Conteúdo − definição e vários estilos: devido ao flex 1, vai ocupar a altura necessária para preencher a altura dentro do flex
IMPORTANTE! definição de estilos COM espaço antes do ponto porque representam hierarquia − exemplo: elemento com classe “.li-gd” dentro de elemento com ID “Conteudo”
======================================================================================================================================================================================================================================= */
#Conteudo { flex: 1; margin: 0.25rem 0.5rem 1rem 0.5rem; width: auto; }
#Conteudo .Normal { overflow: hidden; }
#Conteudo .BordaTenue { padding: 2%; border-width: thin; border-style: outset; border-color: white; overflow: hidden; }
#Conteudo a:link { color: rgb(0, 0, 237); }
#Conteudo a:visited { color: rgb(237, 148, 112); }
#Conteudo a:active { color: rgb(254, 128, 66); }
#Conteudo a:hover { color: rgb(255, 50, 40); }
#Conteudo p { margin: 1em 0 0.5em; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo dl { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo dt { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo dd { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo ul { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo ol { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo li { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo .li-gd { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20pt; }
#Conteudo .li-md { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 15pt; }
#Conteudo th { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; font-weight: bold; text-align: center; color: rgb(135, 85, 34); background-color: rgb(218, 225, 236); }
#Conteudo tr { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; }
#Conteudo tr:nth-child(even) { background-color: rgb(208, 234, 223); }
#Conteudo tr:nth-child(odd) { background-color: rgb(223, 234, 208); }
#Conteudo td { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
#Conteudo .td-c { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-align: center; }
#Conteudo .td-d { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-align: right; }
#Conteudo .td-b { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; }
#Conteudo .td-bc { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-align: center; }
#Conteudo .td-bd { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; text-align: right; }
#Conteudo .td-i { font-family: Arial, Helvetica, sans-serif; font-size: 10pt;  font-style: italic; }
#Conteudo .td-ic { font-family: Arial, Helvetica, sans-serif; font-size: 10pt;  font-style: italic; text-align: center; }
#Conteudo .td-id { font-family: Arial, Helvetica, sans-serif; font-size: 10pt;  font-style: italic; text-align: right; }
#Conteudo .select-big { font-family: Arial, Helvetica, sans-serif; font-size: 20pt; }
#Conteudo .p-d { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-align: right; }
#Conteudo .p-c { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-align: center; }
#Conteudo .p-j { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; text-align: justify; }
#Conteudo .stl textarea, #Conteudo .stl input[type=text], #Conteudo .stl input[type=password], #Conteudo .stl input[type=number], #Conteudo .stl input[type=currency] .stl { background: rgb(236, 246, 253); border: 1px solid black; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; -moz-border-radius: 4px; -moz-box-shadow: 1px 1px 2px rgb(37, 48, 54); -webkit-border-radius: 4px; -webkit-box-shadow: 1px 1px 2px rgb(37, 48, 54); border-radius: 4px; box-shadow: 1px 1px 2px rgb(37, 48, 54); }
#Conteudo .stl textarea:hover, #Conteudo .stl input[type=text]:hover, #Conteudo .stl input[type=password]:hover, #Conteudo .stl input[type=number]:hover, #Conteudo .stl input[type=currency]:hover .stl { background: white; }
#Conteudo input[type=submit] { background: rgb(8, 91, 142); color: white; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; }
#Conteudo input[type=submit] { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
#Conteudo input[type=submit]:hover { background: rgb(4, 130, 80); }
#Conteudo input[type=checkbox] { margin:0 0 0 0; vertical-align: middle; position: relative; top: -1px; }