/* Piano Salsa · el aula.
   Las variables son exactamente las del prototipo. Nocturno por defecto;
   [data-tema="claro"] cambia el juego entero sin tocar una sola regla más. */

.ps-aula-shell{
  --bg:#0F0C0A; --bg2:#120E0B;
  --sup:rgba(255,255,255,.05); --sup2:rgba(255,255,255,.09);
  --bd:rgba(255,255,255,.1);   --bd2:rgba(255,255,255,.18);
  --tx:#F5EDE2; --txf:#ffffff; --tx2:#C7B9A5; --tx3:#8C7F6E;
  --rail:linear-gradient(180deg,#151009,#0C0906);
  --hdr:rgba(15,12,10,.88);
}
.ps-aula-shell[data-tema="claro"]{
  --bg:#F4EDE2; --bg2:#FFFDF9;
  --sup:#ffffff; --sup2:#ffffff;
  --bd:rgba(28,22,16,.1); --bd2:rgba(28,22,16,.16);
  --tx:#2A1E14; --txf:#161210; --tx2:#61564A; --tx3:#93877A;
  --rail:linear-gradient(180deg,#FFFDF9,#F6EEE2);
  --hdr:rgba(252,248,242,.92);
}

.ps-aula-shell *,.ps-aula-shell *::before,.ps-aula-shell *::after{box-sizing:border-box}
.ps-aula-shell img{max-width:100%;display:block}
.ps-aula-shell a{color:inherit;text-decoration:none}
.ps-aula-shell p{margin:0}
.ps-aula-shell h1,.ps-aula-shell h2,.ps-aula-shell h3,.ps-aula-shell h4{margin:0}
.ps-aula-shell button{font-family:inherit}
.ps-aula-shell input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}

@keyframes pulso{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.ps-aula-shell ::-webkit-scrollbar{height:10px;width:10px}
.ps-aula-shell ::-webkit-scrollbar-thumb{background:rgba(231,181,122,.4);border-radius:99px}
@media(prefers-reduced-motion:reduce){.ps-aula-shell *{animation:none!important}}

/* ---------- el rail ----------
   Izquierda en escritorio, abajo en móvil. En el prototipo esto lo decidía
   JavaScript midiendo la ventana; aquí lo hace el CSS, que además acierta
   en el primer pintado y no da el salto al cargar. */

.ps-aula-shell{grid-template-columns:104px minmax(0,1fr)}

.ps-rail{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 12px 22px;background:var(--rail);border-right:1px solid var(--bd);
  position:sticky;top:0;height:100vh;
}
.ps-rail-logo:hover{background:var(--sup)}
.ps-rail-item{min-height:62px;padding:10px 6px;cursor:pointer}
.ps-rail-icono{width:42px;height:42px;font-size:16px}
.ps-rail-texto{font:700 11px 'Manrope',sans-serif}
.ps-logo-movil{display:none}

@media(max-width:900px){
  .ps-aula-shell{grid-template-columns:minmax(0,1fr)}
  .ps-rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;z-index:120;
    flex-direction:row;align-items:stretch;gap:2px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    background:var(--hdr);backdrop-filter:blur(18px);
    border-right:0;border-top:1px solid var(--bd);
    box-shadow:0 -18px 40px -26px rgba(0,0,0,.9);
  }
  .ps-rail-logo,.ps-rail-sep,.ps-rail-avance{display:none}
  .ps-rail-item{min-height:58px;padding:6px 2px}
  .ps-rail-item.es-on{background:transparent!important}
  .ps-rail-icono{width:36px;height:36px;font-size:15px}
  .ps-rail-texto{font-size:10.5px}
  .ps-logo-movil{display:flex}
  .ps-aula-shell > div:last-child{padding-bottom:92px}
}

/* ---------- «sigue donde lo dejaste» ---------- */
.ps-seguir{transition:border-color .16s ease}
.ps-seguir:hover{border-color:rgba(231,181,122,.6)}
.ps-seguir-grid{grid-template-columns:340px minmax(0,1fr)}
@media(max-width:820px){.ps-seguir-grid{grid-template-columns:1fr}}

/* ---------- carátulas de curso ---------- */
.ps-caratula{
  display:block;width:100%;text-align:left;padding:0;cursor:pointer;
  border-radius:20px;overflow:hidden;background:var(--sup);
  border:1px solid var(--bd);transition:transform .16s ease,border-color .16s ease;
}
.ps-caratula:hover{transform:translateY(-3px);border-color:rgba(231,181,122,.55)}
.ps-caratula.es-bloqueada{opacity:.82}

/* ---------- la lección ---------- */
.ps-leccion-grid{display:grid;grid-template-columns:290px minmax(0,1fr) 330px}
.ps-indice{
  border-right:1px solid var(--bd);background:var(--bg2);padding:20px 16px 34px;min-width:0;
  position:sticky;top:86px;max-height:calc(100vh - 86px);overflow-y:auto;
}
.ps-leccion-lateral{border-left:1px solid var(--bd);background:var(--bg2);padding:20px 18px 40px;min-width:0}
.ps-leccion-indice{position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto}
.ps-indice-boton{display:none}

/* La lección: índice · vídeo · descargables.
   Había dos juegos de reglas para esto, escritos en momentos
   distintos, y el segundo pisaba al primero: entre 860 y 900 px la
   pantalla se quedaba a dos columnas cuando debía ir a una. Aquí va
   uno solo, de más ancho a más estrecho.

   Primer corte: caben índice y vídeo, los descargables bajan.
   Segundo: una sola columna, el índice se pliega en un botón. */
@media (max-width:1320px){
  .ps-leccion-grid{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .ps-leccion-lateral,
  .ps-leccion-grid > aside:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--bd)}
}
@media (max-width:900px){
  .ps-leccion-grid{grid-template-columns:minmax(0,1fr)}
  .ps-indice,.ps-leccion-indice{
    position:static;max-height:none;overflow:visible;
    border-right:0;border-top:1px solid var(--bd);order:2;
  }
  .ps-indice[hidden]{display:none}
  .ps-indice-boton{display:flex}
}


/* ---- El aula es su propia área ----
   Dentro de una lección no se navega por la web: se estudia. La
   cabecera del sitio estorba y además invita a salirse. */
body.ps-en-aula > header:not(.ps-aula-barra),
body.ps-en-aula .ps-cabecera,
body.ps-en-aula > footer{display:none!important}

.ps-aula-barra{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:14px;
  padding:10px clamp(12px,1.8vw,22px);background:var(--hdr);backdrop-filter:blur(16px);border-bottom:1px solid var(--bd);flex-wrap:wrap}
.ps-aula-salir{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:11px;background:var(--sup);border:1px solid var(--bd);color:var(--tx);text-decoration:none;font-size:16px}
.ps-aula-salir:hover{background:var(--sup2);color:#fff}
.ps-aula-marca{font:800 16px 'Manrope',sans-serif;letter-spacing:-.04em;color:var(--txf);white-space:nowrap}
.ps-aula-marca span{color:#D69B62}
.ps-aula-curso{font:600 12.5px 'JetBrains Mono',monospace;color:var(--tx3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ps-aula-prog{flex:1;min-width:60px;max-width:260px;height:6px;border-radius:999px;background:var(--sup2);overflow:hidden}
.ps-aula-prog span{display:block;height:100%;border-radius:999px;background:linear-gradient(100deg,#B0763A,#F1E4CD)}
.ps-aula-pct{font:700 12px 'JetBrains Mono',monospace;color:#E7B57A}
.ps-aula-ojo,.ps-aula-cuenta{display:flex;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;
  background:var(--sup);border:1px solid var(--bd);color:var(--tx);text-decoration:none;
  font:700 13px 'Manrope',sans-serif;white-space:nowrap}
.ps-aula-ojo:hover,.ps-aula-cuenta:hover{border-color:#E7B57A;color:#E7B57A}
.ps-aula-cuenta{margin-left:auto}
@media(max-width:760px){.ps-aula-curso,.ps-aula-prog,.ps-aula-pct{display:none}}

/* ---- La columna de descargables ----
   Las pestañas y su panel se estaban colocando en fila, así que el
   material salía fuera del ancho de la columna y se cortaba. */
.ps-pestanas{display:flex;flex-direction:column;min-width:0;width:100%}
.ps-pestanas>nav{display:flex;width:100%;min-width:0}
.ps-pestanas>nav button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-pestanas>section{width:100%;min-width:0}
.ps-pestanas a,.ps-pestanas .ps-material-fila{min-width:0;max-width:100%}


/* ---- La lección en el móvil ----
   El vídeo manda: ocupa el ancho entero y nada lo empuja. Lo demás
   se estrecha, nunca al contrario. */
@media (max-width:640px){
  .ps-leccion-grid{gap:0}
  .ps-leccion-lateral{padding:18px 15px 34px}
  .ps-indice,.ps-leccion-indice{padding:16px 15px 26px}

  /* La fila de pestañas se desliza en lugar de apretarse: cuatro
     botones en 360 px dejan las etiquetas ilegibles. El contenedor
     sigue en columna, que es lo que coloca los paneles debajo. */
  .ps-pestanas [role=tablist]{
    overflow-x:auto;scrollbar-width:none;border-radius:14px;
  }
  .ps-pestanas [role=tablist]::-webkit-scrollbar{display:none}
  .ps-pestanas [role=tablist] [role=tab]{flex:0 0 auto;padding:0 14px}
}


/* ---- Botones de la cabecera dentro del aula ----
   Siguen el tema elegido (día o noche) en vez de unos colores fijos, para
   que al cambiar de modo no se queden del color equivocado. */
.ps-aula-acciones .ps-nav-btn,
.ps-aula-acciones .ps-sel-moneda summary{background:var(--sup)!important;border-color:var(--bd)!important;color:var(--tx)!important}
.ps-aula-acciones .ps-nav-cuenta > span:first-child{background:var(--sup2)!important}
@media(max-width:700px){ .ps-aula-acciones [data-texto], .ps-aula-acciones .ps-nav-cuenta-txt{display:none} }