/* ══ Painel home — grids de 2 e 3 colunas ══ */
#painel-3cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:stretch; }
#painel-2cards { display:grid; grid-template-columns:1fr 1fr;     gap:14px; align-items:stretch; }
.painel-card   { background:#fff; border-radius:20px; padding:20px 22px;
                 box-shadow:0 4px 12px rgba(0,0,0,.06); box-sizing:border-box; }
.rank-pill     { width:36px; height:36px; border-radius:50%; display:inline-flex;
                 align-items:center; justify-content:center; font-weight:800; font-size:.95rem; flex-shrink:0; }
.rank-pill-1   { background:#fff8e1; color:#f9a825; }
.rank-pill-2   { background:#f5f5f5; color:#888; }
.rank-pill-3   { background:#fce4ec; color:#e57373; }
.rank-pill-me  { background:#2e7d32; color:#fff; font-size:.8rem; }
@media(max-width:760px) {
    #painel-3cards, #painel-2cards { grid-template-columns:1fr; }
}

/* ══ Monitores Duvid ══ */
.monitores-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mon-stat  { border-radius:10px; padding:9px 7px; text-align:center; }
.mon-label { display:block; font-size:0.8rem !important; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
.mon-value { display:block; font-size:0.8em !important; font-weight:800; line-height:1.2; letter-spacing:-.3px; }
.mon-sub   { display:block; font-size:9px !important; margin-top:2px; }
.mon-inner { display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; }

/* Dark mode — Monitores */
body.dark-mode .monitor-global-card,
body.dark-mode .monitor-brasil-card  { background:#1e2a1e !important; border-color:rgba(255,255,255,.08) !important; }
body.dark-mode .monitor-global-card .mon-stat,
body.dark-mode .monitor-brasil-card .mon-stat  { background:rgba(255,255,255,.07) !important; }
body.dark-mode .monitor-global-card .mon-label,
body.dark-mode .monitor-brasil-card .mon-label { color:rgba(255,255,255,.4) !important; }
body.dark-mode .monitor-global-card .mon-sub,
body.dark-mode .monitor-brasil-card .mon-sub   { color:rgba(255,255,255,.25) !important; }
body.dark-mode .monitor-global-card .mon-header-txt,
body.dark-mode .monitor-brasil-card .mon-header-txt { color:#e0e0e0 !important; }

/* Dark mode — Painel do aluno (3 cards) */
body.dark-mode .painel-card { background:#1e2a1e !important; box-shadow:none !important; }

/* Dark mode — elementos internos dos cards da home */
body.dark-mode #globinhos-badge          { background:#162616 !important; border-color:#2e5e2e !important; }
body.dark-mode #globinhos-badge-label    { color:#81c784 !important; }
body.dark-mode #globinhos-badge-valor    { color:#a5d6a7 !important; }
body.dark-mode #xp-bar-track            { background:#2a2a2a !important; }
body.dark-mode #turma-info-box          { background:#162616 !important; }
body.dark-mode #turma-membro-nome       { color:#81c784 !important; }
body.dark-mode #turma-card-titulo       { color:#81c784 !important; }
body.dark-mode #turma-card-desc         { color:#aaa !important; }
body.dark-mode #nome-aluno-texto        { color:#81c784 !important; }
body.dark-mode #turma-join-input        { background:#252525 !important; border-color:#444 !important; color:#ddd !important; }

/* Dark mode — Cards de trilha (Natureza / Brasil / Mundo)
   Seletor estrutural: não depende de valor de atributo, imune à normalização do JS */
body.dark-mode #cards-anos .w3-third > a > div,
body.dark-mode #cards-anos .w3-third > a:hover > div {
    background: #1e2a1e !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
}
/* Hover com sombra diferenciada */
body.dark-mode #cards-anos .w3-third > a:hover > div {
    box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
}
/* Impede link de virar branco no hover */
body.dark-mode #cards-anos .w3-third > a,
body.dark-mode #cards-anos .w3-third > a:hover {
    background: transparent !important;
}
/* Textos dos cards (seletor estrutural, sem [style*=]) */
body.dark-mode #cards-anos .w3-third > a > div h3 { color:#a5d6a7 !important; }
body.dark-mode #cards-anos .w3-third > a > div p  { color:rgba(255,255,255,.5) !important; }
body.dark-mode #cards-anos .w3-third > a > div span { color:rgba(255,255,255,.4) !important; }
/* Container da imagem (fundo colorido atrás da foto) */
body.dark-mode #cards-anos .w3-third > a > div > div:first-child { background: #1a2e1a !important; }
/* Barra de progresso (track cinza) */
body.dark-mode #cards-anos .w3-third > a > div > div:last-child > div > div > div > div:first-child { background: rgba(255,255,255,.1) !important; }
/* Cabeçalho da seção (Escolha seu tema, Gratuito…) */
body.dark-mode #cards-anos h2 { color: #a5d6a7 !important; }
body.dark-mode #cards-anos > div > div > div:first-child p { color: rgba(255,255,255,.6) !important; }

/* Dark mode — Botão "Ver Ranking Completo" (hover via JS já corrigido, CSS como fallback) */
body.dark-mode #mini-ranking-turma > a,
body.dark-mode #mini-ranking-turma > a:hover {
    border-color: rgba(76,175,80,.4) !important;
    color: #81c784 !important;
}
body.dark-mode #mini-ranking-turma > a:hover {
    background: #1a2e1a !important;
}

/* Dark mode — Ranking mini (nomes gerados por JS com color:#222 inline) */
body.dark-mode #mini-ranking-lista [style*="color:#222"] { color:#e0e0e0 !important; }
body.dark-mode #mini-ranking-lista [style*="color:#999"] { color:rgba(255,255,255,.4) !important; }
body.dark-mode #mini-ranking-lista [style*="border-top:1.5px dashed"] { border-color:rgba(255,255,255,.1) !important; }
body.dark-mode .rank-pill-1 { background:rgba(249,168,37,.15) !important; }
body.dark-mode .rank-pill-2 { background:rgba(255,255,255,.08) !important; color:#aaa !important; }
body.dark-mode .rank-pill-3 { background:rgba(229,115,115,.15) !important; }

/* Dark mode — Título e textos do card Ranking */
body.dark-mode #mini-ranking-turma #mini-ranking-titulo { color:#a5d6a7 !important; }
body.dark-mode #mini-ranking-turma a[style*="color:#2e7d32"] {
    color:#81c784 !important;
    border-color:rgba(76,175,80,.4) !important;
}
body.dark-mode #mini-ranking-turma a[style*="color:#2e7d32"]:hover {
    background:#1a2e1a !important;
}

/* Dark mode — Blog Novidades */
body.dark-mode .blog-novidades-section             { background:#121212 !important; }
body.dark-mode .blog-card                          { background:#1e2a1e !important; border-color:rgba(255,255,255,.07) !important; }
body.dark-mode .blog-card-title                    { color:#a5d6a7 !important; }
body.dark-mode .blog-card-resumo                   { color:rgba(255,255,255,.45) !important; }
body.dark-mode .blog-card-tag                      { background:rgba(76,175,80,.15) !important; color:#81c784 !important; }
body.dark-mode .blog-card-link                     { color:#81c784 !important; }
body.dark-mode .blog-skeleton                      { background:#1e2a1e !important; }
body.dark-mode .blog-skeleton > div                { background:rgba(255,255,255,.06) !important; }

/* Dark mode — Citação */
body.dark-mode .citacao-card          { background:#1e2a1e !important; border-color:rgba(255,255,255,.08) !important; }
body.dark-mode .citacao-aspas         { color:rgba(76,175,80,.4) !important; }

@media (max-width:700px) {
    .monitores-grid { grid-template-columns:1fr; }
}

/* Impede o balanco lateral no site todo */
html {
    max-width: 100%;
    overflow-x: hidden; /* nao colocar position:relative aqui — quebra scroll no mobile */
}
body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    font-family: "Roboto", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* No seu arquivo de estilo ou dentro de <style> */
.status-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: white;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.btn-aula {
    width: 85%;
    max-width: 300px;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: 0.3s;
}



/* Centraliza os botões de A- A+ e Lua que ficaram desalinhados */


/* 3. Mantenha a fonte Pixel apenas onde faz sentido (Nota/Globinhos) */
.fontePixel {
    font-family: 'VT323', monospace !important;
    font-size: 22px !important;
}

/* --- Configurações de Imagem do Slideshow --- */
.mySlides img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

/* --- Seção de Apps (Capas) --- */
.fotosCapa img {
    width: 100%;
    max-width: 280px;
    /* Evita que a capa fique gigante em telas grandes */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
}

.fotosCapa img:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.CardPlayImg img {
    transition: 0.3s;
    width: 160px;
}

.CardPlayImg img:hover {
    filter: brightness(1.2);
    border: 2px solid #f5ff9e;
}

/* --- Painel de Avisos (Mural de Cortiça) --- */
.Avisos {
    max-width: 1000px;
    margin: 40px auto;
    border: 12px solid #fff;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background-image: url("../images/imagensCapa/cortica.jpg");
    background-size: cover;
    background-position: center;
    padding: 20px;
}



/* --- Rodapé (Ajustes de Ícones) --- */
#iconeFooter {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.faIcone {
    transition: 0.3s;
    color: white;
}

.faIcone:hover {
    transform: scale(1.3);
    color: #f5ff9e;
}

/* Ícone do TikTok via SVG Mask */

.fa-brands-tiktok {


    display: inline-block;
    width: 0.88em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a74.62 74.62 0 1 0 52.23 71.18V0h88a121.18 121.18 0 0 0 1.86 22.17A122.18 122.18 0 0 0 381 102.39a121.43 121.43 0 0 0 67 20.14Z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#toggle-dark-mode {
    display: flex;
    align-items: center;
}



/* Estado desativado quando atinge o limite (definido no main.js) */
/* + */



/* Garante que os elementos dentro do conteúdo principal aceitem o zoom do JS */
#conteudo-principal *,
.corpo-artigo * {
    font-size: inherit;
    /* Faz os filhos herdarem o tamanho definido no pai pelo JS */
}

/* Exceção: se você tiver títulos que devem ser sempre maiores, use porcentagem */
#conteudo-principal h1,
.corpo-artigo h2 {
    font-size: 1.5em;
    /* 1.5 vezes o tamanho atual do zoom */
}


/* Efeito de hover suave nos cards da Index */
.w3-card-4 {
    transition: transform 0.3s ease;
}

.w3-card-4:hover {
    transform: translateY(-5px);
    /* O card sobe um pouquinho ao passar o mouse */
}

/* Garante que o texto dos cards respeite o zoom do botão A+ / A- */
#conteudo-principal .w3-container p {
    font-size: inherit;
}

/* Estilo para as Frases e Transições */
#frase {
    transition: opacity 0.5s ease-in-out;
    font-style: italic;
    color: #444;
    min-height: 80px;
    /* Evita que o layout "pule" quando a frase carrega */
}

#autor-img {
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    /* Começa invisível para o JS mostrar depois */
    object-fit: cover;
    /* Garante que a foto não fique achatada */
}

/* Garante que o texto do autor também combine com o estilo */
#autor {
    transition: opacity 0.5s ease-in-out;
    font-weight: bold;
}

/* Centralização vertical do conteúdo do autor */
.w3-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Transição suave para a mudança de cor */
body,
.w3-card,
.w3-panel,
.w3-white,
.w3-light-grey,
a {
    transition: background-color 0.4s, color 0.4s;
}

/* Regras do Dark Mode */
body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* ── Header (novo design branco) ── */
body.dark-mode nav {
    background: #1a1a2a !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}
body.dark-mode .header-nav-link {
    color: rgba(255,255,255,.6) !important;
}
body.dark-mode .header-nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.07) !important;
}
body.dark-mode .header-nav-link.active {
    color: #fff !important;
}
body.dark-mode #status-dot-link {
    background: rgba(255,255,255,.08) !important;
}
body.dark-mode #navDemo {
    background: #1a1a2a !important;
    border-top-color: rgba(255,255,255,.08) !important;
}
body.dark-mode #navDemo .w3-bar-item {
    color: rgba(255,255,255,.75) !important;
}

/* ── Sidebar (novo design branco) ── */
body.dark-mode #sidebar-duvid {
    background: #1a1a2a !important;
    border-color: rgba(255,255,255,.08) !important;
}
body.dark-mode #sidebar-user-card {
    background: rgba(255,255,255,.06) !important;
}
body.dark-mode #sidebar-nome-aluno {
    color: #e0e0e0 !important;
}
body.dark-mode #sidebar-nivel-txt,
body.dark-mode #sidebar-rank-txt {
    color: rgba(255,255,255,.5) !important;
}
body.dark-mode .sidebar-sep {
    background: rgba(255,255,255,.08) !important;
}
body.dark-mode .sidebar-nav-item {
    color: rgba(255,255,255,.6) !important;
}
body.dark-mode .sidebar-nav-item:hover {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
}
body.dark-mode .sidebar-nav-item.active {
    background: #2e7d32 !important;
    color: #fff !important;
}
body.dark-mode .sidebar-nav-item i {
    color: rgba(255,255,255,.4) !important;
}
body.dark-mode .sidebar-nav-item:hover i,
body.dark-mode .sidebar-nav-item.active i {
    color: inherit !important;
}
body.dark-mode .sidebar-sub-item {
    color: rgba(255,255,255,.45) !important;
}
/* sidebar-ctrl-btn dark mode — sidebar.css cuida do sidebar-font-btn (verde) */
body.dark-mode .sidebar-ctrl-btn {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.5) !important;
}
body.dark-mode .sidebar-ctrl-btn:hover {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

/* ── Cards e seções da home ── */
body.dark-mode #cards-anos {
    background: #121212 !important;
}
body.dark-mode #cards-anos [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#ffffff"] {
    background: #1e1e1e !important;
}
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #f8f9fa"] {
    background: #181818 !important;
}
body.dark-mode [style*="color:#555"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color:#333"] {
    color: #ccc !important;
}
body.dark-mode [style*="color:#aaa"],
body.dark-mode [style*="color: #aaa"] {
    color: rgba(255,255,255,.4) !important;
}
body.dark-mode [style*="border:1px solid #f0f0f0"],
body.dark-mode [style*="border-color:#e0e0e0"] {
    border-color: rgba(255,255,255,.08) !important;
}
body.dark-mode [style*="background:#e0e0e0"],
body.dark-mode [style*="background: #e0e0e0"] {
    background: rgba(255,255,255,.12) !important;
}

/* Sobrescrevendo as classes do W3.CSS no modo escuro */
body.dark-mode .w3-white,
body.dark-mode .w3-card,
body.dark-mode .w3-light-grey,
body.dark-mode .w3-modal-content {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

body.dark-mode .w3-text-green {
    color: #4ade80 !important;
    /* Um verde mais brilhante para ler no escuro */
}

/* Ajuste nos links de Quick Links para não sumirem */
body.dark-mode .w3-button.w3-white:hover {
    background-color: #333 !important;
}

/* Ajuste no Painel de Citação */
body.dark-mode .w3-border-green {
    border-color: #4ade80 !important;
}


/* No Dark Mode, garantimos que a barra de feedback não fique "cega" */
body.dark-mode #barra-feedback.w3-green {
    background-color: #1b5e20 !important;
}

body.dark-mode #barra-feedback.w3-red {
    background-color: #b71c1c !important;
}



/* Ajuste para o Dark Mode na seção cinza */
body.dark-mode .w3-light-grey,
body.dark-mode .section-anos {
    background-color: #121212 !important;
    /* Fundo bem escuro */
}

body.dark-mode .card-ano {
    background-color: #1e1e1e !important;
    /* Card um pouco menos escuro */
    color: white !important;
    border: 1px solid #333;
}

body.dark-mode .w3-border-light-grey {
    border-color: #333 !important;
}




/* Espaçamento entre os cards */
.card-ano {
    margin: 10px;
    /* Aumenta a distância entre um card e outro */
    padding: 5px !important;
    /* Aumenta o espaço branco dentro do card, deixando-o mais "gordo" */
    min-height: 450px;
    /* Garante que todos tenham uma altura mínima elegante */
}

.card-ano:hover {
    transform: translateY(-5px);
    /* Efeito de levante ao passar o mouse */
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* Ajuste para a barra de feedback inferior */
#barra-feedback {
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
}

#barra-feedback .w3-button {
    height: 50px;
    /* Mais fácil de clicar no celular */
    letter-spacing: 1px;
    transition: 0.2s;
}

#barra-feedback .w3-button:active {
    transform: scale(0.98);
}

/* --- BLINDAGEM CONTRA BOTÕES INVISÍVEIS --- */

/* Garante que o botão .p4 (questões) nunca fique transparente ao ser desativado */
.p4:disabled {
    cursor: not-allowed !important;
    opacity: 1 !important;
    /* O segredo para não sumir */
    visibility: visible !important;
    background-color: #f9f9f9 !important;
    /* Cor sólida para não fundir com o fundo */
    color: #444 !important;
    border: 2px solid #ddd !important;
}

/* Ajuste para o Dark Mode: botão desativado precisa ser legível no escuro */
body.dark-mode .p4:disabled {
    background-color: #2a2a2a !important;
    color: #ccc !important;
    border-color: #444 !important;
}

/* Remove qualquer transição de opacidade que possa causar o efeito de sumiço */
button:disabled {
    transition: none !important;
}

/* --- AJUSTE DARK MODE PARA O FOOTER --- */
body.dark-mode footer.w3-green {
    background-color: #1a1a1a !important;
    /* Cinza quase preto */
    color: #e0e0e0 !important;
    /* Texto cinza claro */
    border-top: 4px solid #4CAF50 !important;
    /* Mantém uma linha verde fina no topo para estilo */
}

/* Garante que os links de política e textos do footer fiquem legíveis */
body.dark-mode footer a,
body.dark-mode footer p,
body.dark-mode footer span {
    color: #b0b0b0 !important;
}

/* Deixa os ícones das redes sociais brancos ou verde-claro no escuro */
body.dark-mode footer .fa-brands {
    color: #ffffff !important;
}

/* --- BLINDAGEM DARK MODE PARA ALTERNATIVAS --- */
body.dark-mode .card-opcao {
    background-color: #2a2a2a !important;
    /* Cinza escuro */
    border-color: #444 !important;
    /* Borda discreta */
    color: #eeeeee !important;
    /* Texto quase branco */
}

/* Efeito de Hover no Dark Mode */
body.dark-mode .card-opcao:hover {
    background-color: #333 !important;
    border-color: #009688 !important;
}

/* Quando a alternativa estiver SELECIONADA no Dark Mode */
body.dark-mode .radio-duvid:checked+.card-opcao {
    background-color: #004d40 !important;
    /* Verde bem escuro (Teal) */
    border-color: #009688 !important;
    /* Brilho verde na borda */
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 150, 136, 0.3);
}

/* Ajuste para o texto de apoio e perguntas no Dark Mode */
body.dark-mode .w3-panel.w3-sand {
    background-color: #252520 !important;
    /* Um areia bem escuro */
    color: #f1f1f1 !important;
    border-left-color: #69CB60 !important;
}

body.dark-mode p.w3-large {
    color: #ffffff !important;
}

/* Garante que a frase e o autor fiquem brancos no modo escuro */
body.dark-mode #frase,
body.dark-mode #autor {
    color: #ffffff !important;
}

/* Opcional: Ajuste a opacidade se quiser um visual mais suave no escuro */
body.dark-mode #frase {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#buttonConfira {
    display: block;
    padding: 12px 20px;
    font-size: 16px;

    /* Altera de '20px auto' para: */
    margin: 20px 0;

    cursor: pointer;
    color: #fff;
    background-color: #69CB60;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 0 #39693b;
    position: relative;
    font-family: 'pixel', sans-serif;
    transition: all 0.1s;
}

/* Estilo para o campo de entrada de nome */
.input {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    font-family: sans-serif;
    text-align: center;
    margin: 10px auto;
}

.input:focus {
    border-color: #69CB60;
}

/* no arquivo index-estilo.css */
.duvid-banner {
    width: 100%;
    height: auto;
    min-height: auto;
    object-fit: cover;
    object-position: center;
    margin-top: 2%;
}



@media (min-width: 993px) {
    .duvid-banner {
        min-height: auto;
    }

    /* desktop: volta ao comportamento natural */
}



/* Ajuste fino nos cards para não 'empurrarem' a tela no mobile */
@media (max-width: 600px) {
    .w3-row-padding {
        padding: 0 8px !important;
        /* Diminui o respiro lateral da linha */
        margin: 0 !important;
        /* Zera margens que causam o balanço */
    }

    .w3-third {
        padding: 0 !important;
        /* Remove padding que pode somar à largura total */
    }

    .card-ano {
        margin: 15px 5px !important;
        /* Margem pequena dos lados para não tocar a borda da tela */
        width: calc(100% - 10px) !important;
        /* Garante que o card nunca seja 100% + margem */
        box-sizing: border-box;
    }

    .w3-right {
        position: absolute;
        right: 0;
        top: 0;
    }

    .w3-third {
        width: 100% !important;
        /* Força um card por linha no celular */
        padding: 0 10px !important;
    }



    .btn-google-play {
        width: 100%;
        /* Botão ocupa toda a largura do card no celular */
    }

    .duvid-banner {
        min-height: 350px;
       margin-top: 10%;
    }

}
/* Animação global usada nos modais injetados via JS */
@keyframes zoomIn { from { transform:scale(.85); opacity:0 } to { transform:scale(1); opacity:1 } }

/* ── Dark Mode — "NOVATO" e ícones FontAwesome ─────────────────────────────── */
body.dark-mode #rank-nome,
body.dark-mode .w3-text-black {
    color: #e0e0e0 !important;
}

/* Exceção: cards de link (postit-tp9, ex. "Para saber mais") usam w3-text-black
   de propósito sobre fundos claros (amarelo, laranja, etc.) — manter texto preto
   mesmo no dark mode, senão o texto fica quase ilegível sobre o card colorido. */
body.dark-mode .postit-tp9 .w3-text-black {
    color: #000 !important;
}

/* Todos os ícones fa que não têm cor explícita ficam brancos */
body.dark-mode .fa:not(.w3-text-amber):not(.w3-text-green):not(.w3-text-red):not(.w3-text-teal) {
    color: #ffffff !important;
}

/* Botão de editar nome (w3-light-grey vira escuro, lápis fica branco) */
body.dark-mode button.w3-light-grey {
    background-color: #333 !important;
    color: #fff !important;
}

/* ── Dark Mode — Monitor Global e Monitor Brasil ───────────────────────────── */
body.dark-mode .w3-text-dark-grey {
    color: #e0e0e0 !important;
}

body.dark-mode .card-widget p,
body.dark-mode .card-widget small,
body.dark-mode .card-widge p,
body.dark-mode .card-widge small {
    color: #aaa !important;
}

/* Números sem classe de cor explícita (temp, petróleo) */
body.dark-mode .card-widget b,
body.dark-mode .card-widge b {
    color: #e0e0e0;
}

/* Quick links — labels dos botões */
body.dark-mode .w3-button .w3-large {
    color: #e0e0e0 !important;
}