/* ── Header / HUD — capa compartida (docs/plans/estandarizar-header-dashboard-boton-refresh.md) ──
   Estático público, mismo criterio que /theme.css: sin lectura ni escritura de datos. */

/* Base: chrome común a los 4 headers */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--bg-rgb), 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--red-dim);
  box-shadow: 0 0 24px rgba(var(--red-rgb), 0.12);
  padding: 6px 12px;
  display: flex;
}

/* Modificadores de dirección — el ÚNICO eje en que los 4 difieren */
header.hud-row   { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
header.hud-stack { flex-direction: column; gap: 4px; }

/* Vocabulario HUD compartido */
.hud-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--red);
  text-shadow: 0 0 16px var(--red2);
  flex-shrink: 0;
}
.hud-sep {
  color: var(--text-faint);
  font-size: 18px;
}
.hud-clock {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.hud-wip-count { font-size: 12px; color: var(--amber); font-weight: 700; letter-spacing: 0.08em; }
.hud-wip-label { font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }
.hud-subtitle  { font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; }
.hud-spacer    { flex: 1; }

/* Botón de header — vocabulario único */
.btn-full-board {
  background: rgba(var(--red-rgb), 0.08);
  border: 1px solid var(--red-dim);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-full-board:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
  background: rgba(var(--red-rgb), 0.14);
}
.btn-full-board.active { border-color: var(--red); color: var(--red); }

/* Modificador para botones ICON-ONLY (☾ ⏻ ⚙ ↻ 🏠 sin texto) */
.btn-full-board.btn-icon {
  font-size: 14px;
  padding: 3px 10px;
  letter-spacing: normal;
  line-height: 1;
}

/* Grupo compartido casita · tema · cerrar sesión (ui/header-actions.js): siempre a la derecha, mismo orden en las 4 vistas */
.hud-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Los tres botones del grupo miden igual (casita, luna/sol y apagado tienen glifos de ancho distinto) */
/* Acciones de cuenta de la sesión propia (amr dynamo): nacen `hidden`; la regla de display del botón no puede pisar el atributo. */
.hud-actions .btn-full-board[hidden] { display: none; }

.hud-actions .btn-full-board.btn-icon {
  width: 44px;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
  box-sizing: border-box;
}

/* Responsive único — patrón de live.html adoptado por los 4 */
@media (max-width: 768px) {
  header.hud-row   { flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 12px; }
  header.hud-stack { gap: 8px; padding: 8px 12px; }
  header .hud-spacer { flex: 0 0 auto; display: none; }
  header .hud-sep    { display: none; }
  .hud-title { font-size: 15px; }
  .btn-full-board { min-height: 44px; padding: 10px 14px; font-size: 12px; justify-content: center; }
  .btn-full-board.btn-icon { min-height: 44px; padding: 10px 12px; font-size: 16px; }
  .hud-actions { margin-left: 0; }
}