/* =========================================================
   RANKING — DARK THEME (não altera a cor dos nomes)
   Escopo: somente dentro de .rank-wrap
   ========================================================= */
:root[data-theme="dark"] .rank-wrap {
    --rk-bg: #0b0f16;
    /* fundo externo do container */
    --rk-card: #0f1623;
    /* cartões/tabela */
    --rk-elev: 0 8px 26px rgba(0, 0, 0, .55);
    --rk-border: rgba(255, 255, 255, .10);
    --rk-soft: rgba(255, 255, 255, .04);
    --rk-head: #0b1220;
    /* thead */
    --rk-muted: #a7b0c2;
    --rk-text: #e9edf7;
    --rk-num: #cfe1ff;
    /* números */
    --rk-chip: rgba(255, 255, 255, .08);
    --rk-chip-b: rgba(255, 255, 255, .16);

    background: var(--rk-bg);
    border: 1px solid var(--rk-border);
    box-shadow: var(--rk-elev);
}

/* Título e contagem regressiva */
:root[data-theme="dark"] .rank-wrap .rank-title {
    color: #ffffff;
}

:root[data-theme="dark"] .rank-wrap .rank-title::before {
    background: radial-gradient(100% 100% at 30% 30%, #60a5fa 0%, #34d399 80%);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

:root[data-theme="dark"] .rank-wrap .cycle-eta {
    color: var(--rk-muted);
    font-weight: 700;
}

/* Abas (Mensal / Semanal / Diário) */
:root[data-theme="dark"] .rank-wrap .seg-tabs {
    background: #0d1422;
    border: 1px solid var(--rk-border);
    box-shadow: var(--rk-elev);
}

:root[data-theme="dark"] .rank-wrap .seg-tab {
    color: #e8eefc;
    border: 1px solid transparent;
    background: transparent;
}

:root[data-theme="dark"] .rank-wrap .seg-tab:hover {
    background: #162338;
    color: #ffffff;
    border-color: var(--rk-border);
}

:root[data-theme="dark"] .rank-wrap .seg-tab.is-active {
    background: #1b2a44;
    color: #fff;
    border-color: #2d4166;
    box-shadow: inset 0 -2px 0 #fbbf24, 0 0 0 1px rgba(255, 255, 255, .04);
}

:root[data-theme="dark"] .rank-wrap .seg-tab.is-active::after {
    display: none;
}

/* Cartão "Minha posição" */
:root[data-theme="dark"] .rank-wrap .my-rank {
    background: var(--rk-card);
    border: 1px solid var(--rk-border);
    color: var(--rk-text);
    box-shadow: var(--rk-elev);
}

:root[data-theme="dark"] .rank-wrap .my-rank-title {
    color: var(--rk-muted);
}

:root[data-theme="dark"] .rank-wrap .my-rank-pos {
    color: #c7d2ff;
    background: var(--rk-chip);
    border: 1px solid var(--rk-chip-b);
}

:root[data-theme="dark"] .rank-wrap .my-rank-metrics span b {
    color: #b8c6e8;
}

:root[data-theme="dark"] .rank-wrap .my-rank-avatar {
    border: 1px solid var(--rk-border);
    box-shadow: 0 0 0 2px #0f1623, 0 1px 2px rgba(0, 0, 0, .35);
}

/* Badge VIP */
:root[data-theme="dark"] .rank-wrap .vip-badge {
    background: var(--rk-chip);
    border: 1px solid var(--rk-chip-b);
    color: #fff;
    border-radius: 9999px;
    padding: 2px 8px;
    font-weight: 800;
}

/* Cartão + Tabela */
:root[data-theme="dark"] .rank-wrap .rank-table-card {
    background: var(--rk-card);
    border: 1px solid var(--rk-border);
    border-radius: 14px;
    box-shadow: var(--rk-elev);
}

:root[data-theme="dark"] .rank-wrap thead th {
    background: var(--rk-head);
    color: #cbd5e1;
    border-bottom: 1px solid var(--rk-border);
}

:root[data-theme="dark"] .rank-wrap tbody td {
    color: var(--rk-text);
    border-bottom: 1px solid var(--rk-border);
    background: transparent;
}

:root[data-theme="dark"] .rank-wrap .rank-table tbody tr:hover td {
    background: var(--rk-soft);
}

/* Números/porcentagens */
:root[data-theme="dark"] .rank-wrap .rank-table .col-num,
:root[data-theme="dark"] .rank-wrap .rank-table .col-pct {
    color: var(--rk-num);
}

/* Deltas */
:root[data-theme="dark"] .rank-wrap .pos-up {
    color: #22c55e;
}

:root[data-theme="dark"] .rank-wrap .pos-down {
    color: #ef4444;
}

:root[data-theme="dark"] .rank-wrap .pos-same,
:root[data-theme="dark"] .rank-wrap .pos-none {
    color: var(--rk-muted);
}

/* Status on/off */
:root[data-theme="dark"] .rank-wrap .status-dot {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .06);
}

:root[data-theme="dark"] .rank-wrap .status-dot.on {
    background: #22c55e;
}

:root[data-theme="dark"] .rank-wrap .status-dot.off {
    background: #9ca3af;
}

/* Pódio e “minha linha” com transparência elegante */
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1 td {
    background: rgba(245, 158, 11, .14) !important;
    /* âmbar translúcido */
    box-shadow: inset 4px 0 0 #f59e0b;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2 td {
    background: rgba(148, 163, 184, .12) !important;
    /* slate */
    box-shadow: inset 4px 0 0 #94a3b8;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3 td {
    background: rgba(192, 132, 77, .12) !important;
    /* bronze */
    box-shadow: inset 4px 0 0 #c08457;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-me td {
    background: rgba(56, 189, 248, .14) !important;
    /* azul-ciano translúcido */
    box-shadow: inset 4px 0 0 #38bdf8;
}

/* ===== Não alterar a cor dos nomes ===== */
:root[data-theme="dark"] .rank-wrap .user-name {
    color: inherit !important;
}

:root[data-theme="dark"] .rank-wrap .user-name .u-emoji,
:root[data-theme="dark"] .rank-wrap .user-name svg {
    color: currentColor;
    fill: currentColor;
}

/* ===== 1) Manter as cores originais dos NOMES no ranking (dark) ===== */
/* Anula o branco global e QUALQUER outra cor forçada no ranking */
:root[data-theme="dark"] .rank-wrap .user-name {
    color: inherit !important;
}

/* Reafirma as classes de cor escolhidas pelo usuário */
:root[data-theme="dark"] .rank-wrap .user-name.namec-blue {
    color: #2563eb !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-red {
    color: #dc2626 !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-green {
    color: #16a34a !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-purple {
    color: #7c3aed !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-orange {
    color: #ea580c !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-teal {
    color: #0f766e !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-pink {
    color: #db2777 !important;
}

:root[data-theme="dark"] .rank-wrap .user-name.namec-gold {
    color: #D4AF37 !important;
}

:root[data-theme="dark"] .rank-wrap .user-name .u-emoji,
:root[data-theme="dark"] .rank-wrap .user-name svg {
    color: currentColor;
    fill: currentColor;
}

/* (IMPORTANTE) Se existir alguma regra assim, ela estava sobrescrevendo a cor:
   [data-theme="dark"] .rank-table-wrap .user-name { color: var(--ql-blue) !important; }
   Vamos neutralizá-la com mais especificidade: */
:root[data-theme="dark"] .rank-wrap .rank-table-wrap .user-name {
    color: inherit !important;
}

/* ===== 2) PÓDIO fixo no dark: ouro / prata / bronze (sem o striping apagar) ===== */
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1>td {
    background-color: rgba(245, 158, 11, .20) !important;
    /* OURO */
    box-shadow: inset 4px 0 0 #F59E0B !important;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2>td {
    background-color: rgba(156, 163, 175, .22) !important;
    /* PRATA */
    box-shadow: inset 4px 0 0 #9CA3AF !important;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3>td {
    background-color: rgba(192, 132, 77, .22) !important;
    /* BRONZE */
    box-shadow: inset 4px 0 0 #C08457 !important;
}

/* Não deixar hover/striping/célula individual “lavar” as cores do pódio */
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1:hover>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2:hover>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3:hover>td {
    background-color: inherit !important;
}

:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top1>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top2>td,
:root[data-theme="dark"] .rank-wrap .rank-table tr.is-top3>td {
    background-image: none !important;
}

/* ============================
   INDEX — manter cores dos nomes no DARK
   ============================ */

/* 1) Não force cor no nome do usuário no dark */
:root[data-theme="dark"] .rank-table-wrap .user-name,
:root[data-theme="dark"] .mini-table .user-name,
:root[data-theme="dark"] .index-wrap .user-name {
    color: inherit !important;
    /* preserva a cor escolhida pelo usuário */
}

/* 2) Reafirma as classes de cor do usuário */
:root[data-theme="dark"] .user-name.namec-blue {
    color: #2563eb !important;
}

:root[data-theme="dark"] .user-name.namec-red {
    color: #dc2626 !important;
}

:root[data-theme="dark"] .user-name.namec-green {
    color: #16a34a !important;
}

:root[data-theme="dark"] .user-name.namec-purple {
    color: #7c3aed !important;
}

:root[data-theme="dark"] .user-name.namec-orange {
    color: #ea580c !important;
}

:root[data-theme="dark"] .user-name.namec-teal {
    color: #0f766e !important;
}

:root[data-theme="dark"] .user-name.namec-pink {
    color: #db2777 !important;
}

:root[data-theme="dark"] .user-name.namec-gold {
    color: #D4AF37 !important;
}

/* 3) Caso especial: se o usuário escolheu "preto", use o azul do tema no dark */
:root[data-theme="dark"] .user-name.namec-black {
    color: #2563eb !important;
}

/* 4) Ícones/emoji seguem a cor do nome */
:root[data-theme="dark"] .user-name .u-emoji,
:root[data-theme="dark"] .user-name svg {
    color: currentColor !important;
    fill: currentColor !important;
}

/* 5) Pódio no index (ouro/prata/bronze) sem ser lavado pelo hover/striping */
:root[data-theme="dark"] .rank-table tr.is-top1>td {
    background-color: rgba(245, 158, 11, .20) !important;
    box-shadow: inset 4px 0 0 #F59E0B !important;
}

:root[data-theme="dark"] .rank-table tr.is-top2>td {
    background-color: rgba(156, 163, 175, .22) !important;
    box-shadow: inset 4px 0 0 #9CA3AF !important;
}

:root[data-theme="dark"] .rank-table tr.is-top3>td {
    background-color: rgba(192, 132, 77, .22) !important;
    box-shadow: inset 4px 0 0 #C08457 !important;
}

:root[data-theme="dark"] .rank-table tr.is-top1:hover>td,
:root[data-theme="dark"] .rank-table tr.is-top2:hover>td,
:root[data-theme="dark"] .rank-table tr.is-top3:hover>td {
    background-color: inherit !important;
}

/* ============================
   INDEX — manter cores dos nomes no DARK
   ============================ */

/* 1) Não force cor no nome do usuário no dark */
:root[data-theme="dark"] .rank-table-wrap .user-name,
:root[data-theme="dark"] .mini-table .user-name,
:root[data-theme="dark"] .index-wrap .user-name {
    color: inherit !important;
    /* preserva a cor escolhida pelo usuário */
}

/* 2) Reafirma as classes de cor do usuário */
:root[data-theme="dark"] .user-name.namec-blue {
    color: #2563eb !important;
}

:root[data-theme="dark"] .user-name.namec-red {
    color: #dc2626 !important;
}

:root[data-theme="dark"] .user-name.namec-green {
    color: #16a34a !important;
}

:root[data-theme="dark"] .user-name.namec-purple {
    color: #7c3aed !important;
}

:root[data-theme="dark"] .user-name.namec-orange {
    color: #ea580c !important;
}

:root[data-theme="dark"] .user-name.namec-teal {
    color: #0f766e !important;
}

:root[data-theme="dark"] .user-name.namec-pink {
    color: #db2777 !important;
}

:root[data-theme="dark"] .user-name.namec-gold {
    color: #D4AF37 !important;
}

/* 3) Caso especial: se o usuário escolheu "preto", use o azul do tema no dark */
:root[data-theme="dark"] .user-name.namec-black {
    color: #2563eb !important;
}

/* 4) Ícones/emoji seguem a cor do nome */
:root[data-theme="dark"] .user-name .u-emoji,
:root[data-theme="dark"] .user-name svg {
    color: currentColor !important;
    fill: currentColor !important;
}

/* 5) Pódio no index (ouro/prata/bronze) sem ser lavado pelo hover/striping */
:root[data-theme="dark"] .rank-table tr.is-top1>td {
    background-color: rgba(245, 158, 11, .20) !important;
    box-shadow: inset 4px 0 0 #F59E0B !important;
}

:root[data-theme="dark"] .rank-table tr.is-top2>td {
    background-color: rgba(156, 163, 175, .22) !important;
    box-shadow: inset 4px 0 0 #9CA3AF !important;
}

:root[data-theme="dark"] .rank-table tr.is-top3>td {
    background-color: rgba(192, 132, 77, .22) !important;
    box-shadow: inset 4px 0 0 #C08457 !important;
}

:root[data-theme="dark"] .rank-table tr.is-top1:hover>td,
:root[data-theme="dark"] .rank-table tr.is-top2:hover>td,
:root[data-theme="dark"] .rank-table tr.is-top3:hover>td {
    background-color: inherit !important;
}

/* ================================
   DROPDOWN — MODO DARK
   Só aplica quando data-theme="dark"
   ================================ */
:root[data-theme="dark"] .dropdown-content {
    background: var(--card, #121824);
    color: var(--text, #e9edf7);
    border: 1px solid var(--card-border, rgba(255, 255, 255, .08));
    box-shadow: var(--elev, 0 6px 22px rgba(0, 0, 0, .55));
    border-radius: 12px;
}

/* Campo de busca dentro do dropdown */
:root[data-theme="dark"] .dropdown-content input[type="text"],
:root[data-theme="dark"] .dropdown-content input[type="search"] {
    background: var(--input-bg, #0f1623);
    color: var(--text, #e9edf7);
    border: 1px solid var(--input-border, rgba(255, 255, 255, .15));
    border-radius: 10px;
    outline: none;
}

:root[data-theme="dark"] .dropdown-content input::placeholder {
    color: var(--muted, #a7b0c2);
    opacity: .9;
}

:root[data-theme="dark"] .dropdown-content input:focus {
    border-color: var(--link, #7cb8ff);
    box-shadow: 0 0 0 3px rgba(124, 184, 255, .25);
}

/* Itens (labels) da lista */
:root[data-theme="dark"] #listaOrgaos label,
:root[data-theme="dark"] .dropdown-content label {
    color: var(--text, #e9edf7);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    cursor: pointer;
}

:root[data-theme="dark"] #listaOrgaos label:hover,
:root[data-theme="dark"] .dropdown-content label:hover {
    background: var(--chip-bg, rgba(255, 255, 255, .08));
}

/* Checkboxes com cor de destaque do tema */
:root[data-theme="dark"] .dropdown-content input[type="checkbox"] {
    accent-color: var(--link, #7cb8ff);
}

/* Scrollbar discreta (WebKit) */
:root[data-theme="dark"] .dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

:root[data-theme="dark"] .dropdown-content::-webkit-scrollbar {
    width: 10px;
}

:root[data-theme="dark"] .dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
    border-radius: 10px;
}

:root[data-theme="dark"] .dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

/* linha da observação com leve respiro */
.pill-row-note {
    margin-top: 8px;
}

/* pill neutro com contraste confortável (claro e dark) */
.pill.neutral {
    background: #eef2f7;
    color: #111827;
    border: 1px solid #e5e7eb;
}

/* tamanho levemente menor que as métricas principais */
.pill.neutral b {
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    .pill.neutral {
        background: #4d7cbd;
        color: #e5e7eb;
        border: 1px solid #374151;
    }
}

/* Bloco SEO da página de questões */
.seo-banner {
    margin: 10px 0 16px;
}

.seo-inner {
    background: #f9fafb;
    border-radius: 16px;
    padding: 10px 18px 12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border-top: 3px solid #2563eb;
    /* azul combinando com os botões */
    font-size: 0.95rem;
}

.seo-inner h1 {
    font-size: 1.08rem;
    margin: 2px 0 4px;
    font-weight: 600;
    color: #111827;
}

.seo-inner p {
    margin: 0;
    color: #4b5563;
    line-height: 1.5;
}

.seo-kicker {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #2563eb;
    margin-bottom: 2px;
}

/* 🔦 Modo dark – mesmo esquema do resto do site */
:root[data-theme="dark"] .seo-inner {
    background: #020617;
    border-top-color: #38bdf8;
    /* azul mais vivo no dark */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .seo-inner h1 {
    color: #e5e7eb;
}

:root[data-theme="dark"] .seo-inner p {
    color: #9ca3af;
}

:root[data-theme="dark"] .seo-kicker {
    color: #38bdf8;
}

/* ===========================
   Barra de informações da questão
   =========================== */

.questao .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    /* espaço entre cada item */
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    /* mesmo tamanho do QConcursos */
    line-height: 1.5;
    margin: 6px 0 8px;
    padding: 10px 16px;
    background: #f7f9fc;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 4px 4px 0 0;
    color: #374151;
}

/* Cada item: “Disciplina: X”, “Assunto: Y”, etc */
.questao .meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

/* Label: Disciplina:, Assunto:, Cargo:, Ano:, Banca: ... */
.questao .meta-item strong {
    font-weight: 600;
    /* levemente em negrito, como o "Banca:" */
    font-size: 15px;
    /* igual ao texto */
    letter-spacing: normal;
    text-transform: none;
    color: #4b5563;
}

/* Valor (link) – mesmo estilo de fonte do DevTools */
.questao .meta-item a {
    text-decoration: none;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    /* igual ao link do print */
    font-size: 18px;
    letter-spacing: normal;
    color: #1d4ed8;
    /* azul no modo claro */
}

.questao .meta-item a:hover {
    text-decoration: underline;
}

/* Remove qualquer “ - ” antigo entre os itens */
.questao .meta .meta-item:not(:first-child)::before {
    content: "";
    margin: 0;
}

/* --------- MODO DARK --------- */

:root[data-theme="dark"] .questao .meta {
    background: #020617;
    border-bottom-color: #111827;
    color: #e5e7eb;
}

:root[data-theme="dark"] .questao .meta-item strong {
    color: #d1d5db;
}

/* Link amarelo Q7Lab no dark */
:root[data-theme="dark"] .questao .meta-item a {
    color: var(--ql-yellow, #facc15);
}

:root[data-theme="dark"] .questao .meta-item a:hover {
    text-decoration: underline;
}














/* ===== Cabeçalho da questão ===== */
.q-header {
    margin-bottom: 8px;
    padding: 8px 12px 10px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.q-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.titulo-questao {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.q-title-label {
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.q-title-id {
    font-size: 1.1rem;
    color: #111827;
}

/* Meta (linha de disciplina, banca, etc.) */
.q-header .meta {
    font-size: 0.86rem;
    color: #4b5563;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.q-header .meta-item strong {
    font-weight: 600;
}

.q-header .meta-item a {
    color: #2563eb;
    text-decoration: none;
}

.q-header .meta-item a:hover {
    text-decoration: underline;
}

/* separador " - " entre itens */
.q-header .meta .meta-item:not(:first-child)::before {
    content: "·";
    margin: 0 0.25rem 0 0;
    opacity: 0.6;
}

/* Botão de reportar no cabeçalho */
.q-header .btn-reportar-questao {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.3);
    background: #eff6ff;
    color: #1d4ed8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.03s ease;
}

.q-header .btn-reportar-questao:hover {
    background: #dbeafe;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.q-header .btn-reportar-questao:active {
    transform: translateY(1px);
}

/* Responsivo: quebra a linha se ficar apertado */
@media (max-width: 640px) {
    .q-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .q-header .btn-reportar-questao {
        align-self: flex-start;
    }
}

/* ===== Versão dark (data-theme="dark") ===== */
:root[data-theme="dark"] .q-header {
    background: #020617;
    border-color: #1f2937;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .titulo-questao {
    color: #e5e7eb;
}

:root[data-theme="dark"] .q-title-label {
    color: #9ca3af;
}

:root[data-theme="dark"] .q-title-id {
    color: #facc15;
    /* amarelo Q7Lab no número da questão */
}

:root[data-theme="dark"] .q-header .meta {
    color: #cbd5f5;
}

:root[data-theme="dark"] .q-header .meta-item a {
    color: #facc15;
    /* links amarelos no modo dark */
}

:root[data-theme="dark"] .q-header .btn-reportar-questao {
    background: #111827;
    border-color: #1f2937;
    color: #e5e7eb;
}

:root[data-theme="dark"] .q-header .btn-reportar-questao:hover {
    background: #020617;
}

/* COMENTATIOS — barra inteira clicável + visual moderno */
.q-comments {
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 14px 14px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 🔵 Cabeçalho: agora o BOTÃO ocupa 100% da largura */
.q-comments-toggle {
    border: 0;
    background: #f3f4f6;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Ícone (usa o que já tiver no HTML ou este fallback) */
.q-comments-toggle::before {
    content: "💬";
    font-size: 1rem;
    opacity: .9;
}

/* Contador dentro do botão */
.q-comments-toggle small {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: .8;
}

/* Hover mais moderno */
.q-comments-toggle:hover {
    background: #e5f0ff;
    box-shadow: 0 1px 4px rgba(37, 99, 235, .25);
    transform: translateY(-1px);
}

/* Caixa que abre abaixo */
.q-comments-box {
    margin-top: 10px;
}

/* Lista rolável */
.q-comments-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px;
    margin-bottom: 8px;
}

/* Cada comentário */
.q-comment-item {
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .04);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Cabeçalho do comentário: nome, data, ações */
.q-comment-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: #6b7280;
}

.q-comment-header strong {
    font-weight: 700;
    color: #111827;
}

.q-comment-date {
    white-space: nowrap;
    opacity: .8;
    font-size: 0.78rem;
}

/* Texto do comentário */
.q-comment-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95rem;
    color: #111827;
}

/* Botões Editar / Excluir */
.q-comment-edit,
.q-comment-delete {
    border: 0;
    background: transparent;
    font-size: 0.78rem;
    cursor: pointer;
    opacity: .8;
    margin-left: 6px;
    transition: opacity .1s ease, text-decoration .1s ease;
}

.q-comment-edit:hover,
.q-comment-delete:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Mensagens de vazio / erro */
.q-comments-empty,
.q-comments-error {
    font-size: 0.82rem;
    opacity: .9;
}

/* Formulário */
.q-comment-form textarea {
    width: 100%;
    resize: vertical;
    margin: 4px 0 6px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .12);
    font-size: 0.9rem;
}

.q-comment-form button {
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.9rem;
    border: 0;
    cursor: pointer;
    background: #111827;
    color: #fff;
    font-weight: 600;
    transition: background .15s ease, transform .05s ease, box-shadow .1s ease;
}

.q-comment-form button:hover {
    background: #020617;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
    transform: translateY(-1px);
}

.q-comment-form button:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.q-comment-info {
    font-size: 0.8rem;
    opacity: .9;
}

/* 🌙 DARK MODE — mesmo conceito, adaptado */
[data-theme="dark"] .q-comments {
    background: #020617;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .65);
}

[data-theme="dark"] .q-comments-toggle {
    background: #020617;
    color: #e5e7eb;
    border: 1px solid rgba(148, 163, 184, .35);
}

[data-theme="dark"] .q-comments-toggle:hover {
    background: #0b1120;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .8);
}

[data-theme="dark"] .q-comment-item {
    background: #020617;
    border-color: rgba(255, 255, 255, .08);
    color: #e5e7eb;
}

[data-theme="dark"] .q-comment-header {
    color: #9ca3af;
}

[data-theme="dark"] .q-comment-text {
    color: #f1f5f9;
}

[data-theme="dark"] .q-comment-form textarea {
    background: #020617;
    border-color: rgba(255, 255, 255, .14);
    color: #e5e7eb;
}

[data-theme="dark"] .q-comment-form button {
    background: #e5e7eb;
    color: #020617;
}

[data-theme="dark"] .q-comment-form button:hover {
    background: #f9fafb;
}

[data-theme="dark"] .q-comment-header strong {
    color: var(--ql-yellow, #facc15);
}