/* ==========================================================================
   Barra del sitio para apps independientes (VoiceRecorder, etc.)
   La inserta /assets/app-bar.js. Toma los colores de la app si los define
   (--bg, --border, --text, --muted o --text-dim) para verse bien en modo claro y oscuro.
   ========================================================================== */

.er-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 clamp(12px, 3vw, 20px);
  flex-shrink: 0;
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg, #0b0d11);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08));
  color: var(--muted, var(--text-dim, #8f98ab));
}
.er-bar a { color: inherit; text-decoration: none; transition: color .2s ease; }
.er-bar a:hover { color: var(--text, #e9ecf2); }
.er-bar a:focus-visible { outline: 2px solid var(--accent, #29e0d6); outline-offset: 2px; border-radius: 4px; }
.er-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.er-brand { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text, #e9ecf2) !important; }
.er-brand span { color: var(--accent, #29e0d6); }
.er-sep { opacity: .5; }
.er-current { overflow: hidden; text-overflow: ellipsis; }
.er-links { display: flex; gap: 16px; flex-shrink: 0; }

/* Apps a pantalla completa (data-fit): el contenedor de la app ocupa
   el alto restante debajo de la barra en vez de 100vh */
.er-fit-body { display: flex !important; flex-direction: column !important; }
.er-fit-target { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }

@media print { .er-bar { display: none; } }