/* ── Ajustes del teléfono (25-sep-2026) ──────────────────────────────────
   Pedro: "ajustemos ahora cómo se ve el móvil". Revisión pantalla por
   pantalla a 390 px; lo que se corrige aquí:
   · La barra de arriba era transparente: al bajar, el contenido se mezclaba
     con el logo. Ahora tiene fondo y desenfoque.
   · IA ATMA: la lista de conversaciones y "Nueva conversación" NO se veían
     (la regla que esconde la lateral del escritorio, `aside{display:none}`,
     también escondía la del chat). Vuelve como una tira arriba.
   · Mi nivel: la tercera pestaña se cortaba; y tarjeta dentro de tarjeta
     comía el ancho del formulario y de la evolución.
   · Personaje: la figura ocupaba media pantalla y las tres cajas de abajo
     iban una bajo otra.
   · Protocolos: página larguísima. Fuera el marco doble y la tarjeta del
     anillo (el avance ya está en "2 de 5"), y el orden del día: Tu día, la
     mañana, el día, la noche y al final el cierre.

   Todo va dentro de max-width:860px y carga el último. */

@media (max-width:860px){

  /* ── La barra de arriba, con fondo ─────────────────────────────────────── */
  body.lx-alumno #main > .barra{
    position:sticky; top:0; z-index:30;
    background:rgba(6,4,18,.86) !important; backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
    border-bottom:1px solid rgba(238,237,245,.06) !important;
  }

  /* ── IA ATMA: la tira de conversaciones ────────────────────────────────── */
  body.lx-alumno .chat aside.chat-lado{
    display:flex !important; flex-direction:row; align-items:center; gap:8px;
    padding:10px 14px !important; overflow-x:auto; scrollbar-width:none; height:auto;
    border-bottom:1px solid rgba(238,237,245,.06) !important;
  }
  body.lx-alumno .chat aside.chat-lado::-webkit-scrollbar{ display:none }
  body.lx-alumno .chat-lado .nueva-conv{ flex:none; width:auto !important; padding:8px 12px !important; font-size:9px !important }
  body.lx-alumno .chat-lado .ia-rotulo{ display:none }
  body.lx-alumno .chat-lado .chat-lista{ flex-direction:row; gap:6px; max-height:none; overflow:visible }
  body.lx-alumno .chat-lado .chat-item{ flex:none; max-width:170px; padding:8px 12px; border-radius:99px; border:1px solid rgba(238,237,245,.08) }
  body.lx-alumno .chat-lado .chat-item.aqui{ border-color:rgba(var(--c-lila),.45); background:rgba(var(--c-lila),.1) }
  body.lx-alumno .chat-lado .chat-titulo{ font-size:12px }
  body.lx-alumno .chat-lado .chat-cuando, body.lx-alumno .chat-lado .chat-archivar{ display:none }
  body.lx-alumno .chat-lado .pista{ margin:0; font-size:11px; white-space:nowrap }

  /* ── Mi nivel: las tres pestañas caben ─────────────────────────────────── */
  .pestanas-nivel.nv-tabs{ padding:12px 14px 0 !important; gap:2px; overflow:visible }
  .nv-tabs .pestana{ flex:1; justify-content:center; padding:9px 6px !important; font-size:12px !important; white-space:nowrap }
  .nv-tabs .pestana svg{ display:none }

  /* Mi formulario y Mi evolución: sin tarjeta dentro de tarjeta. */
  .nv{ padding:16px 14px 110px }
  .nv-bloque{ padding:18px 16px !important; border-radius:20px !important }
  .nv-bloque + .nv-bloque{ margin-top:14px }
  .nv-grid{ gap:14px }
  .nv-interior{ padding:0 !important; border:0 !important; background:transparent !important }
  .nv-tit{ font-size:19px; margin-bottom:12px }
  .nv-aro-r{ width:92px } .nv-aro-r b{ font-size:24px }
  .nv-retos{ grid-template-columns:1fr }

  /* ── Personaje: más compacto ───────────────────────────────────────────── */
  .pj{ padding:18px 14px 110px }
  .pj-figura{ padding:18px 16px !important }
  .pj-figura .figura{ width:44% !important; max-width:150px !important }
  .pj-figura h3{ font-size:20px; margin-top:6px }
  .pj-frase{ display:none }
  .pj-cols{ gap:8px }
  .pj-col{ min-height:150px !important; padding:14px 12px }
  .pj-col b{ font-size:30px !important }
  .pj-col h4{ font-size:14px }
  .pj-abajo{ grid-template-columns:1fr 1fr !important; gap:8px }
  .pj-abajo .pj-caja:last-child{ grid-column:1 / -1 }
  .pj-caja{ padding:14px 16px }
  .pj-cifra b{ font-size:30px }
  .pj-caja .pj-rotulo{ font-size:8.5px; letter-spacing:.2em }

  /* ── Protocolos: más corto y en el orden del día ───────────────────────── */
  .pr{ padding:16px 14px 110px }
  .pr-cifras{ width:100%; justify-content:space-between; gap:10px }
  .pr-cifra b{ font-size:28px !important }
  .pr-cifra small{ font-size:8.5px; letter-spacing:.2em }
  .pr-rejilla{ display:flex !important; flex-direction:column; gap:14px }
  .pr-rejilla > div{ display:contents }
  .pr-bloque{ width:100% !important; max-width:none !important; box-sizing:border-box; padding:18px 16px !important; border-radius:20px !important; margin-top:0 !important }
  .pr-bloque.tudia{ order:1 } .pr-bloque.am{ order:2 } .pr-bloque.dia{ order:3 } .pr-bloque.pm{ order:4 } .pr-bloque.cierre{ order:5 }
  .pr-titulo{ font-size:19px !important; margin-bottom:12px }
  .pr-barra{ margin-bottom:8px }
  .pr-fecha{ padding:0 !important; border:0 !important; background:transparent !important }
  .pr-fecha h4{ display:none }
  .pr-dos{ display:block !important }
  .pr-avance{ display:none !important }

  /* ── Inicio: tarjetas un poco más bajas ────────────────────────────────── */
  .in-inicio{ padding-bottom:110px }
  .in-tarjeta p{ margin-bottom:12px }
}