/* ============================================================================
 *  cpt-skin.css — RÈPLICA VISUAL de la interfície del Cisco Packet Tracer.
 *  Només aparença (semblança). No emula cap comportament del programa.
 *  Colors propis, independents del tema, per mantindre l'aspecte "de programa".
 * ==========================================================================*/

.cpt-window{
  --cpt-bg:#c9d2dc; --cpt-panel:#e7ebf0; --cpt-line:#9aa6b4;
  --cpt-work:#ffffff; --cpt-ink:#233; --cpt-blue:#1f6fb2;
  border-radius:10px;overflow:hidden;
  border:1px solid #7d8896;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5);
  background:var(--cpt-bg);
  font-family:'Segoe UI',Tahoma,sans-serif;
  color:var(--cpt-ink);
  margin:1rem 0;
}

/* Barra de títol */
.cpt-titlebar{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(#2a5c86,#1f4a6e);color:#eaf2fa;
  padding:.4rem .7rem;font-size:.82rem;
}
.cpt-dots{display:flex;gap:.35rem}
.cpt-dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57;display:block}
.cpt-dots i:nth-child(2){background:#febc2e}
.cpt-dots i:nth-child(3){background:#28c840}
.cpt-title{font-weight:600}
.cpt-file{font-weight:400;opacity:.9}
.cpt-badge{margin-left:auto;background:#39a06b;color:#fff;font-size:.68rem;padding:.1rem .5rem;border-radius:4px}

/* Barra de menús */
.cpt-menubar{display:flex;gap:.1rem;background:var(--cpt-panel);border-bottom:1px solid var(--cpt-line);padding:.15rem .4rem}
.cpt-menubar span{font-size:.76rem;padding:.2rem .55rem;border-radius:4px;color:#2c3a49}
.cpt-menubar span:hover{background:#cfd8e2}

/* Barra d'eines superior */
.cpt-toolbar-top{display:flex;align-items:center;gap:.2rem;background:#dbe1e8;border-bottom:1px solid var(--cpt-line);padding:.25rem .5rem}
.cpt-toolbar-top .tb{font-style:normal;font-size:.9rem;padding:.15rem .3rem;border-radius:4px;cursor:default;filter:grayscale(.2)}
.cpt-toolbar-top .tb:hover{background:#c4cdd8}
.tb-sep{width:1px;height:18px;background:var(--cpt-line);margin:0 .3rem}

/* Cos: espai de treball (+ opcional panell dret) */
.cpt-body{display:flex;min-height:280px;background:var(--cpt-work)}
.cpt-workspace{
  position:relative;flex:1;
  background:
    linear-gradient(#eef2f6 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,#eef2f6 1px,transparent 1px) 0 0/26px 26px,
    var(--cpt-work);
  overflow:hidden;
}

/* Enllaços (cables) */
.cpt-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cpt-links line{stroke-width:2.4}
.cable-straight{stroke:#1c1c1c}
.cable-cross{stroke:#1c1c1c;stroke-dasharray:2 3}
.cable-console{stroke:#7aa0c4;stroke-dasharray:6 4}
.cable-serial{stroke:#b0392e}
.cable-fiber{stroke:#c9a227}
.cable-wireless{stroke:#3a9;stroke-dasharray:1 5;stroke-linecap:round}

/* Nodes (dispositius) */
.cpt-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  width:70px;text-align:center;cursor:default;z-index:2;
  transition:transform .2s var(--ease,ease),filter .2s;
}
.node-ico{font-size:1.9rem;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.node-label{font-size:.68rem;font-weight:600;color:#1c2b3a;background:rgba(255,255,255,.82);padding:0 .25rem;border-radius:3px}
.node-ip{font-size:.62rem;font-family:var(--mono);color:#1f6fb2;background:rgba(255,255,255,.75);padding:0 .2rem;border-radius:3px}
.cpt-node.hl{filter:none;z-index:5}
.cpt-node.hl .node-ico{animation:cptpulse 1.1s var(--ease,ease) infinite}
.cpt-node.hl::before{
  content:"";position:absolute;inset:-8px -6px;border:2px solid #ffb020;border-radius:10px;
  background:rgba(255,176,32,.12);
}
@keyframes cptpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* Prestatgeria de dispositius (baix) */
.cpt-device-shelf{background:var(--cpt-panel);border-top:1px solid var(--cpt-line);padding:.3rem .5rem}
.shelf-cats{display:flex;gap:.3rem;margin-bottom:.3rem}
.shelf-cat{font-size:.68rem;padding:.15rem .5rem;border-radius:4px;background:#d3dae2;color:#3a4a5a}
.shelf-cat.active{background:var(--cpt-blue);color:#fff}
.shelf-items{display:flex;gap:.15rem;flex-wrap:wrap}
.shelf-item{width:30px;height:30px;display:grid;place-items:center;background:#f2f5f8;border:1px solid #cdd6df;border-radius:5px;font-size:1rem;cursor:default}
.shelf-item:hover{background:#fff;border-color:var(--cpt-blue)}

/* Barra de mode (Realtime/Simulation) */
.cpt-modebar{display:flex;justify-content:flex-end;gap:.3rem;background:#dbe1e8;border-top:1px solid var(--cpt-line);padding:.25rem .5rem}
.cpt-modebar .mode{font-size:.68rem;padding:.15rem .6rem;border-radius:4px;background:#cfd8e2;color:#3a4a5a}
.cpt-modebar .mode.active{background:#39a06b;color:#fff}

/* ─── Panell de dispositiu (CLI / Config / Desktop) ─────────────────────── */
.cpt-devpanel{width:44%;max-width:360px;border-left:1px solid var(--cpt-line);background:#eef1f5;display:flex;flex-direction:column}
.devpanel-title{background:#d7dee6;padding:.35rem .7rem;font-size:.76rem;font-weight:600;color:#24425f}
.devpanel-tabs{display:flex;gap:.1rem;background:#e2e7ee;padding:.2rem .3rem;border-bottom:1px solid var(--cpt-line)}
.dp-tab{font-size:.72rem;padding:.2rem .55rem;border-radius:4px 4px 0 0;color:#4a5a6a}
.dp-tab.active{background:#fff;color:var(--cpt-blue);font-weight:600;border:1px solid var(--cpt-line);border-bottom:none}
.devpanel-body{flex:1;overflow:auto}

.panel-cli{background:#000;height:100%}
.panel-cli pre{color:#e6e6e6;font-family:var(--mono);font-size:.74rem;line-height:1.55;padding:.7rem .8rem;white-space:pre-wrap;word-break:break-word}
.cli-in{color:#f2f2f2}
.cli-out{color:#9fd0a8}
.cli-comment{color:#7fa8c9;font-style:italic}

.panel-config{padding:.7rem}
.cfg-row{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem .2rem;border-bottom:1px dashed #c9d2db;font-size:.76rem}
.cfg-row label{color:#4a5a6a}
.cfg-val{font-family:var(--mono);color:#1f6fb2}
.panel-desktop{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.7rem}
.desk-ico{display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.68rem;color:#2c3a49;background:#fff;border:1px solid #cdd6df;border-radius:6px;padding:.5rem}
.desk-ico span{font-size:1.4rem}
.panel-generic{padding:.8rem;font-size:.8rem;color:#2c3a49}

/* ─── Blocs d'exemple ────────────────────────────────────────────────────── */
.example{margin-bottom:2rem;border-bottom:1px solid var(--border);padding-bottom:1.5rem}
.example:last-child{border-bottom:none}
.example-copy h3{font-size:1.15rem;margin-bottom:.3rem}
.example-copy p{color:var(--text-dim);font-size:.95rem;margin-bottom:.3rem}

/* Passos de l'exemple */
.example-steps{margin-top:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.steps-head{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem;background:var(--hover);border-bottom:1px solid var(--border)}
.step-btn{width:34px;height:34px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--border);font-size:1.2rem;color:var(--text)}
.step-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.step-count{font-size:.85rem;color:var(--text-dim)}
.steps-list{list-style:none;padding:.4rem;counter-reset:s;display:grid;gap:.2rem}
.steps-list li{
  counter-increment:s;padding:.6rem .8rem .6rem 2.6rem;position:relative;
  border-radius:8px;font-size:.92rem;color:var(--text-dim);opacity:.55;transition:.2s var(--ease)
}
.steps-list li::before{
  content:counter(s);position:absolute;left:.7rem;top:.55rem;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;font-weight:700;background:var(--bg-elev);color:var(--text-muted);border:1px solid var(--border)
}
.steps-list li.active{opacity:1;color:var(--text);background:var(--accent-soft)}
.steps-list li.active::before{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Mini-maqueta a la portada */
.cpt-window.mini{max-width:100%;margin:0}
.cpt-workspace.demo{min-height:210px}
.cpt-workspace.demo .node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;font-size:1.5rem;z-index:2}
.cpt-workspace.demo .node b{font-size:.6rem;font-weight:600;color:#1c2b3a;background:rgba(255,255,255,.8);padding:0 .2rem;border-radius:3px}
.cpt-workspace.demo .links{position:absolute;inset:0;width:100%;height:100%}
.cpt-workspace.demo .links line{stroke:#1c1c1c;stroke-width:2}

@media(max-width:680px){
  .cpt-body{flex-direction:column}
  .cpt-devpanel{width:100%;max-width:none;border-left:none;border-top:1px solid var(--cpt-line);min-height:180px}
}