/* Interact: maquetación propia sobre la cabecera corporativa de Brand 3.1 (willedtech-header.css).
   La marca es el archivo oficial interact-horizontal.svg / interact-compacto.svg; aquí solo hay disposición. */
body.docente .cinta, header.barra {
  position: relative; top: auto; min-height: var(--wt-header-h); padding: 0 var(--wt-header-pad);
  background: rgb(var(--wt-surface)); color: rgb(var(--wt-ink));
  border-bottom: 1px solid rgb(var(--wt-line)); box-shadow: none;
  view-transition-name: wt-header;
}
header.barra { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-header-gap); }
body.docente .cinta-fila { max-width: 1440px; min-height: var(--wt-header-h); margin-inline: auto; gap: 8px 28px; }
.espera-marca { color: rgb(var(--wt-ink-soft)); display: inline-flex; align-items: center; }
.espera-marca[hidden] { display: none; }
.conexion-grupo { display: inline-flex; align-items: center; gap: 6px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.docente .cinta .estado-conexion, header.barra .estado-conexion {
  color: rgb(var(--wt-success-ink)); font-size: .875rem;
}
body.docente .cinta .estado-conexion.offline { color: rgb(var(--wt-error-ink)); }
body.docente .cinta #btn-salir {
  background: rgb(var(--wt-surface)); color: rgb(var(--wt-primary-ink));
  border: 1px solid rgb(var(--wt-primary-line)); border-radius: 8px;
}
body.docente .cinta #btn-salir:hover { background: rgb(var(--wt-primary-soft)); }
body.docente .cinta .chip-usuario { color: rgb(var(--wt-ink)); border-color: rgb(var(--wt-line-strong)); }
body.docente .cinta-codigo { color: rgb(var(--wt-ink)); }
body.docente .sala-contexto { max-width: 1440px; margin: 0 auto; font-weight: 600; }
body.docente .sala-contexto:empty { display: none; }
body.docente .vistas {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  max-width: none; margin: 0;
  padding: 0 max(16px, calc((100vw - 1440px) / 2));
  background: rgb(var(--wt-surface)); border-bottom: 1px solid rgb(var(--wt-line));
}
body.docente .vistas button {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: rgb(var(--wt-ink-soft)); border-radius: 0;
  padding: 12px 16px; min-height: 48px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
body.docente .vistas button:hover {
  color: rgb(var(--wt-primary-ink)); background: rgb(var(--wt-primary-soft));
  border-color: transparent;
}
body.docente .vistas button[aria-current="page"] {
  color: rgb(var(--wt-primary-ink)); border-bottom-color: rgb(var(--wt-primary));
  text-decoration: none; background: rgb(var(--wt-primary-soft));
}
body.docente .secciones {
  max-width: none; margin: 0;
  padding: 6px max(16px, calc((100vw - 1440px) / 2));
  background: rgb(var(--wt-neutral-100));
  border-bottom: 1px solid rgb(var(--wt-line)); gap: 8px;
}
body.docente .secciones a { color: rgb(var(--wt-primary-ink)); padding-inline: 12px; }
body.docente .secciones a:hover { background: rgb(var(--wt-primary-soft)); }
body.docente .secciones a:focus-visible { outline-color: rgb(var(--wt-ink)); }
.titulo-participacion {
  max-width: 720px; margin: 14px auto 0; padding: 0 16px;
  color: rgb(var(--wt-ink-soft)); font-family: var(--wt-font-body); font-size: .9rem; font-weight: 400; letter-spacing: normal;
}
body.docente .nota-historial {
  max-width: 1360px; margin: 12px auto 0; line-height: 1.5; font-size: .9rem;
}
@media (max-width: 620px) {
  body.docente .cinta-fila { align-items: flex-start; }
  body.docente .barra-usuario { width: 100%; justify-content: flex-start; }
  body.docente .vistas { flex-wrap: nowrap; overflow-x: auto; padding-inline: 10px; }
  body.docente .vistas button { padding-inline: 12px; }
  body.docente .secciones { padding: 6px 10px; }
  header.barra { flex-wrap: wrap; }
}

/* Filtro de usuarios: filtrado local sobre resultados autorizados por la API. */
body.docente .usuario-busqueda { max-width: 440px; margin: 8px 0 16px; }
body.docente .usuario-busqueda label { margin-top: 0; }
body.docente .usuario-busqueda input { width: 100%; min-height: 44px; }
body.docente .usuario-busqueda #resumen-usuarios { margin: 6px 0 0; }
body.docente #tabla-usuarios tr[hidden] { display: none; }