/* ==========================================================================
   MAPE moderno - tema base das paginas do candidato (Trabalhe Conosco / MAPE)
   Design system "Console" adaptado ao publico. Acento = cor do profile (cliente).
   Escopo: .mtc-modern  (afeta SO a home do caso padrao; clientes com home
   personalizada permanecem intactos). ASCII puro (IIS legado).
   ========================================================================== */

.mtc-modern{
  /* fallback; sobrescrito inline pela cor configurada no SkinBuilder do profile */
  --mtc-accent: #0a66c2;
  --mtc-accent-ink: #ffffff;
  --mtc-text: #101828;
  --mtc-text-2: #475467;
  --mtc-muted: #667085;
  --mtc-surface: #ffffff;
  --mtc-surface-2: #f6f7f9;
  --mtc-border: #e4e7ec;
  --mtc-radius: 14px;
  --mtc-radius-sm: 10px;

  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Inter, Arial, sans-serif;
  color: var(--mtc-text);
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 20px 48px;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mtc-modern *{ box-sizing: border-box; }

/* ---- Intro / hero (col-md-12 com o texto do profile) ---- */
.mtc-modern > .col-md-12{
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 30px;
}
.mtc-modern > .col-md-12 h1,
.mtc-modern > .col-md-12 h2,
.mtc-modern > .col-md-12 h3{
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--mtc-accent);
}
.mtc-modern > .col-md-12 p{
  font-size: 16px;
  line-height: 1.62;
  color: var(--mtc-text-2);
  margin: 0 0 8px;
  max-width: 760px;
}

/* ---- Linha de acoes (cards) ---- */
.mtc-modern > .row{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.mtc-modern > .row > [class*="col-md-"]{
  float: none;
  width: auto;
  flex: 1 1 260px;
  max-width: 360px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;

  background: var(--mtc-surface);
  border: 1px solid var(--mtc-border);
  border-radius: var(--mtc-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s ease, border-color .18s ease;
}
/* faixa de acento no topo do card */
.mtc-modern > .row > [class*="col-md-"]::before{
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 4px;
  background: var(--mtc-accent);
}
.mtc-modern > .row > [class*="col-md-"]:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16,24,40,.12);
  border-color: var(--mtc-accent);
}

/* botao-titulo da acao */
.mtc-modern .tituloBtn,
.mtc-modern .btn.btn-primary,
.mtc-modern a.btn,
.mtc-modern button.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--mtc-accent);
  color: var(--mtc-accent-ink) !important;
  border: 0;
  border-radius: var(--mtc-radius-sm);
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.10);
  transition: filter .15s ease, transform .12s ease;
}
.mtc-modern .tituloBtn:hover,
.mtc-modern .btn.btn-primary:hover,
.mtc-modern a.btn:hover,
.mtc-modern button.btn:hover{
  filter: brightness(1.08);
  color: var(--mtc-accent-ink) !important;
  text-decoration: none !important;
}
.mtc-modern .tituloBtn:active,
.mtc-modern .btn.btn-primary:active,
.mtc-modern button.btn:active{ transform: translateY(1px); }

/* botoes pequenos (vaga-ver): auto-width, proporcional ao label */
.mtc-modern .btn.btn-sm{
  width: auto !important;
  padding: 10px 22px !important;
  font-size: 14px;
}

/* descricao da acao */
.mtc-modern .boxTexto{
  margin-top: 14px !important;
  text-align: left !important;
  flex: 1 1 auto;
}
.mtc-modern .boxTexto p,
.mtc-modern .boxTexto font{
  font-size: 14px !important;
  line-height: 1.55;
  color: var(--mtc-muted);
  margin: 0 0 8px;
}
.mtc-modern .boxTexto strong,
.mtc-modern .boxTexto b{ color: var(--mtc-text-2); }

/* neutraliza floats do bootstrap legado dentro do escopo */
.mtc-modern .pull-left,
.mtc-modern .pull-right{ float: none !important; }

/* botao Voltar / Proximo do inc_proximo.asp: nao herdar float nem width total */
.mtc-modern #div_volta,
.mtc-modern #div_avanca,
.mtc-modern #div_meio{
  display: inline-block !important;
  margin: 16px 0 4px;
}
.mtc-modern #div_volta .btn,
.mtc-modern #div_avanca .btn,
.mtc-modern #div_meio .btn{
  width: auto !important;
  display: inline-block !important;
}

/* ---- Responsivo (mobile-first friendly) ---- */
@media (max-width: 768px){
  .mtc-modern{ padding: 20px 16px 36px; }
  .mtc-modern > .row{ flex-direction: column; gap: 14px; }
  .mtc-modern > .row > [class*="col-md-"]{ flex: 1 1 100%; max-width: 100%; }
  .mtc-modern > .col-md-12 h1,
  .mtc-modern > .col-md-12 h2,
  .mtc-modern > .col-md-12 h3{ font-size: 24px; }
  .mtc-modern > .col-md-12 p{ font-size: 15px; }
}
@media (prefers-reduced-motion: reduce){
  .mtc-modern *{ transition: none !important; }
}

/* ==========================================================================
   VAGAS do MTC (mape_vagas.asp) — miolo (o chrome ja e nativo skin-aware)
   ========================================================================== */
.mtc-modern h2.text-primary{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mtc-accent);
  margin: 0 0 10px;
}
.mtc-modern > p{
  font-size: 15px;
  color: var(--mtc-text-2);
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 20px;
}

/* lista de categorias de vaga (nivel/profissao) como cards */
.mtc-modern .painelVagas{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  padding: 0;
  margin: 4px 0 8px;
  float: none;
}
.mtc-modern .painelVagas .painelVagasItem{
  flex: 1 1 300px;
  max-width: 460px;
  display: flex;
  padding: 0;
}
.mtc-modern a.painelVagasLink{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--mtc-accent, #023865) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, opacity .18s ease;
  position: relative;
  overflow: hidden;
}
.mtc-modern a.painelVagasLink::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(0,0,0,.18);
}
.mtc-modern a.painelVagasLink:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
  opacity: .92;
  color: #ffffff !important;
}
/* badge com a contagem de vagas da categoria */
.mtc-modern .vagaCount{
  flex-shrink: 0;
  min-width: 26px;
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.9);
  color: var(--mtc-accent, #023865);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- mape_vagas1.asp — vagas individuais como cards (.panel) ---- */
.mtc-modern .painelVagasItem .panel.panel-default{
  border: 1px solid var(--mtc-border);
  border-radius: 14px;
  background: var(--mtc-surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  height: 100%;
}
.mtc-modern .painelVagasItem .panel.panel-default:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(16,24,40,.12);
  border-color: var(--mtc-accent);
}
.mtc-modern .painelVagasItem .panel-body{ padding: 18px 20px; position: relative; }
.mtc-modern .painelVagasItem .panel-body::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mtc-accent);
}
.mtc-modern .painelVagasItem .panel-body a{
  display: block; text-decoration: none !important; color: inherit !important;
}
.mtc-modern .painelVagasItem .panel-body h3{
  font-size: 16px; font-weight: 700; color: var(--mtc-text); margin: 0 0 8px; line-height: 1.3;
}
.mtc-modern .painelVagasItem .panel-body p{
  font-size: 13.5px; color: var(--mtc-muted); margin: 2px 0; line-height: 1.45;
}
.mtc-modern .painelVagasItem .panel-body a:hover h3{ color: var(--mtc-accent); }
@media (max-width: 600px){
  .mtc-modern .painelVagasItem{ width: 100% !important; float: none !important; }
}

/* ==========================================================================
   DETALHE DA VAGA (mape_vagas_ver.asp + inc_visualiza_vaga_mape.asp) — miolo
   ========================================================================== */
.mtc-modern .GenericForm{ max-width: 900px; }
.mtc-modern .firstH3,
.mtc-modern .GenericForm h3{
  font-size: 18px;
  font-weight: 700;
  color: var(--mtc-accent) !important;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mtc-border);
}
.mtc-modern .LinhasForm{
  display: flex;
  gap: 18px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--mtc-border);
  align-items: baseline;
}
.mtc-modern .LinhasForm label{
  flex: 0 0 210px;
  margin: 0;
  font-weight: 600;
  color: var(--mtc-text-2);
  font-size: 14px;
  line-height: 1.45;
}
.mtc-modern .LinhasForm .LfLabelValue{
  flex: 1 1 auto;
  width: auto;
  color: var(--mtc-text);
  font-size: 14px;
  line-height: 1.55;
}
/* caixa "compartilhe esta vaga" */
.mtc-modern .alert-info{
  background: var(--mtc-surface-2);
  border: 1px solid var(--mtc-border);
  color: var(--mtc-text-2);
  border-radius: 12px;
  padding: 18px 20px;
}
.mtc-modern .alert-info h4{ color: var(--mtc-text); font-weight: 700; margin: 0 0 8px; font-size: 15px; }
.mtc-modern .alert-info a{ color: var(--mtc-accent); word-break: break-all; }
/* tabela auxiliar (cidades/deficiencia) */
.mtc-modern .table-striped{ width: 100%; font-size: 14px; }
@media (max-width: 600px){
  .mtc-modern .LinhasForm{ flex-direction: column; gap: 2px; }
  .mtc-modern .LinhasForm label{ flex-basis: auto; }
}


/* ============================================================
   PASSOS DO CADASTRO  (scope: .visu-curric)
   Override sobre 01_01_preview.css — carregado depois.
   Cores via --mtc-accent injetado pelo inc_mtc_acento.asp.
   ============================================================ */
.visu-curric{background:var(--mtc-surface,#f5f7fa)!important;padding-bottom:36px!important;}
.visu-curric-menu.sidebar{background:var(--mtc-surface,#f5f7fa)!important;padding-top:12px!important;}
.visu-curric .geral{font-size:14px!important;}

/* Card principal do passo */
.visu-curric .content-main-cadastro{
  border:none!important;
  border-radius:10px!important;
  box-shadow:0 2px 14px rgba(0,35,65,.08)!important;
  padding:26px 30px 32px!important;
  font-size:14px;
}
.visu-curric h3.text-primary{
  font-size:18px!important;font-weight:700;
  padding-bottom:10px!important;
  border-bottom:2px solid var(--mtc-border,#e2e8f0)!important;
  margin:0 0 20px!important;
}
.visu-curric h4.text-primary{
  color:var(--mtc-accent,#023865)!important;
  font-size:15px!important;font-weight:700;margin-top:22px!important;
}

/* Formularios */
.visu-curric .form-horizontal .form-group{margin-bottom:14px!important;}
.visu-curric .control-label{
  font-weight:600!important;
  color:var(--mtc-text-2,#4a5568)!important;
  font-size:13px!important;
}
.visu-curric .form-control{
  border-radius:6px!important;
  border-color:var(--mtc-border,#d1d9e0)!important;
  font-size:14px!important;
  transition:border-color .15s,box-shadow .15s;
}
.visu-curric .form-control:focus{
  border-color:var(--mtc-accent,#023865)!important;
  box-shadow:0 0 0 3px rgba(2,56,101,.1)!important;
  outline:none;
}

/* Botoes: shape only (cor ja vem do inc_bootstrap_candidatos.asp) */
.visu-curric .btn{border-radius:6px!important;font-weight:600!important;}
.visu-curric .btn-default{border-color:var(--mtc-border,#d1d9e0)!important;}

/* Paineis */
.visu-curric .panel,.visu-curric .panel-default,.visu-curric .panel-info{
  border-radius:8px!important;
  border-color:var(--mtc-border,#e2e8f0)!important;
  box-shadow:0 1px 4px rgba(0,35,65,.05)!important;
}
.visu-curric .panel-info>.panel-heading,.visu-curric .panel-default>.panel-heading{
  background:var(--mtc-surface,#f5f7fa)!important;
  border-bottom-color:var(--mtc-border,#e2e8f0)!important;
  border-radius:8px 8px 0 0!important;
}
.visu-curric .panel-info>.panel-heading .panel-title,
.visu-curric .panel-default>.panel-heading .panel-title{
  color:var(--mtc-text,#1a2535)!important;font-size:14px!important;font-weight:600!important;
}

/* Wells / info boxes */
.visu-curric .well{
  border-radius:8px!important;
  background:var(--mtc-surface,#f5f7fa)!important;
  border-color:var(--mtc-border,#e2e8f0)!important;
  box-shadow:none!important;
  font-size:13px;
}
.visu-curric .alert.alert-success{
  border-radius:8px!important;
  border-left:4px solid var(--mtc-accent,#023865)!important;
  background:#f0f9f4!important;
}
.visu-curric .alert.alert-info{
  border-radius:8px!important;border-color:var(--mtc-border,#e2e8f0)!important;
}

/* Campo obrigatorio */
.visu-curric .bordaObrigatorio{border-left:4px solid #f0a800!important;}

/* Radio e checkbox */
.visu-curric .radio label,.visu-curric .checkbox label{font-size:14px;}

/* Responsivo */
@media(max-width:768px){
  .visu-curric .content-main-cadastro{padding:16px 12px 20px!important;}
}


/* ============================================================
   MODAIS Bootstrap 3 — carregado so em contexto MAPE
   ============================================================ */
.modal-content{
  border:none!important;
  border-radius:12px!important;
  box-shadow:0 8px 40px rgba(0,35,65,.22)!important;
  overflow:hidden;
}
.modal-header{
  background:var(--mtc-accent,#023865)!important;
  border-bottom:none!important;
  padding:16px 20px!important;
}
.modal-header h4.modal-title{
  color:#fff!important;font-weight:700!important;font-size:16px!important;
}
.modal-header .close{
  color:#fff!important;opacity:.7!important;text-shadow:none!important;margin-top:0!important;
}
.modal-header .close:hover{opacity:1!important;}
.modal-body{padding:20px 24px!important;font-size:14px!important;}
.modal-footer{
  border-top:1px solid var(--mtc-border,#e2e8f0)!important;
  padding:12px 20px!important;
  background:#fafbfc!important;
}

/* ============================================================
   PAINEIS MAPE (.panel-primary / .BoxTasks) — 01_01b + modal
   Shape only; cores vem do profile via inc_bootstrap_candidatos
   ============================================================ */
.panel.panel-primary,.BoxTasks{
  border-radius:10px!important;
  overflow:hidden!important;
  border-color:var(--mtc-border,#e2e8f0)!important;
  box-shadow:0 2px 10px rgba(0,35,65,.08)!important;
}
.panel-primary>.panel-heading{
  border-radius:0!important;   /* cor = profile, shape = clean */
  border-bottom:none!important;
}
.panel-primary>.panel-body,.BoxTasks .panel-body{
  padding:16px 18px!important;font-size:14px!important;
  color:var(--mtc-text,#1a2535)!important;
}