/* ============================================================
   Ouvidoria (out/2026) — complementos do mc-modulo.css (prefixo ov-).
   Só o que a fundação mm-* não cobre: protocolo, barra de prioridade
   na lista, prazo com progresso, relato/resposta, caminho da
   manifestação, estrelas de satisfação, botões de nota 0–10 e faixas
   do NPS. Tudo com os tokens --p-* (claro/escuro herdados de .mm/.mm-layer).
   ============================================================ */

/* ---- Lista: barra de prioridade, protocolo, assunto, prazo ---- */
.ov-tbl tbody tr > td:first-child { box-shadow: inset 4px 0 0 var(--tom, transparent); }
.ov-tbl td { vertical-align: top; }
.ov-proto { font-family: var(--p-mono); font-weight: 800; color: var(--p-ink); font-size: .76rem; letter-spacing: .2px; white-space: nowrap; }
.ov-proto.lg { font-size: 1.2rem; letter-spacing: 0; padding: .05rem .5rem; border-radius: 8px; background: var(--p-soft2); border: 1px solid var(--p-border); vertical-align: middle; }
.ov-sub { font-size: .66rem; font-weight: 600; color: var(--p-faint); margin-top: 2px; line-height: 1.35; }
.ov-assunto { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 460px; }
.ov-assunto-txt { font-size: .8rem; font-weight: 700; color: var(--p-ink); min-width: 0; }
.ov-prazo { display: flex; flex-direction: column; gap: 4px; min-width: 128px; }
.ov-prazo .mm-chip { align-self: flex-start; }
.ov-prazo .mm-progress { height: 5px; }

/* ---- Cabeçalho da ficha ---- */
.ov-voltar { display: inline-flex; align-items: center; gap: 2px; font-size: .72rem; font-weight: 700; color: var(--p-muted) !important; margin-bottom: 4px; }
.ov-voltar:hover { color: var(--p-blue) !important; }
.ov-head-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Caminho: recebida → em análise → na área → respondida */
.ov-fluxo-card { padding: 14px 20px; }
.ov-fluxo { display: flex; align-items: center; }
.ov-fluxo-it { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; color: var(--p-faint); white-space: nowrap; }
.ov-fluxo-it .n {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    background: var(--p-soft2); color: var(--p-faint); border: 1px solid var(--p-border);
}
.ov-fluxo-it.ok { color: var(--p-green); }
.ov-fluxo-it.ok .n { background: var(--p-green); border-color: var(--p-green); color: #fff; }
.ov-fluxo-it.on { color: var(--p-blue); }
.ov-fluxo-it.on .n { background: var(--p-blue-light); border-color: var(--p-blue-light); color: #fff; box-shadow: 0 0 0 4px var(--p-blue-line-soft); }
.ov-fluxo-dt { font-size: .6rem; font-weight: 600; color: var(--p-faint); font-family: var(--p-mono); }
.ov-fluxo-sep { flex: 1; min-width: 24px; height: 2px; background: var(--p-border); margin: 0 12px; border-radius: 2px; }
.ov-fluxo-sep.ok { background: var(--p-green); }

/* ---- Relato e resposta ---- */
.ov-assunto-lg { font-size: 1rem; font-weight: 800; color: var(--p-ink); letter-spacing: -.2px; line-height: 1.3; }
.ov-relato {
    white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--p-soft); border: 1px solid var(--p-border); border-left: 4px solid var(--p-blue-light);
    border-radius: 12px; padding: 12px 14px; font-size: .82rem; color: var(--p-ink); line-height: 1.6;
}
.ov-relato.sm { font-size: .74rem; padding: 9px 11px; max-height: 260px; overflow-y: auto; }
.ov-relato.ov-resposta { border-left-color: var(--p-green); background: var(--p-green-soft); }
.ov-card-resposta { border-color: var(--p-green-line); }
.ov-nota-area { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; display: flex; flex-direction: column; gap: 3px; }

/* ---- Coluna de ações / prazo da ficha ---- */
.ov-acoes-col { display: flex; flex-direction: column; gap: 7px; }
.ov-acoes-col .mm-btn { justify-content: flex-start; width: 100%; }
.ov-acoes-col .ov-btn-arquivar { color: var(--p-muted); }
.ov-acoes-col .ov-btn-arquivar:hover:not(:disabled) { color: var(--p-red); background: var(--p-red-soft); border-color: var(--p-red-line); }
.ov-prazo-big { display: flex; flex-direction: column; gap: 5px; padding: 11px 13px; border-radius: 12px; background: var(--tom-soft, var(--p-soft)); border: 1px solid var(--tom-line, var(--p-border)); }
.ov-prazo-data { font-size: 1.35rem; font-weight: 800; color: var(--tom, var(--p-ink)); letter-spacing: -.4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-dd-atraso { border-color: var(--p-red-line); background: var(--p-red-soft); }
.ov-dd-atraso .mm-dd-val { color: var(--p-red); }
.ov-estrelas-mini { display: inline-flex; gap: 1px; font-size: 16px; color: var(--p-border-strong); }
.ov-estrelas-mini .on { color: #f59e0b; }

/* ---- Painel ---- */
.ov-col-par { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; min-height: 0; }
.ov-col-par .mm-col-bar { max-width: 14px; }
.ov-cols2 .mm-col { justify-content: flex-end; }
.ov-cols2 .ov-col-par { flex: 1; }
a.ov-bar-link { color: inherit; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; }
a.ov-bar-link:hover { background: var(--p-soft); }
a.ov-bar-link .mm-bar-lbl i { font-size: 14px; vertical-align: -2px; }
a.ov-tl-link { color: inherit; border-radius: 8px; }
a.ov-tl-link:hover .mm-tl-tit { color: var(--p-blue); }
.ov-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tom, var(--p-blue)); margin-right: 7px; vertical-align: 1px; }
.mm-tbl tfoot .ov-tfoot td { background: var(--p-soft); font-weight: 800; color: var(--p-ink); border-top: 1px solid var(--p-border); }

/* ---- Modal da manifestação ---- */
.ov-ident { display: flex; flex-direction: column; gap: 6px; }
.ov-opts3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ov-opts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-seg-full { display: flex; width: 100%; }
.ov-seg-full button { flex: 1; justify-content: center; }
.ov-assuntos .mm-pill { height: 26px; font-size: .68rem; }
.ov-conf { display: flex; flex-direction: column; gap: 6px; }
.ov-conf-assunto { margin-top: 2px; line-height: 1.35; }
.ov-tram-corpo { display: flex; flex-direction: column; gap: 14px; }
.ov-prazos { display: flex; align-items: center; gap: 12px; }
.ov-prazos .mm-dd { flex: 1; }
.ov-prazos > i { font-size: 22px; color: var(--p-faint); }
.ov-dd-novo { border-color: var(--p-orange-line); background: var(--p-orange-soft); }
.ov-dd-novo .mm-dd-val { color: var(--p-orange); }
.mm-layer .prmd-flabel .mm-flex1 { flex: 1; }

/* Estrelas (avaliação do manifestante) */
.ov-estrelas { display: flex; justify-content: center; gap: 4px; padding-top: 4px; }
.ov-estrelas button { border: none; background: transparent; font-size: 34px; line-height: 1; color: var(--p-border-strong); padding: 0 2px; transition: transform .12s, color .12s; }
.ov-estrelas button.on { color: #f59e0b; }
.ov-estrelas button:hover { transform: scale(1.1); }
.ov-estrelas-txt { text-align: center; font-size: .8rem; font-weight: 700; color: var(--p-ink); }

/* ---- Pesquisas ---- */
.ov-pesq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.ov-pesq { display: flex; flex-direction: column; }
.ov-pesq .mm-card-body { flex: 1; }
.ov-pesq.inativa { opacity: .72; }
.ov-pesq .mm-card-tit { min-width: 0; }
.ov-nps { display: flex; height: 9px; border-radius: 50px; overflow: hidden; background: var(--p-soft2); }
.ov-nps > span { height: 100%; }
.ov-nps .d { background: var(--p-red); }
.ov-nps .n { background: var(--p-yellow); }
.ov-nps .p { background: var(--p-green); }
.ov-nps-linha { display: flex; align-items: center; gap: 8px; }
.ov-nps-card { display: flex; flex-direction: column; gap: 6px; }
.ov-nps-val { font-size: 1.9rem; font-weight: 800; letter-spacing: -.6px; line-height: 1; color: var(--tom, var(--p-ink)); font-variant-numeric: tabular-nums; }

/* Editor de perguntas */
.ov-perg-edit { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 11px; border: 1px solid var(--p-border); background: var(--p-surface); }
.ov-perg-edit.inativa { opacity: .6; background: var(--p-soft); }
.ov-perg-edit .prmd-field { flex: 1; min-width: 0; }
.ov-perg-edit .ov-perg-tipo, .ov-perg-nova .ov-perg-tipo { flex: none; width: 150px; }
.ov-perg-edit .mm-check { font-size: .68rem; white-space: nowrap; }
.ov-perg-info { margin: -4px 0 0 40px; }
.ov-perg-nova { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--p-border); }
.ov-perg-nova .prmd-field:first-child { flex: 1; }
.ov-perg-n {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-blue-soft); color: var(--p-blue); font-size: .64rem; font-weight: 800;
}
.ov-previa-tit { font-size: .86rem; font-weight: 800; color: var(--p-ink); }
.ov-previa-q { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--p-surface); border: 1px solid var(--p-border); }
.ov-previa-texto { height: 30px; border-radius: 8px; border: 1px dashed var(--p-border-strong); font-size: .64rem; color: var(--p-faint); display: flex; align-items: center; padding: 0 9px; }

/* Aplicar: cartão de pergunta e botões de nota 0–10 */
.ov-pergunta { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--p-border); background: var(--p-surface); }
.ov-pergunta.ok { border-color: var(--p-green-line); }
.ov-pergunta-tit { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--p-ink); line-height: 1.35; }
.ov-pergunta.ok .ov-perg-n { background: var(--p-green); color: #fff; }
.ov-notas { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.ov-notas button, .ov-notas span {
    height: 34px; border-radius: 8px; border: 1px solid var(--p-border); background: var(--p-surface);
    font-size: .76rem; font-weight: 800; color: var(--p-text); display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.ov-notas.mini span { height: 20px; font-size: .58rem; border-radius: 5px; }
.ov-notas .d { border-bottom: 3px solid var(--p-red-line); }
.ov-notas .n { border-bottom: 3px solid var(--p-yellow-line); }
.ov-notas .p { border-bottom: 3px solid var(--p-green-line); }
.ov-notas button:hover { transform: translateY(-1px); border-color: var(--p-blue-line); }
.ov-notas button.d.on { background: var(--p-red); border-color: var(--p-red); color: #fff; }
.ov-notas button.n.on { background: var(--p-yellow); border-color: var(--p-yellow); color: #fff; }
.ov-notas button.p.on { background: var(--p-green); border-color: var(--p-green); color: #fff; }
.ov-notas-leg { display: flex; justify-content: space-between; font-size: .6rem; font-weight: 700; color: var(--p-faint); margin-top: -4px; }

/* Resultados */
.ov-res-nota { display: flex; gap: 14px; align-items: stretch; }
.ov-res-media { width: 84px; flex: none; border-radius: 12px; background: var(--tom-soft, var(--p-soft)); border: 1px solid var(--tom-line, var(--p-border)); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ov-res-media .v { font-size: 1.6rem; font-weight: 800; color: var(--tom, var(--p-ink)); letter-spacing: -.5px; line-height: 1; }
.ov-dist { height: 74px; gap: 3px; }
.ov-dist .mm-col-bar { max-width: 22px; }
.ov-textos { max-height: 240px; overflow-y: auto; }
.ov-texto-resp { font-size: .74rem; padding: 7px 10px; border-radius: 10px; background: var(--p-soft); border: 1px solid var(--p-border-soft); color: var(--p-text); white-space: pre-wrap; }
.ov-aplic { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--p-surface); border: 1px solid var(--p-border); }
.ov-aplic-com { font-style: italic; color: var(--p-text); margin-top: 2px; }

@media print {
    .ov-acoes-col, .ov-voltar { display: none !important; }
}
.mm-layer .prmd-flabel .mm-btn { text-transform: none; letter-spacing: 0; margin-left: auto; }
