/* AY2: con la ventana de ayuda acoplada a un lado, la pantalla de trabajo se estrecha para dejarle sitio en vez de
   quedar tapada: se lee la guía y se trabaja a la vez. La clase y el ancho los pone ayudaVentana.js en <body>; va en
   una hoja global porque <body> no es de ningún componente y el CSS aislado no llega hasta él. */
body.ayuda-acoplada-derecha .dashboard {
    margin-right: var(--ayuda-ancho, 440px);
}

body.ayuda-acoplada-izquierda .dashboard {
    margin-left: var(--ayuda-ancho, 440px);
}

/* El botón flotante (Crear, chat, asistente) se aparta de la ventana acoplada a la derecha en vez de taparla. */
body.ayuda-acoplada-derecha .erp-dock-host {
    margin-right: var(--ayuda-ancho, 440px);
}

/* La cabecera mide su buscador con el ancho de la VENTANA del navegador (vw), no con el que le queda: con la ayuda
   acoplada el buscador no encogía y los iconos se montaban encima. Acoplada, el buscador encoge con lo que haya. */
body.ayuda-acoplada-derecha .header-search-wrapper,
body.ayuda-acoplada-izquierda .header-search-wrapper {
    flex: 0 1 320px;
    min-width: 0;
    overflow: hidden;
}

/* Los iconos no encogen nunca: lo que cede es el buscador. */
body.ayuda-acoplada-derecha .header-actions,
body.ayuda-acoplada-izquierda .header-actions {
    flex-shrink: 0;
}

body.ayuda-acoplada-derecha .header-search,
body.ayuda-acoplada-izquierda .header-search {
    width: 100%;
    min-width: 0;
}

body.ayuda-acoplada-derecha .header-company,
body.ayuda-acoplada-izquierda .header-company {
    max-width: 200px;
}

@media (max-width: 700px) {
    body.ayuda-acoplada-derecha .dashboard,
    body.ayuda-acoplada-izquierda .dashboard {
        margin: 0;
    }

    body.ayuda-acoplada-derecha .erp-dock-host {
        margin-right: 0;
    }
}