/* ============================================================
   START BLOK 1 · DESKTOP SHELL
   Corrige los paneles de navegación/progreso creados por
   js/modern-shell-start.js. En la compilación anterior faltaba
   esta hoja de estilos y los paneles quedaban como texto sin
   maquetar al final de la página.
   ============================================================ */

.desktop-side{
  display:none;
}

@media (min-width:1220px){
  body{
    --start-left-panel:300px;
    --start-right-panel:286px;
  }

  header>div{
    max-width:none!important;
    padding-left:18px;
    padding-right:18px;
  }

  #sidebar-toggle-btn{
    display:none!important;
  }

  main{
    max-width:none!important;
    width:auto!important;
    margin-left:calc(var(--start-left-panel) + 22px)!important;
    margin-right:calc(var(--start-right-panel) + 22px)!important;
    padding-left:18px!important;
    padding-right:18px!important;
    justify-content:flex-start!important;
  }

  .desktop-side{
    display:block;
    position:fixed;
    top:74px;
    bottom:18px;
    z-index:28;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,240,255,.34) transparent;
    border:1px solid rgba(0,240,255,.18);
    background:rgba(5,12,18,.93);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-radius:16px;
    padding:16px;
    box-shadow:
      inset 0 1px rgba(255,255,255,.04),
      0 14px 42px rgba(0,0,0,.30);
  }

  .desktop-left{
    left:8px;
    width:var(--start-left-panel);
  }

  .desktop-right{
    right:8px;
    width:var(--start-right-panel);
  }

  .desktop-side h2,
  .desktop-side h3{
    color:#00f0ff;
    font-weight:800;
    letter-spacing:.02em;
  }

  .desktop-left h2{
    font-size:14px;
    margin:4px 4px 14px;
  }

  #desktop-block-nav{
    display:grid;
    gap:8px;
  }

  .desktop-block-btn{
    width:100%;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:10px;
    text-align:left;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(120deg,rgba(9,22,31,.94),rgba(5,12,18,.86));
    color:#dcecff;
    border-radius:12px;
    padding:11px;
    cursor:pointer;
    transition:border-color .18s ease,transform .18s ease,background .18s ease;
  }

  .desktop-block-btn:hover{
    border-color:#00f0ff;
    transform:translateX(2px);
    background:linear-gradient(120deg,rgba(10,34,45,.97),rgba(6,18,27,.92));
  }

  .desktop-block-btn .block-num{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(0,240,255,.40);
    background:rgba(0,240,255,.05);
    color:#00f0ff;
    font-weight:900;
  }

  .desktop-block-btn b{
    display:block;
    font-size:13px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }

  .desktop-block-btn small{
    display:block;
    color:#718096;
    font-size:10px;
    margin-top:3px;
  }

  .dash-card{
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:15px;
    margin-bottom:13px;
    background:rgba(10,20,29,.84);
    box-shadow:inset 0 1px rgba(255,255,255,.03);
  }

  .dash-card:last-child{
    margin-bottom:0;
  }

  .dash-card h3{
    font-size:13px;
    margin:0 0 12px;
  }

  .dash-card p{
    font-size:12px;
    color:#cbd5e1;
    margin:8px 0;
  }

  .dash-card strong{
    color:#39ff14;
  }

  .dash-card button{
    display:block;
    width:100%;
    text-align:left;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    background:rgba(255,255,255,.035);
    color:#d9e7f2;
    padding:9px;
    margin-top:7px;
    cursor:pointer;
    transition:.18s ease;
  }

  .dash-card button:hover{
    border-color:rgba(0,240,255,.55);
    color:#ffffff;
    background:rgba(0,240,255,.07);
  }

  .progress-orbit{
    --progress:0deg;
    width:116px;
    height:116px;
    border-radius:50%;
    margin:4px auto 12px;
    background:
      conic-gradient(
        #00f0ff 0 var(--progress),
        #9d00ff var(--progress),
        rgba(255,255,255,.07) 0
      );
    display:grid;
    place-items:center;
    position:relative;
    box-shadow:0 0 22px rgba(0,240,255,.08);
  }

  .progress-orbit::before{
    content:"";
    width:88px;
    height:88px;
    border-radius:50%;
    background:#0a1119;
    position:absolute;
    box-shadow:inset 0 0 18px rgba(0,0,0,.55);
  }

  .progress-orbit span{
    position:relative;
    z-index:1;
    font-size:27px;
    font-weight:900;
    color:#ffffff;
  }

  #view-quiz{
    max-width:900px!important;
  }
}

@media (max-width:1219px){
  .desktop-side{
    display:none!important;
  }
}

@media print{
  .desktop-side{
    display:none!important;
  }
}