/* ==========================================================

   darkmode.css — botão ON/OFF + modo escuro do ConectaCP2

   Carregue DEPOIS de style.css, amizades.css (e, se quiser,

   direct.css / grupos.css, que o Direct.php já carrega).

   O modo escuro só vale quando <html data-theme="dark"> —

   quem coloca/tira esse atributo é o darkmode.js.

   Sem o atributo, o site fica exatamente como era (claro).

   ========================================================== */



/* ----------------------------------------------------------

   1) BOTÃO ON/OFF (aparece nos dois modos)

   ---------------------------------------------------------- */

.btn-tema {

    position: relative;

    flex-shrink: 0;

    width: 58px;

    height: 32px;

    padding: 0;

    border: 1px solid var(--glass-border);

    border-radius: 999px;

    background: var(--glass-bg);

    cursor: pointer;

    transition: background 0.25s, border-color 0.25s;

}



.btn-tema:hover { background: rgba(255, 255, 255, 0.22); }



.btn-tema:focus-visible {

    outline: 3px solid #a8d4ff;

    outline-offset: 2px;

}



/* bolinha que desliza */

.btn-tema-bola {

    position: absolute;

    top: 3px;

    left: 3px;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #ffffff;

    display: grid;

    place-items: center;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);

    transition: transform 0.28s cubic-bezier(.4, 0, .2, 1), background 0.25s;

}



.btn-tema-bola svg {

    grid-area: 1 / 1;

    width: 14px;

    height: 14px;

    fill: currentColor;

    transition: opacity 0.2s, transform 0.28s;

}



/* claro (OFF): bolinha à esquerda, sol laranja */

.btn-tema-sol  { color: #f59e0b; opacity: 1; }

.btn-tema-lua  { color: #ffd76a; opacity: 0; transform: rotate(-40deg) scale(0.6); }



/* escuro (ON): bolinha à direita, lua */

html[data-theme="dark"] .btn-tema { background: rgba(58, 126, 246, 0.45); }

html[data-theme="dark"] .btn-tema-bola { transform: translateX(26px); background: #0b1020; }

html[data-theme="dark"] .btn-tema-sol { opacity: 0; transform: rotate(40deg) scale(0.6); }

html[data-theme="dark"] .btn-tema-lua { opacity: 1; transform: none; }



/* container do login (agrupa ☰ + botão de tema no canto direito) */

.nav-direita {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* transição suave só no instante da troca (classe posta pelo JS por ~0,4s) */

html.tema-transicao,

html.tema-transicao *,

html.tema-transicao *::before,

html.tema-transicao *::after {

    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important;

}



/* ----------------------------------------------------------

   2) MODO ESCURO — variáveis

   (as telas que usam var(--text-dark), var(--blue-50) etc.

   já se adaptam sozinhas. --white NÃO é alterada porque

   também é usada como cor de texto sobre fundo azul.)

   ---------------------------------------------------------- */

html[data-theme="dark"] {

    color-scheme: dark; /* barras de rolagem e controles nativos escuros */



    --dm-surface:   #131b33;

    --dm-surface-2: #182243;

    --dm-surface-3: #1f2b52;

    --dm-borda:     #2b3659;

    --dm-link:      #8ab4ff;



    --text-dark:    #e8edfb;

    --text-mid:     #b4c0e0;

    --borda-suave:  #2b3659;

    --glass-card:   rgba(15, 22, 43, 0.94);

    --shadow-card:  0 8px 48px rgba(0, 0, 0, 0.45);

    --blue-50:      #18224a;

    --blue-100:     #25346a;

    --blue-200:     #3a58a8;

}



/* ----------------------------------------------------------

   3) Fundo, topo, rodapé e cartões-base

   ---------------------------------------------------------- */

html[data-theme="dark"] body {

    background: linear-gradient(135deg, #050a1f 0%, #0a1647 45%, #0f2563 100%);

}



/* tela inicial: mesma imagem de brasões, só escurecida por cima */

html[data-theme="dark"] body:not(.pagina-login):not(.secao-ativa) {

    background-color: #050a1f !important;

    background-image:

        linear-gradient(rgba(4, 8, 24, 0.68), rgba(4, 8, 24, 0.68)),

        url('Imagens/telainicio.webp') !important;

}



html[data-theme="dark"] .topbar,

html[data-theme="dark"] .pagina-login nav {

    background: rgba(6, 12, 36, 0.92);

}



html[data-theme="dark"] .rodape {

    background: rgba(15, 22, 43, 0.94);

    border-color: var(--dm-borda);

}



html[data-theme="dark"] .quadrado {

    background: rgba(19, 27, 51, 0.9);

    border-color: rgba(255, 255, 255, 0.08);

}



html[data-theme="dark"] .tela-secao { box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.45); }



html[data-theme="dark"] .pagina-login .login-card { border-color: rgba(255, 255, 255, 0.1); }



/* ----------------------------------------------------------

   4) Superfícies que eram brancas (#fff) → cartão escuro

   ---------------------------------------------------------- */

html[data-theme="dark"] .perfil-card,

html[data-theme="dark"] .sug-item,

html[data-theme="dark"] .post-card,

html[data-theme="dark"] .comentario-card,

html[data-theme="dark"] .evento-card,

html[data-theme="dark"] .evento-menu-opcoes,

html[data-theme="dark"] .form-comentario input[type="text"],

html[data-theme="dark"] .ordenar-comentarios select,

html[data-theme="dark"] .painel-pedidos,

html[data-theme="dark"] .chat-app,

html[data-theme="dark"] .chat-lista,

html[data-theme="dark"] .chat-cabecalho,

html[data-theme="dark"] .chat-mais-antigas,

html[data-theme="dark"] .chat-compor,

html[data-theme="dark"] .chat-compor textarea,

html[data-theme="dark"] .chat-gravando,

html[data-theme="dark"] .chat-contador,

html[data-theme="dark"] .grupo-rodape,

html[data-theme="dark"] .grp-modal {

    background: var(--dm-surface);

}



html[data-theme="dark"] .pagina-login .tab.active {

    background: var(--dm-surface-3);

    color: var(--dm-link);

}



html[data-theme="dark"] .chat-painel { background: #0e1429; }



html[data-theme="dark"] .chat-linha.outra .chat-bolha {

    background: var(--dm-surface-3);

    border-color: var(--dm-borda);

}



html[data-theme="dark"] .avatar-mini {

    box-shadow: 0 0 0 2px var(--dm-surface), 0 2px 6px rgba(0, 0, 0, 0.4);

}



/* ----------------------------------------------------------

   5) Campos de formulário (#f8faff) e áreas suaves

   ---------------------------------------------------------- */

html[data-theme="dark"] .pagina-login input,

html[data-theme="dark"] .pagina-login select,

html[data-theme="dark"] .form-perfil textarea,

html[data-theme="dark"] .form-perfil select,

html[data-theme="dark"] .form-perfil input[type="text"],

html[data-theme="dark"] .form-perfil input[type="number"],

html[data-theme="dark"] .painel-filtro select,

html[data-theme="dark"] .form-post textarea,

html[data-theme="dark"] .busca-forum input[type="search"],

html[data-theme="dark"] .grp-input,

html[data-theme="dark"] .form-busca input[type="text"],

html[data-theme="dark"] .painel-filtro,

html[data-theme="dark"] .form-post,

html[data-theme="dark"] .pagina-login .tabs {

    background: var(--dm-surface-2);

    border-color: var(--dm-borda);

    color: var(--text-dark);

}



/* ao focar, um tom um pouco mais claro (antes ficava branco) */

html[data-theme="dark"] .pagina-login input:focus,

html[data-theme="dark"] .pagina-login select:focus,

html[data-theme="dark"] .form-perfil textarea:focus,

html[data-theme="dark"] .form-perfil select:focus,

html[data-theme="dark"] .form-perfil input[type="text"]:focus,

html[data-theme="dark"] .form-perfil input[type="number"]:focus,

html[data-theme="dark"] .painel-filtro select:focus,

html[data-theme="dark"] .form-post textarea:focus,

html[data-theme="dark"] .busca-forum input[type="search"]:focus,

html[data-theme="dark"] .grp-input:focus,

html[data-theme="dark"] .form-busca input[type="text"]:focus {

    background: var(--dm-surface-3);

    border-color: var(--blue-400);

}



html[data-theme="dark"] .painel-filtro,

html[data-theme="dark"] .form-post { border: 1px solid var(--dm-borda); }



html[data-theme="dark"] ::placeholder { color: #7f8cb3; opacity: 1; }



/* preenchimento automático do navegador (ele pinta de branco/amarelo) */

html[data-theme="dark"] input:-webkit-autofill,

html[data-theme="dark"] input:-webkit-autofill:focus {

    -webkit-box-shadow: 0 0 0 1000px var(--dm-surface-2) inset;

    -webkit-text-fill-color: var(--text-dark);

    caret-color: var(--text-dark);

}



html[data-theme="dark"] .lista-comentarios,

html[data-theme="dark"] .btn-curtir,

html[data-theme="dark"] .comentario-resposta,

html[data-theme="dark"] .post-midia-item,

html[data-theme="dark"] .grp-acoes .grp-btn-sec,

html[data-theme="dark"] .amz-mini-nao {

    background: var(--dm-surface-2);

}



/* "chips" e botões secundários (#eef2fb) */

html[data-theme="dark"] .btn-filtro,

html[data-theme="dark"] .post-comentarios-link,

html[data-theme="dark"] .btn-curtir-post:not(.ativo),

html[data-theme="dark"] .btn-responder,

html[data-theme="dark"] .evento-menu[open] summary,

html[data-theme="dark"] .evento-data-evento {

    background: var(--dm-surface-3);

}



html[data-theme="dark"] :is(.btn-filtro, .post-comentarios-link, .btn-curtir-post:not(.ativo), .btn-responder):hover {

    background: var(--blue-100);

}



html[data-theme="dark"] .chat-item:hover,

html[data-theme="dark"] .evento-menu-opcoes a:hover,

html[data-theme="dark"] .evento-menu-opcoes button:hover {

    background: var(--dm-surface-2);

}



/* ----------------------------------------------------------

   6) Bordas claras → bordas escuras

   ---------------------------------------------------------- */

html[data-theme="dark"] .perfil-links,

html[data-theme="dark"] .ordenar-comentarios,

html[data-theme="dark"] .amz-pedido,

html[data-theme="dark"] .grupo-rodape,

html[data-theme="dark"] .grp-lista,

html[data-theme="dark"] .evento-menu-opcoes,

html[data-theme="dark"] .form-comentario input[type="text"],

html[data-theme="dark"] .ordenar-comentarios select,

html[data-theme="dark"] .btn-limpar-filtro,

html[data-theme="dark"] .grp-acoes .grp-btn-sec,

html[data-theme="dark"] .amz-mini-nao {

    border-color: var(--dm-borda);

}



html[data-theme="dark"] .grp-amigo + .grp-amigo { border-top-color: var(--dm-borda); }



/* ----------------------------------------------------------

   7) Textos

   ---------------------------------------------------------- */

/* eram #2c3e50 (escuro) → agora claros */

html[data-theme="dark"] .post-texto,

html[data-theme="dark"] .comentario-texto,

html[data-theme="dark"] .evento-descricao {

    color: var(--text-dark);

}



/* azuis que ficariam apagados sobre fundo escuro → azul mais claro */

html[data-theme="dark"] .register-prompt a,

html[data-theme="dark"] .btn-filtro,

html[data-theme="dark"] .btn-limpar-filtro:hover,

html[data-theme="dark"] .post-comentarios-link,

html[data-theme="dark"] .btn-curtir-post:not(.ativo),

html[data-theme="dark"] .btn-responder,

html[data-theme="dark"] .btn-ver-respostas,

html[data-theme="dark"] .evento-menu[open] summary,

html[data-theme="dark"] .evento-menu-opcoes a,

html[data-theme="dark"] .evento-data-evento,

html[data-theme="dark"] .evento-link-editar,

html[data-theme="dark"] .rodape button.ativo,

html[data-theme="dark"] .busca-forum-limpar,

html[data-theme="dark"] .amz-btn-link,

html[data-theme="dark"] .chat-voltar,

html[data-theme="dark"] .chat-mais-antigas,

html[data-theme="dark"] #secao-perfil-publico a[style*="color"] {

    color: var(--dm-link);

}



html[data-theme="dark"] .btn-curtir-post.ativo { color: #ffffff; }



html[data-theme="dark"] .perfil-nome mark,

html[data-theme="dark"] .post-titulo mark {

    background: rgba(58, 126, 246, 0.4);

    color: inherit;

}



/* ----------------------------------------------------------

   8) Curtir, mensagens de sucesso/erro

   ---------------------------------------------------------- */

html[data-theme="dark"] .btn-curtir:hover,

html[data-theme="dark"] .btn-curtir.ativo,

html[data-theme="dark"] .btn-excluir-comentario:hover {

    background: rgba(214, 59, 59, 0.18);

    color: #ff8a8a;

}



html[data-theme="dark"] .mensagem-perfil {

    background: rgba(46, 125, 50, 0.22);

    color: #8be18f;

}



html[data-theme="dark"] .aviso-perfil {

    background: rgba(245, 158, 11, 0.14);

    color: #fbbf24;

}



html[data-theme="dark"] .pagina-login .aviso-campo {

    color: #ff9a9a;

}



/* mensagens de erro (algumas têm style="background:#fdecea" direto no PHP) */

html[data-theme="dark"] .mensagem-perfil[style*="fdecea"],

html[data-theme="dark"] .chat-erro,

html[data-theme="dark"] .chat-linha.falhou .chat-bolha {

    background: rgba(214, 59, 59, 0.16) !important;

    color: #ff9a9a !important;

    border-color: rgba(214, 59, 59, 0.4);

}



html[data-theme="dark"] .chat-linha.falhou .chat-status { color: #ff9a9a; }



/* ----------------------------------------------------------

   9) Campo de busca da aba Busca (tem style="" inline no PHP)

   ---------------------------------------------------------- */

html[data-theme="dark"] .form-busca input[type="text"] {

    border-color: var(--dm-borda) !important;

}



/* ----- Janela "Curtidas" ----- */

html[data-theme="dark"] .curtidas-janela {

    background: var(--dm-surface);

    color: #e8edff;

}



html[data-theme="dark"] .curtidas-topo {

    border-bottom-color: var(--dm-borda);

}



html[data-theme="dark"] .curtidas-fechar:hover,

html[data-theme="dark"] .curtidas-item:hover {

    background: var(--dm-surface-2);

}



html[data-theme="dark"] .btn-ver-curtidas {

    color: #9fb0d6;

}



html[data-theme="dark"] .btn-ver-curtidas:hover {

    color: var(--dm-link);

}



/* ----------------------------------------------------------

   Exclusão de mensagens e informações do grupo

   ---------------------------------------------------------- */

html[data-theme="dark"] .chat-linha.apagada .chat-bolha {

    background: transparent;

    border: 1px dashed var(--dm-borda);

    color: var(--text-mid);

}

html[data-theme="dark"] .chat-cab-info:hover,

html[data-theme="dark"] .grp-membro:hover,

html[data-theme="dark"] .grp-membro:focus-visible {

    background: var(--dm-surface-3);

}

html[data-theme="dark"] .grp-membros { border-color: var(--dm-borda); }

html[data-theme="dark"] .grp-membros li + li { border-top-color: var(--dm-borda); }

html[data-theme="dark"] .grp-selo-admin { color: var(--dm-link); }

html[data-theme="dark"] .chat-apagar:hover {

    background: rgba(214, 59, 59, 0.18);

    color: #ff8a8a;

}





/* ----------------------------------------------------------

   Momentos (fotos do perfil)

   ---------------------------------------------------------- */

html[data-theme="dark"] .perfil-col-momentos,

html[data-theme="dark"] .momento-acoes,

html[data-theme="dark"] .postar-topo {

    border-color: var(--dm-borda);

}



html[data-theme="dark"] .momento-janela,

html[data-theme="dark"] .postar-janela {

    background: var(--dm-surface);

    color: #e8edff;

}



html[data-theme="dark"] .momento-quadrado,

html[data-theme="dark"] .postar-escolher {

    background: var(--dm-surface-2);

}



html[data-theme="dark"] .postar-escolher { border-color: var(--dm-borda); color: var(--dm-link); }



html[data-theme="dark"] .postar-form textarea {

    background: var(--dm-surface-2);

    border-color: var(--dm-borda);

    color: var(--text-dark);

}



html[data-theme="dark"] .postar-fechar:hover { background: var(--dm-surface-2); }



html[data-theme="dark"] .momentos-vazio { border-color: var(--dm-borda); color: var(--text-mid); }



html[data-theme="dark"] .postar-erro { background: #3a1a1d; color: #ffb4ab; }



html[data-theme="dark"] .momento-excluir { color: #ff8a8a; }

html[data-theme="dark"] .momento-excluir:hover { background: rgba(255, 138, 138, 0.12); }





/* ----------------------------------------------------------

   Direct: pesquisa de conversas (lupa e sugestões)

   ---------------------------------------------------------- */

html[data-theme="dark"] .direct-lupa { background: var(--dm-surface-3); color: var(--dm-link); }

html[data-theme="dark"] .direct-lupa:hover { background: var(--blue-200); color: #fff; }

html[data-theme="dark"] .direct-lupa.ativa { background: var(--blue-400); color: #fff; }

html[data-theme="dark"] .direct-sugestoes {

    background: var(--dm-surface-2);

    border-color: var(--dm-borda);

    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);

}

html[data-theme="dark"] .direct-sug:hover,

html[data-theme="dark"] .direct-sug.ativa { background: var(--dm-surface-3); }

html[data-theme="dark"] .direct-sug-tipo { background: var(--dm-surface-3); color: var(--dm-link); }

html[data-theme="dark"] .direct-sug.ativa .direct-sug-tipo,

html[data-theme="dark"] .direct-sug:hover .direct-sug-tipo { background: var(--dm-surface); }

html[data-theme="dark"] .chat-item-nome mark,

html[data-theme="dark"] .direct-sug-nome mark { background: #2f4a9a; color: #fff; }





/* ----- Pesquisa de mensagens, descrição e administração de grupo ----- */

html[data-theme="dark"] .chat-busca-msg { background: var(--dm-surface); border-bottom-color: var(--dm-borda); }

html[data-theme="dark"] .chat-busca-msg-campo { background: rgba(255, 255, 255, 0.06); border-color: var(--dm-borda); }

html[data-theme="dark"] .chat-busca-msg-campo input { color: inherit; }

html[data-theme="dark"] .chat-cab-lupa { background: rgba(255, 255, 255, 0.08); }

html[data-theme="dark"] .chat-cab-lupa:hover { background: rgba(255, 255, 255, 0.14); }

html[data-theme="dark"] .chat-busca-msg-seta:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }

html[data-theme="dark"] .grp-info-desc { background: rgba(255, 255, 255, 0.06); color: inherit; }

html[data-theme="dark"] .grp-btn-peq { background: transparent; border-color: var(--dm-borda); color: var(--dm-link); }

html[data-theme="dark"] .grp-btn-peq:hover { background: rgba(255, 255, 255, 0.08); }

html[data-theme="dark"] .grp-remover { border-color: #7a3a3a; color: #ff8a8a; }

html[data-theme="dark"] .grp-remover:hover { background: rgba(255, 138, 138, 0.12); }





/* Avisos do grupo, grupo somente leitura, lixeira e "Tornar admin" */

html[data-theme="dark"] .chat-aviso { background: rgba(255, 255, 255, 0.08); }

html[data-theme="dark"] .chat-somente-leitura { background: var(--dm-surface); border-top-color: var(--dm-borda); color: inherit; }

html[data-theme="dark"] .chat-cab-apagar:hover { background: rgba(255, 138, 138, 0.15); color: #ff8a8a; }

html[data-theme="dark"] .grp-promover { border-color: var(--dm-borda); color: var(--dm-link); }

html[data-theme="dark"] .grp-promover:hover { background: rgba(255, 255, 255, 0.08); }





/* ----------------------------------------------------------

   Cartão do perfil

   ---------------------------------------------------------- */

html[data-theme="dark"] .pf-card {

    background: transparent;

    border-color: transparent;

}

html[data-theme="dark"] .pf-sub,

html[data-theme="dark"] .pf-stat span { color: #9fb0dd; }

html[data-theme="dark"] .pf-campus,

html[data-theme="dark"] .pf-stat strong { color: var(--dm-link); }

html[data-theme="dark"] .pf-stat,

html[data-theme="dark"] .pf-aba {

    background: var(--dm-surface-3);

    border-color: var(--dm-borda);

    color: #e6ebff;

}

html[data-theme="dark"] .pf-aba:hover { background: var(--dm-borda); }

html[data-theme="dark"] .pf-btn-msg {

    background: var(--dm-surface-3);

    border-color: var(--dm-borda);

    color: var(--dm-link);

}

html[data-theme="dark"] .pf-btn-msg:hover { background: var(--dm-borda); }

html[data-theme="dark"] .pf-aba.ativa {

    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));

    border-color: transparent;

    color: #ffffff;

}





/* ----------------------------------------------------------

   Amizades: botão com menu, "em comum" e janela de conexões

   ---------------------------------------------------------- */

html[data-theme="dark"] .amz-btn-amigos {

    background: rgba(52, 199, 112, 0.14);

    border-color: rgba(52, 199, 112, 0.35);

    color: #6fdc9b;

}

html[data-theme="dark"] .amz-btn-amigos:hover,

html[data-theme="dark"] .amz-btn-amigos[aria-expanded="true"] { background: rgba(52, 199, 112, 0.22); }

html[data-theme="dark"] .amz-btn-neutro {

    background: var(--dm-surface-3);

    border-color: var(--dm-borda);

    color: #e6ebff;

}

html[data-theme="dark"] .amz-btn-neutro:hover,

html[data-theme="dark"] .amz-btn-neutro[aria-expanded="true"] { background: var(--dm-borda); }



html[data-theme="dark"] .amz-menu {

    background: var(--dm-surface-2);

    border-color: var(--dm-borda);

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);

}

html[data-theme="dark"] .amz-menu-item { color: #e6ebff; }

html[data-theme="dark"] .amz-menu-item:hover { background: var(--dm-surface-3); }

html[data-theme="dark"] .amz-menu-perigo { color: #ff8a8a; }

html[data-theme="dark"] .amz-menu-perigo:hover { background: rgba(255, 138, 138, 0.14); }



html[data-theme="dark"] .pf-stat-btn:hover { border-color: var(--dm-link); box-shadow: none; }

html[data-theme="dark"] .pf-comum { background: var(--dm-surface-3); color: #b4c0e0; }

html[data-theme="dark"] .pf-comum:hover { background: var(--dm-borda); }

html[data-theme="dark"] .pf-comum-txt strong { color: #e6ebff; }

html[data-theme="dark"] .pf-comum-av { border-color: var(--dm-surface-2); }



html[data-theme="dark"] .amz-janela {

    background: var(--dm-surface);

    border: 1px solid var(--dm-borda);

    color: #e6ebff;

}

html[data-theme="dark"] .amz-fechar { background: var(--dm-surface-3); color: #b4c0e0; }

html[data-theme="dark"] .amz-fechar:hover { background: var(--dm-borda); }

html[data-theme="dark"] .amz-abas { background: var(--dm-surface-3); }

html[data-theme="dark"] .amz-aba { color: #b4c0e0; }

html[data-theme="dark"] .amz-aba.ativa { background: var(--dm-surface); color: var(--dm-link); box-shadow: none; }

html[data-theme="dark"] .amz-busca {

    background: var(--dm-surface-3);

    border-color: var(--dm-borda);

    color: #e6ebff;

}

html[data-theme="dark"] .amz-amigo:hover { background: var(--dm-surface-3); }

html[data-theme="dark"] .amz-selo-comum { background: rgba(138, 180, 255, 0.16); color: var(--dm-link); }

html[data-theme="dark"] .amz-mini-nao { background: var(--dm-surface-3); border-color: var(--dm-borda); color: #e6ebff; }





/* ----------------------------------------------------------

   Comentários dos Momentos

   ---------------------------------------------------------- */

html[data-theme="dark"] .mc { color: #e8edff; }

html[data-theme="dark"] .momento-btn-comentar { background: var(--dm-surface-3); color: var(--dm-link); }

html[data-theme="dark"] .momento-btn-comentar:hover { background: var(--dm-borda); }

html[data-theme="dark"] .mc-titulo span,

html[data-theme="dark"] .mc-respondendo { color: #b4c0e0; }

html[data-theme="dark"] .mc-respondendo { background: var(--dm-surface-3); }

html[data-theme="dark"] .mc-respondendo strong { color: #e8edff; }

html[data-theme="dark"] .mc-respondendo button:hover { background: rgba(255, 255, 255, 0.1); }

html[data-theme="dark"] .mc-fechar { background: var(--dm-surface-3); color: #b4c0e0; }

html[data-theme="dark"] .mc-form { border-color: var(--dm-borda); }

html[data-theme="dark"] .mc-campo { background: var(--dm-surface-2); border-color: var(--dm-borda); }

html[data-theme="dark"] .mc-campo textarea { color: #e8edff; }

html[data-theme="dark"] .mc-marca { color: var(--dm-link); }

html[data-theme="dark"] .mc-acao,

html[data-theme="dark"] .mc-toggle { color: #9fb0dd; }

html[data-theme="dark"] .mc-acao:hover,

html[data-theme="dark"] .mc-toggle:hover { color: var(--dm-link); background: rgba(138, 180, 255, 0.1); }

html[data-theme="dark"] .mc-acao-excluir:hover,

html[data-theme="dark"] .mc-acao-excluir.confirmar { color: #ff8a8a; background: rgba(255, 138, 138, 0.12); }

html[data-theme="dark"] .mc-curtir:hover,

html[data-theme="dark"] .mc-curtir.ativo { color: #ff4d4d; }

html[data-theme="dark"] .mc-curtir.ativo svg { filter: drop-shadow(0 0 5px rgba(255, 77, 77, 0.55)); }

html[data-theme="dark"] .mc-erro { background: #3a1a1d; color: #ffb4ab; }

html[data-theme="dark"] .mc-vazio-erro { color: #ffb4ab; }

@media (max-width: 720px) {

    html[data-theme="dark"] .mc { background: var(--dm-surface); box-shadow: 0 0 0 100vmax rgba(0, 4, 20, 0.55), 0 -10px 40px rgba(0, 0, 0, 0.6); }

    html[data-theme="dark"] .mc-topo::before { background: var(--dm-borda); }

}



/* ----------------------------------------------------------

   Sino: abas "Atividade" / "Pedidos" e notificações

   ---------------------------------------------------------- */

html[data-theme="dark"] .painel-abas { background: var(--dm-surface-3); }

html[data-theme="dark"] .painel-aba { color: #b4c0e0; }

html[data-theme="dark"] .painel-aba.ativa { background: var(--dm-surface); color: var(--dm-link); box-shadow: none; }

html[data-theme="dark"] .painel-link { color: var(--dm-link); }

html[data-theme="dark"] .amz-notif { border-top-color: var(--dm-borda); color: #e6ebff; }

html[data-theme="dark"] .amz-notif:hover { background: var(--dm-surface-3); }

html[data-theme="dark"] .amz-notif-nova { background: rgba(138, 180, 255, 0.12); }

html[data-theme="dark"] .amz-notif-trecho { color: #b4c0e0; }

html[data-theme="dark"] .amz-notif-tempo { color: #8f9cc0; }

html[data-theme="dark"] .amz-notif-foto { background: var(--dm-surface-3); }

html[data-theme="dark"] .amz-notif-icone { background: var(--dm-surface-3); }

html[data-theme="dark"] .amz-notif-ponto { background: var(--dm-link); }



/* aviso de "nada por aqui" (.placeholder): cartão escuro, sem pontilhado */

html[data-theme="dark"] .placeholder {

    background: var(--dm-surface-2);

    color: var(--text-mid);

}



/* busca de pessoas: contas sugeridas */

html[data-theme="dark"] .sug-comum { color: var(--dm-link); }

html[data-theme="dark"] .sug-btn.sug-btn-feito {

    background: var(--dm-surface-3);

    color: var(--dm-link);

}



html[data-theme="dark"] .feed-abas { background: rgba(138, 180, 255, 0.1); }

html[data-theme="dark"] .feed-aba { color: #9fb0dd; }

html[data-theme="dark"] .feed-aba:hover { color: var(--dm-link); }

html[data-theme="dark"] .feed-aba.ativa { background: var(--blue-500); color: #fff; }

html[data-theme="dark"] .post-motivo { background: rgba(138, 180, 255, 0.14); color: var(--dm-link); }



/* Republicar */

html[data-theme="dark"] .btn-republicar:not(.ativo),

html[data-theme="dark"] .btn-republicar-info:hover { background: var(--dm-surface-3); color: var(--dm-link); }

html[data-theme="dark"] .btn-republicar:not(.ativo):not(.btn-republicar-info):hover { background: var(--dm-borda); }

html[data-theme="dark"] .pf-aba-n { background: rgba(255, 255, 255, 0.12); }

html[data-theme="dark"] .rep-item { background: var(--dm-surface-2); border-color: var(--dm-borda); }

html[data-theme="dark"] .rep-quando { color: #6fdc9c; }

html[data-theme="dark"] .rep-autor-nome,

html[data-theme="dark"] .rep-titulo { color: #e6ebff; }

html[data-theme="dark"] .rep-resumo { color: #b9c3e6; }

html[data-theme="dark"] .rep-data,

html[data-theme="dark"] .rep-rodape { color: #94a0c8; }

html[data-theme="dark"] .rep-corpo:hover .rep-titulo { color: var(--dm-link); }

html[data-theme="dark"] .rep-thumb { background: var(--dm-surface-3); }