/* =====================================================================
   AprovAKI — Widget de avaliação de dificuldade (5 níveis)
   Hotfix Segurança v1.1 · 2026-07-24

   v1.1 adiciona:
     - .aki-dif--auto (auto-injetado no rodapé do card): posicionamento
       alinhado com .post-card-tools (à esquerda dele).
     - Compatibilidade com o layout do .acoes-card do AprovAKI.
   ================================================================== */

.aki-dif {
    --aki-dif-off: #E1E1EA;
    --aki-dif-on: #F4C24A;
    --aki-dif-on-strong: #E8A934;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    color: var(--texto-secundario, #5A5A72);
    line-height: 1.2;
}

/* Auto-injetado dentro de .acoes-card: alinha à esquerda,
   deixa .post-card-tools respirar à direita. */
.aki-dif--auto {
    margin-right: auto;
    padding: 6px 0;
    flex-wrap: wrap;
    row-gap: 4px;
}
.acoes-card { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.acoes-card .aki-dif--auto { order: 3; width: 100%; margin-top: 4px; }

.aki-dif__estrelas {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.aki-dif__btn {
    background: transparent;
    border: 0;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: var(--aki-dif-off);
    transition: color 120ms ease, transform 120ms ease;
    line-height: 0;
    border-radius: 6px;
}
.aki-dif__btn:hover,
.aki-dif__btn:focus-visible {
    transform: translateY(-1px);
    outline: 2px solid rgba(126, 91, 239, 0.35);
    outline-offset: 2px;
}
.aki-dif__btn svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
    transition: fill 120ms ease;
}

.aki-dif__estrelas[data-preview="1"] .aki-dif__btn:nth-child(-n+1),
.aki-dif__estrelas[data-preview="2"] .aki-dif__btn:nth-child(-n+2),
.aki-dif__estrelas[data-preview="3"] .aki-dif__btn:nth-child(-n+3),
.aki-dif__estrelas[data-preview="4"] .aki-dif__btn:nth-child(-n+4),
.aki-dif__estrelas[data-preview="5"] .aki-dif__btn:nth-child(-n+5) {
    color: var(--aki-dif-on);
}
.aki-dif.is-avaliada .aki-dif__estrelas[data-preview="0"] .aki-dif__btn.is-marcada {
    color: var(--aki-dif-on-strong);
}

.aki-dif__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-primario, #1E1E2E);
    min-height: 1em;
}
.aki-dif__label--dica {
    font-weight: 500;
    color: var(--texto-secundario, #5A5A72);
}

.aki-dif__meta {
    font-size: 0.75rem;
    color: var(--texto-secundario, #5A5A72);
}
.aki-dif__meta strong { color: var(--texto-primario, #1E1E2E); }

.aki-dif--carregando { opacity: 0.6; pointer-events: none; }

.aki-dif__toast {
    display: none;
    font-size: 0.75rem;
    color: var(--sucesso, #3DBE8B);
    font-weight: 600;
}
.aki-dif.is-ok .aki-dif__toast { display: inline; }

@media (max-width: 480px) {
    .aki-dif { flex-wrap: wrap; }
    .aki-dif__label, .aki-dif__meta { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
    .aki-dif__btn { transition: none; }
    .aki-dif__btn:hover { transform: none; }
}

/* =====================================================================
   v1.3 (2026-07-24) — modo leitura no Caderno.
   Regra: dentro de [data-feed-area="caderno"], o widget mostra as
   estrelas cheias até a média + linha "Média X,X · N votos" e NÃO é
   clicável. É informação, não interação.
   ================================================================== */
.aki-dif--leitura .aki-dif__btn--ro {
    cursor: default;
    pointer-events: none;
    padding: 2px;
}
.aki-dif--leitura .aki-dif__btn--ro:hover,
.aki-dif--leitura .aki-dif__btn--ro:focus-visible {
    transform: none;
    outline: none;
}
.aki-dif--leitura .aki-dif__btn--ro.is-marcada {
    color: var(--aki-dif-on-strong);
}
.aki-dif--leitura .aki-dif__estrelas--ro { order: 2; }
.aki-dif--leitura .aki-dif__label {
    order: 1;
    font-weight: 600;
    color: var(--texto-secundario, #5A5A72);
}
.aki-dif--leitura .aki-dif__meta { order: 3; }