/* Tela pública de matrícula no curso de Primeira Habilitação. */

body.matricula {
  --amarelo-sinal: #D9B828;
  --amarelo-claro: #F3E3A0;
  --asfalto: #26292E;
  --asfalto-suave: #4A4F57;
  --faixa: #FFFFFF;
  --concreto: #F2F3F5;
  --linha: #C9CDD3;
  --erro: #B3261E;
  --erro-fundo: #FCEDEC;
  --foco: #2C4370;

  --fonte: 'Poppins', system-ui, sans-serif;
}

.matricula, .matricula *, .matricula *::before, .matricula *::after { box-sizing: border-box; }

body.matricula {
  margin: 0;
  background: var(--faixa);
  color: var(--asfalto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.matricula a { color: var(--foco); }
.matricula a:focus-visible,
.matricula input:focus-visible,
.matricula select:focus-visible,
.matricula button:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* Estrutura: painel amarelo | pista | formulário */

.matricula-pagina {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 18px 7fr;
  min-height: 100vh;
}

.matricula-painel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 40px 48px;
  background: var(--amarelo-sinal);
}

.matricula-logo img { display: block; width: 190px; height: auto; }

.matricula-painel-texto { margin: auto 0; max-width: 30rem; }

.matricula-painel h1 {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.matricula-painel-texto > p {
  margin: 0 0 28px;
  font-size: 1.125rem;
  max-width: 26rem;
}

.matricula-beneficios { list-style: none; margin: 0; padding: 0; }

.matricula-beneficios li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-top: 1px solid rgba(38, 41, 46, 0.25);
  font-weight: 500;
}

.matricula-beneficios li:last-child { border-bottom: 1px solid rgba(38, 41, 46, 0.25); }

.matricula-beneficios li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 17px;
  width: 14px;
  height: 8px;
  border-left: 3px solid var(--asfalto);
  border-bottom: 3px solid var(--asfalto);
  transform: rotate(-45deg);
}

.matricula-painel-rodape { margin: 0; font-weight: 500; }
.matricula-painel-rodape a { color: var(--asfalto); font-weight: 600; }

/* Pista: faixa de asfalto com a linha tracejada central. */
.matricula-pista {
  background:
    repeating-linear-gradient(to bottom, var(--faixa) 0 36px, transparent 36px 64px) center / 3px 100% no-repeat,
    var(--asfalto);
}

.matricula-conteudo {
  display: flex;
  justify-content: center;
  padding: 56px 48px 72px;
}

.matricula-formulario { width: 100%; max-width: 640px; }

.matricula-formulario h2 {
  margin: 0;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.1;
}

.matricula-subtitulo { margin: 4px 0 28px; color: var(--asfalto-suave); }

.matricula-aviso {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 4px solid var(--erro);
  background: var(--erro-fundo);
  color: var(--erro);
  font-weight: 500;
}

/* Formulário */

.matricula fieldset { margin: 0 0 28px; padding: 0; border: 0; }

.matricula legend {
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--asfalto);
  font-weight: 600;
  font-size: 1.375rem;
}

.matricula-grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.matricula-grade .col-12 { grid-column: span 12; }
.matricula-grade .col-8  { grid-column: span 8; }
.matricula-grade .col-7  { grid-column: span 7; }
.matricula-grade .col-6  { grid-column: span 6; }
.matricula-grade .col-5  { grid-column: span 5; }
.matricula-grade .col-4  { grid-column: span 4; }
.matricula-grade .col-2  { grid-column: span 2; }

.matricula .input label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
}

/* simple_form marca obrigatórios com <abbr>*; a tela indica só o opcional. */
.matricula .input label abbr { display: none; }

.matricula .input input,
.matricula .input select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--concreto);
  color: var(--asfalto);
  font: inherit;
  transition: border-color 0.15s, background-color 0.15s;
}

.matricula .input select { padding-right: 8px; }

.matricula .input input:focus,
.matricula .input select:focus {
  border-color: var(--asfalto);
  background: var(--faixa);
}

.matricula .input input::placeholder { color: #8A9099; }

.matricula .input .hint {
  display: block;
  margin-top: 6px;
  color: var(--asfalto-suave);
  font-size: 0.875rem;
}

.matricula .input.field_with_errors input,
.matricula .input.field_with_errors select {
  border-color: var(--erro);
  background: var(--erro-fundo);
}

.matricula .input .error {
  display: block;
  margin-top: 6px;
  color: var(--erro);
  font-size: 0.875rem;
  font-weight: 500;
}

/* O Rails também envolve campos com erro em div.field_with_errors. */
.matricula .input div.field_with_errors { display: contents; }

.matricula-cep-status {
  min-height: 1.3em;
  margin: 6px 0 0;
  color: var(--asfalto-suave);
  font-size: 0.875rem;
}

.matricula-cep-status.is-erro { color: var(--erro); }

.matricula .input input.is-buscando {
  background: var(--faixa) linear-gradient(90deg, var(--amarelo-claro), var(--amarelo-sinal), var(--amarelo-claro)) bottom / 200% 3px no-repeat;
  animation: matricula-buscando 1s linear infinite;
}

@keyframes matricula-buscando {
  from { background-position: 0% 100%; }
  to   { background-position: 200% 100%; }
}

.matricula-botao {
  width: 100%;
  height: 56px;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: var(--asfalto);
  color: var(--amarelo-sinal);
  font-weight: 700;
  font-size: 1.375rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.matricula-botao:hover { background: #000; }

.matricula-links {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 0;
  font-weight: 500;
}

/* Celular e tablet: painel vira cabeçalho e a pista fica horizontal. */
@media (max-width: 900px) {
  .matricula-pagina { grid-template-columns: 1fr; grid-template-rows: auto 14px auto; }

  .matricula-painel { position: static; height: auto; padding: 24px 16px 28px; }
  .matricula-logo img { width: 150px; }
  .matricula-painel-texto { margin: 28px 0 0; }
  .matricula-painel h1 { font-size: 2.5rem; }
  .matricula-painel-texto > p { margin-bottom: 20px; font-size: 1rem; }
  .matricula-painel-rodape { display: none; }

  .matricula-pista {
    background:
      repeating-linear-gradient(to right, var(--faixa) 0 36px, transparent 36px 64px) center / 100% 3px no-repeat,
      var(--asfalto);
  }

  .matricula-conteudo { padding: 32px 16px 48px; }
}

@media (max-width: 560px) {
  .matricula-grade { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .matricula-grade > [class^="col-"] { grid-column: span 6; }
  .matricula-grade .col-4:has(input[name="cadastro[number]"]) { grid-column: span 2; }
  .matricula-grade .col-8:has(input[name="cadastro[complement]"]) { grid-column: span 4; }
  .matricula-grade .col-5:has(input[name="cadastro[city]"]) { grid-column: span 4; }
  .matricula-grade .col-2 { grid-column: span 2; }
  .matricula-links { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .matricula .input input.is-buscando { animation: none; }
  .matricula *, .matricula *::before { transition: none !important; }
}

/* Confirmação para quem já tem conta */

.matricula-curso {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 4px solid var(--amarelo-sinal);
  background: var(--concreto);
}

.matricula-curso strong {
  display: block;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
}

.matricula-curso span { display: block; margin-top: 4px; color: var(--asfalto-suave); }

.matricula-confirmar, .matricula-sair { margin: 0; }

.matricula-links:has(.matricula-sair) { justify-content: flex-start; gap: 8px; }
.matricula-links .matricula-sair { display: inline; }

.matricula-link-botao {
  padding: 0;
  border: 0;
  background: none;
  color: var(--foco);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}