@font-face {
    font-family: 'Nunito-Black';
    /* Nome que você usará no código */
    src: url('../assets/fonts/Nunito/static/Nunito-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- RESET UNIVERSAL PARA ALINHAMENTO --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* --- VARIÁVEIS DE COR PARA OS TEMAS --- */
:root {
    --bg-color: #daf3ed;
    --header-bg: #85cbcb;
    --text-color: #0a4849;
    --card-bg: #FFFFFF;
    --card-border: #DDDDDD;
    --card-hub-bg: #ade6ec;
    --card-hub-border: #8fcfcf;
    --form-input-bg: #e0f4f2;
    --form-input-border: #5a9a9a;
    --border-color: #85cbcb;
    --border-radius: 0px;

}


body.dark-mode {
    --bg-color: #053536;
    --header-bg: #0e3b3b;
    --text-color: #cce5e2;
    --card-bg: #2c4c4c;
    --card-border: #4a6a6a;
    --card-hub-bg: #2a5a5a;
    --card-hub-border: #1a4a4a;
    --form-input-bg: #1e3b3b;
    --form-input-border: #6a8a8a;
    --border-color: #0e3b3b;
    --border-radius: 0px;

}

/* Estilo do contêiner da tela de carregamento */
#loading-screen {
    position: fixed; /* Fixa na tela, mesmo se rolar a página */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Cor de fundo da tela de carregamento (branco). Mude se quiser. */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    z-index: 9999; /* Garante que fique acima de tudo */
    
    /* Adiciona uma transição suave para quando for desaparecer */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Classe que será adicionada pelo JavaScript para esconder a tela */
#loading-screen.hide {
    opacity: 0; /* Torna transparente */
    visibility: hidden; /* Remove da interação do mouse após a transição */
}

.ondacima {
    display: block;
    position: absolute;
    top: 60px;
    /* mantém a posição definida */
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

.container {
    position: relative;
}

.ondabaixo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

main,
header,
footer {
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
    /* espaço para a onda */
}

.ondinha {
    z-index: -1;
}

html {
    font-family: 'Nunito-Black', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);



}

body {
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-color);
    position: relative;
    z-index: 0;
    border: 21px solid var(--border-color);
    border-radius: var(--border-radius);

    /* Garante que a borda seja visível */
    box-sizing: border-box;
}

main {
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    padding: 30px 0;
    position: relative;
    color: var(--text-color);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* HEADER */
header {
    width: 100%;
    background-color: var(--header-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 70px;
    height: auto;
}

.header-right-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* BOTÃO DE MODO NOTURNO */
.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    height: 42px;
    cursor: pointer;
    font-size: 1.5rem;
    /* Aumentado ligeiramente para compensar a falta de borda */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 0 5px;
    /* Adiciona um pequeno espaçamento */
}

.theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle-btn .fa-sun {
    display: none;
}

.dark-mode .theme-toggle-btn .fa-sun {
    display: block;
}

.dark-mode .theme-toggle-btn .fa-moon {
    display: none;
}

/* ESTILO DA BOLHA DE PERFIL */
.profile-bubble {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--text-color);
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.profile-bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.profile-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Mobile-only cloned controls: hidden by default (desktop) to avoid duplication.
   They are inserted into the DOM by JS but should only be visible inside the
   mobile nav (see media query below which sets .mobile-header-icons to display:flex). */
.mobile-header-icons {
    display: none;
}

header nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 20px;
    transition: background-color 0.3s, color 0.3s;
}

.create-account-btn {
    background-color: #ade6ec !important;
    color: #0a4849 !important;
    font-weight: 800;
    padding: 8px 20px !important;
    border-radius: 20px;
    border: 3px solid #5a9a9a !important;
}

/* Botões do menu mobile (escondidos por defeito) */
.hamburger-menu,
.close-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
}

/* close-menu removed — the hamburger now animates into an X */

/* FOOTER */
footer {
    width: 100%;
    background-color: var(--header-bg);
    padding: 40px 0;
    color: var(--text-color);
    margin-top: auto;
    transition: background-color 0.3s ease;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-logo {
    width: 150px;
    height: auto;
}

.footer-social {
    min-width: 200px;
}

.footer-contact {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    margin-left: auto;
}

footer h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    color: var(--text-color);
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #307676;
}

.footer-contact form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.footer-contact input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--form-input-border);
    border-radius: 12px;
    background-color: var(--form-input-bg);
    color: var(--text-color);
    font-family: 'Nunito-Black', sans-serif;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.footer-contact .input-with-button {
    position: relative;
    display: flex;
    width: 100%;
}

.footer-contact input[name="assunto"] {
    padding-right: 50px;
}

.footer-contact .input-with-button button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #217473;
    border: none;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.footer-contact .input-with-button button:hover {
    background-color: #307676;
}

/* --- LÓGICA RESPONSIVA PARA HEADER E FOOTER --- */
@media (max-width: 992px) {

    .ondabaixo,
    .ondacima {
        height: auto;
    }

    .header-right-icons {
        display: none;
    }

    .hamburger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 2rem;
        height: 2rem;
        padding: 0;
        z-index: 1002;
    }

    .hamburger-menu span {
        width: 2rem;
        height: 0.25rem;
        background: var(--text-color);
        border-radius: 10px;
        transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
        position: relative;
        transform-origin: center;
    }

    /* Quando aberto, posiciona as barras no centro e rotaciona para formar um X alinhado */
    header.nav-open .hamburger-menu span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    header.nav-open .hamburger-menu span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    header.nav-open .hamburger-menu span:nth-child(2) {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0);
    }

    header.nav-open .hamburger-menu span:nth-child(3) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* subtle initial touch when menu opens */
    .hamburger-menu:active span:nth-child(1),
    .hamburger-menu:active span:nth-child(3) {
        transform: scale(0.98);
    }

    header nav>ul {
        display: none;
    }

    #main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: rgba(133, 203, 203, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1001;
    }

    header.nav-open #main-nav {
        transform: translateX(0);
    }

    #main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px 30px;
        gap: 20px;
        height: 100%;
        box-sizing: border-box;
    }

    /* Manter a cor do texto no menu mobile igual ao modo claro, mesmo se body.dark-mode estiver ativo */
    #main-nav ul li a {
        color: #0a4849 !important; /* corresponde a var(--text-color) em modo claro */
        font-weight: 700;
    }

    /* Garantir que o botão 'Meu Perfil' mantenha texto na cor correta */
    #main-nav .create-account-btn {
        color: #0a4849 !important;
    }

    /* Ícones do rodapé do menu (acessibilidade, idioma, tema, perfil) também usam a mesma cor */
    .mobile-header-icons button,
    .mobile-header-icons a {
        color: #0a4849 !important;
    }

    /* estilos para os controles de header exibidos no topo do menu mobile */
    .mobile-header-icons {
        display: flex;
        gap: 12px;
        width: 100%;
        align-items: center;
        padding: 12px 0;
        border-top: 1px solid rgba(0,0,0,0.03);
    }

    .mobile-header-icons.bottom {
        margin-top: auto; /* push to bottom */
        padding-top: 20px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .mobile-header-icons button,
    .mobile-header-icons a {
        background: transparent;
        border: none;
        color: var(--text-color);
        font-size: 2rem; /* increased icon size */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px; /* larger touch area */
        min-width: 44px; /* ensure comfortable tap target */
        min-height: 44px;
        border-radius: 10px;
        cursor: pointer;
    }

    .mobile-header-icons a {
        text-decoration: none;
    }

    /* Força os ícones dentro do grupo mobile a herdarem o tamanho do container
       e ficarem corretamente alinhados (fa-user-circle também). */
    .mobile-header-icons i {
        font-size: inherit; /* usa o font-size definido no botão/anchor (2rem) */
        line-height: 1;
        display: block;
        width: 1em;
        height: 1em;
        text-align: center;
    }

    /* Garantia extra: forçar tamanho uniforme caso alguma regra do Font Awesome altere um ícone específico */
    .mobile-header-icons i,
    .mobile-header-icons .fas {
        font-size: 2rem !important;
        line-height: 1 !important;
    }

    /* Theme button: show only sun in light mode, only moon in dark mode */
    .mobile-theme-btn .fa-sun { display: inline-block; }
    .mobile-theme-btn .fa-moon { display: none; }
    body.dark-mode .mobile-theme-btn .fa-sun { display: none; }
    body.dark-mode .mobile-theme-btn .fa-moon { display: inline-block; }

    #main-nav li a {
        font-size: 1.3rem;
    }

    /* Removemos o botão close-menu e agora usamos apenas o hamburger para animar para X.
       Abaixo ajustes visuais: um backdrop circular suave que aparece quando o menu abre. */
    .hamburger-menu {
        position: relative;
        background: transparent;
        border-radius: 50%;
        padding: 6px;
        transition: background-color 0.18s ease, transform 0.12s ease;
    }

    /* circular backdrop usando pseudo-elemento */
    .hamburger-menu::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(10,72,73,0);
        transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
        z-index: -1;
    }

    header.nav-open .hamburger-menu::before {
        background: rgba(10,72,73,0.08);
        transform: scale(1.05);
        opacity: 1;
    }

    /* Slightly lift the hamburger on hover for affordance */
    .hamburger-menu:hover {
        transform: translateY(-1px);
    }

    #main-nav ul #nav-profile-link {
        font-weight: bold;
        color: #217473;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }

    .footer-contact {
        margin-left: 0;
    }

    .footer-contact form {
        width: 100%;
        max-width: 350px;
    }
}

/* --- AJUSTES FINAIS PARA O MODO NOTURNO RESPONSIVO --- */

/* Por defeito, esconde o botão de tema do menu de navegação */
.nav-dark-mode-toggle {
    display: none;
}

@media (max-width: 992px) {

    .ondabaixo,
    .ondacima {
        height: auto;
    }

    /* Esconde os ícones da direita (incluindo o botão de tema do desktop) */
    .header-right-icons {
        display: none;
    }

    /* Mostra e estiliza o botão de tema dentro do menu hambúrguer */
    .nav-dark-mode-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-dark-mode-toggle span {
        font-size: 1.2rem;
        color: var(--text-color);
        font-weight: 700;
    }

    /* Ajusta o botão dentro do menu */
    .nav-dark-mode-toggle .theme-toggle-btn {
        width: 48px;
        /* Um pouco maior para facilitar o toque */
        height: 28px;
        border-radius: 20px;
        border: none;
        background-color: #d1e8e2;
        position: relative;
    }

    .nav-dark-mode-toggle .theme-toggle-btn i {
        position: absolute;
        transition: transform 0.3s ease;
        font-size: 0.9rem;
        color: #0a4849;
    }

    /* Posição dos ícones (sol e lua) */
    .nav-dark-mode-toggle .fa-moon {
        transform: translateX(-8px);
    }

    .nav-dark-mode-toggle .fa-sun {
        transform: translateX(8px);
    }

    /* Lógica de mostrar/esconder no modo escuro */
    .dark-mode .nav-dark-mode-toggle .fa-moon {
        opacity: 0;
    }

    body:not(.dark-mode) .nav-dark-mode-toggle .fa-sun {
        opacity: 0;
    }
}

@media (max-width: 768px) {

    .ondabaixo,
    .ondacima {
        height: auto;
    }
}

/* ============================================= */
/* ESTILOS PARA NOTIFICAÇÕES PERSONALIZADAS      */
/* ============================================= */

.notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 25px;
    border-radius: 12px;
    background-color: #217473;
    /* Cor principal, verde-azulado escuro */
    color: white;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, bottom 0.3s ease, visibility 0.3s ease;
}

/* Classe para mostrar a notificação com uma animação suave */
.notification.show {
    opacity: 1;
    visibility: visible;
    bottom: 40px;
}

/* Estilo para notificações de erro */
.notification.error {
    background-color: #c0392b;
    /* Um tom de vermelho */
}

/* BANNER DE ATUALIZAÇÃO (topo) */
.update-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 1100px;
    background: linear-gradient(90deg, #317067, #2a8a84);
    color: #fff;
    padding: 12px 16px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    z-index: 3000;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

.update-banner .update-actions {
    display: flex;
    gap: 8px;
}

.update-banner button {
    background: white;
    color: #2a8a84;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
}

.update-banner button.secondary {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
}

.update-banner-hidden {
    display: none !important;
}

/* ============================================= */
/* ESTILOS PARA DROPDOWN DE IDIOMA NO HEADER     */
/* ============================================= */

.header-lang-container {
    position: relative;
    display: flex;
    align-items: center;
}

.lang-dropdown-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    height: 42px;
    cursor: pointer;
    font-size: 1.5rem;
    /* Aumentado ligeiramente para compensar a falta de borda */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0 5px;
    /* Adiciona um pequeno espaçamento */
}

.lang-dropdown-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.lang-dropdown-content {
    display: none;
    /* Começa escondido */
    position: absolute;
    top: 130%;
    /* Posição abaixo do botão */
    right: 0;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    width: 280px;
    padding: 20px;
    box-sizing: border-box;
}

.lang-dropdown-content p {
    margin: 0 0 15px 0;
    font-size: 0.95rem;
}

.lang-dropdown-content label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.lang-dropdown-content select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--form-input-border);
    background-color: var(--form-input-bg);
    color: var(--text-color);
    font-size: 1rem;
}

/* ============================================= */
/* ESTILOS REFINADOS PARA MENU DE ACESSIBILIDADE */
/* ============================================= */

/* ============================================= */
/* ESTILO DO BOTÃO DE ACESSIBILIDADE NO HEADER */
/* ============================================= */

.accessibility-btn {
  background: transparent;
 
  color: var(--text-color);
  height: 42px;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0 5px;
  
}

/* ============================================= */
/* CORREÇÃO DA BORDA DO BOTÃO DE ACESSIBILIDADE */
/* ============================================= */

/* Alvos: Botão do desktop E botão do menu mobile */
#accessibility-btn,
.mobile-accessibility-btn {
  border: none !important; /* Remove a borda branca */
  outline: none !important; /* Remove o foco (como pedido) */
  box-shadow: none !important; /* Garante que não haja sombra */
}

/* --- LÓGICA RESPONSIVA PARA HEADER E FOOTER --- */

/* Para TABLETS (até 992px) */
@media (max-width: 992px) {

    .ondabaixo,
    .ondacima {
        height: auto;
    }

    /* HEADER */
    header {
        padding: 5px 0;
    }

    .logo {
        width: 60px;
    }
    
    .header-right-icons {
        display: none;
    }

    .hamburger-menu {
        display: flex;
        /* ... (mantém estilos do hamburger) */
    }

    /* ... (mantém outros estilos do menu mobile) ... */

    /* FOOTER - Ajustes para tablet */
    footer {
        padding: 20px 0 15px; /* Reduz padding vertical */
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px; /* Diminui o espaço entre os elementos */
    }
    
    .footer-logo {
        width: 110px; /* Logo um pouco menor */
    }

    footer h4 {
        margin-bottom: 8px; /* Menos margem abaixo do título */
        font-size: 1rem; /* Título menor */
    }

    .social-icons {
        justify-content: center;
        gap: 15px; /* Menor espaço entre ícones */
    }

    .footer-contact {
        margin-left: 0;
        width: 100%;
        max-width: 320px;
    }
}


/* APENAS para TELEMÓVEIS (até 768px) */


/* --- AJUSTE RESPONSIVO DO BANNER --- */

 
/* --- LÓGICA RESPONSIVA --- */

/* Para TABLETS (até 992px) */
@media (max-width: 992px) {
    .settings-container {
        padding: 25px;
    }
}

/* Para TELEMÓVEIS (até 768px) */
@media (max-width: 768px) {
    .main-settings {
        margin: 20px 0;
    }

    .settings-container {
        padding: 20px 15px;
    }

    .settings-header h1 {
        font-size: 1.6rem;
    }

    .settings-card {
        padding: 15px;
    }

    .settings-card h2 {
        font-size: 1.2rem;
    }

    .actions-container {
        flex-direction: column; /* Empilha os botões */
        gap: 12px;
    }

    .btn-logout, .btn-delete {
        width: 100%; /* Botões com largura total */
    }
}
@media (max-width: 768px) {
       .main-banner img {
        height: 280px;         /* Define a mesma altura dos cards do carrossel */
        object-fit: cover;     /* Faz a imagem cobrir todo o espaço sem distorcer */
        border-radius: 20px;   /* Um arredondamento similar aos cards */
    }
    /* HEADER */
    header {
        padding: 2px 0;
    }

    .logo {
        width: 50px;
    }

    /* FOOTER - Ajustes agressivos para telemóvel */
    footer {
        padding: 10px 0; /* Padding mínimo */
    }

    .footer-container {
        gap: 10px; /* Espaçamento mínimo */
    }

    .footer-logo {
        width: 90px; /* Logo bem pequeno */
    }
    
    .footer-social {
        min-width: auto; /* Remove largura mínima */
    }

    footer h4 {
        font-size: 0.9rem; /* Título bem pequeno */
        margin-bottom: 5px;
    }

    .footer-contact form {
        gap: 8px; /* Espaço menor no formulário */
    }

    .footer-contact input {
        padding: 8px 10px; /* Input menor */
        font-size: 0.85rem; /* Fonte do input menor */
        border-radius: 8px;
    }
    
    .footer-contact .input-with-button button {
        width: 32px; /* Botão de envio menor */
        height: 32px;
        border-radius: 6px;
    }
    
    .footer-contact input[name="assunto"] {
        padding-right: 42px; /* Ajusta espaço para o botão menor */
    }
}

/* Botão do Widget (Sua Versão) */
.map-widget-btn {
    /* Cor e Borda */
    background-color: #d6fafc;
    border: 2px solid #317067;
    color: #419289;
    box-sizing: border-box;

    /* Posicionamento e Tamanho */
    position: fixed; /* Garante que o widget fique fixo na tela */
    bottom: 395px;
    right: 8px;
    z-index: 999;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    
    /* Estilos Gerais */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition: transform 0.2s ease;
}

.map-widget-btn:hover {
    transform: scale(1.1);
}

/* Tooltip com Animação de Gaveta */
/* Tooltip (o balãozinho de texto com animação) */
/* --- Estilos Gerais para Widgets Flutuantes --- */



/* --- Estilos Gerais para Widgets Flutuantes --- */

/* Fundo Escuro (Overlay) */
.widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Estilo Base do Tooltip (Posição e Animação) */
.widget-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(15px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Cores do Tooltip do MAPA */
.map-tooltip {
    background-color: #d6fafc;
    border: 2px solid #317067;
    color: #419289;
}

/* Cores do Tooltip de TELEFONE */
.phone-tooltip {
    background-color: #dc3545;
    border: 2px solid #b02a37;
    color: white;
}

/* Efeito para mostrar o tooltip ao passar o mouse */
.map-widget-btn:hover .widget-tooltip,
.phone-widget-btn:hover .widget-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Janela de Conteúdo dos Widgets (Estilo Modal Centralizado) */
.map-widget-content,
.phone-widget-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    width: 90%;
    max-width: 380px;
    background-color: var(--card-bg, #fff);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* Cabeçalho das Janelas */
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background-color: var(--form-input-bg, #f1f1f1);
    border-bottom: 1px solid var(--card-border, #ddd);
}
.widget-header h3 { margin: 0; font-size: 1.1rem; }
.close-widget-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: inherit; }


/* --- Widget de Mapa (Estilo DESKTOP) --- */
.map-widget-btn {
    background-color: #d6fafc;
    border: 2px solid #317067;
    color: #419289;
    box-sizing: border-box;
    position: fixed;
    bottom: 395px;
    right: 8px;
    z-index: 999;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition: all 0.2s ease;
}
.map-widget-btn:hover { transform: scale(1.1); }
.map-widget-content p { padding: 10px 15px; margin: 0; }
body.dark-mode .map-widget-content,
body.dark-mode .phone-widget-content { background-color: #333; color: #f1f1f1; }
body.dark-mode .widget-header { background-color: #444; border-bottom: 1px solid #555; }


/* --- Widget de Telefone de Emergência (Estilo DESKTOP) --- */
.phone-widget-btn {
    background-color: #dc3545;
    border: 2px solid #b02a37;
    color: white;
    box-sizing: border-box;
    position: fixed;
    bottom: 343px;
    right: 8px;
    z-index: 998;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: all 0.2s ease;
}
.phone-widget-btn:hover { transform: scale(1.1); }
.phone-list { list-style: none; padding: 10px 0; margin: 0; }
.phone-list li a { display: block; padding: 12px 20px; color: inherit; text-decoration: none; transition: background-color 0.2s; }
.phone-list li a:hover { background-color: rgba(0,0,0,0.05); }
body.dark-mode .phone-list li a:hover { background-color: rgba(255,255,255,0.08); }


/* --- @media Query para Telas Pequenas (Estilo CELULAR) --- */
@media (max-width: 600px) {
    .map-widget-btn {
        bottom: 320px;
        right: 8px; /* Mantendo a consistência */
    }
    .phone-widget-btn {
        bottom: 270px;
        right: 8px; /* Mantendo a consistência */
    }
}
/* ============================================= */
/* FIXA O WIDGET DO VLIBRAS                      */
/* ============================================= */
#vlibras_plugin {
    position: fixed !important;
    bottom: 20px;
    right: 20px;
    z-index: 9999 !important; /* z-index alto para ficar sobre outros widgets */
}

/* ---------------------------
   Painel de idioma (mobile)
   --------------------------- */
.mobile-lang-panel {
  display: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 60px 30px 30px;
  background: rgba(133, 203, 203, 0.9); /* fundo igual ao menu mobile */
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1002;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255,255,255,0.2);
}

.mobile-lang-panel.open {
  display: block;
}

/* Header do painel */
.mobile-lang-panel .mobile-lang-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 20px;
}
.mobile-lang-panel .mobile-lang-back-btn {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  color: #0a4849;
  transition: background-color 0.3s ease;
}
.mobile-lang-panel .mobile-lang-back-btn:hover {
  background-color: rgba(255,255,255,0.2);
}

/* Conteúdo */
.mobile-lang-panel .mobile-lang-content {
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-lang-panel .mobile-lang-content p {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a4849;
  margin: 0;
}

.mobile-lang-panel .mobile-lang-content label {
  font-weight:700;
  font-size: 0.95rem;
  color: #0a4849;
}

.mobile-lang-panel .mobile-lang-select {
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid #5a9a9a;
  background: #e0f4f2;
  color: #0a4849;
  font-family: 'Nunito-Black', sans-serif;
  font-weight:700;
  box-sizing:border-box;
}

/* Botões de ação */
.mobile-lang-panel .btn-save,
.mobile-lang-panel .btn-cancel {
  background-color: #ade6ec !important;
  color: #0a4849 !important;
  font-weight: 800;
  padding: 8px 20px !important;
  border-radius: 20px;
  border: 3px solid #5a9a9a !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.mobile-lang-panel .btn-save:hover,
.mobile-lang-panel .btn-cancel:hover {
  background-color: #bdf0f5 !important;
  transform: scale(1.05);
}

/* Botões lado a lado */
.mobile-lang-panel .mobile-lang-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

/* Esconde o menu principal enquanto o painel de idiomas está ativo */
#main-nav.mobile-lang-active > ul {
  display: none;
}
/* =========================================
   ESTILO UNIFICADO DOS DROPDOWNS DE IDIOMA
   (Header, Cadastro, Utilitários e Mobile)
   ========================================= */

/* Seleciona todos os dropdowns de idioma pelos seus IDs e Classes específicas */
#language-select-header,       /* Header Desktop */
#language-select-utils,        /* Página Utilitários */
#language-select-pf,           /* Cadastro PF */
#language-select-pj,           /* Cadastro PJ */
#mobile-language-select,       /* Menu Mobile */
.language-dropdown {           /* Classe genérica usada no Auth */
    
    /* Cores solicitadas */
    border: 1px solid #739d9f !important;
    color: #0a4849 !important;
    
    /* Fonte do projeto */
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important; /* Deixa a fonte mais "Dark"/negrito */
    font-size: 0.95rem;

    /* Estilo Base */
    background-color: #ffffff;
    border-radius: 8px;       /* Bordas levemente arredondadas */
    padding: 10px 12px;       /* Espaçamento interno confortável */
    width: 100%;              /* Ocupa a largura disponível no container */
    cursor: pointer;
    outline: none;            /* Remove contorno padrão do navegador */
    transition: all 0.3s ease;
    
    /* Aparência (opcional: remove estilo padrão nativo para ficar mais limpo) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Adiciona uma setinha customizada (opcional, combina com o design do Bravo) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%230a4849%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 12px auto;
}

/* Efeito ao passar o mouse ou focar */
#language-select-header:hover, 
#language-select-utils:hover,
#language-select-pf:hover, 
#language-select-pj:hover,
.language-dropdown:hover {
    border-color: #0a4849 !important; /* Escurece a borda */
    background-color: #f0f8f8; /* Fundo levemente esverdeado */
}

#language-select-header:focus, 
#language-select-utils:focus,
#language-select-pf:focus, 
#language-select-pj:focus,
.language-dropdown:focus {
    border-color: #0a4849 !important;
    box-shadow: 0 0 0 3px rgba(115, 157, 159, 0.3); /* Glow suave na cor da borda */
}

/* Ajuste específico para os Groups (Português, Espanhol...) dentro do select */
optgroup {
    font-weight: 800;
    color: #0a4849;
    background: #eef6f6;
}

option {
    font-weight: 600;
    color: #333;
    background: #fff;
    padding: 10px;
}