/* app.css source lines: 33-42, 115-145, 146-157, 158-164, 194-203, 303-327, 445-520, 676-725 — progress bar, eval tables, scale buttons, objectives, nivel badges, instrument list, fin screen */
/* ── PROGRESS BAR ────────────────────────────────── */
.pbar{background:var(--surf);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--bord);padding:0 28px;display:none}
.psteps{display:flex;max-width:900px;margin:0 auto}
.pstep{flex:1;padding:11px 8px;text-align:center;font-size:var(--fs-12);font-weight:500;color:var(--mt);border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s;letter-spacing:.01em}
.pstep.active{color:var(--link-strong);border-bottom-color:var(--copper);font-weight:700}
.pstep.done{color:var(--ok-strong)}
.pstep .sn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--surf-hi);font-size:var(--fs-12);font-weight:700;margin-right:5px;font-family:var(--mono);color:var(--mt)}
.pstep.active .sn{background:var(--copper);color:var(--on-accent);box-shadow:0 0 8px color-mix(in srgb, var(--copper) 30%, transparent)}
.pstep.done .sn{background:var(--ok-dim);color:var(--ok-strong);border:1px solid var(--ok-bord)}

/* ── EVAL TABLES ─────────────────────────────────── */
.legend{font-size:var(--fs-12);color:var(--mt);background:var(--surf2);border:1px solid var(--bord2);border-radius:var(--r-xs);padding:9px 14px;margin-bottom:16px;line-height:1.6}
.ecat{margin-bottom:14px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--bord)}
.cath{background:var(--copper-dim);border-bottom:1px solid var(--copper-border);color:var(--link-strong);font-size:var(--fs-12);font-weight:700;padding:9px 16px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.eitem{display:flex;align-items:center;padding:14px 16px;border-top:1px solid var(--bord2);gap:12px;background:var(--surf2);transition:background var(--dur-2);flex-wrap:wrap}
.eitem:first-of-type{border-top:none}
.eitem:hover{background:var(--surf-hover)}
.inum{font-size:var(--fs-12);color:var(--mt);min-width:22px;font-weight:600;padding-top:2px;font-family:var(--mono)}
.itext{flex:1;font-size:13.5px;line-height:1.6;color:var(--tx2);min-width:180px}
.ictrl{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.icomment{width:100%;flex-basis:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--bord2);border-radius:var(--r-xs);font-size:12px;font-family:var(--font);color:var(--tx2);resize:vertical;min-height:38px;max-height:140px;line-height:1.55;transition:border-color .2s;background:var(--surf2);display:block}
.icomment:focus{outline:none;border-color:var(--copper-border);box-shadow:0 0 0 3px var(--copper-dim);background:var(--surf-hover)}
.icomment::placeholder{color:var(--mt);font-style:italic}

/* Scale 0-3 + N/O */
.sb{min-width:64px;min-height:60px;border:2px solid var(--bord);border-radius:var(--r-ctl);background:var(--surf2);font-size:22px;font-weight:700;font-family:var(--mono);color:var(--mt);cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;padding:0 8px}
.sb:hover{border-color:var(--copper-border);color:var(--link-strong);background:var(--copper-dim)}
.sb.s0{background:var(--rj);border-color:color-mix(in srgb, var(--rj) 75%, black);color:var(--on-accent);transform:scale(1.08);box-shadow:0 4px 12px color-mix(in srgb, var(--rj) 35%, transparent)}
.sb.s1{background:var(--am);border-color:color-mix(in srgb, var(--am) 75%, black);color:var(--on-accent);transform:scale(1.08);box-shadow:0 4px 12px color-mix(in srgb, var(--am) 35%, transparent)}
.sb.s2{background:var(--vd);border-color:color-mix(in srgb, var(--vd) 75%, black);color:var(--on-accent);transform:scale(1.08);box-shadow:0 4px 12px color-mix(in srgb, var(--vd) 35%, transparent)}
.sb.s3{background:var(--info);border-color:color-mix(in srgb, var(--info) 75%, black);color:var(--on-accent);transform:scale(1.08);box-shadow:0 4px 12px color-mix(in srgb, var(--info) 35%, transparent)}
.sb.sno{background:var(--mt);border-color:color-mix(in srgb, var(--mt) 75%, black);color:var(--on-accent);transform:scale(1.08)}

/* Apto/En Desarrollo/No Apto/N/A */
.ab{padding:10px 16px;border:2px solid var(--bord);border-radius:var(--r-ctl);background:var(--surf2);font-size:12px;font-weight:700;font-family:var(--mono);cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none;color:var(--mt);min-height:44px;display:inline-flex;align-items:center}
.ab:hover{border-color:var(--copper-border);color:var(--link-strong);background:var(--copper-dim)}
.ab.sapto{background:var(--vd);border-color:color-mix(in srgb, var(--vd) 75%, black);color:var(--on-accent);box-shadow:0 3px 10px color-mix(in srgb, var(--vd) 30%, transparent)}
.ab.sdes{background:var(--am);border-color:color-mix(in srgb, var(--am) 75%, black);color:var(--on-accent);box-shadow:0 3px 10px color-mix(in srgb, var(--am) 30%, transparent)}
.ab.snoa{background:var(--rj);border-color:color-mix(in srgb, var(--rj) 75%, black);color:var(--on-accent);box-shadow:0 3px 10px color-mix(in srgb, var(--rj) 30%, transparent)}
.ab.sna{background:var(--mt);border-color:color-mix(in srgb, var(--mt) 75%, black);color:var(--on-accent)}

/* ── SECTION C (preguntas) ───────────────────────── */
.qblock{background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card);padding:18px;margin-bottom:10px;transition:border-color .2s,box-shadow .2s;animation:fadeUp .3s ease both}
.qblock:hover{border-color:var(--copper-border);box-shadow:0 2px 12px color-mix(in srgb, var(--copper) 8%, transparent)}
.qnum{font-size:var(--fs-12);color:var(--link-strong);font-weight:700;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.qtext{font-size:13px;font-weight:600;color:var(--tx);margin-bottom:14px;line-height:1.6;letter-spacing:-.01em}
.alts{display:flex;flex-direction:column;gap:6px}
.aopt{display:flex;align-items:flex-start;gap:11px;padding:9px 13px;border:1px solid var(--bord);border-radius:var(--r-xs);cursor:pointer;transition:all .15s;font-size:12.5px;background:var(--surf)}
.aopt:hover{border-color:var(--copper-border);background:var(--copper-dim)}
.aopt.selected{border-color:var(--copper);background:var(--copper-dim);box-shadow:0 0 0 1px var(--copper-border) inset}
.aletter{font-weight:700;font-family:var(--mono);color:var(--link-strong);min-width:16px;flex-shrink:0;padding-top:1px;font-size:12px}
.atext{color:var(--tx2);line-height:1.55}

/* ── LONGITUDINAL ────────────────────────────────── */
.litem{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;padding:10px 16px;border-top:1px solid var(--bord2);font-size:12px}
.dpair{display:flex;gap:4px;align-items:center}
.dpair input[type=date]{width:108px;padding:4px 8px;font-size:var(--fs-12)}
.dpair select{width:50px;padding:4px 3px;font-size:var(--fs-12)}
/* Local override: base.css styles date/select on white — theme-correct them here
   (base.css is shared/off-limits for this slice). */
.dpair input[type=date],.dpair select{background:var(--surf2);color:var(--tx);border-color:var(--bord2)}
.avgdisp{background:var(--surf2);border:1px solid var(--bord);border-radius:var(--r-xs);padding:4px 9px;font-size:var(--fs-12);font-weight:700;font-family:var(--mono);color:var(--tx2);min-width:45px;text-align:center}

/* ── OBJECTIVES BANNER ───────────────────────────── */
.obj-banner{background:color-mix(in srgb, var(--copper) 6%, transparent);border:1px solid var(--copper-border);border-radius:var(--r-sm);padding:16px 18px;margin-bottom:18px}
.obj-banner-title{font-size:var(--fs-12);font-weight:700;font-family:var(--mono);color:var(--link-strong);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;display:flex;align-items:center;gap:7px}
.obj-banner-title::before{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--copper)}
.obj-list{display:flex;flex-direction:column;gap:6px}
.obj-item{display:flex;flex-direction:column;gap:3px;padding:9px 12px;background:var(--surf);border:1px solid var(--bord2);border-radius:var(--r-xs)}
.obj-item strong{color:var(--tx);font-size:12px;font-weight:600;letter-spacing:-.01em}
.obj-item span{color:var(--mt);font-size:var(--fs-12);line-height:1.55}
.rpt-obj .obj-item{background:var(--surf2)}

/* ── NIVEL BADGE + DESCRIPCIÓN ───────────────────── */
.nivel-section{margin-bottom:32px;animation:fadeUp .4s var(--ease-out) both}
.nivel-hdr{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;padding:18px 20px;background:var(--surf);border:1px solid var(--bord);border-radius:var(--r-card)}
.nivel-badge{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-3);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.02em;line-height:1}
.nivel-badge .nb-num{font-size:20px;font-weight:700;line-height:1}
.nivel-badge .nb-lbl{font-size:var(--fs-12);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.nivel-n1 .nivel-badge{background:color-mix(in srgb, var(--lv-N1) 14%, transparent);color:var(--lv-N1)}
.nivel-n2 .nivel-badge{background:color-mix(in srgb, var(--lv-N2) 14%, transparent);color:var(--lv-N2)}
.nivel-n3 .nivel-badge{background:color-mix(in srgb, var(--lv-N3) 14%, transparent);color:var(--lv-N3)}
.nivel-info{flex:1}
.nivel-name{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.02em;margin-bottom:3px}
.nivel-desc{font-size:12px;color:var(--mt);line-height:1.55;margin-bottom:8px}
.nivel-meta{display:flex;gap:8px;flex-wrap:wrap}
.nmeta-pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-12);font-weight:600;padding:3px 10px;border-radius:var(--r-pill);font-family:var(--mono)}
.nmeta-pill.quien{background:color-mix(in srgb, var(--lv-N1) 10%, transparent);color:var(--lv-N1);border:1px solid color-mix(in srgb, var(--lv-N1) 25%, transparent)}
.nivel-n2 .nmeta-pill.quien{background:color-mix(in srgb, var(--lv-N2) 10%, transparent);color:var(--lv-N2);border-color:color-mix(in srgb, var(--lv-N2) 25%, transparent)}
.nivel-n3 .nmeta-pill.quien{background:color-mix(in srgb, var(--lv-N3) 10%, transparent);color:var(--lv-N3);border-color:color-mix(in srgb, var(--lv-N3) 25%, transparent)}
.nmeta-pill.rubrica{background:var(--surf-hi);color:var(--tx2);border:1px solid var(--bord2)}

/* Banner de contexto dentro de la evaluación */
.eval-nivel-banner{display:flex;align-items:center;gap:12px;background:var(--surf2);border:1px solid var(--bord2);border-radius:var(--r-sm);padding:12px 16px;margin-bottom:18px}
.eval-nivel-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.eval-nivel-text{font-size:var(--fs-12);color:var(--tx2);line-height:1.5}
.eval-nivel-text strong{color:var(--tx);font-weight:700}

/* ── INSTRUMENT LIST ──────────────────────────────── */
.il-wrap{ padding: 0; animation: fadeUp .3s ease both; }
.il-top-bar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px 16px; border-bottom: 1px solid var(--bord);
  background: var(--surf); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  position: sticky; top: 56px; z-index: 10;
}
.il-top-role{ display: flex; align-items: center; gap: 12px; }
.il-top-icon{
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.il-top-icon.mg{ background: color-mix(in srgb, var(--copper) 12%, transparent); }
.il-top-icon.ap{ background: color-mix(in srgb, var(--info) 12%, transparent); }
.il-top-name{ font-size: 15px; font-weight: 700; color: var(--tx); }
.il-top-area{ font-size: 12px; color: var(--mt); margin-top: 1px; }
.il-progress-bar-wrap{ display: flex; align-items: center; gap: 10px; }
.il-progress-label{ font-size: 12px; color: var(--mt); white-space: nowrap; }
.il-progress-track{
  width: 120px; height: 6px; background: var(--bord2); border-radius: 10px; overflow: hidden;
}
.il-progress-fill{ height: 100%; border-radius: 10px; background: var(--vd); transition: width .4s; }
.il-back-btn{
  font-size:12px; font-weight:600; color:var(--mt); cursor:pointer;
  padding:8px 14px; border:1px solid var(--bord2); border-radius:10px;
  background:var(--surf2); transition:all .15s; font-family:var(--font);
  white-space:nowrap;
}
.il-back-btn:hover{ color:var(--tx); background:var(--surf-hi); }

.il-content{ padding: 28px 40px 80px; }
.il-year-block{margin-bottom:28px}
.il-year-hdr{
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; margin-top: 28px;
}
.il-year-hdr:first-child{ margin-top: 0; }
.il-year-dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.il-year-dot.mg{ background: var(--copper); }
.il-year-dot.ap{ background: var(--info); }
.il-year-label{ font-size: var(--fs-12); font-weight: 700; color: var(--tx2); letter-spacing: .08em; text-transform: uppercase; }

.il-card{
  background: var(--surf); border: 1px solid var(--bord); border-radius: var(--r-card);
  padding: 20px 24px; display: flex; align-items: center; gap: 18px;
  cursor: pointer; transition: all .2s ease; margin-bottom: 10px;
  min-height: 80px;
}
.il-card:hover{ transform: translateY(-2px); box-shadow: var(--shl); }
.il-card.mg:hover{ border-color: color-mix(in srgb, var(--copper) 40%, transparent); }
.il-card.ap:hover{ border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.il-card--done{ cursor: default; opacity: .72; background: color-mix(in srgb, var(--vd) 6%, var(--surf)); border-color: color-mix(in srgb, var(--vd) 30%, transparent); }
.il-card--done:hover{ transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--vd) 40%, transparent); }
.il-done-label{ background: color-mix(in srgb, var(--vd) 14%, transparent) !important; color: var(--ok-strong) !important; }
.il-badge{
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: var(--mono); letter-spacing: .02em;
}
.il-badge.n1{ background: color-mix(in srgb, var(--lv-N1) 14%, transparent); color: var(--lv-N1); }
.il-badge.n2{ background: color-mix(in srgb, var(--lv-N2) 14%, transparent); color: var(--lv-N2); }
.il-badge.n3{ background: color-mix(in srgb, var(--lv-N3) 14%, transparent); color: var(--lv-N3); }
.il-info{ flex: 1; }
.il-name{ font-size: 15px; font-weight: 700; color: var(--tx); margin-bottom: 4px; line-height: 1.3; }
.il-type{ font-size: 12.5px; color: var(--mt); }
.il-arrow{
  flex-shrink: 0; padding: 8px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; transition: all .2s;
  display: flex; align-items: center; gap: 5px;
}
.il-card.mg .il-arrow{ background: color-mix(in srgb, var(--copper) 12%, transparent); color: var(--link-strong); }
.il-card.ap .il-arrow{ background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info-strong); }
.il-card:hover .il-arrow{ padding-right: 10px; }

@media(max-width:680px){.il-top-bar{padding:16px 20px;flex-wrap:wrap;gap:12px}.il-content{padding:20px 20px 60px}.il-progress-track{width:80px}}

/* ── PANTALLA DE CONFIRMACIÓN (finalizar evaluación) ──── */
.fin-wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 56px);
  padding:40px 20px;
  background: var(--surf2);
  animation: fadeUp .3s ease both;
}
.fin-card{
  background:var(--surf); border:1px solid var(--bord);
  border-radius:var(--r-card); padding:48px 40px;
  max-width:480px; width:100%;
  text-align:center;
}
.fin-icon{ font-size:56px; margin-bottom:20px; line-height:1; }
.fin-title{ font-size:22px; font-weight:700; color:var(--tx); margin:0 0 10px; }
.fin-sub{
  font-size:13.5px; color:var(--tx2);
  margin:0 0 28px; line-height:1.65;
}
.fin-meta{
  background:var(--surf2); border:1px solid var(--bord2);
  border-radius:var(--r-3); padding:16px 20px;
  margin-bottom:28px; text-align:left;
}
.fin-meta-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px solid var(--bord2);
  font-size:13px;
}
.fin-meta-row:last-child{ border-bottom:none; }
.fin-meta-key{ color:var(--tx2); flex-shrink:0; margin-right:12px; }
.fin-meta-val{ color:var(--tx); font-weight:600; text-align:right; }
.fin-result-badge{
  display:inline-block; padding:4px 14px; border-radius:var(--r-pill);
  color:var(--on-accent); font-size:12px; font-weight:700; letter-spacing:.03em;
}
.fin-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px;
  background:var(--copper); color:var(--on-accent);
  border:none; border-radius:var(--r-ctl);
  font-size:14px; font-weight:700; cursor:pointer;
  transition:background .15s, transform .1s;
  width:100%;
  justify-content:center;
}
.fin-btn:hover{ background:var(--copper-hover); transform:translateY(-1px); }