/* Barra superior (pantallas del rector y de la Secretaría).
   A la izquierda, sobre el fondo claro: el logo de Escuela Digital 360 y, en
   pequeño, el lema «La educación nos conecta». El escudo del colegio, con el
   nombre del colegio al lado, va centrado en el espacio claro que queda entre el
   lema y el panel azul. A la derecha, el panel azul en diagonal con el lema
   «Aprender también es un gran viaje» y los controles de la sesión.
   El último control es el avatar de «Mi perfil» (lo pone public/cuentas.js).
   Los lemas son SVG (carpeta /barra): se ven nítidos en cualquier pantalla.
   En pantallas angostas se van quitando los lemas; en el celular queda la barra
   azul sencilla con el logo y el escudo. */
header.top.bn{padding:0;gap:0;flex-wrap:nowrap;align-items:stretch;min-height:96px;overflow:hidden;color:var(--ink);
  background:radial-gradient(130% 170% at 0% 0%,#FFFFFF 0,#EAF5FF 42%,#D3E9FB 100%)}
.bn-claro{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.bn-marca{flex:none;display:flex;align-items:center;padding:4px 10px 4px 18px}
header.top.bn .logo-barra{width:88px;height:88px;filter:drop-shadow(0 1px 2px rgba(11,79,168,.18))}
header.top.bn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bn-lema1{flex:none;height:42px;width:auto;margin:0 4px 0 6px}
/* Escudo del colegio (lo pone marca.js) y, al lado, su nombre: centrados en la parte clara que queda libre */
.bn-colegio{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 10px}
.bn-escudo{flex:none;display:flex;align-items:center}
.bn-escudo:empty{display:none}
.bn-nombre{flex:0 1 auto;min-width:0;max-width:440px;font-size:17px;font-weight:800;line-height:1.15;color:var(--brand);text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.bn-nombre:empty{display:none}
.bn-escudo .mc-enbarra{position:static;transform:none;height:82px;width:auto;max-width:130px;margin:0;order:0;filter:drop-shadow(0 1px 2px rgba(16,40,43,.22))}
.bn-azul{flex:none;display:flex;position:relative;filter:drop-shadow(-5px 0 0 var(--acento,#4CB511))}
.bn-azul-in{flex:1;display:flex;align-items:center;gap:6px;padding:0 16px 0 90px;color:#fff;
  background:linear-gradient(90deg,#0B4FA8 0,#0D61C8 55%,#0B4FA8 100%);clip-path:polygon(66px 0,100% 0,100% 100%,0 100%)}
.bn-lema2{flex:none;height:78px;width:auto;margin-right:14px}
.bn-ctl{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;min-width:0}
/* El nombre sobre los botones solo se usa en pantallas angostas (en el computador va al lado del escudo) */
header.top.bn .c{max-width:520px;font-size:13px;font-weight:600;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top.bn .c:empty{display:none}
@media (min-width:1041px){header.top.bn .c{display:none}}
.bn-botones{display:flex;align-items:center;gap:10px}
.bn-botones label{white-space:nowrap}

@media (max-width:1560px){.bn-lema2{display:none}.bn-azul-in{padding-left:84px}}
@media (max-width:1100px){.bn-lema1{display:none}.bn-nombre{font-size:15px}}
/* Pantallas medianas: el nombre ya no cabe al lado del escudo y pasa encima de los botones */
@media (max-width:1040px){.bn-nombre{display:none}.bn-escudo .mc-enbarra{height:72px;max-width:110px}.bn-colegio{padding:0 6px}}
@media (max-width:900px){
  header.top.bn{flex-wrap:wrap;min-height:0;background:var(--brand);color:#fff}
  .bn-lema1,.bn-lema2{display:none}
  /* En el celular el logo y el escudo van juntos en el recuadro blanco */
  .bn-claro{flex:none;padding:6px 12px;background:#fff;border-radius:0 0 18px 0}
  .bn-marca{padding:0}
  header.top.bn .logo-barra{width:64px;height:64px}
  .bn-colegio{flex:none;padding:0;gap:0}
  .bn-escudo{margin-left:8px;padding:0 0 0 8px;border-left:1px solid rgba(11,79,168,.22)}
  .bn-escudo .mc-enbarra{height:60px;width:auto;max-width:84px;margin:0}
  .bn-azul{flex:1 1 220px;filter:none}
  .bn-azul-in{clip-path:none;background:transparent;padding:8px 12px;justify-content:flex-end}
  .bn-ctl{flex:1}
  header.top.bn .c{max-width:60vw;white-space:normal;text-align:right}
  .bn-botones{flex-wrap:wrap;justify-content:flex-end;gap:8px}
  #hPerfil{order:-1} /* el avatar de «Mi perfil» va primero para no gastar otra fila */
}
@media print{.bn-lema1,.bn-lema2{display:none}}
/* Alto contraste (panel de accesibilidad): sin adornos, y el logo con borde claro para que se lea sobre negro */
html.a11y-contraste .bn-escudo{border-left-color:#fff}
html.a11y-contraste .bn-lema1,html.a11y-contraste .bn-lema2{display:none}
html.a11y-contraste .bn-azul{filter:none}
html.a11y-contraste .bn-azul-in{clip-path:none;padding-left:16px}
html.a11y-contraste header.top.bn .logo-barra{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px rgba(255,255,255,.85))}