/**
 * =================================================================
 * ARQUIVO: style-form.css
 * ESTILOS CSS PARA O FORMULÁRIO DE AVALIAÇÃO SENAR
 * Versão: 06.11.2025 (Correção Final: Garante VISIBILIDADE e centralização dos números 0-10 e ajusta a barra de progresso.)
 * Autor: <a href="https://wa.me/551132112882" target="_blank" rel="noopener noreferrer">Michel Lima</a>
 * =================================================================
 */

/* =================================================================
   1. ESTILOS BASE DO CONTAINER E FIELDSETS
   ================================================================= */
.senar-form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px 30px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

#senar-avaliacao-form {
    display: block;
}

.form-step {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Garante que os passos ocultos permaneçam invisíveis */
.form-step.step-hidden {
    display: none !important; 
}

/* Estilo para a legenda (título do passo) */
.form-step legend {
    font-size: 1.6em;
    font-weight: bold;
    color: #333;
    padding: 0 0 15px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #008000; /* Linha Verde SENAR */
    width: 100%;
}


/* =================================================================
   2. ESTILOS GERAIS DE CAMPO (INPUT, TEXTAREA, SELECT)
   ================================================================= */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.2s;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #008000;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.2);
}

.form-inline {
    display: flex;
    gap: 20px;
}

.form-inline .form-group {
    flex: 1;
}

.invalid-field {
    border-color: #dc3545 !important; 
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5) !important;
}


/* =================================================================
   3. ESTILOS DE RÁDIO E CHECKBOX (OPÇÕES)
   ================================================================= */
.radio-options,
.checkbox-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.radio-options input[type="radio"],
.checkbox-options input[type="checkbox"] {
    display: none;
}

.radio-options label,
.checkbox-options label {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: normal;
    text-align: center;
}

.radio-options label:hover,
.checkbox-options label:hover {
    background-color: #f0f0f0;
}

/* Estilo Padrão (Fallback) */
.radio-options input[type="radio"]:checked + label,
.checkbox-options input[type="checkbox"]:checked + label {
    background-color: #008000;
    color: white;
    border-color: #006400;
    font-weight: bold;
}

/* -----------------------------------------------------------------
   4. CORREÇÃO DE LAYOUT: RÁDIOS LADO-A-LADO (RESPONSIVIDADE - DESKTOP)
   Descrição: Define a largura para os campos que devem ocupar o espaço total em telas grandes (Desktop/Tablet).
   O empilhamento (width: 100%) é definido no MÓDULO 6.
   ----------------------------------------------------------------- */

/* Gênero (q04) - 3 opções: Lado a Lado (1/3 da largura) */
#q04_genero_options label {
    /* (100% / 3) - 10px (ajuste para o gap de 15px) */
    width: calc(33.333% - 10px) !important; 
    flex-basis: auto; 
    text-align: center; 
}

/* Perfil do Aluno (q06) - 2 opções: Lado a Lado (1/2 da largura) */
#q06_perfil_aluno_options label {
    /* (100% / 2) - 7.5px (ajuste para o gap de 15px) */
    width: calc(50% - 7.5px) !important; 
    flex-basis: auto; 
    text-align: center; 
}

/* Conhecia SENAR (q15) - 2 opções: Lado a Lado (1/2 da largura) */
.radio-options input[name="q15_conhece_senar"] + label {
    /* (100% / 2) - 7.5px (ajuste para o gap de 15px) */
    width: calc(50% - 7.5px) !important;
    flex-basis: auto; 
    text-align: center; 
}


/* -----------------------------------------------------------------
   4.1. CUSTOMIZAÇÃO: GÊNERO (q04) - Cores Específicas
   ----------------------------------------------------------------- */
.radio-options input[name="q04_genero"][value="Feminino"]:checked + label {
    background-color: #f1b2dc; /* Feminino */
    border-color: #f1b2dc;
    color: #333;
}
.radio-options input[name="q04_genero"][value="Masculino"]:checked + label {
    background-color: #73d1ea; /* Masculino */
    border-color: #73d1ea;
    color: #333;
}
.radio-options input[name="q04_genero"][value="Outro"]:checked + label {
    background-color: #8d73ea; /* Outro */
    border-color: #8d73ea;
    color: white;
}

/* -----------------------------------------------------------------
   4.2. CUSTOMIZAÇÃO: CONHECIA SENAR (q15) - Verde/Vermelho
   ----------------------------------------------------------------- */
.radio-options input[name="q15_conhece_senar"][value="Sim"]:checked + label {
    background-color: #008000; /* Cor da Nota 10 */
    border-color: #008000;
    color: white;
}

.radio-options input[name="q15_conhece_senar"][value="Não"]:checked + label {
    background-color: #F52F30; /* Cor da Nota 0 */
    border-color: #F52F30;
    color: white;
}

/* =================================================================
   5. ESCALA DE NOTAS (RATING SCALE) - PADRÃO BLOCO EM LINHA ÚNICA
   ================================================================= */

/* 5.1. Container Principal (Linha Única) */
.rating-scale {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 10px 0; 
    gap: 4px; 
    border: none;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    flex-wrap: nowrap; 
    overflow-x: auto; 
    /* Oculta a barra de scroll */
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
/* Para navegadores WebKit (Chrome, Safari) */
.rating-scale::-webkit-scrollbar {
    display: none;
}


/* 5.2. Estilo Base para Cada Opção (Bloco Quadrado) */
.rating-scale label {
    display: flex;
    width: calc((100% / 11) - 3.6px); 
    
    /* TRUQUE: Cria um bloco quadrado forçando a altura igual à largura (aspect ratio 1:1) */
    height: 0; 
    padding-bottom: calc((100% / 11) - 3.6px); 
    
    flex-shrink: 0; 

    /* CORREÇÃO DEFINITIVA: Força o texto nativo (que o JS gera) a ser 100% invisível, 
       eliminando a duplicação e garantindo que APENAS o ::before seja visível. */
    font-size: 0.8em; 
    color: transparent; 
    
    border-radius: 4px; 
    cursor: pointer;
    box-sizing: border-box;
    /* [BORDA]: Esta é a borda padrão. Altere o '3px' para mudar a espessura. */
    border: 3px solid transparent; 
    opacity: 0.5; 
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    position: relative; 
    z-index: 1;
}

/* Pseudoclasse para renderizar o número com COR e CENTRALIZAÇÃO perfeita */
.rating-scale label::before {
    content: attr(data-value); /* Pega o valor da nota (0-10) do atributo 'data-value' */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* CENTRALIZAÇÃO PERFEITA */
    
    /* [FONTE]: Altere o '1.2em' para ajustar o tamanho do número da nota (0-10) */
    font-size: 5.2em; 
    font-weight: bold;
    line-height: 1;
    
    color: white; /* Define cor branca por padrão */
}


/* 5.3. CORES INDIVIDUAIS */
.rating-scale label[data-value="0"] { background-color: #C0392B; }
.rating-scale label[data-value="1"] { background-color: #E74C3C; }
.rating-scale label[data-value="2"] { background-color: #E64A19; }
.rating-scale label[data-value="3"] { background-color: #F38734; }
.rating-scale label[data-value="4"] { background-color: #F79D3A; }
.rating-scale label[data-value="5"] { background-color: #F9C338; }
.rating-scale label[data-value="6"] { background-color: #FDEB60; }
.rating-scale label[data-value="7"] { background-color: #C2DF6E; }
.rating-scale label[data-value="8"] { background-color: #9AC959; }
.rating-scale label[data-value="9"] { background-color: #6FBB51; }
.rating-scale label[data-value="10"] { background-color: #2ECC71; }

/* CORREÇÃO: Sobreescreve a cor da fonte para as notas de fundo claro (6 e 7) */
.rating-scale label[data-value="6"]::before,
.rating-scale label[data-value="7"]::before {
    color: #333; /* Força o texto para preto/cinza nas notas de fundo claro */
}


/* 5.4. EFEITO DOCK - HOVER (Pequeno movimento) */
.rating-scale label:hover {
    opacity: 1; 
    transform: translateY(-5px) scale(1.0); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
    z-index: 10;
}


/* 5.5. ESTADO SELECIONADO (Destaque Exclusivo) */
.rating-scale label.selected {
    opacity: 1; 
    /* [BORDA]: Esta transformação (y-8px) define o quanto o quadrado "salta" ao ser selecionado. */
    transform: translateY(-8px) scale(1.0); 
    border-width: 3px; 
    /* border-style: solid; <-- REMOVIDO: Redundante, pois o 'border-width' já implica 'solid' */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); 
    z-index: 20; 
    filter: brightness(1.1); 
}

/* Garante que o item selecionado MANTENHA o destaque e anule o hover 
   (Os valores são repetidos AQUI apenas para que o transform: -8px e o box-shadow maior 
    SEMPRE prevaleçam sobre o hover padrão de -5px). */
.rating-scale label.selected:hover {
    transform: translateY(-8px) scale(1.0);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}

/* Cores de Borda do Estado Selecionado */
/* [BORDA]: Estas cores definem o realce visual da nota selecionada. */
.rating-scale label.selected[data-value="0"] { border-color: #E57373; }
.rating-scale label.selected[data-value="1"] { border-color: #EF9A9A; }
.rating-scale label.selected[data-value="2"] { border-color: #FFB74D; }
.rating-scale label.selected[data-value="3"] { border-color: #FFCD70; }
.rating-scale label.selected[data-value="4"] { border-color: #FFE082; }
.rating-scale label.selected[data-value="5"] { border-color: #FFFF8D; }
.rating-scale label.selected[data-value="6"] { border-color: #FFFFF0; } 
.rating-scale label.selected[data-value="7"] { border-color: #E6EE9C; }
.rating-scale label.selected[data-value="8"] { border-color: #C5E1A5; }
.rating-scale label.selected[data-value="9"] { border-color: #A5D6A7; }
.rating-scale label.selected[data-value="10"] { border-color: #81C784; }


/* =================================================================
   6. MÓDULO DE RESPONSIVIDADE (MEDIA QUERIES) - OTIMIZADO
   ================================================================= */

/* -----------------------------------------------------------------
   6.0. REGRAS PARA TELAS GRANDES (COMPUTADORES)
   ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
   6.1. MEDIA QUERY PARA TELAS PEQUENAS (SMARTPHONES E TABLETS - ATÉ 768PX)
   ----------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    .senar-form-container {
        padding: 15px 15px; /* Reduz o padding lateral do container em telas pequenas */
    }

    /* MÓDULO 4: Rádios e Checkboxes (Padronização para 100% de largura) */
    .radio-options,
    .checkbox-options {
        flex-direction: column; /* Força o empilhamento das opções em vez de colunas */
        gap: 8px; /* Ajusta o espaçamento vertical entre as opções */
    }

    /* Regra UNIFICADA: Aplica largura total a TODAS as labels genéricas de rádio e checkbox. */
    .radio-options label, 
    .checkbox-options label {
        width: 100% !important; /* Força largura total para todas as opções */
        flex-basis: 100% !important;
        text-align: left; /* Melhora a leitura quando empilhado */
    }
    /* NOTA: Os seletores específicos (ex: #q04_genero_options label) foram removidos, 
       pois a regra .radio-options label já cobre todas as questões de rádio. */

    /* MÓDULO 5: Escala de Notas (0-10) */
    .rating-scale {
        justify-content: flex-start; 
        /* Permite scroll horizontal se a tela for muito estreita */
    }

    .rating-scale label {
        /* Define o tamanho fixo para mobile (Mobile-First approach) */
        width: 35px;
        padding-bottom: 35px; 
        /* min-width e flex-basis removidos por serem redundantes com a propriedade 'width' */
    }
    
    /* Ajuste o tamanho da fonte no ::before para mobile */
    .rating-scale label::before {
        font-size: 1.0em; 
        /* color: white; removido, pois já está no CSS principal */
    }
    
    /* Sobreescreve a cor da fonte para as notas de fundo claro (6 e 7) em mobile */
    .rating-scale label[data-value="6"]::before,
    .rating-scale label[data-value="7"]::before {
        color: #333; 
    }
    
    /* Destaque (selected) em mobile pode ser menos intenso para preservar a tela */
    .rating-scale label.selected {
        transform: translateY(-5px) scale(1.0); 
    }
}
/* =================================================================
   7. RESPONSIVIDADE (MOBILE) - OTIMIZADO (max-width: 600px)
   ================================================================= */
@media (max-width: 600px) {
    .senar-form-container {
        padding: 15px;
        margin: 10px;
    }

    .form-inline {
        flex-direction: column; 
        gap: 0;
    }
    
    /* MÓDULO 4: Rádios e Checkboxes */
    .radio-options,
    .checkbox-options {
        flex-direction: column;
        /* Altera o gap de 8px (do 768px) para 10px */
        gap: 10px;
    }

    .radio-options label,
    .checkbox-options label {
        /* Altera o text-align: left (do 768px) para text-align: center */
        text-align: center;
        /* Propriedades como width: 100% e flex-direction: column são mantidas 
           pela regra de 768px, por isso são removidas daqui. */
    }

    .progress-bar-container {
        margin-bottom: 20px; 
    }
    
    /* MÓDULO 5: Escala de Notas (0-10) */
    
    /* Ajuste de destaque em mobile (saltos menores) */
    .rating-scale label:hover {
        transform: translateY(-3px) scale(1.0);
    }
    .rating-scale label.selected {
        transform: translateY(-5px) scale(1.0);
    }
    /* NOTA: Regras de largura, fonte (1.0em) e cores de texto (6/7) foram removidas 
       por serem idênticas ao @media 768px e são cobertas por ele. */
    
    .form-footer {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .prev-step-btn,
    .next-step-btn,
    .submit-btn {
        width: 100%;
        /* text-align: center removido por ser redundante */
    }
}

/* =================================================================
   8. ESTILOS CUSTOMIZADOS: BOTÕES BINÁRIOS (Sim/Não) - OTIMIZADO
   ================================================================= */

/* 1. Container - Força a largura total e alinhamento */
.radio-options.binary-full-width {
    display: flex; /* Mantém em linha */
    gap: 20px; /* Espaço entre Sim e Não */
    flex-wrap: wrap; /* Permite empilhar em telas pequenas */
}

/* 2. Labels - Define a aparência e garante que ocupem 50% em tela grande */
.radio-options.binary-full-width label {
    flex-grow: 1; /* Cresce para ocupar o espaço */
    /* Calcula 50% da largura, subtraindo metade do gap de cada lado */
    flex-basis: calc(50% - 10px); 
    
    text-align: center;
    padding: 15px 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    background-color: #f4f4f4; /* Cor de fundo padrão (não selecionado) */
    border: 2px solid #ccc;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 3. Efeitos Hover */
.radio-options.binary-full-width label:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* 4. Cores de Ativação (Selecionado) */

/* SIM (Verde) */
.radio-options.binary-full-width input[type="radio"][value="sim"]:checked + label {
    background-color: #2ECC71; /* Verde */
    color: white;
    border-color: #2ECC71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}

/* NÃO (Vermelho) */
.radio-options.binary-full-width input[type="radio"][value="nao"]:checked + label {
    background-color: #C0392B; /* Vermelho */
    color: white;
    border-color: #C0392B;
    box-shadow: 0 0 8px rgba(192, 57, 43, 0.7);
}


/* 5. Responsividade - Em telas menores que 600px, empilha */
@media (max-width: 600px) {
    .radio-options.binary-full-width {
        flex-direction: column; /* Empilha */
        gap: 10px;
    }

    .radio-options.binary-full-width label {
        /* CORRIGIDO: Usa width: 100% para ocupar a largura total em modo coluna */
        width: 100%; 
        /* flex-basis: 100% REMOVIDO por ser redundante e semanticamente incorreto para largura em coluna. */
        padding: 12px;
    }
}

/* =================================================================
   9. ESTILOS ESPECÍFICOS: Q10 (Garantia de Estilo Binário) - OTIMIZADO
   ================================================================= */
/* Seletor do Container da Q10 (ID ou classe específica) */
#q10_exemplos_praticos_options { 
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Estilo das Labels da Q10 */
#q10_exemplos_praticos_options label {
    flex-grow: 1;
    /* Ocupa 50% menos metade do gap (10px) */
    flex-basis: calc(50% - 10px); 
    
    /* Demais estilos de aparência */
    text-align: center;
    padding: 15px 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    background-color: #f4f4f4;
    border: 2px solid #ccc;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* O efeito hover é coberto pelo Módulo 8, se o HTML tiver a classe .binary-full-width. 
       Se não tiver, o hover não está aqui, mas o código segue. */
}

/* Cores de Ativação da Q10 (Garantindo o case 'Sim' e 'Não') */
/* SIM (Verde) */
#q10_exemplos_praticos_options input[type="radio"][value="Sim"]:checked + label {
    background-color: #2ECC71;
    color: white;
    border-color: #2ECC71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}

/* NÃO (Vermelho) */
#q10_exemplos_praticos_options input[type="radio"][value="Não"]:checked + label {
    background-color: #C0392B;
    color: white;
    border-color: #C0392B;
    box-shadow: 0 0 8px rgba(192, 57, 43, 0.7);
}

/* Media Query (Responsividade) para Q10 */
@media (max-width: 600px) {
    #q10_exemplos_praticos_options {
        flex-direction: column; /* Empilha */
        gap: 10px;
    }

    #q10_exemplos_praticos_options label {
        /* CORRIGIDO: Usa width: 100% para ocupar a largura total em modo coluna */
        width: 100%; 
        /* flex-basis: 100% REMOVIDO por ser redundante */
        padding: 12px;
    }
}

/* =================================================================
   10. ESTILOS DA MODAL DE SUCESSO (OVERLAY)
   ================================================================= */

/* Container Full-Screen Semitransparente (Overlay) */
#modal-success-overlay {
    position: fixed; /* Fixa na tela */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Fundo preto semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Garante que fique acima de tudo */
    backdrop-filter: blur(3px); /* Efeito de desfoque sutil (moderno) */
}

/* Conteúdo central da Modal */
.modal-success-content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    text-align: center;
    transition: transform 0.3s ease-out;
}

/* Ícone de Sucesso e Título (UNIFICADO) */
.success-icon,
.modal-success-content h3 {
    color: #2ECC71; /* Aplica o Verde do sucesso ao ícone e ao título */
    /* Garante consistência de fonte para o título */
    font-size: 1.8em;
    margin-bottom: 10px;
}

/* Estilização específica do Ícone */
.success-icon {
    font-size: 3em; /* Tamanho do ícone é maior que o título */
    display: block;
    /* margin-bottom de 10px está coberto pelo seletor unificado */
}

/* Botão de Fechar/Nova Avaliação */
.modal-close-btn {
    background-color: #007bff; /* Azul primário */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* Parágrafo */
.modal-success-content p {
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Botão de Fechar/Nova Avaliação */
.modal-close-btn {
    background-color: #007bff; /* Azul primário */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-close-btn:hover {
    background-color: #0056b3;
}
/* Parágrafo */

.modal-success-content p {
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* =================================================================
   11. AJUSTES DE LAYOUT: Q18 (Ajuste Responsivo - GAP DIMINUÍDO) - OTIMIZADO
   ================================================================= */

/* 1. COMPORTAMENTO PADRÃO (MOBILE PRIMEIRO): EMPILHADO */
#q18_como_soube_options {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Vão diminuído para mobile */
}

/* 2. COMPORTAMENTO PARA TELAS GRANDES (DESKTOP): LADO A LADO */
@media (min-width: 768px) {
    
    #q18_como_soube_options {
        flex-direction: row; 
        justify-content: space-between; 
        flex-wrap: wrap; 
        gap: 8px 4px; /* Vão vertical de 8px, Vão horizontal de 4px */
    }

    /* Distribui o espaço entre as opções (cerca de 3 por linha) */
    #q18_como_soube_options label {
        /* Define ~32% da largura para tentar caber 3 por linha */
        flex-basis: 32%; 
        /* width: auto; REMOVIDO: Redundante */
        text-align: center;
        box-sizing: border-box; 
    }
}

/* =================================================================
   12. ESTILOS: MODAL DE VALIDAÇÃO INICIAL (PASSO 0) - OTIMIZADO
   ================================================================= */

/* Container Full-Screen Semitransparente (Overlay) - Define a base de todas as modais */
.senar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adicionando o desfoque aqui para que ambas as modais o tenham */
    backdrop-filter: blur(3px); 
}

/* Conteúdo central da Modal (Aplicável a todas as modais) */
.modal-content { /* Seletor simplificado - não precisa de .senar-modal.modal-content */
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Header e Título (Simplificado) */
.modal-header h3 { /* Seletor simplificado */
    color: #007bff; /* Seu azul primário */
    font-size: 1.5em;
    margin-bottom: 10px;
}

/* Corpo (Simplificado) */
.modal-body p { /* Seletor simplificado */
    color: #555;
    line-height: 1.5;
}

/* Footer (Simplificado) */
.modal-footer { /* Seletor simplificado */
    margin-top: 20px;
}

/* =================================================================
   REGRAS EXCLUSIVAS DA MODAL DE VALIDAÇÃO (PASSO 0)
   ================================================================= */

/* Estilo para campos somente leitura (para dados pré-preenchidos) */
.form-group.read-only input {
    background-color: #f0f8ff; /* Um fundo azul claro */
    border: 1px solid #cceeff;
    cursor: not-allowed;
    color: #0056b3;
}

/* Mensagem de sucesso para dados pré-preenchidos */
.alert-success-read-only {
    background-color: #d4edda; /* Seu verde claro de sucesso */
    color: #155724; /* Texto verde escuro */
    border: 1px solid #c3e6cb;
    font-weight: bold;
    text-align: left;
}

/* =================================================================
   13. ESTILOS: BARRA DE PROGRESSO MULTI-PASSOS (Versão Final Otimizada)
   ================================================================= */
.progress-bar-container {
    margin: 20px 0 40px;
    position: relative;
    padding-top: 25px; 
    width: 100%; 
}

/* Linha de Progresso Base (O Trilho Cinza) */
.progress-bar-line {
    position: absolute;
    /* Alinhamento CRÍTICO: 40px é o centro vertical do círculo. */
    top: 40px; 
    transform: translateY(-50%); 
    
    left: 0; 
    right: 0; 
    height: 5px;
    background-color: #ddd; /* Cinza claro do trilho */
    border-radius: 5px;
    z-index: 0;
}

/* Preenchimento da Linha de Progresso (O Preenchimento Verde) */
.progress-fill {
    height: 100%;
    width: 0%; 
    background-color: #2ECC71; /* Verde SENAR */
    border-radius: 5px;
    transition: width 0.4s ease-in-out;
}

/* Container dos Indicadores de Passo */
.progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1; 
    width: 100%;
    padding: 0; 
}

/* Indicador Individual (o círculo) */
.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    text-align: center;
    cursor: default;
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
    position: relative;
    z-index: 2; /* Garante que o círculo fique acima da linha */
}

/* O Círculo do Indicador */
.step-indicator::before {
    content: attr(data-step);
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #f0f0f0; 
    color: #555;
    border: 3px solid #ddd;
    margin-bottom: 10px; 
    transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

/* Estilo para Passos ATIVOS ou CONCLUÍDOS */
.step-indicator.active::before,
.step-indicator.completed::before { 
    background-color: #2ECC71; 
    color: white;
    border-color: #2ECC71;
    transform: scale(1.1); 
}

/* Estilo para o Rótulo (label) do Passo */
.step-label {
    display: none; 
    font-size: 0.85em;
    font-weight: normal;
    margin-top: 5px;
    color: #555;
    position: absolute;
    top: 35px; 
    width: 100%;
}

/* Exibir o label no passo ativo */
.step-indicator.active .step-label {
    display: block; 
    color: #333;
    font-weight: bold;
}

/* Ajustes responsivos para telas maiores */
@media (min-width: 600px) {
    .step-indicator .step-label {
        display: block; 
    }
    .step-indicator.active .step-label {
        color: #333; 
    }
}