/* El chat entre el equipo y cada alumno (3-oct-2026). Con variables de color:
   así sirve en modo oscuro y en modo claro sin repetir nada. */

.chat-insignia{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  border-radius:99px; background:var(--luz); color:#fff;
  font-size:11px; font-weight:600; line-height:1; vertical-align:middle;
}
.chat-cuantos{ margin-left:4px; opacity:.6; font-size:11px }
.btn-suave.abrir-chat.con-nuevos{ border-color:var(--luz); }

.hilo-lista{
  display:flex; flex-direction:column; gap:12px;
  max-height:min(52vh, 460px); overflow-y:auto;
  padding:14px; margin-bottom:12px;
  border:1px solid var(--linea); border-radius:14px;
  background:color-mix(in srgb, var(--plano-2) 60%, transparent);
}
.hilo-alumno .hilo-lista{ max-height:min(58vh, 560px) }
.hilo-vacio{ color:var(--tinta-tenue); font-size:14px; line-height:1.6; text-align:center; padding:18px 8px }

.hilo-msj{ display:flex; flex-direction:column; max-width:82% }
.hilo-msj.mio{ align-self:flex-end; align-items:flex-end }
.hilo-msj.suyo{ align-self:flex-start; align-items:flex-start }
.hilo-burbuja{
  padding:10px 14px; border-radius:16px;
  font-size:14.5px; line-height:1.55; color:var(--tinta);
  white-space:normal; overflow-wrap:anywhere;
  background:var(--plano-3); border:1px solid var(--linea-viva);
}
.hilo-msj.mio .hilo-burbuja{
  background:color-mix(in srgb, var(--luz) 22%, var(--plano-2));
  border-color:color-mix(in srgb, var(--luz) 45%, transparent);
  border-bottom-right-radius:6px;
}
.hilo-msj.suyo .hilo-burbuja{ border-bottom-left-radius:6px }
.hilo-meta{ margin-top:4px; font-size:11.5px; color:var(--tinta-tenue) }

.hilo-caja{ display:flex; gap:10px; align-items:flex-end }
.hilo-caja textarea{ flex:1; min-height:64px; resize:vertical }
.hilo-caja .btn-luz{ width:auto; flex:0 0 auto; padding-inline:22px }
.hilo-aviso:empty{ display:none }
.hilo-aviso{ margin-bottom:10px }

@media (max-width: 600px){
  .hilo-msj{ max-width:92% }
  .hilo-caja{ flex-direction:column; align-items:stretch }
  .hilo-caja .btn-luz{ width:100% }
}

/* ── Atajos arriba a la derecha: tema y Mi cuenta (3-oct-2026) ───────────── */
.barra-derecha{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end }
.atajos{ display:flex; gap:6px }
.atajo{
  width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:99px; border:1px solid var(--linea-viva); background:transparent; color:var(--tinta-media);
  cursor:pointer; transition:color .2s, border-color .2s, background .2s;
}
.atajo:hover{ color:var(--tinta); border-color:var(--luz) }
.atajo svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.atajo .si-claro{ display:none }
[data-tema="claro"] .atajo .si-claro{ display:block }
[data-tema="claro"] .atajo .si-oscuro{ display:none }
@media (max-width: 860px){
  /* Admin en el celular: los botones de la barra ya no se montan sobre el título. */
  body:not(.lx-alumno) #main > .barra{ flex-wrap:wrap; row-gap:10px }
  /* Alumno: una sola línea; si el título es largo, se recorta y los atajos quedan a la derecha. */
  body.lx-alumno #main > .barra{ flex-wrap:nowrap; gap:10px }
  body.lx-alumno #main > .barra .donde{ min-width:0 }
  body.lx-alumno #main > .barra h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  body.lx-alumno #main > .barra .barra-derecha{ flex:0 0 auto; flex-wrap:nowrap }
  .atajo{ width:32px; height:32px }
}
/* El Inicio del alumno en escritorio no lleva barra (luxury.css): ahí solo
   quedan los atajos, flotando arriba a la derecha. */
@media (min-width:861px){
  body.lx-alumno[data-vista="inicio"] #main > .barra{
    display:flex !important; position:fixed; top:18px; right:28px; z-index:20;
    padding:0 !important; width:auto; min-height:0; background:none !important; border:0 !important; box-shadow:none !important;
  }
  body.lx-alumno[data-vista="inicio"] #main > .barra .donde{ display:none }
}