.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: 1px solid #1d5fb8;
    position: sticky;
    top: 0;
    margin-top: 0;
    z-index: 1020;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.header-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}

.header-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 10px rgba(37,99,235,0.25));
}

/* Modo oscuro: el logo con letras AZULES (imgs/apmlogo2_png.png) esta pensado para el
   fondo claro de .header-bar (var(--bg-card) en claro); sobre el mismo fondo ya oscurecido
   pierde casi todo el contraste. En vez de eso se conmuta al logo con letras BLANCAS
   (img/headerlogoapm.png) -- es a proposito que existan las dos variantes, una por tema.
   `content: url(...)` sustituye la imagen mostrada por el <img> sin tocar su atributo
   src (que sigue resolviendo con APP_URL_IMG desde header_body.php); la ruta aqui es
   relativa a ESTA hoja (css/plantilla/), no a la pagina que la carga -- mismo criterio que
   el url() de header_con_logo.css. */
:root[data-apm-theme="dark"] .header-logo {
    content: url('../../img/headerlogoapm.png');
}

.user-badge {
    background: var(--primary-tint);
    /* var(--primary-tint-text), no var(--primary): sobre --primary-tint oscuro daba ~2.2:1,
       la insignia de usuario/empresa se leía apagada. Ver --primary-tint-text en
       plantilla_base.css (sección 1). */
    color: var(--primary-tint-text);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-weight: 500;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--primary-tint-hover);
    cursor: default;
    transition: all 0.2s;
}

.user-badge:hover {
    background: var(--primary-tint-hover);
}

#show-sidebar {
    position: fixed;
    top: 0;
    left: 10px;
    z-index: 1030;
    border-radius: 0.5rem;
}