/* =============================================================================
 * InspectorPRO NR-13 — Checklist Premium Styles
 * Estilização dos itens C/NC/NA do wizard de inspeção
 * ============================================================================= */

/* Container do Checklist */
.checklist-premium {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Grupo de Itens */
.checklist-grupo {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.checklist-grupo.sst-grupo {
    border-color: rgba(245, 158, 11, 0.2);
}

/* Header do Grupo */
.grupo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.grupo-num {
    color: #64748b;
    font-weight: 600;
}

.badge-sst {
    display: inline-block;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: auto;
    letter-spacing: 0.5px;
}

.badge-obrig {
    display: inline-block;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 6px;
    letter-spacing: 0.3px;
    vertical-align: middle;
}

/* Container dos Itens dentro do grupo */
.grupo-items {
    padding: 4px 0;
}

/* Item individual do checklist */
.checklist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
    gap: 12px;
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Estado visual do item */
.checklist-item.c {
    background: rgba(16, 185, 129, 0.06);
    border-left: 3px solid #10b981;
}

.checklist-item.nc {
    background: rgba(239, 68, 68, 0.06);
    border-left: 3px solid #ef4444;
}

.checklist-item.na {
    background: rgba(100, 116, 139, 0.06);
    border-left: 3px solid #64748b;
}

/* Info do item (texto + fonte) */
.item-info {
    flex: 1;
    min-width: 0;
}

.item-texto {
    display: block;
    font-size: 0.82rem;
    color: #e2e8f0;
    line-height: 1.4;
}

.item-fonte {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    margin-top: 2px;
}

/* Opções C / NC / NA */
.checklist-options {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.checklist-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-weight: 800;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

/* Botão C (Conforme) */
.checklist-btn.c-btn {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #10b981;
}

.checklist-btn.c-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    transform: scale(1.05);
}

.checklist-btn.c-btn.selected,
.checklist-btn.c-btn.selected-c {
    background: #10b981;
    border-color: #10b981;
    color: white;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Botão NC (Não Conforme) */
.checklist-btn.nc-btn {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.checklist-btn.nc-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    transform: scale(1.05);
}

.checklist-btn.nc-btn.selected,
.checklist-btn.nc-btn.selected-nc {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* Botão NA (Não Aplicável) */
.checklist-btn.na-btn {
    background: rgba(100, 116, 139, 0.08);
    border-color: rgba(100, 116, 139, 0.25);
    color: #94a3b8;
}

.checklist-btn.na-btn:hover {
    background: rgba(100, 116, 139, 0.2);
    border-color: #94a3b8;
    transform: scale(1.05);
}

.checklist-btn.na-btn.selected,
.checklist-btn.na-btn.selected-na {
    background: #64748b;
    border-color: #64748b;
    color: white;
    box-shadow: 0 0 12px rgba(100, 116, 139, 0.4);
}

/* Item não aplicável (inteiro) */
.checklist-item.nao-aplicavel {
    opacity: 0.5;
}

/* [R1025] OS BOTÕES C/NC/NA/NI NÃO PODEM DESBOTAR JUNTO COM O ITEM.
 *
 * Dono (28/08, com quatro prints lado a lado): "coloca essas opções mais clarinhas
 * igual as outras, pra ficar mais fácil de eu preencher... ficar igual esses SST".
 *
 * Ele tinha visto certo, e a causa era esta regra. O `opacity: 0.5` mora no ITEM, e
 * opacity cai em cascata sobre todos os filhos. Os quatro botões já nascem com fundo a
 * 8% de alfa (.c-btn, .nc-btn, .na-btn, .ni-btn) — a meia opacidade os leva a 4%
 * efetivo, e a borda a 12,5%. Some quase por completo na tela do tablet, sob sol.
 *
 * As seções que ele apontou como boas — "7. SST NR-10" e "8. SST NR-12" — não têm nada
 * de especial no estilo: são as ÚNICAS em que 100% dos itens nascem `aplicavel: true`,
 * então nunca recebem esta classe. A mesma função desenha todos os botões.
 *
 * E o detalhe que fecha o caso: a classe só sai quando o RT RESPONDE o item (R621,
 * wizard.js). Ou seja, o botão ficava apagado exatamente enquanto ainda não tinha sido
 * clicado — no único momento em que ele precisa ser visto.
 *
 * [R1026] E A DISTINÇÃO TEM DE SOBREVIVER — foi o que ele corrigiu em seguida:
 * *"tínhamos combinado deixar os que tenho que preencher toda vez igual os SST, e os
 * outros mais claros (pré-preencher o checklist rápido)"*.
 *
 * Na primeira versão eu tinha devolvido TODOS os botões à opacidade cheia, e com isso
 * apaguei a informação que ele usa para trabalhar rápido: quais itens ele responde em
 * toda inspeção (`aplicavel: true`, os 20) e quais são condicionais — "se aplicável ao
 * serviço", "quando houver acesso interno" (`aplicavel: false`). Legível demais em tudo
 * é a mesma cegueira que apagado demais: some a hierarquia.
 *
 * Então os três níveis, de propósito:
 *   · item de sempre        → botão a 100%, como nas seções SST
 *   · item condicional      → botão a 72%: dá para ler e clicar, mas se distingue
 *   · texto do condicional  → segue a 50%, o sinal de "confira se este se aplica"
 *
 * Atenuar informação é legítimo. Atenuar o alvo do clique a ponto de sumir, não —
 * e era o que acontecia: 8% de fundo × 0,5 dava 4% efetivo, invisível no tablet sob sol.
 */
.checklist-item.nao-aplicavel .checklist-options {
    opacity: 1;                 /* zera a herança do pai; o nível vem do botão abaixo */
}

.checklist-item.nao-aplicavel .checklist-btn {
    opacity: 0.72;
}

/* ao passar o dedo/mouse, o condicional acende por inteiro — quem foi clicar, vai clicar */
.checklist-item.nao-aplicavel .checklist-btn:hover,
.checklist-item.nao-aplicavel .checklist-btn:focus-visible {
    opacity: 1;
}

/* Responsivo */
@media (max-width: 1150px) {
    .checklist-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .checklist-options {
        align-self: flex-end;
    }

    .checklist-btn {
        width: 42px;
        height: 42px;
        font-size: 0.85rem;
    }
}


/* [R464] Botão NI (Não Inspecionado com justificativa) */
.checklist-btn.ni-btn {
    background: rgba(180, 120, 10, 0.08);
    border-color: rgba(180, 120, 10, 0.3);
    color: #d97706;
}

.checklist-btn.ni-btn:hover {
    background: rgba(180, 120, 10, 0.2);
    border-color: #d97706;
    transform: scale(1.05);
}

.checklist-btn.ni-btn.selected,
.checklist-btn.ni-btn.selected-ni {
    background: #d97706;
    border-color: #d97706;
    color: white;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.4);
}