/* ============================================================
PALETAS DO PORTAL DO CIDADÃO
------------------------------------------------------------
Fonte única das cores. Antes disto os mesmos valores estavam
repetidos em doze páginas — e já tinham divergido: mz/carteira
usava #12325C onde as outras usavam #002E64.
A paleta escolhe-se com data-tema no :
(nenhum) verde gov.mz, o padrão
contraste contraste reforçado, para baixa visão
institucional azul do Estado
escuro fundo escuro
Regra ao mexer nisto: nunca escrever uma cor directamente numa
página. Se faltar um token, acrescenta-se aqui e define-se nas
quatro paletas — senão a página fica legível numa e ilegível
nas outras.
============================================================ */
:root {
/* marca */
--mz-verde: #045c31;
--mz-verde-esc: #033f21;
--mz-verde-vivo: #067a41;
--mz-azul: #002e64;
--mz-amarelo: #ffd100;
/* texto por cima de uma cor de marca. A marca é superfície escura nas
quatro paletas, por isso este token é branco nas quatro — existe para
que uma paleta futura o possa inverter sem partir as páginas. */
--tinta-marca: #ffffff;
/* superfícies */
--papel: #ffffff;
--fundo: #f4f6f5;
--fundo-2: #f1f4f2;
/* tinta */
--tinta: #1f2d27;
--tinta-2: #2c3733;
--tinta-3: #586661;
/* #6f7973 e não #8a938e: o cinza original dava 3.16:1 sobre branco, abaixo
do mínimo da WCAG para texto normal. Este é o valor mais claro do mesmo
tom que passa (4.51:1) — escurecer mais só tornaria a página mais pesada
sem ganho nenhum. */
--cinza: #6f7973;
--cinza-2: #93a09a;
/* traços */
--linha-suave: #eef2f0;
--linha: #e6ebe8;
--linha-2: #e0e6e3;
--linha-forte: #cdd6d1;
/* tintas de marca */
--verde-fundo: #e4f4ea;
--verde-fundo-2: #eef6f1;
--verde-linha: #bfe3cf;
--azul-fundo: #e6eef8;
/* estados */
--ambar: #e6a700;
--ambar-texto: #886b00;
--ambar-fundo: #fff4d6;
--ambar-fundo-2: #fff8e6;
--ambar-linha: #f0d17a;
--vermelho: #c0392b;
--vermelho-esc: #a5281b;
--vermelho-fundo: #fbe4e1;
}
/* ---------- alto contraste ----------
Texto quase preto sobre branco puro, traços visíveis e marca
escurecida. Os fundos de estado perdem saturação para o texto
por cima passar folgado nos rácios da WCAG. */
:root[data-tema="contraste"] {
--mz-verde: #023d20;
--mz-verde-esc: #012614;
--mz-verde-vivo: #045c31;
--mz-azul: #001a3d;
--tinta-marca: #ffffff;
--papel: #ffffff;
--fundo: #ffffff;
--fundo-2: #f2f2f2;
--tinta: #000000;
--tinta-2: #111111;
--tinta-3: #2b2b2b;
--cinza: #4a4a4a;
--cinza-2: #4a4a4a;
--linha-suave: #c9c9c9;
--linha: #9a9a9a;
--linha-2: #8a8a8a;
--linha-forte: #5a5a5a;
--verde-fundo: #e8f3ec;
--verde-fundo-2: #eef6f1;
--verde-linha: #023d20;
--azul-fundo: #e6eef8;
--ambar: #7a5c00;
--ambar-texto: #4a3800;
--ambar-fundo: #fff6da;
--ambar-fundo-2: #fffaea;
--ambar-linha: #7a5c00;
--vermelho: #8c1c10;
--vermelho-esc: #6b1109;
--vermelho-fundo: #fbe6e3;
}
/* ---------- institucional ---------- */
:root[data-tema="institucional"] {
--mz-verde: #123c6b;
--mz-verde-esc: #002e64;
--mz-verde-vivo: #1a5490;
--mz-azul: #002e64;
--tinta-marca: #ffffff;
--verde-fundo: #e6eef8;
--verde-fundo-2: #eff4fa;
--verde-linha: #b9cee8;
}
/* ---------- escuro ----------
A primeira versão desta paleta clareava a marca (--mz-verde: #5cb583) por
analogia com o texto: no escuro tudo o que é tinta clareia. Mas --mz-verde
quase nunca é tinta — é SUPERFÍCIE. Pinta o herói, os botões e os topos dos
cartões. Um verde claro a cobrir meio ecrã sobre uma página escura salta à
vista, e o texto branco que essas zonas já traziam caía para 2.50:1, abaixo
do mínimo de 4.5 da WCAG.
A marca fica escura em todas as paletas, como superfície que é, e é o
--mz-verde-vivo que passa a servir de marca-como-texto sobre fundo escuro.
Medido: branco sobre a marca 12.22:1, marca-texto sobre a página 9.22:1. */
:root[data-tema="escuro"] {
--mz-verde: #0f3d28;
--mz-verde-esc: #0a2a1b;
--mz-verde-vivo: #7ac79c;
--mz-azul: #7fabd9;
/* volta a branco: a superfície de marca é escura, como nas outras paletas */
--tinta-marca: #ffffff;
--papel: #171f1b;
--fundo: #0f1512;
--fundo-2: #1b241f;
--tinta: #e8efe9;
--tinta-2: #dbe4dd;
--tinta-3: #b3c0b8;
--cinza: #8b9a92;
--cinza-2: #7d8c84;
/* Os traços vinham escurecidos por simetria com a paleta clara e ficavam
invisíveis: --linha-forte dava 1.89:1 sobre o papel escuro. Num fundo
escuro um traço tem de CLAREAR para se ver. #5c6d64 é o tom mais discreto
que passa o mínimo de 3:1 para elementos não textuais. */
--linha-suave: #2a3630;
--linha: #3a4a42;
--linha-2: #42544b;
--linha-forte: #5c6d64;
--verde-fundo: #14301f;
--verde-fundo-2: #16281d;
--verde-linha: #2c5c3e;
--azul-fundo: #152436;
--ambar: #d8a63f;
--ambar-texto: #e0b45a;
--ambar-fundo: #2e2510;
--ambar-fundo-2: #261f0d;
--ambar-linha: #54421a;
--vermelho: #e08471;
--vermelho-esc: #eb9c8b;
--vermelho-fundo: #331912;
}
/* No escuro, o corpo e os componentes do Bootstrap não conhecem os
tokens — pintam-se aqui, senão fica texto claro sobre fundo claro. */
:root[data-tema="escuro"] body { background: var(--fundo); color: var(--tinta); }
:root[data-tema="escuro"] .card,
:root[data-tema="escuro"] .modal-content,
:root[data-tema="escuro"] .dropdown-menu,
:root[data-tema="escuro"] .list-group-item,
:root[data-tema="escuro"] .bg-white { background: var(--papel) !important; color: var(--tinta); }
:root[data-tema="escuro"] .form-control,
:root[data-tema="escuro"] .form-select {
background: var(--fundo-2); color: var(--tinta); border-color: var(--linha-forte);
}
:root[data-tema="escuro"] .form-control::placeholder { color: var(--cinza); }
:root[data-tema="escuro"] .table { color: var(--tinta); }
:root[data-tema="escuro"] .text-muted { color: var(--cinza) !important; }
:root[data-tema="escuro"] .gz-cabecalho,
:root[data-tema="escuro"] .navbar,
:root[data-tema="escuro"] footer { background: var(--papel) !important; }
:root[data-tema="escuro"] img[src*="positivo"] { filter: brightness(0) invert(1); }
/* ---------- ponte para as variáveis do tema ----------
O tema govmz tem o seu próprio sistema (--gz-*), definido em style.all.css.
Como esta folha carrega depois, redefini-lo aqui faz o tema inteiro seguir a
paleta — sem tocar num único ficheiro de terceiros e sem perseguir selectores
um a um. Foi assim que os botões do Bootstrap, como o «Pesquisar», deixaram
de ficar verdes em todas as paletas.
A escala de verdes colapsa nos três tons de marca. Depois da correcção da
paleta escura, --mz-verde-esc é mais escuro do que --mz-verde em TODAS as
paletas — a escala já não se inverte, e o que é superfície mantém-se
superfície em qualquer tema. */
:root {
--gz-verde-50: var(--verde-fundo-2);
--gz-verde-100: var(--verde-linha);
--gz-verde-500: var(--mz-verde-vivo);
--gz-verde-600: var(--mz-verde);
--gz-verde-700: var(--mz-verde-esc);
--gz-verde-800: var(--mz-verde-esc);
--gz-verde-900: var(--mz-verde-esc);
--gz-cinza-50: var(--fundo);
--gz-cinza-100: var(--linha-suave);
--gz-cinza-200: var(--linha);
--gz-cinza-300: var(--linha-forte);
--gz-cinza-600: var(--tinta-3);
--gz-tinta: var(--tinta);
--gz-amarelo: var(--mz-amarelo);
--gz-info: var(--mz-azul);
--gz-alerta: var(--ambar-texto);
}
/* O Bootstrap pinta com as suas próprias variáveis; sem isto, tabelas, listas
e componentes que não estejam explicitamente sobrepostos aqui ficariam com
fundo branco no tema escuro. */
:root {
--bs-body-bg: var(--fundo);
--bs-body-color: var(--tinta);
--bs-border-color: var(--linha);
--bs-secondary-color: var(--cinza);
--bs-emphasis-color: var(--tinta);
--bs-link-color: var(--mz-verde);
--bs-link-hover-color: var(--mz-verde-esc);
}
:root[data-tema="escuro"] body { background: var(--fundo); color: var(--tinta); }
:root[data-tema="escuro"] .card,
:root[data-tema="escuro"] .modal-content,
:root[data-tema="escuro"] .dropdown-menu,
:root[data-tema="escuro"] .list-group-item,
:root[data-tema="escuro"] .accordion-item,
:root[data-tema="escuro"] .accordion-button,
:root[data-tema="escuro"] .bg-white,
:root[data-tema="escuro"] .bg-light { background: var(--papel) !important; color: var(--tinta); }
:root[data-tema="escuro"] .form-control,
:root[data-tema="escuro"] .form-select,
:root[data-tema="escuro"] .input-group-text {
background: var(--fundo-2); color: var(--tinta); border-color: var(--linha-forte);
}
:root[data-tema="escuro"] .form-control::placeholder { color: var(--cinza); }
:root[data-tema="escuro"] .table { --bs-table-bg: transparent; color: var(--tinta); }
:root[data-tema="escuro"] .text-muted,
:root[data-tema="escuro"] .text-secondary { color: var(--cinza) !important; }
:root[data-tema="escuro"] .gz-cabecalho,
:root[data-tema="escuro"] .navbar,
:root[data-tema="escuro"] footer,
:root[data-tema="escuro"] .gz-rodape { background: var(--papel) !important; }
:root[data-tema="escuro"] hr { border-color: var(--linha); }
/* O logótipo é uma versão positiva, feita para fundo claro. */
:root[data-tema="escuro"] img[src*="positivo"] { filter: brightness(0) invert(1); }
/* ---------- selo de estado ----------
A cor sozinha não chega: cerca de 8% dos homens não distingue
vermelho de verde, e para essas pessoas «Concluído» e «Indeferido»
eram o mesmo selo. O ícone e o contorno resolvem-no em qualquer
paleta, e também num ecrã a preto e branco ou impresso. */
.selo-estado {
display: inline-flex; align-items: center; gap: .35rem;
padding: .22rem .6rem; border-radius: 2rem;
font-size: .78rem; font-weight: 700; white-space: nowrap;
border: 1px solid transparent;
}
.selo-estado::before { font-weight: 900; font-size: .9em; line-height: 1; }
.selo-estado.e-concluido { background: var(--verde-fundo); color: var(--mz-verde); border-color: var(--verde-linha); }
.selo-estado.e-concluido::before { content: "\2713"; }
.selo-estado.e-analise { background: var(--azul-fundo); color: var(--mz-azul); border-color: var(--mz-azul); }
.selo-estado.e-analise::before { content: "\21BB"; }
.selo-estado.e-pendente { background: var(--ambar-fundo); color: var(--ambar-texto); border-color: var(--ambar-linha); }
.selo-estado.e-pendente::before { content: "\0021"; }
.selo-estado.e-indeferido { background: var(--vermelho-fundo); color: var(--vermelho-esc); border-color: var(--vermelho); }
.selo-estado.e-indeferido::before { content: "\2715"; }
.selo-estado.e-submetido { background: var(--fundo-2); color: var(--tinta-3); border-color: var(--linha-forte); }
.selo-estado.e-submetido::before { content: "\2192"; }
/* ---------- escolher paleta ---------- */
.paleta-envolve { position: relative; display: inline-block; }
.paleta-botao {
border: 1px solid var(--linha-forte); background: var(--papel); color: var(--tinta-3);
border-radius: 2rem; padding: .25rem .7rem; font-size: .8rem; font-weight: 600;
cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; line-height: 1.4;
}
.paleta-botao:hover, .paleta-botao:focus-visible { border-color: var(--mz-verde); color: var(--mz-verde); }
.paleta-lista {
position: absolute; right: 0; top: calc(100% + .4rem); z-index: 1100;
background: var(--papel); border: 1px solid var(--linha); border-radius: .5rem;
box-shadow: 0 8px 26px rgba(0,0,0,.16); padding: .3rem; min-width: 14rem;
}
.paleta-lista[hidden] { display: none; }
.paleta-opcao {
display: flex; align-items: flex-start; gap: .55rem; width: 100%;
border: 0; background: none; color: var(--tinta-2); text-align: left;
padding: .45rem .55rem; border-radius: .35rem; font-size: .85rem; cursor: pointer;
}
.paleta-opcao:hover, .paleta-opcao:focus-visible { background: var(--fundo-2); }
.paleta-opcao[aria-checked="true"] { color: var(--mz-verde); font-weight: 700; }
.paleta-opcao .amostra {
width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: none; margin-top: .15rem;
border: 1px solid rgba(128,128,128,.35);
}
.paleta-opcao .desc { display: block; font-size: .74rem; font-weight: 400; color: var(--cinza); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* GOVMZ */
.btn-outline-primary {
border-color: var(--mz-verde) !important;
color: var(--mz-verde) !important;
}
.btn-outline-primary:hover {
background: var(--mz-verde) !important;
color: var(--tinta-marca) !important;
}
.text-primary {
color: var(--mz-verde) !important;
}
.bg-primary {
background: var(--mz-verde) !important;
}
.btn-primary {
background: var(--mz-verde) !important;
border-color: var(--mz-verde) !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
background: var(--mz-verde) !important;
border-color: var(--mz-verde) !important;
}
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
background: var(--mz-verde-esc) !important;
color: var(--tinta-marca) !important;
}
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:hover {
background: var(--linha) !important;
color: var(--mz-verde) !important;
border: 1px solid var(--mz-verde) !important;
}
.float-right, .pull-right {
float: right !important;
}
.float-left , .pull-left {
float: left !important;
}
.linha_separadora {
margin: 3% 0;
}
/* áea reservada - gov - tabelas de serviço e pedidos/registos */
.table-sm {
font-size: 14px;
}
.dropdown-menu {
padding: 10px;
}
/* tabelas de serviço e pedidos/registos */
a.social i {
font-size: 20px;
vertical-align: middle;
}
.icons-topo i {
font-size: 20px;
vertical-align: middle;
margin: 0 0 0 2px;
}
a.idioma {
overlay: none;
}
.logo_footer {
max-height: 40px;
}
/*
eLoja
*/
.catalogo_eloja .grx__content{
padding-top:1%;
}
.catalogo_eloja .grx__wrapper{
margin: 2% auto;
}
.catalogo_eloja .eloja_header {
text-align: center;
}
.catalogo_eloja .eloja_header h1.titulo {
margin: 1% auto 2.5%;
font-size: 45px;
font-weight: 600;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .eloja_header .subtitulo {
margin: 4% 0px 2%;
font-size: 30px;
font-weight: 500;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .eloja_header .texto{
margin: 2% 0px 2.3%;
font-size: 30px;
font-weight: 500;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .eloja_header h2.titulo {
margin: 4% 0px 2%;
font-size: 30px;
font-weight: 500;
letter-spacing: 1px;
color: var(--tinta);
}
.catalogo_eloja .texto,
.catalogo_eloja .slogan{
font-size: 35px;
font-weight: 300;
line-height: 1.11;
text-align: center;
color: var(--tinta);
margin: -20px auto 30px;
}
.catalogo_eloja .lista-produtos{
margin:auto -15px;
}
.catalogo_eloja .mosaico {
height: 285px;
overflow:hidden;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
background-color: var(--papel);
padding:15px;
cursor:default;
text-decoration: none;
box-sizing: border-box;
}
.catalogo_eloja .mosaico .url:hover{
text-decoration: none;
}
.catalogo_eloja .mosaico .titulo {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.44px;
margin: 10px 0;
color: var(--tinta);
font-size: calc(18px + 0.3vw);
}
.catalogo_eloja .mosaico .subtitulo {
margin: 0px 0 25px;
font-size: calc(12px + 0.3vw);
line-height: 1.17;
color: var(--tinta);
}
.catalogo_eloja .mosaico .preco {
margin: 10px 0;
font-size: 22px;
font-weight: bold;
color: var(--tinta);
}
.catalogo_eloja .mosaico .sabermais {
margin: 15px 0;
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: var(--tinta);
cursor:pointer;
text-decoration: underline;
}
.catalogo_eloja .mosaico .icon {
margin: 20px 0 20px;
max-height:80px;
max-width:100%;
}
.catalogo_eloja .destaque_secundario {
background-color: var(--fundo);
text-align:center;
display: block;
padding:2% 0 4%;
}
.catalogo_eloja .destaque_secundario h3 {
padding:0 0 1%;
font-size: 30px;
font-weight: 600;
color: var(--tinta);
}
.catalogo_eloja .destaque_secundario p {
font-size: 23px;
line-height: 0.92;
letter-spacing: -0.44px;
text-align: center;
color: var(--tinta);
}
.catalogo_eloja .destaque_secundario iframe,
.catalogo_eloja .destaque_secundario frame,
.catalogo_eloja .destaque_secundario .video{
margin: 2% auto;
width:92%;
max-width:800px;
display:blok;
clear: both;
}
.catalogo_eloja .destaque_secundario a.button{
clear: both;
}
.destaques_eloja{
margin:4% auto !important;
backgroung:blue;
display: block;
}
.destaques_eloja .mosaico{
width: 390px;
height: 400px;
}
.destaques_eloja img{
width: 100%;
height: 300px;;
object-fit: cover;
}
.destaques_eloja .titulo{
margin:15px 0px 0px;
font-size: 20px;
font-weight: 600;
line-height: 0.92;
letter-spacing: -0.44px;
color: var(--tinta);
}
.destaques_eloja .subtitulo{
font-size: 16px;
color: var(--cinza-2);
font-weight: normal;
}
.destaques_eloja .sabermais{
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: var(--tinta);
}
.catalogo_separadores ul.menu_subcategorias,
.catalogo_separadores ul.menu_sub_subcategorias {
list-style: none;
text-align:center;
padding:0;
}
.catalogo_separadores ul.menu_subcategorias li,
.catalogo_separadores ul.menu_sub_subcategorias li {
display: inline-block;
margin:10px 20px;
}
.catalogo_separadores ul.menu_subcategorias li a,
.catalogo_separadores ul.menu_sub_subcategorias li a {
color:var(--cinza-2);
}
.catalogo_separadores ul.menu_subcategorias .active,
.catalogo_separadores ul.menu_sub_subcategorias .active {
color:var(--tinta);
}
.catalogo_separadores ul.menu_subcategorias li a {
font-size: 16px;
font-weight: 600;
}
.catalogo_separadores .artigo{
min-height: 450px;
}
.catalogo_separadores .artigo a{
text-decoration: none;
}
.catalogo_separadores .artigo .titulo{
font-size: 16px;
font-weight: 600;
height:30px;
}
.lista-produtos .card {
background-color: var(--fundo);
}
.compromisso_honra label{
text-align: justify;
font-size: 14px;
display: inline;
font-weight: normal;
cursor: pointer;
}
.termos_condicoes label{
text-align: justify;
font-size: 14px;
display: inline;
font-weight: normal;
cursor: pointer;
}
.catalogo_categoria .lista-produtos{
margin:auto -15px;
}
.catalogo_categoria .mosaico {
height: 285px;
overflow:hidden;
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18);
background-color: var(--papel);
padding:15px;
cursor:default;
text-decoration: none;
box-sizing: border-box;
margin-bottom: 20px;
}
.catalogo_categoria .mosaico.categorias{
height: 245px;
}
.catalogo_categoria .mosaico .url:hover{
text-decoration: none;
}
.catalogo_categoria .mosaico .titulo {
font-size: 22px;
font-weight: 500;
letter-spacing: -0.44px;
margin: 10px 0;
color: var(--tinta);
font-size: calc(16px + 0.3vw);
/*height:70px;
overflow: hidden;*/
}
.catalogo_categoria .mosaico .subtitulo {
margin: 0px 0 25px;
font-size: calc(12px + 0.3vw);
line-height: 1.17;
color: var(--tinta);
}
.catalogo_categoria .mosaico .preco {
margin: 10px 0;
font-size: 22px;
font-weight: bold;
color: var(--tinta);
}
.catalogo_categoria .mosaico .sabermais {
margin: 15px 0;
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: var(--tinta);
cursor:pointer;
text-decoration: underline;
}
.catalogo_categoria .mosaico .icon {
margin: 20px 0 20px;
max-height:80px;
max-width:100%;
}
.table th:last-child,
.table td:last-child {
text-align: right;
}
.table td.truncate{
white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;
}
.modal-dialog {
width:100% !important;
max-width: 90% !important;
}
@media(max-width: 560px){
.btn-group {
display: flex;
flex-direction: column;
}
.btn-group .btn {
margin: 2px 0;
border-radius: 0;;
}
}
/* novo estilo dos formulários -start */
.registos_editar .nav-tabs a.nav-link {
font-size: 14px;
text-transform: uppercase;
}
.registos_editar .nav-tabs a.nav-link.active {
background-color: var(--fundo);
}
.formulario legend,
.apresentacao legend{
font-size: 16px;
border-bottom: 1px solid var(--cinza);
padding-bottom: 10px;
margin-bottom: 20px;
font-weight: 600;
}
.formulario .grupo,
.apresentacao .grupo {
padding: 8% 10% 8%;
border-radius: 0px;
border: 1px solid var(--linha);
background-color: var(--papel);
}
.formulario .grupo i,
.apresentacao .grupo i{
color: var(--tinta-3);
font-size: 0.76em;
}
.formulario .grupo:empty,
.apresentacao .grupo:empty {
background-color: transparent;
border-color: transparent;
}
.formulario .separador,
.apresentacao .separador {
margin: 0px;
}
.formulario fieldset fieldset,
.apresentacao fieldset fieldset {
height: 100%;
}
.formulario
{
background-color: var(--fundo);
padding: 1% 3% 3%;
border: 1px solid var(--linha);
border-radius: 5px;
border-top: 0px;
}
.formulario input:not(input[type=submit]), .formulario select, .formulario textarea {
}
/* Only apply to input elements with type="text" or similar, and readonly attribute */
input[readonly] {
color: var(--cinza-2) !important;
background-color: var(--fundo-2) !important;
pointer-events: none;
user-select: none;
}
.formulario label{
font-weight: 500;
margin-bottom: 3px;
}
.formNovoStepControl{
float: none !important;
text-align: right !important;
margin: 30px 0 0 0 !important;
min-height: 44px;
display: block;
}
.apresentacao {
padding: 0;
}
.apresentacao .separador:first-child {
margin-top: -10px;
}
.apresentacao .separador .grupo{
margin: 10px 0 0px;
--bs-bg-opacity: 1;
/*background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;*/
border: 1px solid rgba(0, 0, 0, 0.1);
}
.apresentacao .separador .grupo p{
margin: 0 0 7px;
color: var(--tinta-3);
}
.apresentacao .separador .grupo p label{
font-weight: 500;
color: var(--tinta);
}
.row.equal-cols {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row.equal-cols:before,
.row.equal-cols:after {
display: block;
}
.row.equal-cols > [class*='col-'] {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.row.equal-cols > [class*='col-'] > * {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
input::placeholder {
color: rgb(212, 212, 212);
}
/* novo estilo dos formulários - end */
.categorias_landignpage .card-body {
background-color: var(--fundo);
min-height: 128px;
}
.lista-produtos .card-body {
border: none;
border-radius: 10px !important;
min-height: 145px;
}
/*
.utentes > .container > h1 {
display: none;
}*/
main {
min-height: 50vh;
margin-bottom: 30px;
}
.logo-composition {
font-size: 24px;
font-weight: 200;
color: var(--gz-verde-800);
font-family: Helvetica, Arial, sans-serif;
}
.logo-composition .gz-ponto {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gz-amarelo);
margin: 0 3px;
}
.logo-composition.light {
color: var(--tinta-marca);
}
header {
background-color: var(--papel) !important;
}
.utentes_login .card-header h4 {
color: var(--tinta-marca) !important;
}
.gca .card span a {
text-decoration: none !important;
}
#noticias .titulo {
font-size: 14px !important;
}
.caixa_selecao_entidade {
width:100%;
max-width: 300px;
margin-top: -80px;
z-index: 100 !important;
position: relative;
text-align: right;
}
.intl-tel-input input[type="text"] {
padding: 8px 48px !important;
}
.opcoes2 {
min-width: 150px;
}
footer a:hover {
color: var(--linha) !important;
}
/* ============================================================
ILUSTRAÇÃO DA ASSINATURA DE DISPOSITIVOS (mz/index.html)
------------------------------------------------------------
Era um JPEG de 1200×670. As cores estavam gravadas no ficheiro,
e nenhuma variável CSS chega aos pixéis de uma imagem — por isso
ficava igual nas quatro paletas. O caso que decidiu a mudança foi
o alto contraste: existe para quem vê mal, e a ilustração
passava-lhe ao lado, verde sobre verde.
Tem de ser SVG *inline*. Um 
renderiza num
documento isolado, onde as custom properties da página não
existem — trocar o .jpg por um .svg no mesmo ![]()
não mudaria
absolutamente nada.
A divisão dos tokens é deliberada: o hardware é objecto físico e
mantém-se neutro — um portátil é cinzento seja qual for o tema.
O que está NOS ECRÃS é o portal, e esse segue a paleta.
============================================================ */
:root {
/* O que se vê NOS ecrãs. Segue a paleta por omissão, mas é token próprio
porque um ecrã numa ilustração não é uma superfície da página: emite luz.
Na paleta escura estes valores não acompanham o resto — ver mais abaixo. */
--ilu-ecra: var(--papel);
--ilu-ecra-linha: var(--linha);
--ilu-ecra-traco: var(--linha-forte);
--ilu-ecra-banda: var(--verde-linha);
--ilu-ecra-banda2: var(--verde-fundo);
--ilu-fundo: var(--mz-verde-esc);
--ilu-aparelho: #4b525b;
--ilu-aparelho-2: #575f69;
--ilu-aparelho-3: #363c44;
--ilu-tecla: #444b55;
--ilu-lcd: #9dbd8f;
--ilu-lcd-tinta: #2c4527;
--ilu-moldura: #16181c;
--ilu-metal: #c2c8cf;
--ilu-metal-2: #a7aeb7;
--ilu-metal-3: #878f99;
--ilu-teclado: #2b3038;
}
/* No alto contraste o hardware inverte: aparelhos claros sobre fundo
quase preto. Deixam de ser massas cinzentas indistintas e passam a
silhuetas com limite nítido — que é o que serve a baixa visão. */
:root[data-tema="contraste"] {
--ilu-aparelho: #cfcfcf;
--ilu-aparelho-2: #dedede;
--ilu-aparelho-3: #6a6a6a;
--ilu-tecla: #8f8f8f;
--ilu-lcd: #ffffff;
--ilu-lcd-tinta: #000000;
--ilu-moldura: #5a5a5a;
--ilu-metal: #e8e8e8;
--ilu-metal-2: #c4c4c4;
--ilu-metal-3: #9a9a9a;
--ilu-teclado: #3a3a3a;
}
/* No escuro o fundo da ilustração já é escuro; o metal sobe um pouco
para o portátil não se dissolver nele.
E os ecrãs NÃO acompanham a paleta. Deixá-los escurecer com o resto punha
o portátil todo dentro de uma faixa estreita de tons escuros — cabeçalho
verde, corpo e cartões quase indistinguíveis — e a barra de pesquisa,
pintada de --papel, virava um buraco preto no meio do ecrã. Um ecrã aceso
numa ilustração é objecto iluminado, não superfície da página. */
:root[data-tema="escuro"] {
--ilu-metal: #aeb5bd;
--ilu-metal-2: #949ba4;
--ilu-moldura: #24272d;
--ilu-ecra: #f7faf8;
--ilu-ecra-linha: #dde5e0;
--ilu-ecra-traco: #bcc7c1;
--ilu-ecra-banda: #b6d8c3;
--ilu-ecra-banda2: #e2f1e8;
}
/* O herói trazia links com class="text-white" — cor fixa. Enquanto a marca
clareou no tema escuro, isso dava 2.50:1. A marca já não clareia, mas a
cor deixa de ser fixa na mesma: segue o token da tinta sobre marca, e
volta a corrigir-se sozinha se alguma paleta futura mexer na superfície. */
.gz-heroi .text-white { color: var(--tinta-marca) !important; }
/* Sem height:auto o SVG não conserva a proporção quando a largura vem de
um clamp() — ficaria com a altura de 670px do viewBox. */
svg.gz-assinatura-dispositivos { height: auto; display: block; }
/* ============================================================
TEMA ESCURO — repintura das superfícies fixas do tema
------------------------------------------------------------
As folhas do tema escrevem background:#fff literal em cerca de
trinta sítios. Não é uma variável, logo a ponte --gz-* não lhes
chega: o fundo fica branco e a tinta, que VEM do token, clareia.
Resultado — texto claro sobre branco, ilegível.
O caso mais visível era .gz-cartao e os oito irmãos (style.all.css
linha 104), que pintam a página inicial inteira.
============================================================ */
:root[data-tema="escuro"] .gz-cartao,
:root[data-tema="escuro"] .gz-vida,
:root[data-tema="escuro"] .gz-noticia,
:root[data-tema="escuro"] .gz-servico,
:root[data-tema="escuro"] .gz-stat,
:root[data-tema="escuro"] .gz-acesso,
:root[data-tema="escuro"] .gz-config-cartao,
:root[data-tema="escuro"] .gz-noticia-destaque,
:root[data-tema="escuro"] .gz-noticia-secundaria,
:root[data-tema="escuro"] .panel,
:root[data-tema="escuro"] .well,
:root[data-tema="escuro"] .services,
:root[data-tema="escuro"] .form fieldset,
:root[data-tema="escuro"] .gz-sugestoes,
:root[data-tema="escuro"] .gz-selo,
:root[data-tema="escuro"] .gz-situacao,
:root[data-tema="escuro"] .gz-chip,
:root[data-tema="escuro"] .gz-filtro,
:root[data-tema="escuro"] .gz-entidade-chip,
:root[data-tema="escuro"] .gz-etiqueta-externo,
:root[data-tema="escuro"] .gz-paginacao a,
:root[data-tema="escuro"] .gz-paginacao span,
:root[data-tema="escuro"] .tabela_registos table,
:root[data-tema="escuro"] table.table,
:root[data-tema="escuro"] .dashboard .tags .tag,
:root[data-tema="escuro"] .gz-seleccao .icone,
:root[data-tema="escuro"] .gz-stat-rascunho .icone,
:root[data-tema="escuro"] .gz-config-cartao .campo-bloqueado {
background: var(--papel) !important;
color: var(--tinta);
border-color: var(--linha) !important;
}
:root[data-tema="escuro"] .gz-seccao-cinza { background: var(--fundo-2) !important; }
/* Botões claros do Bootstrap: fundo branco fixo, tinta do token. */
:root[data-tema="escuro"] .btn-light,
:root[data-tema="escuro"] .homepage .btn.btn-light,
:root[data-tema="escuro"] .btn-default,
:root[data-tema="escuro"] .btn-secondary,
:root[data-tema="escuro"] .btn-outline-primary,
:root[data-tema="escuro"] .btn.btn-outline-primary {
background: var(--fundo-2) !important;
color: var(--tinta) !important;
border-color: var(--linha-forte) !important;
}
/* O mesmo erro de categoria da paleta, um nível abaixo: a ponte manda
--gz-verde-500 para --mz-verde-vivo, que no escuro é a marca-TEXTO.
Mas .btn-gz-primario usa-o como FUNDO, com color:#fff por cima —
branco sobre #7ac79c dá 2.07:1. Nos botões, a marca é superfície. */
:root[data-tema="escuro"] {
--gz-verde-500: var(--mz-verde);
}
/* Links dentro das superfícies repintadas. O tema pinta-os com a marca — que
no escuro é superfície escura: dá 1.24:1 sobre o papel, invisível. Num link
a marca é TEXTO, e o token do texto é o tom vivo: 8.39:1. Os botões ficam
de fora, porque aí a marca volta a ser fundo. */
:root[data-tema="escuro"] .gz-cartao a:not(.btn),
:root[data-tema="escuro"] .gz-vida a:not(.btn),
:root[data-tema="escuro"] .gz-noticia a:not(.btn),
:root[data-tema="escuro"] .gz-servico a:not(.btn),
:root[data-tema="escuro"] .gz-stat a:not(.btn),
:root[data-tema="escuro"] .gz-acesso a:not(.btn),
:root[data-tema="escuro"] .gz-config-cartao a:not(.btn),
:root[data-tema="escuro"] .gz-noticia-destaque a:not(.btn),
:root[data-tema="escuro"] .gz-noticia-secundaria a:not(.btn),
:root[data-tema="escuro"] .gz-seccao a:not(.btn):not(.nav-link),
:root[data-tema="escuro"] .panel a:not(.btn),
:root[data-tema="escuro"] table.table a:not(.btn) {
color: var(--mz-verde-vivo);
}
/* ---------- o segundo sistema do tema: --gz2-* ----------
O tema govmz tem DUAS famílias de variáveis. A ponte acima cobria a --gz-*
e ignorava esta, que é pequena (oito) mas pinta secções inteiras: era daqui
que vinha a faixa dos «Balcões únicos» a ficar cor de areia no tema escuro,
com o título claro por cima — invisível.
Cada uma leva o valor que corresponde ao PAPEL que tem no tema, verificado
uma a uma: areia-50 e teal-50 são fundo, teal-500 é traço, teal-700 e
carvao-600 são texto, carvao-800/900 são painéis escuros. */
:root[data-tema="escuro"] {
--gz2-areia-50: #1c1a16;
--gz2-teal-50: #13232a;
--gz2-teal-500: #4aa2b0;
--gz2-teal-700: #7cc5d1;
--gz2-carvao-900: #1c2428;
--gz2-carvao-800: #242c31;
--gz2-carvao-600: #aab3b9;
}
/* Utilitárias de texto do Bootstrap: cor fixa que não passa pelos tokens.
.text-secondary aparece treze vezes só na página inicial. */
:root[data-tema="escuro"] .text-body { color: var(--tinta) !important; }
:root[data-tema="escuro"] .text-secondary,
:root[data-tema="escuro"] .text-body-secondary { color: var(--cinza) !important; }
:root[data-tema="escuro"] .text-dark,
:root[data-tema="escuro"] .text-black { color: var(--tinta) !important; }
/* .gz-balcao e .gz-boasvindas faltavam na repintura acima — os cartões dos
balcões ficavam claros com o título claro por cima. E no bloco da data o
texto vem de --gz-verde-700/500, que são superfície: preto sobre verde
escuro. Ali o número é texto, e usa o tom vivo. */
:root[data-tema="escuro"] .gz-balcao,
:root[data-tema="escuro"] .gz-boasvindas {
background: var(--papel) !important;
color: var(--tinta);
border-color: var(--linha) !important;
}
:root[data-tema="escuro"] .gz-balcao a:not(.btn) { color: var(--mz-verde-vivo); }
:root[data-tema="escuro"] .gz-data-bloco .dia,
:root[data-tema="escuro"] .gz-data-bloco .mes { color: var(--mz-verde-vivo); }
/* ============================================================
BARRA DE ACESSIBILIDADE
------------------------------------------------------------
Vive ACIMA do cabeçalho. Antes, o controlo de paletas era um botão
«Cores» encostado ao de entrar na conta — enquadramento errado por
duas razões.
A primeira é de nome: o alto contraste não é decoração, é o que torna
o portal legível a quem vê mal. Quem precisa dele procura
«acessibilidade», não «cores».
A segunda é de lugar: ocupava o espaço mais valioso do cabeçalho, a
competir com a acção principal, e ainda ajudava a esmagar a barra de
navegação em ecrãs de portátil.
O contraste ganhou atalho directo — um clique, sem abrir menu nenhum.
Quem tem baixa visão não devia ter de navegar um submenu para chegar
ao que torna a página legível.
============================================================ */
.mz-acess {
background: var(--mz-verde-esc);
color: var(--tinta-marca);
font-size: .8125rem;
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.mz-acess-dentro {
display: flex; align-items: center; gap: .6rem;
min-height: 38px; flex-wrap: wrap;
}
.mz-acess-titulo {
display: inline-flex; align-items: center; gap: .4rem;
font-weight: 600; letter-spacing: .01em; opacity: .9;
}
.mz-acess-titulo i { font-size: 1rem; }
.mz-acess-grupo {
display: flex; align-items: center; gap: .4rem; margin-left: auto;
}
.mz-acess button {
background: transparent; color: inherit;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: .35rem; padding: .18rem .55rem;
font-size: .8125rem; font-weight: 600; line-height: 1.5;
cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.mz-acess button:hover { background: rgba(255, 255, 255, .16); }
/* Amarelo e não branco: sobre o verde escuro é o que se vê primeiro, e o
anel tem de sobreviver a quem navega só por teclado. */
.mz-acess button:focus-visible {
outline: 2px solid var(--mz-amarelo); outline-offset: 2px;
}
/* Estado ligado do atalho de contraste — visível sem depender só da cor. */
.mz-acess button[aria-pressed="true"] {
background: var(--mz-amarelo); color: var(--mz-verde-esc);
border-color: var(--mz-amarelo); font-weight: 700;
}
/* Os três tamanhos formam um só controlo, encostados. */
.mz-acess-letra { display: inline-flex; }
.mz-acess-letra button { border-radius: 0; margin-left: -1px; padding-inline: .5rem; }
.mz-acess-letra button:first-child { border-radius: .35rem 0 0 .35rem; margin-left: 0; }
.mz-acess-letra button:last-child { border-radius: 0 .35rem .35rem 0; }
.mz-acess-letra sub, .mz-acess-letra sup { font-size: .7em; line-height: 0; }
/* O botão da paleta vinha desenhado para fundo claro do cabeçalho:
papel branco e tinta escura. Aqui o fundo é escuro. */
.mz-acess .paleta-botao {
background: transparent; color: inherit;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: .35rem; padding: .18rem .55rem;
font-size: .8125rem; line-height: 1.5;
}
.mz-acess .paleta-botao:hover,
.mz-acess .paleta-botao:focus-visible {
background: rgba(255, 255, 255, .16); color: inherit;
border-color: rgba(255, 255, 255, .5);
}
.mz-acess .paleta-lista { top: calc(100% + .35rem); }
/* No telemóvel o rótulo sai e fica o símbolo — os controlos são o que
importa, e o espaço é pouco. */
@media (max-width: 575.98px) {
.mz-acess-titulo span { position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mz-acess-botao span { display: none; }
.mz-acess-grupo { gap: .3rem; }
}