/*
 * MVV Empresarial — Estilos do wizard
 * @package MVV_Empresarial
 * @version 1.0.0
 */

/* ── Variáveis globais ─────────────────────────────────────── */
:root {
    --mvv-cor-primaria:    #1a3a5c;
    --mvv-cor-secundaria:  #2d7dd2;
    --mvv-cor-sucesso:     #27ae60;
    --mvv-cor-aviso:       #f39c12;
    --mvv-cor-erro:        #c0392b;
    --mvv-cor-texto:       #2c3e50;
    --mvv-cor-texto-leve:  #7f8c8d;
    --mvv-cor-borda:       #dde3ea;
    --mvv-cor-fundo:       #f4f6f9;
    --mvv-radius:          8px;
    --mvv-sombra:          0 2px 12px rgba(0,0,0,.08);
    --mvv-transicao:       all .2s ease;
}

/* ── Container principal ───────────────────────────────────── */
#mvv-wizard-container {
    max-width:  760px;
    margin:     0 auto;
    padding:    20px 16px 40px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Barra de progresso ────────────────────────────────────── */
.mvv-progresso-wrapper {
    margin-bottom: 28px;
}

.mvv-progresso-barra {
    width:         100%;
    height:        6px;
    background:    var(--mvv-cor-borda);
    border-radius: 3px;
    overflow:      hidden;
    margin-bottom: 14px;
}

.mvv-progresso-fill {
    height:           100%;
    background:       var(--mvv-cor-secundaria);
    border-radius:    3px;
    transition:       width .4s ease;
}

.mvv-progresso-etapas {
    display:         flex;
    justify-content: space-between;
    gap:             4px;
}

.mvv-etapa-label {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    flex:           1;
    cursor:         default;
    opacity:        .5;
    transition:     var(--mvv-transicao);
}

.mvv-etapa-label.ativa {
    opacity: 1;
}

.mvv-etapa-label.concluida {
    opacity: .8;
}

.mvv-etapa-numero {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      var(--mvv-cor-borda);
    color:           var(--mvv-cor-texto-leve);
    font-size:       12px;
    font-weight:     700;
    transition:      var(--mvv-transicao);
}

.mvv-etapa-label.ativa .mvv-etapa-numero {
    background: var(--mvv-cor-secundaria);
    color:      #fff;
}

.mvv-etapa-label.concluida .mvv-etapa-numero {
    background: var(--mvv-cor-sucesso);
    color:      #fff;
}

.mvv-etapa-nome {
    font-size:   10px;
    color:       var(--mvv-cor-texto-leve);
    text-align:  center;
    line-height: 1.2;
}

/* ── Etapas ────────────────────────────────────────────────── */
.mvv-etapa {
    display:       none;
    background:    #fff;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       28px 32px;
    box-shadow:    var(--mvv-sombra);
    margin-bottom: 24px;
    animation:     mvvFadeIn .3s ease;
}

.mvv-etapa.mvv-etapa-ativa {
    display: block;
}

@keyframes mvvFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mvv-etapa-cabecalho {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  20px;
    padding-bottom: 16px;
    border-bottom:  2px solid var(--mvv-cor-fundo);
}

.mvv-etapa-icone  { font-size: 28px; line-height: 1; }

.mvv-etapa-titulo {
    font-size:   20px;
    font-weight: 700;
    color:       var(--mvv-cor-primaria);
    margin:      0;
}

.mvv-etapa-intro {
    margin-bottom: 28px;
}

.mvv-etapa-intro p {
    margin-bottom: 12px;
    font-size:     15px;
    line-height:   1.8;
    color:         var(--mvv-cor-texto);
}

.mvv-etapa-intro p:last-child { margin-bottom: 0; }

.mvv-destaque-texto {
    background:    #f0f5fb;
    border-left:   4px solid var(--mvv-cor-secundaria);
    padding:       12px 16px;
    border-radius: 0 var(--mvv-radius) var(--mvv-radius) 0;
    font-style:    italic;
    color:         var(--mvv-cor-primaria) !important;
    font-size:     15px !important;
}

.mvv-exemplo-livro {
    background:    #f9f9f9;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       14px 18px;
    font-size:     14px;
    margin-top:    16px;
    color:         var(--mvv-cor-texto);
}

.mvv-exemplo-livro ul {
    margin:       8px 0 0 20px;
    padding:      0;
}

.mvv-exemplo-livro ul li { margin-bottom: 4px; }

/* ── Formulário ────────────────────────────────────────────── */
.mvv-formulario {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.mvv-campo-grupo {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.mvv-label {
    font-size:   14px;
    font-weight: 700;
    color:       var(--mvv-cor-texto);
    line-height: 1.5;
}

.mvv-obrigatorio { color: var(--mvv-cor-erro); margin-left: 2px; }

.mvv-campo-dica {
    font-size:   13px;
    color:       var(--mvv-cor-texto-leve);
    line-height: 1.6;
    margin:      0;
}

.mvv-input,
.mvv-textarea {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    font-size:     14px;
    font-family:   inherit;
    color:         var(--mvv-cor-texto);
    background:    #fff;
    transition:    var(--mvv-transicao);
    line-height:   1.6;
    box-sizing:    border-box;
}

.mvv-input:focus,
.mvv-textarea:focus {
    outline:      none;
    border-color: var(--mvv-cor-secundaria);
    box-shadow:   0 0 0 3px rgba(45,125,210,.12);
}

.mvv-input.mvv-campo-invalido,
.mvv-textarea.mvv-campo-invalido {
    border-color: var(--mvv-cor-erro);
    box-shadow:   0 0 0 3px rgba(192,57,43,.1);
}

.mvv-textarea       { resize: vertical; min-height: 80px; }
.mvv-textarea-destaque {
    border-color: var(--mvv-cor-secundaria);
    background:   #f8fbff;
    font-size:    15px;
    min-height:   100px;
}

.mvv-contador {
    font-size:  11px;
    color:      var(--mvv-cor-texto-leve);
    text-align: right;
    margin-top: -2px;
}

.mvv-contador.mvv-contador-limite {
    color:       var(--mvv-cor-aviso);
    font-weight: 600;
}

/* ── Tags ──────────────────────────────────────────────────── */
.mvv-tags-sugestao {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin:    4px 0 8px;
}

.mvv-tag {
    padding:       6px 12px;
    font-size:     13px;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: 20px;
    background:    #fff;
    color:         var(--mvv-cor-texto);
    cursor:        pointer;
    transition:    var(--mvv-transicao);
    font-family:   inherit;
    line-height:   1;
}

.mvv-tag:hover      { border-color: var(--mvv-cor-secundaria); color: var(--mvv-cor-secundaria); }
.mvv-tag.selecionada { background: var(--mvv-cor-secundaria); border-color: var(--mvv-cor-secundaria); color: #fff; }

/* ── Botões ────────────────────────────────────────────────── */
.mvv-botoes {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
    padding-top: 8px;
}

.mvv-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         11px 24px;
    font-size:       14px;
    font-weight:     600;
    border:          2px solid transparent;
    border-radius:   var(--mvv-radius);
    cursor:          pointer;
    font-family:     inherit;
    transition:      var(--mvv-transicao);
    text-decoration: none;
    line-height:     1;
    white-space:     nowrap;
}

.mvv-btn:focus { outline: 3px solid var(--mvv-cor-secundaria); outline-offset: 2px; }

.mvv-btn-primario  { background: var(--mvv-cor-primaria); color: #fff; border-color: var(--mvv-cor-primaria); }
.mvv-btn-primario:hover:not(:disabled) { background: var(--mvv-cor-secundaria); border-color: var(--mvv-cor-secundaria); }

.mvv-btn-secundario { background: transparent; color: var(--mvv-cor-secundaria); border-color: var(--mvv-cor-secundaria); }
.mvv-btn-secundario:hover:not(:disabled) { background: var(--mvv-cor-secundaria); color: #fff; }

.mvv-btn-terciario  { background: transparent; color: var(--mvv-cor-texto-leve); border-color: var(--mvv-cor-borda); }
.mvv-btn-terciario:hover:not(:disabled) { border-color: var(--mvv-cor-texto-leve); color: var(--mvv-cor-texto); }

.mvv-btn-voltar { background: transparent; color: var(--mvv-cor-texto-leve); border-color: var(--mvv-cor-borda); margin-right: auto; }
.mvv-btn-voltar:hover { color: var(--mvv-cor-texto); border-color: var(--mvv-cor-texto-leve); }

.mvv-btn:disabled, .mvv-btn.carregando { opacity: .6; cursor: not-allowed; }

/* ── Sugestão ──────────────────────────────────────────────── */
.mvv-sugestao-bloco {
    background:     #f5f9ff;
    border:         1.5px dashed var(--mvv-cor-secundaria);
    border-radius:  var(--mvv-radius);
    padding:        20px 24px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.mvv-sugestao-titulo  { font-weight: 700; font-size: 15px; color: var(--mvv-cor-primaria); }
.mvv-sugestao-aviso   { margin: 0; font-size: 13px; color: var(--mvv-cor-texto-leve); line-height: 1.6; }
.mvv-sugestao-resultado { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ── Dicas de validação ────────────────────────────────────── */
.mvv-missao-dica-validacao {
    background:    #f0f8f0;
    border:        1px solid #c3e6cb;
    border-radius: var(--mvv-radius);
    padding:       14px 18px;
    font-size:     13px;
}

.mvv-missao-dica-validacao p  { margin: 0 0 8px; font-weight: 600; color: #155724; }
.mvv-missao-dica-validacao ul { margin: 0; padding-left: 20px; }
.mvv-missao-dica-validacao li { margin-bottom: 4px; color: #155724; }

/* ── Orientação final ──────────────────────────────────────── */
.mvv-orientacao-final {
    background:    #fff8f0;
    border:        1px solid #ffd580;
    border-radius: var(--mvv-radius);
    padding:       16px 20px;
    margin-bottom: 20px;
    font-size:     14px;
    color:         #7a5c00;
}

.mvv-orientacao-final p { margin: 0 0 8px; }
.mvv-orientacao-final p:last-child { margin-bottom: 0; }

/* ── Instrução de valores ──────────────────────────────────── */
.mvv-instrucao-valores { font-size: 13px; color: var(--mvv-cor-texto-leve); font-style: italic; margin: 0 0 8px; }

/* ── Cards de valores ──────────────────────────────────────── */
.mvv-valores-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   14px;
    margin-top:            16px;
}

.mvv-valor-card {
    background:     #fff;
    border:         1.5px solid var(--mvv-cor-borda);
    border-radius:  var(--mvv-radius);
    padding:        14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    transition:     var(--mvv-transicao);
}

.mvv-valor-card.selecionado {
    border-color: var(--mvv-cor-secundaria);
    background:   #f0f5fb;
    box-shadow:   0 0 0 3px rgba(45,125,210,.1);
}

.mvv-valor-card-nome {
    font-weight:  700;
    font-size:    14px;
    color:        var(--mvv-cor-primaria);
    display:      flex;
    align-items:  center;
    gap:          8px;
    cursor:       pointer;
    user-select:  none;
}

.mvv-valor-card-check {
    width:        18px;
    height:       18px;
    cursor:       pointer;
    accent-color: var(--mvv-cor-secundaria);
    flex-shrink:  0;
}

.mvv-valor-card-descricao {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: 6px;
    font-size:     13px;
    font-family:   inherit;
    resize:        vertical;
    line-height:   1.5;
    min-height:    60px;
    background:    #fff;
    color:         var(--mvv-cor-texto);
    box-sizing:    border-box;
}

.mvv-valor-card-descricao:focus  { outline: none; border-color: var(--mvv-cor-secundaria); }
.mvv-valor-card-descricao:disabled { background: #f9f9f9; color: #aaa; }

/* ── Revisão (etapa 5) ─────────────────────────────────────── */
.mvv-revisao-container { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }

.mvv-revisao-bloco {
    background:    var(--mvv-cor-fundo);
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       16px 20px;
}

.mvv-revisao-label {
    font-weight:    700;
    font-size:      14px;
    color:          var(--mvv-cor-primaria);
    margin-bottom:  10px;
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.mvv-btn-editar-revisao {
    padding:     4px 10px;
    font-size:   12px;
    border:      1px solid var(--mvv-cor-borda);
    border-radius: 4px;
    background:  #fff;
    cursor:      pointer;
    color:       var(--mvv-cor-texto-leve);
    transition:  var(--mvv-transicao);
    font-family: inherit;
    margin-left: auto;
}

.mvv-btn-editar-revisao:hover { border-color: var(--mvv-cor-secundaria); color: var(--mvv-cor-secundaria); }
.mvv-revisao-conteudo { font-size: 14px; color: var(--mvv-cor-texto); line-height: 1.7; }
.mvv-carregando-texto { color: var(--mvv-cor-texto-leve); font-style: italic; font-size: 14px; }

/* ── Checklist ─────────────────────────────────────────────── */
.mvv-checklist { background: #fff; border: 1px solid var(--mvv-cor-borda); border-radius: var(--mvv-radius); padding: 20px 24px; margin-bottom: 24px; }
.mvv-checklist-titulo { font-size: 16px; font-weight: 700; color: var(--mvv-cor-primaria); margin: 0 0 8px; }
.mvv-checklist-itens { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.mvv-checklist-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 6px; font-size: 13px; line-height: 1.6; }
.mvv-checklist-item.ok    { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.mvv-checklist-item.aviso { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.mvv-checklist-item.erro  { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.mvv-checklist-icone { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

.mvv-checklist-carregando { display: flex; align-items: center; gap: 10px; color: var(--mvv-cor-texto-leve); font-size: 14px; padding: 10px 0; }

/* ── Spinner ───────────────────────────────────────────────── */
.mvv-spinner {
    display:          inline-block;
    width:            18px;
    height:           18px;
    border:           3px solid var(--mvv-cor-borda);
    border-top-color: var(--mvv-cor-secundaria);
    border-radius:    50%;
    animation:        mvvSpin .8s linear infinite;
    flex-shrink:      0;
}

@keyframes mvvSpin { to { transform: rotate(360deg); } }

/* ── Resultado (etapa 6) ───────────────────────────────────── */
.mvv-resultado-final { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }

.mvv-resultado-secao { padding: 24px; border: 1px solid var(--mvv-cor-borda); border-radius: var(--mvv-radius); background: #fff; }
.mvv-resultado-icone { font-size: 26px; margin-bottom: 6px; }
.mvv-resultado-titulo { font-size: 17px; font-weight: 700; color: var(--mvv-cor-primaria); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--mvv-cor-fundo); }
.mvv-resultado-texto { font-size: 16px; line-height: 1.9; color: var(--mvv-cor-texto); }

.mvv-resultado-valores-lista { display: flex; flex-direction: column; gap: 10px; }
.mvv-resultado-valor-item { padding: 12px 16px; background: var(--mvv-cor-fundo); border-radius: 6px; border-left: 4px solid var(--mvv-cor-secundaria); }
.mvv-resultado-valor-nome { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--mvv-cor-primaria); display: block; margin-bottom: 4px; }
.mvv-resultado-valor-descricao { font-size: 13px; color: var(--mvv-cor-texto-leve); margin: 0; }

.mvv-acoes-finais { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.mvv-btn-acao { text-decoration: none; }

.mvv-publicado-link { padding: 14px 18px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: var(--mvv-radius); margin-bottom: 16px; }
.mvv-publicado-link p { margin: 0 0 6px; color: #155724; font-weight: 600; }
.mvv-publicado-link a { color: #155724; font-weight: 500; }

.mvv-resultado-rodape { text-align: center; padding-top: 20px; border-top: 1px solid var(--mvv-cor-borda); margin-top: 8px; }
.mvv-resultado-rodape p { margin: 0 0 4px; font-size: 12px; color: var(--mvv-cor-texto-leve); }

/* ── Mensagem global ───────────────────────────────────────── */
.mvv-mensagem-global { display: none; margin-top: 16px; padding: 12px 16px; border-radius: var(--mvv-radius); font-size: 14px; font-weight: 500; }
.mvv-mensagem-global.sucesso { display: block; background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.mvv-mensagem-global.erro    { display: block; background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.mvv-mensagem-global.aviso   { display: block; background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

/* ── Erro de campo ─────────────────────────────────────────── */
.mvv-erro-campo { font-size: 12px; color: var(--mvv-cor-erro); margin-top: 2px; display: block; }

/* ── Página pública ────────────────────────────────────────── */
.mvv-pagina-resultado { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.mvv-pagina-cabecalho { text-align: center; margin-bottom: 48px; }
.mvv-pagina-logo { max-height: 80px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; }
.mvv-pagina-nome { font-size: 28px; font-weight: 700; color: var(--mvv-cor-primaria); margin: 0 0 6px; }
.mvv-pagina-segmento { color: var(--mvv-cor-texto-leve); font-size: 16px; margin: 0; }
.mvv-pagina-corpo { display: flex; flex-direction: column; gap: 32px; }
.mvv-pagina-secao { padding: 28px 32px; background: #fff; border: 1px solid var(--mvv-cor-borda); border-radius: var(--mvv-radius); box-shadow: var(--mvv-sombra); }
.mvv-pagina-secao-icone { font-size: 28px; margin-bottom: 8px; }
.mvv-pagina-secao-titulo { font-size: 20px; font-weight: 700; color: var(--mvv-cor-primaria); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--mvv-cor-fundo); }
.mvv-pagina-secao-texto { font-size: 17px; line-height: 1.9; color: var(--mvv-cor-texto); margin: 0; }
.mvv-pagina-valores { display: flex; flex-direction: column; gap: 12px; }
.mvv-pagina-valor-item { padding: 12px 16px; background: var(--mvv-cor-fundo); border-radius: 6px; border-left: 4px solid var(--mvv-cor-secundaria); }
.mvv-pagina-valor-nome { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--mvv-cor-primaria); display: block; }
.mvv-pagina-valor-descricao { margin: 6px 0 0; font-size: 14px; color: var(--mvv-cor-texto-leve); }
.mvv-pagina-rodape { text-align: center; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--mvv-cor-borda); color: var(--mvv-cor-texto-leve); font-size: 13px; }

/* ── Admin ─────────────────────────────────────────────────── */
.mvv-admin-wrap { max-width: 1100px; }
.mvv-admin-meta { display: flex; gap: 24px; flex-wrap: wrap; padding: 12px 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; margin-bottom: 24px; font-size: 14px; }
.mvv-admin-resultado-card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 24px 28px; margin-bottom: 24px; }
.mvv-admin-resultado-secao { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; }
.mvv-admin-resultado-secao:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mvv-admin-resultado-secao h3 { font-size: 16px; color: #1a3a5c; margin: 0 0 8px; }
.mvv-admin-resultado-acoes { display: flex; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f0f0f0; flex-wrap: wrap; }
.mvv-admin-valores-lista { margin: 0; padding: 0; list-style: none; }
.mvv-admin-valores-lista li { padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
.mvv-admin-intro { color: #666; font-size: 14px; margin-bottom: 16px; }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mvv-etapa           { padding: 18px 14px; }
    .mvv-etapa-titulo    { font-size: 17px; }
    .mvv-etapa-nome      { display: none; }
    .mvv-progresso-etapas { gap: 2px; }
    .mvv-botoes          { flex-direction: column-reverse; }
    .mvv-btn-voltar      { margin-right: 0; width: 100%; justify-content: center; }
    .mvv-btn-primario,
    .mvv-btn-secundario  { width: 100%; justify-content: center; }
    .mvv-acoes-finais    { flex-direction: column; }
    .mvv-btn-acao        { width: 100%; justify-content: center; text-align: center; }
    .mvv-valores-cards   { grid-template-columns: 1fr; }
    .mvv-pagina-secao    { padding: 18px 16px; }
    .mvv-sugestao-bloco  { padding: 16px; }
}
/* ── Reset e variáveis ─────────────────────────────────────── */
#mvv-wizard-container,
.mvv-pagina-resultado {
    --mvv-cor-primaria:  #1a3a5c;
    --mvv-cor-secundaria: #2d7dd2;
    --mvv-cor-sucesso:   #27ae60;
    --mvv-cor-aviso:     #e67e22;
    --mvv-cor-erro:      #c0392b;
    --mvv-cor-fundo:     #f8f9fa;
    --mvv-cor-borda:     #dee2e6;
    --mvv-cor-texto:     #212529;
    --mvv-cor-texto-leve: #6c757d;
    --mvv-radius:        8px;
    --mvv-sombra:        0 2px 12px rgba(0,0,0,.08);
    --mvv-transicao:     all .25s ease;

    box-sizing:  border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:       var(--mvv-cor-texto);
    line-height: 1.6;
}

#mvv-wizard-container *,
.mvv-pagina-resultado * {
    box-sizing: border-box;
}

/* ── Barra de progresso ────────────────────────────────────── */
.mvv-progresso-wrapper {
    margin-bottom: 32px;
}

.mvv-progresso-barra {
    height:           6px;
    background:       var(--mvv-cor-borda);
    border-radius:    3px;
    overflow:         hidden;
    margin-bottom:    12px;
}

.mvv-progresso-fill {
    height:           100%;
    background:       var(--mvv-cor-secundaria);
    border-radius:    3px;
    transition:       width .4s ease;
}

.mvv-progresso-etapas {
    display:          flex;
    justify-content:  space-between;
    gap:              4px;
}

.mvv-etapa-label {
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    flex:             1;
    font-size:        11px;
    color:            var(--mvv-cor-texto-leve);
    cursor:           default;
    transition:       var(--mvv-transicao);
}

.mvv-etapa-label.ativa {
    color: var(--mvv-cor-secundaria);
    font-weight: 600;
}

.mvv-etapa-label.concluida {
    color: var(--mvv-cor-sucesso);
}

.mvv-etapa-numero {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            28px;
    height:           28px;
    border-radius:    50%;
    background:       var(--mvv-cor-borda);
    color:            var(--mvv-cor-texto-leve);
    font-weight:      700;
    font-size:        12px;
    margin-bottom:    4px;
    transition:       var(--mvv-transicao);
}

.mvv-etapa-label.ativa .mvv-etapa-numero {
    background: var(--mvv-cor-secundaria);
    color:      #fff;
}

.mvv-etapa-label.concluida .mvv-etapa-numero {
    background: var(--mvv-cor-sucesso);
    color:      #fff;
}

.mvv-etapa-nome {
    text-align: center;
}

/* ── Etapas do wizard ──────────────────────────────────────── */
.mvv-etapa {
    display:       none;
    background:    #fff;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       32px;
    box-shadow:    var(--mvv-sombra);
    animation:     mvvFadeIn .3s ease;
}

.mvv-etapa.mvv-etapa-ativa {
    display: block;
}

@keyframes mvvFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Cabeçalho da etapa ────────────────────────────────────── */
.mvv-etapa-cabecalho {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--mvv-cor-fundo);
}

.mvv-etapa-icone {
    font-size: 32px;
    line-height: 1;
}

.mvv-etapa-titulo {
    margin:      0;
    font-size:   22px;
    font-weight: 700;
    color:       var(--mvv-cor-primaria);
}

/* ── Introdução da etapa ───────────────────────────────────── */
.mvv-etapa-intro {
    margin-bottom: 28px;
    padding:       16px 20px;
    background:    var(--mvv-cor-fundo);
    border-radius: var(--mvv-radius);
    border-left:   4px solid var(--mvv-cor-secundaria);
}

.mvv-etapa-intro p {
    margin: 0 0 10px;
    font-size: 15px;
}

.mvv-etapa-intro p:last-child {
    margin-bottom: 0;
}

.mvv-destaque-texto {
    font-style:    italic;
    color:         var(--mvv-cor-primaria);
    font-size:     16px !important;
    border-left:   none !important;
    padding-left:  0 !important;
}

/* ── Formulário ────────────────────────────────────────────── */
.mvv-formulario {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.mvv-campo-grupo {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.mvv-label {
    font-weight: 600;
    font-size:   15px;
    color:       var(--mvv-cor-texto);
}

.mvv-obrigatorio {
    color: var(--mvv-cor-erro);
    margin-left: 2px;
}

.mvv-campo-dica {
    margin:    0;
    font-size: 13px;
    color:     var(--mvv-cor-texto-leve);
    line-height: 1.5;
}

.mvv-input,
.mvv-textarea {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    font-size:     15px;
    color:         var(--mvv-cor-texto);
    background:    #fff;
    transition:    var(--mvv-transicao);
    resize:        vertical;
    font-family:   inherit;
    line-height:   1.6;
}

.mvv-input:focus,
.mvv-textarea:focus {
    outline:      none;
    border-color: var(--mvv-cor-secundaria);
    box-shadow:   0 0 0 3px rgba(45,125,210,.15);
}

.mvv-input.mvv-campo-invalido,
.mvv-textarea.mvv-campo-invalido {
    border-color: var(--mvv-cor-erro);
    box-shadow:   0 0 0 3px rgba(192,57,43,.12);
}

.mvv-textarea-destaque {
    border-color:  var(--mvv-cor-primaria);
    background:    #f0f5fb;
    font-size:     16px;
    font-weight:   500;
}

.mvv-contador {
    font-size:  11px;
    color:      var(--mvv-cor-texto-leve);
    align-self: flex-end;
    margin-top: -4px;
}

.mvv-contador.mvv-contador-limite {
    color: var(--mvv-cor-erro);
    font-weight: 700;
}

/* ── Tags de sugestão ──────────────────────────────────────── */
.mvv-tags-sugestao {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-bottom: 8px;
}

.mvv-tag {
    padding:       5px 12px;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: 20px;
    background:    #fff;
    color:         var(--mvv-cor-texto);
    font-size:     13px;
    cursor:        pointer;
    transition:    var(--mvv-transicao);
    font-family:   inherit;
}

.mvv-tag:hover {
    border-color: var(--mvv-cor-secundaria);
    color:        var(--mvv-cor-secundaria);
}

.mvv-tag.selecionada {
    background:   var(--mvv-cor-secundaria);
    border-color: var(--mvv-cor-secundaria);
    color:        #fff;
}

/* ── Botões ────────────────────────────────────────────────── */
.mvv-botoes {
    display:         flex;
    justify-content: flex-end;
    gap:             12px;
    margin-top:      8px;
    padding-top:     20px;
    border-top:      1px solid var(--mvv-cor-fundo);
}

.mvv-btn {
    padding:       11px 24px;
    border-radius: var(--mvv-radius);
    font-size:     15px;
    font-weight:   600;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    var(--mvv-transicao);
    font-family:   inherit;
    line-height:   1;
}

.mvv-btn-primario {
    background:   var(--mvv-cor-secundaria);
    color:        #fff;
    border-color: var(--mvv-cor-secundaria);
}

.mvv-btn-primario:hover:not(:disabled) {
    background:   var(--mvv-cor-primaria);
    border-color: var(--mvv-cor-primaria);
}

.mvv-btn-secundario {
    background:   transparent;
    color:        var(--mvv-cor-secundaria);
    border-color: var(--mvv-cor-secundaria);
}

.mvv-btn-secundario:hover:not(:disabled) {
    background: var(--mvv-cor-secundaria);
    color:      #fff;
}

.mvv-btn-terciario {
    background:   transparent;
    color:        var(--mvv-cor-texto-leve);
    border-color: var(--mvv-cor-borda);
}

.mvv-btn-terciario:hover:not(:disabled) {
    border-color: var(--mvv-cor-texto-leve);
    color:        var(--mvv-cor-texto);
}

.mvv-btn-voltar {
    background:   transparent;
    color:        var(--mvv-cor-texto-leve);
    border-color: var(--mvv-cor-borda);
    margin-right: auto;
}

.mvv-btn-voltar:hover {
    color:        var(--mvv-cor-texto);
    border-color: var(--mvv-cor-texto-leve);
}

.mvv-btn:disabled,
.mvv-btn.carregando {
    opacity: .6;
    cursor:  not-allowed;
}

/* ── Bloco de sugestão ─────────────────────────────────────── */
.mvv-sugestao-bloco {
    background:    var(--mvv-cor-fundo);
    border:        1.5px dashed var(--mvv-cor-secundaria);
    border-radius: var(--mvv-radius);
    padding:       20px 24px;
    display:       flex;
    flex-direction: column;
    gap:           12px;
}

.mvv-sugestao-titulo {
    font-weight: 700;
    font-size:   15px;
    color:       var(--mvv-cor-primaria);
}

.mvv-sugestao-aviso {
    margin:    0;
    font-size: 13px;
    color:     var(--mvv-cor-texto-leve);
}

/* ── Cards de valores ──────────────────────────────────────── */
.mvv-valores-cards {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   16px;
    margin-top:            16px;
}

.mvv-valor-card {
    background:    #fff;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       16px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
    transition:    var(--mvv-transicao);
}

.mvv-valor-card.selecionado {
    border-color: var(--mvv-cor-secundaria);
    background:   #f0f5fb;
    box-shadow:   0 0 0 3px rgba(45,125,210,.1);
}

.mvv-valor-card-nome {
    font-weight:  700;
    font-size:    15px;
    color:        var(--mvv-cor-primaria);
    display:      flex;
    align-items:  center;
    gap:          8px;
}

.mvv-valor-card-nome input[type="checkbox"] {
    width:  18px;
    height: 18px;
    accent-color: var(--mvv-cor-secundaria);
    cursor: pointer;
}

.mvv-valor-card textarea {
    width:      100%;
    padding:    8px 10px;
    border:     1px solid var(--mvv-cor-borda);
    border-radius: 6px;
    font-size:  13px;
    resize:     vertical;
    font-family: inherit;
    line-height: 1.5;
    min-height: 60px;
}

.mvv-valor-card textarea:focus {
    outline:      none;
    border-color: var(--mvv-cor-secundaria);
}

/* ── Mensagem global ───────────────────────────────────────── */
.mvv-mensagem-global {
    margin-top:    16px;
    padding:       12px 16px;
    border-radius: var(--mvv-radius);
    font-size:     14px;
    display:       none;
}

.mvv-mensagem-global.sucesso {
    background:   #d4edda;
    color:        #155724;
    border:       1px solid #c3e6cb;
    display:      block;
}

.mvv-mensagem-global.erro {
    background:   #f8d7da;
    color:        #721c24;
    border:       1px solid #f5c6cb;
    display:      block;
}

.mvv-mensagem-global.aviso {
    background:   #fff3cd;
    color:        #856404;
    border:       1px solid #ffeeba;
    display:      block;
}

/* ── Erro de campo individual ──────────────────────────────── */
.mvv-erro-campo {
    font-size:  12px;
    color:      var(--mvv-cor-erro);
    margin-top: -4px;
}

/* ── Revisão (etapa 5) ─────────────────────────────────────── */
.mvv-revisao-container {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  24px;
}

.mvv-revisao-bloco {
    background:    var(--mvv-cor-fundo);
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       16px 20px;
}

.mvv-revisao-label {
    font-weight:   700;
    font-size:     14px;
    color:         var(--mvv-cor-primaria);
    margin-bottom: 8px;
    display:       flex;
    align-items:   center;
    gap:           12px;
}

.mvv-btn-editar-revisao {
    padding:       3px 10px;
    font-size:     12px;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: 4px;
    background:    #fff;
    cursor:        pointer;
    color:         var(--mvv-cor-texto-leve);
    transition:    var(--mvv-transicao);
    font-family:   inherit;
    margin-left:   auto;
}

.mvv-btn-editar-revisao:hover {
    border-color: var(--mvv-cor-secundaria);
    color:        var(--mvv-cor-secundaria);
}

.mvv-revisao-conteudo {
    font-size:   15px;
    color:       var(--mvv-cor-texto);
    line-height: 1.7;
}

/* ── Checklist de validação ────────────────────────────────── */
.mvv-checklist {
    background:    #fff;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       20px 24px;
    margin-bottom: 24px;
}

.mvv-checklist-titulo {
    margin:        0 0 12px;
    font-size:     16px;
    color:         var(--mvv-cor-primaria);
}

.mvv-checklist-itens {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.mvv-checklist-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       10px 14px;
    border-radius: 6px;
    font-size:     14px;
}

.mvv-checklist-item.ok {
    background: #d4edda;
    color:      #155724;
    border:     1px solid #c3e6cb;
}

.mvv-checklist-item.aviso {
    background: #fff3cd;
    color:      #856404;
    border:     1px solid #ffeeba;
}

.mvv-checklist-item.erro {
    background: #f8d7da;
    color:      #721c24;
    border:     1px solid #f5c6cb;
}

.mvv-checklist-icone {
    font-size:   16px;
    flex-shrink: 0;
    margin-top:  1px;
}

.mvv-checklist-carregando {
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       var(--mvv-cor-texto-leve);
    font-size:   14px;
}

/* ── Spinner ───────────────────────────────────────────────── */
.mvv-spinner {
    display:         inline-block;
    width:           18px;
    height:          18px;
    border:          3px solid var(--mvv-cor-borda);
    border-top-color: var(--mvv-cor-secundaria);
    border-radius:   50%;
    animation:       mvvSpin .8s linear infinite;
}

@keyframes mvvSpin {
    to { transform: rotate(360deg); }
}

/* ── Resultado final (etapa 6) ─────────────────────────────── */
.mvv-resultado-final {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin-bottom:  28px;
}

.mvv-resultado-secao {
    padding:       24px;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    background:    #fff;
    position:      relative;
}

.mvv-resultado-icone {
    font-size:     28px;
    margin-bottom: 8px;
}

.mvv-resultado-titulo {
    font-size:     17px;
    font-weight:   700;
    color:         var(--mvv-cor-primaria);
    margin:        0 0 12px;
}

.mvv-resultado-texto {
    font-size:   16px;
    line-height: 1.8;
    color:       var(--mvv-cor-texto);
}

.mvv-resultado-valores-lista {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.mvv-resultado-valor-item {
    padding:       10px 14px;
    background:    var(--mvv-cor-fundo);
    border-radius: 6px;
    border-left:   4px solid var(--mvv-cor-secundaria);
}

.mvv-resultado-valor-nome {
    font-weight:   700;
    font-size:     14px;
    color:         var(--mvv-cor-primaria);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mvv-resultado-valor-descricao {
    font-size:  13px;
    color:      var(--mvv-cor-texto-leve);
    margin-top: 4px;
}

/* ── Ações finais ──────────────────────────────────────────── */
.mvv-acoes-finais {
    display:   flex;
    gap:       12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mvv-btn-acao {
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
}

.mvv-publicado-link {
    padding:       12px 16px;
    background:    #d4edda;
    border-radius: var(--mvv-radius);
    border:        1px solid #c3e6cb;
    margin-bottom: 16px;
}

.mvv-publicado-link p {
    margin: 0 0 6px;
    color: #155724;
    font-weight: 600;
}

.mvv-publicado-link a {
    color: #155724;
}

.mvv-resultado-rodape {
    text-align: center;
    padding-top: 20px;
    border-top:  1px solid var(--mvv-cor-fundo);
}

.mvv-resultado-rodape p {
    margin:    0 0 4px;
    font-size: 12px;
    color:     var(--mvv-cor-texto-leve);
}

/* ── Página pública de resultado ───────────────────────────── */
.mvv-pagina-resultado {
    max-width:  760px;
    margin:     0 auto;
    padding:    40px 20px;
}

.mvv-pagina-cabecalho {
    text-align:    center;
    margin-bottom: 48px;
}

.mvv-pagina-logo {
    max-height:    80px;
    margin-bottom: 20px;
}

.mvv-pagina-nome {
    font-size:   28px;
    font-weight: 700;
    color:       var(--mvv-cor-primaria);
    margin:      0 0 6px;
}

.mvv-pagina-segmento {
    color:     var(--mvv-cor-texto-leve);
    font-size: 16px;
    margin:    0;
}

.mvv-pagina-corpo {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

.mvv-pagina-secao {
    padding:       28px 32px;
    background:    #fff;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    box-shadow:    var(--mvv-sombra);
}

.mvv-pagina-secao-icone {
    font-size:     28px;
    margin-bottom: 8px;
}

.mvv-pagina-secao-titulo {
    font-size:     20px;
    font-weight:   700;
    color:         var(--mvv-cor-primaria);
    margin:        0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mvv-cor-fundo);
}

.mvv-pagina-secao-texto {
    font-size:   17px;
    line-height: 1.9;
    color:       var(--mvv-cor-texto);
    margin:      0;
}

.mvv-pagina-valores {
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.mvv-pagina-valor-item {
    padding:       12px 16px;
    background:    var(--mvv-cor-fundo);
    border-radius: 6px;
    border-left:   4px solid var(--mvv-cor-secundaria);
}

.mvv-pagina-valor-nome {
    font-weight:    700;
    font-size:      14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--mvv-cor-primaria);
    display:        block;
}

.mvv-pagina-valor-descricao {
    margin:    6px 0 0;
    font-size: 14px;
    color:     var(--mvv-cor-texto-leve);
}

.mvv-pagina-rodape {
    text-align:  center;
    margin-top:  48px;
    padding-top: 20px;
    border-top:  1px solid var(--mvv-cor-borda);
    color:       var(--mvv-cor-texto-leve);
    font-size:   13px;
}

/* ── Admin styles ──────────────────────────────────────────── */
.mvv-admin-wrap {
    max-width: 1100px;
}

.mvv-admin-meta {
    display:   flex;
    gap:       24px;
    flex-wrap: wrap;
    padding:   12px 16px;
    background: #f8f9fa;
    border:    1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 14px;
}

.mvv-admin-resultado-card {
    background:    #fff;
    border:        1px solid #dee2e6;
    border-radius: 8px;
    padding:       24px 28px;
    margin-bottom: 24px;
}

.mvv-admin-resultado-secao {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.mvv-admin-resultado-secao:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.mvv-admin-resultado-secao h3 {
    font-size:     16px;
    color:         #1a3a5c;
    margin:        0 0 8px;
}

.mvv-admin-resultado-acoes {
    display:    flex;
    gap:        12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    flex-wrap:  wrap;
}

.mvv-admin-valores-lista {
    margin:  0;
    padding: 0;
    list-style: none;
}

.mvv-admin-valores-lista li {
    padding:    6px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size:  14px;
}

.mvv-admin-intro {
    color:     #666;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mvv-etapa {
        padding: 20px 16px;
    }

    .mvv-etapa-titulo {
        font-size: 18px;
    }

    .mvv-progresso-etapas {
        gap: 2px;
    }

    .mvv-etapa-nome {
        display: none;
    }

    .mvv-botoes {
        flex-direction: column-reverse;
    }

    .mvv-btn-voltar {
        margin-right: 0;
    }

    .mvv-acoes-finais {
        flex-direction: column;
    }

    .mvv-valores-cards {
        grid-template-columns: 1fr;
    }

    .mvv-pagina-secao {
        padding: 20px;
    }
}

/* ── Etapa ativo/inativo ────────────────────────────────────── */
.mvv-etapa {
    display:       none;
    background:    #fff;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       28px 32px;
    box-shadow:    var(--mvv-sombra);
    margin-bottom: 24px;
    animation:     mvvFadeIn .3s ease;
}

.mvv-etapa.mvv-etapa-ativa {
    display: block;
}

@keyframes mvvFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Cabeçalho de etapa ────────────────────────────────────── */
.mvv-etapa-cabecalho {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--mvv-cor-fundo);
}

.mvv-etapa-icone {
    font-size: 28px;
    line-height: 1;
}

.mvv-etapa-titulo {
    font-size:   20px;
    font-weight: 700;
    color:       var(--mvv-cor-primaria);
    margin:      0;
}

/* ── Introdução de etapa ───────────────────────────────────── */
.mvv-etapa-intro {
    margin-bottom: 28px;
}

.mvv-etapa-intro p {
    margin-bottom: 12px;
    font-size:     15px;
    line-height:   1.8;
    color:         var(--mvv-cor-texto);
}

.mvv-etapa-intro p:last-child {
    margin-bottom: 0;
}

.mvv-destaque-texto {
    background:    #f0f5fb;
    border-left:   4px solid var(--mvv-cor-secundaria);
    padding:       12px 16px;
    border-radius: 0 var(--mvv-radius) var(--mvv-radius) 0;
    font-style:    italic;
    color:         var(--mvv-cor-primaria) !important;
    font-size:     15px !important;
}

/* ── Exemplo do livro ──────────────────────────────────────── */
.mvv-exemplo-livro {
    background:    #f9f9f9;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       14px 18px;
    font-size:     14px;
    margin-top:    16px;
    color:         var(--mvv-cor-texto);
}

.mvv-exemplo-livro ul {
    margin:      8px 0 0 20px;
    padding:     0;
}

.mvv-exemplo-livro ul li {
    margin-bottom: 4px;
}

/* ── Campos de formulário ──────────────────────────────────── */
.mvv-formulario {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

.mvv-campo-grupo {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.mvv-label {
    font-size:   14px;
    font-weight: 700;
    color:       var(--mvv-cor-texto);
    line-height: 1.5;
}

.mvv-obrigatorio {
    color:      var(--mvv-cor-erro);
    margin-left: 2px;
}

.mvv-campo-dica {
    font-size:  13px;
    color:      var(--mvv-cor-texto-leve);
    line-height: 1.6;
    margin:     0;
}

.mvv-input,
.mvv-textarea {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    font-size:     14px;
    font-family:   inherit;
    color:         var(--mvv-cor-texto);
    background:    #fff;
    transition:    var(--mvv-transicao);
    line-height:   1.6;
}

.mvv-input:focus,
.mvv-textarea:focus {
    outline:      none;
    border-color: var(--mvv-cor-secundaria);
    box-shadow:   0 0 0 3px rgba(45,125,210,.12);
}

.mvv-input.mvv-campo-invalido,
.mvv-textarea.mvv-campo-invalido {
    border-color: var(--mvv-cor-erro);
    box-shadow:   0 0 0 3px rgba(192,57,43,.1);
}

.mvv-textarea {
    resize:     vertical;
    min-height: 80px;
}

.mvv-textarea-destaque {
    border-color: var(--mvv-cor-secundaria);
    background:   #f8fbff;
    font-size:    15px;
    min-height:   100px;
}

/* ── Contador de caracteres ────────────────────────────────── */
.mvv-contador {
    font-size:  11px;
    color:      var(--mvv-cor-texto-leve);
    text-align: right;
    margin-top: -2px;
}

.mvv-contador.mvv-contador-limite {
    color:       var(--mvv-cor-aviso);
    font-weight: 600;
}

/* ── Tags clicáveis ────────────────────────────────────────── */
.mvv-tags-sugestao {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin:    4px 0 8px;
}

.mvv-tag {
    padding:       6px 12px;
    font-size:     13px;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: 20px;
    background:    #fff;
    color:         var(--mvv-cor-texto);
    cursor:        pointer;
    transition:    var(--mvv-transicao);
    font-family:   inherit;
    line-height:   1;
}

.mvv-tag:hover {
    border-color: var(--mvv-cor-secundaria);
    color:        var(--mvv-cor-secundaria);
}

.mvv-tag.selecionada {
    background:   var(--mvv-cor-secundaria);
    border-color: var(--mvv-cor-secundaria);
    color:        #fff;
}

/* ── Botões ────────────────────────────────────────────────── */
.mvv-botoes {
    display:     flex;
    align-items: center;
    gap:         12px;
    flex-wrap:   wrap;
    padding-top: 8px;
}

.mvv-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    padding:       10px 22px;
    font-size:     14px;
    font-weight:   600;
    border:        2px solid transparent;
    border-radius: var(--mvv-radius);
    cursor:        pointer;
    font-family:   inherit;
    transition:    var(--mvv-transicao);
    text-decoration: none;
    line-height:   1;
    white-space:   nowrap;
}

.mvv-btn:focus {
    outline: 3px solid var(--mvv-cor-secundaria);
    outline-offset: 2px;
}

.mvv-btn-primario {
    background:   var(--mvv-cor-primaria);
    color:        #fff;
    border-color: var(--mvv-cor-primaria);
}

.mvv-btn-primario:hover:not(:disabled) {
    background:   var(--mvv-cor-secundaria);
    border-color: var(--mvv-cor-secundaria);
    color:        #fff;
}

.mvv-btn-secundario {
    background:   transparent;
    color:        var(--mvv-cor-secundaria);
    border-color: var(--mvv-cor-secundaria);
}

.mvv-btn-secundario:hover:not(:disabled) {
    background: var(--mvv-cor-secundaria);
    color:      #fff;
}

.mvv-btn-terciario {
    background:   transparent;
    color:        var(--mvv-cor-texto-leve);
    border-color: var(--mvv-cor-borda);
}

.mvv-btn-terciario:hover:not(:disabled) {
    border-color: var(--mvv-cor-texto-leve);
    color:        var(--mvv-cor-texto);
}

.mvv-btn-voltar {
    background:   transparent;
    color:        var(--mvv-cor-texto-leve);
    border-color: var(--mvv-cor-borda);
    margin-right: auto;
}

.mvv-btn-voltar:hover {
    color:        var(--mvv-cor-texto);
    border-color: var(--mvv-cor-texto-leve);
}

.mvv-btn:disabled,
.mvv-btn.carregando {
    opacity: .6;
    cursor:  not-allowed;
}

/* ── Sugestão ──────────────────────────────────────────────── */
.mvv-sugestao-bloco {
    background:     #f5f9ff;
    border:         1.5px dashed var(--mvv-cor-secundaria);
    border-radius:  var(--mvv-radius);
    padding:        20px 24px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.mvv-sugestao-titulo {
    font-weight: 700;
    font-size:   15px;
    color:       var(--mvv-cor-primaria);
}

.mvv-sugestao-aviso {
    margin:    0;
    font-size: 13px;
    color:     var(--mvv-cor-texto-leve);
    line-height: 1.6;
}

.mvv-sugestao-resultado {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     8px;
}

/* ── Dica de validação ─────────────────────────────────────── */
.mvv-missao-dica-validacao {
    background:    #f0f8f0;
    border:        1px solid #c3e6cb;
    border-radius: var(--mvv-radius);
    padding:       14px 18px;
    font-size:     13px;
}

.mvv-missao-dica-validacao p {
    margin: 0 0 8px;
    font-weight: 600;
    color: #155724;
}

.mvv-missao-dica-validacao ul {
    margin:      0;
    padding-left: 20px;
}

.mvv-missao-dica-validacao ul li {
    margin-bottom: 4px;
    color: #155724;
}

/* ── Instrução de valores ──────────────────────────────────── */
.mvv-instrucao-valores {
    font-size:  13px;
    color:      var(--mvv-cor-texto-leve);
    font-style: italic;
    margin:     0 0 8px;
}

/* ── Cards de valores ──────────────────────────────────────── */
.mvv-valores-cards {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
    gap:                   14px;
    margin-top:            16px;
}

.mvv-valor-card {
    background:    #fff;
    border:        1.5px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       14px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
    transition:    var(--mvv-transicao);
}

.mvv-valor-card.selecionado {
    border-color: var(--mvv-cor-secundaria);
    background:   #f0f5fb;
    box-shadow:   0 0 0 3px rgba(45,125,210,.1);
}

.mvv-valor-card-nome {
    font-weight:  700;
    font-size:    14px;
    color:        var(--mvv-cor-primaria);
    display:      flex;
    align-items:  center;
    gap:          8px;
    cursor:       pointer;
}

.mvv-valor-card-check {
    width:        18px;
    height:       18px;
    cursor:       pointer;
    accent-color: var(--mvv-cor-secundaria);
    flex-shrink:  0;
}

.mvv-valor-card-descricao {
    width:        100%;
    padding:      8px 10px;
    border:       1px solid var(--mvv-cor-borda);
    border-radius: 6px;
    font-size:    13px;
    font-family:  inherit;
    resize:       vertical;
    line-height:  1.5;
    min-height:   60px;
    background:   #fff;
    color:        var(--mvv-cor-texto);
}

.mvv-valor-card-descricao:focus {
    outline:      none;
    border-color: var(--mvv-cor-secundaria);
}

.mvv-valor-card-descricao:disabled {
    background: #f9f9f9;
    color:      #aaa;
}

/* ── Orientação final ──────────────────────────────────────── */
.mvv-orientacao-final {
    background:    #fff8f0;
    border:        1px solid #ffd580;
    border-radius: var(--mvv-radius);
    padding:       16px 20px;
    margin-bottom: 20px;
    font-size:     14px;
    color:         #7a5c00;
}

.mvv-orientacao-final p {
    margin: 0 0 8px;
}

.mvv-orientacao-final p:last-child {
    margin-bottom: 0;
}

/* ── Carregando texto ──────────────────────────────────────── */
.mvv-carregando-texto {
    color:      var(--mvv-cor-texto-leve);
    font-style: italic;
    font-size:  14px;
}

/* ── Etapa label número ────────────────────────────────────── */
.mvv-etapa-numero {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    border-radius:   50%;
    background:      var(--mvv-cor-borda);
    color:           var(--mvv-cor-texto-leve);
    font-size:       12px;
    font-weight:     700;
    margin-bottom:   4px;
}

.mvv-etapa-label.ativa .mvv-etapa-numero {
    background: var(--mvv-cor-secundaria);
    color:      #fff;
}

.mvv-etapa-label.concluida .mvv-etapa-numero {
    background: var(--mvv-cor-sucesso);
    color:      #fff;
}

.mvv-etapa-nome {
    font-size: 10px;
}

/* ── Mensagem global ───────────────────────────────────────── */
.mvv-mensagem-global {
    display:       none;
    margin-top:    16px;
    padding:       12px 16px;
    border-radius: var(--mvv-radius);
    font-size:     14px;
    font-weight:   500;
}

.mvv-mensagem-global.sucesso {
    display:    block;
    background: #d4edda;
    color:      #155724;
    border:     1px solid #c3e6cb;
}

.mvv-mensagem-global.erro {
    display:    block;
    background: #f8d7da;
    color:      #721c24;
    border:     1px solid #f5c6cb;
}

.mvv-mensagem-global.aviso {
    display:    block;
    background: #fff3cd;
    color:      #856404;
    border:     1px solid #ffeeba;
}

/* ── Erro de campo individual ──────────────────────────────── */
.mvv-erro-campo {
    font-size:  12px;
    color:      var(--mvv-cor-erro);
    margin-top: 2px;
}

/* ── Revisão (etapa 5) ─────────────────────────────────────── */
.mvv-revisao-container {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin-bottom:  24px;
}

.mvv-revisao-bloco {
    background:    var(--mvv-cor-fundo);
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       16px 20px;
}

.mvv-revisao-label {
    font-weight:   700;
    font-size:     14px;
    color:         var(--mvv-cor-primaria);
    margin-bottom: 10px;
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.mvv-btn-editar-revisao {
    padding:       4px 10px;
    font-size:     12px;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: 4px;
    background:    #fff;
    cursor:        pointer;
    color:         var(--mvv-cor-texto-leve);
    transition:    var(--mvv-transicao);
    font-family:   inherit;
    margin-left:   auto;
}

.mvv-btn-editar-revisao:hover {
    border-color: var(--mvv-cor-secundaria);
    color:        var(--mvv-cor-secundaria);
}

.mvv-revisao-conteudo {
    font-size:   14px;
    color:       var(--mvv-cor-texto);
    line-height: 1.7;
}

/* ── Checklist ─────────────────────────────────────────────── */
.mvv-checklist {
    background:    #fff;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    padding:       20px 24px;
    margin-bottom: 24px;
}

.mvv-checklist-titulo {
    font-size:     16px;
    font-weight:   700;
    color:         var(--mvv-cor-primaria);
    margin:        0 0 8px;
}

.mvv-checklist-itens {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-top:     12px;
}

.mvv-checklist-item {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       10px 14px;
    border-radius: 6px;
    font-size:     13px;
    line-height:   1.6;
}

.mvv-checklist-item.ok {
    background: #d4edda;
    color:      #155724;
    border:     1px solid #c3e6cb;
}

.mvv-checklist-item.aviso {
    background: #fff3cd;
    color:      #856404;
    border:     1px solid #ffeeba;
}

.mvv-checklist-item.erro {
    background: #f8d7da;
    color:      #721c24;
    border:     1px solid #f5c6cb;
}

.mvv-checklist-icone {
    font-size:   16px;
    flex-shrink: 0;
    margin-top:  1px;
}

.mvv-checklist-carregando {
    display:     flex;
    align-items: center;
    gap:         10px;
    color:       var(--mvv-cor-texto-leve);
    font-size:   14px;
    padding:     10px 0;
}

/* ── Spinner ───────────────────────────────────────────────── */
.mvv-spinner {
    display:         inline-block;
    width:           18px;
    height:          18px;
    border:          3px solid var(--mvv-cor-borda);
    border-top-color: var(--mvv-cor-secundaria);
    border-radius:   50%;
    animation:       mvvSpin .8s linear infinite;
    flex-shrink:     0;
}

@keyframes mvvSpin {
    to { transform: rotate(360deg); }
}

/* ── Resultado final (etapa 6) ─────────────────────────────── */
.mvv-resultado-final {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  24px;
}

.mvv-resultado-secao {
    padding:       24px;
    border:        1px solid var(--mvv-cor-borda);
    border-radius: var(--mvv-radius);
    background:    #fff;
}

.mvv-resultado-icone {
    font-size:     26px;
    margin-bottom: 6px;
}

.mvv-resultado-titulo {
    font-size:     17px;
    font-weight:   700;
    color:         var(--mvv-cor-primaria);
    margin:        0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--mvv-cor-fundo);
}

.mvv-resultado-texto {
    font-size:   16px;
    line-height: 1.9;
    color:       var(--mvv-cor-texto);
}

.mvv-resultado-valores-lista {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.mvv-resultado-valor-item {
    padding:       12px 16px;
    background:    var(--mvv-cor-fundo);
    border-radius: 6px;
    border-left:   4px solid var(--mvv-cor-secundaria);
}

.mvv-resultado-valor-nome {
    font-weight:    700;
    font-size:      13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:          var(--mvv-cor-primaria);
    display:        block;
    margin-bottom:  4px;
}

.mvv-resultado-valor-descricao {
    font-size:  13px;
    color:      var(--mvv-cor-texto-leve);
    margin:     0;
}

/* ── Ações finais ──────────────────────────────────────────── */
.mvv-acoes-finais {
    display:       flex;
    gap:           12px;
    flex-wrap:     wrap;
    margin-bottom: 16px;
}

.mvv-btn-acao {
    text-decoration: none;
}

.mvv-publicado-link {
    padding:       14px 18px;
    background:    #d4edda;
    border:        1px solid #c3e6cb;
    border-radius: var(--mvv-radius);
    margin-bottom: 16px;
}

.mvv-publicado-link p {
    margin:      0 0 6px;
    color:       #155724;
    font-weight: 600;
}

.mvv-publicado-link a {
    color:       #155724;
    font-weight: 500;
}

.mvv-resultado-rodape {
    text-align:  center;
    padding-top: 20px;
    border-top:  1px solid var(--mvv-cor-borda);
    margin-top:  8px;
}

.mvv-resultado-rodape p {
    margin:    0 0 4px;
    font-size: 12px;
    color:     var(--mvv-cor-texto-leve);
}

/* ── Responsivo mobile ─────────────────────────────────────── */
@media ( max-width: 640px ) {

    .mvv-etapa {
        padding: 18px 14px;
    }

    .mvv-etapa-titulo {
        font-size: 17px;
    }

    .mvv-etapa-nome {
        display: none;
    }

    .mvv-progresso-etapas {
        gap: 2px;
    }

    .mvv-botoes {
        flex-direction: column-reverse;
    }

    .mvv-btn-voltar {
        margin-right: 0;
        width:        100%;
        justify-content: center;
    }

    .mvv-btn-primario,
    .mvv-btn-secundario {
        width:          100%;
        justify-content: center;
    }

    .mvv-acoes-finais {
        flex-direction: column;
    }

    .mvv-btn-acao {
        width:          100%;
        justify-content: center;
        text-align:     center;
    }

    .mvv-valores-cards {
        grid-template-columns: 1fr;
    }

    .mvv-pagina-secao {
        padding: 18px 16px;
    }

    .mvv-sugestao-bloco {
        padding: 16px;
    }
}