/* ===== Base ===== */
* { box-sizing: border-box; }
:root{
  --brand:#3972ed;
  --brand-600:#44447a;
  --bg:#f9f9fc;
  --text:#333;
  --muted:#666;
  --line:#ddd;
}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  margin:0;
}
h1{
    font-size:1.5em;
}
p{
    font-size: 16px;
    font-weight: 500;
}
.hidden{ display:none !important; }
#formWrapper{
    height: 100%;
     display: flex;
  align-items: center;
}

/* ===== Layout dividido ===== */
.container{ display:flex; width:100%; height:-webkit-fill-available; }
.left-side{
  flex:1; position:relative;
background: url(slv-bg-portal.webp);
background-size: cover;
background-repeat: no-repeat;
}
.left-side .overlay{
  position:absolute;
    bottom: 200px;
    left: 40px;
    right: 40px;
  color:#fff; font-size:1.8rem; font-weight:800; line-height:1.2;
}

/* o right-side serve de referência visual; stepper/botões serão fixos à metade direita da viewport */
.right-side{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#fff;
  padding:10px;
  position:relative;
}

/* ===== Tela de boas-vindas (dentro do right-side) ===== */
.welcome-screen{
  width:100%;
  max-width:540px;
  margin:0 auto;
  padding:40px 30px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  text-align:center;
  animation:welcomeIn .45s ease both;
}
.welcome-screen h1{ font-size:26px; font-weight:800; color:#333; margin:0 0 12px; }
.welcome-screen p{ font-size:16px; color:#555; margin:0 0 22px; }
.welcome-screen button{
  width:auto; padding:14px 28px; border:none; border-radius:10px;
  background:var(--brand); color:#fff; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 14px rgba(91,91,165,.28);
  transition:background .2s, transform .08s;
}
.welcome-screen button:hover{ background:var(--brand-600); }
.welcome-screen button:active{ transform:scale(.98); }
@keyframes welcomeIn { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes fadeOut { to { opacity:0; transform: translateY(-4px); } }

/* ===== Barra de progresso (FIXA na coluna direita) ===== */
.progressbar{
  position:fixed;
  top:0;
  right:0;
  left:auto;
  width:-webkit-fill-available;                 /* metade direita da viewport (coluna direita) */
  display:flex;
  justify-content:space-between;
  padding:15px 20px;
  background:#fff;
  z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.progressbar::before{
  content:"";
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  height:4px; width:100%; background:#e0e0e0; border-radius:2px; z-index:-1;
}
.progress{
  position:absolute; top:50%; left:0; transform:translateY(-50%);
  height:4px; background:var(--brand); width:0%; border-radius:2px; transition:width .3s;
}
.progress-step{
width: 26px;
    height: 26px;
    background: #e0e0e0;
    border-radius: 50%;
    z-index: 1;
    position: relative;
    transition: background .3s;
    color: #7e7e7e;
    font-size: 14px;
    padding: 4px;
}
.progress-step.active{ background:var(--brand); color:#fff;}
.progress-step::after{
  content:attr(data-title);
  position:absolute; top:30px; left:50%; transform:translateX(-50%);
  font-size:12px; color:#666; width:max-content;
}

/* ===== Card do formulário ===== */
.form-container{
  background:#fff;
  padding:25px;
  border-radius:16px;
  width:100%;
  max-width:500px;
    margin: auto;
      /* espaço para os botões fixos */
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.form-enter{width: -webkit-fill-available;animation: formIn .4s ease both; }
@keyframes formIn { from { opacity:0; transform: translateY(8px) scale(.99); } to { opacity:1; transform: translateY(0) scale(1); } }

h2{ margin:0 0 15px; font-size:22px; font-weight:800; color:#333; }
label{ display:block; margin-top:15px; font-size:14px; font-weight:700; color:#444; }

/* ===== Campos ===== */
input,select,textarea{
  width:100%; font-size:16px;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  margin-top:6px; background:#fff;
  transition:border .2s, box-shadow .2s; -webkit-appearance:none;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 25%, transparent);
}
input[readonly]{ background:#f3f3f5; color:#666; cursor:not-allowed; border-color:#ccc; }

/* Checkboxes & Radios (com aparência consistente) */
input[type="checkbox"], input[type="radio"]{
  width:25px; height:25px; padding:0; margin:0 6px 0 0;
  border-radius:4px; accent-color:var(--brand);
  cursor:pointer; transform:scale(1.1); box-shadow:none;
}
input:checked{
    background: #f16334;
}
label input[type="checkbox"], label input[type="radio"]{ vertical-align:middle; margin-top:-2px; }

/* Grupo de opções (CNH) */
.option-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; }
.option-row label{ display:inline-flex; align-items:center; gap:8px; margin:0; font-weight:600; }

/* Toggle do currículo */
.toggle-cv{ display:flex; align-items:center; gap:8px; margin:8px 0 12px; font-weight:700; color:#444; }

/* ===== Botões ===== */
button{
  display:inline-block; width:100%; padding:14px; border:none; border-radius:10px;
  background:var(--brand); color:#fff; font-size:16px; font-weight:800; cursor:pointer;
  transition:background .2s, transform .08s;
}
button:hover{ background:var(--brand-600); }
button:active{ transform:scale(.98); }
button:disabled{ opacity:.6; cursor:not-allowed; }

/* ===== Botões fixos (rodapé da coluna direita) ===== */
.btns{
  position:fixed;
  bottom:0;
  right:0;
  left:auto;
  width:50%;                /* metade direita da viewport */
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 20px;
  background:#fff;
   z-index:1000;
}
.btns button{ flex:1; margin-top:0; }

/* ===== Etapas ===== */
.form-step{ display:none; animation:fade .25s ease-in-out; }
.form-step.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ===== Área de upload ===== */
.upload-area{
  border:2px dashed var(--brand);
  padding:20px; text-align:center; border-radius:10px;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.upload-area.dragover{ background:#f5f5ff; }
#curriculoPreview{ margin-top:10px; font-size:14px; color:#333; }

/* ===== Toasts ===== */
#toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  animation: slideIn .28s ease, fadeOut .3s ease 2.6s forwards;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.toast.info { background: #5B5BA5; }
.toast.success { background: #4caf50; }
.toast.error { background: #e53935; }
@keyframes slideIn { from { opacity:0; transform: translateX(100%);} to { opacity:1; transform: translateX(0);} }
@keyframes fadeOut { to { opacity:0; transform: translateX(100%);} }

/* ===== Responsividade ===== */
@media (max-width: 992px){
  .left-side .overlay{ bottom:28px; left:28px; font-size:1.6rem; }
}
@media (max-width: 992px){
  body{ padding:0px !important; }
  .left-side{ display:none; }
  .right-side{ flex:1; width:100%; }

  /* stepper e botões ocupam 100% no mobile */
  .progressbar{ left:0; right:0; width:100%; }
  .btns{ left:0; right:0; width:100%; }

  .form-container{
    padding:0px; border-radius:12px; box-shadow:none;
    margin-top:0px !important;             /* ainda deixa espaço para o stepper */
    margin-bottom:0px !important;          /* e para os botões */
  }
  h2{ font-size:20px; }
  label{ font-size:13px; }
  button{ font-size:15px; padding:12px; }
}
#prevBtn{
    color: grey;
    background: white;
    border: 1px solid grey;
}
.btn-remove{
    width: max-content;
    padding: 8px 16px;
    font-size: 12px;
    background: #ffe1e1;
    color: #bf6969;
    font-weight: 500;
}

/* ===== (Opcional) Dark mode — descomente se quiser
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e0f12; --text:#e9e9ee; --line:#2a2b32; }
  body{ background:var(--bg); color:var(--text); }
  .form-container{ background:#14161b; }
  input,select,textarea{ background:#101218; border-color:#2a2b32; color:var(--text); }
  input[readonly]{ background:#13141a; border-color:#2a2b32; color:#a8a8b5; }
  .progressbar, .btns{ background:#14161b; }
  .upload-area{ border-color:var(--brand); background:#101218; color:#ddd; }
  .upload-area.dragover{ background:#151926; }
  .progress-step{ background:#2a2b32; }
  .progress-step.active{ background:var(--brand); }
  .progress{ background:var(--brand); }
}
*/