/*
 * Cabecera crítica del lector.
 * Se carga después del paquete principal para conservar una sola fila incluso
 * cuando una tablet mantiene temporalmente una versión anterior del CSS.
 */
.station-console__header {
  display: flex;
  min-height: 50px;
  box-sizing: border-box;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-bottom-width: 2px;
}

.station-console__header .station-console__brand {
  display: flex;
  min-width: 0;
  flex: 1 1 210px;
  align-items: center;
  gap: 9px;
}

.station-console__header .station-console__brand img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.station-console__header .station-console__brand-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.station-console__header .attendance-station__toolbar {
  display: flex;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.station-console__header .station-console__status-group,
.station-console__header .station-console__action-group {
  display: flex;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
}

.station-console__header .station-console__status-group {
  padding: 0 7px 0 0;
  border-right: 1px solid rgba(255,255,255,.17);
  border-bottom: 0;
}

.station-console__header .station-offline-state {
  width: 154px;
  min-width: 154px;
  max-width: 154px;
  min-height: 36px;
  flex: 0 0 154px;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 8px;
}

.station-console__header .station-offline-state__icon {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
  border-radius: 7px;
}

.station-console__header .station-offline-state strong { font-size: 10px; }
.station-console__header .station-offline-state small { font-size: 8px; }

.station-console__header .attendance-station__state {
  display: inline-flex;
  width: 132px;
  min-width: 132px;
  min-height: 36px;
  box-sizing: border-box;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 8px;
}

.station-console__header .station-console__action.button,
.station-console__header [data-attendance-kiosk-toggle].button {
  min-height: 34px;
  border-color: #527b9b;
  color: #fff;
  background: #123e63;
  box-shadow: none;
}

.station-console__header .station-console__action.button > i { color: currentColor; }

.station-console__header .station-console__audio.button:not(.is-active) {
  border-color: #a88131;
  color: #ffe9ad;
  background: #60460d;
}

.station-console__header .station-console__audio.button.is-active {
  border-color: #4ab994;
  color: #e8fff7;
  background: #0b674f;
}

@media (max-width: 1366px) {
  .station-console__header .station-console__action.button,
  .station-console__header .station-console__audio.button,
  .station-console__header [data-attendance-kiosk-toggle].button {
    width: 34px;
    min-width: 34px;
    flex: 0 0 34px;
    padding: 0;
    border-radius: 8px;
  }

  .station-console__header .station-console__action > span { display: none; }
  .station-console__header .station-console__action > i { margin: 0; }
}

@media (max-width: 900px) {
  .station-console__header {
    min-height: 48px;
    gap: 7px;
    padding: 5px 8px;
  }

  .station-console__header .station-console__brand { gap: 7px; }
  .station-console__header .station-console__brand img { width: 34px; height: 34px; flex-basis: 34px; }
  .station-console__header .station-console__brand strong { font-size: 11px; }
  .station-console__header .station-console__brand .station-console__brand-kicker { font-size: 5px; }
  .station-console__header .station-console__brand .station-console__brand-context { font-size: 7px; }
  .station-console__header .attendance-station__toolbar { gap: 5px; }
  .station-console__header .station-console__status-group { gap: 4px; padding-right: 5px; }
  .station-console__header .station-offline-state { width: 140px; min-width: 140px; max-width: 140px; min-height: 36px; flex-basis: 140px; }
  .station-console__header .attendance-station__state { width: 116px; min-width: 116px; min-height: 36px; }
  .station-console__header .station-console__action-group { gap: 4px; }
  .station-console__header .station-console__action.button,
  .station-console__header .station-console__audio.button,
  .station-console__header [data-attendance-kiosk-toggle].button { width: 34px; min-width: 34px; min-height: 36px; flex-basis: 34px; }
}

@media (max-width: 700px) {
  .station-console__header {
    min-height: 46px;
    gap: 6px;
    padding: 4px 6px;
  }

  .station-console__header .station-console__brand { flex: 0 0 32px; }
  .station-console__header .station-console__brand-copy { display: none; }
  .station-console__header .station-console__brand img { width: 32px; height: 32px; flex-basis: 32px; }
  .station-console__header .attendance-station__toolbar { width: 100%; flex: 1 1 auto; gap: 4px; }
  .station-console__header .station-console__status-group { gap: 4px; padding-right: 0; border-right: 0; }
  .station-console__header .station-offline-state { width: clamp(108px, 29vw, 126px); min-width: clamp(108px, 29vw, 126px); max-width: clamp(108px, 29vw, 126px); min-height: 36px; flex-basis: clamp(108px, 29vw, 126px); }
  .station-console__header .attendance-station__state { width: 34px; min-width: 34px; min-height: 36px; padding: 0; }
  .station-console__header .attendance-station__state > span { display: none; }
  .station-console__header .station-console__action.button,
  .station-console__header .station-console__audio.button,
  .station-console__header [data-attendance-kiosk-toggle].button { width: 32px; min-width: 32px; min-height: 36px; flex-basis: 32px; }
}

@media (max-width: 430px) {
  .station-console__header { min-height: 44px; gap: 5px; padding: 4px 5px; }
  .station-console__header .station-console__brand { flex-basis: 30px; }
  .station-console__header .station-console__brand img { width: 30px; height: 30px; flex-basis: 30px; }
  .station-console__header .station-offline-state { width: 110px; min-width: 110px; max-width: 110px; min-height: 34px; flex-basis: 110px; }
  .station-console__header .station-offline-state__icon { width: 24px; height: 24px; flex-basis: 24px; }
  .station-console__header .station-offline-state small { display: none; }
  .station-console__header .attendance-station__state { width: 32px; min-width: 32px; min-height: 34px; }
  .station-console__header .station-console__action.button,
  .station-console__header .station-console__audio.button,
  .station-console__header [data-attendance-kiosk-toggle].button { width: 32px; min-width: 32px; min-height: 34px; flex-basis: 32px; }
}