/* ═══════════════════════════════════════════════════════════════════
   PERCORSO — shell immersiva con sidebar (adattato da app.html mockup)
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --p-navy: #253564;
    --p-navy-light: #2e4280;
    --p-navy-dark: #1a2747;
    --p-gold: #3BB8B9;
    --p-gold-light: rgba(59,184,185,0.15);
    --p-gold-dark: #2d9a9b;
    --p-cream: #faf7f2;
    --p-cream-dark: #f0ebe0;
    --p-sage: #6b8f7b;
    --p-sage-light: #e8f0eb;
    --p-coral: #c47a6c;
    --p-text: #2c2c2c;
    --p-text-light: #6b6b6b;
    --p-text-muted: #999;
    --p-white: #ffffff;
    --p-border: #e8e4dd;
    --p-shadow: 0 2px 12px rgba(26,39,68,0.06);
    --p-shadow-lg: 0 8px 32px rgba(26,39,68,0.1);
    --p-radius: 12px;
    --p-radius-lg: 16px;
    --p-sidebar-w: 320px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body.percorso-body {
    font-family:'Inter',-apple-system,sans-serif;
    color:var(--p-text);
    background:var(--p-cream);
    line-height:1.7;
    display:flex;
    min-height:100vh;
}
.percorso-body h1,
.percorso-body h2,
.percorso-body h3,
.percorso-body h4 {
    font-family:'Playfair Display',Georgia,serif;
    line-height:1.3;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width:var(--p-sidebar-w);
    background:var(--p-navy);
    color:var(--p-white);
    position:fixed;
    top:0; left:0; bottom:0;
    overflow-y:auto;
    z-index:100;
    display:flex;
    flex-direction:column;
    transition:transform 0.3s ease;
}
.sidebar-header {
    padding:24px 24px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-logo {
    font-family:'Playfair Display',serif;
    font-size:1.3rem;
    font-weight:700;
    color:var(--p-gold);
}
.sidebar-logo span { color:var(--p-white); font-weight:400; }
.sidebar-user {
    font-size:0.8rem;
    color:rgba(255,255,255,0.5);
    margin-top:6px;
}
.sidebar-tagline {
    font-size:0.72rem;
    color:rgba(255,255,255,0.35);
    letter-spacing:1px;
    margin-top:2px;
    text-transform:uppercase;
}
.sidebar-progress { margin-top:16px; }
.sidebar-progress-bar {
    height:6px;
    background:rgba(255,255,255,0.1);
    border-radius:3px;
    overflow:hidden;
}
.sidebar-progress-fill {
    height:100%;
    background:linear-gradient(90deg,var(--p-gold),var(--p-sage));
    border-radius:3px;
    transition:width 0.5s ease;
}
.sidebar-progress-text {
    font-size:0.75rem;
    color:rgba(255,255,255,0.5);
    margin-top:6px;
}
.sidebar-nav {
    flex:1;
    padding:12px 0;
    overflow-y:auto;
}
.sidebar-phase { padding:0 12px; margin-bottom:4px; }
.sidebar-phase-title {
    padding:10px 12px 6px;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:rgba(255,255,255,0.35);
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.sidebar-phase-count {
    font-size:0.65rem;
    font-weight:400;
    letter-spacing:0.5px;
    color:rgba(255,255,255,0.25);
}
.sidebar-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.2s;
    font-size:0.88rem;
    color:rgba(255,255,255,0.6);
    text-decoration:none;
    position:relative;
}
.sidebar-item:hover {
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.9);
}
.sidebar-item.active {
    background:rgba(59,184,185,0.15);
    color:var(--p-gold);
}
.sidebar-item.done { color:rgba(255,255,255,0.5); }
.sidebar-item.locked {
    opacity:0.35;
    cursor:not-allowed;
    pointer-events:none;
}
.sidebar-item .si-check {
    width:20px;
    height:20px;
    border-radius:50%;
    flex-shrink:0;
    border:2px solid rgba(255,255,255,0.2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.65rem;
    transition:all 0.2s;
}
.sidebar-item.done .si-check {
    background:var(--p-sage);
    border-color:var(--p-sage);
    color:var(--p-white);
}
.sidebar-item.locked .si-check {
    border-color:rgba(255,255,255,0.1);
}
.sidebar-item.current .si-check {
    border-color:var(--p-gold);
    background:var(--p-gold-light);
}
.sidebar-item .si-label {
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sidebar-item .si-type {
    font-size:0.58rem;
    font-weight:600;
    letter-spacing:0.5px;
    text-transform:uppercase;
    padding:2px 6px;
    border-radius:4px;
    flex-shrink:0;
}
.si-type-lesson { background:rgba(59,184,185,0.18); color:var(--p-gold); }
.si-type-exercise { background:rgba(107,143,123,0.22); color:#a9c5b4; }
.si-type-live { background:rgba(196,122,108,0.2); color:#e8a89e; }
.si-type-tool { background:rgba(42,58,92,0.35); color:rgba(255,255,255,0.7); }

.sidebar-footer {
    padding:14px 24px;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex;
    gap:10px;
    font-size:0.8rem;
}
.sidebar-footer a {
    color:rgba(255,255,255,0.55);
    text-decoration:none;
    transition:color 0.2s;
}
.sidebar-footer a:hover { color:var(--p-gold); }

/* ===== MAIN ===== */
.main {
    margin-left:var(--p-sidebar-w);
    flex:1;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}
.topbar {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(250,247,242,0.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--p-border);
    padding:0 48px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.topbar-title { font-size:0.85rem; color:var(--p-text-light); }
.topbar-title strong { color:var(--p-navy); }
.topbar-actions { display:flex; gap:12px; align-items:center; }
.topbar-btn {
    padding:8px 18px;
    border-radius:50px;
    font-size:0.8rem;
    font-weight:600;
    text-decoration:none;
    transition:all 0.2s;
    cursor:pointer;
    border:none;
}
.topbar-btn--primary { background:var(--p-gold); color:var(--p-navy); }
.topbar-btn--primary:hover { background:var(--p-gold-dark); color:var(--p-white); }
.topbar-btn--ghost { background:transparent; color:var(--p-text-light); }
.topbar-btn--ghost:hover { color:var(--p-navy); }

.mobile-toggle {
    display:none;
    background:none;
    border:none;
    color:var(--p-navy);
    cursor:pointer;
    padding:8px;
    font-size:1.3rem;
}

/* ===== CONTENT ===== */
.content {
    flex:1;
    padding:48px;
    max-width:1040px;
    width:100%;
}
.content-badge {
    display:inline-block;
    padding:4px 14px;
    border-radius:50px;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:16px;
}
.badge-lesson { background:rgba(59,184,185,0.12); color:var(--p-gold-dark); }
.badge-exercise { background:rgba(107,143,123,0.14); color:var(--p-sage); }
.badge-live { background:rgba(196,122,108,0.14); color:var(--p-coral); }
.badge-tool { background:rgba(26,39,68,0.08); color:var(--p-navy); }

.content h1 {
    font-size:2.2rem;
    color:var(--p-navy);
    margin-bottom:8px;
}
.content-meta {
    font-size:0.85rem;
    color:var(--p-text-muted);
    margin-bottom:32px;
    display:flex;
    gap:16px;
}

/* ===== CARDS (usate da dashboard) ===== */
.p-card {
    background:var(--p-white);
    border-radius:var(--p-radius-lg);
    padding:24px;
    box-shadow:var(--p-shadow);
    margin-bottom:20px;
}
.p-card h3 {
    font-size:1.05rem;
    color:var(--p-navy);
    margin-bottom:12px;
}
.p-stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:24px;
}
.p-stat {
    background:var(--p-white);
    border-radius:var(--p-radius);
    padding:18px 20px;
    box-shadow:var(--p-shadow);
}
.p-stat .ps-label {
    font-size:0.68rem;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--p-text-muted);
}
.p-stat .ps-value {
    font-family:'Playfair Display',serif;
    font-size:1.6rem;
    font-weight:700;
    color:var(--p-navy);
    margin-top:4px;
}
.p-stat .ps-sub {
    font-size:0.75rem;
    color:var(--p-gold-dark);
    margin-top:2px;
}

.p-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 20px;
    border-radius:50px;
    font-size:0.85rem;
    font-weight:600;
    text-decoration:none;
    transition:all 0.2s;
    cursor:pointer;
    border:none;
}
.p-btn--primary { background:var(--p-gold); color:var(--p-navy); }
.p-btn--primary:hover { background:var(--p-gold-dark); color:var(--p-white); }
.p-btn--ghost {
    background:transparent;
    color:var(--p-navy);
    border:1px solid var(--p-border);
}
.p-btn--ghost:hover { border-color:var(--p-gold); color:var(--p-gold-dark); }

.p-textarea {
    width:100%;
    border:1px solid var(--p-border);
    border-radius:var(--p-radius);
    padding:12px 14px;
    font-family:inherit;
    font-size:0.92rem;
    line-height:1.6;
    color:var(--p-text);
    resize:vertical;
    outline:none;
    background:var(--p-cream);
    transition:border-color 0.2s;
}
.p-textarea:focus { border-color:var(--p-gold); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); box-shadow:var(--p-shadow-lg); }
    .main { margin-left:0; }
    .mobile-toggle { display:inline-flex; }
    .content { padding:32px 24px; }
    .topbar { padding:0 24px; }
    .p-stats { grid-template-columns:repeat(2,1fr); }
}
.sidebar-overlay {
    position:fixed;
    inset:0;
    background:rgba(26,39,68,0.5);
    z-index:99;
    display:none;
}
.sidebar-overlay.show { display:block; }


/* Auto-save feedback sui campi con data-save */
[data-save] {
    transition: box-shadow 0.2s ease;
}
[data-save][data-autosave="dirty"] {
    box-shadow: 0 0 0 2px rgba(59,184,185,0.25);
}
[data-save][data-autosave="clean"] {
    box-shadow: 0 0 0 2px rgba(22,163,74,0.15);
}
[data-save][data-autosave="err"] {
    box-shadow: 0 0 0 2px rgba(220,38,38,0.35);
}