/* ── La revisión del teléfono (1-nov-2026) ───────────────────────────────
   Pedro: "aún veo letras sobre la otra y se ve feo". Revisado pantalla por
   pantalla a 320, 360, 390 y 430, de noche y de día. Va de último porque
   letra.css sube las letras y eso rompía la barra de abajo.
   Lo de Programas, Comunidad y ATMA Black está en programas.css y
   black-app.css, que se cargan después que esta hoja. */

@media (max-width:860px){

  /* ── La barra de arriba: el logo nunca se monta con la píldora ──────────── */
  body.lx-alumno #main > .barra{ gap:8px }
  body.lx-alumno .barra .donde{ flex:none; gap:6px }
  :root[data-black] body.lx-alumno .barra .donde{ gap:12px }
  body.lx-alumno .barra .donde::before{ font-size:13.5px; letter-spacing:.3em }
  body.lx-alumno #main > .barra .barra-derecha{ flex:1 1 auto; min-width:0; gap:8px }
  body.lx-alumno .barra-derecha > div:first-child{ display:flex; justify-content:flex-end; min-width:0 }
  body.lx-alumno .barra-derecha .sello{ padding:5px 10px; font-size:11px; letter-spacing:0; white-space:nowrap }
  .atajos{ flex:none }
  .atajo{ width:36px; height:36px }

  /* ── La barra de abajo: las cinco caben siempre ─────────────────────────── */
  .lx-pestanas{ left:10px; right:10px; padding:5px }
  .lx-pestanas a{ flex:1 1 0; min-width:0; padding:8px 0 7px; font-size:10.5px; letter-spacing:0; white-space:nowrap }

  /* ── Lo que el teléfono recortaba o dejaba sin aire ─────────────────────── */
  body.lx-alumno main:has(.chat){ height:calc(100dvh - 92px) }
  /* Sin conversación, en celulares bajos, lo último quedaba detrás de la barra de abajo. */
  body.lx-alumno main:has(.chat-caja.sin-charla){ height:auto; min-height:calc(100dvh - 92px) }
  /* En una conversación los mensajes se deslizan y la caja de escribir se queda
     fija arriba de la barra: antes había que bajar hasta el final del texto para
     encontrarla y la pantalla no seguía la respuesta. */
  body.lx-alumno main:has(.chat-caja:not(.sin-charla)){ display:flex; flex-direction:column; padding-bottom:0; overflow:hidden }
  body.lx-alumno main:has(.chat-caja:not(.sin-charla)) > .chat{ flex:1; min-height:0; grid-template-rows:auto minmax(0,1fr) }
  body.lx-alumno .chat-caja:not(.sin-charla){ min-height:0 }
  body.lx-alumno .chat-caja:not(.sin-charla) .chat-hilo{ flex:1 1 0; min-height:0 }
  body.lx-alumno .chat-caja:not(.sin-charla) .chat-pie, body.lx-alumno .chat-caja:not(.sin-charla) .chat-contexto{ display:none }
  .op-form textarea{ min-height:92px }
  .pr .td-agregar input::placeholder{ font-size:14px }
  .pj-caja .pj-rotulo, .pj-caja .pj-texto{ display:block; line-height:1.5 }
  .borrar-nota{ padding:8px; margin:-8px }

  /* ── El panel del equipo ────────────────────────────────────────────────── */
  body:not(.lx-alumno) .cx{ min-width:0; padding:18px 16px }
  body:not(.lx-alumno) .cx header{ flex-wrap:wrap; align-items:flex-start }
  body:not(.lx-alumno) .cx .sello{ white-space:normal; max-width:100% }
  .cx-lista{ grid-template-columns:minmax(0,1fr) !important }
  .zona > .pestanas-nivel{ flex-wrap:wrap !important; max-width:100%; height:auto }
}

/* El reloj y el calendario de los campos, visibles de noche. */
:root:not([data-tema="claro"]) input[type="date"], :root:not([data-tema="claro"]) input[type="time"]{ color-scheme:dark }

@media (max-width:380px){
  .lx-pestanas a{ font-size:10px }
  body.lx-alumno .barra .donde::before{ font-size:13px; letter-spacing:.24em }
}
@media (max-width:359px){
  /* Con 320 px no cabe la píldora: su dato ya sale en cada pantalla. */
  body.lx-alumno .barra-derecha > div:first-child{ display:none }
  .lx-pestanas{ left:8px; right:8px; padding:4px }
  .lx-pestanas a{ font-size:9px }
  .lx-pestanas a svg{ width:18px; height:18px }
}