/* =====================================================================
   PEO — Fase 19: Avaliação e Revisão Estratégica
   3 benefícios + 4 blocos de fase + 4 ciclos + 8 etapas + sinais de alerta.
   ===================================================================== */

/* ========= Benefícios (3 cards) ========= */
.av-beneficios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}
.av-beneficio {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 3px solid var(--text-muted);
}
.av-beneficio i {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.av-beneficio strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
}
.av-beneficio p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.av-beneficio.melhoria     { border-left-color: var(--color-success, #10b981); }
.av-beneficio.alinhamento  { border-left-color: var(--color-info, #0ea5e9); }
.av-beneficio.resultados   { border-left-color: var(--color-warning, #d97706); }

/* ========= Conexão com as 18 fases (4 blocos) ========= */
.av-blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.av-bloco {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-left: 3px solid var(--text-muted);
}
.av-bloco strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.av-bloco strong i {
    font-size: 0.88rem;
    color: var(--text-muted);
}
.av-bloco .fases-range {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.av-bloco p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.av-bloco.identidade     { border-left-color: var(--color-success, #10b981); }
.av-bloco.diagnostico    { border-left-color: var(--color-warning, #d97706); }
.av-bloco.direcionamento { border-left-color: #8b5cf6; }
.av-bloco.execucao       { border-left-color: #ec4899; }

/* ========= Ciclos (M / T / S / A) ========= */
.av-ciclos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}
.av-ciclo {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.av-ciclo-letra {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background: var(--text-primary);
    margin-bottom: 4px;
}
.av-ciclo strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary);
}
.av-ciclo p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.av-ciclo.mensal     .av-ciclo-letra { background: #10b981; }
.av-ciclo.trimestral .av-ciclo-letra { background: #0ea5e9; }
.av-ciclo.semestral  .av-ciclo-letra { background: #d97706; }
.av-ciclo.anual      .av-ciclo-letra { background: #8b5cf6; }

/* ========= Etapas numeradas (8 passos) ========= */
.av-etapas {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 1rem 0 1.25rem;
    padding: 1.1rem;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.av-etapa {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.av-etapa-num {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--text-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}
.av-etapa-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.av-etapa-corpo strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}
.av-etapa-corpo p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ========= Sinais de alerta (lista destaque) ========= */
.av-alertas {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-danger, #dc2626);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}
.av-alertas h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.av-alertas h3 i {
    color: var(--color-danger, #dc2626);
}
.av-alertas ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.7;
}
.av-alertas ul li {
    margin-bottom: 0.25rem;
}
.av-alertas ul li strong { color: var(--text-primary); font-weight: 700; }

/* ========= Mensagem de conclusão do PEO ========= */
.av-conclusao {
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--color-success, #10b981);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    text-align: center;
}
.av-conclusao h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
}
.av-conclusao p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}
.av-conclusao i {
    font-size: 1.6rem;
    color: var(--color-success, #10b981);
    margin-bottom: 6px;
    display: block;
}

/* =====================================================================
   Painel Lag — prometido (Backcasting) × realizado + sinal Lead
   ===================================================================== */
.lag-loading {
    padding: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.lag-loading i { margin-right: 6px; }

.lag-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

.lag-objetivo {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    overflow: hidden;
}
.lag-obj-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-muted, #f6f7f9);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.lag-obj-id { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lag-obj-codigo {
    font-weight: 700;
    font-size: 0.8rem;
    background: var(--text-primary, #1a1a1a);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
}
.lag-obj-nome { font-weight: 600; font-size: 0.96rem; color: var(--text-primary); }
.lag-obj-persp {
    font-size: 0.74rem;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 1px 7px;
    border-radius: 999px;
}

/* Pílula do sinal Lead */
.lag-lead-pill {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid var(--border-color);
}
.lag-lead-pill small { font-weight: 500; opacity: 0.8; }
.lag-lead-pill.verde    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.lag-lead-pill.amarelo  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.lag-lead-pill.vermelho { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.lag-lead-pill.neutro   { background: var(--bg-muted, #f6f7f9); color: var(--text-muted); }

/* Banner de descolamento Lead × Lag */
.lag-descolamento {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    line-height: 1.45;
    border-bottom: 1px solid var(--border-color);
}
.lag-descolamento i { font-size: 1rem; margin-top: 2px; }
.lag-descolamento strong { display: block; font-size: 0.88rem; margin-bottom: 1px; }
.lag-descolamento span { color: var(--text-secondary); }
.lag-descolamento.ok        { background: #ecfdf5; }
.lag-descolamento.ok i,
.lag-descolamento.ok strong { color: #047857; }
.lag-descolamento.execucao        { background: #fef2f2; }
.lag-descolamento.execucao i,
.lag-descolamento.execucao strong { color: #b91c1c; }
.lag-descolamento.hipotese        { background: #fff7ed; border-left: 3px solid #ea580c; }
.lag-descolamento.hipotese i,
.lag-descolamento.hipotese strong { color: #c2410c; }
.lag-descolamento.aguardando        { background: var(--bg-muted, #f6f7f9); }
.lag-descolamento.aguardando i,
.lag-descolamento.aguardando strong { color: var(--text-muted); }

/* Linhas por ano */
.lag-anos { padding: 0.5rem 1rem 0.85rem; }
.lag-ano-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-top: 1px solid var(--border-color);
}
.lag-ano-row:first-child { border-top: none; }
.lag-ano-num {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    min-width: 46px;
    padding-top: 1px;
}
.lag-ano-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lag-ano-meta, .lag-ano-real { font-size: 0.86rem; color: var(--text-secondary); }
.lag-ano-meta strong, .lag-ano-real strong { color: var(--text-primary); }
.lag-ano-obs {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
}
.lag-status-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: 4px;
    border: 1px solid var(--border-color);
}
.lag-status-tag.st-atingido     { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.lag-status-tag.st-parcial      { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.lag-status-tag.st-nao_atingido { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.lag-status-tag.st-pendente     { background: var(--bg-muted, #f6f7f9); color: var(--text-muted); }

.lag-ano-edit {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.lag-ano-edit:hover { background: var(--bg-muted, #f6f7f9); color: var(--text-primary); border-color: var(--text-muted); }
.lag-ano-edit i { margin-right: 4px; }

/* Modal de registro do realizado */
.lag-modal { display: none; position: fixed; inset: 0; z-index: 9000; }
.lag-modal.aberto { display: block; }
.lag-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.lag-modal-box {
    position: relative;
    max-width: 520px;
    margin: 6vh auto 0;
    background: #ffffff;
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}
.lag-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.lag-modal-head h3 { margin: 0; font-size: 1.05rem; }
.lag-modal-x {
    background: none; border: none; cursor: pointer;
    font-size: 1.05rem; color: var(--text-muted); padding: 4px;
}
.lag-modal-body {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lag-modal-meta {
    background: var(--bg-muted, #f6f7f9);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}
.lag-modal-body label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.35rem;
}
.lag-modal-body select,
.lag-modal-body input,
.lag-modal-body textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-primary);
    background: #fff;
}
.lag-modal-body textarea { resize: vertical; }
.lag-f-row { display: flex; gap: 0.75rem; }
.lag-f-row > div { flex: 1; min-width: 0; }
.lag-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border-color);
}
.lag-f-salvar.carregando { opacity: 0.7; pointer-events: none; }

@media (max-width: 560px) {
    .lag-ano-row { flex-wrap: wrap; }
    .lag-ano-edit { margin-left: 46px; }
    .lag-f-row { flex-direction: column; }
}