/* ─── Reescrever Plugin Styles ──────────────────────────────────────────────── */

/* Painel pós-reescrita/resumo: Novo | Copiar | Salvar */
#reescrever-acoes-pos,
#resumir-acoes-pos,
#humanizar-acoes-pos {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Bootstrap .d-none (display:none !important) prevalece enquanto oculto */
}

/* Uso bar */
.reescrever-uso-bar .progress {
    border-radius: 999px;
    background-color: #e9ecef;
}

/* Ferramentas */
.rw-ferramenta-cabecalho {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 10px 0 30px;
}

.rw-ferramenta-titulo {
    color: #131022;
    font-size: clamp(1.35rem, 1.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    margin: 0;
}

.reescrever-ferramenta .card,
.resumir-ferramenta .card {
    transition: box-shadow .2s ease;
}

.reescrever-ferramenta textarea,
.resumir-ferramenta textarea {
    line-height: 1.7;
    font-size: 0.95rem;
    padding: 1rem;
}

.reescrever-ferramenta textarea:focus,
.resumir-ferramenta textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.reescrever-ferramenta textarea[readonly],
.resumir-ferramenta textarea[readonly],
.detectar-ia-ferramenta textarea[readonly],
.detectar-plagio-ferramenta textarea[readonly],
.humanizar-ferramenta textarea[readonly] {
    background-color: transparent;
    cursor: not-allowed;
}

/* Resultado */
#reescrever-resultado,
#resumir-resultado {
    font-size: 0.95rem;
    color: #1e293b;
}

/* Resultado do resumo: padding e espaçamento de parágrafos */
#resumir-resultado {
    padding: 1rem;
    line-height: 1.7;
}

#resumir-resultado p {
    margin: 0 0 1em 0;
}

#resumir-resultado p:last-child {
    margin-bottom: 0;
}

.rw-resumo-lista {
    margin: 0;
    padding-left: 1.4rem;
}

.rw-resumo-lista li {
    margin-bottom: .5rem;
    line-height: 1.7;
}

.rw-resumo-lista li:last-child {
    margin-bottom: 0;
}

/* ─── Layout encaixado na viewport (desktop) ─────────────────────────────────
   JS define a height de .rw-colunas = viewport - topo da seção - card opções.
   O card de opções fica abaixo, sempre visível.
   Em mobile sem restrição de altura — colunas empilhadas normalmente.
────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {

    /* A seção de colunas tem altura definida pelo JS */
    .rw-colunas {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        padding: 4px;
        margin: 0 -4px;
    }

    /* Cada coluna vira flex-column para o card preencher a altura */
    .rw-colunas>[class*="col-"] {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-top: 0;
        /* neutraliza margin-top do .g-4 (evita overflow no container) */
        padding-top: 12px;
        /* O cabeçalho substitui o antigo buffer vazio acima dos cards. */
    }

    .rw-colunas .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    /* Corpo do card: rola internamente */
    .rw-corpo {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    /* Textareas (entrada e saída) preenchem todo o corpo */
    .rw-corpo textarea {
        height: 100%;
        min-height: unset !important;
    }
}

/* Botão processar */
#reescrever-btn-processar,
#resumir-btn-processar {
    transition: opacity .2s;
}

#reescrever-btn-processar:disabled,
#resumir-btn-processar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ─── Aba Uso no Perfil ──────────────────────────────────────────────────────── */

#rw-uso-inner {
    padding-top: .5rem;
}

.rw-icone-card {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.rw-impacto-msg {
    background: linear-gradient(135deg, #fff8e7, #fffbf0);
    border-left: 3px solid #f59e0b;
    border-radius: 0 8px 8px 0;
    padding: .75rem 1rem;
    font-size: .9rem;
    line-height: 1.6;
}

.rw-indicador-card {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    transition: transform .15s ease, box-shadow .15s ease;
}

.rw-indicador-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important;
}

.rw-indicador-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Dashboard cards */
.reescrever-dashboard .icon-box {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Histórico */
.reescrever-card-historico {
    transition: transform .15s ease, box-shadow .15s ease;
}

.reescrever-card-historico:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08) !important;
}

/* Animação de loading no texto */
@keyframes reescrever-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

.reescrever-streaming {
    animation: reescrever-pulse 1.4s ease-in-out infinite;
}

/* Feedback de cópia */
.reescrever-copiado {
    color: #22c55e !important;
}

/* ─── Diff inline (contenteditable) ─────────────────────────────────────────
   Div contenteditable com diff em HTML. Sem camadas duplas, sem truques de
   transparência — o cursor é sempre nativo e na posição correcta.
────────────────────────────────────────────────────────────────────────────── */
.rw-diff-editor {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.7;
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #1e293b;
    outline: none;
    cursor: text;
}

.rw-diff-editor[contenteditable="false"] {
    cursor: default;
}

.rw-diff-ins {
    background-color: rgba(34, 197, 94, 0.3);
    border-radius: 2px;
    padding: 0 1px;
}

/* ─── Parágrafos clicáveis ───────────────────────────────────────────────── */
.rw-para {
    margin: 0 0 1em 0;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rw-para:last-child {
    margin-bottom: 0;
}

.rw-para:hover {
    background-color: rgba(59, 130, 246, 0.07);
}

.rw-para-selecionado {
    background-color: rgba(59, 130, 246, 0.13) !important;
    outline: 1px solid rgba(59, 130, 246, 0.25);
}

.rw-para-loading {
    opacity: 0.45;
    pointer-events: none;
}

/* ─── Sinônimos ──────────────────────────────────────────────────────────────
   Expressões com alternativas disponíveis ficam com sublinhado sólido roxo.
   O span permanece clicável após a substituição, permitindo nova troca.
────────────────────────────────────────────────────────────────────────────── */
.rw-sinonimo {
    border-bottom: 1.5px solid #a78bfa;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.15s;
}

.rw-sinonimo:hover {
    background-color: rgba(167, 139, 250, 0.15);
}

.rw-sinonimo-alterado {
    background-color: rgba(34, 197, 94, 0.25);
    border-bottom-color: #16a34a;
    border-radius: 2px;
}

#rw-popover-sinonimos {
    position: fixed;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-width: 320px;
}

/* ─── Sidebar de ferramentas (posts) ─────────────────────────────────────── */

.rw-sidebar-ferramentas {
    position: sticky;
    top: 1.5rem;
}

.rw-sidebar-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#rw-popover-sinonimos button {
    padding: 6px 10px;
    font-size: 0.875rem;
    white-space: normal;
    text-align: left;
    background: #f3f4f6;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

#rw-popover-sinonimos button:hover {
    background-color: #a78bfa;
    color: #fff;
}

/* ─── Detecção de IA ─────────────────────────────────────────────────────────── */

.detectar-ia-ferramenta .card {
    transition: box-shadow .2s ease;
}

.detectar-ia-ferramenta textarea {
    line-height: 1.7;
    font-size: 0.95rem;
    padding: 1rem;
}

.detectar-ia-ferramenta textarea:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

/* Visualização de texto colorido (substitui textarea após análise) */
.detectar-ia-texto-vis {
    padding: 1rem 1rem 2rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #1e293b;
}

.detectar-ia-para {
    margin: 0 0 1em 0;
    padding: 4px 8px;
    border-radius: 4px;
}

.detectar-ia-para:last-child {
    margin-bottom: 0;
}

.detectar-ia-para-ia {
    background-color: rgba(239, 68, 68, 0.18);
}

.detectar-ia-para-misto {
    background-color: rgba(245, 158, 11, 0.18);
}

/* Relatório */
#detectar-ia-resultado {
    padding: 1rem;
    font-size: 0.95rem;
    color: #1e293b;
}

/* Badge de veredicto */
.detectar-ia-veredicto-ia {
    background-color: #fee2e2;
    color: #b91c1c;
}

.detectar-ia-veredicto-misto {
    background-color: #fef3c7;
    color: #92400e;
}

.detectar-ia-veredicto-humano {
    background-color: #16a34a;
    color: #ffffff;
}

/* Itens da lista de parágrafos no relatório */
.detectar-ia-item {
    padding: .5rem .75rem;
    border-radius: 4px;
    margin-bottom: .5rem;
    background-color: #f8fafc;
}

.detectar-ia-item:last-child {
    margin-bottom: 0;
}

.detectar-ia-item-ia {
    border-left: 3px solid #ef4444;
}

.detectar-ia-item-misto {
    border-left: 3px solid #f59e0b;
}

.detectar-ia-item-humano {
    border-left: 3px solid #22c55e;
}

#detectar-ia-btn-processar {
    transition: opacity .2s;
}

#detectar-ia-btn-processar:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#detectar-ia-acoes-pos {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ─── Paleta de cores — páginas de ferramentas ───────────────────────────── */
body.rw-pagina-ferramenta {
    overflow-x: clip;
}

.rw-native-tool-app {
    background: #f3f6ff;
    padding-bottom: 1.5rem;
}

.rw-native-tool-app--detectar-plagio {
    background: #f0f4ff;
}

.rw-native-tool-section > .container {
    max-width: 1320px;
}

.reescrever-ferramenta,
.resumir-ferramenta,
.detectar-ia-ferramenta,
.humanizar-ferramenta,
.detectar-plagio-ferramenta {
    position: relative;
}

.reescrever-ferramenta::before,
.resumir-ferramenta::before,
.detectar-ia-ferramenta::before,
.humanizar-ferramenta::before,
.detectar-plagio-ferramenta::before {
    content: '';
    position: absolute;
    /* Cobre o vão entre o header fixo e o conteúdo da ferramenta. */
    top: -.5rem;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: calc(103% + .5rem);
    transform: translateX(-50%);
    background-color: #f3f6ff;
    z-index: -1;
}

/* O wrapper PHP já cobre toda a largura; o pseudo-elemento só permanece como
   compatibilidade para instalações ainda aguardando a migração de conteúdo. */
.rw-native-tool-app .reescrever-ferramenta::before,
.rw-native-tool-app .resumir-ferramenta::before,
.rw-native-tool-app .detectar-ia-ferramenta::before,
.rw-native-tool-app .humanizar-ferramenta::before,
.rw-native-tool-app .detectar-plagio-ferramenta::before {
    display: none;
}

.reescrever-ferramenta .card,
.resumir-ferramenta .card,
.detectar-ia-ferramenta .card,
.humanizar-ferramenta .card,
.detectar-plagio-ferramenta .card {
    background-color: #ffffff;
    border: 1px solid #e2e5f1 !important;
}

/* Animações das ferramentas: mesma linguagem visual, ilustração por operação. */
.rw-tool-loading {
    --rw-loading-accent: #6366f1;
    --rw-loading-accent-soft: #a5b4fc;
    --rw-loading-halo: #f2f3ff;
    --rw-loading-surface: #fff;
    --rw-loading-outline: #e0e4f7;
    --rw-loading-lines: #d9def0;
    --rw-loading-title: #252342;
    --rw-loading-muted: #737991;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 100%;
    padding: clamp(16px, 3vh, 32px) 20px;
    text-align: center;
}

.rw-tool-loading-art {
    flex: 0 1 240px;
    width: min(100%, 336px);
    min-height: 80px;
}

.rw-tool-art {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--rw-loading-accent);
}

.rw-tool-art-halo { fill: var(--rw-loading-halo); }
.rw-tool-art-orbit { stroke: var(--rw-loading-outline); stroke-dasharray: 3 9; }

.rw-tool-art-link {
    stroke: var(--rw-loading-accent-soft);
    stroke-width: 1.5;
    stroke-dasharray: 3 5;
    animation: rw-tool-art-connect 1.6s linear infinite;
}

.rw-tool-art-surface,
.rw-tool-art-page {
    fill: var(--rw-loading-surface);
    stroke: var(--rw-loading-outline);
    stroke-width: 1.5;
}

.rw-tool-art-page-back { fill: var(--rw-loading-outline); }
.rw-tool-art-page { filter: drop-shadow(0 8px 12px rgb(49 46 129 / 8%)); }
.rw-tool-art-label { fill: var(--rw-loading-accent); opacity: .8; }

.rw-tool-art-icon {
    stroke: var(--rw-loading-accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rw-tool-art-line,
.rw-tool-art-text,
.rw-tool-art-highlight {
    stroke: var(--rw-loading-lines);
    stroke-width: 4;
    stroke-linecap: round;
}

.rw-tool-art-line { stroke-width: 3; }
.rw-tool-art-highlight { stroke: var(--rw-loading-accent-soft); }
.rw-tool-art-beam-line { stroke: var(--rw-loading-accent); stroke-width: 2; }
.rw-tool-art-sweep { animation: rw-tool-art-sweep 3.6s ease-in-out infinite; }

.rw-tool-art-source { animation: rw-tool-art-float 4.8s ease-in-out infinite; }
.rw-tool-art-source--right { animation-delay: -2.4s; }
.rw-tool-art-lens { animation: rw-tool-art-inspect 5.4s ease-in-out infinite; }
.rw-tool-art-handle { stroke: var(--rw-loading-accent); stroke-width: 10; stroke-linecap: round; }

.rw-tool-art-glass {
    fill: var(--rw-loading-surface);
    fill-opacity: .94;
    stroke: var(--rw-loading-accent);
    stroke-width: 4;
    filter: drop-shadow(0 5px 6px rgb(49 46 129 / 12%));
}

.rw-tool-art-lens-text { stroke: var(--rw-loading-accent-soft); stroke-width: 4; stroke-linecap: round; }
.rw-tool-art-glint { stroke: var(--rw-loading-outline); stroke-width: 3; stroke-linecap: round; }
.rw-tool-art-spark { fill: var(--rw-loading-accent-soft); animation: rw-tool-art-pulse 3.6s ease-in-out infinite; }
.rw-tool-art-spark--two { animation-delay: -1.8s; }

/* Reescrita: o lápis acompanha a formação de novas linhas. */
.rw-tool-art-symbol {
    stroke: var(--rw-loading-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rw-tool-art-pencil {
    fill: var(--rw-loading-halo);
    stroke: var(--rw-loading-accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 6px rgb(49 46 129 / 10%));
}

.rw-tool-art-pen { animation: rw-tool-art-write-pen 4.8s ease-in-out infinite; }

.rw-tool-art-writing,
.rw-tool-art-summary-lines,
.rw-tool-art-handwriting {
    stroke: var(--rw-loading-accent-soft);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1;
    animation: rw-tool-art-write-lines 4.8s ease-in-out infinite;
}

/* Resumo: as linhas se condensam e formam uma lista curta. */
.rw-tool-art-condense {
    stroke: var(--rw-loading-accent-soft);
    stroke-width: 4;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: left center;
    animation: rw-tool-art-condense 4.8s ease-in-out infinite;
}

.rw-tool-art-summary { animation: rw-tool-art-float 4.8s ease-in-out infinite; }
.rw-tool-art-summary-lines { animation-delay: -.6s; }

/* Detecção de IA: rede de padrões e um pequeno analisador de sinais. */
.rw-tool-art-node {
    fill: var(--rw-loading-surface);
    stroke: var(--rw-loading-accent-soft);
    stroke-width: 3;
}

.rw-tool-art-chip {
    fill: var(--rw-loading-surface);
    stroke: var(--rw-loading-accent);
    stroke-width: 2.5;
}

.rw-tool-art-signal {
    stroke: var(--rw-loading-accent);
    stroke-width: 5;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: rw-tool-art-signal 1.8s ease-in-out infinite;
}

.rw-tool-art-signal--two { animation-delay: -.6s; }
.rw-tool-art-signal--three { animation-delay: -1.2s; }

/* Humanização: traços orgânicos e um balão de conversa. */
.rw-tool-art-handwriting { stroke-width: 3; animation-duration: 5.4s; }
.rw-tool-art-heart {
    fill: var(--rw-loading-accent-soft);
    stroke: var(--rw-loading-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    transform-box: fill-box;
    transform-origin: center;
    animation: rw-tool-art-heart 2.8s ease-in-out infinite;
}

.rw-tool-loading-copy { flex-shrink: 0; }

.rw-tool-loading-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--rw-loading-accent);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.5;
    text-transform: uppercase;
}

.rw-tool-loading-title {
    margin: 0 0 8px;
    color: var(--rw-loading-title);
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.3;
}

.rw-tool-loading-description {
    max-width: 340px;
    margin: 0;
    color: var(--rw-loading-muted);
    font-size: .8125rem;
    line-height: 1.7;
    text-wrap: pretty;
}

.rw-tool-loading-activity {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    height: 8px;
}

.rw-tool-loading-activity span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rw-loading-accent);
    animation: rw-tool-art-pulse 1.5s ease-in-out infinite;
}

.rw-tool-loading-activity span:nth-child(2) { animation-delay: -.3s; }
.rw-tool-loading-activity span:nth-child(3) { animation-delay: -.6s; }

.dark-mode .rw-tool-loading {
    --rw-loading-accent: #a5a7ff;
    --rw-loading-accent-soft: #777cce;
    --rw-loading-halo: #23203c;
    --rw-loading-surface: #302c49;
    --rw-loading-outline: #423d60;
    --rw-loading-lines: #544e70;
    --rw-loading-title: #f1efff;
    --rw-loading-muted: #b4afc9;
}

@keyframes rw-tool-art-sweep {
    0%, 100% { transform: translateY(0); opacity: .65; }
    50% { transform: translateY(113px); opacity: 1; }
}

@keyframes rw-tool-art-connect {
    to { stroke-dashoffset: -16; }
}

@keyframes rw-tool-art-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes rw-tool-art-inspect {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-9px, -13px); }
}

@keyframes rw-tool-art-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: 1; }
}

@keyframes rw-tool-art-write-pen {
    0%, 100% { transform: translate(-13px, -13px); }
    35% { transform: translate(2px, -6px); }
    65%, 80% { transform: translate(-8px, 13px); }
}

@keyframes rw-tool-art-write-lines {
    0%, 100% { stroke-dashoffset: 1; opacity: .4; }
    65%, 85% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes rw-tool-art-condense {
    0%, 100% { transform: scaleX(1); opacity: .45; }
    60%, 80% { transform: scaleX(.55); opacity: 1; }
}

@keyframes rw-tool-art-signal {
    0%, 100% { transform: scaleY(.4); }
    50% { transform: scaleY(1); }
}

@keyframes rw-tool-art-heart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@media (max-width: 991.98px) {
    .rw-tool-loading { min-height: 360px; }
    .rw-tool-loading-art { flex: 0 0 210px; }
}

@media (prefers-reduced-motion: reduce) {
    .rw-tool-loading *,
    body.rw-pagina-ferramenta [id$="-btn-processar"] .spinner-border {
        animation: none !important;
    }
    .rw-tool-art-sweep { transform: translateY(56px); }
}

/* Quando o resultado está visível, o corpo do card não deve rolar — o scroll é interno */
#plagio-corpo-resultado.plagio-resultado-ativo {
    overflow: hidden;
}

/* Resultado: parte fixa (gauge + veredicto) + parte rolável (lista) */
#plagio-resultado {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#plagio-resultado.d-none {
    display: none !important;
}

#plagio-resultado-fixo {
    flex-shrink: 0;
}

#plagio-resultado-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Itens da lista: evitar overflow horizontal */
.plagio-item {
    overflow: hidden;
    word-break: break-word;
}

.plagio-item .js-plagio-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

.plagio-item .js-plagio-snippet {
    overflow: hidden;
    word-break: break-word;
}

/* ── Painel de eliminação de plágio ─────────────────────────────────────────── */

.plagio-passo {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    border-left: 2px solid #dee2e6;
    padding-left: 1rem;
    margin-left: .5rem;
    position: relative;
    transition: border-color .3s ease;
}

.plagio-passo:last-child {
    border-left-color: transparent;
}

.plagio-passo-icone {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
    color: #6c757d;
    position: absolute;
    left: -15px;
    top: .55rem;
    transition: background .3s ease, color .3s ease;
}

.plagio-passo-icone .spinner-border {
    display: block;
    margin: 0;
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.plagio-passo-done .plagio-passo-icone {
    background: #198754;
    color: #fff;
}

.plagio-passo-inativo .plagio-passo-icone {
    background: #e9ecef;
    color: #adb5bd;
}

.plagio-passo-inativo .plagio-passo-corpo {
    opacity: .5;
}

.plagio-passo-corpo {
    padding-top: .1rem;
    transition: opacity .3s ease;
}

.btn-plagio-eliminar {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
    animation: plagio-pulso 2.4s ease-in-out infinite;
}

.btn-plagio-eliminar:hover,
.btn-plagio-eliminar:focus,
.btn-plagio-eliminar:active {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

.btn-plagio-eliminar:disabled {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
    animation: none;
    opacity: .7;
}

@keyframes plagio-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
    50%       { box-shadow: 0 0 0 6px rgba(21, 128, 61, .35); transform: scale(1.012); }
}

mark.plagio-trecho {
    background-color: #fde8e8;
    color: #b91c1c;
    border-radius: 3px;
    padding: 0 2px;
    font-style: normal;
}

mark.plagio-trecho-limpo {
    background-color: #dcfce7;
    color: #15803d;
    border-radius: 3px;
    padding: 0 2px;
    font-style: normal;
}

/* ─── Modo escuro — páginas de ferramentas ────────────────────────────────────
   O tema já escurece .card/.badge/.alert via especificidade (3 classes) contra
   os seletores de 2 classes abaixo, então só precisamos sobrescrever o que este
   arquivo define com cor fixa (fundo do ::before, bordas !important e textos de
   resultado), que ficam claros mesmo com <html class="dark-mode">.
────────────────────────────────────────────────────────────────────────────── */
.dark-mode .reescrever-ferramenta::before,
.dark-mode .resumir-ferramenta::before,
.dark-mode .detectar-ia-ferramenta::before,
.dark-mode .detectar-plagio-ferramenta::before,
.dark-mode .humanizar-ferramenta::before {
    background-color: #131022;
}

.dark-mode .rw-native-tool-app {
    background: #131022;
}

.dark-mode .rw-ferramenta-titulo {
    color: rgba(255, 255, 255, .92);
}

.dark-mode .reescrever-ferramenta .card,
.dark-mode .resumir-ferramenta .card,
.dark-mode .detectar-ia-ferramenta .card,
.dark-mode .detectar-plagio-ferramenta .card,
.dark-mode .humanizar-ferramenta .card {
    border-color: rgba(255, 255, 255, .15) !important;
}

.dark-mode #reescrever-resultado,
.dark-mode #resumir-resultado,
.dark-mode .rw-diff-editor,
.dark-mode .detectar-ia-texto-vis,
.dark-mode #detectar-ia-resultado {
    color: rgba(255, 255, 255, .85);
}

.dark-mode .detectar-ia-item {
    background-color: rgba(255, 255, 255, .05);
}

.dark-mode #rw-popover-sinonimos {
    background: #1c1830;
    border-color: rgba(255, 255, 255, .15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

.dark-mode #rw-popover-sinonimos button {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
}

.dark-mode #rw-popover-sinonimos button:hover {
    background-color: #a78bfa;
    color: #fff;
}

.dark-mode .plagio-passo {
    border-left-color: rgba(255, 255, 255, .15);
}

.dark-mode .plagio-passo-icone {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
}

.dark-mode .plagio-passo-inativo .plagio-passo-icone {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .35);
}

.dark-mode #plagio-gauge path:not(#plagio-gauge-arco),
.dark-mode .js-plagio-gauge-mini path:not(.js-gauge-arco) {
    stroke: rgba(255, 255, 255, .15);
}

/* ─── Modo escuro — contadores de palavras ──────────────────────────────────
   O tema exclui .badge de sua regra genérica .dark-mode .bg-light (para não
   afetar badges de status em outros lugares), então os contadores "0 palavras"
   das 5 ferramentas (bg-light + text-muted) ficam claros por padrão.
────────────────────────────────────────────────────────────────────────────── */
.dark-mode body.rw-pagina-ferramenta .badge.bg-light {
    background-color: rgba(255, 255, 255, .08) !important;
    color: rgba(255, 255, 255, .7) !important;
}

/* ─── Modo escuro — conteúdo institucional das páginas de ferramentas ────── */
.dark-mode body.rw-pagina-ferramenta [style*="background:#f8f9fc"],
.dark-mode body.rw-pagina-ferramenta [style*="background:#f0f4ff"],
.dark-mode body.rw-pagina-ferramenta [style*="background:linear-gradient"] {
    background: rgba(255, 255, 255, .05) !important;
}