/*==================================================================================*/
/* Barra lateral de ventanas abiertas (#barra_ventanas_abiertas)                    */
/* Navegador de pestanias del "modo aplicacion": un item por ventana abierta.       */
/* Click = enfocar (resuelto en el mouseup del drag, NO onclick nativo).            */
/* Drag = reordenar con FLIP; cruzar el separador cambia el candado.                */
/*==================================================================================*/

.barra_ventanas_abiertas
{
    position: fixed;
    top: var(--altura_menu);
    left: 0;
    bottom: auto;
    width: var(--ancho_sidebar);
    height: calc(100% - var(--altura_menu));
    background: #000;
    z-index: 200;
    border-left: 1px solid #000;
    box-sizing: border-box;
    padding: 10px 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* Scroll invisible: cuando hay muchas ventanas la barra scrollea sin barra visible */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge viejo */
}

.barra_ventanas_abiertas::-webkit-scrollbar
{
    display: none;                   /* WebKit/Blink */
}

/*==================================================================================*/
/* Separador entre zona bloqueada (arriba) y no bloqueada (abajo)                    */
/*==================================================================================*/

#bva_separador
{
    flex: 0 0 auto;
    width: 26px;
    height: 0;
    margin: 3px 0 13px 0;
    border: none;
    border-top: 1px solid #555;
}

/*==================================================================================*/
/* Contenedor del item (= placeholder durante el drag)                              */
/*==================================================================================*/

.bva_ventana_con
{
    position: relative;
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    margin-bottom: 14px;
    cursor: pointer;
    border-radius: 15%;
    transition: transform 0.15s ease, height 0.35s ease, margin 0.35s ease;
    /* el fantasma (position:fixed) vive aca dentro: sin contexto de apilado extra */
}

.bva_ventana_con:hover
{
    transform: scale(1.12);
}

/*==================================================================================*/
/* Icono de la ventana                                                              */
/*==================================================================================*/

.bva_ventana
{
    position: absolute;
    inset: 0;
    width: 33px;
    height: 33px;
    border-radius: 15%;
    background: #706254;             /* gris de carga; el JS lo pisa a naranja al cargar */
    color: #000;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

.bva_ventana > span
{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    color: #000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Ventana activa: anillo interno blanco (inset para que no lo recorte el overflow) */
.bva_ventana_activa
{
    box-shadow: inset 0 0 0 2px #fff;
}

/*==================================================================================*/
/* Overlay de carga (bolitas girando sobre el icono)                                */
/*==================================================================================*/

.bva_ventana_con_carga
{
    position: absolute;
    inset: 0;
    border-radius: 15%;
    background: #706254;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bva_ventana_con_carga > .loader_giro
{
    font-size: 4px;
    margin: 0;
}

/*==================================================================================*/
/* Drag-reorder                                                                     */
/*==================================================================================*/

/* Placeholder: el contenido se "levanta" al fantasma y queda el hueco punteado.
   GOTCHA (DOC 4.1): transform:none !important -> si el :hover aplicara scale, el
   transform convertiria al placeholder en containing block de su hijo
   position:fixed (el fantasma) y este saltaria de lugar. */
.bva_arrastrando
{
    transform: none !important;
    outline: 2px dashed #555;
    outline-offset: -2px;
    border-radius: 15%;
}

.bva_arrastrando > .bva_ventana:not(.bva_fantasma),
.bva_arrastrando > .bva_ventana_con_carga
{
    visibility: hidden;
}

/* Fantasma: clon del icono en position:fixed siguiendo al cursor.
   Conserva la clase .bva_ventana (fondo/anillo/icono) + .bva_fantasma para no
   ser ocultado por la regla de arriba. */
.bva_fantasma
{
    position: fixed;
    width: 33px;
    height: 33px;
    z-index: 9999;
    margin: 0;
    pointer-events: none;
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    opacity: 0.95;
}

/*==================================================================================*/
/* Tooltip global (#bva_tooltip): UN solo div colgado del <body>.                   */
/* Si viviera dentro de la barra, el overflow del scroll lo recortaria.             */
/*==================================================================================*/

#bva_tooltip
{
    position: fixed;
    left: 50px;                      /* justo a la derecha de la barra de 45px */
    top: 0;
    z-index: 10050;
    display: none;
    max-width: 260px;
    padding: 5px 11px;
    background: #000;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 22px;
    white-space: nowrap;
    border-radius: 5px;
    pointer-events: none;
    transform: translateY(-50%);     /* centrado vertical respecto al icono */
}

#bva_tooltip.bva_tooltip_visible
{
    display: block;
}

/* Flechita a la izquierda apuntando al icono */
#bva_tooltip:before
{
    content: "";
    position: absolute;
    top: 50%;
    left: -6px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #000;
    transform: translateY(-50%);
}