/* Una sola cabecera para el portal y el acceso al aula. El ID común evita
   que las reglas históricas de cada página alteren su geometría o tipografía. */
#public-header.app-header {
  --header-padding: clamp(18px, 3.5vw, 54px);
  align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--ui-line);
  box-shadow: 0 2px 12px rgb(27 53 88 / 3%);
  color: var(--ui-ink);
  display: grid;
  font: 500 16px / 1.5 var(--font-ui);
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  height: 72px;
  min-height: 72px;
  padding: 8px var(--header-padding);
  position: sticky;
  top: 0;
  z-index: 60;
}
#public-header .brand {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ui-ink);
  display: inline-flex;
  font: inherit;
  gap: 9px;
  justify-self: start;
  min-width: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
}
#public-header .brand-mark {
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ui-ink);
  flex: 0 0 35px;
  font: inherit;
  height: 40px;
  padding: 3px;
  width: 35px;
}
#public-header .brand-copy { display: grid; align-content: center; gap: 0; }
#public-header .brand-wordmark { display: block; height: 18px; width: 112px; object-fit: contain; object-position: left center; }
#public-header .brand-copy small { display: none; }
#public-header .tab-nav { align-items: center; display: flex; gap: 5px; justify-content: center; }
#public-header .tab-nav :is(button, a) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #53657a;
  display: inline-flex;
  font: 600 13px / 1.5 var(--font-ui);
  justify-content: center;
  min-height: 44px;
  padding: 11px 14px;
  text-decoration: none;
  white-space: nowrap;
}
#public-header .tab-nav :is(button, a):hover { background: #f6f8fc; color: var(--ui-primary); }
#public-header .tab-nav :is(button, a).active { background: var(--ui-soft); color: #1d5095; box-shadow: none; }
#public-header .header-actions { align-items: center; display: flex; gap: 8px; justify-self: end; margin: 0; position: static; }
#public-header .header-register {
  align-items: center;
  background: transparent;
  border: 0;
  color: #53657a;
  display: inline-flex;
  font: 600 12px / 1.5 var(--font-ui);
  min-height: 44px;
  padding: 11px 6px;
  text-decoration: none;
}
#public-header .header-login {
  align-items: center;
  background: var(--ui-primary);
  border: 0;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font: 650 16px / 1.5 var(--font-ui);
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 10px 17px;
  width: auto;
}
#public-header .header-login:hover { background: #1d5095; }
#public-header :is(.plan-button, .header-notifications-button, .menu-toggle) {
  background: #fff;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  box-shadow: none;
  color: var(--ui-ink);
  flex: 0 0 44px;
  font: inherit;
  height: 44px;
  min-height: 44px;
  width: 44px;
}
#public-header .menu-toggle { display: none; }
#public-header :is(button, a):focus-visible { outline: 3px solid #76a9e5; outline-offset: 3px; }
#public-header [hidden] { display: none !important; }

@media (max-width: 1200px) {
  #public-header .header-register { display: none; }
}
@media (max-width: 1100px) {
  #public-header .tab-nav :is(button, a) { font-size: 12px; padding-inline: 10px; }
}
@media (max-width: 940px) {
  #public-header.app-header { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 10px; }
  #public-header .brand { grid-column: 1; grid-row: 1; order: 0; }
  #public-header .header-actions { grid-column: 2; grid-row: 1; order: 1; }
  #public-header .menu-toggle { display: grid; grid-column: 3; grid-row: 1; justify-self: end; order: 2; }
  #public-header .tab-nav {
    align-items: stretch;
    background: #fff;
    border-top: 1px solid var(--ui-line);
    box-shadow: 0 18px 30px rgb(27 53 88 / 12%);
    display: none;
    gap: 5px;
    left: 0;
    padding: 14px 22px 20px;
    position: absolute;
    right: 0;
    top: 100%;
  }
  #public-header .tab-nav.is-open { display: grid; }
  #public-header .tab-nav :is(button, a) { justify-content: flex-start; text-align: left; width: 100%; font-size: 13px; padding: 11px 14px; }
}
@media (max-width: 680px) {
  #public-header.app-header { --header-padding: 18px; height: 64px; min-height: 64px; padding-block: 7px; }
  #public-header .brand-mark { flex-basis: 29px; width: 29px; height: 35px; }
  #public-header .brand-wordmark { height: 16px; width: 95px; }
  #public-header .header-login { font-size: 13px; padding: 10px 14px; }
}
@media (max-width: 520px) {
  #public-header .brand-copy { display: none; }
}