/* M.Martech Capability Hub — Frontend V1
   Paleta e tipografia de referência: Brand Board v1.3 (Magenta, Navy,
   Midnight Navy, Beige, Lato). Escrito do zero — nenhum CSS do protótipo
   UI Freeze foi reaproveitado. */

:root{
  --magenta:#ED1B59;
  --navy:#2A225C;
  --midnight:#03052A;
  --white:#FFFFFF;
  --beige:#E8D9B4;
  --dark:#0F1020;
  --charcoal:#353647;
  --gray:#687280;
  --light-gray:#A1A6B3;
  --extra-light:#F2F4F7;
  --excelente:#3F7047;
  --avancado:#70AB58;
  --emdesenv:#D99A41;
  --emergente:#F57A2A;
  --fundacional:#C2164F;
  --border:#E4E6EC;
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px;
  --radius:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Lato', -apple-system, sans-serif;
  color:var(--charcoal);
  background:var(--extra-light);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Lato', sans-serif; font-weight:900; color:var(--midnight); margin:0 0 8px;}
h1{font-size:28px;} h2{font-size:20px;} h3{font-size:16px;}
p{line-height:1.5;}
.lede{color:var(--gray); font-size:15px; margin:0 0 var(--sp-3);}
.eyebrow{color:var(--magenta); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px;}
a{color:var(--magenta);}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; background:var(--midnight); color:var(--white);
  position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.topbar__brand{font-weight:900; letter-spacing:.02em; display:flex; align-items:center; gap:8px;}
.topbar__logo{color:var(--magenta); font-size:20px;}
.topbar__product{font-weight:400; color:var(--light-gray); margin-left:6px;}
.topbar__user{display:flex; align-items:center; gap:14px; font-size:14px;}

.stage{max-width:960px; margin:0 auto; padding:var(--sp-4) var(--sp-3) 80px;}
.screen{display:none;}
.screen.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

/* ---- botões ---- */
.btn{
  font-family:inherit; font-weight:700; font-size:14.5px; border-radius:999px;
  padding:12px 24px; border:none; cursor:pointer; transition:transform .1s ease, opacity .15s ease;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--magenta); color:var(--white);}
.btn-primary:hover:not(:disabled){opacity:.92;}
.btn-ghost{background:transparent; color:var(--navy); border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%;}
.btn-row{display:flex; gap:12px; margin-top:var(--sp-3); flex-wrap:wrap;}

/* ---- login ---- */
#screen-login{max-width:none; padding:0; margin:0;}
.split{display:grid; grid-template-columns:1fr 1fr; min-height:100vh;}
.login-hero{
  background:linear-gradient(160deg, var(--midnight), var(--navy));
  color:var(--white); padding:56px 48px; display:flex; flex-direction:column; justify-content:space-between;
}
.login-hero__brand{font-size:15px; font-weight:900; letter-spacing:.04em; margin-bottom:40px;}
.login-hero h1{color:var(--white); font-size:34px; max-width:420px;}
.login-hero .sub{color:#C9CCE0; max-width:420px; font-size:15px;}
.login-hero__sig{font-size:13px; color:#9AA0C0;}
.login-form{padding:56px 48px; display:flex; flex-direction:column; justify-content:center; max-width:440px;}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--border);
  font-family:inherit; font-size:14.5px; color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--magenta);}
.form-error{background:#FCE9EC; color:var(--fundacional); border-radius:8px; padding:10px 14px; font-size:13.5px; margin-bottom:14px;}

/* ---- cards / seções ---- */
.card{background:var(--white); border-radius:var(--radius); padding:var(--sp-3); box-shadow:0 1px 3px rgba(15,16,32,.06); border:1px solid var(--border);}
.section-block{margin:var(--sp-4) 0;}
.section-kicker{color:var(--magenta); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}

/* ---- home ---- */
.greeting{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--sp-3);}
.home-hero{background:linear-gradient(135deg, var(--navy), var(--midnight)); border-radius:var(--radius); padding:var(--sp-4); color:var(--white); margin-bottom:var(--sp-3);}
.home-hero .tag{display:inline-block; background:rgba(255,255,255,.12); padding:4px 12px; border-radius:999px; font-size:12px; margin-bottom:12px;}
.home-hero h2{color:var(--white);}
.home-hero p{color:#C9CCE0;}
.dash-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-2); margin-bottom:var(--sp-4);}
.dash-card{background:var(--white); border-radius:var(--radius); padding:var(--sp-3); border:1px solid var(--border);}
.dash-card .lbl{font-size:12.5px; color:var(--gray); font-weight:700; margin-bottom:6px;}
.dash-card .big{font-size:30px; font-weight:900; color:var(--midnight);}
.dash-card .link{color:var(--magenta); font-size:13px; font-weight:700; cursor:pointer; display:inline-block; margin-top:8px;}
.tile-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--sp-2);}
.tile{background:var(--white); border-radius:var(--radius); padding:var(--sp-3); border:1px dashed var(--border);}
.tile--disabled{opacity:.72;}
.badge{display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; margin-bottom:8px;}
.badge-future{background:var(--beige); color:#8A6D2A;}

/* ---- assessment hub ---- */
.assess-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:6px;}
.counter{font-weight:700; color:var(--navy); font-size:13.5px;}
.progress-track{height:8px; background:var(--border); border-radius:999px; overflow:hidden; margin:var(--sp-2) 0 var(--sp-3);}
.progress-fill{height:100%; background:var(--magenta); transition:width .3s ease;}
.journey-path, .comp-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.journey-item, .comp-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--white); border:1px solid var(--border); border-radius:10px; padding:14px 18px; cursor:pointer;
}
.journey-item:hover, .comp-item:hover{border-color:var(--magenta);}
.journey-item.done, .comp-item.done{border-color:var(--excelente);}
.journey-item .name, .comp-item .name{font-weight:700; color:var(--midnight); font-size:14.5px;}
.journey-item .meta, .comp-item .meta{font-size:12.5px; color:var(--gray);}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--light-gray); flex:none;}
.status-dot.done{background:var(--excelente);}
.status-dot.partial{background:var(--emdesenv);}

/* ---- item (bloco) ---- */
.back-link{background:none; border:none; color:var(--gray); font-size:13.5px; cursor:pointer; padding:0; margin-bottom:14px; font-weight:700;}
.item-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.domain{background:var(--beige); color:#8A6D2A; font-weight:700; font-size:12.5px; padding:5px 14px; border-radius:999px;}
.item-progress{font-size:12.5px; color:var(--gray);}
.qtag{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--magenta); margin-bottom:10px;}
.q-title{font-size:17px; font-weight:700; color:var(--midnight); margin-bottom:18px; line-height:1.4;}
.q-instructions{font-size:13.5px; color:var(--gray); margin-bottom:14px;}
.options{display:flex; flex-direction:column; gap:10px;}
.option{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1.5px solid var(--border);
  border-radius:10px; cursor:pointer; font-size:14.5px;
}
.option:hover{border-color:var(--magenta);}
.option.selected{border-color:var(--magenta); background:#FCE9EC;}
.option input{margin-top:3px;}
.criteria-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); gap:16px;}
.criteria-row:last-child{border-bottom:none;}
.criteria-row .q{font-size:14px; flex:1;}
.yn{display:flex; gap:8px;}
.yn button{padding:6px 16px; border-radius:999px; border:1.5px solid var(--border); background:var(--white); cursor:pointer; font-weight:700; font-size:13px;}
.yn button.on{background:var(--navy); color:var(--white); border-color:var(--navy);}
.rank-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.rank-item{display:flex; align-items:center; gap:12px; background:var(--white); border:1.5px solid var(--border); border-radius:10px; padding:12px 14px;}
.rank-item .handle{display:flex; flex-direction:column; gap:2px;}
.rank-item .handle button{border:none; background:var(--extra-light); border-radius:6px; width:26px; height:22px; cursor:pointer; font-weight:700; color:var(--navy);}
.rank-item .idx{font-weight:900; color:var(--magenta); min-width:20px;}
.match-question{margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.match-question:last-child{border:none;}
.match-question .stem{font-weight:700; margin-bottom:8px; font-size:14px;}
textarea{width:100%; padding:12px 14px; border-radius:8px; border:1.5px solid var(--border); font-family:inherit; font-size:14px; min-height:80px; resize:vertical;}

/* ---- processamento ---- */
.proc-wrap{display:flex; align-items:center; justify-content:center; min-height:60vh;}
.proc-card{background:var(--white); border-radius:var(--radius); padding:var(--sp-5); text-align:center; max-width:420px; box-shadow:0 4px 24px rgba(15,16,32,.08);}
.spinner{width:44px; height:44px; border-radius:50%; border:4px solid var(--border); border-top-color:var(--magenta); margin:0 auto 20px; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.proc-steps{list-style:none; padding:0; text-align:left; margin-top:20px;}
.proc-steps li{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; color:var(--gray);}
.proc-steps li.active{color:var(--midnight); font-weight:700;}
.proc-steps li.done{color:var(--excelente);}
.proc-steps .mark{width:16px; height:16px; border-radius:50%; border:2px solid var(--border); flex:none;}
.proc-steps li.active .mark{border-color:var(--magenta); background:var(--magenta);}
.proc-steps li.done .mark{border-color:var(--excelente); background:var(--excelente);}

/* ---- resultado ---- */
.fold-hero{background:linear-gradient(135deg, var(--navy), var(--midnight)); border-radius:var(--radius); padding:var(--sp-4); color:var(--white); margin-bottom:var(--sp-3);}
.score-ring{display:flex; align-items:center; gap:24px;}
.score-ring .val{font-size:52px; font-weight:900;}
.score-ring .lbl{color:#C9CCE0; font-size:14px;}
.domain-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
.domain-card{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:16px;}
.domain-card.critical{border-color:var(--fundacional);}
.domain-card .name{font-weight:700; color:var(--midnight); margin-bottom:4px;}
.domain-card .level{font-size:22px; font-weight:900; color:var(--magenta);}
.domain-card .meta{font-size:12.5px; color:var(--gray);}
.critical-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.critical-list li{background:#FCE9EC; border-radius:8px; padding:10px 14px; font-size:13.5px; color:var(--fundacional); font-weight:700;}
.simple-table{width:100%; border-collapse:collapse; background:var(--white); border-radius:10px; overflow:hidden; border:1px solid var(--border);}
.simple-table th, .simple-table td{text-align:left; padding:10px 14px; font-size:13.5px; border-bottom:1px solid var(--border);}
.simple-table th{color:var(--gray); font-weight:700; font-size:12px; text-transform:uppercase; background:var(--extra-light);}
.table-scroll{max-height:480px; overflow-y:auto; border-radius:10px; border:1px solid var(--border);}
.table-scroll .simple-table{border:none; border-radius:0;}
.table-scroll .simple-table th{position:sticky; top:0; z-index:1;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--midnight); color:var(--white); padding:12px 22px; border-radius:999px;
  font-size:13.5px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:100;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:760px){
  .split{grid-template-columns:1fr;}
  .login-hero{padding:32px 24px;}
  .login-form{padding:32px 24px; max-width:none;}
  .topbar{padding:12px 16px;}
  .stage{padding:var(--sp-3) var(--sp-2) 60px;}
}