/* =====================================================================
   PEO — Fase 14: Estratégias
   PDCA (4 blocos) + Cascata de Escolhas (5 itens numerados).
   ===================================================================== */

/* ========= PDCA ========= */
.est-pdca {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin: 1rem 0 1.25rem;
}
@media (max-width: 760px) { .est-pdca { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .est-pdca { grid-template-columns: 1fr; } }

.est-pdca-item {
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.est-pdca-item strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.est-pdca-item span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.est-pdca-item p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
/* Acento sutil por letra */
.est-pdca-item.p { border-left: 3px solid var(--color-info, #0ea5e9); }
.est-pdca-item.d { border-left: 3px solid var(--color-success, #10b981); }
.est-pdca-item.c { border-left: 3px solid var(--color-warning, #d97706); }
.est-pdca-item.a { border-left: 3px solid #8b5cf6; }

/* ========= Cascata de Escolhas (5 perguntas) ========= */
.est-cascata {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0;
    padding: 1.25rem;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.est-cascata-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.est-cascata-item .est-num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--text-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}
.est-cascata-item h4 {
    margin: 0 0 4px;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.est-cascata-item p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.est-cascata-item p strong { color: var(--text-primary); font-weight: 600; }

/* =====================================================================
   Fase 14 — CRUD de Estratégias (cards por Objetivo + modal)
   ===================================================================== */
.oe-crud-card { }
.oe-crud-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.oe-crud-sub { font-size:0.86rem; color:var(--text-muted); margin:2px 0 0; }

.est-lista { display:flex; flex-direction:column; gap:0.85rem; margin-top:1rem; }
.lag-loading { padding:1rem 0; color:var(--text-muted); font-size:0.9rem; }
.lag-loading i { margin-right:6px; }

.est-objetivo {
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
    background:var(--bg-surface); padding:0.9rem 1.05rem;
}
.est-obj-head { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:6px; }
.est-obj-codigo {
    background:var(--text-primary, #1a1a1a); color:#fff; font-weight:700;
    font-size:0.74rem; padding:2px 8px; border-radius:999px;
}
.est-obj-nome { font-weight:600; font-size:0.95rem; color:var(--text-primary); }
.est-obj-persp {
    font-size:0.72rem; color:var(--text-muted);
    border:1px solid var(--border-color); padding:1px 7px; border-radius:999px;
}
.est-texto { font-size:0.9rem; color:var(--text-secondary); line-height:1.55; margin:4px 0 8px; }
.est-sem, .est-sem-itens { font-size:0.86rem; color:var(--text-muted); font-style:italic; margin:4px 0 8px; }
.est-vinculos { display:flex; flex-direction:column; gap:4px; }
.est-vinc-linha { font-size:0.82rem; color:var(--text-secondary); }
.est-vinc-lbl { font-weight:600; color:var(--text-muted); margin-right:4px; }
.est-chip {
    display:inline-block; font-size:0.72rem; font-weight:600; padding:1px 8px;
    border-radius:999px; margin:2px 3px 2px 0; border:1px solid var(--border-color);
}
.est-chip.fcs { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.est-chip.kpi { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.est-obj-acoes { margin-top:8px; }
.est-edit-btn {
    background:none; border:1px solid var(--border-color); border-radius:var(--radius-sm);
    padding:5px 12px; font-size:0.82rem; font-weight:600; color:var(--text-secondary);
    cursor:pointer; transition:all .15s ease;
}
.est-edit-btn:hover { background:var(--bg-surface-alt, #f6f7f9); color:var(--text-primary); border-color:var(--text-muted); }
.est-edit-btn i { margin-right:4px; }
.oe-importar-badge { background:#16a34a; color:#fff; border-radius:999px; padding:0 7px; font-size:0.72rem; margin-left:4px; }

.est-checks { display:flex; flex-direction:column; gap:5px; margin:4px 0 4px; }
.est-check { font-size:0.85rem; color:var(--text-secondary); display:flex; align-items:flex-start; gap:7px; cursor:pointer; }
.est-check input { margin-top:3px; }
.est-check small { color:var(--text-muted); }

/* Status da fase */
.oe-status-form {
    display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
    margin-top:1.25rem; padding:1rem 1.1rem; background:var(--bg-surface-alt, #f6f7f9);
    border:1px solid var(--border-color); border-radius:var(--radius-sm);
}
.oe-status-info strong { display:block; font-size:0.92rem; color:var(--text-primary); }
.oe-status-info span { font-size:0.82rem; color:var(--text-muted); }
.oe-vazio { text-align:center; padding:1.5rem; color:var(--text-muted); }
.oe-vazio-icone { font-size:1.6rem; margin-bottom:6px; }

/* Modal (reaproveita o visual do dashboard Lag) */
.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:560px; margin:5vh auto 0; background:#fff;
    border-radius:var(--radius-md, 12px); box-shadow:0 20px 50px rgba(0,0,0,0.35);
    display:flex; flex-direction:column; max-height:90vh;
}
.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); }
.lag-modal-body { padding:1.1rem 1.25rem; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:0.4rem; }
.lag-modal-meta { background:var(--bg-surface-alt, #f6f7f9); border-radius:var(--radius-sm); padding:0.6rem 0.75rem; font-size:0.86rem; color:var(--text-secondary); margin:0 0 0.4rem; }
.lag-modal-body label { font-size:0.82rem; font-weight:600; color:var(--text-primary); margin-top:0.5rem; }
.lag-modal-body label small { font-weight:400; color:var(--text-muted); }
.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; resize:vertical;
}
.lag-modal-foot { display:flex; justify-content:flex-end; gap:0.6rem; padding:0.85rem 1.25rem; border-top:1px solid var(--border-color); }
#est-f-salvar.carregando { opacity:0.7; pointer-events:none; }

/* Rótulos que separam Objetivo (o quê) da Estratégia (como vencer) */
.est-obj-tag {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-muted); margin-bottom:6px;
}
.est-obj-tag i { font-size:0.7rem; opacity:0.7; }
.est-bloco-estrategia {
    margin-top:10px; padding:0.7rem 0.85rem;
    background:var(--bg-surface-alt, #f6f7f9);
    border-left:3px solid var(--color-info, #2563eb);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.est-bloco-estrategia.vazio { border-left-color:var(--border-color); }
.est-bloco-lbl {
    display:inline-flex; align-items:center; gap:5px;
    font-size:0.68rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--color-info, #2563eb); margin-bottom:5px;
}
.est-bloco-estrategia.vazio .est-bloco-lbl { color:var(--text-muted); }
.est-bloco-estrategia .est-texto { margin:0 0 8px; }
.est-bloco-estrategia .est-vinculos { margin-top:6px; }

/* Listas de FCS/KPI com código + nome completo (quadro completo) */
.est-vinc-grupo { margin-top:8px; }
.est-itens { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.est-item { display:flex; align-items:flex-start; gap:8px; font-size:0.84rem; line-height:1.4; }
.est-item-cod {
    flex-shrink:0; font-size:0.7rem; font-weight:700; padding:1px 7px; border-radius:999px;
    border:1px solid var(--border-color); white-space:nowrap; margin-top:1px;
}
.est-item.fcs .est-item-cod { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.est-item.kpi .est-item-cod { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.est-item-nome { color:var(--text-secondary); }
.est-item-meta { color:var(--text-muted); font-size:0.78rem; white-space:nowrap; }
.est-sem-mini { font-size:0.82rem; color:var(--text-muted); font-style:italic; margin:4px 0 0; }

/* ===== Card de Status da Fase (destacado, chama atenção) ===== */
.fase-status-card {
    margin-top: 1.5rem;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--text-muted);
    background: var(--bg-surface);
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.fase-status-card.is-rascunho  { border-left-color: #d97706; background: #fffbeb; }
.fase-status-card.is-concluida { border-left-color: #16a34a; background: #f0fdf4; }

.fase-status-topo { display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap; }
.fase-status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 999px;
    white-space: nowrap; flex-shrink: 0;
}
.is-rascunho  .fase-status-pill { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.is-concluida .fase-status-pill { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.fase-status-pill i { font-size: 0.9rem; }

.fase-status-texto { display: flex; flex-direction: column; gap: 2px; }
.fase-status-texto strong { font-size: 0.98rem; color: var(--text-primary); }
.fase-status-texto span { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.45; }

.fase-status-acoes { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.btn-fase-concluir {
    display: inline-flex; align-items: center; gap: 8px;
    background: #16a34a; color: #fff; border: none;
    font-size: 0.92rem; font-weight: 700; padding: 0.7rem 1.3rem;
    border-radius: var(--radius-sm); cursor: pointer;
    box-shadow: 0 2px 8px rgba(22,163,74,0.25); transition: all .15s ease;
}
.btn-fase-concluir:hover { background: #15803d; box-shadow: 0 4px 12px rgba(22,163,74,0.35); transform: translateY(-1px); }
.fase-status-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 700; color: #15803d; }
.fase-status-ok i { font-size: 1.05rem; }
.btn-fase-reabrir {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--border-color); color: var(--text-secondary);
    font-size: 0.82rem; font-weight: 600; padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm); cursor: pointer; transition: all .15s ease;
}
.btn-fase-reabrir:hover { background: var(--bg-surface-alt, #f6f7f9); color: var(--text-primary); }