/* ============================================================================
 *  animacions.css — Estils propis de les animacions conceptuals (GSAP), PXSI II
 * ==========================================================================*/

.anim-controls{display:flex;justify-content:center;margin-top:.8rem}
.anim-replay{
  padding:.5rem 1rem;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);
  font-size:.85rem;font-weight:600;color:var(--text-dim);
}
.anim-replay:hover{color:var(--accent);border-color:var(--accent)}

/* U01 (reforç): capses de variables i conversió amb input() */
.varbox-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.varbox-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;min-height:80px;align-items:center}
.varbox{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-width:90px;padding:.6rem .8rem;border-radius:8px;background:var(--bg-card);
  border:2px solid var(--border);font-family:var(--mono);opacity:0;transform:translateY(10px);
}
.varbox-name{font-size:.78rem;color:var(--text-dim)}
.varbox-value{font-size:1rem;font-weight:700;color:var(--accent)}
.varbox-type{font-size:.7rem;color:var(--text-dim);font-style:italic}
.varbox-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U02 (reforç): bucle amb comptador i suma acumulada */
.loopcounter-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.loopcounter-track{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;min-height:50px;align-items:center}
.loopcounter-item{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;
  background:var(--bg-card);border:2px solid var(--border);font-family:var(--mono);font-weight:700;
  color:var(--text-dim);opacity:.55;
}
.loopcounter-item.current{border-color:var(--accent);color:var(--accent)}
.loopcounter-item.done{opacity:1;border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.loopcounter-sum{text-align:center;margin-top:.8rem;font-family:var(--mono);font-size:.95rem;color:var(--text)}
.loopcounter-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.5rem;min-height:1.4em}

/* U03 (reforç): funció com a "màquina" (paràmetres in, return out) */
.fnmachine-stage{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem 0;flex-wrap:wrap}
.fnmachine-io{min-width:90px;min-height:40px;display:flex;align-items:center;justify-content:center}
.fnmachine-box{
  min-width:190px;border-radius:12px;background:var(--bg-card);border:2px solid var(--border);
  padding:.7rem 1rem;font-family:var(--mono);text-align:center;transition:border-color .2s;
}
.fnmachine-name{font-size:.85rem;font-weight:700;color:var(--text)}
.fnmachine-body{font-size:.8rem;color:var(--text-dim);margin-top:.3rem}
.fnmachine-chip{
  padding:.4rem .7rem;border-radius:8px;background:var(--bg);border:2px solid var(--accent);
  font-family:var(--mono);font-size:.85rem;color:var(--accent);
}
.fnmachine-chip-out{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.fnmachine-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U04: capsa de dades (diccionari/pila/cua) */
.databox-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.databox-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;min-height:70px;align-items:flex-end}
.databox-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:70px;padding:.6rem .8rem;border-radius:8px;background:var(--bg-card);
  border:2px solid var(--border);font-family:var(--mono);font-size:.85rem;
  color:var(--accent);opacity:0;transform:translateY(10px);
}
.databox-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U05: fitxa d'objecte (POO) */
.objcard-stage{display:flex;justify-content:center;padding:1rem 0}
.objcard{
  width:220px;border-radius:12px;background:var(--bg-card);border:2px solid var(--accent);
  overflow:hidden;opacity:0;transform:scale(.9);
}
.objcard-head{background:var(--accent);color:#fff;padding:.5rem .8rem;font-weight:700;font-family:var(--mono);font-size:.9rem}
.objcard-body{padding:.7rem .9rem;font-family:var(--mono);font-size:.82rem;color:var(--text-dim)}
.objcard-body .attr{margin:.25rem 0}
.objcard-body .attr b{color:var(--text)}
.objcard-msg{
  text-align:center;margin-top:.8rem;font-family:var(--mono);font-size:.85rem;
  color:var(--accent);min-height:1.4em;opacity:0;
}

/* U06: barres d'ordenació */
.sortbars-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.sortbars-row{display:flex;align-items:flex-end;justify-content:center;gap:.5rem;height:140px}
.sortbar{width:28px;background:var(--accent);border-radius:4px 4px 0 0;position:relative;transition:background .15s}
.sortbar.comparing{background:var(--accent2)}
.sortbar.candidate{background:#f59e0b}
.sortbar.sorted{background:var(--accent2, #22c55e)}
.sortbars-label{text-align:center;margin-top:.7rem;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em}

/* U01: operadors (aritmètics/comparació/lògics) */
.opdemo-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.opdemo-row{display:flex;align-items:center;justify-content:center;gap:.7rem;min-height:56px;flex-wrap:wrap;font-family:var(--mono)}
.opdemo-chip{padding:.5rem .8rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);font-weight:700;color:var(--text);opacity:0;transform:scale(.8)}
.opdemo-sym{font-size:1.1rem;font-weight:700;color:var(--text-dim);opacity:0}
.opdemo-result{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.opdemo-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U02: if/elif/else — camins que es marquen segons la condició */
.ifdecision-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.ifdecision-value{text-align:center;font-family:var(--mono);font-weight:700;color:var(--text);margin-bottom:.9rem}
.ifdecision-branches{display:flex;flex-direction:column;gap:.5rem;max-width:420px;margin:0 auto}
.ifdecision-branch{
  padding:.55rem .8rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.85rem;color:var(--text-dim);opacity:.55;transition:opacity .2s;
}
.ifdecision-branch.active{opacity:1;border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.ifdecision-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U02: while — condició comprovada abans de cada volta */
.whileloop-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;text-align:center}
.whileloop-check{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.85rem;color:var(--text-dim);min-height:1.6em}
.whileloop-check.ok{color:var(--accent2, #22c55e)}
.whileloop-check.stop{color:#ef4444}
.whileloop-value{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--accent);margin:.5rem 0}
.whileloop-label{font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em;margin-top:.4rem}

/* U02: break / continue */
.bcloop-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.bcloop-row{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;min-height:44px}
.bcloop-item{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;
  background:var(--bg-card);border:2px solid var(--border);font-family:var(--mono);font-weight:700;
  color:var(--text-dim);
}
.bcloop-item.current{border-color:var(--accent);color:var(--accent)}
.bcloop-item.done{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.bcloop-item.skipped{opacity:.35;text-decoration:line-through}
.bcloop-item.stopped{opacity:.2}
.bcloop-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U03: abast (scope) — bombolla de la funció vs variable global */
.scope-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.3rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.scope-global-box{
  padding:.5rem .9rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--accent);
  font-family:var(--mono);font-size:.85rem;color:var(--accent);
}
.scope-bubble{
  border:2px dashed var(--border);border-radius:14px;padding:1rem 1.4rem;min-width:200px;
  text-align:center;opacity:0;transform:scale(.9);
}
.scope-bubble-title{font-family:var(--mono);font-size:.78rem;color:var(--text-dim);margin-bottom:.5rem}
.scope-local-var{
  display:inline-block;padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);
  border:2px solid #f59e0b;font-family:var(--mono);font-size:.85rem;color:#f59e0b;
}
.scope-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em}

/* U04: diccionaris (parelles clau-valor) */
.dictbox-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.dictbox-row{display:flex;flex-direction:column;gap:.5rem;max-width:260px;margin:0 auto}
.dictbox-pair{
  display:flex;justify-content:space-between;gap:.6rem;padding:.5rem .8rem;border-radius:8px;
  background:var(--bg-card);border:2px solid var(--border);font-family:var(--mono);font-size:.85rem;
  opacity:0;transform:translateX(-10px);
}
.dictbox-pair .k{color:var(--text-dim)}
.dictbox-pair .v{color:var(--accent);font-weight:700}
.dictbox-pair.hit{border-color:var(--accent2, #22c55e)}
.dictbox-pair.hit .v{color:var(--accent2, #22c55e)}
.dictbox-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U04: tuples immutables vs. llistes mutables */
.tuplebox-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;align-items:center}
.tuplebox-row{display:flex;gap:.6rem}
.tuplebox-item{
  display:flex;align-items:center;justify-content:center;gap:.3rem;min-width:52px;padding:.5rem .6rem;
  border-radius:8px;background:var(--bg-card);border:2px solid var(--border);font-family:var(--mono);font-weight:700;color:var(--text);
}
.tuplebox-item.locked{border-color:var(--text-dim)}
.tuplebox-result{font-family:var(--mono);font-size:.85rem;min-height:1.4em;text-align:center}
.tuplebox-result.err{color:#ef4444}
.tuplebox-result.ok{color:var(--accent2, #22c55e)}
.tuplebox-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em}

/* U05: dues instàncies independents (mini fitxes) */
.objcard-pair{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;padding:1rem 0}
.objcard-mini{
  width:150px;border-radius:12px;background:var(--bg-card);border:2px solid var(--border);
  overflow:hidden;font-family:var(--mono);font-size:.78rem;
}
.objcard-mini .head{background:var(--border);color:var(--text);padding:.4rem .6rem;font-weight:700}
.objcard-mini.hl .head{background:var(--accent);color:#fff}
.objcard-mini .body{padding:.5rem .6rem;color:var(--text-dim)}
.objcard-mini .body b{color:var(--text)}
.objcard-mini .body b.changed{color:var(--accent2, #22c55e)}

/* U05: __str__ — object en brut vs. format personalitzat */
.strdemo-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.strdemo-line{
  font-family:var(--mono);font-size:.85rem;padding:.6rem .9rem;border-radius:8px;
  background:var(--bg-card);border:2px solid var(--border);opacity:0;transform:translateY(8px);
}
.strdemo-line.raw{color:var(--text-dim);font-style:italic}
.strdemo-line.custom{color:var(--accent2, #22c55e);border-color:var(--accent2, #22c55e);font-weight:700}
.strdemo-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em}

/* U06: cerca lineal */
.searchrow-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.searchrow-row{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;min-height:46px}
.searchrow-item{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:8px;
  background:var(--bg-card);border:2px solid var(--border);font-family:var(--mono);font-weight:700;color:var(--text-dim);
}
.searchrow-item.checking{border-color:var(--accent);color:var(--accent)}
.searchrow-item.checked{opacity:.4}
.searchrow-item.found{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e);opacity:1}
.searchrow-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U06: cerca binària */
.binsearch-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.binsearch-row{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;min-height:66px;align-items:flex-end}
.binsearch-col{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.binsearch-ptr{font-family:var(--mono);font-size:.7rem;color:var(--text-dim);min-height:1.3em;font-weight:700}
.binsearch-item{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;
  background:var(--bg-card);border:2px solid var(--border);font-family:var(--mono);font-weight:700;color:var(--text-dim);
  opacity:.35;
}
.binsearch-item.inrange{opacity:1}
.binsearch-item.mid{border-color:var(--accent);color:var(--accent)}
.binsearch-item.found{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.binsearch-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U07: docstring — codi + finestra emergent amb help() */
.docstring-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.docstring-code{background:#0b1220;color:#e6edf3;padding:.8rem 1rem;border-radius:8px;font-family:var(--mono);font-size:.8rem;white-space:pre;overflow-x:auto;margin-bottom:.8rem}
.docstring-popup{
  background:var(--bg-card);border:2px solid var(--accent);border-radius:8px;padding:.7rem .9rem;
  font-family:var(--mono);font-size:.8rem;color:var(--text);opacity:0;transform:translateY(8px);white-space:pre-wrap;
}
.docstring-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U07: llicències — targetes comparant permisos */
.license-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.license-row{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
.license-card{
  width:120px;padding:.6rem .7rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
  text-align:center;opacity:.5;transition:opacity .2s,border-color .2s;
}
.license-card.active{opacity:1;border-color:var(--accent)}
.license-card .name{font-weight:700;font-size:.85rem;color:var(--text)}
.license-card .perm{font-size:.72rem;color:var(--text-dim);margin-top:.4rem}
.license-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U07: versionat — registre de canvis creixent */
.version-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.version-tag{text-align:center;font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--accent);margin-bottom:.6rem}
.version-log{display:flex;flex-direction:column;gap:.4rem;max-width:340px;margin:0 auto}
.version-entry{
  padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);
  font-family:var(--mono);font-size:.78rem;color:var(--text-dim);opacity:0;transform:translateX(-8px);
}

/* U08: eficiència — perfils de maquinari segons la faena */
.efficiency-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.efficiency-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.efficiency-profile{
  width:170px;padding:.7rem .8rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.78rem;color:var(--text-dim);opacity:0;transform:translateY(8px);
}
.efficiency-profile .title{font-weight:700;color:var(--text);margin-bottom:.3rem;font-size:.85rem}
.efficiency-profile.justified{border-color:var(--accent2, #22c55e)}
.efficiency-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U08: pressupost — barres que sumen un total */
.budget-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.budget-row{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;font-family:var(--mono);font-size:.78rem}
.budget-name{width:110px;color:var(--text-dim);flex:none}
.budget-bar-wrap{flex:1;background:var(--bg-card);border-radius:6px;overflow:hidden;height:16px}
.budget-bar{height:100%;width:0;background:var(--accent);border-radius:6px}
.budget-price{width:70px;text-align:right;color:var(--text);flex:none}
.budget-total{text-align:center;font-family:var(--mono);font-weight:700;font-size:.95rem;color:var(--accent2, #22c55e);margin-top:.6rem;opacity:0}

/* U08: decisió de SO per a cada lloc de treball */
.osdecision-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.osdecision-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.osdecision-item{
  width:150px;padding:.7rem .8rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
  text-align:center;font-family:var(--mono);font-size:.78rem;color:var(--text-dim);opacity:0;transform:scale(.9);
}
.osdecision-item .os{font-weight:700;color:var(--accent);margin-top:.3rem;font-size:.85rem}
.osdecision-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U08: VM personal — permisos dins vs. fora */
.vmsandbox-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.3rem}
.vmsandbox-host{border:2px dashed var(--border);border-radius:12px;padding:1rem;text-align:center}
.vmsandbox-host-label{font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-bottom:.4rem}
.vmsandbox-host-status{font-family:var(--mono);font-size:.85rem;color:#ef4444;font-weight:700;margin-bottom:.9rem}
.vmsandbox-vm{border:2px solid var(--accent);border-radius:10px;padding:.9rem;background:var(--bg-card)}
.vmsandbox-vm-label{font-family:var(--mono);font-size:.8rem;color:var(--text);font-weight:700;margin-bottom:.4rem}
.vmsandbox-vm-status{font-family:var(--mono);font-size:.8rem;color:var(--accent2, #22c55e);min-height:1.4em}

/* U09: conversió de base (divisions successives) */
.baseconv-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.baseconv-steps{display:flex;flex-direction:column;gap:.3rem;max-width:280px;margin:0 auto;font-family:var(--mono);font-size:.82rem}
.baseconv-step{padding:.3rem .6rem;border-radius:6px;background:var(--bg-card);color:var(--text-dim);opacity:0;transform:translateX(-8px)}
.baseconv-result{
  text-align:center;font-family:var(--mono);font-weight:700;font-size:1.1rem;color:var(--accent2, #22c55e);
  margin-top:.7rem;opacity:0;
}

/* U09/U10: bits de permisos (octal ↔ rwx), reutilitzat per chmod */
.chmodbits-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.chmodbits-row{display:flex;justify-content:center;gap:1rem}
.chmodbits-group{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.chmodbits-digit{font-family:var(--mono);font-size:1.4rem;font-weight:700;color:var(--accent);opacity:0;transform:scale(.7)}
.chmodbits-rwx{display:flex;gap:.15rem}
.chmodbits-bit{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:5px;
  background:var(--bg-card);border:1px solid var(--border);font-family:var(--mono);font-size:.75rem;
  color:var(--text-dim);opacity:.3;
}
.chmodbits-bit.on{opacity:1;color:var(--accent2, #22c55e);border-color:var(--accent2, #22c55e)}
.chmodbits-who{font-family:var(--mono);font-size:.68rem;color:var(--text-dim)}
.chmodbits-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U09: color hexadecimal — mostra + canals RGB */
.hexcolor-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.hexcolor-swatch{width:70px;height:70px;border-radius:12px;border:2px solid var(--border);background:#333}
.hexcolor-channels{display:flex;gap:.6rem}
.hexcolor-channel{
  padding:.4rem .6rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.8rem;text-align:center;opacity:0;transform:translateY(8px);
}
.hexcolor-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em}

/* U09: binari ↔ octal/hex agrupant bits */
.bitgroup-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.bitgroup-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.bitgroup-group{padding:.4rem .6rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--accent);font-family:var(--mono);font-weight:700;color:var(--accent)}
.bitgroup-digit{padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--accent2, #22c55e);font-family:var(--mono);font-weight:700;color:var(--accent2, #22c55e)}
.bitgroup-arrow{font-size:1.2rem;color:var(--text-dim)}
.bitgroup-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U10: navegar pel sistema de fitxers */
.navpath-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.3rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.navpath-current{font-family:var(--mono);font-size:1.1rem;font-weight:700;color:var(--accent);padding:.5rem 1rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--accent)}
.navpath-cmd{font-family:var(--mono);font-size:.85rem;color:var(--text-dim);min-height:1.4em}

/* U10: gestió bàsica de fitxers (mkdir/touch/cp/mv/rm) */
.minifs-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.minifs-title{text-align:center;font-family:var(--mono);font-size:.85rem;color:var(--text-dim);margin-bottom:.6rem}
.minifs-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;min-height:46px}
.minifs-file{padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--accent);font-family:var(--mono);font-size:.8rem;color:var(--accent)}
.minifs-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U10: canonades (pipes) */
.pipeflow-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;align-items:flex-start;justify-content:center;gap:.8rem}
.pipeflow-col{display:flex;flex-direction:column;align-items:center;gap:.4rem;min-width:120px}
.pipeflow-cmd{font-family:var(--mono);font-size:.78rem;color:var(--text-dim);font-weight:700}
.pipeflow-lines{display:flex;flex-direction:column;gap:.25rem;min-height:150px}
.pipeflow-line{padding:.25rem .5rem;border-radius:6px;background:var(--bg-card);border:1px solid var(--border);font-family:var(--mono);font-size:.75rem;color:var(--text-dim)}
.pipeflow-line.pass{border-color:var(--accent2, #22c55e)}
.pipeflow-line.reject{opacity:.3;text-decoration:line-through}
.pipeflow-line.hit{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e);font-weight:700}
.pipeflow-pipe{font-size:1.4rem;color:var(--text-dim);font-weight:700;align-self:center;margin-top:1.6rem}
.pipeflow-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U10: usuaris i grups */
.usergroup-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.usergroup-users{display:flex;gap:.6rem}
.usergroup-user{
  padding:.4rem .7rem;border-radius:20px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.78rem;color:var(--text);opacity:0;transform:translateY(-8px);
}
.usergroup-group{
  border:2px dashed var(--border);border-radius:12px;padding:.7rem 1rem;min-width:160px;text-align:center;
}
.usergroup-group .title{font-family:var(--mono);font-size:.75rem;color:var(--text-dim);margin-bottom:.4rem}
.usergroup-group-users{display:flex;gap:.4rem;justify-content:center;min-height:30px}
.usergroup-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);min-height:1.4em}

/* U10: cron — rellotge que dispara una tasca */
.cron-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.cron-clock{
  font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--text);
  padding:.5rem 1rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
}
.cron-clock.fire{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.cron-task{
  font-family:var(--mono);font-size:.8rem;color:var(--text-dim);padding:.4rem .7rem;border-radius:8px;
  background:var(--bg-card);opacity:0;
}

/* U11: topologies de xarxa */
.topology-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.topology-diagram{position:relative;width:220px;height:160px;margin:0 auto}
.topology-node{
  position:absolute;width:34px;height:34px;border-radius:50%;background:var(--bg-card);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:1rem;transition:opacity .2s,border-color .2s;
}
.topology-node.center{border-color:var(--accent2, #22c55e)}
.topology-node.down{opacity:.25;border-color:#ef4444}
.topology-line{position:absolute;height:2px;background:var(--border);transform-origin:0 0}
.topology-line.down{background:#ef4444;opacity:.4}
.topology-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U11: adreçament IP */
.ipplan-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.ipplan-row{display:flex;justify-content:space-between;gap:.6rem;max-width:320px;margin:.3rem auto;
  padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);border:1px solid var(--border);
  font-family:var(--mono);font-size:.8rem;opacity:0;transform:translateX(-8px);
}
.ipplan-row .name{color:var(--text-dim)}
.ipplan-row .ip{color:var(--accent);font-weight:700}
.ipplan-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U11: dispositius de xarxa */
.devicematch-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.devicematch-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.devicematch-item{
  width:150px;padding:.6rem .7rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
  text-align:center;font-family:var(--mono);font-size:.75rem;color:var(--text-dim);opacity:.4;transition:opacity .2s,border-color .2s;
}
.devicematch-item.active{opacity:1;border-color:var(--accent)}
.devicematch-item .ico{font-size:1.4rem}
.devicematch-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U11: CDIR — bits de xarxa vs. bits d'host */
.cidrmask-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.cidrmask-bits{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:340px;margin:0 auto}
.cidrmask-bit{
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:3px;
  font-family:var(--mono);font-size:.6rem;font-weight:700;
}
.cidrmask-bit.net{background:var(--accent);color:#fff}
.cidrmask-bit.host{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim)}
.cidrmask-info{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U11: VLSM — repartiment d'un bloc en subxarxes de mides diferents */
.vlsm-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.vlsm-bar{display:flex;width:100%;height:38px;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.vlsm-seg{
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;font-weight:700;
  color:#fff;background:var(--accent);border-right:2px solid var(--bg);
}
.vlsm-seg:nth-child(2){background:#8b5cf6}
.vlsm-seg:nth-child(3){background:#f59e0b}
.vlsm-seg.free{background:var(--bg-card);border:1px dashed var(--border);color:var(--text-dim)}
.vlsm-legend{display:flex;flex-direction:column;gap:.3rem;margin-top:.8rem;font-family:var(--mono);font-size:.75rem;color:var(--text-dim)}
.vlsm-legend-item.free{font-style:italic}
.vlsm-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U11: dispositius — paràmetres de configuració */
.devcfg-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.devcfg-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.devcfg-item{
  width:130px;padding:.6rem .7rem;border-radius:10px;background:var(--bg-card);border:2px solid var(--border);
  text-align:center;font-family:var(--mono);font-size:.75rem;color:var(--text-dim);opacity:.4;transition:opacity .2s,border-color .2s;
}
.devcfg-item.active{opacity:1;border-color:var(--accent)}
.devcfg-item .ico{font-size:1.3rem}
.devcfg-params{display:flex;flex-direction:column;gap:.3rem;margin-top:1rem;max-width:320px;margin-left:auto;margin-right:auto}
.devcfg-param{padding:.35rem .6rem;border-radius:6px;background:var(--bg-card);border:1px solid var(--accent);font-family:var(--mono);font-size:.75rem;color:var(--accent);text-align:center}

/* U12: router — reserva d'IP per MAC (DHCP) */
.dhcp-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.dhcp-device{
  font-family:var(--mono);font-size:.8rem;padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);
  border:2px solid var(--border);opacity:0;transform:translateY(-8px);
}
.dhcp-router{border:2px dashed var(--border);border-radius:10px;padding:.6rem 1rem;font-family:var(--mono);font-size:.78rem;color:var(--text-dim);text-align:center}
.dhcp-result{font-family:var(--mono);font-size:.85rem;color:var(--accent2, #22c55e);min-height:1.4em;text-align:center}

/* U12: ping/traceroute — salts fins a la destinació */
.pingtrace-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.pingtrace-row{display:flex;justify-content:center;align-items:center;gap:.4rem;flex-wrap:wrap;min-height:50px}
.pingtrace-hop{
  padding:.4rem .6rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.72rem;color:var(--text-dim);opacity:0;transform:scale(.8);text-align:center;
}
.pingtrace-hop.ok{border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.pingtrace-hop.fail{border-color:#ef4444;color:#ef4444}
.pingtrace-arrow{color:var(--text-dim);font-weight:700}
.pingtrace-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U12: mètode d'incidències per capes */
.diagmethod-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.diagmethod-layer{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;max-width:340px;margin:.3rem auto;
  padding:.45rem .8rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.78rem;color:var(--text-dim);opacity:.5;
}
.diagmethod-layer.checking{opacity:1;border-color:var(--accent)}
.diagmethod-layer.ok{opacity:1;border-color:var(--accent2, #22c55e);color:var(--accent2, #22c55e)}
.diagmethod-layer.fail{opacity:1;border-color:#ef4444;color:#ef4444}
.diagmethod-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.7rem;min-height:1.4em}

/* U13: pila LAMP — capes que es munten */
.lampstack-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column-reverse;gap:.4rem;max-width:260px;margin:0 auto}
.lampstack-layer{
  padding:.5rem .8rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.82rem;text-align:center;color:var(--text-dim);opacity:0;transform:translateY(10px);
}
.lampstack-layer.on{border-color:var(--accent);color:var(--text);opacity:1}

/* U13: complements (plugins) — interruptors */
.pluginlist-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem}
.pluginlist-row{display:flex;flex-direction:column;gap:.4rem;max-width:320px;margin:0 auto}
.pluginlist-item{
  display:flex;justify-content:space-between;align-items:center;padding:.4rem .7rem;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);font-family:var(--mono);font-size:.8rem;color:var(--text-dim);
}
.pluginlist-switch{width:32px;height:18px;border-radius:9px;background:var(--border);position:relative;flex:none}
.pluginlist-switch.on{background:var(--accent2, #22c55e)}
.pluginlist-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.pluginlist-switch.on::after{left:16px}
.pluginlist-item.on{color:var(--text)}
.pluginlist-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U13: rols d'usuari — jerarquia */
.rolehier-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;display:flex;flex-direction:column;gap:.35rem;max-width:300px;margin:0 auto}
.rolehier-level{
  padding:.4rem .7rem;border-radius:8px;background:var(--bg-card);border:2px solid var(--border);
  font-family:var(--mono);font-size:.78rem;color:var(--text-dim);opacity:0;transform:translateX(-10px);
}
.rolehier-level.active{border-color:var(--accent);color:var(--text)}
.rolehier-level .role{font-weight:700}
.rolehier-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}

/* U14: taula de base de dades (reutilitzada per model relacional, JOIN, CRUD) */
.dbtable-stage{background:var(--bg);border-radius:12px;border:1px solid var(--border);padding:1.2rem;overflow-x:auto}
.dbtable-group{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;align-items:flex-start}
.dbtable{border-collapse:collapse;font-family:var(--mono);font-size:.75rem;margin:0 auto}
.dbtable caption{caption-side:top;color:var(--text-dim);font-size:.75rem;margin-bottom:.3rem}
.dbtable th, .dbtable td{border:1px solid var(--border);padding:.3rem .5rem;text-align:center}
.dbtable th{background:var(--bg-card);color:var(--text)}
.dbtable td{color:var(--text-dim);opacity:0}
.dbtable td.hl{color:var(--accent2, #22c55e);font-weight:700;opacity:1}
.dbtable td.pk{color:var(--accent);font-weight:700}
.dbtable-label{text-align:center;font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin-top:.8rem;min-height:1.4em}