/* =====================================================
   Ajustes do módulo Redação Nota 10.

   O desenho é o do site antigo (assets/css/style.css, copiado sem
   alteração). Aqui ficam só duas coisas:

   1. as cores fixas do CSS original passam a ler as variáveis que o layout
      publica, para o editor poder trocá-las;
   2. o que o site antigo não tinha — o formulário em etapas em PHP e as
      faixas dos blocos livres.
   ===================================================== */

/* ---------- Cores por variável ----------
   O style.css original tem #2C5543 escrito em ~17 lugares. Em vez de mexer
   naquele arquivo (que é a referência do desenho), estas regras vêm depois e
   trocam a origem da cor. O valor de reserva é o mesmo de lá, então sem
   editor nada muda. */

.text-verde                        { color: var(--red-principal, #2C5543); }
.text-verde-agua                   { color: var(--red-destaque, #00FFDD); }
section h2                         { color: var(--red-principal, #2C5543); }

.btn-verde {
    background-color: var(--red-principal, #2C5543);
    border-color: var(--red-principal, #2C5543);
}

.btn-verde:hover,
.btn-verde:focus {
    background-color: var(--red-escura, #1D4031);
    border-color: var(--red-escura, #1D4031);
    color: #fff;
}

#home  { background: radial-gradient(var(--red-principal, #2C5543), var(--red-escura, #1D4031)); }
#prazo { background-color: var(--red-principal, #2C5543); }

.fieldset-tema legend              { color: var(--red-destaque, #00FFDD); }
.fieldset-regulamento              { border-color: var(--red-principal, #2C5543); }
.fieldset-regulamento legend       { border-color: var(--red-principal, #2C5543); color: var(--red-principal, #2C5543); }
.traco-filedset::after             { border-left-color: var(--red-principal, #2C5543); }

@media (max-width: 990px) {
    #navbarSupportedContent { background-color: var(--red-principal, #2C5543); }
}

/* ---------- Vídeo do tutorial (modal) ----------
   Estava embutido no <style> do Default.aspx; veio para cá inteiro. */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 1000px;
    height: 100% !important;
}

/* ---------- Formulário de inscrição ---------- */

.red-form {
    max-width: 900px;
    margin: 0 auto;
}

.red-form__topo {
    background: var(--red-principal, #2C5543);
    color: #fff;
    padding: 24px 0;
    text-align: center;
}

.red-form__topo img {
    width: 100%;
    max-width: 340px;
}

.red-etapa {
    font-weight: 700;
    color: var(--red-principal, #2C5543);
}

/* A trilha das etapas: um passo por bolinha, a atual preenchida. Substitui o
   breadcrumb que o site antigo montava por concatenação de HTML no VB. */
.red-trilha {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 16px 0 28px;
}

.red-trilha li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #9aa5a0;
}

.red-trilha li::before {
    content: attr(data-passo);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #cdd5d1;
    color: #9aa5a0;
}

.red-trilha li.is-atual { color: var(--red-principal, #2C5543); }

.red-trilha li.is-atual::before,
.red-trilha li.is-feito::before {
    border-color: var(--red-principal, #2C5543);
    background: var(--red-principal, #2C5543);
    color: #fff;
}

.red-trilha li.is-feito { color: var(--red-principal, #2C5543); }

/* O tracinho entre as bolinhas — some antes da primeira. */
.red-trilha li + li { padding-left: 8px; }

.red-form label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

.red-form .form-control:focus {
    border-color: var(--red-principal, #2C5543);
    box-shadow: 0 0 0 .2rem rgba(44, 85, 67, .2);
}

.red-form__acoes {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
}

.red-obrigatorio { color: #c0392b; }

/* ---------- Blocos livres ----------
   Cada bloco vira uma faixa; a cor sai do que foi escolhido no editor. */

.red-bloco {
    padding: 56px 0;
}

.red-bloco--colorido {
    background: var(--tal-bloco-fundo);
    color: var(--tal-bloco-texto);
}

.red-bloco--colorido h2,
.red-bloco--colorido h3,
.red-bloco--colorido p,
.red-bloco--colorido li {
    color: var(--tal-bloco-texto);
}

/* ---------- Botão LOGIN do topo ----------
   Entrada da área do aluno, no canto direito do menu. Contorno branco para não
   competir com os links; preenche ao passar o mouse. */

.btn-login-site {
    display: inline-block;
    padding: 6px 22px;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.3;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}

.btn-login-site:hover,
.btn-login-site:focus {
    background: #fff;
    color: var(--red-principal, #2C5543) !important;
}

@media (max-width: 990px) {
    .btn-login-site { margin: 8px 12px 12px; }
}