/* ==========================================================================
   Serviços Online Valongo — tema do cliente (mynetuser.css)
   Versão 2 · outubro 2026

   Este ficheiro é carregado DEPOIS de theme/mynet.css, tanto na página-mãe
   (cabeçalho, menu, rodapé) como dentro do iframe #myframeB (formulários,
   listas). Só altera aparência: não muda HTML gerado pelo MyNet.

   Organização:
     1. Tipografia (Public Sans, alojada localmente)
     2. Tokens de cor e variáveis do MyNet
     3. Base: texto, foco, links
     4. Moldura: cabeçalho, pesquisa, menu lateral, rodapé
     5. Formulários: títulos, etiquetas, campos, botões
     6. Listas de serviços, pesquisas e breadcrumb
     7. Página inicial (cli.page.home.asp) e componente de upload
     8. Ajustes responsivos
   ========================================================================== */


/* 1. TIPOGRAFIA --------------------------------------------------------------
   Ficheiros em srv.valongoresponsivo/fonts/ (licença SIL OFL).
   Alojados no próprio servidor para não enviar o IP dos munícipes à Google. */

@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/public-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/public-sans-latin-700-normal.woff2") format("woff2"); }


/* 2. TOKENS ------------------------------------------------------------------
   Todas as combinações texto/fundo abaixo passam WCAG 2.1 AA (4,5:1).
   O verde-lima da marca (#80993C) fica só como acento decorativo:
   com texto branco tem 3,2:1 e não serve para texto nem botões. */

:root {
    /* Paleta Valongo */
    --vlg-verde-escuro: #2F4A36;   /* cabeçalhos de bloco, menu ativo        */
    --vlg-verde:        #2F5D3A;   /* ação principal, links (8,0:1 em branco) */
    --vlg-verde-hover:  #1E3E26;
    --vlg-verde-claro:  #E8EFE3;   /* fundos de destaque, hover               */
    --vlg-verde-tinta:  #F1F6EE;
    --vlg-lima:         #80993C;   /* acento decorativo da marca              */
    --vlg-tinta:        #1C2420;   /* texto principal                         */
    --vlg-tinta-2:      #33403A;   /* texto secundário                        */
    --vlg-tinta-3:      #4E5A52;   /* ajudas, metadados (6,9:1 em branco)     */
    --vlg-linha:        #E2E5DE;   /* contornos de blocos                     */
    --vlg-linha-campo:  #8F998B;   /* contorno de campos (3,1:1, WCAG 1.4.11) */
    --vlg-fundo:        #F6F7F4;
    --vlg-branco:       #FFFFFF;
    --vlg-erro:         #B3261E;
    --vlg-aviso-fundo:  #FFF6E5;
    --vlg-aviso-texto:  #7A4300;
    --vlg-foco:         #1F4E8C;
    --vlg-fonte: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --vlg-raio: 8px;

    /* Variáveis base do MyNet (theme/mynet.css), mapeadas para a paleta */
    --corprincipalcliente: var(--vlg-verde);
    --corbackgroundclaro: var(--vlg-verde-claro);
    --corbackgroundmaisclaro: var(--vlg-verde-tinta);
    --corbackgroundforte: var(--vlg-verde-hover);
    --corbackgroundescuro: var(--vlg-verde-escuro);
    --corbackgroundactive: var(--vlg-verde-claro);
    --corbackgroundcinzaclaro: #D5DAD1;
    --corbackgroundcinzamaisclaro: #EEF0EC;
    --corbackgroundcinzaescuro: var(--vlg-tinta-2);
    --corcontrasteclara: var(--vlg-branco);
    --corInputReadOnly: var(--vlg-tinta-2);
    --borderradiuscliente: var(--vlg-raio);

    /* Títulos de secção: fundo claro + texto escuro (antes: branco sobre cinza, 2,5:1) */
    --mynettitulo2-background: var(--vlg-verde-claro);
    --mynettitulo2-color: var(--vlg-verde-hover);
    --mynettitulo-background: var(--vlg-verde-escuro);
    --mynettitulo-color: var(--vlg-branco);

    /* Links (antes: #62A8B6, 1,8:1 sobre cinza) */
    --mynetlink-color-master: var(--vlg-verde);
    --mynetlink-color-visited: var(--vlg-verde);
    --mynetlink-color-active: var(--vlg-verde-hover);
    --mynetlink-color-hover: var(--vlg-verde-hover);
    --mynetLink1-color: var(--vlg-verde);
    --mynetLink1--hover-color: var(--vlg-verde-hover);
    --mynetLink-peq-color: var(--vlg-verde);

    /* Botões: secundário por omissão, "Validar" é a ação principal */
    --mynetbutton-background: var(--vlg-branco);
    --mynetbutton-color: var(--vlg-tinta);
    --mynetbutton-hover-background: var(--vlg-verde-claro);
    --mynetbutton-hover-color: var(--vlg-verde-hover);
    --mynetbutton-border: 1px solid #C9D0C4;
    --mynetbutton-radius: var(--vlg-raio);
    --mynetbutton-disabled: #EEF0EC;
    --mynetbutton-disabled-background: #EEF0EC;
    --mynetbutton-disabled-color: #6B746D;

    --mynetbutton-validar-background: var(--vlg-verde);
    --mynetbutton-validar-color: var(--vlg-branco);
    --mynetbutton-validar-hover-background: var(--vlg-verde-hover);
    --mynetbutton-validar-hover-color: var(--vlg-branco);
    --mynetbutton-validar-border: 1px solid var(--vlg-verde);
    --mynetbutton-validar-hover-border: 1px solid var(--vlg-verde-hover);
    --mynetbutton-validar-disabled: #EEF0EC;

    --mynetbutton-limpar-background: transparent;
    --mynetbutton-limpar-color: var(--vlg-tinta-2);
    --mynetbutton-limpar-border: 1px solid transparent;
    --mynetbutton-limpar-hover-background: #F3E4E2;
    --mynetbutton-limpar-hover-color: var(--vlg-erro);
    --mynetbutton-limpar-hover-border: 1px solid transparent;

    --mynetbutton-uas-background: var(--vlg-verde);
    --mynetbutton-uas-color: var(--vlg-branco);
    --mynetbutton-uas-hover-background: var(--vlg-verde-hover);
    --mynetbutton-uas-hover-color: var(--vlg-branco);
    --mynetbutton-uas-radius: var(--vlg-raio);

    --mynetbutton-wz-background: var(--vlg-verde);
    --mynetbutton-wz-color: var(--vlg-branco);
    --mynetbutton-wz-hover-background: var(--vlg-verde-hover);
    --mynetbutton-wz-hover-color: var(--vlg-branco);
    --mynetbutton-wz-radius: var(--vlg-raio);

    /* Menu lateral: itens brancos com texto escuro (antes: branco sobre #A5A5A5, 2,5:1) */
    --menulateral-border-all: 0px solid transparent;
    --menulateral-background-all: var(--vlg-branco);
    --menulateral-color-all: var(--vlg-tinta);
    --menulateral-border-inner: 0px solid transparent;
    --menulateral-background: var(--vlg-branco);
    --menulateral-color: var(--vlg-tinta);
    --menulateral-hover: var(--vlg-verde-claro);
    --menulateral-hover-color: var(--vlg-verde-hover);
    --menulateral-active: var(--vlg-verde);
    --menulateral-active-color: var(--vlg-branco);
    --menulateral-active-final: var(--vlg-verde);
    --menulateral-active-final-color: var(--vlg-branco);

    /* Menu de autenticação e menu móvel */
    --menuautsimples-color-visited: var(--vlg-verde);
    --menuautsimples-color-master: var(--vlg-verde);
    --menuautsimples-color-hover: var(--vlg-verde-hover);
    --menuautsimples-color-active: var(--vlg-verde-hover);
    --menuautsup-nome-color: var(--vlg-tinta);
    --menuautsup-nif-color: var(--vlg-tinta-3);
    --menuautsup-background: var(--vlg-branco);
    --menuautsup-color: var(--vlg-tinta);
    --menuautsup-hover: var(--vlg-verde-claro);
    --menuautsup-hover-color: var(--vlg-verde-hover);
    --menumobile-background: var(--vlg-branco);
    --menumobile-color: var(--vlg-tinta);
    --menumobile-active: var(--vlg-verde-claro);
    --menumobile-active-color: var(--vlg-verde-hover);
    --menumobile-nome-color: var(--vlg-tinta);
    --menumobile-nif-color: var(--vlg-tinta-3);

    /* Pesquisa e filtros */
    --areapesquisa-color: var(--vlg-verde);
    --areapesquisa-radius: var(--vlg-raio);
    --areapesquisa-hover-color: var(--vlg-verde-hover);
    --filtrospesquisa-background: var(--vlg-verde-tinta);
    --filtrospesquisa-btnfiltro-background: var(--vlg-verde);
    --filtrospesquisa-btnfiltro-color: var(--vlg-branco);
}


/* 3. BASE -------------------------------------------------------------------- */

body,
table, td, tr, form,
input, select, textarea, button {
    font-family: var(--vlg-fonte);
}

body {
    color: var(--vlg-tinta);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Antes estava a 12px em tabelas e formulários */
table, td, tr, form {
    font-size: 15px;
}

h1, h2, h3, h4 {
    font-family: var(--vlg-fonte);
    color: var(--vlg-tinta);
    letter-spacing: -0.01em;
}

/* Foco visível em teclado, em todo o portal */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--vlg-foco) !important;
    outline-offset: 2px;
    box-shadow: none;
}

a, a:visited {
    color: var(--vlg-verde);
}
a:hover {
    color: var(--vlg-verde-hover);
}

.mynetLink, .mynetLink:link, .mynetLink:visited {
    color: var(--vlg-verde);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mynetLink:hover, .mynetLinkOver {
    color: var(--vlg-verde-hover);
}
.mynetLink1 { color: var(--vlg-verde); }
.mynetLinkOver1 { color: var(--vlg-verde-hover); }

#modalIFrameExterior {
    border: none;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* 4. MOLDURA ------------------------------------------------------------------ */

/* Cabeçalho: 100px → 80px; pesquisa 60px → 64px. Total 160px → 144px */
#header {
    height: 80px;
    background-color: var(--vlg-branco);
    border-bottom: 1px solid var(--vlg-linha);
    box-shadow: none;
}

#header #logo {
    margin-left: 0;
}

#header #logo img {
    max-width: unset;
    max-height: 64px;
    margin-top: 6px;
}

/* Links "Autenticação / Registar / Recuperar" e menu do utilizador */
#nav-menu-container-user .nav-menu > li > a,
#menuAutenSupLess > li > a {
    color: var(--vlg-verde);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 12px;
    border-radius: var(--vlg-raio);
}
#nav-menu-container-user .nav-menu > li > a:hover,
#menuAutenSupLess > li > a:hover {
    background: var(--vlg-verde-claro);
    color: var(--vlg-verde-hover);
}
/* Submenu do utilizador: texto escuro sobre branco (antes branco sobre cinza) */
#nav-menu-container-user ul ul,
#menuAutenSupLess ul {
    background: var(--vlg-branco);
    border: 1px solid var(--vlg-linha);
    border-radius: var(--vlg-raio);
    box-shadow: 0 8px 24px rgba(28, 36, 32, 0.12);
    padding: 6px;
}
#nav-menu-container-user ul ul a,
#menuAutenSupLess ul a {
    color: var(--vlg-tinta) !important;
    background: transparent !important;
    text-transform: none;
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 6px;
}
#nav-menu-container-user ul ul a:hover,
#menuAutenSupLess ul a:hover {
    background: var(--vlg-verde-claro) !important;
    color: var(--vlg-verde-hover) !important;
}

/* Utilizador com sessão iniciada: "cartão" com avatar e nome.
   O nome vinha a branco (pensado para cabeçalho escuro) e ficava invisível. */
#nav-menu-container-user:has(.fa-user.logado) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 4px 14px 4px 4px;
    background: var(--vlg-branco);
    border: 1px solid #D5DAD1;
    border-radius: 999px;
    max-width: 340px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
#nav-menu-container-user:has(.fa-user.logado):hover {
    border-color: var(--vlg-verde);
    background: var(--vlg-verde-tinta);
}
#nav-menu-container-user a.sf-with-ul:has(.logado) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--vlg-verde);
}
#nav-menu-container-user a.sf-with-ul:has(.logado)::after {
    display: none;                     /* seta do superfish */
}
#nav-menu-container-user .fa-user.logado {
    color: var(--vlg-branco) !important;
    font-size: 18px;
    line-height: 1;
}
#nav-menu-container-user .infouser {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
#nav-menu-container-user .nomeMunicipeHeadersup {
    color: var(--vlg-tinta) !important;
    font-family: var(--vlg-fonte);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
#nav-menu-container-user .infouser::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333403A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media only screen and (max-width: 767px) {
    #nav-menu-container-user .nomeMunicipeHeadersup { display: none; }
    #nav-menu-container-user .infouser::after { display: none; }
    #nav-menu-container-user:has(.fa-user.logado) { padding: 4px; }
}

/* Faixa de pesquisa: deixa de ser um bloco cinzento */
#pesquisaContainer {
    top: 80px;
    height: 64px;
    background-color: var(--vlg-verde-escuro);
    border-bottom: 0;
}

#pesquisaContainer #pvalor {
    height: 44px;
    font-size: 16px;
    color: var(--vlg-tinta);
    background: var(--vlg-branco);
    border: 2px solid transparent;
    border-radius: var(--vlg-raio) 0 0 var(--vlg-raio);
    padding: 0 14px;
}
#pesquisaContainer #pvalor::placeholder {
    color: var(--vlg-tinta-3);
    opacity: 1;
}
#pesquisaContainer #AsearchlinkButton {
    height: 44px;
    min-width: 48px;
    background: #B9D77A;           /* lima claro: 11:1 com o ícone escuro */
    color: var(--vlg-tinta);
    border: 0;
    border-radius: 0 var(--vlg-raio) var(--vlg-raio) 0;
}
#pesquisaContainer #AsearchlinkButton:hover {
    background: #A6C863;
}

#main {
    padding-top: 96px;                 /* deixa 24px entre a faixa de pesquisa e o conteúdo */
    background-color: var(--vlg-fundo);
    background-image: none;            /* remove o padrão de triângulos */
}

/* Menu lateral: cartão branco com cabeçalho verde-escuro */
div.divservicos {
    background-color: var(--vlg-verde-escuro);
    color: var(--vlg-branco) !important;
    font-family: var(--vlg-fonte);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 24px !important;
    padding: 14px 16px;
    border-radius: 12px 12px 0 0;
}

#submenusol {
    background: var(--vlg-branco);
    border: 1px solid var(--vlg-linha);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 6px 0 8px;
}

#submenusol a {
    font-family: var(--vlg-fonte);   /* o componente do menu impõe Verdana */
    font-size: 15px;
    line-height: 1.35;
    min-height: 44px;                  /* alvo de toque WCAG 2.5.5 */
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

#submenusol i,
li.has-submenu i {
    color: var(--vlg-tinta-3);
}

/* Setas: chevrons simples em vez de círculos com seta */
.fa-chevron-right:before { content: "\f054"; font-size: 11px; }
.fa-chevron-up:before    { content: "\f077"; font-size: 11px; }

li.has-submenu i {
    float: right;
    padding-top: 6px;
    padding-right: 4px;
}

hr.corlinhamenuesquerdo {
    margin-top: 0;
    border-top: 1px solid var(--vlg-linha);
}

#visao360Lateral {
    border: 1px solid var(--vlg-linha);
    margin-top: 12px;
    border-radius: 12px;
    background: var(--vlg-branco);
}

/* Botão voltar ao topo */
.back-to-top {
    border-radius: var(--vlg-raio);
    background: var(--vlg-verde);
    color: var(--vlg-branco);
}
.back-to-top:hover {
    background: var(--vlg-verde-hover);
    color: var(--vlg-branco);
}

/* Rodapé compacto ------------------------------------------------------------
   Antes: ~325px de altura (morada em lista, imagem FAQ de 100px, carrossel
   rotativo de 300x120 e uma segunda faixa de logótipos).
   Agora: uma faixa de ~190px. As "marcas de Valongo" deixam de rodar e
   passam a mosaico de 6 miniaturas, todas visíveis. */

footer {
    background: var(--vlg-branco);
    border-top: 1px solid var(--vlg-linha);
    padding: 24px 0 8px;
    margin-top: 32px;
}
footer .row > [class*="col-md-4"] {
    padding-top: 0;
    padding-bottom: 12px;
    text-align: left;
}
footer ul,
footer li {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.footer_tit {
    display: block;
    margin-bottom: 10px;
    font-family: var(--vlg-fonte);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vlg-tinta);
    text-align: left;
}

#footer_small {
    display: block;
    color: var(--vlg-tinta-3);
    font-family: var(--vlg-fonte);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0;
    text-align: left;
    list-style-type: none;
    height: auto;
}

/* Contactos: lista curta, alinhada à esquerda */
.footermorada {
    display: block;
    width: auto;
    margin: 0;
}
.footermorada i.fa {
    width: 16px;
    color: var(--vlg-verde);
    margin-right: 6px;
    text-align: center;
}

/* Primeira faixa do rodapé: 3 colunas numa só linha */
footer .col-md-12 > .row:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1.35fr);
    gap: 32px;
    margin: 0;
}
footer .col-md-12 > .row:first-child > [class*="col-md-4"] {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
@media only screen and (max-width: 991px) {
    footer .col-md-12 > .row:first-child {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* Largura e alinhamento iguais ao resto da página */
footer > .container-fluid {
    max-width: 1220px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
footer .row > [class*="col-md-4"],
footer .row > [class*="col-md-4"] * {
    text-align: left !important;
}
/* Títulos: "CONTACTOS" → "Contactos" (o texto vem em maiúsculas no HTML) */
footer .col-md-12 > .row:first-child .footer_tit {
    text-transform: lowercase;
}
footer .col-md-12 > .row:first-child .footer_tit::first-letter {
    text-transform: uppercase;
}
/* Contactos em 2–3 linhas em vez de 5 */
.footermorada {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
}
.footermorada li {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}
#footer_small > li:first-child {
    color: var(--vlg-tinta);
    font-weight: 600;
    margin-bottom: 2px;
}

/* Dúvidas: a imagem "FAQ" de 100px dá lugar a um botão */
footer #faq_drop-shadow,
footer .faq_img {
    display: none;
}
footer a[target="_parent"] {
    text-decoration: none;
}
footer a[target="_parent"] #footer_small li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #C9D0C4;
    border-radius: var(--vlg-raio);
    color: var(--vlg-verde);
    font-weight: 600;
    font-size: 15px;
}
footer a[target="_parent"] #footer_small li::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 4.9.8c0 1.7-2.4 2.2-2.4 3.7M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}
footer a[target="_parent"]:hover #footer_small li {
    background: var(--vlg-verde-claro);
    border-color: var(--vlg-verde);
}

/* Marcas de Valongo: faixa de 6 miniaturas lado a lado, sem rotação.
   As imagens têm o título desenhado dentro (ilegível em tamanho pequeno);
   o ideal é o HTML ganhar alt e link para a página de cada marca. */
.caroceldiv {
    width: auto;
    margin: 0;
}
#myCarousel.carousel {
    width: auto;
    max-width: 520px;
}
#myCarousel .carousel-indicators,
#myCarousel .carousel-control,
#myCarousel [class*="carousel-control"] {
    display: none !important;
}
#myCarousel .carousel-inner {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    height: auto;
    overflow: visible;
}
#myCarousel .carousel-inner > .item,
#myCarousel .carousel-inner > .carousel-item {
    display: block !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    left: auto !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    border-radius: 6px;
    overflow: hidden;
}
#myCarousel .carousel-inner > .item img,
#myCarousel .carousel-inner > .carousel-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transition: transform 0.2s ease;
}
#myCarousel .carousel-inner > .item:hover img,
#myCarousel .carousel-inner > .carousel-item:hover img {
    transform: scale(1.04);
}

/* Faixa final (direitos + logótipos AIRC/APCER/SSL): uma linha baixa */
footer .col-md-12 > .row + .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--vlg-linha);
    font-size: 13px;
    color: var(--vlg-tinta-3);
}
footer .col-md-12 > .row + .row > * {
    width: auto;
    flex: 0 1 auto;
    padding-top: 0;
    padding-bottom: 0;
}
footer .col-md-12 > .row + .row img {
    max-height: 26px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}

/* 5. FORMULÁRIOS ---------------------------------------------------------------- */

/* Títulos de secção ("Dados da Entidade", "Identificação do pedido", "Anexos") */
.mynetTitulo2,
h3.mynetHTF {
    background-color: var(--mynettitulo2-background);
    color: var(--mynettitulo2-color);
    font-size: 17px;
    font-weight: 700;
    padding: 12px 16px;
    margin-top: 28px;
    margin-bottom: 16px;
    border: 0;
    border-radius: var(--vlg-raio);
}

/* Títulos grandes ("Como realizar", títulos de formulário) */
[class^="mynetwndInfo"], [class^="mynetwndConh"], [class^="mynetwndData"],
.msk_tit_col1_div_Data100, .msk_tit_col1_div_Info100, .msk_tit_col1_div_Impo100, .msk_tit_col1_div_Conh100,
.msk_tit_col2_Data100, .msk_tit_col2_Info100, .msk_tit_col2_Impo100, .msk_tit_col2_Conh100 {
    font-family: var(--vlg-fonte);
    font-size: 24px;
    font-weight: 700;
    text-align: left;
    color: var(--vlg-tinta);
    margin-top: 16px;
    margin-bottom: 16px;
    white-space: initial;
    text-transform: none;
    display: block;
}

.msk_tit_linha_outer_Data100, .msk_tit_linha_outer_Info100, .msk_tit_linha_outer_Impo100, .msk_tit_linha_outer_Conh100 {
    background-color: unset;
    border: unset;
    border-width: unset;
}

.msk_corpo_Data100, .msk_corpo_Info100, .msk_corpo_Impo100, .msk_corpo_Conh100 {
    border: 1px solid var(--vlg-linha);
    border-radius: 16px;
    background-color: var(--vlg-branco);
    padding: 8px 24px 24px;
}

[class^="wndTop"], [class^="wndCel"] {
    background: none;
}
.tabskinext .wndTop2 {
    width: 100%;
}

.mynetTxt2 {
    margin-top: 10px;
    margin-bottom: 10px;
}
.mynetTxt5 {
    font-size: 15px;
}

/* Etiquetas: 12px → 15px, a negrito, alinhadas ao topo do campo */
.labelVisual,
.labelVisualCK {
    font-size: 15px;
    font-weight: 600;
    color: var(--vlg-tinta);
    vertical-align: top;
    padding-top: 12px;
    padding-left: 0;
    padding-right: 16px;
    line-height: 1.35;
}
.labelVisual label {
    font-weight: 600;
    margin-bottom: 0;
}

/* Campos: 28px → 44px de altura, 16px de letra (evita zoom automático no iPhone) */
.mynetInput,
.mynetSelect,
select.mynetInput {
    font-family: var(--vlg-fonte);
    font-size: 16px !important;        /* mynet.css força 14px !important */
    color: var(--vlg-tinta);
    min-height: 44px;
    padding: 8px 12px;
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: var(--vlg-branco);
    border: 1px solid var(--vlg-linha-campo);
    border-radius: var(--vlg-raio);
    box-shadow: none;
    box-sizing: border-box;
}
.mynetInput:hover,
.mynetSelect:hover {
    border-color: var(--vlg-tinta-3);
}
.mynetInput:focus,
.mynetSelect:focus {
    border-color: var(--vlg-verde);
    box-shadow: 0 0 0 3px rgba(47, 93, 58, 0.18);
    outline: none;
}
.mynetInput::placeholder {
    color: var(--vlg-tinta-3);
    opacity: 1;
}

textarea.mynetInput,
textarea {
    height: auto !important;
    min-height: 96px;
    line-height: 1.5;
}

/* Campos só de leitura (dados vindos do registo): claramente distintos, mas legíveis.
   Atenção: os seletores "[Selecione]" também são readonly, mas têm a classe
   mynetPointerHand e são tratados abaixo como listas de escolha. */
.mynetInputReadOnly {
    color: var(--vlg-tinta-2);
    background-color: #F1F3EF;
    border-style: dashed;
    border-color: #C9D0C4;
    cursor: default;
}

/* Seletores do MyNet ("[Selecione]"): campo readonly que abre uma lista ao clicar.
   Passam a parecer uma lista de escolha, com seta, em vez de um campo de texto. */
.mynetInput.mynetPointerHand {
    cursor: pointer;
    background-color: var(--vlg-branco);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    border-style: solid;
    border-color: var(--vlg-linha-campo);
    color: var(--vlg-tinta);
}
.mynetInput.mynetPointerHand:hover {
    border-color: var(--vlg-verde);
    background-color: var(--vlg-verde-tinta);
}

/* Coluna das etiquetas: 100px → 180px; primeira coluna de campos: 100px → 280px.
   Estas tabelas usam table-layout: fixed e a largura das colunas vem de uma
   primeira linha invisível com larguras fixas (100 | 10 | 100 | 10 | 100%).
   Alteramos essa linha, e não o table-layout: com "auto" os campos com
   width:100% encolhiam para ~26px (ex.: Utilizador e Palavra chave no login). */
table.tabformint > tbody > tr:first-child > td:nth-child(2) {
    width: 180px !important;
}
table.tabformint > tbody > tr:first-child > td:nth-child(5) {
    width: 280px !important;
}

/* Etiquetas na segunda coluna ("Código Postal", "Número do artigo"): afastar do campo anterior */
td.value + td.labelVisual {
    padding-left: 20px;
}

/* Larguras mínimas para seletores curtos e datas não cortarem o valor */
.mynetInput.hasDatepicker { min-width: 150px; }

/* Ajuda junto ao campo ("Utilizador é o NIF") */
.mynetTxt4 {
    font-size: 14px;
    color: var(--vlg-tinta-3);
    margin: 0;
    padding-top: 15px;                 /* alinhado ao meio do campo de 44px */
}

/* Mostrar/ocultar palavra-passe: o ícone (sprite de 12px) passa a botão de
   44px dentro do campo, à direita, com ícones de traço do tema */
.input-container-password {
    align-items: center;
}
.input-container-password input.password {
    padding-right: 48px;
}
.input-container-password .icon-password,
.input-container-password .icon-password.icon-password-opened {
    flex: none;
    width: 40px;
    height: 40px;
    min-width: 0;
    margin: 0 0 0 -44px;
    border-radius: 6px;
    color: transparent;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333403A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.9 5.1A9.8 9.8 0 0 1 12 5c6 0 9.5 7 9.5 7a17 17 0 0 1-2.7 3.6M6.6 6.6A16.6 16.6 0 0 0 2.5 12S6 19 12 19a9.6 9.6 0 0 0 5.4-1.6'/%3E%3C/svg%3E") no-repeat center / 20px 20px !important;
}
.input-container-password .icon-password.icon-password-opened {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333403A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5 12 5s9.5 7 9.5 7-3.5 7-9.5 7-9.5-7-9.5-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}
.input-container-password .icon-password:hover {
    background-color: var(--vlg-verde-claro) !important;
}

/* Caixa de descrição vazia no topo das páginas (o MyNet gera-a sempre) */
.msk_corpo_Info100:has(.bread_msg_body_inter:empty) {
    display: none;
}

/* Textos de apoio escritos no backoffice ("Como realizar", descrições):
   vêm com Verdana 11px em estilo inline; passam ao tamanho do resto do site */
.caixa_apoio_conh,
.caixa_apoio_conh *,
.bread_msg_body_inter,
.bread_msg_body_inter * {
    font-family: var(--vlg-fonte) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--vlg-tinta-2);
}
.caixa_apoio_conh strong,
.caixa_apoio_conh b,
.bread_msg_body_inter strong,
.bread_msg_body_inter b {
    color: var(--vlg-tinta);
}
.caixa_apoio_conh a,
.bread_msg_body_inter a {
    color: var(--vlg-verde) !important;
}

/* Obrigatórios por preencher: o MyNet pinta a vermelho */
.mynetTdObr textarea,
.mynetTdObr input,
.mynetTdObr select {
    border-color: var(--vlg-erro);
    border-width: 2px;
}
.mynetTdObr .wraper_jqui_radio label,
.mynetTdObr .wraper_mnt_boxobr {
    border: 2px solid var(--vlg-erro);
    border-radius: var(--vlg-raio);
}

/* Checkboxes e rádios maiores */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--vlg-verde);
    vertical-align: -4px;
    margin-right: 8px;
    cursor: pointer;
}

/* Calendário: o ícone de imagem antigo passa a ter área clicável decente */
img.ui-datepicker-trigger {
    width: 28px;
    height: 28px;
    padding: 4px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer;
}
img.ui-datepicker-trigger:hover {
    background: var(--vlg-verde-claro);
}

/* Botões: base = secundário */
.mynetButton {
    font-family: var(--vlg-fonte);
    font-size: 15px;
    font-weight: 600;
    height: auto;
    min-height: 44px;
    width: auto;
    padding: 10px 20px;
    background-color: var(--mynetbutton-background);
    color: var(--mynetbutton-color);
    border: var(--mynetbutton-border);
    border-radius: var(--mynetbutton-radius);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.mynetButton:hover {
    background-color: var(--mynetbutton-hover-background);
    color: var(--mynetbutton-hover-color);
}
.mynetButton[disabled] {
    background-color: var(--mynetbutton-disabled-background);
    color: var(--mynetbutton-disabled-color);
    border-color: transparent;
    cursor: not-allowed;
}

/* Validar / Submeter: ação principal */
.mynetButton.mynetButtonValidar {
    background-color: var(--mynetbutton-validar-background);
    color: var(--mynetbutton-validar-color);
    border: var(--mynetbutton-validar-border);
    padding-left: 28px;
    padding-right: 28px;
    font-size: 16px;
    font-weight: 700;
}
.mynetButton.mynetButtonValidar:hover {
    background-color: var(--mynetbutton-validar-hover-background);
    color: var(--mynetbutton-validar-hover-color);
}

/* Limpar: discreto e afastado do Validar, para não ser clicado por engano */
.mynetButton.mynetButtonLimpar {
    background-color: var(--mynetbutton-limpar-background);
    color: var(--mynetbutton-limpar-color);
    border: var(--mynetbutton-limpar-border);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    margin-right: 32px;
}
.mynetButton.mynetButtonLimpar:hover {
    background-color: var(--mynetbutton-limpar-hover-background);
    color: var(--mynetbutton-limpar-hover-color);
}

#wrapperbotoes {
    padding-top: 20px;
    padding-bottom: 10px;
    margin-top: 16px;
    border-top: 1px solid var(--vlg-linha);
    text-align: right;
}
#wrapperbotoes > div {
    padding-left: 0;
}
.botoesespaco {
    padding: 0;
}

/* Upload de anexos (botões do MyNet) */
#DropZoneGeral .buttonfileinput,
.TabelaElementosGeral .buttonfileinput {
    background-color: var(--vlg-verde) !important;
    color: var(--vlg-branco) !important;
    border-radius: var(--vlg-raio);
    font-weight: 600;
}

#add_file_anexos_sga {
    display: flex;
    justify-content: center;
    align-items: center;
}

div .prestoPlacer {
    margin-bottom: 10px;
    height: 20px;
}

/* "Como realizar" antes do formulário (só no ecrã).
   O id do contentor muda (wrapper_5, wrapper_6, …), daí o [id^="wrapper_"].
   No DOM continua depois; leitores de ecrã leem-no no fim. Ver nota no README. */
body:has(> [id^="wrapper_"] form.mnt_form_serv):has(> #conteudo_acordeao) {
    display: flex;
    flex-direction: column;
}
body:has(> [id^="wrapper_"] form.mnt_form_serv) > #mynetBread       { order: -3; }
body:has(> [id^="wrapper_"] form.mnt_form_serv) > #wndcontainer     { order: -2; }
body:has(> [id^="wrapper_"] form.mnt_form_serv) > #conteudo_acordeao { order: -1; }

/* Acordeão de informação ("Requisitos", "Legislação", "Custos") */
details.mntacordeon_topic_line summary,
.mntacordeon_topic_line summary {
    background: var(--vlg-branco);
    color: var(--vlg-tinta);
    font-weight: 600;
    border: 1px solid var(--vlg-linha);
    border-radius: var(--vlg-raio);
    padding: 12px 16px;
}
.mntacordeon_topic_line summary:hover,
details.mntacordeon_topic_line[open] summary {
    background: var(--vlg-verde-claro);
    color: var(--vlg-verde-hover);
}
details.mntacordeon_topic_line[open] {
    background: var(--vlg-branco);
}


/* 6. LISTAS, PESQUISA E BREADCRUMB ---------------------------------------------- */

#mynetBread {
    margin-top: 12px;
}

.mynetBread2 {
    text-align: left;
    font-size: 14px;
    white-space: initial;
    text-transform: none;
    color: var(--vlg-tinta-3);
}
.mynetBread2 > a,
.mynetBread2 a:visited {
    font-weight: 500;
    color: var(--vlg-verde);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mynetBread2 .activeMenu,
.mynetBread2 > span {
    color: var(--vlg-tinta);
    font-weight: 600;
}

/* Lista "Serviços disponíveis": cartões brancos em vez de faixas cinzentas
   (o link azul-claro sobre #D2D2D2 tinha 1,78:1) */
.menuFilhos {
    display: grid !important;
    gap: 4px;
    padding: 16px 20px;
    margin-bottom: 8px;
    background-color: var(--vlg-branco) !important;
    border: 1px solid var(--vlg-linha);
    border-radius: 12px;
    transition: border-color 0.15s ease;
}
.menuFilhos:hover {
    border-color: var(--vlg-verde);
}
.menuFilhos:nth-child(odd),
.menuFilhos:nth-child(even) {
    background-color: var(--vlg-branco);
}

.lista a.mynetLink,
.lista a.mynetLink:link,
.lista a.mynetLink:hover,
.lista a.mynetLink:active,
.lista a.mynetLink:visited {
    color: var(--vlg-verde);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}
.lista a.mynetLink:hover {
    text-decoration: underline;
}

.menuFilhos .desc {
    font-size: 15px;
    color: var(--vlg-tinta-3);
}

/* Ícones dos serviços ------------------------------------------------------
   Os PNG/SVG do MyNet (presencial.png, online, link.svg) não seguiam o tema
   e o de "copiar link" nem aparecia. Passam a ícones de traço, na cor do
   tema, e o canal ganha texto ("Presencial", "Online") a partir do title. */

.crmCanal {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    width: auto !important;
    height: auto !important;
}
.crmCanal .iconPresencial,
.crmCanal .iconOnline {
    display: inline-flex;
    align-items: center;
    width: auto !important;
    height: 26px !important;
    padding: 0 10px 0 28px;
    border: 1px solid var(--vlg-linha);
    border-radius: 999px;
    background-color: var(--vlg-verde-tinta) !important;
    background-repeat: no-repeat !important;
    background-position: 9px center !important;
    background-size: 14px 14px !important;
    font-family: var(--vlg-fonte);
    font-size: 13px;
    font-weight: 600;
    color: var(--vlg-tinta-2);
    float: none !important;
    opacity: 1 !important;             /* mynet.css esbatia a 0.6 */
}
.crmCanal .iconPresencial::after,
.crmCanal .iconOnline::after {
    content: attr(title);
}
.crmCanal .iconPresencial {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V10l7-5 7 5v11M10 21v-6h4v6'/%3E%3C/svg%3E") !important;
}
.crmCanal .iconOnline {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") !important;
}

/* Botão "copiar link" do serviço */
.copyMynet,
.coppiedMynet {
    position: relative;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-left: 6px;
    vertical-align: middle;
    border: 1px solid transparent !important;
    border-radius: var(--vlg-raio);
    background: transparent !important;
    cursor: pointer;
}
.copyMynet:hover {
    background: var(--vlg-verde-claro) !important;
}
.copyMynet::before,
.coppiedMynet::before {
    content: "" !important;
    position: absolute;
    inset: 8px;
    width: auto !important;
    height: auto !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E") no-repeat center / contain !important;
}
.coppiedMynet::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}
/* Etiqueta "Copiar link" ao passar o rato */
.copyMynet::after,
.coppiedMynet::after {
    font-family: var(--vlg-fonte) !important;
    font-size: 13px !important;
    font-weight: 600;
    background: var(--vlg-tinta) !important;
    color: var(--vlg-branco) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
}

/* Resultados de pesquisa */
.listaPesquisa td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--vlg-linha);
}
.listaPesquisa:nth-child(odd),
.listaPesquisa:nth-child(even) {
    background-color: var(--vlg-branco);
}
.listaPesquisa:hover {
    background-color: var(--vlg-verde-tinta);
}

.mynetTabInfo_linha td {
    border: 0;
}

/* Tabelas de listagem (Recebidos, Expedidos, processos) */
table.mynetListagem {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid var(--vlg-linha);
    border-radius: 12px;
    background: var(--vlg-branco);
}
.mynetLinhaTopo {
    background-color: var(--vlg-verde-claro);
    color: var(--vlg-verde-hover);
    font-weight: 700;
    border-right: 0;
    border-bottom: 1px solid var(--vlg-linha);
}

/* Autenticação */
.authTitulo { font-size: 18px; font-weight: 700; }
.authDescricao { font-size: 15px; color: var(--vlg-tinta-2); }
#btnRecuperarPwd {
    margin-top: 20px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--vlg-branco);
}


/* 7. PÁGINA INICIAL E UPLOAD ----------------------------------------------------- */

/* Classes antigas da página inicial (mantidas para compatibilidade) */
.caixaframe,
.subcaixaframe {
    border: 1px solid var(--vlg-linha);
    border-radius: 16px;
    background: var(--vlg-branco);
    padding: 20px 24px;
}
.subcaixaframe {
    height: auto;
    min-height: 200px;
}
.textocc li {
    font-family: var(--vlg-fonte);
    font-size: 15px;
    text-align: left;
    letter-spacing: 0;
}

/* Janela de upload (MyNetFileSystem.asp) */
.uploadFicheiroEscolheFicheiro {
    font-size: 15px;
}
.uploadFicheiroEscolheFicheiro .boldText {
    font-weight: 600;
}
.uploadFicheiroEscolheFicheiro input[type="file"] {
    font-size: 15px;
    padding: 24px;
    width: 100%;
    border: 2px dashed var(--vlg-linha-campo) !important;
    border-radius: 12px;
    background: var(--vlg-branco);
    cursor: pointer;
}
.uploadFicheiroEscolheFicheiro input[type="file"]::file-selector-button {
    font-family: var(--vlg-fonte);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 18px;
    margin-right: 14px;
    color: var(--vlg-branco);
    background: var(--vlg-verde);
    border: 0;
    border-radius: var(--vlg-raio);
    cursor: pointer;
}
#excerbarra .mynetLink {
    color: var(--vlg-tinta-2);
    text-decoration: none;
}


/* 8. RESPONSIVO --------------------------------------------------------------------- */

#myframeB {
    width: 1px;
    min-width: 100%;
    border: 0;
    overflow: hidden;
}

.row.about-container {
    min-height: 715px;
}

@media only screen and (max-width: 1200px) {
    #header #logo img {
        max-height: 60px;
        margin-top: 8px;
    }
}

@media only screen and (max-width: 991px) {
    #main {
        padding-top: 40px;
    }
    #ColunaCentral {
        padding-left: 0;
    }
    .tabskinext,
    .tabformint {
        padding: 0;
    }
    .msk_corpo_Data100, .msk_corpo_Info100, .msk_corpo_Impo100, .msk_corpo_Conh100 {
        padding: 4px 14px 16px;
        border-radius: 12px;
    }
    /* Etiqueta por cima do campo em vez de ao lado */
    .lista td.labelVisual {
        display: block;
        width: 100% !important;
        padding-top: 8px;
        padding-bottom: 0;
    }
    .lista td.value {
        display: block;
        width: 100% !important;
    }
    .mynetInput,
    .mynetSelect {
        width: 100% !important;
        max-width: 100%;
    }
}

@media only screen and (max-width: 880px) {
    #header #logo img {
        max-height: 48px;
        margin-top: 8px;
    }
}

@media only screen and (max-width: 820px) {
    #header #logo {
        margin-left: 40px !important;
    }
}

@media only screen and (max-width: 500px) {
    #header #logo img {
        max-height: 44px;
        margin-top: 10px;
    }
    #wrapperbotoes {
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;
    }
    #wrapperbotoes .mynetButton {
        width: 100%;
    }
    .mynetButton.mynetButtonLimpar {
        margin-right: 0;
    }
}