/* VORH Brasil — Cadastro (cores inspiradas nas Forças Armadas do Brasil) */
:root{
  --vorh-green: #0b3d2e;
  --vorh-olive: #3f6f52;
  --vorh-navy:  #0b2a5b;
  --vorh-gold:  #c9a227;
  --ink: #1e1e1e;
  --muted: #6b7280;
  --bg: #f7faf9;
  --surface: #ffffff;
  --ring: rgba(201,162,39,.35);
}

.page-cadastro .page-hero{
  background: radial-gradient(1200px 400px at 20% -20%, rgba(11,61,46,.18), transparent),
              radial-gradient(900px 300px at 110% 0%, rgba(11,42,91,.12), transparent);
  padding: 56px 0 28px;
  position: relative;
  overflow: hidden;
}
.page-cadastro .page-hero h1{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--vorh-green);
}
.page-cadastro .page-hero p{
  color: var(--muted);
  max-width: 64ch;
}

/* micro “linha de honra” sob o h1 */
.page-cadastro .page-hero h1::after{
  content:"";
  display:block;
  width: 120px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vorh-green), var(--vorh-navy), var(--vorh-gold));
  animation: wipe 2.2s ease forwards;
  transform-origin: left;
}
@keyframes wipe { from{transform: scaleX(0);} to{transform: scaleX(1);} }

/* container do formulário */
.page-cadastro .container{
  margin-top: 16px;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  background: var(--surface);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(11,42,91,.06);
  border: 1px solid rgba(11,42,91,.06);
}
.form-group--full{ grid-column: 1 / -1; }

.form-group label{
  display:block;
  font-size:.9rem;
  color: var(--vorh-navy);
  margin-bottom:6px;
  font-weight:600;
}
.form-group input,
.form-group textarea{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px 14px;
  font-size:1rem;
  background:#fff;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
.form-group textarea{ resize: vertical; }
.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color: var(--vorh-gold);
  box-shadow: 0 0 0 4px var(--ring);
}
.form-group input:active{
  transform: translateY(0.5px);
}

/* alerts */
.alert{
  padding:12px 14px;
  border-radius:10px;
  font-size:.95rem;
  margin-bottom:12px;
  animation: fadeUp .4s ease both;
}
.alert--error{
  background: #fde8e8;
  color:#7f1d1d;
  border:1px solid #fecaca;
}
.alert--warning{
  background: #fff7ed;
  color:#7c2d12;
  border:1px solid #fed7aa;
}
@keyframes fadeUp{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}

/* botão primário com micro-interação */
.btn--primary{
  position: relative;
  overflow: hidden;
}
.btn--primary::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(201,162,39,.18), rgba(11,61,46,.18));
  transform: translateX(-100%);
  transition: transform .35s ease;
}
.btn--primary:hover::before{ transform: translateX(0); }

/* contador de caracteres */
.field-hint{
  font-size:.8rem;
  color: var(--muted);
  margin-top:6px;
}

/* responsividade */
@media (max-width: 800px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* sutil animação de background “patente” */
.page-cadastro::before{
  content:"";
  position:fixed;
  bottom:-80px; right:-80px;
  width:260px; height:260px;
  background: conic-gradient(from 0deg, rgba(11,61,46,.06), rgba(11,42,91,.06), transparent 60%);
  border-radius: 50%;
  filter: blur(10px);
  animation: float 12s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes float{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(6deg); }
}

/* PATCH: estiliza <select> como os demais campos */
.form-group select{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:12px 14px;
  font-size:1rem;
  background:#fff;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
  appearance: none;          /* remove estilo nativo (quando suportado) */
  -webkit-appearance: none;
  -moz-appearance: none;
}
.form-group select:focus{
  outline:none;
  border-color: var(--vorh-gold);
  box-shadow: 0 0 0 4px var(--ring);
}

/* múltipla seleção (ex.: Áreas / Skills) */
.form-group select[multiple]{
  min-height: 160px;         /* mantém altura confortável */
  padding:10px 12px;         /* sem “setinha” interna */
}

/* estados */
.form-group select:disabled{
  background:#f9fafb;
  color:#9ca3af;
  cursor:not-allowed;
}


/* Chevon para <select> (não afeta múltiplas seleções) */
.form-group select:not([multiple]) {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230b2a5b' stroke-width='1.8'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px; /* espaço para o ícone */
  cursor: pointer;
}

/* Estado desabilitado do select */
.form-group select:disabled {
  background-color: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Acessibilidade: foco consistente */
.form-group select:focus {
  outline: none;
  border-color: var(--vorh-gold);
  box-shadow: 0 0 0 4px var(--ring);
}