/* ============================================================
   PATHDEMO.CSS — Visualitzador Interactiu de Rutes Bash
   ============================================================
   Organització:
   1.  Capçalera i títol del mòdul
   2.  Barra de controls (filtre, botons, velocitat)
   3.  Badge d'operador + explicació del pas
   4.  Panell principal bipartit (terminal | arbre)
   5.  Terminal simulada (finestra, prompt, sortida)
   6.  Historial de comandes
   7.  Arbre del sistema de fitxers (nodes, colors, animacions)
   8.  Breadcrumb (fil d'Ariadna)
   9.  Línia de temps (timeline)
   10. Panel "Explica'm la ruta"
   11. Mini-repte
   12. SVG overlay (línies de salt absolut)
   13. Llegenda
   14. Colors dels operadors (badges)
   15. Responsiu
   ============================================================ */

/* Reutilitzem les variables de styles.css:
   --color-accent, --color-surface, --color-border, etc. */

/* ============================================================
   1. CAPÇALERA I TÍTOL
   ============================================================ */
.pd-header {
    margin-bottom: 1.25rem;
}

.pd-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}

.pd-subtitle {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}


/* ============================================================
   2. BARRA DE CONTROLS
   ============================================================ */
.pd-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.pd-control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pd-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Select del filtre d'operador */
.pd-select {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition);
}

.pd-select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Grup de botons de navegació */
.pd-nav-btns {
    gap: 0.4rem;
}

/* Botó genèric de la demo */
.pd-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    border: 1px solid transparent;
}

.pd-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.pd-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Botons de navegació (anterior / següent) */
.pd-btn-nav {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.pd-btn-nav:hover:not(:disabled) {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* Botó de play/pause */
.pd-btn-play {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
    min-width: 140px;
}

.pd-btn-play:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.pd-btn-play.pd-btn-playing {
    background: #c0392b;
    border-color: #c0392b;
    animation: pd-pulse 2s ease-in-out infinite;
}

/* Animació pulsant mentre la demo és activa */
@keyframes pd-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.80; }
}

/* Control de velocitat (range) */
.pd-speed-group {
    flex-wrap: nowrap;
}

.pd-range {
    width: 90px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.pd-speed-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    min-width: 2.5ch;
    text-align: right;
}

/* Comptador de passos */
.pd-step-counter {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    margin-left: auto;
    white-space: nowrap;
}


/* ============================================================
   3. INFORMACIÓ DEL PAS (badge + explicació)
   ============================================================ */
.pd-step-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    min-height: 60px;
    transition: border-color 300ms ease;
}

/* Badge de l'operador (mostra el nom, p.ex. ".. (pare)") */
.pd-operator-badge {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

/* Text d'explicació del pas */
.pd-explanation {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-text);
}

.pd-explanation code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: #1a2332;
    color: #a8d8a8;
    padding: 0.05em 0.35em;
    border-radius: 4px;
}

.pd-explanation strong {
    color: var(--color-accent-dark);
}


/* ============================================================
   4. PANELL PRINCIPAL BIPARTIT
   ============================================================ */
.pd-main-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Títol de columna */
.pd-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.pd-left-col,
.pd-right-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}


/* ============================================================
   5. TERMINAL SIMULADA
   ============================================================ */
.pd-terminal-window {
    background: #1a2332;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    font-family: var(--font-mono);
}

/* Barra de títol decorativa (botons de macOS) */
.pd-terminal-topbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #2d3748;
    padding: 0.5rem 0.85rem;
}

.pd-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.pd-dot-red    { background: #ff5f57; }
.pd-dot-yellow { background: #ffbd2e; }
.pd-dot-green  { background: #28c840; }

.pd-term-title {
    font-size: 0.75rem;
    color: #718096;
    margin-left: 0.5rem;
}

/* Cos de la terminal (output + prompt) */
.pd-terminal-body {
    padding: 0.85rem 1rem;
    min-height: 90px;
}

/* Línia de prompt + comanda */
.pd-prompt-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.pd-prompt-text {
    color: #4ecdc4;  /* cian: color del prompt */
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.pd-command-text {
    color: #a8d8a8;  /* verd: color de la comanda */
    font-size: 0.9rem;
    flex: 1;
    word-break: break-all;
}

/* Cursor parpellejant */
.pd-cursor {
    color: #a8d8a8;
    animation: pd-blink 1s step-end infinite;
    font-size: 0.9rem;
}

@keyframes pd-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Sortida de la comanda */
.pd-output {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #cbd5e0;
}

/* Missatge d'error (roig) */
.pd-term-error {
    color: #fc8181;
    display: block;
    animation: pd-fadein 0.3s ease;
}

@keyframes pd-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   6. HISTORIAL DE COMANDES
   ============================================================ */
.pd-history-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    flex: 1;
}

.pd-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 180px;
    overflow-y: auto;
}

.pd-history-item {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: background var(--transition);
}

.pd-history-item:last-child {
    color: var(--color-accent);
    background: var(--color-accent-light);
    font-weight: 600;
}


/* ============================================================
   7. ARBRE DEL SISTEMA DE FITXERS
   ============================================================ */
.pd-tree-wrapper {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    min-height: 300px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.pd-tree {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* Node genèric */
.pd-node {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 2px;
    transition: background 300ms ease, box-shadow 300ms ease, transform 250ms ease;
    cursor: default;
    position: relative;
}

/* Directori (clicable) */
.pd-node-clickable {
    cursor: pointer;
}

.pd-node-clickable:hover {
    background: var(--color-accent-light);
}

.pd-node-clickable:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* Icona i nom del node */
.pd-node-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.pd-node-name {
    color: var(--color-text);
    font-weight: 500;
}

.pd-node-file .pd-node-name {
    color: var(--color-text-muted);
    font-weight: 400;
}

/* Directori actual: ressaltat en verd */
.pd-node-current {
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(45, 125, 70, 0.18);
    animation: pd-highlight 0.4s ease;
}

@keyframes pd-highlight {
    from { background: #b7e4c7; transform: translateX(6px); }
    to   { background: var(--color-accent-light); transform: translateX(2px); }
}

.pd-node-current .pd-node-name {
    color: var(--color-accent-dark);
    font-weight: 700;
}

/* Posició anterior: ressaltada subtilment */
.pd-node-prev {
    background: #fff3cd;
    border: 1px dashed #f0a500;
}

.pd-node-prev .pd-node-name {
    color: #7d5a00;
}

/* Badge "← aquí" per al node actual */
.pd-here-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent);
    background: white;
    border: 1px solid var(--color-accent);
    border-radius: 99px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.3rem;
    animation: pd-fadein 0.3s ease;
}

/* Badge "~" per al directori home */
.pd-home-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6c47c2;
    background: #f0ebff;
    border: 1px solid #c8aaf7;
    border-radius: 99px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.2rem;
}




/* ============================================================
   9. LÍNIA DE TEMPS (timeline)
   ============================================================ */
.pd-timeline-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.pd-timeline {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.pd-tl-empty {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Element de la línia de temps */
.pd-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.35rem 0.65rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.78rem;
}

.pd-tl-item:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
}

.pd-tl-item:focus-visible {
    outline: 2px solid var(--color-accent);
}

/* Element actiu (el pas actual) */
.pd-tl-active {
    background: var(--color-accent-light);
    border-color: var(--color-accent);
    font-weight: 700;
    color: var(--color-accent-dark);
}

.pd-tl-cmd {
    font-family: var(--font-mono);
    font-weight: 600;
}

.pd-tl-dest {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.pd-tl-active .pd-tl-dest {
    color: var(--color-accent);
}

/* Connector entre elements */
.pd-tl-connector {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Colors per tipus de moviment */
.pd-tl-relative { border-left: 3px solid #2980b9; }
.pd-tl-parent   { border-left: 3px solid #8e44ad; }
.pd-tl-absolute { border-left: 3px solid #e67e22; }
.pd-tl-home     { border-left: 3px solid #27ae60; }
.pd-tl-current  { border-left: 3px solid #7f8c8d; }
.pd-tl-error    { border-left: 3px solid #c0392b; }
.pd-tl-info     { border-left: 3px solid #bdc3c7; }


/* ============================================================
   10. PANEL D'INFORMACIÓ (directori i fitxer)
   Substitueix l'anterior "explain panel". Unificat per a tots
   els tipus de nodes: directoris i fitxers.
   ============================================================ */

/* Contenidor principal del panel */
.pd-info-panel {
    position: relative;
    background: #fafbfc;
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-md);
    animation: pd-fadein 0.25s ease;
}

/* Capçalera del panel: icona + nom del node + botó tancar */
.pd-info-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    padding-right: 2rem;
}

.pd-info-panel-icon { font-size: 1.1rem; flex-shrink: 0; }

.pd-info-panel-title {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
    word-break: break-all;
}

/* Botó tancar (X) a la cantonada superior dreta */
.pd-explain-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition);
    border: none;
}

.pd-explain-close:hover { background: var(--color-error); color: white; }

/* Subtítol dins el cos del panel */
.pd-info-subtitle {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 0.65rem;
}

.pd-info-subtitle code {
    font-family: var(--font-mono);
    background: #1a2332;
    color: #a8d8a8;
    padding: 0.05em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Nota a peu del panel */
.pd-info-nav-hint {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    border-top: 1px dashed var(--color-border);
    padding-top: 0.55rem;
}

/* ---- Graella de rutes (per a directoris) ---- */
.pd-explain-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Cada fila: badge + comanda + (nota + botó copiar) */
.pd-explain-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

/* Badge del tipus de ruta (color definit per pd-op-*) */
.pd-explain-row-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Comanda en format terminal */
.pd-explain-cmd {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    background: #1a2332;
    color: #a8d8a8;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    word-break: break-all;
}

/* Nota + botó copiar (columna dreta) */
.pd-explain-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.pd-explain-row-note {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---- Panel de fitxers ---- */

/* Contenidor de les tres variants de ruta per a un fitxer */
.pd-file-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Una variant de ruta (absoluta, relativa, ~/...) */
.pd-file-variant {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Capçalera de la variant: badge + ruta + copiar */
.pd-file-variant-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

/* Ruta del fitxer en monospace */
.pd-file-path-display {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    flex: 1;
    word-break: break-all;
}

/* Comandes (cat, less, head, tail) per a cada variant */
.pd-file-cmds {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
}

/* Bloc d'una comanda concreta */
.pd-file-cmd-block {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #1a2332;
    border-radius: 5px;
    padding: 0.3rem 0.6rem;
}

/* Nom de la comanda (cat, less...) */
.pd-file-cmd-name {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #4ecdc4;
    font-weight: 700;
    flex-shrink: 0;
    min-width: 3ch;
}

/* Comanda completa (cat /ruta/fitxer) */
.pd-file-cmd {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: #a8d8a8;
    flex: 1;
    word-break: break-all;
    background: none;
    padding: 0;
    border-radius: 0;
}


/* ============================================================
   11. MINI-REPTE
   ============================================================ */
.pd-challenge-panel {
    background: #fffbf0;
    border: 2px solid #f0a500;
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    animation: pd-fadein 0.25s ease;
}

.pd-challenge-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.pd-challenge-icon { font-size: 1.1rem; }

.pd-challenge-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7d5a00;
}

.pd-challenge-question {
    font-size: 0.92rem;
    color: var(--color-text);
    margin-bottom: 0.75rem;
    line-height: 1.55;
}

.pd-challenge-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pd-challenge-prompt {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pd-challenge-input {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    flex: 1;
    min-width: 150px;
    transition: border-color var(--transition);
    background: white;
}

.pd-challenge-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(45,125,70,0.15);
}

.pd-challenge-input:disabled {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

/* Botó comprovar */
.pd-btn-submit {
    background: var(--color-accent);
    color: white;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background var(--transition);
}

.pd-btn-submit:hover { background: var(--color-accent-dark); }

/* Botó pista */
.pd-btn-hint {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all var(--transition);
}

.pd-btn-hint:hover {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
}

/* Feedback del repte */
.pd-challenge-feedback {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 1.5em;
    transition: all var(--transition);
}

.pd-feedback-correct { color: var(--color-success); }
.pd-feedback-wrong   { color: var(--color-error); }
.pd-feedback-hint    { color: #7d5a00; }


/* ============================================================
   12. SVG OVERLAY (línies de salt absolut)
   ============================================================ */
.pd-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

/* Línia de salt animada */
.pd-jump-line {
    animation: pd-dash 0.6s ease forwards;
    stroke-dashoffset: 200;
    stroke-dasharray: 8 4;
}

@keyframes pd-dash {
    from { stroke-dashoffset: 200; }
    to   { stroke-dashoffset: 0; }
}

/* Etiqueta "salt absolut" al costat de la línia */
.pd-jump-label {
    font-style: italic;
    opacity: 0.85;
}


/* ============================================================
   13. LLEGENDA DE COLORS
   ============================================================ */
.pd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.pd-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pd-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pd-legend-current  { background: var(--color-accent); }
.pd-legend-prev-dot { background: #f0a500; }

.pd-legend-hint {
    font-style: italic;
    color: var(--color-text-muted);
}


/* ============================================================
   14. COLORS DELS OPERADORS (badges de l'operador actiu)
   ============================================================ */

/* Ruta relativa → blau */
.pd-op-relative {
    background: #d6eaf8;
    color: #1a6fa8;
    border: 1px solid #aed6f1;
}

/* Directori pare (..) → morat */
.pd-op-parent {
    background: #e8daef;
    color: #6c3483;
    border: 1px solid #c8a2d4;
}

/* Home (~) → verd */
.pd-op-home {
    background: var(--color-accent-light);
    color: var(--color-accent-dark);
    border: 1px solid #9fd9b5;
}

/* Ruta absoluta → taronja */
.pd-op-absolute {
    background: #fdebd0;
    color: #935116;
    border: 1px solid #f5cba7;
}

/* Directori actual (./) → gris */
.pd-op-current {
    background: #eaecee;
    color: #566573;
    border: 1px solid #d5d8dc;
}

/* Errors → roig */
.pd-op-error {
    background: #fadbd8;
    color: #922b21;
    border: 1px solid #f1948a;
}

/* Informatiu (inici) → neutral */
.pd-op-info {
    background: #eaf2ff;
    color: #2c5282;
    border: 1px solid #bee3f8;
}

/* Colors del border esquerre a pd-step-info per cada operador */
.pd-step-info:has(.pd-op-relative)  { border-left-color: #2980b9; }
.pd-step-info:has(.pd-op-parent)    { border-left-color: #8e44ad; }
.pd-step-info:has(.pd-op-home)      { border-left-color: var(--color-accent); }
.pd-step-info:has(.pd-op-absolute)  { border-left-color: #e67e22; }
.pd-step-info:has(.pd-op-current)   { border-left-color: #95a5a6; }
.pd-step-info:has(.pd-op-error)     { border-left-color: #c0392b; }


/* ============================================================
   15. MODE LLIURE — barra d'indicació de navegació manual
   ============================================================ */
.pd-freenav-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff8e1;
    border: 1px solid #f0c060;
    border-left: 4px solid #f0a500;
    border-radius: var(--border-radius);
    padding: 0.6rem 1rem;
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
    animation: pd-fadein 0.25s ease;
}

.pd-freenav-icon { font-size: 1.1rem; flex-shrink: 0; }

.pd-freenav-text {
    color: #7d5a00;
    font-weight: 600;
    flex: 1;
}

/* Botó per tornar a la demo guiada */
.pd-btn-resume {
    background: #f0a500;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
}

.pd-btn-resume:hover { background: #c87800; }


/* ============================================================
   16. BARRA DE POSICIÓ ACTUAL
   Dalt de l'arbre: mostra la ruta actual + copiar + reset
   ============================================================ */
.pd-position-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #1a2332;
    color: #a8d8a8;
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    font-family: var(--font-mono);
    margin-bottom: 0.5rem;
}

.pd-position-label {
    font-size: 0.75rem;
    color: #4ecdc4;
    flex-shrink: 0;
    font-weight: 700;
}

.pd-position-path {
    font-size: 0.88rem;
    color: #a8d8a8;
    flex: 1;
    word-break: break-all;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Botó copiar la ruta actual (petit, estil terminal) */
.pd-copy-btn-sm {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #a0aec0;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    line-height: 1.4;
}

.pd-copy-btn-sm:hover { background: rgba(255,255,255,0.18); color: white; }

.pd-copy-btn-sm.pd-copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

/* Botó de reset (tornar a home), mateix look que copiar */
.pd-btn-home-sm {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #a0aec0;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    line-height: 1.4;
}

.pd-btn-home-sm:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

/* Botó copiar inline (dins de les files d'explicació) */
.pd-copy-inline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
    line-height: 1.4;
}

.pd-copy-inline:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: white;
}

.pd-copy-inline.pd-copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

/* Botó copiar dins del bloc de terminal fosc (fitxers) */
.pd-file-cmd-block .pd-copy-btn-sm {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: #718096;
}

.pd-file-cmd-block .pd-copy-btn-sm:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}


/* ============================================================
   17. CAMP "SALTA A"
   Permet escriure una ruta i navegar-hi directament
   ============================================================ */
.pd-jump-input-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pd-jump-label {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.pd-jump-input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    flex: 1;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--color-surface);
    color: var(--color-text);
}

.pd-jump-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(45,125,70,0.15);
}

/* Estat d'error: ruta no trobada */
.pd-jump-input.pd-jump-error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 2px rgba(192,57,43,0.15);
    animation: pd-shake 0.4s ease;
}

@keyframes pd-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

.pd-btn-jump {
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.38rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
}

.pd-btn-jump:hover { background: var(--color-accent-dark); }


/* ============================================================
   18. BREADCRUMB CLICABLE
   Els segments del fil d'Ariadna ara són botons clicables
   ============================================================ */
.pd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    background: #1a2332;
    color: #a8d8a8;
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
}

/* Segment clicable (tots menys l'últim) */
.pd-bc-clickable {
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: #718096;
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    transition: color var(--transition), background var(--transition);
    line-height: 1;
}

.pd-bc-clickable:hover {
    color: #a8d8a8;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pd-bc-clickable:focus-visible {
    outline: 1px solid #4ecdc4;
    outline-offset: 2px;
}

/* Segment actual (últim, no clicable) */
.pd-bc-item {
    color: #718096;
    line-height: 1;
}

.pd-bc-current {
    color: #a8d8a8;
    font-weight: 700;
}

.pd-bc-sep {
    color: #4a5568;
    margin: 0 1px;
    user-select: none;
}


/* ============================================================
   19. TOOLTIP DE HOVER
   Apareix a prop del cursor quan es passa el ratolí per un node.
   Mostra la ruta relativa des de la posició actual.
   ============================================================ */
.pd-hover-tooltip {
    position: fixed;   /* fixed per seguir el cursor per tota la pàgina */
    z-index: 9999;
    background: #1a2332;
    border: 1px solid #4a5568;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    max-width: 280px;
    animation: pd-fadein 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Nom del directori o fitxer */
.pd-tt-dir, .pd-tt-file {
    color: #4ecdc4;
    font-weight: 700;
}

/* Ruta relativa suggerida */
.pd-tt-rel {
    color: #a8d8a8;
    font-size: 0.75rem;
}

.pd-tt-rel code {
    background: rgba(255,255,255,0.08);
    padding: 0.05em 0.3em;
    border-radius: 3px;
    color: #ffd700;
}

/* "← Estàs aquí" */
.pd-tt-here {
    color: var(--color-accent);
    font-weight: 700;
}

/* timeline free nav (moviments manuals) */
.pd-tl-free { border-left: 3px solid #f0a500; }


/* ============================================================
   20. RESPONSIU
   ============================================================ */

/* Tablet: panell en una sola columna */
@media (max-width: 900px) {
    .pd-main-panel {
        grid-template-columns: 1fr;
    }

    .pd-explain-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .pd-explain-row-actions {
        justify-content: flex-start;
    }

    .pd-explain-row-note {
        text-align: left;
    }

    .pd-file-cmds {
        grid-template-columns: 1fr;
    }
}

/* Mòbil: controls en columna */
@media (max-width: 600px) {
    .pd-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-nav-btns {
        justify-content: center;
    }

    .pd-step-counter {
        margin-left: 0;
        text-align: center;
    }

    .pd-challenge-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-challenge-input {
        min-width: auto;
    }

    .pd-btn-submit,
    .pd-btn-hint {
        width: 100%;
    }

    .pd-jump-input-row {
        flex-wrap: wrap;
    }

    .pd-freenav-bar {
        flex-wrap: wrap;
    }

    .pd-btn-resume {
        width: 100%;
        text-align: center;
    }
}