/* ============================================================
   proyecto.css — Guía del proyecto MER extendido (semana 6)
   QueryLab · Dr. César Ortiz Méndez
   ============================================================ */
main.main{ min-width:0; }
.pj-route{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin:8px 0 6px; counter-reset:s; }
.pj-step{ display:flex; gap:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg-elev); padding:10px 12px; position:relative; }
.pj-step.ok{ border-color:#15402c; } .pj-step.todo{ border-color:#3a2f12; }
.pj-sn{ flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; border:1px solid var(--dim); color:var(--muted); }
.pj-step.ok .pj-sn{ background:#0d2018; border-color:var(--phosphor); color:var(--phosphor); }
.pj-step.todo .pj-sn{ border-color:var(--amber); color:var(--amber); }
.pj-sb{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pj-sb b{ color:#dce6f0; font-size:12.5px; } .pj-sb small{ color:var(--muted); font-size:11px; }
.pj-sl{ display:flex; flex-wrap:wrap; gap:8px; font-size:11px; margin-top:2px; }
.pj-dnote{ color:var(--muted); font-size:11.5px; margin-bottom:6px; }
.pj-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start; }
.pj-form{ border:1px solid var(--line); border-radius:8px; background:var(--bg-elev); padding:14px 16px; min-width:0; }
.pj-side{ border:1px solid var(--line); border-radius:8px; background:var(--bg-elev); padding:12px; position:sticky; top:52px; max-height:calc(100vh - 64px); overflow:auto; }
.pj-sec{ margin:18px 0 8px; border-top:1px solid var(--line); padding-top:12px; }
.pj-sec:first-child{ margin-top:0; border-top:none; padding-top:0; }
.pj-sec h3{ margin:0; color:var(--phosphor); font-size:14px; }
.pj-sec p{ margin:4px 0 0; color:var(--muted); font-family:var(--sans); font-size:12.5px; }
.pj-field > span{ display:flex; justify-content:space-between; gap:8px; }
.pj-field .ch-ta{ font-size:13px; }
.pj-cnt{ color:var(--dim); font-size:10px; } .pj-cnt.ok{ color:var(--phosphor); }
.pj-grid3{ display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:10px; }
.pj-list{ display:flex; flex-direction:column; gap:4px; }
.pj-urow{ display:grid; grid-template-columns:200px minmax(0,1fr) 26px; gap:8px; align-items:end; }
.pj-rrow{ display:grid; grid-template-columns:30px minmax(0,1fr) 26px; gap:8px; align-items:end; }
.pj-urow .ch-mini, .pj-rrow .ch-mini{ height:30px; margin-bottom:9px; }
.pj-rn{ color:var(--magenta); font-weight:700; font-size:12px; padding-bottom:16px; }
.pj-btns{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.pj-empty{ border-left:2px solid var(--amber); padding:6px 10px; color:#e9cf9a; font-family:var(--sans); font-size:12.5px; margin:6px 0; }
.pj-total{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-bottom:8px; }
.pj-total > div{ display:flex; flex-direction:column; }
.pj-big{ font-size:26px; font-weight:700; color:var(--phosphor); line-height:1; }
.pj-total small{ color:var(--muted); font-size:10.5px; }
.pj-total p{ flex-basis:100%; margin:0; color:var(--muted); font-family:var(--sans); font-size:11.5px; }
.pj-rub{ display:flex; flex-direction:column; gap:8px; }
.pj-crit{ border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:#0a1320; display:flex; flex-direction:column; gap:4px; }
.pj-ch{ display:flex; justify-content:space-between; gap:8px; } .pj-ch b{ color:#dce6f0; font-size:12px; } .pj-w{ color:var(--muted); font-size:11px; }
.pj-cl{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .pj-pts{ color:#dce6f0; font-size:11px; }
.pj-why{ color:var(--muted); font-family:var(--sans); font-size:11.5px; line-height:1.45; }
.pj-lv{ display:inline-block; border-radius:99px; padding:1px 8px; font-size:10.5px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.pj-lv.l100{ color:var(--phosphor); border-color:#15402c; background:#0d2018; }
.pj-lv.l80{ color:var(--cyan); border-color:#164257; }
.pj-lv.l60{ color:var(--amber); border-color:#4a3810; }
.pj-lv.l30, .pj-lv.l0{ color:var(--magenta); border-color:#5a1f3a; }
.pj-apa{ display:flex; gap:5px; align-items:center; margin-top:5px; color:var(--muted); font-size:11px; cursor:pointer; }
.pj-sel{ font-size:11px !important; padding:4px 6px !important; }
.pj-extras{ margin-top:10px; font-size:12px; } .pj-extras b{ color:#dce6f0; }
.pj-extras ul{ list-style:none; margin:6px 0 0; padding:0; font-family:var(--sans); font-size:12px; color:#bac8d6; }
.pj-extras li{ margin:4px 0; } .pj-extras li span{ color:var(--dim); } .pj-extras li.ok span{ color:var(--phosphor); }
.pj-msg{ border:1px solid #5a1f3a; background:#1d0e16; color:#ff9cc8; border-radius:5px; padding:6px 10px; font-size:12px; margin-bottom:8px; }
.pj-note{ color:var(--muted); font-family:var(--sans); font-size:11.5px; line-height:1.5; }
.pj-note code{ color:var(--phosphor); }
/* pestañas */
.pj-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.pj-tabs a{ border:1px solid var(--line); border-radius:8px; padding:8px 14px; background:var(--bg-elev); color:var(--text); font-weight:600; font-size:13px; }
.pj-tabs a small{ display:block; color:var(--muted); font-weight:400; font-size:10.5px; }
.pj-tabs a.on{ border-color:var(--phosphor); color:var(--phosphor); background:#0d2018; }
/* desafío 3 */
.pj3-issues{ list-style:none; margin:6px 0; padding:0; font-family:var(--sans); font-size:12.5px; }
.pj3-issues li{ margin:3px 0; color:#e9cf9a; } .pj3-issues li.error{ color:#ff9cc8; } .pj3-issues li span{ font-weight:700; }
.pj3-ok{ color:var(--phosphor); font-size:12.5px; margin:6px 0; }
.pj3-tables{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin:6px 0; }
.pj3-t{ border:1px solid #2a4a78; border-radius:5px; overflow:hidden; background:#0b1524; font-size:11.5px; }
.pj3-th{ background:#4472c4; color:#fff; font-weight:700; padding:4px 8px; }
.pj3-tb{ padding:5px 8px; line-height:1.55; color:#cdd9e6; } .pj3-tb small{ color:var(--dim); font-size:9.5px; } .pj3-tb .fk{ color:var(--amber); }
.pj3-tb u{ text-decoration-color:var(--phosphor); }
.pj3-rules{ margin:6px 0 8px; font-family:var(--sans); font-size:12.5px; color:#bac8d6; }
.pj3-rules summary{ cursor:pointer; color:var(--cyan); } .pj3-rules ol{ margin:6px 0; padding-left:20px; } .pj3-rules li{ margin:3px 0; }
.pj3-norm{ border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:8px 0; background:#0a1320; }
.pj3-nh{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .pj3-nh b{ color:#dce6f0; } .pj3-nh small{ color:var(--muted); flex:1; font-size:10.5px; }
.pj3-nn{ font-family:var(--sans); font-size:12px; color:#a9b8c8; } .pj3-nn .bad{ color:#ff9cc8; } .pj3-nn .ok{ color:var(--phosphor); }
.pj-code{ font-family:var(--mono) !important; font-size:12px !important; }
.pj3-diag{ background:#fff; border-radius:6px; padding:8px; overflow:auto; }
.pj3-grid{ border:1px solid var(--line); border-radius:6px; margin:8px 0; overflow:hidden; }
.pj3-gh{ display:flex; gap:10px; align-items:center; padding:6px 10px; background:#0b1421; } .pj3-gh b{ color:#dce6f0; flex:0 0 auto; }
.pj3-cnt{ color:var(--muted); font-size:11px; flex:1; }
.pj3-gw{ overflow:auto; }
.pj3-gw table{ border-collapse:collapse; width:100%; font-size:11.5px; }
.pj3-gw th, .pj3-gw td{ border-top:1px solid var(--line); border-right:1px solid var(--line); padding:0; }
.pj3-gw th{ color:var(--cyan); padding:4px 6px; text-align:left; white-space:nowrap; font-weight:600; }
.pj3-gw th.pk{ color:var(--phosphor); text-decoration:underline; } .pj3-gw th.fk{ color:var(--amber); }
.pj3-gw td.n{ color:var(--dim); text-align:center; width:26px; font-size:10.5px; }
.pj3-cell{ width:100%; min-width:90px; background:transparent; border:none; color:var(--text); font-family:var(--mono); font-size:11.5px; padding:5px 6px; outline:none; }
.pj3-cell:focus{ background:#0d2018; }
.pj3-counts{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; font-size:11px; }
.pj3-counts span{ border:1px solid var(--line); border-radius:99px; padding:2px 9px; } .pj3-counts .ok{ color:var(--phosphor); border-color:#15402c; } .pj3-counts .bad{ color:var(--amber); }
.pj3-q{ border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:8px 0; background:#0a1320; }
@media (max-width: 1100px){
  .pj-wrap{ grid-template-columns:1fr; } .pj-side{ position:static; max-height:none; }
  .pj-grid3{ grid-template-columns:1fr; } .pj-urow{ grid-template-columns:1fr 26px; } .pj-urow > :first-child{ grid-column:1 / -1; }
}