:root{
  --navy:#130a22;
  --purple:#7c3aed;
  --purple-dark:#5b21b6;
  --purple-tint:#f1eefc;
  --purple-tint-border:#e3daf9;
  --teal:#0d9488;
  --teal-tint:#ecfdf5;
  --red:#c0392b;
  --red-tint:#fdf1f0;
  --amber:#f59e0b;
  --amber-tint:#fef6e7;
  --ink:#1c1530;
  --gray:#6b6478;
  --gray-line:#e6e1f0;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background:#fbfaff;
  color:var(--ink);
  min-height:100vh;
}

.topbar{
  background:var(--navy);
  border-bottom:4px solid var(--purple);
  padding:14px 20px;
  text-align:center;
}
.brand-mark{color:#b9a9e8; font-style:italic; font-size:13px;}

main{max-width:640px; margin:0 auto; padding:24px 20px 8px;}

.hidden{display:none !important;}

/* ---------- Home / dashboard ---------- */
.eyebrow{color:var(--purple); font-weight:700; font-size:11px; letter-spacing:1.5px; margin:0 0 8px;}
h1{font-size:26px; font-weight:800; color:var(--navy); margin:0 0 8px; line-height:1.2;}
.subtitle{color:var(--gray); font-size:14px; line-height:1.5; margin:0 0 18px;}

.persona-pill{
  display:inline-block;
  background:var(--purple-tint);
  color:var(--purple-dark);
  font-weight:700;
  font-size:12.5px;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:18px;
  margin-right:8px;
}

.progress-wrap{margin-bottom:24px;}
.progress-label{font-size:12.5px; color:var(--gray); font-weight:600; margin-bottom:6px;}
.progress-track{background:var(--gray-line); border-radius:999px; height:8px; overflow:hidden;}
.progress-fill{background:var(--purple); height:100%; border-radius:999px; transition:width .25s ease;}

.phase-group{margin-bottom:22px;}
.phase-title{font-size:13.5px; font-weight:800; color:var(--navy); margin:0 0 2px;}
.phase-sub{font-size:11.5px; color:var(--gray); margin:0 0 10px;}

.day-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid var(--gray-line);
  border-radius:12px;
  padding:13px 14px;
  margin-bottom:8px;
  cursor:pointer;
  font-family:inherit;
}
.day-row.locked{cursor:default; opacity:.55; background:#f7f6fb;}
.day-row.current{border-color:var(--purple); box-shadow:0 4px 14px rgba(124,58,237,.12);}
.day-row.done{border-color:var(--teal-tint);}

.day-status{
  width:30px; height:30px; min-width:30px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
  background:var(--purple-tint); color:var(--purple);
}
.day-row.done .day-status{background:var(--teal); color:#fff;}
.day-row.locked .day-status{background:var(--gray-line); color:var(--gray);}

.day-row-title{font-size:13.5px; font-weight:700; color:var(--navy);}
.day-row-num{font-size:11px; color:var(--gray); font-weight:600; margin-bottom:1px;}

/* ---------- Day 0 · diagnóstico ---------- */
.diag-intro{text-align:center; padding:10px 0;}
.diag-intro .big-icon{font-size:40px; margin-bottom:10px;}

.test-progress{font-size:11.5px; color:var(--gray); font-weight:700; letter-spacing:.5px; margin:0 0 6px;}
.question-block{margin:18px 0 22px;}
.question-num{font-size:11.5px; color:var(--purple); font-weight:700; margin:0 0 6px;}
.question-text{font-size:17px; font-weight:700; color:var(--navy); line-height:1.4; margin:0 0 16px;}

.option-list{display:flex; flex-direction:column; gap:8px;}
.option-btn{
  text-align:left;
  background:#fff;
  border:1.5px solid var(--gray-line);
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  color:var(--ink);
  cursor:pointer;
}
.option-btn:active, .option-btn.selected{border-color:var(--purple); background:var(--purple-tint); color:var(--purple-dark); font-weight:700;}

.mini-result{text-align:center; padding:14px 0;}
.mini-result .band-tag{
  display:inline-block;
  font-size:11.5px; font-weight:800; letter-spacing:.5px;
  padding:5px 14px; border-radius:999px; margin-bottom:14px;
}
.band-tag.bajo{background:var(--teal-tint); color:var(--teal);}
.band-tag.medio{background:var(--amber-tint); color:#b7791f;}
.band-tag.alto{background:var(--red-tint); color:var(--red);}
.mini-result h2{font-size:20px; margin:0 0 10px;}
.mini-result p{font-size:14px; line-height:1.6; color:#3a3350; margin:0 0 22px;}

.final-result{padding:6px 0;}
.final-result .big-icon{font-size:40px; text-align:center; margin-bottom:6px;}
.score-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0 22px;}
.score-box{background:#fff; border:1px solid var(--gray-line); border-radius:12px; padding:14px;}
.score-box .label{font-size:11px; color:var(--gray); font-weight:700; margin:0 0 4px;}
.score-box .value{font-size:13.5px; font-weight:800; color:var(--navy);}

/* ---------- Day detail view ---------- */
.day-view{max-width:520px; margin:0 auto;}
.back-link{
  background:none; border:none; color:var(--purple-dark); font-weight:700; font-size:13px;
  padding:0 0 16px; cursor:pointer;
}
.day-phase-label{color:var(--purple); font-weight:800; font-size:11px; letter-spacing:1px; margin:0 0 6px;}
.day-view h2{font-size:22px; font-weight:800; color:var(--navy); margin:0 0 14px;}
.video-wrap{position:relative; width:100%; padding-top:56.25%; margin:0 0 18px; border-radius:12px; overflow:hidden; background:#000;}
.video-wrap iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.day-instruction{font-size:14px; line-height:1.7; color:#3a3350; margin:0 0 20px;}
.day-tip{
  font-size:13px; line-height:1.6; color:var(--purple-dark);
  background:var(--purple-tint); border-radius:10px; padding:12px 14px; margin:0 0 20px;
}

.field-label{font-size:12.5px; font-weight:700; color:var(--purple-dark); margin:0 0 8px;}
.field-block{margin-bottom:20px;}

.persona-input, .number-input{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-line); border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--ink);
}
.persona-input:focus, .number-input:focus{outline:none; border-color:var(--purple);}

textarea.reflection{
  width:100%; min-height:90px; padding:12px 14px; border:1.5px solid var(--gray-line); border-radius:10px;
  font-size:13.5px; font-family:inherit; color:var(--ink); line-height:1.5; resize:vertical;
}
textarea.reflection:focus{outline:none; border-color:var(--purple);}

.primary-btn{
  background:var(--purple);
  color:#fff;
  border:none;
  font-size:15px;
  font-weight:700;
  padding:14px 32px;
  border-radius:999px;
  cursor:pointer;
  width:100%;
  margin-top:6px;
}
.primary-btn:active{background:var(--purple-dark);}
.primary-btn:disabled{opacity:.5; cursor:default;}

/* ---------- Completion screen (day 15) ---------- */
.completion{text-align:center; padding:10px 0;}
.completion .big-icon{font-size:44px; margin-bottom:6px;}
.compare-ratings{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:22px 0; flex-wrap:wrap;
}
.compare-box{background:var(--purple-tint); border-radius:12px; padding:16px 22px; min-width:90px;}
.compare-box .label{font-size:11px; color:var(--purple-dark); font-weight:700; margin-bottom:4px;}
.compare-box .value{font-size:28px; font-weight:800; color:var(--navy);}

footer{
  text-align:center;
  color:var(--gray);
  font-size:12px;
  font-style:italic;
  padding:26px 20px 40px;
}

.reset-link{
  display:block;
  text-align:center;
  color:var(--gray);
  font-size:11.5px;
  margin-top:6px;
  cursor:pointer;
  text-decoration:underline;
  background:none;
  border:none;
}